@wealthx/shadcn 1.4.0 → 1.5.0

package/src/components/ui/loan-steps.tsx

@@ -0,0 +1,630 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  LoanOptionGroup,
+  type LoanOptionItem,
+} from "@/components/ui/loan-option-group";
+import { CurrencyInput } from "@/components/ui/currency-input";
+
+// ─── Shared option constants ────────────────────────────────────────────────
+
+const YES_NO: LoanOptionItem[] = [
+  { value: "yes", label: "Yes" },
+  { value: "no", label: "No" },
+];
+
+function scaleOptions(min: number, max: number): LoanOptionItem[] {
+  return Array.from({ length: max - min + 1 }, (_, i) => {
+    const v = String(min + i);
+    return { value: v, label: v };
+  });
+}
+
+// ─── Shared step navigation ──────────────────────────────────────────────────
+
+type StepNavProps = {
+  onPrev?: () => void;
+  onNext?: () => void;
+  nextLabel?: string;
+  nextDisabled?: boolean;
+  hidePrev?: boolean;
+  className?: string;
+};
+
+function StepNav({
+  onPrev,
+  onNext,
+  nextLabel = "Next",
+  nextDisabled = false,
+  hidePrev = false,
+  className,
+}: StepNavProps) {
+  return (
+    <div className={cn("flex items-center justify-between pt-6", className)}>
+      {!hidePrev ? (
+        <Button variant="outline" onClick={onPrev}>
+          <ChevronLeftIcon className="mr-1 size-4" />
+          Previous
+        </Button>
+      ) : (
+        <span />
+      )}
+      <Button onClick={onNext} disabled={nextDisabled}>
+        {nextLabel}
+        <ChevronRightIcon className="ml-1 size-4" />
+      </Button>
+    </div>
+  );
+}
+
+// ─── 1. LoanPurposeStep ──────────────────────────────────────────────────────
+
+export const LENDING_TYPE_OPTIONS: LoanOptionItem[] = [
+  { value: "owner-occupier", label: "Owner Occupier" },
+  { value: "investment", label: "Investment" },
+  { value: "both", label: "Both" },
+];
+
+export const LOAN_PURPOSE_OPTIONS: LoanOptionItem[] = [
+  { value: "buy", label: "Buy a New Property" },
+  { value: "refinance", label: "Refinance" },
+  { value: "equity", label: "Equity Release" },
+  { value: "construction", label: "Construction" },
+];
+
+export type LoanPurposeStepProps = {
+  lendingType: string | null;
+  loanPurpose: string | null;
+  onLendingTypeChange: (v: string) => void;
+  onLoanPurposeChange: (v: string) => void;
+  onNext: () => void;
+  className?: string;
+};
+
+export function LoanPurposeStep({
+  lendingType,
+  loanPurpose,
+  onLendingTypeChange,
+  onLoanPurposeChange,
+  onNext,
+  className,
+}: LoanPurposeStepProps) {
+  return (
+    <div className={cn("flex flex-col gap-10 font-sans", className)}>
+      <LoanOptionGroup
+        title="What Type of Lending Are You Looking For?"
+        options={LENDING_TYPE_OPTIONS}
+        value={lendingType}
+        onChange={(v) => onLendingTypeChange(v as string)}
+      />
+      <LoanOptionGroup
+        title="What Would You Like to Do?"
+        options={LOAN_PURPOSE_OPTIONS}
+        value={loanPurpose}
+        onChange={(v) => onLoanPurposeChange(v as string)}
+      />
+      <StepNav
+        hidePrev
+        onNext={onNext}
+        nextDisabled={!lendingType || !loanPurpose}
+      />
+    </div>
+  );
+}
+
+// ─── 2. LoanDetailsBuyStep ───────────────────────────────────────────────────
+
+export type LoanDetailsBuyStepProps = {
+  isPropertyKnown: string | null;
+  propertyAddress?: string;
+  propertyEstimate?: number;
+  loanAmount?: number;
+  onIsPropertyKnownChange: (v: string) => void;
+  onPropertyAddressChange: (v: string) => void;
+  onPropertyEstimateChange: (v: number) => void;
+  onLoanAmountChange: (v: number) => void;
+  onPrev: () => void;
+  onNext: () => void;
+  className?: string;
+};
+
+export function LoanDetailsBuyStep({
+  isPropertyKnown,
+  propertyAddress = "",
+  propertyEstimate = 0,
+  loanAmount = 0,
+  onIsPropertyKnownChange,
+  onPropertyAddressChange,
+  onPropertyEstimateChange,
+  onLoanAmountChange,
+  onPrev,
+  onNext,
+  className,
+}: LoanDetailsBuyStepProps) {
+  return (
+    <div className={cn("flex flex-col gap-8 font-sans", className)}>
+      <LoanOptionGroup
+        title="Do you have a specific property in mind?"
+        options={YES_NO}
+        value={isPropertyKnown}
+        onChange={(v) => onIsPropertyKnownChange(v as string)}
+      />
+
+      {isPropertyKnown === "yes" && (
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1">
+            <label className="text-sm font-medium text-foreground">
+              Property Address
+            </label>
+            <input
+              type="text"
+              value={propertyAddress}
+              onChange={(e) => onPropertyAddressChange(e.target.value)}
+              placeholder="Enter property address"
+              className="w-full border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-foreground">
+                Property Value
+              </label>
+              <CurrencyInput
+                value={propertyEstimate}
+                onChange={onPropertyEstimateChange}
+              />
+            </div>
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-foreground">
+                Loan Amount
+              </label>
+              <CurrencyInput value={loanAmount} onChange={onLoanAmountChange} />
+            </div>
+          </div>
+        </div>
+      )}
+
+      <StepNav
+        onPrev={onPrev}
+        onNext={onNext}
+        nextDisabled={!isPropertyKnown}
+      />
+    </div>
+  );
+}
+
+// ─── 3. LoanDetailsRefinanceStep ─────────────────────────────────────────────
+
+export type RefinanceProperty = {
+  id: string;
+  address: string;
+  estimateValue?: number;
+};
+
+export type LoanDetailsRefinanceStepProps = {
+  properties: RefinanceProperty[];
+  selectedIds: string[];
+  onToggle: (id: string) => void;
+  onPrev: () => void;
+  onNext: () => void;
+  className?: string;
+};
+
+export function LoanDetailsRefinanceStep({
+  properties,
+  selectedIds,
+  onToggle,
+  onPrev,
+  onNext,
+  className,
+}: LoanDetailsRefinanceStepProps) {
+  const selectedSet = new Set(selectedIds);
+
+  return (
+    <div className={cn("flex flex-col gap-6 font-sans", className)}>
+      <p className="text-sm font-medium text-foreground">
+        Select What Properties You Would Like to Refinance
+      </p>
+
+      {properties.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          No properties found. Add properties in the Assets section first.
+        </p>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {properties.map((prop) => (
+            <button
+              key={prop.id}
+              type="button"
+              onClick={() => onToggle(prop.id)}
+              className={cn(
+                "flex items-center justify-between border p-4 text-left transition-colors",
+                selectedSet.has(prop.id)
+                  ? "border-primary bg-primary/5"
+                  : "border-border bg-background hover:bg-accent",
+              )}
+            >
+              <div className="flex flex-col gap-0.5">
+                <span className="text-sm font-medium text-foreground">
+                  {prop.address}
+                </span>
+                {prop.estimateValue != null && (
+                  <span className="text-xs text-muted-foreground">
+                    Est. ${prop.estimateValue.toLocaleString("en-AU")}
+                  </span>
+                )}
+              </div>
+              <CheckboxIcon
+                checked={selectedSet.has(prop.id)}
+                className="size-5 shrink-0"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+
+      <StepNav
+        onPrev={onPrev}
+        onNext={onNext}
+        nextDisabled={selectedIds.length === 0}
+      />
+    </div>
+  );
+}
+
+// ─── 4. LoanFixedRateConcernStep ─────────────────────────────────────────────
+
+export type LoanFixedRateConcernStepProps = {
+  fixedRateConcern: string | null;
+  jobSecurityScale: string | null;
+  onFixedRateConcernChange: (v: string) => void;
+  onJobSecurityScaleChange: (v: string) => void;
+  onPrev: () => void;
+  onNext: () => void;
+  className?: string;
+};
+
+export function LoanFixedRateConcernStep({
+  fixedRateConcern,
+  jobSecurityScale,
+  onFixedRateConcernChange,
+  onJobSecurityScaleChange,
+  onPrev,
+  onNext,
+  className,
+}: LoanFixedRateConcernStepProps) {
+  return (
+    <div className={cn("flex flex-col gap-10 font-sans", className)}>
+      <LoanOptionGroup
+        title="Would you consider taking a fixed rate (either all fixed or a split loan with part fixed and part variable)?"
+        options={YES_NO}
+        value={fixedRateConcern}
+        onChange={(v) => onFixedRateConcernChange(v as string)}
+      />
+      {fixedRateConcern && (
+        <LoanOptionGroup
+          title="On a scale of 1–10 how would you rate your current job security? (1 = not secure, 10 = highly secure)"
+          options={scaleOptions(1, 10)}
+          value={jobSecurityScale}
+          onChange={(v) => onJobSecurityScaleChange(v as string)}
+        />
+      )}
+      <StepNav
+        onPrev={onPrev}
+        onNext={onNext}
+        nextDisabled={!fixedRateConcern}
+      />
+    </div>
+  );
+}
+
+// ─── 5. LoanBorrowIntendStep ─────────────────────────────────────────────────
+
+export type LoanBorrowIntendStepProps = {
+  borrowIntend: string | null;
+  onBorrowIntendChange: (v: string) => void;
+  onPrev: () => void;
+  onNext: () => void;
+  className?: string;
+};
+
+export function LoanBorrowIntendStep({
+  borrowIntend,
+  onBorrowIntendChange,
+  onPrev,
+  onNext,
+  className,
+}: LoanBorrowIntendStepProps) {
+  return (
+    <div className={cn("flex flex-col gap-10 font-sans", className)}>
+      <LoanOptionGroup
+        title="Do you intend to borrow money other than your property?"
+        options={YES_NO}
+        value={borrowIntend}
+        onChange={(v) => onBorrowIntendChange(v as string)}
+      />
+      <StepNav onPrev={onPrev} onNext={onNext} nextDisabled={!borrowIntend} />
+    </div>
+  );
+}
+
+// ─── 6. LoanPriorityStep ─────────────────────────────────────────────────────
+
+export const LOAN_PRIORITY_OPTIONS: LoanOptionItem[] = [
+  { value: "lowest-rate", label: "Lowest Rate" },
+  { value: "offset-account", label: "Offset Account" },
+  { value: "redraw-facility", label: "Redraw Facility" },
+  { value: "repayment-flexibility", label: "Repayment Flexibility" },
+  { value: "lender-stability", label: "Lender Stability" },
+  { value: "customer-service", label: "Customer Service" },
+];
+
+export type LoanPriorityStepProps = {
+  priorities: string[];
+  onPrioritiesChange: (v: string[]) => void;
+  onPrev: () => void;
+  onNext: () => void;
+  className?: string;
+};
+
+export function LoanPriorityStep({
+  priorities,
+  onPrioritiesChange,
+  onPrev,
+  onNext,
+  className,
+}: LoanPriorityStepProps) {
+  return (
+    <div className={cn("flex flex-col gap-10 font-sans", className)}>
+      <LoanOptionGroup
+        title="List out your top three priorities with the loan"
+        options={LOAN_PRIORITY_OPTIONS}
+        values={priorities}
+        multiple
+        max={3}
+        showRank
+        onChange={(v) => onPrioritiesChange(v as string[])}
+      />
+      <StepNav
+        onPrev={onPrev}
+        onNext={onNext}
+        nextDisabled={priorities.length === 0}
+      />
+    </div>
+  );
+}
+
+// ─── 7. LoanRetirementPlanStep ───────────────────────────────────────────────
+
+export type LoanRetirementPlanStepProps = {
+  retirementAge: number;
+  hasRetirementPlan: string | null;
+  retirementAgeError?: string;
+  onRetirementAgeChange: (v: number) => void;
+  onHasRetirementPlanChange: (v: string) => void;
+  onPrev: () => void;
+  onSaveAndNext: () => void;
+  className?: string;
+};
+
+export function LoanRetirementPlanStep({
+  retirementAge,
+  hasRetirementPlan,
+  retirementAgeError,
+  onRetirementAgeChange,
+  onHasRetirementPlanChange,
+  onPrev,
+  onSaveAndNext,
+  className,
+}: LoanRetirementPlanStepProps) {
+  return (
+    <div className={cn("flex flex-col gap-10 font-sans", className)}>
+      <div className="flex flex-col gap-1">
+        <label className="text-sm font-medium text-foreground">
+          What age are you planning to retire?
+        </label>
+        <input
+          type="number"
+          min={0}
+          max={100}
+          value={retirementAge || ""}
+          onChange={(e) => onRetirementAgeChange(Number(e.target.value))}
+          placeholder="e.g. 65"
+          className={cn(
+            "w-32 border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+            retirementAgeError ? "border-destructive" : "border-input",
+          )}
+        />
+        {retirementAgeError && (
+          <p className="text-xs text-destructive">{retirementAgeError}</p>
+        )}
+      </div>
+
+      <LoanOptionGroup
+        title="Do you plan or anticipate changes (other than retirement) to your future financial circumstances that could adversely impact your ability to repay the loan?"
+        options={YES_NO}
+        value={hasRetirementPlan}
+        onChange={(v) => onHasRetirementPlanChange(v as string)}
+      />
+
+      <StepNav
+        onPrev={onPrev}
+        onNext={onSaveAndNext}
+        nextLabel="Save & Next"
+        nextDisabled={!retirementAge || !hasRetirementPlan}
+      />
+    </div>
+  );
+}
+
+// ─── 8. LoanInterestRateRaiseConcernStep ─────────────────────────────────────
+
+export type LoanInterestRateRaiseConcernStepProps = {
+  raiseConcern: string | null;
+  raiseConcernScale: string | null;
+  onRaiseConcernChange: (v: string) => void;
+  onRaiseConcernScaleChange: (v: string) => void;
+  onPrev: () => void;
+  onNext: () => void;
+  className?: string;
+};
+
+export function LoanInterestRateRaiseConcernStep({
+  raiseConcern,
+  raiseConcernScale,
+  onRaiseConcernChange,
+  onRaiseConcernScaleChange,
+  onPrev,
+  onNext,
+  className,
+}: LoanInterestRateRaiseConcernStepProps) {
+  return (
+    <div className={cn("flex flex-col gap-10 font-sans", className)}>
+      <LoanOptionGroup
+        title="Are you concerned about rising interest rates?"
+        options={YES_NO}
+        value={raiseConcern}
+        onChange={(v) => onRaiseConcernChange(v as string)}
+      />
+      {raiseConcern === "yes" && (
+        <LoanOptionGroup
+          title="On a scale of 1–10 how concerned are you about rising interest rates? (1 = not concerned, 10 = highly concerned)"
+          options={scaleOptions(1, 10)}
+          value={raiseConcernScale}
+          onChange={(v) => onRaiseConcernScaleChange(v as string)}
+        />
+      )}
+      <StepNav onPrev={onPrev} onNext={onNext} nextDisabled={!raiseConcern} />
+    </div>
+  );
+}
+
+// ─── 9. LoanFeaturesStep ─────────────────────────────────────────────────────
+
+export const LOAN_FEATURE_OPTIONS: LoanOptionItem[] = [
+  { value: "offset", label: "Offset Account" },
+  { value: "redraw", label: "Redraw" },
+  { value: "split", label: "Split Loan" },
+  { value: "extra-repayments", label: "Extra Repayments" },
+  { value: "interest-only", label: "Interest Only" },
+];
+
+export type LoanFeaturesStepProps = {
+  featuresAcknowledge: string | null;
+  feature: string | null;
+  onFeaturesAcknowledgeChange: (v: string) => void;
+  onFeatureChange: (v: string) => void;
+  onPrev: () => void;
+  onNext: () => void;
+  className?: string;
+};
+
+export function LoanFeaturesStep({
+  featuresAcknowledge,
+  feature,
+  onFeaturesAcknowledgeChange,
+  onFeatureChange,
+  onPrev,
+  onNext,
+  className,
+}: LoanFeaturesStepProps) {
+  return (
+    <div className={cn("flex flex-col gap-10 font-sans", className)}>
+      <LoanOptionGroup
+        title="Do you know what loan features you want? (e.g. offset account, redraw)"
+        options={YES_NO}
+        value={featuresAcknowledge}
+        onChange={(v) => onFeaturesAcknowledgeChange(v as string)}
+      />
+      {featuresAcknowledge === "yes" && (
+        <LoanOptionGroup
+          title="What features are important to you?"
+          options={LOAN_FEATURE_OPTIONS}
+          value={feature}
+          onChange={(v) => onFeatureChange(v as string)}
+        />
+      )}
+      <StepNav
+        onPrev={onPrev}
+        onNext={onNext}
+        nextDisabled={
+          !featuresAcknowledge || (featuresAcknowledge === "yes" && !feature)
+        }
+      />
+    </div>
+  );
+}
+
+// ─── Icon helpers ────────────────────────────────────────────────────────────
+
+function ChevronLeftIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  );
+}
+
+function ChevronRightIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}
+
+function CheckboxIcon({
+  checked,
+  className,
+}: {
+  checked: boolean;
+  className?: string;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn(
+        checked ? "text-primary" : "text-muted-foreground",
+        className,
+      )}
+      aria-hidden="true"
+    >
+      {checked ? (
+        <>
+          <rect x="3" y="3" width="18" height="18" rx="0" />
+          <path d="m9 12 2 2 4-4" />
+        </>
+      ) : (
+        <rect x="3" y="3" width="18" height="18" rx="0" />
+      )}
+    </svg>
+  );
+}