Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

My Jetpack: add post-activation experiment #39902

Merged
merged 10 commits into from
Nov 1, 2024
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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 = ( {
Expand All @@ -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();

Expand All @@ -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 );
Expand All @@ -65,6 +78,7 @@ const ConnectionStep = ( {
onUpdateWelcomeFlowExperiment( state => ( { ...state, isLoading: false } ) );
}
}, [
jetpackPlansPath,
onActivateSite,
onUpdateWelcomeFlowExperiment,
recordEvent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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() ) {
Expand All @@ -61,7 +61,12 @@ const WelcomeFlow: FC< Props > = ( {
}

return 'evaluation-processing';
}, [ isProcessingEvaluation, recommendedModules, siteIsRegistered ] );
}, [
isProcessingEvaluation,
recommendedModules,
siteIsRegistered,
welcomeFlowExperiment.isLoading,
] );

useEffect( () => {
if ( prevStep !== currentStep ) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: changed

My Jetpack: add experiment to the post-connection flow in My Jetpack.
1 change: 1 addition & 0 deletions projects/packages/my-jetpack/global.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ interface Window {
showFullJetpackStatsCard: boolean;
videoPressStats: boolean;
};
purchaseToken: string;
lifecycleStats: {
historicallyActiveModules: JetpackModule[];
brokenModules: {
Expand Down
1 change: 1 addition & 0 deletions projects/packages/my-jetpack/src/class-initializer.php
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,7 @@ public static function can_use_analytics() {

return $tracking->should_enable_tracking( new Terms_Of_Service(), $status );
}

/**
* Enqueue admin page assets.
*
Expand Down
Loading