97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { useSetRecoilState } from 'recoil';
|
|
import {
|
|
AnimatedEaseIn,
|
|
IconCheck,
|
|
isDefined,
|
|
MainButton,
|
|
RGBA,
|
|
} from 'twenty-ui';
|
|
|
|
import { SubTitle } from '@/auth/components/SubTitle';
|
|
import { Title } from '@/auth/components/Title';
|
|
import { currentUserState } from '@/auth/states/currentUserState';
|
|
import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
|
|
import { AppPath } from '@/types/AppPath';
|
|
import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
|
|
import {
|
|
OnboardingStatus,
|
|
useGetCurrentUserLazyQuery,
|
|
} from '~/generated/graphql';
|
|
import { useNavigateApp } from '~/hooks/useNavigateApp';
|
|
|
|
const StyledCheckContainer = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
border: 2px solid ${(props) => props.color};
|
|
border-radius: ${({ theme }) => theme.border.radius.rounded};
|
|
box-shadow: ${(props) =>
|
|
props.color && `-4px 4px 0 -2px ${RGBA(props.color, 1)}`};
|
|
height: 36px;
|
|
width: 36px;
|
|
margin-bottom: ${({ theme }) => theme.spacing(4)};
|
|
`;
|
|
|
|
const StyledButtonContainer = styled.div`
|
|
margin-top: ${({ theme }) => theme.spacing(8)};
|
|
`;
|
|
|
|
export const PaymentSuccess = () => {
|
|
const theme = useTheme();
|
|
const navigate = useNavigateApp();
|
|
const subscriptionStatus = useSubscriptionStatus();
|
|
const onboardingStatus = useOnboardingStatus();
|
|
const [getCurrentUser] = useGetCurrentUserLazyQuery();
|
|
const setCurrentUser = useSetRecoilState(currentUserState);
|
|
const color =
|
|
theme.name === 'light' ? theme.grayScale.gray90 : theme.grayScale.gray10;
|
|
|
|
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 <></>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<AnimatedEaseIn>
|
|
<StyledCheckContainer color={color}>
|
|
<IconCheck color={color} size={24} stroke={3} />
|
|
</StyledCheckContainer>
|
|
</AnimatedEaseIn>
|
|
<Title>All set!</Title>
|
|
<SubTitle>Your account has been activated.</SubTitle>
|
|
<StyledButtonContainer>
|
|
<MainButton
|
|
title="Start"
|
|
width={200}
|
|
onClick={navigateWithSubscriptionCheck}
|
|
/>
|
|
</StyledButtonContainer>
|
|
</>
|
|
);
|
|
};
|