@fractalpay/fractalpay-next-dev 0.0.258 → 0.0.260

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.260",
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,8 @@ var DataCapFields = ({
3438
3360
  tokenKey,
3439
3361
  setLoader,
3440
3362
  isAddCard,
3441
- isEmbedded
3363
+ customCSS: extraCss,
3364
+ height
3442
3365
  }) => {
3443
3366
  const iframeId = "datacap-iframe";
3444
3367
  const resolverRef = useRef2(null);
@@ -3464,20 +3387,10 @@ var DataCapFields = ({
3464
3387
 
3465
3388
  `;
3466
3389
  }
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
- `;
3390
+ if (extraCss) {
3391
+ customCSS += extraCss;
3480
3392
  }
3393
+ console.log(customCSS, "customCSS");
3481
3394
  const initialize = async () => {
3482
3395
  setLoader == null ? void 0 : setLoader(true);
3483
3396
  setIframeReady(false);
@@ -3509,18 +3422,13 @@ var DataCapFields = ({
3509
3422
  };
3510
3423
  initialize();
3511
3424
  }, [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");
3425
+ window.requestDcToken = () => {
3426
+ return new Promise((resolve, reject) => {
3427
+ setLoader == null ? void 0 : setLoader(true);
3428
+ resolverRef.current = { resolve, reject };
3429
+ window.DatacapHostedWebToken.requestToken();
3430
+ });
3431
+ };
3524
3432
  return /* @__PURE__ */ jsx18(
3525
3433
  "iframe",
3526
3434
  {
@@ -3532,7 +3440,7 @@ var DataCapFields = ({
3532
3440
  },
3533
3441
  style: {
3534
3442
  width: "100%",
3535
- height: "250px",
3443
+ height: `${height || "250px"}`,
3536
3444
  border: "none",
3537
3445
  opacity: iframeReady ? 1 : 0,
3538
3446
  transition: "opacity 0.3s ease"
@@ -6800,7 +6708,7 @@ var FractalFieldsAddCardSky_default = FractalFieldsAddCardSky;
6800
6708
 
6801
6709
  // src/app/components/AddCard/AddCardSky.tsx
6802
6710
  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 }) {
6711
+ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks, merchantName, signCheckbox, checkedSignCheckbox, onCheckSign, cancelbtnClass, savebtnClass, inputClass, isDual, customCSS: customCSS2, height }) {
6804
6712
  var _a, _b;
6805
6713
  const [loading, setLoading] = useState7(false);
6806
6714
  const [errorIframe, setErrorIframe] = useState7("");
@@ -7313,7 +7221,9 @@ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks,
7313
7221
  {
7314
7222
  isOpen: true,
7315
7223
  tokenKey: dcToken,
7316
- setLoader: setLoadingIframe
7224
+ setLoader: setLoadingIframe,
7225
+ customCSS: customCSS2,
7226
+ height
7317
7227
  }
7318
7228
  ) }),
7319
7229
  /* @__PURE__ */ jsxs16("div", { className: "form-group", children: [
@@ -8692,7 +8602,7 @@ function PartialPayment(props) {
8692
8602
  }
8693
8603
 
8694
8604
  // src/app/components/Skysystemz/PayButtonWithForm.tsx
8695
- import { useEffect as useEffect19, useState as useState12, useMemo } from "react";
8605
+ import { useEffect as useEffect16, useState as useState11, useMemo } from "react";
8696
8606
 
8697
8607
  // src/app/components/Skysystemz/SkyChargewidgetstyles.tsx
8698
8608
  import { jsx as jsx29 } from "react/jsx-runtime";
@@ -8928,17 +8838,6 @@ function SkyChargewidgetstyles() {
8928
8838
  text-align : left !important;
8929
8839
  text-transform: uppercase !important;
8930
8840
  }
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
8841
  .form-control-frac{
8943
8842
  display: block;
8944
8843
  width: 100%;
@@ -8973,7 +8872,7 @@ function SkyChargewidgetstyles() {
8973
8872
  }
8974
8873
  .exp-date-year-container .form-group {
8975
8874
  flex: 1;
8976
- padding-left:.75rem !important;
8875
+ padding-left:.75rem;
8977
8876
  }
8978
8877
  .card-crdi {
8979
8878
  display: flex;
@@ -8990,7 +8889,7 @@ function SkyChargewidgetstyles() {
8990
8889
  }
8991
8890
  .exp-date-year-container .form-group-frac{
8992
8891
  flex:1;
8993
- // padding: 0px !important
8892
+ padding: 0px !important
8994
8893
 
8995
8894
  }
8996
8895
 
@@ -9491,54 +9390,13 @@ margin:0px !important;
9491
9390
  padding:0px !important;
9492
9391
  }
9493
9392
 
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
-
9393
+
9536
9394
 
9537
9395
  ` });
9538
9396
  }
9539
9397
 
9540
9398
  // src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
9541
- import { useCallback, useEffect as useEffect18, useRef as useRef12, useState as useState11 } from "react";
9399
+ import { useCallback, useEffect as useEffect15, useRef as useRef10, useState as useState10 } from "react";
9542
9400
  import axios9 from "axios";
9543
9401
  import Swal5 from "sweetalert2";
9544
9402
 
@@ -9679,600 +9537,109 @@ function CheckoutWrapper({ clientSecret, onSuccess, showLoader, setError, sessio
9679
9537
  // src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
9680
9538
  import { IoArrowBack as IoArrowBack4 } from "react-icons/io5";
9681
9539
  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
9540
+ import { Fragment as Fragment18, jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
9541
+ 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 }) => {
9542
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
9543
+ const hasRunRef = useRef10(false);
9544
+ const cardListRunRef = useRef10(false);
9545
+ const threeDSContainerRef = useRef10(null);
9546
+ const [activetab, setActive] = useState10("card");
9547
+ const [activeList, setActiveList] = useState10("card");
9548
+ const [cardData, setCardData] = useState10();
9549
+ const [cardError, setCardError] = useState10({});
9550
+ const [achData, setAchData] = useState10();
9551
+ const [achError, setAchError] = useState10({});
9552
+ const [saveACHinfo, setSaveACHinfo] = useState10(false);
9553
+ const [saveCardInfo, setSaveCardInfo] = useState10(false);
9554
+ const [error, setError] = useState10("");
9555
+ const [errorIframe, setErrorIframe] = useState10("");
9556
+ const [success, setSuccess] = useState10(false);
9557
+ let [tranId, setTranId] = useState10("");
9558
+ const [loading, setLoading] = useState10(false);
9559
+ const [loading2, setLoading2] = useState10(false);
9560
+ const [loadingIframe, setLoadingIframe] = useState10(false);
9561
+ const [cardList, setCardList] = useState10([]);
9562
+ const [bankList, setBankList] = useState10([]);
9563
+ const [selectedCard, setSelectedCard] = useState10();
9564
+ const [cashDiscount, setCashDiscount] = useState10(Number(amount));
9565
+ const [activeinCard, setActiveinCard] = useState10("form");
9566
+ const [activeinBank, setActiveinBank] = useState10("form");
9567
+ const [isBankActive, setIsBankActive] = useState10(false);
9568
+ const [processingFee, setProcessingFee] = useState10(0);
9569
+ const [clientSecret, setClientSecret] = useState10("");
9570
+ const [errorMessage, setErrorMessage] = useState10(null);
9571
+ const [initialLoader, setInitialLoader] = useState10(false);
9572
+ const [is3DSEnable, setIs3DSEnable] = useState10(false);
9573
+ const [stripeResponse, setStripeResponse] = useState10(null);
9574
+ const [orderLoader, setOrderLoader] = useState10(false);
9575
+ const [orderGuid, setOrderGuid] = useState10(ordGuid || null);
9576
+ const [partialAmount, setPartialAmount] = useState10("");
9577
+ const [partialError, setPartialError] = useState10("");
9578
+ const [remainingAmount, setRemainingAmount] = useState10("");
9579
+ const [paymentGateway, setPaymentGateway] = useState10();
9580
+ const [dcToken, setDCToken] = useState10();
9581
+ const [isBankConsentChecked, setIsBankConsentChecked] = useState10(false);
9582
+ const [errorBankConsent, setErrorBankConsent] = useState10("");
9583
+ let mastercard2 = S3Url + "widget/mc-img.svg";
9584
+ let visa2 = S3Url + "widget/visa-img.svg";
9585
+ let americanexp2 = S3Url + "widget/ae-img.svg";
9586
+ let discover2 = S3Url + "widget/discover-img.svg";
9587
+ let defaultcard2 = S3Url + "widget/card.svg";
9588
+ let trash2 = S3Url + "widget/Trash.svg";
9589
+ let bank2 = S3Url + "widget/bank.svg";
9590
+ let secure2 = S3Url + "widget/secure-img.png";
9591
+ let pov2 = S3Url + "widget/pov-by.png";
9592
+ let pax2 = S3Url + "widget/pax.svg";
9593
+ let cardicon = S3Url + "widget/cardicon.svg";
9594
+ let bankicon = S3Url + "widget/bankicon.svg";
9595
+ const showLoader = () => setLoading(true);
9596
+ const hideLoader = () => setLoading(false);
9597
+ const CalculateCashDiscount = (amount2, surcharge2) => {
9598
+ const surchargeVal = (parseFloat(surcharge2) || 0) / 100;
9599
+ const originalAmount = amount2 / (1 + surchargeVal);
9600
+ return Math.round(originalAmount * 100) / 100;
9885
9601
  };
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
9602
+ const tokenizerRef = useRef10(null);
9603
+ const fractalStyles = {
9604
+ input: {
9605
+ "font-family": "'Inter', sans-serif",
9606
+ "font-size": "16px",
9607
+ "color": "#212529",
9608
+ "background-color": "transparent",
9609
+ "padding": "0px",
9610
+ "appearance": "none",
9611
+ "outline": "none",
9612
+ "border": "none",
9613
+ "box-shadow": "none"
9614
+ },
9615
+ ":focus": {
9616
+ "color": "#212529",
9617
+ "outline": "none",
9618
+ "border": "none"
9619
+ },
9620
+ "::placeholder": {
9621
+ "color": "#212529"
9893
9622
  }
9894
9623
  };
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;
9624
+ const handleCharge = async (data) => {
9625
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
9906
9626
  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
9627
+ let dataObj = __spreadValues({
9628
+ pass_fee_amount: Number(amount) - cashDiscount,
9629
+ pass_fee,
9630
+ Token: data == null ? void 0 : data.Token,
9631
+ amount: partialAmount ? partialAmount : amount,
9632
+ postal_code: data == null ? void 0 : data.postalCode,
9633
+ require3ds,
9634
+ isPartial,
9635
+ orderGuid: orderGuid || ordGuid
9636
+ }, saveCardInfo ? {
9637
+ card: {
9638
+ postal_code: cardData == null ? void 0 : cardData.zipCode,
9639
+ customer_id: customerId,
9640
+ gateway_token: (data == null ? void 0 : data.Token) || (data == null ? void 0 : data.gateway_token),
9641
+ name: cardData == null ? void 0 : cardData.cardName
9939
9642
  }
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
9643
  } : null);
10277
9644
  if (require3ds && (data == null ? void 0 : data.stripe_3ds_auth_id)) {
10278
9645
  dataObj.stripe_3ds_auth_id = data == null ? void 0 : data.stripe_3ds_auth_id;
@@ -10402,23 +9769,14 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10402
9769
  setAchError(errors);
10403
9770
  return Object.keys(errors).length > 0 || !isBankConsentChecked;
10404
9771
  };
10405
- const completeFractalFlow = async (tokenizeData, intentid, typeoftoken) => {
9772
+ const completeFractalFlow = async (tokenizeData, intentid) => {
10406
9773
  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
10407
9774
  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
9775
  let token = tokenizeData;
10417
9776
  let verifyandsaveresp = await axios9.post(`${masterBaseUrl}api/v1/gateway/verify-and-save/${session_token}`, {
10418
9777
  token,
10419
9778
  require3ds,
10420
- pass_fee,
10421
- typeoftoken
9779
+ pass_fee
10422
9780
  });
10423
9781
  if ((verifyandsaveresp == null ? void 0 : verifyandsaveresp.status) == 200) {
10424
9782
  let responsetemp = (_a2 = verifyandsaveresp == null ? void 0 : verifyandsaveresp.data) == null ? void 0 : _a2.data;
@@ -10450,7 +9808,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10450
9808
  }
10451
9809
  };
10452
9810
  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;
9811
+ 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
9812
  try {
10455
9813
  const requestOptions = {
10456
9814
  method: "POST",
@@ -10491,29 +9849,17 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10491
9849
  three_ds_data
10492
9850
  );
10493
9851
  } 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);
9852
+ setErrorIframe(error2);
10507
9853
  hideLoader();
10508
9854
  }
10509
9855
  if (tokenizeData == null ? void 0 : tokenizeData.token) {
10510
9856
  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)) {
9857
+ 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
9858
  setError("Something went wrong. Please try again later.");
10513
9859
  }
10514
9860
  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);
9861
+ if (!((_o2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _o2.challenge_url)) {
9862
+ completeFractalFlow(tokenizeData == null ? void 0 : tokenizeData.token, (_p2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _p2.id);
10517
9863
  } else {
10518
9864
  hideLoader();
10519
9865
  setStripeResponse(__spreadProps(__spreadValues({}, ThreedsData == null ? void 0 : ThreedsData.data), {
@@ -10529,11 +9875,11 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10529
9875
  console.log(error2, "error");
10530
9876
  let readableMessage = "Something went wrong!";
10531
9877
  try {
10532
- const rawError = ((_u2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _u2.data) || (error2 == null ? void 0 : error2.message) || "";
9878
+ const rawError = ((_q2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _q2.data) || (error2 == null ? void 0 : error2.message) || "";
10533
9879
  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)) || [];
9880
+ const lines = ((_s2 = (_r2 = errorText.split) == null ? void 0 : _r2.call(errorText, "\n")) == null ? void 0 : _s2.filter(Boolean)) || [];
10535
9881
  const lastLine = lines.at(-1) || "";
10536
- const parts = (_x = lastLine.split) == null ? void 0 : _x.call(lastLine, ": ");
9882
+ const parts = (_t = lastLine.split) == null ? void 0 : _t.call(lastLine, ": ");
10537
9883
  readableMessage = (parts == null ? void 0 : parts.length) > 1 ? parts.pop().trim() : lastLine.trim() || readableMessage;
10538
9884
  } catch (e) {
10539
9885
  readableMessage = "Something went wrong!";
@@ -10541,8 +9887,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10541
9887
  setError(readableMessage);
10542
9888
  callback({
10543
9889
  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
9890
+ result: (_v = (_u = error2 == null ? void 0 : error2.response) == null ? void 0 : _u.data) == null ? void 0 : _v.result,
9891
+ statusCode: (_w = error2 == null ? void 0 : error2.response) == null ? void 0 : _w.status
10546
9892
  });
10547
9893
  }
10548
9894
  };
@@ -10959,8 +10305,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10959
10305
  });
10960
10306
  };
10961
10307
  const handlechargeCustomer = async (e) => {
10962
- var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
10963
- e == null ? void 0 : e.currentTarget.blur();
10308
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
10309
+ e.currentTarget.blur();
10964
10310
  if (loading) return;
10965
10311
  let customer_id = customerId;
10966
10312
  let card_id = selectedCard == null ? void 0 : selectedCard.id;
@@ -11007,6 +10353,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
11007
10353
  statusCode: (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.status
11008
10354
  });
11009
10355
  hideLoader();
10356
+ setError(((_i2 = (_h2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _h2.data) == null ? void 0 : _i2.message) || "Something went wrong!");
11010
10357
  }
11011
10358
  } else {
11012
10359
  setError("Please Select A Card/Bank");
@@ -11082,21 +10429,21 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
11082
10429
  setOrderLoader(false);
11083
10430
  }
11084
10431
  };
11085
- useEffect18(() => {
10432
+ useEffect15(() => {
11086
10433
  if (!show && !autoTrigger) {
11087
10434
  hasRunRef.current = false;
11088
10435
  cardListRunRef.current = false;
11089
10436
  }
11090
10437
  }, [show, autoTrigger]);
11091
- useEffect18(() => {
11092
- if (!hasRunRef.current && (show || autoTrigger) && onLoad) {
10438
+ useEffect15(() => {
10439
+ if (!hasRunRef.current && (show || autoTrigger)) {
11093
10440
  getPaymentDetails();
11094
10441
  if (isPartial && !partialRef) {
11095
10442
  crateOrderFrac();
11096
10443
  }
11097
10444
  }
11098
- }, [show, autoTrigger, isPartial, onLoad]);
11099
- useEffect18(() => {
10445
+ }, [show, autoTrigger, isPartial]);
10446
+ useEffect15(() => {
11100
10447
  if ((show || autoTrigger) && pass_fee_amount) {
11101
10448
  let cashdisc = Number(amount) - Number(pass_fee_amount);
11102
10449
  if (cashdisc && !isNaN(cashdisc)) {
@@ -11158,7 +10505,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
11158
10505
  console.error("3DS Auth failed \u274C", status);
11159
10506
  setError(`3DS Authentication ${status}`);
11160
10507
  };
11161
- useEffect18(() => {
10508
+ useEffect15(() => {
11162
10509
  if (setHandleCloseRef) {
11163
10510
  setHandleCloseRef(() => handleClose);
11164
10511
  }
@@ -11176,95 +10523,24 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
11176
10523
  setPartialError("");
11177
10524
  }
11178
10525
  };
11179
- useEffect18(() => {
10526
+ useEffect15(() => {
11180
10527
  if (typeof FractalTokenizer === "undefined") return;
11181
10528
  const tokenizer = new FractalTokenizer({
11182
10529
  styles: {}
11183
10530
  });
11184
10531
  }, []);
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: () => {
10532
+ console.log(activeinCard === "list", "activeinCard", activeList);
10533
+ return /* @__PURE__ */ jsxs19(Fragment18, { children: [
10534
+ initialLoader && /* @__PURE__ */ jsx32(Loader_default, { loading: initialLoader }),
10535
+ error && /* @__PURE__ */ jsx32("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx32(ErrorCardMessage_default, { error, onClose: handleClose }) }),
10536
+ errorIframe && /* @__PURE__ */ jsx32("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx32(ErrorCardMessage_default, { error: errorIframe, onClose: () => {
11261
10537
  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(
10538
+ } }) }),
10539
+ !error && !errorIframe && /* @__PURE__ */ jsxs19(Fragment18, { children: [
10540
+ (loading || loading2 || loadingIframe) && /* @__PURE__ */ jsx32(Loader_default, { loading: loading || loading2 || loadingPrev || orderLoader || loadingIframe }),
10541
+ /* @__PURE__ */ jsxs19("div", { className: "frac-card-payment-page frac-form frac-new-form", children: [
10542
+ /* @__PURE__ */ jsx32("div", { ref: threeDSContainerRef, style: { width: "100%", height: "100%" } }),
10543
+ (stripeResponse == null ? void 0 : stripeResponse.challenge_url) ? /* @__PURE__ */ jsx32(
11268
10544
  ThreeDSChallenge,
11269
10545
  {
11270
10546
  containerRef: threeDSContainerRef,
@@ -11274,33 +10550,40 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
11274
10550
  onSuccess: handleSuccess,
11275
10551
  onError: handleError
11276
10552
  }
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" }) }) })
10553
+ ) : /* @__PURE__ */ jsxs19("div", { className: "parent-pay-container", children: [
10554
+ /* @__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: [
10555
+ /* @__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" }) }),
10556
+ /* @__PURE__ */ jsx32("defs", { children: /* @__PURE__ */ jsx32("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx32("rect", { width: "16", height: "16", fill: "white" }) }) })
11281
10557
  ] }) }),
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: [
10558
+ /* @__PURE__ */ jsx32("div", { className: "pay-main-logo-res" }),
10559
+ /* @__PURE__ */ jsxs19("div", { className: "pay-container", children: [
10560
+ /* @__PURE__ */ jsxs19("div", { className: "pay-header pay-conatiner-one", children: [
10561
+ /* @__PURE__ */ jsxs19("div", { className: "pay-conatiner-one-first", children: [
10562
+ /* @__PURE__ */ jsxs19("div", { className: "pay-logo-container", children: [
10563
+ /* @__PURE__ */ jsx32("div", { className: "pay-main-logo" }),
10564
+ /* @__PURE__ */ jsx32("h1", { className: "pay-heading", children: "Pay" }),
10565
+ (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ jsxs19("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList"), children: [
11290
10566
  " ",
11291
- /* @__PURE__ */ jsx36(IoArrowBack4, {}),
10567
+ /* @__PURE__ */ jsx32(IoArrowBack4, {}),
11292
10568
  " Back"
11293
10569
  ] })
11294
10570
  ] }),
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 })
10571
+ /* @__PURE__ */ jsx32("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs19("div", { className: "pay-amount-conatiner", children: [
10572
+ /* @__PURE__ */ jsx32("small", { className: "pay-payment-amount", children: "Select payment type" }),
10573
+ /* @__PURE__ */ jsxs19("div", { className: "frac-card-bank-radio-main", children: [
10574
+ /* @__PURE__ */ jsx32(CardBankRadio, { label: "Card", amount: (_a = Number(amount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
10575
+ !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx32(CardBankRadio, { label: "Bank", amount: (_b = Number(bankAmount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab })
11300
10576
  ] }),
11301
- isPartial && /* @__PURE__ */ jsxs21("div", { className: "frac-partial-payment-input", children: [
11302
- /* @__PURE__ */ jsx36("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
11303
- /* @__PURE__ */ jsx36(
10577
+ pass_fee && activetab === "card" && cashDiscount && Number(amount) - Number(cashDiscount) > 0 ? /* @__PURE__ */ jsxs19("div", { className: "frac-cash-discount-fee", children: [
10578
+ /* @__PURE__ */ jsxs19("small", { children: [
10579
+ activetab === "card" ? "Cash Discount" : "Cash Discount Savings",
10580
+ " "
10581
+ ] }),
10582
+ /* @__PURE__ */ jsx32("p", { children: formatUSD((Number(amount) - Number(cashDiscount)).toFixed(2)) })
10583
+ ] }) : null,
10584
+ isPartial && /* @__PURE__ */ jsxs19("div", { className: "frac-partial-payment-input", children: [
10585
+ /* @__PURE__ */ jsx32("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
10586
+ /* @__PURE__ */ jsx32(
11304
10587
  NumericFormat2,
11305
10588
  {
11306
10589
  prefix: "$",
@@ -11324,403 +10607,331 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
11324
10607
  }
11325
10608
  }
11326
10609
  ),
11327
- partialError && /* @__PURE__ */ jsx36("span", { className: "error-span", children: partialError })
10610
+ partialError && /* @__PURE__ */ jsx32("span", { className: "error-span", children: partialError })
11328
10611
  ] })
11329
10612
  ] }) })
11330
10613
  ] }),
11331
- /* @__PURE__ */ jsxs21("div", { className: "pay-conatiner-one-last", children: [
11332
- /* @__PURE__ */ jsx36("img", { src: secure2, alt: "" }),
11333
- /* @__PURE__ */ jsx36("img", { src: pov2, alt: "" }),
10614
+ /* @__PURE__ */ jsxs19("div", { className: "pay-conatiner-one-last", children: [
10615
+ /* @__PURE__ */ jsx32("img", { src: secure2, alt: "" }),
10616
+ /* @__PURE__ */ jsx32("img", { src: pov2, alt: "" }),
11334
10617
  "Secure payments powered by Fractal"
11335
10618
  ] })
11336
10619
  ] }),
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 })
10620
+ /* @__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: [
10621
+ /* @__PURE__ */ jsxs19("div", { id: "ach", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent", children: [
10622
+ /* @__PURE__ */ jsxs19("div", { className: "frac-heading-card-wrap", children: [
10623
+ /* @__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: [
10624
+ " ",
10625
+ /* @__PURE__ */ jsx32(IoArrowBack4, {})
10626
+ ] }) }),
10627
+ /* @__PURE__ */ jsx32("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
11342
10628
  ] }),
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" })
10629
+ /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "8px", margin: "8px 0px 19px 0px" }, children: [
10630
+ /* @__PURE__ */ jsx32("img", { src: visa2, alt: "", width: 33 }),
10631
+ /* @__PURE__ */ jsx32("img", { src: mastercard2, width: 33, alt: "" }),
10632
+ /* @__PURE__ */ jsx32("img", { src: americanexp2, alt: "", width: 33 }),
10633
+ /* @__PURE__ */ jsx32("img", { src: discover2, width: 33, alt: "" })
10634
+ ] }),
10635
+ activeinCard === "list" && (cardList == null ? void 0 : cardList.length) > 0 ? /* @__PURE__ */ jsxs19(Fragment18, { children: [
10636
+ /* @__PURE__ */ jsx32(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Card", ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
10637
+ setActiveinCard("form");
10638
+ } }),
10639
+ /* @__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)) }) })
10640
+ ] }) : paymentGateway == 32 ? /* @__PURE__ */ jsxs19("form", { id: "paymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, onKeyDown: (e) => {
10641
+ if (e.key === "Enter" && loading) {
10642
+ e.preventDefault();
10643
+ e.stopPropagation();
10644
+ }
10645
+ }, children: [
10646
+ /* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
10647
+ /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10648
+ /* @__PURE__ */ jsx32("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
10649
+ /* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
10650
+ const value = e.target.value;
10651
+ if (/^[a-zA-Z\s]*$/.test(value)) {
10652
+ handleCardChange("cardName", value);
10653
+ }
10654
+ } }),
10655
+ (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
11374
10656
  ] }),
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,
10657
+ /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10658
+ /* @__PURE__ */ jsx32("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
10659
+ /* @__PURE__ */ jsx32("div", { className: "toggle-num-wrapper", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx32(
10660
+ FractalFields_default,
11512
10661
  {
11513
- isOpen: show || autoTrigger,
11514
- tokenKey: dcToken,
11515
- setLoader: activeinCard === "form" ? setLoadingIframe : null,
11516
- isEmbedded: onSubmit ? true : false
10662
+ fractalStyles,
10663
+ tokenizerRef,
10664
+ isSky: true
11517
10665
  }
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
- ] }) })
10666
+ ) })
11570
10667
  ] }),
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",
10668
+ /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10669
+ /* @__PURE__ */ jsx32("label", { htmlFor: "zip", children: "ZIP" }),
10670
+ /* @__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) }),
10671
+ (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
10672
+ ] }),
10673
+ 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: [
10674
+ /* @__PURE__ */ jsx32(
10675
+ "input",
10676
+ {
10677
+ type: "checkbox",
10678
+ id: "save_card",
10679
+ className: "toggle-checkbox",
10680
+ checked: saveCardInfo,
10681
+ onChange: (e) => setSaveCardInfo(e.target.checked)
10682
+ }
10683
+ ),
10684
+ /* @__PURE__ */ jsx32("label", { htmlFor: "save_card", className: "toggle-label" }),
10685
+ /* @__PURE__ */ jsx32("label", { htmlFor: "save_card", children: "Save card for future payments " }),
10686
+ /* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-wrapper", children: [
10687
+ /* @__PURE__ */ jsx32("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs19(
10688
+ "svg",
11674
10689
  {
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
10690
+ xmlns: "http://www.w3.org/2000/svg",
10691
+ width: "20",
10692
+ height: "20",
10693
+ viewBox: "0 0 20 20",
10694
+ fill: "none",
10695
+ children: [
10696
+ /* @__PURE__ */ jsx32("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
10697
+ /* @__PURE__ */ jsx32(
10698
+ "path",
10699
+ {
10700
+ 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",
10701
+ fill: "#161616"
10702
+ }
10703
+ )
10704
+ ]
11683
10705
  }
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: [
10706
+ ) }),
10707
+ /* @__PURE__ */ jsx32("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs19("p", { children: [
11713
10708
  "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."
10709
+ /* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
10710
+ " permission to charge this credit card for agreed-upon purchases in the future."
11716
10711
  ] }) })
11717
10712
  ] })
10713
+ ] }) })
10714
+ ] }),
10715
+ /* @__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)) }) })
10716
+ ] }) : /* @__PURE__ */ jsxs19("form", { id: "PaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, onKeyDown: (e) => {
10717
+ if (e.key === "Enter" && loading) {
10718
+ e.preventDefault();
10719
+ e.stopPropagation();
10720
+ }
10721
+ }, children: [
10722
+ /* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
10723
+ /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10724
+ /* @__PURE__ */ jsx32("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
10725
+ /* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
10726
+ const value = e.target.value;
10727
+ if (/^[a-zA-Z\s]*$/.test(value)) {
10728
+ handleCardChange("cardName", value);
10729
+ }
10730
+ } }),
10731
+ (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
11718
10732
  ] }),
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
- ] }) }) })
10733
+ /* @__PURE__ */ jsx32("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx32(
10734
+ DataCapFields,
10735
+ {
10736
+ isOpen: show || autoTrigger,
10737
+ tokenKey: dcToken,
10738
+ setLoader: activeinCard === "form" ? setLoadingIframe : null
10739
+ }
10740
+ ) }),
10741
+ /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10742
+ /* @__PURE__ */ jsx32("label", { htmlFor: "zip", children: "ZIP" }),
10743
+ /* @__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) }),
10744
+ (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
10745
+ ] }),
10746
+ 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: [
10747
+ /* @__PURE__ */ jsx32(
10748
+ "input",
10749
+ {
10750
+ type: "checkbox",
10751
+ id: "save_card",
10752
+ className: "toggle-checkbox",
10753
+ checked: saveCardInfo,
10754
+ onChange: (e) => setSaveCardInfo(e.target.checked)
10755
+ }
10756
+ ),
10757
+ /* @__PURE__ */ jsx32("label", { htmlFor: "save_card", className: "toggle-label" }),
10758
+ /* @__PURE__ */ jsx32("label", { htmlFor: "save_card", children: "Save card for future payments " }),
10759
+ /* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-wrapper", children: [
10760
+ /* @__PURE__ */ jsx32("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs19(
10761
+ "svg",
10762
+ {
10763
+ xmlns: "http://www.w3.org/2000/svg",
10764
+ width: "20",
10765
+ height: "20",
10766
+ viewBox: "0 0 20 20",
10767
+ fill: "none",
10768
+ children: [
10769
+ /* @__PURE__ */ jsx32("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
10770
+ /* @__PURE__ */ jsx32(
10771
+ "path",
10772
+ {
10773
+ 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",
10774
+ fill: "#161616"
10775
+ }
10776
+ )
10777
+ ]
10778
+ }
10779
+ ) }),
10780
+ /* @__PURE__ */ jsx32("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs19("p", { children: [
10781
+ "If checked, I agree to give the ",
10782
+ /* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
10783
+ " permission to charge this credit card for agreed-upon purchases in the future."
10784
+ ] }) })
10785
+ ] })
10786
+ ] }) })
10787
+ ] }),
10788
+ /* @__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)) }) })
10789
+ ] })
10790
+ ] }),
10791
+ /* @__PURE__ */ jsx32("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: /* @__PURE__ */ jsxs19(Fragment18, { children: [
10792
+ /* @__PURE__ */ jsxs19("div", { className: "frac-heading-card-wrap", children: [
10793
+ /* @__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: [
10794
+ " ",
10795
+ /* @__PURE__ */ jsx32(IoArrowBack4, {})
10796
+ ] }) }),
10797
+ /* @__PURE__ */ jsx32("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
10798
+ ] }),
10799
+ activeinBank === "list" && (bankList == null ? void 0 : bankList.length) > 0 ? /* @__PURE__ */ jsxs19(Fragment18, { children: [
10800
+ /* @__PURE__ */ jsx32(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Banks", ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
10801
+ setActiveinBank("form");
10802
+ } }),
10803
+ /* @__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)) }) })
10804
+ ] }) : /* @__PURE__ */ jsxs19("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
10805
+ if (e.key === "Enter" && loading) {
10806
+ e.preventDefault();
10807
+ e.stopPropagation();
10808
+ }
10809
+ }, children: [
10810
+ /* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: {
10811
+ minHeight: "444px",
10812
+ maxHeight: "444px"
10813
+ }, children: [
10814
+ /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10815
+ /* @__PURE__ */ jsx32("label", { htmlFor: "nameonaccount", children: "Name on account" }),
10816
+ /* @__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 }),
10817
+ (achError == null ? void 0 : achError.name) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
10818
+ ] }),
10819
+ /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10820
+ /* @__PURE__ */ jsx32("label", { htmlFor: "routingnumber", children: "Routing number" }),
10821
+ /* @__PURE__ */ jsx32(
10822
+ "input",
10823
+ {
10824
+ type: "text",
10825
+ id: "routingnumber",
10826
+ className: "form-control-frac",
10827
+ maxLength: 9,
10828
+ placeholder: "000000000",
10829
+ name: "routingNumber",
10830
+ value: (_m = achData == null ? void 0 : achData.routingNumber) != null ? _m : "",
10831
+ onChange: handleChangeAch
10832
+ }
10833
+ ),
10834
+ (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.routingNumber })
10835
+ ] }),
10836
+ /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10837
+ /* @__PURE__ */ jsx32("label", { htmlFor: "accountnumber", children: "Account number" }),
10838
+ /* @__PURE__ */ jsx32(
10839
+ "input",
10840
+ {
10841
+ type: "text",
10842
+ id: "accountnumber",
10843
+ className: "form-control-frac",
10844
+ maxLength: 16,
10845
+ placeholder: "0000000000",
10846
+ name: "accountNumber",
10847
+ value: (_n = achData == null ? void 0 : achData.accountNumber) != null ? _n : "",
10848
+ onChange: handleChangeAch
10849
+ }
10850
+ ),
10851
+ (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.accountNumber })
10852
+ ] }),
10853
+ /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10854
+ /* @__PURE__ */ jsx32("label", { htmlFor: "confirmaccountnumber", children: "Confirm account number" }),
10855
+ /* @__PURE__ */ jsx32(
10856
+ "input",
10857
+ {
10858
+ type: "text",
10859
+ id: "confirmaccountnumber",
10860
+ className: "form-control-frac",
10861
+ maxLength: 16,
10862
+ placeholder: "0000000000",
10863
+ name: "confirmAccountNumber",
10864
+ value: (_o = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _o : "",
10865
+ onChange: handleChangeAch
10866
+ }
10867
+ ),
10868
+ (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.confirmAccountNumber })
10869
+ ] }),
10870
+ /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10871
+ /* @__PURE__ */ jsx32("label", { htmlFor: "bankname", children: "Bank name" }),
10872
+ /* @__PURE__ */ jsx32(
10873
+ "input",
10874
+ {
10875
+ type: "text",
10876
+ id: "bankname",
10877
+ className: "form-control-frac",
10878
+ maxLength: 100,
10879
+ placeholder: "My Bank",
10880
+ name: "bankName",
10881
+ value: (_p = achData == null ? void 0 : achData.bankName) != null ? _p : "",
10882
+ onChange: handleChangeAch
10883
+ }
10884
+ ),
10885
+ (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.bankName })
10886
+ ] }),
10887
+ ((achData == null ? void 0 : achData.accountType) === "business saving" || (achData == null ? void 0 : achData.accountType) === "business checking") && /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10888
+ /* @__PURE__ */ jsx32("label", { htmlFor: "companyName", children: "Company name" }),
10889
+ /* @__PURE__ */ jsx32(
10890
+ "input",
10891
+ {
10892
+ type: "text",
10893
+ id: "companyName",
10894
+ className: "form-control-frac",
10895
+ maxLength: 100,
10896
+ placeholder: "My Company",
10897
+ name: "companyName",
10898
+ value: (_q = achData == null ? void 0 : achData.companyName) != null ? _q : "",
10899
+ onChange: handleChangeAch
10900
+ }
10901
+ ),
10902
+ (achError == null ? void 0 : achError.companyName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.companyName })
10903
+ ] }),
10904
+ /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10905
+ /* @__PURE__ */ jsx32("label", { htmlFor: "accounttype", children: "Select account type" }),
10906
+ /* @__PURE__ */ jsxs19("select", { name: "accountType", id: "accounttype", className: "form-control-frac", value: (_r = achData == null ? void 0 : achData.accountType) != null ? _r : "", onChange: handleChangeAch, children: [
10907
+ /* @__PURE__ */ jsx32("option", { value: "", children: "Select account" }),
10908
+ accountTypes.map((type) => /* @__PURE__ */ jsx32("option", { value: type.value, children: type.label }, type.value))
10909
+ ] })
10910
+ ] }),
10911
+ /* @__PURE__ */ jsxs19("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
10912
+ /* @__PURE__ */ jsx32("input", { type: "checkbox", id: "achconsent", className: "", checked: isBankConsentChecked, onChange: (e) => {
10913
+ setIsBankConsentChecked(e.target.checked);
10914
+ if (e.target.checked) {
10915
+ setErrorBankConsent("");
10916
+ }
10917
+ } }),
10918
+ /* @__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.` })
10919
+ ] }),
10920
+ errorBankConsent && /* @__PURE__ */ jsx32("span", { className: "error-span", children: errorBankConsent }),
10921
+ customerId && /* @__PURE__ */ jsxs19("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
10922
+ /* @__PURE__ */ jsx32("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
10923
+ /* @__PURE__ */ jsx32("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save Bank" })
10924
+ ] }),
10925
+ saveACHinfo && /* @__PURE__ */ jsx32("div", { className: "form-group-frac saveachtext", children: /* @__PURE__ */ jsxs19("p", { children: [
10926
+ "If checked, I agree to give the ",
10927
+ /* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
10928
+ " permission to charge this bank account for agreed-upon purchases in the future."
10929
+ ] }) })
10930
+ ] }),
10931
+ /* @__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)) }) })
10932
+ ] })
10933
+ ] }) })
10934
+ ] }) }) }) })
11724
10935
  ] })
11725
10936
  ] })
11726
10937
  ] })
@@ -11731,7 +10942,7 @@ var ModelContentSky_default = ModelContentSky;
11731
10942
 
11732
10943
  // src/app/components/Skysystemz/PayButtonWithForm.tsx
11733
10944
  import axios10 from "axios";
11734
- import { Fragment as Fragment21, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
10945
+ import { Fragment as Fragment19, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
11735
10946
  var PaymentWidget = ({
11736
10947
  amount,
11737
10948
  bankAmount,
@@ -11753,12 +10964,12 @@ var PaymentWidget = ({
11753
10964
  bankSurcharge,
11754
10965
  partialRef
11755
10966
  }) => {
11756
- const [show, setShow] = useState12(autoTrigger || false);
11757
- const [loading, setLoading] = useState12(false);
11758
- const [childHandleClose, setChildHandleClose] = useState12(() => () => {
10967
+ const [show, setShow] = useState11(autoTrigger || false);
10968
+ const [loading, setLoading] = useState11(false);
10969
+ const [childHandleClose, setChildHandleClose] = useState11(() => () => {
11759
10970
  });
11760
- const [orderGuid, setOrderGuid] = useState12(null);
11761
- const [remainingAmount, setRemainingAmount] = useState12(null);
10971
+ const [orderGuid, setOrderGuid] = useState11(null);
10972
+ const [remainingAmount, setRemainingAmount] = useState11(null);
11762
10973
  const initialCommonProps = useMemo(
11763
10974
  () => ({
11764
10975
  amount,
@@ -11805,8 +11016,8 @@ var PaymentWidget = ({
11805
11016
  partialRef
11806
11017
  ]
11807
11018
  );
11808
- const [commonProps, setCommonProps] = useState12(initialCommonProps);
11809
- useEffect19(() => {
11019
+ const [commonProps, setCommonProps] = useState11(initialCommonProps);
11020
+ useEffect16(() => {
11810
11021
  if (show) {
11811
11022
  setCommonProps(initialCommonProps);
11812
11023
  }
@@ -11837,556 +11048,29 @@ var PaymentWidget = ({
11837
11048
  setLoading(false);
11838
11049
  }
11839
11050
  };
11840
- useEffect19(() => {
11051
+ useEffect16(() => {
11841
11052
  if (show && isPartial && partialRef) {
11842
11053
  getskyosOrderDetails();
11843
11054
  }
11844
11055
  }, [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: [
11056
+ return /* @__PURE__ */ jsxs20(Fragment19, { children: [
11057
+ /* @__PURE__ */ jsx33("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
11058
+ /* @__PURE__ */ jsx33(DataScript, {}),
11059
+ /* @__PURE__ */ jsx33(FractalTokenizerScript, {}),
11060
+ /* @__PURE__ */ jsx33(SkyChargewidgetstyles, {}),
11061
+ /* @__PURE__ */ jsx33(CardBankRadioStyles, {}),
11062
+ /* @__PURE__ */ jsx33(CustomModal2styles_default, {}),
11063
+ /* @__PURE__ */ jsx33(DataCapScriptLoader, {}),
11064
+ !autoTrigger && /* @__PURE__ */ jsxs20("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
12380
11065
  submitBtnText,
12381
11066
  submitBtnIcon
12382
11067
  ] }),
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 }))
11068
+ !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
11069
  ] });
12385
11070
  };
12386
11071
  export {
12387
11072
  AddCardEasyPay as AddCard,
12388
11073
  CardOnFile,
12389
- EmbeddedCheckout,
12390
11074
  GetPaymentPage,
12391
11075
  PartialPayment,
12392
11076
  PaymentWidget,