From 01602f90bf06904028c26b49ed3a0fc77827f2c4 Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Mon, 16 Mar 2020 16:38:24 +0000 Subject: [PATCH] Implement "return to cart" and "place order" buttons on checkout (https://github.com/woocommerce/woocommerce-blocks/pull/1926) * Add back icon * Add cart URL constant * Add button components * Implement button components into checkout * Update checkout styles to match mockup incl updates to margins and padding * Add options to control return to cart link * Use checkout context * Update snapshot * Update context * href * Color/arrow styling * Implement select instead of open URL field * Add notice and updated settings control * Show notice conditonally * Store permalinks to avoid extra API requests, and get pages via API * Update snapshots * Fix double layout conflict * Switch back to ID and add permalink via block setting * snaps * Fix snapshot; add default shape for pages * Feedback * Better undefined handling * Update assets/js/blocks/cart-checkout/checkout/block.js Co-Authored-By: Darren Ethier Co-authored-by: Darren Ethier --- .../js/base/components/cart-checkout/index.js | 2 + .../cart-checkout/place-order-button/index.js | 24 + .../return-to-cart-button/index.js | 25 + .../return-to-cart-button/style.scss | 10 + .../components/checkout/form-step/style.scss | 6 +- .../base/components/checkout/form/style.scss | 9 - .../components/checkout/policies/style.scss | 3 +- .../components/payment-methods/style.scss | 4 +- .../js/blocks/cart-checkout/cart/edit.js | 20 +- .../js/blocks/cart-checkout/cart/frontend.js | 17 +- .../cart-checkout/checkout/attributes.js | 8 + .../js/blocks/cart-checkout/checkout/block.js | 19 + .../js/blocks/cart-checkout/checkout/edit.js | 438 +++++++++++------- .../blocks/cart-checkout/checkout/editor.scss | 4 + .../blocks/cart-checkout/checkout/frontend.js | 17 +- .../blocks/cart-checkout/checkout/style.scss | 16 + .../feedback-prompt/index.js} | 0 .../feedback-prompt}/style.scss | 0 .../js/hocs/with-feedback-prompt/index.js | 6 +- .../assets/js/icons/index.js | 1 + .../assets/js/icons/library/arrow-back.js | 17 + .../assets/js/settings/blocks/constants.js | 25 +- plugins/woocommerce-blocks/src/Assets.php | 46 +- .../src/BlockTypes/Checkout.php | 6 + .../__snapshots__/checkout.test.js.snap | 2 +- 25 files changed, 490 insertions(+), 235 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/place-order-button/index.js create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/index.js create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/style.scss rename plugins/woocommerce-blocks/assets/js/{hocs/with-feedback-prompt/feedback-prompt.js => components/feedback-prompt/index.js} (100%) rename plugins/woocommerce-blocks/assets/js/{hocs/with-feedback-prompt => components/feedback-prompt}/style.scss (100%) create mode 100644 plugins/woocommerce-blocks/assets/js/icons/library/arrow-back.js diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js index f128c1fe7af..20f1603e630 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js @@ -6,3 +6,5 @@ export { default as ProductName } from './product-name'; export { default as ProductPrice } from './product-price'; export { default as ProductSaleBadge } from './product-sale-badge'; export { default as ProductVariationData } from './product-variation-data'; +export { default as PlaceOrderButton } from './place-order-button'; +export { default as ReturnToCartButton } from './return-to-cart-button'; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/place-order-button/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/place-order-button/index.js new file mode 100644 index 00000000000..1031d846b36 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/place-order-button/index.js @@ -0,0 +1,24 @@ +/** + * External dependencies + */ +import { useCheckoutContext } from '@woocommerce/base-context'; + +/** + * Internal dependencies + */ +import Button from '../button'; + +const PlaceOrderButton = () => { + const { submitLabel, onSubmit } = useCheckoutContext(); + + return ( + + ); +}; + +export default PlaceOrderButton; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/index.js new file mode 100644 index 00000000000..2d7bb2cec98 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/index.js @@ -0,0 +1,25 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { CART_URL } from '@woocommerce/block-settings'; +import { Icon, arrowBack } from '@woocommerce/icons'; + +/** + * Internal dependencies + */ +import './style.scss'; + +const ReturnToCartButton = ( { link } ) => { + return ( + + + { __( 'Return to Cart', 'woo-gutenberg-products-block' ) } + + ); +}; + +export default ReturnToCartButton; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/style.scss new file mode 100644 index 00000000000..ec710c5e27f --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/style.scss @@ -0,0 +1,10 @@ +.wc-block-components-checkout-return-to-cart-button { + color: $gray-60; + text-decoration: none !important; + + svg { + vertical-align: middle; + margin-right: 0.25em; + display: inline-block; + } +} diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkout/form-step/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/checkout/form-step/style.scss index 905b70346a3..c6c0b89c6de 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/checkout/form-step/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/checkout/form-step/style.scss @@ -8,7 +8,7 @@ $line-offset-from-circle-size: 8px; .wc-block-checkout-form fieldset.wc-block-checkout-step { position: relative; border: none; - padding: 0 0 $gap-larger $gap-large; + padding: 0 $gap-larger $gap-larger $gap-larger; background: none; margin: 0; @@ -63,7 +63,7 @@ $line-offset-from-circle-size: 8px; width: 1px; background-color: $gray-10; position: absolute; - left: 0; + left: $circle-size/2; top: $circle-size + $line-offset-from-circle-size; } @@ -73,7 +73,7 @@ $line-offset-from-circle-size: 8px; position: absolute; width: $circle-size; height: $circle-size; - left: -$circle-size / 2; + left: 0; top: 0; background: $gray-20; color: $white; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkout/form/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/checkout/form/style.scss index 85531c810cc..9dd6ac9e3be 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/checkout/form/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/checkout/form/style.scss @@ -1,12 +1,3 @@ .wc-block-checkout-form { - margin-right: $gap-large; max-width: 100%; } - -// Responsive media styles. -@include breakpoint( "<480px" ) { - .wc-block-checkout-form { - margin-left: $gap-smaller; - margin-right: $gap; - } -} diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/style.scss index 45e63d1c5f1..ac54712eadc 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/style.scss @@ -3,7 +3,7 @@ text-align: center; list-style: none outside; line-height: 1; - margin: 2em 0 1em; + margin: $gap-large 0; } .wc-block-components-checkout-policies__item { list-style: none outside; @@ -18,5 +18,6 @@ a { padding: 0 0.25em; text-decoration: underline; + color: $gray-60; } } diff --git a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss index 249e1f941b7..beb6ebc404e 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss @@ -2,7 +2,7 @@ margin: auto; border: 2px solid $black; border-radius: 5px; - padding: 10px; + padding: 8px; .wc-block-component-express-checkout__title { position: relative; @@ -50,7 +50,7 @@ display: flex; align-items: center; text-align: center; - padding: 0 ($gap-large+14px); + padding: 0 $gap-larger; margin: $gap-large 0; &::before { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js index 15e42d09847..ef2f2326873 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js @@ -18,13 +18,10 @@ import { EditorProvider } from '@woocommerce/base-context'; import FullCart from './full-cart'; import EmptyCart from './empty-cart'; -/** - * Component to handle edit mode of "Cart Block". - */ -const CartEditor = ( { className, attributes, setAttributes } ) => { +const BlockSettings = ( { attributes, setAttributes } ) => { const { isShippingCalculatorEnabled, isShippingCostHidden } = attributes; - const BlockSettings = () => ( + return ( { ); +}; +/** + * Component to handle edit mode of "Cart Block". + */ +const CartEditor = ( { className, attributes, setAttributes } ) => { + const { isShippingCalculatorEnabled, isShippingCostHidden } = attributes; return (
{ <> { currentView === 'full' && ( <> - { SHIPPING_ENABLED && } + { SHIPPING_ENABLED && ( + + ) } { Object.keys( blockAttributes ).forEach( ( key ) => { if ( typeof el.dataset[ key ] !== 'undefined' ) { - if ( - el.dataset[ key ] === 'true' || - el.dataset[ key ] === 'false' - ) { - attributes[ key ] = el.dataset[ key ] !== 'false'; - } else { - attributes[ key ] = el.dataset[ key ]; + switch ( blockAttributes[ key ].type ) { + case 'boolean': + attributes[ key ] = el.dataset[ key ] !== 'false'; + break; + case 'number': + attributes[ key ] = parseInt( el.dataset[ key ], 10 ); + break; + default: + attributes[ key ] = el.dataset[ key ]; + break; } } else { attributes[ key ] = blockAttributes[ key ].default; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/attributes.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/attributes.js index 452726b282b..e22347c8319 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/attributes.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/attributes.js @@ -32,6 +32,14 @@ const blockAttributes = { type: 'boolean', default: true, }, + showReturnToCart: { + type: 'boolean', + default: true, + }, + cartPageId: { + type: 'number', + default: 0, + }, }; export default blockAttributes; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js index 5b4e0956db3..ee31acffc1d 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js @@ -11,6 +11,10 @@ import { NoShipping, Policies, } from '@woocommerce/base-components/checkout'; +import { + PlaceOrderButton, + ReturnToCartButton, +} from '@woocommerce/base-components/cart-checkout'; import TextInput from '@woocommerce/base-components/text-input'; import ShippingRatesControl from '@woocommerce/base-components/shipping-rates-control'; import CheckboxControl from '@woocommerce/base-components/checkbox-control'; @@ -29,6 +33,7 @@ import { SidebarLayout, Main, } from '@woocommerce/base-components/sidebar-layout'; +import { getSetting } from '@woocommerce/settings'; /** * Internal dependencies @@ -324,6 +329,20 @@ const Block = ( { } /> +
+ { attributes.showReturnToCart && ( + + ) } + +
{ attributes.showPolicyLinks && } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js index 533796c1072..00a7b992daa 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js @@ -2,7 +2,7 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { withFeedbackPrompt } from '@woocommerce/block-hocs'; +import FeedbackPrompt from '@woocommerce/block-components/feedback-prompt'; import { previewCart, previewShippingRates, @@ -12,6 +12,7 @@ import { PanelBody, ToggleControl, CheckboxControl, + SelectControl, Notice, } from '@wordpress/components'; import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary'; @@ -19,9 +20,12 @@ import { PRIVACY_URL, TERMS_URL, SHIPPING_METHODS_EXIST, + CHECKOUT_PAGE_ID, } from '@woocommerce/block-settings'; +import { useSelect } from '@wordpress/data'; import { getAdminLink } from '@woocommerce/settings'; import { __experimentalCreateInterpolateElement } from 'wordpress-element'; +import { EditorProvider, useEditorContext } from '@woocommerce/base-context'; /** * Internal dependencies @@ -29,9 +33,8 @@ import { __experimentalCreateInterpolateElement } from 'wordpress-element'; import Block from './block.js'; import './editor.scss'; -const CheckoutEditor = ( { attributes, setAttributes } ) => { +const BlockSettings = ( { attributes, setAttributes } ) => { const { - className, useShippingAsBilling, showCompanyField, showAddress2Field, @@ -39,201 +42,296 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => { requireCompanyField, requirePhoneField, showPolicyLinks, + showReturnToCart, + cartPageId, } = attributes; + const { currentPostId } = useEditorContext(); + const pages = + useSelect( ( select ) => { + return select( 'core' ).getEntityRecords( 'postType', 'page', { + status: 'publish', + orderby: 'title', + order: 'asc', + per_page: 100, + } ); + }, [] ) || null; + return ( -
- - + { currentPostId !== CHECKOUT_PAGE_ID && ( + + { __experimentalCreateInterpolateElement( + __( + 'If you would like to use this block as your default checkout you must update your page settings in WooCommerce.', + 'woo-gutenberg-products-block' + ), + { + a: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + } + ) } + + ) } + +

+ { __( + 'Choose whether your checkout form requires extra information from customers.', 'woo-gutenberg-products-block' ) } - > -

- { __( - 'Choose whether your checkout form requires extra information from customers.', - 'woo-gutenberg-products-block' - ) } -

- + + setAttributes( { + showCompanyField: ! showCompanyField, + } ) + } + /> + { showCompanyField && ( + setAttributes( { - showCompanyField: ! showCompanyField, + requireCompanyField: ! requireCompanyField, } ) } + className="components-base-control--nested" /> - { showCompanyField && ( - - setAttributes( { - requireCompanyField: ! requireCompanyField, - } ) - } - className="components-base-control--nested" - /> - ) } - - setAttributes( { - showAddress2Field: ! showAddress2Field, - } ) - } - /> - - setAttributes( { - showPhoneField: ! showPhoneField, - } ) - } - /> - { showPhoneField && ( - - setAttributes( { - requirePhoneField: ! requirePhoneField, - } ) - } - className="components-base-control--nested" - /> - ) } - - -

- { __( - 'Reduce the number of fields required to checkout.', - 'woo-gutenberg-products-block' - ) } -

- + setAttributes( { + showAddress2Field: ! showAddress2Field, + } ) + } + /> + + setAttributes( { + showPhoneField: ! showPhoneField, + } ) + } + /> + { showPhoneField && ( + setAttributes( { - useShippingAsBilling: ! useShippingAsBilling, + requirePhoneField: ! requirePhoneField, } ) } + className="components-base-control--nested" /> - - -

- { __( - 'Choose additional content to display on checkout.', - 'woo-gutenberg-products-block' - ) } -

- - setAttributes( { - showPolicyLinks: ! showPolicyLinks, - } ) - } - /> - { showPolicyLinks && ( ! PRIVACY_URL || ! TERMS_URL ) && ( - - { __experimentalCreateInterpolateElement( - __( - 'Pages must be first setup in store settings: Privacy policy, Terms and conditions.', - 'woo-gutenberg-products-block' - ), - { - a1: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content - - ), - a2: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content - - ), - } - ) } - - ) } - - - + - + { __( + 'Reduce the number of fields required to checkout.', + 'woo-gutenberg-products-block' + ) } +

+ + setAttributes( { + useShippingAsBilling: ! useShippingAsBilling, + } ) } /> - -
+ + +

+ { __( + 'Choose additional content to display.', + 'woo-gutenberg-products-block' + ) } +

+ + setAttributes( { + showPolicyLinks: ! showPolicyLinks, + } ) + } + /> + { showPolicyLinks && ( ! PRIVACY_URL || ! TERMS_URL ) && ( + + { __experimentalCreateInterpolateElement( + __( + 'Pages must be first setup in store settings: Privacy policy, Terms and conditions.', + 'woo-gutenberg-products-block' + ), + { + a1: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + a2: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + } + ) } + + ) } + + setAttributes( { + showReturnToCart: ! showReturnToCart, + } ) + } + /> + { showReturnToCart && + ( currentPostId !== CHECKOUT_PAGE_ID || cartPageId ) && + pages && ( + { + return { + label: page.title.raw, + value: parseInt( page.id, 10 ), + }; + } ), + ] } + onChange={ ( value ) => + setAttributes( { + cartPageId: parseInt( value, 10 ), + } ) + } + /> + ) } + + + ); }; -export default withFeedbackPrompt( - __( - 'We are currently working on improving our cart and checkout blocks, providing merchants with the tools and customization options they need.', - 'woo-gutenberg-products-block' - ) -)( CheckoutEditor ); +const CheckoutEditor = ( { attributes, setAttributes } ) => { + const { className } = attributes; + return ( + +
+ + + + +
+ + ); +}; + +export default CheckoutEditor; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss index 16ce8c3b8fe..c14fee067cc 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss @@ -13,3 +13,7 @@ padding-left: 52px; margin-top: -12px; } + +.wc-block-checkout__page-notice { + margin: 0; +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/frontend.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/frontend.js index de5ee669403..a96181fb1be 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/frontend.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/frontend.js @@ -70,13 +70,16 @@ const getProps = ( el ) => { Object.keys( blockAttributes ).forEach( ( key ) => { if ( typeof el.dataset[ key ] !== 'undefined' ) { - if ( - el.dataset[ key ] === 'true' || - el.dataset[ key ] === 'false' - ) { - attributes[ key ] = el.dataset[ key ] !== 'false'; - } else { - attributes[ key ] = el.dataset[ key ]; + switch ( blockAttributes[ key ].type ) { + case 'boolean': + attributes[ key ] = el.dataset[ key ] !== 'false'; + break; + case 'number': + attributes[ key ] = parseInt( el.dataset[ key ], 10 ); + break; + default: + attributes[ key ] = el.dataset[ key ]; + break; } } else { attributes[ key ] = blockAttributes[ key ].default; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss index 2c5f650ea1f..1a62df9cefc 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss @@ -83,6 +83,22 @@ } } +.wc-block-checkout__actions { + display: flex; + justify-content: space-between; + align-items: center; + margin: $gap-large 0 $gap-large*2; + padding: 0 $gap-larger; + + .wc-block-components-checkout-place-order-button { + width: 50%; + padding: 1em; + border-radius: 3px; + height: auto; + margin-left: auto; + } +} + @include breakpoint( ">480px" ) { .wc-block-checkout__billing-fields, .wc-block-checkout__shipping-fields { diff --git a/plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/feedback-prompt.js b/plugins/woocommerce-blocks/assets/js/components/feedback-prompt/index.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/feedback-prompt.js rename to plugins/woocommerce-blocks/assets/js/components/feedback-prompt/index.js diff --git a/plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/style.scss b/plugins/woocommerce-blocks/assets/js/components/feedback-prompt/style.scss similarity index 100% rename from plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/style.scss rename to plugins/woocommerce-blocks/assets/js/components/feedback-prompt/style.scss diff --git a/plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/index.js b/plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/index.js index 0cfe389b757..9bfef053ab8 100644 --- a/plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/index.js +++ b/plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/index.js @@ -4,11 +4,7 @@ import { Fragment } from '@wordpress/element'; import { InspectorControls } from '@wordpress/block-editor'; import { createHigherOrderComponent } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import FeedbackPrompt from './feedback-prompt.js'; +import FeedbackPrompt from '@woocommerce/block-components/feedback-prompt'; /** * Adds a feedback prompt with custom text to the editor sidebar. diff --git a/plugins/woocommerce-blocks/assets/js/icons/index.js b/plugins/woocommerce-blocks/assets/js/icons/index.js index d049a499ffd..1425c72797b 100644 --- a/plugins/woocommerce-blocks/assets/js/icons/index.js +++ b/plugins/woocommerce-blocks/assets/js/icons/index.js @@ -1,5 +1,6 @@ export { default as Icon } from './icon'; +export { default as arrowBack } from './library/arrow-back'; export { default as bill } from './library/bill'; export { default as card } from './library/card'; export { default as cart } from './library/cart'; diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/arrow-back.js b/plugins/woocommerce-blocks/assets/js/icons/library/arrow-back.js new file mode 100644 index 00000000000..fb395e35d38 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/icons/library/arrow-back.js @@ -0,0 +1,17 @@ +/** + * External dependencies + */ +import { SVG } from 'wordpress-components'; + +const arrowBack = ( + + + +); + +export default arrowBack; diff --git a/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js b/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js index 34dabd9c045..24149190b68 100644 --- a/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js +++ b/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js @@ -55,18 +55,27 @@ export const SHIPPING_METHODS_EXIST = getSetting( ); const defaultPage = { - name: '', - url: '', + id: 0, + title: '', + permalink: '', }; const storePages = getSetting( 'storePages', { shop: defaultPage, + cart: defaultPage, checkout: defaultPage, privacy: defaultPage, terms: defaultPage, } ); -export const SHOP_URL = storePages.shop.url; -export const CHECKOUT_URL = storePages.checkout.url; -export const PRIVACY_URL = storePages.privacy.url; -export const TERMS_URL = storePages.terms.url; -export const PRIVACY_PAGE_NAME = storePages.privacy.name; -export const TERMS_PAGE_NAME = storePages.terms.name; +export const SHOP_URL = storePages.shop.permalink; + +export const CHECKOUT_PAGE_ID = storePages.checkout.id; +export const CHECKOUT_URL = storePages.checkout.permalink; + +export const PRIVACY_URL = storePages.privacy.permalink; +export const PRIVACY_PAGE_NAME = storePages.privacy.title; + +export const TERMS_URL = storePages.terms.permalink; +export const TERMS_PAGE_NAME = storePages.terms.title; + +export const CART_PAGE_ID = storePages.cart.id; +export const CART_URL = storePages.cart.permalink; diff --git a/plugins/woocommerce-blocks/src/Assets.php b/plugins/woocommerce-blocks/src/Assets.php index c8327ecd2f7..fe68c122c97 100644 --- a/plugins/woocommerce-blocks/src/Assets.php +++ b/plugins/woocommerce-blocks/src/Assets.php @@ -103,6 +103,7 @@ class Assets { $product_counts = wp_count_posts( 'product' ); $page_ids = [ 'shop' => wc_get_page_id( 'shop' ), + 'cart' => wc_get_page_id( 'cart' ), 'checkout' => wc_get_page_id( 'checkout' ), 'privacy' => wc_privacy_policy_page_id(), 'terms' => wc_terms_and_conditions_page_id(), @@ -142,27 +143,40 @@ class Assets { ], 'homeUrl' => esc_url( home_url( '/' ) ), 'storePages' => [ - 'shop' => $page_ids['shop'] ? [ - 'name' => get_the_title( $page_ids['shop'] ), - 'url' => get_permalink( $page_ids['shop'] ), - ] : false, - 'checkout' => $page_ids['checkout'] ? [ - 'name' => get_the_title( $page_ids['checkout'] ), - 'url' => get_permalink( $page_ids['checkout'] ), - ] : false, - 'privacy' => $page_ids['privacy'] ? [ - 'name' => get_the_title( $page_ids['privacy'] ), - 'url' => get_permalink( $page_ids['privacy'] ), - ] : false, - 'terms' => $page_ids['terms'] ? [ - 'name' => get_the_title( $page_ids['terms'] ), - 'url' => get_permalink( $page_ids['terms'] ), - ] : false, + 'shop' => self::format_page_resource( $page_ids['shop'] ), + 'cart' => self::format_page_resource( $page_ids['cart'] ), + 'checkout' => self::format_page_resource( $page_ids['checkout'] ), + 'privacy' => self::format_page_resource( $page_ids['privacy'] ), + 'terms' => self::format_page_resource( $page_ids['terms'] ), ], ] ); } + /** + * Format a page object into a standard array of data. + * + * @param WP_Post|int $page Page object or ID. + * @return array + */ + protected static function format_page_resource( $page ) { + if ( is_numeric( $page ) ) { + $page = get_post( $page ); + } + if ( ! $page ) { + return [ + 'id' => 0, + 'title' => '', + 'permalink' => false, + ]; + } + return [ + 'id' => $page->ID, + 'title' => $page->post_title, + 'permalink' => get_permalink( $page->ID ), + ]; + } + /** * Get the file modified time as a cache buster if we're in dev mode. * diff --git a/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php b/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php index 8f92bac7889..fd4111fea05 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php @@ -50,6 +50,12 @@ class Checkout extends AbstractBlock { $data_registry = Package::container()->get( \Automattic\WooCommerce\Blocks\Assets\AssetDataRegistry::class ); + if ( ! empty( $attributes['cartPageId'] ) && ! $data_registry->exists( 'page-' . $attributes['cartPageId'] ) ) { + $permalink = get_permalink( $attributes['cartPageId'] ); + if ( $permalink ) { + $data_registry->add( 'page-' . $attributes['cartPageId'], get_permalink( $attributes['cartPageId'] ) ); + } + } if ( ! $data_registry->exists( 'allowedCountries' ) ) { $data_registry->add( 'allowedCountries', WC()->countries->get_allowed_countries() ); } diff --git a/plugins/woocommerce-blocks/tests/e2e-tests/specs/backend/__snapshots__/checkout.test.js.snap b/plugins/woocommerce-blocks/tests/e2e-tests/specs/backend/__snapshots__/checkout.test.js.snap index 1a174892741..a9a5ad2b85d 100644 --- a/plugins/woocommerce-blocks/tests/e2e-tests/specs/backend/__snapshots__/checkout.test.js.snap +++ b/plugins/woocommerce-blocks/tests/e2e-tests/specs/backend/__snapshots__/checkout.test.js.snap @@ -2,6 +2,6 @@ exports[`Checkout Block can be created 1`] = ` " -
Checkout block coming soon to store near you
+
Checkout block coming soon to store near you
" `;