78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { useEffect, useRef } from '@wordpress/element';
|
|
import { recordEvent } from '@woocommerce/tracks';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { JetpackInstallationStepper } from '../components/JetpackInstallationStepper';
|
|
import { ModalContentLayoutWithTitle } from '../layouts/ModalContentLayoutWithTitle';
|
|
import {
|
|
useJetpackPluginState,
|
|
JetpackPluginStates,
|
|
} from '../components/useJetpackPluginState';
|
|
import { SendMagicLinkStates } from '../components';
|
|
|
|
interface JetpackInstallStepperPageProps {
|
|
isReturningFromWordpressConnection: boolean;
|
|
isRetryingMagicLinkSend: boolean;
|
|
sendMagicLinkHandler: () => void;
|
|
sendMagicLinkStatus: SendMagicLinkStates;
|
|
}
|
|
|
|
export const JetpackInstallStepperPage: React.FC<
|
|
JetpackInstallStepperPageProps
|
|
> = ( {
|
|
isReturningFromWordpressConnection,
|
|
sendMagicLinkHandler,
|
|
isRetryingMagicLinkSend,
|
|
sendMagicLinkStatus,
|
|
} ) => {
|
|
const { state: jetpackPluginState } = useJetpackPluginState();
|
|
const jetpackPluginStateRef =
|
|
useRef< JetpackPluginStates >( jetpackPluginState );
|
|
|
|
useEffect( () => {
|
|
if (
|
|
// capture the jp state at the moment it has finished initializing, and not on subsequent changes
|
|
jetpackPluginStateRef.current ===
|
|
JetpackPluginStates.INITIALIZING &&
|
|
jetpackPluginState !== JetpackPluginStates.INITIALIZING
|
|
) {
|
|
jetpackPluginStateRef.current = jetpackPluginState;
|
|
if ( isReturningFromWordpressConnection ) {
|
|
recordEvent( 'magic_prompt_return_from_wp_connection' );
|
|
} else if ( ! isRetryingMagicLinkSend ) {
|
|
recordEvent( 'magic_prompt_view', {
|
|
jetpack_state: jetpackPluginStateRef.current,
|
|
} );
|
|
}
|
|
}
|
|
}, [
|
|
isReturningFromWordpressConnection,
|
|
jetpackPluginState,
|
|
isRetryingMagicLinkSend,
|
|
] );
|
|
|
|
return (
|
|
<ModalContentLayoutWithTitle>
|
|
<div className="modal-subheader">
|
|
<h3>
|
|
{ __(
|
|
'Run your store from anywhere in two easy steps.',
|
|
'woocommerce'
|
|
) }
|
|
</h3>
|
|
</div>
|
|
<JetpackInstallationStepper
|
|
step={ isReturningFromWordpressConnection ? 'second' : 'first' }
|
|
sendMagicLinkHandler={ sendMagicLinkHandler }
|
|
sendMagicLinkStatus={ sendMagicLinkStatus }
|
|
/>
|
|
</ModalContentLayoutWithTitle>
|
|
);
|
|
};
|