@wealthx/shadcn 1.4.0 → 1.5.0

package/dist/components/ui/loan-steps.mjs

@@ -0,0 +1,509 @@
+import {
+  CurrencyInput
+} from "../../chunk-EMYBNPIA.mjs";
+import "../../chunk-7YI3HEBH.mjs";
+import "../../chunk-BS75ICOO.mjs";
+import {
+  LoanOptionGroup
+} from "../../chunk-FFXTQTB4.mjs";
+import "../../chunk-OWFQSXVD.mjs";
+import "../../chunk-6QAFGZC2.mjs";
+import "../../chunk-LBTHZSBT.mjs";
+import {
+  Button
+} from "../../chunk-NOOEKOWY.mjs";
+import "../../chunk-R4HCRDU5.mjs";
+import {
+  cn
+} from "../../chunk-AFML43VJ.mjs";
+import "../../chunk-WNQUEZJF.mjs";
+
+// src/components/ui/loan-steps.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var YES_NO = [
+  { value: "yes", label: "Yes" },
+  { value: "no", label: "No" }
+];
+function scaleOptions(min, max) {
+  return Array.from({ length: max - min + 1 }, (_, i) => {
+    const v = String(min + i);
+    return { value: v, label: v };
+  });
+}
+function StepNav({
+  onPrev,
+  onNext,
+  nextLabel = "Next",
+  nextDisabled = false,
+  hidePrev = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between pt-6", className), children: [
+    !hidePrev ? /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: onPrev, children: [
+      /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "mr-1 size-4" }),
+      "Previous"
+    ] }) : /* @__PURE__ */ jsx("span", {}),
+    /* @__PURE__ */ jsxs(Button, { onClick: onNext, disabled: nextDisabled, children: [
+      nextLabel,
+      /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-1 size-4" })
+    ] })
+  ] });
+}
+var LENDING_TYPE_OPTIONS = [
+  { value: "owner-occupier", label: "Owner Occupier" },
+  { value: "investment", label: "Investment" },
+  { value: "both", label: "Both" }
+];
+var LOAN_PURPOSE_OPTIONS = [
+  { value: "buy", label: "Buy a New Property" },
+  { value: "refinance", label: "Refinance" },
+  { value: "equity", label: "Equity Release" },
+  { value: "construction", label: "Construction" }
+];
+function LoanPurposeStep({
+  lendingType,
+  loanPurpose,
+  onLendingTypeChange,
+  onLoanPurposeChange,
+  onNext,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10 font-sans", className), children: [
+    /* @__PURE__ */ jsx(
+      LoanOptionGroup,
+      {
+        title: "What Type of Lending Are You Looking For?",
+        options: LENDING_TYPE_OPTIONS,
+        value: lendingType,
+        onChange: (v) => onLendingTypeChange(v)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LoanOptionGroup,
+      {
+        title: "What Would You Like to Do?",
+        options: LOAN_PURPOSE_OPTIONS,
+        value: loanPurpose,
+        onChange: (v) => onLoanPurposeChange(v)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StepNav,
+      {
+        hidePrev: true,
+        onNext,
+        nextDisabled: !lendingType || !loanPurpose
+      }
+    )
+  ] });
+}
+function LoanDetailsBuyStep({
+  isPropertyKnown,
+  propertyAddress = "",
+  propertyEstimate = 0,
+  loanAmount = 0,
+  onIsPropertyKnownChange,
+  onPropertyAddressChange,
+  onPropertyEstimateChange,
+  onLoanAmountChange,
+  onPrev,
+  onNext,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8 font-sans", className), children: [
+    /* @__PURE__ */ jsx(
+      LoanOptionGroup,
+      {
+        title: "Do you have a specific property in mind?",
+        options: YES_NO,
+        value: isPropertyKnown,
+        onChange: (v) => onIsPropertyKnownChange(v)
+      }
+    ),
+    isPropertyKnown === "yes" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-foreground", children: "Property Address" }),
+        /* @__PURE__ */ jsx(
+          "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"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-foreground", children: "Property Value" }),
+          /* @__PURE__ */ jsx(
+            CurrencyInput,
+            {
+              value: propertyEstimate,
+              onChange: onPropertyEstimateChange
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-foreground", children: "Loan Amount" }),
+          /* @__PURE__ */ jsx(CurrencyInput, { value: loanAmount, onChange: onLoanAmountChange })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      StepNav,
+      {
+        onPrev,
+        onNext,
+        nextDisabled: !isPropertyKnown
+      }
+    )
+  ] });
+}
+function LoanDetailsRefinanceStep({
+  properties,
+  selectedIds,
+  onToggle,
+  onPrev,
+  onNext,
+  className
+}) {
+  const selectedSet = new Set(selectedIds);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 font-sans", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Select What Properties You Would Like to Refinance" }),
+    properties.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No properties found. Add properties in the Assets section first." }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: properties.map((prop) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        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"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: prop.address }),
+            prop.estimateValue != null && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              "Est. $",
+              prop.estimateValue.toLocaleString("en-AU")
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            CheckboxIcon,
+            {
+              checked: selectedSet.has(prop.id),
+              className: "size-5 shrink-0"
+            }
+          )
+        ]
+      },
+      prop.id
+    )) }),
+    /* @__PURE__ */ jsx(
+      StepNav,
+      {
+        onPrev,
+        onNext,
+        nextDisabled: selectedIds.length === 0
+      }
+    )
+  ] });
+}
+function LoanFixedRateConcernStep({
+  fixedRateConcern,
+  jobSecurityScale,
+  onFixedRateConcernChange,
+  onJobSecurityScaleChange,
+  onPrev,
+  onNext,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10 font-sans", className), children: [
+    /* @__PURE__ */ jsx(
+      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)
+      }
+    ),
+    fixedRateConcern && /* @__PURE__ */ jsx(
+      LoanOptionGroup,
+      {
+        title: "On a scale of 1\u201310 how would you rate your current job security? (1 = not secure, 10 = highly secure)",
+        options: scaleOptions(1, 10),
+        value: jobSecurityScale,
+        onChange: (v) => onJobSecurityScaleChange(v)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StepNav,
+      {
+        onPrev,
+        onNext,
+        nextDisabled: !fixedRateConcern
+      }
+    )
+  ] });
+}
+function LoanBorrowIntendStep({
+  borrowIntend,
+  onBorrowIntendChange,
+  onPrev,
+  onNext,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10 font-sans", className), children: [
+    /* @__PURE__ */ jsx(
+      LoanOptionGroup,
+      {
+        title: "Do you intend to borrow money other than your property?",
+        options: YES_NO,
+        value: borrowIntend,
+        onChange: (v) => onBorrowIntendChange(v)
+      }
+    ),
+    /* @__PURE__ */ jsx(StepNav, { onPrev, onNext, nextDisabled: !borrowIntend })
+  ] });
+}
+var LOAN_PRIORITY_OPTIONS = [
+  { 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" }
+];
+function LoanPriorityStep({
+  priorities,
+  onPrioritiesChange,
+  onPrev,
+  onNext,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10 font-sans", className), children: [
+    /* @__PURE__ */ jsx(
+      LoanOptionGroup,
+      {
+        title: "List out your top three priorities with the loan",
+        options: LOAN_PRIORITY_OPTIONS,
+        values: priorities,
+        multiple: true,
+        max: 3,
+        showRank: true,
+        onChange: (v) => onPrioritiesChange(v)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StepNav,
+      {
+        onPrev,
+        onNext,
+        nextDisabled: priorities.length === 0
+      }
+    )
+  ] });
+}
+function LoanRetirementPlanStep({
+  retirementAge,
+  hasRetirementPlan,
+  retirementAgeError,
+  onRetirementAgeChange,
+  onHasRetirementPlanChange,
+  onPrev,
+  onSaveAndNext,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10 font-sans", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-foreground", children: "What age are you planning to retire?" }),
+      /* @__PURE__ */ jsx(
+        "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 && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: retirementAgeError })
+    ] }),
+    /* @__PURE__ */ jsx(
+      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)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StepNav,
+      {
+        onPrev,
+        onNext: onSaveAndNext,
+        nextLabel: "Save & Next",
+        nextDisabled: !retirementAge || !hasRetirementPlan
+      }
+    )
+  ] });
+}
+function LoanInterestRateRaiseConcernStep({
+  raiseConcern,
+  raiseConcernScale,
+  onRaiseConcernChange,
+  onRaiseConcernScaleChange,
+  onPrev,
+  onNext,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10 font-sans", className), children: [
+    /* @__PURE__ */ jsx(
+      LoanOptionGroup,
+      {
+        title: "Are you concerned about rising interest rates?",
+        options: YES_NO,
+        value: raiseConcern,
+        onChange: (v) => onRaiseConcernChange(v)
+      }
+    ),
+    raiseConcern === "yes" && /* @__PURE__ */ jsx(
+      LoanOptionGroup,
+      {
+        title: "On a scale of 1\u201310 how concerned are you about rising interest rates? (1 = not concerned, 10 = highly concerned)",
+        options: scaleOptions(1, 10),
+        value: raiseConcernScale,
+        onChange: (v) => onRaiseConcernScaleChange(v)
+      }
+    ),
+    /* @__PURE__ */ jsx(StepNav, { onPrev, onNext, nextDisabled: !raiseConcern })
+  ] });
+}
+var LOAN_FEATURE_OPTIONS = [
+  { 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" }
+];
+function LoanFeaturesStep({
+  featuresAcknowledge,
+  feature,
+  onFeaturesAcknowledgeChange,
+  onFeatureChange,
+  onPrev,
+  onNext,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10 font-sans", className), children: [
+    /* @__PURE__ */ jsx(
+      LoanOptionGroup,
+      {
+        title: "Do you know what loan features you want? (e.g. offset account, redraw)",
+        options: YES_NO,
+        value: featuresAcknowledge,
+        onChange: (v) => onFeaturesAcknowledgeChange(v)
+      }
+    ),
+    featuresAcknowledge === "yes" && /* @__PURE__ */ jsx(
+      LoanOptionGroup,
+      {
+        title: "What features are important to you?",
+        options: LOAN_FEATURE_OPTIONS,
+        value: feature,
+        onChange: (v) => onFeatureChange(v)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StepNav,
+      {
+        onPrev,
+        onNext,
+        nextDisabled: !featuresAcknowledge || featuresAcknowledge === "yes" && !feature
+      }
+    )
+  ] });
+}
+function ChevronLeftIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+    }
+  );
+}
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+function CheckboxIcon({
+  checked,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "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",
+      children: checked ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "0" }),
+        /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })
+      ] }) : /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "0" })
+    }
+  );
+}
+export {
+  LENDING_TYPE_OPTIONS,
+  LOAN_FEATURE_OPTIONS,
+  LOAN_PRIORITY_OPTIONS,
+  LOAN_PURPOSE_OPTIONS,
+  LoanBorrowIntendStep,
+  LoanDetailsBuyStep,
+  LoanDetailsRefinanceStep,
+  LoanFeaturesStep,
+  LoanFixedRateConcernStep,
+  LoanInterestRateRaiseConcernStep,
+  LoanPriorityStep,
+  LoanPurposeStep,
+  LoanRetirementPlanStep
+};