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 index 7fe051c984a30..c6cf8f614c73c 100644 --- 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 && ( { 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 index 88d362d0e7c2e..daccd4796eadb 100644 --- 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 index fb2df3fb144e0..2e4d4e3f56292 100644 --- 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 index cd45f53778859..36fd2bc5e759b 100644 --- a/packages/data-stores/src/user/actions.ts +++ b/packages/data-stores/src/user/actions.ts @@ -10,15 +10,9 @@ 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, }; } @@ -26,9 +20,7 @@ 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 index a992ddfc0dba4..9bc0c2cc4a18f 100644 --- 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 index c23aa82b0849a..43ca06b475554 100644 --- 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;