Skip to content

S
sweepstake
Commit 3eaf18d1 by Arjun Jhukal
Options

fixed the logging out issue on payment completion

parent d7b42cae
Showing with 104 additions and 78 deletions
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout/index.tsx
...@@ -9,21 +9,66 @@ import { showToast, ToastVariant } from '@/slice/toastSlice'; ...@@ -9,21 +9,66 @@ import { showToast, ToastVariant } from '@/slice/toastSlice';
import { Box, Button } from '@mui/material'; import { Box, Button } from '@mui/material';
import { Card, TickCircle } from '@wandersonalwes/iconsax-react'; import { Card, TickCircle } from '@wandersonalwes/iconsax-react';
import Image from 'next/image'; import Image from 'next/image';
import { useRouter } from 'next/navigation'; import React, { useEffect } from 'react';
import React from 'react';
import PaymentForm from './FortPay'; import PaymentForm from './FortPay';
export type PaymentModeProps = "crypto" | "fortpay" export type PaymentModeProps = "crypto" | "fortpay"
/**
* Before redirecting to an external payment gateway, we back up every auth-related
* key from localStorage into sessionStorage.
*
* Why sessionStorage?
* - It survives external redirects (the tab stays open, session is preserved).
* - It is scoped to the tab, so it won't leak to other tabs.
* - Unlike localStorage it won't be touched by any app boot logic that
* reinitialises the store and accidentally clears auth keys.
*/
const AUTH_KEYS = ['token', 'access_token', 'authToken', 'user', 'refresh_token'];
const BACKUP_PREFIX = '__payment_backup__';
function backupAuthToSession() {
AUTH_KEYS.forEach((key) => {
const value = localStorage.getItem(key);
if (value !== null) {
sessionStorage.setItem(`${BACKUP_PREFIX}${key}`, value);
}
});
sessionStorage.setItem(`${BACKUP_PREFIX}redirected`, 'true');
}
function restoreAuthFromSession() {
const wasRedirected = sessionStorage.getItem(`${BACKUP_PREFIX}redirected`);
if (!wasRedirected) return;
AUTH_KEYS.forEach((key) => {
const backup = sessionStorage.getItem(`${BACKUP_PREFIX}${key}`);
if (backup !== null) {
if (localStorage.getItem(key) === null) {
localStorage.setItem(key, backup);
}
}
});
AUTH_KEYS.forEach((key) => {
sessionStorage.removeItem(`${BACKUP_PREFIX}${key}`);
});
sessionStorage.removeItem(`${BACKUP_PREFIX}redirected`);
}
export default function CheckoutPage({ amount, slug, bonus }: { export default function CheckoutPage({ amount, slug, bonus }: {
amount: number; amount: number;
slug: string; slug: string;
bonus: number bonus: number
}) { }) {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const router = useRouter();
const [getPaymentLink, { isLoading: gettingLink }] = useDepositMutation(); const [getPaymentLink, { isLoading: gettingLink }] = useDepositMutation();
const [currentPaymentMode, setCurrentPaymentMode] = React.useState("crypto"); const [currentPaymentMode, setCurrentPaymentMode] = React.useState("crypto");
useEffect(() => {
restoreAuthFromSession();
}, []);
return ( return (
<section className="checkout__root"> <section className="checkout__root">
<div className="grid grid-cols-12 gap-4 lg:gap-10 xl:gap-12"> <div className="grid grid-cols-12 gap-4 lg:gap-10 xl:gap-12">
...@@ -53,7 +98,6 @@ export default function CheckoutPage({ amount, slug, bonus }: { ...@@ -53,7 +98,6 @@ export default function CheckoutPage({ amount, slug, bonus }: {
<p> <p>
<strong className='text-[16px] block'>{amount ? amount * 100 : ""}</strong> <strong className='text-[16px] block'>{amount ? amount * 100 : ""}</strong>
</p> </p>
</div> </div>
<div className="coin-info flex justify-between items-center py-3 px-4 mt-1" <div className="coin-info flex justify-between items-center py-3 px-4 mt-1"
style={{ style={{
...@@ -69,100 +113,82 @@ export default function CheckoutPage({ amount, slug, bonus }: { ...@@ -69,100 +113,82 @@ export default function CheckoutPage({ amount, slug, bonus }: {
<strong className='text-[16px] block'>{bonus}</strong> <strong className='text-[16px] block'>{bonus}</strong>
</p> </p>
</div> </div>
</div> </div>
</Box> </Box>
</div> </div>
<div className="col-span-12 lg:col-span-8"> <div className="col-span-12 lg:col-span-8">
<Box> <Box>
<h1 className='mb-2 text-[24px] lg:text-[32px]'>Payment Method</h1> <h1 className='mb-2 text-[24px] lg:text-[32px]'>Payment Method</h1>
<p className='text-[11px] lg:text-[13px]'>To start playing and cashing out your winnings, you’ll need a crypto wallet to purchase E-Credits and receive payouts. Don't worry—it’s quick and easy!</p> <p className='text-[11px] lg:text-[13px]'>To start playing and cashing out your winnings, you'll need a crypto wallet to purchase E-Credits and receive payouts. Don't worry—it's quick and easy!</p>
<h2 className='text-[20px] lg:text-[24px] mt-8 mb-4'>Select payment method</h2> <h2 className='text-[20px] lg:text-[24px] mt-8 mb-4'>Select payment method</h2>
<div className="grid sm:grid-cols-2 mb-8 gap-6"> <div className="grid sm:grid-cols-2 mb-8 gap-6">
<div className="col-span-1"> <div className="col-span-1">
<GlassWrapper> <GlassWrapper>
<div className="py-5 px-4 flex justify-between items-center cursor-pointer" onClick={() => setCurrentPaymentMode("crypto")} > <div
<span className="text-[14px] flex items-center justify-start gap-2"><BitCoinIcon />Crypto Currency</span> className="py-5 px-4 flex justify-between items-center cursor-pointer"
onClick={() => setCurrentPaymentMode("crypto")}
>
<span className="text-[14px] flex items-center justify-start gap-2">
<BitCoinIcon />Crypto Currency
</span>
{currentPaymentMode === "crypto" ? <TickCircle /> : ""} {currentPaymentMode === "crypto" ? <TickCircle /> : ""}
</div> </div>
</GlassWrapper> </GlassWrapper>
</div> </div>
<div className="col-span-1"> <div className="col-span-1">
<GlassWrapper> <GlassWrapper>
<div className="py-5 px-4 flex justify-between items-center cursor-pointer" onClick={() => setCurrentPaymentMode("fortpay")}> <div
<span className="text-[14px] flex items-center justify-start gap-2"><Card />Card Payments</span> className="py-5 px-4 flex justify-between items-center cursor-pointer"
onClick={() => setCurrentPaymentMode("fortpay")}
>
<span className="text-[14px] flex items-center justify-start gap-2">
<Card />Card Payments
</span>
{currentPaymentMode === "fortpay" ? <TickCircle /> : ""} {currentPaymentMode === "fortpay" ? <TickCircle /> : ""}
</div> </div>
</GlassWrapper> </GlassWrapper>
</div> </div>
</div> </div>
{currentPaymentMode === "fortpay" ? <>
{currentPaymentMode === "fortpay" && (
<PaymentForm id={slug} amount={amount} type={currentPaymentMode as PaymentModeProps} /> <PaymentForm id={slug} amount={amount} type={currentPaymentMode as PaymentModeProps} />
</> : ""} )}
{currentPaymentMode === "crypto" ? <Button type='submit' variant='contained' color='primary' className='!mt-3' onClick={async () => {
try { {currentPaymentMode === "crypto" && (
if (currentPaymentMode === "crypto") { <Button
const response = await getPaymentLink({ type='submit'
id: slug, variant='contained'
amount, color='primary'
type: currentPaymentMode as PaymentModeProps className='!mt-3'
}).unwrap(); onClick={async () => {
router.replace(response?.data?.payment_url) try {
} const response = await getPaymentLink({
// else if (currentPaymentMode === "fortpay") { id: slug,
// const response = await getPaymentLink({ amount,
// id: slug, type: currentPaymentMode as PaymentModeProps
// amount, }).unwrap();
// type: currentPaymentMode as PaymentModeProps
// }).unwrap();
backupAuthToSession();
// const merchant_id = response?.data?.merchant_id;
// const currency = response?.data?.currency; window.location.href = response?.data?.payment_url;
// const order_ref = response?.data?.payment_id;
} catch (e: any) {
dispatch(
// const form = document.createElement("form"); showToast({
// form.method = "POST"; message: e?.data?.message || "Something went wrong",
// form.action = response?.data?.payment_url; variant: ToastVariant.ERROR
// const fields = { })
// merchant_id, );
// amount, }
// currency, }}
// order_ref, >
// completed_url: `${process.env.NEXT_PUBLIC_FRONTEND_URL}/buy-coins/${slug}/success` {gettingLink ? "Proceeding to Payment..." : "Proceed to Payment"}
// }; </Button>
)}
// Object.entries(fields).forEach(([key, value]) => {
// const input = document.createElement("input");
// input.type = "hidden";
// input.name = key;
// input.value = value as string;
// form.appendChild(input);
// });
// document.body.appendChild(form);
// form.submit();
// }
// else {
// dispatch(
// showToast({
// message: "Please select prefered mode of payment.",
// variant: ToastVariant.INFO
// })
// )
// }
}
catch (e: any) {
dispatch(
showToast({
message: e?.data?.message || "Something went wrong",
variant: ToastVariant.ERROR
})
)
}
}}>{gettingLink ? "Proceeding to Payment..." : "Proceed to Payment"}</Button> : ""}
<p className="text-[11px] leading-[120%] mt-8 mb-2 text-center">Powered By</p> <p className="text-[11px] leading-[120%] mt-8 mb-2 text-center">Powered By</p>
<div className="flex justify-center items-center gap-4"> <div className="flex justify-center items-center gap-4">
...@@ -174,5 +200,5 @@ export default function CheckoutPage({ amount, slug, bonus }: { ...@@ -174,5 +200,5 @@ export default function CheckoutPage({ amount, slug, bonus }: {
</div> </div>
</div> </div>
</section> </section>
) );
} }
\ No newline at end of file
src/components/pages/dashboard/userDashboard/gameCredentials/index.tsx
"use client"; "use client";
import GlassWrapper from '@/components/molecules/GlassWrapper'; import GlassWrapper from '@/components/molecules/GlassWrapper';
import { useAppSelector } from '@/hooks/hook';
import { useGetUserGameCredentialsQuery } from '@/services/userApi'; import { useGetUserGameCredentialsQuery } from '@/services/userApi';
import CredentialsCard from './CredentialsCard'; import CredentialsCard from './CredentialsCard';
......
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