feat: make billing better (#203)

apps/web/src/components/payments/UpgradeModal.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@unsend/ui/src/dialog";
+import { CheckCircle2 } from "lucide-react";
+import { useUpgradeModalStore } from "~/store/upgradeModalStore";
+import { PLAN_PERKS } from "~/lib/constants/payments";
+import { LimitReason } from "~/lib/constants/plans";
+import { UpgradeButton } from "./UpgradeButton";
+
+export const UpgradeModal = () => {
+  const {
+    isOpen,
+    reason,
+    action: { closeModal },
+  } = useUpgradeModalStore();
+
+  const basicPlanPerks = PLAN_PERKS.BASIC || [];
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && closeModal()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Upgrade to Basic Plan</DialogTitle>
+          <DialogDescription>
+            {(() => {
+              const messages: Record<LimitReason, string> = {
+                [LimitReason.DOMAIN]:
+                  "You've reached the domain limit for your current plan.",
+                [LimitReason.CONTACT_BOOK]:
+                  "You've reached the contact book limit for your current plan.",
+                [LimitReason.TEAM_MEMBER]:
+                  "You've reached the team member limit for your current plan.",
+                [LimitReason.EMAIL]:
+                  "You've reached the email sending limit for your current plan.",
+              };
+              return reason
+                ? `${messages[reason] ?? ""} Upgrade to unlock this feature and more.`
+                : "Unlock more features with our Basic plan.";
+            })()}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div>
+            <h4 className="font-medium mb-3">What you'll get:</h4>
+            <ul className="space-y-2">
+              {basicPlanPerks.map((perk, index) => (
+                <li key={index} className="flex items-start gap-2">
+                  <CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span className="text-sm">{perk}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <UpgradeButton />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};