Show active coupon on billing page (#4917)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring and enhancing coupon-related components in the `Billing` section of the dashboard. It involves renaming components, improving props handling, and adding new functionalities for coupon application and management.

### Detailed summary
- Renamed `CouponCard` to `CouponSection` in `Billing/index.tsx`.
- Updated `SettingsCard` to use dynamic class names for buttons.
- Added new stories for `CouponDetailsCardUI` and `ApplyCouponCardUI`.
- Implemented optimistic updates for coupon application and deletion.
- Enhanced `CouponCard` to `ApplyCouponCard` with new props for coupon application.
- Introduced `CouponDetailsCardUI` for displaying active coupon details.
- Improved error handling and loading states in coupon-related components.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx

@@ -11,9 +11,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { cn } from "../../lib/utils";
 
 export function DangerSettingCard(props: {
   title: string;
+  className?: string;
+  footerClassName?: string;
   description: string;
   buttonLabel: string;
   buttonOnClick: () => void;
@@ -22,18 +25,31 @@ export function DangerSettingCard(props: {
     title: string;
     description: string;
   };
+  children?: React.ReactNode;
 }) {
   return (
-    <div className="overflow-hidden rounded-lg border border-red-500/70">
-      <div className="bg-muted/50 px-4 py-6 lg:px-6">
+    <div
+      className={cn(
+        "overflow-hidden rounded-lg border border-red-500/70",
+        props.className,
+      )}
+    >
+      <div className="px-4 py-6 lg:px-6">
         <h3 className="font-semibold text-xl tracking-tight">{props.title}</h3>
 
         <p className="mt-1.5 mb-4 text-foreground text-sm">
           {props.description}
         </p>
+
+        {props.children}
       </div>
 
-      <div className="flex justify-end border-red-500/70 border-t bg-red-100 px-4 py-4 lg:px-6 dark:bg-red-500/20">
+      <div
+        className={cn(
+          "flex justify-end border-red-500/70 border-t bg-red-100 px-4 py-4 lg:px-6 dark:bg-red-500/20",
+          props.footerClassName,
+        )}
+      >
         <Dialog>
           <DialogTrigger asChild>
             <Button
@@ -46,7 +62,10 @@ export function DangerSettingCard(props: {
             </Button>
           </DialogTrigger>
 
-          <DialogContent>
+          <DialogContent
+            className="z-[10001]"
+            dialogOverlayClassName="z-[10000]"
+          >
             <DialogHeader className="pr-10">
               <DialogTitle className="leading-snug">
                 {props.confirmationDialog.title}

apps/dashboard/src/@/components/blocks/SettingsCard.tsx

@@ -17,6 +17,15 @@ export function SettingsCard(
       disabled: boolean;
       isPending: boolean;
       type?: "submit";
+      variant?:
+        | "ghost"
+        | "default"
+        | "primary"
+        | "destructive"
+        | "outline"
+        | "secondary";
+      className?: string;
+      label?: string;
     };
   }>,
 ) {
@@ -58,14 +67,15 @@ export function SettingsCard(
         {props.saveButton && !props.noPermissionText && (
           <Button
             size="sm"
-            className="gap-2"
+            className={cn("gap-2", props.saveButton.className)}
             onClick={props.saveButton.onClick}
             disabled={props.saveButton.disabled || props.saveButton.isPending}
-            variant="outline"
+            variant={props.saveButton.variant || "outline"}
             type={props.saveButton.type}
           >
             {props.saveButton.isPending && <Spinner className="size-3" />}
-            {props.saveButton.isPending ? "Saving" : "Save"}
+            {props.saveButton.label ||
+              (props.saveButton.isPending ? "Saving" : "Save")}
           </Button>
         )}
       </div>

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

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Toaster } from "sonner";
 import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
-import { CouponCardUI } from "./CouponCard";
+import { type ActiveCouponResponse, ApplyCouponCardUI } from "./CouponCard";
 
 const meta = {
-  title: "billing/CouponCard",
+  title: "billing/Coupons/ApplyCoupon",
   component: Story,
   parameters: {
     nextjs: {
@@ -30,35 +30,70 @@ export const Mobile: Story = {
 function statusStub(status: number) {
   return async () => {
     await new Promise((resolve) => setTimeout(resolve, 1000));
-    return status;
+    const data: ActiveCouponResponse | null =
+      status === 200
+        ? {
+            id: "xyz",
+            start: 1727992716,
+            end: 1759528716,
+            coupon: {
+              id: "XYZTEST",
+              name: "TEST COUPON",
+              duration: "repeating",
+              duration_in_months: 12,
+            },
+          }
+        : null;
+    return {
+      status,
+      data,
+    };
   };
 }
 
 function Story() {
   return (
     <div className="container flex max-w-[1100px] flex-col gap-10 py-10">
       <BadgeContainer label="Success - 200">
-        <CouponCardUI submit={statusStub(200)} />
+        <ApplyCouponCardUI
+          submit={statusStub(200)}
+          onCouponApplied={undefined}
+        />
       </BadgeContainer>
 
       <BadgeContainer label="Invalid - 400">
-        <CouponCardUI submit={statusStub(400)} />
+        <ApplyCouponCardUI
+          submit={statusStub(400)}
+          onCouponApplied={undefined}
+        />
       </BadgeContainer>
 
       <BadgeContainer label="Not Authorized - 401">
-        <CouponCardUI submit={statusStub(401)} />
+        <ApplyCouponCardUI
+          submit={statusStub(401)}
+          onCouponApplied={undefined}
+        />
       </BadgeContainer>
 
       <BadgeContainer label="Already applied - 409">
-        <CouponCardUI submit={statusStub(409)} />
+        <ApplyCouponCardUI
+          submit={statusStub(409)}
+          onCouponApplied={undefined}
+        />
       </BadgeContainer>
 
       <BadgeContainer label="Rate Limited - 429">
-        <CouponCardUI submit={statusStub(429)} />
+        <ApplyCouponCardUI
+          submit={statusStub(429)}
+          onCouponApplied={undefined}
+        />
       </BadgeContainer>
 
       <BadgeContainer label="Other - 500">
-        <CouponCardUI submit={statusStub(500)} />
+        <ApplyCouponCardUI
+          submit={statusStub(500)}
+          onCouponApplied={undefined}
+        />
       </BadgeContainer>
       <Toaster richColors />
     </div>