woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/payment-methods/saved-payment-method-option...

187 lines
5.0 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import {
useEffect,
useRef,
useCallback,
cloneElement,
} from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
Update checkout payment methods design. (https://github.com/woocommerce/woocommerce-blocks/pull/3439) * Add left vertical bar to payments methods step. * Remove horizontal borders around order notes. * Add class to order notes component. We need it to traget that element with CSS. * Update padding on order notes checkbox to match desing. * Remove full stop to match the design. * Add label for not saved payment methods option. * Remove use new payment radio. * Always show new ayment methods selector * Remove editor context for now. * Add accordion component skeleton. * Small component refactor. * Use accordion for new payment options. * Fix jsdoc. * Add styling. * Add input styling. * Hide label if we don't have saved methods. * Cleanup. * Cleanup and styling. * Add target class to aid with alignment. * Update use new payments label styling. * Update Place Order button location. * add full stop to payment method copy * ensure that there is always a (default) selected payment method: - using `activePaymentMethod` from context - this ensures there is a default selected on initial render - and handles any dynamic changes to available payment methods - e.g. COD disappearing when change shipping option - remove unused / redundant selectedMethod prop - context is best * use tab-based payment UI for 2 or fewer payment methods: - move saved payment state to payment context; it's shared state needed by both PaymentMethodOptions and SavedPaymentMethodOptions - show previous tabs UI if: - customer has no saved payment methods (cards) - store has 2 or fewer payment methods available - when initialising SavedPaymentMethodOptions, only select one if the user hasn't selected a real payment method - this ensures radio buttons switch correctly between saved card => `Use another` - remove various props and local state that is no longer required (🤞🏻) * experimental - styling tweaks for single payment tab (remove "tab" UI) * Revert "experimental - styling tweaks for single payment tab (remove "tab" UI)" This reverts commit e09dd4862b97d989d950a9d67672d83e7b8992e4. * Add single payment method UI. * Adjust single method styling. * Add outline and margin to two methods version. * Fix gap for order notes on/off option. * Update Order button spacing CSS. * Reuse computed values. * Remove tabs and single payment option. * We no longer need this test as the UI was changed. * Fix payment methods labels height. * Simplify. * Remove not needed import. * Typecheck an option. * Refactor code. * Rename. * Rename. * Update typdefs. * Remove border for add order notes. * Correct spacing for radio-button and label. * Add simple test. Switch to payment method. * Update style. Co-authored-by: Rua Haszard <rua.haszard@automattic.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-02-02 04:51:47 +00:00
import { usePaymentMethodDataContext } from '@woocommerce/base-context';
import RadioControl from '@woocommerce/base-components/radio-control';
import {
usePaymentMethodInterface,
usePaymentMethods,
} from '@woocommerce/base-context/hooks';
import { getPaymentMethods } from '@woocommerce/blocks-registry';
/**
* @typedef {import('@woocommerce/type-defs/contexts').CustomerPaymentMethod} CustomerPaymentMethod
* @typedef {import('@woocommerce/type-defs/contexts').PaymentStatusDispatch} PaymentStatusDispatch
*/
/**
* Returns the option object for a cc or echeck saved payment method token.
*
* @param {CustomerPaymentMethod} savedPaymentMethod
* @param {function(string):void} setActivePaymentMethod
* @param {PaymentStatusDispatch} setPaymentStatus
* @return {Object} An option objects to use for RadioControl.
*/
const getCcOrEcheckPaymentMethodOption = (
{ method, expires, tokenId },
setActivePaymentMethod,
setPaymentStatus
) => {
return {
value: tokenId + '',
label: sprintf(
/* translators: %1$s is referring to the payment method brand, %2$s is referring to the last 4 digits of the payment card, %3$s is referring to the expiry date. */
__(
'%1$s ending in %2$s (expires %3$s)',
'woo-gutenberg-product-blocks'
),
method.brand,
method.last4,
expires
),
name: `wc-saved-payment-method-token-${ tokenId }`,
onChange: ( token ) => {
const savedTokenKey = `wc-${ method.gateway }-payment-token`;
setActivePaymentMethod( method.gateway );
Refactor Payment Methods Integration API to fire `onPaymentProcessing` event with saved tokens. (https://github.com/woocommerce/woocommerce-blocks/pull/3982) * Implement `started` action creator. Also for TS typing I changed `paymentMethodData` to be optional for both the `success` and `started` action creators. This is because the behaviour allows for paymentMethodData to be retained in the state if it is not explicitly provided on dispatch. * Implement started action creator on the exposed payment status dispatcher. The implementation now allows for receiving payment method data when the `start` status is dispatched. * Don’t overwrite payment method data when `success` status is set. It is intended that if paymentMethodData is undefined, that is simply passed through to the dispatched action. This signals the reducer to retain the existing paymentMethodData in state (when undefined). The correct way to clear the paymentMethodData is to either explictly provide an empty object, or set the status to pristine. * Fix types for incoming paymentMethodData * Implement receiving paymentMethodData in reducer. This changeset also configures the reducer to retain the existing paymentMethodData in state (and related correlated information0 when the provided paymentMethodData property is undefined. The only time paymentMethodData should be reset in state is when it is explicitly provided or the status is set to PRISTINE. * Fix types for started action dispatcher. * Explicitly clear paymentMethodData state when express payment started. Also restores previous paymentMethodData when express payment cancelled. * Switch saved tokens to utilize the payment method status started dispatched action instead of success. This change ensures that savedToken handlers registered by payment methods have access to the `onPaymentProcessing` checkout event. * fix typedef Really just need to ensure types are used anywhere, this is a temporary change due to the time sensitive needs for this PR. * Update assets/js/base/context/cart-checkout/payment-methods/reducer.ts Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2021-03-22 14:02:36 +00:00
setPaymentStatus().started( {
payment_method: method.gateway,
[ savedTokenKey ]: token + '',
isSavedToken: true,
} );
},
};
};
/**
* Returns the option object for any non specific saved payment method.
*
* @param {CustomerPaymentMethod} savedPaymentMethod
* @param {function(string):void} setActivePaymentMethod
* @param {PaymentStatusDispatch} setPaymentStatus
*
* @return {Object} An option objects to use for RadioControl.
*/
const getDefaultPaymentMethodOptions = (
{ method, tokenId },
setActivePaymentMethod,
setPaymentStatus
) => {
return {
value: tokenId + '',
label: sprintf(
/* translators: %s is the name of the payment method gateway. */
__( 'Saved token for %s', 'woo-gutenberg-products-block' ),
method.gateway
),
name: `wc-saved-payment-method-token-${ tokenId }`,
onChange: ( token ) => {
const savedTokenKey = `wc-${ method.gateway }-payment-token`;
setActivePaymentMethod( method.gateway );
Refactor Payment Methods Integration API to fire `onPaymentProcessing` event with saved tokens. (https://github.com/woocommerce/woocommerce-blocks/pull/3982) * Implement `started` action creator. Also for TS typing I changed `paymentMethodData` to be optional for both the `success` and `started` action creators. This is because the behaviour allows for paymentMethodData to be retained in the state if it is not explicitly provided on dispatch. * Implement started action creator on the exposed payment status dispatcher. The implementation now allows for receiving payment method data when the `start` status is dispatched. * Don’t overwrite payment method data when `success` status is set. It is intended that if paymentMethodData is undefined, that is simply passed through to the dispatched action. This signals the reducer to retain the existing paymentMethodData in state (when undefined). The correct way to clear the paymentMethodData is to either explictly provide an empty object, or set the status to pristine. * Fix types for incoming paymentMethodData * Implement receiving paymentMethodData in reducer. This changeset also configures the reducer to retain the existing paymentMethodData in state (and related correlated information0 when the provided paymentMethodData property is undefined. The only time paymentMethodData should be reset in state is when it is explicitly provided or the status is set to PRISTINE. * Fix types for started action dispatcher. * Explicitly clear paymentMethodData state when express payment started. Also restores previous paymentMethodData when express payment cancelled. * Switch saved tokens to utilize the payment method status started dispatched action instead of success. This change ensures that savedToken handlers registered by payment methods have access to the `onPaymentProcessing` checkout event. * fix typedef Really just need to ensure types are used anywhere, this is a temporary change due to the time sensitive needs for this PR. * Update assets/js/base/context/cart-checkout/payment-methods/reducer.ts Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2021-03-22 14:02:36 +00:00
setPaymentStatus().started( {
payment_method: method.gateway,
[ savedTokenKey ]: token + '',
isSavedToken: true,
} );
},
};
};
Update checkout payment methods design. (https://github.com/woocommerce/woocommerce-blocks/pull/3439) * Add left vertical bar to payments methods step. * Remove horizontal borders around order notes. * Add class to order notes component. We need it to traget that element with CSS. * Update padding on order notes checkbox to match desing. * Remove full stop to match the design. * Add label for not saved payment methods option. * Remove use new payment radio. * Always show new ayment methods selector * Remove editor context for now. * Add accordion component skeleton. * Small component refactor. * Use accordion for new payment options. * Fix jsdoc. * Add styling. * Add input styling. * Hide label if we don't have saved methods. * Cleanup. * Cleanup and styling. * Add target class to aid with alignment. * Update use new payments label styling. * Update Place Order button location. * add full stop to payment method copy * ensure that there is always a (default) selected payment method: - using `activePaymentMethod` from context - this ensures there is a default selected on initial render - and handles any dynamic changes to available payment methods - e.g. COD disappearing when change shipping option - remove unused / redundant selectedMethod prop - context is best * use tab-based payment UI for 2 or fewer payment methods: - move saved payment state to payment context; it's shared state needed by both PaymentMethodOptions and SavedPaymentMethodOptions - show previous tabs UI if: - customer has no saved payment methods (cards) - store has 2 or fewer payment methods available - when initialising SavedPaymentMethodOptions, only select one if the user hasn't selected a real payment method - this ensures radio buttons switch correctly between saved card => `Use another` - remove various props and local state that is no longer required (🤞🏻) * experimental - styling tweaks for single payment tab (remove "tab" UI) * Revert "experimental - styling tweaks for single payment tab (remove "tab" UI)" This reverts commit e09dd4862b97d989d950a9d67672d83e7b8992e4. * Add single payment method UI. * Adjust single method styling. * Add outline and margin to two methods version. * Fix gap for order notes on/off option. * Update Order button spacing CSS. * Reuse computed values. * Remove tabs and single payment option. * We no longer need this test as the UI was changed. * Fix payment methods labels height. * Simplify. * Remove not needed import. * Typecheck an option. * Refactor code. * Rename. * Rename. * Update typdefs. * Remove border for add order notes. * Correct spacing for radio-button and label. * Add simple test. Switch to payment method. * Update style. Co-authored-by: Rua Haszard <rua.haszard@automattic.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-02-02 04:51:47 +00:00
const SavedPaymentMethodOptions = () => {
const {
setPaymentStatus,
customerPaymentMethods,
Update checkout payment methods design. (https://github.com/woocommerce/woocommerce-blocks/pull/3439) * Add left vertical bar to payments methods step. * Remove horizontal borders around order notes. * Add class to order notes component. We need it to traget that element with CSS. * Update padding on order notes checkbox to match desing. * Remove full stop to match the design. * Add label for not saved payment methods option. * Remove use new payment radio. * Always show new ayment methods selector * Remove editor context for now. * Add accordion component skeleton. * Small component refactor. * Use accordion for new payment options. * Fix jsdoc. * Add styling. * Add input styling. * Hide label if we don't have saved methods. * Cleanup. * Cleanup and styling. * Add target class to aid with alignment. * Update use new payments label styling. * Update Place Order button location. * add full stop to payment method copy * ensure that there is always a (default) selected payment method: - using `activePaymentMethod` from context - this ensures there is a default selected on initial render - and handles any dynamic changes to available payment methods - e.g. COD disappearing when change shipping option - remove unused / redundant selectedMethod prop - context is best * use tab-based payment UI for 2 or fewer payment methods: - move saved payment state to payment context; it's shared state needed by both PaymentMethodOptions and SavedPaymentMethodOptions - show previous tabs UI if: - customer has no saved payment methods (cards) - store has 2 or fewer payment methods available - when initialising SavedPaymentMethodOptions, only select one if the user hasn't selected a real payment method - this ensures radio buttons switch correctly between saved card => `Use another` - remove various props and local state that is no longer required (🤞🏻) * experimental - styling tweaks for single payment tab (remove "tab" UI) * Revert "experimental - styling tweaks for single payment tab (remove "tab" UI)" This reverts commit e09dd4862b97d989d950a9d67672d83e7b8992e4. * Add single payment method UI. * Adjust single method styling. * Add outline and margin to two methods version. * Fix gap for order notes on/off option. * Update Order button spacing CSS. * Reuse computed values. * Remove tabs and single payment option. * We no longer need this test as the UI was changed. * Fix payment methods labels height. * Simplify. * Remove not needed import. * Typecheck an option. * Refactor code. * Rename. * Rename. * Update typdefs. * Remove border for add order notes. * Correct spacing for radio-button and label. * Add simple test. Switch to payment method. * Update style. Co-authored-by: Rua Haszard <rua.haszard@automattic.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-02-02 04:51:47 +00:00
activePaymentMethod,
setActivePaymentMethod,
Update checkout payment methods design. (https://github.com/woocommerce/woocommerce-blocks/pull/3439) * Add left vertical bar to payments methods step. * Remove horizontal borders around order notes. * Add class to order notes component. We need it to traget that element with CSS. * Update padding on order notes checkbox to match desing. * Remove full stop to match the design. * Add label for not saved payment methods option. * Remove use new payment radio. * Always show new ayment methods selector * Remove editor context for now. * Add accordion component skeleton. * Small component refactor. * Use accordion for new payment options. * Fix jsdoc. * Add styling. * Add input styling. * Hide label if we don't have saved methods. * Cleanup. * Cleanup and styling. * Add target class to aid with alignment. * Update use new payments label styling. * Update Place Order button location. * add full stop to payment method copy * ensure that there is always a (default) selected payment method: - using `activePaymentMethod` from context - this ensures there is a default selected on initial render - and handles any dynamic changes to available payment methods - e.g. COD disappearing when change shipping option - remove unused / redundant selectedMethod prop - context is best * use tab-based payment UI for 2 or fewer payment methods: - move saved payment state to payment context; it's shared state needed by both PaymentMethodOptions and SavedPaymentMethodOptions - show previous tabs UI if: - customer has no saved payment methods (cards) - store has 2 or fewer payment methods available - when initialising SavedPaymentMethodOptions, only select one if the user hasn't selected a real payment method - this ensures radio buttons switch correctly between saved card => `Use another` - remove various props and local state that is no longer required (🤞🏻) * experimental - styling tweaks for single payment tab (remove "tab" UI) * Revert "experimental - styling tweaks for single payment tab (remove "tab" UI)" This reverts commit e09dd4862b97d989d950a9d67672d83e7b8992e4. * Add single payment method UI. * Adjust single method styling. * Add outline and margin to two methods version. * Fix gap for order notes on/off option. * Update Order button spacing CSS. * Reuse computed values. * Remove tabs and single payment option. * We no longer need this test as the UI was changed. * Fix payment methods labels height. * Simplify. * Remove not needed import. * Typecheck an option. * Refactor code. * Rename. * Rename. * Update typdefs. * Remove border for add order notes. * Correct spacing for radio-button and label. * Add simple test. Switch to payment method. * Update style. Co-authored-by: Rua Haszard <rua.haszard@automattic.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-02-02 04:51:47 +00:00
activeSavedToken,
setActiveSavedToken,
} = usePaymentMethodDataContext();
const standardMethods = getPaymentMethods();
const { paymentMethods } = usePaymentMethods();
const paymentMethodInterface = usePaymentMethodInterface();
/**
* @type {Object} Options
* @property {Array} current The current options on the type.
*/
const currentOptions = useRef( [] );
const updateToken = useCallback(
( token ) => {
Update checkout payment methods design. (https://github.com/woocommerce/woocommerce-blocks/pull/3439) * Add left vertical bar to payments methods step. * Remove horizontal borders around order notes. * Add class to order notes component. We need it to traget that element with CSS. * Update padding on order notes checkbox to match desing. * Remove full stop to match the design. * Add label for not saved payment methods option. * Remove use new payment radio. * Always show new ayment methods selector * Remove editor context for now. * Add accordion component skeleton. * Small component refactor. * Use accordion for new payment options. * Fix jsdoc. * Add styling. * Add input styling. * Hide label if we don't have saved methods. * Cleanup. * Cleanup and styling. * Add target class to aid with alignment. * Update use new payments label styling. * Update Place Order button location. * add full stop to payment method copy * ensure that there is always a (default) selected payment method: - using `activePaymentMethod` from context - this ensures there is a default selected on initial render - and handles any dynamic changes to available payment methods - e.g. COD disappearing when change shipping option - remove unused / redundant selectedMethod prop - context is best * use tab-based payment UI for 2 or fewer payment methods: - move saved payment state to payment context; it's shared state needed by both PaymentMethodOptions and SavedPaymentMethodOptions - show previous tabs UI if: - customer has no saved payment methods (cards) - store has 2 or fewer payment methods available - when initialising SavedPaymentMethodOptions, only select one if the user hasn't selected a real payment method - this ensures radio buttons switch correctly between saved card => `Use another` - remove various props and local state that is no longer required (🤞🏻) * experimental - styling tweaks for single payment tab (remove "tab" UI) * Revert "experimental - styling tweaks for single payment tab (remove "tab" UI)" This reverts commit e09dd4862b97d989d950a9d67672d83e7b8992e4. * Add single payment method UI. * Adjust single method styling. * Add outline and margin to two methods version. * Fix gap for order notes on/off option. * Update Order button spacing CSS. * Reuse computed values. * Remove tabs and single payment option. * We no longer need this test as the UI was changed. * Fix payment methods labels height. * Simplify. * Remove not needed import. * Typecheck an option. * Refactor code. * Rename. * Rename. * Update typdefs. * Remove border for add order notes. * Correct spacing for radio-button and label. * Add simple test. Switch to payment method. * Update style. Co-authored-by: Rua Haszard <rua.haszard@automattic.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-02-02 04:51:47 +00:00
setActiveSavedToken( token );
},
Refactor Payment Methods Integration API to fire `onPaymentProcessing` event with saved tokens. (https://github.com/woocommerce/woocommerce-blocks/pull/3982) * Implement `started` action creator. Also for TS typing I changed `paymentMethodData` to be optional for both the `success` and `started` action creators. This is because the behaviour allows for paymentMethodData to be retained in the state if it is not explicitly provided on dispatch. * Implement started action creator on the exposed payment status dispatcher. The implementation now allows for receiving payment method data when the `start` status is dispatched. * Don’t overwrite payment method data when `success` status is set. It is intended that if paymentMethodData is undefined, that is simply passed through to the dispatched action. This signals the reducer to retain the existing paymentMethodData in state (when undefined). The correct way to clear the paymentMethodData is to either explictly provide an empty object, or set the status to pristine. * Fix types for incoming paymentMethodData * Implement receiving paymentMethodData in reducer. This changeset also configures the reducer to retain the existing paymentMethodData in state (and related correlated information0 when the provided paymentMethodData property is undefined. The only time paymentMethodData should be reset in state is when it is explicitly provided or the status is set to PRISTINE. * Fix types for started action dispatcher. * Explicitly clear paymentMethodData state when express payment started. Also restores previous paymentMethodData when express payment cancelled. * Switch saved tokens to utilize the payment method status started dispatched action instead of success. This change ensures that savedToken handlers registered by payment methods have access to the `onPaymentProcessing` checkout event. * fix typedef Really just need to ensure types are used anywhere, this is a temporary change due to the time sensitive needs for this PR. * Update assets/js/base/context/cart-checkout/payment-methods/reducer.ts Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2021-03-22 14:02:36 +00:00
[ setActiveSavedToken ]
);
useEffect( () => {
const types = Object.keys( customerPaymentMethods );
const options = types
.flatMap( ( type ) => {
const typeMethods = customerPaymentMethods[ type ];
return typeMethods.map( ( paymentMethod ) => {
const option =
type === 'cc' || type === 'echeck'
? getCcOrEcheckPaymentMethodOption(
paymentMethod,
setActivePaymentMethod,
setPaymentStatus
)
: getDefaultPaymentMethodOptions(
paymentMethod,
setActivePaymentMethod,
setPaymentStatus
);
Update checkout payment methods design. (https://github.com/woocommerce/woocommerce-blocks/pull/3439) * Add left vertical bar to payments methods step. * Remove horizontal borders around order notes. * Add class to order notes component. We need it to traget that element with CSS. * Update padding on order notes checkbox to match desing. * Remove full stop to match the design. * Add label for not saved payment methods option. * Remove use new payment radio. * Always show new ayment methods selector * Remove editor context for now. * Add accordion component skeleton. * Small component refactor. * Use accordion for new payment options. * Fix jsdoc. * Add styling. * Add input styling. * Hide label if we don't have saved methods. * Cleanup. * Cleanup and styling. * Add target class to aid with alignment. * Update use new payments label styling. * Update Place Order button location. * add full stop to payment method copy * ensure that there is always a (default) selected payment method: - using `activePaymentMethod` from context - this ensures there is a default selected on initial render - and handles any dynamic changes to available payment methods - e.g. COD disappearing when change shipping option - remove unused / redundant selectedMethod prop - context is best * use tab-based payment UI for 2 or fewer payment methods: - move saved payment state to payment context; it's shared state needed by both PaymentMethodOptions and SavedPaymentMethodOptions - show previous tabs UI if: - customer has no saved payment methods (cards) - store has 2 or fewer payment methods available - when initialising SavedPaymentMethodOptions, only select one if the user hasn't selected a real payment method - this ensures radio buttons switch correctly between saved card => `Use another` - remove various props and local state that is no longer required (🤞🏻) * experimental - styling tweaks for single payment tab (remove "tab" UI) * Revert "experimental - styling tweaks for single payment tab (remove "tab" UI)" This reverts commit e09dd4862b97d989d950a9d67672d83e7b8992e4. * Add single payment method UI. * Adjust single method styling. * Add outline and margin to two methods version. * Fix gap for order notes on/off option. * Update Order button spacing CSS. * Reuse computed values. * Remove tabs and single payment option. * We no longer need this test as the UI was changed. * Fix payment methods labels height. * Simplify. * Remove not needed import. * Typecheck an option. * Refactor code. * Rename. * Rename. * Update typdefs. * Remove border for add order notes. * Correct spacing for radio-button and label. * Add simple test. Switch to payment method. * Update style. Co-authored-by: Rua Haszard <rua.haszard@automattic.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-02-02 04:51:47 +00:00
if (
! activePaymentMethod &&
paymentMethod.is_default &&
activeSavedToken === ''
) {
updateToken( paymentMethod.tokenId + '' );
option.onChange( paymentMethod.tokenId );
}
return option;
} );
} )
.filter( Boolean );
currentOptions.current = options;
}, [
customerPaymentMethods,
updateToken,
Update checkout payment methods design. (https://github.com/woocommerce/woocommerce-blocks/pull/3439) * Add left vertical bar to payments methods step. * Remove horizontal borders around order notes. * Add class to order notes component. We need it to traget that element with CSS. * Update padding on order notes checkbox to match desing. * Remove full stop to match the design. * Add label for not saved payment methods option. * Remove use new payment radio. * Always show new ayment methods selector * Remove editor context for now. * Add accordion component skeleton. * Small component refactor. * Use accordion for new payment options. * Fix jsdoc. * Add styling. * Add input styling. * Hide label if we don't have saved methods. * Cleanup. * Cleanup and styling. * Add target class to aid with alignment. * Update use new payments label styling. * Update Place Order button location. * add full stop to payment method copy * ensure that there is always a (default) selected payment method: - using `activePaymentMethod` from context - this ensures there is a default selected on initial render - and handles any dynamic changes to available payment methods - e.g. COD disappearing when change shipping option - remove unused / redundant selectedMethod prop - context is best * use tab-based payment UI for 2 or fewer payment methods: - move saved payment state to payment context; it's shared state needed by both PaymentMethodOptions and SavedPaymentMethodOptions - show previous tabs UI if: - customer has no saved payment methods (cards) - store has 2 or fewer payment methods available - when initialising SavedPaymentMethodOptions, only select one if the user hasn't selected a real payment method - this ensures radio buttons switch correctly between saved card => `Use another` - remove various props and local state that is no longer required (🤞🏻) * experimental - styling tweaks for single payment tab (remove "tab" UI) * Revert "experimental - styling tweaks for single payment tab (remove "tab" UI)" This reverts commit e09dd4862b97d989d950a9d67672d83e7b8992e4. * Add single payment method UI. * Adjust single method styling. * Add outline and margin to two methods version. * Fix gap for order notes on/off option. * Update Order button spacing CSS. * Reuse computed values. * Remove tabs and single payment option. * We no longer need this test as the UI was changed. * Fix payment methods labels height. * Simplify. * Remove not needed import. * Typecheck an option. * Refactor code. * Rename. * Rename. * Update typdefs. * Remove border for add order notes. * Correct spacing for radio-button and label. * Add simple test. Switch to payment method. * Update style. Co-authored-by: Rua Haszard <rua.haszard@automattic.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-02-02 04:51:47 +00:00
activeSavedToken,
activePaymentMethod,
setActivePaymentMethod,
setPaymentStatus,
standardMethods,
] );
const savedPaymentMethodHandler =
!! activeSavedToken &&
paymentMethods[ activePaymentMethod ] &&
paymentMethods[ activePaymentMethod ]?.savedTokenComponent
? cloneElement(
paymentMethods[ activePaymentMethod ]?.savedTokenComponent,
{ token: activeSavedToken, ...paymentMethodInterface }
)
: null;
return currentOptions.current.length > 0 ? (
<>
<RadioControl
id={ 'wc-payment-method-saved-tokens' }
selected={ activeSavedToken }
onChange={ updateToken }
options={ currentOptions.current }
/>
{ savedPaymentMethodHandler }
</>
) : null;
};
export default SavedPaymentMethodOptions;