Initial Commit

components/modals/pro-modal.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import Image from "next/image";
+import { toast } from "sonner";
+
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { useProModal } from "@/hooks/use-pro-modal";
+import { Button } from "@/components/ui/button";
+import { useAction } from "@/hooks/use-action";
+import { stripeRedirect } from "@/actions/stripe-redirect";
+
+export const ProModal = () => {
+  const proModal = useProModal();
+
+  const { execute, isLoading } = useAction(stripeRedirect, {
+    onSuccess: (data) => {
+      window.location.href = data;
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  const onClick = () => {
+    execute({});
+  };
+
+  return (
+    <Dialog open={proModal.isOpen} onOpenChange={proModal.onClose}>
+      <DialogContent className="max-w-md p-0 overflow-hidden">
+        <div className="aspect-video relative flex items-center justify-center">
+          <Image src="/hero.svg" alt="hero" className="object-cover" fill />
+        </div>
+        <div className="text-neutral-700 mx-auto space-y-6 p-6">
+          <h1 className="font-semibold text-xl">Upgrade to Tasko Pro Today!</h1>
+          <p className="text-xs font-semibold text-neutral-600">
+            Explore the best of Tasko
+          </p>
+          <div className="pl-3">
+            <ul className="text-sm list-disc">
+              <li>Unlimited boards</li>
+              <li className="italic">Advanced Checklists (Coming Soon)</li>
+              <li className="italic">
+                Admin and Security Features (Coming Soon)
+              </li>
+              <li className="italic">And More to Come Soon!</li>
+            </ul>
+          </div>
+          <Button
+            disabled={isLoading}
+            onClick={onClick}
+            className="w-full"
+            variant="primary"
+          >
+            Upgrade
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};