fix: loading state in card

Author: G3root

src/components/billing/pricing/index.tsx

@@ -36,37 +36,35 @@ function Plans({ products, subscription }: PricingProps) {
   const [billingInterval, setBillingInterval] =
     useState<PricingPlanInterval>("month");
 
-  const [priceIdLoading, setPriceIdLoading] = useState<string>();
-
-  const { mutateAsync: checkoutWithStripe } = api.billing.checkout.useMutation({
-    onSuccess: async ({ stripeSessionId }) => {
-      const stripe = await getStripeClient();
-      await stripe?.redirectToCheckout({ sessionId: stripeSessionId });
-    },
-  });
-
-  const { mutateAsync: stripePortal } = api.billing.stripePortal.useMutation({
-    onSuccess: ({ url }) => {
-      router.push(url);
-    },
-  });
+  const { mutateAsync: checkoutWithStripe, isLoading: checkoutLoading } =
+    api.billing.checkout.useMutation({
+      onSuccess: async ({ stripeSessionId }) => {
+        const stripe = await getStripeClient();
+        await stripe?.redirectToCheckout({ sessionId: stripeSessionId });
+      },
+    });
+
+  const { mutateAsync: stripePortal, isLoading: stripePortalLoading } =
+    api.billing.stripePortal.useMutation({
+      onSuccess: ({ url }) => {
+        router.push(url);
+      },
+    });
 
   const handleBilling = (interval: PricingPlanInterval) => {
     setBillingInterval(interval);
   };
 
   const handleStripeCheckout = async (price: handleStripeCheckoutOptions) => {
-    setPriceIdLoading(price.priceId);
-
     await checkoutWithStripe(price);
-
-    setPriceIdLoading(undefined);
   };
 
   const handleBillingPortal = async () => {
     await stripePortal();
   };
 
+  const loading = checkoutLoading || stripePortalLoading;
+
   return (
     <div>
       <div className="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground">
@@ -101,9 +99,9 @@ function Plans({ products, subscription }: PricingProps) {
             minimumFractionDigits: 0,
           }).format(unitAmount / 100);
 
+          const active = subscription?.priceId === price.id;
           return (
             <PricingCard
-              active={subscription?.priceId === price.id}
               key={product.id}
               title={product.name}
               description={product.description}
@@ -119,9 +117,10 @@ function Plans({ products, subscription }: PricingProps) {
                   priceType: price.type,
                 });
               }}
-              loading={priceIdLoading === price.id}
+              loading={loading}
               subscribedUnitAmount={subscription?.price.unitAmount}
               unitAmount={unitAmount}
+              variant={active ? "default" : "secondary"}
             />
           );
         })}

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

@@ -15,7 +15,6 @@ interface PricingCardProps extends Omit<ButtonProps, "children"> {
   price: string;
   interval: PricingPlanInterval;
   subscribed: boolean;
-  active: boolean;
   subscribedUnitAmount?: bigint | null;
   unitAmount: number;
 }
@@ -33,7 +32,6 @@ export function PricingCard({
   interval,
   price,
   subscribed,
-  active,
   subscribedUnitAmount: subscribedUnitAmount_,
   unitAmount,
   ...rest
@@ -56,10 +54,10 @@ export function PricingCard({
       <CardFooter>
         <Button {...rest}>
           {subscribedUnitAmount
-            ? subscribedUnitAmount < unitAmount
-              ? "Upgrade Plan"
-              : subscribedUnitAmount > unitAmount
-                ? "Downgrade Plan"
+            ? unitAmount < subscribedUnitAmount
+              ? "Downgrade Plan"
+              : unitAmount > subscribedUnitAmount
+                ? "Upgrade Plan"
                 : "Manage Current Plan"
             : "Subscribe"}
         </Button>