Checkout Block: Add Legal links (https://github.com/woocommerce/woocommerce-blocks/pull/1881)

* Create policy component

* Create page constants

* Add toggle options

* Update assets/js/base/components/checkout/policies/style.scss

Co-Authored-By: Albert Juhé Lluveras <aljullu@gmail.com>

* Update assets/css/editor.scss

Co-Authored-By: Albert Juhé Lluveras <aljullu@gmail.com>

* Feedback

* update snapshot

Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>

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;
+	}
+}

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';

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 (
+		<ul className="wc-block-components-checkout-policies">
+			{ PRIVACY_URL && (
+				<li className="wc-block-components-checkout-policies__item">
+					<a
+						href={ PRIVACY_URL }
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						{ PRIVACY_PAGE_NAME
+							? decodeEntities( PRIVACY_PAGE_NAME )
+							: __(
+									'Privacy Policy',
+									'woo-gutenberg-products-block'
+							  ) }
+					</a>
+				</li>
+			) }
+			{ TERMS_URL && (
+				<li className="wc-block-components-checkout-policies__item">
+					<a
+						href={ TERMS_URL }
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						{ TERMS_PAGE_NAME
+							? decodeEntities( TERMS_PAGE_NAME )
+							: __(
+									'Terms and Conditions',
+									'woo-gutenberg-products-block'
+							  ) }
+					</a>
+				</li>
+			) }
+		</ul>
+	);
+};
+
+export default Policies;

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;
+	}
+}

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;

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 {
-import CheckoutForm from '@woocommerce/base-components/checkout/form';
+	FormStep,
-import NoShipping from '@woocommerce/base-components/checkout/no-shipping';
+	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 = [] } ) => {
 						}
 					/>
 				</FormStep>
+				{ attributes.showPolicyLinks && <Policies /> }
 			</CheckoutForm>
 		</CheckoutProvider>
 	);

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 (
 		<div className={ className }>
@@ -136,6 +144,63 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => {
 						}
 					/>
 				</PanelBody>
+				<PanelBody
+					title={ __( 'Content', 'woo-gutenberg-products-block' ) }
+				>
+					<p className="wc-block-checkout__controls-text">
+						{ __(
+							'Choose additional content to display on checkout.',
+							'woo-gutenberg-products-block'
+						) }
+					</p>
+					<ToggleControl
+						label={ __(
+							'Show links to terms and conditions and privacy policy',
+							'woo-gutenberg-products-block'
+						) }
+						checked={ showPolicyLinks }
+						onChange={ () =>
+							setAttributes( {
+								showPolicyLinks: ! showPolicyLinks,
+							} )
+						}
+					/>
+					{ showPolicyLinks && ( ! PRIVACY_URL || ! TERMS_URL ) && (
+						<Notice
+							className="wc-block-base-control-notice"
+							isDismissible={ false }
+						>
+							{ __experimentalCreateInterpolateElement(
+								__(
+									'Pages must be first setup in store settings: <a1>Privacy policy</a1>, <a2>Terms and conditions</a2>.',
+									'woo-gutenberg-products-block'
+								),
+								{
+									a1: (
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										<a
+											href={ getAdminLink(
+												'admin.php?page=wc-settings&tab=account'
+											) }
+											target="_blank"
+											rel="noopener noreferrer"
+										/>
+									),
+									a2: (
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										<a
+											href={ getAdminLink(
+												'admin.php?page=wc-settings&tab=advanced'
+											) }
+											target="_blank"
+											rel="noopener noreferrer"
+										/>
+									),
+								}
+							) }
+						</Notice>
+					) }
+				</PanelBody>
 			</InspectorControls>
 			<BlockErrorBoundary
 				header={ __(

plugins/woocommerce-blocks/assets/js/blocks/reviews/edit-utils.js

@@ -47,7 +47,7 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
 			/>
 			{ attributes.showReviewRating && ! REVIEW_RATINGS_ENABLED && (
 				<Notice
-					className="wc-block-reviews__notice"
+					className="wc-block-base-control-notice"
 					isDismissible={ false }
 				>
 					{ __experimentalCreateInterpolateElement(
@@ -136,7 +136,7 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
 					/>
 					{ attributes.imageType === 'reviewer' && ! SHOW_AVATARS && (
 						<Notice
-							className="wc-block-reviews__notice"
+							className="wc-block-base-control-notice"
 							isDismissible={ false }
 						>
 							{ __experimentalCreateInterpolateElement(

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;
-	}
-}

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;

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,
+				],
 			]
 		);
 	}

plugins/woocommerce-blocks/tests/e2e-tests/specs/backend/__snapshots__/checkout.test.js.snap

@@ -2,6 +2,6 @@
 
 exports[`Checkout Block can be created 1`] = `
 "<!-- wp:woocommerce/checkout -->
-<div class=\\"wp-block-woocommerce-checkout\\" data-use-shipping-as-billing=\\"true\\" data-show-company-field=\\"false\\" data-require-company-field=\\"false\\" data-show-address-2-field=\\"true\\" data-show-phone-field=\\"true\\" data-require-phone-field=\\"false\\">Checkout block coming soon to store near you</div>
+<div class=\\"wp-block-woocommerce-checkout\\" data-use-shipping-as-billing=\\"true\\" data-show-company-field=\\"false\\" data-require-company-field=\\"false\\" data-show-address-2-field=\\"true\\" data-show-phone-field=\\"true\\" data-require-phone-field=\\"false\\" data-show-policy-links=\\"true\\">Checkout block coming soon to store near you</div>
 <!-- /wp:woocommerce/checkout -->"
 `;