Convert ConfirmAddFund to Popup

2023-07-11 19:47:04 +01:00
parent c53ee2833f
commit e899e5eb2a
7 changed files with 321 additions and 210 deletions
@@ -59,6 +59,7 @@ function AddFundDollars(props) {
  let apiCall = new usersService();

  let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
+  const [loader, setLoader] = useState(false);

  let [prevCardDetails, setPrevCardDetails] = useState(null); // STATE TO HOLD PREVIOUS CARD SELECTED

@@ -94,18 +95,26 @@ function AddFundDollars(props) {
      }, 5000);
    }
    if (tab == "previous") {
-      const stateData = { amount: Number(props.input), currency: "dollars" };
-      navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
+      setLoader(true);
+      const stateData = {
+        amount: Number(props.input),
+        currency: props.currency,
+      };
+
+      setTimeout(() => {
+        props.setConfirmCredit({ show: true, data: stateData });
+        setLoader(false);
+      }, 1500);
+      // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
    }
    if (tab == "new") {
      const stateData = {
        amount: Number(props.input),
-        currency: "dollars",
+        currency: props.currency,
        ...values,
      };
-      navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
+      // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
    }
-    props.setInput("");
  };

  useEffect(() => {
@@ -169,7 +178,11 @@ function AddFundDollars(props) {
              <select className="my-3 w-full rounded-full p-4 outline-none border-none">
                <option value="">Select a card</option>
                {currentPreviousCards.map((item, index) => (
-                  <option key={index} className={index != 0 && "border-t-2"}>
+                  <option
+                    key={index}
+                    className={index != 0 && "border-t-2"}
+                    value={item}
+                  >
                    <div className="my-2 flex items-center gap-5">
                      {/* <input
                            type="radio"
@@ -518,13 +531,23 @@ function AddFundDollars(props) {
        )}
      </div>
      {tab == "previous" && (
-        <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center py-4">
+        <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center gap-4 py-4">
+          <button
+            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+            onClick={props.onClose}
+          >
+            Cancel
+          </button>
          <button
            onClick={handleSubmit}
            type="button"
-            className="px-4 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
          >
-            <span className="text-white">Continue</span>
+            {loader ? (
+              <LoadingSpinner size="6" color="sky-blue" />
+            ) : (
+              <span className="text-white">Continue</span>
+            )}
          </button>
        </div>
      )}
@@ -1,20 +1,16 @@
 import React, { useState } from "react";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useNavigate } from "react-router-dom";
 import InputCom from "../Helpers/Inputs/InputCom";

 import AddFundDollars from "./AddFundDollars";

-function AddFundPop({ _payment }) {
+function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
  const navigate = useNavigate();
  //   const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND

  let { payment, currency } = _payment;

  //STATE FOR CONTROLLED INPUT
-  let [input, setInput] = useState("");
-
  let [inputError, setInputError] = useState("");

  // FUNCTION TO HANDLE INPUT CHANGE
@@ -23,7 +19,8 @@ function AddFundPop({ _payment }) {
  };

  //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = () => {
+  const handleSubmit = (e) => {
+    e.preventDefault()
    setInputError("");
    if (!input || input == "0") {
      setInputError("Please Enter Amount");
@@ -39,14 +36,22 @@ function AddFundPop({ _payment }) {
      }, 5000);
    }

-    const stateData = { amount: Number(input), currency: "naira" };
-    navigate("confirm-add-fund", { state: stateData });
+    if(input)   return;
+    // setTimeout(
+    //   () =>
+    //     setConfirmCredit({
+    //       show: true,
+    //       data: { amount: Number(input), currency: "naira" },
+    //     }),
+    //   1500
+    // );

-    setInput("");
+    // const stateData = { amount: Number(input), currency: "naira" };
+    // navigate("confirm-add-fund", { state: stateData });
+
+    // setInput("");
  };

-  console.log("walletItem details >>", payment, currency);
-
  return (
    <div className="h-[36rem] w-full">
      <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
@@ -84,13 +89,22 @@ function AddFundPop({ _payment }) {
                  setInputError={setInputError}
                  input={input}
                  setInput={setInput}
+                  currency={currency}
+                  onClose={onClose}
+                  setConfirmCredit={setConfirmCredit}
                />
              </div>
            )}

            {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
            {currency != "US Dollars" && (
-              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
+              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
+                <button
+                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  onClick={onClose}
+                >
+                  Cancel
+                </button>
                <button
                  onClick={handleSubmit}
                  type="button"
@@ -1,16 +1,14 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useSelector } from "react-redux";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";

 import usersService from "../../services/UsersService";

 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";

-function ConfirmAddFund({ payment }) {
+function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
  let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS

  let [pageLoading, setPageLoading] = useState(true);
@@ -24,12 +22,10 @@ function ConfirmAddFund({ payment }) {
  const apiURL = new usersService();
  const navigate = useNavigate();

-  let { state } = useLocation();
-
  //FUNCTION TO HANDLE SUBMIT
  const onSuccessPayment = () => {
    setRequestStatus({ message: "", loading: true, status: false });
-    let reqData = { amount: state?.account, currency: "NGN" };
+    let reqData = { amount: confirmCredit?.data?.account, currency: "NGN" };
    apiURL
      .startTopUp(reqData)
      .then((res) => {
@@ -66,7 +62,7 @@ function ConfirmAddFund({ payment }) {
  const config = {
    public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
    tx_ref: Date.now(),
-    amount: state?.amount,
+    amount: confirmCredit?.data?.amount,
    currency: "NGN",
    payment_options: "card,mobilemoney,ussd",
    customer: {
@@ -91,73 +87,115 @@ function ConfirmAddFund({ payment }) {
    onClose: () => {},
  };

-  useEffect(() => {
-    // what happens if not state redirect user
-    if (!state) {
-      navigate("/my-wallet/add-fund", { replace: true });
-    } else {
-      setPageLoading(false);
-    }
-  }, []);
+  // useEffect(() => {
+  //   // what happens if not data redirect user
+  //   if (!data) {
+  //     navigate("/my-wallet/add-fund", { replace: true });
+  //   } else {
+  //     setPageLoading(false);
+  //   }
+  // }, []);
+
+  console.log("data on confirm", confirmCredit);

  return (
-    <div className="content-wrapper w-full">
-      {pageLoading ? (
-        <LoadingSpinner size="8" color="sky-blue" />
-      ) : (
-        <div className="w-full mb-10">
-          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
-            <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+    <div className="content-wrapper w-full h-[36rem]">
+      <div className="w-full mb-10">
+        <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
+          {/* <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
              Confirm Add Fund To Account
            </h2>
-            <hr />
-            <div className="px-4 md:px-8 py-4 add-fund-info">
-              <div className="field w-full mb-3">
+            <hr /> */}
+          <div className="px-4 md:px-8 py-4 add-fund-info">
+            <div className="field w-full mb-3 min-h-[45px] flex items-center">
+              {confirmCredit?.show ? (
+                <div className="flex flex-col items-center gap-4">
+                  <div className="flex items-center gap-4">
+                    <label
+                      htmlFor="amount"
+                      className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
+                    >
+                      {confirmCredit?.data?.currency == "naira"
+                        ? "Amount (Naira):"
+                        : "Amount (Dollars):"}
+                    </label>
+                    <span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
+                      {`${walletItem?.symbol} ${
+                        Number(confirmCredit?.data?.amount).toLocaleString() ||
+                        ""
+                      }`}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <label
+                      htmlFor="payment"
+                      className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
+                    >
+                      {confirmCredit?.data?.currency && "Payment Method"}
+                    </label>
+                    <span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
+                      Coming Soon...
+                    </span>
+                  </div>
+                </div>
+              ) : (
                <InputCom
                  fieldClass="px-6"
-                  label={state.currency == 'naira' ? "Amount (Naira):" : "Amount (Dollars):"}
+                  label={
+                    confirmCredit?.data?.currency == "naira"
+                      ? "Amount (Naira):"
+                      : "Amount (Dollars):"
+                  }
                  type="text"
                  name="amount"
-                  value={state.amount || ""}
+                  value={confirmCredit?.data?.amount || ""}
                  disable={true}
                />
-              </div>
+              )}
            </div>
-
-            <hr />
-            <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
-              {
-                state.currency == 'naira' ?
-                <FlutterWaveButton
-                  {...fwConfig}
-                  className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                />
-              :
-              <button 
+          </div>
+          {/* <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
+            {confirmCredit?.data?.currency && "Payment Method"}
+          </h1> */}
+          {/* <hr /> */}
+          <div className="min-h-[350px]"></div>
+          <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
+            <button
+              className="px-2 h-11 flex justify-center items-center border-gradient text-base rounded-full"
+              onClick={onClose}
+            >
+              Cancel
+            </button>
+            {confirmCredit?.data?.currency == "naira" ? (
+              <FlutterWaveButton
+                {...fwConfig}
                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                onClick={()=>console.log('WORKING')}
+              />
+            ) : (
+              <button
+                className="px-4 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                onClick={() => console.log("WORKING")}
              >
                Continue
              </button>
-              }
-            </div>
+            )}
          </div>
        </div>
-      )}
+      </div>

-      <div className="w-full mb-10">
-        <div className="wallet w-full  md:p-8 p-4 h-full min-h-[600px] bg-white dark:bg-dark-white rounded-2xl shadow">
+      {/* <div className="w-full mb-10">
+        <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
          <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
            Recent Activity
          </h2>
-          {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
+          <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
          {payment.loading ? (
            <LoadingSpinner size="16" color="sky-blue" />
          ) : (
            <RecentActivityTable payment={payment} />
          )}
        </div>
-      </div>
+      </div> */}
    </div>
  );
 }
@@ -1,15 +1,11 @@
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
-// import ModalCom from "../Helpers/ModalCom";
-import { Form, Formik } from "formik";
-import InputCom from "../../Helpers/Inputs/InputCom";
 import usersService from "../../../services/UsersService";
-import Icons from "../../Helpers/Icons";
-import AddFund from "../AddFund";
 import ModalCom from "../../Helpers/ModalCom";
 import AddFundPop from "../AddFundPop";
+import ConfirmAddFund from "../ConfirmAddFund";

-const CreditPopup = ({ details, onClose, situation }) => {
+const CreditPopup = ({ details, onClose, situation, walletItem }) => {
  const { pathname, state } = useLocation();
  const [submitTask, setSubmitTask] = useState({
    loading: false,
@@ -17,6 +13,24 @@ const CreditPopup = ({ details, onClose, situation }) => {
    state: "",
  });
  const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
+  let [input, setInput] = useState("");
+  const [confirmCredit, setConfirmCredit] = useState({
+    show: false,
+    data: {},
+  });
+
+  // const openConfirmCredit = (value) => {
+  //   setConfirmCredit({ show: true, data: { ...value } });
+  // };
+
+  // const closeConfirmCredit = () => {
+  //   setConfirmCredit({ show: false, data: {} });
+  // };
+  // const handleConfirmCredit = useMemo((input) => {
+  //   if (input) {
+  //     setConfirmCredit(true);
+  //   } else setConfirmCredit(false);
+  // }, []);

  const switchNextStep = ({ target: value }) => {
    setSuggestedNextStep(value);
@@ -33,6 +47,8 @@ const CreditPopup = ({ details, onClose, situation }) => {
    onClose();
  };

+  console.log("prop drills >> ", confirmCredit);
+
  return (
    <ModalCom
      action={onClose}
@@ -42,7 +58,7 @@ const CreditPopup = ({ details, onClose, situation }) => {
      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            Add Credit
+            {!confirmCredit.show ? "Add Credit" : "Confirm Credit Add"}
          </h1>
          <button
            type="button"
@@ -71,7 +87,22 @@ const CreditPopup = ({ details, onClose, situation }) => {
          </button>
        </div>
        <div className="logout-modal-body w-full flex flex-col items-center">
-          <AddFundPop _payment={details} />
+          {confirmCredit.show ? (
+            <ConfirmAddFund
+              confirmCredit={confirmCredit}
+              walletItem={walletItem}
+              onClose={onClose}
+            />
+          ) : (
+            <AddFundPop
+              _payment={details}
+              input={input}
+              setInput={setInput}
+              onClose={onClose}
+              confirmCredit={confirmCredit}
+              setConfirmCredit={setConfirmCredit}
+            />
+          )}
        </div>
      </div>
    </ModalCom>
@@ -119,7 +119,7 @@ const WalletRoutes = () => {
          </Suspense>
        }
      >
-        <Route
+        {/* <Route
          path="add-fund"
          element={
            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
@@ -134,7 +134,7 @@ const WalletRoutes = () => {
              <ConfirmAddFund payment={paymentHistory} />
            </Suspense>
          }
-        />
+        /> */}
        <Route
          path="transfer-fund"
          element={
@@ -125,6 +125,7 @@ export default function WalletItemCard({ walletItem, payment }) {
      {creditPopup.show && (
        <CreditPopup
          details={creditPopup.data}
+          walletItem={walletItem}
          onClose={closePopUp}
          situation={openPopUp}
        />