@fractalpay/fractalpay-next 0.1.2 → 0.1.4

package/dist/index.js

@@ -39,7 +39,7 @@ var require_package = __commonJS({
   "package.json"(exports, module) {
     module.exports = {
       name: "@fractalpay/fractalpay-next",
-      version: "0.1.2",
+      version: "0.1.4",
       private: false,
       type: "module",
       scripts: {
@@ -3481,8 +3481,6 @@ var baseCSS = `
     }
 
   `;
-var datacapInitializing = false;
-var datacapInitialized = false;
 var DataCapFields = ({
   isOpen,
   tokenKey,
@@ -3490,11 +3488,15 @@ var DataCapFields = ({
   isAddCard,
   isEmbedded,
   customCSS: extraCss,
-  height
+  height,
+  onError
 }) => {
   const iframeId = "datacap-iframe";
   const resolverRef = useRef2(null);
   const [iframeReady, setIframeReady] = useState3(false);
+  const [mountKey, setMountKey] = useState3(0);
+  const initGenRef = useRef2(0);
+  const initTimeoutRef = useRef2(null);
   let customCSS = baseCSS;
   useEffect7(() => {
     if (!isOpen || !tokenKey) return;
@@ -3534,6 +3536,8 @@ var DataCapFields = ({
     if (extraCss) {
       customCSS += extraCss;
     }
+    const myGen = ++initGenRef.current;
+    setMountKey(myGen);
     const initialize = async () => {
       setLoader == null ? void 0 : setLoader(true);
       setIframeReady(false);
@@ -3552,18 +3556,39 @@ var DataCapFields = ({
           }
         }, 100);
       });
-      await waitForSDK();
-      const sdk = window.DatacapHostedWebToken;
-      if (datacapInitializing || datacapInitialized) {
-        console.log("\u{1F7E1} Datacap already initializing/initialized");
+      const waitForIframe = () => new Promise((resolve, reject) => {
+        let attempts = 0;
+        const interval = setInterval(() => {
+          attempts++;
+          if (document.getElementById(iframeId)) {
+            clearInterval(interval);
+            resolve();
+          }
+          if (attempts > 100) {
+            clearInterval(interval);
+            reject("Datacap iframe not found");
+          }
+        }, 50);
+      });
+      try {
+        await waitForSDK();
+        await waitForIframe();
+      } catch (err) {
+        if (initGenRef.current !== myGen) return;
+        console.error("\u274C Datacap failed to become ready:", err);
+        setLoader == null ? void 0 : setLoader(false);
+        onError == null ? void 0 : onError("Unable to load payment form. Please try again.");
         return;
       }
-      datacapInitializing = true;
-      const initTimeout = setTimeout(() => {
+      if (initGenRef.current !== myGen) return;
+      const sdk = window.DatacapHostedWebToken;
+      initTimeoutRef.current = setTimeout(() => {
         var _a, _b;
+        if (initGenRef.current !== myGen) return;
         console.error("\u274C Datacap iframe load timeout");
-        datacapInitializing = false;
+        initTimeoutRef.current = null;
         setLoader == null ? void 0 : setLoader(false);
+        onError == null ? void 0 : onError("Unable to load payment form. Please try again.");
         (_b = (_a = resolverRef.current) == null ? void 0 : _a.reject) == null ? void 0 : _b.call(
           _a,
           "Unable to load payment form"
@@ -3573,9 +3598,7 @@ var DataCapFields = ({
         tokenKey,
         iframeId,
         (response) => {
-          clearTimeout(initTimeout);
-          datacapInitializing = false;
-          datacapInitialized = true;
+          if (initGenRef.current !== myGen) return;
           setLoader == null ? void 0 : setLoader(false);
           if (!resolverRef.current) return;
           if ((response == null ? void 0 : response.Error) || (response == null ? void 0 : response.Errors)) {
@@ -3615,12 +3638,6 @@ var DataCapFields = ({
       delete window.requestDcToken;
     };
   }, []);
-  useEffect7(() => {
-    return () => {
-      datacapInitializing = false;
-      datacapInitialized = false;
-    };
-  }, []);
   return (
     // <iframe
     //   id={iframeId}
@@ -3643,13 +3660,22 @@ var DataCapFields = ({
         id: iframeId,
         onLoad: () => {
           console.log("\u{1F7E2} Iframe visually loaded");
+          if (initTimeoutRef.current) {
+            clearTimeout(initTimeoutRef.current);
+            initTimeoutRef.current = null;
+          }
           setIframeReady(true);
           setLoader == null ? void 0 : setLoader(false);
         },
         onError: () => {
           var _a, _b;
           console.error("\u274C iframe failed");
+          if (initTimeoutRef.current) {
+            clearTimeout(initTimeoutRef.current);
+            initTimeoutRef.current = null;
+          }
           setLoader == null ? void 0 : setLoader(false);
+          onError == null ? void 0 : onError("Payment form failed to load");
           (_b = (_a = resolverRef.current) == null ? void 0 : _a.reject) == null ? void 0 : _b.call(
             _a,
             "Payment form failed to load"
@@ -3662,7 +3688,8 @@ var DataCapFields = ({
           opacity: iframeReady ? 1 : 0,
           transition: "opacity 0.3s ease"
         }
-      }
+      },
+      mountKey
     )
   );
 };
@@ -4951,7 +4978,7 @@ function GetPaymentPage(props) {
     }
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
     showLoader();
     try {
       const data = {
@@ -4966,12 +4993,14 @@ function GetPaymentPage(props) {
         handleClose();
         setError("Something went wrong.");
       }
+      let willShowCardForm = true;
       if (((_e2 = (_d2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d2.data) == null ? void 0 : _e2.card_list) && ((_h2 = (_g2 = (_f2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _f2.data) == null ? void 0 : _g2.card_list) == null ? void 0 : _h2.length) > 0) {
         let banklists = (_k = (_j2 = (_i2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _i2.data) == null ? void 0 : _j2.card_list) == null ? void 0 : _k.filter((card) => (card == null ? void 0 : card.card_type) == "Bank");
         let cardlists = (_n = (_m = (_l = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _l.data) == null ? void 0 : _m.card_list) == null ? void 0 : _n.filter((card) => (card == null ? void 0 : card.card_type) !== "Bank");
         if ((cardlists == null ? void 0 : cardlists.length) > 0 || (banklists == null ? void 0 : banklists.length) > 0) {
           setActiveinCard("list");
           setActiveinBank("list");
+          willShowCardForm = false;
         }
         setCardList(cardlists);
         setBankList(banklists);
@@ -4981,11 +5010,14 @@ function GetPaymentPage(props) {
       if (((_p = (_o = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _o.data) == null ? void 0 : _p.paymentDeviceList) && ((_s = (_r = (_q = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _q.data) == null ? void 0 : _r.paymentDeviceList) == null ? void 0 : _s.length) > 0) {
         setSelectedReader((_u = (_t = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _t.data) == null ? void 0 : _u.paymentDeviceList[0]);
       }
+      if (willShowCardForm && ((_w = (_v = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _v.data) == null ? void 0 : _w.paymentGateway) === 31 && ((_y = (_x = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _x.data) == null ? void 0 : _y.dctoken)) {
+        setLoadingIframe(true);
+      }
       hideLoader();
     } catch (err) {
       console.log(err);
       hideLoader();
-      setError(((_w = (_v = err == null ? void 0 : err.response) == null ? void 0 : _v.data) == null ? void 0 : _w.message) || (err == null ? void 0 : err.message) || "Something went wrong");
+      setError(((_A = (_z = err == null ? void 0 : err.response) == null ? void 0 : _z.data) == null ? void 0 : _A.message) || (err == null ? void 0 : err.message) || "Something went wrong");
     }
   };
   const handlechargeCustomer = async (e) => {
@@ -5537,7 +5569,7 @@ function GetPaymentPage(props) {
                                 getSurchargeOptions,
                                 onSurchargeResult: setSurchargeResult
                               }
-                            ) : /* @__PURE__ */ jsx18(DataCapFields, { isOpen: show, tokenKey: paymentData == null ? void 0 : paymentData.dctoken, setLoader: setLoadingIframe }) }) }),
+                            ) : /* @__PURE__ */ jsx18(DataCapFields, { isOpen: show, tokenKey: paymentData == null ? void 0 : paymentData.dctoken, setLoader: setLoadingIframe, onError: (msg) => setError(msg || DcLoadingError) }) }) }),
                             /* @__PURE__ */ jsx18(FractalField, { label: "Zip", htmlFor: "zip", error: cardError == null ? void 0 : cardError.zipCode, children: /* @__PURE__ */ jsx18("input", { id: "zip", className: "fps-input", maxLength: 100, placeholder: "000000", value: (_j = cardData == null ? void 0 : cardData.zipCode) != null ? _j : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }) }),
                             (props == null ? void 0 : props.customerId) && /* @__PURE__ */ jsxs9(FractalCheckbox, { id: "save_card", checked: saveCardInfo, onChange: (v) => setSaveCardInfo(v), children: [
                               "Save this card. ",
@@ -6110,7 +6142,7 @@ function AddCardEasyPay(props) {
     return Object.keys(errors).length > 0;
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c;
+    var _a2, _b2, _c, _d, _e, _f, _g;
     showLoader();
     try {
       const data = {
@@ -6124,6 +6156,9 @@ function AddCardEasyPay(props) {
         handleClose();
         setError("Something went wrong.");
       }
+      if (((_e = (_d = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d.data) == null ? void 0 : _e.paymentGateway) === 31 && ((_g = (_f = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _f.data) == null ? void 0 : _g.dctoken)) {
+        setLoadingIframe(true);
+      }
       hideLoader();
     } catch (err) {
       console.log(err);
@@ -6381,7 +6416,8 @@ function AddCardEasyPay(props) {
                 isOpen: true,
                 tokenKey: paymentData == null ? void 0 : paymentData.dctoken,
                 setLoader: setLoadingIframe,
-                isAddCard: true
+                isAddCard: true,
+                onError: (msg) => setError(msg || DcLoadingError)
               }
             ) }),
             /* @__PURE__ */ jsxs11("div", { className: "form-group", style: { marginTop: "0" }, children: [
@@ -6988,21 +7024,24 @@ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks,
     onCancel();
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
     try {
       showLoader();
       const res = await axios5.get(`${masterBaseUrl}api/v1/gateway/get-payment-details/${session_token}`);
       if ((res == null ? void 0 : res.status) == 200) {
         setPaymentGateway((_b2 = (_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.paymentGateway);
         setDCToken((_d = (_c = res == null ? void 0 : res.data) == null ? void 0 : _c.data) == null ? void 0 : _d.dctoken);
+        if (((_f = (_e = res == null ? void 0 : res.data) == null ? void 0 : _e.data) == null ? void 0 : _f.paymentGateway) === 31 && ((_h = (_g = res == null ? void 0 : res.data) == null ? void 0 : _g.data) == null ? void 0 : _h.dctoken)) {
+          setLoadingIframe(true);
+        }
         hideLoader();
       }
     } catch (error2) {
-      console.log((_f = (_e = error2 == null ? void 0 : error2.response) == null ? void 0 : _e.data) == null ? void 0 : _f.result, "error while getting payment details");
+      console.log((_j = (_i = error2 == null ? void 0 : error2.response) == null ? void 0 : _i.data) == null ? void 0 : _j.result, "error while getting payment details");
       callback({
-        error: ((_h = (_g = error2 == null ? void 0 : error2.response) == null ? void 0 : _g.data) == null ? void 0 : _h.message) || "Something went wrong!",
-        result: (_j = (_i = error2 == null ? void 0 : error2.response) == null ? void 0 : _i.data) == null ? void 0 : _j.result,
-        statusCode: (_k = error2 == null ? void 0 : error2.response) == null ? void 0 : _k.status
+        error: ((_l = (_k = error2 == null ? void 0 : error2.response) == null ? void 0 : _k.data) == null ? void 0 : _l.message) || "Something went wrong!",
+        result: (_n = (_m = error2 == null ? void 0 : error2.response) == null ? void 0 : _m.data) == null ? void 0 : _n.result,
+        statusCode: (_o = error2 == null ? void 0 : error2.response) == null ? void 0 : _o.status
       });
       hideLoader();
     }
@@ -7268,7 +7307,8 @@ function CardOnFile({ session_token, callback, isloading, onCancel, showChecks,
           tokenKey: dcToken,
           setLoader: setLoadingIframe,
           customCSS,
-          height
+          height,
+          onError: (msg) => setError(msg || DcLoadingError)
         }
       ) }),
       /* @__PURE__ */ jsxs13("div", { className: "form-group", children: [
@@ -7958,7 +7998,7 @@ function PartialPayment(props) {
     }
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A;
     showLoader();
     try {
       const data = {
@@ -7973,11 +8013,13 @@ function PartialPayment(props) {
         handleClose();
         setError("Something went wrong.");
       }
+      let willShowCardForm = true;
       if (((_e2 = (_d2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d2.data) == null ? void 0 : _e2.card_list) && ((_h2 = (_g2 = (_f2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _f2.data) == null ? void 0 : _g2.card_list) == null ? void 0 : _h2.length) > 0) {
         let banklists = (_k2 = (_j2 = (_i2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _i2.data) == null ? void 0 : _j2.card_list) == null ? void 0 : _k2.filter((card) => (card == null ? void 0 : card.card_type) == "Bank");
         let cardlists = (_n2 = (_m2 = (_l2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _l2.data) == null ? void 0 : _m2.card_list) == null ? void 0 : _n2.filter((card) => (card == null ? void 0 : card.card_type) !== "Bank");
         if ((cardlists == null ? void 0 : cardlists.length) > 0) {
           setActiveinCard("list");
+          willShowCardForm = false;
         }
         if ((banklists == null ? void 0 : banklists.length) > 0) {
           setActiveinBank("list");
@@ -7990,11 +8032,14 @@ function PartialPayment(props) {
       if (((_p2 = (_o2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _o2.data) == null ? void 0 : _p2.paymentDeviceList) && ((_s2 = (_r2 = (_q2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _q2.data) == null ? void 0 : _r2.paymentDeviceList) == null ? void 0 : _s2.length) > 0) {
         setSelectedReader((_u2 = (_t2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _t2.data) == null ? void 0 : _u2.paymentDeviceList[0]);
       }
+      if (willShowCardForm && ((_w2 = (_v2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _v2.data) == null ? void 0 : _w2.paymentGateway) === 31 && ((_y2 = (_x2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _x2.data) == null ? void 0 : _y2.dctoken)) {
+        setLoadingIframe(true);
+      }
       hideLoader();
     } catch (err) {
       console.log(err);
       hideLoader();
-      setError(((_w2 = (_v2 = err == null ? void 0 : err.response) == null ? void 0 : _v2.data) == null ? void 0 : _w2.message) || (err == null ? void 0 : err.message) || "Something went wrong");
+      setError(((_A = (_z2 = err == null ? void 0 : err.response) == null ? void 0 : _z2.data) == null ? void 0 : _A.message) || (err == null ? void 0 : err.message) || "Something went wrong");
     }
   };
   const handlechargeCustomer = async (e) => {
@@ -8568,7 +8613,8 @@ function PartialPayment(props) {
                             {
                               isOpen: show,
                               tokenKey: paymentData == null ? void 0 : paymentData.dctoken,
-                              setLoader: setLoadingIframe
+                              setLoader: setLoadingIframe,
+                              onError: (msg) => setError(msg || DcLoadingError)
                             }
                           ) }),
                           /* @__PURE__ */ jsxs16("div", { className: "form-group", children: [
@@ -10118,6 +10164,10 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
   const [errorBankConsent, setErrorBankConsent] = useState9("");
   const [errorBankConsentOther, setErrorBankConsentOther] = useState9("");
   const [isTokenizerReady, setTokenizerReady] = useState9(false);
+  console.log(loadingIframe, "loadingIframe");
+  console.log(loading, "loader");
+  console.log(loading2, "loading2");
+  console.log(loadingPrev, "loadingPrev");
   let mastercard2 = S3Url + "widget/mc-img.svg";
   let visa2 = S3Url + "widget/visa-img.svg";
   let americanexp2 = S3Url + "widget/ae-img.svg";
@@ -10326,6 +10376,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
   };
   const completeFractalFlow = async (tokenizeData, intentid, typeoftoken) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+    showLoader();
     try {
       console.log({
         tokenizeData,
@@ -10951,7 +11002,7 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
     }
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2;
     try {
       showLoader();
       const res = await axios8.get(`${masterBaseUrl}api/v1/gateway/get-payment-details/${session_token}`, {
@@ -10965,16 +11016,20 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
         setProcessingFee(Number((_d2 = (_c2 = res == null ? void 0 : res.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.fee) || 0);
         setPaymentGateway((_f2 = (_e2 = res == null ? void 0 : res.data) == null ? void 0 : _e2.data) == null ? void 0 : _f2.paymentGateway);
         setDCToken((_h2 = (_g2 = res == null ? void 0 : res.data) == null ? void 0 : _g2.data) == null ? void 0 : _h2.dctoken);
+        debugger;
+        if (((_j2 = (_i2 = res == null ? void 0 : res.data) == null ? void 0 : _i2.data) == null ? void 0 : _j2.paymentGateway) === 31 && ((_l2 = (_k2 = res == null ? void 0 : res.data) == null ? void 0 : _k2.data) == null ? void 0 : _l2.dctoken)) {
+          setLoadingIframe(true);
+        }
         hideLoader();
       }
     } catch (error2) {
-      console.log((_j2 = (_i2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _i2.data) == null ? void 0 : _j2.result, "error while getting payment details");
+      console.log((_n2 = (_m2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _m2.data) == null ? void 0 : _n2.result, "error while getting payment details");
       callback({
-        error: ((_l2 = (_k2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _k2.data) == null ? void 0 : _l2.message) || "Something went wrong!",
-        result: (_n2 = (_m2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _m2.data) == null ? void 0 : _n2.result,
-        statusCode: (_o2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _o2.status
+        error: ((_p2 = (_o2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _o2.data) == null ? void 0 : _p2.message) || "Something went wrong!",
+        result: (_r2 = (_q2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _q2.data) == null ? void 0 : _r2.result,
+        statusCode: (_s2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _s2.status
       });
-      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");
+      setError(((_u2 = (_t2 = error2 == null ? void 0 : error2.response) == null ? void 0 : _t2.data) == null ? void 0 : _u2.message) || (error2 == null ? void 0 : error2.message) || "Something went wrong");
       hideLoader();
     }
   };
@@ -11441,7 +11496,8 @@ var ModelContentSky = ({ amount, bankAmount, submitBtnText = "Pay", session_toke
                           tokenKey: dcToken,
                           setLoader: activeinCard === "form" ? setLoadingIframe : null,
                           isEmbedded: onSubmit ? true : false,
-                          customCSS
+                          customCSS,
+                          onError: (msg) => setError(msg || DcLoadingError)
                         }
                       ) }),
                       /* @__PURE__ */ jsxs19("div", { className: "form-group-frac", children: [