43 add billing portal link (#4318)

* Add create billing portal session endpoint

* Rename checkout to checkoutSession

* Add billig portal query in twenty-front

* Add billing menu item

* WIP: add menu page

* Code review returns

* Rename request files

* Unwip: add menu page

* Add billing cover image

* Fix icon imports

* Rename parameter

* Add feature flag soon pill

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

@@ -0,0 +1,24 @@
+import { IconCreditCard } from '@/ui/display/icon';
+import { Button } from '@/ui/input/button/components/Button';
+import { useBillingPortalSessionQuery } from '~/generated/graphql.tsx';
+export const ManageYourSubscription = () => {
+  const { data, loading } = useBillingPortalSessionQuery({
+    variables: {
+      returnUrlPath: '/settings/billing',
+    },
+  });
+  const handleButtonClick = () => {
+    if (data) {
+      window.location.replace(data.billingPortalSession.url);
+    }
+  };
+  return (
+    <Button
+      Icon={IconCreditCard}
+      title="View billing details"
+      variant="secondary"
+      onClick={handleButtonClick}
+      disabled={loading}
+    />
+  );
+};

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

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+import DarkCoverImage from '@/billing/assets/cover-dark.png';
+import LightCoverImage from '@/billing/assets/cover-light.png';
+
+const StyledCoverImageContainer = styled.div`
+  align-items: center;
+  background-image: ${({ theme }) =>
+    theme.name === 'light'
+      ? `url('${LightCoverImage.toString()}')`
+      : `url('${DarkCoverImage.toString()}')`};
+  background-size: contain;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+  display: flex;
+  height: 162px;
+  justify-content: center;
+  position: relative;
+`;
+export const SettingsBillingCoverImage = () => {
+  return <StyledCoverImageContainer />;
+};

packages/twenty-front/src/modules/billing/graphql/billingPortalSession.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const BILLING_PORTAL_SESSION = gql`
+  query BillingPortalSession($returnUrlPath: String) {
+    billingPortalSession(returnUrlPath: $returnUrlPath) {
+      url
+    }
+  }
+`;

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -11,6 +11,7 @@ import {
   IconCalendarEvent,
   IconCode,
   IconColorSwatch,
+  IconCurrencyDollar,
   IconDoorEnter,
   IconHierarchy2,
   IconMail,
@@ -34,6 +35,7 @@ export const SettingsNavigationDrawerItems = () => {
   }, [signOut, navigate]);
 
   const isCalendarEnabled = useIsFeatureEnabled('IS_CALENDAR_ENABLED');
+  const isSelfBillingEnabled = useIsFeatureEnabled('IS_SELF_BILLING_ENABLED');
 
   return (
     <>
@@ -86,6 +88,12 @@ export const SettingsNavigationDrawerItems = () => {
           path={SettingsPath.WorkspaceMembersPage}
           Icon={IconUsers}
         />
+        <SettingsNavigationDrawerItem
+          label="Billing"
+          path={SettingsPath.Billing}
+          Icon={IconCurrencyDollar}
+          soon={!isSelfBillingEnabled}
+        />
         <SettingsNavigationDrawerItem
           label="Data model"
           path={SettingsPath.Objects}

packages/twenty-front/src/modules/types/SettingsPath.ts

@@ -7,6 +7,7 @@ export enum SettingsPath {
   AccountsCalendarsSettings = 'accounts/calendars/:accountUuid',
   AccountsEmails = 'accounts/emails',
   AccountsEmailsInboxSettings = 'accounts/emails/:accountUuid',
+  Billing = 'billing',
   Objects = 'objects',
   ObjectDetail = 'objects/:objectSlug',
   ObjectEdit = 'objects/:objectSlug/edit',

packages/twenty-front/src/modules/ui/display/icon/index.ts

@@ -42,6 +42,7 @@ export {
   IconColorSwatch,
   IconMessageCircle as IconComment,
   IconCopy,
+  IconCreditCard,
   IconCurrencyDollar,
   IconCurrencyEuro,
   IconCurrencyFrank,