@fractalpay/fractalpay-next-dev 0.0.253 → 0.0.255

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.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.253",
42
+ version: "0.0.255",
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
- .loader-light {
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(6.5px); /* Blur effect */
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 = (_a) => {
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: `loader-${intensity}`, children: /* @__PURE__ */ jsxs("div", { className: "lds-ellipsis", children: [
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,65 +218,41 @@ 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") {
239
- masterBaseUrl = "https://dev-sky-node.fractalpay.com/";
240
- baseUrl = "https://dev-widget.fractalpay.com/";
221
+ baseUrl = "http://192.168.1.51:8082/";
222
+ masterBaseUrl = "http://192.168.1.51: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";
244
- applePayMerchantId = "fractal";
245
- googlePayMerchantId = "12345678901234567890";
246
- googlePayEnvironment = "TEST";
247
- googlePayGatewayMerchantId = "fractal";
248
226
  } else if (name === "@fractalpay/fractalpay-next-test") {
249
227
  masterBaseUrl = "https://testapi.fractalpay.com/";
250
228
  baseUrl = "https://staging-widget.fractalpay.com/";
251
229
  fractalGatewayUrl = "https://api-dev.merchant-trends.com/";
252
230
  datacapUrl = "https://token-cert.dcap.com/v1/client";
253
231
  threedsSecurePublicKey = "pk_test_51RH5Wc2SlJvyNZ80hpUDy88r4rVdpijfKbNaWaUyQEE6rOrPmG2JQyAj7G5amBD5z5daC56WaeT4jfNhrrPcGOEP00UyKu6AOw";
254
- applePayMerchantId = "fractal";
255
- googlePayMerchantId = "12345678901234567890";
256
- googlePayEnvironment = "TEST";
257
- googlePayGatewayMerchantId = "fractal";
258
232
  } else if (name === "@fractalpay/fractalpay-next-testprod") {
259
233
  masterBaseUrl = "https://sky-node-prod.fractalpay.com/";
260
234
  baseUrl = "https://widget-prod.fractalpay.com/";
261
235
  fractalGatewayUrl = "https://api.merchant-trends.com/";
262
236
  datacapUrl = "https://token.dcap.com/v1/client";
263
237
  threedsSecurePublicKey = "pk_live_51RH5WXCZ90rBGeaYwqmjWqgUmudTgxL6uKOE1keu617jvRx9OvW2ke6zGf6SKgv4ixsBLcIPQ4sQIEhp8MgBX39500CqULxOPB";
264
- applePayMerchantId = "fractal";
265
- googlePayMerchantId = "BCR2DN4T6OC2TCQH";
266
- googlePayEnvironment = "PRODUCTION";
267
- googlePayGatewayMerchantId = "fractal";
268
238
  } else if (name === "@fractalpay/fractalpay-next") {
269
239
  masterBaseUrl = "https://api.fractalpay.com/";
270
240
  baseUrl = "https://widget.fractalpay.com/";
271
241
  fractalGatewayUrl = "https://api.merchant-trends.com/";
272
242
  datacapUrl = "https://token.dcap.com/v1/client";
273
243
  threedsSecurePublicKey = "pk_live_51RH5WXCZ90rBGeaYwqmjWqgUmudTgxL6uKOE1keu617jvRx9OvW2ke6zGf6SKgv4ixsBLcIPQ4sQIEhp8MgBX39500CqULxOPB";
274
- applePayMerchantId = "fractal";
275
- googlePayMerchantId = "BCR2DN4T6OC2TCQH";
276
- googlePayEnvironment = "PRODUCTION";
277
- googlePayGatewayMerchantId = "fractal";
278
244
  } else {
279
245
  baseUrl = "http://localhost:8082/";
280
246
  masterBaseUrl = "http://localhost:8081/";
281
247
  fractalGatewayUrl = "https://api-dev.merchant-trends.com/";
282
248
  datacapUrl = "https://token-cert.dcap.com/v1/client";
283
249
  threedsSecurePublicKey = "pk_test_51RH5Wc2SlJvyNZ80hpUDy88r4rVdpijfKbNaWaUyQEE6rOrPmG2JQyAj7G5amBD5z5daC56WaeT4jfNhrrPcGOEP00UyKu6AOw";
284
- applePayMerchantId = "fractal";
285
- googlePayMerchantId = "12345678901234567890";
286
- googlePayEnvironment = "TEST";
287
- googlePayGatewayMerchantId = "fractal";
288
250
  }
289
251
  var masterBaseUrl;
290
252
  var baseUrl;
291
253
  var fractalGatewayUrl;
292
254
  var datacapUrl;
293
255
  var threedsSecurePublicKey;
294
- var applePayMerchantId;
295
- var googlePayMerchantId;
296
- var googlePayEnvironment;
297
- var googlePayGatewayMerchantId;
298
256
 
299
257
  // src/app/components/Errortext.ts
300
258
  var ErrorText = {
@@ -2950,7 +2908,7 @@ function ErrorCardMszStyle() {
2950
2908
 
2951
2909
  // src/app/components/ErrorCardMessage/ErrorCardMessage.tsx
2952
2910
  import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
2953
- var ErrorCardMessage = ({ onClose, error, autoTrigger = false }) => {
2911
+ var ErrorCardMessage = ({ onClose, error }) => {
2954
2912
  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
2955
2913
  /* @__PURE__ */ jsx12(ErrorCardMszStyle, {}),
2956
2914
  /* @__PURE__ */ jsx12("div", { className: "card-error", children: /* @__PURE__ */ jsx12("div", { className: "payment-error-container", children: /* @__PURE__ */ jsxs6("div", { className: "error-icon", children: [
@@ -2959,7 +2917,7 @@ var ErrorCardMessage = ({ onClose, error, autoTrigger = false }) => {
2959
2917
  /* @__PURE__ */ jsx12("div", { className: "payment-error-text", children: error }),
2960
2918
  /* @__PURE__ */ jsx12("div", { className: "thank-you-text", children: "Try again later " })
2961
2919
  ] }),
2962
- !autoTrigger && /* @__PURE__ */ jsx12("div", { className: "error-btn-div", children: /* @__PURE__ */ jsx12("button", { onClick: onClose, children: "OK" }) })
2920
+ /* @__PURE__ */ jsx12("div", { className: "error-btn-div", children: /* @__PURE__ */ jsx12("button", { onClick: onClose, children: "OK" }) })
2963
2921
  ] }) }) })
2964
2922
  ] });
2965
2923
  };
@@ -2976,28 +2934,14 @@ var socketClient_default = socket;
2976
2934
 
2977
2935
  // src/app/components/Atoms/CardBankRadio/CardBankRadio.tsx
2978
2936
  import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
2979
- var CardBankRadio = (_a) => {
2980
- var _b = _a, { skydesign = false, savingsText } = _b, props = __objRest(_b, ["skydesign", "savingsText"]);
2981
- const savingsBadgeClass = `frac-saving-badge ${skydesign ? "frac-saving-badge-corner" : "frac-saving-badge-corner frac-saving-badge-with-radio"}`;
2982
- return /* @__PURE__ */ jsx13(Fragment7, { children: /* @__PURE__ */ jsx13(
2937
+ var CardBankRadio = (props) => {
2938
+ return /* @__PURE__ */ jsx13(Fragment7, { children: /* @__PURE__ */ jsxs7(
2983
2939
  "div",
2984
2940
  {
2985
2941
  className: `frac-card-bank-radio ${props.activetab === props.value ? "frac-active" : ""}`,
2986
2942
  onClick: () => props.onChange(props.value),
2987
2943
  role: "radio",
2988
- children: skydesign ? /* @__PURE__ */ jsxs7(Fragment7, { children: [
2989
- /* @__PURE__ */ jsxs7("div", { className: "frac-card-title-main", children: [
2990
- /* @__PURE__ */ jsxs7("div", { className: "box-inner-card-text", children: [
2991
- /* @__PURE__ */ jsx13("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
2992
- /* @__PURE__ */ jsx13("div", { className: "frac-card-label-text", children: props.label })
2993
- ] }),
2994
- /* @__PURE__ */ jsx13("div", { className: "frac-card-label", children: /* @__PURE__ */ jsx13("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) }) })
2995
- ] }),
2996
- savingsText ? /* @__PURE__ */ jsx13("button", { type: "button", className: savingsBadgeClass, children: savingsText }) : null,
2997
- /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13("input", { name: "paymenttype", checked: props.activetab === props.value, type: "hidden", value: props.value, onChange: (e) => {
2998
- props.onChange(e.target.value);
2999
- } }) })
3000
- ] }) : /* @__PURE__ */ jsxs7(Fragment7, { children: [
2944
+ children: [
3001
2945
  /* @__PURE__ */ jsxs7("div", { className: "frac-card-title-main", children: [
3002
2946
  /* @__PURE__ */ jsx13("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
3003
2947
  /* @__PURE__ */ jsxs7("div", { className: "frac-card-label", children: [
@@ -3005,11 +2949,10 @@ var CardBankRadio = (_a) => {
3005
2949
  /* @__PURE__ */ jsx13("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) })
3006
2950
  ] })
3007
2951
  ] }),
3008
- savingsText ? /* @__PURE__ */ jsx13("button", { type: "button", className: savingsBadgeClass, children: savingsText }) : null,
3009
2952
  /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13("input", { name: "paymenttype", checked: props.activetab === props.value, type: "radio", value: props.value, onChange: (e) => {
3010
2953
  props.onChange(e.target.value);
3011
2954
  } }) })
3012
- ] })
2955
+ ]
3013
2956
  }
3014
2957
  ) });
3015
2958
  };
@@ -3034,7 +2977,6 @@ function CardBankRadioStyles({}) {
3034
2977
  justify-content: space-between;
3035
2978
  align-items: center;
3036
2979
  align-self: stretch;
3037
- position: relative;
3038
2980
  }
3039
2981
 
3040
2982
  input[type="radio"] {
@@ -3092,28 +3034,6 @@ function CardBankRadioStyles({}) {
3092
3034
  .frac-card-bank-radio.frac-active {
3093
3035
  background: #F6F6F7;
3094
3036
  }
3095
-
3096
- .frac-saving-badge {
3097
- padding: 1px 7px !important;
3098
- border: 1px solid #9ad7ab;
3099
- border-radius: 999px;
3100
- background: #e8f8ec;
3101
- color: #1e6a34;
3102
- font-size: 10px;
3103
- font-weight: 600;
3104
- line-height: 15px;
3105
- pointer-events: none;
3106
- }
3107
-
3108
- .frac-saving-badge-corner {
3109
- position: absolute;
3110
- top: 8px;
3111
- right: 10px;
3112
- }
3113
-
3114
- .frac-saving-badge-with-radio {
3115
- right: 34px;
3116
- }
3117
3037
  ` });
3118
3038
  }
3119
3039
 
@@ -3291,7 +3211,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
3291
3211
  {
3292
3212
  id: "card_number",
3293
3213
  className: "form-control card-number-new",
3294
- style: { height: `${isSky ? "36px" : "46px"}` }
3214
+ style: { height: `${isSky ? "36px" : "46px"}`, display: "inline-block" }
3295
3215
  }
3296
3216
  ),
3297
3217
  /* @__PURE__ */ jsx17("div", { className: "card-crdi card-expiry-new", children: /* @__PURE__ */ jsxs10("div", { className: "exp-date-year-container", children: [
@@ -3300,7 +3220,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
3300
3220
  {
3301
3221
  id: "exp_month",
3302
3222
  className: "form-control required card-cvv-in",
3303
- style: { height: "36px", display: "block", minHeight: "36px" }
3223
+ style: { height: "36px", display: "inline-block" }
3304
3224
  }
3305
3225
  ) }),
3306
3226
  /* @__PURE__ */ jsx17("div", { className: "exp-year form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
@@ -3308,7 +3228,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
3308
3228
  {
3309
3229
  id: "exp_year",
3310
3230
  className: "form-control required card-cvv-in",
3311
- style: { height: "36px", display: "block", minHeight: "36px" }
3231
+ style: { height: "36px", display: "inline-block" }
3312
3232
  }
3313
3233
  ) }),
3314
3234
  /* @__PURE__ */ jsx17("div", { className: "security-digit form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
@@ -3316,7 +3236,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
3316
3236
  {
3317
3237
  id: "cvv",
3318
3238
  className: "form-control card-cvv-in required",
3319
- style: { height: "36px", display: "block", minHeight: "36px" }
3239
+ style: { height: "36px", display: "inline-block" }
3320
3240
  }
3321
3241
  ) })
3322
3242
  ] }) })
@@ -3439,8 +3359,7 @@ var DataCapFields = ({
3439
3359
  isOpen,
3440
3360
  tokenKey,
3441
3361
  setLoader,
3442
- isAddCard,
3443
- isEmbedded
3362
+ isAddCard
3444
3363
  }) => {
3445
3364
  const iframeId = "datacap-iframe";
3446
3365
  const resolverRef = useRef2(null);
@@ -3466,20 +3385,6 @@ var DataCapFields = ({
3466
3385
 
3467
3386
  `;
3468
3387
  }
3469
- if (isEmbedded) {
3470
- customCSS += `
3471
-
3472
- input {
3473
- background-color: #F6F6F7;
3474
- box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1;
3475
- }
3476
-
3477
- select {
3478
- background-color: #F6F6F7;
3479
- box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
3480
- }
3481
- `;
3482
- }
3483
3388
  const initialize = async () => {
3484
3389
  setLoader == null ? void 0 : setLoader(true);
3485
3390
  setIframeReady(false);
@@ -3511,18 +3416,13 @@ var DataCapFields = ({
3511
3416
  };
3512
3417
  initialize();
3513
3418
  }, [isOpen, tokenKey]);
3514
- useEffect7(() => {
3515
- window.requestDcToken = () => {
3516
- return new Promise((resolve, reject) => {
3517
- setLoader == null ? void 0 : setLoader(true);
3518
- resolverRef.current = { resolve, reject };
3519
- });
3520
- };
3521
- return () => {
3522
- delete window.requestDcToken;
3523
- };
3524
- }, []);
3525
- 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
+ };
3526
3426
  return /* @__PURE__ */ jsx18(
3527
3427
  "iframe",
3528
3428
  {
@@ -3784,7 +3684,7 @@ function GetPaymentPage(props) {
3784
3684
  }
3785
3685
  }
3786
3686
  if (!isBankConsentChecked) {
3787
- setErrorBankConsent("Above consent is requied");
3687
+ setErrorBankConsent("Above consent is required");
3788
3688
  }
3789
3689
  setAchError(errors);
3790
3690
  return Object.keys(errors).length > 0 || !isBankConsentChecked;
@@ -7700,7 +7600,7 @@ function PartialPayment(props) {
7700
7600
  }
7701
7601
  }
7702
7602
  if (!isBankConsentChecked) {
7703
- setErrorBankConsent("Above consent is requied");
7603
+ setErrorBankConsent("Above consent is required");
7704
7604
  }
7705
7605
  setAchError(errors);
7706
7606
  return Object.keys(errors).length > 0 || !isBankConsentChecked;
@@ -8694,7 +8594,7 @@ function PartialPayment(props) {
8694
8594
  }
8695
8595
 
8696
8596
  // src/app/components/Skysystemz/PayButtonWithForm.tsx
8697
- import { useEffect as useEffect19, useState as useState12, useMemo } from "react";
8597
+ import { useEffect as useEffect16, useState as useState11, useMemo } from "react";
8698
8598
 
8699
8599
  // src/app/components/Skysystemz/SkyChargewidgetstyles.tsx
8700
8600
  import { jsx as jsx29 } from "react/jsx-runtime";
@@ -8930,17 +8830,6 @@ function SkyChargewidgetstyles() {
8930
8830
  text-align : left !important;
8931
8831
  text-transform: uppercase !important;
8932
8832
  }
8933
- .frac-form .frac-fee-text{
8934
- display: block;
8935
- padding: 10px 0 4px;
8936
- font-family: 'IBM Plex Mono', monospace !important;
8937
- color: #727272 !important;
8938
- font-size: 12px;
8939
- line-height: 1.4;
8940
- }
8941
- .frac-form .frac-fee-amount{
8942
- color: #c62828 !important;
8943
- }
8944
8833
  .form-control-frac{
8945
8834
  display: block;
8946
8835
  width: 100%;
@@ -8975,7 +8864,7 @@ function SkyChargewidgetstyles() {
8975
8864
  }
8976
8865
  .exp-date-year-container .form-group {
8977
8866
  flex: 1;
8978
- padding-left:.75rem !important;
8867
+ padding-left:.75rem;
8979
8868
  }
8980
8869
  .card-crdi {
8981
8870
  display: flex;
@@ -8992,7 +8881,7 @@ function SkyChargewidgetstyles() {
8992
8881
  }
8993
8882
  .exp-date-year-container .form-group-frac{
8994
8883
  flex:1;
8995
- // padding: 0px !important
8884
+ padding: 0px !important
8996
8885
 
8997
8886
  }
8998
8887
 
@@ -9493,54 +9382,13 @@ margin:0px !important;
9493
9382
  padding:0px !important;
9494
9383
  }
9495
9384
 
9496
-
9497
- .toggle-num-wrapper-new div#card_number {
9498
- display: block !important;
9499
- }
9500
- .toggle-num-wrapper-new .input-main-wrap-frac {
9501
- height: 36px;
9502
- }
9503
- .toggle-num-wrapper-new:focus {
9504
- border: 1px solid #004eab !important;
9505
- }
9506
- .frac-or {
9507
- position: relative;
9508
- margin: 15px 0;
9509
- text-align: center;
9510
- }
9511
- .frac-or:before {
9512
- position: absolute;
9513
- left: 0;
9514
- transform: translateY(-50%);
9515
- top: 50%;
9516
- height: 1px;
9517
- width: 100%;
9518
- background: #E0DFE2;
9519
- content: '';
9520
- z-index: 1;
9521
- }
9522
- .frac-or span {
9523
- background: transparent;
9524
- font-size: 13px;
9525
- margin: 0 auto;
9526
- width: 15px;
9527
- font-weight: 500;
9528
- text-transform: uppercase;
9529
- color: #727272;
9530
- padding: 3px;
9531
- position: relative;
9532
- z-index: 3;
9533
- }
9534
- button#gpay-button-online-api-id{
9535
- width: 100%;
9536
- }
9537
-
9385
+
9538
9386
 
9539
9387
  ` });
9540
9388
  }
9541
9389
 
9542
9390
  // src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
9543
- import { useCallback, useEffect as useEffect18, useRef as useRef12, useState as useState11 } from "react";
9391
+ import { useCallback, useEffect as useEffect15, useRef as useRef10, useState as useState10 } from "react";
9544
9392
  import axios9 from "axios";
9545
9393
  import Swal5 from "sweetalert2";
9546
9394
 
@@ -9681,597 +9529,109 @@ function CheckoutWrapper({ clientSecret, onSuccess, showLoader, setError, sessio
9681
9529
  // src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
9682
9530
  import { IoArrowBack as IoArrowBack4 } from "react-icons/io5";
9683
9531
  import { NumericFormat as NumericFormat2 } from "react-number-format";
9684
-
9685
- // src/app/components/ErrorCardMessage/ErrorCardOverlaystyle.tsx
9686
- import { jsx as jsx32 } from "react/jsx-runtime";
9687
- function ErrorCardOverlayStyle() {
9688
- return /* @__PURE__ */ jsx32("style", { children: `
9689
- .card-error-overlay .logo-container {
9690
- display: flex;
9691
- justify-content: center;
9692
- align-items: center;
9693
- margin-bottom: -50px; /* Adjust this to overlap the content */
9694
- z-index: 10;
9695
- }
9696
-
9697
- .card-error-overlay .client-logo {
9698
- max-width: 100px;
9699
- height: auto;
9700
- object-fit: contain;
9701
- display: block;
9702
- }
9703
-
9704
-
9705
- .card-error-overlay .error-icon-overlay {
9706
- display: flex;
9707
- flex-direction: column;
9708
- align-items: center;
9709
- gap: 12px;
9710
- min-height: 116px;
9711
- z-index: 2;
9712
- }
9713
-
9714
- .card-error-overlay .circle {
9715
- width: 50px;
9716
- height: 50px;
9717
- border: 1px solid red;
9718
- border-radius: 50%;
9719
- display: flex;
9720
- justify-content: center;
9721
- align-items: center;
9722
- margin-bottom:20px
9723
- }
9724
-
9725
- .card-error-overlay .circle .fa-times {
9726
- font-size: 30px;
9727
- color: red;
9728
- }
9729
-
9730
- .card-error-overlay .error-text-overlay {
9731
- display: flex;
9732
- flex-direction: column;
9733
- justify-content: center;
9734
- align-items: center;
9735
- gap: 4px;
9736
- // width: 227px;
9737
- }
9738
-
9739
- .card-error-overlay .payment-error-text-overlay {
9740
- font-family: 'Inter', sans-serif;
9741
- font-weight: 500;
9742
- font-size: 18px;
9743
- line-height: 21px;
9744
- text-align: center;
9745
- letter-spacing: -0.02em;
9746
- color: #161616;
9747
- }
9748
-
9749
- .card-error-overlay .thank-you-text-overlay {
9750
- font-family: 'Inter', sans-serif;
9751
- font-weight: 500;
9752
- font-size: 16px;
9753
- line-height: 18px;
9754
- text-align: center;
9755
- letter-spacing: -0.02em;
9756
- color: #161616 !important;
9757
- opacity: 0.5;
9758
- padding-top:10px
9759
- }
9760
-
9761
- .card-error-overlay .error-btn-div-overlay{
9762
- padding-top:20px;
9763
- width: 100%;
9764
-
9765
- }
9766
- .card-error-overlay .error-btn-div-overlay button{
9767
- outline: 0;
9768
- height: 46px;
9769
- font-size: 16px;
9770
- background: #727272;
9771
- border: none;
9772
- display: block;
9773
- color: #fff;
9774
- width: 100%;
9775
- border-radius: 180px;
9776
- margin: 10px 0;
9777
- text-decoration: none;
9778
- }
9779
- .card-error-overlay .error-btn-div-overlay button:hover, .card-error-overlay .error-btn-div-overlay button:focus {
9780
- background: #222;
9781
- color: #fff;
9782
- cursor: pointer;
9783
- }
9784
- .payment-error-container-overlay {
9785
- width: fit-content;
9786
- position: relative;
9787
- top: 50%;
9788
- left: 50%;
9789
- transform: translate(-50%, -50%);
9790
- background: rgba(255, 255, 255, 0.15);
9791
- backdrop-filter: blur(12px);
9792
- -webkit-backdrop-filter: blur(12px);
9793
- border-radius: 12px;
9794
- z-index: 11111;
9795
- max-width: 240px;
9796
- min-width: 224px;
9797
- padding: 20px;
9798
- margin-left: 17px !important;
9799
- }
9800
- .card-error-overlay {
9801
- position: absolute;
9802
- top: 0;
9803
- left: 0;
9804
- width: 100%;
9805
- height: 100%;
9806
- background: rgb(87 87 87 / 15%);
9807
- backdrop-filter: blur(2px);
9808
- -webkit-backdrop-filter: blur(12px);
9809
- z-index: 1111;
9810
- }
9811
- ` });
9812
- }
9813
-
9814
- // src/app/components/ErrorCardMessage/ErrorCardOverlay.tsx
9815
- import { Fragment as Fragment18, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
9816
- var ErrorCardOverlay = ({ onClose, error, autoTrigger = false }) => {
9817
- return /* @__PURE__ */ jsxs19(Fragment18, { children: [
9818
- /* @__PURE__ */ jsx33(ErrorCardOverlayStyle, {}),
9819
- /* @__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: [
9820
- /* @__PURE__ */ jsx33("div", { className: "circle", children: /* @__PURE__ */ jsx33("i", { className: "fa fa-times", "aria-hidden": "true" }) }),
9821
- /* @__PURE__ */ jsxs19("div", { className: "error-text-overlay", children: [
9822
- /* @__PURE__ */ jsx33("div", { className: "payment-error-text-overlay", children: error }),
9823
- /* @__PURE__ */ jsx33("div", { className: "thank-you-text-overlay", children: "Try again later " })
9824
- ] }),
9825
- !autoTrigger && /* @__PURE__ */ jsx33("div", { className: "error-btn-div-overlay", children: /* @__PURE__ */ jsx33("button", { onClick: onClose, children: "OK" }) })
9826
- ] }) }) })
9827
- ] });
9828
- };
9829
- var ErrorCardOverlay_default = ErrorCardOverlay;
9830
-
9831
- // src/app/components/Atoms/Googlepay/Googlepay.tsx
9832
- import { useRef as useRef10 } from "react";
9833
-
9834
- // src/app/components/Atoms/Googlepay/GooglePayScriptLoader.tsx
9835
- import { useEffect as useEffect15 } from "react";
9836
- var googlePayScriptLoaded = false;
9837
- var GooglePayScriptLoader = ({
9838
- onLoad
9839
- }) => {
9840
- useEffect15(() => {
9841
- if (googlePayScriptLoaded) {
9842
- onLoad == null ? void 0 : onLoad();
9843
- return;
9844
- }
9845
- const existingScript = document.querySelector(
9846
- `script[src="https://pay.google.com/gp/p/js/pay.js"]`
9847
- );
9848
- if (!existingScript) {
9849
- const script2 = document.createElement("script");
9850
- script2.src = "https://pay.google.com/gp/p/js/pay.js";
9851
- script2.async = true;
9852
- script2.onload = () => {
9853
- console.log("\u2705 Google Pay script loaded");
9854
- googlePayScriptLoaded = true;
9855
- console.log("google:", window.google);
9856
- onLoad == null ? void 0 : onLoad();
9857
- };
9858
- script2.onerror = (err) => {
9859
- console.error("\u274C Google Pay script failed", err);
9860
- };
9861
- document.head.appendChild(script2);
9862
- } else {
9863
- googlePayScriptLoaded = true;
9864
- onLoad == null ? void 0 : onLoad();
9865
- }
9866
- }, []);
9867
- return null;
9868
- };
9869
-
9870
- // src/app/components/Atoms/Googlepay/Googlepay.tsx
9871
- import { Fragment as Fragment19, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
9872
- function GooglePayComponent({
9873
- amount,
9874
- googlePayEnvironment: googlePayEnvironment2,
9875
- googlePayGatewayMerchantId: googlePayGatewayMerchantId2,
9876
- googlePayMerchantId: googlePayMerchantId2,
9877
- googlePayMerchantName,
9878
- require3ds = false,
9879
- completeFractalFlow,
9880
- setLoading
9881
- }) {
9882
- const containerRef = useRef10(null);
9883
- const paymentsClientRef = useRef10(null);
9884
- const baseRequest = {
9885
- apiVersion: 2,
9886
- apiVersionMinor: 0
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;
9535
+ const hasRunRef = useRef10(false);
9536
+ const cardListRunRef = useRef10(false);
9537
+ const threeDSContainerRef = useRef10(null);
9538
+ const [activetab, setActive] = useState10("card");
9539
+ const [activeList, setActiveList] = useState10("card");
9540
+ const [cardData, setCardData] = useState10();
9541
+ const [cardError, setCardError] = useState10({});
9542
+ const [achData, setAchData] = useState10();
9543
+ const [achError, setAchError] = useState10({});
9544
+ const [saveACHinfo, setSaveACHinfo] = useState10(false);
9545
+ const [saveCardInfo, setSaveCardInfo] = useState10(false);
9546
+ const [error, setError] = useState10("");
9547
+ const [errorIframe, setErrorIframe] = useState10("");
9548
+ const [success, setSuccess] = useState10(false);
9549
+ let [tranId, setTranId] = useState10("");
9550
+ const [loading, setLoading] = useState10(false);
9551
+ const [loading2, setLoading2] = useState10(false);
9552
+ const [loadingIframe, setLoadingIframe] = useState10(false);
9553
+ const [cardList, setCardList] = useState10([]);
9554
+ const [bankList, setBankList] = useState10([]);
9555
+ const [selectedCard, setSelectedCard] = useState10();
9556
+ const [cashDiscount, setCashDiscount] = useState10(Number(amount));
9557
+ const [activeinCard, setActiveinCard] = useState10("form");
9558
+ const [activeinBank, setActiveinBank] = useState10("form");
9559
+ const [isBankActive, setIsBankActive] = useState10(false);
9560
+ const [processingFee, setProcessingFee] = useState10(0);
9561
+ const [clientSecret, setClientSecret] = useState10("");
9562
+ const [errorMessage, setErrorMessage] = useState10(null);
9563
+ const [initialLoader, setInitialLoader] = useState10(false);
9564
+ const [is3DSEnable, setIs3DSEnable] = useState10(false);
9565
+ const [stripeResponse, setStripeResponse] = useState10(null);
9566
+ const [orderLoader, setOrderLoader] = useState10(false);
9567
+ const [orderGuid, setOrderGuid] = useState10(ordGuid || null);
9568
+ const [partialAmount, setPartialAmount] = useState10("");
9569
+ const [partialError, setPartialError] = useState10("");
9570
+ const [remainingAmount, setRemainingAmount] = useState10("");
9571
+ const [paymentGateway, setPaymentGateway] = useState10();
9572
+ const [dcToken, setDCToken] = useState10();
9573
+ const [isBankConsentChecked, setIsBankConsentChecked] = useState10(false);
9574
+ const [errorBankConsent, setErrorBankConsent] = useState10("");
9575
+ let mastercard2 = S3Url + "widget/mc-img.svg";
9576
+ let visa2 = S3Url + "widget/visa-img.svg";
9577
+ let americanexp2 = S3Url + "widget/ae-img.svg";
9578
+ let discover2 = S3Url + "widget/discover-img.svg";
9579
+ let defaultcard2 = S3Url + "widget/card.svg";
9580
+ let trash2 = S3Url + "widget/Trash.svg";
9581
+ let bank2 = S3Url + "widget/bank.svg";
9582
+ let secure2 = S3Url + "widget/secure-img.png";
9583
+ let pov2 = S3Url + "widget/pov-by.png";
9584
+ let pax2 = S3Url + "widget/pax.svg";
9585
+ let cardicon = S3Url + "widget/cardicon.svg";
9586
+ let bankicon = S3Url + "widget/bankicon.svg";
9587
+ const showLoader = () => setLoading(true);
9588
+ const hideLoader = () => setLoading(false);
9589
+ const CalculateCashDiscount = (amount2, surcharge2) => {
9590
+ const surchargeVal = (parseFloat(surcharge2) || 0) / 100;
9591
+ const originalAmount = amount2 / (1 + surchargeVal);
9592
+ return Math.round(originalAmount * 100) / 100;
9887
9593
  };
9888
- const allowedCardNetworks = ["AMEX", "DISCOVER", "MASTERCARD", "VISA"];
9889
- const allowedCardAuthMethods = require3ds ? ["CRYPTOGRAM_3DS"] : ["PAN_ONLY", "CRYPTOGRAM_3DS"];
9890
- const baseCardPaymentMethod = {
9891
- type: "CARD",
9892
- parameters: {
9893
- allowedAuthMethods: allowedCardAuthMethods,
9894
- allowedCardNetworks
9594
+ const tokenizerRef = useRef10(null);
9595
+ const fractalStyles = {
9596
+ input: {
9597
+ "font-family": "'Inter', sans-serif",
9598
+ "font-size": "16px",
9599
+ "color": "#212529",
9600
+ "background-color": "transparent",
9601
+ "padding": "0px",
9602
+ "appearance": "none",
9603
+ "outline": "none",
9604
+ "border": "none",
9605
+ "box-shadow": "none"
9606
+ },
9607
+ ":focus": {
9608
+ "color": "#212529",
9609
+ "outline": "none",
9610
+ "border": "none"
9611
+ },
9612
+ "::placeholder": {
9613
+ "color": "#212529"
9895
9614
  }
9896
9615
  };
9897
- const cardPaymentMethod = __spreadProps(__spreadValues({}, baseCardPaymentMethod), {
9898
- tokenizationSpecification: {
9899
- type: "PAYMENT_GATEWAY",
9900
- parameters: {
9901
- gateway: googlePayGatewayMerchantId2,
9902
- gatewayMerchantId: googlePayGatewayMerchantId2
9903
- }
9904
- }
9905
- });
9906
- const handlePaymentAuthorization = async (paymentData) => {
9907
- var _a, _b;
9616
+ const handleCharge = async (data) => {
9617
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
9908
9618
  try {
9909
- const token = (_b = (_a = paymentData == null ? void 0 : paymentData.paymentMethodData) == null ? void 0 : _a.tokenizationData) == null ? void 0 : _b.token;
9910
- if (!token) throw new Error("Missing token");
9911
- const parsed = JSON.parse(token);
9912
- console.log(parsed, "parsed token");
9913
- setLoading(true);
9914
- completeFractalFlow(parsed, null, "google_pay");
9915
- return {
9916
- transactionState: "SUCCESS"
9917
- // CLOSES GOOGLE PAY POPUP
9918
- };
9919
- } catch (err) {
9920
- console.error("Payment failed:", err);
9921
- return {
9922
- transactionState: "ERROR",
9923
- // CLOSES WITH ERROR UI
9924
- error: {
9925
- intent: "PAYMENT_AUTHORIZATION",
9926
- message: "Payment failed",
9927
- reason: "PAYMENT_DATA_INVALID"
9928
- }
9929
- };
9930
- }
9931
- };
9932
- const getPaymentsClient = () => {
9933
- if (!paymentsClientRef.current && typeof window !== "undefined") {
9934
- const google = window.google;
9935
- if (!google) return null;
9936
- paymentsClientRef.current = new google.payments.api.PaymentsClient({
9937
- environment: googlePayEnvironment2,
9938
- // ✅ ADD THIS
9939
- paymentDataCallbacks: {
9940
- onPaymentAuthorized: handlePaymentAuthorization
9619
+ let dataObj = __spreadValues({
9620
+ pass_fee_amount: Number(amount) - cashDiscount,
9621
+ pass_fee,
9622
+ Token: data == null ? void 0 : data.Token,
9623
+ amount: partialAmount ? partialAmount : amount,
9624
+ postal_code: data == null ? void 0 : data.postalCode,
9625
+ require3ds,
9626
+ isPartial,
9627
+ orderGuid: orderGuid || ordGuid
9628
+ }, saveCardInfo ? {
9629
+ card: {
9630
+ postal_code: cardData == null ? void 0 : cardData.zipCode,
9631
+ customer_id: customerId,
9632
+ gateway_token: (data == null ? void 0 : data.Token) || (data == null ? void 0 : data.gateway_token),
9633
+ name: cardData == null ? void 0 : cardData.cardName
9941
9634
  }
9942
- });
9943
- }
9944
- return paymentsClientRef.current;
9945
- };
9946
- const getIsReadyToPayRequest = () => __spreadProps(__spreadValues({}, baseRequest), {
9947
- allowedPaymentMethods: [baseCardPaymentMethod]
9948
- });
9949
- const getTransactionInfo = () => ({
9950
- countryCode: "US",
9951
- currencyCode: "USD",
9952
- totalPriceStatus: "FINAL",
9953
- totalPrice: amount,
9954
- checkoutOption: "COMPLETE_IMMEDIATE_PURCHASE"
9955
- });
9956
- const getPaymentDataRequest = () => __spreadProps(__spreadValues({}, baseRequest), {
9957
- allowedPaymentMethods: [cardPaymentMethod],
9958
- transactionInfo: getTransactionInfo(),
9959
- merchantInfo: {
9960
- merchantId: googlePayMerchantId2,
9961
- merchantName: googlePayMerchantName
9962
- },
9963
- // ✅ ADD THIS
9964
- callbackIntents: ["PAYMENT_AUTHORIZATION"]
9965
- });
9966
- const initializeGooglePay = async () => {
9967
- try {
9968
- const client = getPaymentsClient();
9969
- if (!client) {
9970
- console.error("Google Pay client not ready");
9971
- return;
9972
- }
9973
- const response = await client.isReadyToPay(
9974
- getIsReadyToPayRequest()
9975
- );
9976
- if (response.result && containerRef.current) {
9977
- const button = client.createButton({
9978
- onClick: onGooglePayClick,
9979
- allowedPaymentMethods: [baseCardPaymentMethod],
9980
- buttonType: "pay",
9981
- buttonColor: "black",
9982
- buttonRadius: 8
9983
- });
9984
- if (containerRef.current) {
9985
- containerRef.current.innerHTML = "";
9986
- }
9987
- containerRef.current.appendChild(button);
9988
- }
9989
- } catch (err) {
9990
- console.error("Google Pay init error:", err);
9991
- }
9992
- };
9993
- const onGooglePayClick = async () => {
9994
- const client = getPaymentsClient();
9995
- if (!client) {
9996
- console.error("Google Pay client not ready");
9997
- return;
9998
- }
9999
- try {
10000
- await client.loadPaymentData(getPaymentDataRequest());
10001
- } catch (err) {
10002
- if ((err == null ? void 0 : err.statusCode) !== "CANCELED") {
10003
- console.error(err);
10004
- }
10005
- }
10006
- };
10007
- const onScriptLoad = () => {
10008
- if (!googlePayEnvironment2 || !googlePayGatewayMerchantId2 || !amount || !googlePayMerchantId2) {
10009
- console.error("Missing Google Pay config");
10010
- return;
10011
- }
10012
- setTimeout(() => {
10013
- initializeGooglePay();
10014
- }, 0);
10015
- };
10016
- return /* @__PURE__ */ jsxs20(Fragment19, { children: [
10017
- /* @__PURE__ */ jsx34("div", { ref: containerRef, className: "text-center" }),
10018
- /* @__PURE__ */ jsx34(GooglePayScriptLoader, { onLoad: onScriptLoad })
10019
- ] });
10020
- }
10021
-
10022
- // src/app/components/Atoms/Applepay/ApplePayButton.tsx
10023
- import { useEffect as useEffect17, useRef as useRef11 } from "react";
10024
- import { jsx as jsx35 } from "react/jsx-runtime";
10025
- function ApplePayButton({
10026
- applePayMerchantId: applePayMerchantId2,
10027
- applePayAmount,
10028
- applePayMerchantName,
10029
- showLoader,
10030
- completeFractalFlow
10031
- }) {
10032
- const applePayRef = useRef11(null);
10033
- const paymentRequestMethods = [
10034
- {
10035
- supportedMethods: "https://apple.com/apple-pay",
10036
- data: {
10037
- version: 3,
10038
- merchantIdentifier: applePayMerchantId2,
10039
- // ✅ FIXED
10040
- merchantCapabilities: ["supports3DS"],
10041
- supportedNetworks: ["amex", "discover", "mastercard", "visa"],
10042
- // ✅ FIXED
10043
- countryCode: "US"
10044
- }
10045
- }
10046
- ];
10047
- const paymentRequestOptions = {
10048
- requestPayerName: false,
10049
- requestPayerEmail: false,
10050
- requestPayerPhone: false,
10051
- requestShipping: false
10052
- };
10053
- function buildPaymentDetails() {
10054
- return {
10055
- total: {
10056
- label: applePayMerchantName,
10057
- amount: {
10058
- currency: "USD",
10059
- value: applePayAmount
10060
- }
10061
- }
10062
- };
10063
- }
10064
- async function validateMerchant(event) {
10065
- console.log("\u{1F7E1} STEP 1: Merchant validation started");
10066
- try {
10067
- console.log("Validation URL:", event.validationURL);
10068
- console.log("Domain:", window.location.hostname);
10069
- const res = await fetch(
10070
- `${masterBaseUrl}api/v1/widget/generate-apple-pay-session`,
10071
- {
10072
- method: "POST",
10073
- headers: {
10074
- "Content-Type": "application/json"
10075
- },
10076
- body: JSON.stringify({
10077
- validationUrl: event.validationURL,
10078
- applePayMerchantId: applePayMerchantId2,
10079
- applepayDisplayName: applePayMerchantName,
10080
- requestDomain: window.location.hostname
10081
- // ✅ IMPORTANT
10082
- })
10083
- }
10084
- );
10085
- console.log("\u{1F7E1} STEP 2: Response status:", res.status);
10086
- const data = await res.json();
10087
- console.log("\u{1F7E2} STEP 3: Session response:", data);
10088
- if (!data) {
10089
- console.log("\u274C Invalid session data");
10090
- event.complete(null);
10091
- return;
10092
- }
10093
- console.log("\u{1F7E2} STEP 4: Completing merchant validation");
10094
- event.complete(data);
10095
- } catch (err) {
10096
- console.log("\u274C Merchant validation failed:", err == null ? void 0 : err.message);
10097
- event.complete(null);
10098
- }
10099
- }
10100
- async function authorizePayment(paymentResponse) {
10101
- console.log("\u{1F7E1} STEP 5: Authorizing payment");
10102
- try {
10103
- const token = paymentResponse.details.token.paymentData;
10104
- console.log("\u{1F7E2} STEP 6: Got token");
10105
- await completeFractalFlow(token, null, "apple_pay");
10106
- await paymentResponse.complete("success");
10107
- console.log("\u2705 Payment completed successfully");
10108
- } catch (err) {
10109
- console.log("\u274C Authorization failed:", err == null ? void 0 : err.message);
10110
- await paymentResponse.complete("fail");
10111
- }
10112
- }
10113
- async function handleApplePayClick() {
10114
- console.log("\u{1F7E1} STEP A: Click detected");
10115
- try {
10116
- const request = new PaymentRequest(
10117
- paymentRequestMethods,
10118
- buildPaymentDetails(),
10119
- paymentRequestOptions
10120
- );
10121
- request.onmerchantvalidation = validateMerchant;
10122
- console.log("\u{1F7E1} STEP B: Calling show()");
10123
- const response = await request.show();
10124
- console.log("\u{1F7E2} STEP C: Payment sheet opened");
10125
- await authorizePayment(response);
10126
- } catch (err) {
10127
- console.log("\u274C Apple Pay flow failed:", err == null ? void 0 : err.message);
10128
- }
10129
- }
10130
- useEffect17(() => {
10131
- if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) {
10132
- console.log("\u2705 Apple Pay is available");
10133
- } else {
10134
- console.log("\u274C Apple Pay NOT available");
10135
- }
10136
- }, []);
10137
- useEffect17(() => {
10138
- const btn = applePayRef.current;
10139
- if (!btn) return;
10140
- const handleClick = () => handleApplePayClick();
10141
- btn.addEventListener("click", handleClick);
10142
- return () => {
10143
- btn.removeEventListener("click", handleClick);
10144
- };
10145
- }, []);
10146
- return /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(
10147
- "apple-pay-button",
10148
- {
10149
- ref: applePayRef,
10150
- buttonstyle: "black",
10151
- type: "pay",
10152
- locale: "en-US"
10153
- }
10154
- ) });
10155
- }
10156
-
10157
- // src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
10158
- import { Fragment as Fragment20, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
10159
- 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 }) => {
10160
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
10161
- const hasRunRef = useRef12(false);
10162
- const cardFormRef = useRef12(null);
10163
- const bankFormRef = useRef12(null);
10164
- const expiryYearRef = useRef12(null);
10165
- const expiryMonthRef = useRef12(null);
10166
- const cardListRunRef = useRef12(false);
10167
- const threeDSContainerRef = useRef12(null);
10168
- const [activetab, setActive] = useState11("card");
10169
- const [activeList, setActiveList] = useState11("card");
10170
- const [cardData, setCardData] = useState11();
10171
- const [cardError, setCardError] = useState11({});
10172
- const [achData, setAchData] = useState11();
10173
- const [achError, setAchError] = useState11({});
10174
- const [saveACHinfo, setSaveACHinfo] = useState11(false);
10175
- const [saveCardInfo, setSaveCardInfo] = useState11(false);
10176
- const [error, setError] = useState11("");
10177
- const [errorIframe, setErrorIframe] = useState11("");
10178
- const [success, setSuccess] = useState11(false);
10179
- let [tranId, setTranId] = useState11("");
10180
- const [loading, setLoading] = useState11(false);
10181
- const [loading2, setLoading2] = useState11(false);
10182
- const [loadingIframe, setLoadingIframe] = useState11(false);
10183
- const [cardList, setCardList] = useState11([]);
10184
- const [bankList, setBankList] = useState11([]);
10185
- const [selectedCard, setSelectedCard] = useState11();
10186
- const [cashDiscount, setCashDiscount] = useState11(Number(amount));
10187
- const [activeinCard, setActiveinCard] = useState11("form");
10188
- const [activeinBank, setActiveinBank] = useState11("form");
10189
- const [isBankActive, setIsBankActive] = useState11(false);
10190
- const [processingFee, setProcessingFee] = useState11(0);
10191
- const [clientSecret, setClientSecret] = useState11("");
10192
- const [errorMessage, setErrorMessage] = useState11(null);
10193
- const [initialLoader, setInitialLoader] = useState11(false);
10194
- const [is3DSEnable, setIs3DSEnable] = useState11(false);
10195
- const [stripeResponse, setStripeResponse] = useState11(null);
10196
- const [orderLoader, setOrderLoader] = useState11(false);
10197
- const [orderGuid, setOrderGuid] = useState11(ordGuid || null);
10198
- const [partialAmount, setPartialAmount] = useState11("");
10199
- const [partialError, setPartialError] = useState11("");
10200
- const [remainingAmount, setRemainingAmount] = useState11("");
10201
- const [paymentGateway, setPaymentGateway] = useState11();
10202
- const [dcToken, setDCToken] = useState11();
10203
- const [isBankConsentChecked, setIsBankConsentChecked] = useState11(false);
10204
- const [errorBankConsent, setErrorBankConsent] = useState11("");
10205
- let mastercard2 = S3Url + "widget/mc-img.svg";
10206
- let visa2 = S3Url + "widget/visa-img.svg";
10207
- let americanexp2 = S3Url + "widget/ae-img.svg";
10208
- let discover2 = S3Url + "widget/discover-img.svg";
10209
- let defaultcard2 = S3Url + "widget/card.svg";
10210
- let trash2 = S3Url + "widget/Trash.svg";
10211
- let bank2 = S3Url + "widget/bank.svg";
10212
- let secure2 = S3Url + "widget/secure-img.png";
10213
- let pov2 = S3Url + "widget/pov-by.png";
10214
- let pax2 = S3Url + "widget/pax.svg";
10215
- let cardicon = S3Url + "widget/cardicon.svg";
10216
- let bankicon = S3Url + "widget/bankicon.svg";
10217
- let defualtcardborder = S3Url + "widget/defualtcardborder.svg";
10218
- let unionicon = S3Url + "widget/unionpay.svg";
10219
- let dinersicon = S3Url + "widget/diners.svg";
10220
- let jcbicon = S3Url + "widget/jcb.svg";
10221
- const showLoader = () => setLoading(true);
10222
- const hideLoader = () => setLoading(false);
10223
- const CalculateCashDiscount = (amount2, surcharge2) => {
10224
- const surchargeVal = (parseFloat(surcharge2) || 0) / 100;
10225
- const originalAmount = amount2 / (1 + surchargeVal);
10226
- return Math.round(originalAmount * 100) / 100;
10227
- };
10228
- const cardFeeAmount = Number(pass_fee_amount || 0);
10229
- const bankFeeAmount = Number(bankSurcharge || 0);
10230
- const bankSavingsAmount = Math.max(bankFeeAmount > 0 ? cardFeeAmount - bankFeeAmount : cardFeeAmount, 0);
10231
- const bankSavingsText = bankSavingsAmount > 0 ? `Save ${formatUSD(bankSavingsAmount.toFixed(2))}` : "";
10232
- const tokenizerRef = useRef12(null);
10233
- const fractalStyles = {
10234
- input: {
10235
- "font-family": "'Inter', sans-serif",
10236
- "font-size": "16px",
10237
- "color": "#212529",
10238
- "background-color": "transparent",
10239
- "padding": "0px",
10240
- "appearance": "none",
10241
- "outline": "none",
10242
- "border": "none",
10243
- "box-shadow": "none"
10244
- },
10245
- ":focus": {
10246
- "color": "#212529",
10247
- "outline": "none",
10248
- "border": "none"
10249
- },
10250
- "::placeholder": {
10251
- "color": "#212529"
10252
- }
10253
- };
10254
- const handleCharge = async (data) => {
10255
- var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
10256
- try {
10257
- let dataObj = __spreadValues(__spreadValues({
10258
- pass_fee_amount: Number(amount) - cashDiscount,
10259
- pass_fee,
10260
- Token: data == null ? void 0 : data.Token,
10261
- amount: partialAmount ? partialAmount : amount,
10262
- postal_code: data == null ? void 0 : data.postalCode,
10263
- require3ds,
10264
- isPartial,
10265
- orderGuid: orderGuid || ordGuid
10266
- }, saveCardInfo ? {
10267
- card: {
10268
- postal_code: cardData == null ? void 0 : cardData.zipCode,
10269
- customer_id: customerId,
10270
- gateway_token: (data == null ? void 0 : data.Token) || (data == null ? void 0 : data.gateway_token),
10271
- name: cardData == null ? void 0 : cardData.cardName
10272
- }
10273
- } : null), (data == null ? void 0 : data.typeoftoken) ? {
10274
- typeoftoken: data == null ? void 0 : data.typeoftoken
10275
9635
  } : null);
10276
9636
  if (require3ds && (data == null ? void 0 : data.stripe_3ds_auth_id)) {
10277
9637
  dataObj.stripe_3ds_auth_id = data == null ? void 0 : data.stripe_3ds_auth_id;
@@ -10396,28 +9756,19 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10396
9756
  }
10397
9757
  }
10398
9758
  if (!isBankConsentChecked) {
10399
- setErrorBankConsent("Above consent is requied");
9759
+ setErrorBankConsent("Above consent is required");
10400
9760
  }
10401
9761
  setAchError(errors);
10402
9762
  return Object.keys(errors).length > 0 || !isBankConsentChecked;
10403
9763
  };
10404
- const completeFractalFlow = async (tokenizeData, intentid, typeoftoken) => {
9764
+ const completeFractalFlow = async (tokenizeData, intentid) => {
10405
9765
  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
10406
9766
  try {
10407
- if (typeoftoken == "google_pay") {
10408
- handleCharge({
10409
- Token: tokenizeData,
10410
- postalCode: cardData == null ? void 0 : cardData.zipCode,
10411
- typeoftoken
10412
- });
10413
- return;
10414
- }
10415
9767
  let token = tokenizeData;
10416
9768
  let verifyandsaveresp = await axios9.post(`${masterBaseUrl}api/v1/gateway/verify-and-save/${session_token}`, {
10417
9769
  token,
10418
9770
  require3ds,
10419
- pass_fee,
10420
- typeoftoken
9771
+ pass_fee
10421
9772
  });
10422
9773
  if ((verifyandsaveresp == null ? void 0 : verifyandsaveresp.status) == 200) {
10423
9774
  let responsetemp = (_a2 = verifyandsaveresp == null ? void 0 : verifyandsaveresp.data) == null ? void 0 : _a2.data;
@@ -10449,7 +9800,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10449
9800
  }
10450
9801
  };
10451
9802
  const handleFractalTokenFlow = async () => {
10452
- var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v, _w, _x, _y, _z, _A;
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;
10453
9804
  try {
10454
9805
  const requestOptions = {
10455
9806
  method: "POST",
@@ -10490,29 +9841,17 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10490
9841
  three_ds_data
10491
9842
  );
10492
9843
  } catch (error2) {
10493
- console.log(error2, "error in tokenization");
10494
- let readableMessage = "Something went wrong!";
10495
- try {
10496
- const rawError = ((_n2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _n2.data) || (error2 == null ? void 0 : error2.message) || "";
10497
- const errorText = typeof rawError === "string" ? rawError : JSON.stringify(rawError);
10498
- const lines = ((_p2 = (_o2 = errorText.split) == null ? void 0 : _o2.call(errorText, "\n")) == null ? void 0 : _p2.filter(Boolean)) || [];
10499
- const lastLine = lines.at(-1) || "";
10500
- const parts = (_q2 = lastLine.split) == null ? void 0 : _q2.call(lastLine, ": ");
10501
- readableMessage = (parts == null ? void 0 : parts.length) > 1 ? parts.pop().trim() : lastLine.trim() || readableMessage;
10502
- } catch (e) {
10503
- readableMessage = "Something went wrong!";
10504
- }
10505
- setErrorIframe(readableMessage);
9844
+ setErrorIframe(error2);
10506
9845
  hideLoader();
10507
9846
  }
10508
9847
  if (tokenizeData == null ? void 0 : tokenizeData.token) {
10509
9848
  let ThreedsData = tokenizeData == null ? void 0 : tokenizeData.stripe_three_ds_response;
10510
- if (require3ds && !ThreedsData && (ThreedsData == null ? void 0 : ThreedsData.status) === "200 OK" && ((_r2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _r2.challenge_url)) {
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)) {
10511
9850
  setError("Something went wrong. Please try again later.");
10512
9851
  }
10513
9852
  if (require3ds) {
10514
- if (!((_s2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _s2.challenge_url)) {
10515
- completeFractalFlow(tokenizeData == null ? void 0 : tokenizeData.token, (_t2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _t2.id);
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);
10516
9855
  } else {
10517
9856
  hideLoader();
10518
9857
  setStripeResponse(__spreadProps(__spreadValues({}, ThreedsData == null ? void 0 : ThreedsData.data), {
@@ -10528,11 +9867,11 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10528
9867
  console.log(error2, "error");
10529
9868
  let readableMessage = "Something went wrong!";
10530
9869
  try {
10531
- const rawError = ((_u2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _u2.data) || (error2 == null ? void 0 : error2.message) || "";
9870
+ const rawError = ((_q2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _q2.data) || (error2 == null ? void 0 : error2.message) || "";
10532
9871
  const errorText = typeof rawError === "string" ? rawError : JSON.stringify(rawError);
10533
- const lines = ((_w = (_v = errorText.split) == null ? void 0 : _v.call(errorText, "\n")) == null ? void 0 : _w.filter(Boolean)) || [];
9872
+ const lines = ((_s2 = (_r2 = errorText.split) == null ? void 0 : _r2.call(errorText, "\n")) == null ? void 0 : _s2.filter(Boolean)) || [];
10534
9873
  const lastLine = lines.at(-1) || "";
10535
- const parts = (_x = lastLine.split) == null ? void 0 : _x.call(lastLine, ": ");
9874
+ const parts = (_t = lastLine.split) == null ? void 0 : _t.call(lastLine, ": ");
10536
9875
  readableMessage = (parts == null ? void 0 : parts.length) > 1 ? parts.pop().trim() : lastLine.trim() || readableMessage;
10537
9876
  } catch (e) {
10538
9877
  readableMessage = "Something went wrong!";
@@ -10540,8 +9879,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10540
9879
  setError(readableMessage);
10541
9880
  callback({
10542
9881
  error: readableMessage,
10543
- result: (_z = (_y = error2 == null ? void 0 : error2.response) == null ? void 0 : _y.data) == null ? void 0 : _z.result,
10544
- statusCode: (_A = error2 == null ? void 0 : error2.response) == null ? void 0 : _A.status
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
10545
9884
  });
10546
9885
  }
10547
9886
  };
@@ -10958,8 +10297,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10958
10297
  });
10959
10298
  };
10960
10299
  const handlechargeCustomer = async (e) => {
10961
- var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
10962
- e == null ? void 0 : e.currentTarget.blur();
10300
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
10301
+ e.currentTarget.blur();
10963
10302
  if (loading) return;
10964
10303
  let customer_id = customerId;
10965
10304
  let card_id = selectedCard == null ? void 0 : selectedCard.id;
@@ -11006,6 +10345,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
11006
10345
  statusCode: (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.status
11007
10346
  });
11008
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!");
11009
10349
  }
11010
10350
  } else {
11011
10351
  setError("Please Select A Card/Bank");
@@ -11081,21 +10421,21 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
11081
10421
  setOrderLoader(false);
11082
10422
  }
11083
10423
  };
11084
- useEffect18(() => {
10424
+ useEffect15(() => {
11085
10425
  if (!show && !autoTrigger) {
11086
10426
  hasRunRef.current = false;
11087
10427
  cardListRunRef.current = false;
11088
10428
  }
11089
10429
  }, [show, autoTrigger]);
11090
- useEffect18(() => {
11091
- if (!hasRunRef.current && (show || autoTrigger) && onLoad) {
10430
+ useEffect15(() => {
10431
+ if (!hasRunRef.current && (show || autoTrigger)) {
11092
10432
  getPaymentDetails();
11093
10433
  if (isPartial && !partialRef) {
11094
10434
  crateOrderFrac();
11095
10435
  }
11096
10436
  }
11097
- }, [show, autoTrigger, isPartial, onLoad]);
11098
- useEffect18(() => {
10437
+ }, [show, autoTrigger, isPartial]);
10438
+ useEffect15(() => {
11099
10439
  if ((show || autoTrigger) && pass_fee_amount) {
11100
10440
  let cashdisc = Number(amount) - Number(pass_fee_amount);
11101
10441
  if (cashdisc && !isNaN(cashdisc)) {
@@ -11157,7 +10497,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
11157
10497
  console.error("3DS Auth failed \u274C", status);
11158
10498
  setError(`3DS Authentication ${status}`);
11159
10499
  };
11160
- useEffect18(() => {
10500
+ useEffect15(() => {
11161
10501
  if (setHandleCloseRef) {
11162
10502
  setHandleCloseRef(() => handleClose);
11163
10503
  }
@@ -11175,95 +10515,24 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
11175
10515
  setPartialError("");
11176
10516
  }
11177
10517
  };
11178
- useEffect18(() => {
10518
+ useEffect15(() => {
11179
10519
  if (typeof FractalTokenizer === "undefined") return;
11180
10520
  const tokenizer = new FractalTokenizer({
11181
10521
  styles: {}
11182
10522
  });
11183
10523
  }, []);
11184
- const stateRef = useRef12({
11185
- activeinBank,
11186
- activeinCard,
11187
- activetab
11188
- });
11189
- useEffect18(() => {
11190
- stateRef.current = {
11191
- activeinBank,
11192
- activeinCard,
11193
- activetab
11194
- };
11195
- }, [activeinBank, activeinCard, activetab]);
11196
- const submit = useCallback(() => {
11197
- var _a2, _b2;
11198
- const { activeinBank: activeinBank2, activeinCard: activeinCard2, activetab: activetab2 } = stateRef.current;
11199
- if (activetab2 === "card") {
11200
- if (activeinCard2 === "form") {
11201
- (_a2 = cardFormRef.current) == null ? void 0 : _a2.requestSubmit();
11202
- } else if (activeinCard2 === "list") {
11203
- handlechargeCustomer();
11204
- }
11205
- } else if (activetab2 === "ach") {
11206
- if (activeinBank2 === "form") {
11207
- (_b2 = bankFormRef.current) == null ? void 0 : _b2.requestSubmit();
11208
- } else if (activeinBank2 === "list") {
11209
- handlechargeCustomer();
11210
- }
11211
- }
11212
- }, []);
11213
- useEffect18(() => {
11214
- onSubmit == null ? void 0 : onSubmit(submit);
11215
- }, [onSubmit, submit]);
11216
- function detectCardType(cardinput) {
11217
- if (!cardinput) return null;
11218
- const number = cardinput.replace(/\D/g, "");
11219
- const patterns = {
11220
- visa: /^4/,
11221
- mastercard: /^(5[1-5]|2[2-7][0-9]{2})/,
11222
- amex: /^3[47]/,
11223
- discover: /^(6011|65|64[4-9])/,
11224
- diners: /^(30[0-5]|36|38)/,
11225
- jcb: /^(35[2-8][0-9])/,
11226
- unionpay: /^62/
11227
- };
11228
- for (const [type, regex] of Object.entries(patterns)) {
11229
- if (regex.test(number)) {
11230
- return type;
11231
- }
11232
- }
11233
- return "unknown";
11234
- }
11235
- function getCardImage(cardInput) {
11236
- const cardType = detectCardType(cardInput);
11237
- switch (cardType) {
11238
- case "visa":
11239
- return /* @__PURE__ */ jsx36("img", { src: visa2, alt: "visa", width: 33 });
11240
- case "mastercard":
11241
- return /* @__PURE__ */ jsx36("img", { src: mastercard2, width: 33, alt: "mastercard" });
11242
- case "amex":
11243
- return /* @__PURE__ */ jsx36("img", { src: americanexp2, alt: "amex", width: 33 });
11244
- case "discover":
11245
- return /* @__PURE__ */ jsx36("img", { src: discover2, width: 33, alt: "discover" });
11246
- case "diners":
11247
- return /* @__PURE__ */ jsx36("img", { src: dinersicon, alt: "Diners Club" });
11248
- case "jcb":
11249
- return /* @__PURE__ */ jsx36("img", { src: jcbicon, alt: "JCB" });
11250
- case "unionpay":
11251
- return /* @__PURE__ */ jsx36("img", { src: unionicon, alt: "UnionPay" });
11252
- default:
11253
- return /* @__PURE__ */ jsx36("img", { src: defualtcardborder, alt: "card" });
11254
- }
11255
- }
11256
- return /* @__PURE__ */ jsxs21(Fragment20, { children: [
11257
- (initialLoader || !onLoad) && /* @__PURE__ */ jsx36(Loader_default, { intensity: "dark", loading: initialLoader || !onLoad }),
11258
- error && /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(ErrorCardOverlay_default, { error, onClose: handleClose, autoTrigger }) }),
11259
- errorIframe && /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(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: () => {
11260
10529
  setErrorIframe("");
11261
- }, autoTrigger: onSubmit ? !onSubmit : autoTrigger }) }),
11262
- /* @__PURE__ */ jsxs21(Fragment20, { children: [
11263
- (loading || loading2 || loadingIframe) && /* @__PURE__ */ jsx36(Loader_default, { intensity: "light", loading: loading || loading2 || loadingPrev || orderLoader || loadingIframe }),
11264
- /* @__PURE__ */ jsxs21("div", { className: "frac-card-payment-page frac-form frac-new-form", children: [
11265
- /* @__PURE__ */ jsx36("div", { ref: threeDSContainerRef, style: { width: "100%", height: "100%" } }),
11266
- (stripeResponse == null ? void 0 : stripeResponse.challenge_url) ? /* @__PURE__ */ jsx36(
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(
11267
10536
  ThreeDSChallenge,
11268
10537
  {
11269
10538
  containerRef: threeDSContainerRef,
@@ -11273,33 +10542,40 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
11273
10542
  onSuccess: handleSuccess,
11274
10543
  onError: handleError
11275
10544
  }
11276
- ) : /* @__PURE__ */ jsxs21("div", { className: "parent-pay-container", children: [
11277
- /* @__PURE__ */ jsx36("span", { style: { display: autoTrigger ? "none" : "block" }, className: "request-payment-close-popup", onClick: handleClose, children: /* @__PURE__ */ jsxs21("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
11278
- /* @__PURE__ */ jsx36("g", { clipPath: "url(#clip0_12425_52336)", children: /* @__PURE__ */ jsx36("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" }) }),
11279
- /* @__PURE__ */ jsx36("defs", { children: /* @__PURE__ */ jsx36("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx36("rect", { width: "16", height: "16", fill: "white" }) }) })
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" }) }) })
11280
10549
  ] }) }),
11281
- /* @__PURE__ */ jsx36("div", { className: "pay-main-logo-res" }),
11282
- /* @__PURE__ */ jsxs21("div", { className: onSubmit ? "pay-container frac-pay-container " : "pay-container", children: [
11283
- !onSubmit && /* @__PURE__ */ jsxs21("div", { className: "pay-header pay-conatiner-one", children: [
11284
- /* @__PURE__ */ jsxs21("div", { className: "pay-conatiner-one-first", children: [
11285
- /* @__PURE__ */ jsxs21("div", { className: "pay-logo-container", children: [
11286
- /* @__PURE__ */ jsx36("div", { className: "pay-main-logo" }),
11287
- /* @__PURE__ */ jsx36("h1", { className: "pay-heading", children: "Pay" }),
11288
- (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ jsxs21("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList"), children: [
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: [
11289
10558
  " ",
11290
- /* @__PURE__ */ jsx36(IoArrowBack4, {}),
10559
+ /* @__PURE__ */ jsx32(IoArrowBack4, {}),
11291
10560
  " Back"
11292
10561
  ] })
11293
10562
  ] }),
11294
- /* @__PURE__ */ jsx36("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs21("div", { className: "pay-amount-conatiner", children: [
11295
- /* @__PURE__ */ jsx36("small", { className: "pay-payment-amount", children: "Select payment type" }),
11296
- /* @__PURE__ */ jsxs21("div", { className: "frac-card-bank-radio-main", children: [
11297
- /* @__PURE__ */ jsx36(CardBankRadio, { label: "Card", amount: (_a = Number(amount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
11298
- !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx36(CardBankRadio, { label: "Bank", amount: (_b = Number(bankAmount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab, savingsText: bankSavingsText })
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 })
11299
10568
  ] }),
11300
- isPartial && /* @__PURE__ */ jsxs21("div", { className: "frac-partial-payment-input", children: [
11301
- /* @__PURE__ */ jsx36("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
11302
- /* @__PURE__ */ jsx36(
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(
11303
10579
  NumericFormat2,
11304
10580
  {
11305
10581
  prefix: "$",
@@ -11323,403 +10599,331 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
11323
10599
  }
11324
10600
  }
11325
10601
  ),
11326
- partialError && /* @__PURE__ */ jsx36("span", { className: "error-span", children: partialError })
10602
+ partialError && /* @__PURE__ */ jsx32("span", { className: "error-span", children: partialError })
11327
10603
  ] })
11328
10604
  ] }) })
11329
10605
  ] }),
11330
- /* @__PURE__ */ jsxs21("div", { className: "pay-conatiner-one-last", children: [
11331
- /* @__PURE__ */ jsx36("img", { src: secure2, alt: "" }),
11332
- /* @__PURE__ */ jsx36("img", { src: pov2, alt: "" }),
10606
+ /* @__PURE__ */ jsxs19("div", { className: "pay-conatiner-one-last", children: [
10607
+ /* @__PURE__ */ jsx32("img", { src: secure2, alt: "" }),
10608
+ /* @__PURE__ */ jsx32("img", { src: pov2, alt: "" }),
11333
10609
  "Secure payments powered by Fractal"
11334
10610
  ] })
11335
10611
  ] }),
11336
- /* @__PURE__ */ jsx36("div", { className: "pay-tab pay-conatiner-two", children: /* @__PURE__ */ jsx36("div", { className: "col-md-12", children: /* @__PURE__ */ jsxs21("div", { id: "payment-form-div ", className: onSubmit ? "frac-payment-form-div" : "", children: [
11337
- onSubmit && /* @__PURE__ */ jsx36("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs21("div", { className: "pay-amount-conatiner", children: [
11338
- /* @__PURE__ */ jsxs21("div", { className: "frac-card-bank-radio-main", children: [
11339
- /* @__PURE__ */ jsx36(CardBankRadio, { skydesign: true, label: "Card", amount: (_c = Number(amount)) == null ? void 0 : _c.toFixed(2), value: "card", onChange: handletabchange, activetab }),
11340
- !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx36(CardBankRadio, { skydesign: true, label: "Bank", amount: (_d = Number(bankAmount)) == null ? void 0 : _d.toFixed(2), value: "ach", onChange: handletabchange, activetab, savingsText: bankSavingsText })
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" })
11341
10620
  ] }),
11342
- isPartial && /* @__PURE__ */ jsxs21("div", { className: "frac-partial-payment-input", children: [
11343
- /* @__PURE__ */ jsx36("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
11344
- /* @__PURE__ */ jsx36(
11345
- NumericFormat2,
11346
- {
11347
- prefix: "$",
11348
- className: "form-control-frac",
11349
- value: partialAmount,
11350
- onValueChange: (values) => {
11351
- handlePartialChange(values);
11352
- },
11353
- thousandSeparator: true,
11354
- placeholder: "Enter partial amount",
11355
- allowNegative: false,
11356
- allowLeadingZeros: false,
11357
- decimalScale: 2,
11358
- fixedDecimalScale: true
11359
- }
11360
- ),
11361
- partialError && /* @__PURE__ */ jsx36("span", { className: "error-span", children: partialError })
11362
- ] })
11363
- ] }) }),
11364
- is3DSEnable ? clientSecret && /* @__PURE__ */ jsx36(CheckoutWrapper, { onSuccess, clientSecret, amount, showLoader, hideLoader, callback, session_token, handleClose, setError, isPreAuth }) : /* @__PURE__ */ jsxs21(Fragment20, { children: [
11365
- /* @__PURE__ */ jsxs21("div", { id: "ach", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent", children: [
11366
- !onSubmit && /* @__PURE__ */ jsxs21(Fragment20, { children: [
11367
- /* @__PURE__ */ jsxs21("div", { className: "frac-heading-card-wrap", children: [
11368
- /* @__PURE__ */ jsx36("div", { className: "frac-backarrow", children: (cardList == null ? void 0 : cardList.length) > 0 && activeinCard === "form" && /* @__PURE__ */ jsxs21("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinCard("list"), children: [
11369
- " ",
11370
- /* @__PURE__ */ jsx36(IoArrowBack4, {})
11371
- ] }) }),
11372
- /* @__PURE__ */ jsx36("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 })
11373
10648
  ] }),
11374
- /* @__PURE__ */ jsxs21("div", { style: { display: "flex", gap: "8px", margin: "8px 0px 19px 0px" }, children: [
11375
- /* @__PURE__ */ jsx36("img", { src: visa2, alt: "", width: 33 }),
11376
- /* @__PURE__ */ jsx36("img", { src: mastercard2, width: 33, alt: "" }),
11377
- /* @__PURE__ */ jsx36("img", { src: americanexp2, alt: "", width: 33 }),
11378
- /* @__PURE__ */ jsx36("img", { src: discover2, width: 33, alt: "" })
11379
- ] })
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",
10681
+ {
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
+ ]
10697
+ }
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
+ ] }) })
11380
10706
  ] }),
11381
- activeinCard === "list" && (cardList == null ? void 0 : cardList.length) > 0 ? /* @__PURE__ */ jsxs21(Fragment20, { children: [
11382
- /* @__PURE__ */ jsx36(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Card", ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
11383
- setActiveinCard("form");
11384
- } }),
11385
- /* @__PURE__ */ jsx36("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx36("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: partialAmount ? formatUSD((_e = Number(partialAmount)) == null ? void 0 : _e.toFixed(2)) : formatUSD((_f = Number(amount)) == null ? void 0 : _f.toFixed(2)) }) })
11386
- ] }) : paymentGateway == 32 ? /* @__PURE__ */ jsxs21(Fragment20, { children: [
11387
- /* @__PURE__ */ jsx36(
11388
- ApplePayButton,
11389
- {
11390
- applePayAmount: partialAmount ? partialAmount : amount,
11391
- applePayMerchantId,
11392
- applePayMerchantName: merchantName,
11393
- completeFractalFlow,
11394
- showLoader
11395
- }
11396
- ),
11397
- /* @__PURE__ */ jsx36(
11398
- GooglePayComponent,
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 })
10724
+ ] }),
10725
+ /* @__PURE__ */ jsx32("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx32(
10726
+ DataCapFields,
11399
10727
  {
11400
- amount: partialAmount ? partialAmount : amount,
11401
- googlePayEnvironment,
11402
- googlePayGatewayMerchantId,
11403
- googlePayMerchantId,
11404
- googlePayMerchantName: merchantName,
11405
- completeFractalFlow,
11406
- setLoading
10728
+ isOpen: show || autoTrigger,
10729
+ tokenKey: dcToken,
10730
+ setLoader: activeinCard === "form" ? setLoadingIframe : null
11407
10731
  }
11408
- ),
11409
- /* @__PURE__ */ jsx36("div", { id: "digital-wallet-or", className: "frac-or", children: /* @__PURE__ */ jsx36("span", { children: "or" }) }),
11410
- /* @__PURE__ */ jsxs21("form", { id: "paymentForm", style: { textAlign: "start" }, ref: cardFormRef, onSubmit: submitFunc, onKeyDown: (e) => {
11411
- if (e.key === "Enter" && loading) {
11412
- e.preventDefault();
11413
- e.stopPropagation();
11414
- }
11415
- }, children: [
11416
- /* @__PURE__ */ jsxs21("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
11417
- /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
11418
- /* @__PURE__ */ jsx36("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
11419
- /* @__PURE__ */ jsx36("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
11420
- const value = e.target.value;
11421
- if (/^[a-zA-Z\s]*$/.test(value)) {
11422
- handleCardChange("cardName", value);
11423
- }
11424
- } }),
11425
- (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
11426
- ] }),
11427
- /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
11428
- /* @__PURE__ */ jsx36("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
11429
- /* @__PURE__ */ jsx36("div", { className: "toggle-num-wrapper toggle-num-wrapper-new", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx36(
11430
- FractalFields_default,
11431
- {
11432
- fractalStyles,
11433
- tokenizerRef,
11434
- isSky: true
11435
- }
11436
- ) })
11437
- ] }),
11438
- /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
11439
- /* @__PURE__ */ jsx36("label", { htmlFor: "zip", children: "ZIP" }),
11440
- /* @__PURE__ */ jsx36("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) }),
11441
- (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
11442
- pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs21("small", { className: "frac-fee-text", children: [
11443
- "Credit cards include a fee amount of ",
11444
- /* @__PURE__ */ jsx36("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
11445
- "."
11446
- ] })
11447
- ] }),
11448
- customerId && /* @__PURE__ */ jsx36("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs21("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
11449
- /* @__PURE__ */ jsx36(
11450
- "input",
11451
- {
11452
- type: "checkbox",
11453
- id: "save_card",
11454
- className: "toggle-checkbox",
11455
- checked: saveCardInfo,
11456
- onChange: (e) => setSaveCardInfo(e.target.checked)
11457
- }
11458
- ),
11459
- /* @__PURE__ */ jsx36("label", { htmlFor: "save_card", className: "toggle-label" }),
11460
- /* @__PURE__ */ jsx36("label", { htmlFor: "save_card", children: "Save card for future payments " }),
11461
- /* @__PURE__ */ jsxs21("div", { className: "frac-tooltip-wrapper", children: [
11462
- /* @__PURE__ */ jsx36("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs21(
11463
- "svg",
11464
- {
11465
- xmlns: "http://www.w3.org/2000/svg",
11466
- width: "20",
11467
- height: "20",
11468
- viewBox: "0 0 20 20",
11469
- fill: "none",
11470
- children: [
11471
- /* @__PURE__ */ jsx36("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
11472
- /* @__PURE__ */ jsx36(
11473
- "path",
11474
- {
11475
- 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",
11476
- fill: "#161616"
11477
- }
11478
- )
11479
- ]
11480
- }
11481
- ) }),
11482
- /* @__PURE__ */ jsx36("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs21("p", { children: [
11483
- "If checked, I agree to give the ",
11484
- /* @__PURE__ */ jsx36("b", { children: merchantName || "merchant" }),
11485
- " permission to charge this credit card for agreed-upon purchases in the future."
11486
- ] }) })
11487
- ] })
11488
- ] }) })
11489
- ] }),
11490
- /* @__PURE__ */ jsx36("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx36("button", { type: "submit", style: { margin: 0, display: onSubmit ? "none" : "block" }, className: "pay-button", children: partialAmount ? formatUSD((_h = Number(partialAmount)) == null ? void 0 : _h.toFixed(2)) : formatUSD((_i = Number(amount)) == null ? void 0 : _i.toFixed(2)) }) })
11491
- ] })
11492
- ] }) : /* @__PURE__ */ jsxs21("form", { id: "PaymentForm", style: { textAlign: "start" }, ref: cardFormRef, onSubmit: submitFunc, onKeyDown: (e) => {
11493
- if (e.key === "Enter" && loading) {
11494
- e.preventDefault();
11495
- e.stopPropagation();
11496
- }
11497
- }, children: [
11498
- /* @__PURE__ */ jsxs21("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
11499
- /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
11500
- /* @__PURE__ */ jsx36("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
11501
- /* @__PURE__ */ jsx36("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
11502
- const value = e.target.value;
11503
- if (/^[a-zA-Z\s]*$/.test(value)) {
11504
- handleCardChange("cardName", value);
11505
- }
11506
- } }),
11507
- (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
11508
- ] }),
11509
- /* @__PURE__ */ jsx36("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx36(
11510
- DataCapFields,
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",
11511
10741
  {
11512
- isOpen: show || autoTrigger,
11513
- tokenKey: dcToken,
11514
- setLoader: activeinCard === "form" ? setLoadingIframe : null,
11515
- isEmbedded: onSubmit ? true : false
10742
+ type: "checkbox",
10743
+ id: "save_card",
10744
+ className: "toggle-checkbox",
10745
+ checked: saveCardInfo,
10746
+ onChange: (e) => setSaveCardInfo(e.target.checked)
11516
10747
  }
11517
- ) }),
11518
- /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
11519
- /* @__PURE__ */ jsx36("label", { htmlFor: "zip", children: "ZIP" }),
11520
- /* @__PURE__ */ jsx36("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_j = cardData == null ? void 0 : cardData.zipCode) != null ? _j : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
11521
- (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
11522
- pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs21("small", { className: "frac-fee-text", children: [
11523
- "Credit cards include a fee amount of ",
11524
- /* @__PURE__ */ jsx36("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
11525
- "."
11526
- ] })
11527
- ] }),
11528
- customerId && /* @__PURE__ */ jsx36("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs21("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
11529
- /* @__PURE__ */ jsx36(
11530
- "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",
11531
10754
  {
11532
- type: "checkbox",
11533
- id: "save_card",
11534
- className: "toggle-checkbox",
11535
- checked: saveCardInfo,
11536
- onChange: (e) => setSaveCardInfo(e.target.checked)
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
+ ]
11537
10770
  }
11538
- ),
11539
- /* @__PURE__ */ jsx36("label", { htmlFor: "save_card", className: "toggle-label" }),
11540
- /* @__PURE__ */ jsx36("label", { htmlFor: "save_card", children: "Save card for future payments " }),
11541
- /* @__PURE__ */ jsxs21("div", { className: "frac-tooltip-wrapper", children: [
11542
- /* @__PURE__ */ jsx36("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs21(
11543
- "svg",
11544
- {
11545
- xmlns: "http://www.w3.org/2000/svg",
11546
- width: "20",
11547
- height: "20",
11548
- viewBox: "0 0 20 20",
11549
- fill: "none",
11550
- children: [
11551
- /* @__PURE__ */ jsx36("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
11552
- /* @__PURE__ */ jsx36(
11553
- "path",
11554
- {
11555
- 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",
11556
- fill: "#161616"
11557
- }
11558
- )
11559
- ]
11560
- }
11561
- ) }),
11562
- /* @__PURE__ */ jsx36("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs21("p", { children: [
11563
- "If checked, I agree to give the ",
11564
- /* @__PURE__ */ jsx36("b", { children: merchantName || "merchant" }),
11565
- " permission to charge this credit card for agreed-upon purchases in the future."
11566
- ] }) })
11567
- ] })
11568
- ] }) })
11569
- ] }),
11570
- /* @__PURE__ */ jsx36("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx36("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)) }) })
11571
- ] })
11572
- ] }),
11573
- /* @__PURE__ */ jsx36("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: /* @__PURE__ */ jsxs21(Fragment20, { children: [
11574
- !onSubmit && /* @__PURE__ */ jsxs21("div", { className: "frac-heading-card-wrap", children: [
11575
- /* @__PURE__ */ jsx36("div", { className: "frac-backarrow", children: (bankList == null ? void 0 : bankList.length) > 0 && activeinBank === "form" && /* @__PURE__ */ jsxs21("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinBank("list"), children: [
11576
- " ",
11577
- /* @__PURE__ */ jsx36(IoArrowBack4, {})
11578
- ] }) }),
11579
- /* @__PURE__ */ jsx36("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
10771
+ ) }),
10772
+ /* @__PURE__ */ jsx32("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs19("p", { children: [
10773
+ "If checked, I agree to give the ",
10774
+ /* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
10775
+ " permission to charge this credit card for agreed-upon purchases in the future."
10776
+ ] }) })
10777
+ ] })
10778
+ ] }) })
11580
10779
  ] }),
11581
- activeinBank === "list" && (bankList == null ? void 0 : bankList.length) > 0 ? /* @__PURE__ */ jsxs21(Fragment20, { children: [
11582
- /* @__PURE__ */ jsx36(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Banks", ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
11583
- setActiveinBank("form");
11584
- } }),
11585
- /* @__PURE__ */ jsx36("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx36("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: formatUSD((_m = Number(bankAmount)) == null ? void 0 : _m.toFixed(2)) }) })
11586
- ] }) : /* @__PURE__ */ jsxs21("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, ref: bankFormRef, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
11587
- if (e.key === "Enter" && loading) {
11588
- e.preventDefault();
11589
- e.stopPropagation();
11590
- }
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"
11591
10805
  }, children: [
11592
- /* @__PURE__ */ jsxs21("div", { className: "ach-scrl", style: {
11593
- minHeight: "444px",
11594
- maxHeight: "444px"
11595
- }, children: [
11596
- /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
11597
- /* @__PURE__ */ jsx36("label", { htmlFor: "nameonaccount", children: "Name on account" }),
11598
- /* @__PURE__ */ jsx36("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 }),
11599
- (achError == null ? void 0 : achError.name) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
11600
- ] }),
11601
- /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
11602
- /* @__PURE__ */ jsx36("label", { htmlFor: "routingnumber", children: "Routing number" }),
11603
- /* @__PURE__ */ jsx36(
11604
- "input",
11605
- {
11606
- type: "text",
11607
- id: "routingnumber",
11608
- className: "form-control-frac",
11609
- maxLength: 9,
11610
- placeholder: "000000000",
11611
- name: "routingNumber",
11612
- value: (_o = achData == null ? void 0 : achData.routingNumber) != null ? _o : "",
11613
- onChange: handleChangeAch
11614
- }
11615
- ),
11616
- (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: achError == null ? void 0 : achError.routingNumber })
11617
- ] }),
11618
- /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
11619
- /* @__PURE__ */ jsx36("label", { htmlFor: "accountnumber", children: "Account number" }),
11620
- /* @__PURE__ */ jsx36(
11621
- "input",
11622
- {
11623
- type: "text",
11624
- id: "accountnumber",
11625
- className: "form-control-frac",
11626
- maxLength: 16,
11627
- placeholder: "0000000000",
11628
- name: "accountNumber",
11629
- value: (_p = achData == null ? void 0 : achData.accountNumber) != null ? _p : "",
11630
- onChange: handleChangeAch
11631
- }
11632
- ),
11633
- (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: achError == null ? void 0 : achError.accountNumber })
11634
- ] }),
11635
- /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
11636
- /* @__PURE__ */ jsx36("label", { htmlFor: "confirmaccountnumber", children: "Confirm account number" }),
11637
- /* @__PURE__ */ jsx36(
11638
- "input",
11639
- {
11640
- type: "text",
11641
- id: "confirmaccountnumber",
11642
- className: "form-control-frac",
11643
- maxLength: 16,
11644
- placeholder: "0000000000",
11645
- name: "confirmAccountNumber",
11646
- value: (_q = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _q : "",
11647
- onChange: handleChangeAch
11648
- }
11649
- ),
11650
- (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: achError == null ? void 0 : achError.confirmAccountNumber })
11651
- ] }),
11652
- /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
11653
- /* @__PURE__ */ jsx36("label", { htmlFor: "bankname", children: "Bank name" }),
11654
- /* @__PURE__ */ jsx36(
11655
- "input",
11656
- {
11657
- type: "text",
11658
- id: "bankname",
11659
- className: "form-control-frac",
11660
- maxLength: 100,
11661
- placeholder: "My Bank",
11662
- name: "bankName",
11663
- value: (_r = achData == null ? void 0 : achData.bankName) != null ? _r : "",
11664
- onChange: handleChangeAch
11665
- }
11666
- ),
11667
- (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: achError == null ? void 0 : achError.bankName })
11668
- ] }),
11669
- ((achData == null ? void 0 : achData.accountType) === "business saving" || (achData == null ? void 0 : achData.accountType) === "business checking") && /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
11670
- /* @__PURE__ */ jsx36("label", { htmlFor: "companyName", children: "Company name" }),
11671
- /* @__PURE__ */ jsx36(
11672
- "input",
11673
- {
11674
- type: "text",
11675
- id: "companyName",
11676
- className: "form-control-frac",
11677
- maxLength: 100,
11678
- placeholder: "My Company",
11679
- name: "companyName",
11680
- value: (_s = achData == null ? void 0 : achData.companyName) != null ? _s : "",
11681
- onChange: handleChangeAch
11682
- }
11683
- ),
11684
- (achError == null ? void 0 : achError.companyName) && /* @__PURE__ */ jsx36("span", { className: "error-span", children: achError == null ? void 0 : achError.companyName })
11685
- ] }),
11686
- /* @__PURE__ */ jsxs21("div", { className: "form-group-frac", children: [
11687
- /* @__PURE__ */ jsx36("label", { htmlFor: "accounttype", children: "Select account type" }),
11688
- /* @__PURE__ */ jsxs21("select", { name: "accountType", id: "accounttype", className: "form-control-frac", value: (_t = achData == null ? void 0 : achData.accountType) != null ? _t : "", onChange: handleChangeAch, children: [
11689
- /* @__PURE__ */ jsx36("option", { value: "", children: "Select account" }),
11690
- accountTypes.map((type) => /* @__PURE__ */ jsx36("option", { value: type.value, children: type.label }, type.value))
11691
- ] }),
11692
- bankFeeAmount > 0 && /* @__PURE__ */ jsxs21("small", { className: "frac-fee-text", children: [
11693
- "There is a processing fee of ",
11694
- /* @__PURE__ */ jsx36("span", { className: "frac-fee-amount", children: formatUSD(bankFeeAmount.toFixed(2)) }),
11695
- "."
11696
- ] }),
11697
- /* @__PURE__ */ jsxs21("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
11698
- /* @__PURE__ */ jsx36("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
11699
- setIsBankConsentChecked(e.target.checked);
11700
- if (e.target.checked) {
11701
- setErrorBankConsent("");
11702
- }
11703
- } }),
11704
- /* @__PURE__ */ jsx36("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.` })
11705
- ] }),
11706
- errorBankConsent && /* @__PURE__ */ jsx36("span", { className: "error-span", children: errorBankConsent }),
11707
- customerId && /* @__PURE__ */ jsxs21("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
11708
- /* @__PURE__ */ jsx36("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
11709
- /* @__PURE__ */ jsx36("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save Bank" })
11710
- ] }),
11711
- saveACHinfo && /* @__PURE__ */ jsx36("div", { className: "form-group-frac saveachtext", children: /* @__PURE__ */ jsxs21("p", { children: [
11712
- "If checked, I agree to give the ",
11713
- /* @__PURE__ */ jsx36("b", { children: merchantName || "merchant" }),
11714
- " permission to charge this bank account for agreed-upon purchases in the future."
11715
- ] }) })
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 })
10810
+ ] }),
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))
11716
10901
  ] })
11717
10902
  ] }),
11718
- /* @__PURE__ */ jsx36("div", { className: "form-group-frac ", children: /* @__PURE__ */ jsx36("button", { className: "pay-button", style: { margin: "20px 0 0", display: onSubmit ? "none" : "block" }, type: "submit", children: formatUSD((_u = Number(bankAmount)) == null ? void 0 : _u.toFixed(2)) }) })
11719
- ] })
11720
- ] }) })
11721
- ] })
11722
- ] }) }) })
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
+ ] }) }) }) })
11723
10927
  ] })
11724
10928
  ] })
11725
10929
  ] })
@@ -11730,7 +10934,7 @@ var ModelContentSky_default = ModelContentSky;
11730
10934
 
11731
10935
  // src/app/components/Skysystemz/PayButtonWithForm.tsx
11732
10936
  import axios10 from "axios";
11733
- import { Fragment as Fragment21, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
10937
+ import { Fragment as Fragment19, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
11734
10938
  var PaymentWidget = ({
11735
10939
  amount,
11736
10940
  bankAmount,
@@ -11752,12 +10956,12 @@ var PaymentWidget = ({
11752
10956
  bankSurcharge,
11753
10957
  partialRef
11754
10958
  }) => {
11755
- const [show, setShow] = useState12(autoTrigger || false);
11756
- const [loading, setLoading] = useState12(false);
11757
- const [childHandleClose, setChildHandleClose] = useState12(() => () => {
10959
+ const [show, setShow] = useState11(autoTrigger || false);
10960
+ const [loading, setLoading] = useState11(false);
10961
+ const [childHandleClose, setChildHandleClose] = useState11(() => () => {
11758
10962
  });
11759
- const [orderGuid, setOrderGuid] = useState12(null);
11760
- const [remainingAmount, setRemainingAmount] = useState12(null);
10963
+ const [orderGuid, setOrderGuid] = useState11(null);
10964
+ const [remainingAmount, setRemainingAmount] = useState11(null);
11761
10965
  const initialCommonProps = useMemo(
11762
10966
  () => ({
11763
10967
  amount,
@@ -11804,8 +11008,8 @@ var PaymentWidget = ({
11804
11008
  partialRef
11805
11009
  ]
11806
11010
  );
11807
- const [commonProps, setCommonProps] = useState12(initialCommonProps);
11808
- useEffect19(() => {
11011
+ const [commonProps, setCommonProps] = useState11(initialCommonProps);
11012
+ useEffect16(() => {
11809
11013
  if (show) {
11810
11014
  setCommonProps(initialCommonProps);
11811
11015
  }
@@ -11836,556 +11040,29 @@ var PaymentWidget = ({
11836
11040
  setLoading(false);
11837
11041
  }
11838
11042
  };
11839
- useEffect19(() => {
11840
- if (show && isPartial && partialRef) {
11841
- getskyosOrderDetails();
11842
- }
11843
- }, [show, isPartial, partialRef]);
11844
- return /* @__PURE__ */ jsxs22(Fragment21, { children: [
11845
- /* @__PURE__ */ jsx37("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
11846
- /* @__PURE__ */ jsx37(DataScript, {}),
11847
- /* @__PURE__ */ jsx37(FractalTokenizerScript, {}),
11848
- /* @__PURE__ */ jsx37(SkyChargewidgetstyles, {}),
11849
- /* @__PURE__ */ jsx37(CardBankRadioStyles, {}),
11850
- /* @__PURE__ */ jsx37(CustomModal2styles_default, {}),
11851
- /* @__PURE__ */ jsx37(DataCapScriptLoader, {}),
11852
- !autoTrigger && /* @__PURE__ */ jsxs22("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
11853
- submitBtnText,
11854
- submitBtnIcon
11855
- ] }),
11856
- !autoTrigger ? /* @__PURE__ */ jsx37(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
11857
- ] });
11858
- };
11859
-
11860
- // src/app/components/Skysystemz/EmbeddedCheckout.tsx
11861
- import { useEffect as useEffect21, useState as useState13, useMemo as useMemo2 } from "react";
11862
- import axios11 from "axios";
11863
-
11864
- // src/app/components/Skysystemz/EmbeddedCheckoutStyles.tsx
11865
- import { jsx as jsx38 } from "react/jsx-runtime";
11866
- function EmbeddedCheckoutStyles({ extraCustomCSS }) {
11867
- return /* @__PURE__ */ jsx38("style", { children: `
11868
-
11869
- .pay-amount-conatiner{
11870
- margin-top: 20px !important;
11871
- margin-bottom: 20px !important ;
11872
- }
11873
-
11874
- .frac-pay-container.pay-container {
11875
- grid-template-columns:1fr;
11876
- }
11877
-
11878
-
11879
- /* Card */
11880
- .plan-card {
11881
- width: 100%;
11882
- font-family: Inter, sans-serif;
11883
- background: #fff;
11884
- }
11885
-
11886
- /* Header */
11887
- .card-header {
11888
- padding: 12px 0 0 0;
11889
- }
11890
-
11891
- /* Button */
11892
- .collapse-btn {
11893
- width: 100%;
11894
- background: none;
11895
- border: none;
11896
- display: flex;
11897
- justify-content: space-between;
11898
- align-items: center;
11899
- cursor: pointer;
11900
- font-size: 15px;
11901
- padding: 0;
11902
- }
11903
-
11904
- /* Arrow */
11905
- .arrow {
11906
- transition: transform 0.3s ease;
11907
- height: 8px;
11908
- }
11909
-
11910
- /* Open State */
11911
- .collapse-btn.open .arrow {
11912
- transform: rotate(180deg); /* Down */
11913
- }
11914
-
11915
- /* Body */
11916
- .card-body {
11917
- padding: 0;
11918
- }
11919
-
11920
- /* Plan Header */
11921
- .plan-header {
11922
- font-size: 15px;
11923
- font-weight: 600;
11924
- }
11925
-
11926
- /* Scrollable List */
11927
- .plan-list {
11928
- max-height: 200px;
11929
- overflow-y: auto;
11930
- padding-right: 6px;
11931
- }
11932
-
11933
- /* Items */
11934
- .plan-item {
11935
- display: flex;
11936
- justify-content: space-between;
11937
- padding: 6px 0;
11938
- font-size: 14px;
11939
- }
11940
-
11941
- /* Badges */
11942
- .badge {
11943
- padding: 4px 10px;
11944
- border-radius: 12px;
11945
- font-size: 12px;
11946
- font-weight: 500;
11947
- }
11948
-
11949
- .badge-included {
11950
- background: #f1f3f5;
11951
- color: #495057;
11952
- }
11953
-
11954
- .badge-available {
11955
- background: #f8f9fa;
11956
- color: #212529;
11957
- }
11958
-
11959
- /* Helpers */
11960
- .row-between {
11961
- display: flex;
11962
- justify-content: space-between;
11963
- }
11964
-
11965
- .text-end {
11966
- text-align: right;
11967
- }
11968
-
11969
- .text-muted {
11970
- color: #6c757d;
11971
- font-size: 12px;
11972
- }
11973
-
11974
- .fw-semibold {
11975
- font-weight: 600;
11976
- }
11977
-
11978
- .mb-2 {
11979
- margin-bottom: 8px;
11980
- }
11981
-
11982
- /* Divider */
11983
- .divider {
11984
- height: 1px;
11985
- background: #e5e7eb;
11986
- margin: 8px 0;
11987
- }
11988
-
11989
- /* Collapse Animation */
11990
- .collapse {
11991
- max-height: 0;
11992
- overflow: hidden;
11993
- transition: max-height 0.3s ease;
11994
- }
11995
-
11996
- .collapse.show {
11997
- max-height: 1000px;
11998
- }
11999
- .frac-pay-container.pay-container {
12000
- grid-template-columns:1fr;
12001
- }
12002
- .frac-payment-form-div .amt-pay-con {
12003
- padding-right: 0px;
12004
- }
12005
- .frac-payment-form-div .ach-scrl {
12006
- padding-right: 0px;
12007
- gap: 10px;
12008
- max-height: fit-content !important;
12009
- min-height: fit-content !important;
12010
- overflow: hidden !important;
12011
- }
12012
- .frac-payment-form-div .frac-card-bank-radio-main {
12013
- display: flex;
12014
- flex-direction: row;
12015
- align-items: flex-start;
12016
- align-self: stretch;
12017
- border-radius: 14px;
12018
- border: none;
12019
- overflow: visible;
12020
- gap: 10px;
12021
- }
12022
- .frac-payment-form-div .frac-card-bank-radio {
12023
- display: flex;
12024
- padding: 12px 16px;
12025
- justify-content: space-between;
12026
- align-items: center;
12027
- align-self: stretch;
12028
- width: 50%;
12029
- border: 1px solid #E0DFE2;
12030
- border-radius: 10px;
12031
- box-shadow: rgba(149, 157, 165, 0.2) 0px 1px 4px;
12032
- }
12033
- .frac-payment-form-div .frac-card-bank-radio.frac-active {
12034
- background: #fff;
12035
- border: 2px solid #004eab !important;
12036
- }
12037
-
12038
- .frac-payment-form-div .form-control-frac {
12039
- border: 1px solid #dee2e6 !important;
12040
- border-radius: 0.375rem !important;
12041
- background-color: #F6F6F7;
12042
- box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
12043
- }
12044
- .frac-payment-form-div .form-control-frac:focus {
12045
- border: 1px solid #004eab !important;
12046
- }
12047
- .frac-payment-form-div .card-expiry-new {
12048
- border: none;
12049
- gap: 10px;
12050
- }
12051
- .frac-payment-form-div .exp-date-year-container {
12052
- gap: 10px;
12053
- width: 100%;
12054
- }
12055
- .frac-payment-form-div .card-type-logo-wrap{
12056
- position: absolute;
12057
- right: 10px;
12058
- max-width: 30px;
12059
- }
12060
- .detials-wrap.detials-wrap-1 {
12061
- display: flex;
12062
- flex-wrap: wrap;
12063
- }
12064
- @media screen and (max-width: 1280px) {
12065
- .frac-pay-container.pay-container {
12066
- grid-template-columns: 1fr;
12067
- border: none;
12068
- }
12069
- }
12070
- @media screen and (max-width: 899px) {
12071
- .detials-wrap {
12072
- grid-template-columns: 1fr !important;
12073
- }
12074
- .frac-payment-form-div .exp-date-year-container{
12075
- width: 100%;}
12076
-
12077
- }
12078
- @media screen and (max-width: 575px) {
12079
- .frac-payment-form-div .card-type-logo-wrap{
12080
- max-width: 30px;
12081
- }
12082
- form#ACHPaymentForm .ach-scrl {
12083
- grid-template-columns: 1fr !important;
12084
- }
12085
- @media screen and (max-width: 375px) {
12086
- .frac-payment-form-div .exp-date-year-container {
12087
- flex-direction: column;
12088
- }
12089
- .parent-pay-container {
12090
- padding: 10px;
12091
- }
12092
- }
12093
- }
12094
- .box-inner-card-text{
12095
- display: flex;
12096
- gap: 0px;
12097
- flex-direction: column;
12098
- }
12099
- .box-inner-card-text .frac-payment-type-logo {
12100
- width: 17px;
12101
- height: 17px;
12102
- aspect-ratio: 1/1;
12103
- }
12104
- .exp-date-year-wrap.form-control-frac input {
12105
- background: transparent;
12106
- border: none;
12107
- outline: none;
12108
- font-size: 1rem;
12109
- font-weight: 400;
12110
- }
12111
- .exp-date-year-wrap.form-control-frac {
12112
- display: flex;
12113
- gap: 2px;
12114
- }
12115
- .exp-date-year-wrap input.exp-month {
12116
- width: 32px;
12117
- }
12118
- .detials-wrap {
12119
- display: grid;
12120
- grid-template-columns: 1fr 1fr;
12121
- gap: 10px;
12122
- }
12123
- .detials-wrap.detials-wrap-2{
12124
- grid-template-columns: 1fr 1fr;
12125
- }
12126
- form#ACHPaymentForm .ach-scrl {
12127
- display: grid;
12128
- grid-gap: 0px 10px;
12129
- grid-template-columns: 1fr;
12130
- }
12131
- .plan-list {
12132
- max-height: 130px;
12133
- min-height: 130px;
12134
- overflow-y: auto;
12135
- padding-right: 6px;
12136
- }
12137
- .plan-list::-webkit-scrollbar {
12138
- width: 3px;
12139
- background-color: #F5F5F5;
12140
- }
12141
- .plan-list::-webkit-scrollbar-thumb {
12142
- background-color: #35254D;
12143
- }
12144
- div#cvv {
12145
- border-top-left-radius: 0;
12146
- border-bottom-left-radius: 0;
12147
- border-top: 0;
12148
- border-bottom: 0;
12149
- border-right: 0;
12150
- }
12151
- div#exp_year {
12152
- height: 36px;
12153
- width: calc(100% + 1px);
12154
- border-radius: 0;
12155
- border-top: 0;
12156
- border-bottom: 0;
12157
- border-right: 1px solid #dee2e6;
12158
- }
12159
- div#exp_month {
12160
- width: calc(100% + 1px);
12161
- border-top-right-radius: 0;
12162
- border-bottom-right-radius: 0;
12163
- border: 0;
12164
- border-right: 1px solid #dee2e6;
12165
- }
12166
- .exp-date-year-container .form-group {
12167
- flex: 1;
12168
- }
12169
- .input-main-wrap-frac{
12170
- margin:0px !important;
12171
- padding:0px !important;
12172
- }
12173
- .toggle-num-wrapper.toggle-num-wrapper-new {
12174
- border: 1px solid #dee2e6 !important;
12175
- border-radius: 0.375rem !important;
12176
- background-color: #F6F6F7;
12177
- box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
12178
- }
12179
- .toggle-num-wrapper-new div#card_number {
12180
- padding: 0px 10px;
12181
- border: none;
12182
- border-bottom: 1px solid #dee2e6;
12183
- }
12184
- .toggle-num-wrapper-new .card-crdi.card-expiry-new {
12185
- padding: 0px 10px;
12186
- }
12187
- .toggle-num-wrapper-new .input-main-wrap-frac {
12188
- height: 36px;
12189
- }
12190
- .toggle-num-wrapper-new:focus {
12191
- border: 1px solid #004eab !important;
12192
- }
12193
- .frac-card-title-main {
12194
- display: flex;
12195
- align-items: start;
12196
- gap: 4px;
12197
- flex-direction: column;
12198
- }
12199
- .parent-pay-container {
12200
- padding: 24px;
12201
- background-color: #ffffff !important;
12202
- border-radius: 15px;
12203
- min-width: 300px;
12204
- }
12205
-
12206
-
12207
- ${extraCustomCSS}
12208
-
12209
- ` });
12210
- }
12211
-
12212
- // src/app/components/Atoms/Applepay/ApplePayScriptLoader.tsx
12213
- import { useEffect as useEffect20 } from "react";
12214
- var applePayScriptLoaded = false;
12215
- var ApplePayScriptLoader = () => {
12216
- useEffect20(() => {
12217
- if (applePayScriptLoaded) return;
12218
- const existingScript = document.querySelector(
12219
- `script[src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"]`
12220
- );
12221
- if (!existingScript) {
12222
- const script2 = document.createElement("script");
12223
- script2.src = "https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js";
12224
- script2.async = true;
12225
- script2.onload = () => {
12226
- console.log("\u2705 Apple Pay script loaded");
12227
- applePayScriptLoaded = true;
12228
- console.log("ApplePaySession:", window.ApplePaySession);
12229
- };
12230
- script2.onerror = (err) => {
12231
- console.error("\u274C Apple Pay script failed", err);
12232
- };
12233
- document.head.appendChild(script2);
12234
- } else {
12235
- applePayScriptLoaded = true;
12236
- }
12237
- }, []);
12238
- return null;
12239
- };
12240
-
12241
- // src/app/components/Skysystemz/EmbeddedCheckout.tsx
12242
- import { Fragment as Fragment22, jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
12243
- var EmbeddedCheckout = ({
12244
- amount,
12245
- bankAmount,
12246
- submitBtnText = "Pay",
12247
- session_token,
12248
- customerId,
12249
- callback,
12250
- merchantName = "merchant",
12251
- isPreAuth,
12252
- surcharge = "0",
12253
- submitBtnClass,
12254
- submitBtnIcon,
12255
- isRequest,
12256
- pass_fee,
12257
- pass_fee_amount,
12258
- require3ds = false,
12259
- autoTrigger = false,
12260
- isPartial,
12261
- bankSurcharge,
12262
- partialRef,
12263
- onSubmit,
12264
- onLoad,
12265
- customCSS: customCSS2
12266
- }) => {
12267
- const [show, setShow] = useState13(false);
12268
- const [loading, setLoading] = useState13(false);
12269
- const [childHandleClose, setChildHandleClose] = useState13(() => () => {
12270
- });
12271
- const [orderGuid, setOrderGuid] = useState13(null);
12272
- const [remainingAmount, setRemainingAmount] = useState13(null);
12273
- const initialCommonProps = useMemo2(
12274
- () => ({
12275
- amount,
12276
- bankAmount,
12277
- submitBtnText,
12278
- session_token,
12279
- customerId,
12280
- callback,
12281
- merchantName,
12282
- isPreAuth,
12283
- surcharge,
12284
- submitBtnClass,
12285
- submitBtnIcon,
12286
- isRequest,
12287
- pass_fee,
12288
- pass_fee_amount,
12289
- require3ds,
12290
- autoTrigger,
12291
- setShow,
12292
- setHandleCloseRef: setChildHandleClose,
12293
- isPartial,
12294
- bankSurcharge,
12295
- partialRef
12296
- }),
12297
- [
12298
- amount,
12299
- bankAmount,
12300
- submitBtnText,
12301
- session_token,
12302
- customerId,
12303
- callback,
12304
- merchantName,
12305
- isPreAuth,
12306
- surcharge,
12307
- submitBtnClass,
12308
- submitBtnIcon,
12309
- isRequest,
12310
- pass_fee,
12311
- pass_fee_amount,
12312
- require3ds,
12313
- autoTrigger,
12314
- isPartial,
12315
- bankSurcharge,
12316
- partialRef
12317
- ]
12318
- );
12319
- const [commonProps, setCommonProps] = useState13(initialCommonProps);
12320
- useEffect21(() => {
12321
- if (show) {
12322
- setCommonProps(initialCommonProps);
12323
- }
12324
- }, [show, initialCommonProps]);
12325
- const getskyosOrderDetails = async () => {
12326
- var _a;
12327
- setLoading(true);
12328
- try {
12329
- const res = await axios11.get(
12330
- `${masterBaseUrl}api/v1/gateway/get-order-details/${session_token}`,
12331
- { params: { isPartial, partialRef } }
12332
- );
12333
- if ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.result) {
12334
- const data = res.data.data;
12335
- if (data == null ? void 0 : data.orderGuid) {
12336
- setOrderGuid(data == null ? void 0 : data.orderGuid);
12337
- setRemainingAmount(data == null ? void 0 : data.remainingAmount);
12338
- }
12339
- setCommonProps((prev) => __spreadProps(__spreadValues({}, prev), {
12340
- amount: data.amount,
12341
- pass_fee_amount: data.pass_fee_amount,
12342
- pass_fee: data.pass_fee
12343
- }));
12344
- }
12345
- } catch (error) {
12346
- console.log("error while getting skyosorderdeatils", error);
12347
- } finally {
12348
- setLoading(false);
12349
- }
12350
- };
12351
- useEffect21(() => {
11043
+ useEffect16(() => {
12352
11044
  if (show && isPartial && partialRef) {
12353
11045
  getskyosOrderDetails();
12354
11046
  }
12355
11047
  }, [show, isPartial, partialRef]);
12356
- console.log(onLoad, "onLoad");
12357
- useEffect21(() => {
12358
- const supported = !!window.ApplePaySession;
12359
- let canPay = false;
12360
- if (supported) {
12361
- try {
12362
- canPay = window.ApplePaySession.canMakePayments();
12363
- } catch (e) {
12364
- }
12365
- }
12366
- console.log(`ApplePaySession: ${supported}, canMakePayments: ${canPay}`);
12367
- }, []);
12368
- return /* @__PURE__ */ jsxs23(Fragment22, { children: [
12369
- /* @__PURE__ */ jsx39("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
12370
- /* @__PURE__ */ jsx39(DataScript, {}),
12371
- /* @__PURE__ */ jsx39(FractalTokenizerScript, {}),
12372
- /* @__PURE__ */ jsx39(SkyChargewidgetstyles, {}),
12373
- /* @__PURE__ */ jsx39(CardBankRadioStyles, {}),
12374
- /* @__PURE__ */ jsx39(CustomModal2styles_default, {}),
12375
- /* @__PURE__ */ jsx39(DataCapScriptLoader, {}),
12376
- /* @__PURE__ */ jsx39(ApplePayScriptLoader, {}),
12377
- /* @__PURE__ */ jsx39(EmbeddedCheckoutStyles, { extraCustomCSS: customCSS2 }),
12378
- !autoTrigger && /* @__PURE__ */ jsxs23("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: [
12379
11057
  submitBtnText,
12380
11058
  submitBtnIcon
12381
11059
  ] }),
12382
- !autoTrigger ? /* @__PURE__ */ jsx39(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx39(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx39(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
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 }))
12383
11061
  ] });
12384
11062
  };
12385
11063
  export {
12386
11064
  AddCardEasyPay as AddCard,
12387
11065
  CardOnFile,
12388
- EmbeddedCheckout,
12389
11066
  GetPaymentPage,
12390
11067
  PartialPayment,
12391
11068
  PaymentWidget,