39 create subscription and success modale (#4208)

* Init add choose your plan page component

* Update price format

* Add billing refund trial duration env variable

* Add billing benefits

* Add Button

* Call checkout endpoint

* Fix theme color

* Add Payment success modale

* Add loader to createWorkspace submit button

* Fix lint

* Fix dark mode

* Code review returns

* Use a resolver for front requests

* Fix 'create workspace' loader at sign up

* Fix 'create workspace' with enter key bug

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

@@ -11,7 +11,7 @@ const StyledContent = styled(UIModal.Content)`
 type AuthModalProps = { children: React.ReactNode };
 
 export const AuthModal = ({ children }: AuthModalProps) => (
-  <UIModal isOpen={true}>
+  <UIModal isOpen={true} padding={'none'}>
     <StyledContent>{children}</StyledContent>
   </UIModal>
 );

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

@@ -5,24 +5,30 @@ import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEase
 
 type TitleProps = React.PropsWithChildren & {
   animate?: boolean;
+  withMarginTop?: boolean;
 };
 
-const StyledTitle = styled.div`
+const StyledTitle = styled.div<Pick<TitleProps, 'withMarginTop'>>`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.xl};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
-  margin-top: ${({ theme }) => theme.spacing(4)};
+  margin-top: ${({ theme, withMarginTop }) =>
+    withMarginTop ? theme.spacing(4) : 0};
 `;
 
-export const Title = ({ children, animate = false }: TitleProps) => {
+export const Title = ({
+  children,
+  animate = false,
+  withMarginTop = true,
+}: TitleProps) => {
   if (animate) {
     return (
-      <StyledTitle>
+      <StyledTitle withMarginTop={withMarginTop}>
         <AnimatedEaseIn>{children}</AnimatedEaseIn>
       </StyledTitle>
     );
   }
 
-  return <StyledTitle>{children}</StyledTitle>;
+  return <StyledTitle withMarginTop={withMarginTop}>{children}</StyledTitle>;
 };

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

@@ -8,6 +8,7 @@ const StyledContainer = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
   display: flex;
   font-size: ${({ theme }) => theme.font.size.sm};
+  max-width: 280px;
   text-align: center;
 `;
 

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

@@ -30,10 +30,6 @@ const StyledContentContainer = styled.div`
   width: 200px;
 `;
 
-const StyledFooterNote = styled(FooterNote)`
-  max-width: 280px;
-`;
-
 const StyledForm = styled.form`
   align-items: center;
   display: flex;
@@ -89,12 +85,8 @@ export const SignInUpForm = () => {
       return 'Continue';
     }
 
-    return signInUpMode === SignInUpMode.SignIn
-      ? 'Sign in'
-      : form.formState.isSubmitting
-        ? 'Creating workspace'
-        : 'Sign up';
-  }, [signInUpMode, signInUpStep, form.formState.isSubmitting]);
+    return signInUpMode === SignInUpMode.SignIn ? 'Sign in' : 'Sign up';
+  }, [signInUpMode, signInUpStep]);
 
   const title = useMemo(() => {
     if (signInUpMode === SignInUpMode.Invite) {
@@ -242,10 +234,10 @@ export const SignInUpForm = () => {
           Forgot your password?
         </ActionLink>
       ) : (
-        <StyledFooterNote>
+        <FooterNote>
           By using Twenty, you agree to the Terms of Service and Data Processing
           Agreement.
-        </StyledFooterNote>
+        </FooterNote>
       )}
     </>
   );