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