diff --git a/plugins/woocommerce-admin/client/subscriptions/index.tsx b/plugins/woocommerce-admin/client/subscriptions/index.tsx
index e5b88c7672f..2df5a4b6965 100644
--- a/plugins/woocommerce-admin/client/subscriptions/index.tsx
+++ b/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 (
+
{ createInterpolateElement( __( 'By clicking "Get started", you agree to the Terms of Service', - 'woocommerce-payments' + 'woocommerce' ), { a: ( @@ -49,7 +80,8 @@ const TOS = () => (
); -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 ) => { - // TODO: Handle erorr. - console.log( 'Oh no, there was an error!' ); + .catch( () => { + setIsGettingStarted( false ); + setIsError( true ); } ); } } > - { __( 'Get started', 'woocommerce-payments' ) } + { __( 'Get started', 'woocommerce' ) } ); }; -const SubscriptionsPage = () => ( -- { __( - 'Track recurring revenue and manage active subscriptions directly from your store’s dashboard — powered by WooCommerce Payments.', - 'woocommerce-payments' - ) } -
-+ { __( + 'Track recurring revenue and manage active subscriptions directly from your store’s dashboard — powered by WooCommerce Payments.', + 'woocommerce' + ) } +
+