Skip to content

Commit a27e355

Browse files
frossofrosso
authored
refactor: scoping of UPE utilities at checkout (#11230)
1 parent 69698cf commit a27e355

File tree

16 files changed

+1355
-1255
lines changed

16 files changed

+1355
-1255
lines changed

‎changelog/poc-upe-utilities-scoping‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: patch
2+
Type: dev
3+
4+
refactor: scoping of UPE utilities at checkout

‎client/checkout/blocks/__tests__/payment-processor.test.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@ import PaymentProcessor from '../payment-processor';
1010
import { PaymentElement } from '@stripe/react-stripe-js';
1111
import { PAYMENT_METHOD_ERROR } from 'wcpay/checkout/constants';
1212

13-
jest.mock( 'wcpay/checkout/classic/payment-processing', () => ( {
13+
jest.mock( 'wcpay/checkout/utils/validate-elements', () => ( {
1414
validateElements: jest.fn().mockResolvedValue(),
1515
} ) );
16-
jest.mock( 'wcpay/checkout/blocks/utils', () => ( {
16+
jest.mock( '../utils', () => ( {
1717
useCustomerData: jest.fn().mockReturnValue( {} ),
18+
getStripeElementOptions: jest.fn().mockReturnValue( {} ),
1819
} ) );
1920
jest.mock( '../hooks', () => ( {
2021
usePaymentCompleteHandler: () => null,

‎client/checkout/blocks/__tests__/utils.test.js‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
/**
2+
* Internal dependencies
3+
*/
4+
import { getStripeElementOptions } from '../utils';
5+
import { getUPEConfig } from 'wcpay/utils/checkout';
6+
7+
jest.mock( 'wcpay/utils/checkout' );
8+
9+
describe( 'Blocks checkout utils', () => {
10+
describe( 'getStripeElementOptions', () => {
11+
test( 'should return options with "always" terms for cart containing subscription', () => {
12+
const shouldSavePayment = false;
13+
getUPEConfig.mockImplementation( ( argument ) => {
14+
if ( argument === 'cartContainsSubscription' ) {
15+
return true;
16+
}
17+
} );
18+
const paymentMethodsConfig = {
19+
card: {
20+
isReusable: true,
21+
},
22+
bancontact: {
23+
isReusable: true,
24+
},
25+
eps: {
26+
isReusable: true,
27+
},
28+
giropay: {
29+
isReusable: false,
30+
},
31+
};
32+
33+
const options = getStripeElementOptions(
34+
shouldSavePayment,
35+
paymentMethodsConfig
36+
);
37+
38+
expect( options ).toEqual( {
39+
fields: {
40+
billingDetails: {
41+
address: {
42+
city: 'never',
43+
country: 'never',
44+
line1: 'never',
45+
line2: 'never',
46+
postalCode: 'never',
47+
state: 'never',
48+
},
49+
email: 'never',
50+
name: 'never',
51+
phone: 'never',
52+
},
53+
},
54+
terms: { bancontact: 'always', card: 'always', eps: 'always' },
55+
wallets: {
56+
applePay: 'never',
57+
googlePay: 'never',
58+
link: 'never',
59+
},
60+
} );
61+
} );
62+
63+
test( 'should return options with "always" terms when checkbox to save payment method is checked', () => {
64+
const shouldSavePayment = true;
65+
getUPEConfig.mockImplementation( ( argument ) => {
66+
if ( argument === 'cartContainsSubscription' ) {
67+
return false;
68+
}
69+
} );
70+
const paymentMethodsConfig = {
71+
card: {
72+
isReusable: true,
73+
},
74+
bancontact: {
75+
isReusable: true,
76+
},
77+
eps: {
78+
isReusable: true,
79+
},
80+
giropay: {
81+
isReusable: false,
82+
},
83+
};
84+
85+
const options = getStripeElementOptions(
86+
shouldSavePayment,
87+
paymentMethodsConfig
88+
);
89+
90+
expect( options ).toEqual( {
91+
fields: {
92+
billingDetails: {
93+
address: {
94+
city: 'never',
95+
country: 'never',
96+
line1: 'never',
97+
line2: 'never',
98+
postalCode: 'never',
99+
state: 'never',
100+
},
101+
email: 'never',
102+
name: 'never',
103+
phone: 'never',
104+
},
105+
},
106+
terms: { bancontact: 'always', card: 'always', eps: 'always' },
107+
wallets: {
108+
applePay: 'never',
109+
googlePay: 'never',
110+
link: 'never',
111+
},
112+
} );
113+
} );
114+
115+
test( 'should return options with "never" for terms when shouldSavePayment is false and no subscription in cart', () => {
116+
const shouldSavePayment = false;
117+
const paymentMethodsConfig = {
118+
card: {
119+
isReusable: true,
120+
},
121+
};
122+
123+
getUPEConfig.mockImplementation( ( argument ) => {
124+
if ( argument === 'cartContainsSubscription' ) {
125+
return false;
126+
}
127+
} );
128+
129+
const options = getStripeElementOptions(
130+
shouldSavePayment,
131+
paymentMethodsConfig
132+
);
133+
134+
expect( options ).toEqual( {
135+
fields: {
136+
billingDetails: {
137+
address: {
138+
city: 'never',
139+
country: 'never',
140+
line1: 'never',
141+
line2: 'never',
142+
postalCode: 'never',
143+
state: 'never',
144+
},
145+
email: 'never',
146+
name: 'never',
147+
phone: 'never',
148+
},
149+
},
150+
terms: { card: 'never' },
151+
wallets: {
152+
applePay: 'never',
153+
googlePay: 'never',
154+
link: 'never',
155+
},
156+
} );
157+
} );
158+
159+
test( 'should return options with link: "auto" when both card and link are available', () => {
160+
const shouldSavePayment = false;
161+
const paymentMethodsConfig = {
162+
card: {
163+
isReusable: true,
164+
},
165+
link: {
166+
isReusable: false,
167+
},
168+
};
169+
170+
getUPEConfig.mockImplementation( ( argument ) => {
171+
if ( argument === 'cartContainsSubscription' ) {
172+
return false;
173+
}
174+
} );
175+
176+
const options = getStripeElementOptions(
177+
shouldSavePayment,
178+
paymentMethodsConfig
179+
);
180+
181+
expect( options ).toEqual( {
182+
fields: {
183+
billingDetails: {
184+
address: {
185+
city: 'never',
186+
country: 'never',
187+
line1: 'never',
188+
line2: 'never',
189+
postalCode: 'never',
190+
state: 'never',
191+
},
192+
email: 'never',
193+
name: 'never',
194+
phone: 'never',
195+
},
196+
},
197+
terms: { card: 'never' },
198+
wallets: {
199+
applePay: 'never',
200+
googlePay: 'never',
201+
link: 'auto',
202+
},
203+
} );
204+
} );
205+
} );
206+
} );

‎client/checkout/blocks/payment-processor.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,9 @@ import clsx from 'clsx';
1414
* Internal dependencies
1515
*/
1616
import { usePaymentCompleteHandler, usePaymentFailHandler } from './hooks';
17-
import { getStripeElementOptions } from 'wcpay/checkout/utils/upe';
18-
import { useCustomerData } from './utils';
17+
import { useCustomerData, getStripeElementOptions } from './utils';
1918
import { getUPEConfig } from 'wcpay/utils/checkout';
20-
import { validateElements } from 'wcpay/checkout/classic/payment-processing';
19+
import { validateElements } from 'wcpay/checkout/utils/validate-elements';
2120
import { PAYMENT_METHOD_ERROR } from 'wcpay/checkout/constants';
2221

2322
const getBillingDetails = ( billingData ) => {

‎client/checkout/blocks/utils.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { useSelect } from '@wordpress/data';
77
* Internal dependencies
88
*/
99
import { WC_STORE_CART } from 'wcpay/checkout/constants';
10+
import { getTerms, isLinkEnabled } from '../utils/upe';
11+
import { getUPEConfig } from 'wcpay/utils/checkout';
1012

1113
/**
1214
*
@@ -23,3 +25,51 @@ export const useCustomerData = () => {
2325
// Backward compatibility billingData/billingAddress
2426
return customerData.billingAddress || customerData.billingData;
2527
};
28+
29+
/**
30+
* Returns the prepared set of options needed to initialize the Stripe elements for UPE in Block Checkout.
31+
* The initial options have all the fields set to 'never' to hide them from the UPE, because all the
32+
* information is already collected in the checkout form. Additionally, the options are updated with
33+
* the terms text if needed.
34+
*
35+
* @param {boolean} shouldSavePayment Whether the payment method should be saved.
36+
* @param {Object} paymentMethodsConfig The payment methods config object.
37+
*
38+
* @return {Object} The options object for the Stripe elements.
39+
*/
40+
export const getStripeElementOptions = (
41+
shouldSavePayment,
42+
paymentMethodsConfig
43+
) => {
44+
const options = {
45+
fields: {
46+
billingDetails: {
47+
name: 'never',
48+
email: 'never',
49+
phone: 'never',
50+
address: {
51+
country: 'never',
52+
line1: 'never',
53+
line2: 'never',
54+
city: 'never',
55+
state: 'never',
56+
postalCode: 'never',
57+
},
58+
},
59+
},
60+
wallets: {
61+
applePay: 'never',
62+
googlePay: 'never',
63+
link: isLinkEnabled( paymentMethodsConfig ) ? 'auto' : 'never',
64+
},
65+
};
66+
67+
const showTerms =
68+
shouldSavePayment || getUPEConfig( 'cartContainsSubscription' )
69+
? 'always'
70+
: 'never';
71+
72+
options.terms = getTerms( paymentMethodsConfig, showTerms );
73+
74+
return options;
75+
};

‎client/checkout/classic/__tests__/payment-processing.test.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,13 @@ import {
2222
appendPaymentMethodErrorDataToForm,
2323
appendPaymentMethodIdToForm,
2424
getSelectedUPEGatewayPaymentMethod,
25-
} from 'wcpay/checkout/utils/upe';
25+
} from '../upe-utils';
2626
import { PAYMENT_METHOD_ERROR } from 'wcpay/checkout/constants';
2727

2828
jest.mock( '../../upe-styles' );
2929

30+
jest.mock( '../upe-utils' );
31+
3032
jest.mock( 'wcpay/checkout/utils/upe' );
3133

3234
jest.mock( 'wcpay/utils/checkout', () => ( {

0 commit comments

Comments
 (0)