Skip to content

S
sweepstake
Commit c1ed8aee by Arjun Jhukal
Options

Merge branch 'dev'

parents 3fd08b1b b17fece5
Showing with 155 additions and 236 deletions
src/components/pages/auth/register/index.tsx
......@@ -330,8 +330,6 @@ export default function RegisterPage() {
</div>
</div>
<div className="col-span-2 lg:col-span-3">
<div className="input__field">
<InputLabel htmlFor="phone">Phone <span className="text-red-500">*</span></InputLabel>
......
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout/FortPay.tsx 0 → 100644
'use client';
import { useAppDispatch, useAppSelector } from '@/hooks/hook';
import { useDepositMutation } from '@/services/transaction';
import { showToast, ToastVariant } from '@/slice/toastSlice';
import { DepositProps } from '@/types/transaction';
import { Button, InputLabel, OutlinedInput } from '@mui/material';
import Script from 'next/script';
import { PaymentModeProps } from '.';
declare global {
interface Window {
CollectJS: {
configure: (config: {
paymentType: string;
callback: (response: any) => void;
}) => void;
};
}
}
export default function PaymentForm({ id, amount, type }: DepositProps & { type: PaymentModeProps }) {
const dispatch = useAppDispatch();
const user = useAppSelector((state) => state.auth.user);
const [payViaFortPay, { isLoading }] = useDepositMutation();
const handleCollectJSLoad = () => {
if (typeof window !== 'undefined' && window.CollectJS) {
window.CollectJS.configure({
paymentType: 'cc',
callback: async (response) => {
try {
await payViaFortPay({
id: id,
amount: amount,
type: type as PaymentModeProps,
payment_token: response.token
}).unwrap()
}
catch (e: any) {
dispatch(showToast({
message: e?.data?.message || "Unable to deposit",
variant: ToastVariant.ERROR
}))
}
}
});
}
};
return (
<>
<Script
src="https://secure.fppgateway.com/token/Collect.js"
data-tokenization-key="NAhDuk-7V4u2u-tUAsT5-dCqbH5"
strategy="afterInteractive"
onReady={handleCollectJSLoad}
/>
<form className="theForm">
<div className="formInner flex flex-col gap-3 md:grid md:grid-cols-2">
<div className="form-group">
<InputLabel htmlFor="fname">First Name </InputLabel>
<OutlinedInput type="text" className="form-control" placeholder="First Name" name="fname" defaultValue={user?.first_name} />
</div>
<div className="form-group">
<InputLabel htmlFor="lname">Last Name </InputLabel>
<OutlinedInput type="text" className="form-control" placeholder="Last Name" name="lname" defaultValue={user?.last_name} />
</div>
<div className="form-group">
<InputLabel htmlFor="address1">Address </InputLabel>
<OutlinedInput type="text" className="form-control" placeholder="Street Address" name="address1" defaultValue={user?.address} />
</div>
<div className="form-group">
<InputLabel htmlFor="city">City </InputLabel>
<OutlinedInput type="text" className="form-control" placeholder="City" name="city" defaultValue={user?.city} />
</div>
<div className="form-group">
<InputLabel htmlFor="state">State </InputLabel>
<OutlinedInput type="text" className="form-control" placeholder="State" name="state" defaultValue={user?.state} />
</div>
<div className="form-group">
<InputLabel htmlFor="zip">Zip Code </InputLabel>
<OutlinedInput type="text" className="form-control" placeholder="Zip code" name="zip" defaultValue={""} />
</div>
</div>
{/* <OutlinedInput type="submit" id="payButton" value="Pay $5" className="btn btn-primary btn-block" /> */}
<Button type="submit" id="payButton" variant='contained' color='primary' className='mt-4!'>{isLoading ? "Proceeding Payment" : "Proceed Payment"}</Button>
</form>
<div id="paymentTokenInfo"></div>
</>
);
}
\ No newline at end of file
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout/index.tsx
// "use client";
// import GlassWrapper from '@/components/molecules/GlassWrapper';
// import { useAppDispatch } from '@/hooks/hook';
// import BitCoinIcon from '@/icons/BitCoinIcon';
// import GoldCoinIcon from '@/icons/GoldCoinIcon';
// import { useDepositMutation } from '@/services/transaction';
// import { showToast, ToastVariant } from '@/slice/toastSlice';
// import { Box, Button } from '@mui/material';
// import { TickCircle } from '@wandersonalwes/iconsax-react';
// import Image from 'next/image';
// import { useRouter } from 'next/navigation';
// import React from 'react';
// type PaymentModeProps = "crypto" | "idem"
// 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");
// // console.log(pathname)
// return (
// <section className="checkout__root">
// <div className="grid grid-cols-12 gap-4 lg:gap-10 xl:gap-12">
// <div className="col-span-12 lg:col-span-4 ">
// <Box className="coin__card" sx={{
// borderRadius: "16px",
// padding: "16px",
// border: '1px solid #B801C0',
// background: 'linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)',
// boxShadow: '0 0 24px 0 rgba(234, 3, 91, 0.20)'
// }}>
// <div className="title">
// <h2 className='text-[28px]'>${amount}</h2>
// </div>
// <div className="footer mt-10">
// <div className="coin-info flex justify-between items-center py-3 px-4"
// style={{
// borderRadius: "16px",
// background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)"
// }}
// >
// <div className="coin flex items-center gap-1">
// <GoldCoinIcon />
// <span className='text-[12px]'>Gold Coins</span>
// </div>
// <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={{
// borderRadius: "16px",
// background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)"
// }}
// >
// <div className="coin flex items-center gap-1">
// <GoldCoinIcon />
// <span className='text-[12px]'>Free Sweeps Coins</span>
// </div>
// <p>
// <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>
// <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>
// {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("idem")}>
// <span className="text-[14px] flex items-center justify-start gap-2"><BitcoinRefresh />IDEM</span>
// {currentPaymentMode === "idem" ? <TickCircle /> : ""}
// </div>
// </GlassWrapper>
// </div> */}
// </div>
// <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 === "idem") {
// 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>
// <p className="text-[11px] leading-[120%] mt-8 mb-2 text-center">Powered By</p>
// <div className="flex justify-center items-center gap-4">
// <Image src="/assets/images/payment-01.png" alt='' width={78} height={24} />
// <Image src="/assets/images/payment-02.png" alt='' width={78} height={24} />
// <Image src="/assets/images/payment-03.png" alt='' width={78} height={24} />
// </div>
// </Box>
// </div>
// </div>
// </section>
// )
// }
"use client";
import GlassWrapper from '@/components/molecules/GlassWrapper';
......@@ -185,12 +7,13 @@ import GoldCoinIcon from '@/icons/GoldCoinIcon';
import { useDepositMutation } from '@/services/transaction';
import { showToast, ToastVariant } from '@/slice/toastSlice';
import { Box, Button } from '@mui/material';
import { TickCircle } from '@wandersonalwes/iconsax-react';
import { BitcoinRefresh, TickCircle } from '@wandersonalwes/iconsax-react';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import React from 'react';
import PaymentForm from './FortPay';
type PaymentModeProps = "crypto" | "idem"
export type PaymentModeProps = "crypto" | "fortpay"
export default function CheckoutPage({ amount, slug, bonus }: {
amount: number;
slug: string;
......@@ -266,18 +89,18 @@ export default function CheckoutPage({ amount, slug, bonus }: {
</div>
</GlassWrapper>
</div>
{/* <div className="col-span-1">
<div className="col-span-1">
<GlassWrapper>
<div className="py-5 px-4 flex justify-between items-center cursor-pointer" onClick={() => setCurrentPaymentMode("idem")}>
<span className="text-[14px] flex items-center justify-start gap-2"><BitcoinRefresh />IDEM</span>
{currentPaymentMode === "idem" ? <TickCircle /> : ""}
<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"><BitcoinRefresh />FORT Pay</span>
{currentPaymentMode === "fortpay" ? <TickCircle /> : ""}
</div>
</GlassWrapper>
</div> */}
</div>
</div>
<Button type='submit' variant='contained' color='primary' className='!mt-3' onClick={async () => {
{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({
......@@ -287,49 +110,48 @@ export default function CheckoutPage({ amount, slug, bonus }: {
}).unwrap();
router.replace(response?.data?.payment_url)
}
else if (currentPaymentMode === "idem") {
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
})
)
}
// 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(
......@@ -339,7 +161,7 @@ export default function CheckoutPage({ amount, slug, bonus }: {
})
)
}
}}>{gettingLink ? "Proceeding to Payment..." : "Proceed to Payment"}</Button>
}}>{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">
......
src/services/transaction.ts
......@@ -32,10 +32,10 @@ export const transactionApi = createApi({
tagTypes: ["Deposit", "Withdrawl"],
endpoints: (builder) => ({
deposit: builder.mutation<DepositResponseProps, DepositProps>({
query: ({ id, amount, type }) => ({
query: ({ id, amount, type, payment_token }) => ({
url: `/api/payment/${id}`,
method: "POST",
body: { amount: amount, type: type }
body: { amount: amount, type: type, payment_token }
}),
invalidatesTags: ["Deposit"]
}),
......
src/types/player.ts
......@@ -13,6 +13,7 @@ export interface CommonPlayerProps {
password: string;
password_confirmation: string;
role?: string;
state?: string;
}
export interface PlayerProps extends CommonPlayerProps {
id?: string;
......
src/types/transaction.ts
......@@ -5,7 +5,8 @@ type TransactionStatus = "SUCCESS" | "UNSUCCESSFUL" | "PENDING";
export interface DepositProps {
id: string;
amount: number;
type?: "crypto" | "idem"
type?: "crypto" | "fortpay"
payment_token?: string;
}
export interface DepositUrlProps {
......
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