@dmsi/wedgekit-react 0.0.140 → 0.0.141

package/dist/components/PaymentOnAccountModal.cjs

@@ -207,7 +207,8 @@ var Heading = (_a) => {
     color,
     align,
     variant = "heading1",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -215,7 +216,8 @@ var Heading = (_a) => {
     "color",
     "align",
     "variant",
-    "id"
+    "id",
+    "testid"
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
@@ -223,6 +225,7 @@ var Heading = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx2.default)(
         typography[variant],
         className,
@@ -263,7 +266,8 @@ var Button = (_a) => {
     iconOnly = false,
     colorClassName,
     href,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -277,7 +281,8 @@ var Button = (_a) => {
     "iconOnly",
     "colorClassName",
     "href",
-    "id"
+    "id",
+    "testid"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx3.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -365,6 +370,7 @@ var Button = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -374,7 +380,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -389,17 +395,20 @@ function Icon(_a) {
   var _b = _a, {
     name,
     size = 24,
-    variant = "outline"
+    variant = "outline",
+    testid
   } = _b, props = __objRest(_b, [
     "name",
     "size",
-    "variant"
+    "variant",
+    "testid"
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: (0, import_clsx4.default)(
         "icon",
         `icon-${size}`,
@@ -422,12 +431,14 @@ var ModalHeader = ({
   hideCloseIcon,
   headerIcon,
   onClose,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx5.default)(
         "flex justify-between items-center",
         layoutPaddding,
@@ -436,12 +447,13 @@ var ModalHeader = ({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { id: id ? `${id}-title` : void 0, as: "p", children: title })
+          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { id: id ? `${id}-title` : void 0, testid: testid ? `${testid}-title` : void 0, as: "p", children: title })
         ] }),
         !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
+            testid: testid ? `${testid}-close-button` : void 0,
             iconOnly: true,
             variant: "tertiary",
             onClick: onClose,
@@ -460,12 +472,14 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
   children,
-  id
+  id,
+  testid
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx6.default)(
         "flex-grow desktop:flex-grow-0",
         layoutPaddding,
@@ -484,12 +498,14 @@ var ModalButtons = ({
   onClose,
   onContinue,
   customActions,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx7.default)(
         "border-t border-neutral-300 flex justify-end",
         layoutPaddding,
@@ -500,6 +516,7 @@ var ModalButtons = ({
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
+            testid: testid ? `${testid}-close-button` : void 0,
             variant: "secondary",
             leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "close", size: 24 }),
             onClick: onClose,
@@ -511,6 +528,7 @@ var ModalButtons = ({
           Button,
           {
             id: id ? `${id}-continue-button` : void 0,
+            testid: testid ? `${testid}-continue-button` : void 0,
             variant: "primary",
             leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "check", size: 24 }),
             className: "max-sm:w-full",
@@ -533,12 +551,14 @@ var ModalScrim = ({
   children,
   onClick,
   ref,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx8.default)(
         "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
         !show && " pointer-events-none",
@@ -675,6 +695,7 @@ var sizes = {
 };
 var Modal = ({
   id,
+  testid,
   title,
   open = false,
   size = "small",
@@ -783,6 +804,7 @@ var Modal = ({
       ModalScrim,
       {
         id: id ? `${id}-scrim` : void 0,
+        testid: testid ? `${testid}-scrim` : void 0,
         size,
         ref: bgRef,
         show: open,
@@ -791,6 +813,7 @@ var Modal = ({
           "div",
           {
             id,
+            "data-testid": testid,
             ref: modalRef,
             className: (0, import_clsx9.default)(
               "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
@@ -804,6 +827,7 @@ var Modal = ({
                 ModalHeader,
                 {
                   id: id ? `${id}-header` : void 0,
+                  testid: testid ? `${testid}-header` : void 0,
                   title,
                   onClose: handleClose,
                   hideCloseIcon,
@@ -814,6 +838,7 @@ var Modal = ({
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
+                  testid: testid ? `${testid}-content` : void 0,
                   fixedHeightScrolling: computedFixedHeightScrolling,
                   children
                 }
@@ -822,6 +847,7 @@ var Modal = ({
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
+                  testid: testid ? `${testid}-buttons` : void 0,
                   onClose: handleClose,
                   onContinue,
                   customActions
@@ -899,7 +925,8 @@ var Stack = (_a) => {
     id,
     noGap,
     marginTop,
-    marginBottom
+    marginBottom,
+    testid
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -935,14 +962,16 @@ var Stack = (_a) => {
     "id",
     "noGap",
     "marginTop",
-    "marginBottom"
+    "marginBottom",
+    "testid"
   ]);
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
@@ -1017,7 +1046,8 @@ var Paragraph = (_a) => {
     addOverflow,
     children,
     as = "p",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -1027,13 +1057,15 @@ var Paragraph = (_a) => {
     "addOverflow",
     "children",
     "as",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Element,
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       className: (0, import_clsx11.default)(
         typography.paragraph,
@@ -1068,20 +1100,23 @@ var Label = (_a) => {
     className,
     color,
     align,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "as",
     "padded",
     "className",
     "color",
     "align",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx12.default)(
         typography.label,
         align === "left" && "text-left",
@@ -1137,6 +1172,7 @@ var import_jsx_runtime12 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
     id,
+    testid,
     before,
     after,
     type,
@@ -1155,6 +1191,7 @@ var InputBase = (_a) => {
     fullWidth = true
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "before",
     "after",
     "type",
@@ -1219,6 +1256,7 @@ var InputBase = (_a) => {
     "label",
     {
       id,
+      "data-testid": testid,
       htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx13.default)(
@@ -1271,6 +1309,7 @@ var InputBase = (_a) => {
                   required
                 }, props), attributes), {
                   id: inputId,
+                  "data-testid": testid ? `${testid}-input` : void 0,
                   className: (0, import_clsx13.default)(
                     "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
                     "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
@@ -1288,7 +1327,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
+        caption && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id: id ? `${id}-caption` : void 0, "data-testid": testid ? `${testid}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -1303,7 +1342,8 @@ var Input = (_a) => {
     onChange,
     onBlur,
     onClear,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -1313,30 +1353,30 @@ var Input = (_a) => {
     "onChange",
     "onBlur",
     "onClear",
-    "id"
+    "id",
+    "testid"
   ]);
   const [internalValue, setInternalValue] = (0, import_react6.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react6.useState)("");
   (0, import_react6.useEffect)(() => {
     var _a2;
     const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
-    if (variant === "currency") {
-      if (propValue === void 0 || propValue === "" || typeof propValue === "number" && isNaN(propValue)) {
-        setInternalValue("");
-        setDisplayValue("");
-      } else {
-        const numValue = typeof propValue === "string" ? parseFloat(propValue) : propValue;
-        if (!isNaN(numValue)) {
-          const formatted = numValue.toFixed(decimals != null ? decimals : 2);
-          setInternalValue(formatted);
-          setDisplayValue(formatCurrencyDisplay(formatted));
-        }
-      }
-    } else {
-      setInternalValue(stringValue);
-      setDisplayValue(stringValue);
+    setInternalValue(stringValue);
+    setDisplayValue(stringValue);
+  }, [propValue]);
+  (0, import_react6.useEffect)(() => {
+    var _a2;
+    if (variant !== "currency") {
+      return;
+    }
+    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
+    if (!stringValue) {
+      return;
     }
-  }, [propValue, decimals, variant]);
+    const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
+    setInternalValue(formatted);
+    setDisplayValue(formatCurrencyDisplay(formatted));
+  }, []);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -1389,6 +1429,7 @@ var Input = (_a) => {
           Icon,
           {
             id: id ? `${id}-clear-button` : void 0,
+            testid: testid ? `${testid}-clear-button` : void 0,
             name: "close",
             onClick: handleSearchReset,
             className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
@@ -1420,14 +1461,6 @@ var Input = (_a) => {
   };
   const handleChange = (e) => {
     const rawValue = e.target.value;
-    if (variant === "search") {
-      setInternalValue(rawValue);
-      setDisplayValue(rawValue);
-      if (typeof onChange === "function") {
-        onChange(e);
-      }
-      return;
-    }
     if (variant === "currency") {
       const raw = rawValue.replace(/,/g, "");
       if (raw === "") {
@@ -1464,6 +1497,9 @@ var Input = (_a) => {
     }
   };
   const handleBlur = (e) => {
+    if (!internalValue) {
+      return;
+    }
     if (variant === "currency") {
       const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
       setInternalValue(formatted);
@@ -1488,7 +1524,8 @@ var Input = (_a) => {
       before: getBeforeElement(),
       after: getAfterElement(),
       onChange: handleChange,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      testid
     })
   );
 };
@@ -1520,10 +1557,11 @@ Percentage.displayName = "Percentage";
 var import_clsx14 = __toESM(require("clsx"), 1);
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function Card(props) {
-  const _a = props, { children, selected } = _a, rest = __objRest(_a, ["children", "selected"]);
+  const _a = props, { children, selected, testid } = _a, rest = __objRest(_a, ["children", "selected", "testid"]);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     __spreadProps(__spreadValues({}, rest), {
+      "data-testid": testid,
       className: (0, import_clsx14.default)(
         "rounded-sm p-desktop-layout-padding",
         selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
@@ -1544,7 +1582,7 @@ var import_react7 = require("react");
 var import_clsx15 = __toESM(require("clsx"), 1);
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function Accordion(props) {
-  const { isOpen, onClick, className, disabled } = props;
+  const { isOpen, onClick, className, disabled, testid } = props;
   const {
     title,
     before,
@@ -1575,11 +1613,12 @@ function Accordion(props) {
       ),
       selected: isOpen,
       onClick: handleClick,
+      testid,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
             before,
-            typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { className: "text-text-primary-normal", children: title }) : title
+            typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { testid: testid ? `${testid}-title` : void 0, className: "text-text-primary-normal", children: title }) : title
           ] }),
           after
         ] }),
@@ -1590,6 +1629,7 @@ function Accordion(props) {
             style: {
               gridTemplateRows: isOpen ? "1fr" : "0fr"
             },
+            "data-testid": testid ? `${testid}-content-container` : void 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "div",
               {
@@ -1620,7 +1660,8 @@ var Radio = (_a) => {
     disabled,
     checked,
     readOnly,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "label",
@@ -1628,7 +1669,8 @@ var Radio = (_a) => {
     "disabled",
     "checked",
     "readOnly",
-    "id"
+    "id",
+    "testid"
   ]);
   const radioId = id;
   const paragraphColor = disabled ? "text-primary-disabled" : error ? "text-primary-error" : "text-primary-normal";
@@ -1660,6 +1702,7 @@ var Radio = (_a) => {
             "input",
             __spreadValues({
               id: radioId,
+              "data-testid": testid,
               type: "radio",
               className: "sr-only peer",
               disabled,
@@ -1693,7 +1736,7 @@ var Radio = (_a) => {
             }
           )
         ] }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Paragraph, { id: `${radioId}-label`, padded: true, color: paragraphColor, children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Paragraph, { id: radioId ? `${radioId}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, color: paragraphColor, children: label })
       ]
     }
   );
@@ -1742,7 +1785,8 @@ var Checkbox = (_a) => {
     onChange,
     indeterminate,
     paragraphClassName,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "label",
     "error",
@@ -1752,7 +1796,8 @@ var Checkbox = (_a) => {
     "onChange",
     "indeterminate",
     "paragraphClassName",
-    "id"
+    "id",
+    "testid"
   ]);
   const selected = indeterminate || checked;
   const normalClassName = (0, import_clsx17.default)(
@@ -1781,6 +1826,7 @@ var Checkbox = (_a) => {
     "label",
     {
       id,
+      "data-testid": testid,
       htmlFor: id ? `${id}-input` : void 0,
       className: (0, import_clsx17.default)(
         "flex items-center",
@@ -1794,6 +1840,7 @@ var Checkbox = (_a) => {
             "input",
             __spreadValues({
               id: id ? `${id}-input` : void 0,
+              "data-testid": testid ? `${testid}-input` : void 0,
               type: "checkbox",
               className: "sr-only peer",
               disabled,
@@ -1825,6 +1872,7 @@ var Checkbox = (_a) => {
           Paragraph,
           {
             id: id ? `${id}-label` : void 0,
+            testid: testid ? `${testid}-label` : void 0,
             as: "span",
             padded: true,
             className: (0, import_clsx17.default)(
@@ -1859,7 +1907,8 @@ var Subheader = (_a) => {
     align,
     color,
     tall,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -1867,13 +1916,15 @@ var Subheader = (_a) => {
     "align",
     "color",
     "tall",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx18.default)(
         typography.subheader,
         className,
@@ -1895,18 +1946,19 @@ Subheader.displayName = "Subheader";
 // src/components/HorizontalDivider.tsx
 var import_clsx19 = __toESM(require("clsx"), 1);
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function HorizontalDivider({ id, hideOnMobile }) {
+function HorizontalDivider({ id, testid, hideOnMobile }) {
   const hideOnMobileStyle = (0, import_clsx19.default)(hideOnMobile && "hidden desktop:block");
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("hr", { id, className: (0, import_clsx19.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("hr", { id, "data-testid": testid, className: (0, import_clsx19.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
 }
 
 // src/components/Spinner.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var Spinner = ({ size = "small" }) => {
+var Spinner = ({ size = "small", testid }) => {
   const dimension = size === "large" ? 48 : 24;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "svg",
     {
+      "data-testid": testid,
       width: dimension,
       height: dimension,
       viewBox: "0 0 24 24",
@@ -2026,7 +2078,8 @@ function SelectPaymentMethod(props) {
     isPayLoading,
     withCredits = false,
     isLoadingCCiframe,
-    cardPaymentUrl
+    cardPaymentUrl,
+    testid
   } = props;
   const payAllWithCredits = withCredits && amountToPay <= 0;
   (0, import_react7.useEffect)(() => {
@@ -2043,6 +2096,7 @@ function SelectPaymentMethod(props) {
     !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       CreditsSelector,
       {
+        testid: testid ? `${testid}-credit-selector` : void 0,
         selectedCredits: selectedCredits || [],
         allCredits: allCredits || [],
         setSelectedCredits: props.setSelectedCredits || (() => {
@@ -2052,6 +2106,7 @@ function SelectPaymentMethod(props) {
     (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       ACHSelector,
       {
+        testid: testid ? `${testid}-ach-selector` : void 0,
         selectedMethod,
         handleToggle,
         selectedBankGuid: selectedACHBankGuid || null,
@@ -2066,10 +2121,12 @@ function SelectPaymentMethod(props) {
     (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Accordion,
       {
+        testid: testid ? `${testid}-cc-payment` : void 0,
         isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
         title: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           Radio,
           {
+            testid: testid ? `${testid}-cc-payment-radio` : void 0,
             label: "Pay by Credit/Debit Card",
             checked: !payAllWithCredits && selectedMethod === "CCPayment",
             onChange: (e) => e.stopPropagation(),
@@ -2109,10 +2166,11 @@ function SelectPaymentMethod(props) {
         block: true,
         onClick: onPay,
         disabled: isPayLoading || amountToPay <= 0,
+        testid: testid ? `${testid}-submit-payment-button` : void 0,
         children: isPayLoading ? "Processing..." : "Submit Payment"
       }
     ),
-    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, 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" })
   ] });
 }
 function ACHSelector(props) {
@@ -2122,7 +2180,8 @@ function ACHSelector(props) {
     selectedBankGuid,
     setSelectedBankGuid,
     customerBanks,
-    disabled
+    disabled,
+    testid
   } = props;
   function handleBankSelect(e, bankGuid) {
     if (disabled) return;
@@ -2133,6 +2192,7 @@ function ACHSelector(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime20.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)(
@@ -2149,7 +2209,7 @@ function ACHSelector(props) {
   )) });
 }
 function CreditsSelector(props) {
-  const { selectedCredits, allCredits, setSelectedCredits } = props;
+  const { selectedCredits, allCredits, setSelectedCredits, testid } = props;
   const [isOpen, setIsOpen] = (0, import_react7.useState)(true);
   const handleCreditSelect = (credit) => {
     if (setSelectedCredits) {
@@ -2164,6 +2224,7 @@ function CreditsSelector(props) {
       isOpen,
       title: "Available Credits",
       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)(
@@ -2188,9 +2249,11 @@ function CreditsSelector(props) {
                       onClick: () => handleCreditSelect(credits),
                       paddingY: true,
                       flexGrow: 1,
+                      testid: testid ? `${testid}-credit-${credits.InvoiceNumber}` : void 0,
                       children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                         Checkbox,
                         {
+                          testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-checkbox` : void 0,
                           label: credits.InvoiceNumber,
                           checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
                           onChange: () => handleCreditSelect(credits)
@@ -2198,7 +2261,7 @@ function CreditsSelector(props) {
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Subheader, { testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : void 0, className: " pr-desktop-component-padding", children: [
                     "$",
                     formatCurrencyDisplay(
                       `${Math.abs(credits.InvoiceBalanceDue)}`
@@ -2225,7 +2288,8 @@ function PaymentOnAccountModal(props) {
     onAmountChange,
     cardPaymentUrl,
     setCardPaymentUrl,
-    isLoadingCCiframe
+    isLoadingCCiframe,
+    testid
   } = props;
   const [amount, setAmount] = (0, import_react8.useState)(paymentProps.amountToPay);
   const { creditCardSettings, selectedMethod } = paymentProps;
@@ -2253,10 +2317,10 @@ function PaymentOnAccountModal(props) {
     }
     return 0;
   }, [creditCardSettings, amount, selectedMethod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Modal, { open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
+  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, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Paragraph, { testid: testid ? `${testid}-surcharge` : void 0, children: [
         "$",
         formatCurrencyDisplay(creditCardSurcharge.toFixed(2))
       ] })
@@ -2266,6 +2330,7 @@ function PaymentOnAccountModal(props) {
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         Input,
         {
+          testid: testid ? `${testid}-amount-to-pay` : void 0,
           type: "number",
           placeholder: "$0.00",
           align: "right",
@@ -2278,6 +2343,7 @@ function PaymentOnAccountModal(props) {
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       SelectPaymentMethod,
       __spreadProps(__spreadValues({}, paymentProps), {
+        testid: testid ? `${testid}-select-payment-method` : void 0,
         amountToPay: amount + creditCardSurcharge,
         cardPaymentUrl,
         setCardPaymentUrl,