fix billingCheckoutSession query param + enable redirect on workspace… (#11509)

… during onboarding



fixes : https://github.com/twentyhq/core-team-issues/issues/668

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

@@ -3,9 +3,11 @@ import { useSearchParams } from 'react-router-dom';
 
 import { useIsLogged } from '@/auth/hooks/useIsLogged';
 import { useVerifyLogin } from '@/auth/hooks/useVerifyLogin';
+import { clientConfigApiStatusState } from '@/client-config/states/clientConfigApiStatusState';
 import { AppPath } from '@/types/AppPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { SignInUpLoading } from '~/pages/auth/SignInUpLoading';
@@ -20,6 +22,10 @@ export const Verify = () => {
   const navigate = useNavigateApp();
   const { verifyLoginToken } = useVerifyLogin();
 
+  const { isLoaded: clientConfigLoaded } = useRecoilValue(
+    clientConfigApiStatusState,
+  );
+
   useEffect(() => {
     if (isDefined(errorMessage)) {
       enqueueSnackBar(errorMessage, {
@@ -28,6 +34,8 @@ export const Verify = () => {
       });
     }
 
+    if (!clientConfigLoaded) return;
+
     if (isDefined(loginToken)) {
       verifyLoginToken(loginToken);
     } else if (!isLogged) {
@@ -35,7 +43,7 @@ export const Verify = () => {
     }
     // Verify only needs to run once at mount
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [clientConfigLoaded]);
 
   return <SignInUpLoading />;
 };

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

@@ -4,10 +4,12 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 
 import { useVerifyLogin } from '@/auth/hooks/useVerifyLogin';
+import { animateModalState } from '@/auth/states/animateModalState';
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
 import { useLingui } from '@lingui/react/macro';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 import { EmailVerificationSent } from '../sign-in-up/components/EmailVerificationSent';
@@ -19,6 +21,8 @@ export const VerifyEmailEffect = () => {
 
   const [searchParams] = useSearchParams();
   const [isError, setIsError] = useState(false);
+  const setAnimateModal = useSetRecoilState(animateModalState);
+
   const email = searchParams.get('email');
   const emailVerificationToken = searchParams.get('emailVerificationToken');
 
@@ -48,9 +52,9 @@ export const VerifyEmailEffect = () => {
 
         const workspaceUrl = getWorkspaceUrl(workspaceUrls);
         if (workspaceUrl.slice(0, -1) !== window.location.origin) {
-          return redirectToWorkspaceDomain(workspaceUrl, AppPath.Verify, {
+          setAnimateModal(false);
+          return await redirectToWorkspaceDomain(workspaceUrl, AppPath.Verify, {
             loginToken: loginToken.token,
-            animateModal: false,
           });
         }
         verifyLoginToken(loginToken.token);

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -41,6 +41,7 @@ import { getTimeFormatFromWorkspaceTimeFormat } from '@/localization/utils/getTi
 import { currentUserState } from '../states/currentUserState';
 import { tokenPairState } from '../states/tokenPairState';
 
+import { animateModalState } from '@/auth/states/animateModalState';
 import { currentUserWorkspaceState } from '@/auth/states/currentUserWorkspaceState';
 import {
   SignInUpStep,
@@ -114,6 +115,7 @@ export const useAuth = () => {
   const goToRecoilSnapshot = useGotoRecoilSnapshot();
 
   const setDateTimeFormat = useSetRecoilState(dateTimeFormatState);
+  const setAnimateModal = useSetRecoilState(animateModalState);
 
   const [, setSearchParams] = useSearchParams();
 
@@ -420,14 +422,13 @@ export const useAuth = () => {
       }
 
       if (isMultiWorkspaceEnabled) {
-        return redirectToWorkspaceDomain(
+        setAnimateModal(false);
+        return await redirectToWorkspaceDomain(
           getWorkspaceUrl(signUpResult.data.signUp.workspace.workspaceUrls),
-
           isEmailVerificationRequired ? AppPath.SignInUp : AppPath.Verify,
           {
             ...(!isEmailVerificationRequired && {
               loginToken: signUpResult.data.signUp.loginToken.token,
-              animateModal: false,
             }),
             email,
           },
@@ -445,6 +446,7 @@ export const useAuth = () => {
       handleGetAuthTokensFromLoginToken,
       setSignInUpStep,
       setSearchParams,
+      setAnimateModal,
       isEmailVerificationRequired,
       redirectToWorkspaceDomain,
     ],

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx

@@ -90,13 +90,13 @@ export const SignInUpGlobalScopeForm = () => {
           variant: SnackBarVariant.Error,
         });
       },
-      onCompleted: (data) => {
+      onCompleted: async (data) => {
         requestFreshCaptchaToken();
         const response = data.checkUserExists;
         if (response.__typename === 'UserExists') {
           if (response.availableWorkspaces.length >= 1) {
             const workspace = response.availableWorkspaces[0];
-            return redirectToWorkspaceDomain(
+            return await redirectToWorkspaceDomain(
               getWorkspaceUrl(workspace.workspaceUrls),
               pathname,
               {

packages/twenty-front/src/modules/auth/states/animateModalState.ts

@@ -0,0 +1,26 @@
+import { urlSyncEffect } from 'recoil-sync';
+import { createState } from 'twenty-ui/utilities';
+
+export const animateModalState = createState<boolean>({
+  key: 'animateModalState',
+  defaultValue: true,
+  effects: [
+    urlSyncEffect({
+      itemKey: 'animateModal',
+      refine: (value: unknown) => {
+        if (typeof value === 'boolean') {
+          return {
+            type: 'success',
+            value: value as boolean,
+            warnings: [],
+          } as const;
+        }
+        return {
+          type: 'failure',
+          message: 'Invalid animateModalState',
+          path: [] as any,
+        } as const;
+      },
+    }),
+  ],
+});

packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts

@@ -8,6 +8,7 @@ export const billingCheckoutSessionState = createState<BillingCheckoutSession>({
   defaultValue: BILLING_CHECKOUT_SESSION_DEFAULT_VALUE,
   effects: [
     syncEffect({
+      itemKey: 'billingCheckoutSession',
       refine: (value: unknown) => {
         if (
           typeof value === 'object' &&