From 2044798af6628616d1e9d9457215ff9aa878ed87 Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Wed, 11 Oct 2023 15:09:43 +0100 Subject: [PATCH] Remove Shipping calculator settings and link to the WooCommerce admin settings (https://github.com/woocommerce/woocommerce-blocks/pull/11184) * Remove block level options in favour of settings * Remove calculator toggle test * Update assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Remove unused attributes --------- Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> --- .../attributes.tsx | 18 ------ .../cart-order-summary-shipping/block.tsx | 14 ++--- .../cart-order-summary-shipping/edit.tsx | 39 +++++------- .../cart-order-summary-shipping/frontend.tsx | 8 +-- .../cart-order-summary-shipping/index.tsx | 2 - .../assets/js/blocks/cart/test/block.js | 13 +--- .../edit.tsx | 2 +- .../attributes.tsx | 4 -- .../checkout-shipping-method-block/block.json | 4 -- .../checkout-shipping-method-block/block.tsx | 7 ++- .../checkout-shipping-method-block/edit.tsx | 35 ----------- .../frontend.tsx | 3 - .../attributes.tsx | 4 -- .../block.json | 4 -- .../checkout-shipping-methods-block/edit.tsx | 63 ++++++------------- .../external-link-card/editor.scss | 3 + .../__fixtures__/checkout.fixture.json | 2 +- .../cart-block.merchant.block_theme.spec.ts | 20 +----- 18 files changed, 55 insertions(+), 190 deletions(-) delete mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/attributes.tsx diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/attributes.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/attributes.tsx deleted file mode 100644 index e5378cb59e8..00000000000 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/attributes.tsx +++ /dev/null @@ -1,18 +0,0 @@ -/** - * External dependencies - */ -import { getSetting } from '@woocommerce/settings'; - -export default { - isShippingCalculatorEnabled: { - type: 'boolean', - default: getSetting( 'isShippingCalculatorEnabled', true ), - }, - lock: { - type: 'object', - default: { - move: false, - remove: true, - }, - }, -}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx index dacbbc32938..e29d0f86ddd 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx @@ -5,14 +5,9 @@ import { TotalsShipping } from '@woocommerce/base-components/cart-checkout'; import { getCurrencyFromPriceResponse } from '@woocommerce/price-format'; import { useStoreCart } from '@woocommerce/base-context/hooks'; import { TotalsWrapper } from '@woocommerce/blocks-checkout'; +import { getSetting } from '@woocommerce/settings'; -const Block = ( { - className, - isShippingCalculatorEnabled, -}: { - className: string; - isShippingCalculatorEnabled: boolean; -} ): JSX.Element | null => { +const Block = ( { className }: { className: string } ): JSX.Element | null => { const { cartTotals, cartNeedsShipping } = useStoreCart(); if ( ! cartNeedsShipping ) { @@ -24,7 +19,10 @@ const Block = ( { return ( ( + 'isShippingCalculatorEnabled', + true + ) } showRateSelector={ true } values={ cartTotals } currency={ totalsCurrency } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx index ccaaf05677f..5a44c2ef8a5 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx @@ -3,8 +3,8 @@ */ import { __ } from '@wordpress/i18n'; import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; -import { PanelBody, ToggleControl } from '@wordpress/components'; -import { getSetting } from '@woocommerce/settings'; +import { PanelBody, ExternalLink } from '@wordpress/components'; +import { ADMIN_URL, getSetting } from '@woocommerce/settings'; import Noninteractive from '@woocommerce/base-components/noninteractive'; /** @@ -14,19 +14,16 @@ import Block from './block'; export const Edit = ( { attributes, - setAttributes, }: { attributes: { - isShippingCalculatorEnabled: boolean; className: string; lock: { move: boolean; remove: boolean; }; }; - setAttributes: ( attributes: Record< string, unknown > ) => void; } ): JSX.Element => { - const { isShippingCalculatorEnabled, className } = attributes; + const { className } = attributes; const shippingEnabled = getSetting( 'shippingEnabled', true ); const blockProps = useBlockProps(); @@ -36,35 +33,29 @@ export const Edit = ( { { !! shippingEnabled && ( - + { __( + 'Options that control shipping can be managed in your store settings.', 'woo-gutenberg-products-block' ) } - help={ __( - 'Allow customers to estimate shipping by entering their address.', +

+ + { __( + 'Manage shipping options', 'woo-gutenberg-products-block' ) } - checked={ isShippingCalculatorEnabled } - onChange={ () => - setAttributes( { - isShippingCalculatorEnabled: - ! isShippingCalculatorEnabled, - } ) - } - /> + { ' ' } ) } - + ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/frontend.tsx index b6c773996b2..4fc9ad2897a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/frontend.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/frontend.tsx @@ -1,12 +1,6 @@ -/** - * External dependencies - */ -import { withFilteredAttributes } from '@woocommerce/shared-hocs'; - /** * Internal dependencies */ import Block from './block'; -import attributes from './attributes'; -export default withFilteredAttributes( attributes )( Block ); +export default Block; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/index.tsx index 9f300d474eb..c6a8fcd99f0 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/index.tsx @@ -9,7 +9,6 @@ import { registerBlockType } from '@wordpress/blocks'; * Internal dependencies */ import { Edit, Save } from './edit'; -import attributes from './attributes'; registerBlockType( 'woocommerce/cart-order-summary-shipping-block', { icon: { @@ -20,7 +19,6 @@ registerBlockType( 'woocommerce/cart-order-summary-shipping-block', { /> ), }, - attributes, edit: Edit, save: Save, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/test/block.js b/plugins/woocommerce-blocks/assets/js/blocks/cart/test/block.js index bdacc3a673c..dfca48b4b9b 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart/test/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/test/block.js @@ -40,15 +40,10 @@ jest.mock( '@wordpress/compose', () => ( { const CartBlock = ( { attributes = { showRateAfterTaxName: false, - isShippingCalculatorEnabled: false, checkoutPageId: 0, }, } ) => { - const { - showRateAfterTaxName, - isShippingCalculatorEnabled, - checkoutPageId, - } = attributes; + const { showRateAfterTaxName, checkoutPageId } = attributes; return ( @@ -59,11 +54,7 @@ const CartBlock = ( { - + diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/edit.tsx index 0c414b8c169..e1d503854bc 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/edit.tsx @@ -49,7 +49,7 @@ export const Edit = ( { >

{ __( - 'Account creation and guest checkout settings can be managed in the WooCommerce settings.', + 'Account creation and guest checkout settings can be managed in your store settings.', 'woo-gutenberg-products-block' ) }

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/attributes.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/attributes.tsx index 9c21e4de517..42dfb4696fa 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/attributes.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/attributes.tsx @@ -44,8 +44,4 @@ export default { remove: true, }, }, - shippingCostRequiresAddress: { - type: 'boolean', - default: false, - }, }; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.json b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.json index b3255985c2d..b080adafec9 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.json +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.json @@ -19,10 +19,6 @@ "remove": true, "move": true } - }, - "shippingCostRequiresAddress": { - "type": "boolean", - "default": false } }, "parent": [ "woocommerce/checkout-fields-block" ], diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx index 190cb4fa3f2..56130c0adae 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx @@ -13,6 +13,7 @@ import { useEffect } from '@wordpress/element'; import { CART_STORE_KEY, VALIDATION_STORE_KEY } from '@woocommerce/block-data'; import { useDispatch, useSelect } from '@wordpress/data'; import { isPackageRateCollectable } from '@woocommerce/base-utils'; +import { getSetting } from '@woocommerce/settings'; /** * Internal dependencies @@ -164,17 +165,19 @@ const Block = ( { showIcon, localPickupText, shippingText, - shippingCostRequiresAddress = false, }: { checked: string; onChange: ( value: string ) => void; showPrice: boolean; showIcon: boolean; - shippingCostRequiresAddress: boolean; localPickupText: string; shippingText: string; } ): JSX.Element | null => { const { shippingRates } = useShippingData(); + const shippingCostRequiresAddress = getSetting< boolean >( + 'shippingCostRequiresAddress', + false + ); return ( ) => void; } ): JSX.Element | null => { - const toggleAttribute = ( key: keyof Attributes ): void => { - const newAttributes = {} as Partial< Attributes >; - newAttributes[ key ] = ! ( attributes[ key ] as boolean ); - setAttributes( newAttributes ); - }; - const { setPrefersCollection } = useDispatch( CHECKOUT_STORE_KEY ); const { prefersCollection } = useSelect( ( select ) => { const checkoutStore = select( CHECKOUT_STORE_KEY ); @@ -221,30 +210,6 @@ export const Edit = ( { ) } > - - { - updateAttributeInSiblingBlock( - clientId, - 'shippingCostRequiresAddress', - selected, - 'woocommerce/checkout-shipping-methods-block' - ); - - toggleAttribute( 'shippingCostRequiresAddress' ); - } } - /> - diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/frontend.tsx index 86f5154a87b..74ae2cc83f8 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/frontend.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/frontend.tsx @@ -25,12 +25,10 @@ const FrontendBlock = ( { showIcon, shippingText, localPickupText, - shippingCostRequiresAddress, }: { title: string; description: string; showStepNumber: boolean; - shippingCostRequiresAddress: boolean; children: JSX.Element; className?: string; showPrice: boolean; @@ -92,7 +90,6 @@ const FrontendBlock = ( { showIcon={ showIcon } localPickupText={ localPickupText } shippingText={ shippingText } - shippingCostRequiresAddress={ shippingCostRequiresAddress } /> { children } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/attributes.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/attributes.tsx index 17cb4f6bf2f..b36f320660d 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/attributes.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/attributes.tsx @@ -24,8 +24,4 @@ export default { remove: true, }, }, - shippingCostRequiresAddress: { - type: 'boolean', - default: false, - }, }; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.json b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.json index b4c5dc5192f..df53c0117c8 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.json +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.json @@ -19,10 +19,6 @@ "remove": true, "move": true } - }, - "shippingCostRequiresAddress": { - "type": "boolean", - "default": false } }, "parent": [ "woocommerce/checkout-fields-block" ], diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/edit.tsx index 0edb15d412a..04feb320af8 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/edit.tsx @@ -4,14 +4,12 @@ import classnames from 'classnames'; import { __ } from '@wordpress/i18n'; import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; -import { PanelBody, ExternalLink, ToggleControl } from '@wordpress/components'; +import { PanelBody, ExternalLink } from '@wordpress/components'; import { ADMIN_URL, getSetting } from '@woocommerce/settings'; import ExternalLinkCard from '@woocommerce/editor-components/external-link-card'; import { innerBlockAreas } from '@woocommerce/blocks-checkout'; import { useCheckoutAddress } from '@woocommerce/base-context/hooks'; import Noninteractive from '@woocommerce/base-components/noninteractive'; -import { Attributes } from '@woocommerce/blocks/checkout/types'; -import { updateAttributeInSiblingBlock } from '@woocommerce/utils'; /** * Internal dependencies @@ -34,15 +32,12 @@ type shippingAdminLink = { export const Edit = ( { attributes, setAttributes, - clientId, }: { - clientId: string; attributes: { title: string; description: string; showStepNumber: boolean; className: string; - shippingCostRequiresAddress: boolean; }; setAttributes: ( attributes: Record< string, unknown > ) => void; } ): JSX.Element | null => { @@ -59,12 +54,6 @@ export const Edit = ( { return null; } - const toggleAttribute = ( key: keyof Attributes ): void => { - const newAttributes = {} as Partial< Attributes >; - newAttributes[ key ] = ! ( attributes[ key ] as boolean ); - setAttributes( newAttributes ); - }; - return ( - + { __( + 'Options that control shipping can be managed in your store settings.', 'woo-gutenberg-products-block' ) } - checked={ attributes.shippingCostRequiresAddress } - onChange={ ( selected ) => { - updateAttributeInSiblingBlock( - clientId, - 'shippingCostRequiresAddress', - selected, - 'woocommerce/checkout-shipping-method-block' - ); - toggleAttribute( 'shippingCostRequiresAddress' ); - } } - /> +

+ + { __( + 'Manage shipping options', + 'woo-gutenberg-products-block' + ) } + { ' ' } { globalShippingMethods.length > 0 && (

{ __( - 'You currently have the following shipping zones active.', + 'Shipping Zones can be made managed in your store settings.', 'woo-gutenberg-products-block' ) }

@@ -151,24 +141,11 @@ export const Edit = ( { /> ); } ) } - - { __( - 'Manage shipping zones', - 'woo-gutenberg-products-block' - ) } - ) } - } - shippingCostRequiresAddress={ - attributes.shippingCostRequiresAddress - } - /> + } /> diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/external-link-card/editor.scss b/plugins/woocommerce-blocks/assets/js/editor-components/external-link-card/editor.scss index 841bd0e22ba..be06854d15b 100644 --- a/plugins/woocommerce-blocks/assets/js/editor-components/external-link-card/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/editor-components/external-link-card/editor.scss @@ -9,6 +9,9 @@ + .wc-block-editor-components-external-link-card { margin-top: -($gap-large - $gap); } + &:last-child { + margin-bottom: 0; + } .wc-block-editor-components-external-link-card__content { flex: 1 1 0; padding-right: $gap; diff --git a/plugins/woocommerce-blocks/tests/e2e-jest/specs/backend/__fixtures__/checkout.fixture.json b/plugins/woocommerce-blocks/tests/e2e-jest/specs/backend/__fixtures__/checkout.fixture.json index 2d9631d676c..b0be2edc810 100644 --- a/plugins/woocommerce-blocks/tests/e2e-jest/specs/backend/__fixtures__/checkout.fixture.json +++ b/plugins/woocommerce-blocks/tests/e2e-jest/specs/backend/__fixtures__/checkout.fixture.json @@ -1 +1 @@ -{"title":"Checkout Block","pageContent":"\n
\n
\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n
\n\n\n\n
\n
\n
\n
\n"} +{"title":"Checkout Block","pageContent":"\n
\n
\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n
\n\n\n\n
\n
\n
\n
\n"} diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.merchant.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.merchant.block_theme.spec.ts index 76fb7a3162e..060ffcffc47 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.merchant.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.merchant.block_theme.spec.ts @@ -143,7 +143,7 @@ test.describe( 'Merchant → Cart', () => { await expect( filledCartAudioButton ).toBeHidden(); } ); - test( 'shows empty cart when changing the view and allows toggling of shipping calculator', async ( { + test( 'shows empty cart when changing the view', async ( { page, editor, editorUtils, @@ -188,24 +188,6 @@ test.describe( 'Merchant → Cart', () => { ' [data-type="woocommerce/empty-cart-block"]' ) ).toBeHidden(); - - await editor.selectBlocks( - await editorUtils.getBlockByName( - 'woocommerce/cart-order-summary-shipping-block' - ) - ); - await editor.openDocumentSettingsSidebar(); - const shippingLabel = editorUtils.page.getByLabel( - 'Shipping calculator' - ); - await shippingLabel.check(); - await expect( - editor.canvas.getByText( 'Change address' ) - ).toBeVisible(); - await shippingLabel.uncheck(); - await expect( - editor.canvas.getByText( 'Change address' ) - ).toBeHidden(); } ); } ); } );