From a459360dc19d2831a616cc4c856bd37f665d7a6c Mon Sep 17 00:00:00 2001 From: Seghir Nadir Date: Tue, 21 Sep 2021 13:38:56 +0100 Subject: [PATCH] Add Express Checkout block for Cart i2 (https://github.com/woocommerce/woocommerce-blocks/pull/4791) * setup basic column blocks * fix classnames * move hacks back * dubplciate columns * add express payment block * adjust styles * fix locking after rebase --- .../js/blocks/cart-checkout/cart-i2/edit.tsx | 1 + .../cart-express-payment-block/block.json | 26 ++++++ .../cart-express-payment-block/block.tsx | 25 ++++++ .../cart-express-payment-block/edit.tsx | 87 +++++++++++++++++++ .../cart-express-payment-block/editor.scss | 29 +++++++ .../cart-express-payment-block/index.tsx | 20 +++++ .../inner-blocks/cart-items-block/block.json | 1 + .../cart-line-items-block/block.json | 1 + .../cart-order-summary-block/block.json | 4 +- .../inner-blocks/cart-totals-block/block.json | 6 ++ .../cart-i2/inner-blocks/index.tsx | 1 + 11 files changed, 200 insertions(+), 1 deletion(-) create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.json create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/edit.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/editor.scss create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/index.tsx diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/edit.tsx index 414dada2ba5..41bcf305eef 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/edit.tsx @@ -144,6 +144,7 @@ const CartEditor = ( { className, attributes, setAttributes } ) => { {}, [ [ 'woocommerce/cart-order-summary-block', {}, [] ], + [ 'woocommerce/cart-express-payment-block', {}, [] ], [ 'woocommerce/proceed-to-checkout-block', {}, [] ], ], ], diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.json b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.json new file mode 100644 index 00000000000..010fbdd608a --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.json @@ -0,0 +1,26 @@ +{ + "name": "woocommerce/cart-express-payment-block", + "version": "1.0.0", + "title": "Express Checkout", + "description": "Provide an express payment option for your customers.", + "category": "woocommerce", + "supports": { + "align": false, + "html": false, + "multiple": false, + "reusable": false, + "inserter": false + }, + "attributes": { + "lock": { + "type": "object", + "default": { + "remove": true, + "move": true + } + } + }, + "parent": [ "woocommerce/cart-totals-block" ], + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2 +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.tsx new file mode 100644 index 00000000000..21cce1ef7ec --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.tsx @@ -0,0 +1,25 @@ +/** + * External dependencies + */ +import { useStoreCart } from '@woocommerce/base-context/hooks'; + +/** + * Internal dependencies + */ +import { CartExpressPayment } from '../../../payment-methods'; + +const Block = (): JSX.Element | null => { + const { cartNeedsPayment } = useStoreCart(); + + if ( ! cartNeedsPayment ) { + return null; + } + + return ( +
+ +
+ ); +}; + +export default Block; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/edit.tsx new file mode 100644 index 00000000000..1717ea5d38d --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/edit.tsx @@ -0,0 +1,87 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useBlockProps } from '@wordpress/block-editor'; +import { Placeholder, Button } from 'wordpress-components'; +import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks'; +import { Icon, card } from '@woocommerce/icons'; +import { ADMIN_URL } from '@woocommerce/settings'; +import classnames from 'classnames'; + +/** + * Internal dependencies + */ +import Block from './block'; +import './editor.scss'; +import { useBlockPropsWithLocking } from '../../hacks'; + +/** + * Renders a placeholder in the editor. + */ +const NoExpressPaymentMethodsPlaceholder = () => { + return ( + } + label={ __( 'Express Checkout', 'woo-gutenberg-products-block' ) } + className="wp-block-woocommerce-checkout-express-payment-block-placeholder" + > + + { __( + "Your store doesn't have any Payment Methods that support the Express Checkout Block. If they are added, they will be shown here.", + 'woo-gutenberg-products-block' + ) } + + + + ); +}; + +export const Edit = ( { + attributes, +}: { + attributes: { + lock: { + move: boolean; + remove: boolean; + }; + }; +} ): JSX.Element | null => { + const { paymentMethods, isInitialized } = useExpressPaymentMethods(); + const hasExpressPaymentMethods = Object.keys( paymentMethods ).length > 0; + const blockProps = useBlockPropsWithLocking( { + className: classnames( { + 'wp-block-woocommerce-cart-express-payment-block--has-express-payment-methods': hasExpressPaymentMethods, + } ), + attributes, + } ); + + if ( ! isInitialized ) { + return null; + } + + return ( +
+ { hasExpressPaymentMethods ? ( + + ) : ( + + ) } +
+ ); +}; + +export const Save = (): JSX.Element => { + return
; +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/editor.scss new file mode 100644 index 00000000000..c7acf278ff5 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/editor.scss @@ -0,0 +1,29 @@ +// Adjust padding and margins in the editor to improve selected block outlines. +.wp-block-woocommerce-cart-express-payment-block { + margin: 14px 0 28px; + + .components-placeholder__label svg { + font-size: 1em; + } + + .wc-block-components-express-payment-continue-rule--checkout { + margin-bottom: 0; + } + + &.wp-block-woocommerce-cart-express-payment-block--has-express-payment-methods { + padding: 14px 0; + margin: -14px 0 14px 0 !important; + position: relative; + } +} + +.wp-block-woocommerce-checkout-express-payment-block-placeholder { + * { + pointer-events: all; // Overrides parent disabled component in editor context + } + + .wp-block-woocommerce-checkout-express-payment-block-placeholder__description { + display: block; + margin: 0 0 1em; + } +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/index.tsx new file mode 100644 index 00000000000..7d5f848e195 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/index.tsx @@ -0,0 +1,20 @@ +/** + * External dependencies + */ +import { Icon, card } from '@woocommerce/icons'; +import { registerFeaturePluginBlockType } from '@woocommerce/block-settings'; + +/** + * Internal dependencies + */ +import { Edit, Save } from './edit'; +import metadata from './block.json'; + +registerFeaturePluginBlockType( metadata, { + icon: { + src: , + foreground: '#874FB9', + }, + edit: Edit, + save: Save, +} ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-items-block/block.json b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-items-block/block.json index d2093285352..92cab95529d 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-items-block/block.json +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-items-block/block.json @@ -13,6 +13,7 @@ }, "attributes": { "lock": { + "type": "object", "default": { "remove": true, "move": true diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-line-items-block/block.json b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-line-items-block/block.json index 3706f1ba958..b269f9edcc7 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-line-items-block/block.json +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-line-items-block/block.json @@ -13,6 +13,7 @@ }, "attributes": { "lock": { + "type": "object", "default": { "remove": true, "move": true diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/block.json b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/block.json index f9862333cbc..9809675908e 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/block.json +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/block.json @@ -13,8 +13,10 @@ }, "attributes": { "lock": { + "type": "object", "default": { - "remove": true + "remove": true, + "move": true } } }, diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-totals-block/block.json b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-totals-block/block.json index 511221b2785..b048fefcfbf 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-totals-block/block.json +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-totals-block/block.json @@ -19,6 +19,12 @@ "text": { "type": "string", "required": false + }, + "lock": { + "type": "object", + "default": { + "remove": true + } } }, "parent": [ "woocommerce/cart-i2" ], diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/index.tsx index 88d2b518125..56f735f86f1 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/index.tsx @@ -5,4 +5,5 @@ import './cart-items-block'; import './cart-totals-block'; import './cart-line-items-block'; import './cart-order-summary-block'; +import './cart-express-payment-block'; import './proceed-to-checkout-block';