Onboarding - add nextPath logic after email verification (twentyhq#12342)

Context :
Plan choice [on pricing page on website](https://twenty.com/pricing)
should redirect you the right plan on app /plan-required page (after
sign in), thanks to query parameters and BillingCheckoutSessionState
sync.
With email verification, an other session starts at CTA click in
verification email. Initial BillingCheckoutSessionState is lost and user
can't submit to the plan he choose.

Solution : 
Pass a nextPath query parameter in email verification link

To test : 
- Modify .env to add IS_BILLING_ENABLED (+ reset db + sync billing) +
IS_EMAIL_VERIFICATION_REQUIRED
- Start test from this page
http://app.localhost:3001/welcome?billingCheckoutSession={%22plan%22:%22ENTERPRISE%22,%22interval%22:%22Year%22,%22requirePaymentMethod%22:true}
- After verification, check you arrive on /plan-required page with
Enterprise plan on a yearly interval (default is Pro/monthly).

closes twentyhq#12288

Author: etiennejouan

packages/twenty-front/src/generated/graphql.tsx

@@ -1177,6 +1177,7 @@ export type MutationSignUpArgs = {
   email: Scalars['String'];
   locale?: InputMaybe<Scalars['String']>;
   password: Scalars['String'];
+  verifyEmailNextPath?: InputMaybe<Scalars['String']>;
   workspaceId?: InputMaybe<Scalars['String']>;
   workspaceInviteHash?: InputMaybe<Scalars['String']>;
   workspacePersonalInviteToken?: InputMaybe<Scalars['String']>;
@@ -2672,6 +2673,7 @@ export type SignUpMutationVariables = Exact<{
   captchaToken?: InputMaybe<Scalars['String']>;
   workspaceId?: InputMaybe<Scalars['String']>;
   locale?: InputMaybe<Scalars['String']>;
+  verifyEmailNextPath?: InputMaybe<Scalars['String']>;
 }>;
 
 
@@ -4057,7 +4059,7 @@ export type ResendEmailVerificationTokenMutationHookResult = ReturnType<typeof u
 export type ResendEmailVerificationTokenMutationResult = Apollo.MutationResult<ResendEmailVerificationTokenMutation>;
 export type ResendEmailVerificationTokenMutationOptions = Apollo.BaseMutationOptions<ResendEmailVerificationTokenMutation, ResendEmailVerificationTokenMutationVariables>;
 export const SignUpDocument = gql`
-    mutation SignUp($email: String!, $password: String!, $workspaceInviteHash: String, $workspacePersonalInviteToken: String = null, $captchaToken: String, $workspaceId: String, $locale: String) {
+    mutation SignUp($email: String!, $password: String!, $workspaceInviteHash: String, $workspacePersonalInviteToken: String = null, $captchaToken: String, $workspaceId: String, $locale: String, $verifyEmailNextPath: String) {
   signUp(
     email: $email
     password: $password
@@ -4066,6 +4068,7 @@ export const SignUpDocument = gql`
     captchaToken: $captchaToken
     workspaceId: $workspaceId
     locale: $locale
+    verifyEmailNextPath: $verifyEmailNextPath
   ) {
     loginToken {
       ...AuthTokenFragment
@@ -4102,6 +4105,7 @@ export type SignUpMutationFn = Apollo.MutationFunction<SignUpMutation, SignUpMut
  *      captchaToken: // value for 'captchaToken'
  *      workspaceId: // value for 'workspaceId'
  *      locale: // value for 'locale'
+ *      verifyEmailNextPath: // value for 'verifyEmailNextPath'
  *   },
  * });
  */

packages/twenty-front/src/hooks/__tests__/usePageChangeEffectNavigateLocation.test.ts

@@ -3,6 +3,7 @@ import { useDefaultHomePagePath } from '@/navigation/hooks/useDefaultHomePagePat
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { AppPath } from '@/types/AppPath';
 import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo';
+import { expect } from '@storybook/test';
 import { useParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 
@@ -57,10 +58,14 @@ const setupMockUseParams = (objectNamePlural?: string) => {
 };
 
 jest.mock('recoil');
-const setupMockRecoil = (objectNamePlural?: string) => {
+const setupMockRecoil = (
+  objectNamePlural?: string,
+  verifyEmailNextPath?: string,
+) => {
   jest
     .mocked(useRecoilValue)
-    .mockReturnValueOnce([{ namePlural: objectNamePlural ?? '' }]);
+    .mockReturnValueOnce([{ namePlural: objectNamePlural ?? '' }])
+    .mockReturnValueOnce(verifyEmailNextPath);
 };
 
 // prettier-ignore
@@ -72,6 +77,7 @@ const testCases: {
   res: string | undefined;
   objectNamePluralFromParams?: string;
   objectNamePluralFromMetadata?: string;
+  verifyEmailNextPath?: string;
 }[] = [
   { loc: AppPath.Verify, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: AppPath.PlanRequired },
   { loc: AppPath.Verify, isLoggedIn: true, isWorkspaceSuspended: true, onboardingStatus: OnboardingStatus.COMPLETED, res: '/settings/billing' },
@@ -110,7 +116,9 @@ const testCases: {
   { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.COMPLETED, res: undefined },
 
   { loc: AppPath.VerifyEmail, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: AppPath.PlanRequired },
+  { loc: AppPath.VerifyEmail, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, verifyEmailNextPath: '/nextPath?key=value', res: '/nextPath?key=value' },
   { loc: AppPath.VerifyEmail, isLoggedIn: true, isWorkspaceSuspended: true, onboardingStatus: OnboardingStatus.COMPLETED, res: '/settings/billing' },
+  { loc: AppPath.VerifyEmail, isLoggedIn: false, isWorkspaceSuspended: false, onboardingStatus: undefined, verifyEmailNextPath: '/nextPath?key=value', res: undefined },
   { loc: AppPath.VerifyEmail, isLoggedIn: false, isWorkspaceSuspended: false, onboardingStatus: undefined, res: undefined },
   { loc: AppPath.VerifyEmail, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.WORKSPACE_ACTIVATION, res: AppPath.CreateWorkspace },
   { loc: AppPath.VerifyEmail, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PROFILE_CREATION, res: AppPath.CreateProfile },
@@ -275,14 +283,15 @@ describe('usePageChangeEffectNavigateLocation', () => {
       isLoggedIn,
       objectNamePluralFromParams,
       objectNamePluralFromMetadata,
+      verifyEmailNextPath,
       res,
     }) => {
       setupMockIsMatchingLocation(loc);
       setupMockOnboardingStatus(onboardingStatus);
       setupMockIsWorkspaceActivationStatusEqualsTo(isWorkspaceSuspended);
       setupMockIsLogged(isLoggedIn);
       setupMockUseParams(objectNamePluralFromParams);
-      setupMockRecoil(objectNamePluralFromMetadata);
+      setupMockRecoil(objectNamePluralFromMetadata, verifyEmailNextPath);
 
       expect(usePageChangeEffectNavigateLocation()).toEqual(res);
     },
@@ -294,7 +303,8 @@ describe('usePageChangeEffectNavigateLocation', () => {
           (Object.keys(OnboardingStatus).length +
             ['isWorkspaceSuspended:true', 'isWorkspaceSuspended:false']
               .length) +
-          ['nonExistingObjectInParam', 'existingObjectInParam:false'].length,
+          ['nonExistingObjectInParam', 'existingObjectInParam:false'].length +
+          ['caseWithRedirectionToVerifyEmailNextPath', 'caseWithout'].length,
       );
     });
   });

packages/twenty-front/src/hooks/usePageChangeEffectNavigateLocation.ts

@@ -1,3 +1,4 @@
+import { verifyEmailNextPathState } from '@/app/states/verifyEmailNextPathState';
 import { useIsLogged } from '@/auth/hooks/useIsLogged';
 import { useDefaultHomePagePath } from '@/navigation/hooks/useDefaultHomePagePath';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
@@ -43,6 +44,7 @@ export const usePageChangeEffectNavigateLocation = () => {
   const objectMetadataItem = objectMetadataItems.find(
     (objectMetadataItem) => objectMetadataItem.namePlural === objectNamePlural,
   );
+  const verifyEmailNextPath = useRecoilValue(verifyEmailNextPathState);
 
   if (
     !isLoggedIn &&
@@ -58,6 +60,12 @@ export const usePageChangeEffectNavigateLocation = () => {
     onboardingStatus === OnboardingStatus.PLAN_REQUIRED &&
     !someMatchingLocationOf([AppPath.PlanRequired, AppPath.PlanRequiredSuccess])
   ) {
+    if (
+      isMatchingLocation(location, AppPath.VerifyEmail) &&
+      isDefined(verifyEmailNextPath)
+    ) {
+      return verifyEmailNextPath;
+    }
     return AppPath.PlanRequired;
   }
 

packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts

@@ -1,62 +1,59 @@
 import { useRecoilCallback } from 'recoil';
 
-import { isQueryParamInitializedState } from '@/app/states/isQueryParamInitializedState';
 import { billingCheckoutSessionState } from '@/auth/states/billingCheckoutSessionState';
 import { BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
 import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
+import deepEqual from 'deep-equal';
 
 // Initialize state that are hydrated from query parameters
 // We used to use recoil-sync to do this, but it was causing issues with Firefox
 export const useInitializeQueryParamState = () => {
   const initializeQueryParamState = useRecoilCallback(
     ({ set, snapshot }) =>
       () => {
-        const isInitialized = snapshot
-          .getLoadable(isQueryParamInitializedState)
-          .getValue();
-
-        if (!isInitialized) {
-          const handlers = {
-            billingCheckoutSession: (value: string) => {
-              try {
-                const parsedValue = JSON.parse(decodeURIComponent(value));
-
-                if (
-                  typeof parsedValue === 'object' &&
-                  parsedValue !== null &&
-                  'plan' in parsedValue &&
-                  'interval' in parsedValue &&
-                  'requirePaymentMethod' in parsedValue
-                ) {
-                  set(
-                    billingCheckoutSessionState,
-                    parsedValue as BillingCheckoutSession,
-                  );
-                }
-              } catch (error) {
-                // eslint-disable-next-line no-console
-                console.error(
-                  'Failed to parse billingCheckoutSession from URL',
-                  error,
-                );
+        const handlers = {
+          billingCheckoutSession: (value: string) => {
+            const billingCheckoutSession = snapshot
+              .getLoadable(billingCheckoutSessionState)
+              .getValue();
+
+            try {
+              const parsedValue = JSON.parse(decodeURIComponent(value));
+
+              if (
+                typeof parsedValue === 'object' &&
+                parsedValue !== null &&
+                'plan' in parsedValue &&
+                'interval' in parsedValue &&
+                'requirePaymentMethod' in parsedValue &&
+                !deepEqual(billingCheckoutSession, parsedValue)
+              ) {
                 set(
                   billingCheckoutSessionState,
-                  BILLING_CHECKOUT_SESSION_DEFAULT_VALUE,
+                  parsedValue as BillingCheckoutSession,
                 );
               }
-            },
-          };
+            } catch (error) {
+              // eslint-disable-next-line no-console
+              console.error(
+                'Failed to parse billingCheckoutSession from URL',
+                error,
+              );
+              set(
+                billingCheckoutSessionState,
+                BILLING_CHECKOUT_SESSION_DEFAULT_VALUE,
+              );
+            }
+          },
+        };
 
-          const queryParams = new URLSearchParams(window.location.search);
+        const queryParams = new URLSearchParams(window.location.search);
 
-          for (const [paramName, handler] of Object.entries(handlers)) {
-            const value = queryParams.get(paramName);
-            if (value !== null) {
-              handler(value);
-            }
+        for (const [paramName, handler] of Object.entries(handlers)) {
+          const value = queryParams.get(paramName);
+          if (value !== null) {
+            handler(value);
           }
-
-          set(isQueryParamInitializedState, true);
         }
       },
     [],

packages/twenty-front/src/modules/app/states/isQueryParamInitializedState.ts

@@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui/utilities';
+
+export const verifyEmailNextPathState = createState<string | undefined>({
+  key: 'verifyEmailNextPathState',
+  defaultValue: undefined,
+});

packages/twenty-front/src/modules/app/states/verifyEmailNextPathState.ts

@@ -4,12 +4,15 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { ApolloError } from '@apollo/client';
 
+import { verifyEmailNextPathState } from '@/app/states/verifyEmailNextPathState';
 import { useVerifyLogin } from '@/auth/hooks/useVerifyLogin';
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { useLingui } from '@lingui/react/macro';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 import { EmailVerificationSent } from '../sign-in-up/components/EmailVerificationSent';
@@ -22,8 +25,11 @@ export const VerifyEmailEffect = () => {
   const [searchParams] = useSearchParams();
   const [isError, setIsError] = useState(false);
 
+  const setVerifyEmailNextPath = useSetRecoilState(verifyEmailNextPathState);
+
   const email = searchParams.get('email');
   const emailVerificationToken = searchParams.get('emailVerificationToken');
+  const verifyEmailNextPath = searchParams.get('nextPath');
 
   const navigate = useNavigateApp();
   const { redirectToWorkspaceDomain } = useRedirectToWorkspaceDomain();
@@ -58,6 +64,11 @@ export const VerifyEmailEffect = () => {
             loginToken: loginToken.token,
           });
         }
+
+        if (isDefined(verifyEmailNextPath)) {
+          setVerifyEmailNextPath(verifyEmailNextPath);
+        }
+
         verifyLoginToken(loginToken.token);
       } catch (error) {
         const message: string =

packages/twenty-front/src/modules/auth/components/VerifyEmailEffect.tsx

@@ -9,6 +9,7 @@ export const SIGN_UP = gql`
     $captchaToken: String
     $workspaceId: String
     $locale: String
+    $verifyEmailNextPath: String
   ) {
     signUp(
       email: $email
@@ -18,6 +19,7 @@ export const SIGN_UP = gql`
       captchaToken: $captchaToken
       workspaceId: $workspaceId
       locale: $locale
+      verifyEmailNextPath: $verifyEmailNextPath
     ) {
       loginToken {
         ...AuthTokenFragment

packages/twenty-front/src/modules/auth/graphql/mutations/signUp.ts

@@ -167,7 +167,7 @@ describe('useAuth', () => {
     const { result } = renderHooks();
 
     await act(async () => {
-      await result.current.signUpWithCredentials(email, password);
+      await result.current.signUpWithCredentials({ email, password });
     });
 
     expect(mocks[2].result).toHaveBeenCalled();

packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx

@@ -397,13 +397,21 @@ export const useAuth = () => {
   }, [clearSession]);
 
   const handleCredentialsSignUp = useCallback(
-    async (
-      email: string,
-      password: string,
-      workspaceInviteHash?: string,
-      workspacePersonalInviteToken?: string,
-      captchaToken?: string,
-    ) => {
+    async ({
+      email,
+      password,
+      workspaceInviteHash,
+      workspacePersonalInviteToken,
+      captchaToken,
+      verifyEmailNextPath,
+    }: {
+      email: string;
+      password: string;
+      workspaceInviteHash?: string;
+      workspacePersonalInviteToken?: string;
+      captchaToken?: string;
+      verifyEmailNextPath?: string;
+    }) => {
       const signUpResult = await signUp({
         variables: {
           email,
@@ -415,6 +423,7 @@ export const useAuth = () => {
           ...(workspacePublicData?.id
             ? { workspaceId: workspacePublicData.id }
             : {}),
+          verifyEmailNextPath,
         },
       });