@fractalpay/fractalpay-next-dev 0.0.249 → 0.0.250

package/dist/index.d.ts

@@ -50,6 +50,7 @@ type Props$5 = {
     pass_fee?: boolean;
     isReader?: boolean;
     sessionToken?: string;
+    bankFeeAmount?: string;
 };
 declare function GetPaymentPage(props: Props$5): React.JSX.Element;
 

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.249",
+      version: "0.0.250",
       private: false,
       type: "module",
       scripts: {
@@ -1016,9 +1016,10 @@ function RequestPayment(props) {
       let cash_discount = CalculateCashDiscount(props == null ? void 0 : props.amount, props == null ? void 0 : props.surcharge);
       setCashDiscount(cash_discount);
     }
-  }, [props == null ? void 0 : props.pass_fee]);
+  }, [props == null ? void 0 : props.pass_fee, show]);
   const handleClose = () => {
     setShow(false);
+    setCashDiscount(0);
     setErrors({});
   };
   const handleShow = () => setShow(true);
@@ -2416,6 +2417,19 @@ position:relative;
             border: 0;
             border-right: 1px solid #dee2e6;
         }
+
+        .frac-fee-text{
+            display: block;
+            padding: 10px 0 4px;
+            font-family: 'IBM Plex Mono', monospace !important;
+            color: #727272 !important;
+            font-size: 12px;
+            line-height: 1.4;
+        }
+        .frac-fee-amount{
+            color: #c62828 !important;
+        }
+
         ` });
 }
 
@@ -3483,6 +3497,8 @@ function GetPaymentPage(props) {
   const [selectedCard, setSelectedCard] = useState4();
   const [selectedReader, setSelectedReader] = useState4(void 0);
   const [cashDiscount, setCashDiscount] = useState4(Number(props == null ? void 0 : props.amount));
+  const [bankAmount, setBankAmount] = useState4(Number(props == null ? void 0 : props.amount));
+  const [bankFeeAmount, setBankFeeAmount] = useState4(0);
   const [paymentData, setPaymentData] = useState4();
   let [tranId, setTranId] = useState4("");
   const tokenizerRef = useRef3(null);
@@ -3517,7 +3533,25 @@ function GetPaymentPage(props) {
   useEffect8(() => {
     if (show) {
       let cash_discount = CalculateCashDiscount(props == null ? void 0 : props.amount, (props == null ? void 0 : props.surcharge) || 0);
+      let bankAmount2 = cash_discount;
+      if ((props == null ? void 0 : props.bankFeeAmount) && Number(props == null ? void 0 : props.bankFeeAmount) > 0) {
+        bankAmount2 = Number(cash_discount) + Number(props == null ? void 0 : props.bankFeeAmount);
+      }
+      setBankAmount(bankAmount2);
       setCashDiscount(cash_discount);
+      const cardFeeAmount = Number((Number(props == null ? void 0 : props.amount) - Number(cash_discount || 0)).toFixed(2));
+      const bankFeeAmount2 = Number((props == null ? void 0 : props.bankFeeAmount) || 0);
+      const bankSavingsAmount = Math.max(bankFeeAmount2 > 0 ? cardFeeAmount - bankFeeAmount2 : cardFeeAmount, 0);
+      const bankSavingsText = bankSavingsAmount > 0 ? `Save ${formatUSD(bankSavingsAmount.toFixed(2))}` : "";
+      setBankFeeAmount(bankFeeAmount2);
+      console.log({
+        cash_discount,
+        bankAmount: bankAmount2,
+        cardFeeAmount,
+        bankFeeAmount: bankFeeAmount2,
+        bankSavingsAmount,
+        bankSavingsText
+      });
     }
   }, [show, props == null ? void 0 : props.pass_fee, props == null ? void 0 : props.amount, props == null ? void 0 : props.surcharge]);
   const handleClose = () => {
@@ -3857,7 +3891,7 @@ function GetPaymentPage(props) {
           routing_number: achData == null ? void 0 : achData.routingNumber,
           bank_name: achData == null ? void 0 : achData.bankName,
           account_type: achData == null ? void 0 : achData.accountType,
-          amount: String(cashDiscount || 0),
+          amount: String(bankAmount || 0),
           isSaveAch: saveACHinfo,
           customer_id: props == null ? void 0 : props.customerId,
           order_id: props == null ? void 0 : props.orderID,
@@ -3939,11 +3973,11 @@ function GetPaymentPage(props) {
     let amount = String(props == null ? void 0 : props.amount);
     let card_id = selectedCard == null ? void 0 : selectedCard.id;
     let card_type = selectedCard == null ? void 0 : selectedCard.card_type;
-    if (fractalpayPublicKey && order_id && amount && cashDiscount) {
+    if (fractalpayPublicKey && order_id && amount && bankAmount) {
       if (customer_id) {
         if (card_id) {
           let chargeobj = __spreadValues({
-            amount: card_type === "Bank" ? `${cashDiscount}` : amount,
+            amount: card_type === "Bank" ? `${bankAmount}` : amount,
             order_id,
             customer_id,
             card_id,
@@ -4182,22 +4216,21 @@ function GetPaymentPage(props) {
                         /* @__PURE__ */ jsx19("div", { className: "pay-amount-conatiner", children: /* @__PURE__ */ jsx19("small", { className: "pay-payment-amount", children: "Select paymet type" }) }),
                         /* @__PURE__ */ jsxs11("div", { className: "frac-card-bank-radio-main", children: [
                           /* @__PURE__ */ jsx19(CardBankRadio, { label: "Card", amount: (_a = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _a.toFixed(2), value: "card", onChange: handletabchange, activetab }),
-                          (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && /* @__PURE__ */ jsx19(CardBankRadio, { label: "Bank", amount: (_b = Number(cashDiscount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab }),
+                          (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && /* @__PURE__ */ jsx19(CardBankRadio, { label: "Bank", amount: (_b = Number(bankAmount)) == null ? void 0 : _b.toFixed(2), value: "ach", onChange: handletabchange, activetab }),
                           (props == null ? void 0 : props.isReader) && (paymentData == null ? void 0 : paymentData.paymentDeviceList) && ((_c = paymentData == null ? void 0 : paymentData.paymentDeviceList) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsx19(CardBankRadio, { label: "Reader", amount: (_d = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _d.toFixed(2), value: "reader", onChange: handletabchange, activetab })
                         ] }),
-                        !loading && (numberToBoolean(paymentData == null ? void 0 : paymentData.showSurcharge) ? cashDiscount && cashDiscount > 0 && (props == null ? void 0 : props.pass_fee) ? /* @__PURE__ */ jsxs11("div", { className: "frac-cash-discount-fee", children: [
-                          /* @__PURE__ */ jsxs11("small", { children: [
-                            activetab === "card" || activetab === "reader" ? "Cash Discount" : "Cash Discount Savings",
-                            "  "
+                        !loading && /* @__PURE__ */ jsxs11("div", { className: "", children: [
+                          activetab == "ach" && bankFeeAmount > 0 && /* @__PURE__ */ jsxs11("small", { className: "frac-fee-text", children: [
+                            "There is a processing fee of ",
+                            /* @__PURE__ */ jsx19("span", { className: "frac-fee-amount", children: formatUSD(bankFeeAmount.toFixed(2)) }),
+                            "."
                           ] }),
-                          /* @__PURE__ */ jsx19("p", { children: formatUSD((Number(props.amount) - cashDiscount).toFixed(2)) })
-                        ] }) : null : cashDiscount && cashDiscount > 0 && (props == null ? void 0 : props.pass_fee) && (activetab === "card" || activetab === "reader") ? /* @__PURE__ */ jsxs11("div", { className: "frac-cash-discount-fee", children: [
-                          /* @__PURE__ */ jsxs11("small", { children: [
-                            activetab === "card" || activetab === "reader" ? "Surcharge" : null,
-                            "  "
-                          ] }),
-                          /* @__PURE__ */ jsx19("p", { children: formatUSD((Number(props.amount) - cashDiscount).toFixed(2)) })
-                        ] }) : null)
+                          (activetab === "card" || activetab === "reader") && (props == null ? void 0 : props.pass_fee) && cashDiscount && cashDiscount > 0 && /* @__PURE__ */ jsxs11("small", { className: "frac-fee-text", children: [
+                            "Credit cards include a fee amount of ",
+                            /* @__PURE__ */ jsx19("span", { className: "frac-fee-amount", children: formatUSD((Number(props.amount) - cashDiscount).toFixed(2)) }),
+                            "."
+                          ] })
+                        ] })
                       ] })
                     ] }),
                     /* @__PURE__ */ jsxs11("div", { className: "pay-conatiner-one-last", children: [
@@ -4502,7 +4535,7 @@ function GetPaymentPage(props) {
                         /* @__PURE__ */ jsx19(CardList, { listHeading: "Banks", paymentGateway: paymentData == null ? void 0 : paymentData.paymentGateway, ListItems: bankList, selectedCard, setSelectedCard, handleDeleteCard, otherButtonLabel: "Pay With Other Bank", otherButtonAction: () => {
                           setActiveinBank("form");
                         } }),
-                        /* @__PURE__ */ jsx19("div", { className: "form-group", style: { padding: "0" }, children: /* @__PURE__ */ jsx19("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlepayment, children: formatUSD((_n = Number(cashDiscount)) == null ? void 0 : _n.toFixed(2)) }) })
+                        /* @__PURE__ */ jsx19("div", { className: "form-group", style: { padding: "0" }, children: /* @__PURE__ */ jsx19("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlepayment, children: formatUSD((_n = Number(bankAmount)) == null ? void 0 : _n.toFixed(2)) }) })
                       ] }) : /* @__PURE__ */ jsxs11("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc, autoComplete: "off", onKeyDown: (e) => {
                         if (e.key === "Enter" && loading2) {
                           e.preventDefault();
@@ -4630,7 +4663,7 @@ function GetPaymentPage(props) {
                             " to have my permission to charge this bank account for agreed upon purchases in the future."
                           ] }) })
                         ] }),
-                        /* @__PURE__ */ jsx19("div", { className: "form-group ", children: /* @__PURE__ */ jsx19("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit", children: formatUSD((_v = Number(cashDiscount)) == null ? void 0 : _v.toFixed(2)) }) })
+                        /* @__PURE__ */ jsx19("div", { className: "form-group ", children: /* @__PURE__ */ jsx19("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit", children: formatUSD((_v = Number(bankAmount)) == null ? void 0 : _v.toFixed(2)) }) })
                       ] })
                     ] }),
                     /* @__PURE__ */ jsxs11("div", { id: "reader", style: { display: activetab === "reader" ? "block" : "none" }, className: "tabcontent", children: [