learn
2 months ago
settings
2 months ago
Analytics.js
2 months ago
AnalyticsDetail.js
2 months ago
Dashboard.js
2 months ago
Emails.js
1 month ago
Learn.js
2 months ago
MediaHub.js
1 month ago
Onboarding.js
1 month ago
Settings.js
2 months ago
UserAnalyticsDetail.js
2 months ago
Onboarding.js
122 lines
| 1 | import { useState } from "react"; |
| 2 | import { Button, Text, Topbar, ProgressSteps, Container } from "@bsf/force-ui"; |
| 3 | import { X } from "lucide-react"; |
| 4 | import PrestoPlayerIcon from "../components/PrestoPlayerIcon"; |
| 5 | import useCompleteOnboarding from "../hooks/useCompleteOnboarding"; |
| 6 | import Welcome from "../components/Onboarding/Welcome"; |
| 7 | import PremiumFeatures from "../components/Onboarding/PremiumFeatures"; |
| 8 | import Integrations from "../components/Onboarding/Integrations"; |
| 9 | import Done from "../components/Onboarding/Done"; |
| 10 | import UserInfo from "../components/Onboarding/UserInfo"; |
| 11 | |
| 12 | const { __ } = wp.i18n; |
| 13 | |
| 14 | const onboardingSteps = [ |
| 15 | { id: "welcome", component: Welcome, maxWidth: "max-w-xl" }, |
| 16 | { id: "user_info", component: UserInfo, maxWidth: "max-w-2xl" }, |
| 17 | { id: "premium_features", component: PremiumFeatures, maxWidth: "max-w-2xl" }, |
| 18 | { id: "integrations", component: Integrations, maxWidth: "max-w-2xl" }, |
| 19 | { id: "done", component: Done, maxWidth: "max-w-2xl" }, |
| 20 | ]; |
| 21 | |
| 22 | const VISIBLE_STEPS = 4; |
| 23 | |
| 24 | const Onboarding = () => { |
| 25 | const [currentStepIndex, setCurrentStepIndex] = useState(0); |
| 26 | |
| 27 | const prestoData = window.prestoPlayer || {}; |
| 28 | const currentUser = prestoData.currentUser || {}; |
| 29 | const [userInfoData, setUserInfoData] = useState({ |
| 30 | firstName: currentUser.first_name || "", |
| 31 | lastName: currentUser.last_name || "", |
| 32 | email: currentUser.user_email || "", |
| 33 | optIn: true, |
| 34 | }); |
| 35 | |
| 36 | const goToNextStep = () => { |
| 37 | if (currentStepIndex < onboardingSteps.length - 1) { |
| 38 | setCurrentStepIndex(currentStepIndex + 1); |
| 39 | } |
| 40 | }; |
| 41 | |
| 42 | const goToPreviousStep = () => { |
| 43 | if (currentStepIndex > 0) { |
| 44 | setCurrentStepIndex(currentStepIndex - 1); |
| 45 | } |
| 46 | }; |
| 47 | |
| 48 | const { exitOnboarding, isSubmitting } = useCompleteOnboarding(); |
| 49 | |
| 50 | const isDoneStep = currentStepIndex >= VISIBLE_STEPS; |
| 51 | const currentStep = onboardingSteps[currentStepIndex]; |
| 52 | const CurrentStepComponent = currentStep.component; |
| 53 | |
| 54 | return ( |
| 55 | <Container |
| 56 | direction="column" |
| 57 | gap="none" |
| 58 | className="bg-background-secondary min-h-screen overflow-x-hidden" |
| 59 | > |
| 60 | {/* Sticky Topbar */} |
| 61 | <div className="presto-onboarding-topbar"> |
| 62 | <Topbar className="bg-background-secondary"> |
| 63 | <Topbar.Left> |
| 64 | <Topbar.Item> |
| 65 | <PrestoPlayerIcon /> |
| 66 | <Text size={14} weight={600} className="ml-2"> |
| 67 | {__("Presto Player", "presto-player")} |
| 68 | </Text> |
| 69 | </Topbar.Item> |
| 70 | </Topbar.Left> |
| 71 | <Topbar.Middle> |
| 72 | <Topbar.Item> |
| 73 | <ProgressSteps |
| 74 | currentStep={isDoneStep ? VISIBLE_STEPS + 1 : currentStepIndex + 1} |
| 75 | variant="number" |
| 76 | type="inline" |
| 77 | completedVariant="number" |
| 78 | > |
| 79 | {Array.from({ length: VISIBLE_STEPS }).map((_, index) => ( |
| 80 | <ProgressSteps.Step key={index} /> |
| 81 | ))} |
| 82 | </ProgressSteps> |
| 83 | </Topbar.Item> |
| 84 | </Topbar.Middle> |
| 85 | <Topbar.Right> |
| 86 | <Topbar.Item> |
| 87 | <Button |
| 88 | icon={<X className="size-4" />} |
| 89 | iconPosition="right" |
| 90 | size="xs" |
| 91 | variant="ghost" |
| 92 | disabled={isSubmitting} |
| 93 | onClick={() => exitOnboarding(isDoneStep ? null : currentStep.id)} |
| 94 | className="align-middle" |
| 95 | > |
| 96 | {__("Exit Guided Setup", "presto-player")} |
| 97 | </Button> |
| 98 | </Topbar.Item> |
| 99 | </Topbar.Right> |
| 100 | </Topbar> |
| 101 | </div> |
| 102 | |
| 103 | {/* Scrollable content area */} |
| 104 | <Container className="p-7 w-full mt-7"> |
| 105 | <Container |
| 106 | direction="column" |
| 107 | className={`w-full border-0.5 border-solid border-border-subtle bg-background-primary shadow-sm rounded-xl mx-auto p-7 ${currentStep.maxWidth}`} |
| 108 | > |
| 109 | <CurrentStepComponent |
| 110 | goToNextStep={goToNextStep} |
| 111 | goToPreviousStep={goToPreviousStep} |
| 112 | userInfoData={userInfoData} |
| 113 | setUserInfoData={setUserInfoData} |
| 114 | /> |
| 115 | </Container> |
| 116 | </Container> |
| 117 | </Container> |
| 118 | ); |
| 119 | }; |
| 120 | |
| 121 | export default Onboarding; |
| 122 |