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/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>
       )}
     </>
   );