@dmsi/wedgekit-react 0.0.146 → 0.0.147

package/dist/{chunk-J4E6Q5TM.js → chunk-AMM762XG.js}

@@ -1,6 +1,6 @@
 import {
   SelectPaymentMethod
-} from "./chunk-GXSXCEAA.js";
+} from "./chunk-ODWBREZN.js";
 import {
   Modal
 } from "./chunk-5GOJRLQO.js";

package/dist/{chunk-GXSXCEAA.js → chunk-ODWBREZN.js}

@@ -1,3 +1,6 @@
+import {
+  WorldpayIframe
+} from "./chunk-WFGKIR5A.js";
 import {
   Radio
 } from "./chunk-BATIOCXB.js";
@@ -118,13 +121,7 @@ function SelectPaymentMethod(props) {
               flex: 1
             },
             minHeight: 245,
-            children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ jsx(
-              "iframe",
-              {
-                src: cardPaymentUrl,
-                style: { width: "100%", height: "100%", flex: 1 }
-              }
-            ) : /* @__PURE__ */ jsx(Spinner, {})
+            children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ jsx(WorldpayIframe, { url: cardPaymentUrl }) : /* @__PURE__ */ jsx(Spinner, {})
           }
         )
       }

package/dist/chunk-WFGKIR5A.js

@@ -0,0 +1,9 @@
+// src/components/WorldpayIframe.tsx
+import { jsx } from "react/jsx-runtime";
+function WorldpayIframe({ url }) {
+  return /* @__PURE__ */ jsx("iframe", { src: url, style: { width: "100%", height: "100%", flex: 1 } });
+}
+
+export {
+  WorldpayIframe
+};

package/dist/components/PaymentOnAccountModal.cjs

@@ -2061,8 +2061,14 @@ var Spinner = ({ size = "small", testid }) => {
 };
 Spinner.displayName = "Spinner";
 
-// src/components/SelectPaymentMethod.tsx
+// src/components/WorldpayIframe.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
+function WorldpayIframe({ url }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("iframe", { src: url, style: { width: "100%", height: "100%", flex: 1 } });
+}
+
+// src/components/SelectPaymentMethod.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function SelectPaymentMethod(props) {
   const {
     amountToPay,
@@ -2092,8 +2098,8 @@ function SelectPaymentMethod(props) {
   function handleToggle(method) {
     onSelectMethod(method);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
-    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
+    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       CreditsSelector,
       {
         testid: testid ? `${testid}-credit-selector` : void 0,
@@ -2103,7 +2109,7 @@ function SelectPaymentMethod(props) {
         })
       }
     ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       ACHSelector,
       {
         testid: testid ? `${testid}-ach-selector` : void 0,
@@ -2118,12 +2124,12 @@ function SelectPaymentMethod(props) {
         disabled: payAllWithCredits || !amountToPay
       }
     ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       Accordion,
       {
         testid: testid ? `${testid}-cc-payment` : void 0,
         isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
-        title: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        title: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Radio,
           {
             testid: testid ? `${testid}-cc-payment-radio` : void 0,
@@ -2138,7 +2144,7 @@ function SelectPaymentMethod(props) {
           handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
         },
         disabled: payAllWithCredits || !amountToPay,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Stack,
           {
             sizing: "layout-group",
@@ -2149,18 +2155,12 @@ function SelectPaymentMethod(props) {
               flex: 1
             },
             minHeight: 245,
-            children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              "iframe",
-              {
-                src: cardPaymentUrl,
-                style: { width: "100%", height: "100%", flex: 1 }
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Spinner, {})
+            children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(WorldpayIframe, { url: cardPaymentUrl }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Spinner, {})
           }
         )
       }
     ),
-    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       Button,
       {
         block: true,
@@ -2170,7 +2170,7 @@ function SelectPaymentMethod(props) {
         children: isPayLoading ? "Processing..." : "Submit Payment"
       }
     ),
-    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { testid: testid ? `${testid}-submit-payment-button` : void 0, block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
+    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { testid: testid ? `${testid}-submit-payment-button` : void 0, block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
@@ -2189,13 +2189,13 @@ function ACHSelector(props) {
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     Card,
     {
       testid: testid ? `${testid}-bank-${bank.CustBankGUID}` : void 0,
       onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
       selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         Radio,
         {
           label: `Pay by ${bank.AccountDisplayString}`,
@@ -2218,7 +2218,7 @@ function CreditsSelector(props) {
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     Accordion,
     {
       isOpen,
@@ -2226,15 +2226,15 @@ function CreditsSelector(props) {
       onClick: () => setIsOpen((prev) => !prev),
       testid,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(HorizontalDivider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(HorizontalDivider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Stack,
           {
             sizing: "layout-group",
             width: "full",
             overflowY: "auto",
             maxHeight: 300,
-            children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
               Stack,
               {
                 horizontal: true,
@@ -2242,7 +2242,7 @@ function CreditsSelector(props) {
                 items: "center",
                 sizing: "layout-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     Stack,
                     {
                       sizing: "layout-group",
@@ -2250,7 +2250,7 @@ function CreditsSelector(props) {
                       paddingY: true,
                       flexGrow: 1,
                       testid: testid ? `${testid}-credit-${credits.InvoiceNumber}` : void 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                         Checkbox,
                         {
                           testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-checkbox` : void 0,
@@ -2261,7 +2261,7 @@ function CreditsSelector(props) {
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Subheader, { testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : void 0, className: " pr-desktop-component-padding", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Subheader, { testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : void 0, className: " pr-desktop-component-padding", children: [
                     "$",
                     formatCurrencyDisplay(
                       `${Math.abs(credits.InvoiceBalanceDue)}`
@@ -2279,7 +2279,7 @@ function CreditsSelector(props) {
 }
 
 // src/components/PaymentOnAccountModal.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function PaymentOnAccountModal(props) {
   const {
     isOpen,
@@ -2317,17 +2317,17 @@ function PaymentOnAccountModal(props) {
     }
     return 0;
   }, [creditCardSettings, amount, selectedMethod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Modal, { testid, open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
-    selectedMethod === "CCPayment" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Stack, { horizontal: true, justify: "between", items: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Paragraph, { children: "Surcharge" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Paragraph, { testid: testid ? `${testid}-surcharge` : void 0, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Modal, { testid, open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
+    selectedMethod === "CCPayment" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Stack, { horizontal: true, justify: "between", items: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Paragraph, { children: "Surcharge" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Paragraph, { testid: testid ? `${testid}-surcharge` : void 0, children: [
         "$",
         formatCurrencyDisplay(creditCardSurcharge.toFixed(2))
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Card, { className: "py-desktop-component-padding", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Stack, { sizing: "component", justify: "between", items: "center", horizontal: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Paragraph, { className: "w-full", children: "Amount to Pay" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Card, { className: "py-desktop-component-padding", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Stack, { sizing: "component", justify: "between", items: "center", horizontal: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Paragraph, { className: "w-full", children: "Amount to Pay" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         Input,
         {
           testid: testid ? `${testid}-amount-to-pay` : void 0,
@@ -2340,7 +2340,7 @@ function PaymentOnAccountModal(props) {
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       SelectPaymentMethod,
       __spreadProps(__spreadValues({}, paymentProps), {
         testid: testid ? `${testid}-select-payment-method` : void 0,

package/dist/components/PaymentOnAccountModal.js

@@ -1,8 +1,9 @@
 import {
   PaymentOnAccountModal,
   calculateSurcharge
-} from "../chunk-J4E6Q5TM.js";
-import "../chunk-GXSXCEAA.js";
+} from "../chunk-AMM762XG.js";
+import "../chunk-ODWBREZN.js";
+import "../chunk-WFGKIR5A.js";
 import "../chunk-BATIOCXB.js";
 import "../chunk-5GOJRLQO.js";
 import "../chunk-4RJKB7LC.js";

package/dist/components/SelectPaymentMethod.cjs

@@ -1104,8 +1104,14 @@ var Spinner = ({ size = "small", testid }) => {
 };
 Spinner.displayName = "Spinner";
 
-// src/components/SelectPaymentMethod.tsx
+// src/components/WorldpayIframe.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+function WorldpayIframe({ url }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("iframe", { src: url, style: { width: "100%", height: "100%", flex: 1 } });
+}
+
+// src/components/SelectPaymentMethod.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function SelectPaymentMethod(props) {
   const {
     amountToPay,
@@ -1135,8 +1141,8 @@ function SelectPaymentMethod(props) {
   function handleToggle(method) {
     onSelectMethod(method);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
-    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
+    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       CreditsSelector,
       {
         testid: testid ? `${testid}-credit-selector` : void 0,
@@ -1146,7 +1152,7 @@ function SelectPaymentMethod(props) {
         })
       }
     ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ACHSelector,
       {
         testid: testid ? `${testid}-ach-selector` : void 0,
@@ -1161,12 +1167,12 @@ function SelectPaymentMethod(props) {
         disabled: payAllWithCredits || !amountToPay
       }
     ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Accordion,
       {
         testid: testid ? `${testid}-cc-payment` : void 0,
         isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
-        title: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        title: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Radio,
           {
             testid: testid ? `${testid}-cc-payment-radio` : void 0,
@@ -1181,7 +1187,7 @@ function SelectPaymentMethod(props) {
           handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
         },
         disabled: payAllWithCredits || !amountToPay,
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Stack,
           {
             sizing: "layout-group",
@@ -1192,18 +1198,12 @@ function SelectPaymentMethod(props) {
               flex: 1
             },
             minHeight: 245,
-            children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              "iframe",
-              {
-                src: cardPaymentUrl,
-                style: { width: "100%", height: "100%", flex: 1 }
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner, {})
+            children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(WorldpayIframe, { url: cardPaymentUrl }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner, {})
           }
         )
       }
     ),
-    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Button,
       {
         block: true,
@@ -1213,7 +1213,7 @@ function SelectPaymentMethod(props) {
         children: isPayLoading ? "Processing..." : "Submit Payment"
       }
     ),
-    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { testid: testid ? `${testid}-submit-payment-button` : void 0, block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
+    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { testid: testid ? `${testid}-submit-payment-button` : void 0, block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
@@ -1232,13 +1232,13 @@ function ACHSelector(props) {
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Card,
     {
       testid: testid ? `${testid}-bank-${bank.CustBankGUID}` : void 0,
       onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
       selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         Radio,
         {
           label: `Pay by ${bank.AccountDisplayString}`,
@@ -1261,7 +1261,7 @@ function CreditsSelector(props) {
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     Accordion,
     {
       isOpen,
@@ -1269,15 +1269,15 @@ function CreditsSelector(props) {
       onClick: () => setIsOpen((prev) => !prev),
       testid,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HorizontalDivider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HorizontalDivider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Stack,
           {
             sizing: "layout-group",
             width: "full",
             overflowY: "auto",
             maxHeight: 300,
-            children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               Stack,
               {
                 horizontal: true,
@@ -1285,7 +1285,7 @@ function CreditsSelector(props) {
                 items: "center",
                 sizing: "layout-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     Stack,
                     {
                       sizing: "layout-group",
@@ -1293,7 +1293,7 @@ function CreditsSelector(props) {
                       paddingY: true,
                       flexGrow: 1,
                       testid: testid ? `${testid}-credit-${credits.InvoiceNumber}` : void 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         Checkbox,
                         {
                           testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-checkbox` : void 0,
@@ -1304,7 +1304,7 @@ function CreditsSelector(props) {
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Subheader, { testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : void 0, className: " pr-desktop-component-padding", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Subheader, { testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : void 0, className: " pr-desktop-component-padding", children: [
                     "$",
                     formatCurrencyDisplay(
                       `${Math.abs(credits.InvoiceBalanceDue)}`

package/dist/components/SelectPaymentMethod.js

@@ -1,7 +1,8 @@
 "use client";
 import {
   SelectPaymentMethod
-} from "../chunk-GXSXCEAA.js";
+} from "../chunk-ODWBREZN.js";
+import "../chunk-WFGKIR5A.js";
 import "../chunk-BATIOCXB.js";
 import "../chunk-GG5JOFS6.js";
 import "../chunk-EPQLWHCL.js";

package/dist/components/WorldpayIframe.cjs

@@ -0,0 +1,34 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/WorldpayIframe.tsx
+var WorldpayIframe_exports = {};
+__export(WorldpayIframe_exports, {
+  WorldpayIframe: () => WorldpayIframe
+});
+module.exports = __toCommonJS(WorldpayIframe_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function WorldpayIframe({ url }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("iframe", { src: url, style: { width: "100%", height: "100%", flex: 1 } });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  WorldpayIframe
+});

package/dist/components/WorldpayIframe.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  WorldpayIframe
+} from "../chunk-WFGKIR5A.js";
+import "../chunk-ORMEWXMH.js";
+export {
+  WorldpayIframe
+};

package/dist/components/index.cjs

@@ -4657,8 +4657,14 @@ var Spinner = ({ size = "small", testid }) => {
 };
 Spinner.displayName = "Spinner";
 
-// src/components/SelectPaymentMethod.tsx
+// src/components/WorldpayIframe.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
+function WorldpayIframe({ url }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("iframe", { src: url, style: { width: "100%", height: "100%", flex: 1 } });
+}
+
+// src/components/SelectPaymentMethod.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function SelectPaymentMethod(props) {
   const {
     amountToPay,
@@ -4688,8 +4694,8 @@ function SelectPaymentMethod(props) {
   function handleToggle(method) {
     onSelectMethod(method);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
-    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
+    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       CreditsSelector,
       {
         testid: testid ? `${testid}-credit-selector` : void 0,
@@ -4699,7 +4705,7 @@ function SelectPaymentMethod(props) {
         })
       }
     ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       ACHSelector,
       {
         testid: testid ? `${testid}-ach-selector` : void 0,
@@ -4714,12 +4720,12 @@ function SelectPaymentMethod(props) {
         disabled: payAllWithCredits || !amountToPay
       }
     ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Accordion,
       {
         testid: testid ? `${testid}-cc-payment` : void 0,
         isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
-        title: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        title: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           Radio,
           {
             testid: testid ? `${testid}-cc-payment-radio` : void 0,
@@ -4734,7 +4740,7 @@ function SelectPaymentMethod(props) {
           handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
         },
         disabled: payAllWithCredits || !amountToPay,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           Stack,
           {
             sizing: "layout-group",
@@ -4745,18 +4751,12 @@ function SelectPaymentMethod(props) {
               flex: 1
             },
             minHeight: 245,
-            children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              "iframe",
-              {
-                src: cardPaymentUrl,
-                style: { width: "100%", height: "100%", flex: 1 }
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Spinner, {})
+            children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(WorldpayIframe, { url: cardPaymentUrl }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Spinner, {})
           }
         )
       }
     ),
-    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Button,
       {
         block: true,
@@ -4766,7 +4766,7 @@ function SelectPaymentMethod(props) {
         children: isPayLoading ? "Processing..." : "Submit Payment"
       }
     ),
-    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { testid: testid ? `${testid}-submit-payment-button` : void 0, block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
+    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { testid: testid ? `${testid}-submit-payment-button` : void 0, block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
@@ -4785,13 +4785,13 @@ function ACHSelector(props) {
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     Card,
     {
       testid: testid ? `${testid}-bank-${bank.CustBankGUID}` : void 0,
       onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
       selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         Radio,
         {
           label: `Pay by ${bank.AccountDisplayString}`,
@@ -4814,7 +4814,7 @@ function CreditsSelector(props) {
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     Accordion,
     {
       isOpen,
@@ -4822,15 +4822,15 @@ function CreditsSelector(props) {
       onClick: () => setIsOpen((prev) => !prev),
       testid,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HorizontalDivider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HorizontalDivider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           Stack,
           {
             sizing: "layout-group",
             width: "full",
             overflowY: "auto",
             maxHeight: 300,
-            children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
               Stack,
               {
                 horizontal: true,
@@ -4838,7 +4838,7 @@ function CreditsSelector(props) {
                 items: "center",
                 sizing: "layout-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     Stack,
                     {
                       sizing: "layout-group",
@@ -4846,7 +4846,7 @@ function CreditsSelector(props) {
                       paddingY: true,
                       flexGrow: 1,
                       testid: testid ? `${testid}-credit-${credits.InvoiceNumber}` : void 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                         Checkbox,
                         {
                           testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-checkbox` : void 0,
@@ -4857,7 +4857,7 @@ function CreditsSelector(props) {
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Subheader, { testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : void 0, className: " pr-desktop-component-padding", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Subheader, { testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : void 0, className: " pr-desktop-component-padding", children: [
                     "$",
                     formatCurrencyDisplay(
                       `${Math.abs(credits.InvoiceBalanceDue)}`
@@ -4875,7 +4875,7 @@ function CreditsSelector(props) {
 }
 
 // src/components/PaymentOnAccountModal.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function PaymentOnAccountModal(props) {
   const {
     isOpen,
@@ -4913,17 +4913,17 @@ function PaymentOnAccountModal(props) {
     }
     return 0;
   }, [creditCardSettings, amount, selectedMethod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Modal, { testid, open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
-    selectedMethod === "CCPayment" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { horizontal: true, justify: "between", items: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Paragraph, { children: "Surcharge" }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Paragraph, { testid: testid ? `${testid}-surcharge` : void 0, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Modal, { testid, open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
+    selectedMethod === "CCPayment" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Stack, { horizontal: true, justify: "between", items: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Paragraph, { children: "Surcharge" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Paragraph, { testid: testid ? `${testid}-surcharge` : void 0, children: [
         "$",
         formatCurrencyDisplay(creditCardSurcharge.toFixed(2))
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Card, { className: "py-desktop-component-padding", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { sizing: "component", justify: "between", items: "center", horizontal: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Paragraph, { className: "w-full", children: "Amount to Pay" }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Card, { className: "py-desktop-component-padding", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Stack, { sizing: "component", justify: "between", items: "center", horizontal: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Paragraph, { className: "w-full", children: "Amount to Pay" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         Input,
         {
           testid: testid ? `${testid}-amount-to-pay` : void 0,
@@ -4936,7 +4936,7 @@ function PaymentOnAccountModal(props) {
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       SelectPaymentMethod,
       __spreadProps(__spreadValues({}, paymentProps), {
         testid: testid ? `${testid}-select-payment-method` : void 0,

package/dist/components/index.js

@@ -6,8 +6,9 @@ import {
 } from "../chunk-56Y5DDG3.js";
 import {
   PaymentOnAccountModal
-} from "../chunk-J4E6Q5TM.js";
-import "../chunk-GXSXCEAA.js";
+} from "../chunk-AMM762XG.js";
+import "../chunk-ODWBREZN.js";
+import "../chunk-WFGKIR5A.js";
 import "../chunk-BATIOCXB.js";
 import "../chunk-5GOJRLQO.js";
 import "../chunk-4RJKB7LC.js";

package/package.json

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

package/src/components/SelectPaymentMethod.tsx

@@ -11,6 +11,7 @@ import { Subheader } from "./Subheader";
 import { formatCurrencyDisplay } from "../utils/formatting";
 import { HorizontalDivider } from "./HorizontalDivider";
 import { Spinner } from "./Spinner";
+import { WorldpayIframe } from "./WorldpayIframe";
 
 export type PaymentMethodType = "ACHPayment" | "CCPayment" | "CreditsOnly";
 export type CustomerBank = {
@@ -128,10 +129,7 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
             minHeight={245}
           >
             {!isLoadingCCiframe && cardPaymentUrl ? (
-              <iframe
-                src={cardPaymentUrl}
-                style={{ width: "100%", height: "100%", flex: 1 }}
-              />
+              <WorldpayIframe url={cardPaymentUrl} />
             ) : (
               <Spinner />
             )}

package/src/components/WorldpayIframe.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+export function WorldpayIframe({ url }: { url: string }) {
+  return (
+    <iframe src={url} style={{ width: "100%", height: "100%", flex: 1 }} />
+  );
+}