Another fix

2023-07-16 01:36:27 +01:00
parent feb301c3c0
commit fb7913c563
2 changed files with 148 additions and 149 deletions
@@ -95,7 +95,7 @@ function AddFundDollars(props) {
      return;
    }

-    if (!prevCardDetails) {
+    if (!prevCardDetails["payment-card"]?.card_uid) {
      return;
    }

@@ -171,6 +171,8 @@ function AddFundDollars(props) {

  const handleClose = props.onClose;

+  console.log(prevCardDetails)
+
  return (
    <>
      <div className="w-full">
@@ -1,11 +1,78 @@
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 import React, { useState } from "react";
-import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";

+function ThePaymentText({ value }) {
+  return (
+    <div className="my-2 flex items-center gap-5">
+      <div className="card-details flex items-center gap-3">
+        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+          {value.description} Card
+        </h1>
+        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
+          Bank **************{value.digits}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function AmountSection({ currency, amount, country }) {
+  const formattedAmount = (Number(amount) / 100).toFixed(2);
+  return (
+    <div
+      className={`flex items-center ${country == "US" ? "gap-14" : "gap-4"}`}
+    >
+      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        Amount({currency})
+      </h1>
+      <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        {formattedAmount}
+      </span>
+    </div>
+  );
+}
+
+function TransactionFeeSection({ currency, fee, country }) {
+  const formattedFee = (Number(fee) / 100).toFixed(2);
+  return (
+    <div
+      className={`flex items-center border-b border-gray-600 ${
+        country == "US" ? "gap-[2.7rem]" : "gap-4"
+      }`}
+    >
+      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        Transaction Fee
+      </h1>
+      <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        {formattedFee}
+      </span>
+    </div>
+  );
+}
+
+function TotalSection({ currency, amount, fee, country }) {
+  const total = (Number(amount) + Number(fee)) / 100;
+  const formattedTotal = total.toFixed(2);
+  return (
+    <div
+      className={`flex items-center ${
+        country == "US" ? "gap-[8rem]" : "gap-[6.3rem]"
+      }`}
+    >
+      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        Total
+      </h1>
+      <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        {formattedTotal}
+      </span>
+    </div>
+  );
+}
+
 function ConfirmAddFund({
  confirmCredit,
  onClose,
@@ -17,65 +84,21 @@ function ConfirmAddFund({
  const __confirmCardDetails = __confirmData.card
    ? JSON.parse(__confirmData.card)
    : "";
-  let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
-
-  let [requestStatus, setRequestStatus] = useState({
-    message: "",
-    loading: false,
-    status: false,
-  }); // STATE FOR API REQUEST

  const apiURL = new usersService();
  const navigate = useNavigate();

-  //FUNCTION TO HANDLE SUBMIT
-  const onSuccessPayment = () => {
-    setRequestStatus({ message: "", loading: true, status: false });
-    let reqData = { amount: __confirmData?.account, currency: "NGN" };
-    apiURL
-      .startTopUp(reqData)
-      .then((res) => {
-        if (res.data.internal_return < 0) {
-          setRequestStatus({
-            message: "Could not finish transaction",
-            loading: false,
-            status: false,
-          });
-          toast.success("Opps! something went wrong");
-        }
-        // do something
-        setRequestStatus({
-          message: "Topup successful",
-          loading: false,
-          status: true,
-        });
-        toast.success("Account Topup was successful");
-        setTimeout(() => {
-          navigate("/my-wallet", { replace: true });
-        }, 1000);
-      })
-      .catch((err) => {
-        // do something
-        setRequestStatus({
-          message: "Opps! An Error Occured",
-          loading: false,
-          status: false,
-        });
-        toast.success("Opps! something went wrong");
-      });
-  };
+  const [requestStatus, setRequestStatus] = useState({
+    message: "",
+    loading: false,
+    status: false,
+  });

  const config = {
    public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
    tx_ref: Date.now(),
-    amount: __confirmData?.amount,
    currency: "NGN",
    payment_options: "card,mobilemoney,ussd",
-    customer: {
-      email: `${userDetails.email}`,
-      phone_number: userDetails.phone,
-      name: `${userDetails.lastname} ${userDetails.firstname}`,
-    },
    customizations: {
      title: "WrenchBoard",
      description: "Topup Payment",
@@ -88,12 +111,47 @@ function ConfirmAddFund({
    text: "Proceed",
    callback: (response) => {
      onSuccessPayment();
-      closePaymentModal(); // this will close the modal programmatically
+      closePaymentModal();
    },
    onClose: () => {},
  };

-  // Handling Previous Card
+  const onSuccessPayment = () => {
+    setRequestStatus({ message: "", loading: true, status: false });
+    const reqData = { amount: __confirmData?.account, currency: "NGN" };
+
+    apiURL
+      .startTopUp(reqData)
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          setRequestStatus({
+            message: "Could not finish transaction",
+            loading: false,
+            status: false,
+          });
+          toast.success("Opps! something went wrong");
+        } else {
+          setRequestStatus({
+            message: "Topup successful",
+            loading: false,
+            status: true,
+          });
+          toast.success("Account Topup was successful");
+          setTimeout(() => {
+            navigate("/my-wallet", { replace: true });
+          }, 1000);
+        }
+      })
+      .catch((err) => {
+        setRequestStatus({
+          message: "Opps! An Error Occured",
+          loading: false,
+          status: false,
+        });
+        toast.success("Opps! something went wrong");
+      });
+  };
+
  const handlePrevCard = async () => {
    const { amount, credit_reference, currency } = __confirmData;
    const { card_uid } = __confirmCardDetails;
@@ -124,18 +182,16 @@ function ConfirmAddFund({
        return;
      }

-      return setTimeout(
-        () =>
-          setConfirmCredit((prev) => ({
-            ...prev,
-            show: {
-              awaitConfirm: { loader: false, state: false },
-              acceptConfirm: { loader: false, state: true },
-            },
-            data: _response,
-          })),
-        1500
-      );
+      setTimeout(() => {
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            awaitConfirm: { loader: false, state: false },
+            acceptConfirm: { loader: false, state: true },
+          },
+          data: _response,
+        }));
+      }, 1500);
    } catch (error) {
      setConfirmCredit((prev) => ({
        ...prev,
@@ -147,107 +203,48 @@ function ConfirmAddFund({
    }
  };

-  const ThePaymentText = ({ value }) => (
-    <div className="my-2 flex items-center gap-5">
-      <div className="card-details flex items-center gap-3">
-        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-          {value.description} Card
-        </h1>
-        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
-          Bank **************{value.digits}
-        </p>
-      </div>
-    </div>
-  );
-
  return (
    <div className="content-wrapper w-full h-[32rem]">
      <div className="w-full mb-10">
        <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
          <div className="px-4 md:p-8 py-4 add-fund-info">
            <div className="field w-full mb-3 min-h-[45px]">
-              {confirmCredit?.show?.awaitConfirm?.state ? (
+              {confirmCredit?.show?.awaitConfirm?.state && (
                <div className="flex flex-col gap-2">
-                  {/* Amount */}
-                  <div
-                    className={`flex items-center ${
-                      __confirmCountry == "US" ? "gap-14" : "gap-4"
-                    }`}
-                  >
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      Amount({__confirmData?.currency})
-                    </h1>
-                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {`${walletItem?.symbol} ${
-                        Number(__confirmData?.amount).toLocaleString(
-                          undefined,
-                          {
-                            minimumFractionDigits: 2,
-                            maximumFractionDigits: 2,
-                          }
-                        ) || ""
-                      }`}
-                    </span>
-                  </div>
-                  {/* Transaction Fee */}
-                  <div
-                    className={`flex items-center border-b border-gray-600 ${
-                      __confirmCountry == "US" ? "gap-[2.7rem]" : "gap-4"
-                    }`}
-                  >
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      Transaction Fee
-                    </h1>
-                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {`${walletItem?.symbol} ${
-                        Number(__confirmData?.fee).toLocaleString(undefined, {
-                          minimumFractionDigits: 2,
-                          maximumFractionDigits: 2,
-                        }) || ""
-                      }`}
-                    </span>
-                  </div>
-                  {/* Total */}
-                  <div
-                    className={`flex items-center ${
-                      __confirmCountry == "US" ? "gap-[8rem]" : "gap-[6.3rem]"
-                    }`}
-                  >
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      Total
-                    </h1>
-                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {`${walletItem?.symbol} ${
-                        (
-                          Number(__confirmData?.amount) +
-                          Number(__confirmData?.fee)
-                        ).toLocaleString(undefined, {
-                          minimumFractionDigits: 2,
-                          maximumFractionDigits: 2,
-                        }) || ""
-                      }`}
-                    </span>
-                  </div>
-
-                  {__confirmCountry == "US" && (
+                  <AmountSection
+                    currency={__confirmData?.currency}
+                    amount={__confirmData?.amount}
+                    country={__confirmCountry}
+                  />
+                  <TransactionFeeSection
+                    currency={__confirmData?.currency}
+                    fee={__confirmData?.fee}
+                    country={__confirmCountry}
+                  />
+                  <TotalSection
+                    currency={__confirmData?.currency}
+                    amount={__confirmData?.amount}
+                    fee={__confirmData?.fee}
+                    country={__confirmCountry}
+                  />
+                  {__confirmCountry === "US" && (
                    <div className="flex items-center gap-8">
                      <label
                        htmlFor="payment"
                        className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
                      >
-                        {__confirmCountry == "US" && "Payment Method"}
+                        Payment Method
                      </label>
-                      <span className="text-[#181c32] dark:text-white ">
+                      <span className="text-[#181c32] dark:text-white">
                        {__confirmCardDetails ? (
                          <ThePaymentText value={__confirmCardDetails} />
                        ) : null}
                      </span>
                    </div>
                  )}
-
                  <div
                    className={`${
-                      __confirmCountry == "US"
+                      __confirmCountry === "US"
                        ? "gap-[3.7rem]"
                        : "gap-[9.81rem]"
                    } flex items-center`}
@@ -260,13 +257,13 @@ function ConfirmAddFund({
                    </span>
                  </div>
                </div>
-              ) : null}
+              )}
            </div>
          </div>

          <div
            className={
-              __confirmCountry == "US" ? "min-h-[96px]" : "min-h-[200px]"
+              __confirmCountry === "US" ? "min-h-[96px]" : "min-h-[200px]"
            }
          ></div>
          <hr />
@@ -277,7 +274,7 @@ function ConfirmAddFund({
            >
              Cancel
            </button>
-            {__confirmCountry == "US" && (
+            {__confirmCountry === "US" && (
              <button
                className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
                onClick={
@@ -293,7 +290,7 @@ function ConfirmAddFund({
                )}
              </button>
            )}
-            {__confirmCountry == "NG" && (
+            {__confirmCountry === "NG" && (
              <FlutterWaveButton
                {...fwConfig}
                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"