@dmsi/wedgekit-react 0.0.136 → 0.0.137

package/dist/components/SelectPaymentMethod.cjs

@@ -464,7 +464,7 @@ Paragraph.displayName = "Paragraph";
 // src/components/Accordion.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Accordion(props) {
-  const { isOpen, onClick, className } = props;
+  const { isOpen, onClick, className, disabled } = props;
   const {
     title,
     before,
@@ -489,7 +489,8 @@ function Accordion(props) {
     Card,
     {
       className: (0, import_clsx6.default)(
-        "overflow-hidden select-none cursor-pointer",
+        "overflow-hidden select-none",
+        { "cursor-pointer": !disabled },
         className
       ),
       selected: isOpen,
@@ -967,8 +968,117 @@ function HorizontalDivider({ id, hideOnMobile }) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("hr", { id, className: (0, import_clsx11.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
 }
 
-// src/components/SelectPaymentMethod.tsx
+// src/components/Spinner.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var Spinner = ({ size = "small" }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "svg",
+    {
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: size === "large" ? "animate-spin" : "",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "0s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.875s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.75s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.625s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.5s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.375s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.25s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.125s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/SelectPaymentMethod.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function SelectPaymentMethod(props) {
   const {
     amountToPay,
@@ -982,7 +1092,9 @@ function SelectPaymentMethod(props) {
     customerBanks,
     onPay,
     isPayLoading,
-    withCredits = false
+    withCredits = false,
+    isLoadingCCiframe,
+    cardPaymentUrl
   } = props;
   const payAllWithCredits = withCredits && amountToPay <= 0;
   (0, import_react.useEffect)(() => {
@@ -991,12 +1103,12 @@ function SelectPaymentMethod(props) {
     } else {
       onSelectMethod("ACHPayment");
     }
-  }, [payAllWithCredits]);
+  }, [onSelectMethod, payAllWithCredits]);
   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) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  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)(
       CreditsSelector,
       {
         selectedCredits: selectedCredits || [],
@@ -1005,7 +1117,7 @@ function SelectPaymentMethod(props) {
         })
       }
     ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ACHSelector,
       {
         selectedMethod,
@@ -1016,31 +1128,59 @@ function SelectPaymentMethod(props) {
         customerBanks: customerBanks || [],
         onPay,
         isPayLoading: isPayLoading || false,
-        disabled: payAllWithCredits
+        disabled: payAllWithCredits || !amountToPay
       }
     ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Accordion,
       {
         isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
-        title: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        title: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Radio,
           {
             label: "Pay by Credit/Debit Card",
             checked: !payAllWithCredits && selectedMethod === "CCPayment",
             onChange: (e) => e.stopPropagation(),
-            disabled: amountToPay <= 0
+            disabled: payAllWithCredits || !amountToPay
           }
         ),
         onClick: () => {
-          if (payAllWithCredits) return;
+          if (payAllWithCredits || !amountToPay) 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" })
+        disabled: payAllWithCredits || !amountToPay,
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          Stack,
+          {
+            sizing: "layout-group",
+            width: "full",
+            items: "center",
+            justify: "center",
+            style: {
+              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, {})
+          }
+        )
       }
     ),
-    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" })
+    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      Button,
+      {
+        block: true,
+        onClick: onPay,
+        disabled: isPayLoading || amountToPay <= 0,
+        children: isPayLoading ? "Processing..." : "Submit Payment"
+      }
+    ),
+    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
@@ -1058,12 +1198,12 @@ function ACHSelector(props) {
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Card,
     {
       onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
       selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         Radio,
         {
           label: `Pay by ${bank.AccountDisplayString}`,
@@ -1086,22 +1226,22 @@ function CreditsSelector(props) {
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     Accordion,
     {
       isOpen,
       title: "Available Credits",
       onClick: () => setIsOpen((prev) => !prev),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HorizontalDivider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__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)(
           Stack,
           {
             sizing: "layout-group",
             width: "full",
             overflowY: "auto",
             maxHeight: 300,
-            children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
               Stack,
               {
                 horizontal: true,
@@ -1109,14 +1249,14 @@ function CreditsSelector(props) {
                 items: "center",
                 sizing: "layout-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     Stack,
                     {
                       sizing: "layout-group",
                       onClick: () => handleCreditSelect(credits),
                       paddingY: true,
                       flexGrow: 1,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                         Checkbox,
                         {
                           label: credits.InvoiceNumber,
@@ -1126,7 +1266,7 @@ function CreditsSelector(props) {
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [
                     "$",
                     formatCurrencyDisplay(
                       `${Math.abs(credits.InvoiceBalanceDue)}`

package/dist/components/SelectPaymentMethod.js

@@ -1,13 +1,14 @@
 "use client";
 import {
   SelectPaymentMethod
-} from "../chunk-EQQMFT5H.js";
+} from "../chunk-XCIBYDVK.js";
 import "../chunk-TTO4PL7Y.js";
+import "../chunk-4F6VQXKY.js";
 import "../chunk-3ZUSYRI7.js";
 import "../chunk-WT5XXW6G.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-O4M2GISS.js";
-import "../chunk-XEUPUTYP.js";
+import "../chunk-QTD7K43M.js";
 import "../chunk-EO3JJWFW.js";
 import "../chunk-4OS6APPF.js";
 import "../chunk-VG4EPHJA.js";