woocommerce/plugins/woocommerce-admin/client/homescreen/mobile-app-modal/components/JetpackInstallationStepper.tsx

145 lines
3.8 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* External dependencies
*/
import React, { useState, useEffect } from '@wordpress/element';
import { Button } from '@wordpress/components';
import { sprintf, __ } from '@wordpress/i18n';
import { Spinner, Stepper, StepperProps } from '@woocommerce/components';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import {
SendMagicLinkButton,
useJetpackPluginState,
JetpackPluginStates,
} from './';
export const JetpackInstallationStepper = ( {
step,
sendMagicLinkHandler,
}: {
step: 'first' | 'second';
sendMagicLinkHandler: () => void;
} ) => {
const { installHandler, jetpackConnectionData, state } =
useJetpackPluginState();
const [ isWaitingForRedirect, setIsWaitingForRedirect ] = useState( false );
const [ stepsToDisplay, setStepsToDisplay ] = useState<
StepperProps[ 'steps' ] | undefined
>( undefined );
// we need to generate one set of steps for the first step, and another set for the second step
// because the texts are different after progressing from the first step to the second step
useEffect( () => {
const isInstalling =
state === JetpackPluginStates.INSTALLING || isWaitingForRedirect;
if ( step === 'first' ) {
setStepsToDisplay( [
{
key: 'first',
label: __( 'Connect to Jetpack', 'woocommerce' ),
description: __(
'To get started, install Jetpack - our free tool required to sync your store with the WooCommerce mobile app',
'woocommerce'
),
content: (
<>
<Button
className="install-jetpack-button"
onClick={ () => {
setIsWaitingForRedirect( true );
recordEvent(
'magic_prompt_install_connect_click'
);
installHandler();
} }
>
{ isInstalling && (
<Spinner className="install-jetpack-spinner" />
) }
<div
style={ {
visibility: isInstalling
? 'hidden'
: 'visible',
} }
className="install-jetpack-button-contents"
>
<div className="jetpack-icon" />
<div className="install-jetpack-button-text">
{ __(
'Install and Connect',
'woocommerce'
) }
</div>
</div>
</Button>
</>
),
},
{
key: 'second',
label: __( 'Sign into the app', 'woocommerce' ),
description: '',
content: <></>,
},
] );
} else if ( step === 'second' ) {
// this step is shown on the return callback from the WordPress.com user connection
const wordpressAccountEmailAddress =
jetpackConnectionData?.currentUser?.wpcomUser?.email;
setStepsToDisplay( [
{
key: 'first',
label: sprintf(
/* translators: Reflecting to the user what their WordPress account email address is */
__( 'Connected as %s', 'woocommerce' ),
wordpressAccountEmailAddress
),
description: '',
content: <></>,
},
{
key: 'second',
label: 'Sign into the app',
description: sprintf(
/* translators: Reflecting to the user that the magic link has been sent to their WordPress account email address */
__(
'Well send a magic link to %s. Open it on your smartphone or tablet to sign into your store instantly.',
'woocommerce'
),
wordpressAccountEmailAddress
),
content: (
<SendMagicLinkButton
onClickHandler={ sendMagicLinkHandler }
/>
),
},
] );
}
}, [
step,
installHandler,
state,
isWaitingForRedirect,
jetpackConnectionData?.currentUser?.wpcomUser?.email,
sendMagicLinkHandler,
] );
return (
<div className="jetpack-stepper-wrapper">
{ stepsToDisplay && (
<Stepper
isVertical={ true }
currentStep={ step }
steps={ stepsToDisplay }
/>
) }
</div>
);
};