fix: pricing card

Author: G3root

src/components/billing/pricing-modal/index.tsx

@@ -90,6 +90,23 @@ function Plans({ products, subscription }: PricingProps) {
       </div>
 
       <section className="flex flex-col sm:flex-row sm:flex-wrap gap-8 pt-8">
+        <PricingCard
+          title="Free"
+          description=""
+          price="$0"
+          interval="month"
+          subscribedUnitAmount={subscription?.price.unitAmount}
+          unitAmount={0}
+          isSubmitting={isSubmitting}
+          {...(subscription && {
+            handleClick: () => {
+              return handleBillingPortal({
+                type: "cancel",
+                subscription: subscription.id,
+              });
+            },
+          })}
+        />
         {products.map((product) => {
           const price = product?.prices?.find(
             (price) => price.interval === billingInterval,

src/components/billing/pricing-modal/pricing-card.tsx

@@ -18,7 +18,7 @@ interface PricingCardProps {
   subscribedUnitAmount?: bigint | null;
   unitAmount: number;
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  handleClick: () => Promise<any>;
+  handleClick?: () => Promise<any>;
   isSubmitting: boolean;
 }
 
@@ -52,9 +52,11 @@ export function PricingCard({
         <CardTitle className="text-lg">{title}</CardTitle>
         <div className="flex gap-0.5">
           <h3 className="text-3xl font-bold">{price}</h3>
-          <span className="flex flex-col justify-end text-sm mb-1">
-            /{humanizedInterval[interval]}
-          </span>
+          {unitAmount !== 0 && (
+            <span className="flex flex-col justify-end text-sm mb-1">
+              /{humanizedInterval[interval]}
+            </span>
+          )}
         </div>
         <CardDescription>{description}</CardDescription>
       </CardHeader>
@@ -63,20 +65,25 @@ export function PricingCard({
           className={cn(!active && "bg-teal-500 hover:bg-teal-500/80")}
           {...(active && { variant: "destructive" })}
           onClick={async () => {
-            setIsLoading(true);
-            await handleClick();
-            setIsLoading(false);
+            if (handleClick) {
+              setIsLoading(true);
+              await handleClick();
+              setIsLoading(false);
+            }
           }}
           loading={isLoading}
           {...(!isLoading && { disabled: isSubmitting })}
+          {...(unitAmount === 0 && !subscribedUnitAmount && { disabled: true })}
         >
           {subscribedUnitAmount
             ? unitAmount < subscribedUnitAmount
               ? "Downgrade Plan"
               : unitAmount > subscribedUnitAmount
                 ? "Upgrade Plan"
                 : "Cancel Current Plan"
-            : "Subscribe"}
+            : !subscribedUnitAmount && unitAmount === 0
+              ? "Active plan"
+              : "Subscribe"}
         </Button>
       </CardFooter>
     </Card>