woocommerce/plugins/woocommerce-admin/client/homescreen/mobile-app-modal/pages/JetpackInstallStepperPage.tsx

74 lines
2.0 KiB
TypeScript
Raw Normal View History

/**
* 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';
interface JetpackInstallStepperPageProps {
isReturningFromWordpressConnection: boolean;
isRetryingMagicLinkSend: boolean;
sendMagicLinkHandler: () => void;
}
export const JetpackInstallStepperPage: React.FC<
JetpackInstallStepperPageProps
> = ( {
isReturningFromWordpressConnection,
sendMagicLinkHandler,
isRetryingMagicLinkSend,
} ) => {
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 }
/>
</ModalContentLayoutWithTitle>
);
};