Stepper: New user stored with session storage (#95535)

* Switch from data store to session storage * Use isNewAccountCreated
Automattic · Oct 19, 2024 · 369bce2 · 369bce2
1 parent 04ebee6
commit 369bce2
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 30 deletions.
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/__user/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/__user/index.tsx
@@ -1,6 +1,5 @@
 import { StepContainer } from '@automattic/onboarding';
 import { Button } from '@wordpress/components';
-import { useDispatch as useDataStoreDispatch } from '@wordpress/data';
 import { useTranslate } from 'i18n-calypso';
 import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -10,11 +9,11 @@ import SignupFormSocialFirst from 'calypso/blocks/signup-form/signup-form-social
 import FormattedHeader from 'calypso/components/formatted-header';
 import LocaleSuggestions from 'calypso/components/locale-suggestions';
 import { useFlowLocale } from 'calypso/landing/stepper/hooks/use-flow-locale';
-import { USER_STORE } from 'calypso/landing/stepper/stores';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { login } from 'calypso/lib/paths';
 import { AccountCreateReturn } from 'calypso/lib/signup/api/type';
 import wpcom from 'calypso/lib/wp';
+import { setSignupIsNewUser } from 'calypso/signup/storageUtils';
 import WpcomLoginForm from 'calypso/signup/wpcom-login-form';
 import { useSelector } from 'calypso/state';
 import { fetchCurrentUser } from 'calypso/state/current-user/actions';
@@ -34,7 +33,6 @@ const UserStepComponent: Step = function UserStep( {
 	const translate = useTranslate();
 	const isLoggedIn = useSelector( isUserLoggedIn );
 	const dispatch = useDispatch();
-	const { setIsNewUser } = useDataStoreDispatch( USER_STORE );
 	const { handleSocialResponse, notice, accountCreateResponse } = useHandleSocialResponse( flow );
 
 	const [ wpAccountCreateResponse, setWpAccountCreateResponse ] = useState< AccountCreateReturn >();
@@ -62,6 +60,12 @@ const UserStepComponent: Step = function UserStep( {
 	const locale = useFlowLocale();
 	const shouldRenderLocaleSuggestions = ! isLoggedIn; // For logged-in users, we respect the user language settings
 
+	const handleCreateAccountSuccess = ( data: AccountCreateReturn ) => {
+		if ( 'username' in data ) {
+			setSignupIsNewUser( data.username );
+		}
+	};
+
 	return (
 		<>
 			{ shouldRenderLocaleSuggestions && (
@@ -94,7 +98,7 @@ const UserStepComponent: Step = function UserStep( {
 							userEmail=""
 							notice={ notice }
 							isSocialFirst
-							onCreateAccountSuccess={ () => setIsNewUser( true ) }
+							onCreateAccountSuccess={ handleCreateAccountSuccess }
 						/>
 						{ accountCreateResponse && 'bearer_token' in accountCreateResponse && (
 							<WpcomLoginForm

diff --git a/...ng/stepper/declarative-flow/internals/steps-repository/__user/use-create-user-mutation.ts b/...ng/stepper/declarative-flow/internals/steps-repository/__user/use-create-user-mutation.ts
@@ -1,9 +1,8 @@
 // import config from '@automattic/calypso-config';
 // import { initGoogleRecaptcha, recordGoogleRecaptchaAction } from 'calypso/lib/analytics/recaptcha';
 import { useMutation } from '@tanstack/react-query';
-import { useDispatch as useDataStoreDispatch } from '@wordpress/data';
-import { USER_STORE } from 'calypso/landing/stepper/stores';
 import { createAccount } from 'calypso/lib/signup/api/account';
+import { setSignupIsNewUser } from 'calypso/signup/storageUtils';
 import { useDispatch } from 'calypso/state';
 import {
 	SOCIAL_LOGIN_REQUEST,
@@ -13,7 +12,6 @@ import {
 
 export function useCreateAccountMutation() {
 	const dispatch = useDispatch();
-	const { setIsNewUser } = useDataStoreDispatch( USER_STORE );
 
 	return useMutation( {
 		mutationKey: [ 'create' ],
@@ -25,7 +23,7 @@ export function useCreateAccountMutation() {
 		},
 		onSuccess: ( data ) => {
 			if ( 'isNewAccountCreated' in data && data.isNewAccountCreated ) {
-				setIsNewUser( true );
+				setSignupIsNewUser( data?.username );
 			}
 			dispatch( {
 				type: SOCIAL_LOGIN_REQUEST_SUCCESS,

diff --git a/client/landing/stepper/hooks/use-record-signup-complete.ts b/client/landing/stepper/hooks/use-record-signup-complete.ts
@@ -3,6 +3,7 @@ import { useSelect } from '@wordpress/data';
 import { useCallback } from 'react';
 import { USER_STORE, ONBOARD_STORE } from 'calypso/landing/stepper/stores';
 import { SIGNUP_DOMAIN_ORIGIN, recordSignupComplete } from 'calypso/lib/analytics/signup';
+import { clearSignupIsNewUser, getSignupIsNewUser } from 'calypso/signup/storageUtils';
 import { useSelector } from 'calypso/state';
 import isUserRegistrationDaysWithinRange from 'calypso/state/selectors/is-user-registration-days-within-range';
 import { useSite } from './use-site';
@@ -12,14 +13,14 @@ export const useRecordSignupComplete = ( flow: string | null ) => {
 	const site = useSite();
 	const siteId = site?.ID || null;
 	const theme = site?.options?.theme_slug || '';
-	const { domainCartItem, planCartItem, siteCount, selectedDomain, isNewUser, signupDomainOrigin } =
+	const { username, siteCount, domainCartItem, planCartItem, selectedDomain, signupDomainOrigin } =
 		useSelect( ( select ) => {
 			return {
+				username: ( select( USER_STORE ) as UserSelect ).getCurrentUser()?.username,
 				siteCount: ( select( USER_STORE ) as UserSelect ).getCurrentUser()?.site_count,
 				domainCartItem: ( select( ONBOARD_STORE ) as OnboardSelect ).getDomainCartItem(),
 				planCartItem: ( select( ONBOARD_STORE ) as OnboardSelect ).getPlanCartItem(),
 				selectedDomain: ( select( ONBOARD_STORE ) as OnboardSelect ).getSelectedDomain(),
-				isNewUser: ( select( USER_STORE ) as UserSelect ).isNewUser(),
 				signupDomainOrigin: ( select( ONBOARD_STORE ) as OnboardSelect ).getSignupDomainOrigin(),
 			};
 		}, [] );
@@ -31,6 +32,10 @@ export const useRecordSignupComplete = ( flow: string | null ) => {
 	return useCallback(
 		( signupCompletionState: Record< string, unknown > ) => {
 			const siteSlug = site?.slug ?? signupCompletionState?.siteSlug;
+			const isNewUser = getSignupIsNewUser( username );
+			if ( isNewUser ) {
+				clearSignupIsNewUser( username );
+			}
 
 			const isNew7DUserSite = !! (
 				isNewUser ||
@@ -80,7 +85,6 @@ export const useRecordSignupComplete = ( flow: string | null ) => {
 		[
 			domainCartItem,
 			flow,
-			isNewUser,
 			isNewishUser,
 			planCartItem,
 			selectedDomain,
@@ -89,6 +93,7 @@ export const useRecordSignupComplete = ( flow: string | null ) => {
 			siteCount,
 			siteId,
 			theme,
+			username,
 		]
 	);
 };
diff --git a/client/signup/storageUtils.js b/client/signup/storageUtils.js
@@ -119,3 +119,16 @@ export const getSignupCompleteElapsedTime = () => {
 
 	return Math.floor( performance.now() - startTime );
 };
+
+export const setSignupIsNewUser = ( username ) =>
+	ignoreFatalsForSessionStorage( () =>
+		sessionStorage?.setItem( `wpcom_signup_is_new_user_${ username }`, true )
+	);
+export const getSignupIsNewUser = ( username ) =>
+	ignoreFatalsForSessionStorage( () =>
+		sessionStorage?.getItem( `wpcom_signup_is_new_user_${ username }` )
+	);
+export const clearSignupIsNewUser = ( username ) =>
+	ignoreFatalsForSessionStorage( () =>
+		sessionStorage?.removeItem( `wpcom_signup_is_new_user_${ username }` )
+	);
diff --git a/packages/data-stores/src/user/actions.ts b/packages/data-stores/src/user/actions.ts
@@ -10,25 +10,17 @@ export function createActions() {
 		type: 'RECEIVE_CURRENT_USER_FAILED' as const,
 	} );
 
-	const setIsNewUser = ( isNewUser: boolean ) => ( {
-		type: 'SET_IS_NEW_USER' as const,
-		isNewUser,
-	} );
-
 	return {
 		receiveCurrentUser,
 		receiveCurrentUserFailed,
-		setIsNewUser,
 	};
 }
 
 export type ActionCreators = ReturnType< typeof createActions >;
 
 export type Action =
 	| ReturnType<
-			| ActionCreators[ 'receiveCurrentUser' ]
-			| ActionCreators[ 'receiveCurrentUserFailed' ]
-			| ActionCreators[ 'setIsNewUser' ]
+			ActionCreators[ 'receiveCurrentUser' ] | ActionCreators[ 'receiveCurrentUserFailed' ]
 	  >
 	// Type added so we can dispatch actions in tests, but has no runtime cost
 	| { type: 'TEST_ACTION' };
diff --git a/packages/data-stores/src/user/reducer.ts b/packages/data-stores/src/user/reducer.ts
@@ -13,15 +13,7 @@ export const currentUser: Reducer< CurrentUser | null | undefined, Action > = (
 	return state;
 };
 
-const isNewUser: Reducer< boolean, Action > = ( state = false, action ) => {
-	switch ( action.type ) {
-		case 'SET_IS_NEW_USER':
-			return action.isNewUser;
-	}
-	return state;
-};
-
-const reducer = combineReducers( { currentUser, isNewUser } );
+const reducer = combineReducers( { currentUser } );
 export type State = ReturnType< typeof reducer >;
 
 export default reducer;
diff --git a/packages/data-stores/src/user/selectors.ts b/packages/data-stores/src/user/selectors.ts
@@ -4,4 +4,3 @@ export const getState = ( state: State ) => state;
 
 export const getCurrentUser = ( state: State ) => state.currentUser;
 export const isCurrentUserLoggedIn = ( state: State ) => !! state.currentUser?.ID;
-export const isNewUser = ( state: State ) => state.isNewUser;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,4 +4,3 @@ export const getState = ( state: State ) => state;

		export const getCurrentUser = ( state: State ) => state.currentUser;
		export const isCurrentUserLoggedIn = ( state: State ) => !! state.currentUser?.ID;
		export const isNewUser = ( state: State ) => state.isNewUser;