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