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

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
+            <If condition={!isCustom} fallback={props.plan.label}>
-              primaryLineItem={lineItem}
+              <PlanCostDisplay
-              currencyCode={props.product.currency}
+                primaryLineItem={lineItem}
-              interval={interval}
+                currencyCode={props.product.currency}
-              alwaysDisplayMonthlyPrice={props.alwaysDisplayMonthlyPrice}
+                interval={interval}
-            />
+                alwaysDisplayMonthlyPrice={props.alwaysDisplayMonthlyPrice}
+              />
+            </If>
           </Price>
 
           <If condition={props.plan.name}>