Checkout i2: Show a notice if terms and conditions page (#4859)

* Make Terms block insertable * add a notice to setup pages * push updated error design in editor * fix default text
woocommerce · Sep 28, 2021 · 533684b · 533684b
1 parent 5ea3a56
commit 533684b
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 21 deletions.
diff --git a/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-terms-block/block.json b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-terms-block/block.json
@@ -8,8 +8,7 @@
 		"align": false,
 		"html": false,
 		"multiple": false,
-		"reusable": false,
-		"inserter": false
+		"reusable": false
 	},
 	"attributes": {
 		"checkbox": {

diff --git a/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-terms-block/edit.tsx b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-terms-block/edit.tsx
@@ -9,6 +9,9 @@ import {
 } from '@wordpress/block-editor';
 import CheckboxControl from '@woocommerce/base-components/checkbox-control';
 import { PanelBody, ToggleControl, Notice } from '@wordpress/components';
+import { PRIVACY_URL, TERMS_URL } from '@woocommerce/block-settings';
+import { ADMIN_URL } from '@woocommerce/settings';
+import { Icon, external } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -24,8 +27,12 @@ export const Edit = ( {
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
 	const blockProps = useBlockProps();
-	const currentText = text || termsCheckboxDefaultText;
 
+	const defaultText = checkbox
+		? termsCheckboxDefaultText
+		: termsConsentDefaultText;
+
+	const currentText = text || defaultText;
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
@@ -66,41 +73,107 @@ export const Edit = ( {
 				) : (
 					<RichText
 						tagName="span"
-						value={ text || termsConsentDefaultText }
+						value={ currentText }
 						onChange={ ( value ) =>
 							setAttributes( { text: value } )
 						}
 					/>
 				) }
 			</div>
-			{ ! currentText.includes( '<a ' ) && (
+			{ /* Show this notice if a terms page or a privacy page is not setup. */ }
+			{ ( ! TERMS_URL || ! PRIVACY_URL ) && (
 				<Notice
 					className="wc-block-checkout__terms_notice"
 					status="warning"
 					isDismissible={ false }
-					actions={
-						termsConsentDefaultText !== text
-							? [
-									{
-										label: __(
-											'Restore default text',
-											'woo-gutenberg-products-block'
-										),
-										onClick: () =>
-											setAttributes( { text: '' } ),
-									},
-							  ]
-							: []
-					}
+					actions={ [
+						! TERMS_URL && {
+							className: 'wc-block-checkout__terms_notice-button',
+							label: (
+								<>
+									{ __(
+										'Setup a Terms and Conditions page',
+										'woo-gutenberg-products-block'
+									) }
+									<Icon
+										icon={ external }
+										size={ 16 }
+										className="wc-block-checkout__terms_notice-button__icon"
+									/>
+								</>
+							),
+
+							onClick: () =>
+								window.open(
+									`${ ADMIN_URL }admin.php?page=wc-settings&tab=advanced`,
+									'_blank'
+								),
+						},
+						! PRIVACY_URL && {
+							className: 'wc-block-checkout__terms_notice-button',
+							label: (
+								<>
+									{ __(
+										'Setup a Privacy Policy page',
+										'woo-gutenberg-products-block'
+									) }
+									<Icon
+										size={ 16 }
+										icon={ external }
+										className="wc-block-checkout__terms_notice-button__icon"
+									/>
+								</>
+							),
+							onClick: () =>
+								window.open(
+									`${ ADMIN_URL }options-privacy.php`,
+									'_blank'
+								),
+						},
+					].filter( Boolean ) }
 				>
 					<p>
 						{ __(
-							'Ensure you add links to your policy pages in this section.',
+							"You don't seem to have a Terms and Conditions and/or a Privacy Policy pages setup.",
 							'woo-gutenberg-products-block'
 						) }
 					</p>
 				</Notice>
 			) }
+			{ /* Show this notice if we have both a terms and privacy pages, but they're not present in the text. */ }
+			{ TERMS_URL &&
+				PRIVACY_URL &&
+				! (
+					currentText.includes( TERMS_URL ) &&
+					currentText.includes( PRIVACY_URL )
+				) && (
+					<Notice
+						className="wc-block-checkout__terms_notice"
+						status="warning"
+						isDismissible={ false }
+						actions={
+							termsConsentDefaultText !== text
+								? [
+										{
+											label: __(
+												'Restore default text',
+												'woo-gutenberg-products-block'
+											),
+											onClick: () =>
+												setAttributes( { text: '' } ),
+										},
+								  ]
+								: []
+						}
+					>
+						<p>
+							{ __(
+								'Ensure you add links to your policy pages in this section.',
+								'woo-gutenberg-products-block'
+							) }
+						</p>
+					</Notice>
+				) }
 		</div>
 	);
 };

diff --git a/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-terms-block/editor.scss b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-terms-block/editor.scss
@@ -19,3 +19,14 @@
 .wc-block-checkout__terms_notice .components-notice__action {
 	margin-left: 0;
 }
+
+.wc-block-checkout__terms_notice-button {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	.wc-block-checkout__terms_notice-button__icon {
+		margin-left: $gap-smallest;
+	}
+}
+
diff --git a/assets/js/editor-components/external-link-card/editor.scss b/assets/js/editor-components/external-link-card/editor.scss
@@ -1,5 +1,4 @@
 .wc-block-editor-components-external-link-card {
-	display: block;
 	display: flex;
 	flex-direction: row;
 	text-decoration: none;