@dmsi/wedgekit-react 0.0.86 → 0.0.88

package/dist/{chunk-S3CQ5VFT.js → chunk-2XOQII4G.js}

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-MZJS2ZAU.js";
+} from "./chunk-L364HTYC.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-TVDFTRGL.js → chunk-3JRVV6QY.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-J6LETUNM.js";
 import {
   Button
-} from "./chunk-MZJS2ZAU.js";
+} from "./chunk-L364HTYC.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";

package/dist/{chunk-4N2PED4P.js → chunk-3NWBR3V3.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-S5K22XTH.js";
 import {
   Button
-} from "./chunk-MZJS2ZAU.js";
+} from "./chunk-L364HTYC.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";

package/dist/chunk-5OHGKW4U.js

@@ -0,0 +1,9 @@
+// src/components/HorizontalDivider.tsx
+import { jsx } from "react/jsx-runtime";
+function HorizontalDivider({ id }) {
+  return /* @__PURE__ */ jsx("hr", { id, className: "w-full border-t border-border-primary-normal" });
+}
+
+export {
+  HorizontalDivider
+};

package/dist/chunk-5UH6QUFB.js

@@ -0,0 +1,38 @@
+// src/utils/formatting.tsx
+function getDecimalPlaceholder(decimals) {
+  if (!decimals || decimals <= 0) {
+    return {};
+  }
+  return {
+    placeholder: `0.${"0".repeat(decimals)}`
+  };
+}
+function formatDecimalValue(value, decimals) {
+  if (!value || value === "") {
+    return "";
+  }
+  const numValue = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(numValue)) {
+    return "";
+  }
+  if (!decimals || decimals <= 0) {
+    return String(Math.round(numValue));
+  }
+  return numValue.toFixed(decimals);
+}
+function formatCurrencyDisplay(value) {
+  if (!value || value === "") {
+    return "";
+  }
+  const parts = value.split(".");
+  const integerPart = parts[0];
+  const decimalPart = parts[1];
+  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return decimalPart !== void 0 ? `${formattedInteger}.${decimalPart}` : formattedInteger;
+}
+
+export {
+  getDecimalPlaceholder,
+  formatDecimalValue,
+  formatCurrencyDisplay
+};

package/dist/{chunk-QUPHLL7D.js → chunk-6CS5ZBXO.js}

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-MZJS2ZAU.js";
+} from "./chunk-L364HTYC.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";

package/dist/{chunk-OW3SZEU5.js → chunk-EO3JJWFW.js}

@@ -1,3 +1,6 @@
+import {
+  paddingYUsingLayoutGroupGap
+} from "./chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,
@@ -149,7 +152,7 @@ var Stack = (_a) => {
         paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
         paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
         paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
-        paddingY && sizing === "layout-group" && "py-mobile-layout-group-padding desktop:py-desktop-layout-group-padding compact:py-desktop-compact-layout-group-padding",
+        paddingY && sizing === "layout-group" && paddingYUsingLayoutGroupGap,
         paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
         margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
         marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",

package/dist/{chunk-SAMX4YGM.js → chunk-IMN6I5NV.js}

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-MZJS2ZAU.js";
+} from "./chunk-L364HTYC.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";

package/dist/chunk-JOMM4KBH.js

@@ -0,0 +1,26 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Card.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+function Card(props) {
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({}, rest), {
+      className: clsx(
+        "border rounded-sm border-border-primary-normal p-desktop-layout-padding",
+        rest.className
+      ),
+      children
+    })
+  );
+}
+
+export {
+  Card
+};

package/dist/{chunk-MZJS2ZAU.js → chunk-L364HTYC.js}

@@ -129,7 +129,7 @@ var Button = (_a) => {
     componentPaddingXUsingComponentGap,
     typography.buttonLabel
   );
-  const Element = href ? "a" : as;
+  const Element = href && !as ? "a" : as;
   return /* @__PURE__ */ jsxs(
     Element,
     __spreadProps(__spreadValues({
@@ -137,6 +137,7 @@ var Button = (_a) => {
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
+      onClick: props.onClick,
       disabled,
       href,
       children: [

package/dist/{chunk-CKSDMI2Q.js → chunk-LYVH4YFE.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-5GUW4DUY.js";
 import {
   MenuOption
-} from "./chunk-UPBBOZM3.js";
+} from "./chunk-VH3EJNVE.js";
 import {
   Search
-} from "./chunk-LP6AZST2.js";
+} from "./chunk-OB3URVCR.js";
 import {
   CSS
 } from "./chunk-WVUIIBRR.js";

package/dist/{chunk-LP6AZST2.js → chunk-OB3URVCR.js}

@@ -1,6 +1,6 @@
 import {
   Input
-} from "./chunk-724LJWFR.js";
+} from "./chunk-R5TLUWDD.js";
 import {
   __objRest,
   __spreadValues

package/dist/chunk-QDFQ3B4N.js

@@ -0,0 +1,87 @@
+import {
+  Stack
+} from "./chunk-EO3JJWFW.js";
+import {
+  Card
+} from "./chunk-JOMM4KBH.js";
+import {
+  Paragraph
+} from "./chunk-VG4EPHJA.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  typography
+} from "./chunk-RDLEIAQU.js";
+
+// src/components/Accordion.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Accordion(props) {
+  const { isOpen, onClick, className } = props;
+  const {
+    title,
+    before,
+    after = /* @__PURE__ */ jsx(
+      Icon,
+      {
+        name: "expand_more",
+        className: clsx(
+          "text-icon-primary-normal transform transition-all duration-300 ease-in-out",
+          isOpen ? "rotate-180" : "rotate-0"
+        )
+      }
+    ),
+    children
+  } = props;
+  function handleClick(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    onClick == null ? void 0 : onClick();
+  }
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: clsx(
+        "overflow-hidden select-none cursor-pointer",
+        className,
+        isOpen && "border-2 !border-border-primary-focus"
+      ),
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
+          /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
+            before,
+            typeof title === "string" ? /* @__PURE__ */ jsx(Paragraph, { className: "text-text-primary-normal", children: title }) : title
+          ] }),
+          after
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx("grid transition-all duration-300 ease-in-out"),
+            style: {
+              gridTemplateRows: isOpen ? "1fr" : "0fr"
+            },
+            children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  typography.paragraph,
+                  "text-text-primary-normal desktop:pt-desktop-layout-gap",
+                  "flex flex-col gap-desktop-layout-gap"
+                ),
+                onClick: (e) => e.stopPropagation(),
+                children
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  Accordion
+};

package/dist/{chunk-MQWWNAO3.js → chunk-QIHDPSOM.js}

@@ -1,18 +1,18 @@
 import {
   useMounted
 } from "./chunk-4RJKB7LC.js";
+import {
+  ModalButtons
+} from "./chunk-6CS5ZBXO.js";
 import {
   ModalContent
 } from "./chunk-FWPJ73IK.js";
 import {
   ModalHeader
-} from "./chunk-TVDFTRGL.js";
+} from "./chunk-3JRVV6QY.js";
 import {
   ModalScrim
 } from "./chunk-4JLU7TAC.js";
-import {
-  ModalButtons
-} from "./chunk-QUPHLL7D.js";
 import {
   useMatchesMobile
 } from "./chunk-WNQ53SVY.js";

package/dist/{chunk-724LJWFR.js → chunk-R5TLUWDD.js}

@@ -1,3 +1,8 @@
+import {
+  formatCurrencyDisplay,
+  formatDecimalValue,
+  getDecimalPlaceholder
+} from "./chunk-5UH6QUFB.js";
 import {
   Label
 } from "./chunk-S5K22XTH.js";
@@ -24,41 +29,6 @@ import {
   useState
 } from "react";
 import clsx from "clsx";
-
-// src/utils/formatting.tsx
-function getDecimalPlaceholder(decimals) {
-  if (!decimals || decimals <= 0) {
-    return {};
-  }
-  return {
-    placeholder: `0.${"0".repeat(decimals)}`
-  };
-}
-function formatDecimalValue(value, decimals) {
-  if (!value || value === "") {
-    return "";
-  }
-  const numValue = typeof value === "string" ? parseFloat(value) : value;
-  if (isNaN(numValue)) {
-    return "";
-  }
-  if (!decimals || decimals <= 0) {
-    return String(Math.round(numValue));
-  }
-  return numValue.toFixed(decimals);
-}
-function formatCurrencyDisplay(value) {
-  if (!value || value === "") {
-    return "";
-  }
-  const parts = value.split(".");
-  const integerPart = parts[0];
-  const decimalPart = parts[1];
-  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-  return decimalPart !== void 0 ? `${formattedInteger}.${decimalPart}` : formattedInteger;
-}
-
-// src/components/Input.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var InputBase = (_a) => {
   var _b = _a, {

package/dist/chunk-RHADESKO.js

@@ -0,0 +1,57 @@
+import {
+  SelectPaymentMethod
+} from "./chunk-SASEP5UE.js";
+import {
+  Modal
+} from "./chunk-QIHDPSOM.js";
+import {
+  Input
+} from "./chunk-R5TLUWDD.js";
+import {
+  Stack
+} from "./chunk-EO3JJWFW.js";
+import {
+  Card
+} from "./chunk-JOMM4KBH.js";
+import {
+  Paragraph
+} from "./chunk-VG4EPHJA.js";
+import {
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/PaymentOnAccountModal.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PaymentOnAccountModal(props) {
+  const { isOpen, paymentProps, onClose } = props;
+  const [amount, setAmount] = useState(paymentProps.amountToPay);
+  useEffect(() => {
+    setAmount(paymentProps.amountToPay);
+  }, [paymentProps.amountToPay]);
+  function handleAmountChange(event) {
+    const value = event.target.value.replace(/[^0-9.-]+/g, "");
+    setAmount(+value || 0);
+  }
+  return /* @__PURE__ */ jsx(Modal, { open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", width: "full", children: [
+    /* @__PURE__ */ jsx(Card, { className: "py-desktop-component-padding", children: /* @__PURE__ */ jsxs(Stack, { sizing: "component", justify: "between", items: "center", horizontal: true, children: [
+      /* @__PURE__ */ jsx(Paragraph, { className: "w-full", children: "Amount to Pay" }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "number",
+          placeholder: "$0.00",
+          align: "right",
+          value: amount === 0 ? "" : amount,
+          onChange: handleAmountChange,
+          before: "$"
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(SelectPaymentMethod, __spreadValues({}, paymentProps))
+  ] }) });
+}
+
+export {
+  PaymentOnAccountModal
+};

package/dist/chunk-SASEP5UE.js

@@ -0,0 +1,235 @@
+import {
+  Radio
+} from "./chunk-TTO4PL7Y.js";
+import {
+  HorizontalDivider
+} from "./chunk-5OHGKW4U.js";
+import {
+  Checkbox
+} from "./chunk-WT5XXW6G.js";
+import {
+  formatCurrencyDisplay
+} from "./chunk-5UH6QUFB.js";
+import {
+  Subheader
+} from "./chunk-O4M2GISS.js";
+import {
+  Accordion
+} from "./chunk-QDFQ3B4N.js";
+import {
+  Stack
+} from "./chunk-EO3JJWFW.js";
+import {
+  Card
+} from "./chunk-JOMM4KBH.js";
+import {
+  Paragraph
+} from "./chunk-VG4EPHJA.js";
+import {
+  Button
+} from "./chunk-L364HTYC.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+
+// src/components/SelectPaymentMethod.tsx
+import { useEffect, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SelectPaymentMethod(props) {
+  const {
+    selectedMethod,
+    onSelectMethod,
+    selectedCredits,
+    allCredits,
+    allowedMethods,
+    selectedACHBankGuid,
+    setSelectedACHBankGuid,
+    customerBanks,
+    onPay,
+    isPayLoading
+  } = props;
+  function handleToggle(method) {
+    onSelectMethod(method);
+  }
+  return /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
+    !!(allCredits == null ? void 0 : allCredits.length) && /* @__PURE__ */ jsx(
+      CreditsSelector,
+      {
+        selectedCredits: selectedCredits || [],
+        allCredits: allCredits || [],
+        setSelectedCredits: props.setSelectedCredits || (() => {
+        })
+      }
+    ),
+    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ jsx(
+      ACHSelector,
+      {
+        selectedMethod,
+        handleToggle,
+        selectedBankGuid: selectedACHBankGuid || null,
+        setSelectedBankGuid: setSelectedACHBankGuid || (() => {
+        }),
+        customerBanks: customerBanks || [],
+        onPay,
+        isPayLoading: isPayLoading || false
+      }
+    ),
+    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ jsx(
+      Accordion,
+      {
+        isOpen: selectedMethod === "CCPayment",
+        title: "Pay by Credit/Debit Card",
+        before: /* @__PURE__ */ jsx(Radio, { checked: selectedMethod === "CCPayment", readOnly: true }),
+        onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
+        children: /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
+      }
+    )
+  ] });
+}
+function ACHSelector(props) {
+  var _a;
+  const {
+    selectedMethod,
+    handleToggle,
+    selectedBankGuid,
+    setSelectedBankGuid,
+    customerBanks,
+    onPay,
+    isPayLoading
+  } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  useEffect(() => {
+    if (selectedMethod === "CCPayment") return setIsOpen(false);
+  }, [selectedMethod]);
+  useEffect(() => {
+    if (isOpen) {
+      if (!selectedBankGuid) {
+        setSelectedBankGuid(customerBanks[0].CustBankGUID);
+      }
+      handleToggle("ACHPayment");
+      return;
+    }
+  }, [isOpen]);
+  function handleBankSelect(e, bankGuid) {
+    e.stopPropagation();
+    setSelectedBankGuid(bankGuid);
+    handleToggle("ACHPayment");
+  }
+  return /* @__PURE__ */ jsx(
+    Accordion,
+    {
+      isOpen,
+      title: selectedBankGuid ? (_a = customerBanks.find((bank) => bank.CustBankGUID === selectedBankGuid)) == null ? void 0 : _a.AccountDisplayString : "Select a Bank",
+      before: /* @__PURE__ */ jsx(
+        Radio,
+        {
+          checked: !!selectedBankGuid && selectedMethod === "ACHPayment",
+          readOnly: true
+        }
+      ),
+      onClick: () => setIsOpen((prev) => !prev),
+      children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", width: "full", children: [
+        /* @__PURE__ */ jsx(
+          Stack,
+          {
+            sizing: "layout-group",
+            width: "full",
+            overflowY: "auto",
+            maxHeight: 200,
+            children: customerBanks.map((bank) => /* @__PURE__ */ jsx(
+              Card,
+              {
+                className: clsx(
+                  "transition-colors duration-300 py-desktop-compact-layout-padding cursor-pointer hover:bg-background-secondary-normal/30",
+                  selectedBankGuid === bank.CustBankGUID && "bg-background-secondary-normal/20"
+                ),
+                onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
+                children: /* @__PURE__ */ jsxs(Stack, { horizontal: true, items: "center", justify: "between", children: [
+                  /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "question_mark" }),
+                    /* @__PURE__ */ jsx(Paragraph, { children: bank.AccountDisplayString })
+                  ] }),
+                  selectedBankGuid === bank.CustBankGUID && /* @__PURE__ */ jsx(Icon, { name: "check" })
+                ] })
+              },
+              bank.CustBankGUID
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
+      ] })
+    }
+  );
+}
+function CreditsSelector(props) {
+  const { selectedCredits, allCredits, setSelectedCredits } = props;
+  const [isOpen, setIsOpen] = useState(true);
+  const handleCreditSelect = (credit) => {
+    if (setSelectedCredits) {
+      setSelectedCredits(
+        (prev) => prev.includes(credit) ? prev.filter((c) => c !== credit) : [...prev, credit]
+      );
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Accordion,
+    {
+      isOpen,
+      title: "Available Credits",
+      onClick: () => setIsOpen((prev) => !prev),
+      children: [
+        /* @__PURE__ */ jsx(HorizontalDivider, {}),
+        /* @__PURE__ */ jsx(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ jsx(
+          Stack,
+          {
+            sizing: "layout-group",
+            width: "full",
+            overflowY: "auto",
+            maxHeight: 300,
+            children: allCredits.map((credits) => /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                horizontal: true,
+                justify: "between",
+                items: "center",
+                sizing: "layout-group",
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Stack,
+                    {
+                      horizontal: true,
+                      items: "center",
+                      sizing: "layout-group",
+                      onClick: () => handleCreditSelect(credits),
+                      paddingY: true,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Checkbox,
+                          {
+                            checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
+                            onChange: () => handleCreditSelect(credits)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Paragraph, { children: credits.InvoiceNumber })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Subheader, { className: " pr-desktop-component-padding", children: [
+                    "$",
+                    formatCurrencyDisplay(`${Math.abs(credits.InvoiceBalance)}`)
+                  ] })
+                ]
+              },
+              credits.AROpenGUID
+            ))
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export {
+  SelectPaymentMethod
+};