|
|
|
@@ -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;
|
|
|
|
|