From 2565b8bcb9188b4e411f7846a643203d7798329b Mon Sep 17 00:00:00 2001
From: gbuomprisco <giancarlopsk@gmail.com>
Date: Mon, 5 Aug 2024 19:42:47 +0200
Subject: [PATCH] Add conditional display for monthly price in Price component

This commit introduces a prop `isMonthlyPrice` to the `Price` component, allowing for dynamic control over the display of the monthly price label. By default, it shows the monthly price, but this behavior can now be customized based on the `alwaysDisplayMonthlyPrice` prop passed down to the `Price` component.
---
 .../gateway/src/components/pricing-table.tsx    | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 1b7132698..69e4edae5 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -217,7 +217,7 @@ function PricingItem(
         <Separator />
 
         <div className={'flex flex-col space-y-2'}>
-          <Price>
+          <Price isMonthlyPrice={props.alwaysDisplayMonthlyPrice}>
             <LineItemPrice
               plan={props.plan}
               product={props.product}
@@ -341,7 +341,12 @@ function FeaturesList(
   );
 }
 
-function Price({ children }: React.PropsWithChildren) {
+function Price({
+  children,
+  isMonthlyPrice = true,
+}: React.PropsWithChildren<{
+  isMonthlyPrice?: boolean;
+}>) {
   return (
     <div
       className={`animate-in slide-in-from-left-4 fade-in flex items-end gap-2 duration-500`}
@@ -354,9 +359,11 @@ function Price({ children }: React.PropsWithChildren) {
         {children}
       </span>
 
-      <span className={'text-muted-foreground text-sm leading-loose'}>
-        <Trans i18nKey={'billing:perMonth'} />
-      </span>
+      <If condition={isMonthlyPrice}>
+        <span className={'text-muted-foreground text-sm leading-loose'}>
+          <Trans i18nKey={'billing:perMonth'} />
+        </span>
+      </If>
     </div>
   );
 }