Compare commits

..

5 Commits

Author SHA1 Message Date
victorAnumudu c24fbedf2c file link updated 2023-11-27 12:49:18 +01:00
ameye 907dc298ab Merge branch 'file_link_update' of WrenchBoard/Users-Wrench into master 2023-11-27 10:32:02 +00:00
ameye 8095006386 Merge branch 'Server-path-added' of WrenchBoard/Users-Wrench into master 2023-11-27 10:31:57 +00:00
ebube d9d28791da Added and specified card_uid for prev and new card 2023-11-27 01:49:09 -08:00
ebube a98d967ba4 Fixed the credit issues 2023-11-27 01:12:24 -08:00
4 changed files with 74 additions and 38 deletions
@@ -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]";