@fractalpay/fractalpay-next-dev 0.0.242 → 0.0.244

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.
Files changed (4) hide show
  1. package/dist/index.d.ts +42 -16
  2. package/dist/index.js +1251 -391
  3. package/dist/index.js.map +1 -1
  4. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -39,7 +39,7 @@ var require_package = __commonJS({
39
39
  "package.json"(exports, module) {
40
40
  module.exports = {
41
41
  name: "@fractalpay/fractalpay-next-dev",
42
- version: "0.0.242",
42
+ version: "0.0.244",
43
43
  private: false,
44
44
  type: "module",
45
45
  scripts: {
@@ -113,8 +113,25 @@ 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 {
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 {
118
135
  position: fixed; /* Fixed position to cover the viewport */
119
136
  top: 0;
120
137
  left: 0;
@@ -126,7 +143,7 @@ var LoaderStyle = (props) => {
126
143
  /* background: rgba(255, 255, 0, 0.01); Adjust the blur effect */
127
144
  background-color: rgba(31, 29, 29, 0.52); /* Semi-transparent black background */
128
145
 
129
- backdrop-filter: blur(.5px); /* Blur effect */
146
+ backdrop-filter: blur(6.5px); /* Blur effect */
130
147
  z-index: 999999999999 !important; /* Ensure it's on top of other elements */
131
148
  transform: translate(0%, 0%) !important
132
149
  }
@@ -201,10 +218,11 @@ var LoaderStyle_default = LoaderStyle;
201
218
 
202
219
  // src/app/components/Loader/Loader.tsx
203
220
  import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
204
- var Loader = (props) => {
221
+ var Loader = (_a) => {
222
+ var _b = _a, { intensity = "light" } = _b, props = __objRest(_b, ["intensity"]);
205
223
  return /* @__PURE__ */ jsxs(Fragment, { children: [
206
224
  /* @__PURE__ */ jsx2(LoaderStyle_default, {}),
207
- (props == null ? void 0 : props.loading) && /* @__PURE__ */ jsx2("div", { className: "loader", children: /* @__PURE__ */ jsxs("div", { className: "lds-ellipsis", children: [
225
+ (props == null ? void 0 : props.loading) && /* @__PURE__ */ jsx2("div", { className: `loader-${intensity}`, children: /* @__PURE__ */ jsxs("div", { className: "lds-ellipsis", children: [
208
226
  /* @__PURE__ */ jsx2("div", {}),
209
227
  /* @__PURE__ */ jsx2("div", {}),
210
228
  /* @__PURE__ */ jsx2("div", {}),
@@ -2908,7 +2926,7 @@ function ErrorCardMszStyle() {
2908
2926
 
2909
2927
  // src/app/components/ErrorCardMessage/ErrorCardMessage.tsx
2910
2928
  import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
2911
- var ErrorCardMessage = ({ onClose, error }) => {
2929
+ var ErrorCardMessage = ({ onClose, error, autoTrigger = false }) => {
2912
2930
  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
2913
2931
  /* @__PURE__ */ jsx12(ErrorCardMszStyle, {}),
2914
2932
  /* @__PURE__ */ jsx12("div", { className: "card-error", children: /* @__PURE__ */ jsx12("div", { className: "payment-error-container", children: /* @__PURE__ */ jsxs6("div", { className: "error-icon", children: [
@@ -2917,7 +2935,7 @@ var ErrorCardMessage = ({ onClose, error }) => {
2917
2935
  /* @__PURE__ */ jsx12("div", { className: "payment-error-text", children: error }),
2918
2936
  /* @__PURE__ */ jsx12("div", { className: "thank-you-text", children: "Try again later " })
2919
2937
  ] }),
2920
- /* @__PURE__ */ jsx12("div", { className: "error-btn-div", children: /* @__PURE__ */ jsx12("button", { onClick: onClose, children: "OK" }) })
2938
+ !autoTrigger && /* @__PURE__ */ jsx12("div", { className: "error-btn-div", children: /* @__PURE__ */ jsx12("button", { onClick: onClose, children: "OK" }) })
2921
2939
  ] }) }) })
2922
2940
  ] });
2923
2941
  };
@@ -2934,14 +2952,28 @@ var socketClient_default = socket;
2934
2952
 
2935
2953
  // src/app/components/Atoms/CardBankRadio/CardBankRadio.tsx
2936
2954
  import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
2937
- var CardBankRadio = (props) => {
2938
- return /* @__PURE__ */ jsx13(Fragment7, { children: /* @__PURE__ */ jsxs7(
2955
+ var CardBankRadio = (_a) => {
2956
+ var _b = _a, { skydesign = false, savingsText } = _b, props = __objRest(_b, ["skydesign", "savingsText"]);
2957
+ const savingsBadgeClass = `frac-saving-badge ${skydesign ? "frac-saving-badge-corner" : "frac-saving-badge-corner frac-saving-badge-with-radio"}`;
2958
+ return /* @__PURE__ */ jsx13(Fragment7, { children: /* @__PURE__ */ jsx13(
2939
2959
  "div",
2940
2960
  {
2941
2961
  className: `frac-card-bank-radio ${props.activetab === props.value ? "frac-active" : ""}`,
2942
2962
  onClick: () => props.onChange(props.value),
2943
2963
  role: "radio",
2944
- children: [
2964
+ children: skydesign ? /* @__PURE__ */ jsxs7(Fragment7, { children: [
2965
+ /* @__PURE__ */ jsxs7("div", { className: "frac-card-title-main", children: [
2966
+ /* @__PURE__ */ jsxs7("div", { className: "box-inner-card-text", children: [
2967
+ /* @__PURE__ */ jsx13("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
2968
+ /* @__PURE__ */ jsx13("div", { className: "frac-card-label-text", children: props.label })
2969
+ ] }),
2970
+ /* @__PURE__ */ jsx13("div", { className: "frac-card-label", children: /* @__PURE__ */ jsx13("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) }) })
2971
+ ] }),
2972
+ savingsText ? /* @__PURE__ */ jsx13("button", { type: "button", className: savingsBadgeClass, children: savingsText }) : null,
2973
+ /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13("input", { name: "paymenttype", checked: props.activetab === props.value, type: "hidden", value: props.value, onChange: (e) => {
2974
+ props.onChange(e.target.value);
2975
+ } }) })
2976
+ ] }) : /* @__PURE__ */ jsxs7(Fragment7, { children: [
2945
2977
  /* @__PURE__ */ jsxs7("div", { className: "frac-card-title-main", children: [
2946
2978
  /* @__PURE__ */ jsx13("img", { src: props.label.toLowerCase() === "card" ? defaultcard : props.label.toLowerCase() === "reader" ? pax : bankNew, className: "frac-payment-type-logo", alt: "" }),
2947
2979
  /* @__PURE__ */ jsxs7("div", { className: "frac-card-label", children: [
@@ -2949,10 +2981,11 @@ var CardBankRadio = (props) => {
2949
2981
  /* @__PURE__ */ jsx13("div", { className: "frac-card-label-amount", children: formatUSD(props.amount) })
2950
2982
  ] })
2951
2983
  ] }),
2984
+ savingsText ? /* @__PURE__ */ jsx13("button", { type: "button", className: savingsBadgeClass, children: savingsText }) : null,
2952
2985
  /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13("input", { name: "paymenttype", checked: props.activetab === props.value, type: "radio", value: props.value, onChange: (e) => {
2953
2986
  props.onChange(e.target.value);
2954
2987
  } }) })
2955
- ]
2988
+ ] })
2956
2989
  }
2957
2990
  ) });
2958
2991
  };
@@ -2977,6 +3010,7 @@ function CardBankRadioStyles({}) {
2977
3010
  justify-content: space-between;
2978
3011
  align-items: center;
2979
3012
  align-self: stretch;
3013
+ position: relative;
2980
3014
  }
2981
3015
 
2982
3016
  input[type="radio"] {
@@ -3034,6 +3068,28 @@ function CardBankRadioStyles({}) {
3034
3068
  .frac-card-bank-radio.frac-active {
3035
3069
  background: #F6F6F7;
3036
3070
  }
3071
+
3072
+ .frac-saving-badge {
3073
+ padding: 1px 7px;
3074
+ border: 1px solid #9ad7ab;
3075
+ border-radius: 999px;
3076
+ background: #e8f8ec;
3077
+ color: #1e6a34;
3078
+ font-size: 10px;
3079
+ font-weight: 600;
3080
+ line-height: 15px;
3081
+ pointer-events: none;
3082
+ }
3083
+
3084
+ .frac-saving-badge-corner {
3085
+ position: absolute;
3086
+ top: 8px;
3087
+ right: 10px;
3088
+ }
3089
+
3090
+ .frac-saving-badge-with-radio {
3091
+ right: 34px;
3092
+ }
3037
3093
  ` });
3038
3094
  }
3039
3095
 
@@ -3211,7 +3267,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
3211
3267
  {
3212
3268
  id: "card_number",
3213
3269
  className: "form-control card-number-new",
3214
- style: { height: `${isSky ? "36px" : "46px"}`, display: "inline-block" }
3270
+ style: { height: `${isSky ? "36px" : "46px"}` }
3215
3271
  }
3216
3272
  ),
3217
3273
  /* @__PURE__ */ jsx17("div", { className: "card-crdi card-expiry-new", children: /* @__PURE__ */ jsxs10("div", { className: "exp-date-year-container", children: [
@@ -3220,7 +3276,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
3220
3276
  {
3221
3277
  id: "exp_month",
3222
3278
  className: "form-control required card-cvv-in",
3223
- style: { height: "36px", display: "inline-block" }
3279
+ style: { height: "36px", display: "block", minHeight: "36px" }
3224
3280
  }
3225
3281
  ) }),
3226
3282
  /* @__PURE__ */ jsx17("div", { className: "exp-year form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
@@ -3228,7 +3284,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
3228
3284
  {
3229
3285
  id: "exp_year",
3230
3286
  className: "form-control required card-cvv-in",
3231
- style: { height: "36px", display: "inline-block" }
3287
+ style: { height: "36px", display: "block", minHeight: "36px" }
3232
3288
  }
3233
3289
  ) }),
3234
3290
  /* @__PURE__ */ jsx17("div", { className: "security-digit form-group input-main-wrap-frac", children: /* @__PURE__ */ jsx17(
@@ -3236,7 +3292,7 @@ var FractalFields = ({ fractalStyles, tokenizerRef, isAddCard = false, isSky = f
3236
3292
  {
3237
3293
  id: "cvv",
3238
3294
  className: "form-control card-cvv-in required",
3239
- style: { height: "36px", display: "inline-block" }
3295
+ style: { height: "36px", display: "block", minHeight: "36px" }
3240
3296
  }
3241
3297
  ) })
3242
3298
  ] }) })
@@ -3359,7 +3415,8 @@ var DataCapFields = ({
3359
3415
  isOpen,
3360
3416
  tokenKey,
3361
3417
  setLoader,
3362
- isAddCard
3418
+ isAddCard,
3419
+ isEmbedded
3363
3420
  }) => {
3364
3421
  const iframeId = "datacap-iframe";
3365
3422
  const resolverRef = useRef2(null);
@@ -3385,6 +3442,20 @@ var DataCapFields = ({
3385
3442
 
3386
3443
  `;
3387
3444
  }
3445
+ if (isEmbedded) {
3446
+ customCSS += `
3447
+
3448
+ input {
3449
+ background-color: #F6F6F7;
3450
+ box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1;
3451
+ }
3452
+
3453
+ select {
3454
+ background-color: #F6F6F7;
3455
+ box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
3456
+ }
3457
+ `;
3458
+ }
3388
3459
  const initialize = async () => {
3389
3460
  setLoader == null ? void 0 : setLoader(true);
3390
3461
  setIframeReady(false);
@@ -3423,6 +3494,7 @@ var DataCapFields = ({
3423
3494
  window.DatacapHostedWebToken.requestToken();
3424
3495
  });
3425
3496
  };
3497
+ console.log(setLoader, "loadingIframe");
3426
3498
  return /* @__PURE__ */ jsx18(
3427
3499
  "iframe",
3428
3500
  {
@@ -8795,6 +8867,17 @@ function SkyChargewidgetstyles() {
8795
8867
  text-align : left !important;
8796
8868
  text-transform: uppercase !important;
8797
8869
  }
8870
+ .frac-form .frac-fee-text{
8871
+ display: block;
8872
+ padding: 10px 0 4px;
8873
+ font-family: 'IBM Plex Mono', monospace !important;
8874
+ color: #727272 !important;
8875
+ font-size: 12px;
8876
+ line-height: 1.4;
8877
+ }
8878
+ .frac-form .frac-fee-amount{
8879
+ color: #c62828 !important;
8880
+ }
8798
8881
  .form-control-frac{
8799
8882
  display: block;
8800
8883
  width: 100%;
@@ -8829,7 +8912,7 @@ function SkyChargewidgetstyles() {
8829
8912
  }
8830
8913
  .exp-date-year-container .form-group {
8831
8914
  flex: 1;
8832
- padding-left:.75rem;
8915
+ padding-left:.75rem !important;
8833
8916
  }
8834
8917
  .card-crdi {
8835
8918
  display: flex;
@@ -8846,7 +8929,7 @@ function SkyChargewidgetstyles() {
8846
8929
  }
8847
8930
  .exp-date-year-container .form-group-frac{
8848
8931
  flex:1;
8849
- padding: 0px !important
8932
+ // padding: 0px !important
8850
8933
 
8851
8934
  }
8852
8935
 
@@ -9347,7 +9430,16 @@ margin:0px !important;
9347
9430
  padding:0px !important;
9348
9431
  }
9349
9432
 
9350
-
9433
+
9434
+ .toggle-num-wrapper-new div#card_number {
9435
+ display: block !important;
9436
+ }
9437
+ .toggle-num-wrapper-new .input-main-wrap-frac {
9438
+ height: 36px;
9439
+ }
9440
+ .toggle-num-wrapper-new:focus {
9441
+ border: 1px solid #004eab !important;
9442
+ }
9351
9443
 
9352
9444
  ` });
9353
9445
  }
@@ -9494,10 +9586,162 @@ function CheckoutWrapper({ clientSecret, onSuccess, showLoader, setError, sessio
9494
9586
  // src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
9495
9587
  import { IoArrowBack as IoArrowBack4 } from "react-icons/io5";
9496
9588
  import { NumericFormat as NumericFormat2 } from "react-number-format";
9497
- import { Fragment as Fragment18, jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
9498
- 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 }) => {
9499
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
9589
+
9590
+ // src/app/components/ErrorCardMessage/ErrorCardOverlaystyle.tsx
9591
+ import { jsx as jsx32 } from "react/jsx-runtime";
9592
+ function ErrorCardOverlayStyle() {
9593
+ return /* @__PURE__ */ jsx32("style", { children: `
9594
+ .card-error-overlay .logo-container {
9595
+ display: flex;
9596
+ justify-content: center;
9597
+ align-items: center;
9598
+ margin-bottom: -50px; /* Adjust this to overlap the content */
9599
+ z-index: 10;
9600
+ }
9601
+
9602
+ .card-error-overlay .client-logo {
9603
+ max-width: 100px;
9604
+ height: auto;
9605
+ object-fit: contain;
9606
+ display: block;
9607
+ }
9608
+
9609
+
9610
+ .card-error-overlay .error-icon-overlay {
9611
+ display: flex;
9612
+ flex-direction: column;
9613
+ align-items: center;
9614
+ gap: 12px;
9615
+ min-height: 116px;
9616
+ z-index: 2;
9617
+ }
9618
+
9619
+ .card-error-overlay .circle {
9620
+ width: 50px;
9621
+ height: 50px;
9622
+ border: 1px solid red;
9623
+ border-radius: 50%;
9624
+ display: flex;
9625
+ justify-content: center;
9626
+ align-items: center;
9627
+ margin-bottom:20px
9628
+ }
9629
+
9630
+ .card-error-overlay .circle .fa-times {
9631
+ font-size: 30px;
9632
+ color: red;
9633
+ }
9634
+
9635
+ .card-error-overlay .error-text-overlay {
9636
+ display: flex;
9637
+ flex-direction: column;
9638
+ justify-content: center;
9639
+ align-items: center;
9640
+ gap: 4px;
9641
+ // width: 227px;
9642
+ }
9643
+
9644
+ .card-error-overlay .payment-error-text-overlay {
9645
+ font-family: 'Inter', sans-serif;
9646
+ font-weight: 500;
9647
+ font-size: 18px;
9648
+ line-height: 21px;
9649
+ text-align: center;
9650
+ letter-spacing: -0.02em;
9651
+ color: #161616;
9652
+ }
9653
+
9654
+ .card-error-overlay .thank-you-text-overlay {
9655
+ font-family: 'Inter', sans-serif;
9656
+ font-weight: 500;
9657
+ font-size: 16px;
9658
+ line-height: 18px;
9659
+ text-align: center;
9660
+ letter-spacing: -0.02em;
9661
+ color: #161616 !important;
9662
+ opacity: 0.5;
9663
+ padding-top:10px
9664
+ }
9665
+
9666
+ .card-error-overlay .error-btn-div-overlay{
9667
+ padding-top:20px;
9668
+ width: 100%;
9669
+
9670
+ }
9671
+ .card-error-overlay .error-btn-div-overlay button{
9672
+ outline: 0;
9673
+ height: 46px;
9674
+ font-size: 16px;
9675
+ background: #727272;
9676
+ border: none;
9677
+ display: block;
9678
+ color: #fff;
9679
+ width: 100%;
9680
+ border-radius: 180px;
9681
+ margin: 10px 0;
9682
+ text-decoration: none;
9683
+ }
9684
+ .card-error-overlay .error-btn-div-overlay button:hover, .card-error-overlay .error-btn-div-overlay button:focus {
9685
+ background: #222;
9686
+ color: #fff;
9687
+ cursor: pointer;
9688
+ }
9689
+ .payment-error-container-overlay {
9690
+ width: fit-content;
9691
+ position: relative;
9692
+ top: 50%;
9693
+ left: 50%;
9694
+ transform: translate(-50%, -50%);
9695
+ background: rgba(255, 255, 255, 0.15);
9696
+ backdrop-filter: blur(12px);
9697
+ -webkit-backdrop-filter: blur(12px);
9698
+ border-radius: 12px;
9699
+ z-index: 11111;
9700
+ max-width: 240px;
9701
+ min-width: 224px;
9702
+ padding: 20px;
9703
+ margin-left: 17px !important;
9704
+ }
9705
+ .card-error-overlay {
9706
+ position: absolute;
9707
+ top: 0;
9708
+ left: 0;
9709
+ width: 100%;
9710
+ height: 100%;
9711
+ background: rgb(87 87 87 / 15%);
9712
+ backdrop-filter: blur(2px);
9713
+ -webkit-backdrop-filter: blur(12px);
9714
+ z-index: 1111;
9715
+ }
9716
+ ` });
9717
+ }
9718
+
9719
+ // src/app/components/ErrorCardMessage/ErrorCardOverlay.tsx
9720
+ import { Fragment as Fragment18, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
9721
+ var ErrorCardOverlay = ({ onClose, error, autoTrigger = false }) => {
9722
+ return /* @__PURE__ */ jsxs19(Fragment18, { children: [
9723
+ /* @__PURE__ */ jsx33(ErrorCardOverlayStyle, {}),
9724
+ /* @__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: [
9725
+ /* @__PURE__ */ jsx33("div", { className: "circle", children: /* @__PURE__ */ jsx33("i", { className: "fa fa-times", "aria-hidden": "true" }) }),
9726
+ /* @__PURE__ */ jsxs19("div", { className: "error-text-overlay", children: [
9727
+ /* @__PURE__ */ jsx33("div", { className: "payment-error-text-overlay", children: error }),
9728
+ /* @__PURE__ */ jsx33("div", { className: "thank-you-text-overlay", children: "Try again later " })
9729
+ ] }),
9730
+ !autoTrigger && /* @__PURE__ */ jsx33("div", { className: "error-btn-div-overlay", children: /* @__PURE__ */ jsx33("button", { onClick: onClose, children: "OK" }) })
9731
+ ] }) }) })
9732
+ ] });
9733
+ };
9734
+ var ErrorCardOverlay_default = ErrorCardOverlay;
9735
+
9736
+ // src/app/components/Atoms/ModelContentSky/ModelContentSky.tsx
9737
+ import { Fragment as Fragment19, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
9738
+ 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 }) => {
9739
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
9500
9740
  const hasRunRef = useRef10(false);
9741
+ const cardFormRef = useRef10(null);
9742
+ const bankFormRef = useRef10(null);
9743
+ const expiryYearRef = useRef10(null);
9744
+ const expiryMonthRef = useRef10(null);
9501
9745
  const cardListRunRef = useRef10(false);
9502
9746
  const threeDSContainerRef = useRef10(null);
9503
9747
  const [activetab, setActive] = useState10("card");
@@ -9535,7 +9779,6 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
9535
9779
  const [remainingAmount, setRemainingAmount] = useState10("");
9536
9780
  const [paymentGateway, setPaymentGateway] = useState10();
9537
9781
  const [dcToken, setDCToken] = useState10();
9538
- console.log(show, "show");
9539
9782
  let mastercard2 = S3Url + "widget/mc-img.svg";
9540
9783
  let visa2 = S3Url + "widget/visa-img.svg";
9541
9784
  let americanexp2 = S3Url + "widget/ae-img.svg";
@@ -9548,6 +9791,10 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
9548
9791
  let pax2 = S3Url + "widget/pax.svg";
9549
9792
  let cardicon = S3Url + "widget/cardicon.svg";
9550
9793
  let bankicon = S3Url + "widget/bankicon.svg";
9794
+ let defualtcardborder = S3Url + "widget/defualtcardborder.svg";
9795
+ let unionicon = S3Url + "widget/unionpay.svg";
9796
+ let dinersicon = S3Url + "widget/diners.svg";
9797
+ let jcbicon = S3Url + "widget/jcb.svg";
9551
9798
  const showLoader = () => setLoading(true);
9552
9799
  const hideLoader = () => setLoading(false);
9553
9800
  const CalculateCashDiscount = (amount2, surcharge2) => {
@@ -9555,6 +9802,10 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
9555
9802
  const originalAmount = amount2 / (1 + surchargeVal);
9556
9803
  return Math.round(originalAmount * 100) / 100;
9557
9804
  };
9805
+ const cardFeeAmount = Number(pass_fee_amount || 0);
9806
+ const bankFeeAmount = Number(bankSurcharge || 0);
9807
+ const bankSavingsAmount = Math.max(bankFeeAmount > 0 ? cardFeeAmount - bankFeeAmount : cardFeeAmount, 0);
9808
+ const bankSavingsText = bankSavingsAmount > 0 ? `Save ${formatUSD(bankSavingsAmount.toFixed(2))}` : "";
9558
9809
  const tokenizerRef = useRef10(null);
9559
9810
  const fractalStyles = {
9560
9811
  input: {
@@ -9761,7 +10012,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
9761
10012
  }
9762
10013
  };
9763
10014
  const handleFractalTokenFlow = async () => {
9764
- var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t, _u, _v, _w;
10015
+ 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;
9765
10016
  try {
9766
10017
  const requestOptions = {
9767
10018
  method: "POST",
@@ -9802,17 +10053,29 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
9802
10053
  three_ds_data
9803
10054
  );
9804
10055
  } catch (error2) {
9805
- setErrorIframe(error2);
10056
+ console.log(error2, "error in tokenization");
10057
+ let readableMessage = "Something went wrong!";
10058
+ try {
10059
+ const rawError = ((_n2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _n2.data) || (error2 == null ? void 0 : error2.message) || "";
10060
+ const errorText = typeof rawError === "string" ? rawError : JSON.stringify(rawError);
10061
+ const lines = ((_p2 = (_o2 = errorText.split) == null ? void 0 : _o2.call(errorText, "\n")) == null ? void 0 : _p2.filter(Boolean)) || [];
10062
+ const lastLine = lines.at(-1) || "";
10063
+ const parts = (_q2 = lastLine.split) == null ? void 0 : _q2.call(lastLine, ": ");
10064
+ readableMessage = (parts == null ? void 0 : parts.length) > 1 ? parts.pop().trim() : lastLine.trim() || readableMessage;
10065
+ } catch (e) {
10066
+ readableMessage = "Something went wrong!";
10067
+ }
10068
+ setErrorIframe(readableMessage);
9806
10069
  hideLoader();
9807
10070
  }
9808
10071
  if (tokenizeData == null ? void 0 : tokenizeData.token) {
9809
10072
  let ThreedsData = tokenizeData == null ? void 0 : tokenizeData.stripe_three_ds_response;
9810
- if (require3ds && !ThreedsData && (ThreedsData == null ? void 0 : ThreedsData.status) === "200 OK" && ((_n2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _n2.challenge_url)) {
10073
+ if (require3ds && !ThreedsData && (ThreedsData == null ? void 0 : ThreedsData.status) === "200 OK" && ((_r2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _r2.challenge_url)) {
9811
10074
  setError("Something went wrong. Please try again later.");
9812
10075
  }
9813
10076
  if (require3ds) {
9814
- if (!((_o2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _o2.challenge_url)) {
9815
- completeFractalFlow(tokenizeData == null ? void 0 : tokenizeData.token, (_p2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _p2.id);
10077
+ if (!((_s2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _s2.challenge_url)) {
10078
+ completeFractalFlow(tokenizeData == null ? void 0 : tokenizeData.token, (_t2 = ThreedsData == null ? void 0 : ThreedsData.data) == null ? void 0 : _t2.id);
9816
10079
  } else {
9817
10080
  hideLoader();
9818
10081
  setStripeResponse(__spreadProps(__spreadValues({}, ThreedsData == null ? void 0 : ThreedsData.data), {
@@ -9828,11 +10091,11 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
9828
10091
  console.log(error2, "error");
9829
10092
  let readableMessage = "Something went wrong!";
9830
10093
  try {
9831
- const rawError = ((_q2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _q2.data) || (error2 == null ? void 0 : error2.message) || "";
10094
+ const rawError = ((_u2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _u2.data) || (error2 == null ? void 0 : error2.message) || "";
9832
10095
  const errorText = typeof rawError === "string" ? rawError : JSON.stringify(rawError);
9833
- const lines = ((_s2 = (_r2 = errorText.split) == null ? void 0 : _r2.call(errorText, "\n")) == null ? void 0 : _s2.filter(Boolean)) || [];
10096
+ const lines = ((_w = (_v = errorText.split) == null ? void 0 : _v.call(errorText, "\n")) == null ? void 0 : _w.filter(Boolean)) || [];
9834
10097
  const lastLine = lines.at(-1) || "";
9835
- const parts = (_t = lastLine.split) == null ? void 0 : _t.call(lastLine, ": ");
10098
+ const parts = (_x = lastLine.split) == null ? void 0 : _x.call(lastLine, ": ");
9836
10099
  readableMessage = (parts == null ? void 0 : parts.length) > 1 ? parts.pop().trim() : lastLine.trim() || readableMessage;
9837
10100
  } catch (e) {
9838
10101
  readableMessage = "Something went wrong!";
@@ -9840,8 +10103,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
9840
10103
  setError(readableMessage);
9841
10104
  callback({
9842
10105
  error: readableMessage,
9843
- result: (_v = (_u = error2 == null ? void 0 : error2.response) == null ? void 0 : _u.data) == null ? void 0 : _v.result,
9844
- statusCode: (_w = error2 == null ? void 0 : error2.response) == null ? void 0 : _w.status
10106
+ result: (_z = (_y = error2 == null ? void 0 : error2.response) == null ? void 0 : _y.data) == null ? void 0 : _z.result,
10107
+ statusCode: (_A = error2 == null ? void 0 : error2.response) == null ? void 0 : _A.status
9845
10108
  });
9846
10109
  }
9847
10110
  };
@@ -10256,8 +10519,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10256
10519
  });
10257
10520
  };
10258
10521
  const handlechargeCustomer = async (e) => {
10259
- var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
10260
- e.currentTarget.blur();
10522
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
10523
+ e == null ? void 0 : e.currentTarget.blur();
10261
10524
  if (loading) return;
10262
10525
  let customer_id = customerId;
10263
10526
  let card_id = selectedCard == null ? void 0 : selectedCard.id;
@@ -10304,7 +10567,6 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10304
10567
  statusCode: (_g2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _g2.status
10305
10568
  });
10306
10569
  hideLoader();
10307
- setError(((_i2 = (_h2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _h2.data) == null ? void 0 : _i2.message) || "Something went wrong!");
10308
10570
  }
10309
10571
  } else {
10310
10572
  setError("Please Select A Card/Bank");
@@ -10326,7 +10588,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10326
10588
  }
10327
10589
  };
10328
10590
  const getPaymentDetails = async () => {
10329
- var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2;
10591
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2;
10330
10592
  try {
10331
10593
  showLoader();
10332
10594
  const res = await axios9.get(`${masterBaseUrl}api/v1/gateway/get-payment-details/${session_token}`, {
@@ -10349,6 +10611,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10349
10611
  result: (_n2 = (_m2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _m2.data) == null ? void 0 : _n2.result,
10350
10612
  statusCode: (_o2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _o2.status
10351
10613
  });
10614
+ setError(((_q2 = (_p2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _p2.data) == null ? void 0 : _q2.message) || (error2 == null ? void 0 : error2.message) || "Something went wrong");
10352
10615
  hideLoader();
10353
10616
  }
10354
10617
  };
@@ -10386,13 +10649,13 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10386
10649
  }
10387
10650
  }, [show, autoTrigger]);
10388
10651
  useEffect15(() => {
10389
- if (!hasRunRef.current && (show || autoTrigger)) {
10652
+ if (!hasRunRef.current && (show || autoTrigger) && onLoad) {
10390
10653
  getPaymentDetails();
10391
10654
  if (isPartial && !partialRef) {
10392
10655
  crateOrderFrac();
10393
10656
  }
10394
10657
  }
10395
- }, [show, autoTrigger, isPartial]);
10658
+ }, [show, autoTrigger, isPartial, onLoad]);
10396
10659
  useEffect15(() => {
10397
10660
  if ((show || autoTrigger) && pass_fee_amount) {
10398
10661
  let cashdisc = Number(amount) - Number(pass_fee_amount);
@@ -10479,18 +10742,89 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10479
10742
  styles: {}
10480
10743
  });
10481
10744
  }, []);
10482
- console.log(activeinCard === "list", "activeinCard", activeList);
10483
- return /* @__PURE__ */ jsxs19(Fragment18, { children: [
10484
- initialLoader && /* @__PURE__ */ jsx32(Loader_default, { loading: initialLoader }),
10485
- error && /* @__PURE__ */ jsx32("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx32(ErrorCardMessage_default, { error, onClose: handleClose }) }),
10486
- errorIframe && /* @__PURE__ */ jsx32("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" }, children: /* @__PURE__ */ jsx32(ErrorCardMessage_default, { error: errorIframe, onClose: () => {
10745
+ const stateRef = useRef10({
10746
+ activeinBank,
10747
+ activeinCard,
10748
+ activetab
10749
+ });
10750
+ useEffect15(() => {
10751
+ stateRef.current = {
10752
+ activeinBank,
10753
+ activeinCard,
10754
+ activetab
10755
+ };
10756
+ }, [activeinBank, activeinCard, activetab]);
10757
+ const submit = useCallback(() => {
10758
+ var _a2, _b2;
10759
+ const { activeinBank: activeinBank2, activeinCard: activeinCard2, activetab: activetab2 } = stateRef.current;
10760
+ if (activetab2 === "card") {
10761
+ if (activeinCard2 === "form") {
10762
+ (_a2 = cardFormRef.current) == null ? void 0 : _a2.requestSubmit();
10763
+ } else if (activeinCard2 === "list") {
10764
+ handlechargeCustomer();
10765
+ }
10766
+ } else if (activetab2 === "ach") {
10767
+ if (activeinBank2 === "form") {
10768
+ (_b2 = bankFormRef.current) == null ? void 0 : _b2.requestSubmit();
10769
+ } else if (activeinBank2 === "list") {
10770
+ handlechargeCustomer();
10771
+ }
10772
+ }
10773
+ }, []);
10774
+ useEffect15(() => {
10775
+ onSubmit == null ? void 0 : onSubmit(submit);
10776
+ }, [onSubmit, submit]);
10777
+ function detectCardType(cardinput) {
10778
+ if (!cardinput) return null;
10779
+ const number = cardinput.replace(/\D/g, "");
10780
+ const patterns = {
10781
+ visa: /^4/,
10782
+ mastercard: /^(5[1-5]|2[2-7][0-9]{2})/,
10783
+ amex: /^3[47]/,
10784
+ discover: /^(6011|65|64[4-9])/,
10785
+ diners: /^(30[0-5]|36|38)/,
10786
+ jcb: /^(35[2-8][0-9])/,
10787
+ unionpay: /^62/
10788
+ };
10789
+ for (const [type, regex] of Object.entries(patterns)) {
10790
+ if (regex.test(number)) {
10791
+ return type;
10792
+ }
10793
+ }
10794
+ return "unknown";
10795
+ }
10796
+ function getCardImage(cardInput) {
10797
+ const cardType = detectCardType(cardInput);
10798
+ switch (cardType) {
10799
+ case "visa":
10800
+ return /* @__PURE__ */ jsx34("img", { src: visa2, alt: "visa", width: 33 });
10801
+ case "mastercard":
10802
+ return /* @__PURE__ */ jsx34("img", { src: mastercard2, width: 33, alt: "mastercard" });
10803
+ case "amex":
10804
+ return /* @__PURE__ */ jsx34("img", { src: americanexp2, alt: "amex", width: 33 });
10805
+ case "discover":
10806
+ return /* @__PURE__ */ jsx34("img", { src: discover2, width: 33, alt: "discover" });
10807
+ case "diners":
10808
+ return /* @__PURE__ */ jsx34("img", { src: dinersicon, alt: "Diners Club" });
10809
+ case "jcb":
10810
+ return /* @__PURE__ */ jsx34("img", { src: jcbicon, alt: "JCB" });
10811
+ case "unionpay":
10812
+ return /* @__PURE__ */ jsx34("img", { src: unionicon, alt: "UnionPay" });
10813
+ default:
10814
+ return /* @__PURE__ */ jsx34("img", { src: defualtcardborder, alt: "card" });
10815
+ }
10816
+ }
10817
+ return /* @__PURE__ */ jsxs20(Fragment19, { children: [
10818
+ (initialLoader || !onLoad) && /* @__PURE__ */ jsx34(Loader_default, { intensity: "dark", loading: initialLoader || !onLoad }),
10819
+ error && /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(ErrorCardOverlay_default, { error, onClose: handleClose, autoTrigger }) }),
10820
+ errorIframe && /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(ErrorCardOverlay_default, { error: errorIframe, onClose: () => {
10487
10821
  setErrorIframe("");
10488
- } }) }),
10489
- !error && !errorIframe && /* @__PURE__ */ jsxs19(Fragment18, { children: [
10490
- (loading || loading2 || loadingIframe) && /* @__PURE__ */ jsx32(Loader_default, { loading: loading || loading2 || loadingPrev || orderLoader || loadingIframe }),
10491
- /* @__PURE__ */ jsxs19("div", { className: "frac-card-payment-page frac-form frac-new-form", children: [
10492
- /* @__PURE__ */ jsx32("div", { ref: threeDSContainerRef, style: { width: "100%", height: "100%" } }),
10493
- (stripeResponse == null ? void 0 : stripeResponse.challenge_url) ? /* @__PURE__ */ jsx32(
10822
+ }, autoTrigger: onSubmit ? !onSubmit : autoTrigger }) }),
10823
+ /* @__PURE__ */ jsxs20(Fragment19, { children: [
10824
+ (loading || loading2 || loadingIframe) && /* @__PURE__ */ jsx34(Loader_default, { intensity: "light", loading: loading || loading2 || loadingPrev || orderLoader || loadingIframe }),
10825
+ /* @__PURE__ */ jsxs20("div", { className: "frac-card-payment-page frac-form frac-new-form", children: [
10826
+ /* @__PURE__ */ jsx34("div", { ref: threeDSContainerRef, style: { width: "100%", height: "100%" } }),
10827
+ (stripeResponse == null ? void 0 : stripeResponse.challenge_url) ? /* @__PURE__ */ jsx34(
10494
10828
  ThreeDSChallenge,
10495
10829
  {
10496
10830
  containerRef: threeDSContainerRef,
@@ -10500,40 +10834,33 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10500
10834
  onSuccess: handleSuccess,
10501
10835
  onError: handleError
10502
10836
  }
10503
- ) : /* @__PURE__ */ jsxs19("div", { className: "parent-pay-container", children: [
10504
- /* @__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: [
10505
- /* @__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" }) }),
10506
- /* @__PURE__ */ jsx32("defs", { children: /* @__PURE__ */ jsx32("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx32("rect", { width: "16", height: "16", fill: "white" }) }) })
10837
+ ) : /* @__PURE__ */ jsxs20("div", { className: "parent-pay-container", children: [
10838
+ /* @__PURE__ */ jsx34("span", { style: { display: autoTrigger ? "none" : "block" }, className: "request-payment-close-popup", onClick: handleClose, children: /* @__PURE__ */ jsxs20("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
10839
+ /* @__PURE__ */ jsx34("g", { clipPath: "url(#clip0_12425_52336)", children: /* @__PURE__ */ jsx34("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" }) }),
10840
+ /* @__PURE__ */ jsx34("defs", { children: /* @__PURE__ */ jsx34("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx34("rect", { width: "16", height: "16", fill: "white" }) }) })
10507
10841
  ] }) }),
10508
- /* @__PURE__ */ jsx32("div", { className: "pay-main-logo-res" }),
10509
- /* @__PURE__ */ jsxs19("div", { className: "pay-container", children: [
10510
- /* @__PURE__ */ jsxs19("div", { className: "pay-header pay-conatiner-one", children: [
10511
- /* @__PURE__ */ jsxs19("div", { className: "pay-conatiner-one-first", children: [
10512
- /* @__PURE__ */ jsxs19("div", { className: "pay-logo-container", children: [
10513
- /* @__PURE__ */ jsx32("div", { className: "pay-main-logo" }),
10514
- /* @__PURE__ */ jsx32("h1", { className: "pay-heading", children: "Pay" }),
10515
- (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ jsxs19("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList"), children: [
10842
+ /* @__PURE__ */ jsx34("div", { className: "pay-main-logo-res" }),
10843
+ /* @__PURE__ */ jsxs20("div", { className: onSubmit ? "pay-container frac-pay-container " : "pay-container", children: [
10844
+ !onSubmit && /* @__PURE__ */ jsxs20("div", { className: "pay-header pay-conatiner-one", children: [
10845
+ /* @__PURE__ */ jsxs20("div", { className: "pay-conatiner-one-first", children: [
10846
+ /* @__PURE__ */ jsxs20("div", { className: "pay-logo-container", children: [
10847
+ /* @__PURE__ */ jsx34("div", { className: "pay-main-logo" }),
10848
+ /* @__PURE__ */ jsx34("h1", { className: "pay-heading", children: "Pay" }),
10849
+ (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ jsxs20("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList"), children: [
10516
10850
  " ",
10517
- /* @__PURE__ */ jsx32(IoArrowBack4, {}),
10851
+ /* @__PURE__ */ jsx34(IoArrowBack4, {}),
10518
10852
  " Back"
10519
10853
  ] })
10520
10854
  ] }),
10521
- /* @__PURE__ */ jsx32("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs19("div", { className: "pay-amount-conatiner", children: [
10522
- /* @__PURE__ */ jsx32("small", { className: "pay-payment-amount", children: "Select payment type" }),
10523
- /* @__PURE__ */ jsxs19("div", { className: "frac-card-bank-radio-main", children: [
10524
- /* @__PURE__ */ jsx32(CardBankRadio, { label: "Card", amount: (_a = Number(amount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
10525
- !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx32(CardBankRadio, { label: "Bank", amount: (_b = Number(bankAmount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab })
10855
+ /* @__PURE__ */ jsx34("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs20("div", { className: "pay-amount-conatiner", children: [
10856
+ /* @__PURE__ */ jsx34("small", { className: "pay-payment-amount", children: "Select payment type" }),
10857
+ /* @__PURE__ */ jsxs20("div", { className: "frac-card-bank-radio-main", children: [
10858
+ /* @__PURE__ */ jsx34(CardBankRadio, { label: "Card", amount: (_a = Number(amount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
10859
+ !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx34(CardBankRadio, { label: "Bank", amount: (_b = Number(bankAmount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab, savingsText: bankSavingsText })
10526
10860
  ] }),
10527
- pass_fee && activetab === "card" && cashDiscount && Number(amount) - Number(cashDiscount) > 0 ? /* @__PURE__ */ jsxs19("div", { className: "frac-cash-discount-fee", children: [
10528
- /* @__PURE__ */ jsxs19("small", { children: [
10529
- activetab === "card" ? "Cash Discount" : "Cash Discount Savings",
10530
- " "
10531
- ] }),
10532
- /* @__PURE__ */ jsx32("p", { children: formatUSD((Number(amount) - Number(cashDiscount)).toFixed(2)) })
10533
- ] }) : null,
10534
- isPartial && /* @__PURE__ */ jsxs19("div", { className: "frac-partial-payment-input", children: [
10535
- /* @__PURE__ */ jsx32("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
10536
- /* @__PURE__ */ jsx32(
10861
+ isPartial && /* @__PURE__ */ jsxs20("div", { className: "frac-partial-payment-input", children: [
10862
+ /* @__PURE__ */ jsx34("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
10863
+ /* @__PURE__ */ jsx34(
10537
10864
  NumericFormat2,
10538
10865
  {
10539
10866
  prefix: "$",
@@ -10557,325 +10884,372 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
10557
10884
  }
10558
10885
  }
10559
10886
  ),
10560
- partialError && /* @__PURE__ */ jsx32("span", { className: "error-span", children: partialError })
10887
+ partialError && /* @__PURE__ */ jsx34("span", { className: "error-span", children: partialError })
10561
10888
  ] })
10562
10889
  ] }) })
10563
10890
  ] }),
10564
- /* @__PURE__ */ jsxs19("div", { className: "pay-conatiner-one-last", children: [
10565
- /* @__PURE__ */ jsx32("img", { src: secure2, alt: "" }),
10566
- /* @__PURE__ */ jsx32("img", { src: pov2, alt: "" }),
10891
+ /* @__PURE__ */ jsxs20("div", { className: "pay-conatiner-one-last", children: [
10892
+ /* @__PURE__ */ jsx34("img", { src: secure2, alt: "" }),
10893
+ /* @__PURE__ */ jsx34("img", { src: pov2, alt: "" }),
10567
10894
  "Secure payments powered by Fractal"
10568
10895
  ] })
10569
10896
  ] }),
10570
- /* @__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: [
10571
- /* @__PURE__ */ jsxs19("div", { id: "ach", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent", children: [
10572
- /* @__PURE__ */ jsxs19("div", { className: "frac-heading-card-wrap", children: [
10573
- /* @__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: [
10574
- " ",
10575
- /* @__PURE__ */ jsx32(IoArrowBack4, {})
10576
- ] }) }),
10577
- /* @__PURE__ */ jsx32("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
10578
- ] }),
10579
- /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "8px", margin: "8px 0px 19px 0px" }, children: [
10580
- /* @__PURE__ */ jsx32("img", { src: visa2, alt: "", width: 33 }),
10581
- /* @__PURE__ */ jsx32("img", { src: mastercard2, width: 33, alt: "" }),
10582
- /* @__PURE__ */ jsx32("img", { src: americanexp2, alt: "", width: 33 }),
10583
- /* @__PURE__ */ jsx32("img", { src: discover2, width: 33, alt: "" })
10897
+ /* @__PURE__ */ jsx34("div", { className: "pay-tab pay-conatiner-two", children: /* @__PURE__ */ jsx34("div", { className: "col-md-12", children: /* @__PURE__ */ jsxs20("div", { id: "payment-form-div ", className: onSubmit ? "frac-payment-form-div" : "", children: [
10898
+ onSubmit && /* @__PURE__ */ jsx34("div", { className: "amt-pay-con", children: /* @__PURE__ */ jsxs20("div", { className: "pay-amount-conatiner", children: [
10899
+ /* @__PURE__ */ jsxs20("div", { className: "frac-card-bank-radio-main", children: [
10900
+ /* @__PURE__ */ jsx34(CardBankRadio, { skydesign: true, label: "Card", amount: (_c = Number(amount)) == null ? void 0 : _c.toFixed(2), value: "card", onChange: handletabchange, activetab }),
10901
+ !isPreAuth && isBankActive && !isPartial && /* @__PURE__ */ jsx34(CardBankRadio, { skydesign: true, label: "Bank", amount: (_d = Number(bankAmount)) == null ? void 0 : _d.toFixed(2), value: "ach", onChange: handletabchange, activetab, savingsText: bankSavingsText })
10584
10902
  ] }),
10585
- activeinCard === "list" && (cardList == null ? void 0 : cardList.length) > 0 ? /* @__PURE__ */ jsxs19(Fragment18, { children: [
10586
- /* @__PURE__ */ jsx32(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Card", ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
10587
- setActiveinCard("form");
10588
- } }),
10589
- /* @__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)) }) })
10590
- ] }) : paymentGateway == 32 ? /* @__PURE__ */ jsxs19("form", { id: "paymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, onKeyDown: (e) => {
10591
- if (e.key === "Enter" && loading) {
10592
- e.preventDefault();
10593
- e.stopPropagation();
10594
- }
10595
- }, children: [
10596
- /* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
10597
- /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10598
- /* @__PURE__ */ jsx32("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
10599
- /* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
10600
- const value = e.target.value;
10601
- if (/^[a-zA-Z\s]*$/.test(value)) {
10602
- handleCardChange("cardName", value);
10603
- }
10604
- } }),
10605
- (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
10606
- ] }),
10607
- /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10608
- /* @__PURE__ */ jsx32("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
10609
- /* @__PURE__ */ jsx32("div", { className: "toggle-num-wrapper", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx32(
10610
- FractalFields_default,
10611
- {
10612
- fractalStyles,
10613
- tokenizerRef,
10614
- isSky: true
10615
- }
10616
- ) })
10617
- ] }),
10618
- /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10619
- /* @__PURE__ */ jsx32("label", { htmlFor: "zip", children: "ZIP" }),
10620
- /* @__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) }),
10621
- (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
10903
+ isPartial && /* @__PURE__ */ jsxs20("div", { className: "frac-partial-payment-input", children: [
10904
+ /* @__PURE__ */ jsx34("label", { htmlFor: "partialpayment", children: "Partial Payment" }),
10905
+ /* @__PURE__ */ jsx34(
10906
+ NumericFormat2,
10907
+ {
10908
+ prefix: "$",
10909
+ className: "form-control-frac",
10910
+ value: partialAmount,
10911
+ onValueChange: (values) => {
10912
+ handlePartialChange(values);
10913
+ },
10914
+ thousandSeparator: true,
10915
+ placeholder: "Enter partial amount",
10916
+ allowNegative: false,
10917
+ allowLeadingZeros: false,
10918
+ decimalScale: 2,
10919
+ fixedDecimalScale: true
10920
+ }
10921
+ ),
10922
+ partialError && /* @__PURE__ */ jsx34("span", { className: "error-span", children: partialError })
10923
+ ] })
10924
+ ] }) }),
10925
+ is3DSEnable ? clientSecret && /* @__PURE__ */ jsx34(CheckoutWrapper, { onSuccess, clientSecret, amount, showLoader, hideLoader, callback, session_token, handleClose, setError, isPreAuth }) : /* @__PURE__ */ jsxs20(Fragment19, { children: [
10926
+ /* @__PURE__ */ jsxs20("div", { id: "ach", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent", children: [
10927
+ !onSubmit && /* @__PURE__ */ jsxs20(Fragment19, { children: [
10928
+ /* @__PURE__ */ jsxs20("div", { className: "frac-heading-card-wrap", children: [
10929
+ /* @__PURE__ */ jsx34("div", { className: "frac-backarrow", children: (cardList == null ? void 0 : cardList.length) > 0 && activeinCard === "form" && /* @__PURE__ */ jsxs20("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinCard("list"), children: [
10930
+ " ",
10931
+ /* @__PURE__ */ jsx34(IoArrowBack4, {})
10932
+ ] }) }),
10933
+ /* @__PURE__ */ jsx34("h6", { className: "frac-card-payment-heading", children: "Card Payment" })
10622
10934
  ] }),
10623
- 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: [
10624
- /* @__PURE__ */ jsx32(
10625
- "input",
10626
- {
10627
- type: "checkbox",
10628
- id: "save_card",
10629
- className: "toggle-checkbox",
10630
- checked: saveCardInfo,
10631
- onChange: (e) => setSaveCardInfo(e.target.checked)
10632
- }
10633
- ),
10634
- /* @__PURE__ */ jsx32("label", { htmlFor: "save_card", className: "toggle-label" }),
10635
- /* @__PURE__ */ jsx32("label", { htmlFor: "save_card", children: "Save card for future payments " }),
10636
- /* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-wrapper", children: [
10637
- /* @__PURE__ */ jsx32("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs19(
10638
- "svg",
10935
+ /* @__PURE__ */ jsxs20("div", { style: { display: "flex", gap: "8px", margin: "8px 0px 19px 0px" }, children: [
10936
+ /* @__PURE__ */ jsx34("img", { src: visa2, alt: "", width: 33 }),
10937
+ /* @__PURE__ */ jsx34("img", { src: mastercard2, width: 33, alt: "" }),
10938
+ /* @__PURE__ */ jsx34("img", { src: americanexp2, alt: "", width: 33 }),
10939
+ /* @__PURE__ */ jsx34("img", { src: discover2, width: 33, alt: "" })
10940
+ ] })
10941
+ ] }),
10942
+ activeinCard === "list" && (cardList == null ? void 0 : cardList.length) > 0 ? /* @__PURE__ */ jsxs20(Fragment19, { children: [
10943
+ /* @__PURE__ */ jsx34(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Card", ListItems: cardList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Card", otherButtonAction: () => {
10944
+ setActiveinCard("form");
10945
+ } }),
10946
+ /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx34("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: partialAmount ? formatUSD((_e = Number(partialAmount)) == null ? void 0 : _e.toFixed(2)) : formatUSD((_f = Number(amount)) == null ? void 0 : _f.toFixed(2)) }) })
10947
+ ] }) : paymentGateway == 32 ? /* @__PURE__ */ jsxs20("form", { id: "paymentForm", style: { textAlign: "start" }, ref: cardFormRef, onSubmit: submitFunc, onKeyDown: (e) => {
10948
+ if (e.key === "Enter" && loading) {
10949
+ e.preventDefault();
10950
+ e.stopPropagation();
10951
+ }
10952
+ }, children: [
10953
+ /* @__PURE__ */ jsxs20("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
10954
+ /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
10955
+ /* @__PURE__ */ jsx34("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
10956
+ /* @__PURE__ */ jsx34("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
10957
+ const value = e.target.value;
10958
+ if (/^[a-zA-Z\s]*$/.test(value)) {
10959
+ handleCardChange("cardName", value);
10960
+ }
10961
+ } }),
10962
+ (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
10963
+ ] }),
10964
+ /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
10965
+ /* @__PURE__ */ jsx34("label", { htmlFor: "cardNumber", children: "CARD NUMBER" }),
10966
+ /* @__PURE__ */ jsx34("div", { className: "toggle-num-wrapper toggle-num-wrapper-new", children: (show || autoTrigger) && paymentGateway === 32 && /* @__PURE__ */ jsx34(
10967
+ FractalFields_default,
10639
10968
  {
10640
- xmlns: "http://www.w3.org/2000/svg",
10641
- width: "20",
10642
- height: "20",
10643
- viewBox: "0 0 20 20",
10644
- fill: "none",
10645
- children: [
10646
- /* @__PURE__ */ jsx32("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
10647
- /* @__PURE__ */ jsx32(
10648
- "path",
10649
- {
10650
- 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",
10651
- fill: "#161616"
10652
- }
10653
- )
10654
- ]
10969
+ fractalStyles,
10970
+ tokenizerRef,
10971
+ isSky: true
10655
10972
  }
10656
- ) }),
10657
- /* @__PURE__ */ jsx32("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs19("p", { children: [
10658
- "If checked, I agree to give the ",
10659
- /* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
10660
- " permission to charge this credit card for agreed-upon purchases in the future."
10661
- ] }) })
10662
- ] })
10663
- ] }) })
10664
- ] }),
10665
- /* @__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)) }) })
10666
- ] }) : /* @__PURE__ */ jsxs19("form", { id: "PaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, onKeyDown: (e) => {
10667
- if (e.key === "Enter" && loading) {
10668
- e.preventDefault();
10669
- e.stopPropagation();
10670
- }
10671
- }, children: [
10672
- /* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
10673
- /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10674
- /* @__PURE__ */ jsx32("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
10675
- /* @__PURE__ */ jsx32("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
10676
- const value = e.target.value;
10677
- if (/^[a-zA-Z\s]*$/.test(value)) {
10678
- handleCardChange("cardName", value);
10679
- }
10680
- } }),
10681
- (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
10682
- ] }),
10683
- /* @__PURE__ */ jsx32("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx32(
10684
- DataCapFields,
10685
- {
10686
- isOpen: show || autoTrigger,
10687
- tokenKey: dcToken,
10688
- setLoader: activeinCard === "form" ? setLoadingIframe : null
10689
- }
10690
- ) }),
10691
- /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10692
- /* @__PURE__ */ jsx32("label", { htmlFor: "zip", children: "ZIP" }),
10693
- /* @__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) }),
10694
- (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode })
10973
+ ) })
10974
+ ] }),
10975
+ /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
10976
+ /* @__PURE__ */ jsx34("label", { htmlFor: "zip", children: "ZIP" }),
10977
+ /* @__PURE__ */ jsx34("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "000000", value: (_g = cardData == null ? void 0 : cardData.zipCode) != null ? _g : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }),
10978
+ (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
10979
+ pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs20("small", { className: "frac-fee-text", children: [
10980
+ "Credit cards include a fee amount of ",
10981
+ /* @__PURE__ */ jsx34("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
10982
+ "."
10983
+ ] })
10984
+ ] }),
10985
+ customerId && /* @__PURE__ */ jsx34("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
10986
+ /* @__PURE__ */ jsx34(
10987
+ "input",
10988
+ {
10989
+ type: "checkbox",
10990
+ id: "save_card",
10991
+ className: "toggle-checkbox",
10992
+ checked: saveCardInfo,
10993
+ onChange: (e) => setSaveCardInfo(e.target.checked)
10994
+ }
10995
+ ),
10996
+ /* @__PURE__ */ jsx34("label", { htmlFor: "save_card", className: "toggle-label" }),
10997
+ /* @__PURE__ */ jsx34("label", { htmlFor: "save_card", children: "Save card for future payments " }),
10998
+ /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-wrapper", children: [
10999
+ /* @__PURE__ */ jsx34("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs20(
11000
+ "svg",
11001
+ {
11002
+ xmlns: "http://www.w3.org/2000/svg",
11003
+ width: "20",
11004
+ height: "20",
11005
+ viewBox: "0 0 20 20",
11006
+ fill: "none",
11007
+ children: [
11008
+ /* @__PURE__ */ jsx34("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
11009
+ /* @__PURE__ */ jsx34(
11010
+ "path",
11011
+ {
11012
+ 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",
11013
+ fill: "#161616"
11014
+ }
11015
+ )
11016
+ ]
11017
+ }
11018
+ ) }),
11019
+ /* @__PURE__ */ jsx34("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs20("p", { children: [
11020
+ "If checked, I agree to give the ",
11021
+ /* @__PURE__ */ jsx34("b", { children: merchantName || "merchant" }),
11022
+ " permission to charge this credit card for agreed-upon purchases in the future."
11023
+ ] }) })
11024
+ ] })
11025
+ ] }) })
10695
11026
  ] }),
10696
- 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: [
10697
- /* @__PURE__ */ jsx32(
10698
- "input",
11027
+ /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx34("button", { type: "submit", style: { margin: 0, display: onSubmit ? "none" : "block" }, className: "pay-button", children: partialAmount ? formatUSD((_h = Number(partialAmount)) == null ? void 0 : _h.toFixed(2)) : formatUSD((_i = Number(amount)) == null ? void 0 : _i.toFixed(2)) }) })
11028
+ ] }) : /* @__PURE__ */ jsxs20("form", { id: "PaymentForm", style: { textAlign: "start" }, ref: cardFormRef, onSubmit: submitFunc, onKeyDown: (e) => {
11029
+ if (e.key === "Enter" && loading) {
11030
+ e.preventDefault();
11031
+ e.stopPropagation();
11032
+ }
11033
+ }, children: [
11034
+ /* @__PURE__ */ jsxs20("div", { className: "ach-scrl", style: { minHeight: "398px", maxHeight: "398px", overflow: "auto", marginRight: "5px" }, children: [
11035
+ /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
11036
+ /* @__PURE__ */ jsx34("label", { htmlFor: "cardHolderName", children: "NAME ON CARD " }),
11037
+ /* @__PURE__ */ jsx34("input", { type: "text", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
11038
+ const value = e.target.value;
11039
+ if (/^[a-zA-Z\s]*$/.test(value)) {
11040
+ handleCardChange("cardName", value);
11041
+ }
11042
+ } }),
11043
+ (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.cardName })
11044
+ ] }),
11045
+ /* @__PURE__ */ jsx34("div", { className: "form-group-frac", children: /* @__PURE__ */ jsx34(
11046
+ DataCapFields,
10699
11047
  {
10700
- type: "checkbox",
10701
- id: "save_card",
10702
- className: "toggle-checkbox",
10703
- checked: saveCardInfo,
10704
- onChange: (e) => setSaveCardInfo(e.target.checked)
11048
+ isOpen: show || autoTrigger,
11049
+ tokenKey: dcToken,
11050
+ setLoader: activeinCard === "form" ? setLoadingIframe : null,
11051
+ isEmbedded: onSubmit ? true : false
10705
11052
  }
10706
- ),
10707
- /* @__PURE__ */ jsx32("label", { htmlFor: "save_card", className: "toggle-label" }),
10708
- /* @__PURE__ */ jsx32("label", { htmlFor: "save_card", children: "Save card for future payments " }),
10709
- /* @__PURE__ */ jsxs19("div", { className: "frac-tooltip-wrapper", children: [
10710
- /* @__PURE__ */ jsx32("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs19(
10711
- "svg",
11053
+ ) }),
11054
+ /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
11055
+ /* @__PURE__ */ jsx34("label", { htmlFor: "zip", children: "ZIP" }),
11056
+ /* @__PURE__ */ jsx34("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) }),
11057
+ (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: cardError == null ? void 0 : cardError.zipCode }),
11058
+ pass_fee && cardFeeAmount > 0 && /* @__PURE__ */ jsxs20("small", { className: "frac-fee-text", children: [
11059
+ "Credit cards include a fee amount of ",
11060
+ /* @__PURE__ */ jsx34("span", { className: "frac-fee-amount", children: formatUSD(cardFeeAmount.toFixed(2)) }),
11061
+ "."
11062
+ ] })
11063
+ ] }),
11064
+ customerId && /* @__PURE__ */ jsx34("div", { className: "form-group-frac", children: /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-mn", style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" }, children: [
11065
+ /* @__PURE__ */ jsx34(
11066
+ "input",
10712
11067
  {
10713
- xmlns: "http://www.w3.org/2000/svg",
10714
- width: "20",
10715
- height: "20",
10716
- viewBox: "0 0 20 20",
10717
- fill: "none",
10718
- children: [
10719
- /* @__PURE__ */ jsx32("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
10720
- /* @__PURE__ */ jsx32(
10721
- "path",
10722
- {
10723
- 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",
10724
- fill: "#161616"
10725
- }
10726
- )
10727
- ]
11068
+ type: "checkbox",
11069
+ id: "save_card",
11070
+ className: "toggle-checkbox",
11071
+ checked: saveCardInfo,
11072
+ onChange: (e) => setSaveCardInfo(e.target.checked)
10728
11073
  }
10729
- ) }),
10730
- /* @__PURE__ */ jsx32("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs19("p", { children: [
10731
- "If checked, I agree to give the ",
10732
- /* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
10733
- " permission to charge this credit card for agreed-upon purchases in the future."
10734
- ] }) })
10735
- ] })
10736
- ] }) })
10737
- ] }),
10738
- /* @__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)) }) })
10739
- ] })
10740
- ] }),
10741
- /* @__PURE__ */ jsx32("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: /* @__PURE__ */ jsxs19(Fragment18, { children: [
10742
- /* @__PURE__ */ jsxs19("div", { className: "frac-heading-card-wrap", children: [
10743
- /* @__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: [
10744
- " ",
10745
- /* @__PURE__ */ jsx32(IoArrowBack4, {})
10746
- ] }) }),
10747
- /* @__PURE__ */ jsx32("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
11074
+ ),
11075
+ /* @__PURE__ */ jsx34("label", { htmlFor: "save_card", className: "toggle-label" }),
11076
+ /* @__PURE__ */ jsx34("label", { htmlFor: "save_card", children: "Save card for future payments " }),
11077
+ /* @__PURE__ */ jsxs20("div", { className: "frac-tooltip-wrapper", children: [
11078
+ /* @__PURE__ */ jsx34("div", { className: "frac-tooltip-icon", children: /* @__PURE__ */ jsxs20(
11079
+ "svg",
11080
+ {
11081
+ xmlns: "http://www.w3.org/2000/svg",
11082
+ width: "20",
11083
+ height: "20",
11084
+ viewBox: "0 0 20 20",
11085
+ fill: "none",
11086
+ children: [
11087
+ /* @__PURE__ */ jsx34("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }),
11088
+ /* @__PURE__ */ jsx34(
11089
+ "path",
11090
+ {
11091
+ 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",
11092
+ fill: "#161616"
11093
+ }
11094
+ )
11095
+ ]
11096
+ }
11097
+ ) }),
11098
+ /* @__PURE__ */ jsx34("div", { className: "frac-tooltip-text", children: /* @__PURE__ */ jsxs20("p", { children: [
11099
+ "If checked, I agree to give the ",
11100
+ /* @__PURE__ */ jsx34("b", { children: merchantName || "merchant" }),
11101
+ " permission to charge this credit card for agreed-upon purchases in the future."
11102
+ ] }) })
11103
+ ] })
11104
+ ] }) })
11105
+ ] }),
11106
+ /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { marginTop: "20px", padding: "0" }, children: /* @__PURE__ */ jsx34("button", { type: "submit", style: { margin: 0, display: onSubmit ? "none" : "block" }, className: "pay-button", children: partialAmount ? formatUSD((_k = Number(partialAmount)) == null ? void 0 : _k.toFixed(2)) : formatUSD((_l = Number(amount)) == null ? void 0 : _l.toFixed(2)) }) })
11107
+ ] })
10748
11108
  ] }),
10749
- activeinBank === "list" && (bankList == null ? void 0 : bankList.length) > 0 ? /* @__PURE__ */ jsxs19(Fragment18, { children: [
10750
- /* @__PURE__ */ jsx32(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Banks", ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
10751
- setActiveinBank("form");
10752
- } }),
10753
- /* @__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)) }) })
10754
- ] }) : /* @__PURE__ */ jsxs19("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
10755
- if (e.key === "Enter" && loading) {
10756
- e.preventDefault();
10757
- e.stopPropagation();
10758
- }
10759
- }, children: [
10760
- /* @__PURE__ */ jsxs19("div", { className: "ach-scrl", style: {
10761
- minHeight: "444px",
10762
- maxHeight: "444px"
11109
+ /* @__PURE__ */ jsx34("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent", children: /* @__PURE__ */ jsxs20(Fragment19, { children: [
11110
+ !onSubmit && /* @__PURE__ */ jsxs20("div", { className: "frac-heading-card-wrap", children: [
11111
+ /* @__PURE__ */ jsx34("div", { className: "frac-backarrow", children: (bankList == null ? void 0 : bankList.length) > 0 && activeinBank === "form" && /* @__PURE__ */ jsxs20("button", { className: "charge-payment-back-btn ", onClick: () => setActiveinBank("list"), children: [
11112
+ " ",
11113
+ /* @__PURE__ */ jsx34(IoArrowBack4, {})
11114
+ ] }) }),
11115
+ /* @__PURE__ */ jsx34("h6", { className: "frac-card-payment-heading", children: "Bank Payment" })
11116
+ ] }),
11117
+ activeinBank === "list" && (bankList == null ? void 0 : bankList.length) > 0 ? /* @__PURE__ */ jsxs20(Fragment19, { children: [
11118
+ /* @__PURE__ */ jsx34(CardList, { headingClass: "card-ach-heading-frac", listHeading: "Banks", ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
11119
+ setActiveinBank("form");
11120
+ } }),
11121
+ /* @__PURE__ */ jsx34("div", { className: "form-group-frac", style: { padding: "0", display: onSubmit ? "none" : "block" }, children: /* @__PURE__ */ jsx34("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer, children: formatUSD((_m = Number(bankAmount)) == null ? void 0 : _m.toFixed(2)) }) })
11122
+ ] }) : /* @__PURE__ */ jsxs20("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, ref: bankFormRef, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
11123
+ if (e.key === "Enter" && loading) {
11124
+ e.preventDefault();
11125
+ e.stopPropagation();
11126
+ }
10763
11127
  }, children: [
10764
- /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10765
- /* @__PURE__ */ jsx32("label", { htmlFor: "nameonaccount", children: "Name on account" }),
10766
- /* @__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 }),
10767
- (achError == null ? void 0 : achError.name) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
10768
- ] }),
10769
- /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10770
- /* @__PURE__ */ jsx32("label", { htmlFor: "routingnumber", children: "Routing number" }),
10771
- /* @__PURE__ */ jsx32(
10772
- "input",
10773
- {
10774
- type: "text",
10775
- id: "routingnumber",
10776
- className: "form-control-frac",
10777
- maxLength: 9,
10778
- placeholder: "000000000",
10779
- name: "routingNumber",
10780
- value: (_m = achData == null ? void 0 : achData.routingNumber) != null ? _m : "",
10781
- onChange: handleChangeAch
10782
- }
10783
- ),
10784
- (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.routingNumber })
10785
- ] }),
10786
- /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10787
- /* @__PURE__ */ jsx32("label", { htmlFor: "accountnumber", children: "Account number" }),
10788
- /* @__PURE__ */ jsx32(
10789
- "input",
10790
- {
10791
- type: "text",
10792
- id: "accountnumber",
10793
- className: "form-control-frac",
10794
- maxLength: 16,
10795
- placeholder: "0000000000",
10796
- name: "accountNumber",
10797
- value: (_n = achData == null ? void 0 : achData.accountNumber) != null ? _n : "",
10798
- onChange: handleChangeAch
10799
- }
10800
- ),
10801
- (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.accountNumber })
10802
- ] }),
10803
- /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10804
- /* @__PURE__ */ jsx32("label", { htmlFor: "confirmaccountnumber", children: "Confirm account number" }),
10805
- /* @__PURE__ */ jsx32(
10806
- "input",
10807
- {
10808
- type: "text",
10809
- id: "confirmaccountnumber",
10810
- className: "form-control-frac",
10811
- maxLength: 16,
10812
- placeholder: "0000000000",
10813
- name: "confirmAccountNumber",
10814
- value: (_o = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _o : "",
10815
- onChange: handleChangeAch
10816
- }
10817
- ),
10818
- (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.confirmAccountNumber })
10819
- ] }),
10820
- /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10821
- /* @__PURE__ */ jsx32("label", { htmlFor: "bankname", children: "Bank name" }),
10822
- /* @__PURE__ */ jsx32(
10823
- "input",
10824
- {
10825
- type: "text",
10826
- id: "bankname",
10827
- className: "form-control-frac",
10828
- maxLength: 100,
10829
- placeholder: "My Bank",
10830
- name: "bankName",
10831
- value: (_p = achData == null ? void 0 : achData.bankName) != null ? _p : "",
10832
- onChange: handleChangeAch
10833
- }
10834
- ),
10835
- (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.bankName })
10836
- ] }),
10837
- ((achData == null ? void 0 : achData.accountType) === "business saving" || (achData == null ? void 0 : achData.accountType) === "business checking") && /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10838
- /* @__PURE__ */ jsx32("label", { htmlFor: "companyName", children: "Company name" }),
10839
- /* @__PURE__ */ jsx32(
10840
- "input",
10841
- {
10842
- type: "text",
10843
- id: "companyName",
10844
- className: "form-control-frac",
10845
- maxLength: 100,
10846
- placeholder: "My Company",
10847
- name: "companyName",
10848
- value: (_q = achData == null ? void 0 : achData.companyName) != null ? _q : "",
10849
- onChange: handleChangeAch
10850
- }
10851
- ),
10852
- (achError == null ? void 0 : achError.companyName) && /* @__PURE__ */ jsx32("span", { className: "error-span", children: achError == null ? void 0 : achError.companyName })
10853
- ] }),
10854
- /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [
10855
- /* @__PURE__ */ jsx32("label", { htmlFor: "accounttype", children: "Select account type" }),
10856
- /* @__PURE__ */ jsxs19("select", { name: "accountType", id: "accounttype", className: "form-control-frac", value: (_r = achData == null ? void 0 : achData.accountType) != null ? _r : "", onChange: handleChangeAch, children: [
10857
- /* @__PURE__ */ jsx32("option", { value: "", children: "Select account" }),
10858
- accountTypes.map((type) => /* @__PURE__ */ jsx32("option", { value: type.value, children: type.label }, type.value))
10859
- ] })
10860
- ] }),
10861
- /* @__PURE__ */ jsxs19("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
10862
- /* @__PURE__ */ jsx32("input", { type: "checkbox", id: "achconsent", className: "", maxLength: 100, placeholder: "My Bank" }),
10863
- /* @__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.` })
10864
- ] }),
10865
- customerId && /* @__PURE__ */ jsxs19("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
10866
- /* @__PURE__ */ jsx32("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
10867
- /* @__PURE__ */ jsx32("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save Bank" })
11128
+ /* @__PURE__ */ jsxs20("div", { className: "ach-scrl", style: {
11129
+ minHeight: "444px",
11130
+ maxHeight: "444px"
11131
+ }, children: [
11132
+ /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
11133
+ /* @__PURE__ */ jsx34("label", { htmlFor: "nameonaccount", children: "Name on account" }),
11134
+ /* @__PURE__ */ jsx34("input", { type: "text", id: "nameonaccount", className: "form-control-frac", maxLength: 100, placeholder: "John Doe", name: "name", value: (_n = achData == null ? void 0 : achData.name) != null ? _n : "", onChange: handleChangeAch }),
11135
+ (achError == null ? void 0 : achError.name) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.name })
11136
+ ] }),
11137
+ /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
11138
+ /* @__PURE__ */ jsx34("label", { htmlFor: "routingnumber", children: "Routing number" }),
11139
+ /* @__PURE__ */ jsx34(
11140
+ "input",
11141
+ {
11142
+ type: "text",
11143
+ id: "routingnumber",
11144
+ className: "form-control-frac",
11145
+ maxLength: 9,
11146
+ placeholder: "000000000",
11147
+ name: "routingNumber",
11148
+ value: (_o = achData == null ? void 0 : achData.routingNumber) != null ? _o : "",
11149
+ onChange: handleChangeAch
11150
+ }
11151
+ ),
11152
+ (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.routingNumber })
11153
+ ] }),
11154
+ /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
11155
+ /* @__PURE__ */ jsx34("label", { htmlFor: "accountnumber", children: "Account number" }),
11156
+ /* @__PURE__ */ jsx34(
11157
+ "input",
11158
+ {
11159
+ type: "text",
11160
+ id: "accountnumber",
11161
+ className: "form-control-frac",
11162
+ maxLength: 16,
11163
+ placeholder: "0000000000",
11164
+ name: "accountNumber",
11165
+ value: (_p = achData == null ? void 0 : achData.accountNumber) != null ? _p : "",
11166
+ onChange: handleChangeAch
11167
+ }
11168
+ ),
11169
+ (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.accountNumber })
11170
+ ] }),
11171
+ /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
11172
+ /* @__PURE__ */ jsx34("label", { htmlFor: "confirmaccountnumber", children: "Confirm account number" }),
11173
+ /* @__PURE__ */ jsx34(
11174
+ "input",
11175
+ {
11176
+ type: "text",
11177
+ id: "confirmaccountnumber",
11178
+ className: "form-control-frac",
11179
+ maxLength: 16,
11180
+ placeholder: "0000000000",
11181
+ name: "confirmAccountNumber",
11182
+ value: (_q = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _q : "",
11183
+ onChange: handleChangeAch
11184
+ }
11185
+ ),
11186
+ (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.confirmAccountNumber })
11187
+ ] }),
11188
+ /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
11189
+ /* @__PURE__ */ jsx34("label", { htmlFor: "bankname", children: "Bank name" }),
11190
+ /* @__PURE__ */ jsx34(
11191
+ "input",
11192
+ {
11193
+ type: "text",
11194
+ id: "bankname",
11195
+ className: "form-control-frac",
11196
+ maxLength: 100,
11197
+ placeholder: "My Bank",
11198
+ name: "bankName",
11199
+ value: (_r = achData == null ? void 0 : achData.bankName) != null ? _r : "",
11200
+ onChange: handleChangeAch
11201
+ }
11202
+ ),
11203
+ (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.bankName })
11204
+ ] }),
11205
+ ((achData == null ? void 0 : achData.accountType) === "business saving" || (achData == null ? void 0 : achData.accountType) === "business checking") && /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
11206
+ /* @__PURE__ */ jsx34("label", { htmlFor: "companyName", children: "Company name" }),
11207
+ /* @__PURE__ */ jsx34(
11208
+ "input",
11209
+ {
11210
+ type: "text",
11211
+ id: "companyName",
11212
+ className: "form-control-frac",
11213
+ maxLength: 100,
11214
+ placeholder: "My Company",
11215
+ name: "companyName",
11216
+ value: (_s = achData == null ? void 0 : achData.companyName) != null ? _s : "",
11217
+ onChange: handleChangeAch
11218
+ }
11219
+ ),
11220
+ (achError == null ? void 0 : achError.companyName) && /* @__PURE__ */ jsx34("span", { className: "error-span", children: achError == null ? void 0 : achError.companyName })
11221
+ ] }),
11222
+ /* @__PURE__ */ jsxs20("div", { className: "form-group-frac", children: [
11223
+ /* @__PURE__ */ jsx34("label", { htmlFor: "accounttype", children: "Select account type" }),
11224
+ /* @__PURE__ */ jsxs20("select", { name: "accountType", id: "accounttype", className: "form-control-frac", value: (_t = achData == null ? void 0 : achData.accountType) != null ? _t : "", onChange: handleChangeAch, children: [
11225
+ /* @__PURE__ */ jsx34("option", { value: "", children: "Select account" }),
11226
+ accountTypes.map((type) => /* @__PURE__ */ jsx34("option", { value: type.value, children: type.label }, type.value))
11227
+ ] }),
11228
+ bankFeeAmount > 0 && /* @__PURE__ */ jsxs20("small", { className: "frac-fee-text", children: [
11229
+ "There is a processing fee of ",
11230
+ /* @__PURE__ */ jsx34("span", { className: "frac-fee-amount", children: formatUSD(bankFeeAmount.toFixed(2)) }),
11231
+ "."
11232
+ ] })
11233
+ ] }),
11234
+ /* @__PURE__ */ jsxs20("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
11235
+ /* @__PURE__ */ jsx34("input", { type: "checkbox", id: "achconsent", className: "", maxLength: 100, placeholder: "My Bank" }),
11236
+ /* @__PURE__ */ jsx34("label", { className: "saveachlabel", htmlFor: "achconsent", children: `By selecting this box, I authorize SkyFi, on behalf of ${merchantName || "merchant"}, to initiate a one-time electronic ACH debit from my bank account for the total amount displayed on this screen, including any applicable processing fee. I confirm that I am authorized to use this account and that the bank account information I provided is correct.` })
11237
+ ] }),
11238
+ customerId && /* @__PURE__ */ jsxs20("div", { className: "form-group-frac save-ach-div", style: { paddingTop: "5px" }, children: [
11239
+ /* @__PURE__ */ jsx34("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }),
11240
+ /* @__PURE__ */ jsx34("label", { className: "saveachlabel", htmlFor: "saveACH", children: "Save Bank" })
11241
+ ] }),
11242
+ saveACHinfo && /* @__PURE__ */ jsx34("div", { className: "form-group-frac saveachtext", children: /* @__PURE__ */ jsxs20("p", { children: [
11243
+ "If checked, I agree to give the ",
11244
+ /* @__PURE__ */ jsx34("b", { children: merchantName || "merchant" }),
11245
+ " permission to charge this bank account for agreed-upon purchases in the future."
11246
+ ] }) })
10868
11247
  ] }),
10869
- saveACHinfo && /* @__PURE__ */ jsx32("div", { className: "form-group-frac saveachtext", children: /* @__PURE__ */ jsxs19("p", { children: [
10870
- "If checked, I agree to give the ",
10871
- /* @__PURE__ */ jsx32("b", { children: merchantName || "merchant" }),
10872
- " permission to charge this bank account for agreed-upon purchases in the future."
10873
- ] }) })
10874
- ] }),
10875
- /* @__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)) }) })
10876
- ] })
10877
- ] }) })
10878
- ] }) }) }) })
11248
+ /* @__PURE__ */ jsx34("div", { className: "form-group-frac ", children: /* @__PURE__ */ jsx34("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)) }) })
11249
+ ] })
11250
+ ] }) })
11251
+ ] })
11252
+ ] }) }) })
10879
11253
  ] })
10880
11254
  ] })
10881
11255
  ] })
@@ -10886,7 +11260,7 @@ var ModelContentSky_default = ModelContentSky;
10886
11260
 
10887
11261
  // src/app/components/Skysystemz/PayButtonWithForm.tsx
10888
11262
  import axios10 from "axios";
10889
- import { Fragment as Fragment19, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
11263
+ import { Fragment as Fragment20, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
10890
11264
  var PaymentWidget = ({
10891
11265
  amount,
10892
11266
  bankAmount,
@@ -10997,24 +11371,510 @@ var PaymentWidget = ({
10997
11371
  getskyosOrderDetails();
10998
11372
  }
10999
11373
  }, [show, isPartial, partialRef]);
11000
- return /* @__PURE__ */ jsxs20(Fragment19, { children: [
11001
- /* @__PURE__ */ jsx33("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
11002
- /* @__PURE__ */ jsx33(DataScript, {}),
11003
- /* @__PURE__ */ jsx33(FractalTokenizerScript, {}),
11004
- /* @__PURE__ */ jsx33(SkyChargewidgetstyles, {}),
11005
- /* @__PURE__ */ jsx33(CardBankRadioStyles, {}),
11006
- /* @__PURE__ */ jsx33(CustomModal2styles_default, {}),
11007
- /* @__PURE__ */ jsx33(DataCapScriptLoader, {}),
11008
- !autoTrigger && /* @__PURE__ */ jsxs20("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
11374
+ return /* @__PURE__ */ jsxs21(Fragment20, { children: [
11375
+ /* @__PURE__ */ jsx35("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
11376
+ /* @__PURE__ */ jsx35(DataScript, {}),
11377
+ /* @__PURE__ */ jsx35(FractalTokenizerScript, {}),
11378
+ /* @__PURE__ */ jsx35(SkyChargewidgetstyles, {}),
11379
+ /* @__PURE__ */ jsx35(CardBankRadioStyles, {}),
11380
+ /* @__PURE__ */ jsx35(CustomModal2styles_default, {}),
11381
+ /* @__PURE__ */ jsx35(DataCapScriptLoader, {}),
11382
+ !autoTrigger && /* @__PURE__ */ jsxs21("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
11383
+ submitBtnText,
11384
+ submitBtnIcon
11385
+ ] }),
11386
+ !autoTrigger ? /* @__PURE__ */ jsx35(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx35(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx35(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
11387
+ ] });
11388
+ };
11389
+
11390
+ // src/app/components/Skysystemz/EmbeddedCheckout.tsx
11391
+ import { useEffect as useEffect17, useState as useState12, useMemo as useMemo2 } from "react";
11392
+ import axios11 from "axios";
11393
+
11394
+ // src/app/components/Skysystemz/EmbeddedCheckoutStyles.tsx
11395
+ import { jsx as jsx36 } from "react/jsx-runtime";
11396
+ function EmbeddedCheckoutStyles({ extraCustomCSS }) {
11397
+ return /* @__PURE__ */ jsx36("style", { children: `
11398
+
11399
+ .pay-amount-conatiner{
11400
+ margin-top: 20px !important;
11401
+ margin-bottom: 20px !important ;
11402
+ }
11403
+
11404
+ .frac-pay-container.pay-container {
11405
+ grid-template-columns:1fr;
11406
+ }
11407
+
11408
+
11409
+ /* Card */
11410
+ .plan-card {
11411
+ width: 100%;
11412
+ font-family: Inter, sans-serif;
11413
+ background: #fff;
11414
+ }
11415
+
11416
+ /* Header */
11417
+ .card-header {
11418
+ padding: 12px 0 0 0;
11419
+ }
11420
+
11421
+ /* Button */
11422
+ .collapse-btn {
11423
+ width: 100%;
11424
+ background: none;
11425
+ border: none;
11426
+ display: flex;
11427
+ justify-content: space-between;
11428
+ align-items: center;
11429
+ cursor: pointer;
11430
+ font-size: 15px;
11431
+ padding: 0;
11432
+ }
11433
+
11434
+ /* Arrow */
11435
+ .arrow {
11436
+ transition: transform 0.3s ease;
11437
+ height: 8px;
11438
+ }
11439
+
11440
+ /* Open State */
11441
+ .collapse-btn.open .arrow {
11442
+ transform: rotate(180deg); /* Down */
11443
+ }
11444
+
11445
+ /* Body */
11446
+ .card-body {
11447
+ padding: 0;
11448
+ }
11449
+
11450
+ /* Plan Header */
11451
+ .plan-header {
11452
+ font-size: 15px;
11453
+ font-weight: 600;
11454
+ }
11455
+
11456
+ /* Scrollable List */
11457
+ .plan-list {
11458
+ max-height: 200px;
11459
+ overflow-y: auto;
11460
+ padding-right: 6px;
11461
+ }
11462
+
11463
+ /* Items */
11464
+ .plan-item {
11465
+ display: flex;
11466
+ justify-content: space-between;
11467
+ padding: 6px 0;
11468
+ font-size: 14px;
11469
+ }
11470
+
11471
+ /* Badges */
11472
+ .badge {
11473
+ padding: 4px 10px;
11474
+ border-radius: 12px;
11475
+ font-size: 12px;
11476
+ font-weight: 500;
11477
+ }
11478
+
11479
+ .badge-included {
11480
+ background: #f1f3f5;
11481
+ color: #495057;
11482
+ }
11483
+
11484
+ .badge-available {
11485
+ background: #f8f9fa;
11486
+ color: #212529;
11487
+ }
11488
+
11489
+ /* Helpers */
11490
+ .row-between {
11491
+ display: flex;
11492
+ justify-content: space-between;
11493
+ }
11494
+
11495
+ .text-end {
11496
+ text-align: right;
11497
+ }
11498
+
11499
+ .text-muted {
11500
+ color: #6c757d;
11501
+ font-size: 12px;
11502
+ }
11503
+
11504
+ .fw-semibold {
11505
+ font-weight: 600;
11506
+ }
11507
+
11508
+ .mb-2 {
11509
+ margin-bottom: 8px;
11510
+ }
11511
+
11512
+ /* Divider */
11513
+ .divider {
11514
+ height: 1px;
11515
+ background: #e5e7eb;
11516
+ margin: 8px 0;
11517
+ }
11518
+
11519
+ /* Collapse Animation */
11520
+ .collapse {
11521
+ max-height: 0;
11522
+ overflow: hidden;
11523
+ transition: max-height 0.3s ease;
11524
+ }
11525
+
11526
+ .collapse.show {
11527
+ max-height: 1000px;
11528
+ }
11529
+ .frac-pay-container.pay-container {
11530
+ grid-template-columns:1fr;
11531
+ }
11532
+ .frac-payment-form-div .amt-pay-con {
11533
+ padding-right: 0px;
11534
+ }
11535
+ .frac-payment-form-div .ach-scrl {
11536
+ padding-right: 0px;
11537
+ gap: 10px;
11538
+ max-height: fit-content !important;
11539
+ min-height: fit-content !important;
11540
+ overflow: hidden !important;
11541
+ }
11542
+ .frac-payment-form-div .frac-card-bank-radio-main {
11543
+ display: flex;
11544
+ flex-direction: row;
11545
+ align-items: flex-start;
11546
+ align-self: stretch;
11547
+ border-radius: 14px;
11548
+ border: none;
11549
+ overflow: visible;
11550
+ gap: 10px;
11551
+ }
11552
+ .frac-payment-form-div .frac-card-bank-radio {
11553
+ display: flex;
11554
+ padding: 12px 16px;
11555
+ justify-content: space-between;
11556
+ align-items: center;
11557
+ align-self: stretch;
11558
+ width: 50%;
11559
+ border: 1px solid #E0DFE2;
11560
+ border-radius: 10px;
11561
+ box-shadow: rgba(149, 157, 165, 0.2) 0px 1px 4px;
11562
+ }
11563
+ .frac-payment-form-div .frac-card-bank-radio.frac-active {
11564
+ background: #fff;
11565
+ border: 2px solid #004eab !important;
11566
+ }
11567
+
11568
+ .frac-payment-form-div .form-control-frac {
11569
+ border: 1px solid #dee2e6 !important;
11570
+ border-radius: 0.375rem !important;
11571
+ background-color: #F6F6F7;
11572
+ box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
11573
+ }
11574
+ .frac-payment-form-div .form-control-frac:focus {
11575
+ border: 1px solid #004eab !important;
11576
+ }
11577
+ .frac-payment-form-div .card-expiry-new {
11578
+ border: none;
11579
+ gap: 10px;
11580
+ }
11581
+ .frac-payment-form-div .exp-date-year-container {
11582
+ gap: 10px;
11583
+ width: 100%;
11584
+ }
11585
+ .frac-payment-form-div .card-type-logo-wrap{
11586
+ position: absolute;
11587
+ right: 10px;
11588
+ max-width: 30px;
11589
+ }
11590
+ .detials-wrap.detials-wrap-1 {
11591
+ display: flex;
11592
+ flex-wrap: wrap;
11593
+ }
11594
+ @media screen and (max-width: 1280px) {
11595
+ .frac-pay-container.pay-container {
11596
+ grid-template-columns: 1fr;
11597
+ border: none;
11598
+ }
11599
+ }
11600
+ @media screen and (max-width: 899px) {
11601
+ .detials-wrap {
11602
+ grid-template-columns: 1fr !important;
11603
+ }
11604
+ .frac-payment-form-div .exp-date-year-container{
11605
+ width: 100%;}
11606
+
11607
+ }
11608
+ @media screen and (max-width: 575px) {
11609
+ .frac-payment-form-div .card-type-logo-wrap{
11610
+ max-width: 30px;
11611
+ }
11612
+ form#ACHPaymentForm .ach-scrl {
11613
+ grid-template-columns: 1fr !important;
11614
+ }
11615
+ @media screen and (max-width: 375px) {
11616
+ .frac-payment-form-div .exp-date-year-container {
11617
+ flex-direction: column;
11618
+ }
11619
+ .parent-pay-container {
11620
+ padding: 10px;
11621
+ }
11622
+ }
11623
+ }
11624
+ .box-inner-card-text{
11625
+ display: flex;
11626
+ gap: 0px;
11627
+ flex-direction: column;
11628
+ }
11629
+ .box-inner-card-text .frac-payment-type-logo {
11630
+ width: 17px;
11631
+ height: 17px;
11632
+ aspect-ratio: 1/1;
11633
+ }
11634
+ .exp-date-year-wrap.form-control-frac input {
11635
+ background: transparent;
11636
+ border: none;
11637
+ outline: none;
11638
+ font-size: 1rem;
11639
+ font-weight: 400;
11640
+ }
11641
+ .exp-date-year-wrap.form-control-frac {
11642
+ display: flex;
11643
+ gap: 2px;
11644
+ }
11645
+ .exp-date-year-wrap input.exp-month {
11646
+ width: 32px;
11647
+ }
11648
+ .detials-wrap {
11649
+ display: grid;
11650
+ grid-template-columns: 1fr 1fr;
11651
+ gap: 10px;
11652
+ }
11653
+ .detials-wrap.detials-wrap-2{
11654
+ grid-template-columns: 1fr 1fr;
11655
+ }
11656
+ form#ACHPaymentForm .ach-scrl {
11657
+ display: grid;
11658
+ grid-gap: 0px 10px;
11659
+ grid-template-columns: 1fr;
11660
+ }
11661
+ .plan-list {
11662
+ max-height: 130px;
11663
+ min-height: 130px;
11664
+ overflow-y: auto;
11665
+ padding-right: 6px;
11666
+ }
11667
+ .plan-list::-webkit-scrollbar {
11668
+ width: 3px;
11669
+ background-color: #F5F5F5;
11670
+ }
11671
+ .plan-list::-webkit-scrollbar-thumb {
11672
+ background-color: #35254D;
11673
+ }
11674
+ div#cvv {
11675
+ border-top-left-radius: 0;
11676
+ border-bottom-left-radius: 0;
11677
+ border-top: 0;
11678
+ border-bottom: 0;
11679
+ border-right: 0;
11680
+ }
11681
+ div#exp_year {
11682
+ height: 36px;
11683
+ width: calc(100% + 1px);
11684
+ border-radius: 0;
11685
+ border-top: 0;
11686
+ border-bottom: 0;
11687
+ border-right: 1px solid #dee2e6;
11688
+ }
11689
+ div#exp_month {
11690
+ width: calc(100% + 1px);
11691
+ border-top-right-radius: 0;
11692
+ border-bottom-right-radius: 0;
11693
+ border: 0;
11694
+ border-right: 1px solid #dee2e6;
11695
+ }
11696
+ .exp-date-year-container .form-group {
11697
+ flex: 1;
11698
+ }
11699
+ .input-main-wrap-frac{
11700
+ margin:0px !important;
11701
+ padding:0px !important;
11702
+ }
11703
+ .toggle-num-wrapper.toggle-num-wrapper-new {
11704
+ border: 1px solid #dee2e6 !important;
11705
+ border-radius: 0.375rem !important;
11706
+ background-color: #F6F6F7;
11707
+ box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
11708
+ }
11709
+ .toggle-num-wrapper-new div#card_number {
11710
+ padding: 0px 10px;
11711
+ border: none;
11712
+ border-bottom: 1px solid #dee2e6;
11713
+ }
11714
+ .toggle-num-wrapper-new .card-crdi.card-expiry-new {
11715
+ padding: 0px 10px;
11716
+ }
11717
+ .toggle-num-wrapper-new .input-main-wrap-frac {
11718
+ height: 36px;
11719
+ }
11720
+ .toggle-num-wrapper-new:focus {
11721
+ border: 1px solid #004eab !important;
11722
+ }
11723
+ .frac-card-title-main {
11724
+ display: flex;
11725
+ align-items: start;
11726
+ gap: 4px;
11727
+ flex-direction: column;
11728
+ }
11729
+ .parent-pay-container {
11730
+ padding: 24px;
11731
+ background-color: #ffffff !important;
11732
+ border-radius: 15px;
11733
+ min-width: 300px;
11734
+ }
11735
+
11736
+
11737
+ ${extraCustomCSS}
11738
+
11739
+ ` });
11740
+ }
11741
+
11742
+ // src/app/components/Skysystemz/EmbeddedCheckout.tsx
11743
+ import { Fragment as Fragment21, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
11744
+ var EmbeddedCheckout = ({
11745
+ amount,
11746
+ bankAmount,
11747
+ submitBtnText = "Pay",
11748
+ session_token,
11749
+ customerId,
11750
+ callback,
11751
+ merchantName = "merchant",
11752
+ isPreAuth,
11753
+ surcharge = "0",
11754
+ submitBtnClass,
11755
+ submitBtnIcon,
11756
+ isRequest,
11757
+ pass_fee,
11758
+ pass_fee_amount,
11759
+ require3ds = false,
11760
+ autoTrigger = false,
11761
+ isPartial,
11762
+ bankSurcharge,
11763
+ partialRef,
11764
+ onSubmit,
11765
+ onLoad,
11766
+ customCSS: customCSS2
11767
+ }) => {
11768
+ const [show, setShow] = useState12(false);
11769
+ const [loading, setLoading] = useState12(false);
11770
+ const [childHandleClose, setChildHandleClose] = useState12(() => () => {
11771
+ });
11772
+ const [orderGuid, setOrderGuid] = useState12(null);
11773
+ const [remainingAmount, setRemainingAmount] = useState12(null);
11774
+ const initialCommonProps = useMemo2(
11775
+ () => ({
11776
+ amount,
11777
+ bankAmount,
11778
+ submitBtnText,
11779
+ session_token,
11780
+ customerId,
11781
+ callback,
11782
+ merchantName,
11783
+ isPreAuth,
11784
+ surcharge,
11785
+ submitBtnClass,
11786
+ submitBtnIcon,
11787
+ isRequest,
11788
+ pass_fee,
11789
+ pass_fee_amount,
11790
+ require3ds,
11791
+ autoTrigger,
11792
+ setShow,
11793
+ setHandleCloseRef: setChildHandleClose,
11794
+ isPartial,
11795
+ bankSurcharge,
11796
+ partialRef
11797
+ }),
11798
+ [
11799
+ amount,
11800
+ bankAmount,
11801
+ submitBtnText,
11802
+ session_token,
11803
+ customerId,
11804
+ callback,
11805
+ merchantName,
11806
+ isPreAuth,
11807
+ surcharge,
11808
+ submitBtnClass,
11809
+ submitBtnIcon,
11810
+ isRequest,
11811
+ pass_fee,
11812
+ pass_fee_amount,
11813
+ require3ds,
11814
+ autoTrigger,
11815
+ isPartial,
11816
+ bankSurcharge,
11817
+ partialRef
11818
+ ]
11819
+ );
11820
+ const [commonProps, setCommonProps] = useState12(initialCommonProps);
11821
+ useEffect17(() => {
11822
+ if (show) {
11823
+ setCommonProps(initialCommonProps);
11824
+ }
11825
+ }, [show, initialCommonProps]);
11826
+ const getskyosOrderDetails = async () => {
11827
+ var _a;
11828
+ setLoading(true);
11829
+ try {
11830
+ const res = await axios11.get(
11831
+ `${masterBaseUrl}api/v1/gateway/get-order-details/${session_token}`,
11832
+ { params: { isPartial, partialRef } }
11833
+ );
11834
+ if ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.result) {
11835
+ const data = res.data.data;
11836
+ if (data == null ? void 0 : data.orderGuid) {
11837
+ setOrderGuid(data == null ? void 0 : data.orderGuid);
11838
+ setRemainingAmount(data == null ? void 0 : data.remainingAmount);
11839
+ }
11840
+ setCommonProps((prev) => __spreadProps(__spreadValues({}, prev), {
11841
+ amount: data.amount,
11842
+ pass_fee_amount: data.pass_fee_amount,
11843
+ pass_fee: data.pass_fee
11844
+ }));
11845
+ }
11846
+ } catch (error) {
11847
+ console.log("error while getting skyosorderdeatils", error);
11848
+ } finally {
11849
+ setLoading(false);
11850
+ }
11851
+ };
11852
+ useEffect17(() => {
11853
+ if (show && isPartial && partialRef) {
11854
+ getskyosOrderDetails();
11855
+ }
11856
+ }, [show, isPartial, partialRef]);
11857
+ console.log(onLoad, "onLoad");
11858
+ return /* @__PURE__ */ jsxs22(Fragment21, { children: [
11859
+ /* @__PURE__ */ jsx37("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
11860
+ /* @__PURE__ */ jsx37(DataScript, {}),
11861
+ /* @__PURE__ */ jsx37(FractalTokenizerScript, {}),
11862
+ /* @__PURE__ */ jsx37(SkyChargewidgetstyles, {}),
11863
+ /* @__PURE__ */ jsx37(CardBankRadioStyles, {}),
11864
+ /* @__PURE__ */ jsx37(CustomModal2styles_default, {}),
11865
+ /* @__PURE__ */ jsx37(DataCapScriptLoader, {}),
11866
+ /* @__PURE__ */ jsx37(EmbeddedCheckoutStyles, { extraCustomCSS: customCSS2 }),
11867
+ !autoTrigger && /* @__PURE__ */ jsxs22("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
11009
11868
  submitBtnText,
11010
11869
  submitBtnIcon
11011
11870
  ] }),
11012
- !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 }))
11871
+ !autoTrigger ? /* @__PURE__ */ jsx37(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
11013
11872
  ] });
11014
11873
  };
11015
11874
  export {
11016
11875
  AddCardEasyPay as AddCard,
11017
11876
  CardOnFile,
11877
+ EmbeddedCheckout,
11018
11878
  GetPaymentPage,
11019
11879
  PartialPayment,
11020
11880
  PaymentWidget,