initial commit

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/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 { useEditorContext } 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 } = useEditorContext();
+
+	return isEditor ? (
+		<NoPaymentMethodsPlaceholder />
+	) : (
+		<NoPaymentMethodsNotice />
+	);
+};
+
+/**
+ * Renders a placeholder in the editor.
+ */
+const NoPaymentMethodsPlaceholder = () => {
+	return (
+		<Placeholder
+			icon={ <Icon srcElement={ card } /> }
+			label={ __( 'Payment methods', 'woocommerce' ) }
+			className="wc-block-checkout__no-payment-methods-placeholder"
+		>
+			<span className="wc-block-checkout__no-payment-methods-placeholder-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.',
+					'woocommerce'
+				) }
+			</span>
+			<Button
+				isSecondary
+				href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=checkout` }
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				{ __(
+					'Configure Payment Methods',
+					'woocommerce'
+				) }
+			</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.',
+				'woocommerce'
+			) }
+		</Notice>
+	);
+};
+
+export default NoPaymentMethods;

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/payment-methods/no-payment-methods/style.scss

@@ -0,0 +1,25 @@
+.components-placeholder.wc-block-checkout__no-payment-methods-placeholder {
+	margin-bottom: $gap;
+
+	* {
+		pointer-events: all; // Overrides parent disabled component in editor context
+	}
+
+	.components-placeholder__fieldset {
+		display: block;
+
+		.components-button {
+			background-color: $gray-900;
+			color: $white;
+		}
+
+		.wc-block-checkout__no-payment-methods-placeholder-description {
+			display: block;
+			margin: 0.25em 0 1em 0;
+		}
+	}
+}
+
+.components-notice.wc-block-checkout__no-payment-methods-notice {
+	margin-bottom: $gap;
+}