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( + __( + 'Installing WooCommerce Payments failed. To continue with WooCommerce Payments built-in subscriptions functionality, please install WooCommerce Payments manually.', + 'woocommerce' + ), + { + a: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + } + ) } + + ); +}; + const TOS = () => (

{ 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' - ) } -

- - -
-); +const SubscriptionsPage = () => { + const [ isError, setIsError ] = useState( false ); + + return ( +
+ + +

+ { __( + 'Track recurring revenue and manage active subscriptions directly from your store’s dashboard — powered by WooCommerce Payments.', + 'woocommerce' + ) } +

+ + +
+ ); +}; export default SubscriptionsPage; diff --git a/plugins/woocommerce-admin/client/subscriptions/style.scss b/plugins/woocommerce-admin/client/subscriptions/style.scss index 5f8ddb0dd40..f03a7f32c68 100644 --- a/plugins/woocommerce-admin/client/subscriptions/style.scss +++ b/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; + } }