@fractalpay/fractalpay-next-dev 0.0.292 → 0.0.294

package/dist/index.js

@@ -39,7 +39,7 @@ var require_package = __commonJS({
   "package.json"(exports, module) {
     module.exports = {
       name: "@fractalpay/fractalpay-next-dev",
-      version: "0.0.292",
+      version: "0.0.294",
       private: false,
       type: "module",
       scripts: {
@@ -774,6 +774,16 @@ var RequestPaymentstyles = (props) => {
   align-items: center;
 }
 
+.request-payment-error-tick {
+  border-radius: 1000px;
+  background: #f1000024;
+  display: flex;
+  width: 60px;
+  height: 60px;
+  justify-content: center;
+  align-items: center;
+}
+
 .request-payment-success-text {
   color: #161616;
   text-align: center;
@@ -1043,6 +1053,8 @@ function RequestPayment(props) {
   const [cashDiscount, setCashDiscount] = useState(void 0);
   const [amount, setAmount] = useState("");
   const [showConfirmationModal, setShowConfirmationModal] = useState(false);
+  const [showErrorModal, setShowErrorModal] = useState(false);
+  const [apiError, setApiError] = useState("");
   const [apiResponse, setApiResponse] = useState(null);
   const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
   const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
@@ -1070,6 +1082,11 @@ function RequestPayment(props) {
     handleSubmit(apiResponse);
     setShowConfirmationModal(false);
   };
+  const handleCloseErrorModal = () => {
+    console.log(apiResponse, "apiresponse");
+    handleSubmit(apiResponse);
+    setShowErrorModal(false);
+  };
   function emptyFields() {
     setRequestDetails({
       email: "",
@@ -1088,6 +1105,7 @@ function RequestPayment(props) {
     window.parent.postMessage(message, "*");
   }
   const sendRequestPayment = async (e) => {
+    var _a, _b;
     e.currentTarget.blur();
     if (loading) return;
     if (Object.keys(errors).length > 0) {
@@ -1124,13 +1142,19 @@ function RequestPayment(props) {
       let response = await axios.post(`${baseUrl}create-widget-order`, formData, {
         headers: __spreadValues({}, (props == null ? void 0 : props.sessionToken) && { "X-Session-Token": props.sessionToken })
       });
-      if ((response == null ? void 0 : response.status) === 200) {
+      if ((response == null ? void 0 : response.status) === 200 && ((_a = response == null ? void 0 : response.data) == null ? void 0 : _a.result)) {
         setShowConfirmationModal(true);
         setShow(false);
         emptyFields();
         setApiResponse(response == null ? void 0 : response.data);
+        setLoading(false);
+      } else {
+        console.log(response);
+        setShowErrorModal(true);
+        setShow(false);
+        setApiError(((_b = response == null ? void 0 : response.data) == null ? void 0 : _b.message) || "Something went wrong!");
+        setLoading(false);
       }
-      setLoading(false);
     } catch (error) {
       console.log(error);
       setLoading(false);
@@ -1242,7 +1266,7 @@ function RequestPayment(props) {
               /* @__PURE__ */ jsx6("p", { className: "request-payment-amount", children: formatAmount(props == null ? void 0 : props.amount) }),
               cashDiscount && cashDiscount > 0 && /* @__PURE__ */ jsxs3("div", { className: "frac-req-cash-discount", children: [
                 /* @__PURE__ */ jsxs3("div", { className: "frac-cashlabel", children: [
-                  numberToBoolean(props == null ? void 0 : props.showSurcharge) ? "Surcharge" : "Cash Discount",
+                  (props == null ? void 0 : props.showSurcharge) == 1 ? "3% Card Fee" : "Cash Discount",
                   " :"
                 ] }),
                 /* @__PURE__ */ jsx6("div", { children: formatUSD((Number(props.amount) - cashDiscount).toFixed(2)) })
@@ -1383,6 +1407,56 @@ function RequestPayment(props) {
             /* @__PURE__ */ jsx6("div", { className: "request-payment-success-btn-div", children: /* @__PURE__ */ jsx6("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2", children: "Close" }) })
           ] }) })
         }
+      ),
+      /* @__PURE__ */ jsx6(
+        CustomModal2_default,
+        {
+          open: showErrorModal,
+          onClose: handleCloseErrorModal,
+          maxWidth: "500px",
+          children: /* @__PURE__ */ jsx6("div", { className: "fractal-popup-content", style: { padding: "0px", maxWidth: "500px" }, children: /* @__PURE__ */ jsxs3("div", { className: "request-payment-success-container", children: [
+            /* @__PURE__ */ jsx6("span", { className: "request-payment-close-popup", onClick: handleCloseErrorModal, children: /* @__PURE__ */ jsxs3("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+              /* @__PURE__ */ jsx6("g", { clipPath: "url(#clip0_12425_52336)", children: /* @__PURE__ */ jsx6("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" }) }),
+              /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsx6("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx6("rect", { width: "16", height: "16", fill: "white" }) }) })
+            ] }) }),
+            /* @__PURE__ */ jsx6("div", { className: "request-payment-success-tick-div", children: /* @__PURE__ */ jsx6("div", { className: "request-payment-error-tick", children: /* @__PURE__ */ jsx6(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                xmlnsXlink: "http://www.w3.org/1999/xlink",
+                width: 16,
+                height: 16,
+                x: 0,
+                y: 0,
+                viewBox: "0 0 21 21",
+                xmlSpace: "preserve",
+                fillRule: "evenodd",
+                className: "",
+                children: /* @__PURE__ */ jsx6("g", { children: /* @__PURE__ */ jsxs3("g", { fill: "red", children: [
+                  /* @__PURE__ */ jsx6(
+                    "path",
+                    {
+                      d: "m3.486 16.029 12.41-12.41a.183.183 0 0 1 .258 0l.326.326.004.004.702.702.003.004.327.326a.183.183 0 0 1 0 .258L5.106 17.65a.183.183 0 0 1-.258 0l-.326-.327-.004-.003-.702-.702-.004-.004-.326-.326a.183.183 0 0 1 0-.258z",
+                      fill: "",
+                      opacity: 1
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6(
+                    "path",
+                    {
+                      d: "M15.896 17.649 3.486 5.239a.183.183 0 0 1 0-.258l.327-.326.003-.004.702-.702.004-.004.326-.326a.183.183 0 0 1 .258 0l12.41 12.41a.183.183 0 0 1 0 .258l-.326.326-.004.004-.702.702-.004.003-.326.327a.183.183 0 0 1-.258 0z",
+                      fill: "",
+                      opacity: 1
+                    }
+                  )
+                ] }) })
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx6("h6", { className: "request-payment-success-text", children: apiError }),
+            /* @__PURE__ */ jsx6("h6", { className: "request-payment-success-subtext", children: "Please try again later" }),
+            /* @__PURE__ */ jsx6("div", { className: "request-payment-success-btn-div", children: /* @__PURE__ */ jsx6("button", { onClick: handleCloseErrorModal, className: "request-payment-success-btn2", children: "Close" }) })
+          ] }) })
+        }
       )
     ] })
   ] });
@@ -1413,6 +1487,8 @@ function RequestPreAuthPayment(props) {
   const [amount, setAmount] = useState2("");
   const [showConfirmationModal, setShowConfirmationModal] = useState2(false);
   const [apiResponse, setApiResponse] = useState2(null);
+  const [showErrorModal, setShowErrorModal] = useState2(false);
+  const [apiError, setApiError] = useState2("");
   const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
   const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
   const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
@@ -1444,6 +1520,7 @@ function RequestPreAuthPayment(props) {
     window.parent.postMessage(message, "*");
   }
   const sendRequestPayment = async (e) => {
+    var _a, _b;
     e.currentTarget.blur();
     if (loading) return;
     if (Object.keys(errors).length > 0) {
@@ -1478,11 +1555,17 @@ function RequestPreAuthPayment(props) {
       let response = await axios2.post(`${baseUrl}send-request-pre-auth-payment`, formData, {
         headers: __spreadValues({}, (props == null ? void 0 : props.sessionToken) && { "X-Session-Token": props.sessionToken })
       });
-      if ((response == null ? void 0 : response.status) === 200) {
+      if ((response == null ? void 0 : response.status) === 200 && ((_a = response == null ? void 0 : response.data) == null ? void 0 : _a.result)) {
         setShowConfirmationModal(true);
         setShow(false);
         emptyFields();
         setApiResponse(response == null ? void 0 : response.data);
+        setLoading(false);
+      } else {
+        setShowErrorModal(true);
+        setShow(false);
+        setApiError(((_b = response == null ? void 0 : response.data) == null ? void 0 : _b.message) || "Something went wrong!");
+        setLoading(false);
       }
       setLoading(false);
     } catch (error) {
@@ -1572,6 +1655,11 @@ function RequestPreAuthPayment(props) {
       maximumFractionDigits: 2
     }).format(Number(amount2));
   }
+  const handleCloseErrorModal = () => {
+    console.log(apiResponse, "apiresponse");
+    handleSubmit(apiResponse);
+    setShowErrorModal(false);
+  };
   return /* @__PURE__ */ jsxs4(Fragment4, { children: [
     /* @__PURE__ */ jsx7(RequestPaymentstyles_default, {}),
     /* @__PURE__ */ jsx7(Loader_default, { loading }),
@@ -1705,6 +1793,56 @@ function RequestPreAuthPayment(props) {
               /* @__PURE__ */ jsx7("div", { className: "request-payment-success-btn-div", children: /* @__PURE__ */ jsx7("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2", children: "Close" }) })
             ] }) })
           }
+        ),
+        /* @__PURE__ */ jsx7(
+          CustomModal2_default,
+          {
+            open: showErrorModal,
+            onClose: handleCloseErrorModal,
+            maxWidth: "500px",
+            children: /* @__PURE__ */ jsx7("div", { className: "fractal-popup-content", style: { padding: "0px", maxWidth: "500px" }, children: /* @__PURE__ */ jsxs4("div", { className: "request-payment-success-container", children: [
+              /* @__PURE__ */ jsx7("span", { className: "request-payment-close-popup", onClick: handleCloseErrorModal, children: /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+                /* @__PURE__ */ jsx7("g", { clipPath: "url(#clip0_12425_52336)", children: /* @__PURE__ */ jsx7("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" }) }),
+                /* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7("clipPath", { id: "clip0_12425_52336", children: /* @__PURE__ */ jsx7("rect", { width: "16", height: "16", fill: "white" }) }) })
+              ] }) }),
+              /* @__PURE__ */ jsx7("div", { className: "request-payment-success-tick-div", children: /* @__PURE__ */ jsx7("div", { className: "request-payment-error-tick", children: /* @__PURE__ */ jsx7(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  xmlnsXlink: "http://www.w3.org/1999/xlink",
+                  width: 16,
+                  height: 16,
+                  x: 0,
+                  y: 0,
+                  viewBox: "0 0 21 21",
+                  xmlSpace: "preserve",
+                  fillRule: "evenodd",
+                  className: "",
+                  children: /* @__PURE__ */ jsx7("g", { children: /* @__PURE__ */ jsxs4("g", { fill: "red", children: [
+                    /* @__PURE__ */ jsx7(
+                      "path",
+                      {
+                        d: "m3.486 16.029 12.41-12.41a.183.183 0 0 1 .258 0l.326.326.004.004.702.702.003.004.327.326a.183.183 0 0 1 0 .258L5.106 17.65a.183.183 0 0 1-.258 0l-.326-.327-.004-.003-.702-.702-.004-.004-.326-.326a.183.183 0 0 1 0-.258z",
+                        fill: "",
+                        opacity: 1
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      "path",
+                      {
+                        d: "M15.896 17.649 3.486 5.239a.183.183 0 0 1 0-.258l.327-.326.003-.004.702-.702.004-.004.326-.326a.183.183 0 0 1 .258 0l12.41 12.41a.183.183 0 0 1 0 .258l-.326.326-.004.004-.702.702-.004.003-.326.327a.183.183 0 0 1-.258 0z",
+                        fill: "",
+                        opacity: 1
+                      }
+                    )
+                  ] }) })
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx7("h6", { className: "request-payment-success-text", children: apiError }),
+              /* @__PURE__ */ jsx7("h6", { className: "request-payment-success-subtext", children: "Please try again later" }),
+              /* @__PURE__ */ jsx7("div", { className: "request-payment-success-btn-div", children: /* @__PURE__ */ jsx7("button", { onClick: handleCloseErrorModal, className: "request-payment-success-btn2", children: "Close" }) })
+            ] }) })
+          }
         )
       ] })
     ] })