Remove paymentStatuses, isDoingExpressPayment and isExpressPaymentMethodActive from the payment store state (https://github.com/woocommerce/woocommerce-blocks/pull/7643)

* Remove isExpressPaymentMethodActive and paymentStatus.isDoingExpressPayment from the payment store

* Remove uneccessary paymentStatuses key from the payments store
This commit is contained in:
Alex Florisca 2022-11-10 16:15:31 +00:00 committed by GitHub
parent c52dc91f67
commit 9fa34effce
8 changed files with 58 additions and 96 deletions

View File

@ -35,13 +35,14 @@ export const useCheckoutSubmit = () => {
hasError: store.hasError(),
};
} );
const { currentStatus: paymentStatus, activePaymentMethod } = useSelect(
const { activePaymentMethod, isExpressPaymentMethodActive } = useSelect(
( select ) => {
const store = select( PAYMENT_STORE_KEY );
return {
currentStatus: store.getCurrentStatus(),
activePaymentMethod: store.getActivePaymentMethod(),
isExpressPaymentMethodActive:
store.isExpressPaymentMethodActive(),
};
}
);
@ -65,7 +66,7 @@ export const useCheckoutSubmit = () => {
submitButtonText: label,
onSubmit,
isCalculating,
isDisabled: isProcessing || paymentStatus.isDoingExpressPayment,
isDisabled: isProcessing || isExpressPaymentMethodActive,
waitingForProcessing,
waitingForRedirect,
};

View File

@ -37,13 +37,9 @@ const CartExpressPayment = () => {
hasError: store.hasError(),
};
} );
const { paymentStatus } = useSelect( ( select ) => {
const store = select( PAYMENT_STORE_KEY );
return {
paymentStatus: store.getCurrentStatus(),
};
} );
const isExpressPaymentMethodActive = useSelect( ( select ) =>
select( PAYMENT_STORE_KEY ).isExpressPaymentMethodActive()
);
if (
! isInitialized ||
@ -65,7 +61,7 @@ const CartExpressPayment = () => {
isLoading={
isCalculating ||
checkoutProcessing ||
paymentStatus.isDoingExpressPayment
isExpressPaymentMethodActive
}
>
<div className="wc-block-components-express-payment wc-block-components-express-payment--cart">

View File

@ -41,7 +41,7 @@ const CheckoutExpressPayment = () => {
const {
availableExpressPaymentMethods,
expressPaymentMethodsInitialized,
paymentStatus,
isExpressPaymentMethodActive,
} = useSelect( ( select ) => {
const store = select( PAYMENT_STORE_KEY );
return {
@ -49,7 +49,7 @@ const CheckoutExpressPayment = () => {
store.getAvailableExpressPaymentMethods(),
expressPaymentMethodsInitialized:
store.expressPaymentMethodsInitialized(),
paymentStatus: store.getCurrentStatus(),
isExpressPaymentMethodActive: store.isExpressPaymentMethodActive(),
};
} );
const { isEditor } = useEditorContext();
@ -84,7 +84,7 @@ const CheckoutExpressPayment = () => {
isLoading={
isCalculating ||
checkoutProcessing ||
paymentStatus.isDoingExpressPayment
isExpressPaymentMethodActive
}
>
<div className="wc-block-components-express-payment wc-block-components-express-payment--checkout">

View File

@ -12,10 +12,8 @@ import {
* Internal dependencies
*/
import { SavedPaymentMethod } from './types';
import { STATUS as PAYMENT_STATUS } from './constants';
export interface PaymentMethodDataState {
paymentStatuses: typeof PAYMENT_STATUS;
currentStatus: {
isPristine: boolean;
isStarted: boolean;
@ -24,7 +22,6 @@ export interface PaymentMethodDataState {
hasError: boolean;
hasFailed: boolean;
isSuccessful: boolean;
isDoingExpressPayment: boolean;
};
activePaymentMethod: string;
activeSavedToken: string;
@ -38,10 +35,8 @@ export interface PaymentMethodDataState {
paymentMethodsInitialized: boolean;
expressPaymentMethodsInitialized: boolean;
shouldSavePaymentMethod: boolean;
isExpressPaymentMethodActive: boolean;
}
export const defaultPaymentMethodDataState: PaymentMethodDataState = {
paymentStatuses: PAYMENT_STATUS,
currentStatus: {
isPristine: true,
isStarted: false,
@ -50,7 +45,6 @@ export const defaultPaymentMethodDataState: PaymentMethodDataState = {
hasError: false,
hasFailed: false,
isSuccessful: false,
isDoingExpressPayment: false,
},
activePaymentMethod: '',
activeSavedToken: '',
@ -63,5 +57,4 @@ export const defaultPaymentMethodDataState: PaymentMethodDataState = {
paymentMethodsInitialized: false,
expressPaymentMethodsInitialized: false,
shouldSavePaymentMethod: false,
isExpressPaymentMethodActive: false,
};

View File

@ -47,10 +47,6 @@ const reducer: Reducer< PaymentMethodDataState > = (
action.status.hasError ||
action.status.hasFailed ||
action.status.isSuccessful,
isDoingExpressPayment:
! action.status.isPristine &&
! state.currentStatus.isPristine &&
state.isExpressPaymentMethodActive,
},
paymentMethodData:
action.paymentMethodData || state.paymentMethodData,

View File

@ -6,13 +6,11 @@ import deepFreeze from 'deep-freeze';
/**
* Internal dependencies
*/
import { STATUS as PAYMENT_STATUS } from '../constants';
import reducer from '../reducers';
import { ACTION_TYPES } from '../action-types';
describe( 'paymentMethodDataReducer', () => {
const originalState = deepFreeze( {
paymentStatuses: PAYMENT_STATUS,
currentStatus: {
isPristine: true,
isStarted: false,
@ -21,14 +19,12 @@ describe( 'paymentMethodDataReducer', () => {
hasError: false,
hasFailed: false,
isSuccessful: false,
isDoingExpressPayment: false,
},
availablePaymentMethods: {},
availableExpressPaymentMethods: {},
paymentMethodData: {},
paymentMethodsInitialized: false,
expressPaymentMethodsInitialized: false,
isExpressPaymentMethodActive: false,
shouldSavePaymentMethod: false,
errorMessage: '',
activePaymentMethod: '',
@ -41,7 +37,6 @@ describe( 'paymentMethodDataReducer', () => {
paymentMethods: { 'my-new-method': { express: false } },
} );
expect( nextState ).toEqual( {
paymentStatuses: PAYMENT_STATUS,
currentStatus: {
isPristine: true,
isStarted: false,
@ -50,14 +45,12 @@ describe( 'paymentMethodDataReducer', () => {
hasError: false,
hasFailed: false,
isSuccessful: false,
isDoingExpressPayment: false,
},
availablePaymentMethods: { 'my-new-method': { express: false } },
availableExpressPaymentMethods: {},
paymentMethodData: {},
paymentMethodsInitialized: false,
expressPaymentMethodsInitialized: false,
isExpressPaymentMethodActive: false,
shouldSavePaymentMethod: false,
errorMessage: '',
activePaymentMethod: '',
@ -67,7 +60,6 @@ describe( 'paymentMethodDataReducer', () => {
it( 'sets state as expected when removing a payment method', () => {
const stateWithRegisteredMethod = deepFreeze( {
paymentStatuses: PAYMENT_STATUS,
currentStatus: {
isPristine: true,
isStarted: false,
@ -76,14 +68,12 @@ describe( 'paymentMethodDataReducer', () => {
hasError: false,
hasFailed: false,
isSuccessful: false,
isDoingExpressPayment: false,
},
availablePaymentMethods: { 'my-new-method': { express: false } },
availableExpressPaymentMethods: {},
paymentMethodData: {},
paymentMethodsInitialized: false,
expressPaymentMethodsInitialized: false,
isExpressPaymentMethodActive: false,
shouldSavePaymentMethod: false,
errorMessage: '',
activePaymentMethod: '',
@ -94,7 +84,6 @@ describe( 'paymentMethodDataReducer', () => {
name: 'my-new-method',
} );
expect( nextState ).toEqual( {
paymentStatuses: PAYMENT_STATUS,
currentStatus: {
isPristine: true,
isStarted: false,
@ -103,14 +92,12 @@ describe( 'paymentMethodDataReducer', () => {
hasError: false,
hasFailed: false,
isSuccessful: false,
isDoingExpressPayment: false,
},
availablePaymentMethods: {},
availableExpressPaymentMethods: {},
paymentMethodData: {},
paymentMethodsInitialized: false,
expressPaymentMethodsInitialized: false,
isExpressPaymentMethodActive: false,
shouldSavePaymentMethod: false,
errorMessage: '',
activePaymentMethod: '',
@ -124,7 +111,6 @@ describe( 'paymentMethodDataReducer', () => {
paymentMethods: { 'my-new-method': { express: true } },
} );
expect( nextState ).toEqual( {
paymentStatuses: PAYMENT_STATUS,
currentStatus: {
isPristine: true,
isStarted: false,
@ -133,7 +119,6 @@ describe( 'paymentMethodDataReducer', () => {
hasError: false,
hasFailed: false,
isSuccessful: false,
isDoingExpressPayment: false,
},
availablePaymentMethods: {},
availableExpressPaymentMethods: {
@ -142,7 +127,6 @@ describe( 'paymentMethodDataReducer', () => {
paymentMethodData: {},
paymentMethodsInitialized: false,
expressPaymentMethodsInitialized: false,
isExpressPaymentMethodActive: false,
shouldSavePaymentMethod: false,
errorMessage: '',
activePaymentMethod: '',
@ -152,7 +136,6 @@ describe( 'paymentMethodDataReducer', () => {
it( 'sets state as expected when removing an express payment method', () => {
const stateWithRegisteredMethod = deepFreeze( {
paymentStatuses: PAYMENT_STATUS,
currentStatus: {
isPristine: true,
isStarted: false,
@ -161,14 +144,12 @@ describe( 'paymentMethodDataReducer', () => {
hasError: false,
hasFailed: false,
isSuccessful: false,
isDoingExpressPayment: false,
},
availablePaymentMethods: {},
availableExpressPaymentMethods: [ 'my-new-method' ],
paymentMethodData: {},
paymentMethodsInitialized: false,
expressPaymentMethodsInitialized: false,
isExpressPaymentMethodActive: false,
shouldSavePaymentMethod: false,
errorMessage: '',
activePaymentMethod: '',
@ -179,7 +160,6 @@ describe( 'paymentMethodDataReducer', () => {
name: 'my-new-method',
} );
expect( nextState ).toEqual( {
paymentStatuses: PAYMENT_STATUS,
currentStatus: {
isPristine: true,
isStarted: false,
@ -188,14 +168,12 @@ describe( 'paymentMethodDataReducer', () => {
hasError: false,
hasFailed: false,
isSuccessful: false,
isDoingExpressPayment: false,
},
availablePaymentMethods: {},
availableExpressPaymentMethods: {},
paymentMethodData: {},
paymentMethodsInitialized: false,
expressPaymentMethodsInitialized: false,
isExpressPaymentMethodActive: false,
shouldSavePaymentMethod: false,
errorMessage: '',
activePaymentMethod: '',

View File

@ -80,8 +80,6 @@ export type PaymentMethodCurrentStatusType = {
hasFailed: boolean;
// If true then the payment method has completed it's processing successfully.
isSuccessful: boolean;
// If true, an express payment is in progress.
isDoingExpressPayment: boolean;
};
export type PaymentMethodsDispatcherType = (
@ -112,5 +110,4 @@ export interface PaymentStatus {
hasError?: boolean;
hasFailed?: boolean;
isSuccessful?: boolean;
isDoingExpressPayment?: boolean;
}

View File

@ -120,7 +120,8 @@ member contains a `name` entry with the payment method ID as its value.
```js
const store = select( 'wc/store/payment' );
const availableExpressPaymentMethods = store.getAvailableExpressPaymentMethods();
const availableExpressPaymentMethods =
store.getAvailableExpressPaymentMethods();
```
`availableExpressPaymentMethods` will look like this:
@ -166,24 +167,24 @@ method. As an example, Stripe's saved tokens are returned like so:
```js
savedPaymentMethods: {
cc: [
{
method: {
gateway: 'stripe',
last4: '4242',
brand: 'Visa'
},
expires: '04/24',
is_default: true,
actions: {
wcs_deletion_error: {
url: '#choose_default',
name: 'Delete'
}
},
tokenId: 2
}
]
cc: [
{
method: {
gateway: 'stripe',
last4: '4242',
brand: 'Visa',
},
expires: '04/24',
is_default: true,
actions: {
wcs_deletion_error: {
url: '#choose_default',
name: 'Delete',
},
},
tokenId: 2,
},
];
}
```
@ -207,24 +208,24 @@ returned like so:
```js
activeSavedPaymentMethods: {
cc: [
{
method: {
gateway: 'stripe',
last4: '4242',
brand: 'Visa'
},
expires: '04/24',
is_default: true,
actions: {
wcs_deletion_error: {
url: '#choose_default',
name: 'Delete'
}
},
tokenId: 2
}
]
cc: [
{
method: {
gateway: 'stripe',
last4: '4242',
brand: 'Visa',
},
expires: '04/24',
is_default: true,
actions: {
wcs_deletion_error: {
url: '#choose_default',
name: 'Delete',
},
},
tokenId: 2,
},
];
}
```
@ -251,14 +252,13 @@ Returns the current payment status.
`object` - The current payment status. This will be an object with the following keys, the values are all booleans:
- `isPristine` - True if the payment process has not started, does not have an error and has not finished. This is true
initially.
- `isStarted` - True if the payment process has started.
- `isProcessing` - True if the payment is processing.
- `hasError` - True if the payment process has resulted in an error.
- `hasFailed` - True if the payment process has failed.
- `isSuccessful` - True if the payment process is successful.
- `isDoingExpressPayment` - True if the payment process is being done using an express payment method.
- `isPristine` - True if the payment process has not started, does not have an error and has not finished. This is true
initially.
- `isStarted` - True if the payment process has started.
- `isProcessing` - True if the payment is processing.
- `hasError` - True if the payment process has resulted in an error.
- `hasFailed` - True if the payment process has failed.
- `isSuccessful` - True if the payment process is successful.
#### Example
@ -294,7 +294,8 @@ Returns whether the express payment methods have been initialized.
```js
const store = select( 'wc/store/payment' );
const expressPaymentMethodsInitialized = store.expressPaymentMethodsInitialized();
const expressPaymentMethodsInitialized =
store.expressPaymentMethodsInitialized();
```
<!-- FEEDBACK -->