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/ui/input/button/components/MainButton.tsx

@@ -9,11 +9,14 @@ type Variant = 'primary' | 'secondary';
 type Props = {
   title: string;
   fullWidth?: boolean;
+  width?: number;
   variant?: Variant;
   soon?: boolean;
 } & React.ComponentProps<'button'>;
 
-const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
+const StyledButton = styled.button<
+  Pick<Props, 'fullWidth' | 'width' | 'variant'>
+>`
   align-items: center;
   background: ${({ theme, variant, disabled }) => {
     if (disabled) {
@@ -75,7 +78,8 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
   justify-content: center;
   outline: none;
   padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+  width: ${({ fullWidth, width }) =>
+    fullWidth ? '100%' : width ? `${width}px` : 'auto'};
   ${({ theme, variant }) => {
     switch (variant) {
       case 'secondary':
@@ -101,6 +105,7 @@ type MainButtonProps = Props & {
 export const MainButton = ({
   Icon,
   title,
+  width,
   fullWidth = false,
   variant = 'primary',
   type,
@@ -112,7 +117,7 @@ export const MainButton = ({
   return (
     <StyledButton
       className={className}
-      {...{ disabled, fullWidth, onClick, type, variant }}
+      {...{ disabled, fullWidth, width, onClick, type, variant }}
     >
       {Icon && <Icon size={theme.icon.size.sm} />}
       {title}

packages/twenty-front/src/modules/ui/input/button/components/__stories__/MainButton.stories.tsx

@@ -42,6 +42,10 @@ export const FullWidth: Story = {
   args: { fullWidth: true },
 };
 
+export const Width: Story = {
+  args: { width: 200 },
+};
+
 export const Secondary: Story = {
   args: { title: 'A secondary Button', variant: 'secondary' },
 };

packages/twenty-front/src/modules/ui/input/components/CardPicker.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { Radio } from '@/ui/input/components/Radio.tsx';
+const StyledSubscriptionCardContainer = styled.button`
+  background-color: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  display: flex;
+  padding: ${({ theme }) => theme.spacing(4)} ${({ theme }) => theme.spacing(3)};
+  position: relative;
+  width: 100%;
+  :hover {
+    cursor: pointer;
+    background: ${({ theme }) => theme.background.tertiary};
+  }
+`;
+
+const StyledRadioContainer = styled.div`
+  position: absolute;
+  right: ${({ theme }) => theme.spacing(2)};
+  top: ${({ theme }) => theme.spacing(2)};
+`;
+
+type CardPickerProps = {
+  children: React.ReactNode;
+  handleChange?: () => void;
+  checked?: boolean;
+};
+
+export const CardPicker = ({
+  children,
+  checked,
+  handleChange,
+}: CardPickerProps) => {
+  return (
+    <StyledSubscriptionCardContainer onClick={handleChange}>
+      <StyledRadioContainer>
+        <Radio checked={checked} />
+      </StyledRadioContainer>
+      {children}
+    </StyledSubscriptionCardContainer>
+  );
+};