/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import {
createInterpolateElement,
useEffect,
useState,
} from '@wordpress/element';
import { Button, Card, CardBody, Notice } from '@wordpress/components';
import { PLUGINS_STORE_NAME, OPTIONS_STORE_NAME } from '@woocommerce/data';
import { useDispatch } from '@wordpress/data';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import Visa from './cards/visa.js';
import MasterCard from './cards/mastercard.js';
import Amex from './cards/amex.js';
import DinersClub from './cards/diners.js';
import Discover from './cards/discover.js';
import JCB from './cards/jcb.js';
import UnionPay from './cards/unionpay.js';
import './style.scss';
declare global {
interface Window {
wcWcpaySubscriptions: {
newSubscriptionProductUrl: string;
onboardingUrl: string;
noThanksUrl: string;
dismissOptionKey: string;
experimentAssignment: 'A' | 'B';
};
}
}
const {
newSubscriptionProductUrl,
onboardingUrl,
noThanksUrl,
dismissOptionKey,
experimentAssignment,
} = window.wcWcpaySubscriptions;
type setHasErrorFunction = React.Dispatch< React.SetStateAction< boolean > >;
const ErrorNotice = () => {
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 NoThanksButton = () => {
const [ isNoThanksClicked, setIsNoThanksClicked ] = useState( false );
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
return (
{
setIsNoThanksClicked( true );
recordEvent(
'wccore_subscriptions_empty_state_no_thanks_click',
{}
);
updateOptions( {
[ dismissOptionKey ]: 'yes',
// @ts-expect-error updateOptions returns a Promise, but it is not typed in source.
} ).then( () => {
window.location.href = noThanksUrl;
} );
} }
>
{ __( 'No thanks', 'woocommerce' ) }
);
};
type GetStartedButtonProps = {
setHasError: setHasErrorFunction;
};
const GetStartedButton: React.FC< GetStartedButtonProps > = ( {
setHasError,
} ) => {
const [ isGettingStarted, setIsGettingStarted ] = useState( false );
const { installAndActivatePlugins } = useDispatch( PLUGINS_STORE_NAME );
return (
{
setIsGettingStarted( true );
recordEvent(
'wccore_subscriptions_empty_state_get_started_click',
{}
);
installAndActivatePlugins( [ 'woocommerce-payments' ] )
.then( () => {
window.location.href =
experimentAssignment === 'A'
? newSubscriptionProductUrl
: onboardingUrl;
} )
.catch( () => {
recordEvent(
'wccore_subscriptions_empty_state_get_started_error'
);
setIsGettingStarted( false );
setHasError( true );
} );
} }
>
{ __( 'Get started', 'woocommerce' ) }
);
};
const StepNumber: React.FC = ( { children } ) => (
{ children }
);
const TermsOfService = () => (
{ createInterpolateElement(
__(
'By clicking “Get started”, the WooCommerce Payments plugin will be installed and you agree to the Terms of Service ',
'woocommerce'
),
{
a: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
),
}
) }
);
type MainContentProps = {
setHasError: setHasErrorFunction;
};
const MainContent: React.FC< MainContentProps > = ( { setHasError } ) => {
return (
<>
{ __( 'Start selling subscriptions today', 'woocommerce' ) }
{ __(
'With WooCommerce Payments, you can sell subscriptions with no setup costs or monthly fees. Create subscription products, track recurring revenue, and manage subscribers directly from your store’s dashboard.',
'woocommerce'
) }
{ __( 'Learn more', 'woocommerce' ) }
{ __( 'Accepted payment methods', 'woocommerce' ) }
>
);
};
const OnboardingSteps = () => (
<>
{ __(
'You’re only steps away from selling subscriptions',
'woocommerce'
) }
1
{ __( 'Create and connect your account', 'woocommerce' ) }
{ __(
'To ensure safe and secure transactions, a WordPress.com account is required.',
'woocommerce'
) }
2
{ __( 'Provide a few business details', 'woocommerce' ) }
{ __(
'Next we’ll ask you to verify your business and payment details to enable deposits.',
'woocommerce'
) }
3
{ __( 'Create subscriptions', 'woocommerce' ) }
{ __(
'Finally, publish subscription products to offer on your store.',
'woocommerce'
) }
>
);
const SubscriptionsPage = () => {
const [ hasError, setHasError ] = useState( false );
useEffect( () => {
// TODO: Remove this.
console.log(
experimentAssignment === 'A'
? 'Treatment A: Create a subscription product then WCPay onboarding.'
: 'Treatment B: WCPay onboarding then create a subscription product.'
);
recordEvent( 'wccore_subscriptions_empty_state_view' );
}, [] );
return (
<>
{ hasError && }
>
);
};
export default SubscriptionsPage;