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/pages/auth/PlanRequired.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
@@ -6,13 +7,12 @@ import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
 import { billingState } from '@/client-config/states/billingState';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { MainButton } from '@/ui/input/button/components/MainButton';
+import { MainButton } from '@/ui/input/button/components/MainButton.tsx';
 import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 const StyledButtonContainer = styled.div`
   margin-top: ${({ theme }) => theme.spacing(8)};
-  width: 200px;
 `;
 
 export const PlanRequired = () => {
@@ -36,7 +36,11 @@ export const PlanRequired = () => {
         Please select a subscription plan before proceeding to sign in.
       </SubTitle>
       <StyledButtonContainer>
-        <MainButton title="Get started" onClick={handleButtonClick} fullWidth />
+        <MainButton
+          title="Get started"
+          onClick={handleButtonClick}
+          width={200}
+        />
       </StyledButtonContainer>
     </>
   );