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/billing/components/SubscriptionBenefit.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconCheck } from '@/ui/display/icon';
+
+const StyledBenefitContainer = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledCheckContainer = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.tertiary};
+  border-radius: 50%;
+  display: flex;
+  height: 16px;
+  justify-content: center;
+  width: 16px;
+`;
+type SubscriptionBenefitProps = {
+  children: React.ReactNode;
+};
+export const SubscriptionBenefit = ({ children }: SubscriptionBenefitProps) => {
+  const theme = useTheme();
+  return (
+    <StyledBenefitContainer>
+      <StyledCheckContainer>
+        <IconCheck color={theme.grayScale.gray50} size={14} />
+      </StyledCheckContainer>
+      {children}
+    </StyledBenefitContainer>
+  );
+};

packages/twenty-front/src/modules/billing/components/SubscriptionCard.tsx

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled';
+
+import { SubscriptionCardPrice } from '@/billing/components/SubscriptionCardPrice.tsx';
+import { capitalize } from '~/utils/string/capitalize.ts';
+
+type SubscriptionCardProps = {
+  type?: string;
+  price: number;
+  info: string;
+};
+
+const StyledSubscriptionCardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledTypeContainer = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  display: flex;
+`;
+
+const StyledInfoContainer = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  display: flex;
+`;
+
+export const SubscriptionCard = ({
+  type,
+  price,
+  info,
+}: SubscriptionCardProps) => {
+  return (
+    <StyledSubscriptionCardContainer>
+      <StyledTypeContainer>{capitalize(type || '')}</StyledTypeContainer>
+      <SubscriptionCardPrice price={price} />
+      <StyledInfoContainer>{info}</StyledInfoContainer>
+    </StyledSubscriptionCardContainer>
+  );
+};

packages/twenty-front/src/modules/billing/components/SubscriptionCardPrice.tsx

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+
+type SubscriptionCardPriceProps = {
+  price: number;
+};
+const StyledSubscriptionCardPriceContainer = styled.div`
+  align-items: baseline;
+  display: flex;
+  gap: ${({ theme }) => theme.betweenSiblingsGap};
+  margin: ${({ theme }) => theme.spacing(1)} 0
+    ${({ theme }) => theme.spacing(2)};
+`;
+const StyledPriceSpan = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.xl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+const StyledSeatSpan = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+export const SubscriptionCardPrice = ({
+  price,
+}: SubscriptionCardPriceProps) => {
+  return (
+    <StyledSubscriptionCardPriceContainer>
+      <StyledPriceSpan>${price}</StyledPriceSpan>
+      <StyledSeatSpan>/</StyledSeatSpan>
+      <StyledSeatSpan>seat</StyledSeatSpan>
+    </StyledSubscriptionCardPriceContainer>
+  );
+};