fix flow

dubinc · Jan 26, 2025 · fa6a7ce · fa6a7ce
1 parent 81ee24b
commit fa6a7ce
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/payment-methods.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/payment-methods.tsx
@@ -3,15 +3,14 @@
 import usePaymentMethods from "@/lib/swr/use-payment-methods";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
-import ManageSubscriptionButton from "@/ui/workspaces/manage-subscription-button";
 import { Badge, Button, CreditCard } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { useState } from "react";
 import { Stripe } from "stripe";
 import { PaymentMethodTypesList } from "./payment-method-types";
 
 export default function PaymentMethods() {
-  const { stripeId, partnersEnabled } = useWorkspace();
+  const { slug, stripeId, partnersEnabled } = useWorkspace();
   const { paymentMethods } = usePaymentMethods();
 
   const regularPaymentMethods = paymentMethods?.filter(
@@ -22,6 +21,22 @@ export default function PaymentMethods() {
     (pm) => pm.type === "us_bank_account",
   );
 
+  const [isLoading, setIsLoading] = useState(false);
+
+  const managePaymentMethods = async (method?: string) => {
+    setIsLoading(true);
+    const { url } = await fetch(
+      `/api/workspaces/${slug}/billing/payment-methods`,
+      {
+        method: "POST",
+        body: JSON.stringify({ method }),
+      },
+    ).then((res) => res.json());
+
+    window.open(url, "_blank");
+    setIsLoading(false);
+  };
+
   return (
     <div className="rounded-lg border border-neutral-200 bg-white">
       <div className="flex flex-col items-start justify-between gap-y-4 p-6 md:flex-row md:items-center md:p-8">
@@ -32,7 +47,13 @@ export default function PaymentMethods() {
           </p>
         </div>
         {stripeId && (
-          <ManageSubscriptionButton text="Manage" className="w-fit" />
+          <Button
+            variant="secondary"
+            text="Manage"
+            className="h-9 w-fit"
+            onClick={() => managePaymentMethods()}
+            loading={isLoading}
+          />
         )}
       </div>
       <div className="grid gap-4 border-t border-neutral-200 p-6">
@@ -143,7 +164,7 @@ const PaymentMethodCard = ({
       {!paymentMethod && (
         <Button
           variant="primary"
-          className="h-8 w-fit"
+          className="h-9 w-fit"
           text="Connect"
           onClick={() => managePaymentMethods(type)}
           loading={isLoading}

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/plan-usage.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/plan-usage.tsx
@@ -95,7 +95,7 @@ export default function PlanUsage() {
             href={`/${slug}/settings/billing/invoices`}
             className={cn(
               buttonVariants({ variant: "secondary" }),
-              "flex h-8 w-full items-center justify-center rounded-md border px-4 text-sm",
+              "flex h-9 w-full items-center justify-center rounded-md border px-4 text-sm",
             )}
           >
             View invoices
@@ -165,7 +165,7 @@ export default function PlanUsage() {
             href={`/${slug}/upgrade`}
             className={cn(
               buttonVariants(),
-              "flex h-8 w-fit items-center justify-center rounded-md border px-3 text-sm",
+              "flex h-9 w-fit items-center justify-center rounded-md border px-3 text-sm",
             )}
           >
             Upgrade to {nextPlan.name}