diff --git a/src/pages/Onboarding.jsx b/src/pages/Onboarding.jsx new file mode 100644 index 0000000..93cba5b --- /dev/null +++ b/src/pages/Onboarding.jsx @@ -0,0 +1,236 @@ +import React, { useState } from "react"; +import { motion } from "framer-motion"; +import { base44 } from "@/api/base44Client"; +import { Store, MapPin, Hash, ArrowRight } from "lucide-react"; +import WarningModal from "@/components/onboarding/WarningModal"; +import SignupForm from "@/components/onboarding/SignupForm"; +import ActivationPending from "@/components/onboarding/ActivationPending"; + +// Demo token resolver — simulates decoding the onboarding token +function resolveToken(token) { + return { + store_id: "AA1112", + store_name: "Radi Box N Ship", + store_address: "1939 W. Manchester Ave., Los Angeles, CA 90047", + onboarding_token: token || "demo-token-abc123" + }; +} + +export default function Onboarding() { + const urlParams = new URLSearchParams(window.location.search); + const token = urlParams.get("token") || "demo-token-abc123"; + + const [storeData] = useState(() => resolveToken(token)); + const [showWarning, setShowWarning] = useState(false); + const [warningDismissed, setWarningDismissed] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const [activationPending, setActivationPending] = useState(false); + const [pendingEmail, setPendingEmail] = useState(""); + const [pendingUserId, setPendingUserId] = useState(""); + const [pendingCode, setPendingCode] = useState(""); + const [pendingUserData, setPendingUserData] = useState(null); + // Show landing first, then modal on CTA click + const [showLanding, setShowLanding] = useState(true); + + const handleBeginOnboarding = () => { + setShowLanding(false); + setShowWarning(true); + }; + + const handleWarningContinue = () => { + setShowWarning(false); + setWarningDismissed(true); + }; + + const generateCode = () => { + const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789"; + let code = ""; + for (let i = 0; i < 6; i++) code += chars[Math.floor(Math.random() * chars.length)]; + return code; + }; + + const sendActivationEmail = async (email, userId, code) => { + await base44.integrations.Core.SendEmail({ + to: email, + subject: "Final Step: Verify your PackageHub360 account", + body: `
+
+

PackageHub360

+

Business Centers

+
+ +
+

Verify Your Email Address

+ +

+ Thank you for creating your PackageHub360 account. To complete your registration, please verify your email address using the code below. +

+ +
+

Your verification code is:

+

${code}

+
+ +
+ +

+ If you did not create a PackageHub360 account, please ignore this email or contact us at + support@packagehub360.com. +

+ +

+ Thanks,
+ The PackageHub Team +

+
+
` + }); + }; + + const handleSignup = async ({ email, password, mobile, username }) => { + setIsLoading(true); + const activationCode = generateCode(); + + const newUser = await base44.entities.BoUser.create({ + email, + username, + password_hash: password, + store_id: storeData.store_id, + store_name: storeData.store_name, + store_address: storeData.store_address, + onboarding_token: storeData.onboarding_token, + first_login_completed: false, + stripe_onboarding_started: false, + full_name: "New Member", + phone: mobile, + city: "Los Angeles", + state: "CA", + zip_code: "90047", + street_address: "1939 W. Manchester Ave.", + status: "active", + activation_code: activationCode, + activation_email_sent: true, + is_activated: false + }); + + await sendActivationEmail(email, newUser.id, activationCode); + + setPendingEmail(email); + setPendingUserId(newUser.id); + setPendingCode(activationCode); + setPendingUserData({ + email, + username, + store_id: storeData.store_id, + store_name: storeData.store_name, + full_name: "New Member", + is_activated: false, + }); + setIsLoading(false); + setActivationPending(true); + }; + + const handleResendEmail = async () => { + await sendActivationEmail(pendingEmail, pendingUserId, pendingCode); + }; + + return ( +
+ {/* Warning Modal */} + + + {showLanding && !warningDismissed && +
+ + + {/* Welcome Card */} +
+ + {/* Card Header with logo */} +
+
+ PackageHub Business Centers +
+

Welcome

+

You've been invited to set up your PackageHub360 store account.

+
+ + {/* Card Body */} +
+
+
+
+ +
+
+

Store Name

+

{storeData.store_name}

+
+
+
+
+ +
+
+

Store ID

+

{storeData.store_id}

+
+
+
+
+ +
+
+

Store Address

+

{storeData.store_address}

+
+
+
+ + + +

+ This one-time link was generated specifically for your store. Do not share it. +

+
+
+ +
+ } + + {/* Signup Form */} + {warningDismissed && !activationPending && +
+ +
+ } + + {/* Activation Pending Screen */} + {activationPending && +
+ +
+ } + +
); + +} \ No newline at end of file