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';
import { Box, Button } from '@mui/material';
import { Card, TickCircle } from '@wandersonalwes/iconsax-react';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import React from 'react';
import React, { useEffect } from 'react';
import PaymentForm from './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 }: {
amount: number;
slug: string;
bonus: number
}) {
const dispatch = useAppDispatch();
const router = useRouter();
const [getPaymentLink, { isLoading: gettingLink }] = useDepositMutation();
const [currentPaymentMode, setCurrentPaymentMode] = React.useState("crypto");
useEffect(() => {
restoreAuthFromSession();
}, []);
return (
<section className="checkout__root">
<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 }: {
<p>
<strong className='text-[16px] block'>{amount ? amount * 100 : ""}</strong>
</p>
</div>
<div className="coin-info flex justify-between items-center py-3 px-4 mt-1"
style={{
......@@ -69,100 +113,82 @@ export default function CheckoutPage({ amount, slug, bonus }: {
<strong className='text-[16px] block'>{bonus}</strong>
</p>
</div>
</div>
</Box>
</div>
<div className="col-span-12 lg:col-span-8">
<Box>
<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="col-span-1">
<GlassWrapper>
<div 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>
<div
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 /> : ""}
</div>
</GlassWrapper>
</div>
<div className="col-span-1">
<GlassWrapper>
<div 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>
<div
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 /> : ""}
</div>
</GlassWrapper>
</div>
</div>
{currentPaymentMode === "fortpay" ? <>
{currentPaymentMode === "fortpay" && (
<PaymentForm id={slug} amount={amount} type={currentPaymentMode as PaymentModeProps} />
</> : ""}
{currentPaymentMode === "crypto" ? <Button type='submit' variant='contained' color='primary' className='!mt-3' onClick={async () => {
try {
if (currentPaymentMode === "crypto") {
const response = await getPaymentLink({
id: slug,
amount,
type: currentPaymentMode as PaymentModeProps
}).unwrap();
router.replace(response?.data?.payment_url)
}
// else if (currentPaymentMode === "fortpay") {
// const response = await getPaymentLink({
// id: slug,
// amount,
// type: currentPaymentMode as PaymentModeProps
// }).unwrap();
// const merchant_id = response?.data?.merchant_id;
// const currency = response?.data?.currency;
// const order_ref = response?.data?.payment_id;
// const form = document.createElement("form");
// form.method = "POST";
// form.action = response?.data?.payment_url;
// const fields = {
// merchant_id,
// amount,
// currency,
// order_ref,
// completed_url: `${process.env.NEXT_PUBLIC_FRONTEND_URL}/buy-coins/${slug}/success`
// };
// 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> : ""}
)}
{currentPaymentMode === "crypto" && (
<Button
type='submit'
variant='contained'
color='primary'
className='!mt-3'
onClick={async () => {
try {
const response = await getPaymentLink({
id: slug,
amount,
type: currentPaymentMode as PaymentModeProps
}).unwrap();
backupAuthToSession();
window.location.href = response?.data?.payment_url;
} 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>
<div className="flex justify-center items-center gap-4">
......@@ -174,5 +200,5 @@ export default function CheckoutPage({ amount, slug, bonus }: {
</div>
</div>
</section>
)
}
);
}
\ No newline at end of file
src/components/pages/dashboard/userDashboard/gameCredentials/index.tsx
"use client";
import GlassWrapper from '@/components/molecules/GlassWrapper';
import { useAppSelector } from '@/hooks/hook';
import { useGetUserGameCredentialsQuery } from '@/services/userApi';
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