Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c24fbedf2c | |||
| 907dc298ab | |||
| 8095006386 | |||
| d9d28791da | |||
| a98d967ba4 |
@@ -32,7 +32,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
|
|||||||
<tbody>
|
<tbody>
|
||||||
{activeJobMesList.data.map((item, index) =>
|
{activeJobMesList.data.map((item, index) =>
|
||||||
{
|
{
|
||||||
let imageLink = `${activeJobMesList?.image}${localStorage.getItem('session_token')}/contrats/${item.msg_uid}`
|
let imageLink = `${activeJobMesList?.image}${localStorage.getItem('session_token')}/contracts/${item.msg_uid}`
|
||||||
return (
|
return (
|
||||||
<tr key={index} className='text-slate-500'>
|
<tr key={index} className='text-slate-500'>
|
||||||
<td>
|
<td>
|
||||||
|
|||||||
@@ -64,17 +64,21 @@ const initialValues = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
function AddFundDollars(props) {
|
function AddFundDollars(props) {
|
||||||
let MaxNoOfCards = process.env.REACT_APP_MAX_CREDIT_CARDS // HOLDS THE VALUE OF THE MAX NUMBER OF CARDS USER CAN ADD
|
let MaxNoOfCards = process.env.REACT_APP_MAX_CREDIT_CARDS; // HOLDS THE VALUE OF THE MAX NUMBER OF CARDS USER CAN ADD
|
||||||
|
|
||||||
const apiCall = new usersService();
|
const apiCall = new usersService();
|
||||||
let countryWallet = props.walletItem.country;
|
let countryWallet = props.walletItem.country;
|
||||||
const [tab, setTab] = useState("previous");
|
const [selectedOption, setSelectedOption] = useState("previous");
|
||||||
const { userDetails } = useSelector((state) => state?.userDetails);
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||||
const [prevCardDetails, setPrevCardDetails] = useState({});
|
const [prevCardDetails, setPrevCardDetails] = useState({});
|
||||||
const [payListCards, setPayListCards] = useState({ loading: true, data: [] });
|
const [payListCards, setPayListCards] = useState({ loading: true, data: [] });
|
||||||
const [cardIcons, setCardIcons] = useState("atm-card");
|
const [cardIcons, setCardIcons] = useState("atm-card");
|
||||||
const [prevCardError, setPrevCardError] = useState("");
|
const [prevCardError, setPrevCardError] = useState("");
|
||||||
|
|
||||||
|
const handleOptionChange = (event) => {
|
||||||
|
setSelectedOption(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
const { firstname, lastname } = userDetails;
|
const { firstname, lastname } = userDetails;
|
||||||
|
|
||||||
// Handling Card Icons
|
// Handling Card Icons
|
||||||
@@ -144,7 +148,12 @@ function AddFundDollars(props) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (tab === "previous") {
|
let stateData = {
|
||||||
|
amount: Number(props.input) * 100,
|
||||||
|
currency: props.walletItem?.code,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (selectedOption === "previous") {
|
||||||
// To check if card is empty
|
// To check if card is empty
|
||||||
if (Object.keys(prevCardDetails).length === 0) {
|
if (Object.keys(prevCardDetails).length === 0) {
|
||||||
setPrevCardError("No card selected!");
|
setPrevCardError("No card selected!");
|
||||||
@@ -158,10 +167,26 @@ function AddFundDollars(props) {
|
|||||||
show: { awaitConfirm: { loader: true } },
|
show: { awaitConfirm: { loader: true } },
|
||||||
}));
|
}));
|
||||||
|
|
||||||
let stateData = {
|
// Extracting card_uid from the previous card details
|
||||||
amount: Number(props.input) * 100,
|
const paymentCardValue = prevCardDetails["payment-card"];
|
||||||
currency: props.walletItem?.code,
|
|
||||||
};
|
if (paymentCardValue) {
|
||||||
|
try {
|
||||||
|
const paymentCardObject = JSON.parse(paymentCardValue);
|
||||||
|
stateData = {
|
||||||
|
...stateData,
|
||||||
|
card_uid: paymentCardObject.card_uid,
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error parsing JSON:", error);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// For the new card details
|
||||||
|
stateData = {
|
||||||
|
...stateData,
|
||||||
|
card_uid: "",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await apiCall.getStartCredit(stateData);
|
const res = await apiCall.getStartCredit(stateData);
|
||||||
@@ -171,12 +196,11 @@ function AddFundDollars(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const _response = res.data;
|
const _response = res.data;
|
||||||
stateData.amount = Number(props.input);
|
|
||||||
stateData.card =
|
stateData.card =
|
||||||
tab === "previous"
|
selectedOption === "previous"
|
||||||
? prevCardDetails["payment-card"]
|
? prevCardDetails["payment-card"]
|
||||||
: { ...values, cvv: values.cvv };
|
: { ...values, cvv: values.cvv };
|
||||||
stateData.cardType = tab === "previous" ? "prev" : "new";
|
stateData.cardType = selectedOption === "previous" ? "prev" : "new";
|
||||||
stateData = { ...stateData, ..._response };
|
stateData = { ...stateData, ..._response };
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -224,36 +248,45 @@ function AddFundDollars(props) {
|
|||||||
</h1>
|
</h1>
|
||||||
<div className="my-1 flex items-center gap-2">
|
<div className="my-1 flex items-center gap-2">
|
||||||
<label
|
<label
|
||||||
onClick={() => setTab("previous")}
|
|
||||||
htmlFor="previous"
|
htmlFor="previous"
|
||||||
className="cursor-pointer flex items-center gap-1"
|
className="cursor-pointer flex items-center gap-1"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
id="previous"
|
id="previous"
|
||||||
|
value="previous"
|
||||||
name="card-option"
|
name="card-option"
|
||||||
checked={tab === "previous"}
|
onChange={handleOptionChange}
|
||||||
|
checked={selectedOption === "previous"}
|
||||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||||
tab == "previous" ? "" : ""
|
selectedOption == "previous" ? "" : ""
|
||||||
} tracking-wide transition duration-200`}
|
} tracking-wide transition duration-200`}
|
||||||
/>
|
/>
|
||||||
Previous Cards
|
Previous Cards
|
||||||
</label>
|
</label>
|
||||||
<label
|
<label
|
||||||
onClick={() => setTab("new")}
|
|
||||||
htmlFor="new"
|
htmlFor="new"
|
||||||
className={`cursor-pointer flex items-center gap-1 ${payListCards.data.length >= MaxNoOfCards ? 'pointer-events-none':''}`}
|
className={`cursor-pointer flex items-center gap-1 ${
|
||||||
|
payListCards.data.length >= MaxNoOfCards
|
||||||
|
? "pointer-events-none"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
id="new"
|
id="new"
|
||||||
type="radio"
|
type="radio"
|
||||||
name="card-option"
|
name="card-option"
|
||||||
checked={tab === "new"}
|
value="new"
|
||||||
|
onChange={handleOptionChange}
|
||||||
|
checked={selectedOption === "new"}
|
||||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||||
tab == "new" ? "" : ""
|
selectedOption == "new" ? "" : ""
|
||||||
} tracking-wide transition duration-200`}
|
} tracking-wide transition duration-200`}
|
||||||
/>
|
/>
|
||||||
Add New Card {payListCards.data.length >= MaxNoOfCards && <span className="text-[14px] text-red-500">Max Reached</span>}
|
Add New Card{" "}
|
||||||
|
{payListCards.data.length >= MaxNoOfCards && (
|
||||||
|
<span className="text-[14px] text-red-500">Max Reached</span>
|
||||||
|
)}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@@ -261,8 +294,8 @@ function AddFundDollars(props) {
|
|||||||
<hr />
|
<hr />
|
||||||
{/* END OF switch button */}
|
{/* END OF switch button */}
|
||||||
|
|
||||||
{/* previous tab */}
|
{/* previous selectedOption */}
|
||||||
{tab === "previous" && (
|
{selectedOption === "previous" && (
|
||||||
<div className="p-4 previous-details w-full min-h-[16.5rem] flex flex-col">
|
<div className="p-4 previous-details w-full min-h-[16.5rem] flex flex-col">
|
||||||
{payListCards.loading ? (
|
{payListCards.loading ? (
|
||||||
<LoadingSpinner size="10" color="sky-blue" />
|
<LoadingSpinner size="10" color="sky-blue" />
|
||||||
@@ -278,10 +311,11 @@ function AddFundDollars(props) {
|
|||||||
{currentPreviousCards.map((item, index) => (
|
{currentPreviousCards.map((item, index) => (
|
||||||
<option
|
<option
|
||||||
key={index}
|
key={index}
|
||||||
className={index !== 0 && "border-t-2"}
|
className={index !== 0 ? "border-t-2" : undefined}
|
||||||
value={JSON.stringify(item)}
|
value={JSON.stringify(item)}
|
||||||
|
title={`${item.description} Card\nBank **************${item.digits}`}
|
||||||
>
|
>
|
||||||
<div className="my-2 flex items-center gap-5">
|
{/* <div className="my-2 flex items-center gap-5">
|
||||||
<div className="card-details">
|
<div className="card-details">
|
||||||
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
||||||
{item.description} Card
|
{item.description} Card
|
||||||
@@ -290,7 +324,8 @@ function AddFundDollars(props) {
|
|||||||
Bank **************{item.digits}
|
Bank **************{item.digits}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
|
{item.description} Card - Bank **************{item.digits}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
@@ -300,7 +335,7 @@ function AddFundDollars(props) {
|
|||||||
No Previous Card Found!
|
No Previous Card Found!
|
||||||
</p>
|
</p>
|
||||||
<button
|
<button
|
||||||
onClick={() => setTab("new")}
|
onClick={() => setSelectedOption("new")}
|
||||||
type="button"
|
type="button"
|
||||||
className="my-5 px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
className="my-5 px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
>
|
>
|
||||||
@@ -314,13 +349,13 @@ function AddFundDollars(props) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{tab === "new" && (
|
{selectedOption === "new" && (
|
||||||
<div className="new-details w-full max-h-[22rem]">
|
<div className="new-details w-full max-h-[22rem]">
|
||||||
{payListCards.loading ?
|
{payListCards.loading ? (
|
||||||
<div className="pt-10 flex w-full h-full justify-center items-center">
|
<div className="pt-10 flex w-full h-full justify-center items-center">
|
||||||
<LoadingSpinner size='10' color='sky-blue' />
|
<LoadingSpinner size="10" color="sky-blue" />
|
||||||
</div>
|
</div>
|
||||||
:payListCards.data.length < MaxNoOfCards ?
|
) : payListCards.data.length < MaxNoOfCards ? (
|
||||||
<div className="w-full flex flex-col justify-between">
|
<div className="w-full flex flex-col justify-between">
|
||||||
<Formik
|
<Formik
|
||||||
initialValues={initialValues}
|
initialValues={initialValues}
|
||||||
@@ -379,7 +414,8 @@ function AddFundDollars(props) {
|
|||||||
*
|
*
|
||||||
</span>
|
</span>
|
||||||
<span className="text-[12px] text-red-500 ml-1">
|
<span className="text-[12px] text-red-500 ml-1">
|
||||||
{props.errors.expirationMonth && "**"}
|
{props.errors.expirationMonth &&
|
||||||
|
"**"}
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@@ -431,7 +467,8 @@ function AddFundDollars(props) {
|
|||||||
*
|
*
|
||||||
</span>
|
</span>
|
||||||
<span className="text-[12px] text-red-500 italic">
|
<span className="text-[12px] text-red-500 italic">
|
||||||
{props.errors.expirationYear && "**"}
|
{props.errors.expirationYear &&
|
||||||
|
"**"}
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@@ -560,14 +597,12 @@ function AddFundDollars(props) {
|
|||||||
}}
|
}}
|
||||||
</Formik>
|
</Formik>
|
||||||
</div>
|
</div>
|
||||||
:
|
) : null}
|
||||||
null
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{tab == "previous" && (
|
{selectedOption == "previous" && (
|
||||||
<div className="md:py-8 add-fund-btn flex justify-end items-center gap-2 py-4">
|
<div className="md:py-8 add-fund-btn flex justify-end items-center gap-2 py-4">
|
||||||
<button
|
<button
|
||||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
|
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
|
||||||
|
|||||||
@@ -71,6 +71,7 @@ function AddFundPop({
|
|||||||
// Prepare state data for API call
|
// Prepare state data for API call
|
||||||
let stateData = {
|
let stateData = {
|
||||||
amount: Number(input) * 100,
|
amount: Number(input) * 100,
|
||||||
|
card_uid: "", //added card_uid as empty string
|
||||||
currency: walletItem?.code,
|
currency: walletItem?.code,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ function ThePaymentText({ value, type }) {
|
|||||||
* @returns {JSX.Element} - The rendered component.
|
* @returns {JSX.Element} - The rendered component.
|
||||||
*/
|
*/
|
||||||
function AmountSection({ currency, amount, country }) {
|
function AmountSection({ currency, amount, country }) {
|
||||||
const formattedAmount = amount?.toFixed(2);
|
const formattedAmount = (+amount * 0.01)?.toFixed(2);
|
||||||
const gapClassName = country === "US" ? "gap-14" : "gap-4";
|
const gapClassName = country === "US" ? "gap-14" : "gap-4";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -87,7 +87,7 @@ function TransactionFeeSection({ currency, fee, country }) {
|
|||||||
*/
|
*/
|
||||||
function TotalSection({ currency, amount, fee, country }) {
|
function TotalSection({ currency, amount, fee, country }) {
|
||||||
const total = Number(amount) + Number(fee);
|
const total = Number(amount) + Number(fee);
|
||||||
const formattedTotal = total?.toFixed(2);
|
const formattedTotal = (total * 0.01)?.toFixed(2);
|
||||||
|
|
||||||
const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]";
|
const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]";
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user