@pinerohit11/testwidget 0.1.41 → 0.1.42

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/dist/index.cjs +2186 -4
  2. package/dist/index.d.cts +26 -3
  3. package/dist/index.d.ts +26 -3
  4. package/dist/index.js +2186 -3
  5. package/package.json +50 -45
package/dist/index.cjs CHANGED
@@ -47,10 +47,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
47
47
  // src/app/index.ts
48
48
  var app_exports = {};
49
49
  __export(app_exports, {
50
+ CompletedTransactions: () => CompletedTransactions,
51
+ GetPaymentDynamic: () => GetPaymentDynamic,
52
+ Payment: () => Payment,
50
53
  RequestPayment: () => RequestPayment,
51
54
  RequestPaymentAllInput: () => RequestPaymentAllInput,
52
55
  RequestPaymentDynamic: () => RequestPaymentDynamic,
53
- RequestPaymentonClick: () => RequestPaymentonClick
56
+ RequestPaymentonClick: () => RequestPaymentonClick,
57
+ RqstPaymntInputField: () => RqstPaymntInputField,
58
+ TockenizPay: () => TockenizPay
54
59
  });
55
60
  module.exports = __toCommonJS(app_exports);
56
61
 
@@ -151,6 +156,32 @@ var LoaderStyle = (props) => {
151
156
  transform: scale(0);
152
157
  }
153
158
  }
159
+
160
+
161
+ .loading-animation {
162
+ position: absolute;
163
+ top: 50%;
164
+ left: 50%;
165
+ transform: translate(-50%, -50%);
166
+ }
167
+
168
+ .spinner {
169
+ width: 40px;
170
+ height: 40px;
171
+ border-radius: 50%;
172
+ border: 4px solid #f3f3f3;
173
+ border-top: 4px solid black;
174
+ animation: spin 1s linear infinite;
175
+ }
176
+
177
+ @keyframes spin {
178
+ 0% {
179
+ transform: rotate(0deg);
180
+ }
181
+ 100% {
182
+ transform: rotate(360deg);
183
+ }
184
+ }
154
185
  `);
155
186
  };
156
187
  var LoaderStyle_default = LoaderStyle;
@@ -1013,7 +1044,9 @@ var ErrorText = {
1013
1044
  phonenumbervalid: "Please enter a valid 10-digit phone number",
1014
1045
  orderidenter: "Please enter an order ID",
1015
1046
  networkresponseerror: "Network response was not ok",
1016
- anerroroccured: "An error occurred. Please try again."
1047
+ anerroroccured: "An error occurred. Please try again.",
1048
+ montherror: "Please write month only 1 to 12",
1049
+ fieldrequired: "This field is required"
1017
1050
  };
1018
1051
 
1019
1052
  // src/app/components/RequestPayment/RequestPayment.tsx
@@ -1560,7 +1593,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
1560
1593
  console.error("Error:", error);
1561
1594
  });
1562
1595
  };
1563
- return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement("br", null), /* @__PURE__ */ import_react6.default.createElement(
1596
+ return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(
1564
1597
  "button",
1565
1598
  {
1566
1599
  onClick: sendRequestPayment,
@@ -1692,10 +1725,2159 @@ function RequestPaymentonClick(props) {
1692
1725
  )))
1693
1726
  ), onSuccess ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react7.default.createElement("h4", null, onSuccess)) : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("h1", null, "Error!"), /* @__PURE__ */ import_react7.default.createElement("h4", null, onError))), /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap4.Modal.Footer, null, /* @__PURE__ */ import_react7.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))));
1694
1727
  }
1728
+
1729
+ // src/app/components/RequestPayment/RqstPaymntInputField.tsx
1730
+ var import_react8 = __toESM(require("react"), 1);
1731
+ var import_react_bootstrap5 = require("react-bootstrap");
1732
+ var import_react_toastify2 = require("react-toastify");
1733
+ var import_ReactToastify2 = require("react-toastify/dist/ReactToastify.css");
1734
+ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
1735
+ const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
1736
+ const [show, setShow] = (0, import_react8.useState)(false);
1737
+ const [phoneNumber, setPhoneNumber] = (0, import_react8.useState)("");
1738
+ const [isValidNumber, setIsValidNumber] = (0, import_react8.useState)(true);
1739
+ const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
1740
+ const [submitClicked, setSubmitClicked] = (0, import_react8.useState)(false);
1741
+ const handleClose = () => setShow(false);
1742
+ const handleShow = () => setShow(true);
1743
+ const sendRequestPayment = () => {
1744
+ if (!phoneNumber) {
1745
+ setErrorMessage(ErrorText.phonenumberrequired);
1746
+ setSubmitClicked(true);
1747
+ return;
1748
+ }
1749
+ if (!/^\d{10}$/.test(phoneNumber)) {
1750
+ setErrorMessage(ErrorText.phonenumbervalid);
1751
+ setSubmitClicked(true);
1752
+ return;
1753
+ }
1754
+ setErrorMessage("");
1755
+ setSubmitClicked(true);
1756
+ setIsLoading(true);
1757
+ let formData = {
1758
+ fractalpayPublicKey: fractalpayClientKey,
1759
+ amount,
1760
+ phone_number: phoneNumber,
1761
+ orderId: orderID,
1762
+ action: "request"
1763
+ };
1764
+ const jsonData = JSON.stringify(formData);
1765
+ fetch(`${baseUrl}create-widget-order`, {
1766
+ method: "POST",
1767
+ headers: {
1768
+ "Content-Type": "application/json"
1769
+ },
1770
+ body: jsonData
1771
+ }).then((response) => {
1772
+ setIsLoading(false);
1773
+ if (!response.ok) {
1774
+ throw new Error(ErrorText.networkresponseerror);
1775
+ }
1776
+ return response.json();
1777
+ }).then((data) => {
1778
+ if (data.result === true) {
1779
+ setShow(true);
1780
+ }
1781
+ console.log(data);
1782
+ }).catch((error) => {
1783
+ setIsLoading(false);
1784
+ console.error("Error:", error);
1785
+ import_react_toastify2.toast.error(ErrorText.anerroroccured);
1786
+ });
1787
+ };
1788
+ const handlePhoneNumberChange = (e) => {
1789
+ const number = e.target.value;
1790
+ const isValid = /^\d*$/.test(number);
1791
+ if (isValid) {
1792
+ setPhoneNumber(number);
1793
+ setIsValidNumber(number.length <= 10);
1794
+ if (number.length > 10) {
1795
+ setErrorMessage(ErrorText.phonenumberlength);
1796
+ } else {
1797
+ setErrorMessage("");
1798
+ }
1799
+ } else {
1800
+ setErrorMessage(ErrorText.phonenumbervalid);
1801
+ }
1802
+ };
1803
+ return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement("div", { className: "payment-container" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "input-wrapper" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react8.default.createElement(
1804
+ "input",
1805
+ {
1806
+ type: "text",
1807
+ value: phoneNumber,
1808
+ onChange: handlePhoneNumberChange,
1809
+ placeholder: "Enter phone number",
1810
+ maxLength: 10,
1811
+ className: submitClicked && (!phoneNumber || !isValidNumber) ? "error" : ""
1812
+ }
1813
+ ), errorMessage && /* @__PURE__ */ import_react8.default.createElement("div", { className: "error-message text-danger" }, errorMessage))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "button-wrapper" }, /* @__PURE__ */ import_react8.default.createElement(
1814
+ "button",
1815
+ {
1816
+ onClick: sendRequestPayment,
1817
+ disabled: isLoading || !isValidNumber,
1818
+ className: "paymentBtn"
1819
+ },
1820
+ isLoading ? "Loading..." : "Request Payment"
1821
+ ))), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap5.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap5.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap5.Modal.Body, null, /* @__PURE__ */ import_react8.default.createElement(
1822
+ "svg",
1823
+ {
1824
+ width: "60",
1825
+ height: "60",
1826
+ viewBox: "0 0 60 60",
1827
+ fill: "none",
1828
+ xmlns: "http://www.w3.org/2000/svg"
1829
+ },
1830
+ /* @__PURE__ */ import_react8.default.createElement(
1831
+ "rect",
1832
+ {
1833
+ x: "0.5",
1834
+ y: "0.5",
1835
+ width: "59",
1836
+ height: "59",
1837
+ rx: "29.5",
1838
+ stroke: "#31B379"
1839
+ }
1840
+ ),
1841
+ /* @__PURE__ */ import_react8.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react8.default.createElement(
1842
+ "path",
1843
+ {
1844
+ d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
1845
+ fill: "#31B379"
1846
+ }
1847
+ )),
1848
+ /* @__PURE__ */ import_react8.default.createElement("defs", null, /* @__PURE__ */ import_react8.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react8.default.createElement(
1849
+ "rect",
1850
+ {
1851
+ width: "22",
1852
+ height: "22",
1853
+ fill: "white",
1854
+ transform: "translate(19.5 19.0039)"
1855
+ }
1856
+ )))
1857
+ ), /* @__PURE__ */ import_react8.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react8.default.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap5.Modal.Footer, null, /* @__PURE__ */ import_react8.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))), /* @__PURE__ */ import_react8.default.createElement(import_react_toastify2.ToastContainer, null));
1858
+ }
1859
+
1860
+ // src/app/components/Payment/Payment.tsx
1861
+ var import_react10 = __toESM(require("react"), 1);
1862
+ var import_axios2 = __toESM(require("axios"), 1);
1863
+ var import_node_forge = __toESM(require("node-forge"), 1);
1864
+ var import_react_toastify3 = require("react-toastify");
1865
+ var import_react_bootstrap6 = require("react-bootstrap");
1866
+
1867
+ // src/app/components/Payment/Paymentstyles.tsx
1868
+ var import_react9 = __toESM(require("react"), 1);
1869
+ function Paymentstyles() {
1870
+ return /* @__PURE__ */ import_react9.default.createElement("style", null, `
1871
+ .paymentBtn {
1872
+ background-color: black;
1873
+ border: none;
1874
+ color: white;
1875
+ padding: 15px 32px;
1876
+ text-align: center;
1877
+ text-decoration: none;
1878
+ display: inline-block;
1879
+ font-size: 16px;
1880
+ margin: 4px 2px;
1881
+ cursor: pointer;
1882
+ border-radius: 180px;
1883
+ /* width: auto; */
1884
+ }
1885
+
1886
+ .modal-backdrop {
1887
+ display: none !important;
1888
+ }
1889
+
1890
+ /* CSS for modal */
1891
+ .modal {
1892
+ /* display: none; */
1893
+ position: fixed;
1894
+ z-index: 5555;
1895
+ left: 0;
1896
+ top: 0;
1897
+ width: 100%;
1898
+ height: 100%;
1899
+ overflow: auto;
1900
+ background-color: rgba(0, 0, 0, 0.8);
1901
+ }
1902
+
1903
+ .input-container {
1904
+ position: relative;
1905
+ }
1906
+
1907
+ .error {
1908
+ /* border: 1px solid red; */
1909
+ color: #ffe6e6;
1910
+ /* light red background color */
1911
+ }
1912
+
1913
+ .form-group {
1914
+ margin-bottom: 15px;
1915
+ }
1916
+
1917
+ .input-container input {
1918
+ padding-right: 25px;
1919
+ }
1920
+
1921
+ .modal-header {
1922
+ border-bottom: 0 !important;
1923
+ padding-top: 0 !important;
1924
+ }
1925
+
1926
+ /* CSS for modal content */
1927
+ .modal-content {
1928
+ /* height: 90vh !important; */
1929
+ height: auto;
1930
+ /* padding: 20px; */
1931
+ padding: 20px 2px !important;
1932
+ /* background: #fff; */
1933
+ border-radius: 20px !important;
1934
+ position: relative;
1935
+ width: 430px;
1936
+ margin: 30px auto;
1937
+ overflow: hidden !important;
1938
+ }
1939
+ .input-container {
1940
+ display: flex;
1941
+ align-items: baseline;
1942
+ }
1943
+
1944
+ .input-error-container {
1945
+ flex: 1;
1946
+ }
1947
+
1948
+ .paymentBtn {
1949
+ margin-left: 10px;
1950
+ }
1951
+
1952
+ .PayButton {
1953
+ outline: 0 !important;
1954
+ height: 46px;
1955
+ font-size: 16px;
1956
+ background-color: #161616 !important;
1957
+ border: none;
1958
+ display: block;
1959
+ width: 100%;
1960
+ border-radius: 180px;
1961
+ margin: 10px 0;
1962
+ }
1963
+
1964
+ #PayButton:hover {
1965
+ background-color: #61c699 !important;
1966
+ }
1967
+
1968
+ #PayButton:active {
1969
+ background-color: #61c699 !important;
1970
+ }
1971
+
1972
+ #PayButton:disabled {
1973
+ background: rgb(172, 44, 170) !important;
1974
+ color: #fff !important;
1975
+ }
1976
+
1977
+ label {
1978
+ color: rgba(53, 37, 77, 0.6);
1979
+ margin-bottom: 2px;
1980
+ text-transform: uppercase;
1981
+ font-family: "IBM Plex Mono", monospace;
1982
+ font-weight: 500;
1983
+ font-size: 12px;
1984
+ }
1985
+
1986
+ .input-container {
1987
+ position: relative;
1988
+ }
1989
+
1990
+ .input-container input {
1991
+ padding-right: 25px;
1992
+ }
1993
+
1994
+ #Checkout {
1995
+ /* z-index: 100001; */
1996
+ width: 100%;
1997
+ /* height: 100%; */
1998
+ /* background: 0 0 #ffffff; */
1999
+ border-radius: 24px;
2000
+ border: 1px solid #e0dfe2;
2001
+ display: block;
2002
+ }
2003
+
2004
+ .container {
2005
+ margin-top: 10px;
2006
+ }
2007
+
2008
+ .powered-logo {
2009
+ width: 18px;
2010
+ height: 18px;
2011
+ /* float: right; */
2012
+ padding: 2px;
2013
+ background: #000000;
2014
+ border-radius: 4px;
2015
+ /* margin-left: 5px; */
2016
+ }
2017
+
2018
+ .modal-content .container {
2019
+ width: 100%;
2020
+ }
2021
+
2022
+ .powerd-by-part {
2023
+ display: flex;
2024
+ justify-content: center;
2025
+ align-items: center;
2026
+ gap: 5px;
2027
+ }
2028
+
2029
+ .errorText {
2030
+ color: red;
2031
+ }
2032
+
2033
+ .input-group {
2034
+ position: relative;
2035
+ }
2036
+
2037
+ .paynowbtn {
2038
+ outline: 0 !important;
2039
+ padding: 7px 25px !important;
2040
+ font-size: 13px;
2041
+ background-color: #161616 !important;
2042
+ border: #161616 1px solid !important;
2043
+ color: #fff !important;
2044
+ display: inline-block !important;
2045
+ border-radius: 180px !important;
2046
+ }
2047
+
2048
+ .paynowbtn:hover {
2049
+ background-color: #fff !important;
2050
+ border: #161616 1px solid !important;
2051
+ color: #161616 !important;
2052
+ }
2053
+
2054
+ .ButtonGroup__root.btn-group {
2055
+ margin: 10px 0 20px 0;
2056
+ }
2057
+
2058
+ .ButtonGroup__root.btn-group button {
2059
+ background: #000;
2060
+ border: 0;
2061
+ margin: 0 5px;
2062
+ border-radius: 4px !important;
2063
+ }
2064
+
2065
+ .ButtonGroup__root.btn-group button:hover,
2066
+ .ButtonGroup__root.btn-group button:focus {
2067
+ background: #333 !important;
2068
+ }
2069
+
2070
+ .input-group button {
2071
+ background: #000;
2072
+ border: 0;
2073
+ margin: 0 5px;
2074
+ border-radius: 0 4px 4px 0 !important;
2075
+ }
2076
+
2077
+ .input-group button:hover,
2078
+ .input-group button:focus {
2079
+ background: #333 !important;
2080
+ }
2081
+
2082
+ .payment-suc {
2083
+ text-align: center;
2084
+ }
2085
+
2086
+ .payment-suc .modal-dialog {
2087
+ min-width: 600px;
2088
+ padding: 50px 0;
2089
+ }
2090
+
2091
+ .payment-suc h2 {
2092
+ font-size: 24px;
2093
+ color: #35254d;
2094
+ font-weight: 500;
2095
+ padding: 15px 0;
2096
+ }
2097
+
2098
+ .payment-suc p {
2099
+ font-size: 14px;
2100
+ color: #9a92a6;
2101
+ font-weight: 500;
2102
+ }
2103
+
2104
+ .payment-suc .btn-close {
2105
+ position: absolute;
2106
+ right: 20px;
2107
+ }
2108
+
2109
+ .Checkout.container iframe {
2110
+ width: 100%;
2111
+ overflow: hidden !important;
2112
+ }
2113
+
2114
+ .responsive-tbl {
2115
+ overflow-x: auto;
2116
+ }
2117
+
2118
+ body {
2119
+ position: relative !important;
2120
+ }
2121
+
2122
+ thead,
2123
+ tbody,
2124
+ tfoot,
2125
+ tr,
2126
+ td,
2127
+ th {
2128
+ white-space: nowrap;
2129
+ }
2130
+
2131
+ .button-group {
2132
+ display: flex;
2133
+ gap: 10px;
2134
+ }
2135
+
2136
+ .rqstonClickbtn {
2137
+ color: #fff;
2138
+ background-color: #337ab7;
2139
+ border-color: #2e6da4;
2140
+ }
2141
+
2142
+ .loading-animation {
2143
+ position: absolute;
2144
+ top: 50%;
2145
+ left: 50%;
2146
+ transform: translate(-50%, -50%);
2147
+ }
2148
+
2149
+ .spinner {
2150
+ width: 40px;
2151
+ height: 40px;
2152
+ border-radius: 50%;
2153
+ border: 4px solid #f3f3f3;
2154
+ border-top: 4px solid black;
2155
+ animation: spin 1s linear infinite;
2156
+ }
2157
+
2158
+ @keyframes spin {
2159
+ 0% {
2160
+ transform: rotate(0deg);
2161
+ }
2162
+
2163
+ 100% {
2164
+ transform: rotate(360deg);
2165
+ }
2166
+ }
2167
+
2168
+ /* .border-container {
2169
+ display: flex;
2170
+ flex-direction: column;
2171
+ border: 0px solid #ccc;
2172
+ padding: 20px;
2173
+ border-radius: 10px;
2174
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
2175
+ align-items: baseline;
2176
+ }
2177
+ .payment-container {
2178
+ border: 0px solid #ccc;
2179
+ padding: 20px;
2180
+ border-radius: 10px;
2181
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
2182
+ } */
2183
+
2184
+ .payment-row {
2185
+ display: flex;
2186
+ align-items: center;
2187
+ margin-bottom: 20px;
2188
+ }
2189
+
2190
+ .payment-row label {
2191
+ width: 150px;
2192
+ font-weight: bold;
2193
+ margin-right: 10px;
2194
+ }
2195
+
2196
+ .payment-row input {
2197
+ flex-grow: 1;
2198
+ margin-right: 10px;
2199
+ }
2200
+
2201
+ .payment-row button {
2202
+ flex-grow: 1;
2203
+ }
2204
+
2205
+ .payment-row {
2206
+ display: flex;
2207
+ flex-direction: column;
2208
+ border-radius: 10px;
2209
+ margin-top: 10px;
2210
+ }
2211
+
2212
+ .input-wrapper {
2213
+ flex: 1;
2214
+ }
2215
+
2216
+ .button-wrapper {
2217
+ margin-left: 10px;
2218
+ }
2219
+
2220
+ .input-container {
2221
+ display: flex;
2222
+ flex-direction: column;
2223
+ }
2224
+
2225
+ .export-btn {
2226
+ background: black;
2227
+ color: white;
2228
+ height: 35px;
2229
+ width: 68px;
2230
+ border-radius: 5px;
2231
+ margin-left: 14px;
2232
+ }
2233
+
2234
+ .payment-popup {
2235
+ padding: 12px 20px;
2236
+ background: #fff;
2237
+ border-radius: 20px;
2238
+ position: relative;
2239
+ width: 100%;
2240
+ margin: 0 auto;
2241
+ }
2242
+
2243
+ .modal-dialog {
2244
+ max-width: 810px;
2245
+ }
2246
+
2247
+ .modal-content {
2248
+ max-width: 100%;
2249
+ /* margin-top: 5%; */
2250
+ width: 100%;
2251
+ margin: 0;
2252
+ }
2253
+
2254
+ @media (max-width: 460px) {
2255
+ .payment-popup {
2256
+ padding: 35px 25px;
2257
+ width: 98%;
2258
+ }
2259
+ }
2260
+
2261
+ .close-pop {
2262
+ position: absolute;
2263
+ right: 8px;
2264
+ top: 8px;
2265
+ border: 0;
2266
+ padding: 0;
2267
+ background: none !important;
2268
+ }
2269
+
2270
+ .copy-api {
2271
+ overflow-y: auto;
2272
+ scrollbar-width: inherit;
2273
+ background: #f2f2f2;
2274
+ color: rgb(33, 33, 33);
2275
+ font-size: "12px";
2276
+ border: 0;
2277
+ border-radius: 4px;
2278
+ width: 100%;
2279
+ padding: 8px 15px;
2280
+ position: relative;
2281
+ }
2282
+
2283
+ #style-3::-webkit-scrollbar-track {
2284
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
2285
+ background-color: #f5f5f5;
2286
+ }
2287
+
2288
+ #style-3::-webkit-scrollbar {
2289
+ height: 3px;
2290
+ background-color: #f5f5f5;
2291
+ }
2292
+
2293
+ #style-3::-webkit-scrollbar-thumb {
2294
+ cursor: pointer;
2295
+ background-color: #333;
2296
+ }
2297
+
2298
+ .copy-code {
2299
+ display: flex;
2300
+ }
2301
+
2302
+ .copy-code svg {
2303
+ margin-right: 10px;
2304
+ }
2305
+
2306
+ .accordion.accordion-flush {
2307
+ float: left;
2308
+ width: 100%;
2309
+ margin-bottom: 45px;
2310
+ }
2311
+
2312
+ .box {
2313
+ width: 100%;
2314
+ height: 200px;
2315
+ /* background-color: #ddf6fc0e; */
2316
+ /* color: #fff; */
2317
+ text-align: center;
2318
+ line-height: 200px;
2319
+ /* Center content vertically */
2320
+ font-size: 1.5rem;
2321
+ }
2322
+
2323
+ .amex {
2324
+ background-image: url("/assests/amex.svg");
2325
+ }
2326
+
2327
+ .visa {
2328
+ background-image: url("/assests/visa.svg");
2329
+ }
2330
+
2331
+ .mastercard {
2332
+ background-image: url("/assests/mastercard.svg");
2333
+ }
2334
+
2335
+ .discover {
2336
+ background-image: url("/assests/discover.svg");
2337
+ }
2338
+
2339
+ .expiry-date-group {
2340
+ float: left;
2341
+ width: 30%;
2342
+ }
2343
+
2344
+ .expiry-date-group input {
2345
+ width: calc(100% + 1px);
2346
+ border-top-right-radius: 0;
2347
+ border-bottom-right-radius: 0;
2348
+ }
2349
+
2350
+ .expiry-date-group input:focus {
2351
+ position: relative;
2352
+ z-index: 10;
2353
+
2354
+ }
2355
+ .pay-tbl th{width: 24% !important;}
2356
+ .pay-tbl th:last-child{width: 28% !important;}
2357
+ .security-code-group {
2358
+ float: right;
2359
+ width: 40%;
2360
+ position: relative;
2361
+ }
2362
+
2363
+ .security-code-group input {
2364
+ border-top-left-radius: 0;
2365
+ border-bottom-left-radius: 0;
2366
+ }
2367
+
2368
+ .zip-code-group {
2369
+ clear: both;
2370
+ }
2371
+ .amnt input{max-width: 150px; margin-right:8px;}
2372
+ .amnt p, .amnt form{margin-right:8px;}
2373
+ #submitButton {
2374
+ outline: 0 !important;
2375
+ height: 46px;
2376
+ font-size: 16px;
2377
+ background-color: #161616 !important;
2378
+ border: none;
2379
+ display: block;
2380
+ width: 100%;
2381
+ color: white;
2382
+ border-radius: 180px;
2383
+ }
2384
+
2385
+ #submitRequestButton {
2386
+ outline: 0 !important;
2387
+ height: 46px;
2388
+ font-size: 16px;
2389
+ background-color: #161616 !important;
2390
+ border: none;
2391
+ display: block;
2392
+ width: 100%;
2393
+ border-radius: 180px;
2394
+ }
2395
+
2396
+ #PayButton {
2397
+ outline: 0 !important;
2398
+ height: 46px;
2399
+ font-size: 16px;
2400
+ background-color: #161616 !important;
2401
+ border: none;
2402
+ display: block;
2403
+ width: 100%;
2404
+ border-radius: 180px;
2405
+ margin: 2px;
2406
+ }
2407
+
2408
+ #PayButton:hover {
2409
+ background-color: #61c699 !important;
2410
+ }
2411
+
2412
+ #PayButton:active {
2413
+ background-color: #61c699 !important;
2414
+ }
2415
+
2416
+ #PayButton:disabled {
2417
+ background: rgb(172, 44, 170) !important;
2418
+ color: #fff !important;
2419
+ }
2420
+
2421
+ .form-control {
2422
+ color: #35254d;
2423
+ }
2424
+
2425
+ .container {
2426
+ margin-top: 10px;
2427
+ }
2428
+
2429
+ #Checkout {
2430
+ z-index: 100001;
2431
+ width: 100%;
2432
+ height: 100%;
2433
+ min-height: 100%;
2434
+ background: 0 0 #ffffff;
2435
+ border-radius: 24px;
2436
+ border: 1px solid #e0dfe2;
2437
+ margin-left: auto;
2438
+ margin-right: auto;
2439
+ display: block;
2440
+ }
2441
+
2442
+ #Checkout .header {
2443
+ display: flex;
2444
+ /* Enables Flexbox */
2445
+ justify-content: center;
2446
+ /* Centers content horizontally */
2447
+ align-items: center;
2448
+ /* Centers content vertically */
2449
+ text-align: center;
2450
+ padding: 8px;
2451
+ border-bottom: 1px solid #dedede;
2452
+ margin: 0 10px 20px 10px;
2453
+ }
2454
+
2455
+ #Checkout .header button {
2456
+ border: 0;
2457
+ background: none;
2458
+ padding: 0;
2459
+ }
2460
+
2461
+ #Checkout h1 {
2462
+ margin: 0;
2463
+ flex: 1;
2464
+ padding: 10px;
2465
+ /* Allows the title to grow and fill the space for centering */
2466
+ font-size: 23px;
2467
+ font-weight: 500;
2468
+ color: #35254d;
2469
+ align-items: start;
2470
+ display: flex;
2471
+ }
2472
+
2473
+ #Checkout>form {
2474
+ margin: 0 25px 10px 25px;
2475
+ }
2476
+
2477
+ label {
2478
+ color: rgba(53, 37, 77, 0.6);
2479
+ margin-bottom: 2px;
2480
+ text-transform: uppercase;
2481
+ font-family: "IBM Plex Mono", monospace;
2482
+ font-weight: 500;
2483
+ font-size: 12px;
2484
+ }
2485
+
2486
+ .input-container {
2487
+ position: relative;
2488
+ }
2489
+
2490
+ .input-container input {
2491
+ padding-right: 25px;
2492
+ }
2493
+
2494
+ #zipcode {
2495
+ text-transform: capitalize !important;
2496
+ }
2497
+
2498
+ #zipcode {
2499
+ width: 18px;
2500
+ position: absolute;
2501
+ right: 8px;
2502
+ top: 9px;
2503
+ }
2504
+
2505
+ #zipcode .zip-tip {
2506
+ display: none;
2507
+ background-color: rgb(0, 0, 0, 0.4);
2508
+ padding: 5px 8px;
2509
+ border-radius: 6px;
2510
+ position: absolute;
2511
+ right: 26px;
2512
+ top: -9px;
2513
+ font-size: 12.5px;
2514
+ text-transform: capitalize !important;
2515
+ color: #fff;
2516
+ width: 240px;
2517
+ line-height: 16px;
2518
+ }
2519
+
2520
+ #zipcode .zip-tip:before {
2521
+ width: 0;
2522
+ height: 0;
2523
+ border-top: 7px solid transparent;
2524
+ border-bottom: 7px solid transparent;
2525
+ border-left: 7px solid #000;
2526
+ opacity: 0.4;
2527
+ position: absolute;
2528
+ right: -7px;
2529
+ top: 50%;
2530
+ transform: translateY(-50%);
2531
+ content: "";
2532
+ }
2533
+
2534
+ #zipcode:hover .zip-tip {
2535
+ display: block;
2536
+ }
2537
+
2538
+ .input-container>i,
2539
+ a[role="button"] {
2540
+ color: #d3d3d3;
2541
+ width: 25px;
2542
+ height: 30px;
2543
+ line-height: 30px;
2544
+ font-size: 16px;
2545
+ position: absolute;
2546
+ top: 5px;
2547
+ right: 6px;
2548
+ cursor: pointer;
2549
+ text-align: center;
2550
+ }
2551
+
2552
+ .input-container>i:hover,
2553
+ a[role="button"]:hover {
2554
+ color: #777;
2555
+ }
2556
+
2557
+ .amount-placeholder {
2558
+ white-space: nowrap;
2559
+ font-size: 44px;
2560
+ /* height: 35px; */
2561
+ font-weight: 600;
2562
+ line-height: 40px;
2563
+ }
2564
+
2565
+ .amount-placeholder>button {
2566
+ float: right;
2567
+ width: 60px;
2568
+ }
2569
+
2570
+ .amount-placeholder>span {
2571
+ line-height: 34px;
2572
+ }
2573
+
2574
+ .top-amnt {
2575
+ display: flex;
2576
+ margin-bottom: 10px;
2577
+ align-items: center;
2578
+ justify-content: space-between;
2579
+ }
2580
+
2581
+ .amtleft {
2582
+ text-align: center;
2583
+ }
2584
+
2585
+ .amtleft span {
2586
+ color: #35254d;
2587
+ margin: 0 -5px;
2588
+ }
2589
+
2590
+ .card-row {
2591
+ text-align: right;
2592
+ margin: 22px 0 0 0;
2593
+ max-width: 85px;
2594
+ line-height: 20px;
2595
+ }
2596
+
2597
+ .yer {
2598
+ border-radius: 0;
2599
+ }
2600
+
2601
+ .card-row span {
2602
+ width: 33px;
2603
+ height: 21px;
2604
+ margin: 0 2px;
2605
+ background-repeat: no-repeat;
2606
+ display: inline-block;
2607
+ background-size: contain;
2608
+ }
2609
+
2610
+ .card-image {
2611
+ background-repeat: no-repeat;
2612
+ padding-right: 50px;
2613
+ background-position: right 2px center;
2614
+ background-size: auto 90%;
2615
+ }
2616
+
2617
+ /* .cvc-preview-container {
2618
+ overflow: hidden;
2619
+ } */
2620
+
2621
+ .cvc-preview-container {
2622
+ /* overflow: hidden; */
2623
+ position: absolute;
2624
+ z-index: 9999;
2625
+ right: -71px;
2626
+ top: -54px;
2627
+ width: 165px;
2628
+ border-radius: 5px;
2629
+ padding: 5px;
2630
+ background-color: rgb(0, 0, 0, 0.3);
2631
+ display: none;
2632
+ }
2633
+
2634
+ .cvc-preview-container:before {
2635
+ position: absolute;
2636
+ left: 50%;
2637
+ transform: translate(-50%);
2638
+ bottom: -5px;
2639
+ width: 0;
2640
+ height: 0;
2641
+ border-left: 5px solid transparent;
2642
+ border-right: 5px solid transparent;
2643
+ border-top: 5px solid #000;
2644
+ opacity: 0.3;
2645
+ content: "";
2646
+ }
2647
+
2648
+ .security-code-group #cvc:hover .cvc-preview-container {
2649
+ display: block;
2650
+ }
2651
+
2652
+ .cvc-preview-container.two-card div {
2653
+ width: 50%;
2654
+ height: 45px;
2655
+ }
2656
+
2657
+ .cvc-preview-container.two-card div.amex-cvc-preview {
2658
+ float: right;
2659
+ }
2660
+
2661
+ .cvc-preview-container.two-card div.visa-mc-dis-cvc-preview {
2662
+ float: left;
2663
+ }
2664
+
2665
+ /* .cvc-preview-container div {
2666
+ height: 160px;
2667
+ } */
2668
+
2669
+ .amex-cvc-preview {
2670
+ background: url("data:image/png;base64,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") center center/contain no-repeat;
2671
+ }
2672
+
2673
+ .visa-mc-dis-cvc-preview {
2674
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAACOCAMAAAASE4S+AAAAAXNSR0IArs4c6QAAAadQTFRFAAAAzbFj+NyAyLNg+N2DzbRk+96CzrVj+96AzrNj+92By7Rl+92AzbRl/eCDzrRl/t+DzrVl/t+CzbVm/t+C3MFt3MFv/N2B/N6CzrRm/uCDzrRm/uCC7M93/N6CAAAAAQEBAgIBBAQCBQUDBwcECQgFDAsGDg0HEA4IEQ8JFRMLFxUMIBwQIR0RJSETKyYWLikYLyoYMCsZMSsZNC4bNzEcOTIdQDkhQTkhQzsiRT0jRj4kSkEmTEMnWE4tWU8uWk8uXFEvXVIwXlMwX1QxaV02bWA4bmE5cWQ6eGo+eWs+fW5Afm9Bi3pHjHtIkH9KmIZOmYdPnIlQnYpRo5BUppJVqJRWqpZXq5dYrJdYrZhZuaNfvaZhvqdiwKljwapjxK1lybFnyrJoy7NozrVm1Ltq171u2L5v2b9s2b9t2sBt3cNy3zEx3zIx38Rz4MVz4cZ04kI552NI6GVJ6Mx36s5368957dF674xb79J78NN78dV78tV789Z99Nd99dh+9rZv9th+9tl+99l/+duA+sx5+sx6+t2B+92B/N6B/d+C/uCD////AikOogAAAB90Uk5TACQkJSU9PT4+Q0NERJqav7/AwNjY4uLi4u7u8/P6+u6knPAAAAJkSURBVHja7d3pTxNBGMfxQbwAW06Pcj0tntQT8b7v+0JFxaserQcuKlQUFbFUaqvjH+1uG0lMfEETie4z39+bJ/tik/1kjt3MbDLGBFkWbeu0CtPZFq03v7KwxSpO04KKcmm7VZ32xeW2VK70nUF7tlj1afJnH+tA6k3UBWbUrHKBudJ0u8DsNtaJwIQJEyZMmDBhwoQJEyZMmPPCFCcCEyZMmDBhwoQJEyZMmDBhwoQJEyZMmDBhwoQJ010m+5swYcKECRMmTJgwYcKECRMmTJgwYcIMFfPHP8/vz5PLjnpzzmg2F07mxIhXVUYmwsjMVan0nbkQMrOeN1aY+zAsjHleNoRMf1x+rWa6KfjjM4RMvxdWN63+4QaYMGHC/EvM6b0HgpI6tvtoyq9vz+4/clcf89sJ2eiXIZGEyJD9sEl6RAa1MVPbpczsk8vT52SHHZCDUxelXxtzW/x4wPx+6cxn+0A2208PX9pB2aONef7xk3JrBjkth4Jysnf9fX1T0Czzmqx+6pcvcel/pJd5RRLXg1p6d0vWvdHKHJCeG2XljLVb5aZS5r2E3A6uTiUu2Km1klLK3CXxZDK5xd6RNYd3St+MTuaryr94G6y92iuy77X+b9rSi/d8usOEyZIXC5gsR7O5MN9bRexvwoQJEyZMmDBhwoQJEyZMmDBhwoT5vzNLLihLJu8CM2+6XGB2meUuMFeYyEf9ysmIqcsUtSuLmQZjGp8pdxafNxtjamIZ1f12MhOrDQ6uXhRLD4/nVb4/S/nx4XRsSeUY8prGtOI0186eKl8Xae3QSOxojTSUgT8BEvkXyqDHONgAAAAASUVORK5CYII=") center center/contain no-repeat;
2675
+ }
2676
+
2677
+ .submit-button-lock {
2678
+ height: 15px;
2679
+ margin-top: -2px;
2680
+ margin-right: 7px;
2681
+ vertical-align: middle;
2682
+ background: url("data:image/png;base64,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NQxdFfpzGC4sNKwm7Hm4VXh+eHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4+ziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD/iRPCqeVMrvRfuXflBNeTu4f7kufGK+eN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl/ygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ/KUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752/ob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy+KK4k8l3JLr31l9V/ndzPaE7b2l9qX7d+B2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI+0MqiyvUqvakfVp+qk6oEaj5rmvep7t+2d2sfb17/fbX/TAY0DxQc+HhQcvH/I91BrrUFtxWHc4azDz+ui6rq/Z39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv/eD1Q3sTq+lQM6O5+AQ4ITnx4sf4H++eDDzZeYp9qukn/Z/2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0/m/989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX+x+aem172296XCz/ZbjrY6+BX3n+l37L972un3ljv+dGwOLBvruLr57/17cPel93v3RB6kPXj/Mejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy//lfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0+OFvyn+tveV0auffnf7vWdiycTwa9HrmT9K3qi+OfrW9m3nZOjk03dp76anit6rvj/2gf2h+2P0x5Hp7E/4T5WfjT93fAn88ngmbWbm3/eE8/syOll+AAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAAgYMEyIzOUpTVFViY3N2gJmcnaipq7fX3ebx+Pn8eTEuDQAAAI9JREFUKM/N0UkOglAQRdFHDyK90n64+9+lAyQgookjuaNKTlJJpaQlO2n6sW8SW/uCjrku2EloWDLhi3gDa4O3pTtA5Tt+BXDbiDsBmSQpAyZ3pRhoLUmS1QLxSilQPOcCSFfKgfxgPgfZ9ch7Y21LCcdd5wVH5SckEzkXc0ylpPJnMpETmX/d9eUpH1/5AKrsQVrz7YPBAAAAAElFTkSuQmCC") center center/contain no-repeat;
2683
+ width: 14px;
2684
+ display: inline-block;
2685
+ }
2686
+
2687
+ .align-middle {
2688
+ vertical-align: middle;
2689
+ }
2690
+
2691
+ input {
2692
+ box-shadow: none !important;
2693
+ }
2694
+
2695
+ .powerd-by-part {
2696
+ display: flex;
2697
+ font-size: 12px;
2698
+ text-align: center;
2699
+ align-items: center;
2700
+ justify-content: center;
2701
+ margin: 5px 0 20px 0;
2702
+ }
2703
+
2704
+ .powered-logo {
2705
+ width: 18px;
2706
+ height: auto;
2707
+ float: right;
2708
+ padding: 2px;
2709
+ background: #000000;
2710
+ border-radius: 4px;
2711
+ margin-left: 5px;
2712
+ }
2713
+
2714
+ .comp-name {
2715
+ display: block;
2716
+ margin-bottom: 8px;
2717
+ }
2718
+
2719
+ .client-logo {
2720
+ max-width: 140px;
2721
+ display: block;
2722
+ margin: auto;
2723
+ padding: 5px;
2724
+ }
2725
+
2726
+ #qrCode {
2727
+ text-align: center;
2728
+ }
2729
+
2730
+ #qrIcon {
2731
+ cursor: pointer;
2732
+ border: 1px solid rgb(252, 252, 252);
2733
+ padding: 10px;
2734
+ border-radius: 5px;
2735
+ background: #ffffff;
2736
+ }
2737
+
2738
+ #target {
2739
+ display: none;
2740
+ text-align: center;
2741
+ transition: all 5s;
2742
+ padding: 5px;
2743
+ transition: max-height 0.5s, overflow 0.5s 0.5s;
2744
+ }
2745
+
2746
+ /* input:focus {
2747
+ border-color: #acc6db !important;
2748
+ background-color: #acc6db !important;
2749
+ } */
2750
+
2751
+ @media(min-width:725px) {
2752
+ .pay-main{margin: 0 auto !important;}
2753
+ #modal-pay iframe{
2754
+ max-height: 548px;
2755
+ min-height: 548px;
2756
+ }
2757
+ .get-pay-pgs #modal-pay iframe{
2758
+ max-height: 500px !important;
2759
+ min-height: 500px !important;
2760
+ }
2761
+ #modal-pay .modal-header{
2762
+ position: absolute;
2763
+ right: 5px;
2764
+ top: 15px;
2765
+ z-index: 4;
2766
+ }
2767
+ /* #modal-pay .modal-body{
2768
+ padding: 0 !important;
2769
+ } */
2770
+ }
2771
+ @media(max-width:724px) {
2772
+ #modal-pay iframe{
2773
+ min-height: 708px !important;
2774
+ }
2775
+ #modal-pay iframe .modal-body{
2776
+ padding:0 !important;
2777
+ }
2778
+ }
2779
+ #modal-pay .modal-body{padding: 0;}
2780
+ /* #modal-pay .modal-content{padding: 0 !important;} */
2781
+ .pre-auth-pop .modal-header{position: relative; z-index: 4;}
2782
+ .pre-auth-pop iframe{
2783
+ margin-top: -60px;
2784
+ }
2785
+
2786
+ .form-control {
2787
+ padding: .320rem .75rem !important;
2788
+
2789
+ }
2790
+ `);
2791
+ }
2792
+
2793
+ // src/app/components/Payment/Payment.tsx
2794
+ function Payment() {
2795
+ var _a;
2796
+ const [state, setState] = (0, import_react10.useState)({
2797
+ show: false,
2798
+ publicKey: "",
2799
+ sessionKey: "",
2800
+ cardNumber: "",
2801
+ year: "",
2802
+ month: "",
2803
+ cvv: "",
2804
+ zip: "",
2805
+ amount: ""
2806
+ });
2807
+ const [isValid, setIsValid] = (0, import_react10.useState)(false);
2808
+ const [isValidMonth, setIsValidMonth] = (0, import_react10.useState)(false);
2809
+ const [data, setData] = (0, import_react10.useState)(null);
2810
+ const handlePaymentClick = async () => {
2811
+ try {
2812
+ const response = await import_axios2.default.post(`${baseUrl}generate-session`, {});
2813
+ const data2 = response.data;
2814
+ if (data2 && (data2 == null ? void 0 : data2.result) === true) {
2815
+ setState((prev) => {
2816
+ var _a2, _b;
2817
+ return __spreadProps(__spreadValues({}, prev), {
2818
+ show: true,
2819
+ publicKey: (_a2 = data2 == null ? void 0 : data2.data) == null ? void 0 : _a2.publicKeyPem,
2820
+ sessionKey: (_b = data2 == null ? void 0 : data2.data) == null ? void 0 : _b.session_key
2821
+ });
2822
+ });
2823
+ }
2824
+ } catch (error) {
2825
+ console.log(error);
2826
+ }
2827
+ };
2828
+ const handleSubmitPay = async () => {
2829
+ const track2_data = `${state.cardNumber.replace(/\s+/g, "")}=${state.year}${state.month.length > 1 ? state.month : "0" + state.month} ${state.cvv}`;
2830
+ const publicKey = import_node_forge.default.pki.publicKeyFromPem(state.publicKey);
2831
+ const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
2832
+ md: import_node_forge.default.md.sha1.create(),
2833
+ mgf1: { md: import_node_forge.default.md.sha1.create() }
2834
+ });
2835
+ const encryptedBase64 = import_node_forge.default.util.encode64(encrypted);
2836
+ console.log(encryptedBase64);
2837
+ const requestBody = {
2838
+ enc_track2_data: encryptedBase64,
2839
+ session_key: state.sessionKey,
2840
+ algorithm: "RSAES_OAEP_SHA_1"
2841
+ };
2842
+ const apiUrl = "https://m1ao5pku8b.execute-api.us-east-2.amazonaws.com/prod/tokenizer/tokenize";
2843
+ try {
2844
+ const response = await import_axios2.default.post(apiUrl, requestBody, {
2845
+ headers: {
2846
+ "x-app-session-key": state == null ? void 0 : state.sessionKey,
2847
+ "Content-Type": "application/json"
2848
+ }
2849
+ });
2850
+ if ((response == null ? void 0 : response.status) === 200) {
2851
+ import_react_toastify3.toast.success("Payment Successful");
2852
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
2853
+ show: false,
2854
+ publicKey: "",
2855
+ sessionKey: "",
2856
+ cardNumber: "",
2857
+ year: "",
2858
+ month: "",
2859
+ cvv: "",
2860
+ zip: "",
2861
+ amount: ""
2862
+ }));
2863
+ }
2864
+ console.log("response", response);
2865
+ } catch (error) {
2866
+ console.error("Error:", error);
2867
+ }
2868
+ };
2869
+ const handleCardNumberChange = (e) => {
2870
+ e.preventDefault();
2871
+ const { value } = e.target;
2872
+ const formattedValue = value.replace(/\D+/g, "").replace(/(.{4})/g, "$1 ").trim();
2873
+ if (value.match(/[a-zA-Z]/)) {
2874
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
2875
+ cardNumber: formattedValue,
2876
+ error: "Invalid input. Please enter only numbers."
2877
+ }));
2878
+ } else {
2879
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
2880
+ cardNumber: formattedValue,
2881
+ error: null
2882
+ }));
2883
+ }
2884
+ };
2885
+ const handleMonthChange = (e) => {
2886
+ setIsValid(false);
2887
+ let value = e.target.value;
2888
+ if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
2889
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
2890
+ month: value
2891
+ }));
2892
+ setIsValidMonth(false);
2893
+ } else {
2894
+ setIsValidMonth(true);
2895
+ }
2896
+ };
2897
+ const handleYearChange = (e) => {
2898
+ setIsValid(false);
2899
+ setIsValidMonth(false);
2900
+ let value = e.target.value;
2901
+ if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 0 && parseInt(value, 10) <= 99)) {
2902
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
2903
+ year: value
2904
+ }));
2905
+ }
2906
+ };
2907
+ const handleCVVChange = (e) => {
2908
+ setIsValid(false);
2909
+ setIsValidMonth(false);
2910
+ let value = e.target.value;
2911
+ if (/^\d{0,4}$/.test(value)) {
2912
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
2913
+ cvv: value
2914
+ }));
2915
+ }
2916
+ };
2917
+ const handleZIP = (e) => {
2918
+ setIsValid(false);
2919
+ setIsValidMonth(false);
2920
+ let value = e.target.value;
2921
+ if (/^\d{0,7}$/.test(value)) {
2922
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
2923
+ zip: value
2924
+ }));
2925
+ }
2926
+ };
2927
+ const handleAmount = (e) => {
2928
+ setIsValid(false);
2929
+ setIsValidMonth(false);
2930
+ let value = e.target.value;
2931
+ value = value.replace(/[^0-9.]/g, "");
2932
+ let parts = value.split(".");
2933
+ if (parts.length > 2) {
2934
+ parts = [parts.shift(), parts.join(".")];
2935
+ value = parts.join("");
2936
+ }
2937
+ if (parts.length === 2 && parts[1].length > 2) {
2938
+ value = `${parts[0]}.${parts[1].slice(0, 2)}`;
2939
+ }
2940
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
2941
+ amount: value
2942
+ }));
2943
+ };
2944
+ const handleAmountBlur = () => {
2945
+ const value = state.amount;
2946
+ if (value && !value.includes(".")) {
2947
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
2948
+ amount: `${value}.00`
2949
+ }));
2950
+ }
2951
+ };
2952
+ function amountFormat(amt) {
2953
+ if (amt) {
2954
+ return `${parseFloat(amt).toLocaleString("en-US", {
2955
+ minimumFractionDigits: 2,
2956
+ maximumFractionDigits: 2
2957
+ })}`;
2958
+ }
2959
+ return "";
2960
+ }
2961
+ return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(Paymentstyles, null), /* @__PURE__ */ import_react10.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react10.default.createElement(
2962
+ "button",
2963
+ {
2964
+ className: "export-btn",
2965
+ style: { width: "83px" },
2966
+ onClick: () => handlePaymentClick()
2967
+ },
2968
+ "Payment"
2969
+ ), /* @__PURE__ */ import_react10.default.createElement(
2970
+ import_react_bootstrap6.Modal,
2971
+ {
2972
+ show: state.show,
2973
+ onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
2974
+ show: false
2975
+ })),
2976
+ centered: true
2977
+ },
2978
+ /* @__PURE__ */ import_react10.default.createElement(import_react_bootstrap6.Modal.Header, { closeButton: true }),
2979
+ /* @__PURE__ */ import_react10.default.createElement(import_react_bootstrap6.Modal.Body, null, /* @__PURE__ */ import_react10.default.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "row" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react10.default.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react10.default.createElement("h1", null, "Pay")), /* @__PURE__ */ import_react10.default.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "form-group", style: { display: "none" } }, /* @__PURE__ */ import_react10.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react10.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react10.default.createElement("span", { className: "input-group-addon" }, "$"), /* @__PURE__ */ import_react10.default.createElement(
2980
+ "input",
2981
+ {
2982
+ type: "text",
2983
+ name: "amount",
2984
+ value: "1",
2985
+ className: "form-control",
2986
+ id: ""
2987
+ }
2988
+ )), /* @__PURE__ */ import_react10.default.createElement(
2989
+ "span",
2990
+ {
2991
+ id: "amount-error",
2992
+ style: { color: "red", display: "none" }
2993
+ }
2994
+ )), /* @__PURE__ */ import_react10.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react10.default.createElement("label", null, "Name on card"), /* @__PURE__ */ import_react10.default.createElement(
2995
+ "input",
2996
+ {
2997
+ id: "NameOnCard",
2998
+ className: "form-control required",
2999
+ type: "text",
3000
+ maxLength: 100,
3001
+ placeholder: "Name"
3002
+ }
3003
+ ), /* @__PURE__ */ import_react10.default.createElement(
3004
+ "span",
3005
+ {
3006
+ id: "NameOnCard-error",
3007
+ style: { color: "red", display: "none" }
3008
+ }
3009
+ )), /* @__PURE__ */ import_react10.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react10.default.createElement(
3010
+ "input",
3011
+ {
3012
+ "data-token": "card_number",
3013
+ className: "null card-image form-control required",
3014
+ type: "text",
3015
+ maxLength: 19,
3016
+ value: state.cardNumber,
3017
+ placeholder: "0000 0000 0000 0000",
3018
+ onChange: handleCardNumberChange
3019
+ }
3020
+ ), state.error && /* @__PURE__ */ import_react10.default.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ import_react10.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react10.default.createElement(
3021
+ "input",
3022
+ {
3023
+ "data-token": "exp_month",
3024
+ className: "form-control required",
3025
+ type: "text",
3026
+ placeholder: "MM",
3027
+ value: state.month,
3028
+ maxLength: 2,
3029
+ onChange: (e) => handleMonthChange(e)
3030
+ }
3031
+ ), isValidMonth && /* @__PURE__ */ import_react10.default.createElement(
3032
+ "span",
3033
+ {
3034
+ id: "card_number-error",
3035
+ style: { color: "red", fontSize: "15px" }
3036
+ },
3037
+ (_a = ErrorText) == null ? void 0 : _a.montherror
3038
+ )), /* @__PURE__ */ import_react10.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react10.default.createElement(
3039
+ "input",
3040
+ {
3041
+ "data-token": "exp_year",
3042
+ className: "form-control required",
3043
+ type: "text",
3044
+ placeholder: "YY",
3045
+ maxLength: 2,
3046
+ value: state.year,
3047
+ onChange: (e) => handleYearChange(e)
3048
+ }
3049
+ ), state.yearError && /* @__PURE__ */ import_react10.default.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ import_react10.default.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react10.default.createElement(
3050
+ "input",
3051
+ {
3052
+ "data-token": "cvv",
3053
+ className: "form-control required",
3054
+ type: "text",
3055
+ maxLength: 4,
3056
+ value: state.cvv,
3057
+ placeholder: "CVV",
3058
+ onChange: (e) => handleCVVChange(e)
3059
+ }
3060
+ ), /* @__PURE__ */ import_react10.default.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ import_react10.default.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ import_react10.default.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ import_react10.default.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ import_react10.default.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ import_react10.default.createElement("label", null, "Postal code"), /* @__PURE__ */ import_react10.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react10.default.createElement(
3061
+ "input",
3062
+ {
3063
+ id: "ZIPCode",
3064
+ className: "form-control required",
3065
+ name: "zip",
3066
+ type: "text",
3067
+ maxLength: 7,
3068
+ placeholder: "000000",
3069
+ value: state.zip,
3070
+ onChange: (e) => handleZIP(e)
3071
+ }
3072
+ ), /* @__PURE__ */ import_react10.default.createElement(
3073
+ "a",
3074
+ {
3075
+ tabIndex: 0,
3076
+ role: "button",
3077
+ "data-toggle": "popover",
3078
+ "data-trigger": "focus",
3079
+ "data-placement": "left",
3080
+ "data-content": "Enter the ZIP/Postal code for your credit card billing address."
3081
+ },
3082
+ /* @__PURE__ */ import_react10.default.createElement("i", { className: "fa fa-question-circle" })
3083
+ ), /* @__PURE__ */ import_react10.default.createElement(
3084
+ "span",
3085
+ {
3086
+ id: "ZIPCode-error",
3087
+ style: { color: "red", display: "none" }
3088
+ },
3089
+ ErrorText.fieldrequired
3090
+ ))), /* @__PURE__ */ import_react10.default.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react10.default.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ import_react10.default.createElement(
3091
+ "input",
3092
+ {
3093
+ id: "Amount",
3094
+ className: "form-control required",
3095
+ name: "amount",
3096
+ type: "text",
3097
+ placeholder: "",
3098
+ value: state.amount,
3099
+ onChange: (e) => handleAmount(e),
3100
+ onBlur: handleAmountBlur
3101
+ }
3102
+ ))), /* @__PURE__ */ import_react10.default.createElement("div", { className: "card-row" }, /* @__PURE__ */ import_react10.default.createElement("span", { className: "visa" }), /* @__PURE__ */ import_react10.default.createElement("span", { className: "mastercard" }), /* @__PURE__ */ import_react10.default.createElement("span", { className: "amex" }), /* @__PURE__ */ import_react10.default.createElement("span", { className: "discover" }))), /* @__PURE__ */ import_react10.default.createElement(
3103
+ "button",
3104
+ {
3105
+ type: "button",
3106
+ id: "submitButton",
3107
+ onClick: () => handleSubmitPay(),
3108
+ className: "btn btn-block btn-success submit-button"
3109
+ },
3110
+ "Pay"
3111
+ )), /* @__PURE__ */ import_react10.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react10.default.createElement(
3112
+ "svg",
3113
+ {
3114
+ xmlns: "http://www.w3.org/2000/svg",
3115
+ width: "20",
3116
+ height: "20",
3117
+ viewBox: "0 0 26 26"
3118
+ },
3119
+ /* @__PURE__ */ import_react10.default.createElement(
3120
+ "path",
3121
+ {
3122
+ fill: "currentColor",
3123
+ d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
3124
+ }
3125
+ )
3126
+ ), "Secure payments powered by Fractal", /* @__PURE__ */ import_react10.default.createElement(
3127
+ "img",
3128
+ {
3129
+ src: "https://ui.fractalpay.com/favicon.ico",
3130
+ alt: "Fractal logo",
3131
+ className: "powered-logo"
3132
+ }
3133
+ )))))))
3134
+ )));
3135
+ }
3136
+
3137
+ // src/app/components/Transaction/CompletedTransactions.tsx
3138
+ var import_axios3 = __toESM(require("axios"), 1);
3139
+ var import_react12 = __toESM(require("react"), 1);
3140
+ var import_react_bootstrap7 = require("react-bootstrap");
3141
+ var import_react_bs_datatable = require("react-bs-datatable");
3142
+ var import_react_datepicker = __toESM(require("react-datepicker"), 1);
3143
+ var import_react_datepicker2 = require("react-datepicker/dist/react-datepicker.css");
3144
+ var import_react_toastify4 = require("react-toastify");
3145
+
3146
+ // src/app/components/Pagination/Pagination.tsx
3147
+ var import_react11 = __toESM(require("react"), 1);
3148
+ var PaginationPg = ({ totalPages, onPageChange, current }) => {
3149
+ const [currentPage, setCurrentPage] = (0, import_react11.useState)(current);
3150
+ const [showPages, setShowPages] = (0, import_react11.useState)(false);
3151
+ (0, import_react11.useEffect)(() => {
3152
+ setCurrentPage(current);
3153
+ }, [current]);
3154
+ (0, import_react11.useEffect)(() => {
3155
+ setTimeout(() => {
3156
+ setShowPages(true);
3157
+ }, 1e3);
3158
+ }, []);
3159
+ const handlePrevious = (e) => {
3160
+ e.preventDefault();
3161
+ if (currentPage > 1) {
3162
+ const newPage = currentPage - 1;
3163
+ setCurrentPage(newPage);
3164
+ onPageChange(newPage);
3165
+ }
3166
+ };
3167
+ const handleNext = (e) => {
3168
+ e.preventDefault();
3169
+ if (currentPage < totalPages) {
3170
+ const newPage = currentPage + 1;
3171
+ setCurrentPage(newPage);
3172
+ onPageChange(newPage);
3173
+ }
3174
+ };
3175
+ const handlePageClick = (e, pageNumber) => {
3176
+ e.preventDefault();
3177
+ setCurrentPage(pageNumber);
3178
+ onPageChange(pageNumber);
3179
+ };
3180
+ const getPageNumbers = () => {
3181
+ const pageNumbers = [];
3182
+ if (totalPages <= 5) {
3183
+ for (let i = 1; i <= totalPages; i++) {
3184
+ pageNumbers.push(renderPageNumber(i));
3185
+ }
3186
+ } else {
3187
+ if (currentPage > 3) {
3188
+ pageNumbers.push(renderPageNumber(1));
3189
+ if (currentPage > 4) {
3190
+ pageNumbers.push(/* @__PURE__ */ import_react11.default.createElement("li", { key: "start-break", className: "page-item disabled" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "page-link" }, "...")));
3191
+ }
3192
+ }
3193
+ const startPage = Math.max(currentPage - 1, 1);
3194
+ const endPage = Math.min(startPage + 2, totalPages);
3195
+ for (let i = startPage; i <= endPage; i++) {
3196
+ pageNumbers.push(renderPageNumber(i));
3197
+ }
3198
+ if (currentPage < totalPages - 2) {
3199
+ if (currentPage < totalPages - 3) {
3200
+ pageNumbers.push(/* @__PURE__ */ import_react11.default.createElement("li", { key: "end-break", className: "page-item disabled" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "page-link" }, "...")));
3201
+ }
3202
+ pageNumbers.push(renderPageNumber(totalPages));
3203
+ }
3204
+ }
3205
+ return pageNumbers;
3206
+ };
3207
+ const renderPageNumber = (pageNumber) => /* @__PURE__ */ import_react11.default.createElement("li", { key: pageNumber, className: `page-item ${currentPage === pageNumber ? "active" : ""}` }, /* @__PURE__ */ import_react11.default.createElement("a", { className: "page-link cursor-pointer", onClick: (e) => handlePageClick(e, pageNumber) }, pageNumber));
3208
+ return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("nav", { className: "app-pagination py-2" }, /* @__PURE__ */ import_react11.default.createElement("ul", { className: "pagination justify-content-center" }, /* @__PURE__ */ import_react11.default.createElement("li", { className: `page-item ${currentPage === 1 ? "disabled" : ""}` }, /* @__PURE__ */ import_react11.default.createElement("a", { className: "page-link cursor-pointer", onClick: handlePrevious }, /* @__PURE__ */ import_react11.default.createElement("span", null, "\u2B9C"))), showPages && getPageNumbers(), /* @__PURE__ */ import_react11.default.createElement("li", { className: `page-item ${currentPage === totalPages ? "disabled" : ""}` }, /* @__PURE__ */ import_react11.default.createElement("a", { className: "page-link cursor-pointer", onClick: handleNext }, /* @__PURE__ */ import_react11.default.createElement("span", null, "\u2B9E"))))));
3209
+ };
3210
+ var Pagination_default = (0, import_react11.memo)(PaginationPg);
3211
+
3212
+ // src/app/components/Transaction/CompletedTransactions.tsx
3213
+ var STORY_HEADERS = [
3214
+ {
3215
+ prop: "Date",
3216
+ title: "Date",
3217
+ isSortable: true
3218
+ },
3219
+ {
3220
+ prop: "Name",
3221
+ isFilterable: true,
3222
+ title: "Name",
3223
+ isSortable: true
3224
+ },
3225
+ {
3226
+ prop: "lastFourDigits",
3227
+ title: "Last 4",
3228
+ isSortable: true
3229
+ },
3230
+ {
3231
+ prop: "cardType",
3232
+ title: "Brand",
3233
+ isSortable: true
3234
+ },
3235
+ {
3236
+ prop: "Amount",
3237
+ title: "Amount",
3238
+ isSortable: true
3239
+ },
3240
+ {
3241
+ prop: "Net",
3242
+ title: "Net",
3243
+ isSortable: true
3244
+ }
3245
+ ];
3246
+ function CompletedTransactions(props) {
3247
+ const [dataList, setDataList] = (0, import_react12.useState)([]);
3248
+ const [startDate, setStartDate] = (0, import_react12.useState)(null);
3249
+ const [endDate, setEndDate] = (0, import_react12.useState)(null);
3250
+ const [state, setState] = (0, import_react12.useState)({
3251
+ page: 1,
3252
+ totalPage: 0,
3253
+ data: [],
3254
+ csvData: false
3255
+ });
3256
+ const formatDate = (inputDate) => {
3257
+ if (!inputDate) return "";
3258
+ const date = new Date(inputDate);
3259
+ const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
3260
+ const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
3261
+ return `${date.getFullYear()}-${month}-${day}`;
3262
+ };
3263
+ const downloadStringAsCSV = (name, content) => {
3264
+ const csvContent = convertArrayOfObjectsToCSV(content);
3265
+ const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
3266
+ const a = document.createElement("a");
3267
+ a.href = URL.createObjectURL(blob);
3268
+ a.download = name;
3269
+ document.body.appendChild(a);
3270
+ a.click();
3271
+ document.body.removeChild(a);
3272
+ };
3273
+ const convertArrayOfObjectsToCSV = (array) => {
3274
+ const headers = Object.keys(array[0]);
3275
+ const csvRows = [];
3276
+ csvRows.push(headers.join(","));
3277
+ for (const obj of array) {
3278
+ const values = headers.map((header) => obj[header]);
3279
+ csvRows.push(values.join(","));
3280
+ }
3281
+ return csvRows.join("\n");
3282
+ };
3283
+ const fetchData = async (newPage, startDate2, endDate2) => {
3284
+ var _a, _b;
3285
+ try {
3286
+ const response = await import_axios3.default.post(`${baseUrl}get-complete-request-payments`, {
3287
+ fractalpayPublicKey: props.fractalpayClientKey,
3288
+ page: newPage,
3289
+ dateStart: startDate2 ? formatDate(startDate2) : "",
3290
+ dateEnd: endDate2 ? formatDate(endDate2) : ""
3291
+ });
3292
+ const data = response.data;
3293
+ setState((prev) => {
3294
+ var _a2;
3295
+ return __spreadProps(__spreadValues({}, prev), { totalPage: (_a2 = data == null ? void 0 : data.data) == null ? void 0 : _a2.totalPage });
3296
+ });
3297
+ if (data && (data == null ? void 0 : data.result) === true) {
3298
+ const result = ((_b = (_a = data == null ? void 0 : data.data) == null ? void 0 : _a.allPaymentTransaction) != null ? _b : []).map((item) => ({
3299
+ Date: formatDate(item == null ? void 0 : item.Date),
3300
+ Name: item == null ? void 0 : item.Name,
3301
+ lastFourDigits: item == null ? void 0 : item.lastFourDigits,
3302
+ cardType: item == null ? void 0 : item.cardType,
3303
+ Amount: `$${parseFloat(item == null ? void 0 : item.Amount).toLocaleString("en-US", { maximumFractionDigits: 2 })}`,
3304
+ Net: `$${parseFloat(item == null ? void 0 : item.Net).toLocaleString("en-US", { maximumFractionDigits: 2 })}`
3305
+ }));
3306
+ if (state.csvData) {
3307
+ downloadStringAsCSV("transaction.csv", result);
3308
+ setState((prev) => {
3309
+ var _a2;
3310
+ return __spreadProps(__spreadValues({}, prev), { data: (_a2 = data == null ? void 0 : data.data) == null ? void 0 : _a2.allPaymentTransaction, csvData: false });
3311
+ });
3312
+ }
3313
+ setDataList(result);
3314
+ } else {
3315
+ console.log("No data available");
3316
+ }
3317
+ } catch (error) {
3318
+ console.log(error);
3319
+ }
3320
+ };
3321
+ const handleStartDateChange = (date) => {
3322
+ setStartDate(date);
3323
+ };
3324
+ const handleEndDateChange = (date) => {
3325
+ setEndDate(date);
3326
+ };
3327
+ const handleExport = async () => {
3328
+ var _a;
3329
+ if (!startDate) {
3330
+ import_react_toastify4.toast.error("Start date required");
3331
+ } else if (!endDate) {
3332
+ import_react_toastify4.toast.error("End date required");
3333
+ } else {
3334
+ setState((prev) => __spreadProps(__spreadValues({}, prev), { csvData: true }));
3335
+ try {
3336
+ const response = await import_axios3.default.post(`${baseUrl}get-complete-request-payments`, {
3337
+ fractalpayPublicKey: props.fractalpayClientKey,
3338
+ dateStart: startDate ? formatDate(startDate) : "",
3339
+ dateEnd: endDate ? formatDate(endDate) : "",
3340
+ isExport: true
3341
+ });
3342
+ if (response.data.status) {
3343
+ const link = document.createElement("a");
3344
+ link.href = `${(_a = response == null ? void 0 : response.data) == null ? void 0 : _a.data}`;
3345
+ link.target = "_blank";
3346
+ document.body.appendChild(link);
3347
+ link.click();
3348
+ document.body.removeChild(link);
3349
+ }
3350
+ } catch (error) {
3351
+ console.log(error);
3352
+ }
3353
+ }
3354
+ };
3355
+ (0, import_react12.useEffect)(() => {
3356
+ fetchData(state.page, startDate, endDate);
3357
+ }, [state.page]);
3358
+ const handlePageChange = (pageNumber) => {
3359
+ setState((prev) => __spreadProps(__spreadValues({}, prev), { page: pageNumber }));
3360
+ fetchData(pageNumber, startDate, endDate);
3361
+ };
3362
+ return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement("style", null, `
3363
+ .react-datepicker-wrapper:first-child {
3364
+ margin-right: 10px;
3365
+ }
3366
+ `), /* @__PURE__ */ import_react12.default.createElement("div", { className: "mb-5" }, /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", marginRight: "10px", marginTop: "25px" } }, /* @__PURE__ */ import_react12.default.createElement(
3367
+ import_react_datepicker.default,
3368
+ {
3369
+ selected: startDate,
3370
+ onChange: handleStartDateChange,
3371
+ selectsStart: true,
3372
+ startDate,
3373
+ endDate,
3374
+ placeholderText: "Start Date",
3375
+ required: true
3376
+ }
3377
+ ), /* @__PURE__ */ import_react12.default.createElement(
3378
+ import_react_datepicker.default,
3379
+ {
3380
+ selected: endDate,
3381
+ onChange: handleEndDateChange,
3382
+ selectsEnd: true,
3383
+ startDate,
3384
+ endDate,
3385
+ minDate: startDate,
3386
+ placeholderText: "End Date"
3387
+ }
3388
+ )), /* @__PURE__ */ import_react12.default.createElement("button", { className: "export-btn1", onClick: handleExport }, "Export")), /* @__PURE__ */ import_react12.default.createElement(
3389
+ import_react_bs_datatable.DatatableWrapper,
3390
+ {
3391
+ body: dataList,
3392
+ headers: STORY_HEADERS,
3393
+ paginationOptionsProps: {
3394
+ initialState: {
3395
+ rowsPerPage: 10,
3396
+ options: [5, 10, 15, 20]
3397
+ }
3398
+ }
3399
+ },
3400
+ /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap7.Row, { className: "mb-4 p-2" }, /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap7.Col, { xs: 12, sm: 6, lg: 4, className: "d-flex flex-col justify-content-lg-start align-items-center justify-content-sm-start mb-2 mb-sm-0" }, /* @__PURE__ */ import_react12.default.createElement(import_react_bs_datatable.PaginationOptions, null)), /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap7.Col, { xs: 12, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }), /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap7.Col, { xs: 12, sm: 6, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }, /* @__PURE__ */ import_react12.default.createElement(import_react_bs_datatable.Filter, null))),
3401
+ /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap7.Row, null, /* @__PURE__ */ import_react12.default.createElement("div", { className: "responsive-tbl" }, /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap7.Table, null, /* @__PURE__ */ import_react12.default.createElement(import_react_bs_datatable.TableHeader, null), /* @__PURE__ */ import_react12.default.createElement(import_react_bs_datatable.TableBody, null)))),
3402
+ /* @__PURE__ */ import_react12.default.createElement(Pagination_default, { totalPages: state.totalPage, onPageChange: handlePageChange, current: state.page })
3403
+ ))));
3404
+ }
3405
+
3406
+ // src/app/components/Payment/TockenizPay.tsx
3407
+ var import_react13 = __toESM(require("react"), 1);
3408
+ var import_react_bootstrap8 = require("react-bootstrap");
3409
+ var import_react_toastify5 = require("react-toastify");
3410
+ var import_axios4 = __toESM(require("axios"), 1);
3411
+ var import_node_forge2 = __toESM(require("node-forge"), 1);
3412
+ var import_credit_card_type = __toESM(require("credit-card-type"), 1);
3413
+ function TockenizPay() {
3414
+ const [state, setState] = (0, import_react13.useState)({
3415
+ show: false,
3416
+ publicKey: "",
3417
+ sessionKey: "",
3418
+ cardNumber: "",
3419
+ year: "",
3420
+ month: "",
3421
+ cvv: "",
3422
+ zip: "",
3423
+ amount: ""
3424
+ });
3425
+ const [cardTypeDetail, setCardTypeDetail] = (0, import_react13.useState)(null);
3426
+ const [isValid, setIsValid] = (0, import_react13.useState)(false);
3427
+ const [isValidMonth, setIsValidMonth] = (0, import_react13.useState)(false);
3428
+ const [data, setData] = (0, import_react13.useState)(null);
3429
+ const handlePaymentClick = async () => {
3430
+ try {
3431
+ const response = await import_axios4.default.post(`${baseUrl}/generate-session`, {});
3432
+ const data2 = response.data;
3433
+ if (data2 && (data2 == null ? void 0 : data2.result) === true) {
3434
+ setState((prev) => {
3435
+ var _a, _b;
3436
+ return __spreadProps(__spreadValues({}, prev), {
3437
+ show: true,
3438
+ publicKey: (_a = data2 == null ? void 0 : data2.data) == null ? void 0 : _a.publicKeyPem,
3439
+ sessionKey: (_b = data2 == null ? void 0 : data2.data) == null ? void 0 : _b.session_key
3440
+ });
3441
+ });
3442
+ }
3443
+ } catch (error) {
3444
+ console.log(error);
3445
+ }
3446
+ };
3447
+ const handleSubmitPay = async () => {
3448
+ var _a, _b, _c, _d, _e;
3449
+ let track2_data = `${(_a = state == null ? void 0 : state.cardNumber) == null ? void 0 : _a.replaceAll(" ", "")}=${state.year}${((_b = state == null ? void 0 : state.month) == null ? void 0 : _b.length) > 1 ? state == null ? void 0 : state.month : "0" + (state == null ? void 0 : state.month)} ${state.cvv}`;
3450
+ const publicKey = import_node_forge2.default.pki.publicKeyFromPem(state.publicKey);
3451
+ const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
3452
+ md: import_node_forge2.default.md.sha1.create(),
3453
+ mgf1: {
3454
+ md: import_node_forge2.default.md.sha1.create()
3455
+ }
3456
+ });
3457
+ const encryptedBase64 = import_node_forge2.default.util.encode64(encrypted);
3458
+ console.log(encryptedBase64);
3459
+ const requestBody = {
3460
+ enc_track2_data: encryptedBase64,
3461
+ session_key: state.sessionKey,
3462
+ algorithm: "RSAES_OAEP_SHA_1"
3463
+ };
3464
+ try {
3465
+ const response = await import_axios4.default.post(
3466
+ "https://m1ao5pku8b.execute-api.us-east-2.amazonaws.com/prod/tokenizer/tokenize",
3467
+ requestBody,
3468
+ {
3469
+ headers: {
3470
+ "x-app-session-key": state == null ? void 0 : state.sessionKey,
3471
+ "Content-Type": "application/json"
3472
+ }
3473
+ }
3474
+ );
3475
+ if ((response == null ? void 0 : response.status) === 200) {
3476
+ import_react_toastify5.toast.success("Payment Successful");
3477
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
3478
+ show: false,
3479
+ publicKey: "",
3480
+ sessionKey: "",
3481
+ cardNumber: "",
3482
+ year: "",
3483
+ month: "",
3484
+ cvv: "",
3485
+ zip: "",
3486
+ amount: ""
3487
+ }));
3488
+ }
3489
+ console.log("response", response);
3490
+ } catch (error) {
3491
+ import_react_toastify5.toast.error((_e = (_d = (_c = error == null ? void 0 : error.response) == null ? void 0 : _c.data) == null ? void 0 : _d.data) == null ? void 0 : _e.message);
3492
+ console.error("Error:", error);
3493
+ }
3494
+ };
3495
+ const formatCreditCardNumber = (cardNumber, cardType) => {
3496
+ const cleanNumber = cardNumber.replace(/\D+/g, "");
3497
+ let formattedValue;
3498
+ switch (cardType) {
3499
+ case "visa":
3500
+ case "mastercard":
3501
+ case "Discover":
3502
+ case "JCB":
3503
+ formattedValue = cleanNumber.replace(/(.{4})/g, "$1 ").trim();
3504
+ break;
3505
+ case "american-express":
3506
+ formattedValue = cleanNumber.replace(/(\d{4})(\d{6})(\d{5})/, "$1 $2 $3");
3507
+ break;
3508
+ case "diners-club":
3509
+ formattedValue = cleanNumber.replace(/(\d{4})(\d{6})(\d{4})/, "$1 $2 $3");
3510
+ break;
3511
+ case "maestro":
3512
+ formattedValue = cleanNumber.length <= 19 ? cleanNumber.replace(/(.{4})/g, "$1 ").trim() : cleanNumber;
3513
+ break;
3514
+ default:
3515
+ formattedValue = cleanNumber;
3516
+ }
3517
+ return formattedValue;
3518
+ };
3519
+ const handleCardNumberChange = (e) => {
3520
+ e.preventDefault();
3521
+ e.stopPropagation();
3522
+ const { value } = e.target;
3523
+ let cardtyp = (0, import_credit_card_type.default)(value)[0];
3524
+ const formattedValue = formatCreditCardNumber(value, cardtyp == null ? void 0 : cardtyp.type);
3525
+ setCardTypeDetail((0, import_credit_card_type.default)(value)[0]);
3526
+ console.log(formattedValue);
3527
+ if (value.match(/[a-zA-Z]/)) {
3528
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
3529
+ cardNumber: formattedValue,
3530
+ error: "Invalid input. Please enter only numbers."
3531
+ }));
3532
+ } else {
3533
+ handleCardNumLength("");
3534
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
3535
+ cardNumber: formattedValue,
3536
+ error: null
3537
+ }));
3538
+ }
3539
+ };
3540
+ function handleCardNumLength(cardType) {
3541
+ const cardLengths = {
3542
+ "Visa": 16,
3543
+ "MasterCard": 16,
3544
+ "AmericanExpress": 15,
3545
+ "Discover": 16,
3546
+ "DinersClub": 14,
3547
+ "JCB": 16
3548
+ };
3549
+ return cardLengths[cardType] || "Unknown card type";
3550
+ }
3551
+ const handleMonthChange = (e) => {
3552
+ setIsValid(false);
3553
+ let value = e.target.value;
3554
+ if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
3555
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
3556
+ month: value
3557
+ }));
3558
+ setIsValidMonth(false);
3559
+ } else {
3560
+ setIsValidMonth(true);
3561
+ }
3562
+ };
3563
+ const handleYearChange = (e) => {
3564
+ setIsValid(false);
3565
+ setIsValidMonth(false);
3566
+ let value = e.target.value;
3567
+ if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 0 && parseInt(value, 10) <= 99)) {
3568
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
3569
+ year: value
3570
+ }));
3571
+ }
3572
+ };
3573
+ const handleCVVChange = (e) => {
3574
+ setIsValid(false);
3575
+ setIsValidMonth(false);
3576
+ let value = e.target.value;
3577
+ if (/^\d{0,4}$/.test(value)) {
3578
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
3579
+ cvv: value
3580
+ }));
3581
+ }
3582
+ };
3583
+ const handleZIP = (e) => {
3584
+ setIsValid(false);
3585
+ setIsValidMonth(false);
3586
+ let value = e.target.value;
3587
+ if (/^\d{0,7}$/.test(value)) {
3588
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
3589
+ zip: value
3590
+ }));
3591
+ }
3592
+ };
3593
+ const handleAmount = (e) => {
3594
+ setIsValid(false);
3595
+ setIsValidMonth(false);
3596
+ let value = e.target.value;
3597
+ value = value.replace(/[^0-9.]/g, "");
3598
+ let parts = value.split(".");
3599
+ if (parts.length > 2) {
3600
+ parts = [parts.shift(), parts.join(".")];
3601
+ value = parts.join("");
3602
+ }
3603
+ if (parts.length === 2 && parts[1].length > 2) {
3604
+ value = `${parts[0]}.${parts[1].slice(0, 2)}`;
3605
+ }
3606
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
3607
+ amount: value
3608
+ }));
3609
+ };
3610
+ const handleAmountBlur = () => {
3611
+ const value = state.amount;
3612
+ if (value && !value.includes(".")) {
3613
+ setState((prev) => __spreadProps(__spreadValues({}, prev), {
3614
+ amount: `${value}.00`
3615
+ }));
3616
+ }
3617
+ };
3618
+ function amountFormat(amt) {
3619
+ if (amt) {
3620
+ return `${parseFloat(amt).toLocaleString("en-US", {
3621
+ minimumFractionDigits: 2,
3622
+ maximumFractionDigits: 2
3623
+ })}`;
3624
+ }
3625
+ return "";
3626
+ }
3627
+ console.log("===================cardtype===============", cardTypeDetail);
3628
+ return /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(import_react_toastify5.ToastContainer, null), /* @__PURE__ */ import_react13.default.createElement(
3629
+ "button",
3630
+ {
3631
+ className: "export-btn mt-4",
3632
+ style: { width: "100px" },
3633
+ onClick: () => handlePaymentClick()
3634
+ },
3635
+ "TokenizePay"
3636
+ ), /* @__PURE__ */ import_react13.default.createElement(
3637
+ import_react_bootstrap8.Modal,
3638
+ {
3639
+ show: state.show,
3640
+ onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
3641
+ show: false
3642
+ })),
3643
+ centered: true
3644
+ },
3645
+ /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap8.Modal.Header, { closeButton: true }),
3646
+ /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap8.Modal.Body, null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "row" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react13.default.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react13.default.createElement("h1", null, "Pay")), /* @__PURE__ */ import_react13.default.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement("label", null, "Name on card"), /* @__PURE__ */ import_react13.default.createElement(
3647
+ "input",
3648
+ {
3649
+ id: "NameOnCard",
3650
+ className: "form-control required",
3651
+ type: "text",
3652
+ maxLength: 100,
3653
+ placeholder: "Name"
3654
+ }
3655
+ ), /* @__PURE__ */ import_react13.default.createElement(
3656
+ "span",
3657
+ {
3658
+ id: "NameOnCard-error",
3659
+ style: { color: "red", display: "none" }
3660
+ }
3661
+ )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement(
3662
+ "input",
3663
+ {
3664
+ "data-token": "card_number",
3665
+ className: "null card-image form-control required",
3666
+ type: "text",
3667
+ maxLength: 19,
3668
+ value: state.cardNumber,
3669
+ placeholder: "0000 0000 0000 0000",
3670
+ onChange: handleCardNumberChange
3671
+ }
3672
+ ), state.error && /* @__PURE__ */ import_react13.default.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react13.default.createElement(
3673
+ "input",
3674
+ {
3675
+ "data-token": "exp_month",
3676
+ className: "form-control required",
3677
+ type: "text",
3678
+ placeholder: "MM",
3679
+ value: state.month,
3680
+ maxLength: 2,
3681
+ onChange: (e) => handleMonthChange(e)
3682
+ }
3683
+ ), isValidMonth && /* @__PURE__ */ import_react13.default.createElement(
3684
+ "span",
3685
+ {
3686
+ id: "card_number-error",
3687
+ style: { color: "red", fontSize: "15px" }
3688
+ },
3689
+ "Please write month only 1 to 12"
3690
+ )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react13.default.createElement(
3691
+ "input",
3692
+ {
3693
+ "data-token": "exp_year",
3694
+ className: "form-control required",
3695
+ type: "text",
3696
+ placeholder: "YY",
3697
+ maxLength: 2,
3698
+ value: state.year,
3699
+ onChange: (e) => handleYearChange(e)
3700
+ }
3701
+ ), state.yearError && /* @__PURE__ */ import_react13.default.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react13.default.createElement(
3702
+ "input",
3703
+ {
3704
+ "data-token": "cvv",
3705
+ className: "form-control required",
3706
+ type: "text",
3707
+ maxLength: 4,
3708
+ value: state.cvv,
3709
+ placeholder: "CVV",
3710
+ onChange: (e) => handleCVVChange(e)
3711
+ }
3712
+ ), /* @__PURE__ */ import_react13.default.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ import_react13.default.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ import_react13.default.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ import_react13.default.createElement("label", null, "Postal code"), /* @__PURE__ */ import_react13.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react13.default.createElement(
3713
+ "input",
3714
+ {
3715
+ id: "ZIPCode",
3716
+ className: "form-control required",
3717
+ name: "zip",
3718
+ type: "text",
3719
+ maxLength: 7,
3720
+ placeholder: "000000",
3721
+ value: state.zip,
3722
+ onChange: (e) => handleZIP(e)
3723
+ }
3724
+ ), /* @__PURE__ */ import_react13.default.createElement(
3725
+ "a",
3726
+ {
3727
+ tabIndex: 0,
3728
+ role: "button",
3729
+ "data-toggle": "popover",
3730
+ "data-trigger": "focus",
3731
+ "data-placement": "left",
3732
+ "data-content": "Enter the ZIP/Postal code for your credit card billing address."
3733
+ },
3734
+ /* @__PURE__ */ import_react13.default.createElement("i", { className: "fa fa-question-circle" })
3735
+ ), /* @__PURE__ */ import_react13.default.createElement(
3736
+ "span",
3737
+ {
3738
+ id: "ZIPCode-error",
3739
+ style: { color: "red", display: "none" }
3740
+ },
3741
+ "This field is required"
3742
+ ))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react13.default.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ import_react13.default.createElement(
3743
+ "input",
3744
+ {
3745
+ id: "Amount",
3746
+ className: "form-control required",
3747
+ name: "amount",
3748
+ type: "text",
3749
+ placeholder: "",
3750
+ value: state.amount,
3751
+ onChange: (e) => handleAmount(e),
3752
+ onBlur: handleAmountBlur
3753
+ }
3754
+ ))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-row" }, /* @__PURE__ */ import_react13.default.createElement("span", { className: "visa" }), /* @__PURE__ */ import_react13.default.createElement("span", { className: "mastercard" }), /* @__PURE__ */ import_react13.default.createElement("span", { className: "amex" }), /* @__PURE__ */ import_react13.default.createElement("span", { className: "discover" }))), /* @__PURE__ */ import_react13.default.createElement(
3755
+ "button",
3756
+ {
3757
+ type: "button",
3758
+ id: "submitButton",
3759
+ onClick: () => handleSubmitPay(),
3760
+ className: "btn btn-block btn-success submit-button"
3761
+ },
3762
+ "Submit"
3763
+ )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react13.default.createElement(
3764
+ "svg",
3765
+ {
3766
+ xmlns: "http://www.w3.org/2000/svg",
3767
+ width: "20",
3768
+ height: "20",
3769
+ viewBox: "0 0 26 26"
3770
+ },
3771
+ /* @__PURE__ */ import_react13.default.createElement(
3772
+ "path",
3773
+ {
3774
+ fill: "currentColor",
3775
+ d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
3776
+ }
3777
+ )
3778
+ ), "Secure payments powered by Fractal", /* @__PURE__ */ import_react13.default.createElement(
3779
+ "img",
3780
+ {
3781
+ src: "https://ui.fractalpay.com/favicon.ico",
3782
+ alt: "Fractal logo",
3783
+ className: "powered-logo"
3784
+ }
3785
+ )))))))
3786
+ ));
3787
+ }
3788
+
3789
+ // src/app/components/Payment/GetPaymentDynamic.tsx
3790
+ var import_react15 = __toESM(require("react"), 1);
3791
+ var import_react_bootstrap9 = require("react-bootstrap");
3792
+
3793
+ // src/app/components/Loader/MyLoadingAnimation.tsx
3794
+ var import_react14 = __toESM(require("react"), 1);
3795
+ function MyLoadingAnimation() {
3796
+ return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(LoaderStyle_default, null), /* @__PURE__ */ import_react14.default.createElement("div", { className: "loading-animation" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "spinner" })));
3797
+ }
3798
+
3799
+ // src/app/components/Payment/GetPaymentDynamic.tsx
3800
+ function GetPaymentDynamic(props) {
3801
+ const { amount, fractalpayClientKey, orderID } = props;
3802
+ const [loading, setLoading] = (0, import_react15.useState)(false);
3803
+ const [show, setShow] = (0, import_react15.useState)(false);
3804
+ const [iframeLoaded, setIframeLoaded] = (0, import_react15.useState)(false);
3805
+ const [phoneNumber, setPhoneNumber] = (0, import_react15.useState)("");
3806
+ const [errorMessage, setErrorMessage] = (0, import_react15.useState)("");
3807
+ const [submitClicked, setSubmitClicked] = (0, import_react15.useState)(false);
3808
+ const [isValidNumber, setIsValidNumber] = (0, import_react15.useState)(true);
3809
+ const handleClose = () => {
3810
+ setIframeLoaded(false);
3811
+ setTimeout(() => {
3812
+ setShow(false);
3813
+ }, 1e3);
3814
+ };
3815
+ const handleShow = () => {
3816
+ if (fractalpayClientKey) {
3817
+ setShow(true);
3818
+ setIframeLoaded(true);
3819
+ } else {
3820
+ console.error("Fractalpay client key is missing or empty.");
3821
+ }
3822
+ };
3823
+ (0, import_react15.useEffect)(() => {
3824
+ if (!fractalpayClientKey) {
3825
+ console.error("Fractalpay client key is missing or empty.");
3826
+ }
3827
+ }, [fractalpayClientKey]);
3828
+ const handlePhoneNumberChange = (e) => {
3829
+ const number = e.target.value;
3830
+ const isValid = /^\d*$/.test(number);
3831
+ if (isValid) {
3832
+ setPhoneNumber(number);
3833
+ setIsValidNumber(number.length <= 10);
3834
+ if (number.length > 10) {
3835
+ setErrorMessage("Please enter a valid phone number (max 10 digits)");
3836
+ } else {
3837
+ setErrorMessage("");
3838
+ }
3839
+ } else {
3840
+ setErrorMessage("Please enter a valid phone number (numbers only)");
3841
+ }
3842
+ };
3843
+ const handleLoad = () => {
3844
+ setLoading(false);
3845
+ };
3846
+ (0, import_react15.useEffect)(() => {
3847
+ const messageListener = (event) => {
3848
+ var _a, _b;
3849
+ const response = (_b = (_a = event == null ? void 0 : event.data) == null ? void 0 : _a.other) == null ? void 0 : _b.data;
3850
+ if (response == null ? void 0 : response.result) {
3851
+ setTimeout(() => {
3852
+ handleClose();
3853
+ }, 5e3);
3854
+ }
3855
+ };
3856
+ window.addEventListener("message", messageListener);
3857
+ return () => {
3858
+ window.removeEventListener("message", messageListener);
3859
+ };
3860
+ }, []);
3861
+ return /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Pay"), /* @__PURE__ */ import_react15.default.createElement(import_react_bootstrap9.Modal, { show: show && iframeLoaded, id: "modal-pay", className: "modal-lg", onHide: handleClose }, /* @__PURE__ */ import_react15.default.createElement(import_react_bootstrap9.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react15.default.createElement(import_react_bootstrap9.Modal.Body, null, loading && /* @__PURE__ */ import_react15.default.createElement(MyLoadingAnimation, null), /* @__PURE__ */ import_react15.default.createElement(
3862
+ "iframe",
3863
+ {
3864
+ src: `${baseUrl}widget-form/${amount}?fractalpay_public_key=${fractalpayClientKey}&order_id=${orderID}`,
3865
+ height: "auto",
3866
+ width: "100%",
3867
+ style: { display: loading ? "none" : "block" },
3868
+ onLoad: handleLoad
3869
+ }
3870
+ ))));
3871
+ }
1695
3872
  // Annotate the CommonJS export names for ESM import in node:
1696
3873
  0 && (module.exports = {
3874
+ CompletedTransactions,
3875
+ GetPaymentDynamic,
3876
+ Payment,
1697
3877
  RequestPayment,
1698
3878
  RequestPaymentAllInput,
1699
3879
  RequestPaymentDynamic,
1700
- RequestPaymentonClick
3880
+ RequestPaymentonClick,
3881
+ RqstPaymntInputField,
3882
+ TockenizPay
1701
3883
  });