From 5a9622ee8bf79f1d0dc771ad1f398e3494ce6703 Mon Sep 17 00:00:00 2001
From: Etienne <45695613+etiennejouan@users.noreply.github.com>
Date: Mon, 16 Jun 2025 14:25:50 +0200
Subject: [PATCH] update billing prices display (#12622)

<img width="410" alt="Screenshot 2025-06-16 at 11 56 05"
src="https://github.com/user-attachments/assets/ffddf6e7-d9b6-4d18-9c0b-fcdc9f9e2632"
/>


closes https://github.com/twentyhq/core-team-issues/issues/1012
---
 .../billing/components/SubscriptionPrice.tsx  | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/billing/components/SubscriptionPrice.tsx b/packages/twenty-front/src/modules/billing/components/SubscriptionPrice.tsx
index 206c9b768..c359e8dd6 100644
--- a/packages/twenty-front/src/modules/billing/components/SubscriptionPrice.tsx
+++ b/packages/twenty-front/src/modules/billing/components/SubscriptionPrice.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
 import { SubscriptionInterval } from '~/generated-metadata/graphql';
 
 type SubscriptionPriceProps = {
@@ -20,10 +21,26 @@ const StyledPriceUnitSpan = styled.span`
 `;
 
 export const SubscriptionPrice = ({ type, price }: SubscriptionPriceProps) => {
+  const { t } = useLingui();
+  const pricePerSeat =
+    type === SubscriptionInterval.Year ? (price / 12).toFixed(2) : price;
+
+  let priceUnit = '';
+  switch (type) {
+    case SubscriptionInterval.Month:
+      priceUnit = t`seat / month`;
+      break;
+    case SubscriptionInterval.Year:
+      priceUnit = t`seat / month - billed yearly`;
+      break;
+    default:
+      priceUnit = `seat / ${type.toLocaleLowerCase()}`;
+  }
+
   return (
     <>
-      <StyledPriceSpan>{`$${price}`}</StyledPriceSpan>
-      <StyledPriceUnitSpan>{`seat / ${type.toLocaleLowerCase()}`}</StyledPriceUnitSpan>
+      <StyledPriceSpan>{`$${pricePerSeat}`}</StyledPriceSpan>
+      <StyledPriceUnitSpan>{priceUnit}</StyledPriceUnitSpan>
     </>
   );
 };