diff --git a/packages/twenty-front/src/hooks/__tests__/usePageChangeEffectNavigateLocation.test.ts b/packages/twenty-front/src/hooks/__tests__/usePageChangeEffectNavigateLocation.test.ts index d5166179e..5328c307a 100644 --- a/packages/twenty-front/src/hooks/__tests__/usePageChangeEffectNavigateLocation.test.ts +++ b/packages/twenty-front/src/hooks/__tests__/usePageChangeEffectNavigateLocation.test.ts @@ -146,7 +146,7 @@ const testCases = [ { loc: AppPath.PlanRequired, isLoggedIn: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.InviteTeam, res: AppPath.InviteTeam }, { loc: AppPath.PlanRequired, isLoggedIn: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.Completed, res: defaultHomePagePath }, - { loc: AppPath.PlanRequiredSuccess, isLoggedIn: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PlanRequired, res: AppPath.PlanRequired }, + { loc: AppPath.PlanRequiredSuccess, isLoggedIn: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PlanRequired, res: undefined }, { loc: AppPath.PlanRequiredSuccess, isLoggedIn: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.Completed, res: '/settings/billing' }, { loc: AppPath.PlanRequiredSuccess, isLoggedIn: true, subscriptionStatus: SubscriptionStatus.Unpaid, onboardingStatus: OnboardingStatus.Completed, res: '/settings/billing' }, { loc: AppPath.PlanRequiredSuccess, isLoggedIn: true, subscriptionStatus: SubscriptionStatus.PastDue, onboardingStatus: OnboardingStatus.Completed, res: defaultHomePagePath }, diff --git a/packages/twenty-front/src/hooks/usePageChangeEffectNavigateLocation.ts b/packages/twenty-front/src/hooks/usePageChangeEffectNavigateLocation.ts index 5d637c77b..3cd7948a2 100644 --- a/packages/twenty-front/src/hooks/usePageChangeEffectNavigateLocation.ts +++ b/packages/twenty-front/src/hooks/usePageChangeEffectNavigateLocation.ts @@ -42,7 +42,8 @@ export const usePageChangeEffectNavigateLocation = () => { if ( onboardingStatus === OnboardingStatus.PlanRequired && - !isMatchingLocation(AppPath.PlanRequired) + !isMatchingLocation(AppPath.PlanRequired) && + !isMatchingLocation(AppPath.PlanRequiredSuccess) ) { return AppPath.PlanRequired; } diff --git a/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx b/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx index d4c51f4a2..b541162f3 100644 --- a/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx +++ b/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx @@ -1,19 +1,26 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { useRecoilValue } from 'recoil'; +import { useSetRecoilState } from 'recoil'; import { AnimatedEaseIn, IconCheck, + isDefined, MainButton, RGBA, - UndecoratedLink, } from 'twenty-ui'; import { SubTitle } from '@/auth/components/SubTitle'; import { Title } from '@/auth/components/Title'; import { currentUserState } from '@/auth/states/currentUserState'; +import { + OnboardingStatus, + useGetCurrentUserLazyQuery, +} from '~/generated/graphql'; +import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus'; +import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus'; import { AppPath } from '@/types/AppPath'; -import { OnboardingStatus } from '~/generated/graphql'; +import React from 'react'; +import { useNavigate } from 'react-router-dom'; const StyledCheckContainer = styled.div` align-items: center; @@ -34,11 +41,38 @@ const StyledButtonContainer = styled.div` export const PaymentSuccess = () => { const theme = useTheme(); - const currentUser = useRecoilValue(currentUserState); + const navigate = useNavigate(); + const subscriptionStatus = useSubscriptionStatus(); + const onboardingStatus = useOnboardingStatus(); + const [getCurrentUser] = useGetCurrentUserLazyQuery(); + const setCurrentUser = useSetRecoilState(currentUserState); const color = theme.name === 'light' ? theme.grayScale.gray90 : theme.grayScale.gray10; - if (currentUser?.onboardingStatus === OnboardingStatus.Completed) { + const navigateWithSubscriptionCheck = async () => { + if (isDefined(subscriptionStatus)) { + navigate(AppPath.CreateWorkspace); + return; + } + + const result = await getCurrentUser({ fetchPolicy: 'network-only' }); + const currentUser = result.data?.currentUser; + const refreshedSubscriptionStatus = + currentUser?.currentWorkspace?.currentBillingSubscription?.status; + + if (isDefined(currentUser) && isDefined(refreshedSubscriptionStatus)) { + setCurrentUser(currentUser); + navigate(AppPath.CreateWorkspace); + return; + } + + throw new Error( + "We're waiting for a confirmation from our payment provider (Stripe).\n" + + 'Please try again in a few seconds, sorry.', + ); + }; + + if (onboardingStatus === OnboardingStatus.Completed) { return <>>; } @@ -52,9 +86,11 @@ export const PaymentSuccess = () => {