Add Coupon Card in Billing Page (#4895)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `SettingsBillingPage` component by adding a `teamId` prop to manage billing settings for different teams. It also introduces a new `CouponCard` component that allows users to apply coupon codes with relevant feedback.

### Detailed summary
- Updated `Page` component to pass `teamId` to `SettingsBillingPage`.
- Modified `SettingsBillingPage` to accept `teamId` as a prop.
- Adjusted `Billing` component to use `teamId` in its rendering.
- Introduced `CouponCard` component for applying coupon codes.
- Implemented logic in `CouponCard` to handle coupon submissions and display feedback based on response status.
- Updated `Billing` component to include `CouponCard`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/BillingSettingsPage.tsx

@@ -4,7 +4,9 @@ import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { AccountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { Billing } from "components/settings/Account/Billing";
 
-export const SettingsBillingPage = () => {
+export const SettingsBillingPage = (props: {
+  teamId: string | undefined;
+}) => {
   const meQuery = useAccount({
     refetchInterval: (query) =>
       [
@@ -25,5 +27,5 @@ export const SettingsBillingPage = () => {
     );
   }
 
-  return <Billing account={account} />;
+  return <Billing account={account} teamId={props.teamId} />;
 };

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/page.tsx

@@ -1,10 +1,22 @@
+import { getTeamBySlug } from "@/api/team";
 import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import { notFound } from "next/navigation";
 import { SettingsBillingPage } from "./BillingSettingsPage";
 
-export default function Page() {
+export default async function Page(props: {
+  params: {
+    team_slug: string;
+  };
+}) {
+  const team = await getTeamBySlug(props.params.team_slug);
+
+  if (!team) {
+    notFound();
+  }
+
   return (
     <ChakraProviderSetup>
-      <SettingsBillingPage />
+      <SettingsBillingPage teamId={team.id} />
     </ChakraProviderSetup>
   );
 }

apps/dashboard/src/components/settings/Account/Billing/CouponCard.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toaster } from "sonner";
+import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
+import { CouponCardUI } from "./CouponCard";
+
+const meta = {
+  title: "billing/CouponCard",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function statusStub(status: number) {
+  return async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    return status;
+  };
+}
+
+function Story() {
+  return (
+    <div className="container flex max-w-[1100px] flex-col gap-10 py-10">
+      <BadgeContainer label="Success - 200">
+        <CouponCardUI submit={statusStub(200)} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Invalid - 400">
+        <CouponCardUI submit={statusStub(400)} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Not Authorized - 401">
+        <CouponCardUI submit={statusStub(401)} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Already applied - 409">
+        <CouponCardUI submit={statusStub(409)} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Rate Limited - 429">
+        <CouponCardUI submit={statusStub(429)} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Other - 500">
+        <CouponCardUI submit={statusStub(500)} />
+      </BadgeContainer>
+      <Toaster richColors />
+    </div>
+  );
+}

apps/dashboard/src/components/settings/Account/Billing/CouponCard.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+export function CouponCard(props: {
+  teamId: string | undefined;
+}) {
+  return (
+    <CouponCardUI
+      submit={async (promoCode: string) => {
+        const res = await fetch("/api/server-proxy/api/v1/coupons/redeem", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            promoCode,
+            teamId: props.teamId,
+          }),
+        });
+
+        return res.status;
+      }}
+    />
+  );
+}
+
+const couponFormSchema = z.object({
+  promoCode: z.string().min(1, "Coupon code is required"),
+});
+
+export function CouponCardUI(props: {
+  submit: (promoCode: string) => Promise<number>;
+}) {
+  const form = useForm<z.infer<typeof couponFormSchema>>({
+    resolver: zodResolver(couponFormSchema),
+    defaultValues: {
+      promoCode: "",
+    },
+  });
+
+  const applyCoupon = useMutation({
+    mutationFn: (promoCode: string) => props.submit(promoCode),
+  });
+
+  async function onSubmit(values: z.infer<typeof couponFormSchema>) {
+    try {
+      const status = await applyCoupon.mutateAsync(values.promoCode);
+      switch (status) {
+        case 200: {
+          toast.success("Coupon applied successfully");
+          break;
+        }
+        case 400: {
+          toast.error("Coupon code is invalid");
+          break;
+        }
+        case 401: {
+          toast.error("You are not authorized to apply coupons", {
+            description: "Login to dashboard and try again",
+          });
+          break;
+        }
+        case 409: {
+          toast.error("Coupon already applied");
+          break;
+        }
+        case 429: {
+          toast.error("Too many coupons applied in a short period", {
+            description: "Please try again after some time",
+          });
+          break;
+        }
+        default: {
+          toast.error("Failed to apply coupon");
+        }
+      }
+    } catch {
+      toast.error("Failed to apply coupon");
+    }
+
+    form.reset();
+  }
+
+  return (
+    <section className="relative rounded-lg border border-border bg-muted/50">
+      {/* header */}
+      <div className="px-4 pt-6 lg:px-6">
+        <h3 className="mb-1 font-semibold text-xl tracking-tight">
+          Apply Coupon
+        </h3>
+        <p className="text-muted-foreground text-sm">
+          Enter your coupon code to apply discounts or free trials on thirdweb
+          products
+        </p>
+      </div>
+
+      <div className="h-5" />
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          {/* Body */}
+          <div className="px-4 lg:px-6">
+            <FormField
+              control={form.control}
+              name="promoCode"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Coupon Code</FormLabel>
+                  <FormControl>
+                    <Input {...field} className="lg:max-w-[450px]" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className="h-7" />
+
+          {/* Footer */}
+          <div className="flex justify-end border-border border-t px-4 py-4 lg:px-6">
+            <Button type="submit" className="gap-2">
+              {applyCoupon.isPending && <Spinner className="size-4" />}
+              Apply Coupon
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </section>
+  );
+}

apps/dashboard/src/components/settings/Account/Billing/index.tsx

@@ -18,16 +18,18 @@ import { FiExternalLink } from "react-icons/fi";
 import { Button, Heading, Text, TrackedLink } from "tw-components";
 import { PLANS } from "utils/pricing";
 import { LazyOnboardingBilling } from "../../../onboarding/LazyOnboardingBilling";
+import { CouponCard } from "./CouponCard";
 import { BillingDowngradeDialog } from "./DowngradeDialog";
 import { BillingHeader } from "./Header";
 import { BillingPlanCard } from "./PlanCard";
 import { BillingPricing } from "./Pricing";
 
 interface BillingProps {
   account: Account;
+  teamId: string | undefined;
 }
 
-export const Billing: React.FC<BillingProps> = ({ account }) => {
+export const Billing: React.FC<BillingProps> = ({ account, teamId }) => {
   const updatePlanMutation = useUpdateAccountPlan(
     account?.plan === AccountPlan.Free,
   );
@@ -301,6 +303,8 @@ export const Billing: React.FC<BillingProps> = ({ account }) => {
           loading={updatePlanMutation.isPending}
         />
       )}
+
+      <CouponCard teamId={teamId} />
     </Flex>
   );
 };

apps/dashboard/src/pages/dashboard/settings/billing.tsx

@@ -5,7 +5,7 @@ import type { ThirdwebNextPage } from "utils/types";
 import { SettingsBillingPage } from "../../../app/team/[team_slug]/(team)/~/settings/billing/BillingSettingsPage";
 
 const Page: ThirdwebNextPage = () => {
-  return <SettingsBillingPage />;
+  return <SettingsBillingPage teamId={undefined} />;
 };
 
 Page.pageId = PageId.SettingsUsage;