@dmsi/wedgekit-react 0.0.131 → 0.0.133

package/dist/{chunk-QLD6SOEU.js → chunk-DIMHNC5S.js}

@@ -1,6 +1,6 @@
 import {
   SelectPaymentMethod
-} from "./chunk-ZWEKVOHD.js";
+} from "./chunk-EQQMFT5H.js";
 import {
   Modal
 } from "./chunk-D2YP2BTN.js";
@@ -28,15 +28,17 @@ import {
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function PaymentOnAccountModal(props) {
-  const { isOpen, paymentProps, onClose } = props;
+  const { isOpen, paymentProps, onClose, onAmountChange } = props;
   const [amount, setAmount] = useState(paymentProps.amountToPay);
   const { creditCardSettings, selectedMethod } = paymentProps;
   useEffect(() => {
     setAmount(paymentProps.amountToPay);
   }, [paymentProps.amountToPay]);
   function handleAmountChange(event) {
-    const value = event.target.value.replace(/[^0-9.-]+/g, "");
-    setAmount(+value || 0);
+    const inputValue = event.target.value.replace(/[^0-9.-]+/g, "");
+    const value = +inputValue || 0;
+    setAmount(value);
+    onAmountChange == null ? void 0 : onAmountChange(value);
   }
   const creditCardSurcharge = useMemo(() => {
     const applySurcharge = (creditCardSettings == null ? void 0 : creditCardSettings.ApplySurcharge) || false;

package/dist/{chunk-ZWEKVOHD.js → chunk-EQQMFT5H.js}

@@ -27,10 +27,11 @@ import {
 } from "./chunk-H6LXXGX6.js";
 
 // src/components/SelectPaymentMethod.tsx
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function SelectPaymentMethod(props) {
   const {
+    amountToPay,
     selectedMethod,
     onSelectMethod,
     selectedCredits,
@@ -43,6 +44,14 @@ function SelectPaymentMethod(props) {
     isPayLoading,
     withCredits = false
   } = props;
+  const payAllWithCredits = withCredits && amountToPay <= 0;
+  useEffect(() => {
+    if (payAllWithCredits) {
+      onSelectMethod("CreditsOnly");
+    } else {
+      onSelectMethod("ACHPayment");
+    }
+  }, [payAllWithCredits]);
   function handleToggle(method) {
     onSelectMethod(method);
   }
@@ -66,26 +75,32 @@ function SelectPaymentMethod(props) {
         }),
         customerBanks: customerBanks || [],
         onPay,
-        isPayLoading: isPayLoading || false
+        isPayLoading: isPayLoading || false,
+        disabled: payAllWithCredits
       }
     ),
     (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ jsx(
       Accordion,
       {
-        isOpen: selectedMethod === "CCPayment",
+        isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
         title: /* @__PURE__ */ jsx(
           Radio,
           {
             label: "Pay by Credit/Debit Card",
-            checked: selectedMethod === "CCPayment",
-            onClick: (e) => e.preventDefault()
+            checked: !payAllWithCredits && selectedMethod === "CCPayment",
+            onChange: (e) => e.stopPropagation(),
+            disabled: amountToPay <= 0
           }
         ),
-        onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
+        onClick: () => {
+          if (payAllWithCredits) return;
+          handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
+        },
         children: /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
       }
     ),
-    selectedMethod === "ACHPayment" && /* @__PURE__ */ jsx(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
+    selectedMethod === "ACHPayment" && /* @__PURE__ */ jsx(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" }),
+    payAllWithCredits && /* @__PURE__ */ jsx(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
@@ -94,9 +109,11 @@ function ACHSelector(props) {
     handleToggle,
     selectedBankGuid,
     setSelectedBankGuid,
-    customerBanks
+    customerBanks,
+    disabled
   } = props;
   function handleBankSelect(e, bankGuid) {
+    if (disabled) return;
     e.stopPropagation();
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
@@ -105,12 +122,14 @@ function ACHSelector(props) {
     Card,
     {
       onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
-      selected: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
+      selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
       children: /* @__PURE__ */ jsx(
         Radio,
         {
           label: `Pay by ${bank.AccountDisplayString}`,
-          checked: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID
+          checked: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
+          disabled,
+          onChange: (e) => e.stopPropagation()
         }
       )
     },
@@ -169,7 +188,9 @@ function CreditsSelector(props) {
                   ),
                   /* @__PURE__ */ jsxs(Subheader, { className: " pr-desktop-component-padding", children: [
                     "$",
-                    formatCurrencyDisplay(`${Math.abs(credits.InvoiceBalance)}`)
+                    formatCurrencyDisplay(
+                      `${Math.abs(credits.InvoiceBalanceDue)}`
+                    )
                   ] })
                 ]
               },

package/dist/components/PaymentOnAccountModal.cjs

@@ -1903,6 +1903,7 @@ function HorizontalDivider({ id, hideOnMobile }) {
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function SelectPaymentMethod(props) {
   const {
+    amountToPay,
     selectedMethod,
     onSelectMethod,
     selectedCredits,
@@ -1915,6 +1916,14 @@ function SelectPaymentMethod(props) {
     isPayLoading,
     withCredits = false
   } = props;
+  const payAllWithCredits = withCredits && amountToPay <= 0;
+  (0, import_react7.useEffect)(() => {
+    if (payAllWithCredits) {
+      onSelectMethod("CreditsOnly");
+    } else {
+      onSelectMethod("ACHPayment");
+    }
+  }, [payAllWithCredits]);
   function handleToggle(method) {
     onSelectMethod(method);
   }
@@ -1938,26 +1947,32 @@ function SelectPaymentMethod(props) {
         }),
         customerBanks: customerBanks || [],
         onPay,
-        isPayLoading: isPayLoading || false
+        isPayLoading: isPayLoading || false,
+        disabled: payAllWithCredits
       }
     ),
     (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Accordion,
       {
-        isOpen: selectedMethod === "CCPayment",
+        isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
         title: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Radio,
           {
             label: "Pay by Credit/Debit Card",
-            checked: selectedMethod === "CCPayment",
-            onClick: (e) => e.preventDefault()
+            checked: !payAllWithCredits && selectedMethod === "CCPayment",
+            onChange: (e) => e.stopPropagation(),
+            disabled: amountToPay <= 0
           }
         ),
-        onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
+        onClick: () => {
+          if (payAllWithCredits) return;
+          handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
+        },
         children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
       }
     ),
-    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
+    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" }),
+    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
@@ -1966,9 +1981,11 @@ function ACHSelector(props) {
     handleToggle,
     selectedBankGuid,
     setSelectedBankGuid,
-    customerBanks
+    customerBanks,
+    disabled
   } = props;
   function handleBankSelect(e, bankGuid) {
+    if (disabled) return;
     e.stopPropagation();
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
@@ -1977,12 +1994,14 @@ function ACHSelector(props) {
     Card,
     {
       onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
-      selected: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
+      selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
       children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Radio,
         {
           label: `Pay by ${bank.AccountDisplayString}`,
-          checked: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID
+          checked: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
+          disabled,
+          onChange: (e) => e.stopPropagation()
         }
       )
     },
@@ -2041,7 +2060,9 @@ function CreditsSelector(props) {
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [
                     "$",
-                    formatCurrencyDisplay(`${Math.abs(credits.InvoiceBalance)}`)
+                    formatCurrencyDisplay(
+                      `${Math.abs(credits.InvoiceBalanceDue)}`
+                    )
                   ] })
                 ]
               },
@@ -2057,15 +2078,17 @@ function CreditsSelector(props) {
 // src/components/PaymentOnAccountModal.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function PaymentOnAccountModal(props) {
-  const { isOpen, paymentProps, onClose } = props;
+  const { isOpen, paymentProps, onClose, onAmountChange } = props;
   const [amount, setAmount] = (0, import_react8.useState)(paymentProps.amountToPay);
   const { creditCardSettings, selectedMethod } = paymentProps;
   (0, import_react8.useEffect)(() => {
     setAmount(paymentProps.amountToPay);
   }, [paymentProps.amountToPay]);
   function handleAmountChange(event) {
-    const value = event.target.value.replace(/[^0-9.-]+/g, "");
-    setAmount(+value || 0);
+    const inputValue = event.target.value.replace(/[^0-9.-]+/g, "");
+    const value = +inputValue || 0;
+    setAmount(value);
+    onAmountChange == null ? void 0 : onAmountChange(value);
   }
   const creditCardSurcharge = (0, import_react8.useMemo)(() => {
     const applySurcharge = (creditCardSettings == null ? void 0 : creditCardSettings.ApplySurcharge) || false;

package/dist/components/PaymentOnAccountModal.js

@@ -1,8 +1,8 @@
 import {
   PaymentOnAccountModal,
   calculateSurcharge
-} from "../chunk-QLD6SOEU.js";
-import "../chunk-ZWEKVOHD.js";
+} from "../chunk-DIMHNC5S.js";
+import "../chunk-EQQMFT5H.js";
 import "../chunk-TTO4PL7Y.js";
 import "../chunk-D2YP2BTN.js";
 import "../chunk-4RJKB7LC.js";

package/dist/components/SelectPaymentMethod.cjs

@@ -971,6 +971,7 @@ function HorizontalDivider({ id, hideOnMobile }) {
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function SelectPaymentMethod(props) {
   const {
+    amountToPay,
     selectedMethod,
     onSelectMethod,
     selectedCredits,
@@ -983,6 +984,14 @@ function SelectPaymentMethod(props) {
     isPayLoading,
     withCredits = false
   } = props;
+  const payAllWithCredits = withCredits && amountToPay <= 0;
+  (0, import_react.useEffect)(() => {
+    if (payAllWithCredits) {
+      onSelectMethod("CreditsOnly");
+    } else {
+      onSelectMethod("ACHPayment");
+    }
+  }, [payAllWithCredits]);
   function handleToggle(method) {
     onSelectMethod(method);
   }
@@ -1006,26 +1015,32 @@ function SelectPaymentMethod(props) {
         }),
         customerBanks: customerBanks || [],
         onPay,
-        isPayLoading: isPayLoading || false
+        isPayLoading: isPayLoading || false,
+        disabled: payAllWithCredits
       }
     ),
     (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Accordion,
       {
-        isOpen: selectedMethod === "CCPayment",
+        isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
         title: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Radio,
           {
             label: "Pay by Credit/Debit Card",
-            checked: selectedMethod === "CCPayment",
-            onClick: (e) => e.preventDefault()
+            checked: !payAllWithCredits && selectedMethod === "CCPayment",
+            onChange: (e) => e.stopPropagation(),
+            disabled: amountToPay <= 0
           }
         ),
-        onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
+        onClick: () => {
+          if (payAllWithCredits) return;
+          handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
+        },
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
       }
     ),
-    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
+    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" }),
+    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
@@ -1034,9 +1049,11 @@ function ACHSelector(props) {
     handleToggle,
     selectedBankGuid,
     setSelectedBankGuid,
-    customerBanks
+    customerBanks,
+    disabled
   } = props;
   function handleBankSelect(e, bankGuid) {
+    if (disabled) return;
     e.stopPropagation();
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
@@ -1045,12 +1062,14 @@ function ACHSelector(props) {
     Card,
     {
       onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
-      selected: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
+      selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
       children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         Radio,
         {
           label: `Pay by ${bank.AccountDisplayString}`,
-          checked: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID
+          checked: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
+          disabled,
+          onChange: (e) => e.stopPropagation()
         }
       )
     },
@@ -1109,7 +1128,9 @@ function CreditsSelector(props) {
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [
                     "$",
-                    formatCurrencyDisplay(`${Math.abs(credits.InvoiceBalance)}`)
+                    formatCurrencyDisplay(
+                      `${Math.abs(credits.InvoiceBalanceDue)}`
+                    )
                   ] })
                 ]
               },

package/dist/components/SelectPaymentMethod.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   SelectPaymentMethod
-} from "../chunk-ZWEKVOHD.js";
+} from "../chunk-EQQMFT5H.js";
 import "../chunk-TTO4PL7Y.js";
 import "../chunk-3ZUSYRI7.js";
 import "../chunk-WT5XXW6G.js";

package/dist/components/index.cjs

@@ -4428,6 +4428,7 @@ function HorizontalDivider({ id, hideOnMobile }) {
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function SelectPaymentMethod(props) {
   const {
+    amountToPay,
     selectedMethod,
     onSelectMethod,
     selectedCredits,
@@ -4440,6 +4441,14 @@ function SelectPaymentMethod(props) {
     isPayLoading,
     withCredits = false
   } = props;
+  const payAllWithCredits = withCredits && amountToPay <= 0;
+  (0, import_react20.useEffect)(() => {
+    if (payAllWithCredits) {
+      onSelectMethod("CreditsOnly");
+    } else {
+      onSelectMethod("ACHPayment");
+    }
+  }, [payAllWithCredits]);
   function handleToggle(method) {
     onSelectMethod(method);
   }
@@ -4463,26 +4472,32 @@ function SelectPaymentMethod(props) {
         }),
         customerBanks: customerBanks || [],
         onPay,
-        isPayLoading: isPayLoading || false
+        isPayLoading: isPayLoading || false,
+        disabled: payAllWithCredits
       }
     ),
     (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Accordion,
       {
-        isOpen: selectedMethod === "CCPayment",
+        isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
         title: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           Radio,
           {
             label: "Pay by Credit/Debit Card",
-            checked: selectedMethod === "CCPayment",
-            onClick: (e) => e.preventDefault()
+            checked: !payAllWithCredits && selectedMethod === "CCPayment",
+            onChange: (e) => e.stopPropagation(),
+            disabled: amountToPay <= 0
           }
         ),
-        onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
+        onClick: () => {
+          if (payAllWithCredits) return;
+          handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
+        },
         children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
       }
     ),
-    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
+    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" }),
+    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
@@ -4491,9 +4506,11 @@ function ACHSelector(props) {
     handleToggle,
     selectedBankGuid,
     setSelectedBankGuid,
-    customerBanks
+    customerBanks,
+    disabled
   } = props;
   function handleBankSelect(e, bankGuid) {
+    if (disabled) return;
     e.stopPropagation();
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
@@ -4502,12 +4519,14 @@ function ACHSelector(props) {
     Card,
     {
       onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
-      selected: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
+      selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
       children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         Radio,
         {
           label: `Pay by ${bank.AccountDisplayString}`,
-          checked: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID
+          checked: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
+          disabled,
+          onChange: (e) => e.stopPropagation()
         }
       )
     },
@@ -4566,7 +4585,9 @@ function CreditsSelector(props) {
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [
                     "$",
-                    formatCurrencyDisplay(`${Math.abs(credits.InvoiceBalance)}`)
+                    formatCurrencyDisplay(
+                      `${Math.abs(credits.InvoiceBalanceDue)}`
+                    )
                   ] })
                 ]
               },
@@ -4582,15 +4603,17 @@ function CreditsSelector(props) {
 // src/components/PaymentOnAccountModal.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function PaymentOnAccountModal(props) {
-  const { isOpen, paymentProps, onClose } = props;
+  const { isOpen, paymentProps, onClose, onAmountChange } = props;
   const [amount, setAmount] = (0, import_react21.useState)(paymentProps.amountToPay);
   const { creditCardSettings, selectedMethod } = paymentProps;
   (0, import_react21.useEffect)(() => {
     setAmount(paymentProps.amountToPay);
   }, [paymentProps.amountToPay]);
   function handleAmountChange(event) {
-    const value = event.target.value.replace(/[^0-9.-]+/g, "");
-    setAmount(+value || 0);
+    const inputValue = event.target.value.replace(/[^0-9.-]+/g, "");
+    const value = +inputValue || 0;
+    setAmount(value);
+    onAmountChange == null ? void 0 : onAmountChange(value);
   }
   const creditCardSurcharge = (0, import_react21.useMemo)(() => {
     const applySurcharge = (creditCardSettings == null ? void 0 : creditCardSettings.ApplySurcharge) || false;

package/dist/components/index.js

@@ -6,8 +6,8 @@ import {
 } from "../chunk-Y4HUYAI5.js";
 import {
   PaymentOnAccountModal
-} from "../chunk-QLD6SOEU.js";
-import "../chunk-ZWEKVOHD.js";
+} from "../chunk-DIMHNC5S.js";
+import "../chunk-EQQMFT5H.js";
 import "../chunk-TTO4PL7Y.js";
 import "../chunk-D2YP2BTN.js";
 import "../chunk-4RJKB7LC.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.131",
+  "version": "0.0.133",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/PaymentOnAccountModal.tsx

@@ -14,9 +14,10 @@ type PaymentOnAccountModalProps = {
   isOpen: boolean;
   onClose: () => void;
   paymentProps: SelectPaymentMethodProps;
+  onAmountChange?: (amount: number) => void;
 };
 export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
-  const { isOpen, paymentProps, onClose } = props;
+  const { isOpen, paymentProps, onClose, onAmountChange } = props;
   const [amount, setAmount] = useState<number>(paymentProps.amountToPay);
   const { creditCardSettings, selectedMethod } =
     paymentProps as typeof paymentProps & {
@@ -32,8 +33,10 @@ export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
   }, [paymentProps.amountToPay]);
 
   function handleAmountChange(event: React.ChangeEvent<HTMLInputElement>) {
-    const value = event.target.value.replace(/[^0-9.-]+/g, "");
-    setAmount(+value || 0);
+    const inputValue = event.target.value.replace(/[^0-9.-]+/g, "");
+    const value = +inputValue || 0;
+    setAmount(value);
+    onAmountChange?.(value)
   }
 
   const creditCardSurcharge = useMemo(() => {

package/src/components/SelectPaymentMethod.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Accordion } from "./Accordion";
 import { Button } from "./Button";
 import { Card } from "./Card";
-import { Paragraph } from "./Paragraph";
 import { Radio } from "./Radio";
 import { Stack } from "./Stack";
 import { Checkbox } from "./Checkbox";
@@ -12,7 +11,7 @@ import { Subheader } from "./Subheader";
 import { formatCurrencyDisplay } from "../utils/formatting";
 import { HorizontalDivider } from "./HorizontalDivider";
 
-export type PaymentMethodType = "ACHPayment" | "CCPayment";
+export type PaymentMethodType = "ACHPayment" | "CCPayment" | "CreditsOnly";
 export type CustomerBank = {
   CustBankGUID: string;
   BankName: string;
@@ -38,9 +37,10 @@ export type SelectPaymentMethodProps = {
   setSelectedCredits?: React.Dispatch<React.SetStateAction<unknown[]>>;
   setSelectedACHBankGuid?: (guid: string | null) => void;
 };
-// TODO: Create story
+
 export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
   const {
+    amountToPay,
     selectedMethod,
     onSelectMethod,
     selectedCredits,
@@ -54,6 +54,16 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
     withCredits = false,
   } = props;
 
+  const payAllWithCredits = withCredits && amountToPay <= 0;
+
+  useEffect(() => {
+    if (payAllWithCredits) {
+      onSelectMethod("CreditsOnly");
+    } else {
+      onSelectMethod("ACHPayment");
+    }
+  }, [payAllWithCredits]);
+
   function handleToggle(method: PaymentMethodType | null) {
     onSelectMethod(method);
   }
@@ -75,21 +85,24 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
           customerBanks={customerBanks || []}
           onPay={onPay}
           isPayLoading={isPayLoading || false}
+          disabled={payAllWithCredits}
         />
       )}
       {allowedMethods?.includes("CCPayment") && (
         <Accordion
-          isOpen={selectedMethod === "CCPayment"}
+          isOpen={!payAllWithCredits && selectedMethod === "CCPayment"}
           title={
             <Radio
               label="Pay by Credit/Debit Card"
-              checked={selectedMethod === "CCPayment"}
-              onClick={(e) => e.preventDefault()}
+              checked={!payAllWithCredits && selectedMethod === "CCPayment"}
+              onChange={(e) => e.stopPropagation()}
+              disabled={amountToPay <= 0}
             />
           }
-          onClick={() =>
-            handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment")
-          }
+          onClick={() => {
+            if (payAllWithCredits) return;
+            handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
+          }}
         >
           <Button className="w-full" onClick={onPay} disabled={isPayLoading}>
             {isPayLoading ? "Processing..." : "Proceed to Payment"}
@@ -102,6 +115,11 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
           {isPayLoading ? "Processing..." : "Submit Payment"}
         </Button>
       )}
+      {payAllWithCredits && (
+        <Button block onClick={onPay} disabled={isPayLoading}>
+          {isPayLoading ? "Processing..." : "Submit Payment"}
+        </Button>
+      )}
     </Stack>
   );
 }
@@ -114,6 +132,7 @@ type ACHSelectorProps = {
   customerBanks: CustomerBank[];
   onPay?: () => void;
   isPayLoading?: boolean;
+  disabled?: boolean;
 };
 function ACHSelector(props: ACHSelectorProps) {
   const {
@@ -122,31 +141,45 @@ function ACHSelector(props: ACHSelectorProps) {
     selectedBankGuid,
     setSelectedBankGuid,
     customerBanks,
+    disabled,
   } = props;
 
   function handleBankSelect(
     e: React.MouseEvent<HTMLDivElement>,
     bankGuid: string | null,
   ) {
+    if (disabled) return;
     e.stopPropagation();
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
   }
 
-  return <>
-    {customerBanks.map((bank) => (
-      <Card
-        key={bank.CustBankGUID}
-        onClick={(e) => handleBankSelect(e, bank.CustBankGUID)}
-        selected={selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID}
-      >
-        <Radio
-          label={`Pay by ${bank.AccountDisplayString}`}
-          checked={selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID}
-        />
-      </Card>
-    ))}
-  </>;
+  return (
+    <>
+      {customerBanks.map((bank) => (
+        <Card
+          key={bank.CustBankGUID}
+          onClick={(e) => handleBankSelect(e, bank.CustBankGUID)}
+          selected={
+            !disabled &&
+            selectedMethod === "ACHPayment" &&
+            selectedBankGuid === bank.CustBankGUID
+          }
+        >
+          <Radio
+            label={`Pay by ${bank.AccountDisplayString}`}
+            checked={
+              !disabled &&
+              selectedMethod === "ACHPayment" &&
+              selectedBankGuid === bank.CustBankGUID
+            }
+            disabled={disabled}
+            onChange={(e) => e.stopPropagation()}
+          />
+        </Card>
+      ))}
+    </>
+  );
 }
 type CreditsSelectorProps = {
   selectedCredits: unknown[];
@@ -185,7 +218,7 @@ function CreditsSelector(props: CreditsSelectorProps) {
             allCredits as unknown as {
               InvoiceNumber: string;
               AROpenGUID: string;
-              InvoiceBalance: number;
+              InvoiceBalanceDue: number;
             }[]
           ).map((credits) => (
             <Stack
@@ -209,7 +242,10 @@ function CreditsSelector(props: CreditsSelectorProps) {
               </Stack>
 
               <Subheader className=" pr-desktop-component-padding">
-                ${formatCurrencyDisplay(`${Math.abs(credits.InvoiceBalance)}`)}
+                $
+                {formatCurrencyDisplay(
+                  `${Math.abs(credits.InvoiceBalanceDue)}`,
+                )}
               </Subheader>
             </Stack>
           ))}