implement editor previews for stripe cc and check payment methods (https://github.com/woocommerce/woocommerce-blocks/pull/2190)

This commit is contained in:
Darren Ethier 2020-04-14 02:01:29 -04:00 committed by GitHub
parent a00d06b7f2
commit 70f8b48165
2 changed files with 10 additions and 6 deletions

View File

@ -14,8 +14,6 @@ import { PAYMENT_METHOD_NAME } from './constants';
const settings = getSetting( 'cheque_data', {} ); const settings = getSetting( 'cheque_data', {} );
const EditPlaceHolder = () => <div>TODO: Edit preview soon...</div>;
/** /**
* @typedef {import('@woocommerce/type-defs/registered-payment-method-props').RegisteredPaymentMethodProps} RegisteredPaymentMethodProps * @typedef {import('@woocommerce/type-defs/registered-payment-method-props').RegisteredPaymentMethodProps} RegisteredPaymentMethodProps
*/ */
@ -40,6 +38,10 @@ const Content = ( { activePaymentMethod, eventRegistration } ) => {
) : null; ) : null;
}; };
const Edit = ( props ) => {
return <Content { ...props } />;
};
const offlineChequePaymentMethod = { const offlineChequePaymentMethod = {
name: PAYMENT_METHOD_NAME, name: PAYMENT_METHOD_NAME,
label: ( label: (
@ -51,7 +53,7 @@ const offlineChequePaymentMethod = {
</strong> </strong>
), ),
content: <Content />, content: <Content />,
edit: <EditPlaceHolder />, edit: <Edit />,
canMakePayment: () => true, canMakePayment: () => true,
ariaLabel: decodeEntities( ariaLabel: decodeEntities(
settings.title || __( 'Check Payment', 'woo-gutenberg-products-block' ) settings.title || __( 'Check Payment', 'woo-gutenberg-products-block' )

View File

@ -10,10 +10,12 @@ import { loadStripe } from '../stripe-utils';
import { StripeCreditCard } from './payment-method'; import { StripeCreditCard } from './payment-method';
import { PAYMENT_METHOD_NAME } from './constants'; import { PAYMENT_METHOD_NAME } from './constants';
const EditPlaceHolder = () => <div>TODO: Card edit preview soon...</div>;
const stripePromise = loadStripe(); const stripePromise = loadStripe();
const Edit = ( props ) => {
return <StripeCreditCard stripe={ stripePromise } { ...props } />;
};
const stripeCcPaymentMethod = { const stripeCcPaymentMethod = {
name: PAYMENT_METHOD_NAME, name: PAYMENT_METHOD_NAME,
label: ( label: (
@ -22,7 +24,7 @@ const stripeCcPaymentMethod = {
</strong> </strong>
), ),
content: <StripeCreditCard stripe={ stripePromise } />, content: <StripeCreditCard stripe={ stripePromise } />,
edit: <EditPlaceHolder />, edit: <Edit />,
canMakePayment: () => stripePromise, canMakePayment: () => stripePromise,
ariaLabel: __( ariaLabel: __(
'Stripe Credit Card payment method', 'Stripe Credit Card payment method',