Add src/components/onboarding/ActivationSuccessModal.jsx

src/components/onboarding/ActivationSuccessModal.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { CheckCircle2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export default function ActivationSuccessModal({ open, storeName, storeAddress, onConfirm }) {
+  return (
+    <AnimatePresence>
+      {open && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.9 }}
+            transition={{ duration: 0.3 }}
+            className="bg-white rounded-2xl shadow-2xl border border-gray-100 w-full max-w-md overflow-hidden"
+          >
+            {/* Success header */}
+            <div className="px-8 pt-8 pb-2 text-center">
+              <div className="flex justify-center mb-4">
+                <img
+                  src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/69ac537c5138f01ec706f4bc/9c287bb3b_Logo_PBC_horz_color.png"
+                  alt="PackageHub Business Centers"
+                  className="h-14 w-auto object-contain"
+                />
+              </div>
+              <div className="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-3">
+                <CheckCircle2 className="w-6 h-6 text-green-500" />
+              </div>
+              <h2 className="text-2xl font-bold text-gray-900">Account Setup Complete</h2>
+            </div>
+
+            {/* Body */}
+            <div className="px-8 py-6 text-center">
+              <p className="text-gray-600 text-sm leading-relaxed">
+                You have successfully set up the PackageHub360 account for{" "}
+                <span className="font-semibold text-gray-900">{storeName}</span>{" "}
+                at{" "}
+                <span className="font-semibold text-gray-900">{storeAddress}</span>.
+              </p>
+              <p className="text-gray-500 text-sm mt-3">
+                You'll now be taken to your dashboard to complete the setup process.
+              </p>
+            </div>
+
+            {/* Action */}
+            <div className="px-8 pb-8">
+              <Button
+                onClick={onConfirm}
+                className="w-full h-11 bg-[#2980b9] hover:bg-[#2471a3] text-white font-semibold rounded-lg"
+