From 1942491822502c259056797f48110cb45bd374e2 Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Fri, 6 Mar 2020 12:20:17 +0000 Subject: [PATCH] Checkout Block: Add Legal links (https://github.com/woocommerce/woocommerce-blocks/pull/1881) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Create policy component * Create page constants * Add toggle options * Update assets/js/base/components/checkout/policies/style.scss Co-Authored-By: Albert Juhé Lluveras * Update assets/css/editor.scss Co-Authored-By: Albert Juhé Lluveras * Feedback * update snapshot Co-authored-by: Albert Juhé Lluveras --- .../woocommerce-blocks/assets/css/editor.scss | 10 +++ .../js/base/components/checkout/index.js | 4 ++ .../components/checkout/policies/index.js | 57 ++++++++++++++++ .../components/checkout/policies/style.scss | 22 ++++++ .../cart-checkout/checkout/attributes.js | 4 ++ .../js/blocks/cart-checkout/checkout/block.js | 10 ++- .../js/blocks/cart-checkout/checkout/edit.js | 67 ++++++++++++++++++- .../assets/js/blocks/reviews/edit-utils.js | 4 +- .../assets/js/blocks/reviews/editor.scss | 10 --- .../assets/js/settings/blocks/constants.js | 19 +++++- plugins/woocommerce-blocks/src/Assets.php | 28 +++++++- .../__snapshots__/checkout.test.js.snap | 2 +- 12 files changed, 215 insertions(+), 22 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/checkout/index.js create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/index.js create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/style.scss diff --git a/plugins/woocommerce-blocks/assets/css/editor.scss b/plugins/woocommerce-blocks/assets/css/editor.scss index 42e4e0e1421..0c6240a21e9 100644 --- a/plugins/woocommerce-blocks/assets/css/editor.scss +++ b/plugins/woocommerce-blocks/assets/css/editor.scss @@ -40,3 +40,13 @@ } } +// Style inline notices in the inspector. +.components-base-control { + + .wc-block-base-control-notice { + margin: -$gap 0 $gap; + } + + & + .wc-block-base-control-notice:last-child { + margin: -$gap 0 $gap-small; + } +} diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkout/index.js b/plugins/woocommerce-blocks/assets/js/base/components/checkout/index.js new file mode 100644 index 00000000000..bd17a5cf5cb --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/checkout/index.js @@ -0,0 +1,4 @@ +export { default as CheckoutForm } from './form'; +export { default as FormStep } from './form-step'; +export { default as NoShipping } from './no-shipping'; +export { default as Policies } from './policies'; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/index.js b/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/index.js new file mode 100644 index 00000000000..29a9a1d297a --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/index.js @@ -0,0 +1,57 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { + PRIVACY_URL, + TERMS_URL, + PRIVACY_PAGE_NAME, + TERMS_PAGE_NAME, +} from '@woocommerce/block-settings'; +import { decodeEntities } from '@wordpress/html-entities'; + +/** + * Internal dependencies + */ +import './style.scss'; + +const Policies = () => { + return ( + + ); +}; + +export default Policies; 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 new file mode 100644 index 00000000000..45e63d1c5f1 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/style.scss @@ -0,0 +1,22 @@ +.editor-styles-wrapper .wc-block-components-checkout-policies, +.wc-block-components-checkout-policies { + text-align: center; + list-style: none outside; + line-height: 1; + margin: 2em 0 1em; +} +.wc-block-components-checkout-policies__item { + list-style: none outside; + display: inline-block; + padding: 0 0.25em; + margin: 0; + + &:not(:first-child) { + border-left: 1px solid $gray-10; + } + + a { + padding: 0 0.25em; + text-decoration: underline; + } +} 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 15c66b37a92..452726b282b 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 @@ -28,6 +28,10 @@ const blockAttributes = { type: 'boolean', default: false, }, + showPolicyLinks: { + type: 'boolean', + default: true, + }, }; 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 432da0b51af..f36f21f78fb 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 @@ -6,9 +6,12 @@ import { __ } from '@wordpress/i18n'; import AddressForm, { defaultFieldConfig, } from '@woocommerce/base-components/address-form'; -import FormStep from '@woocommerce/base-components/checkout/form-step'; -import CheckoutForm from '@woocommerce/base-components/checkout/form'; -import NoShipping from '@woocommerce/base-components/checkout/no-shipping'; +import { + FormStep, + CheckoutForm, + NoShipping, + Policies, +} from '@woocommerce/base-components/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'; @@ -294,6 +297,7 @@ const Block = ( { attributes, isEditor = false, shippingRates = [] } ) => { } /> + { 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 360d7ca9655..38083ca912b 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 @@ -4,14 +4,21 @@ import { __ } from '@wordpress/i18n'; import { withFeedbackPrompt } from '@woocommerce/block-hocs'; import { previewShippingRates } from '@woocommerce/resource-previews'; -import { SHIPPING_METHODS_EXIST } from '@woocommerce/block-settings'; import { InspectorControls } from '@wordpress/block-editor'; import { PanelBody, ToggleControl, CheckboxControl, + Notice, } from '@wordpress/components'; import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary'; +import { + PRIVACY_URL, + TERMS_URL, + SHIPPING_METHODS_EXIST, +} from '@woocommerce/block-settings'; +import { getAdminLink } from '@woocommerce/settings'; +import { __experimentalCreateInterpolateElement } from 'wordpress-element'; /** * Internal dependencies @@ -28,6 +35,7 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => { showPhoneField, requireCompanyField, requirePhoneField, + showPolicyLinks, } = attributes; return (
@@ -136,6 +144,63 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => { } /> + +

+ { __( + '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 + + ), + } + ) } + + ) } + { /> { attributes.showReviewRating && ! REVIEW_RATINGS_ENABLED && ( { __experimentalCreateInterpolateElement( @@ -136,7 +136,7 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => { /> { attributes.imageType === 'reviewer' && ! SHOW_AVATARS && ( { __experimentalCreateInterpolateElement( diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor.scss index 1bdb0d74c79..6457371147c 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor.scss @@ -1,13 +1,3 @@ .wc-block-reviews__selection { width: 100%; } - -.components-base-control { - + .wc-block-reviews__notice { - margin: -$gap 0 $gap; - } - - &:nth-last-child(2) + .wc-block-reviews__notice { - margin: -$gap 0 $gap-small; - } -} diff --git a/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js b/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js index 27fe9bee989..87a4bcfce4b 100644 --- a/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js +++ b/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js @@ -24,8 +24,6 @@ export const LIMIT_TAGS = getSetting( 'limitTags' ); export const HAS_PRODUCTS = getSetting( 'hasProducts', true ); export const HAS_TAGS = getSetting( 'hasTags', true ); export const HOME_URL = getSetting( 'homeUrl', '' ); -export const SHOP_URL = getSetting( 'shopUrl', '' ); -export const CHECKOUT_URL = getSetting( 'checkoutUrl', '' ); export const COUPONS_ENABLED = getSetting( 'couponsEnabled', true ); export const SHIPPING_ENABLED = getSetting( 'shippingEnabled', true ); export const DISPLAY_SHOP_PRICES_INCLUDING_TAX = getSetting( @@ -57,3 +55,20 @@ export const SHIPPING_METHODS_EXIST = getSetting( ); export const COUNTRY_LOCALE = getSetting( 'countryLocale', {} ); export const DEFAULT_ADDRESS_FIELDS = getSetting( 'defaultAddressFields', {} ); + +const defaultPage = { + name: '', + url: '', +}; +const storePages = getSetting( 'storePages', { + shop: 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; diff --git a/plugins/woocommerce-blocks/src/Assets.php b/plugins/woocommerce-blocks/src/Assets.php index 56b22daadb8..35c7d169c19 100644 --- a/plugins/woocommerce-blocks/src/Assets.php +++ b/plugins/woocommerce-blocks/src/Assets.php @@ -101,6 +101,12 @@ class Assets { public static function get_wc_block_data( $settings ) { $tag_count = wp_count_terms( 'product_tag' ); $product_counts = wp_count_posts( 'product' ); + $page_ids = [ + 'shop' => wc_get_page_id( 'shop' ), + 'checkout' => wc_get_page_id( 'checkout' ), + 'privacy' => wc_privacy_policy_page_id(), + 'terms' => wc_terms_and_conditions_page_id(), + ]; // Global settings used in each block. return array_merge( @@ -120,9 +126,6 @@ class Assets { 'isLargeCatalog' => $product_counts->publish > 100, 'limitTags' => $tag_count > 100, 'hasTags' => $tag_count > 0, - 'homeUrl' => esc_url( home_url( '/' ) ), - 'shopUrl' => get_permalink( wc_get_page_id( 'shop' ) ), - 'checkoutUrl' => get_permalink( wc_get_page_id( 'checkout' ) ), 'couponsEnabled' => wc_coupons_enabled(), 'shippingEnabled' => wc_shipping_enabled(), 'displayShopPricesIncludingTax' => 'incl' === get_option( 'woocommerce_tax_display_shop' ), @@ -137,6 +140,25 @@ class Assets { 'restApiRoutes' => [ '/wc/store' => array_keys( \Automattic\WooCommerce\Blocks\RestApi::get_routes_from_namespace( 'wc/store' ) ), ], + '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, + ], ] ); } 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 d8b5496856d..1a174892741 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
" `;