Add hidden product option to billing components (#136)

- Introduced `hidden` field in product schema to control product visibility
- Updated PlanPicker and PricingTable to filter out hidden products
- Ensures hidden products are not displayed to users

packages/billing/core/src/create-billing-schema.ts

@@ -252,6 +252,11 @@ const ProductSchema = z
         description: 'Highlight this product. Displayed to the user.',
       })
       .optional(),
+    hidden: z
+      .boolean({
+        description: 'Hide this product from being displayed to users.',
+      })
+      .optional(),
     plans: z.array(PlanSchema),
   })
   .refine((data) => data.plans.length > 0, {

packages/billing/gateway/src/components/plan-picker.tsx

@@ -108,6 +108,11 @@ export function PlanPicker(
   const isRecurringPlan =
     selectedPlan?.paymentType === 'recurring' || !selectedPlan;
 
+  // Always filter out hidden products
+  const visibleProducts = props.config.products.filter(
+    (product) => !product.hidden,
+  );
+
   return (
     <Form {...form}>
       <div
@@ -211,7 +216,7 @@ export function PlanPicker(
 
                 <FormControl>
                   <RadioGroup value={field.value} name={field.name}>
-                    {props.config.products.map((product) => {
+                    {visibleProducts.map((product) => {
                       const plan = product.plans.find((item) => {
                         if (item.paymentType === 'one-time') {
                           return true;

packages/billing/gateway/src/components/pricing-table.tsx

@@ -54,6 +54,9 @@ export function PricingTable({
   const intervals = getPlanIntervals(config).filter(Boolean) as Interval[];
   const [interval, setInterval] = useState(intervals[0]!);
 
+  // Always filter out hidden products
+  const visibleProducts = config.products.filter((product) => !product.hidden);
+
   return (
     <div className={'flex flex-col space-y-8 xl:space-y-12'}>
       <div className={'flex justify-center'}>
@@ -72,7 +75,7 @@ export function PricingTable({
           ' justify-center lg:flex-row lg:space-x-4'
         }
       >
-        {config.products.map((product) => {
+        {visibleProducts.map((product) => {
           const plan = product.plans.find((plan) => {
             if (plan.paymentType === 'recurring') {
               return plan.interval === interval;