Skip to content

Commit a9baea9

Browse files
bc-amitbc-amit
authored
Merge pull request #1793 from bc-amit/applepay-shipping-option-bug
fix(payment): PAYMENTS-8239 puts recommended shipping option first in the applepay payment modal
2 parents fc337e8 + 8e816a6 commit a9baea9

8 files changed

+335
-32
lines changed

‎packages/apple-pay-integration/src/apple-pay-button-strategy.spec.ts

+71
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,77 @@ describe('ApplePayButtonStrategy', () => {
336336
}
337337
});
338338

339+
it('gets shipping options sorted correctly with recommended option first', async () => {
340+
jest.spyOn(paymentIntegrationService, 'updateShippingAddress').mockResolvedValue(true);
341+
342+
const CheckoutButtonInitializeOptions = getApplePayButtonInitializationOptions();
343+
const newCheckout = {
344+
...getCheckout(),
345+
consignments: [
346+
{
347+
...getConsignment(),
348+
availableShippingOptions: [
349+
{
350+
...getShippingOption(),
351+
description: 'Free Shipping',
352+
additionalDescription: 'Free shipping to your order',
353+
isRecommended: false,
354+
id: '0:11111111',
355+
},
356+
{
357+
...getShippingOption(),
358+
id: '0:22222222',
359+
},
360+
],
361+
},
362+
],
363+
};
364+
365+
const freeShippingOption = newCheckout.consignments[0].availableShippingOptions[0];
366+
const flatFeeShippingOption = newCheckout.consignments[0].availableShippingOptions[1];
367+
368+
const expectedShippingMethods = [
369+
{
370+
label: flatFeeShippingOption.description,
371+
amount: flatFeeShippingOption.cost.toFixed(2),
372+
detail: flatFeeShippingOption.additionalDescription,
373+
identifier: flatFeeShippingOption.id,
374+
},
375+
{
376+
label: freeShippingOption.description,
377+
amount: freeShippingOption.cost.toFixed(2),
378+
detail: freeShippingOption.additionalDescription,
379+
identifier: freeShippingOption.id,
380+
},
381+
];
382+
383+
jest.spyOn(paymentIntegrationService.getState(), 'getCheckoutOrThrow').mockReturnValue(
384+
newCheckout,
385+
);
386+
387+
await strategy.initialize(CheckoutButtonInitializeOptions);
388+
389+
if (CheckoutButtonInitializeOptions.applepay) {
390+
const button = container.firstChild as HTMLElement;
391+
392+
if (button) {
393+
button.click();
394+
395+
const event = {
396+
shippingContact: getContactAddress(),
397+
} as ApplePayJS.ApplePayShippingContactSelectedEvent;
398+
399+
await applePaySession.onshippingcontactselected(event);
400+
401+
const actualShippingMethods =
402+
applePaySession.completeShippingContactSelection.mock.calls[0][0]
403+
.newShippingMethods;
404+
405+
expect(actualShippingMethods).toEqual(expectedShippingMethods);
406+
}
407+
}
408+
});
409+
339410
it('gets call to update shipping option in consignment fails', async () => {
340411
jest.spyOn(paymentIntegrationService, 'selectShippingOption').mockRejectedValue(false);
341412

‎packages/apple-pay-integration/src/apple-pay-button-strategy.ts

+13-8
Original file line numberDiff line numberDiff line change
@@ -267,14 +267,19 @@ export default class ApplePayButtonStrategy implements CheckoutButtonStrategy {
267267
]
268268
: [];
269269

270-
unselectedOptions?.forEach((option) =>
271-
shippingOptions.push({
272-
label: option.description,
273-
amount: `${option.cost.toFixed(decimalPlaces)}`,
274-
detail: option.additionalDescription,
275-
identifier: option.id,
276-
}),
277-
);
270+
if (unselectedOptions) {
271+
[
272+
...unselectedOptions.filter((option) => option.isRecommended),
273+
...unselectedOptions.filter((option) => !option.isRecommended),
274+
].forEach((option) =>
275+
shippingOptions.push({
276+
label: option.description,
277+
amount: `${option.cost.toFixed(decimalPlaces)}`,
278+
detail: option.additionalDescription,
279+
identifier: option.id,
280+
}),
281+
);
282+
}
278283

279284
if (!isShippingOptions(availableOptions)) {
280285
throw new Error('Shipping options not available.');

‎packages/apple-pay-integration/src/apple-pay-customer-strategy.spec.ts

+71
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,77 @@ describe('ApplePayCustomerStrategy', () => {
324324
}
325325
});
326326

327+
it('gets shipping options sorted correctly with recommended option first', async () => {
328+
jest.spyOn(paymentIntegrationService, 'updateShippingAddress').mockResolvedValue(true);
329+
330+
const CheckoutButtonInitializeOptions = getApplePayCustomerInitializationOptions();
331+
const newCheckout = {
332+
...getCheckout(),
333+
consignments: [
334+
{
335+
...getConsignment(),
336+
availableShippingOptions: [
337+
{
338+
...getShippingOption(),
339+
description: 'Free Shipping',
340+
additionalDescription: 'Free shipping to your order',
341+
isRecommended: false,
342+
id: '0:1111111',
343+
},
344+
{
345+
...getShippingOption(),
346+
id: '0:22222222',
347+
},
348+
],
349+
},
350+
],
351+
};
352+
353+
const freeShippingOption = newCheckout.consignments[0].availableShippingOptions[0];
354+
const flatFeeShippingOption = newCheckout.consignments[0].availableShippingOptions[1];
355+
356+
const expectedShippingMethods = [
357+
{
358+
label: flatFeeShippingOption.description,
359+
amount: flatFeeShippingOption.cost.toFixed(2),
360+
detail: flatFeeShippingOption.additionalDescription,
361+
identifier: flatFeeShippingOption.id,
362+
},
363+
{
364+
label: freeShippingOption.description,
365+
amount: freeShippingOption.cost.toFixed(2),
366+
detail: freeShippingOption.additionalDescription,
367+
identifier: freeShippingOption.id,
368+
},
369+
];
370+
371+
jest.spyOn(paymentIntegrationService.getState(), 'getCheckoutOrThrow').mockReturnValue(
372+
newCheckout,
373+
);
374+
375+
await strategy.initialize(CheckoutButtonInitializeOptions);
376+
377+
if (CheckoutButtonInitializeOptions.applepay) {
378+
const button = container.firstChild as HTMLElement;
379+
380+
if (button) {
381+
button.click();
382+
383+
const event = {
384+
shippingContact: getContactAddress(),
385+
} as ApplePayJS.ApplePayShippingContactSelectedEvent;
386+
387+
await applePaySession.onshippingcontactselected(event);
388+
389+
const actualShippingMethods =
390+
applePaySession.completeShippingContactSelection.mock.calls[0][0]
391+
.newShippingMethods;
392+
393+
expect(actualShippingMethods).toEqual(expectedShippingMethods);
394+
}
395+
}
396+
});
397+
327398
it('throws error if call to update address fails', async () => {
328399
jest.spyOn(paymentIntegrationService, 'updateShippingAddress').mockRejectedValue(false);
329400

‎packages/apple-pay-integration/src/apple-pay-customer-strategy.ts

+13-8
Original file line numberDiff line numberDiff line change
@@ -297,14 +297,19 @@ export default class ApplePayCustomerStrategy implements CustomerStrategy {
297297
]
298298
: [];
299299

300-
unselectedOptions?.forEach((option) =>
301-
shippingOptions.push({
302-
label: option.description,
303-
amount: `${option.cost.toFixed(decimalPlaces)}`,
304-
detail: option.additionalDescription,
305-
identifier: option.id,
306-
}),
307-
);
300+
if (unselectedOptions) {
301+
[
302+
...unselectedOptions.filter((option) => option.isRecommended),
303+
...unselectedOptions.filter((option) => !option.isRecommended),
304+
].forEach((option) =>
305+
shippingOptions.push({
306+
label: option.description,
307+
amount: `${option.cost.toFixed(decimalPlaces)}`,
308+
detail: option.additionalDescription,
309+
identifier: option.id,
310+
}),
311+
);
312+
}
308313

309314
if (!isShippingOptions(availableOptions)) {
310315
throw new Error('Shipping options not available.');

‎packages/core/src/checkout-buttons/strategies/apple-pay/apple-pay-button-strategy.spec.ts

+72
Original file line numberDiff line numberDiff line change
@@ -431,6 +431,78 @@ describe('ApplePayButtonStrategy', () => {
431431
}
432432
});
433433

434+
it('gets shipping options sorted correctly with recommended option first', async () => {
435+
const CheckoutButtonInitializeOptions = getApplePayButtonInitializationOptions();
436+
const newCheckout = {
437+
...getCheckout(),
438+
consignments: [
439+
{
440+
...getConsignment(),
441+
availableShippingOptions: [
442+
{
443+
...getShippingOption(),
444+
description: 'Free Shipping',
445+
additionalDescription: 'Free shipping to your order',
446+
isRecommended: false,
447+
id: '0:11111111',
448+
},
449+
{
450+
...getShippingOption(),
451+
id: '0:22222222',
452+
},
453+
],
454+
},
455+
],
456+
};
457+
458+
const freeShippingOption = newCheckout.consignments[0].availableShippingOptions[0];
459+
const flatFeeShippingOption = newCheckout.consignments[0].availableShippingOptions[1];
460+
461+
const expectedShippingMethods = [
462+
{
463+
label: flatFeeShippingOption.description,
464+
amount: flatFeeShippingOption.cost.toFixed(2),
465+
detail: flatFeeShippingOption.additionalDescription,
466+
identifier: flatFeeShippingOption.id,
467+
},
468+
{
469+
label: freeShippingOption.description,
470+
amount: freeShippingOption.cost.toFixed(2),
471+
detail: freeShippingOption.additionalDescription,
472+
identifier: freeShippingOption.id,
473+
},
474+
];
475+
476+
jest.spyOn(checkoutActionCreator, 'loadDefaultCheckout').mockReturnValue(() =>
477+
from([
478+
createAction(CheckoutActionType.LoadCheckoutRequested),
479+
createAction(CheckoutActionType.LoadCheckoutSucceeded, newCheckout),
480+
]),
481+
);
482+
483+
await strategy.initialize(CheckoutButtonInitializeOptions);
484+
485+
if (CheckoutButtonInitializeOptions.applepay) {
486+
const button = container.firstChild as HTMLElement;
487+
488+
if (button) {
489+
button.click();
490+
491+
const event = {
492+
shippingContact: getContactAddress(),
493+
} as ApplePayJS.ApplePayShippingContactSelectedEvent;
494+
495+
await applePaySession.onshippingcontactselected(event);
496+
497+
const actualShippingMethods =
498+
applePaySession.completeShippingContactSelection.mock.calls[0][0]
499+
.newShippingMethods;
500+
501+
expect(actualShippingMethods).toEqual(expectedShippingMethods);
502+
}
503+
}
504+
});
505+
434506
it('gets call to update shipping option in consignment fails', async () => {
435507
jest.spyOn(consignmentActionCreator, 'selectShippingOption').mockRejectedValue(false);
436508

‎packages/core/src/checkout-buttons/strategies/apple-pay/apple-pay-button-strategy.ts

+13-8
Original file line numberDiff line numberDiff line change
@@ -282,14 +282,19 @@ export default class ApplePayButtonStrategy implements CheckoutButtonStrategy {
282282
]
283283
: [];
284284

285-
unselectedOptions?.forEach((option) =>
286-
shippingOptions.push({
287-
label: option.description,
288-
amount: `${option.cost.toFixed(decimalPlaces)}`,
289-
detail: option.additionalDescription,
290-
identifier: option.id,
291-
}),
292-
);
285+
if (unselectedOptions) {
286+
[
287+
...unselectedOptions.filter((option) => option.isRecommended),
288+
...unselectedOptions.filter((option) => !option.isRecommended),
289+
].forEach((option) =>
290+
shippingOptions.push({
291+
label: option.description,
292+
amount: `${option.cost.toFixed(decimalPlaces)}`,
293+
detail: option.additionalDescription,
294+
identifier: option.id,
295+
}),
296+
);
297+
}
293298

294299
if (!isShippingOptions(availableOptions)) {
295300
throw new Error('Shipping options not available.');

‎packages/core/src/customer/strategies/apple-pay/apple-pay-customer-strategy.spec.ts

+69
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,75 @@ describe('ApplePayCustomerStrategy', () => {
348348
}
349349
});
350350

351+
it('gets shipping options sorted correctly with recommended option first', async () => {
352+
const CheckoutButtonInitializeOptions = getApplePayCustomerInitializationOptions();
353+
const newCheckout = {
354+
...getCheckout(),
355+
consignments: [
356+
{
357+
...getConsignment(),
358+
availableShippingOptions: [
359+
{
360+
...getShippingOption(),
361+
description: 'Free Shipping',
362+
additionalDescription: 'Free shipping to your order',
363+
isRecommended: false,
364+
id: '0:1111111',
365+
},
366+
{
367+
...getShippingOption(),
368+
id: '0:22222222',
369+
},
370+
],
371+
},
372+
],
373+
};
374+
375+
const freeShippingOption = newCheckout.consignments[0].availableShippingOptions[0];
376+
const flatFeeShippingOption = newCheckout.consignments[0].availableShippingOptions[1];
377+
378+
const expectedShippingMethods = [
379+
{
380+
label: flatFeeShippingOption.description,
381+
amount: flatFeeShippingOption.cost.toFixed(2),
382+
detail: flatFeeShippingOption.additionalDescription,
383+
identifier: flatFeeShippingOption.id,
384+
},
385+
{
386+
label: freeShippingOption.description,
387+
amount: freeShippingOption.cost.toFixed(2),
388+
detail: freeShippingOption.additionalDescription,
389+
identifier: freeShippingOption.id,
390+
},
391+
];
392+
393+
jest.spyOn(store.getState().checkout, 'getCheckoutOrThrow').mockReturnValue(
394+
newCheckout,
395+
);
396+
397+
await strategy.initialize(CheckoutButtonInitializeOptions);
398+
399+
if (CheckoutButtonInitializeOptions.applepay) {
400+
const button = container.firstChild as HTMLElement;
401+
402+
if (button) {
403+
button.click();
404+
405+
const event = {
406+
shippingContact: getContactAddress(),
407+
} as ApplePayJS.ApplePayShippingContactSelectedEvent;
408+
409+
await applePaySession.onshippingcontactselected(event);
410+
411+
const actualShippingMethods =
412+
applePaySession.completeShippingContactSelection.mock.calls[0][0]
413+
.newShippingMethods;
414+
415+
expect(actualShippingMethods).toEqual(expectedShippingMethods);
416+
}
417+
}
418+
});
419+
351420
it('throws error if call to update address fails', async () => {
352421
jest.spyOn(consignmentActionCreator, 'updateAddress').mockRejectedValue(false);
353422

0 commit comments

Comments
 (0)