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:
parent
c52dc91f67
commit
9fa34effce
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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: '',
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 -->
|
||||
|
|
Loading…
Reference in New Issue