@fractalpay/fractalpay-next-dev 0.0.247 → 0.0.249
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.
- package/dist/index.d.ts +16 -42
- package/dist/index.js +405 -1269
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -39,7 +39,7 @@ var require_package = __commonJS({
|
|
|
39
39
|
"package.json"(exports, module) {
|
|
40
40
|
module.exports = {
|
|
41
41
|
name: "@fractalpay/fractalpay-next-dev",
|
|
42
|
-
version: "0.0.
|
|
42
|
+
version: "0.0.249",
|
|
43
43
|
private: false,
|
|
44
44
|
type: "module",
|
|
45
45
|
scripts: {
|
|
@@ -113,25 +113,8 @@ import { useState, useEffect } from "react";
|
|
|
113
113
|
import { jsx } from "react/jsx-runtime";
|
|
114
114
|
var LoaderStyle = (props) => {
|
|
115
115
|
return /* @__PURE__ */ jsx("style", { children: `
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
position: fixed; /* Fixed position to cover the viewport */
|
|
119
|
-
top: 0;
|
|
120
|
-
left: 0;
|
|
121
|
-
width: 100%;
|
|
122
|
-
height: 100%;
|
|
123
|
-
display: flex;
|
|
124
|
-
justify-content: center;
|
|
125
|
-
align-items: center;
|
|
126
|
-
/* background: rgba(255, 255, 0, 0.01); Adjust the blur effect */
|
|
127
|
-
background-color: rgba(31, 29, 29, 0.52); /* Semi-transparent black background */
|
|
128
|
-
|
|
129
|
-
backdrop-filter: blur(0.5px); /* Blur effect */
|
|
130
|
-
z-index: 999999999999 !important; /* Ensure it's on top of other elements */
|
|
131
|
-
transform: translate(0%, 0%) !important
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.loader-dark {
|
|
116
|
+
|
|
117
|
+
.loader {
|
|
135
118
|
position: fixed; /* Fixed position to cover the viewport */
|
|
136
119
|
top: 0;
|
|
137
120
|
left: 0;
|
|
@@ -143,7 +126,7 @@ var LoaderStyle = (props) => {
|
|
|
143
126
|
/* background: rgba(255, 255, 0, 0.01); Adjust the blur effect */
|
|
144
127
|
background-color: rgba(31, 29, 29, 0.52); /* Semi-transparent black background */
|
|
145
128
|
|
|
146
|
-
backdrop-filter: blur(
|
|
129
|
+
backdrop-filter: blur(.5px); /* Blur effect */
|
|
147
130
|
z-index: 999999999999 !important; /* Ensure it's on top of other elements */
|
|
148
131
|
transform: translate(0%, 0%) !important
|
|
149
132
|
}
|
|
@@ -218,11 +201,10 @@ var LoaderStyle_default = LoaderStyle;
|
|
|
218
201
|
|
|
219
202
|
// src/app/components/Loader/Loader.tsx
|
|
220
203
|
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
221
|
-
var Loader = (
|
|
222
|
-
var _b = _a, { intensity = "light" } = _b, props = __objRest(_b, ["intensity"]);
|
|
204
|
+
var Loader = (props) => {
|
|
223
205
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
224
206
|
/* @__PURE__ */ jsx2(LoaderStyle_default, {}),
|
|
225
|
-
(props == null ? void 0 : props.loading) && /* @__PURE__ */ jsx2("div", { className:
|
|
207
|
+
(props == null ? void 0 : props.loading) && /* @__PURE__ */ jsx2("div", { className: "loader", children: /* @__PURE__ */ jsxs("div", { className: "lds-ellipsis", children: [
|
|
226
208
|
/* @__PURE__ */ jsx2("div", {}),
|
|
227
209
|
/* @__PURE__ */ jsx2("div", {}),
|
|
228
210
|
/* @__PURE__ */ jsx2("div", {}),
|
|
@@ -236,8 +218,8 @@ var Loader_default = Loader;
|
|
|
236
218
|
var { name } = require_package();
|
|
237
219
|
var S3Url = "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/";
|
|
238
220
|
if (name === "@fractalpay/fractalpay-next-dev") {
|
|
221
|
+
masterBaseUrl = "https://dev-sky-node.fractalpay.com/";
|
|
239
222
|
baseUrl = "https://dev-widget.fractalpay.com/";
|
|
240
|
-
masterBaseUrl = "http://localhost:8081/";
|
|
241
223
|
fractalGatewayUrl = "https://api-dev.merchant-trends.com/";
|
|
242
224
|
datacapUrl = "https://token-cert.dcap.com/v1/client";
|
|
243
225
|
threedsSecurePublicKey = "pk_test_51RH5Wc2SlJvyNZ80hpUDy88r4rVdpijfKbNaWaUyQEE6rOrPmG2JQyAj7G5amBD5z5daC56WaeT4jfNhrrPcGOEP00UyKu6AOw";
|
|
@@ -2926,7 +2908,7 @@ function ErrorCardMszStyle() {
|
|
|
2926
2908
|
|
|
2927
2909
|
// src/app/components/ErrorCardMessage/ErrorCardMessage.tsx
|
|
2928
2910
|
import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2929
|
-
var ErrorCardMessage = ({ onClose, error
|
|
2911
|
+
var ErrorCardMessage = ({ onClose, error }) => {
|
|
2930
2912
|
return /* @__PURE__ */ jsxs6(Fragment6, { children: [
|
|
2931
2913
|
/* @__PURE__ */ jsx12(ErrorCardMszStyle, {}),
|
|
2932
2914
|
/* @__PURE__ */ jsx12("div", { className: "card-error", children: /* @__PURE__ */ jsx12("div", { className: "payment-error-container", children: /* @__PURE__ */ jsxs6("div", { className: "error-icon", children: [
|
|
@@ -2935,7 +2917,7 @@ var ErrorCardMessage = ({ onClose, error, autoTrigger = false }) => {
|
|
|
2935
2917
|
/* @__PURE__ */ jsx12("div", { className: "payment-error-text", children: error }),
|
|
2936
2918
|
/* @__PURE__ */ jsx12("div", { className: "thank-you-text", children: "Try again later " })
|
|
2937
2919
|
] }),
|
|
2938
|
-
|
|
2920
|
+
/* @__PURE__ */ jsx12("div", { className: "error-btn-div", children: /* @__PURE__ */ jsx12("button", { onClick: onClose, children: "OK" }) })
|
|
2939
2921
|
] }) }) })
|
|
2940
2922
|
] });
|
|
2941
2923
|
};
|
|
@@ -2952,28 +2934,14 @@ var socketClient_default = socket;
|
|
|
2952
2934
|
|
|
2953
2935
|
// src/app/components/Atoms/CardBankRadio/CardBankRadio.tsx
|
|
2954
2936
|
import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
2955
|
-
var CardBankRadio = (
|
|
2956
|
-
|
|
2957
|
-
const savingsBadgeClass = `frac-saving-badge ${skydesign ? "frac-saving-badge-corner" : "frac-saving-badge-corner frac-saving-badge-with-radio"}`;
|
|
2958
|
-
return /* @__PURE__ */ jsx13(Fragment7, { children: /* @__PURE__ */ jsx13(
|
|
2937
|
+
var CardBankRadio = (props) => {
|
|
2938
|
+
return /* @__PURE__ */ jsx13(Fragment7, { children: /* @__PURE__ */ jsxs7(
|
|
2959
2939
|
"div",
|
|
2960
2940
|
{
|
|
2961
2941
|
className: `frac-card-bank-radio ${props.activetab === props.value ? "frac-active" : ""}`,
|
|
2962
2942
|
onClick: () => props.onChange(props.value),
|
|
2963
2943
|
role: "radio",
|
|
2964
|
-
children:
|
|
2965
|
-
/* @__PURE__ */ jsxs7("div", { className: "frac-card-title-main", children: [
|
|
2966
|
-
/* @__PURE__ */ jsxs7("div", { className: "box-inner-card-text", children: [
|
|
2967
|
-
/* @__PURE__ */ jsx13("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
|
|
2968
|
-
/* @__PURE__ */ jsx13("div", { className: "frac-card-label-text", children: props.label })
|
|
2969
|
-
] }),
|
|
2970
|
-
/* @__PURE__ */ jsx13("div", { className: "frac-card-label", children: /* @__PURE__ */ jsx13("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) }) })
|
|
2971
|
-
] }),
|
|
2972
|
-
savingsText ? /* @__PURE__ */ jsx13("button", { type: "button", className: savingsBadgeClass, children: savingsText }) : null,
|
|
2973
|
-
/* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13("input", { name: "paymenttype", checked: props.activetab === props.value, type: "hidden", value: props.value, onChange: (e) => {
|
|
2974
|
-
props.onChange(e.target.value);
|
|
2975
|
-
} }) })
|
|
2976
|
-
] }) : /* @__PURE__ */ jsxs7(Fragment7, { children: [
|
|
2944
|
+
children: [
|
|
2977
2945
|
/* @__PURE__ */ jsxs7("div", { className: "frac-card-title-main", children: [
|
|
2978
2946
|
/* @__PURE__ */ jsx13("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
|
|
2979
2947
|
/* @__PURE__ */ jsxs7("div", { className: "frac-card-label", children: [
|
|
@@ -2981,11 +2949,10 @@ var CardBankRadio = (_a) => {
|
|
|
2981
2949
|
/* @__PURE__ */ jsx13("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) })
|
|
2982
2950
|
] })
|
|
2983
2951
|
] }),
|
|
2984
|
-
savingsText ? /* @__PURE__ */ jsx13("button", { type: "button", className: savingsBadgeClass, children: savingsText }) : null,
|
|
2985
2952
|
/* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13("input", { name: "paymenttype", checked: props.activetab === props.value, type: "radio", value: props.value, onChange: (e) => {
|
|
2986
2953
|
props.onChange(e.target.value);
|
|
2987
2954
|
} }) })
|
|
2988
|
-
]
|
|
2955
|
+
]
|
|
2989
2956
|
}
|
|
2990
2957
|
) });
|
|
2991
2958
|
};
|
|
@@ -3010,7 +2977,6 @@ function CardBankRadioStyles({}) {
|
|
|
3010
2977
|
justify-content: space-between;
|
|
3011
2978
|
align-items: center;
|
|
3012
2979
|
align-self: stretch;
|
|
3013
|
-
position: relative;
|
|
3014
2980
|
}
|
|
3015
2981
|
|
|
3016
2982
|
input[type="radio"] {
|
|
@@ -3068,28 +3034,6 @@ function CardBankRadioStyles({}) {
|
|
|
3068
3034
|
.frac-card-bank-radio.frac-active {
|
|
3069
3035
|
background: #F6F6F7;
|
|
3070
3036
|
}
|
|
3071
|
-
|
|
3072
|
-
.frac-saving-badge {
|
|
3073
|
-
padding: 1px 7px !important;
|
|
3074
|
-
border: 1px solid #9ad7ab;
|
|
3075
|
-
border-radius: 999px;
|
|
3076
|
-
background: #e8f8ec;
|
|
3077
|
-
color: #1e6a34;
|
|
3078
|
-
font-size: 10px;
|
|
3079
|
-
font-weight: 600;
|
|
3080
|
-
line-height: 15px;
|
|
3081
|
-
pointer-events: none;
|
|
3082
|
-
}
|
|
3083
|
-
|
|
3084
|
-
.frac-saving-badge-corner {
|
|
3085
|
-
position: absolute;
|
|
3086
|
-
top: 8px;
|
|
3087
|
-
right: 10px;
|
|
3088
|
-
}
|
|
3089
|
-
|
|
3090
|
-
.frac-saving-badge-with-radio {
|
|
3091
|
-
right: 34px;
|
|
3092
|
-
}
|
|
3093
3037
|
` });
|
|
3094
3038
|
}
|
|
3095
3039
|
|
|
@@ -3267,7 +3211,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
|
|
|
3267
3211
|
{
|
|
3268
3212
|
id: "card_number",
|
|
3269
3213
|
className: "form-control card-number-new",
|
|
3270
|
-
style: { height: `${isSky ? "36px" : "46px"}
|
|
3214
|
+
style: { height: `${isSky ? "36px" : "46px"}`, display: "inline-block" }
|
|
3271
3215
|
}
|
|
3272
3216
|
),
|
|
3273
3217
|
/* @__PURE__ */ jsx17("div", { className: "card-crdi card-expiry-new", children: /* @__PURE__ */ jsxs10("div", { className: "exp-date-year-container", children: [
|
|
@@ -3276,7 +3220,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
|
|
|
3276
3220
|
{
|
|
3277
3221
|
id: "exp_month",
|
|
3278
3222
|
className: "form-control required card-cvv-in",
|
|
3279
|
-
style: { height: "36px", display: "block"
|
|
3223
|
+
style: { height: "36px", display: "inline-block" }
|
|
3280
3224
|
}
|
|
3281
3225
|
) }),
|
|
3282
3226
|
/* @__PURE__ */ jsx17("div", { className: "exp-year form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
|
|
@@ -3284,7 +3228,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
|
|
|
3284
3228
|
{
|
|
3285
3229
|
id: "exp_year",
|
|
3286
3230
|
className: "form-control required card-cvv-in",
|
|
3287
|
-
style: { height: "36px", display: "block"
|
|
3231
|
+
style: { height: "36px", display: "inline-block" }
|
|
3288
3232
|
}
|
|
3289
3233
|
) }),
|
|
3290
3234
|
/* @__PURE__ */ jsx17("div", { className: "security-digit form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
|
|
@@ -3292,7 +3236,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
|
|
|
3292
3236
|
{
|
|
3293
3237
|
id: "cvv",
|
|
3294
3238
|
className: "form-control card-cvv-in required",
|
|
3295
|
-
style: { height: "36px", display: "block"
|
|
3239
|
+
style: { height: "36px", display: "inline-block" }
|
|
3296
3240
|
}
|
|
3297
3241
|
) })
|
|
3298
3242
|
] }) })
|
|
@@ -3415,8 +3359,7 @@ var DataCapFields = ({
|
|
|
3415
3359
|
isOpen,
|
|
3416
3360
|
tokenKey,
|
|
3417
3361
|
setLoader,
|
|
3418
|
-
isAddCard
|
|
3419
|
-
isEmbedded
|
|
3362
|
+
isAddCard
|
|
3420
3363
|
}) => {
|
|
3421
3364
|
const iframeId = "datacap-iframe";
|
|
3422
3365
|
const resolverRef = useRef2(null);
|
|
@@ -3442,20 +3385,6 @@ var DataCapFields = ({
|
|
|
3442
3385
|
|
|
3443
3386
|
`;
|
|
3444
3387
|
}
|
|
3445
|
-
if (isEmbedded) {
|
|
3446
|
-
customCSS += `
|
|
3447
|
-
|
|
3448
|
-
input {
|
|
3449
|
-
background-color: #F6F6F7;
|
|
3450
|
-
box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1;
|
|
3451
|
-
}
|
|
3452
|
-
|
|
3453
|
-
select {
|
|
3454
|
-
background-color: #F6F6F7;
|
|
3455
|
-
box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
|
|
3456
|
-
}
|
|
3457
|
-
`;
|
|
3458
|
-
}
|
|
3459
3388
|
const initialize = async () => {
|
|
3460
3389
|
setLoader == null ? void 0 : setLoader(true);
|
|
3461
3390
|
setIframeReady(false);
|
|
@@ -3487,18 +3416,13 @@ var DataCapFields = ({
|
|
|
3487
3416
|
};
|
|
3488
3417
|
initialize();
|
|
3489
3418
|
}, [isOpen, tokenKey]);
|
|
3490
|
-
|
|
3491
|
-
|
|
3492
|
-
|
|
3493
|
-
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
return () => {
|
|
3498
|
-
delete window.requestDcToken;
|
|
3499
|
-
};
|
|
3500
|
-
}, []);
|
|
3501
|
-
console.log(setLoader, "loadingIframe");
|
|
3419
|
+
window.requestDcToken = () => {
|
|
3420
|
+
return new Promise((resolve, reject) => {
|
|
3421
|
+
setLoader == null ? void 0 : setLoader(true);
|
|
3422
|
+
resolverRef.current = { resolve, reject };
|
|
3423
|
+
window.DatacapHostedWebToken.requestToken();
|
|
3424
|
+
});
|
|
3425
|
+
};
|
|
3502
3426
|
return /* @__PURE__ */ jsx18(
|
|
3503
3427
|
"iframe",
|
|
3504
3428
|
{
|
|
@@ -3760,7 +3684,7 @@ function GetPaymentPage(props) {
|
|
|
3760
3684
|
}
|
|
3761
3685
|
}
|
|
3762
3686
|
if (!isBankConsentChecked) {
|
|
3763
|
-
setErrorBankConsent("Above consent is
|
|
3687
|
+
setErrorBankConsent("Above consent is required");
|
|
3764
3688
|
}
|
|
3765
3689
|
setAchError(errors);
|
|
3766
3690
|
return Object.keys(errors).length > 0 || !isBankConsentChecked;
|
|
@@ -7676,7 +7600,7 @@ function PartialPayment(props) {
|
|
|
7676
7600
|
}
|
|
7677
7601
|
}
|
|
7678
7602
|
if (!isBankConsentChecked) {
|
|
7679
|
-
setErrorBankConsent("Above consent is
|
|
7603
|
+
setErrorBankConsent("Above consent is required");
|
|
7680
7604
|
}
|
|
7681
7605
|
setAchError(errors);
|
|
7682
7606
|
return Object.keys(errors).length > 0 || !isBankConsentChecked;
|
|
@@ -8906,17 +8830,6 @@ function SkyChargewidgetstyles() {
|
|
|
8906
8830
|
text-align : left !important;
|
|
8907
8831
|
text-transform: uppercase !important;
|
|
8908
8832
|
}
|
|
8909
|
-
.frac-form .frac-fee-text{
|
|
8910
|
-
display: block;
|
|
8911
|
-
padding: 10px 0 4px;
|
|
8912
|
-
font-family: 'IBM Plex Mono', monospace !important;
|
|
8913
|
-
color: #727272 !important;
|
|
8914
|
-
font-size: 12px;
|
|
8915
|
-
line-height: 1.4;
|
|
8916
|
-
}
|
|
8917
|
-
.frac-form .frac-fee-amount{
|
|
8918
|
-
color: #c62828 !important;
|
|
8919
|
-
}
|
|
8920
8833
|
.form-control-frac{
|
|
8921
8834
|
display: block;
|
|
8922
8835
|
width: 100%;
|
|
@@ -8951,7 +8864,7 @@ function SkyChargewidgetstyles() {
|
|
|
8951
8864
|
}
|
|
8952
8865
|
.exp-date-year-container .form-group {
|
|
8953
8866
|
flex: 1;
|
|
8954
|
-
padding-left:.75rem
|
|
8867
|
+
padding-left:.75rem;
|
|
8955
8868
|
}
|
|
8956
8869
|
.card-crdi {
|
|
8957
8870
|
display: flex;
|
|
@@ -8968,7 +8881,7 @@ function SkyChargewidgetstyles() {
|
|
|
8968
8881
|
}
|
|
8969
8882
|
.exp-date-year-container .form-group-frac{
|
|
8970
8883
|
flex:1;
|
|
8971
|
-
|
|
8884
|
+
padding: 0px !important
|
|
8972
8885
|
|
|
8973
8886
|
}
|
|
8974
8887
|
|
|
@@ -9469,16 +9382,7 @@ margin:0px !important;
|
|
|
9469
9382
|
padding:0px !important;
|
|
9470
9383
|
}
|
|
9471
9384
|
|
|
9472
|
-
|
|
9473
|
-
.toggle-num-wrapper-new div#card_number {
|
|
9474
|
-
display: block !important;
|
|
9475
|
-
}
|
|
9476
|
-
.toggle-num-wrapper-new .input-main-wrap-frac {
|
|
9477
|
-
height: 36px;
|
|
9478
|
-
}
|
|
9479
|
-
.toggle-num-wrapper-new:focus {
|
|
9480
|
-
border: 1px solid #004eab !important;
|
|
9481
|
-
}
|
|
9385
|
+
|
|
9482
9386
|
|
|
9483
9387
|
` });
|
|
9484
9388
|
}
|
|
@@ -9625,162 +9529,10 @@ function CheckoutWrapper({ clientSecret, onSuccess, showLoader, setError, sessio
|
|
|
9625
9529
|
// src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
|
|
9626
9530
|
import { IoArrowBack as IoArrowBack4 } from "react-icons/io5";
|
|
9627
9531
|
import { NumericFormat as NumericFormat2 } from "react-number-format";
|
|
9628
|
-
|
|
9629
|
-
|
|
9630
|
-
|
|
9631
|
-
function ErrorCardOverlayStyle() {
|
|
9632
|
-
return /* @__PURE__ */ jsx32("style", { children: `
|
|
9633
|
-
.card-error-overlay .logo-container {
|
|
9634
|
-
display: flex;
|
|
9635
|
-
justify-content: center;
|
|
9636
|
-
align-items: center;
|
|
9637
|
-
margin-bottom: -50px; /* Adjust this to overlap the content */
|
|
9638
|
-
z-index: 10;
|
|
9639
|
-
}
|
|
9640
|
-
|
|
9641
|
-
.card-error-overlay .client-logo {
|
|
9642
|
-
max-width: 100px;
|
|
9643
|
-
height: auto;
|
|
9644
|
-
object-fit: contain;
|
|
9645
|
-
display: block;
|
|
9646
|
-
}
|
|
9647
|
-
|
|
9648
|
-
|
|
9649
|
-
.card-error-overlay .error-icon-overlay {
|
|
9650
|
-
display: flex;
|
|
9651
|
-
flex-direction: column;
|
|
9652
|
-
align-items: center;
|
|
9653
|
-
gap: 12px;
|
|
9654
|
-
min-height: 116px;
|
|
9655
|
-
z-index: 2;
|
|
9656
|
-
}
|
|
9657
|
-
|
|
9658
|
-
.card-error-overlay .circle {
|
|
9659
|
-
width: 50px;
|
|
9660
|
-
height: 50px;
|
|
9661
|
-
border: 1px solid red;
|
|
9662
|
-
border-radius: 50%;
|
|
9663
|
-
display: flex;
|
|
9664
|
-
justify-content: center;
|
|
9665
|
-
align-items: center;
|
|
9666
|
-
margin-bottom:20px
|
|
9667
|
-
}
|
|
9668
|
-
|
|
9669
|
-
.card-error-overlay .circle .fa-times {
|
|
9670
|
-
font-size: 30px;
|
|
9671
|
-
color: red;
|
|
9672
|
-
}
|
|
9673
|
-
|
|
9674
|
-
.card-error-overlay .error-text-overlay {
|
|
9675
|
-
display: flex;
|
|
9676
|
-
flex-direction: column;
|
|
9677
|
-
justify-content: center;
|
|
9678
|
-
align-items: center;
|
|
9679
|
-
gap: 4px;
|
|
9680
|
-
// width: 227px;
|
|
9681
|
-
}
|
|
9682
|
-
|
|
9683
|
-
.card-error-overlay .payment-error-text-overlay {
|
|
9684
|
-
font-family: 'Inter', sans-serif;
|
|
9685
|
-
font-weight: 500;
|
|
9686
|
-
font-size: 18px;
|
|
9687
|
-
line-height: 21px;
|
|
9688
|
-
text-align: center;
|
|
9689
|
-
letter-spacing: -0.02em;
|
|
9690
|
-
color: #161616;
|
|
9691
|
-
}
|
|
9692
|
-
|
|
9693
|
-
.card-error-overlay .thank-you-text-overlay {
|
|
9694
|
-
font-family: 'Inter', sans-serif;
|
|
9695
|
-
font-weight: 500;
|
|
9696
|
-
font-size: 16px;
|
|
9697
|
-
line-height: 18px;
|
|
9698
|
-
text-align: center;
|
|
9699
|
-
letter-spacing: -0.02em;
|
|
9700
|
-
color: #161616 !important;
|
|
9701
|
-
opacity: 0.5;
|
|
9702
|
-
padding-top:10px
|
|
9703
|
-
}
|
|
9704
|
-
|
|
9705
|
-
.card-error-overlay .error-btn-div-overlay{
|
|
9706
|
-
padding-top:20px;
|
|
9707
|
-
width: 100%;
|
|
9708
|
-
|
|
9709
|
-
}
|
|
9710
|
-
.card-error-overlay .error-btn-div-overlay button{
|
|
9711
|
-
outline: 0;
|
|
9712
|
-
height: 46px;
|
|
9713
|
-
font-size: 16px;
|
|
9714
|
-
background: #727272;
|
|
9715
|
-
border: none;
|
|
9716
|
-
display: block;
|
|
9717
|
-
color: #fff;
|
|
9718
|
-
width: 100%;
|
|
9719
|
-
border-radius: 180px;
|
|
9720
|
-
margin: 10px 0;
|
|
9721
|
-
text-decoration: none;
|
|
9722
|
-
}
|
|
9723
|
-
.card-error-overlay .error-btn-div-overlay button:hover, .card-error-overlay .error-btn-div-overlay button:focus {
|
|
9724
|
-
background: #222;
|
|
9725
|
-
color: #fff;
|
|
9726
|
-
cursor: pointer;
|
|
9727
|
-
}
|
|
9728
|
-
.payment-error-container-overlay {
|
|
9729
|
-
width: fit-content;
|
|
9730
|
-
position: relative;
|
|
9731
|
-
top: 50%;
|
|
9732
|
-
left: 50%;
|
|
9733
|
-
transform: translate(-50%, -50%);
|
|
9734
|
-
background: rgba(255, 255, 255, 0.15);
|
|
9735
|
-
backdrop-filter: blur(12px);
|
|
9736
|
-
-webkit-backdrop-filter: blur(12px);
|
|
9737
|
-
border-radius: 12px;
|
|
9738
|
-
z-index: 11111;
|
|
9739
|
-
max-width: 240px;
|
|
9740
|
-
min-width: 224px;
|
|
9741
|
-
padding: 20px;
|
|
9742
|
-
margin-left: 17px !important;
|
|
9743
|
-
}
|
|
9744
|
-
.card-error-overlay {
|
|
9745
|
-
position: absolute;
|
|
9746
|
-
top: 0;
|
|
9747
|
-
left: 0;
|
|
9748
|
-
width: 100%;
|
|
9749
|
-
height: 100%;
|
|
9750
|
-
background: rgb(87 87 87 / 15%);
|
|
9751
|
-
backdrop-filter: blur(2px);
|
|
9752
|
-
-webkit-backdrop-filter: blur(12px);
|
|
9753
|
-
z-index: 1111;
|
|
9754
|
-
}
|
|
9755
|
-
` });
|
|
9756
|
-
}
|
|
9757
|
-
|
|
9758
|
-
// src/app/components/ErrorCardMessage/ErrorCardOverlay.tsx
|
|
9759
|
-
import { Fragment as Fragment18, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
9760
|
-
var ErrorCardOverlay = ({ onClose, error, autoTrigger = false }) => {
|
|
9761
|
-
return /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
9762
|
-
/* @__PURE__ */ jsx33(ErrorCardOverlayStyle, {}),
|
|
9763
|
-
/* @__PURE__ */ jsx33("div", { className: "card-error-overlay", children: /* @__PURE__ */ jsx33("div", { className: "payment-error-container-overlay", children: /* @__PURE__ */ jsxs19("div", { className: "error-icon-overlay", children: [
|
|
9764
|
-
/* @__PURE__ */ jsx33("div", { className: "circle", children: /* @__PURE__ */ jsx33("i", { className: "fa fa-times", "aria-hidden": "true" }) }),
|
|
9765
|
-
/* @__PURE__ */ jsxs19("div", { className: "error-text-overlay", children: [
|
|
9766
|
-
/* @__PURE__ */ jsx33("div", { className: "payment-error-text-overlay", children: error }),
|
|
9767
|
-
/* @__PURE__ */ jsx33("div", { className: "thank-you-text-overlay", children: "Try again later " })
|
|
9768
|
-
] }),
|
|
9769
|
-
!autoTrigger && /* @__PURE__ */ jsx33("div", { className: "error-btn-div-overlay", children: /* @__PURE__ */ jsx33("button", { onClick: onClose, children: "OK" }) })
|
|
9770
|
-
] }) }) })
|
|
9771
|
-
] });
|
|
9772
|
-
};
|
|
9773
|
-
var ErrorCardOverlay_default = ErrorCardOverlay;
|
|
9774
|
-
|
|
9775
|
-
// src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
|
|
9776
|
-
import { Fragment as Fragment19, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
9777
|
-
var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_token, customerId, callback, merchantName = "merchant", isPreAuth, surcharge = "0", submitBtnClass, submitBtnIcon, isRequest, pass_fee, pass_fee_amount, require3ds = false, autoTrigger = false, show, setShow, setHandleCloseRef, isPartial, bankSurcharge, partialRef, loadingPrev = false, orderGuid: ordGuid, remainingAmount: remAmount, onSubmit, onLoad = true }) => {
|
|
9778
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
|
|
9532
|
+
import { Fragment as Fragment18, jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
9533
|
+
var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_token, customerId, callback, merchantName = "merchant", isPreAuth, surcharge = "0", submitBtnClass, submitBtnIcon, isRequest, pass_fee, pass_fee_amount, require3ds = false, autoTrigger = false, show, setShow, setHandleCloseRef, isPartial, bankSurcharge, partialRef, loadingPrev = false, orderGuid: ordGuid, remainingAmount: remAmount }) => {
|
|
9534
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
|
|
9779
9535
|
const hasRunRef = useRef10(false);
|
|
9780
|
-
const cardFormRef = useRef10(null);
|
|
9781
|
-
const bankFormRef = useRef10(null);
|
|
9782
|
-
const expiryYearRef = useRef10(null);
|
|
9783
|
-
const expiryMonthRef = useRef10(null);
|
|
9784
9536
|
const cardListRunRef = useRef10(false);
|
|
9785
9537
|
const threeDSContainerRef = useRef10(null);
|
|
9786
9538
|
const [activetab, setActive] = useState10("card");
|
|
@@ -9832,10 +9584,6 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
9832
9584
|
let pax2 = S3Url + "widget/pax.svg";
|
|
9833
9585
|
let cardicon = S3Url + "widget/cardicon.svg";
|
|
9834
9586
|
let bankicon = S3Url + "widget/bankicon.svg";
|
|
9835
|
-
let defualtcardborder = S3Url + "widget/defualtcardborder.svg";
|
|
9836
|
-
let unionicon = S3Url + "widget/unionpay.svg";
|
|
9837
|
-
let dinersicon = S3Url + "widget/diners.svg";
|
|
9838
|
-
let jcbicon = S3Url + "widget/jcb.svg";
|
|
9839
9587
|
const showLoader = () => setLoading(true);
|
|
9840
9588
|
const hideLoader = () => setLoading(false);
|
|
9841
9589
|
const CalculateCashDiscount = (amount2, surcharge2) => {
|
|
@@ -9843,10 +9591,6 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
9843
9591
|
const originalAmount = amount2 / (1 + surchargeVal);
|
|
9844
9592
|
return Math.round(originalAmount * 100) / 100;
|
|
9845
9593
|
};
|
|
9846
|
-
const cardFeeAmount = Number(pass_fee_amount || 0);
|
|
9847
|
-
const bankFeeAmount = Number(bankSurcharge || 0);
|
|
9848
|
-
const bankSavingsAmount = Math.max(bankFeeAmount > 0 ? cardFeeAmount - bankFeeAmount : cardFeeAmount, 0);
|
|
9849
|
-
const bankSavingsText = bankSavingsAmount > 0 ? `Save ${formatUSD(bankSavingsAmount.toFixed(2))}` : "";
|
|
9850
9594
|
const tokenizerRef = useRef10(null);
|
|
9851
9595
|
const fractalStyles = {
|
|
9852
9596
|
input: {
|
|
@@ -10012,7 +9756,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10012
9756
|
}
|
|
10013
9757
|
}
|
|
10014
9758
|
if (!isBankConsentChecked) {
|
|
10015
|
-
setErrorBankConsent("Above consent is
|
|
9759
|
+
setErrorBankConsent("Above consent is required");
|
|
10016
9760
|
}
|
|
10017
9761
|
setAchError(errors);
|
|
10018
9762
|
return Object.keys(errors).length > 0 || !isBankConsentChecked;
|
|
@@ -10056,7 +9800,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10056
9800
|
}
|
|
10057
9801
|
};
|
|
10058
9802
|
const handleFractalTokenFlow = async () => {
|
|
10059
|
-
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2,
|
|
9803
|
+
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t, _u, _v, _w;
|
|
10060
9804
|
try {
|
|
10061
9805
|
const requestOptions = {
|
|
10062
9806
|
method: "POST",
|
|
@@ -10097,29 +9841,17 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10097
9841
|
three_ds_data
|
|
10098
9842
|
);
|
|
10099
9843
|
} catch (error2) {
|
|
10100
|
-
|
|
10101
|
-
let readableMessage = "Something went wrong!";
|
|
10102
|
-
try {
|
|
10103
|
-
const rawError = ((_n2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _n2.data) || (error2 == null ? void 0 : error2.message) || "";
|
|
10104
|
-
const errorText = typeof rawError === "string" ? rawError : JSON.stringify(rawError);
|
|
10105
|
-
const lines = ((_p2 = (_o2 = errorText.split) == null ? void 0 : _o2.call(errorText, "\n")) == null ? void 0 : _p2.filter(Boolean)) || [];
|
|
10106
|
-
const lastLine = lines.at(-1) || "";
|
|
10107
|
-
const parts = (_q2 = lastLine.split) == null ? void 0 : _q2.call(lastLine, ": ");
|
|
10108
|
-
readableMessage = (parts == null ? void 0 : parts.length) > 1 ? parts.pop().trim() : lastLine.trim() || readableMessage;
|
|
10109
|
-
} catch (e) {
|
|
10110
|
-
readableMessage = "Something went wrong!";
|
|
10111
|
-
}
|
|
10112
|
-
setErrorIframe(readableMessage);
|
|
9844
|
+
setErrorIframe(error2);
|
|
10113
9845
|
hideLoader();
|
|
10114
9846
|
}
|
|
10115
9847
|
if (tokenizeData == null ? void 0 : tokenizeData.token) {
|
|
10116
9848
|
let ThreedsData = tokenizeData == null ? void 0 : tokenizeData.stripe_three_ds_response;
|
|
10117
|
-
if (require3ds && !ThreedsData && (ThreedsData == null ? void 0 : ThreedsData.status) === "200 OK" && ((
|
|
9849
|
+
if (require3ds && !ThreedsData && (ThreedsData == null ? void 0 : ThreedsData.status) === "200 OK" && ((_n2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _n2.challenge_url)) {
|
|
10118
9850
|
setError("Something went wrong. Please try again later.");
|
|
10119
9851
|
}
|
|
10120
9852
|
if (require3ds) {
|
|
10121
|
-
if (!((
|
|
10122
|
-
completeFractalFlow(tokenizeData == null ? void 0 : tokenizeData.token, (
|
|
9853
|
+
if (!((_o2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _o2.challenge_url)) {
|
|
9854
|
+
completeFractalFlow(tokenizeData == null ? void 0 : tokenizeData.token, (_p2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _p2.id);
|
|
10123
9855
|
} else {
|
|
10124
9856
|
hideLoader();
|
|
10125
9857
|
setStripeResponse(__spreadProps(__spreadValues({}, ThreedsData == null ? void 0 : ThreedsData.data), {
|
|
@@ -10135,11 +9867,11 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10135
9867
|
console.log(error2, "error");
|
|
10136
9868
|
let readableMessage = "Something went wrong!";
|
|
10137
9869
|
try {
|
|
10138
|
-
const rawError = ((
|
|
9870
|
+
const rawError = ((_q2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _q2.data) || (error2 == null ? void 0 : error2.message) || "";
|
|
10139
9871
|
const errorText = typeof rawError === "string" ? rawError : JSON.stringify(rawError);
|
|
10140
|
-
const lines = ((
|
|
9872
|
+
const lines = ((_s2 = (_r2 = errorText.split) == null ? void 0 : _r2.call(errorText, "\n")) == null ? void 0 : _s2.filter(Boolean)) || [];
|
|
10141
9873
|
const lastLine = lines.at(-1) || "";
|
|
10142
|
-
const parts = (
|
|
9874
|
+
const parts = (_t = lastLine.split) == null ? void 0 : _t.call(lastLine, ": ");
|
|
10143
9875
|
readableMessage = (parts == null ? void 0 : parts.length) > 1 ? parts.pop().trim() : lastLine.trim() || readableMessage;
|
|
10144
9876
|
} catch (e) {
|
|
10145
9877
|
readableMessage = "Something went wrong!";
|
|
@@ -10147,8 +9879,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10147
9879
|
setError(readableMessage);
|
|
10148
9880
|
callback({
|
|
10149
9881
|
error: readableMessage,
|
|
10150
|
-
result: (
|
|
10151
|
-
statusCode: (
|
|
9882
|
+
result: (_v = (_u = error2 == null ? void 0 : error2.response) == null ? void 0 : _u.data) == null ? void 0 : _v.result,
|
|
9883
|
+
statusCode: (_w = error2 == null ? void 0 : error2.response) == null ? void 0 : _w.status
|
|
10152
9884
|
});
|
|
10153
9885
|
}
|
|
10154
9886
|
};
|
|
@@ -10565,8 +10297,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10565
10297
|
});
|
|
10566
10298
|
};
|
|
10567
10299
|
const handlechargeCustomer = async (e) => {
|
|
10568
|
-
var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
|
|
10569
|
-
e
|
|
10300
|
+
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
|
|
10301
|
+
e.currentTarget.blur();
|
|
10570
10302
|
if (loading) return;
|
|
10571
10303
|
let customer_id = customerId;
|
|
10572
10304
|
let card_id = selectedCard == null ? void 0 : selectedCard.id;
|
|
@@ -10613,6 +10345,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10613
10345
|
statusCode: (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.status
|
|
10614
10346
|
});
|
|
10615
10347
|
hideLoader();
|
|
10348
|
+
setError(((_i2 = (_h2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _h2.data) == null ? void 0 : _i2.message) || "Something went wrong!");
|
|
10616
10349
|
}
|
|
10617
10350
|
} else {
|
|
10618
10351
|
setError("Please Select A Card/Bank");
|
|
@@ -10695,13 +10428,13 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10695
10428
|
}
|
|
10696
10429
|
}, [show, autoTrigger]);
|
|
10697
10430
|
useEffect15(() => {
|
|
10698
|
-
if (!hasRunRef.current && (show || autoTrigger)
|
|
10431
|
+
if (!hasRunRef.current && (show || autoTrigger)) {
|
|
10699
10432
|
getPaymentDetails();
|
|
10700
10433
|
if (isPartial && !partialRef) {
|
|
10701
10434
|
crateOrderFrac();
|
|
10702
10435
|
}
|
|
10703
10436
|
}
|
|
10704
|
-
}, [show, autoTrigger, isPartial
|
|
10437
|
+
}, [show, autoTrigger, isPartial]);
|
|
10705
10438
|
useEffect15(() => {
|
|
10706
10439
|
if ((show || autoTrigger) && pass_fee_amount) {
|
|
10707
10440
|
let cashdisc = Number(amount) - Number(pass_fee_amount);
|
|
@@ -10788,89 +10521,18 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10788
10521
|
styles: {}
|
|
10789
10522
|
});
|
|
10790
10523
|
}, []);
|
|
10791
|
-
|
|
10792
|
-
|
|
10793
|
-
|
|
10794
|
-
|
|
10795
|
-
|
|
10796
|
-
useEffect15(() => {
|
|
10797
|
-
stateRef.current = {
|
|
10798
|
-
activeinBank,
|
|
10799
|
-
activeinCard,
|
|
10800
|
-
activetab
|
|
10801
|
-
};
|
|
10802
|
-
}, [activeinBank, activeinCard, activetab]);
|
|
10803
|
-
const submit = useCallback(() => {
|
|
10804
|
-
var _a2, _b2;
|
|
10805
|
-
const { activeinBank: activeinBank2, activeinCard: activeinCard2, activetab: activetab2 } = stateRef.current;
|
|
10806
|
-
if (activetab2 === "card") {
|
|
10807
|
-
if (activeinCard2 === "form") {
|
|
10808
|
-
(_a2 = cardFormRef.current) == null ? void 0 : _a2.requestSubmit();
|
|
10809
|
-
} else if (activeinCard2 === "list") {
|
|
10810
|
-
handlechargeCustomer();
|
|
10811
|
-
}
|
|
10812
|
-
} else if (activetab2 === "ach") {
|
|
10813
|
-
if (activeinBank2 === "form") {
|
|
10814
|
-
(_b2 = bankFormRef.current) == null ? void 0 : _b2.requestSubmit();
|
|
10815
|
-
} else if (activeinBank2 === "list") {
|
|
10816
|
-
handlechargeCustomer();
|
|
10817
|
-
}
|
|
10818
|
-
}
|
|
10819
|
-
}, []);
|
|
10820
|
-
useEffect15(() => {
|
|
10821
|
-
onSubmit == null ? void 0 : onSubmit(submit);
|
|
10822
|
-
}, [onSubmit, submit]);
|
|
10823
|
-
function detectCardType(cardinput) {
|
|
10824
|
-
if (!cardinput) return null;
|
|
10825
|
-
const number = cardinput.replace(/\D/g, "");
|
|
10826
|
-
const patterns = {
|
|
10827
|
-
visa: /^4/,
|
|
10828
|
-
mastercard: /^(5[1-5]|2[2-7][0-9]{2})/,
|
|
10829
|
-
amex: /^3[47]/,
|
|
10830
|
-
discover: /^(6011|65|64[4-9])/,
|
|
10831
|
-
diners: /^(30[0-5]|36|38)/,
|
|
10832
|
-
jcb: /^(35[2-8][0-9])/,
|
|
10833
|
-
unionpay: /^62/
|
|
10834
|
-
};
|
|
10835
|
-
for (const [type, regex] of Object.entries(patterns)) {
|
|
10836
|
-
if (regex.test(number)) {
|
|
10837
|
-
return type;
|
|
10838
|
-
}
|
|
10839
|
-
}
|
|
10840
|
-
return "unknown";
|
|
10841
|
-
}
|
|
10842
|
-
function getCardImage(cardInput) {
|
|
10843
|
-
const cardType = detectCardType(cardInput);
|
|
10844
|
-
switch (cardType) {
|
|
10845
|
-
case "visa":
|
|
10846
|
-
return /* @__PURE__ */ jsx34("img", { src: visa2, alt: "visa", width: 33 });
|
|
10847
|
-
case "mastercard":
|
|
10848
|
-
return /* @__PURE__ */ jsx34("img", { src: mastercard2, width: 33, alt: "mastercard" });
|
|
10849
|
-
case "amex":
|
|
10850
|
-
return /* @__PURE__ */ jsx34("img", { src: americanexp2, alt: "amex", width: 33 });
|
|
10851
|
-
case "discover":
|
|
10852
|
-
return /* @__PURE__ */ jsx34("img", { src: discover2, width: 33, alt: "discover" });
|
|
10853
|
-
case "diners":
|
|
10854
|
-
return /* @__PURE__ */ jsx34("img", { src: dinersicon, alt: "Diners Club" });
|
|
10855
|
-
case "jcb":
|
|
10856
|
-
return /* @__PURE__ */ jsx34("img", { src: jcbicon, alt: "JCB" });
|
|
10857
|
-
case "unionpay":
|
|
10858
|
-
return /* @__PURE__ */ jsx34("img", { src: unionicon, alt: "UnionPay" });
|
|
10859
|
-
default:
|
|
10860
|
-
return /* @__PURE__ */ jsx34("img", { src: defualtcardborder, alt: "card" });
|
|
10861
|
-
}
|
|
10862
|
-
}
|
|
10863
|
-
return /* @__PURE__ */ jsxs20(Fragment19, { children: [
|
|
10864
|
-
(initialLoader || !onLoad) && /* @__PURE__ */ jsx34(Loader_default, { intensity: "dark", loading: initialLoader || !onLoad }),
|
|
10865
|
-
error && /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(ErrorCardOverlay_default, { error, onClose: handleClose, autoTrigger }) }),
|
|
10866
|
-
errorIframe && /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(ErrorCardOverlay_default, { error: errorIframe, onClose: () => {
|
|
10524
|
+
console.log(activeinCard === "list", "activeinCard", activeList);
|
|
10525
|
+
return /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
10526
|
+
initialLoader && /* @__PURE__ */ jsx32(Loader_default, { loading: initialLoader }),
|
|
10527
|
+
error && /* @__PURE__ */ jsx32("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx32(ErrorCardMessage_default, { error, onClose: handleClose }) }),
|
|
10528
|
+
errorIframe && /* @__PURE__ */ jsx32("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx32(ErrorCardMessage_default, { error: errorIframe, onClose: () => {
|
|
10867
10529
|
setErrorIframe("");
|
|
10868
|
-
}
|
|
10869
|
-
/* @__PURE__ */
|
|
10870
|
-
(loading || loading2 || loadingIframe) && /* @__PURE__ */
|
|
10871
|
-
/* @__PURE__ */
|
|
10872
|
-
/* @__PURE__ */
|
|
10873
|
-
(stripeResponse == null ? void 0 : stripeResponse.challenge_url) ? /* @__PURE__ */
|
|
10530
|
+
} }) }),
|
|
10531
|
+
!error && !errorIframe && /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
10532
|
+
(loading || loading2 || loadingIframe) && /* @__PURE__ */ jsx32(Loader_default, { loading: loading || loading2 || loadingPrev || orderLoader || loadingIframe }),
|
|
10533
|
+
/* @__PURE__ */ jsxs19("div", { className: "frac-card-payment-page frac-form frac-new-form", children: [
|
|
10534
|
+
/* @__PURE__ */ jsx32("div", { ref: threeDSContainerRef, style: { width: "100%", height: "100%" } }),
|
|
10535
|
+
(stripeResponse == null ? void 0 : stripeResponse.challenge_url) ? /* @__PURE__ */ jsx32(
|
|
10874
10536
|
ThreeDSChallenge,
|
|
10875
10537
|
{
|
|
10876
10538
|
containerRef: threeDSContainerRef,
|
|
@@ -10880,33 +10542,40 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10880
10542
|
onSuccess: handleSuccess,
|
|
10881
10543
|
onError: handleError
|
|
10882
10544
|
}
|
|
10883
|
-
) : /* @__PURE__ */
|
|
10884
|
-
/* @__PURE__ */
|
|
10885
|
-
/* @__PURE__ */
|
|
10886
|
-
/* @__PURE__ */
|
|
10545
|
+
) : /* @__PURE__ */ jsxs19("div", { className: "parent-pay-container", children: [
|
|
10546
|
+
/* @__PURE__ */ jsx32("span", { style: { display: autoTrigger ? "none" : "block" }, className: "request-payment-close-popup", onClick: handleClose, children: /* @__PURE__ */ jsxs19("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
|
|
10547
|
+
/* @__PURE__ */ jsx32("g", { clipPath: "url(#clip0_12425_52336)", children: /* @__PURE__ */ jsx32("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" }) }),
|
|
10548
|
+
/* @__PURE__ */ jsx32("defs", { children: /* @__PURE__ */ jsx32("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx32("rect", { width: "16", height: "16", fill: "white" }) }) })
|
|
10887
10549
|
] }) }),
|
|
10888
|
-
/* @__PURE__ */
|
|
10889
|
-
/* @__PURE__ */
|
|
10890
|
-
|
|
10891
|
-
/* @__PURE__ */
|
|
10892
|
-
/* @__PURE__ */
|
|
10893
|
-
/* @__PURE__ */
|
|
10894
|
-
/* @__PURE__ */
|
|
10895
|
-
(cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */
|
|
10550
|
+
/* @__PURE__ */ jsx32("div", { className: "pay-main-logo-res" }),
|
|
10551
|
+
/* @__PURE__ */ jsxs19("div", { className: "pay-container", children: [
|
|
10552
|
+
/* @__PURE__ */ jsxs19("div", { className: "pay-header pay-conatiner-one", children: [
|
|
10553
|
+
/* @__PURE__ */ jsxs19("div", { className: "pay-conatiner-one-first", children: [
|
|
10554
|
+
/* @__PURE__ */ jsxs19("div", { className: "pay-logo-container", children: [
|
|
10555
|
+
/* @__PURE__ */ jsx32("div", { className: "pay-main-logo" }),
|
|
10556
|
+
/* @__PURE__ */ jsx32("h1", { className: "pay-heading", children: "Pay" }),
|
|
10557
|
+
(cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ jsxs19("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList"), children: [
|
|
10896
10558
|
" ",
|
|
10897
|
-
/* @__PURE__ */
|
|
10559
|
+
/* @__PURE__ */ jsx32(IoArrowBack4, {}),
|
|
10898
10560
|
" Back"
|
|
10899
10561
|
] })
|
|
10900
10562
|
] }),
|
|
10901
|
-
/* @__PURE__ */
|
|
10902
|
-
/* @__PURE__ */
|
|
10903
|
-
/* @__PURE__ */
|
|
10904
|
-
/* @__PURE__ */
|
|
10905
|
-
!isPreAuth && isBankActive && !isPartial && /* @__PURE__ */
|
|
10563
|
+
/* @__PURE__ */ jsx32("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs19("div", { className: "pay-amount-conatiner", children: [
|
|
10564
|
+
/* @__PURE__ */ jsx32("small", { className: "pay-payment-amount", children: "Select payment type" }),
|
|
10565
|
+
/* @__PURE__ */ jsxs19("div", { className: "frac-card-bank-radio-main", children: [
|
|
10566
|
+
/* @__PURE__ */ jsx32(CardBankRadio, { label: "Card", amount: (_a = Number(amount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
|
|
10567
|
+
!isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx32(CardBankRadio, { label: "Bank", amount: (_b = Number(bankAmount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab })
|
|
10906
10568
|
] }),
|
|
10907
|
-
|
|
10908
|
-
/* @__PURE__ */
|
|
10909
|
-
|
|
10569
|
+
pass_fee && activetab === "card" && cashDiscount && Number(amount) - Number(cashDiscount) > 0 ? /* @__PURE__ */ jsxs19("div", { className: "frac-cash-discount-fee", children: [
|
|
10570
|
+
/* @__PURE__ */ jsxs19("small", { children: [
|
|
10571
|
+
activetab === "card" ? "Cash Discount" : "Cash Discount Savings",
|
|
10572
|
+
" "
|
|
10573
|
+
] }),
|
|
10574
|
+
/* @__PURE__ */ jsx32("p", { children: formatUSD((Number(amount) - Number(cashDiscount)).toFixed(2)) })
|
|
10575
|
+
] }) : null,
|
|
10576
|
+
isPartial && /* @__PURE__ */ jsxs19("div", { className: "frac-partial-payment-input", children: [
|
|
10577
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
|
|
10578
|
+
/* @__PURE__ */ jsx32(
|
|
10910
10579
|
NumericFormat2,
|
|
10911
10580
|
{
|
|
10912
10581
|
prefix: "$",
|
|
@@ -10930,378 +10599,331 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
|
|
|
10930
10599
|
}
|
|
10931
10600
|
}
|
|
10932
10601
|
),
|
|
10933
|
-
partialError && /* @__PURE__ */
|
|
10602
|
+
partialError && /* @__PURE__ */ jsx32("span", { className: "error-span", children: partialError })
|
|
10934
10603
|
] })
|
|
10935
10604
|
] }) })
|
|
10936
10605
|
] }),
|
|
10937
|
-
/* @__PURE__ */
|
|
10938
|
-
/* @__PURE__ */
|
|
10939
|
-
/* @__PURE__ */
|
|
10606
|
+
/* @__PURE__ */ jsxs19("div", { className: "pay-conatiner-one-last", children: [
|
|
10607
|
+
/* @__PURE__ */ jsx32("img", { src: secure2, alt: "" }),
|
|
10608
|
+
/* @__PURE__ */ jsx32("img", { src: pov2, alt: "" }),
|
|
10940
10609
|
"Secure payments powered by Fractal"
|
|
10941
10610
|
] })
|
|
10942
10611
|
] }),
|
|
10943
|
-
/* @__PURE__ */
|
|
10944
|
-
|
|
10945
|
-
/* @__PURE__ */
|
|
10946
|
-
/* @__PURE__ */
|
|
10947
|
-
|
|
10612
|
+
/* @__PURE__ */ jsx32("div", { className: "pay-tab pay-conatiner-two", children: /* @__PURE__ */ jsx32("div", { className: "col-md-12", children: /* @__PURE__ */ jsx32("div", { id: "payment-form-div", children: is3DSEnable ? clientSecret && /* @__PURE__ */ jsx32(CheckoutWrapper, { onSuccess, clientSecret, amount, showLoader, hideLoader, callback, session_token, handleClose, setError, isPreAuth }) : /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
10613
|
+
/* @__PURE__ */ jsxs19("div", { id: "ach", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent", children: [
|
|
10614
|
+
/* @__PURE__ */ jsxs19("div", { className: "frac-heading-card-wrap", children: [
|
|
10615
|
+
/* @__PURE__ */ jsx32("div", { className: "frac-backarrow", children: (cardList == null ? void 0 : cardList.length) > 0 && activeinCard === "form" && /* @__PURE__ */ jsxs19("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinCard("list"), children: [
|
|
10616
|
+
" ",
|
|
10617
|
+
/* @__PURE__ */ jsx32(IoArrowBack4, {})
|
|
10618
|
+
] }) }),
|
|
10619
|
+
/* @__PURE__ */ jsx32("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
|
|
10948
10620
|
] }),
|
|
10949
|
-
|
|
10950
|
-
/* @__PURE__ */
|
|
10951
|
-
/* @__PURE__ */
|
|
10952
|
-
|
|
10953
|
-
|
|
10954
|
-
|
|
10955
|
-
|
|
10956
|
-
|
|
10957
|
-
|
|
10958
|
-
|
|
10959
|
-
|
|
10960
|
-
|
|
10961
|
-
|
|
10962
|
-
|
|
10963
|
-
|
|
10964
|
-
|
|
10965
|
-
|
|
10966
|
-
|
|
10967
|
-
|
|
10968
|
-
|
|
10969
|
-
|
|
10970
|
-
|
|
10971
|
-
|
|
10972
|
-
|
|
10973
|
-
|
|
10974
|
-
|
|
10975
|
-
|
|
10976
|
-
" ",
|
|
10977
|
-
/* @__PURE__ */ jsx34(IoArrowBack4, {})
|
|
10978
|
-
] }) }),
|
|
10979
|
-
/* @__PURE__ */ jsx34("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
|
|
10621
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "8px", margin: "8px 0px 19px 0px" }, children: [
|
|
10622
|
+
/* @__PURE__ */ jsx32("img", { src: visa2, alt: "", width: 33 }),
|
|
10623
|
+
/* @__PURE__ */ jsx32("img", { src: mastercard2, width: 33, alt: "" }),
|
|
10624
|
+
/* @__PURE__ */ jsx32("img", { src: americanexp2, alt: "", width: 33 }),
|
|
10625
|
+
/* @__PURE__ */ jsx32("img", { src: discover2, width: 33, alt: "" })
|
|
10626
|
+
] }),
|
|
10627
|
+
activeinCard === "list" && (cardList == null ? void 0 : cardList.length) > 0 ? /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
10628
|
+
/* @__PURE__ */ jsx32(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Card", ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
|
|
10629
|
+
setActiveinCard("form");
|
|
10630
|
+
} }),
|
|
10631
|
+
/* @__PURE__ */ jsx32("div", { className: "form-group-frac", style: { padding: "0" }, children: /* @__PURE__ */ jsx32("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: partialAmount ? formatUSD((_c = Number(partialAmount)) == null ? void 0 : _c.toFixed(2)) : formatUSD((_d = Number(amount)) == null ? void 0 : _d.toFixed(2)) }) })
|
|
10632
|
+
] }) : paymentGateway == 32 ? /* @__PURE__ */ jsxs19("form", { id: "paymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, onKeyDown: (e) => {
|
|
10633
|
+
if (e.key === "Enter" && loading) {
|
|
10634
|
+
e.preventDefault();
|
|
10635
|
+
e.stopPropagation();
|
|
10636
|
+
}
|
|
10637
|
+
}, children: [
|
|
10638
|
+
/* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
|
|
10639
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10640
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
|
|
10641
|
+
/* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
|
|
10642
|
+
const value = e.target.value;
|
|
10643
|
+
if (/^[a-zA-Z\s]*$/.test(value)) {
|
|
10644
|
+
handleCardChange("cardName", value);
|
|
10645
|
+
}
|
|
10646
|
+
} }),
|
|
10647
|
+
(cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
|
|
10980
10648
|
] }),
|
|
10981
|
-
/* @__PURE__ */
|
|
10982
|
-
/* @__PURE__ */
|
|
10983
|
-
/* @__PURE__ */
|
|
10984
|
-
|
|
10985
|
-
|
|
10986
|
-
|
|
10987
|
-
|
|
10988
|
-
|
|
10989
|
-
|
|
10990
|
-
|
|
10991
|
-
|
|
10992
|
-
/* @__PURE__ */
|
|
10993
|
-
|
|
10994
|
-
|
|
10995
|
-
|
|
10996
|
-
|
|
10997
|
-
}
|
|
10998
|
-
|
|
10999
|
-
|
|
11000
|
-
|
|
11001
|
-
|
|
11002
|
-
|
|
11003
|
-
|
|
11004
|
-
|
|
11005
|
-
|
|
11006
|
-
|
|
11007
|
-
|
|
11008
|
-
|
|
11009
|
-
|
|
11010
|
-
/* @__PURE__ */
|
|
11011
|
-
/* @__PURE__ */
|
|
11012
|
-
|
|
11013
|
-
FractalFields_default,
|
|
11014
|
-
{
|
|
11015
|
-
fractalStyles,
|
|
11016
|
-
tokenizerRef,
|
|
11017
|
-
isSky: true
|
|
11018
|
-
}
|
|
11019
|
-
) })
|
|
11020
|
-
] }),
|
|
11021
|
-
/* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
|
|
11022
|
-
/* @__PURE__ */ jsx34("label", { htmlFor: "zip", children: "ZIP" }),
|
|
11023
|
-
/* @__PURE__ */ jsx34("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_g = cardData == null ? void 0 : cardData.zipCode) != null ? _g : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
|
|
11024
|
-
(cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
|
|
11025
|
-
pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs20("small", { className: "frac-fee-text", children: [
|
|
11026
|
-
"Credit cards include a fee amount of ",
|
|
11027
|
-
/* @__PURE__ */ jsx34("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
|
|
11028
|
-
"."
|
|
11029
|
-
] })
|
|
11030
|
-
] }),
|
|
11031
|
-
customerId && /* @__PURE__ */ jsx34("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
|
|
11032
|
-
/* @__PURE__ */ jsx34(
|
|
11033
|
-
"input",
|
|
10649
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10650
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
|
|
10651
|
+
/* @__PURE__ */ jsx32("div", { className: "toggle-num-wrapper", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx32(
|
|
10652
|
+
FractalFields_default,
|
|
10653
|
+
{
|
|
10654
|
+
fractalStyles,
|
|
10655
|
+
tokenizerRef,
|
|
10656
|
+
isSky: true
|
|
10657
|
+
}
|
|
10658
|
+
) })
|
|
10659
|
+
] }),
|
|
10660
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10661
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "zip", children: "ZIP" }),
|
|
10662
|
+
/* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_e = cardData == null ? void 0 : cardData.zipCode) != null ? _e : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
|
|
10663
|
+
(cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
|
|
10664
|
+
] }),
|
|
10665
|
+
customerId && /* @__PURE__ */ jsx32("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
|
|
10666
|
+
/* @__PURE__ */ jsx32(
|
|
10667
|
+
"input",
|
|
10668
|
+
{
|
|
10669
|
+
type: "checkbox",
|
|
10670
|
+
id: "save_card",
|
|
10671
|
+
className: "toggle-checkbox",
|
|
10672
|
+
checked: saveCardInfo,
|
|
10673
|
+
onChange: (e) => setSaveCardInfo(e.target.checked)
|
|
10674
|
+
}
|
|
10675
|
+
),
|
|
10676
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "save_card", className: "toggle-label" }),
|
|
10677
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "save_card", children: "Save card for future payments " }),
|
|
10678
|
+
/* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-wrapper", children: [
|
|
10679
|
+
/* @__PURE__ */ jsx32("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs19(
|
|
10680
|
+
"svg",
|
|
11034
10681
|
{
|
|
11035
|
-
|
|
11036
|
-
|
|
11037
|
-
|
|
11038
|
-
|
|
11039
|
-
|
|
10682
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10683
|
+
width: "20",
|
|
10684
|
+
height: "20",
|
|
10685
|
+
viewBox: "0 0 20 20",
|
|
10686
|
+
fill: "none",
|
|
10687
|
+
children: [
|
|
10688
|
+
/* @__PURE__ */ jsx32("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
|
|
10689
|
+
/* @__PURE__ */ jsx32(
|
|
10690
|
+
"path",
|
|
10691
|
+
{
|
|
10692
|
+
d: "M9.03406 12.0979V12.0072C9.04055 11.4153 9.10057 10.9443 9.21411 10.5943C9.3309 10.2442 9.49635 9.96102 9.71046 9.74463C9.92457 9.52824 10.1825 9.33095 10.4842 9.15274C10.6788 9.03182 10.854 8.89658 11.0097 8.74702C11.1655 8.59745 11.2887 8.42562 11.3796 8.2315C11.4704 8.03739 11.5158 7.82259 11.5158 7.58711C11.5158 7.3039 11.4477 7.05887 11.3114 6.85203C11.1752 6.64519 10.9935 6.48608 10.7664 6.3747C10.5426 6.26014 10.2928 6.20286 10.017 6.20286C9.76723 6.20286 9.52879 6.25378 9.3017 6.35561C9.07461 6.45744 8.88646 6.61655 8.73723 6.83294C8.588 7.04614 8.50203 7.3214 8.47932 7.65871H7C7.02271 7.08592 7.17032 6.60223 7.44282 6.20764C7.71533 5.80986 8.07543 5.50915 8.52311 5.30549C8.97405 5.10183 9.47202 5 10.017 5C10.6139 5 11.1363 5.10979 11.5839 5.32936C12.0316 5.54574 12.3788 5.84964 12.6253 6.24105C12.8751 6.62928 13 7.08274 13 7.60143C13 7.95784 12.9432 8.27924 12.8297 8.56563C12.7161 8.84885 12.5539 9.10183 12.3431 9.32458C12.1354 9.54733 11.8856 9.74463 11.5937 9.91647C11.3179 10.0851 11.0941 10.2601 10.9221 10.4415C10.7534 10.6229 10.6302 10.8377 10.5523 11.0859C10.4745 11.3341 10.4323 11.6412 10.4258 12.0072V12.0979H9.03406ZM9.76886 15C9.50284 15 9.27413 14.9077 9.08273 14.7232C8.89132 14.5354 8.79562 14.3095 8.79562 14.0453C8.79562 13.7844 8.89132 13.5617 9.08273 13.3771C9.27413 13.1893 9.50284 13.0955 9.76886 13.0955C10.0316 13.0955 10.2587 13.1893 10.4501 13.3771C10.6448 13.5617 10.7421 13.7844 10.7421 14.0453C10.7421 14.2204 10.6967 14.3811 10.6058 14.5274C10.5182 14.6706 10.4015 14.7852 10.2555 14.8711C10.1095 14.957 9.94728 15 9.76886 15Z",
|
|
10693
|
+
fill: "#161616"
|
|
10694
|
+
}
|
|
10695
|
+
)
|
|
10696
|
+
]
|
|
11040
10697
|
}
|
|
11041
|
-
),
|
|
11042
|
-
/* @__PURE__ */
|
|
11043
|
-
|
|
11044
|
-
|
|
11045
|
-
|
|
11046
|
-
|
|
11047
|
-
|
|
11048
|
-
|
|
11049
|
-
|
|
11050
|
-
|
|
11051
|
-
|
|
11052
|
-
|
|
11053
|
-
|
|
11054
|
-
|
|
11055
|
-
|
|
11056
|
-
|
|
11057
|
-
|
|
11058
|
-
|
|
11059
|
-
|
|
11060
|
-
|
|
11061
|
-
|
|
11062
|
-
|
|
11063
|
-
|
|
11064
|
-
|
|
11065
|
-
|
|
11066
|
-
|
|
11067
|
-
/* @__PURE__ */ jsx34("b", { children: merchantName || "merchant" }),
|
|
11068
|
-
" permission to charge this credit card for agreed-upon purchases in the future."
|
|
11069
|
-
] }) })
|
|
11070
|
-
] })
|
|
11071
|
-
] }) })
|
|
10698
|
+
) }),
|
|
10699
|
+
/* @__PURE__ */ jsx32("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs19("p", { children: [
|
|
10700
|
+
"If checked, I agree to give the ",
|
|
10701
|
+
/* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
|
|
10702
|
+
" permission to charge this credit card for agreed-upon purchases in the future."
|
|
10703
|
+
] }) })
|
|
10704
|
+
] })
|
|
10705
|
+
] }) })
|
|
10706
|
+
] }),
|
|
10707
|
+
/* @__PURE__ */ jsx32("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx32("button", { type: "submit", style: { margin: 0 }, className: "pay-button", children: partialAmount ? formatUSD((_f = Number(partialAmount)) == null ? void 0 : _f.toFixed(2)) : formatUSD((_g = Number(amount)) == null ? void 0 : _g.toFixed(2)) }) })
|
|
10708
|
+
] }) : /* @__PURE__ */ jsxs19("form", { id: "PaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, onKeyDown: (e) => {
|
|
10709
|
+
if (e.key === "Enter" && loading) {
|
|
10710
|
+
e.preventDefault();
|
|
10711
|
+
e.stopPropagation();
|
|
10712
|
+
}
|
|
10713
|
+
}, children: [
|
|
10714
|
+
/* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
|
|
10715
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10716
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
|
|
10717
|
+
/* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
|
|
10718
|
+
const value = e.target.value;
|
|
10719
|
+
if (/^[a-zA-Z\s]*$/.test(value)) {
|
|
10720
|
+
handleCardChange("cardName", value);
|
|
10721
|
+
}
|
|
10722
|
+
} }),
|
|
10723
|
+
(cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
|
|
11072
10724
|
] }),
|
|
11073
|
-
/* @__PURE__ */
|
|
11074
|
-
|
|
11075
|
-
|
|
11076
|
-
|
|
11077
|
-
|
|
11078
|
-
|
|
11079
|
-
|
|
11080
|
-
|
|
11081
|
-
|
|
11082
|
-
|
|
11083
|
-
|
|
11084
|
-
|
|
11085
|
-
|
|
11086
|
-
|
|
11087
|
-
|
|
11088
|
-
|
|
11089
|
-
(cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
|
|
11090
|
-
] }),
|
|
11091
|
-
/* @__PURE__ */ jsx34("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx34(
|
|
11092
|
-
DataCapFields,
|
|
10725
|
+
/* @__PURE__ */ jsx32("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx32(
|
|
10726
|
+
DataCapFields,
|
|
10727
|
+
{
|
|
10728
|
+
isOpen: show || autoTrigger,
|
|
10729
|
+
tokenKey: dcToken,
|
|
10730
|
+
setLoader: activeinCard === "form" ? setLoadingIframe : null
|
|
10731
|
+
}
|
|
10732
|
+
) }),
|
|
10733
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10734
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "zip", children: "ZIP" }),
|
|
10735
|
+
/* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_h = cardData == null ? void 0 : cardData.zipCode) != null ? _h : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
|
|
10736
|
+
(cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
|
|
10737
|
+
] }),
|
|
10738
|
+
customerId && /* @__PURE__ */ jsx32("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
|
|
10739
|
+
/* @__PURE__ */ jsx32(
|
|
10740
|
+
"input",
|
|
11093
10741
|
{
|
|
11094
|
-
|
|
11095
|
-
|
|
11096
|
-
|
|
11097
|
-
|
|
10742
|
+
type: "checkbox",
|
|
10743
|
+
id: "save_card",
|
|
10744
|
+
className: "toggle-checkbox",
|
|
10745
|
+
checked: saveCardInfo,
|
|
10746
|
+
onChange: (e) => setSaveCardInfo(e.target.checked)
|
|
11098
10747
|
}
|
|
11099
|
-
)
|
|
11100
|
-
/* @__PURE__ */
|
|
11101
|
-
|
|
11102
|
-
|
|
11103
|
-
|
|
11104
|
-
|
|
11105
|
-
"Credit cards include a fee amount of ",
|
|
11106
|
-
/* @__PURE__ */ jsx34("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
|
|
11107
|
-
"."
|
|
11108
|
-
] })
|
|
11109
|
-
] }),
|
|
11110
|
-
customerId && /* @__PURE__ */ jsx34("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
|
|
11111
|
-
/* @__PURE__ */ jsx34(
|
|
11112
|
-
"input",
|
|
10748
|
+
),
|
|
10749
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "save_card", className: "toggle-label" }),
|
|
10750
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "save_card", children: "Save card for future payments " }),
|
|
10751
|
+
/* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-wrapper", children: [
|
|
10752
|
+
/* @__PURE__ */ jsx32("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs19(
|
|
10753
|
+
"svg",
|
|
11113
10754
|
{
|
|
11114
|
-
|
|
11115
|
-
|
|
11116
|
-
|
|
11117
|
-
|
|
11118
|
-
|
|
10755
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10756
|
+
width: "20",
|
|
10757
|
+
height: "20",
|
|
10758
|
+
viewBox: "0 0 20 20",
|
|
10759
|
+
fill: "none",
|
|
10760
|
+
children: [
|
|
10761
|
+
/* @__PURE__ */ jsx32("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
|
|
10762
|
+
/* @__PURE__ */ jsx32(
|
|
10763
|
+
"path",
|
|
10764
|
+
{
|
|
10765
|
+
d: "M9.03406 12.0979V12.0072C9.04055 11.4153 9.10057 10.9443 9.21411 10.5943C9.3309 10.2442 9.49635 9.96102 9.71046 9.74463C9.92457 9.52824 10.1825 9.33095 10.4842 9.15274C10.6788 9.03182 10.854 8.89658 11.0097 8.74702C11.1655 8.59745 11.2887 8.42562 11.3796 8.2315C11.4704 8.03739 11.5158 7.82259 11.5158 7.58711C11.5158 7.3039 11.4477 7.05887 11.3114 6.85203C11.1752 6.64519 10.9935 6.48608 10.7664 6.3747C10.5426 6.26014 10.2928 6.20286 10.017 6.20286C9.76723 6.20286 9.52879 6.25378 9.3017 6.35561C9.07461 6.45744 8.88646 6.61655 8.73723 6.83294C8.588 7.04614 8.50203 7.3214 8.47932 7.65871H7C7.02271 7.08592 7.17032 6.60223 7.44282 6.20764C7.71533 5.80986 8.07543 5.50915 8.52311 5.30549C8.97405 5.10183 9.47202 5 10.017 5C10.6139 5 11.1363 5.10979 11.5839 5.32936C12.0316 5.54574 12.3788 5.84964 12.6253 6.24105C12.8751 6.62928 13 7.08274 13 7.60143C13 7.95784 12.9432 8.27924 12.8297 8.56563C12.7161 8.84885 12.5539 9.10183 12.3431 9.32458C12.1354 9.54733 11.8856 9.74463 11.5937 9.91647C11.3179 10.0851 11.0941 10.2601 10.9221 10.4415C10.7534 10.6229 10.6302 10.8377 10.5523 11.0859C10.4745 11.3341 10.4323 11.6412 10.4258 12.0072V12.0979H9.03406ZM9.76886 15C9.50284 15 9.27413 14.9077 9.08273 14.7232C8.89132 14.5354 8.79562 14.3095 8.79562 14.0453C8.79562 13.7844 8.89132 13.5617 9.08273 13.3771C9.27413 13.1893 9.50284 13.0955 9.76886 13.0955C10.0316 13.0955 10.2587 13.1893 10.4501 13.3771C10.6448 13.5617 10.7421 13.7844 10.7421 14.0453C10.7421 14.2204 10.6967 14.3811 10.6058 14.5274C10.5182 14.6706 10.4015 14.7852 10.2555 14.8711C10.1095 14.957 9.94728 15 9.76886 15Z",
|
|
10766
|
+
fill: "#161616"
|
|
10767
|
+
}
|
|
10768
|
+
)
|
|
10769
|
+
]
|
|
11119
10770
|
}
|
|
11120
|
-
),
|
|
11121
|
-
/* @__PURE__ */
|
|
11122
|
-
/* @__PURE__ */ jsx34("label", { htmlFor: "save_card", children: "Save card for future payments " }),
|
|
11123
|
-
/* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-wrapper", children: [
|
|
11124
|
-
/* @__PURE__ */ jsx34("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs20(
|
|
11125
|
-
"svg",
|
|
11126
|
-
{
|
|
11127
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
11128
|
-
width: "20",
|
|
11129
|
-
height: "20",
|
|
11130
|
-
viewBox: "0 0 20 20",
|
|
11131
|
-
fill: "none",
|
|
11132
|
-
children: [
|
|
11133
|
-
/* @__PURE__ */ jsx34("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
|
|
11134
|
-
/* @__PURE__ */ jsx34(
|
|
11135
|
-
"path",
|
|
11136
|
-
{
|
|
11137
|
-
d: "M9.03406 12.0979V12.0072C9.04055 11.4153 9.10057 10.9443 9.21411 10.5943C9.3309 10.2442 9.49635 9.96102 9.71046 9.74463C9.92457 9.52824 10.1825 9.33095 10.4842 9.15274C10.6788 9.03182 10.854 8.89658 11.0097 8.74702C11.1655 8.59745 11.2887 8.42562 11.3796 8.2315C11.4704 8.03739 11.5158 7.82259 11.5158 7.58711C11.5158 7.3039 11.4477 7.05887 11.3114 6.85203C11.1752 6.64519 10.9935 6.48608 10.7664 6.3747C10.5426 6.26014 10.2928 6.20286 10.017 6.20286C9.76723 6.20286 9.52879 6.25378 9.3017 6.35561C9.07461 6.45744 8.88646 6.61655 8.73723 6.83294C8.588 7.04614 8.50203 7.3214 8.47932 7.65871H7C7.02271 7.08592 7.17032 6.60223 7.44282 6.20764C7.71533 5.80986 8.07543 5.50915 8.52311 5.30549C8.97405 5.10183 9.47202 5 10.017 5C10.6139 5 11.1363 5.10979 11.5839 5.32936C12.0316 5.54574 12.3788 5.84964 12.6253 6.24105C12.8751 6.62928 13 7.08274 13 7.60143C13 7.95784 12.9432 8.27924 12.8297 8.56563C12.7161 8.84885 12.5539 9.10183 12.3431 9.32458C12.1354 9.54733 11.8856 9.74463 11.5937 9.91647C11.3179 10.0851 11.0941 10.2601 10.9221 10.4415C10.7534 10.6229 10.6302 10.8377 10.5523 11.0859C10.4745 11.3341 10.4323 11.6412 10.4258 12.0072V12.0979H9.03406ZM9.76886 15C9.50284 15 9.27413 14.9077 9.08273 14.7232C8.89132 14.5354 8.79562 14.3095 8.79562 14.0453C8.79562 13.7844 8.89132 13.5617 9.08273 13.3771C9.27413 13.1893 9.50284 13.0955 9.76886 13.0955C10.0316 13.0955 10.2587 13.1893 10.4501 13.3771C10.6448 13.5617 10.7421 13.7844 10.7421 14.0453C10.7421 14.2204 10.6967 14.3811 10.6058 14.5274C10.5182 14.6706 10.4015 14.7852 10.2555 14.8711C10.1095 14.957 9.94728 15 9.76886 15Z",
|
|
11138
|
-
fill: "#161616"
|
|
11139
|
-
}
|
|
11140
|
-
)
|
|
11141
|
-
]
|
|
11142
|
-
}
|
|
11143
|
-
) }),
|
|
11144
|
-
/* @__PURE__ */ jsx34("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs20("p", { children: [
|
|
11145
|
-
"If checked, I agree to give the ",
|
|
11146
|
-
/* @__PURE__ */ jsx34("b", { children: merchantName || "merchant" }),
|
|
11147
|
-
" permission to charge this credit card for agreed-upon purchases in the future."
|
|
11148
|
-
] }) })
|
|
11149
|
-
] })
|
|
11150
|
-
] }) })
|
|
11151
|
-
] }),
|
|
11152
|
-
/* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx34("button", { type: "submit", style: { margin: 0, display: onSubmit ? "none" : "block" }, className: "pay-button", children: partialAmount ? formatUSD((_k = Number(partialAmount)) == null ? void 0 : _k.toFixed(2)) : formatUSD((_l = Number(amount)) == null ? void 0 : _l.toFixed(2)) }) })
|
|
11153
|
-
] })
|
|
11154
|
-
] }),
|
|
11155
|
-
/* @__PURE__ */ jsx34("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: /* @__PURE__ */ jsxs20(Fragment19, { children: [
|
|
11156
|
-
!onSubmit && /* @__PURE__ */ jsxs20("div", { className: "frac-heading-card-wrap", children: [
|
|
11157
|
-
/* @__PURE__ */ jsx34("div", { className: "frac-backarrow", children: (bankList == null ? void 0 : bankList.length) > 0 && activeinBank === "form" && /* @__PURE__ */ jsxs20("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinBank("list"), children: [
|
|
11158
|
-
" ",
|
|
11159
|
-
/* @__PURE__ */ jsx34(IoArrowBack4, {})
|
|
11160
|
-
] }) }),
|
|
11161
|
-
/* @__PURE__ */ jsx34("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
|
|
11162
|
-
] }),
|
|
11163
|
-
activeinBank === "list" && (bankList == null ? void 0 : bankList.length) > 0 ? /* @__PURE__ */ jsxs20(Fragment19, { children: [
|
|
11164
|
-
/* @__PURE__ */ jsx34(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Banks", ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
|
|
11165
|
-
setActiveinBank("form");
|
|
11166
|
-
} }),
|
|
11167
|
-
/* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx34("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: formatUSD((_m = Number(bankAmount)) == null ? void 0 : _m.toFixed(2)) }) })
|
|
11168
|
-
] }) : /* @__PURE__ */ jsxs20("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, ref: bankFormRef, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
|
|
11169
|
-
if (e.key === "Enter" && loading) {
|
|
11170
|
-
e.preventDefault();
|
|
11171
|
-
e.stopPropagation();
|
|
11172
|
-
}
|
|
11173
|
-
}, children: [
|
|
11174
|
-
/* @__PURE__ */ jsxs20("div", { className: "ach-scrl", style: {
|
|
11175
|
-
minHeight: "444px",
|
|
11176
|
-
maxHeight: "444px"
|
|
11177
|
-
}, children: [
|
|
11178
|
-
/* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
|
|
11179
|
-
/* @__PURE__ */ jsx34("label", { htmlFor: "nameonaccount", children: "Name on account" }),
|
|
11180
|
-
/* @__PURE__ */ jsx34("input", { type: "text", id: "nameonaccount", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", name: "name", value: (_n = achData == null ? void 0 : achData.name) != null ? _n : "", onChange: handleChangeAch }),
|
|
11181
|
-
(achError == null ? void 0 : achError.name) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
|
|
11182
|
-
] }),
|
|
11183
|
-
/* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
|
|
11184
|
-
/* @__PURE__ */ jsx34("label", { htmlFor: "routingnumber", children: "Routing number" }),
|
|
11185
|
-
/* @__PURE__ */ jsx34(
|
|
11186
|
-
"input",
|
|
11187
|
-
{
|
|
11188
|
-
type: "text",
|
|
11189
|
-
id: "routingnumber",
|
|
11190
|
-
className: "form-control-frac",
|
|
11191
|
-
maxLength: 9,
|
|
11192
|
-
placeholder: "000000000",
|
|
11193
|
-
name: "routingNumber",
|
|
11194
|
-
value: (_o = achData == null ? void 0 : achData.routingNumber) != null ? _o : "",
|
|
11195
|
-
onChange: handleChangeAch
|
|
11196
|
-
}
|
|
11197
|
-
),
|
|
11198
|
-
(achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.routingNumber })
|
|
11199
|
-
] }),
|
|
11200
|
-
/* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
|
|
11201
|
-
/* @__PURE__ */ jsx34("label", { htmlFor: "accountnumber", children: "Account number" }),
|
|
11202
|
-
/* @__PURE__ */ jsx34(
|
|
11203
|
-
"input",
|
|
11204
|
-
{
|
|
11205
|
-
type: "text",
|
|
11206
|
-
id: "accountnumber",
|
|
11207
|
-
className: "form-control-frac",
|
|
11208
|
-
maxLength: 16,
|
|
11209
|
-
placeholder: "0000000000",
|
|
11210
|
-
name: "accountNumber",
|
|
11211
|
-
value: (_p = achData == null ? void 0 : achData.accountNumber) != null ? _p : "",
|
|
11212
|
-
onChange: handleChangeAch
|
|
11213
|
-
}
|
|
11214
|
-
),
|
|
11215
|
-
(achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.accountNumber })
|
|
11216
|
-
] }),
|
|
11217
|
-
/* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
|
|
11218
|
-
/* @__PURE__ */ jsx34("label", { htmlFor: "confirmaccountnumber", children: "Confirm account number" }),
|
|
11219
|
-
/* @__PURE__ */ jsx34(
|
|
11220
|
-
"input",
|
|
11221
|
-
{
|
|
11222
|
-
type: "text",
|
|
11223
|
-
id: "confirmaccountnumber",
|
|
11224
|
-
className: "form-control-frac",
|
|
11225
|
-
maxLength: 16,
|
|
11226
|
-
placeholder: "0000000000",
|
|
11227
|
-
name: "confirmAccountNumber",
|
|
11228
|
-
value: (_q = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _q : "",
|
|
11229
|
-
onChange: handleChangeAch
|
|
11230
|
-
}
|
|
11231
|
-
),
|
|
11232
|
-
(achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.confirmAccountNumber })
|
|
11233
|
-
] }),
|
|
11234
|
-
/* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
|
|
11235
|
-
/* @__PURE__ */ jsx34("label", { htmlFor: "bankname", children: "Bank name" }),
|
|
11236
|
-
/* @__PURE__ */ jsx34(
|
|
11237
|
-
"input",
|
|
11238
|
-
{
|
|
11239
|
-
type: "text",
|
|
11240
|
-
id: "bankname",
|
|
11241
|
-
className: "form-control-frac",
|
|
11242
|
-
maxLength: 100,
|
|
11243
|
-
placeholder: "My Bank",
|
|
11244
|
-
name: "bankName",
|
|
11245
|
-
value: (_r = achData == null ? void 0 : achData.bankName) != null ? _r : "",
|
|
11246
|
-
onChange: handleChangeAch
|
|
11247
|
-
}
|
|
11248
|
-
),
|
|
11249
|
-
(achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.bankName })
|
|
11250
|
-
] }),
|
|
11251
|
-
((achData == null ? void 0 : achData.accountType) === "business saving" || (achData == null ? void 0 : achData.accountType) === "business checking") && /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
|
|
11252
|
-
/* @__PURE__ */ jsx34("label", { htmlFor: "companyName", children: "Company name" }),
|
|
11253
|
-
/* @__PURE__ */ jsx34(
|
|
11254
|
-
"input",
|
|
11255
|
-
{
|
|
11256
|
-
type: "text",
|
|
11257
|
-
id: "companyName",
|
|
11258
|
-
className: "form-control-frac",
|
|
11259
|
-
maxLength: 100,
|
|
11260
|
-
placeholder: "My Company",
|
|
11261
|
-
name: "companyName",
|
|
11262
|
-
value: (_s = achData == null ? void 0 : achData.companyName) != null ? _s : "",
|
|
11263
|
-
onChange: handleChangeAch
|
|
11264
|
-
}
|
|
11265
|
-
),
|
|
11266
|
-
(achError == null ? void 0 : achError.companyName) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.companyName })
|
|
11267
|
-
] }),
|
|
11268
|
-
/* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
|
|
11269
|
-
/* @__PURE__ */ jsx34("label", { htmlFor: "accounttype", children: "Select account type" }),
|
|
11270
|
-
/* @__PURE__ */ jsxs20("select", { name: "accountType", id: "accounttype", className: "form-control-frac", value: (_t = achData == null ? void 0 : achData.accountType) != null ? _t : "", onChange: handleChangeAch, children: [
|
|
11271
|
-
/* @__PURE__ */ jsx34("option", { value: "", children: "Select account" }),
|
|
11272
|
-
accountTypes.map((type) => /* @__PURE__ */ jsx34("option", { value: type.value, children: type.label }, type.value))
|
|
11273
|
-
] }),
|
|
11274
|
-
bankFeeAmount > 0 && /* @__PURE__ */ jsxs20("small", { className: "frac-fee-text", children: [
|
|
11275
|
-
"There is a processing fee of ",
|
|
11276
|
-
/* @__PURE__ */ jsx34("span", { className: "frac-fee-amount", children: formatUSD(bankFeeAmount.toFixed(2)) }),
|
|
11277
|
-
"."
|
|
11278
|
-
] }),
|
|
11279
|
-
/* @__PURE__ */ jsxs20("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
|
|
11280
|
-
/* @__PURE__ */ jsx34("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
|
|
11281
|
-
setIsBankConsentChecked(e.target.checked);
|
|
11282
|
-
if (e.target.checked) {
|
|
11283
|
-
setErrorBankConsent("");
|
|
11284
|
-
}
|
|
11285
|
-
} }),
|
|
11286
|
-
/* @__PURE__ */ jsx34("label", { className: "saveachlabel", htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${merchantName || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
|
|
11287
|
-
] }),
|
|
11288
|
-
errorBankConsent && /* @__PURE__ */ jsx34("span", { className: "error-span", children: errorBankConsent }),
|
|
11289
|
-
customerId && /* @__PURE__ */ jsxs20("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
|
|
11290
|
-
/* @__PURE__ */ jsx34("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
|
|
11291
|
-
/* @__PURE__ */ jsx34("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save Bank" })
|
|
11292
|
-
] }),
|
|
11293
|
-
saveACHinfo && /* @__PURE__ */ jsx34("div", { className: "form-group-frac saveachtext", children: /* @__PURE__ */ jsxs20("p", { children: [
|
|
10771
|
+
) }),
|
|
10772
|
+
/* @__PURE__ */ jsx32("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs19("p", { children: [
|
|
11294
10773
|
"If checked, I agree to give the ",
|
|
11295
|
-
/* @__PURE__ */
|
|
11296
|
-
" permission to charge this
|
|
10774
|
+
/* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
|
|
10775
|
+
" permission to charge this credit card for agreed-upon purchases in the future."
|
|
11297
10776
|
] }) })
|
|
11298
10777
|
] })
|
|
10778
|
+
] }) })
|
|
10779
|
+
] }),
|
|
10780
|
+
/* @__PURE__ */ jsx32("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx32("button", { type: "submit", style: { margin: 0 }, className: "pay-button", children: partialAmount ? formatUSD((_i = Number(partialAmount)) == null ? void 0 : _i.toFixed(2)) : formatUSD((_j = Number(amount)) == null ? void 0 : _j.toFixed(2)) }) })
|
|
10781
|
+
] })
|
|
10782
|
+
] }),
|
|
10783
|
+
/* @__PURE__ */ jsx32("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
10784
|
+
/* @__PURE__ */ jsxs19("div", { className: "frac-heading-card-wrap", children: [
|
|
10785
|
+
/* @__PURE__ */ jsx32("div", { className: "frac-backarrow", children: (bankList == null ? void 0 : bankList.length) > 0 && activeinBank === "form" && /* @__PURE__ */ jsxs19("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinBank("list"), children: [
|
|
10786
|
+
" ",
|
|
10787
|
+
/* @__PURE__ */ jsx32(IoArrowBack4, {})
|
|
10788
|
+
] }) }),
|
|
10789
|
+
/* @__PURE__ */ jsx32("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
|
|
10790
|
+
] }),
|
|
10791
|
+
activeinBank === "list" && (bankList == null ? void 0 : bankList.length) > 0 ? /* @__PURE__ */ jsxs19(Fragment18, { children: [
|
|
10792
|
+
/* @__PURE__ */ jsx32(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Banks", ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
|
|
10793
|
+
setActiveinBank("form");
|
|
10794
|
+
} }),
|
|
10795
|
+
/* @__PURE__ */ jsx32("div", { className: "form-group-frac", style: { padding: "0" }, children: /* @__PURE__ */ jsx32("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: formatUSD((_k = Number(bankAmount)) == null ? void 0 : _k.toFixed(2)) }) })
|
|
10796
|
+
] }) : /* @__PURE__ */ jsxs19("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
|
|
10797
|
+
if (e.key === "Enter" && loading) {
|
|
10798
|
+
e.preventDefault();
|
|
10799
|
+
e.stopPropagation();
|
|
10800
|
+
}
|
|
10801
|
+
}, children: [
|
|
10802
|
+
/* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: {
|
|
10803
|
+
minHeight: "444px",
|
|
10804
|
+
maxHeight: "444px"
|
|
10805
|
+
}, children: [
|
|
10806
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10807
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "nameonaccount", children: "Name on account" }),
|
|
10808
|
+
/* @__PURE__ */ jsx32("input", { type: "text", id: "nameonaccount", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", name: "name", value: (_l = achData == null ? void 0 : achData.name) != null ? _l : "", onChange: handleChangeAch }),
|
|
10809
|
+
(achError == null ? void 0 : achError.name) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
|
|
11299
10810
|
] }),
|
|
11300
|
-
/* @__PURE__ */
|
|
11301
|
-
|
|
11302
|
-
|
|
11303
|
-
|
|
11304
|
-
|
|
10811
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10812
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "routingnumber", children: "Routing number" }),
|
|
10813
|
+
/* @__PURE__ */ jsx32(
|
|
10814
|
+
"input",
|
|
10815
|
+
{
|
|
10816
|
+
type: "text",
|
|
10817
|
+
id: "routingnumber",
|
|
10818
|
+
className: "form-control-frac",
|
|
10819
|
+
maxLength: 9,
|
|
10820
|
+
placeholder: "000000000",
|
|
10821
|
+
name: "routingNumber",
|
|
10822
|
+
value: (_m = achData == null ? void 0 : achData.routingNumber) != null ? _m : "",
|
|
10823
|
+
onChange: handleChangeAch
|
|
10824
|
+
}
|
|
10825
|
+
),
|
|
10826
|
+
(achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.routingNumber })
|
|
10827
|
+
] }),
|
|
10828
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10829
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "accountnumber", children: "Account number" }),
|
|
10830
|
+
/* @__PURE__ */ jsx32(
|
|
10831
|
+
"input",
|
|
10832
|
+
{
|
|
10833
|
+
type: "text",
|
|
10834
|
+
id: "accountnumber",
|
|
10835
|
+
className: "form-control-frac",
|
|
10836
|
+
maxLength: 16,
|
|
10837
|
+
placeholder: "0000000000",
|
|
10838
|
+
name: "accountNumber",
|
|
10839
|
+
value: (_n = achData == null ? void 0 : achData.accountNumber) != null ? _n : "",
|
|
10840
|
+
onChange: handleChangeAch
|
|
10841
|
+
}
|
|
10842
|
+
),
|
|
10843
|
+
(achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.accountNumber })
|
|
10844
|
+
] }),
|
|
10845
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10846
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "confirmaccountnumber", children: "Confirm account number" }),
|
|
10847
|
+
/* @__PURE__ */ jsx32(
|
|
10848
|
+
"input",
|
|
10849
|
+
{
|
|
10850
|
+
type: "text",
|
|
10851
|
+
id: "confirmaccountnumber",
|
|
10852
|
+
className: "form-control-frac",
|
|
10853
|
+
maxLength: 16,
|
|
10854
|
+
placeholder: "0000000000",
|
|
10855
|
+
name: "confirmAccountNumber",
|
|
10856
|
+
value: (_o = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _o : "",
|
|
10857
|
+
onChange: handleChangeAch
|
|
10858
|
+
}
|
|
10859
|
+
),
|
|
10860
|
+
(achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.confirmAccountNumber })
|
|
10861
|
+
] }),
|
|
10862
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10863
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "bankname", children: "Bank name" }),
|
|
10864
|
+
/* @__PURE__ */ jsx32(
|
|
10865
|
+
"input",
|
|
10866
|
+
{
|
|
10867
|
+
type: "text",
|
|
10868
|
+
id: "bankname",
|
|
10869
|
+
className: "form-control-frac",
|
|
10870
|
+
maxLength: 100,
|
|
10871
|
+
placeholder: "My Bank",
|
|
10872
|
+
name: "bankName",
|
|
10873
|
+
value: (_p = achData == null ? void 0 : achData.bankName) != null ? _p : "",
|
|
10874
|
+
onChange: handleChangeAch
|
|
10875
|
+
}
|
|
10876
|
+
),
|
|
10877
|
+
(achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.bankName })
|
|
10878
|
+
] }),
|
|
10879
|
+
((achData == null ? void 0 : achData.accountType) === "business saving" || (achData == null ? void 0 : achData.accountType) === "business checking") && /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10880
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "companyName", children: "Company name" }),
|
|
10881
|
+
/* @__PURE__ */ jsx32(
|
|
10882
|
+
"input",
|
|
10883
|
+
{
|
|
10884
|
+
type: "text",
|
|
10885
|
+
id: "companyName",
|
|
10886
|
+
className: "form-control-frac",
|
|
10887
|
+
maxLength: 100,
|
|
10888
|
+
placeholder: "My Company",
|
|
10889
|
+
name: "companyName",
|
|
10890
|
+
value: (_q = achData == null ? void 0 : achData.companyName) != null ? _q : "",
|
|
10891
|
+
onChange: handleChangeAch
|
|
10892
|
+
}
|
|
10893
|
+
),
|
|
10894
|
+
(achError == null ? void 0 : achError.companyName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.companyName })
|
|
10895
|
+
] }),
|
|
10896
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
|
|
10897
|
+
/* @__PURE__ */ jsx32("label", { htmlFor: "accounttype", children: "Select account type" }),
|
|
10898
|
+
/* @__PURE__ */ jsxs19("select", { name: "accountType", id: "accounttype", className: "form-control-frac", value: (_r = achData == null ? void 0 : achData.accountType) != null ? _r : "", onChange: handleChangeAch, children: [
|
|
10899
|
+
/* @__PURE__ */ jsx32("option", { value: "", children: "Select account" }),
|
|
10900
|
+
accountTypes.map((type) => /* @__PURE__ */ jsx32("option", { value: type.value, children: type.label }, type.value))
|
|
10901
|
+
] })
|
|
10902
|
+
] }),
|
|
10903
|
+
/* @__PURE__ */ jsxs19("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
|
|
10904
|
+
/* @__PURE__ */ jsx32("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
|
|
10905
|
+
setIsBankConsentChecked(e.target.checked);
|
|
10906
|
+
if (e.target.checked) {
|
|
10907
|
+
setErrorBankConsent("");
|
|
10908
|
+
}
|
|
10909
|
+
} }),
|
|
10910
|
+
/* @__PURE__ */ jsx32("label", { className: "saveachlabel", htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${merchantName || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
|
|
10911
|
+
] }),
|
|
10912
|
+
errorBankConsent && /* @__PURE__ */ jsx32("span", { className: "error-span", children: errorBankConsent }),
|
|
10913
|
+
customerId && /* @__PURE__ */ jsxs19("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
|
|
10914
|
+
/* @__PURE__ */ jsx32("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
|
|
10915
|
+
/* @__PURE__ */ jsx32("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save Bank" })
|
|
10916
|
+
] }),
|
|
10917
|
+
saveACHinfo && /* @__PURE__ */ jsx32("div", { className: "form-group-frac saveachtext", children: /* @__PURE__ */ jsxs19("p", { children: [
|
|
10918
|
+
"If checked, I agree to give the ",
|
|
10919
|
+
/* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
|
|
10920
|
+
" permission to charge this bank account for agreed-upon purchases in the future."
|
|
10921
|
+
] }) })
|
|
10922
|
+
] }),
|
|
10923
|
+
/* @__PURE__ */ jsx32("div", { className: "form-group-frac ", children: /* @__PURE__ */ jsx32("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit", children: formatUSD((_s = Number(bankAmount)) == null ? void 0 : _s.toFixed(2)) }) })
|
|
10924
|
+
] })
|
|
10925
|
+
] }) })
|
|
10926
|
+
] }) }) }) })
|
|
11305
10927
|
] })
|
|
11306
10928
|
] })
|
|
11307
10929
|
] })
|
|
@@ -11312,7 +10934,7 @@ var ModelContentSky_default = ModelContentSky;
|
|
|
11312
10934
|
|
|
11313
10935
|
// src/app/components/Skysystemz/PayButtonWithForm.tsx
|
|
11314
10936
|
import axios10 from "axios";
|
|
11315
|
-
import { Fragment as
|
|
10937
|
+
import { Fragment as Fragment19, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
11316
10938
|
var PaymentWidget = ({
|
|
11317
10939
|
amount,
|
|
11318
10940
|
bankAmount,
|
|
@@ -11423,510 +11045,24 @@ var PaymentWidget = ({
|
|
|
11423
11045
|
getskyosOrderDetails();
|
|
11424
11046
|
}
|
|
11425
11047
|
}, [show, isPartial, partialRef]);
|
|
11426
|
-
return /* @__PURE__ */
|
|
11427
|
-
/* @__PURE__ */
|
|
11428
|
-
/* @__PURE__ */
|
|
11429
|
-
/* @__PURE__ */
|
|
11430
|
-
/* @__PURE__ */
|
|
11431
|
-
/* @__PURE__ */
|
|
11432
|
-
/* @__PURE__ */
|
|
11433
|
-
/* @__PURE__ */
|
|
11434
|
-
!autoTrigger && /* @__PURE__ */
|
|
11435
|
-
submitBtnText,
|
|
11436
|
-
submitBtnIcon
|
|
11437
|
-
] }),
|
|
11438
|
-
!autoTrigger ? /* @__PURE__ */ jsx35(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx35(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx35(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
|
|
11439
|
-
] });
|
|
11440
|
-
};
|
|
11441
|
-
|
|
11442
|
-
// src/app/components/Skysystemz/EmbeddedCheckout.tsx
|
|
11443
|
-
import { useEffect as useEffect17, useState as useState12, useMemo as useMemo2 } from "react";
|
|
11444
|
-
import axios11 from "axios";
|
|
11445
|
-
|
|
11446
|
-
// src/app/components/Skysystemz/EmbeddedCheckoutStyles.tsx
|
|
11447
|
-
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
11448
|
-
function EmbeddedCheckoutStyles({ extraCustomCSS }) {
|
|
11449
|
-
return /* @__PURE__ */ jsx36("style", { children: `
|
|
11450
|
-
|
|
11451
|
-
.pay-amount-conatiner{
|
|
11452
|
-
margin-top: 20px !important;
|
|
11453
|
-
margin-bottom: 20px !important ;
|
|
11454
|
-
}
|
|
11455
|
-
|
|
11456
|
-
.frac-pay-container.pay-container {
|
|
11457
|
-
grid-template-columns:1fr;
|
|
11458
|
-
}
|
|
11459
|
-
|
|
11460
|
-
|
|
11461
|
-
/* Card */
|
|
11462
|
-
.plan-card {
|
|
11463
|
-
width: 100%;
|
|
11464
|
-
font-family: Inter, sans-serif;
|
|
11465
|
-
background: #fff;
|
|
11466
|
-
}
|
|
11467
|
-
|
|
11468
|
-
/* Header */
|
|
11469
|
-
.card-header {
|
|
11470
|
-
padding: 12px 0 0 0;
|
|
11471
|
-
}
|
|
11472
|
-
|
|
11473
|
-
/* Button */
|
|
11474
|
-
.collapse-btn {
|
|
11475
|
-
width: 100%;
|
|
11476
|
-
background: none;
|
|
11477
|
-
border: none;
|
|
11478
|
-
display: flex;
|
|
11479
|
-
justify-content: space-between;
|
|
11480
|
-
align-items: center;
|
|
11481
|
-
cursor: pointer;
|
|
11482
|
-
font-size: 15px;
|
|
11483
|
-
padding: 0;
|
|
11484
|
-
}
|
|
11485
|
-
|
|
11486
|
-
/* Arrow */
|
|
11487
|
-
.arrow {
|
|
11488
|
-
transition: transform 0.3s ease;
|
|
11489
|
-
height: 8px;
|
|
11490
|
-
}
|
|
11491
|
-
|
|
11492
|
-
/* Open State */
|
|
11493
|
-
.collapse-btn.open .arrow {
|
|
11494
|
-
transform: rotate(180deg); /* Down */
|
|
11495
|
-
}
|
|
11496
|
-
|
|
11497
|
-
/* Body */
|
|
11498
|
-
.card-body {
|
|
11499
|
-
padding: 0;
|
|
11500
|
-
}
|
|
11501
|
-
|
|
11502
|
-
/* Plan Header */
|
|
11503
|
-
.plan-header {
|
|
11504
|
-
font-size: 15px;
|
|
11505
|
-
font-weight: 600;
|
|
11506
|
-
}
|
|
11507
|
-
|
|
11508
|
-
/* Scrollable List */
|
|
11509
|
-
.plan-list {
|
|
11510
|
-
max-height: 200px;
|
|
11511
|
-
overflow-y: auto;
|
|
11512
|
-
padding-right: 6px;
|
|
11513
|
-
}
|
|
11514
|
-
|
|
11515
|
-
/* Items */
|
|
11516
|
-
.plan-item {
|
|
11517
|
-
display: flex;
|
|
11518
|
-
justify-content: space-between;
|
|
11519
|
-
padding: 6px 0;
|
|
11520
|
-
font-size: 14px;
|
|
11521
|
-
}
|
|
11522
|
-
|
|
11523
|
-
/* Badges */
|
|
11524
|
-
.badge {
|
|
11525
|
-
padding: 4px 10px;
|
|
11526
|
-
border-radius: 12px;
|
|
11527
|
-
font-size: 12px;
|
|
11528
|
-
font-weight: 500;
|
|
11529
|
-
}
|
|
11530
|
-
|
|
11531
|
-
.badge-included {
|
|
11532
|
-
background: #f1f3f5;
|
|
11533
|
-
color: #495057;
|
|
11534
|
-
}
|
|
11535
|
-
|
|
11536
|
-
.badge-available {
|
|
11537
|
-
background: #f8f9fa;
|
|
11538
|
-
color: #212529;
|
|
11539
|
-
}
|
|
11540
|
-
|
|
11541
|
-
/* Helpers */
|
|
11542
|
-
.row-between {
|
|
11543
|
-
display: flex;
|
|
11544
|
-
justify-content: space-between;
|
|
11545
|
-
}
|
|
11546
|
-
|
|
11547
|
-
.text-end {
|
|
11548
|
-
text-align: right;
|
|
11549
|
-
}
|
|
11550
|
-
|
|
11551
|
-
.text-muted {
|
|
11552
|
-
color: #6c757d;
|
|
11553
|
-
font-size: 12px;
|
|
11554
|
-
}
|
|
11555
|
-
|
|
11556
|
-
.fw-semibold {
|
|
11557
|
-
font-weight: 600;
|
|
11558
|
-
}
|
|
11559
|
-
|
|
11560
|
-
.mb-2 {
|
|
11561
|
-
margin-bottom: 8px;
|
|
11562
|
-
}
|
|
11563
|
-
|
|
11564
|
-
/* Divider */
|
|
11565
|
-
.divider {
|
|
11566
|
-
height: 1px;
|
|
11567
|
-
background: #e5e7eb;
|
|
11568
|
-
margin: 8px 0;
|
|
11569
|
-
}
|
|
11570
|
-
|
|
11571
|
-
/* Collapse Animation */
|
|
11572
|
-
.collapse {
|
|
11573
|
-
max-height: 0;
|
|
11574
|
-
overflow: hidden;
|
|
11575
|
-
transition: max-height 0.3s ease;
|
|
11576
|
-
}
|
|
11577
|
-
|
|
11578
|
-
.collapse.show {
|
|
11579
|
-
max-height: 1000px;
|
|
11580
|
-
}
|
|
11581
|
-
.frac-pay-container.pay-container {
|
|
11582
|
-
grid-template-columns:1fr;
|
|
11583
|
-
}
|
|
11584
|
-
.frac-payment-form-div .amt-pay-con {
|
|
11585
|
-
padding-right: 0px;
|
|
11586
|
-
}
|
|
11587
|
-
.frac-payment-form-div .ach-scrl {
|
|
11588
|
-
padding-right: 0px;
|
|
11589
|
-
gap: 10px;
|
|
11590
|
-
max-height: fit-content !important;
|
|
11591
|
-
min-height: fit-content !important;
|
|
11592
|
-
overflow: hidden !important;
|
|
11593
|
-
}
|
|
11594
|
-
.frac-payment-form-div .frac-card-bank-radio-main {
|
|
11595
|
-
display: flex;
|
|
11596
|
-
flex-direction: row;
|
|
11597
|
-
align-items: flex-start;
|
|
11598
|
-
align-self: stretch;
|
|
11599
|
-
border-radius: 14px;
|
|
11600
|
-
border: none;
|
|
11601
|
-
overflow: visible;
|
|
11602
|
-
gap: 10px;
|
|
11603
|
-
}
|
|
11604
|
-
.frac-payment-form-div .frac-card-bank-radio {
|
|
11605
|
-
display: flex;
|
|
11606
|
-
padding: 12px 16px;
|
|
11607
|
-
justify-content: space-between;
|
|
11608
|
-
align-items: center;
|
|
11609
|
-
align-self: stretch;
|
|
11610
|
-
width: 50%;
|
|
11611
|
-
border: 1px solid #E0DFE2;
|
|
11612
|
-
border-radius: 10px;
|
|
11613
|
-
box-shadow: rgba(149, 157, 165, 0.2) 0px 1px 4px;
|
|
11614
|
-
}
|
|
11615
|
-
.frac-payment-form-div .frac-card-bank-radio.frac-active {
|
|
11616
|
-
background: #fff;
|
|
11617
|
-
border: 2px solid #004eab !important;
|
|
11618
|
-
}
|
|
11619
|
-
|
|
11620
|
-
.frac-payment-form-div .form-control-frac {
|
|
11621
|
-
border: 1px solid #dee2e6 !important;
|
|
11622
|
-
border-radius: 0.375rem !important;
|
|
11623
|
-
background-color: #F6F6F7;
|
|
11624
|
-
box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
|
|
11625
|
-
}
|
|
11626
|
-
.frac-payment-form-div .form-control-frac:focus {
|
|
11627
|
-
border: 1px solid #004eab !important;
|
|
11628
|
-
}
|
|
11629
|
-
.frac-payment-form-div .card-expiry-new {
|
|
11630
|
-
border: none;
|
|
11631
|
-
gap: 10px;
|
|
11632
|
-
}
|
|
11633
|
-
.frac-payment-form-div .exp-date-year-container {
|
|
11634
|
-
gap: 10px;
|
|
11635
|
-
width: 100%;
|
|
11636
|
-
}
|
|
11637
|
-
.frac-payment-form-div .card-type-logo-wrap{
|
|
11638
|
-
position: absolute;
|
|
11639
|
-
right: 10px;
|
|
11640
|
-
max-width: 30px;
|
|
11641
|
-
}
|
|
11642
|
-
.detials-wrap.detials-wrap-1 {
|
|
11643
|
-
display: flex;
|
|
11644
|
-
flex-wrap: wrap;
|
|
11645
|
-
}
|
|
11646
|
-
@media screen and (max-width: 1280px) {
|
|
11647
|
-
.frac-pay-container.pay-container {
|
|
11648
|
-
grid-template-columns: 1fr;
|
|
11649
|
-
border: none;
|
|
11650
|
-
}
|
|
11651
|
-
}
|
|
11652
|
-
@media screen and (max-width: 899px) {
|
|
11653
|
-
.detials-wrap {
|
|
11654
|
-
grid-template-columns: 1fr !important;
|
|
11655
|
-
}
|
|
11656
|
-
.frac-payment-form-div .exp-date-year-container{
|
|
11657
|
-
width: 100%;}
|
|
11658
|
-
|
|
11659
|
-
}
|
|
11660
|
-
@media screen and (max-width: 575px) {
|
|
11661
|
-
.frac-payment-form-div .card-type-logo-wrap{
|
|
11662
|
-
max-width: 30px;
|
|
11663
|
-
}
|
|
11664
|
-
form#ACHPaymentForm .ach-scrl {
|
|
11665
|
-
grid-template-columns: 1fr !important;
|
|
11666
|
-
}
|
|
11667
|
-
@media screen and (max-width: 375px) {
|
|
11668
|
-
.frac-payment-form-div .exp-date-year-container {
|
|
11669
|
-
flex-direction: column;
|
|
11670
|
-
}
|
|
11671
|
-
.parent-pay-container {
|
|
11672
|
-
padding: 10px;
|
|
11673
|
-
}
|
|
11674
|
-
}
|
|
11675
|
-
}
|
|
11676
|
-
.box-inner-card-text{
|
|
11677
|
-
display: flex;
|
|
11678
|
-
gap: 0px;
|
|
11679
|
-
flex-direction: column;
|
|
11680
|
-
}
|
|
11681
|
-
.box-inner-card-text .frac-payment-type-logo {
|
|
11682
|
-
width: 17px;
|
|
11683
|
-
height: 17px;
|
|
11684
|
-
aspect-ratio: 1/1;
|
|
11685
|
-
}
|
|
11686
|
-
.exp-date-year-wrap.form-control-frac input {
|
|
11687
|
-
background: transparent;
|
|
11688
|
-
border: none;
|
|
11689
|
-
outline: none;
|
|
11690
|
-
font-size: 1rem;
|
|
11691
|
-
font-weight: 400;
|
|
11692
|
-
}
|
|
11693
|
-
.exp-date-year-wrap.form-control-frac {
|
|
11694
|
-
display: flex;
|
|
11695
|
-
gap: 2px;
|
|
11696
|
-
}
|
|
11697
|
-
.exp-date-year-wrap input.exp-month {
|
|
11698
|
-
width: 32px;
|
|
11699
|
-
}
|
|
11700
|
-
.detials-wrap {
|
|
11701
|
-
display: grid;
|
|
11702
|
-
grid-template-columns: 1fr 1fr;
|
|
11703
|
-
gap: 10px;
|
|
11704
|
-
}
|
|
11705
|
-
.detials-wrap.detials-wrap-2{
|
|
11706
|
-
grid-template-columns: 1fr 1fr;
|
|
11707
|
-
}
|
|
11708
|
-
form#ACHPaymentForm .ach-scrl {
|
|
11709
|
-
display: grid;
|
|
11710
|
-
grid-gap: 0px 10px;
|
|
11711
|
-
grid-template-columns: 1fr;
|
|
11712
|
-
}
|
|
11713
|
-
.plan-list {
|
|
11714
|
-
max-height: 130px;
|
|
11715
|
-
min-height: 130px;
|
|
11716
|
-
overflow-y: auto;
|
|
11717
|
-
padding-right: 6px;
|
|
11718
|
-
}
|
|
11719
|
-
.plan-list::-webkit-scrollbar {
|
|
11720
|
-
width: 3px;
|
|
11721
|
-
background-color: #F5F5F5;
|
|
11722
|
-
}
|
|
11723
|
-
.plan-list::-webkit-scrollbar-thumb {
|
|
11724
|
-
background-color: #35254D;
|
|
11725
|
-
}
|
|
11726
|
-
div#cvv {
|
|
11727
|
-
border-top-left-radius: 0;
|
|
11728
|
-
border-bottom-left-radius: 0;
|
|
11729
|
-
border-top: 0;
|
|
11730
|
-
border-bottom: 0;
|
|
11731
|
-
border-right: 0;
|
|
11732
|
-
}
|
|
11733
|
-
div#exp_year {
|
|
11734
|
-
height: 36px;
|
|
11735
|
-
width: calc(100% + 1px);
|
|
11736
|
-
border-radius: 0;
|
|
11737
|
-
border-top: 0;
|
|
11738
|
-
border-bottom: 0;
|
|
11739
|
-
border-right: 1px solid #dee2e6;
|
|
11740
|
-
}
|
|
11741
|
-
div#exp_month {
|
|
11742
|
-
width: calc(100% + 1px);
|
|
11743
|
-
border-top-right-radius: 0;
|
|
11744
|
-
border-bottom-right-radius: 0;
|
|
11745
|
-
border: 0;
|
|
11746
|
-
border-right: 1px solid #dee2e6;
|
|
11747
|
-
}
|
|
11748
|
-
.exp-date-year-container .form-group {
|
|
11749
|
-
flex: 1;
|
|
11750
|
-
}
|
|
11751
|
-
.input-main-wrap-frac{
|
|
11752
|
-
margin:0px !important;
|
|
11753
|
-
padding:0px !important;
|
|
11754
|
-
}
|
|
11755
|
-
.toggle-num-wrapper.toggle-num-wrapper-new {
|
|
11756
|
-
border: 1px solid #dee2e6 !important;
|
|
11757
|
-
border-radius: 0.375rem !important;
|
|
11758
|
-
background-color: #F6F6F7;
|
|
11759
|
-
box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
|
|
11760
|
-
}
|
|
11761
|
-
.toggle-num-wrapper-new div#card_number {
|
|
11762
|
-
padding: 0px 10px;
|
|
11763
|
-
border: none;
|
|
11764
|
-
border-bottom: 1px solid #dee2e6;
|
|
11765
|
-
}
|
|
11766
|
-
.toggle-num-wrapper-new .card-crdi.card-expiry-new {
|
|
11767
|
-
padding: 0px 10px;
|
|
11768
|
-
}
|
|
11769
|
-
.toggle-num-wrapper-new .input-main-wrap-frac {
|
|
11770
|
-
height: 36px;
|
|
11771
|
-
}
|
|
11772
|
-
.toggle-num-wrapper-new:focus {
|
|
11773
|
-
border: 1px solid #004eab !important;
|
|
11774
|
-
}
|
|
11775
|
-
.frac-card-title-main {
|
|
11776
|
-
display: flex;
|
|
11777
|
-
align-items: start;
|
|
11778
|
-
gap: 4px;
|
|
11779
|
-
flex-direction: column;
|
|
11780
|
-
}
|
|
11781
|
-
.parent-pay-container {
|
|
11782
|
-
padding: 24px;
|
|
11783
|
-
background-color: #ffffff !important;
|
|
11784
|
-
border-radius: 15px;
|
|
11785
|
-
min-width: 300px;
|
|
11786
|
-
}
|
|
11787
|
-
|
|
11788
|
-
|
|
11789
|
-
${extraCustomCSS}
|
|
11790
|
-
|
|
11791
|
-
` });
|
|
11792
|
-
}
|
|
11793
|
-
|
|
11794
|
-
// src/app/components/Skysystemz/EmbeddedCheckout.tsx
|
|
11795
|
-
import { Fragment as Fragment21, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
11796
|
-
var EmbeddedCheckout = ({
|
|
11797
|
-
amount,
|
|
11798
|
-
bankAmount,
|
|
11799
|
-
submitBtnText = "Pay",
|
|
11800
|
-
session_token,
|
|
11801
|
-
customerId,
|
|
11802
|
-
callback,
|
|
11803
|
-
merchantName = "merchant",
|
|
11804
|
-
isPreAuth,
|
|
11805
|
-
surcharge = "0",
|
|
11806
|
-
submitBtnClass,
|
|
11807
|
-
submitBtnIcon,
|
|
11808
|
-
isRequest,
|
|
11809
|
-
pass_fee,
|
|
11810
|
-
pass_fee_amount,
|
|
11811
|
-
require3ds = false,
|
|
11812
|
-
autoTrigger = false,
|
|
11813
|
-
isPartial,
|
|
11814
|
-
bankSurcharge,
|
|
11815
|
-
partialRef,
|
|
11816
|
-
onSubmit,
|
|
11817
|
-
onLoad,
|
|
11818
|
-
customCSS: customCSS2
|
|
11819
|
-
}) => {
|
|
11820
|
-
const [show, setShow] = useState12(false);
|
|
11821
|
-
const [loading, setLoading] = useState12(false);
|
|
11822
|
-
const [childHandleClose, setChildHandleClose] = useState12(() => () => {
|
|
11823
|
-
});
|
|
11824
|
-
const [orderGuid, setOrderGuid] = useState12(null);
|
|
11825
|
-
const [remainingAmount, setRemainingAmount] = useState12(null);
|
|
11826
|
-
const initialCommonProps = useMemo2(
|
|
11827
|
-
() => ({
|
|
11828
|
-
amount,
|
|
11829
|
-
bankAmount,
|
|
11830
|
-
submitBtnText,
|
|
11831
|
-
session_token,
|
|
11832
|
-
customerId,
|
|
11833
|
-
callback,
|
|
11834
|
-
merchantName,
|
|
11835
|
-
isPreAuth,
|
|
11836
|
-
surcharge,
|
|
11837
|
-
submitBtnClass,
|
|
11838
|
-
submitBtnIcon,
|
|
11839
|
-
isRequest,
|
|
11840
|
-
pass_fee,
|
|
11841
|
-
pass_fee_amount,
|
|
11842
|
-
require3ds,
|
|
11843
|
-
autoTrigger,
|
|
11844
|
-
setShow,
|
|
11845
|
-
setHandleCloseRef: setChildHandleClose,
|
|
11846
|
-
isPartial,
|
|
11847
|
-
bankSurcharge,
|
|
11848
|
-
partialRef
|
|
11849
|
-
}),
|
|
11850
|
-
[
|
|
11851
|
-
amount,
|
|
11852
|
-
bankAmount,
|
|
11853
|
-
submitBtnText,
|
|
11854
|
-
session_token,
|
|
11855
|
-
customerId,
|
|
11856
|
-
callback,
|
|
11857
|
-
merchantName,
|
|
11858
|
-
isPreAuth,
|
|
11859
|
-
surcharge,
|
|
11860
|
-
submitBtnClass,
|
|
11861
|
-
submitBtnIcon,
|
|
11862
|
-
isRequest,
|
|
11863
|
-
pass_fee,
|
|
11864
|
-
pass_fee_amount,
|
|
11865
|
-
require3ds,
|
|
11866
|
-
autoTrigger,
|
|
11867
|
-
isPartial,
|
|
11868
|
-
bankSurcharge,
|
|
11869
|
-
partialRef
|
|
11870
|
-
]
|
|
11871
|
-
);
|
|
11872
|
-
const [commonProps, setCommonProps] = useState12(initialCommonProps);
|
|
11873
|
-
useEffect17(() => {
|
|
11874
|
-
if (show) {
|
|
11875
|
-
setCommonProps(initialCommonProps);
|
|
11876
|
-
}
|
|
11877
|
-
}, [show, initialCommonProps]);
|
|
11878
|
-
const getskyosOrderDetails = async () => {
|
|
11879
|
-
var _a;
|
|
11880
|
-
setLoading(true);
|
|
11881
|
-
try {
|
|
11882
|
-
const res = await axios11.get(
|
|
11883
|
-
`${masterBaseUrl}api/v1/gateway/get-order-details/${session_token}`,
|
|
11884
|
-
{ params: { isPartial, partialRef } }
|
|
11885
|
-
);
|
|
11886
|
-
if ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.result) {
|
|
11887
|
-
const data = res.data.data;
|
|
11888
|
-
if (data == null ? void 0 : data.orderGuid) {
|
|
11889
|
-
setOrderGuid(data == null ? void 0 : data.orderGuid);
|
|
11890
|
-
setRemainingAmount(data == null ? void 0 : data.remainingAmount);
|
|
11891
|
-
}
|
|
11892
|
-
setCommonProps((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
11893
|
-
amount: data.amount,
|
|
11894
|
-
pass_fee_amount: data.pass_fee_amount,
|
|
11895
|
-
pass_fee: data.pass_fee
|
|
11896
|
-
}));
|
|
11897
|
-
}
|
|
11898
|
-
} catch (error) {
|
|
11899
|
-
console.log("error while getting skyosorderdeatils", error);
|
|
11900
|
-
} finally {
|
|
11901
|
-
setLoading(false);
|
|
11902
|
-
}
|
|
11903
|
-
};
|
|
11904
|
-
useEffect17(() => {
|
|
11905
|
-
if (show && isPartial && partialRef) {
|
|
11906
|
-
getskyosOrderDetails();
|
|
11907
|
-
}
|
|
11908
|
-
}, [show, isPartial, partialRef]);
|
|
11909
|
-
console.log(onLoad, "onLoad");
|
|
11910
|
-
return /* @__PURE__ */ jsxs22(Fragment21, { children: [
|
|
11911
|
-
/* @__PURE__ */ jsx37("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
|
|
11912
|
-
/* @__PURE__ */ jsx37(DataScript, {}),
|
|
11913
|
-
/* @__PURE__ */ jsx37(FractalTokenizerScript, {}),
|
|
11914
|
-
/* @__PURE__ */ jsx37(SkyChargewidgetstyles, {}),
|
|
11915
|
-
/* @__PURE__ */ jsx37(CardBankRadioStyles, {}),
|
|
11916
|
-
/* @__PURE__ */ jsx37(CustomModal2styles_default, {}),
|
|
11917
|
-
/* @__PURE__ */ jsx37(DataCapScriptLoader, {}),
|
|
11918
|
-
/* @__PURE__ */ jsx37(EmbeddedCheckoutStyles, { extraCustomCSS: customCSS2 }),
|
|
11919
|
-
!autoTrigger && /* @__PURE__ */ jsxs22("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
|
|
11048
|
+
return /* @__PURE__ */ jsxs20(Fragment19, { children: [
|
|
11049
|
+
/* @__PURE__ */ jsx33("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
|
|
11050
|
+
/* @__PURE__ */ jsx33(DataScript, {}),
|
|
11051
|
+
/* @__PURE__ */ jsx33(FractalTokenizerScript, {}),
|
|
11052
|
+
/* @__PURE__ */ jsx33(SkyChargewidgetstyles, {}),
|
|
11053
|
+
/* @__PURE__ */ jsx33(CardBankRadioStyles, {}),
|
|
11054
|
+
/* @__PURE__ */ jsx33(CustomModal2styles_default, {}),
|
|
11055
|
+
/* @__PURE__ */ jsx33(DataCapScriptLoader, {}),
|
|
11056
|
+
!autoTrigger && /* @__PURE__ */ jsxs20("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
|
|
11920
11057
|
submitBtnText,
|
|
11921
11058
|
submitBtnIcon
|
|
11922
11059
|
] }),
|
|
11923
|
-
!autoTrigger ? /* @__PURE__ */
|
|
11060
|
+
!autoTrigger ? /* @__PURE__ */ jsx33(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx33(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx33(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
|
|
11924
11061
|
] });
|
|
11925
11062
|
};
|
|
11926
11063
|
export {
|
|
11927
11064
|
AddCardEasyPay as AddCard,
|
|
11928
11065
|
CardOnFile,
|
|
11929
|
-
EmbeddedCheckout,
|
|
11930
11066
|
GetPaymentPage,
|
|
11931
11067
|
PartialPayment,
|
|
11932
11068
|
PaymentWidget,
|