Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 74dd439

Browse files
Alex Floriscagithub-actions[bot]opr
authored
Refactor the payment status (#7666)
* Add actions and selectors for new paymemt status * Remove set_complete from reducer * Replace all usages of getCurrentStatus with specific sepectors * Replace all `setCurrentStatus` with individual actions * Update docs * Removed currentStatus * bot: update checkstyle.xml * Update docs/third-party-developers/extensibility/data-store/payment.md Co-authored-by: Thomas Roberts <[email protected]> * Address Thomas feedback * Add link to deprecated message Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Thomas Roberts <[email protected]>
1 parent 04f3f4f commit 74dd439

File tree

19 files changed

+392
-221
lines changed

19 files changed

+392
-221
lines changed

‎assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,22 @@ export const usePaymentMethodInterface = (): PaymentMethodInterface => {
5050
isCalculating: store.isCalculating(),
5151
};
5252
} );
53-
const { currentStatus, activePaymentMethod, shouldSavePayment } = useSelect(
53+
const { paymentStatus, activePaymentMethod, shouldSavePayment } = useSelect(
5454
( select ) => {
5555
const store = select( PAYMENT_STORE_KEY );
5656

5757
return {
58-
currentStatus: store.getCurrentStatus(),
58+
// The paymentStatus is exposed to third parties via the payment method interface so the API must not be changed
59+
paymentStatus: {
60+
isPristine: store.isPaymentPristine(),
61+
isStarted: store.isPaymentStarted(),
62+
isProcessing: store.isPaymentProcessing(),
63+
isFinished: store.isPaymentFinished(),
64+
hasError: store.hasPaymentError(),
65+
hasFailed: store.isPaymentFailed(),
66+
isSuccessful: store.isPaymentSuccess(),
67+
isDoingExpressPayment: store.isExpressPaymentMethodActive(),
68+
},
5969
activePaymentMethod: store.getActivePaymentMethod(),
6070
shouldSavePayment: store.getShouldSavePaymentMethod(),
6171
};
@@ -168,7 +178,7 @@ export const usePaymentMethodInterface = (): PaymentMethodInterface => {
168178
onShippingRateSuccess,
169179
},
170180
onSubmit,
171-
paymentStatus: currentStatus,
181+
paymentStatus,
172182
setExpressPaymentError: deprecatedSetExpressPaymentError,
173183
shippingData: {
174184
isSelectingRate,

‎assets/js/base/context/providers/cart-checkout/checkout-processor.js‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,8 @@ const CheckoutProcessor = () => {
7676
activePaymentMethod,
7777
paymentMethodData,
7878
isExpressPaymentMethodActive,
79-
currentPaymentStatus,
79+
hasPaymentError,
80+
isPaymentSuccess,
8081
shouldSavePayment,
8182
} = useSelect( ( select ) => {
8283
const store = select( PAYMENT_STORE_KEY );
@@ -85,7 +86,8 @@ const CheckoutProcessor = () => {
8586
activePaymentMethod: store.getActivePaymentMethod(),
8687
paymentMethodData: store.getPaymentMethodData(),
8788
isExpressPaymentMethodActive: store.isExpressPaymentMethodActive(),
88-
currentPaymentStatus: store.getCurrentStatus(),
89+
hasPaymentError: store.hasPaymentError(),
90+
isPaymentSuccess: store.isPaymentSuccess(),
8991
shouldSavePayment: store.getShouldSavePaymentMethod(),
9092
};
9193
}, [] );
@@ -107,13 +109,13 @@ const CheckoutProcessor = () => {
107109

108110
const checkoutWillHaveError =
109111
( hasValidationErrors() && ! isExpressPaymentMethodActive ) ||
110-
currentPaymentStatus.hasError ||
112+
hasPaymentError ||
111113
shippingErrorStatus.hasError;
112114

113115
const paidAndWithoutErrors =
114116
! checkoutHasError &&
115117
! checkoutWillHaveError &&
116-
( currentPaymentStatus.isSuccessful || ! cartNeedsPayment ) &&
118+
( isPaymentSuccess || ! cartNeedsPayment ) &&
117119
checkoutIsProcessing;
118120

119121
// Determine if checkout has an error.
@@ -145,7 +147,7 @@ const CheckoutProcessor = () => {
145147
if ( hasValidationErrors() ) {
146148
return false;
147149
}
148-
if ( currentPaymentStatus.hasError ) {
150+
if ( hasPaymentError ) {
149151
return {
150152
errorMessage: __(
151153
'There was a problem with your payment option.',
@@ -163,11 +165,7 @@ const CheckoutProcessor = () => {
163165
}
164166

165167
return true;
166-
}, [
167-
hasValidationErrors,
168-
currentPaymentStatus.hasError,
169-
shippingErrorStatus.hasError,
170-
] );
168+
}, [ hasValidationErrors, hasPaymentError, shippingErrorStatus.hasError ] );
171169

172170
// Validate the checkout using the CHECKOUT_VALIDATION_BEFORE_PROCESSING event
173171
useEffect( () => {

‎assets/js/base/context/providers/cart-checkout/payment-events/index.tsx‎

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,16 @@ export const PaymentEventsProvider = ( {
6262
isCalculating: store.isCalculating(),
6363
};
6464
} );
65-
const { currentStatus } = useSelect( ( select ) => {
66-
const store = select( PAYMENT_STORE_KEY );
65+
const { isPaymentSuccess, isPaymentFinished, isPaymentProcessing } =
66+
useSelect( ( select ) => {
67+
const store = select( PAYMENT_STORE_KEY );
6768

68-
return {
69-
currentStatus: store.getCurrentStatus(),
70-
};
71-
} );
69+
return {
70+
isPaymentSuccess: store.isPaymentSuccess(),
71+
isPaymentFinished: store.isPaymentFinished(),
72+
isPaymentProcessing: store.isPaymentProcessing(),
73+
};
74+
} );
7275

7376
const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' );
7477
const { setValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
@@ -82,7 +85,8 @@ export const PaymentEventsProvider = ( {
8285
}, [ observers ] );
8386

8487
const {
85-
__internalSetPaymentStatus,
88+
__internalSetPaymentProcessing,
89+
__internalSetPaymentPristine,
8690
__internalSetPaymentMethodData,
8791
__internalEmitPaymentProcessingEvent,
8892
} = useDispatch( PAYMENT_STORE_KEY );
@@ -94,56 +98,47 @@ export const PaymentEventsProvider = ( {
9498
checkoutIsProcessing &&
9599
! checkoutHasError &&
96100
! checkoutIsCalculating &&
97-
! currentStatus.isFinished
101+
! isPaymentFinished
98102
) {
99-
__internalSetPaymentStatus( { isProcessing: true } );
103+
__internalSetPaymentProcessing();
100104
}
101105
}, [
102106
checkoutIsProcessing,
103107
checkoutHasError,
104108
checkoutIsCalculating,
105-
currentStatus.isFinished,
106-
__internalSetPaymentStatus,
109+
isPaymentFinished,
110+
__internalSetPaymentProcessing,
107111
] );
108112

109113
// When checkout is returned to idle, set payment status to pristine but only if payment status is already not finished.
110114
useEffect( () => {
111-
if ( checkoutIsIdle && ! currentStatus.isSuccessful ) {
112-
__internalSetPaymentStatus( { isPristine: true } );
115+
if ( checkoutIsIdle && ! isPaymentSuccess ) {
116+
__internalSetPaymentPristine();
113117
}
114-
}, [
115-
checkoutIsIdle,
116-
currentStatus.isSuccessful,
117-
__internalSetPaymentStatus,
118-
] );
118+
}, [ checkoutIsIdle, isPaymentSuccess, __internalSetPaymentPristine ] );
119119

120120
// if checkout has an error sync payment status back to pristine.
121121
useEffect( () => {
122-
if ( checkoutHasError && currentStatus.isSuccessful ) {
123-
__internalSetPaymentStatus( { isPristine: true } );
122+
if ( checkoutHasError && isPaymentSuccess ) {
123+
__internalSetPaymentPristine();
124124
}
125-
}, [
126-
checkoutHasError,
127-
currentStatus.isSuccessful,
128-
__internalSetPaymentStatus,
129-
] );
125+
}, [ checkoutHasError, isPaymentSuccess, __internalSetPaymentPristine ] );
130126

131127
// Emit the payment processing event
132128
useEffect( () => {
133129
// Note: the nature of this event emitter is that it will bail on any
134130
// observer that returns a response that !== true. However, this still
135131
// allows for other observers that return true for continuing through
136132
// to the next observer (or bailing if there's a problem).
137-
if ( currentStatus.isProcessing ) {
133+
if ( isPaymentProcessing ) {
138134
__internalEmitPaymentProcessingEvent(
139135
currentObservers.current,
140136
setValidationErrors
141137
);
142138
}
143139
}, [
144-
currentStatus.isProcessing,
140+
isPaymentProcessing,
145141
setValidationErrors,
146-
__internalSetPaymentStatus,
147142
removeNotice,
148143
createErrorNotice,
149144
setBillingAddress,

‎assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,10 @@ const ExpressPaymentMethods = () => {
3636
);
3737
const {
3838
__internalSetActivePaymentMethod,
39-
__internalSetPaymentStatus,
39+
__internalSetPaymentStarted,
40+
__internalSetPaymentPristine,
41+
__internalSetPaymentError,
42+
__internalSetPaymentMethodData,
4043
__internalSetExpressPaymentError,
4144
} = useDispatch( PAYMENT_STORE_KEY );
4245
const { paymentMethods } = useExpressPaymentMethods();
@@ -55,14 +58,14 @@ const ExpressPaymentMethods = () => {
5558
( paymentMethodId ) => () => {
5659
previousActivePaymentMethod.current = activePaymentMethod;
5760
previousPaymentMethodData.current = paymentMethodData;
58-
__internalSetPaymentStatus( { isStarted: true } );
61+
__internalSetPaymentStarted();
5962
__internalSetActivePaymentMethod( paymentMethodId );
6063
},
6164
[
6265
activePaymentMethod,
6366
paymentMethodData,
6467
__internalSetActivePaymentMethod,
65-
__internalSetPaymentStatus,
68+
__internalSetPaymentStarted,
6669
]
6770
);
6871

@@ -72,12 +75,12 @@ const ExpressPaymentMethods = () => {
7275
* This restores the active method and returns the state to pristine.
7376
*/
7477
const onExpressPaymentClose = useCallback( () => {
75-
__internalSetPaymentStatus( { isPristine: true } );
78+
__internalSetPaymentPristine();
7679
__internalSetActivePaymentMethod(
7780
previousActivePaymentMethod.current,
7881
previousPaymentMethodData.current
7982
);
80-
}, [ __internalSetActivePaymentMethod, __internalSetPaymentStatus ] );
83+
}, [ __internalSetActivePaymentMethod, __internalSetPaymentPristine ] );
8184

8285
/**
8386
* onExpressPaymentError should be triggered when the express payment process errors.
@@ -86,7 +89,8 @@ const ExpressPaymentMethods = () => {
8689
*/
8790
const onExpressPaymentError = useCallback(
8891
( errorMessage ) => {
89-
__internalSetPaymentStatus( { hasError: true }, errorMessage );
92+
__internalSetPaymentError();
93+
__internalSetPaymentMethodData( errorMessage );
9094
__internalSetExpressPaymentError( errorMessage );
9195
__internalSetActivePaymentMethod(
9296
previousActivePaymentMethod.current,
@@ -95,7 +99,8 @@ const ExpressPaymentMethods = () => {
9599
},
96100
[
97101
__internalSetActivePaymentMethod,
98-
__internalSetPaymentStatus,
102+
__internalSetPaymentError,
103+
__internalSetPaymentMethodData,
99104
__internalSetExpressPaymentError,
100105
]
101106
);

‎assets/js/data/payment/action-types.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
export enum ACTION_TYPES {
2+
SET_PAYMENT_PRISTINE = 'SET_PAYMENT_PRISTINE',
3+
SET_PAYMENT_STARTED = 'SET_PAYMENT_STARTED',
4+
SET_PAYMENT_PROCESSING = 'SET_PAYMENT_PROCESSING',
5+
SET_PAYMENT_FAILED = 'SET_PAYMENT_FAILED',
6+
SET_PAYMENT_ERROR = 'SET_PAYMENT_ERROR',
7+
SET_PAYMENT_SUCCESS = 'SET_PAYMENT_SUCCESS',
28
SET_PAYMENT_METHODS_INITIALIZED = 'SET_PAYMENT_METHODS_INITIALIZED',
39
SET_EXPRESS_PAYMENT_METHODS_INITIALIZED = 'SET_EXPRESS_PAYMENT_METHODS_INITIALIZED',
410
SET_ACTIVE_PAYMENT_METHOD = 'SET_ACTIVE_PAYMENT_METHOD',
@@ -7,7 +13,6 @@ export enum ACTION_TYPES {
713
SET_AVAILABLE_EXPRESS_PAYMENT_METHODS = 'SET_AVAILABLE_EXPRESS_PAYMENT_METHODS',
814
REMOVE_AVAILABLE_PAYMENT_METHOD = 'REMOVE_AVAILABLE_PAYMENT_METHOD',
915
REMOVE_AVAILABLE_EXPRESS_PAYMENT_METHOD = 'REMOVE_AVAILABLE_EXPRESS_PAYMENT_METHOD',
10-
SET_PAYMENT_STATUS = 'SET_PAYMENT_STATUS',
1116
INITIALIZE_PAYMENT_METHODS = 'INITIALIZE_PAYMENT_METHODS',
1217
SET_PAYMENT_METHOD_DATA = 'SET_PAYMENT_METHOD_DATA',
1318
}

‎assets/js/data/payment/actions.ts‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,32 @@ import {
1212
import { ACTION_TYPES } from './action-types';
1313
import { checkPaymentMethodsCanPay } from './check-payment-methods';
1414
import { setDefaultPaymentMethod } from './set-default-payment-method';
15-
import { PaymentStatus } from './types';
1615

1716
// `Thunks are functions that can be dispatched, similar to actions creators
1817
export * from './thunks';
1918

20-
/**
21-
* Set the status of the payment
22-
*
23-
* @param status An object that holds properties representing different status values
24-
* @param paymentMethodData A config object for the payment method being used
25-
*/
26-
export const __internalSetPaymentStatus = (
27-
status: PaymentStatus,
28-
paymentMethodData?: Record< string, unknown >
29-
) => ( {
30-
type: ACTION_TYPES.SET_PAYMENT_STATUS,
31-
status,
32-
paymentMethodData,
19+
export const __internalSetPaymentPristine = () => ( {
20+
type: ACTION_TYPES.SET_PAYMENT_PRISTINE,
21+
} );
22+
23+
export const __internalSetPaymentStarted = () => ( {
24+
type: ACTION_TYPES.SET_PAYMENT_STARTED,
25+
} );
26+
27+
export const __internalSetPaymentProcessing = () => ( {
28+
type: ACTION_TYPES.SET_PAYMENT_PROCESSING,
29+
} );
30+
31+
export const __internalSetPaymentFailed = () => ( {
32+
type: ACTION_TYPES.SET_PAYMENT_FAILED,
33+
} );
34+
35+
export const __internalSetPaymentError = () => ( {
36+
type: ACTION_TYPES.SET_PAYMENT_ERROR,
37+
} );
38+
39+
export const __internalSetPaymentSuccess = () => ( {
40+
type: ACTION_TYPES.SET_PAYMENT_SUCCESS,
3341
} );
3442

3543
/**

‎assets/js/data/payment/constants.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,4 @@ export enum STATUS {
77
ERROR = 'has_error',
88
FAILED = 'failed',
99
SUCCESS = 'success',
10-
COMPLETE = 'complete',
1110
}

‎assets/js/data/payment/default-state.ts‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,10 @@ import {
1212
* Internal dependencies
1313
*/
1414
import { SavedPaymentMethod } from './types';
15+
import { STATUS as PAYMENT_STATUS } from './constants';
1516

1617
export interface PaymentMethodDataState {
17-
currentStatus: {
18-
isPristine: boolean;
19-
isStarted: boolean;
20-
isProcessing: boolean;
21-
isFinished: boolean;
22-
hasError: boolean;
23-
hasFailed: boolean;
24-
isSuccessful: boolean;
25-
};
18+
status: string;
2619
activePaymentMethod: string;
2720
activeSavedToken: string;
2821
// Avilable payment methods are payment methods which have been validated and can make payment
@@ -37,15 +30,7 @@ export interface PaymentMethodDataState {
3730
shouldSavePaymentMethod: boolean;
3831
}
3932
export const defaultPaymentMethodDataState: PaymentMethodDataState = {
40-
currentStatus: {
41-
isPristine: true,
42-
isStarted: false,
43-
isProcessing: false,
44-
isFinished: false,
45-
hasError: false,
46-
hasFailed: false,
47-
isSuccessful: false,
48-
},
33+
status: PAYMENT_STATUS.PRISTINE,
4934
activePaymentMethod: '',
5035
activeSavedToken: '',
5136
availablePaymentMethods: {},

0 commit comments

Comments
 (0)