@dmsi/wedgekit-react 0.0.136 → 0.0.138

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/{chunk-XEUPUTYP.js → chunk-QTD7K43M.js} +3 -2
  2. package/dist/{chunk-EQQMFT5H.js → chunk-XCIBYDVK.js} +41 -8
  3. package/dist/{chunk-DIMHNC5S.js → chunk-Z36QJ7ZF.js} +14 -3
  4. package/dist/components/Accordion.cjs +3 -2
  5. package/dist/components/Accordion.js +1 -1
  6. package/dist/components/PaymentOnAccountModal.cjs +187 -36
  7. package/dist/components/PaymentOnAccountModal.js +4 -3
  8. package/dist/components/SelectPaymentMethod.cjs +165 -25
  9. package/dist/components/SelectPaymentMethod.js +3 -2
  10. package/dist/components/index.cjs +187 -36
  11. package/dist/components/index.js +4 -3
  12. package/package.json +1 -1
  13. package/src/components/Accordion.tsx +4 -2
  14. package/src/components/PaymentOnAccountModal.tsx +16 -2
  15. package/src/components/SelectPaymentMethod.tsx +35 -8
package/dist/{chunk-XEUPUTYP.js → chunk-QTD7K43M.js} RENAMED
@@ -18,7 +18,7 @@ import {
18
18
  import clsx from "clsx";
19
19
  import { jsx, jsxs } from "react/jsx-runtime";
20
20
  function Accordion(props) {
21
- const { isOpen, onClick, className } = props;
21
+ const { isOpen, onClick, className, disabled } = props;
22
22
  const {
23
23
  title,
24
24
  before,
@@ -43,7 +43,8 @@ function Accordion(props) {
43
43
  Card,
44
44
  {
45
45
  className: clsx(
46
- "overflow-hidden select-none cursor-pointer",
46
+ "overflow-hidden select-none",
47
+ { "cursor-pointer": !disabled },
47
48
  className
48
49
  ),
49
50
  selected: isOpen,
package/dist/{chunk-EQQMFT5H.js → chunk-XCIBYDVK.js} RENAMED
@@ -1,6 +1,9 @@
1
1
  import {
2
2
  Radio
3
3
  } from "./chunk-TTO4PL7Y.js";
4
+ import {
5
+ Spinner
6
+ } from "./chunk-4F6VQXKY.js";
4
7
  import {
5
8
  HorizontalDivider
6
9
  } from "./chunk-3ZUSYRI7.js";
@@ -15,7 +18,7 @@ import {
15
18
  } from "./chunk-O4M2GISS.js";
16
19
  import {
17
20
  Accordion
18
- } from "./chunk-XEUPUTYP.js";
21
+ } from "./chunk-QTD7K43M.js";
19
22
  import {
20
23
  Stack
21
24
  } from "./chunk-EO3JJWFW.js";
@@ -42,7 +45,9 @@ function SelectPaymentMethod(props) {
42
45
  customerBanks,
43
46
  onPay,
44
47
  isPayLoading,
45
- withCredits = false
48
+ withCredits = false,
49
+ isLoadingCCiframe,
50
+ cardPaymentUrl
46
51
  } = props;
47
52
  const payAllWithCredits = withCredits && amountToPay <= 0;
48
53
  useEffect(() => {
@@ -51,7 +56,7 @@ function SelectPaymentMethod(props) {
51
56
  } else {
52
57
  onSelectMethod("ACHPayment");
53
58
  }
54
- }, [payAllWithCredits]);
59
+ }, [onSelectMethod, payAllWithCredits]);
55
60
  function handleToggle(method) {
56
61
  onSelectMethod(method);
57
62
  }
@@ -76,7 +81,7 @@ function SelectPaymentMethod(props) {
76
81
  customerBanks: customerBanks || [],
77
82
  onPay,
78
83
  isPayLoading: isPayLoading || false,
79
- disabled: payAllWithCredits
84
+ disabled: payAllWithCredits || !amountToPay
80
85
  }
81
86
  ),
82
87
  (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ jsx(
@@ -89,17 +94,45 @@ function SelectPaymentMethod(props) {
89
94
  label: "Pay by Credit/Debit Card",
90
95
  checked: !payAllWithCredits && selectedMethod === "CCPayment",
91
96
  onChange: (e) => e.stopPropagation(),
92
- disabled: amountToPay <= 0
97
+ disabled: payAllWithCredits || !amountToPay
93
98
  }
94
99
  ),
95
100
  onClick: () => {
96
- if (payAllWithCredits) return;
101
+ if (payAllWithCredits || !amountToPay) return;
97
102
  handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
98
103
  },
99
- children: /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
104
+ disabled: payAllWithCredits || !amountToPay,
105
+ children: /* @__PURE__ */ jsx(
106
+ Stack,
107
+ {
108
+ sizing: "layout-group",
109
+ width: "full",
110
+ items: "center",
111
+ justify: "center",
112
+ style: {
113
+ flex: 1
114
+ },
115
+ minHeight: 245,
116
+ children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ jsx(
117
+ "iframe",
118
+ {
119
+ src: cardPaymentUrl,
120
+ style: { width: "100%", height: "100%", flex: 1 }
121
+ }
122
+ ) : /* @__PURE__ */ jsx(Spinner, {})
123
+ }
124
+ )
125
+ }
126
+ ),
127
+ selectedMethod === "ACHPayment" && /* @__PURE__ */ jsx(
128
+ Button,
129
+ {
130
+ block: true,
131
+ onClick: onPay,
132
+ disabled: isPayLoading || amountToPay <= 0,
133
+ children: isPayLoading ? "Processing..." : "Submit Payment"
100
134
  }
101
135
  ),
102
- selectedMethod === "ACHPayment" && /* @__PURE__ */ jsx(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" }),
103
136
  payAllWithCredits && /* @__PURE__ */ jsx(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
104
137
  ] });
105
138
  }
package/dist/{chunk-DIMHNC5S.js → chunk-Z36QJ7ZF.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  SelectPaymentMethod
3
- } from "./chunk-EQQMFT5H.js";
3
+ } from "./chunk-XCIBYDVK.js";
4
4
  import {
5
5
  Modal
6
6
  } from "./chunk-D2YP2BTN.js";
@@ -28,7 +28,15 @@ import {
28
28
  import { useEffect, useMemo, useState } from "react";
29
29
  import { jsx, jsxs } from "react/jsx-runtime";
30
30
  function PaymentOnAccountModal(props) {
31
- const { isOpen, paymentProps, onClose, onAmountChange } = props;
31
+ const {
32
+ isOpen,
33
+ paymentProps,
34
+ onClose,
35
+ onAmountChange,
36
+ cardPaymentUrl,
37
+ setCardPaymentUrl,
38
+ isLoadingCCiframe
39
+ } = props;
32
40
  const [amount, setAmount] = useState(paymentProps.amountToPay);
33
41
  const { creditCardSettings, selectedMethod } = paymentProps;
34
42
  useEffect(() => {
@@ -80,7 +88,10 @@ function PaymentOnAccountModal(props) {
80
88
  /* @__PURE__ */ jsx(
81
89
  SelectPaymentMethod,
82
90
  __spreadProps(__spreadValues({}, paymentProps), {
83
- amountToPay: amount + creditCardSurcharge
91
+ amountToPay: amount + creditCardSurcharge,
92
+ cardPaymentUrl,
93
+ setCardPaymentUrl,
94
+ isLoadingCCiframe
84
95
  })
85
96
  )
86
97
  ] }) });
package/dist/components/Accordion.cjs CHANGED
@@ -461,7 +461,7 @@ Paragraph.displayName = "Paragraph";
461
461
  // src/components/Accordion.tsx
462
462
  var import_jsx_runtime5 = require("react/jsx-runtime");
463
463
  function Accordion(props) {
464
- const { isOpen, onClick, className } = props;
464
+ const { isOpen, onClick, className, disabled } = props;
465
465
  const {
466
466
  title,
467
467
  before,
@@ -486,7 +486,8 @@ function Accordion(props) {
486
486
  Card,
487
487
  {
488
488
  className: (0, import_clsx6.default)(
489
- "overflow-hidden select-none cursor-pointer",
489
+ "overflow-hidden select-none",
490
+ { "cursor-pointer": !disabled },
490
491
  className
491
492
  ),
492
493
  selected: isOpen,
package/dist/components/Accordion.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  Accordion
4
- } from "../chunk-XEUPUTYP.js";
4
+ } from "../chunk-QTD7K43M.js";
5
5
  import "../chunk-EO3JJWFW.js";
6
6
  import "../chunk-4OS6APPF.js";
7
7
  import "../chunk-VG4EPHJA.js";
package/dist/components/PaymentOnAccountModal.cjs CHANGED
@@ -1544,7 +1544,7 @@ var import_react7 = require("react");
1544
1544
  var import_clsx15 = __toESM(require("clsx"), 1);
1545
1545
  var import_jsx_runtime14 = require("react/jsx-runtime");
1546
1546
  function Accordion(props) {
1547
- const { isOpen, onClick, className } = props;
1547
+ const { isOpen, onClick, className, disabled } = props;
1548
1548
  const {
1549
1549
  title,
1550
1550
  before,
@@ -1569,7 +1569,8 @@ function Accordion(props) {
1569
1569
  Card,
1570
1570
  {
1571
1571
  className: (0, import_clsx15.default)(
1572
- "overflow-hidden select-none cursor-pointer",
1572
+ "overflow-hidden select-none",
1573
+ { "cursor-pointer": !disabled },
1573
1574
  className
1574
1575
  ),
1575
1576
  selected: isOpen,
@@ -1899,8 +1900,117 @@ function HorizontalDivider({ id, hideOnMobile }) {
1899
1900
  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("hr", { id, className: (0, import_clsx19.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
1900
1901
  }
1901
1902
 
1902
- // src/components/SelectPaymentMethod.tsx
1903
+ // src/components/Spinner.tsx
1903
1904
  var import_jsx_runtime19 = require("react/jsx-runtime");
1905
+ var Spinner = ({ size = "small" }) => {
1906
+ const dimension = size === "large" ? 48 : 24;
1907
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
1908
+ "svg",
1909
+ {
1910
+ width: dimension,
1911
+ height: dimension,
1912
+ viewBox: "0 0 24 24",
1913
+ xmlns: "http://www.w3.org/2000/svg",
1914
+ fill: "#1D1E1E",
1915
+ className: size === "large" ? "animate-spin" : "",
1916
+ "aria-label": "Loading",
1917
+ children: [
1918
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1919
+ "animate",
1920
+ {
1921
+ attributeName: "opacity",
1922
+ begin: "0s",
1923
+ dur: "1s",
1924
+ from: "1",
1925
+ to: "0",
1926
+ repeatCount: "indefinite"
1927
+ }
1928
+ ) }),
1929
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1930
+ "animate",
1931
+ {
1932
+ attributeName: "opacity",
1933
+ begin: "-0.875s",
1934
+ dur: "1s",
1935
+ from: "1",
1936
+ to: "0",
1937
+ repeatCount: "indefinite"
1938
+ }
1939
+ ) }),
1940
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1941
+ "animate",
1942
+ {
1943
+ attributeName: "opacity",
1944
+ begin: "-0.75s",
1945
+ dur: "1s",
1946
+ from: "1",
1947
+ to: "0",
1948
+ repeatCount: "indefinite"
1949
+ }
1950
+ ) }),
1951
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1952
+ "animate",
1953
+ {
1954
+ attributeName: "opacity",
1955
+ begin: "-0.625s",
1956
+ dur: "1s",
1957
+ from: "1",
1958
+ to: "0",
1959
+ repeatCount: "indefinite"
1960
+ }
1961
+ ) }),
1962
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1963
+ "animate",
1964
+ {
1965
+ attributeName: "opacity",
1966
+ begin: "-0.5s",
1967
+ dur: "1s",
1968
+ from: "1",
1969
+ to: "0",
1970
+ repeatCount: "indefinite"
1971
+ }
1972
+ ) }),
1973
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1974
+ "animate",
1975
+ {
1976
+ attributeName: "opacity",
1977
+ begin: "-0.375s",
1978
+ dur: "1s",
1979
+ from: "1",
1980
+ to: "0",
1981
+ repeatCount: "indefinite"
1982
+ }
1983
+ ) }),
1984
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1985
+ "animate",
1986
+ {
1987
+ attributeName: "opacity",
1988
+ begin: "-0.25s",
1989
+ dur: "1s",
1990
+ from: "1",
1991
+ to: "0",
1992
+ repeatCount: "indefinite"
1993
+ }
1994
+ ) }),
1995
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1996
+ "animate",
1997
+ {
1998
+ attributeName: "opacity",
1999
+ begin: "-0.125s",
2000
+ dur: "1s",
2001
+ from: "1",
2002
+ to: "0",
2003
+ repeatCount: "indefinite"
2004
+ }
2005
+ ) })
2006
+ ]
2007
+ }
2008
+ );
2009
+ };
2010
+ Spinner.displayName = "Spinner";
2011
+
2012
+ // src/components/SelectPaymentMethod.tsx
2013
+ var import_jsx_runtime20 = require("react/jsx-runtime");
1904
2014
  function SelectPaymentMethod(props) {
1905
2015
  const {
1906
2016
  amountToPay,
@@ -1914,7 +2024,9 @@ function SelectPaymentMethod(props) {
1914
2024
  customerBanks,
1915
2025
  onPay,
1916
2026
  isPayLoading,
1917
- withCredits = false
2027
+ withCredits = false,
2028
+ isLoadingCCiframe,
2029
+ cardPaymentUrl
1918
2030
  } = props;
1919
2031
  const payAllWithCredits = withCredits && amountToPay <= 0;
1920
2032
  (0, import_react7.useEffect)(() => {
@@ -1923,12 +2035,12 @@ function SelectPaymentMethod(props) {
1923
2035
  } else {
1924
2036
  onSelectMethod("ACHPayment");
1925
2037
  }
1926
- }, [payAllWithCredits]);
2038
+ }, [onSelectMethod, payAllWithCredits]);
1927
2039
  function handleToggle(method) {
1928
2040
  onSelectMethod(method);
1929
2041
  }
1930
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
1931
- !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
2042
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
2043
+ !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1932
2044
  CreditsSelector,
1933
2045
  {
1934
2046
  selectedCredits: selectedCredits || [],
@@ -1937,7 +2049,7 @@ function SelectPaymentMethod(props) {
1937
2049
  })
1938
2050
  }
1939
2051
  ),
1940
- (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
2052
+ (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1941
2053
  ACHSelector,
1942
2054
  {
1943
2055
  selectedMethod,
@@ -1948,31 +2060,59 @@ function SelectPaymentMethod(props) {
1948
2060
  customerBanks: customerBanks || [],
1949
2061
  onPay,
1950
2062
  isPayLoading: isPayLoading || false,
1951
- disabled: payAllWithCredits
2063
+ disabled: payAllWithCredits || !amountToPay
1952
2064
  }
1953
2065
  ),
1954
- (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
2066
+ (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1955
2067
  Accordion,
1956
2068
  {
1957
2069
  isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
1958
- title: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
2070
+ title: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1959
2071
  Radio,
1960
2072
  {
1961
2073
  label: "Pay by Credit/Debit Card",
1962
2074
  checked: !payAllWithCredits && selectedMethod === "CCPayment",
1963
2075
  onChange: (e) => e.stopPropagation(),
1964
- disabled: amountToPay <= 0
2076
+ disabled: payAllWithCredits || !amountToPay
1965
2077
  }
1966
2078
  ),
1967
2079
  onClick: () => {
1968
- if (payAllWithCredits) return;
2080
+ if (payAllWithCredits || !amountToPay) return;
1969
2081
  handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
1970
2082
  },
1971
- children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
2083
+ disabled: payAllWithCredits || !amountToPay,
2084
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
2085
+ Stack,
2086
+ {
2087
+ sizing: "layout-group",
2088
+ width: "full",
2089
+ items: "center",
2090
+ justify: "center",
2091
+ style: {
2092
+ flex: 1
2093
+ },
2094
+ minHeight: 245,
2095
+ children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
2096
+ "iframe",
2097
+ {
2098
+ src: cardPaymentUrl,
2099
+ style: { width: "100%", height: "100%", flex: 1 }
2100
+ }
2101
+ ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Spinner, {})
2102
+ }
2103
+ )
2104
+ }
2105
+ ),
2106
+ selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
2107
+ Button,
2108
+ {
2109
+ block: true,
2110
+ onClick: onPay,
2111
+ disabled: isPayLoading || amountToPay <= 0,
2112
+ children: isPayLoading ? "Processing..." : "Submit Payment"
1972
2113
  }
1973
2114
  ),
1974
- selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" }),
1975
- payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
2115
+ payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
1976
2116
  ] });
1977
2117
  }
1978
2118
  function ACHSelector(props) {
@@ -1990,12 +2130,12 @@ function ACHSelector(props) {
1990
2130
  setSelectedBankGuid(bankGuid);
1991
2131
  handleToggle("ACHPayment");
1992
2132
  }
1993
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
2133
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1994
2134
  Card,
1995
2135
  {
1996
2136
  onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
1997
2137
  selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
1998
- children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
2138
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1999
2139
  Radio,
2000
2140
  {
2001
2141
  label: `Pay by ${bank.AccountDisplayString}`,
@@ -2018,22 +2158,22 @@ function CreditsSelector(props) {
2018
2158
  );
2019
2159
  }
2020
2160
  };
2021
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
2161
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
2022
2162
  Accordion,
2023
2163
  {
2024
2164
  isOpen,
2025
2165
  title: "Available Credits",
2026
2166
  onClick: () => setIsOpen((prev) => !prev),
2027
2167
  children: [
2028
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(HorizontalDivider, {}),
2029
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
2168
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(HorizontalDivider, {}),
2169
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
2030
2170
  Stack,
2031
2171
  {
2032
2172
  sizing: "layout-group",
2033
2173
  width: "full",
2034
2174
  overflowY: "auto",
2035
2175
  maxHeight: 300,
2036
- children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
2176
+ children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
2037
2177
  Stack,
2038
2178
  {
2039
2179
  horizontal: true,
@@ -2041,14 +2181,14 @@ function CreditsSelector(props) {
2041
2181
  items: "center",
2042
2182
  sizing: "layout-group",
2043
2183
  children: [
2044
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
2184
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
2045
2185
  Stack,
2046
2186
  {
2047
2187
  sizing: "layout-group",
2048
2188
  onClick: () => handleCreditSelect(credits),
2049
2189
  paddingY: true,
2050
2190
  flexGrow: 1,
2051
- children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
2191
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
2052
2192
  Checkbox,
2053
2193
  {
2054
2194
  label: credits.InvoiceNumber,
@@ -2058,7 +2198,7 @@ function CreditsSelector(props) {
2058
2198
  )
2059
2199
  }
2060
2200
  ),
2061
- /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [
2201
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [
2062
2202
  "$",
2063
2203
  formatCurrencyDisplay(
2064
2204
  `${Math.abs(credits.InvoiceBalanceDue)}`
@@ -2076,9 +2216,17 @@ function CreditsSelector(props) {
2076
2216
  }
2077
2217
 
2078
2218
  // src/components/PaymentOnAccountModal.tsx
2079
- var import_jsx_runtime20 = require("react/jsx-runtime");
2219
+ var import_jsx_runtime21 = require("react/jsx-runtime");
2080
2220
  function PaymentOnAccountModal(props) {
2081
- const { isOpen, paymentProps, onClose, onAmountChange } = props;
2221
+ const {
2222
+ isOpen,
2223
+ paymentProps,
2224
+ onClose,
2225
+ onAmountChange,
2226
+ cardPaymentUrl,
2227
+ setCardPaymentUrl,
2228
+ isLoadingCCiframe
2229
+ } = props;
2082
2230
  const [amount, setAmount] = (0, import_react8.useState)(paymentProps.amountToPay);
2083
2231
  const { creditCardSettings, selectedMethod } = paymentProps;
2084
2232
  (0, import_react8.useEffect)(() => {
@@ -2105,17 +2253,17 @@ function PaymentOnAccountModal(props) {
2105
2253
  }
2106
2254
  return 0;
2107
2255
  }, [creditCardSettings, amount, selectedMethod]);
2108
- 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: [
2109
- selectedMethod === "CCPayment" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Stack, { horizontal: true, justify: "between", items: "center", children: [
2110
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Paragraph, { children: "Surcharge" }),
2111
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Paragraph, { children: [
2256
+ 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: [
2257
+ selectedMethod === "CCPayment" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Stack, { horizontal: true, justify: "between", items: "center", children: [
2258
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Paragraph, { children: "Surcharge" }),
2259
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Paragraph, { children: [
2112
2260
  "$",
2113
2261
  formatCurrencyDisplay(creditCardSurcharge.toFixed(2))
2114
2262
  ] })
2115
2263
  ] }),
2116
- /* @__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: [
2117
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Paragraph, { className: "w-full", children: "Amount to Pay" }),
2118
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
2264
+ /* @__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: [
2265
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Paragraph, { className: "w-full", children: "Amount to Pay" }),
2266
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
2119
2267
  Input,
2120
2268
  {
2121
2269
  type: "number",
@@ -2127,10 +2275,13 @@ function PaymentOnAccountModal(props) {
2127
2275
  }
2128
2276
  ) })
2129
2277
  ] }) }),
2130
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
2278
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
2131
2279
  SelectPaymentMethod,
2132
2280
  __spreadProps(__spreadValues({}, paymentProps), {
2133
- amountToPay: amount + creditCardSurcharge
2281
+ amountToPay: amount + creditCardSurcharge,
2282
+ cardPaymentUrl,
2283
+ setCardPaymentUrl,
2284
+ isLoadingCCiframe
2134
2285
  })
2135
2286
  )
2136
2287
  ] }) });
package/dist/components/PaymentOnAccountModal.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  PaymentOnAccountModal,
3
3
  calculateSurcharge
4
- } from "../chunk-DIMHNC5S.js";
5
- import "../chunk-EQQMFT5H.js";
4
+ } from "../chunk-Z36QJ7ZF.js";
5
+ import "../chunk-XCIBYDVK.js";
6
6
  import "../chunk-TTO4PL7Y.js";
7
7
  import "../chunk-D2YP2BTN.js";
8
8
  import "../chunk-4RJKB7LC.js";
@@ -10,6 +10,7 @@ import "../chunk-CG2NIXZE.js";
10
10
  import "../chunk-FWPJ73IK.js";
11
11
  import "../chunk-6UI5GABI.js";
12
12
  import "../chunk-4JLU7TAC.js";
13
+ import "../chunk-4F6VQXKY.js";
13
14
  import "../chunk-J6LETUNM.js";
14
15
  import "../chunk-3ZUSYRI7.js";
15
16
  import "../chunk-WT5XXW6G.js";
@@ -19,7 +20,7 @@ import "../chunk-R5TLUWDD.js";
19
20
  import "../chunk-5UH6QUFB.js";
20
21
  import "../chunk-S5K22XTH.js";
21
22
  import "../chunk-O4M2GISS.js";
22
- import "../chunk-XEUPUTYP.js";
23
+ import "../chunk-QTD7K43M.js";
23
24
  import "../chunk-EO3JJWFW.js";
24
25
  import "../chunk-4OS6APPF.js";
25
26
  import "../chunk-VG4EPHJA.js";