Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: WooPay billing phone fallback #7251

Merged
merged 2 commits into from
Sep 25, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions changelog/fix-woopay-billing-phone-fallback
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fix

WooPay save my info phone number fallback for virtual products
10 changes: 4 additions & 6 deletions client/components/woopay/save-user/checkout-page-save-user.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
phoneFieldValue =
document.getElementById( 'phone' )?.value ||
document.getElementById( 'shipping-phone' )?.value ||
// in case of virtual products, the shipping phone is not available. So we also need to check the billing phone.
document.getElementById( 'billing-phone' )?.value ||
'';
} else {
// for classic checkout.
Expand Down Expand Up @@ -97,7 +99,7 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
if ( isChecked ) {
setPhoneNumber( getPhoneFieldValue() );
} else {
setPhoneNumber( null );
setPhoneNumber( '' );
if ( isBlocksCheckout ) {
sendExtensionData( true );
}
Expand Down Expand Up @@ -287,11 +289,7 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
value={ `${ viewportWidth }x${ viewportHeight }` }
/>
<PhoneNumberInput
value={
phoneNumber === null
? getPhoneFieldValue()
: phoneNumber
}
value={ phoneNumber }
onValueChange={ setPhoneNumber }
onValidationChange={ onPhoneValidationChange }
inputProps={ {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,22 @@ jest.mock( 'tracks', () => ( {
recordUserEvent: jest.fn(),
} ) );

const BlocksCheckoutEnvironmentMock = ( { children } ) => (
<div>
<button className="wc-block-components-checkout-place-order-button">
Place order
</button>
<input type="text" id="phone" value="+12015555551" />
<input type="text" id="shipping-phone" value="+12015555552" />
<input type="text" id="billing-phone" value="+12015555553" />
{ children }
</div>
);

describe( 'CheckoutPageSaveUser', () => {
beforeEach( () => {
useWooPayUser.mockImplementation( () => false );
extensionCartUpdate.mockResolvedValue( {} );

useSelectedPaymentMethod.mockImplementation( () => ( {
isWCPayChosen: true,
Expand All @@ -65,7 +78,7 @@ describe( 'CheckoutPageSaveUser', () => {
} );

afterEach( () => {
jest.restoreAllMocks();
jest.resetAllMocks();
} );

it( 'should render checkbox for saving WooPay user when user is not registered and selected payment method is card', () => {
Expand Down Expand Up @@ -137,7 +150,9 @@ describe( 'CheckoutPageSaveUser', () => {
} );

it( 'should render the save user form when checkbox is checked for blocks checkout', () => {
render( <CheckoutPageSaveUser isBlocksCheckout={ true } /> );
render( <CheckoutPageSaveUser isBlocksCheckout={ true } />, {
wrapper: BlocksCheckoutEnvironmentMock,
} );

const label = screen.getByLabelText(
'Save my information for a faster and secure checkout'
Expand Down Expand Up @@ -173,18 +188,9 @@ describe( 'CheckoutPageSaveUser', () => {
} );

it( 'call `extensionCartUpdate` on blocks checkout when checkbox is clicked', async () => {
extensionCartUpdate.mockResolvedValue( {} );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Refactored to use a wrapper that emulates the blocks checkout, since the same setup is used in multiple tests (see BlocksCheckoutEnvironmentMock above)

const placeOrderButton = document.createElement( 'button' );
placeOrderButton.classList.add(
'wc-block-components-checkout-place-order-button'
);
document.body.appendChild( placeOrderButton );
const phoneField = document.createElement( 'input' );
phoneField.setAttribute( 'id', 'phone' );
phoneField.value = '+12015555555';
document.body.appendChild( phoneField );

render( <CheckoutPageSaveUser isBlocksCheckout={ true } /> );
render( <CheckoutPageSaveUser isBlocksCheckout={ true } />, {
wrapper: BlocksCheckoutEnvironmentMock,
} );

const label = screen.getByLabelText(
'Save my information for a faster and secure checkout'
Expand All @@ -206,7 +212,7 @@ describe( 'CheckoutPageSaveUser', () => {
woopay_is_blocks: true,
woopay_viewport: '0x0',
woopay_user_phone_field: {
full: '+12015555555',
full: '+12015555551',
},
},
} )
Expand All @@ -222,28 +228,65 @@ describe( 'CheckoutPageSaveUser', () => {
data: {},
} )
);
} );

document.body.removeChild(
document.querySelector(
'button.wc-block-components-checkout-place-order-button'
)
it( 'fills the phone input on blocks checkout with phone number field fallback', async () => {
render( <CheckoutPageSaveUser isBlocksCheckout={ true } />, {
wrapper: BlocksCheckoutEnvironmentMock,
} );

const saveMyInfoCheckbox = screen.getByLabelText(
'Save my information for a faster and secure checkout'
);
// initial state
expect( saveMyInfoCheckbox ).not.toBeChecked();

// click on the checkbox to show the phone field, input should be filled with the first phone input field
userEvent.click( saveMyInfoCheckbox );
expect( saveMyInfoCheckbox ).toBeChecked();
expect( screen.getByLabelText( 'Mobile phone number' ).value ).toEqual(
'2015555551'
);
} );

it( 'call `extensionCartUpdate` on blocks checkout when checkbox is clicked with a phone without country code', async () => {
jest.clearAllMocks();
extensionCartUpdate.mockResolvedValue( {} );
const placeOrderButton = document.createElement( 'button' );
placeOrderButton.classList.add(
'wc-block-components-checkout-place-order-button'
// click on the checkbox to hide/show it again (and reset the previously entered values)
userEvent.click( saveMyInfoCheckbox );
document.getElementById( 'phone' ).remove();
await waitFor( () => expect( extensionCartUpdate ).toHaveBeenCalled() );

userEvent.click( saveMyInfoCheckbox );
expect( saveMyInfoCheckbox ).toBeChecked();
expect( screen.getByLabelText( 'Mobile phone number' ).value ).toEqual(
'2015555552'
);

// click on the checkbox to hide/show it again (and reset the previously entered values)
userEvent.click( saveMyInfoCheckbox );
document.getElementById( 'shipping-phone' ).remove();
await waitFor( () => expect( extensionCartUpdate ).toHaveBeenCalled() );

userEvent.click( saveMyInfoCheckbox );
expect( saveMyInfoCheckbox ).toBeChecked();
expect( screen.getByLabelText( 'Mobile phone number' ).value ).toEqual(
'2015555553'
);
document.body.appendChild( placeOrderButton );
const phoneField = document.createElement( 'input' );
phoneField.setAttribute( 'id', 'phone' );
phoneField.value = '2015555555';
document.body.appendChild( phoneField );

render( <CheckoutPageSaveUser isBlocksCheckout={ true } /> );
// click on the checkbox to hide/show it again (and reset the previously entered values)
userEvent.click( saveMyInfoCheckbox );
document.getElementById( 'billing-phone' ).remove();
await waitFor( () => expect( extensionCartUpdate ).toHaveBeenCalled() );

userEvent.click( saveMyInfoCheckbox );
expect( saveMyInfoCheckbox ).toBeChecked();
expect( screen.getByLabelText( 'Mobile phone number' ).value ).toEqual(
''
);
await waitFor( () => expect( extensionCartUpdate ).toHaveBeenCalled() );
} );

it( 'call `extensionCartUpdate` on blocks checkout when checkbox is clicked with a phone without country code', async () => {
render( <CheckoutPageSaveUser isBlocksCheckout={ true } />, {
wrapper: BlocksCheckoutEnvironmentMock,
} );

const label = screen.getByLabelText(
'Save my information for a faster and secure checkout'
Expand All @@ -265,7 +308,7 @@ describe( 'CheckoutPageSaveUser', () => {
woopay_is_blocks: true,
woopay_viewport: '0x0',
woopay_user_phone_field: {
full: '+12015555555',
full: '+12015555551',
},
},
} )
Expand Down
Loading