added third

This commit was merged in pull request #549.
This commit is contained in:
2024-01-23 09:33:56 +01:00
parent 926837c656
commit 8139fbb090
15 changed files with 743 additions and 597 deletions
@@ -13,6 +13,7 @@ import usersService from "../../services/UsersService";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
import FamilyWallet from "./Tabs/FamilyWallet";
import { apiConst } from "../../lib/apiConst";
// Lazy Imports for components
const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
@@ -127,7 +128,7 @@ export default function FamilyManageTabs({
file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
file_data: base64Img,
msg_type: 'FILE',
action: 11305
action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER
}
setUploadStatus({loading: true, status: false, message:'Loading...'})
apiCall.sendFiles(reqData).then(res=>{
@@ -285,7 +286,7 @@ export default function FamilyManageTabs({
limit: 30,
offset: 0,
job_type: "FAMILY",
action: 13005,
action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
};
if (checkFamilyTask) {
@@ -1,5 +1,6 @@
import React, { useMemo, useRef, useState } from "react";
import usersService from "../../../../services/UsersService";
import { apiConst } from "../../../../lib/apiConst";
const FamilyBanner = ({ imageServer }) => {
const uploadedImage = `${imageServer}${localStorage.getItem(
@@ -65,7 +66,7 @@ const FamilyBanner = ({ imageServer }) => {
file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
file_data: base64Img,
msg_type: "FILE",
action: 11303,
action: apiConst.WRENCHBOARD_PICTURE_JOB,
};
setUploadStatus({
loading: true,
@@ -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;
+1 -7
View File
@@ -102,13 +102,7 @@ export default function FamilyAcc() {
const memberList = useCallback(async () => {
setLoader(true);
try {
const reqData = {
limit: 20,
offset: 0,
action: 22010,
};
const res = await apiCall.familyListings(reqData);
const res = await apiCall.familyListings();
const { data } = res;
if (data?.internal_return >= 0 && data?.status === "OK") {
const { result_list, session_image_server } = data;