woocommerce/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/payment-methods.js

148 lines
3.8 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import {
usePaymentMethods,
usePaymentMethodInterface,
} from '@woocommerce/base-hooks';
import {
useCallback,
cloneElement,
useRef,
useEffect,
useState,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
useEditorContext,
usePaymentMethodDataContext,
} from '@woocommerce/base-context';
import { PaymentMethodIcons } from '@woocommerce/base-components/cart-checkout';
/**
* Internal dependencies
*/
import Tabs from '../tabs';
import NoPaymentMethods from './no-payment-methods';
import SavedPaymentMethodOptions from './saved-payment-method-options';
import PaymentMethodErrorBoundary from './payment-method-error-boundary';
/**
* Returns a payment method for the given context.
*
Refactor logic for handling active payment method with express payment methods via checkout (https://github.com/woocommerce/woocommerce-blocks/pull/2170) * remove logic server side for getting payment method from paymentdata * ensure stripe accounts for payment request type payment methods * make sure legacy payment method handling always runs last * add processedPaymentMethodId to payment method data context state * switch checkout processor to use new processedPaymentMethod id for submission * implement returning paymentMethodId from payment-request-express * include paymentMethodId in stripe cc success return value * include paymentMethodId in cheque success return value * add active payment method setting and handling via checkout express payment methods still need to implement: - onClick when their button is clicked - onClose when the express payment interface is closed (cancelled etc). * don’t expose setActivePaymentMethod on the payment method interface * remove/fix artifacts from earlier iterations of the pull * rename `id` property to `name` property for payment method registration * Revert "include paymentMethodId in cheque success return value" This reverts commit fe4ee8aced6d67bbd9033263ce61844349d18250. * Revert "include paymentMethodId in stripe cc success return value" This reverts commit 359a1f0089866110ec204182f8ffa14ab099c425. * Revert "implement returning paymentMethodId from payment-request-express" This reverts commit 117c68980b0876dee0acc78cec7754ccfe2a9bb1. * Revert "switch checkout processor to use new processedPaymentMethod id for submission" This reverts commit c38a05b63626dfc1336c7bb0e86417b798a803d6. * Revert "add processedPaymentMethodId to payment method data context state" This reverts commit 3d7923e7297f3c76efde536d26eaf68464ba9583. * improve isSuccess response check and variable name * implement paymentMethodId config option * doh php ain’t javascript * add missing dependency from rebase
2020-04-09 15:22:34 +00:00
* @param {string} name The payment method slug to return.
* @param {Object} paymentMethods The current registered payment methods
* @param {boolean} isEditor Whether in the editor context (true) or not (false).
*
Refactor logic for handling active payment method with express payment methods via checkout (https://github.com/woocommerce/woocommerce-blocks/pull/2170) * remove logic server side for getting payment method from paymentdata * ensure stripe accounts for payment request type payment methods * make sure legacy payment method handling always runs last * add processedPaymentMethodId to payment method data context state * switch checkout processor to use new processedPaymentMethod id for submission * implement returning paymentMethodId from payment-request-express * include paymentMethodId in stripe cc success return value * include paymentMethodId in cheque success return value * add active payment method setting and handling via checkout express payment methods still need to implement: - onClick when their button is clicked - onClose when the express payment interface is closed (cancelled etc). * don’t expose setActivePaymentMethod on the payment method interface * remove/fix artifacts from earlier iterations of the pull * rename `id` property to `name` property for payment method registration * Revert "include paymentMethodId in cheque success return value" This reverts commit fe4ee8aced6d67bbd9033263ce61844349d18250. * Revert "include paymentMethodId in stripe cc success return value" This reverts commit 359a1f0089866110ec204182f8ffa14ab099c425. * Revert "implement returning paymentMethodId from payment-request-express" This reverts commit 117c68980b0876dee0acc78cec7754ccfe2a9bb1. * Revert "switch checkout processor to use new processedPaymentMethod id for submission" This reverts commit c38a05b63626dfc1336c7bb0e86417b798a803d6. * Revert "add processedPaymentMethodId to payment method data context state" This reverts commit 3d7923e7297f3c76efde536d26eaf68464ba9583. * improve isSuccess response check and variable name * implement paymentMethodId config option * doh php ain’t javascript * add missing dependency from rebase
2020-04-09 15:22:34 +00:00
* @return {Object} The payment method matching the name for the given context.
*/
Refactor logic for handling active payment method with express payment methods via checkout (https://github.com/woocommerce/woocommerce-blocks/pull/2170) * remove logic server side for getting payment method from paymentdata * ensure stripe accounts for payment request type payment methods * make sure legacy payment method handling always runs last * add processedPaymentMethodId to payment method data context state * switch checkout processor to use new processedPaymentMethod id for submission * implement returning paymentMethodId from payment-request-express * include paymentMethodId in stripe cc success return value * include paymentMethodId in cheque success return value * add active payment method setting and handling via checkout express payment methods still need to implement: - onClick when their button is clicked - onClose when the express payment interface is closed (cancelled etc). * don’t expose setActivePaymentMethod on the payment method interface * remove/fix artifacts from earlier iterations of the pull * rename `id` property to `name` property for payment method registration * Revert "include paymentMethodId in cheque success return value" This reverts commit fe4ee8aced6d67bbd9033263ce61844349d18250. * Revert "include paymentMethodId in stripe cc success return value" This reverts commit 359a1f0089866110ec204182f8ffa14ab099c425. * Revert "implement returning paymentMethodId from payment-request-express" This reverts commit 117c68980b0876dee0acc78cec7754ccfe2a9bb1. * Revert "switch checkout processor to use new processedPaymentMethod id for submission" This reverts commit c38a05b63626dfc1336c7bb0e86417b798a803d6. * Revert "add processedPaymentMethodId to payment method data context state" This reverts commit 3d7923e7297f3c76efde536d26eaf68464ba9583. * improve isSuccess response check and variable name * implement paymentMethodId config option * doh php ain’t javascript * add missing dependency from rebase
2020-04-09 15:22:34 +00:00
const getPaymentMethod = ( name, paymentMethods, isEditor ) => {
let paymentMethod = paymentMethods[ name ] || null;
if ( paymentMethod ) {
Implement Stripe CC and Stripe ApplePay payment methods (https://github.com/woocommerce/woocommerce-blocks/pull/1983) * Server side changes for payment method integrations Including adding a stripe class temporarily * update needed npm packages (and add some types) * updates to contexts * remove stepContent from payment config for payment methods * update payment method interface and typedefs Exposing a components property to pass along components that payment methods can use (so we keep styles consistent for them) * add apple pay and stripe cc integration and remove paypal * remove save payment checkbox from checkout block It is handled by payment methods. * Include an id prop for tabs * fix activePaymentMethod pass through on rendered payment method element also adds an id for the rendered tab * add styles for payment method fields If payment methods use these classes for their fields then the styles will get applied. It _could_ allow for consistent styling, we may have to provide design documentation for this? These are styles in cases where payment methods have to use elements provided by the gateway (eg. Stripe elements). In future iterations we could look at providing components to payment methods to use (if they aren’t restricted by the gateway). * fix rebase conflict * do a test payment request for applePay to determine if the current browser supports it * don’t console.error for stripe loading. * Fix placeholder errors in the editor * improve styling and add missing validation for inline card element * update pacakge-lock * rename payment-methods-demo folder to payment-methods-extension * expose checkbox control on payment method interface * export payment-methods-extension to it’s own asset build This allows us to more accurately demonstrate how payment extensions would hook in to the blocks. * don’t enqueue a style that doesn’t exist * add full stop to comments and remove obsolete comment blcok * fix spacing * switch `activeContent` to `content` for payment method registration config
2020-03-30 12:07:49 +00:00
paymentMethod = isEditor ? paymentMethod.edit : paymentMethod.content;
}
return paymentMethod;
};
/**
* PaymentMethods component.
*
* @return {*} The rendered component.
*/
const PaymentMethods = () => {
const { isEditor } = useEditorContext();
Refactor logic for handling active payment method with express payment methods via checkout (https://github.com/woocommerce/woocommerce-blocks/pull/2170) * remove logic server side for getting payment method from paymentdata * ensure stripe accounts for payment request type payment methods * make sure legacy payment method handling always runs last * add processedPaymentMethodId to payment method data context state * switch checkout processor to use new processedPaymentMethod id for submission * implement returning paymentMethodId from payment-request-express * include paymentMethodId in stripe cc success return value * include paymentMethodId in cheque success return value * add active payment method setting and handling via checkout express payment methods still need to implement: - onClick when their button is clicked - onClose when the express payment interface is closed (cancelled etc). * don’t expose setActivePaymentMethod on the payment method interface * remove/fix artifacts from earlier iterations of the pull * rename `id` property to `name` property for payment method registration * Revert "include paymentMethodId in cheque success return value" This reverts commit fe4ee8aced6d67bbd9033263ce61844349d18250. * Revert "include paymentMethodId in stripe cc success return value" This reverts commit 359a1f0089866110ec204182f8ffa14ab099c425. * Revert "implement returning paymentMethodId from payment-request-express" This reverts commit 117c68980b0876dee0acc78cec7754ccfe2a9bb1. * Revert "switch checkout processor to use new processedPaymentMethod id for submission" This reverts commit c38a05b63626dfc1336c7bb0e86417b798a803d6. * Revert "add processedPaymentMethodId to payment method data context state" This reverts commit 3d7923e7297f3c76efde536d26eaf68464ba9583. * improve isSuccess response check and variable name * implement paymentMethodId config option * doh php ain’t javascript * add missing dependency from rebase
2020-04-09 15:22:34 +00:00
const {
customerPaymentMethods = {},
setActivePaymentMethod,
} = usePaymentMethodDataContext();
const { isInitialized, paymentMethods } = usePaymentMethods();
const currentPaymentMethods = useRef( paymentMethods );
const {
activePaymentMethod,
...paymentMethodInterface
} = usePaymentMethodInterface();
const currentPaymentMethodInterface = useRef( paymentMethodInterface );
const [ selectedToken, setSelectedToken ] = useState( 0 );
// update ref on change.
useEffect( () => {
currentPaymentMethods.current = paymentMethods;
currentPaymentMethodInterface.current = paymentMethodInterface;
}, [ paymentMethods, paymentMethodInterface, activePaymentMethod ] );
const getRenderedTab = useCallback(
() => ( selectedTab ) => {
const paymentMethod = getPaymentMethod(
selectedTab,
currentPaymentMethods.current,
isEditor
);
return paymentMethod ? (
<PaymentMethodErrorBoundary isEditor={ isEditor }>
{ cloneElement( paymentMethod, {
Implement Stripe CC and Stripe ApplePay payment methods (https://github.com/woocommerce/woocommerce-blocks/pull/1983) * Server side changes for payment method integrations Including adding a stripe class temporarily * update needed npm packages (and add some types) * updates to contexts * remove stepContent from payment config for payment methods * update payment method interface and typedefs Exposing a components property to pass along components that payment methods can use (so we keep styles consistent for them) * add apple pay and stripe cc integration and remove paypal * remove save payment checkbox from checkout block It is handled by payment methods. * Include an id prop for tabs * fix activePaymentMethod pass through on rendered payment method element also adds an id for the rendered tab * add styles for payment method fields If payment methods use these classes for their fields then the styles will get applied. It _could_ allow for consistent styling, we may have to provide design documentation for this? These are styles in cases where payment methods have to use elements provided by the gateway (eg. Stripe elements). In future iterations we could look at providing components to payment methods to use (if they aren’t restricted by the gateway). * fix rebase conflict * do a test payment request for applePay to determine if the current browser supports it * don’t console.error for stripe loading. * Fix placeholder errors in the editor * improve styling and add missing validation for inline card element * update pacakge-lock * rename payment-methods-demo folder to payment-methods-extension * expose checkbox control on payment method interface * export payment-methods-extension to it’s own asset build This allows us to more accurately demonstrate how payment extensions would hook in to the blocks. * don’t enqueue a style that doesn’t exist * add full stop to comments and remove obsolete comment blcok * fix spacing * switch `activeContent` to `content` for payment method registration config
2020-03-30 12:07:49 +00:00
activePaymentMethod,
...currentPaymentMethodInterface.current,
} ) }
</PaymentMethodErrorBoundary>
) : null;
},
[ isEditor, activePaymentMethod ]
);
if (
! isInitialized ||
Object.keys( currentPaymentMethods.current ).length === 0
) {
return <NoPaymentMethods />;
}
const renderedTabs = (
<Tabs
className="wc-block-components-checkout-payment-methods"
onSelect={ ( tabName ) => setActivePaymentMethod( tabName ) }
Refactor logic for handling active payment method with express payment methods via checkout (https://github.com/woocommerce/woocommerce-blocks/pull/2170) * remove logic server side for getting payment method from paymentdata * ensure stripe accounts for payment request type payment methods * make sure legacy payment method handling always runs last * add processedPaymentMethodId to payment method data context state * switch checkout processor to use new processedPaymentMethod id for submission * implement returning paymentMethodId from payment-request-express * include paymentMethodId in stripe cc success return value * include paymentMethodId in cheque success return value * add active payment method setting and handling via checkout express payment methods still need to implement: - onClick when their button is clicked - onClose when the express payment interface is closed (cancelled etc). * don’t expose setActivePaymentMethod on the payment method interface * remove/fix artifacts from earlier iterations of the pull * rename `id` property to `name` property for payment method registration * Revert "include paymentMethodId in cheque success return value" This reverts commit fe4ee8aced6d67bbd9033263ce61844349d18250. * Revert "include paymentMethodId in stripe cc success return value" This reverts commit 359a1f0089866110ec204182f8ffa14ab099c425. * Revert "implement returning paymentMethodId from payment-request-express" This reverts commit 117c68980b0876dee0acc78cec7754ccfe2a9bb1. * Revert "switch checkout processor to use new processedPaymentMethod id for submission" This reverts commit c38a05b63626dfc1336c7bb0e86417b798a803d6. * Revert "add processedPaymentMethodId to payment method data context state" This reverts commit 3d7923e7297f3c76efde536d26eaf68464ba9583. * improve isSuccess response check and variable name * implement paymentMethodId config option * doh php ain’t javascript * add missing dependency from rebase
2020-04-09 15:22:34 +00:00
tabs={ Object.keys( currentPaymentMethods.current ).map(
( name ) => {
const { label, ariaLabel } = currentPaymentMethods.current[
name
];
return {
name,
title:
typeof label === 'string'
? label
: cloneElement( label, {
components: { PaymentMethodIcons },
} ),
Refactor logic for handling active payment method with express payment methods via checkout (https://github.com/woocommerce/woocommerce-blocks/pull/2170) * remove logic server side for getting payment method from paymentdata * ensure stripe accounts for payment request type payment methods * make sure legacy payment method handling always runs last * add processedPaymentMethodId to payment method data context state * switch checkout processor to use new processedPaymentMethod id for submission * implement returning paymentMethodId from payment-request-express * include paymentMethodId in stripe cc success return value * include paymentMethodId in cheque success return value * add active payment method setting and handling via checkout express payment methods still need to implement: - onClick when their button is clicked - onClose when the express payment interface is closed (cancelled etc). * don’t expose setActivePaymentMethod on the payment method interface * remove/fix artifacts from earlier iterations of the pull * rename `id` property to `name` property for payment method registration * Revert "include paymentMethodId in cheque success return value" This reverts commit fe4ee8aced6d67bbd9033263ce61844349d18250. * Revert "include paymentMethodId in stripe cc success return value" This reverts commit 359a1f0089866110ec204182f8ffa14ab099c425. * Revert "implement returning paymentMethodId from payment-request-express" This reverts commit 117c68980b0876dee0acc78cec7754ccfe2a9bb1. * Revert "switch checkout processor to use new processedPaymentMethod id for submission" This reverts commit c38a05b63626dfc1336c7bb0e86417b798a803d6. * Revert "add processedPaymentMethodId to payment method data context state" This reverts commit 3d7923e7297f3c76efde536d26eaf68464ba9583. * improve isSuccess response check and variable name * implement paymentMethodId config option * doh php ain’t javascript * add missing dependency from rebase
2020-04-09 15:22:34 +00:00
ariaLabel,
};
}
) }
initialTabName={ activePaymentMethod }
ariaLabel={ __(
'Payment Methods',
'woo-gutenberg-products-block'
) }
Implement Stripe CC and Stripe ApplePay payment methods (https://github.com/woocommerce/woocommerce-blocks/pull/1983) * Server side changes for payment method integrations Including adding a stripe class temporarily * update needed npm packages (and add some types) * updates to contexts * remove stepContent from payment config for payment methods * update payment method interface and typedefs Exposing a components property to pass along components that payment methods can use (so we keep styles consistent for them) * add apple pay and stripe cc integration and remove paypal * remove save payment checkbox from checkout block It is handled by payment methods. * Include an id prop for tabs * fix activePaymentMethod pass through on rendered payment method element also adds an id for the rendered tab * add styles for payment method fields If payment methods use these classes for their fields then the styles will get applied. It _could_ allow for consistent styling, we may have to provide design documentation for this? These are styles in cases where payment methods have to use elements provided by the gateway (eg. Stripe elements). In future iterations we could look at providing components to payment methods to use (if they aren’t restricted by the gateway). * fix rebase conflict * do a test payment request for applePay to determine if the current browser supports it * don’t console.error for stripe loading. * Fix placeholder errors in the editor * improve styling and add missing validation for inline card element * update pacakge-lock * rename payment-methods-demo folder to payment-methods-extension * expose checkbox control on payment method interface * export payment-methods-extension to it’s own asset build This allows us to more accurately demonstrate how payment extensions would hook in to the blocks. * don’t enqueue a style that doesn’t exist * add full stop to comments and remove obsolete comment blcok * fix spacing * switch `activeContent` to `content` for payment method registration config
2020-03-30 12:07:49 +00:00
id="wc-block-payment-methods"
>
{ getRenderedTab() }
</Tabs>
);
const renderedSavedPaymentOptions = (
<SavedPaymentMethodOptions onSelect={ setSelectedToken } />
);
const renderedTabsAndSavedPaymentOptions = (
<>
{ renderedSavedPaymentOptions }
{ renderedTabs }
</>
);
return Object.keys( customerPaymentMethods ).length > 0 &&
selectedToken !== 0
? renderedSavedPaymentOptions
: renderedTabsAndSavedPaymentOptions;
};
export default PaymentMethods;