Add no payment methods placeholder (#1998)

* Update tabs and payment methods component classnames to meet standards * Tidied up logic and added NoPaymentMethods placeholder * Consistent "NO" placeholders * frontend notices * comments * Update assets/js/base/components/payment-methods/no-payment-methods/style.scss Co-Authored-By: Albert Juhé Lluveras <aljullu@gmail.com> * Address feedback * Moar bundle size * Another notice * Tweak text Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>
woocommerce · Mar 20, 2020 · a0957e0 · a0957e0
1 parent b727cc9
commit a0957e0
Show file tree

Hide file tree

Showing 14 changed files with 232 additions and 115 deletions.
diff --git a/assets/js/base/components/checkout/no-shipping/index.js b/assets/js/base/components/checkout/no-shipping/index.js
@@ -27,6 +27,8 @@ const NoShipping = () => {
 			<Button
 				isDefault
 				href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=shipping` }
+				target="_blank"
+				rel="noopener noreferrer"
 			>
 				{ __(
 					'Configure Shipping Options',

diff --git a/assets/js/base/components/checkout/no-shipping/style.scss b/assets/js/base/components/checkout/no-shipping/style.scss
@@ -1,9 +1,18 @@
-.wc-block-checkout__no-shipping .components-placeholder__fieldset {
-	display: block;
-}
+.components-placeholder.wc-block-checkout__no-shipping {
+	margin-bottom: $gap;
+
+	.components-placeholder__fieldset {
+		display: block;
+
+		.components-button {
+			background-color: $black;
+			color: $white;
+		}
 
-.wc-block-checkout__no-shipping-description {
-	display: block;
-	margin: 0.25em 0 1em 0;
-	font-size: 13px;
+		.wc-block-checkout__no-shipping-description {
+			display: block;
+			margin: 0.25em 0 1em 0;
+			font-size: 13px;
+		}
+	}
 }
diff --git a/assets/js/base/components/payment-methods/express-checkout.js b/assets/js/base/components/payment-methods/express-checkout.js
@@ -9,8 +9,6 @@ import { useExpressPaymentMethods } from '@woocommerce/base-hooks';
  */
 import ExpressPaymentMethods from './express-payment-methods';
 
-import './style.scss';
-
 const ExpressCheckoutContainer = ( { children } ) => {
 	return (
 		<>

diff --git a/assets/js/base/components/payment-methods/index.js b/assets/js/base/components/payment-methods/index.js
@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
 export { default as PaymentMethods } from './payment-methods';
 export { default as ExpressPaymentMethods } from './express-payment-methods';
 export { default as ExpressCheckoutFormControl } from './express-checkout';
diff --git a/assets/js/base/components/payment-methods/no-payment-methods/index.js b/assets/js/base/components/payment-methods/no-payment-methods/index.js
@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Placeholder, Button, Notice } from 'wordpress-components';
+import { Icon, card } from '@woocommerce/icons';
+import { ADMIN_URL } from '@woocommerce/settings';
+import { useCheckoutContext } from '@woocommerce/base-context';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Render content when no payment methods are found depending on context.
+ */
+const NoPaymentMethods = () => {
+	const { isEditor } = useCheckoutContext();
+
+	return isEditor ? (
+		<NoPaymentMethodsPlaceholder />
+	) : (
+		<NoPaymentMethodsNotice />
+	);
+};
+
+/**
+ * Renders a placeholder in the editor.
+ */
+const NoPaymentMethodsPlaceholder = () => {
+	return (
+		<Placeholder
+			icon={ <Icon srcElement={ card } /> }
+			label={ __( 'Payment methods', 'woo-gutenberg-products-block' ) }
+			className="wc-block-checkout__no-payment-methods"
+		>
+			<span className="wc-block-checkout__no-payment-methods-description">
+				{ __(
+					'Your store does not have any payment methods configured that support the checkout block. Once you have configured a compatible payment method (e.g. Stripe) it will be shown here.',
+					'woo-gutenberg-products-block'
+				) }
+			</span>
+			<Button
+				isDefault
+				href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=checkout` }
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				{ __(
+					'Configure Payment Methods',
+					'woo-gutenberg-products-block'
+				) }
+			</Button>
+		</Placeholder>
+	);
+};
+
+/**
+ * Renders a notice on the frontend.
+ */
+const NoPaymentMethodsNotice = () => {
+	return (
+		<Notice
+			isDismissible={ false }
+			className={ classnames(
+				'wc-block-checkout__no-payment-methods-notice',
+				'woocommerce-message',
+				'woocommerce-error'
+			) }
+		>
+			{ __(
+				'There are no payment methods available. This may be an error on our side. Please contact us if you need any help placing your order.',
+				'woo-gutenberg-products-block'
+			) }
+		</Notice>
+	);
+};
+
+export default NoPaymentMethods;
diff --git a/assets/js/base/components/payment-methods/no-payment-methods/style.scss b/assets/js/base/components/payment-methods/no-payment-methods/style.scss
@@ -0,0 +1,22 @@
+.components-placeholder.wc-block-checkout__no-payment-methods {
+	margin-bottom: $gap;
+
+	.components-placeholder__fieldset {
+		display: block;
+
+		.components-button {
+			background-color: $black;
+			color: $white;
+		}
+
+		.wc-block-checkout__no-payment-methods-description {
+			display: block;
+			margin: 0.25em 0 1em 0;
+			font-size: 13px;
+		}
+	}
+}
+
+.components-notice.wc-block-checkout__no-payment-methods-notice {
+	margin-bottom: $gap;
+}
diff --git a/assets/js/base/components/payment-methods/payment-methods.js b/assets/js/base/components/payment-methods/payment-methods.js
@@ -18,29 +18,7 @@ import { useCheckoutContext } from '@woocommerce/base-context';
  * Internal dependencies
  */
 import Tabs from '../tabs';
-
-const noPaymentMethodTab = () => {
-	const label = __( 'Not Existing', 'woo-gutenberg-products-block' );
-	return {
-		name: label,
-		label,
-		title: () => label,
-	};
-};
-
-const createTabs = ( paymentMethods ) => {
-	const paymentMethodIds = Object.keys( paymentMethods );
-	return paymentMethodIds.length > 0
-		? paymentMethodIds.map( ( id ) => {
-				const { label, ariaLabel } = paymentMethods[ id ];
-				return {
-					name: id,
-					title: () => label,
-					ariaLabel,
-				};
-		  } )
-		: [ noPaymentMethodTab() ];
-};
+import NoPaymentMethods from './no-payment-methods/index';
 
 /**
  * Returns a payment method for the given context.
@@ -61,6 +39,11 @@ const getPaymentMethod = ( id, paymentMethods, isEditor ) => {
 	return paymentMethod;
 };
 
+/**
+ * PaymentMethods component.
+ *
+ * @return {*} The rendered component.
+ */
 const PaymentMethods = () => {
 	const { isEditor } = useCheckoutContext();
 	const { isInitialized, paymentMethods } = usePaymentMethods();
@@ -72,11 +55,12 @@ const PaymentMethods = () => {
 	} = usePaymentMethodInterface();
 	const currentPaymentMethodInterface = useRef( paymentMethodInterface );
 
-	// update ref on changes
+	// update ref on change.
 	useEffect( () => {
 		currentPaymentMethods.current = paymentMethods;
 		currentPaymentMethodInterface.current = paymentMethodInterface;
 	}, [ paymentMethods, paymentMethodInterface, activePaymentMethod ] );
+
 	const getRenderedTab = useCallback(
 		() => ( selectedTab ) => {
 			const paymentMethod = getPaymentMethod(
@@ -93,19 +77,23 @@ const PaymentMethods = () => {
 		},
 		[ isEditor, activePaymentMethod ]
 	);
-	if (
-		! isInitialized ||
-		( Object.keys( paymentMethods ).length === 0 && isInitialized )
-	) {
-		// @todo this can be a placeholder informing the user there are no
-		// payment methods setup?
-		return <div>No Payment Methods Initialized</div>;
+
+	if ( ! isInitialized || Object.keys( paymentMethods ).length === 0 ) {
+		return <NoPaymentMethods />;
 	}
+
 	return (
 		<Tabs
-			className="wc-component__payment-method-options"
+			className="wc-block-components-checkout-payment-methods"
 			onSelect={ ( tabName ) => setActivePaymentMethod( tabName ) }
-			tabs={ createTabs( paymentMethods ) }
+			tabs={ Object.keys( paymentMethods ).map( ( id ) => {
+				const { label, ariaLabel } = paymentMethods[ id ];
+				return {
+					name: id,
+					title: () => label,
+					ariaLabel,
+				};
+			} ) }
 			initialTabName={ activePaymentMethod }
 			ariaLabel={ __(
 				'Payment Methods',

diff --git a/assets/js/base/components/shipping-rates-control/package-options.js b/assets/js/base/components/shipping-rates-control/package-options.js
@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 import RadioControl, {
 	RadioControlOptionLayout,
 } from '@woocommerce/base-components/radio-control';
+import { Notice } from 'wordpress-components';
+import classnames from 'classnames';
 
 const PackageOptions = ( {
 	className,
@@ -16,9 +18,16 @@ const PackageOptions = ( {
 } ) => {
 	if ( options.length === 0 ) {
 		return (
-			<p className="wc-block-shipping-rates-control__no-results">
+			<Notice
+				isDismissible={ false }
+				className={ classnames(
+					'wc-block-shipping-rates-control__no-results-notice',
+					'woocommerce-message',
+					'woocommerce-info'
+				) }
+			>
 				{ noResultsMessage }
-			</p>
+			</Notice>
 		);
 	}
 

diff --git a/assets/js/base/components/shipping-rates-control/style.scss b/assets/js/base/components/shipping-rates-control/style.scss
@@ -27,9 +27,8 @@
 	color: $core-grey-dark-400;
 }
 
-.wc-block-shipping-rates-control__no-results {
-	margin-bottom: 0;
-	font-style: italic;
+.components-notice.wc-block-shipping-rates-control__no-results-notice {
+	margin-bottom: $gap;
 }
 
 // Resets when it's inside a panel.

diff --git a/assets/js/base/components/tabs/index.js b/assets/js/base/components/tabs/index.js
@@ -10,30 +10,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import './style.scss';
-
-const TabButton = ( {
-	tabId,
-	onClick,
-	children,
-	selected,
-	ariaLabel,
-	...rest
-} ) => {
-	return (
-		<button
-			role="tab"
-			type="button"
-			tabIndex={ selected ? null : -1 }
-			aria-selected={ selected }
-			aria-label={ ariaLabel }
-			id={ tabId }
-			onClick={ onClick }
-			{ ...rest }
-		>
-			<span className="wc-component__tab-item-content">{ children }</span>
-		</button>
-	);
-};
+import TabButton from './tab-button';
 
 const Tabs = ( {
 	className,
@@ -61,16 +38,16 @@ const Tabs = ( {
 	}
 	const selectedId = `${ instanceId }-${ selectedTab.name }`;
 	return (
-		<div className={ classnames( 'wc-component__tabs', className ) }>
+		<div className={ classnames( 'wc-block-components-tabs', className ) }>
 			<div
 				role="tablist"
 				aria-label={ ariaLabel }
-				className="wc-component__tab-list"
+				className="wc-block-components-tabs__list"
 			>
 				{ tabs.map( ( tab ) => (
 					<TabButton
 						className={ classnames(
-							'wc-component__tab-item',
+							'wc-block-components-tabs__item',
 							tab.className,
 							{
 								[ activeClass ]: tab.name === selected,
@@ -92,8 +69,8 @@ const Tabs = ( {
 					aria-labelledby={ selectedId }
 					role="tabpanel"
 					id={ `${ selectedId }-view` }
-					className="wc-component__tab-content"
-					tabIndex="0"
+					className="wc-block-components-tabs__content"
+					tabIndex={ 0 }
 				>
 					{ children( selected ) }
 				</div>

diff --git a/assets/js/base/components/tabs/style.scss b/assets/js/base/components/tabs/style.scss
@@ -1,10 +1,10 @@
-.wc-component__tabs {
-	.wc-component__tab-list {
+.wc-block-components-tabs {
+	.wc-block-components-tabs__list {
 		display: flex;
 		flex-direction: row;
 		flex-wrap: wrap;
 		width: 100%;
-		> .wc-component__tab-item {
+		> .wc-block-components-tabs__item {
 			border: none;
 			flex: auto;
 			background: transparent;
@@ -23,13 +23,13 @@
 				outline-offset: -1px;
 				outline: 1px dotted $gray-60;
 			}
-			.wc-component__tab-item-content {
+			.wc-block-components-tabs__item-content {
 				width: fit-content;
 				display: inline-block;
 			}
 		}
 	}
-	.wc-component__tab-content {
+	.wc-block-components-tabs__content {
 		padding: $gap;
 	}
 }