@wealthx/shadcn 1.4.0 → 1.5.0

package/src/components/ui/backoffice-signup-steps.tsx

@@ -0,0 +1,615 @@
+import React, { useState } from "react";
+import {
+  CalendarIcon,
+  InfoIcon,
+  MailIcon,
+  PhoneIcon,
+  PlusIcon,
+} from "lucide-react";
+import { Button } from "./button";
+import { Checkbox } from "./checkbox";
+import { ColorPicker } from "./color-picker";
+import { Field, FieldError, FieldLabel } from "./field";
+import { Input } from "./input";
+import { Separator } from "./separator";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
+import { UploadCard } from "./upload-card";
+import {
+  FormField,
+  PasswordField,
+  SectionHeading,
+  StaffMember,
+  StaffRowItem,
+} from "./signup-form-primitives";
+
+// ---------------------------------------------------------------------------
+// Pricing constants (WealthX Professional Plan)
+// ---------------------------------------------------------------------------
+
+const BASE_PLAN_PRICE = 299;
+
+const ROLE_INFO: Record<string, string> = {
+  Admin: "Admin seats have full access to manage the platform.",
+  Broker: "Broker seats can manage client portfolios.",
+  Support: "Support seats handle client inquiries and tickets.",
+};
+
+const ROLE_SUBTITLE: Record<string, string> = {
+  Admin: "$89/month/company (first seat included)",
+  Broker: "$89/month/company",
+  Support: "$0/month/company",
+};
+
+// ---------------------------------------------------------------------------
+// Step 1 — Personal Details
+// ---------------------------------------------------------------------------
+
+export interface PersonalDetailsStepProps {
+  onValidChange?: (valid: boolean) => void;
+}
+
+export function PersonalDetailsStep({
+  onValidChange,
+}: PersonalDetailsStepProps) {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [emailError, setEmailError] = useState("");
+  const [emailTouched, setEmailTouched] = useState(false);
+  const [passwordValue, setPasswordValue] = useState("");
+  const [confirmValue, setConfirmValue] = useState("");
+  const [termsAccepted, setTermsAccepted] = useState(false);
+
+  const validateEmail = (v: string) => {
+    if (v.length > 0 && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v))
+      return "Please enter a valid email address";
+    return "";
+  };
+
+  const passwordRules = (v: string) =>
+    v.length >= 8 &&
+    /[A-Z]/.test(v) &&
+    /[a-z]/.test(v) &&
+    /[0-9]/.test(v) &&
+    /[^A-Za-z0-9]/.test(v);
+
+  const emailValid = email.length > 0 && validateEmail(email) === "";
+  const passwordValid = passwordRules(passwordValue);
+  const confirmPasswordValid =
+    confirmValue.length > 0 && confirmValue === passwordValue;
+
+  React.useEffect(() => {
+    onValidChange?.(
+      firstName.trim().length > 0 &&
+        lastName.trim().length > 0 &&
+        emailValid &&
+        passwordValid &&
+        confirmPasswordValid &&
+        termsAccepted,
+    );
+  }, [
+    firstName,
+    lastName,
+    emailValid,
+    passwordValid,
+    confirmPasswordValid,
+    termsAccepted,
+    onValidChange,
+  ]);
+
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex gap-4">
+        <Field>
+          <FieldLabel>
+            First Name<span className="text-destructive ml-0.5">*</span>
+          </FieldLabel>
+          <Input
+            placeholder="First Name"
+            value={firstName}
+            onChange={(e) => setFirstName(e.target.value)}
+          />
+          <div className="min-h-5" />
+        </Field>
+        <Field>
+          <FieldLabel>
+            Last Name<span className="text-destructive ml-0.5">*</span>
+          </FieldLabel>
+          <Input
+            placeholder="Last Name"
+            value={lastName}
+            onChange={(e) => setLastName(e.target.value)}
+          />
+          <div className="min-h-5" />
+        </Field>
+      </div>
+      <Field>
+        <FieldLabel>
+          Email Address<span className="text-destructive ml-0.5">*</span>
+        </FieldLabel>
+        <Input
+          type="email"
+          placeholder="Email Address"
+          value={email}
+          onChange={(e) => {
+            setEmail(e.target.value);
+            if (emailTouched) setEmailError(validateEmail(e.target.value));
+          }}
+          onBlur={() => {
+            setEmailTouched(true);
+            setEmailError(validateEmail(email));
+          }}
+        />
+        <div className="min-h-5">
+          {emailTouched && emailError && <FieldError>{emailError}</FieldError>}
+        </div>
+      </Field>
+      <PasswordField
+        label="Set Your Password"
+        placeholder="Password"
+        required
+        showStrengthPopover
+        onValueChange={setPasswordValue}
+      />
+      <PasswordField
+        label="Confirm Password"
+        placeholder="Confirm Your Password"
+        required
+        onValueChange={setConfirmValue}
+      />
+      <Field>
+        <FieldLabel>Phone Number</FieldLabel>
+        <Input placeholder="Phone Number" />
+        <div className="min-h-5" />
+      </Field>
+      <div className="flex items-start gap-3">
+        <Checkbox
+          id="terms"
+          checked={termsAccepted}
+          onCheckedChange={(v) => setTermsAccepted(!!v)}
+        />
+        <label
+          htmlFor="terms"
+          className="text-sm text-muted-foreground leading-relaxed cursor-pointer select-none"
+        >
+          I agree to the{" "}
+          <span className="text-foreground underline">
+            Terms and Conditions
+          </span>{" "}
+          and <span className="text-foreground underline">Privacy Policy</span>
+        </label>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step 2 — Company Info
+// ---------------------------------------------------------------------------
+
+export function CompanyInfoStep() {
+  return (
+    <div className="flex flex-col gap-4">
+      <SectionHeading>Company Details</SectionHeading>
+      <FormField label="Business Name" required>
+        <Input placeholder="Business Name" />
+      </FormField>
+      <FormField label="ABN (Australian Business Number)" required>
+        <Input placeholder="Input ABN" />
+      </FormField>
+      <FormField label="Australian Credit License Number" required>
+        <Input placeholder="Input License Number" />
+      </FormField>
+      <FormField label="Customer Support Email" required>
+        <Input type="email" placeholder="Customer Support Email" />
+      </FormField>
+      <FormField label="Main Business Phone Number" required>
+        <Input placeholder="Main Business Phone Number" />
+      </FormField>
+      <FormField label="Domain" required>
+        <Input placeholder="Input Domain" />
+      </FormField>
+      <SectionHeading>
+        Connective Details{" "}
+        <span className="text-muted-foreground font-normal">
+          (connective brokers only)
+        </span>
+      </SectionHeading>
+      <FormField label="CA Number">
+        <Input placeholder="CA Number" />
+      </FormField>
+      <FormField label="Company ID">
+        <Input placeholder="Company ID" />
+      </FormField>
+      <FormField label="API Key">
+        <Input placeholder="API Key" />
+      </FormField>
+      <FormField label="API Token">
+        <Input placeholder="API Token" />
+      </FormField>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step 3 — Branding Info
+// ---------------------------------------------------------------------------
+
+export function BrandingInfoStep() {
+  const [primaryColor, setPrimaryColor] = useState("#131C24");
+  const [secondaryColor, setSecondaryColor] = useState("#00E599");
+  const [calendarType, setCalendarType] = useState("Calendly");
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-4">
+        <SectionHeading>Admin Advisor Content</SectionHeading>
+        <FormField label="Calendar URL">
+          <div className="flex gap-2">
+            <Select
+              value={calendarType}
+              onValueChange={(v) => setCalendarType(v as string)}
+            >
+              <SelectTrigger className="w-[140px] shrink-0">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="Calendly">Calendly</SelectItem>
+                <SelectItem value="Gmail">Gmail Calendar</SelectItem>
+                <SelectItem value="Outlook">Outlook Calendar</SelectItem>
+              </SelectContent>
+            </Select>
+            <Input placeholder="Paste calendar URL" className="flex-1" />
+          </div>
+        </FormField>
+        <FormField label="Video URL (Youtube, Vimeo, Wistia)">
+          <Input placeholder="Input Video URL" />
+        </FormField>
+        <Field>
+          <FieldLabel>Upload professional photo (800x450)</FieldLabel>
+          <UploadCard
+            size="sm"
+            label="Upload image"
+            description="PNG, JPG · 800×450px"
+          />
+        </Field>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <SectionHeading>Company Branding</SectionHeading>
+        <Field>
+          <FieldLabel>Color Code Primary</FieldLabel>
+          <ColorPicker value={primaryColor} onChange={setPrimaryColor} />
+        </Field>
+        <Field>
+          <FieldLabel>Color Code Secondary</FieldLabel>
+          <ColorPicker value={secondaryColor} onChange={setSecondaryColor} />
+        </Field>
+        <div className="grid grid-cols-2 gap-4">
+          <Field>
+            <FieldLabel>Primary Symbol Logo (50x50)</FieldLabel>
+            <UploadCard
+              size="sm"
+              label="Upload image"
+              description="PNG, JPG · 50×50px"
+            />
+          </Field>
+          <Field>
+            <FieldLabel>Symbol Logo in White (50x50)</FieldLabel>
+            <UploadCard
+              size="sm"
+              label="Upload image"
+              description="PNG, JPG · 50×50px"
+            />
+          </Field>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <Field>
+            <FieldLabel>Primary Business Logo (150x100)</FieldLabel>
+            <UploadCard
+              size="sm"
+              label="Upload image"
+              description="PNG, JPG · 150×100px"
+            />
+          </Field>
+          <Field>
+            <FieldLabel>Primary Business Logo in White (150x100)</FieldLabel>
+            <UploadCard
+              size="sm"
+              label="Upload image"
+              description="PNG, JPG · 150×100px"
+            />
+          </Field>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step 4a — Invite Staff
+// ---------------------------------------------------------------------------
+
+export interface InviteStaffViewProps {
+  onNext: () => void;
+  onPrev: () => void;
+}
+
+export function InviteStaffView({
+  onNext: _onNext,
+  onPrev: _onPrev,
+}: InviteStaffViewProps) {
+  const [staffList, setStaffList] = useState<StaffMember[]>([
+    { id: "1", email: "", role: "" },
+  ]);
+
+  const addStaff = () =>
+    setStaffList((p) => [
+      ...p,
+      { id: crypto.randomUUID(), email: "", role: "" },
+    ]);
+  const removeStaff = (id: string) =>
+    setStaffList((p) => p.filter((m) => m.id !== id));
+  const changeStaff = (id: string, field: "email" | "role", value: string) =>
+    setStaffList((p) =>
+      p.map((m) => (m.id === id ? { ...m, [field]: value } : m)),
+    );
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-4">
+        <SectionHeading>Invite Staff Members</SectionHeading>
+        <div className="flex flex-col gap-3 border border-border p-6">
+          <div className="flex items-center gap-3 w-full">
+            <span className="flex-1 text-sm font-medium text-foreground">
+              Email
+            </span>
+            <span className="w-[140px] shrink-0 text-sm font-medium text-foreground">
+              Role
+            </span>
+            <span className="size-8 shrink-0" />
+          </div>
+          {staffList.map((m) => (
+            <StaffRowItem
+              key={m.id}
+              member={m}
+              onRemove={removeStaff}
+              onChange={changeStaff}
+              showRemove={staffList.length > 1}
+            />
+          ))}
+          <Button variant="outline" onClick={addStaff} className="w-full">
+            <PlusIcon className="size-4" />
+            Add Staff
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <SectionHeading>Or Bulk Upload</SectionHeading>
+        <UploadCard
+          size="lg"
+          accept=".csv"
+          label="Drop files here"
+          description="Or browse files from your computer"
+        />
+        <p className="text-sm text-muted-foreground text-center">
+          Ensure your CSV file includes columns for:
+          <br />
+          No., First Name, Last Name, Email, Phone (Optional) and Staff Role.
+        </p>
+        <div className="flex justify-center gap-1 text-sm text-muted-foreground">
+          Or you can download the{" "}
+          <Button variant="link" className="h-auto p-0">
+            Template file
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step 4b — Payment / Seat Selection
+// ---------------------------------------------------------------------------
+
+export interface PaymentViewProps {
+  onNext: () => void;
+  onPrev: () => void;
+}
+
+export function PaymentView({
+  onNext: _onNext,
+  onPrev: _onPrev,
+}: PaymentViewProps) {
+  const [seats, setSeats] = useState({ Admin: 1, Broker: 0, Support: 0 });
+  const additionalCost = Math.max(0, seats.Admin - 1) * 89 + seats.Broker * 89;
+  const total = BASE_PLAN_PRICE + additionalCost;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="border border-border px-6 py-8 flex flex-col gap-4">
+        <div className="flex items-start justify-between">
+          <div>
+            <p className="font-bold text-lg">Professional Plan</p>
+            <p className="text-muted-foreground text-sm">included 1 Broker</p>
+          </div>
+          <div className="text-right">
+            <p className="font-bold text-lg">
+              ${BASE_PLAN_PRICE}/month/company
+            </p>
+            <p className="text-muted-foreground text-sm">
+              Billed monthly. Cancel anytime.
+            </p>
+          </div>
+        </div>
+
+        <Separator />
+
+        <p className="font-semibold text-base">Total Staff seats</p>
+        <TooltipProvider>
+          {(["Admin", "Broker", "Support"] as const).map((role) => (
+            <div key={role} className="flex items-start justify-between">
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-2">
+                  <span className="text-base w-[60px]">{role}</span>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <Button variant="ghost" size="icon-sm" aria-label="Info">
+                        <InfoIcon className="size-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="top">
+                      {ROLE_INFO[role]}
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {ROLE_SUBTITLE[role]}
+                </p>
+              </div>
+              <Input
+                type="number"
+                value={seats[role]}
+                onChange={(e) =>
+                  setSeats((s) => ({
+                    ...s,
+                    [role]: Math.max(0, Number(e.target.value)),
+                  }))
+                }
+                aria-label={`${role} seats`}
+                className="w-[76px] text-center"
+              />
+            </div>
+          ))}
+        </TooltipProvider>
+
+        <p className="text-sm text-muted-foreground">
+          You can add or remove seats anytime. Changes are billed monthly.
+        </p>
+
+        <Separator />
+
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger>
+              <div className="flex items-center justify-between">
+                <p className="font-semibold text-lg">Total (Est.)</p>
+                <p className="font-semibold text-lg">${total}</p>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              This is an estimated amount. You will be charged at the end of the
+              billing period.
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step 4c — Stripe / Card Details
+// ---------------------------------------------------------------------------
+
+export interface StripeViewProps {
+  onPrev: () => void;
+  onComplete: () => void;
+}
+
+export function StripeView({
+  onPrev: _onPrev,
+  onComplete: _onComplete,
+}: StripeViewProps) {
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="border border-border p-6 flex flex-col gap-4">
+        <p className="font-semibold text-base text-foreground">
+          Payment Details
+        </p>
+        <Field>
+          <FieldLabel>Card Number</FieldLabel>
+          <div className="flex h-9 w-full border border-input bg-muted/30 px-3 py-2 text-sm text-muted-foreground items-center">
+            •••• •••• •••• 4242
+          </div>
+        </Field>
+        <div className="flex gap-4">
+          <Field className="flex-1">
+            <FieldLabel>Expiry</FieldLabel>
+            <div className="flex h-9 w-full border border-input bg-muted/30 px-3 py-2 text-sm text-muted-foreground items-center">
+              MM / YY
+            </div>
+          </Field>
+          <Field className="flex-1">
+            <FieldLabel>CVC</FieldLabel>
+            <div className="flex h-9 w-full border border-input bg-muted/30 px-3 py-2 text-sm text-muted-foreground items-center">
+              •••
+            </div>
+          </Field>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Powered by Stripe. Your payment information is encrypted and secure.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Success screen
+// ---------------------------------------------------------------------------
+
+export function BackofficeSuccessStep() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-full py-16 gap-6 text-center px-4">
+      <div className="size-16 bg-success/10 flex items-center justify-center">
+        <svg
+          viewBox="0 0 24 24"
+          className="size-8 text-success"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      </div>
+      <div className="flex flex-col gap-2">
+        <h2 className="text-2xl font-bold text-foreground">You're all set!</h2>
+        <p className="text-muted-foreground max-w-[400px]">
+          You will receive an email on next steps and we will contact you for
+          final approval.
+        </p>
+      </div>
+      <div className="border border-border p-6 flex flex-col gap-4 text-left w-full max-w-[400px]">
+        <p className="font-semibold text-base text-foreground">
+          Contact us anytime if you have any concerns.
+        </p>
+        <div className="flex items-center gap-2.5">
+          <PhoneIcon className="size-5 text-success shrink-0" />
+          <span className="text-base text-foreground">0416 338 438</span>
+        </div>
+        <div className="flex items-center gap-2.5">
+          <CalendarIcon className="size-5 text-success shrink-0" />
+          <span className="text-base text-foreground">Book call back</span>
+        </div>
+        <div className="flex items-center gap-2.5">
+          <MailIcon className="size-5 text-success shrink-0" />
+          <span className="text-base text-foreground">clint@wealthx.au</span>
+        </div>
+      </div>
+    </div>
+  );
+}