Merge pull request #32852 from woocommerce/add/experiment-subscriptions-error-notice

Display an error message when WC Payments fails to install via the Subscriptions menu item

plugins/woocommerce-admin/client/subscriptions/index.tsx

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement, useState } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import { Button, Notice } from '@wordpress/components';
 import { PLUGINS_STORE_NAME } from '@woocommerce/data';
 import { useDispatch } from '@wordpress/data';
 import { recordEvent } from '@woocommerce/tracks';
@@ -28,12 +28,43 @@ const {
 	onboardingUrl,
 } = window.wcWcpaySubscriptions;
 
+const ErrorNotice = ( { isError }: { isError: boolean } ) => {
+	if ( ! isError ) {
+		return null;
+	}
+
+	return (
+		<Notice
+			className="wcpay-empty-subscriptions__error"
+			status="error"
+			isDismissible={ false }
+		>
+			{ createInterpolateElement(
+				__(
+					'Installing WooCommerce Payments failed. To continue with WooCommerce Payments built-in subscriptions functionality, please install <a>WooCommerce Payments</a> manually.',
+					'woocommerce'
+				),
+				{
+					a: (
+						// eslint-disable-next-line jsx-a11y/anchor-has-content
+						<a
+							href="https://wordpress.org/plugins/woocommerce-payments/"
+							target="_blank"
+							rel="noreferrer"
+						/>
+					),
+				}
+			) }
+		</Notice>
+	);
+};
+
 const TOS = () => (
 	<p className="wcpay-empty-subscriptions__tos">
 		{ createInterpolateElement(
 			__(
 				'By clicking "Get started", you agree to the <a>Terms of Service</a>',
-				'woocommerce-payments'
+				'woocommerce'
 			),
 			{
 				a: (
@@ -49,7 +80,8 @@ const TOS = () => (
 	</p>
 );
 
-const GetStartedButton = () => {
+// eslint-disable-next-line @typescript-eslint/ban-types
+const GetStartedButton = ( { setIsError }: { setIsError: Function } ) => {
 	const [ isGettingStarted, setIsGettingStarted ] = useState( false );
 	const { installAndActivatePlugins } = useDispatch( PLUGINS_STORE_NAME );
 
@@ -72,32 +104,38 @@ const GetStartedButton = () => {
 							 * Navigate to either newSubscriptionProductUrl or onboardingUrl
 							 * depending on the which treatment the user is assigned to.
 							 */
+							// eslint-disable-next-line no-console
 							console.log( 'It was a success!' );
 						} )
-						.catch( ( error ) => {
+						.catch( () => {
-							// TODO: Handle erorr.
+							setIsGettingStarted( false );
-							console.log( 'Oh no, there was an error!' );
+							setIsError( true );
 						} );
 				} }
 			>
-				{ __( 'Get started', 'woocommerce-payments' ) }
+				{ __( 'Get started', 'woocommerce' ) }
 			</Button>
 		</div>
 	);
 };
 
-const SubscriptionsPage = () => (
+const SubscriptionsPage = () => {
+	const [ isError, setIsError ] = useState( false );
+
+	return (
 		<div className="wcpay-empty-subscriptions__container">
+			<ErrorNotice isError={ isError } />
 			<img src={ unconnectedImage } alt="" />
 			<p className="wcpay-empty-subscriptions__description">
 				{ __(
 					'Track recurring revenue and manage active subscriptions directly from your store’s dashboard — powered by WooCommerce Payments.',
-				'woocommerce-payments'
+					'woocommerce'
 				) }
 			</p>
 			<TOS />
-		<GetStartedButton />
+			<GetStartedButton setIsError={ setIsError } />
 		</div>
-);
+	);
+};
 
 export default SubscriptionsPage;

plugins/woocommerce-admin/client/subscriptions/style.scss

@@ -6,7 +6,7 @@
 	padding: 48px 0;
 	position: static;
 	height: 344px;
-	left: calc( 50% - 1240px / 2 );
+	left: calc(50% - 1240px / 2);
 	top: 271px;
 	flex: none;
 	order: 1;
@@ -28,4 +28,8 @@
 	.wcpay-empty-subscriptions__button_container {
 		margin: 8px 0;
 	}
+
+	.wcpay-empty-subscriptions__error {
+		margin: 15px 0;
+	}
 }