From 3553422e429a7f816847b94503c5d2a7e70755e5 Mon Sep 17 00:00:00 2001
From: Giancarlo Buomprisco <giancarlopsk@gmail.com>
Date: Tue, 4 Feb 2025 06:27:27 +0700
Subject: [PATCH] Add support for custom pricing plans in PricingItem component
 (#138)

- Introduced `custom` flag to handle custom pricing plan display
- Conditionally render custom plan label when `isCustom` is true
- Updated TypeScript type for plan to include optional `custom` property
---
 .../gateway/src/components/pricing-table.tsx     | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 3ca196b65..85adcc331 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -132,6 +132,7 @@ function PricingItem(
       name?: string;
       href?: string;
       label?: string;
+      custom?: boolean;
     };
 
     CheckoutButton?: React.ComponentType<{
@@ -153,6 +154,7 @@ function PricingItem(
 ) {
   const highlighted = props.product.highlighted ?? false;
   const lineItem = props.primaryLineItem!;
+  const isCustom = props.plan.custom ?? false;
 
   // we exclude flat line items from the details since
   // it doesn't need further explanation
@@ -217,12 +219,14 @@ function PricingItem(
 
         <div className={'flex flex-col space-y-2'}>
           <Price isMonthlyPrice={props.alwaysDisplayMonthlyPrice}>
-            <PlanCostDisplay
-              primaryLineItem={lineItem}
-              currencyCode={props.product.currency}
-              interval={interval}
-              alwaysDisplayMonthlyPrice={props.alwaysDisplayMonthlyPrice}
-            />
+            <If condition={!isCustom} fallback={props.plan.label}>
+              <PlanCostDisplay
+                primaryLineItem={lineItem}
+                currencyCode={props.product.currency}
+                interval={interval}
+                alwaysDisplayMonthlyPrice={props.alwaysDisplayMonthlyPrice}
+              />
+            </If>
           </Price>
 
           <If condition={props.plan.name}>