Skip to content

Commit 7a50871

Browse files
annemirasolannemirasol
authored
Amazon Pay ECE: add to block cart and checkout (#3837)
* Add Amazon Pay to block cart and checkout * Add changelog and readme entries
1 parent 7f555b2 commit 7a50871

File tree

12 files changed

+262
-106
lines changed

12 files changed

+262
-106
lines changed

‎changelog.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
*** Changelog ***
22

33
= 9.2.0 - xxxx-xx-xx =
4+
* Add - Add Amazon Pay to block cart and block checkout.
45
* Fix - Remove intentional delay when displaying tax-related notice for express checkout, causing click event to time out.
56
* Fix - Fixes an issue when saving Bancontact and iDEAL methods with SEPA Direct Debit disabled.
67
* Dev - Introduces new payment method constants for the express methods: Google Pay, Apple Pay, Link, and Amazon Pay.

‎client/blocks/__tests__/index.test.js

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { render } from '@testing-library/react';
2+
import {
3+
expressCheckoutElementAmazonPay,
4+
expressCheckoutElementApplePay,
5+
expressCheckoutElementGooglePay,
6+
expressCheckoutElementStripeLink,
7+
} from 'wcstripe/blocks/express-checkout';
8+
import { PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT } from 'wcstripe/blocks/express-checkout/constants';
9+
import {
10+
AmazonPayPreview,
11+
ApplePayPreview,
12+
GooglePayPreview,
13+
StripeLinkPreview,
14+
} from 'wcstripe/blocks/express-checkout/express-button-previews';
15+
import { loadStripe } from 'wcstripe/blocks/load-stripe';
16+
import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
17+
import { checkPaymentMethodIsAvailable } from 'wcstripe/express-checkout/utils/check-payment-method-availability';
18+
import { ExpressCheckoutContainer } from 'wcstripe/blocks/express-checkout/express-checkout-container';
19+
import {
20+
EXPRESS_PAYMENT_METHOD_SETTING_AMAZON_PAY,
21+
EXPRESS_PAYMENT_METHOD_SETTING_APPLE_PAY,
22+
EXPRESS_PAYMENT_METHOD_SETTING_GOOGLE_PAY,
23+
EXPRESS_PAYMENT_METHOD_SETTING_LINK,
24+
} from 'wcstripe/stripe-utils/constants';
25+
26+
jest.mock( 'wcstripe/blocks/load-stripe' );
27+
jest.mock( 'wcstripe/blocks/utils' );
28+
jest.mock(
29+
'wcstripe/express-checkout/utils/check-payment-method-availability'
30+
);
31+
32+
// Mock the express button previews
33+
jest.mock( 'wcstripe/blocks/express-checkout/express-button-previews', () => ( {
34+
AmazonPayPreview: jest.fn( () => <div /> ),
35+
ApplePayPreview: jest.fn( () => <div /> ),
36+
GooglePayPreview: jest.fn( () => <div /> ),
37+
StripeLinkPreview: jest.fn( () => <div /> ),
38+
} ) );
39+
40+
// Mock the ExpressCheckoutContainer component
41+
jest.mock( '../express-checkout/express-checkout-container', () => ( {
42+
ExpressCheckoutContainer: jest.fn( () => <div /> ),
43+
} ) );
44+
45+
describe( 'expressCheckoutElement', () => {
46+
const api = {};
47+
48+
beforeEach( () => {
49+
loadStripe.mockReturnValue( Promise.resolve( {} ) );
50+
getBlocksConfiguration.mockReturnValue( {
51+
shouldShowExpressCheckoutButton: true,
52+
supports: [],
53+
isAdmin: false,
54+
} );
55+
checkPaymentMethodIsAvailable.mockImplementation(
56+
( _method, _api, _cart, resolve ) => {
57+
resolve( true );
58+
}
59+
);
60+
} );
61+
62+
const testCases = [
63+
{
64+
fn: expressCheckoutElementAmazonPay,
65+
paymentMethod: EXPRESS_PAYMENT_METHOD_SETTING_AMAZON_PAY,
66+
editorElement: AmazonPayPreview,
67+
title: 'WooCommerce Stripe - Amazon Pay',
68+
},
69+
{
70+
fn: expressCheckoutElementApplePay,
71+
paymentMethod: EXPRESS_PAYMENT_METHOD_SETTING_APPLE_PAY,
72+
editorElement: ApplePayPreview,
73+
title: 'WooCommerce Stripe - Apple Pay',
74+
},
75+
{
76+
fn: expressCheckoutElementGooglePay,
77+
paymentMethod: EXPRESS_PAYMENT_METHOD_SETTING_GOOGLE_PAY,
78+
editorElement: GooglePayPreview,
79+
title: 'WooCommerce Stripe - Google Pay',
80+
},
81+
{
82+
fn: expressCheckoutElementStripeLink,
83+
paymentMethod: EXPRESS_PAYMENT_METHOD_SETTING_LINK,
84+
editorElement: StripeLinkPreview,
85+
title: 'WooCommerce Stripe - Link by Stripe',
86+
},
87+
];
88+
89+
testCases.forEach( ( { fn, paymentMethod, editorElement, title } ) => {
90+
it( `should return the correct config for ${ paymentMethod }`, async () => {
91+
const config = fn( api );
92+
93+
expect( config.name ).toBe(
94+
`${ PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT }_${ paymentMethod }`
95+
);
96+
expect( config.title ).toBe( title );
97+
98+
render( config.content );
99+
expect( ExpressCheckoutContainer ).toHaveBeenCalledWith(
100+
expect.objectContaining( {
101+
expressPaymentMethod: paymentMethod,
102+
} ),
103+
{}
104+
);
105+
106+
render( config.edit );
107+
expect( editorElement ).toHaveBeenCalledTimes( 1 );
108+
109+
expect( config.paymentMethodId ).toBe(
110+
PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT
111+
);
112+
expect( config.gatewayId ).toBe( 'stripe' );
113+
} );
114+
} );
115+
} );

‎client/blocks/express-checkout/express-button-previews/index.js

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import classNames from 'classnames';
2-
import googlePayIcon from '../../../payment-method-icons/google-pay/icon-white.svg';
2+
import amazonPayIcon from '../../../payment-method-icons/amazon-pay/icon.svg';
33
import applePayIcon from '../../../payment-method-icons/apple-pay/icon-white.svg';
4+
import googlePayIcon from '../../../payment-method-icons/google-pay/icon-white.svg';
45
import stripeLinkIcon from '../../../payment-method-icons/link/icon-black.svg';
56
import './style.scss';
67

@@ -24,14 +25,14 @@ const PaymentButtonPreview = ( { icon, className } ) => (
2425
);
2526

2627
/**
27-
* GooglePayPreview Component
28+
* AmazonPayPreview Component
2829
*
2930
* @return {JSX.Element} The rendered component.
3031
*/
31-
export const GooglePayPreview = () => (
32+
export const AmazonPayPreview = () => (
3233
<PaymentButtonPreview
33-
icon={ googlePayIcon }
34-
className="wc-stripe-google-pay-preview"
34+
icon={ amazonPayIcon }
35+
className="wc-stripe-amazon-pay-preview"
3536
/>
3637
);
3738

@@ -47,6 +48,18 @@ export const ApplePayPreview = () => (
4748
/>
4849
);
4950

51+
/**
52+
* GooglePayPreview Component
53+
*
54+
* @return {JSX.Element} The rendered component.
55+
*/
56+
export const GooglePayPreview = () => (
57+
<PaymentButtonPreview
58+
icon={ googlePayIcon }
59+
className="wc-stripe-google-pay-preview"
60+
/>
61+
);
62+
5063
/**
5164
* StripeLinkPreview Component
5265
*

‎client/blocks/express-checkout/express-button-previews/style.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@
1212
cursor: pointer;
1313
filter: opacity(0.7);
1414
}
15+
/* Amazon Pay Overrides */
16+
&.wc-stripe-amazon-pay-preview {
17+
background-color: #ffd814;
18+
img {
19+
height: 40px;
20+
}
21+
}
1522
/* Stripe Link Overrides */
1623
&.wc-stripe-link-preview {
1724
background-color: #00d66f;

0 commit comments

Comments
 (0)