Skip to content

S
sweepstake
Commit a7b4c8f6 by Arjun Jhukal
Options

updated the new changes for the payment method

parent 107c2e3d
Showing with 103 additions and 61 deletions
src/components/pages/dashboard/userDashboard/withdrawl/WithdrawlModal.tsx
...@@ -4,12 +4,12 @@ import { useAppDispatch } from "@/hooks/hook"; ...@@ -4,12 +4,12 @@ import { useAppDispatch } from "@/hooks/hook";
import { useGetMassPayPaymentFieldsMutation, useGetMassPayPaymentMethodsQuery } from "@/services/transaction"; import { useGetMassPayPaymentFieldsMutation, useGetMassPayPaymentMethodsQuery } from "@/services/transaction";
import { showToast, ToastVariant } from "@/slice/toastSlice"; import { showToast, ToastVariant } from "@/slice/toastSlice";
import { MasspayPaymentFields } from "@/types/transaction"; import { MasspayPaymentFields } from "@/types/transaction";
import { Box, Button, Modal } from "@mui/material"; import { Box, Button, Grow, Modal } from "@mui/material";
import { BitcoinRefresh, SecuritySafe, TickCircle } from "@wandersonalwes/iconsax-react"; import { BitcoinRefresh, InfoCircle, SecuritySafe, TickCircle } from "@wandersonalwes/iconsax-react";
import { FormikProps } from "formik"; import { FormikProps } from "formik";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useState } from "react"; import { useMemo, useState } from "react";
import { WithdrawlFormValues } from "."; import { WithdrawlFormValues } from ".";
import { RenderFields } from "./renderFields"; import { RenderFields } from "./renderFields";
...@@ -27,6 +27,33 @@ const ShimmerCard = () => ( ...@@ -27,6 +27,33 @@ const ShimmerCard = () => (
</div> </div>
); );
const FeeInfoBlock = ({ fee, methodName }: { fee: number; methodName: string }) => (
<Grow in timeout={400}>
<div className="mb-4 p-4 rounded-xl
bg-gradient-to-r
from-yellow-200/40
via-yellow-100/30
to-amber-200/30
border-l-4 border-yellow-300
backdrop-blur-sm">
<div className="flex items-start gap-3">
<div className="flex-shrink-0 mt-0.5">
<InfoCircle size={20} className="text-[#FBA027]" variant="Bold" />
</div>
<div className="flex-1">
<div className="flex items-center justify-between flex-wrap gap-2 mb-1">
<h4 className="text-sm font-semibold text-white/90">Transaction Fee</h4>
<span className="text-yellow-300 font-bold text-base">${fee.toFixed(2)}</span>
</div>
<p className="text-xs text-white/60 leading-relaxed text-start">
A fee of <span className="text-yellow-300 font-medium">${fee.toFixed(2)}</span> will be charged for this <span className="text-white/80 font-medium">{methodName}</span> transaction.
</p>
</div>
</div>
</div>
</Grow>
);
export default function WithdrawlModal({ export default function WithdrawlModal({
open, open,
handleClose, handleClose,
...@@ -43,6 +70,11 @@ export default function WithdrawlModal({ ...@@ -43,6 +70,11 @@ export default function WithdrawlModal({
const { data: withdrawlOptions, isLoading: loadingWithdrawlOptions } = useGetMassPayPaymentMethodsQuery(); const { data: withdrawlOptions, isLoading: loadingWithdrawlOptions } = useGetMassPayPaymentMethodsQuery();
const [getMassPayFields, { isLoading: gettingFields }] = useGetMassPayPaymentFieldsMutation(); const [getMassPayFields, { isLoading: gettingFields }] = useGetMassPayPaymentFieldsMutation();
const selectedMethod = useMemo(() => {
if (!formik.values.type || !withdrawlOptions?.data) return null;
return withdrawlOptions.data.find(option => option.destination_token === formik.values.type);
}, [formik.values.type, withdrawlOptions]);
const handleTypeChange = (value: string) => { const handleTypeChange = (value: string) => {
formik.setFieldValue("type", value); formik.setFieldValue("type", value);
formik.setFieldValue("payment_fields", {}); formik.setFieldValue("payment_fields", {});
...@@ -111,21 +143,21 @@ export default function WithdrawlModal({ ...@@ -111,21 +143,21 @@ export default function WithdrawlModal({
}} }}
> >
{/* Wallet Banner */} {/* Wallet Banner */}
<Image {/* <Image
src={"/assets/images/wallet-featured-image.png"} src={"/assets/images/wallet-featured-image.png"}
alt="" alt=""
width={174} width={174}
height={140} height={140}
className="mx-auto" className="mx-auto"
/> /> */}
<span className="py-2 px-3 rounded-3xl bg-[#DBFBF6] border border-[#426A66] text-[#426A66] flex justify-center items-center max-w-fit mx-auto my-4 lg:my-6"> <span className="py-2 px-3 rounded-3xl bg-[#DBFBF6] border border-[#426A66] text-[#426A66] flex justify-center items-center max-w-fit mx-auto mb-4 lg:mb-6">
<SecuritySafe /> <SecuritySafe />
Safe and secure Safe and secure
</span> </span>
<h1 className="text-[24px] leading-[120%] font-[700]"> <h1 className="text-[24px] leading-[120%] font-[700] capitalize">
{fields.length > 0 ? "Enter Payment Details" : "Confirm your Wallet Address"} {fields.length > 0 ? "Enter Payment Details" : `Game ${formik.values.game_provider} $ ${formik.values.withdrawl_amounts[formik.values.game_provider]}`}
</h1> </h1>
<p className="text-[11px] leading-[150%] text-center max-w-[420px] mx-auto mt-3 mb-6"> <p className="text-[11px] leading-[150%] text-center max-w-[420px] mx-auto mt-3 mb-6">
...@@ -135,15 +167,70 @@ export default function WithdrawlModal({ ...@@ -135,15 +167,70 @@ export default function WithdrawlModal({
</p> </p>
<form onSubmit={formik.handleSubmit} className="flex flex-col gap-3 h-full overflow-auto"> <form onSubmit={formik.handleSubmit} className="flex flex-col gap-3 h-full overflow-auto">
<div className="grid sm:grid-cols-2 md:grid-cols-3 mb-8 gap-6">
{loadingWithdrawlOptions && (
<>
<ShimmerCard />
<ShimmerCard />
</>
)}
{!loadingWithdrawlOptions && withdrawlOptions?.data && withdrawlOptions?.data?.length > 0 &&
withdrawlOptions?.data?.map((option) => (
<div className="col-span-1" key={option?.id}>
<GlassWrapper>
<div
className="py-5 px-4 flex justify-between items-center cursor-pointer transition-all hover:bg-white/5 h-full"
onClick={() => handleTypeChange(option?.destination_token)}
>
<span className="text-[12px] flex items-center justify-start gap-2 max-w-[80%] text-start">
{option.thumbnail_url ? <Image src={option?.thumbnail_url} alt={option?.name} width={120} height={40} className="object-contain max-w-16" /> : <BitcoinRefresh />}
<span>
{option?.name}
</span>
</span>
{formik.values.type === option?.destination_token ? (
<TickCircle className="text-green-400" />
) : ""}
</div>
</GlassWrapper>
</div>
))
}
</div>
{selectedMethod && (
<FeeInfoBlock
fee={selectedMethod.fee}
methodName={selectedMethod.name}
/>
)}
{fields.length > 0 ? ( {fields.length > 0 ? (
<div className="flex flex-col md:grid grid-cols-2 gap-4">
{fields.map((field) => (
<div className={field.type === "IDSelfieCollection" ? "col-span-2" : "col-span-1"} key={field.token}>
{field.type === "IDSelfieCollection" ? <Link href={field.value} className="bg-primary-grad ss-btn">{field.label}</Link> : <RenderFields field={field} formik={formik} />}
</div>
))}
</div>
) : ""}
{fields.length === 0 ?
<> <>
<div className="flex flex-col md:grid grid-cols-2 gap-4">
{fields.map((field) => ( <Button
<div className={field.type === "IDSelfieCollection" ? "col-span-2" : "col-span-1"} key={field.token}> variant="contained"
{field.type === "IDSelfieCollection" ? <Link href={field.value} className="bg-primary-grad ss-btn">{field.label}</Link> : <RenderFields field={field} formik={formik} />} color="primary"
</div> className="!mt-3"
))} onClick={handleContinueWithdrawl}
</div> disabled={!formik.values.type || gettingFields}
>
{gettingFields ? "Loading Fields..." : "Continue Withdrawal"}
</Button>
</>
:
<>
<div className="flex gap-3 mt-4"> <div className="flex gap-3 mt-4">
<Button <Button
variant="outlined" variant="outlined"
...@@ -163,52 +250,7 @@ export default function WithdrawlModal({ ...@@ -163,52 +250,7 @@ export default function WithdrawlModal({
{isLoading ? "Processing..." : "Withdraw Now"} {isLoading ? "Processing..." : "Withdraw Now"}
</Button> </Button>
</div> </div>
</> </>}
) : (
<>
<div className="grid sm:grid-cols-2 md:grid-cols-3 mb-8 gap-6">
{loadingWithdrawlOptions && (
<>
<ShimmerCard />
<ShimmerCard />
</>
)}
{!loadingWithdrawlOptions && withdrawlOptions?.data && withdrawlOptions?.data?.length > 0 &&
withdrawlOptions?.data?.map((option) => (
<div className="col-span-1" key={option?.id}>
<GlassWrapper>
<div
className="py-5 px-4 flex justify-between items-center cursor-pointer transition-all hover:bg-white/5"
onClick={() => handleTypeChange(option?.destination_token)}
>
<span className="text-[12px] flex items-center justify-start gap-2 max-w-[80%] text-start">
{option.thumbnail_url ? <Image src={option?.thumbnail_url} alt={option?.name} width={120} height={40} className="object-contain max-w-16" /> : <BitcoinRefresh />}
<span>
{option?.name}
<span className="text-[#FBA027] text-[12px] block">(Fee ${option.fee})</span>
</span>
</span>
{formik.values.type === option?.destination_token ? (
<TickCircle className="text-green-400" />
) : ""}
</div>
</GlassWrapper>
</div>
))
}
</div>
<Button
variant="contained"
color="primary"
className="!mt-3"
onClick={handleContinueWithdrawl}
disabled={!formik.values.type || gettingFields}
>
{gettingFields ? "Loading Fields..." : "Continue Withdrawal"}
</Button>
</>
)}
</form> </form>
{/* Powered by */} {/* Powered by */}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment