diff --git a/projects/packages/my-jetpack/_inc/components/welcome-flow/ConnectionStep.tsx b/projects/packages/my-jetpack/_inc/components/welcome-flow/ConnectionStep.tsx index fe41b8d1f136e..aa30d0d15853c 100644 --- a/projects/packages/my-jetpack/_inc/components/welcome-flow/ConnectionStep.tsx +++ b/projects/packages/my-jetpack/_inc/components/welcome-flow/ConnectionStep.tsx @@ -1,14 +1,15 @@ -import { Col, Button, Text, TermsOfService } from '@automattic/jetpack-components'; +import { Col, Button, Text, TermsOfService, getRedirectUrl } from '@automattic/jetpack-components'; import { initializeExPlat, loadExperimentAssignment } from '@automattic/jetpack-explat'; import { __ } from '@wordpress/i18n'; import { useCallback, useContext } from 'react'; import { NoticeContext } from '../../context/notices/noticeContext'; import { NOTICE_SITE_CONNECTED } from '../../context/notices/noticeTemplates'; import useProductsByOwnership from '../../data/products/use-products-by-ownership'; +import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state'; import useAnalytics from '../../hooks/use-analytics'; import sideloadTracks from '../../utils/side-load-tracks'; import styles from './style.module.scss'; -import type { WelcomeFlowExperiment } from '.'; +import { WelcomeFlowExperiment } from '.'; import type { Dispatch, SetStateAction } from 'react'; type ConnectionStepProps = { @@ -22,8 +23,8 @@ type ConnectionStepProps = { * * @param {object} props - ConnectioStepProps * @param {Function} props.onActivateSite - Alias for handleRegisterSite - * @param {Function} props.onUpdateWelcomeFlowExperiment - Updating the welcomeFlowExperiment state * @param {boolean} props.isActivating - Alias for siteIsRegistering + * @param {Function} props.onUpdateWelcomeFlowExperiment - Function to update the welcomeFlowExperiment state * @return {object} The ConnectionStep component. */ const ConnectionStep = ( { @@ -34,6 +35,14 @@ const ConnectionStep = ( { const { recordEvent } = useAnalytics(); const { setNotice, resetNotice } = useContext( NoticeContext ); + const { siteSuffix, adminUrl } = getMyJetpackWindowInitialState(); + const connectAfterCheckoutUrl = `?connect_after_checkout=true&admin_url=${ encodeURIComponent( + adminUrl + ) }&from_site_slug=${ siteSuffix }&source=my-jetpack`; + const redirectUri = `&redirect_to=${ encodeURIComponent( window.location.href ) }`; + const query = `${ connectAfterCheckoutUrl }${ redirectUri }&unlinked=1`; + const jetpackPlansPath = getRedirectUrl( 'jetpack-my-jetpack-site-only-plans', { query } ); + const activationButtonLabel = __( 'Activate Jetpack in one click', 'jetpack-my-jetpack' ); const { refetch: refetchOwnershipData } = useProductsByOwnership(); @@ -50,13 +59,17 @@ const ConnectionStep = ( { initializeExPlat(); const { variationName } = await loadExperimentAssignment( - 'jetpack_my_jetpack_welcome_flow_display_default_recommendations_upfront_202410' + 'jetpack_my_jetpack_recommendations_pricing_page_202411' ); onUpdateWelcomeFlowExperiment( state => ( { ...state, variation: ( variationName ?? 'control' ) as WelcomeFlowExperiment[ 'variation' ], // casting to 'control' or 'treatment' } ) ); + + if ( variationName === 'treatment' ) { + window.location.href = jetpackPlansPath; + } } finally { resetNotice(); setNotice( NOTICE_SITE_CONNECTED, resetNotice ); @@ -65,6 +78,7 @@ const ConnectionStep = ( { onUpdateWelcomeFlowExperiment( state => ( { ...state, isLoading: false } ) ); } }, [ + jetpackPlansPath, onActivateSite, onUpdateWelcomeFlowExperiment, recordEvent, diff --git a/projects/packages/my-jetpack/_inc/components/welcome-flow/index.tsx b/projects/packages/my-jetpack/_inc/components/welcome-flow/index.tsx index 430c426c9514d..754612efc01ff 100644 --- a/projects/packages/my-jetpack/_inc/components/welcome-flow/index.tsx +++ b/projects/packages/my-jetpack/_inc/components/welcome-flow/index.tsx @@ -47,7 +47,7 @@ const WelcomeFlow: FC< Props > = ( { const [ prevStep, setPrevStep ] = useState( '' ); const currentStep = useMemo( () => { - if ( ! siteIsRegistered ) { + if ( ! siteIsRegistered || welcomeFlowExperiment.isLoading ) { return 'connection'; } else if ( ! isProcessingEvaluation ) { if ( ! recommendedModules && ! isJetpackUserNew() ) { @@ -61,7 +61,12 @@ const WelcomeFlow: FC< Props > = ( { } return 'evaluation-processing'; - }, [ isProcessingEvaluation, recommendedModules, siteIsRegistered ] ); + }, [ + isProcessingEvaluation, + recommendedModules, + siteIsRegistered, + welcomeFlowExperiment.isLoading, + ] ); useEffect( () => { if ( prevStep !== currentStep ) { diff --git a/projects/packages/my-jetpack/changelog/add-my-jetpack-pricing-page-experiment b/projects/packages/my-jetpack/changelog/add-my-jetpack-pricing-page-experiment new file mode 100644 index 0000000000000..2f9bc654e9fd1 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/add-my-jetpack-pricing-page-experiment @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +My Jetpack: add experiment to the post-connection flow in My Jetpack. diff --git a/projects/packages/my-jetpack/global.d.ts b/projects/packages/my-jetpack/global.d.ts index f302d8567e765..49d4563fabc82 100644 --- a/projects/packages/my-jetpack/global.d.ts +++ b/projects/packages/my-jetpack/global.d.ts @@ -99,6 +99,7 @@ interface Window { showFullJetpackStatsCard: boolean; videoPressStats: boolean; }; + purchaseToken: string; lifecycleStats: { historicallyActiveModules: JetpackModule[]; brokenModules: { diff --git a/projects/packages/my-jetpack/src/class-initializer.php b/projects/packages/my-jetpack/src/class-initializer.php index 61a490fa4f0ba..49c481e250905 100644 --- a/projects/packages/my-jetpack/src/class-initializer.php +++ b/projects/packages/my-jetpack/src/class-initializer.php @@ -201,6 +201,7 @@ public static function can_use_analytics() { return $tracking->should_enable_tracking( new Terms_Of_Service(), $status ); } + /** * Enqueue admin page assets. *