@dmsi/wedgekit-react 0.0.99 → 0.0.100

package/dist/{chunk-Z7OYI7ZH.js → chunk-66CBCMDU.js}

@@ -47,13 +47,14 @@ function SelectPaymentMethod(props) {
     setSelectedACHBankGuid,
     customerBanks,
     onPay,
-    isPayLoading
+    isPayLoading,
+    withCredits = false
   } = 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(
+    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ jsx(
       CreditsSelector,
       {
         selectedCredits: selectedCredits || [],

package/dist/chunk-RVQEW4A4.js

@@ -0,0 +1,96 @@
+import {
+  SelectPaymentMethod
+} from "./chunk-66CBCMDU.js";
+import {
+  Modal
+} from "./chunk-QIHDPSOM.js";
+import {
+  Input
+} from "./chunk-R5TLUWDD.js";
+import {
+  formatCurrencyDisplay
+} from "./chunk-5UH6QUFB.js";
+import {
+  Stack
+} from "./chunk-EO3JJWFW.js";
+import {
+  Card
+} from "./chunk-JOMM4KBH.js";
+import {
+  Paragraph
+} from "./chunk-VG4EPHJA.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/PaymentOnAccountModal.tsx
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PaymentOnAccountModal(props) {
+  const { isOpen, paymentProps, onClose } = 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 creditCardSurcharge = useMemo(() => {
+    const applySurcharge = (creditCardSettings == null ? void 0 : creditCardSettings.ApplySurcharge) || false;
+    if (!applySurcharge || selectedMethod !== "CCPayment") {
+      return 0;
+    }
+    const surchargeType = creditCardSettings == null ? void 0 : creditCardSettings.SurchargeBasisType;
+    const surchargeRate = (creditCardSettings == null ? void 0 : creditCardSettings.SurchargeBasisAmount) || 0;
+    if (surchargeType === "Percent") {
+      return calculateSurcharge(amount, surchargeRate);
+    }
+    if (surchargeType === "Fixed") {
+      return surchargeRate;
+    }
+    return 0;
+  }, [creditCardSettings, amount, selectedMethod]);
+  return /* @__PURE__ */ jsx(Modal, { open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", width: "full", children: [
+    selectedMethod === "CCPayment" && /* @__PURE__ */ jsxs(Stack, { horizontal: true, justify: "between", items: "center", children: [
+      /* @__PURE__ */ jsx(Paragraph, { children: "Surcharge" }),
+      /* @__PURE__ */ jsxs(Paragraph, { children: [
+        "$",
+        formatCurrencyDisplay(creditCardSurcharge.toFixed(2))
+      ] })
+    ] }),
+    /* @__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,
+      __spreadProps(__spreadValues({}, paymentProps), {
+        amountToPay: amount + creditCardSurcharge
+      })
+    )
+  ] }) });
+}
+function calculateSurcharge(amountInDollars, surchargeRate) {
+  const amountInCents = amountInDollars * 100;
+  const surchargeInCents = amountInCents * surchargeRate / 100;
+  const roundedSurchargeInCents = Math.round(surchargeInCents);
+  return roundedSurchargeInCents / 100;
+}
+
+export {
+  PaymentOnAccountModal,
+  calculateSurcharge
+};

package/dist/components/PaymentOnAccountModal.cjs

@@ -59,7 +59,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/PaymentOnAccountModal.tsx
 var PaymentOnAccountModal_exports = {};
 __export(PaymentOnAccountModal_exports, {
-  PaymentOnAccountModal: () => PaymentOnAccountModal
+  PaymentOnAccountModal: () => PaymentOnAccountModal,
+  calculateSurcharge: () => calculateSurcharge
 });
 module.exports = __toCommonJS(PaymentOnAccountModal_exports);
 
@@ -1915,13 +1916,14 @@ function SelectPaymentMethod(props) {
     setSelectedACHBankGuid,
     customerBanks,
     onPay,
-    isPayLoading
+    isPayLoading,
+    withCredits = false
   } = props;
   function handleToggle(method) {
     onSelectMethod(method);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
-    !!(allCredits == null ? void 0 : allCredits.length) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       CreditsSelector,
       {
         selectedCredits: selectedCredits || [],
@@ -2103,6 +2105,7 @@ var import_jsx_runtime20 = require("react/jsx-runtime");
 function PaymentOnAccountModal(props) {
   const { isOpen, paymentProps, onClose } = props;
   const [amount, setAmount] = (0, import_react8.useState)(paymentProps.amountToPay);
+  const { creditCardSettings, selectedMethod } = paymentProps;
   (0, import_react8.useEffect)(() => {
     setAmount(paymentProps.amountToPay);
   }, [paymentProps.amountToPay]);
@@ -2110,7 +2113,29 @@ function PaymentOnAccountModal(props) {
     const value = event.target.value.replace(/[^0-9.-]+/g, "");
     setAmount(+value || 0);
   }
+  const creditCardSurcharge = (0, import_react8.useMemo)(() => {
+    const applySurcharge = (creditCardSettings == null ? void 0 : creditCardSettings.ApplySurcharge) || false;
+    if (!applySurcharge || selectedMethod !== "CCPayment") {
+      return 0;
+    }
+    const surchargeType = creditCardSettings == null ? void 0 : creditCardSettings.SurchargeBasisType;
+    const surchargeRate = (creditCardSettings == null ? void 0 : creditCardSettings.SurchargeBasisAmount) || 0;
+    if (surchargeType === "Percent") {
+      return calculateSurcharge(amount, surchargeRate);
+    }
+    if (surchargeType === "Fixed") {
+      return surchargeRate;
+    }
+    return 0;
+  }, [creditCardSettings, amount, selectedMethod]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Modal, { open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
+    selectedMethod === "CCPayment" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Stack, { horizontal: true, justify: "between", items: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Paragraph, { children: "Surcharge" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Paragraph, { children: [
+        "$",
+        formatCurrencyDisplay(creditCardSurcharge.toFixed(2))
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Card, { className: "py-desktop-component-padding", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Stack, { sizing: "component", justify: "between", items: "center", horizontal: true, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Paragraph, { className: "w-full", children: "Amount to Pay" }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -2125,10 +2150,22 @@ function PaymentOnAccountModal(props) {
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectPaymentMethod, __spreadValues({}, paymentProps))
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      SelectPaymentMethod,
+      __spreadProps(__spreadValues({}, paymentProps), {
+        amountToPay: amount + creditCardSurcharge
+      })
+    )
   ] }) });
 }
+function calculateSurcharge(amountInDollars, surchargeRate) {
+  const amountInCents = amountInDollars * 100;
+  const surchargeInCents = amountInCents * surchargeRate / 100;
+  const roundedSurchargeInCents = Math.round(surchargeInCents);
+  return roundedSurchargeInCents / 100;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PaymentOnAccountModal
+  PaymentOnAccountModal,
+  calculateSurcharge
 });

package/dist/components/PaymentOnAccountModal.js

@@ -1,7 +1,8 @@
 import {
-  PaymentOnAccountModal
-} from "../chunk-A4XOUWM5.js";
-import "../chunk-Z7OYI7ZH.js";
+  PaymentOnAccountModal,
+  calculateSurcharge
+} from "../chunk-RVQEW4A4.js";
+import "../chunk-66CBCMDU.js";
 import "../chunk-TTO4PL7Y.js";
 import "../chunk-QIHDPSOM.js";
 import "../chunk-4RJKB7LC.js";
@@ -27,5 +28,6 @@ import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {
-  PaymentOnAccountModal
+  PaymentOnAccountModal,
+  calculateSurcharge
 };

package/dist/components/SelectPaymentMethod.cjs

@@ -984,13 +984,14 @@ function SelectPaymentMethod(props) {
     setSelectedACHBankGuid,
     customerBanks,
     onPay,
-    isPayLoading
+    isPayLoading,
+    withCredits = false
   } = props;
   function handleToggle(method) {
     onSelectMethod(method);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
-    !!(allCredits == null ? void 0 : allCredits.length) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       CreditsSelector,
       {
         selectedCredits: selectedCredits || [],

package/dist/components/SelectPaymentMethod.js

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

package/dist/components/index.cjs

@@ -4435,13 +4435,14 @@ function SelectPaymentMethod(props) {
     setSelectedACHBankGuid,
     customerBanks,
     onPay,
-    isPayLoading
+    isPayLoading,
+    withCredits = false
   } = props;
   function handleToggle(method) {
     onSelectMethod(method);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
-    !!(allCredits == null ? void 0 : allCredits.length) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       CreditsSelector,
       {
         selectedCredits: selectedCredits || [],
@@ -4623,6 +4624,7 @@ var import_jsx_runtime34 = require("react/jsx-runtime");
 function PaymentOnAccountModal(props) {
   const { isOpen, paymentProps, onClose } = props;
   const [amount, setAmount] = (0, import_react21.useState)(paymentProps.amountToPay);
+  const { creditCardSettings, selectedMethod } = paymentProps;
   (0, import_react21.useEffect)(() => {
     setAmount(paymentProps.amountToPay);
   }, [paymentProps.amountToPay]);
@@ -4630,7 +4632,29 @@ function PaymentOnAccountModal(props) {
     const value = event.target.value.replace(/[^0-9.-]+/g, "");
     setAmount(+value || 0);
   }
+  const creditCardSurcharge = (0, import_react21.useMemo)(() => {
+    const applySurcharge = (creditCardSettings == null ? void 0 : creditCardSettings.ApplySurcharge) || false;
+    if (!applySurcharge || selectedMethod !== "CCPayment") {
+      return 0;
+    }
+    const surchargeType = creditCardSettings == null ? void 0 : creditCardSettings.SurchargeBasisType;
+    const surchargeRate = (creditCardSettings == null ? void 0 : creditCardSettings.SurchargeBasisAmount) || 0;
+    if (surchargeType === "Percent") {
+      return calculateSurcharge(amount, surchargeRate);
+    }
+    if (surchargeType === "Fixed") {
+      return surchargeRate;
+    }
+    return 0;
+  }, [creditCardSettings, amount, selectedMethod]);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Modal, { open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
+    selectedMethod === "CCPayment" && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Stack, { horizontal: true, justify: "between", items: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Paragraph, { children: "Surcharge" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Paragraph, { children: [
+        "$",
+        formatCurrencyDisplay(creditCardSurcharge.toFixed(2))
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Card, { className: "py-desktop-component-padding", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Stack, { sizing: "component", justify: "between", items: "center", horizontal: true, children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Paragraph, { className: "w-full", children: "Amount to Pay" }),
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -4645,9 +4669,20 @@ function PaymentOnAccountModal(props) {
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectPaymentMethod, __spreadValues({}, paymentProps))
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      SelectPaymentMethod,
+      __spreadProps(__spreadValues({}, paymentProps), {
+        amountToPay: amount + creditCardSurcharge
+      })
+    )
   ] }) });
 }
+function calculateSurcharge(amountInDollars, surchargeRate) {
+  const amountInCents = amountInDollars * 100;
+  const surchargeInCents = amountInCents * surchargeRate / 100;
+  const roundedSurchargeInCents = Math.round(surchargeInCents);
+  return roundedSurchargeInCents / 100;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,

package/dist/components/index.js

@@ -6,8 +6,8 @@ import {
 } from "../chunk-Y4HUYAI5.js";
 import {
   PaymentOnAccountModal
-} from "../chunk-A4XOUWM5.js";
-import "../chunk-Z7OYI7ZH.js";
+} from "../chunk-RVQEW4A4.js";
+import "../chunk-66CBCMDU.js";
 import "../chunk-TTO4PL7Y.js";
 import "../chunk-QIHDPSOM.js";
 import "../chunk-4RJKB7LC.js";

package/package.json

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

package/src/components/PaymentOnAccountModal.tsx

@@ -3,11 +3,12 @@ import { Stack } from "./Stack";
 import { Paragraph } from "./Paragraph";
 import { Input } from "./Input";
 import { Card } from "./Card";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   SelectPaymentMethod,
   SelectPaymentMethodProps,
 } from "./SelectPaymentMethod";
+import { formatCurrencyDisplay } from "../utils/formatting";
 
 type PaymentOnAccountModalProps = {
   isOpen: boolean;
@@ -17,6 +18,14 @@ type PaymentOnAccountModalProps = {
 export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
   const { isOpen, paymentProps, onClose } = props;
   const [amount, setAmount] = useState<number>(paymentProps.amountToPay);
+  const { creditCardSettings, selectedMethod } =
+    paymentProps as typeof paymentProps & {
+      creditCardSettings: {
+        ApplySurcharge: boolean;
+        SurchargeBasisType: string;
+        SurchargeBasisAmount: number;
+      };
+    };
 
   useEffect(() => {
     setAmount(paymentProps.amountToPay);
@@ -27,9 +36,34 @@ export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
     setAmount(+value || 0);
   }
 
+  const creditCardSurcharge = useMemo(() => {
+    const applySurcharge = creditCardSettings?.ApplySurcharge || false;
+    if (!applySurcharge || selectedMethod !== "CCPayment") {
+      return 0;
+    }
+    const surchargeType = creditCardSettings?.SurchargeBasisType;
+    const surchargeRate = creditCardSettings?.SurchargeBasisAmount || 0;
+
+    if (surchargeType === "Percent") {
+      return calculateSurcharge(amount, surchargeRate);
+    }
+    if (surchargeType === "Fixed") {
+      return surchargeRate;
+    }
+    return 0;
+  }, [creditCardSettings, amount, selectedMethod]);
+
   return (
     <Modal open={isOpen} onClose={onClose} title="Payment on Account">
       <Stack sizing="layout-group" width="full">
+        {selectedMethod === "CCPayment" && (
+          <Stack horizontal justify="between" items="center">
+            <Paragraph>Surcharge</Paragraph>
+            <Paragraph>
+              ${formatCurrencyDisplay(creditCardSurcharge.toFixed(2))}
+            </Paragraph>
+          </Stack>
+        )}
         <Card className="py-desktop-component-padding">
           <Stack sizing="component" justify="between" items="center" horizontal>
             <Paragraph className="w-full">Amount to Pay</Paragraph>
@@ -45,8 +79,22 @@ export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
             </div>
           </Stack>
         </Card>
-        <SelectPaymentMethod {...paymentProps} />
+        <SelectPaymentMethod
+          {...paymentProps}
+          amountToPay={amount + creditCardSurcharge}
+        />
       </Stack>
     </Modal>
   );
 }
+
+export function calculateSurcharge(
+  amountInDollars: number,
+  surchargeRate: number,
+): number {
+  const amountInCents = amountInDollars * 100;
+  const surchargeInCents = (amountInCents * surchargeRate) / 100;
+  const roundedSurchargeInCents = Math.round(surchargeInCents);
+
+  return roundedSurchargeInCents / 100;
+}

package/src/components/SelectPaymentMethod.tsx

@@ -32,9 +32,11 @@ export type SelectPaymentMethodProps = {
   isPayLoading?: boolean;
   selectedInvoices?: unknown[];
   allInvoices?: unknown[];
+  creditCardSettings?: unknown;
+  withCredits?: boolean;
 
   onSelectMethod: (method: PaymentMethodType | null) => void;
-  onPay?: () => void;
+  onPay: () => void;
   setSelectedCredits?: React.Dispatch<React.SetStateAction<unknown[]>>;
   setSelectedACHBankGuid?: (guid: string | null) => void;
 };
@@ -51,6 +53,7 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
     customerBanks,
     onPay,
     isPayLoading,
+    withCredits = false,
   } = props;
 
   function handleToggle(method: PaymentMethodType | null) {
@@ -58,7 +61,7 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
   }
   return (
     <Stack sizing="layout-group" width="full" minWidth={400}>
-      {!!allCredits?.length && (
+      {!!allCredits?.length && withCredits && (
         <CreditsSelector
           selectedCredits={selectedCredits || []}
           allCredits={allCredits || []}

package/dist/chunk-A4XOUWM5.js

@@ -1,57 +0,0 @@
-import {
-  SelectPaymentMethod
-} from "./chunk-Z7OYI7ZH.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
-};