@fractalpay/fractalpay-next-dev 0.0.258 → 0.0.259

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