@wealthx/shadcn 1.4.0 → 1.5.0

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

@@ -0,0 +1,548 @@
+import React, { useState, useEffect } from "react";
+import { CheckIcon, HomeIcon, PlusIcon } from "lucide-react";
+import { AddressAutocomplete } from "./form-primitives";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Slider } from "./slider";
+import { Spinner } from "./spinner";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "./input-otp";
+import { FormField } from "./signup-form-primitives";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const fmt = (v: number) =>
+  new Intl.NumberFormat("en-AU", {
+    style: "currency",
+    currency: "AUD",
+    maximumFractionDigits: 0,
+  }).format(v);
+
+const GOAL_MIN = 50_000;
+const GOAL_MAX = 4_000_000;
+const GOAL_STEP = 10_000;
+
+// ---------------------------------------------------------------------------
+// Step 2 — Phone Verification
+// ---------------------------------------------------------------------------
+
+export interface PhoneVerifyStepProps {
+  phone?: string;
+  countdown?: number;
+  error?: string;
+  isLoading?: boolean;
+  onVerify?: (code: string) => void;
+  onResend?: () => void;
+}
+
+export function PhoneVerifyStep({
+  phone = "+61 412 345 789",
+  countdown = 45,
+  error = "",
+  isLoading = false,
+  onVerify,
+  onResend,
+}: PhoneVerifyStepProps) {
+  const [otp, setOtp] = useState("");
+  const [timer, setTimer] = useState(countdown);
+
+  useEffect(() => {
+    if (timer <= 0) return;
+    const id = setInterval(() => setTimer((t) => t - 1), 1000);
+    return () => clearInterval(id);
+  }, [timer]);
+
+  const handleChange = (value: string) => {
+    setOtp(value);
+    if (value.length === 6) onVerify?.(value);
+  };
+
+  const lastFour = phone.slice(-4);
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-1">
+        <p className="text-2xl font-bold text-foreground">
+          We sent you a text.
+        </p>
+        <p className="text-sm text-muted-foreground">
+          Number we have ends in •••• {lastFour}.
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <InputOTP
+          maxLength={6}
+          value={otp}
+          onChange={handleChange}
+          disabled={isLoading}
+          aria-label="6-digit verification code"
+        >
+          <InputOTPGroup>
+            <InputOTPSlot index={0} aria-invalid={!!error || undefined} />
+            <InputOTPSlot index={1} aria-invalid={!!error || undefined} />
+            <InputOTPSlot index={2} aria-invalid={!!error || undefined} />
+          </InputOTPGroup>
+          <InputOTPSeparator />
+          <InputOTPGroup>
+            <InputOTPSlot index={3} aria-invalid={!!error || undefined} />
+            <InputOTPSlot index={4} aria-invalid={!!error || undefined} />
+            <InputOTPSlot index={5} aria-invalid={!!error || undefined} />
+          </InputOTPGroup>
+        </InputOTP>
+        {error && (
+          <p role="alert" className="text-sm text-destructive">
+            {error}
+          </p>
+        )}
+      </div>
+
+      {isLoading ? (
+        <div
+          role="status"
+          aria-label="Verifying code"
+          className="flex items-center gap-2 text-sm text-muted-foreground"
+        >
+          <span aria-hidden="true">
+            <Spinner className="size-4" />
+          </span>
+          Verifying…
+        </div>
+      ) : (
+        <p className="text-sm text-muted-foreground" aria-live="polite">
+          Didn&apos;t receive a code?{" "}
+          {timer > 0 ? (
+            <span>Resend it in {timer}s</span>
+          ) : (
+            <Button
+              variant="link"
+              size="sm"
+              className="h-auto p-0 text-sm"
+              onClick={() => {
+                setTimer(60);
+                onResend?.();
+              }}
+            >
+              Resend it
+            </Button>
+          )}
+        </p>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step 3 — Request Broker Access
+// ---------------------------------------------------------------------------
+
+export interface BrokerFormValues {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+}
+
+export interface BrokerRequestStepProps {
+  onValuesChange?: (values: BrokerFormValues) => void;
+}
+
+export function BrokerRequestStep({ onValuesChange }: BrokerRequestStepProps) {
+  const [values, setValues] = useState<BrokerFormValues>({
+    firstName: "",
+    lastName: "",
+    email: "",
+    phone: "",
+  });
+
+  const update = (field: keyof BrokerFormValues, value: string) => {
+    setValues((prev) => {
+      const next = { ...prev, [field]: value };
+      onValuesChange?.(next);
+      return next;
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <p className="text-sm text-muted-foreground">
+        You have access for the first 3 months covered by us. After this date
+        you will need to be connected with a mortgage broker or financial
+        planner to maintain access.
+      </p>
+
+      <div className="flex flex-col gap-4">
+        <div className="flex gap-4">
+          <FormField label="First Name">
+            <Input
+              id="broker-first-name"
+              autoComplete="given-name"
+              placeholder="First Name"
+              value={values.firstName}
+              onChange={(e) => update("firstName", e.target.value)}
+            />
+          </FormField>
+          <FormField label="Last Name">
+            <Input
+              id="broker-last-name"
+              autoComplete="family-name"
+              placeholder="Last Name"
+              value={values.lastName}
+              onChange={(e) => update("lastName", e.target.value)}
+            />
+          </FormField>
+        </div>
+        <FormField label="Email Address">
+          <Input
+            id="broker-email"
+            type="email"
+            autoComplete="email"
+            placeholder="Email Address"
+            value={values.email}
+            onChange={(e) => update("email", e.target.value)}
+          />
+        </FormField>
+        <FormField label="Phone Number">
+          <Input
+            id="broker-phone"
+            type="tel"
+            autoComplete="tel"
+            placeholder="Phone Number"
+            value={values.phone}
+            onChange={(e) => update("phone", e.target.value)}
+          />
+        </FormField>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step 4 — Connect Bank
+// ---------------------------------------------------------------------------
+
+const BANKS = ["CBA", "ANZ", "NAB", "WBC", "MAC", "BOQ"];
+
+export interface ConnectBankStepProps {
+  onConnect?: () => void;
+}
+
+export function ConnectBankStep({ onConnect }: ConnectBankStepProps) {
+  return (
+    <div className="flex flex-col gap-6">
+      <button
+        type="button"
+        aria-label="Connect your bank account"
+        onClick={onConnect}
+        className="flex flex-col gap-4 border border-border p-6 text-left transition-colors hover:border-primary/60"
+      >
+        <div className="grid grid-cols-3 gap-3" aria-hidden="true">
+          {BANKS.map((abbr) => (
+            <div
+              key={abbr}
+              className="flex h-14 items-center justify-center border border-border bg-muted/30"
+            >
+              <span className="text-sm font-semibold text-foreground">
+                {abbr}
+              </span>
+            </div>
+          ))}
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-semibold text-foreground">
+            Connect Bank
+          </span>
+          <div
+            aria-hidden="true"
+            className="flex h-7 w-7 items-center justify-center bg-primary text-primary-foreground"
+          >
+            <PlusIcon className="size-4" />
+          </div>
+        </div>
+      </button>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step 5 — Retrieve Bank Data (loading state)
+// ---------------------------------------------------------------------------
+
+export function RetrieveBankDataStep() {
+  return (
+    <div
+      role="status"
+      aria-label="Retrieving bank data"
+      className="flex flex-col items-center justify-center gap-4 py-16 text-center"
+    >
+      <span aria-hidden="true">
+        <Spinner className="size-10 text-primary" />
+      </span>
+      <div className="flex flex-col gap-1">
+        <p className="text-base font-semibold text-foreground">
+          Retrieving your bank data…
+        </p>
+        <p className="text-sm text-muted-foreground">
+          This may take a few seconds. Please don&apos;t close this window.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step 6 — Connect Property
+// ---------------------------------------------------------------------------
+
+interface PropertyItem {
+  id: string;
+  address: string;
+  suburb: string;
+  state: string;
+}
+
+export interface ConnectPropertyStepProps {
+  properties?: PropertyItem[];
+  onAddProperty?: (address: string) => void;
+  onCanProceedChange?: (can: boolean) => void;
+  onGoalChange?: (value: number) => void;
+}
+
+export function ConnectPropertyStep({
+  properties = [],
+  onAddProperty,
+  onCanProceedChange,
+  onGoalChange,
+}: ConnectPropertyStepProps) {
+  const [hasProperty, setHasProperty] = useState<boolean | null>(null);
+  const [addressValue, setAddressValue] = useState("");
+  const [goalValue, setGoalValue] = useState(2_000_000);
+
+  const canProceed =
+    hasProperty === false || (hasProperty === true && properties.length > 0);
+
+  useEffect(() => {
+    onCanProceedChange?.(canProceed);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canProceed]);
+
+  const handleGoalChange = (v: number) => {
+    setGoalValue(v);
+    onGoalChange?.(v);
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <ToggleGroup
+        type="single"
+        variant="outline"
+        aria-label="Do you own a property?"
+        value={
+          hasProperty === true ? ["yes"] : hasProperty === false ? ["no"] : []
+        }
+        onValueChange={(vals: readonly string[]) => {
+          const val = vals[0];
+          setHasProperty(val === "yes" ? true : val === "no" ? false : null);
+        }}
+        className="w-full"
+      >
+        <ToggleGroupItem value="yes" className="flex-1">
+          Yes, I have a property
+        </ToggleGroupItem>
+        <ToggleGroupItem value="no" className="flex-1">
+          No, I don&apos;t
+        </ToggleGroupItem>
+      </ToggleGroup>
+
+      {hasProperty === true && (
+        <>
+          <AddressAutocomplete
+            value={addressValue}
+            onValueChange={setAddressValue}
+            onSelect={(opt) => {
+              onAddProperty?.(opt.label);
+              setAddressValue("");
+            }}
+          />
+
+          {properties.length > 0 && (
+            <ul role="list" className="flex flex-col gap-2">
+              {properties.map((p) => (
+                <li
+                  key={p.id}
+                  className="flex items-center justify-between border border-border px-4 py-3"
+                >
+                  <div className="flex items-center gap-3">
+                    <HomeIcon
+                      aria-hidden="true"
+                      className="size-4 shrink-0 text-muted-foreground"
+                    />
+                    <div>
+                      <p className="text-sm font-medium text-foreground">
+                        {p.address}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {p.suburb}, {p.state}
+                      </p>
+                    </div>
+                  </div>
+                  <CheckIcon
+                    aria-hidden="true"
+                    className="size-4 text-success"
+                  />
+                </li>
+              ))}
+            </ul>
+          )}
+        </>
+      )}
+
+      {hasProperty === false && (
+        <div className="flex flex-col gap-4 border border-border p-6">
+          <div className="flex flex-col gap-1">
+            <p className="text-sm font-medium text-foreground">
+              What&apos;s your property budget?
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Set your estimated buying goal to help us tailor your experience.
+            </p>
+          </div>
+          <p
+            aria-live="polite"
+            className="tabular-nums text-3xl font-bold text-foreground"
+          >
+            {fmt(goalValue)}
+          </p>
+          <Slider
+            min={GOAL_MIN}
+            max={GOAL_MAX}
+            step={GOAL_STEP}
+            value={goalValue}
+            onValueChange={handleGoalChange}
+            aria-label="Property buying goal"
+          />
+          <div
+            aria-hidden="true"
+            className="flex justify-between text-xs text-muted-foreground"
+          >
+            <span>{fmt(GOAL_MIN)}</span>
+            <span>{fmt(GOAL_MAX)}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// BuyingGoalStep — standalone step (used in template stories)
+// ---------------------------------------------------------------------------
+
+export interface BuyingGoalStepProps {
+  initialValue?: number;
+  isLoading?: boolean;
+  onConfirm?: (value: number) => void;
+}
+
+export function BuyingGoalStep({
+  initialValue = 2_000_000,
+  isLoading = false,
+  onConfirm,
+}: BuyingGoalStepProps) {
+  const [value, setValue] = useState(initialValue);
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-6 border border-border p-6">
+        <div className="flex items-center justify-between">
+          <p
+            aria-live="polite"
+            className="tabular-nums text-3xl font-bold text-foreground"
+          >
+            {fmt(value)}
+          </p>
+          <Button
+            variant="default"
+            onClick={() => onConfirm?.(value)}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <>
+                <span aria-hidden="true">
+                  <Spinner className="size-4" />
+                </span>
+                Adding…
+              </>
+            ) : (
+              "Confirm"
+            )}
+          </Button>
+        </div>
+
+        <Slider
+          min={GOAL_MIN}
+          max={GOAL_MAX}
+          step={GOAL_STEP}
+          value={value}
+          onValueChange={(v) => setValue(v)}
+          disabled={isLoading}
+          aria-label="Buying goal"
+        />
+
+        <div
+          aria-hidden="true"
+          className="flex justify-between text-xs text-muted-foreground"
+        >
+          <span>{fmt(GOAL_MIN)}</span>
+          <span>{fmt(GOAL_MAX)}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step 7 — Success
+// ---------------------------------------------------------------------------
+
+export interface FrontendSuccessStepProps {
+  firstName?: string;
+  onGoToDashboard?: () => void;
+}
+
+export function FrontendSuccessStep({
+  firstName = "Alex",
+  onGoToDashboard,
+}: FrontendSuccessStepProps) {
+  return (
+    <div className="flex min-h-full flex-col items-center justify-center gap-6 px-4 py-16 text-center">
+      <div
+        aria-hidden="true"
+        className="flex size-16 items-center justify-center bg-success/10"
+      >
+        <CheckIcon className="size-8 text-success" strokeWidth={2} />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <h2 className="text-2xl font-bold text-foreground">
+          You&apos;re all set, {firstName}!
+        </h2>
+        <p className="max-w-[360px] text-sm text-muted-foreground">
+          Your account is ready. Head to your dashboard to explore your
+          financial overview and next steps.
+        </p>
+      </div>
+
+      <Button variant="default" size="lg" onClick={onGoToDashboard}>
+        Go to Dashboard
+      </Button>
+    </div>
+  );
+}

package/src/components/ui/income-sources-card.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "./card";
+import { Spinner } from "./spinner";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export interface IncomeSource {
+  id: string;
+  label: string;
+  amount: number;
+  /** 0–100, percentage of total income */
+  percentage: number;
+  transactionCount?: number;
+}
+
+export interface IncomeSourcesCardProps {
+  sources: IncomeSource[];
+  totalIncome: number;
+  selectedSourceId?: string | null;
+  onSelectSource?: (id: string | null) => void;
+  /** Display label for the period, e.g. "30 Days" */
+  period?: string;
+  isLoading?: boolean;
+  className?: string;
+}
+
+// ─── Source row ───────────────────────────────────────────────────────────────
+
+function SourceRow({
+  source,
+  isSelected,
+  onClick,
+}: {
+  source: IncomeSource;
+  isSelected: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={isSelected}
+      className={cn(
+        "flex w-full flex-col gap-1.5 border-b border-l-2 border-border py-3 pl-3 text-left transition-colors last:border-0",
+        isSelected
+          ? "border-l-primary bg-primary/5 hover:bg-primary/10"
+          : "border-l-transparent hover:bg-muted/50",
+      )}
+    >
+      <div className="flex items-baseline justify-between gap-3">
+        <span
+          className={cn(
+            "truncate text-sm font-medium",
+            isSelected ? "text-primary" : "text-foreground",
+          )}
+        >
+          {source.label}
+        </span>
+        <span className="shrink-0 text-sm font-semibold text-foreground">
+          {formatCurrency(source.amount)}
+        </span>
+      </div>
+
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-xs text-muted-foreground">
+          {source.transactionCount != null
+            ? `${source.transactionCount} ${source.transactionCount === 1 ? "transaction" : "transactions"}`
+            : ""}
+        </span>
+        <span className="text-xs text-muted-foreground">
+          {source.percentage.toFixed(0)}%
+        </span>
+      </div>
+
+      <div className="h-1.5 w-full overflow-hidden bg-muted">
+        <div
+          className="h-full bg-primary transition-all"
+          style={{ width: `${Math.min(100, Math.max(0, source.percentage))}%` }}
+          aria-hidden="true"
+        />
+      </div>
+    </button>
+  );
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function IncomeSourcesCard({
+  sources,
+  totalIncome,
+  selectedSourceId,
+  onSelectSource,
+  period,
+  isLoading = false,
+  className,
+}: IncomeSourcesCardProps) {
+  return (
+    <Card className={cn("flex flex-col", className)}>
+      <CardHeader className="pb-2">
+        <div className="flex items-start justify-between gap-2">
+          <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Income Sources
+          </CardTitle>
+          <div className="flex shrink-0 flex-col items-end">
+            <span className="text-sm font-semibold text-foreground">
+              {formatCurrency(totalIncome)}
+            </span>
+            {period && (
+              <span className="text-xs text-muted-foreground">{period}</span>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex flex-1 flex-col p-0 px-4 pb-2">
+        {isLoading ? (
+          <div className="flex flex-1 items-center justify-center py-8">
+            <Spinner size="default" />
+          </div>
+        ) : sources.length === 0 ? (
+          <p className="py-8 text-center text-sm text-muted-foreground">
+            No income sources available
+          </p>
+        ) : (
+          sources.map((source) => (
+            <SourceRow
+              key={source.id}
+              source={source}
+              isSelected={selectedSourceId === source.id}
+              onClick={() =>
+                onSelectSource?.(
+                  selectedSourceId === source.id ? null : source.id,
+                )
+              }
+            />
+          ))
+        )}
+      </CardContent>
+    </Card>
+  );
+}