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

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>
+      <StyledPriceSpan>{`$${pricePerSeat}`}</StyledPriceSpan>
-      <StyledPriceUnitSpan>{`seat / ${type.toLocaleLowerCase()}`}</StyledPriceUnitSpan>
+      <StyledPriceUnitSpan>{priceUnit}</StyledPriceUnitSpan>
     </>
   );
 };