added third

2024-01-23 09:33:56 +01:00
parent 926837c656
commit 8139fbb090
15 changed files with 743 additions and 597 deletions
@@ -55,7 +55,6 @@ export default function FamilyProfile({ familyData, className }) {
    year: familyData?.year,
    month: familyData?.month,
    enable_traking: familyData?.enable_traking,
-    action: 22020,
  };

  // const handleChange = ({ target: { name, value } }) => {
@@ -1,15 +1,16 @@
-import React, { useEffect, useState } from 'react'
-import ModalCom from '../../../Helpers/ModalCom'
-import InputCom from '../../../Helpers/Inputs/InputCom'
+import React, { useEffect, useState } from "react";
+import ModalCom from "../../../Helpers/ModalCom";
+import InputCom from "../../../Helpers/Inputs/InputCom";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";

-import {AmountTo2DP} from '../../../Helpers/PriceFormatter'
-import usersService from '../../../../services/UsersService';
-import LoadingSpinner from '../../../Spinners/LoadingSpinner';
-import { PriceFormatter } from '../../../Helpers/PriceFormatter';
-import { tableReload } from '../../../../store/TableReloads';
-import { useDispatch } from 'react-redux';
+import { AmountTo2DP } from "../../../Helpers/PriceFormatter";
+import usersService from "../../../../services/UsersService";
+import LoadingSpinner from "../../../Spinners/LoadingSpinner";
+import { PriceFormatter } from "../../../Helpers/PriceFormatter";
+import { tableReload } from "../../../../store/TableReloads";
+import { useDispatch } from "react-redux";
+import { apiConst } from "../../../../lib/apiConst";

 const validationSchema = Yup.object().shape({
  // amount: Yup.string()
@@ -22,104 +23,149 @@ const validationSchema = Yup.object().shape({
  //     return true;
  //   })
  //   .required("Amount is required"),
-  amount: Yup.number('Please enter a number')
-  .min(1, "Price must be greater than 0")
-  .required("Amount is required"),
-  comment: Yup.string()
-  .required("Comment is required"),
+  amount: Yup.number("Please enter a number")
+    .min(1, "Price must be greater than 0")
+    .required("Amount is required"),
+  comment: Yup.string().required("Comment is required"),
 });

-function FamilyAddFundPopout({action, situation, wallet, familyData}) {
+function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
+  const dispatch = useDispatch();

-  const dispatch = useDispatch()
+  const apiUrl = new usersService();

-  const apiUrl = new usersService()
-
-  const [startTransfer, setStartTransfer] = useState({loading:true, data: {}})
-
-  const [requestStatus, setRequestStatus] = useState({loading:false, status:false, message:''})
+  const [startTransfer, setStartTransfer] = useState({
+    loading: true,
+    data: {},
+  });

+  const [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  });

  // initial values for formik
  let initialValues = {
-    amount: '',
-    from : AmountTo2DP(startTransfer?.data?.origing_current_balance*0.01),
+    amount: "",
+    from: AmountTo2DP(startTransfer?.data?.origing_current_balance * 0.01),
    to: `${familyData.firstname} ${familyData.lastname}`,
-    comment: ''
+    comment: "",
  };
  // FUNCTION TO PERFORM FAMILY TRANSFER
  const handleAddFund = (values) => {
-    setRequestStatus({loading:true, status:false, message:''})
+    setRequestStatus({ loading: true, status: false, message: "" });

-    let senderBal = startTransfer?.data?.origing_current_balance || '' // SENDER'S ACCOUNT BALANCE
-    let senderLimit = startTransfer?.data?.origing_transfer_limit || '' // SENDER'S TRANSFER LIMIT
+    let senderBal = startTransfer?.data?.origing_current_balance || ""; // SENDER'S ACCOUNT BALANCE
+    let senderLimit = startTransfer?.data?.origing_transfer_limit || ""; // SENDER'S TRANSFER LIMIT

-    let reqData = { // API REQUEST DATA
-      family_uid : familyData.uid,
-      wallet_uid : wallet.wallet_uid,
-      origing_wallet_uid : startTransfer?.data?.origing_wallet_uid,
-      currency : startTransfer?.data?.currency,
-      amount : values.amount*100,
-      description : values.comment,
-      family_transfer_mode : 100,
-      action : 22014
+    let reqData = {
+      // API REQUEST DATA
+      family_uid: familyData.uid,
+      wallet_uid: wallet.wallet_uid,
+      origing_wallet_uid: startTransfer?.data?.origing_wallet_uid,
+      currency: startTransfer?.data?.currency,
+      amount: values.amount * 100,
+      description: values.comment,
+      family_transfer_mode: 100,
+      action: apiConst.WRENCHBOARD_FAMILY_TRANSFER,
+    };
+
+    if (!senderBal || !senderLimit) {
+      // RETURNS UNAUTHORIZED, IF SENDER BAL OR LIMIT IS NOT AVAILABLE
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Unauthorized, try again later",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
    }

-    if(!senderBal || !senderLimit){ // RETURNS UNAUTHORIZED, IF SENDER BAL OR LIMIT IS NOT AVAILABLE
-      setRequestStatus({loading:false, status:false, message:'Unauthorized, try again later'})
-      return setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-      }, 5000)
+    if (values.amount > senderBal * 0.01) {
+      // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS BALANCE
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "You cannot send more than your balance",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
    }

-    if(values.amount > senderBal*0.01){ // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS BALANCE
-      setRequestStatus({loading:false, status:false, message:'You cannot send more than your balance'})
-      return setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-      }, 5000)
+    if (values.amount > senderLimit * 0.01) {
+      // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS LIMIT
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: `You cannot exceed ${senderLimit * 0.01} ${
+          startTransfer?.data?.origing_currency.charAt(0).toUpperCase() +
+          startTransfer?.data?.origing_currency.slice(1).toLowerCase()
+        }`,
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
    }

-    if(values.amount > senderLimit*0.01){ // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS LIMIT
-      setRequestStatus({loading:false, status:false, message:`You cannot exceed ${senderLimit*0.01} ${startTransfer?.data?.origing_currency.charAt(0).toUpperCase() + startTransfer?.data?.origing_currency.slice(1).toLowerCase()}`})
-      return setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-      }, 5000)
-    }
-
-    apiUrl.familyTransfer(reqData).then(({data}) => {
-      if(data.internal_return < 0 || data.credit_confirm == '' || data.pay_confirm == ''){
-        setRequestStatus({loading:false, status:false, message:'Transfer Failed'})
-        return setTimeout(()=>{
-          setRequestStatus({loading:false, status:false, message:''})
-        }, 5000)
-      }
-      setRequestStatus({loading:false, status:true, message:'Transfer Successful'})
-      setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-        dispatch(tableReload({ type: "WALLETTABLE" })); // UPDATES PARENT WALLET ACCOUNT
-        action() // TO CLOSE THE MODAL
-      }, 5000)
-    }).catch(error => {
-      setRequestStatus({loading:false, status:false, message:'Network Error, try again'})
-      setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-      }, 5000)
-    })
-  }
+    apiUrl
+      .familyTransfer(reqData)
+      .then(({ data }) => {
+        if (
+          data.internal_return < 0 ||
+          data.credit_confirm == "" ||
+          data.pay_confirm == ""
+        ) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Transfer Failed",
+          });
+          return setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+          }, 5000);
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Transfer Successful",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+          dispatch(tableReload({ type: "WALLETTABLE" })); // UPDATES PARENT WALLET ACCOUNT
+          action(); // TO CLOSE THE MODAL
+        }, 5000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Network Error, try again",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 5000);
+      });
+  };

  // LOAD FAMILY START TRANSFER
-  useEffect(()=>{
+  useEffect(() => {
    let reqData = {
      family_uid: familyData.uid,
      wallet_uid: wallet.wallet_uid,
-      action: 22013
-    }
-    apiUrl.familyTransferStart(reqData).then(response => {
-      setStartTransfer({loading:false, data:response?.data })
-    }).catch(err => {
-      setStartTransfer({loading:false, data: {}})
-    })
-  },[])
+      action: apiConst.WRENCHBOARD_FAMILY_TRANSFERSTART,
+    };
+    apiUrl
+      .familyTransferStart(reqData)
+      .then((response) => {
+        setStartTransfer({ loading: false, data: response?.data });
+      })
+      .catch((err) => {
+        setStartTransfer({ loading: false, data: {} });
+      });
+  }, []);

  return (
    <ModalCom action={action} situation={situation}>
@@ -155,116 +201,125 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
          </button>
        </div>
        <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
-          {startTransfer.loading && <LoadingSpinner size='16' color='sky-blue' height={'h-64'} />}
-          
-          { !startTransfer.loading &&
-          <Formik
-            initialValues={initialValues}
-            validationSchema={validationSchema}
-            onSubmit={handleAddFund}
-          >
-            {(props) => (
-              <Form className="w-full">
-                <div className="flex flex-col-reverse sm:flex-row">
-                  <div className="fields w-full">
-                    {/* AMOUNT  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        placeholder="0"
-                        label={`Amount (${startTransfer?.data?.currency})`}
-                        name="amount"
-                        type="text"
-                        parentClass="flex items-center gap-1 w-full"
-                        labelClass="flex-[0.3] mb-0"
-                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9] ${props.errors.amount && props.touched.amount ? 'border border-red-500' : ''}`}
-                        fieldClass="px-2 text-right"
-                        value={props.values.amount}
-                        inputHandler={props.handleChange}
-                      />
-                    </div>
+          {startTransfer.loading && (
+            <LoadingSpinner size="16" color="sky-blue" height={"h-64"} />
+          )}

-                    {/* FROM  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        placeholder="From"
-                        label={`From (${startTransfer?.data?.origing_currency})`}
-                        name="from"
-                        type="text"
-                        parentClass="flex items-center gap-1 w-full"
-                        labelClass="flex-[0.3] mb-0"
-                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
-                        fieldClass="px-2 text-right"
-                        value={props.values.from}
-                        disable={true}
-                      />
-                    </div>
-
-                     {/* TO  */}
-                     <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        placeholder="To"
-                        label="To:"
-                        name="to"
-                        type="text"
-                        parentClass="flex items-center gap-1 w-full"
-                        labelClass="flex-[0.3] mb-0"
-                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
-                        fieldClass="px-2 text-right"
-                        value={props.values.to}
-                        disable={true}
-                      />
-                    </div>
-
-                    {/* COMMENT  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <div className="w-full">
-                      <label
-                        htmlFor="Job Delivery Details"
-                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
-                      >
-                        Comment
-                        {/* {props.errors.comment && props.touched.comment && <span className='text-sm text-red-500'>{' '}{props.errors.comment}</span>} */}
-                      </label>
-                      <textarea
-                        // id="Job Delivery Details"
-                        rows="2"
-                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border ${props.errors.comment && props.touched.comment ? 'border border-red-500' : ''}`}
-                        style={{ resize: "none" }}
-                        name="comment"
-                        value={props.values.comment}
-                        onChange={props.handleChange}
-                      />
+          {!startTransfer.loading && (
+            <Formik
+              initialValues={initialValues}
+              validationSchema={validationSchema}
+              onSubmit={handleAddFund}
+            >
+              {(props) => (
+                <Form className="w-full">
+                  <div className="flex flex-col-reverse sm:flex-row">
+                    <div className="fields w-full">
+                      {/* AMOUNT  */}
+                      <div className="field w-full mb-[0.5rem]">
+                        <InputCom
+                          placeholder="0"
+                          label={`Amount (${startTransfer?.data?.currency})`}
+                          name="amount"
+                          type="text"
+                          parentClass="flex items-center gap-1 w-full"
+                          labelClass="flex-[0.3] mb-0"
+                          inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9] ${
+                            props.errors.amount && props.touched.amount
+                              ? "border border-red-500"
+                              : ""
+                          }`}
+                          fieldClass="px-2 text-right"
+                          value={props.values.amount}
+                          inputHandler={props.handleChange}
+                        />
                      </div>
+
+                      {/* FROM  */}
+                      <div className="field w-full mb-[0.5rem]">
+                        <InputCom
+                          placeholder="From"
+                          label={`From (${startTransfer?.data?.origing_currency})`}
+                          name="from"
+                          type="text"
+                          parentClass="flex items-center gap-1 w-full"
+                          labelClass="flex-[0.3] mb-0"
+                          inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
+                          fieldClass="px-2 text-right"
+                          value={props.values.from}
+                          disable={true}
+                        />
+                      </div>
+
+                      {/* TO  */}
+                      <div className="field w-full mb-[0.5rem]">
+                        <InputCom
+                          placeholder="To"
+                          label="To:"
+                          name="to"
+                          type="text"
+                          parentClass="flex items-center gap-1 w-full"
+                          labelClass="flex-[0.3] mb-0"
+                          inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
+                          fieldClass="px-2 text-right"
+                          value={props.values.to}
+                          disable={true}
+                        />
+                      </div>
+
+                      {/* COMMENT  */}
+                      <div className="field w-full mb-[0.5rem]">
+                        <div className="w-full">
+                          <label
+                            htmlFor="Job Delivery Details"
+                            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
+                          >
+                            Comment
+                            {/* {props.errors.comment && props.touched.comment && <span className='text-sm text-red-500'>{' '}{props.errors.comment}</span>} */}
+                          </label>
+                          <textarea
+                            // id="Job Delivery Details"
+                            rows="2"
+                            className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border ${
+                              props.errors.comment && props.touched.comment
+                                ? "border border-red-500"
+                                : ""
+                            }`}
+                            style={{ resize: "none" }}
+                            name="comment"
+                            value={props.values.comment}
+                            onChange={props.handleChange}
+                          />
+                        </div>
+                      </div>
+                      {/* inputs ends here */}
                    </div>
-                    {/* inputs ends here */}
                  </div>
-                </div>
-                {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-                <div className="content-footer w-full">
-                  {/* error or success display */}
-                  {requestStatus.message != "" &&
-                    (!requestStatus.status ? (
-                      <div
-                        className={`relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                        // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-[#912741] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-
-                      >
-                        {requestStatus.message}
-                      </div>
-                    ) : (
-                      requestStatus.status && (
+                  {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                  <div className="content-footer w-full">
+                    {/* error or success display */}
+                    {requestStatus.message != "" &&
+                      (!requestStatus.status ? (
                        <div
-                          className={`relative p-4 text-green-700 bg-slate-200 border-slate-800 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                          // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-green-700 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          className={`relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-[#912741] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                        >
                          {requestStatus.message}
                        </div>
-                      )
-                    ))}
-                  {/* End of error or success display */}
+                      ) : (
+                        requestStatus.status && (
+                          <div
+                            className={`relative p-4 text-green-700 bg-slate-200 border-slate-800 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                            // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-green-700 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          >
+                            {requestStatus.message}
+                          </div>
+                        )
+                      ))}
+                    {/* End of error or success display */}

-                  <div className="pt-2 w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                    <div className="w-full flex justify-between gap-2 items-center">
+                    <div className="pt-2 w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                      <div className="w-full flex justify-between gap-2 items-center">
                        <button
                          type="button"
                          onClick={action}
@@ -273,29 +328,31 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
                          Cancel
                        </button>
                        <>
-                          {requestStatus.loading ?
-                          <LoadingSpinner size='6' color='sky-blue' />
-                          :
-                          <button
-                            type="submit"
-                            className={`w-[150px] h-[48px] rounded-full text-base text-white bg-sky-500 hover:bg-sky-400 ${requestStatus.status ? 'opacity-50' : ''}`}
-                            disabled={requestStatus.status}
-                          >
-                            Send
-                          </button>
-                          }
+                          {requestStatus.loading ? (
+                            <LoadingSpinner size="6" color="sky-blue" />
+                          ) : (
+                            <button
+                              type="submit"
+                              className={`w-[150px] h-[48px] rounded-full text-base text-white bg-sky-500 hover:bg-sky-400 ${
+                                requestStatus.status ? "opacity-50" : ""
+                              }`}
+                              disabled={requestStatus.status}
+                            >
+                              Send
+                            </button>
+                          )}
                        </>
+                      </div>
                    </div>
                  </div>
-                </div>
-              </Form>
-            )}
-          </Formik>
-          }
+                </Form>
+              )}
+            </Formik>
+          )}
        </div>
      </div>
    </ModalCom>
-  )
+  );
 }

-export default FamilyAddFundPopout
+export default FamilyAddFundPopout;