Merge branch 'Family-Tabs-Size-Fix' of WrenchBoard/Users-Wrench into master

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -181,8 +181,6 @@ export default function FamilyManageTabs({
 
   const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
-  console.log(details)
-
   useEffect(() => {
     let __manageFamily = true;
     if (__manageFamily) {

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import ModalCom from "../../Helpers/ModalCom";
@@ -23,9 +22,16 @@ function ConfirmNairaWithdraw({
     status: false,
   });
 
+  const [completeNairaWithdraw, setShowCompleteNairaWithdraw] = useState({
+    show: false,
+    load: false,
+    state: {},
+  }); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
+
   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = () => {
     setRequestStatus({ message: "", loading: true, status: false });
+    setShowCompleteNairaWithdraw({ load: true });
     let reqData = {
       amount: Number(state.amount * 100),
       Fee: Number(state.fee),
@@ -51,57 +57,40 @@ function ConfirmNairaWithdraw({
       .sendMoney(reqData)
       .then((res) => {
         if (res.data.internal_return < 0) {
-          if (res.data?.status_message?.toLowerCase().includes("limit")) {
+          // if (res.data?.status_message?.toLowerCase().includes("limit")) {
+          //   setRequestStatus({
+          //     message: ,
+          //     loading: false,
+          //     status: false,
+          //   });
+          // }
+          return setTimeout(() => {
             setRequestStatus({
-              message: "You have exceeded the transfer limit",
+              message: "",
               loading: false,
               status: false,
             });
-          } else if (
+            setShowCompleteNairaWithdraw({
-            res.data?.status_message?.toLowerCase().includes("not_found")
+              show: true,
-          ) {
+              load: false,
-            setRequestStatus({
+              state: res.data,
-              message: "Sorry, wallet not found",
-              loading: false,
-              status: false,
             });
-          } else if (
+          }, 5000);
-            res.data?.status_message
-              ?.toLowerCase()
-              .includes("recipient_add_error")
-          ) {
-            setRequestStatus({
-              message: res.data?.error,
-              loading: false,
-              status: false,
-            });
-          } else {
-            setRequestStatus({
-              message: "Could not perform transaction",
-              loading: false,
-              status: false,
-            });
-          }
-          return setTimeout(
-            () =>
-              setRequestStatus({
-                message: "",
-                loading: false,
-                status: false,
-              }),
-            5000
-          );
         }
-        setRequestStatus({
+
-          message: "Transfer Successful!",
-          loading: false,
-          status: true,
-        });
-        toast.success("Transfer sucessful");
         setTimeout(() => {
-          navigate("/my-wallet", { replace: true });
+          setRequestStatus({
-          window.location.reload(true);
+            message: "",
-        }, 1000);
+            loading: false,
+            status: false,
+          });
+          setShowCompleteNairaWithdraw({
+            show: true,
+            load: false,
+            state: res.data,
+          });
+        }, 5000);
+        return;
       })
       .catch((error) => {
         setRequestStatus({
@@ -120,15 +109,31 @@ function ConfirmNairaWithdraw({
     });
   };
 
+  const completeWithdrawal = () => {
+    action();
+    window.location.reload(true);
+  };
+
   return (
     <ModalCom action={action} situation={situation} className="edit-popup">
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
         <div className="w-full">
           <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">
             <h2 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-              {`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${(
+              {completeNairaWithdraw.load ? (
-                wallet.amount * 0.01
+                "Confirming..."
-              ).toFixed(2)}`}
+              ) : (
+                <>
+                  {" "}
+                  {completeNairaWithdraw.show
+                    ? completeNairaWithdraw?.state?.internal_return >= 0
+                      ? "Transfer Success"
+                      : "Transfer Error"
+                    : `Withdraw from ${wallet.description} Wallet : ${
+                        wallet.symbol
+                      }${(wallet.amount * 0.01).toFixed(2)}`}
+                </>
+              )}
             </h2>
             <button
               type="button"
@@ -158,123 +163,268 @@ function ConfirmNairaWithdraw({
           </div>
           <hr />
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
-            <div className="px-4 md:px-8 py-4 add-fund-info">
+            {completeNairaWithdraw.load ? (
-              <h2 className="my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium">
+              <div className="h-[35rem] flex items-center justify-center">
-                {/* Confirm Withdraw to Account */}
+                <LoadingSpinner size="12" color="sky-blue" />
-              </h2>
-              {/* AMOUNT */}
-              <div className="field w-full mb-3">
-                <InputCom
-                  fieldClass="px-6"
-                  label="Amount:"
-                  type="text"
-                  name="amount"
-                  value={state?.amount || ""}
-                  disable={true}
-                />
               </div>
-
+            ) : completeNairaWithdraw.show ? (
-              {state?.choice === "prev" && (
+              <div className="px-4 md:p-8 py-4 add-fund-info">
-                <>
+                <div className="field w-full mb-3 min-h-[23rem]">
-                  {/* RECIPIENT ACC: */}
+                  <div className="flex items-center w-full justify-center mb-3">
-                  <div className="field w-full mb-3">
+                    {completeNairaWithdraw.state?.sendmoney_message
-                    <InputCom
+                      ?.toLowerCase()
-                      fieldClass="px-6"
+                      ?.includes("completed") ? (
-                      label="Recipient Acc:"
+                      <svg
-                      type="text"
+                        xmlns="http://www.w3.org/2000/svg"
-                      name="recipient"
+                        width="100"
-                      value={state?.details?.recipient || ""}
+                        height="100"
-                      disable={true}
+                        viewBox="0 0 24 24"
-                    />
+                        fill="none"
+                        stroke="green"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        className="feather feather-check-circle"
+                      >
+                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                      </svg>
+                    ) : (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        width="100"
+                        height="100"
+                        stroke="red"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        className="feather feather-x-circle"
+                      >
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="15" y1="9" x2="9" y2="15"></line>
+                        <line x1="9" y1="9" x2="15" y2="15"></line>
+                      </svg>
+                    )}
                   </div>
-                </>
-              )}
 
-              {state?.choice === "new" && (
+                  {completeNairaWithdraw.state?.internal_return >= 0 ? (
-                <>
+                    <>
-                  {/* RECIPIENT ACC: */}
+                      <div className={`flex items-center`}>
-                  <div className="field w-full mb-3">
+                        <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
-                    <InputCom
+                          {completeNairaWithdraw.state?.sendmoney_message || ""}
-                      fieldClass="px-6"
+                        </h1>
-                      label="Bank Acc:"
+                      </div>
-                      type="text"
+                      <div className="flex items-center gap-8">
-                      name="bank"
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      value={
+                          Amount(
-                        `${state?.details?.name} ${state?.details?.country}` ||
+                          {completeNairaWithdraw.state
-                        ""
+                            ?.terminatingcountrycode || ""}
-                      }
+                          )
-                      disable={true}
+                        </h1>
-                    />
+                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                  </div>
+                          {Number(
-                </>
+                            completeNairaWithdraw.state?.TerminatingAmount *
-              )}
+                              0.01
-
+                          ).toLocaleString() || ""}
-              {/* PROCESSING FEE: */}
+                        </span>
-              <div className="field w-full mb-3">
+                      </div>
-                <InputCom
+                      <div className="flex items-center gap-8">
-                  fieldClass="px-6"
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                  label="Processing Fee:"
+                          Recipient
-                  type="text"
+                        </h1>
-                  name="processingFee"
+                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                  value={(state?.fee * 0.01).toFixed(2) || ""}
+                          {completeNairaWithdraw.state?.recitient}
-                  disable={true}
+                        </span>
-                />
+                      </div>
+                      <div className="flex items-center gap-8">
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          Confirmation Number
+                        </h1>
+                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          {completeNairaWithdraw.state?.confirmation}
+                        </span>
+                      </div>{" "}
+                    </>
+                  ) : (
+                    <>
+                      <div className={`flex items-center`}>
+                        <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
+                          {completeNairaWithdraw.state?.status_message
+                            ?.toLowerCase()
+                            .includes("not_found")
+                            ? "Wallet Error Occurred"
+                            : completeNairaWithdraw.state?.status_message
+                                ?.toLowerCase()
+                                .includes("recipient_add_error")
+                            ? "Recipient Error Occurred"
+                            : completeNairaWithdraw.state?.status_message
+                                ?.toLowerCase()
+                                .includes("limit")
+                            ? "Transfer limit Error"
+                            : "An Error Occurred"}{" "}
+                        </h1>
+                      </div>
+                      <div className="flex items-center gap-8">
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          Message:
+                        </h1>
+                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          {completeNairaWithdraw.state?.status_message
+                            ?.toLowerCase()
+                            .includes("not_found")
+                            ? "This Wallet is not Found"
+                            : completeNairaWithdraw.state?.status_message
+                                ?.toLowerCase()
+                                .includes("recipient_add_error")
+                            ? "No Recipient Found"
+                            : completeNairaWithdraw.state?.status_message
+                                ?.toLowerCase()
+                                .includes("limit")
+                            ? "The transfer limit has been exceeded"
+                            : "Could not perform transaction"}
+                        </span>
+                      </div>
+                    </>
+                  )}
+                </div>
               </div>
+            ) : (
+              <div className="px-4 md:px-8 py-4 add-fund-info">
+                <h2 className="my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium">
+                  {/* Confirm Withdraw to Account */}
+                </h2>
+                {/* AMOUNT */}
+                <div className="field w-full mb-3">
+                  <InputCom
+                    fieldClass="px-6"
+                    label="Amount:"
+                    type="text"
+                    name="amount"
+                    value={state?.amount || ""}
+                    disable={true}
+                  />
+                </div>
 
-              {/* TOTAL */}
+                {state?.choice === "prev" && (
-              <div className="field w-full mb-3">
+                  <>
-                <InputCom
+                    {/* RECIPIENT ACC: */}
-                  fieldClass="px-6"
+                    <div className="field w-full mb-3">
-                  label="Total"
+                      <InputCom
-                  type="text"
+                        fieldClass="px-6"
-                  name="total"
+                        label="Recipient Acc:"
-                  value={(state?.total * 0.01).toFixed(2) || ""}
+                        type="text"
-                  disable={true}
+                        name="recipient"
-                />
+                        value={state?.details?.recipient || ""}
-              </div>
+                        disable={true}
-
+                      />
-              {/* COMMENT/NOTE */}
+                    </div>
-              <div className="field w-full mb-3">
+                  </>
-                <InputCom
-                  fieldClass="px-6"
-                  label="Comment/Note:"
-                  type="text"
-                  name="comment"
-                  value={state?.comment || ""}
-                  disable={true}
-                />
-              </div>
-            </div>
-
-            <hr />
-            <p
-              className={`text-base ${
-                requestStatus.status ? "text-green-500" : "text-red-500"
-              } px-4 md:px-8 py-4 h-5`}
-            >
-              {requestStatus.message && requestStatus.message}
-            </p>
-            <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
-              <button
-                type="button"
-                onClick={state?.choice === "prev" ? getBack : action}
-                className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
-              >
-                <span className="text-gradient">
-                  {state?.choice === "prev" ? "Back" : "Cancel"}
-                </span>
-              </button>
-              <button
-                onClick={handleSubmit}
-                className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px]"
-              >
-                {requestStatus.loading ? (
-                  <LoadingSpinner size="6" color="sky-blue" />
-                ) : (
-                  "Transfer"
                 )}
-              </button>
+
-            </div>
+                {state?.choice === "new" && (
+                  <>
+                    {/* RECIPIENT ACC: */}
+                    <div className="field w-full mb-3">
+                      <InputCom
+                        fieldClass="px-6"
+                        label="Bank Acc:"
+                        type="text"
+                        name="bank"
+                        value={
+                          `${state?.details?.name} ${state?.details?.country}` ||
+                          ""
+                        }
+                        disable={true}
+                      />
+                    </div>
+                  </>
+                )}
+
+                {/* PROCESSING FEE: */}
+                <div className="field w-full mb-3">
+                  <InputCom
+                    fieldClass="px-6"
+                    label="Processing Fee:"
+                    type="text"
+                    name="processingFee"
+                    value={(state?.fee * 0.01).toFixed(2) || ""}
+                    disable={true}
+                  />
+                </div>
+
+                {/* TOTAL */}
+                <div className="field w-full mb-3">
+                  <InputCom
+                    fieldClass="px-6"
+                    label="Total"
+                    type="text"
+                    name="total"
+                    value={(state?.total * 0.01).toFixed(2) || ""}
+                    disable={true}
+                  />
+                </div>
+
+                {/* COMMENT/NOTE */}
+                <div className="field w-full mb-3">
+                  <InputCom
+                    fieldClass="px-6"
+                    label="Comment/Note:"
+                    type="text"
+                    name="comment"
+                    value={state?.comment || ""}
+                    disable={true}
+                  />
+                </div>
+              </div>
+            )}
+
+            {!completeNairaWithdraw.load && (
+              <>
+                {" "}
+                <hr />
+                <p
+                  className={`text-base ${
+                    requestStatus.status ? "text-green-500" : "text-red-500"
+                  } px-4 md:px-8 py-4 h-5`}
+                >
+                  {requestStatus.message && requestStatus.message}
+                </p>
+                <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
+                  {!completeNairaWithdraw.show && (
+                    <button
+                      type="button"
+                      onClick={action}
+                      className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
+                    >
+                      <span className="text-gradient">Cancel</span>
+                    </button>
+                  )}
+
+                  <button
+                    onClick={
+                      completeNairaWithdraw.show
+                        ? completeWithdrawal
+                        : completeNairaWithdraw?.state?.internal_return < 0
+                        ? action
+                        : handleSubmit
+                    }
+                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px]"
+                  >
+                    {requestStatus.loading ? (
+                      <LoadingSpinner size="6" color="sky-blue" />
+                    ) : completeNairaWithdraw.show ? (
+                      "Okay"
+                    ) : completeNairaWithdraw?.state?.internal_return < 0 ? (
+                      "Cancel"
+                    ) : (
+                      "Transfer"
+                    )}
+                  </button>
+                </div>
+              </>
+            )}
           </div>
         </div>
       </div>

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -171,7 +171,12 @@ function NairaWithdraw({
         setErrorMsgs({ amount: "amount required" });
         setTimeout(() => setErrorMsgs({ amount: "" }), 3000);
         return;
+      } else if (Number(values.amount) > Number(wallet?.transfer_limit)) {
+        setErrorMsgs({ amount: "transfer limit exceeded" });
+        setTimeout(() => setErrorMsgs({ amount: "" }), 3000);
+        return;
       }
+
       if (values?.comment?.length >= 50) {
         setErrorMsgs({ comment: "50 chars max" });
         setTimeout(() => setErrorMsgs({ comment: "" }), 1000);
@@ -319,7 +324,7 @@ function NairaWithdraw({
                     <div className="flex flex-col">
                       <div className="field w-full">
                         <InputCom
-                          fieldClass="px-4"
+                          fieldClass="px-4 text-end"
                           parentClass="flex items-center gap-1 justify-between"
                           labelClass="flex-[0.3] mb-0"
                           inputClass="flex-[0.7] max-w-[12rem]"
@@ -327,7 +332,6 @@ function NairaWithdraw({
                           type="number"
                           name="amount"
                           placeholder="0"
-                          direction="rtl"
                           value={props.values.amount}
                           inputHandler={props.handleChange}
                           blurHandler={(e) => {