Skip to content

S
sweepstake
Commit 2fbdea64 by Arjun Jhukal
Options

updated the general page listing at user dashboard

parent 4b61220d
Showing with 369 additions and 59 deletions
src/app/(dashboard)/(user)/(outsideAuth)/exclusive-games/[id]/loading.tsx
import React from 'react'
import React from "react";
import { Box, Skeleton } from "@mui/material";
export default function Loading() {
return (
<div>loading</div>
)
<section className="detail__banner mb-8 animate-pulse">
<div className="grid grid-cols-12 gap-8 lg:gap-20">
{/* Left Image Skeleton */}
<div className="col-span-12 md:col-span-4">
<Box className="aspect-[420/433] relative rounded-xl overflow-hidden">
<Skeleton variant="rectangular" width="100%" height="100%" sx={{ borderRadius: "12px" }} />
</Box>
</div>
{/* Right Content Skeleton */}
<div className="col-span-12 md:col-span-8 flex flex-col gap-4">
{/* Tags */}
<div className="flex gap-4">
<Skeleton variant="rounded" width={120} height={24} />
<Skeleton variant="rounded" width={80} height={24} />
</div>
{/* Title */}
<Skeleton variant="text" width="60%" height={40} />
{/* Description */}
<Skeleton variant="text" width="100%" height={20} />
<Skeleton variant="text" width="95%" height={20} />
<Skeleton variant="text" width="90%" height={20} />
{/* Action Buttons */}
<div className="flex gap-2 flex-wrap">
<Skeleton variant="rounded" width={160} height={50} />
<Skeleton variant="rounded" width={160} height={50} />
<Skeleton variant="rounded" width={160} height={50} />
</div>
{/* Play Now Button */}
<Skeleton variant="rounded" width={180} height={45} />
{/* Screenshots */}
<div className="grid grid-cols-3 gap-2">
{[1, 2, 3].map((i) => (
<Skeleton key={i} variant="rectangular" height={100} sx={{ borderRadius: "8px" }} />
))}
</div>
</div>
</div>
</section>
);
}
src/app/(dashboard)/(user)/(outsideAuth)/general/[slug]/page.tsx 0 → 100644
import { getPageDetail } from '@/serverApi/pages';
import { renderHTML } from '@/utils/RenderHTML';
import { ArrowRight2 } from '@wandersonalwes/iconsax-react';
import { notFound, redirect } from 'next/navigation';
import React from 'react'
export default async function GeneralPage(props: { params: Promise<{ slug: string }> }) {
const { slug } = await props.params;
let pageData = null;
console.log(pageData);
try {
pageData = await getPageDetail(slug);
} catch (err) {
console.log("❌ Failed to fetch games:", err);
return notFound();
}
if (!pageData?.data) {
return notFound();
}
return (
<section className="general__page__root">
<div className="section__title mb-6">
<h1 className='text-[24px] leading-[120%]'>{pageData?.data?.name}</h1>
</div>
<div className="page__content">
<div className="grid grid-cols-12 gap-5">
{/* <div className="col-span-12 md:col-span lg:col-span-3">
{pageData?.data?.content.length ? <div className="rounded-[24px] p-4" style={{
background: "rgba(118, 107, 120, 0.55)"
}}>
<ul>
{pageData.data.content.map((content) => (
<li key={content.heading}>
<a href="#" className='text-[14px] font-[500] leading-[120%] py-2 px-3 flex items-center gap-1'><ArrowRight2 size={14} />{content?.heading}</a>
</li>
))}
</ul>
</div> : ""}
</div> */}
<div className="col-span-12">
<div className="general-content-box">
{pageData.data.content.map((content) => (
renderHTML(content.description)))}
</div>
</div>
</div>
</div>
</section>
)
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/deposit-history/default.tsx 0 → 100644
import DepositHistoryPage from '@/components/pages/dashboard/userDashboard/depositHistory'
import React from 'react'
export default function DepositHistory() {
return (
<DepositHistoryPage />
)
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/profile/@section/account/default.tsx 0 → 100644
import AddPlayerPage from '@/components/pages/dashboard/adminDashboard/players/addPlayerForm';
import AddPlayerForm from '@/components/pages/dashboard/adminDashboard/players/addPlayerForm/AddPlayerForm';
import EditUserProfile from '@/components/pages/dashboard/userDashboard/account/profile/editProfile';
import React from 'react'
export default async function UserAccountUpdate(props: { params: Promise<{ id: string }> }) {
const { id } = await props.params;
return (
<EditUserProfile id={id} />
)
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/profile/@section/wallet/default.tsx 0 → 100644
import EditUserWallet from '@/components/pages/dashboard/userDashboard/account/profile/editUserWallet'
import { Button, InputLabel, OutlinedInput } from '@mui/material'
import { InfoCircle, WalletCheck } from '@wandersonalwes/iconsax-react'
import React from 'react'
export default function UserWallet() {
return (
<EditUserWallet />
)
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/profile/layout.tsx
"use client";
// "use client";
import TabController from "@/components/molecules/TabController";
import UserProfileCard from "@/components/organism/Cards/UserProfileCard";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { getUserGameBalance } from "@/serverApi/game";
export default function ProfileTabs({ section }: { section: React.ReactNode }) {
const pathname = usePathname();
export default async function ProfileTabs({ section }: { section: React.ReactNode }) {
const balance = await getUserGameBalance();
const links = [
{ href: "/account/profile/account", label: "Account Details" },
{ href: "/account/profile/wallet", label: "Wallet Information" },
......@@ -19,7 +18,7 @@ export default function ProfileTabs({ section }: { section: React.ReactNode }) {
<div className='profile__root'>
<div className="grid lg:grid-cols-12 gap-6">
<div className="col-span-12 lg:col-span-5">
<UserProfileCard />
<UserProfileCard balance={balance} />
</div>
<div className="col-span-12 lg:col-span-7">
<TabController links={links} />
......
src/app/(dashboard)/(user)/(privateUser)/account/@page/profile/page.tsx
import React from 'react'
import { redirect } from 'next/navigation';
export default function ProfilePage() {
return (
<div>ProfilePage</div>
)
return redirect("/account/profile/account");
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/withdrawl-history/default.tsx 0 → 100644
import WithdrawnHistoryPage from '@/components/pages/dashboard/userDashboard/withdrawlHistory'
import React from 'react'
export default function WithdrawlHistory() {
return (
<WithdrawnHistoryPage />
)
}
src/app/globals.css
......@@ -201,3 +201,126 @@
.user_table tr td:last-child {
border-radius: 0 24px 24px 0;
}
.general-content-box * {
background: transparent !important;
}
.general-content-box h2 {
@apply text-[20px] lg:text-[24px]
}
.general-content-box h3 {
@apply text-[18px] lg:text-[20px]
}
.general-content-box h2,
.general-content-box h3 {
margin-bottom: 1.6rem;
}
.general-content-box h2:not(:first-child),
.general-content-box h3:not(:first-child) {
margin-top: 3.2rem;
}
.general-content-box h4 {
margin: 2.4rem 0 1.2rem;
}
.general-content-box a {
@apply text-primary;
}
.general-content-box>strong {
display: block;
color: var(--title);
}
.general-content-box p+p,
.general-content-box p+ul,
.general-content-box p+ol,
.general-content-box p+img,
.general-content-box p+figure,
.general-content-box p+strong,
.general-content-box ul+p,
.general-content-box ul+ul,
.general-content-box ul+ol,
.general-content-box ul+img,
.general-content-box ul+figure,
.general-content-box ul+strong,
.general-content-box ol+p,
.general-content-box ol+ul,
.general-content-box ol+ol,
.general-content-box ol+img,
.general-content-box ol+figure,
.general-content-box ol+strong,
.general-content-box img+p,
.general-content-box img+ul,
.general-content-box img+ol,
.general-content-box img+img,
.general-content-box img+figure,
.general-content-box img+strong,
.general-content-box figure+p,
.general-content-box figure+ul,
.general-content-box figure+ol,
.general-content-box figure+img,
.general-content-box figure+figure,
.general-content-box figure+strong,
.general-content-box strong+p,
.general-content-box strong+ul,
.general-content-box strong+ol,
.general-content-box strong+img,
.general-content-box strong+figure,
.general-content-box strong+strong {
margin-top: 1.6rem;
}
.general-content-box strong {
letter-spacing: -0.32px;
font-weight: 700;
}
/* .general-content-box p>strong {
font-size: 1.8rem;
} */
.general-content-box p,
.general-content-box li,
.general-content-box span {
letter-spacing: -0.21px;
line-height: 140%;
@apply !text-white text-[14px];
}
.general-content-box ul ol,
.general-content-box ul ul,
.general-content-box ol ol,
.general-content-box ol ul,
.general-content-box ul,
.general-content-box ol {
padding-left: 2rem;
}
.general-content-box ul>li {
list-style-type: disc;
}
.general-content-box ol>li {
list-style-type: decimal;
}
.general-content-box ul li+li,
.general-content-box ol li+li {
margin-top: 0.8rem;
}
.general-content-box img {
aspect-ratio: 441/248;
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}
\ No newline at end of file
src/components/organism/Cards/UserProfileCard.tsx
......@@ -5,7 +5,7 @@ import { formatDateTime } from '@/utils/formatDateTime';
import Image from 'next/image'
import React from 'react'
export default function UserProfileCard() {
export default function UserProfileCard({ balance }: { balance: any }) {
const user = useAppSelector(state => state.auth.user);
const { date } = formatDateTime(user?.registered_date as string);
return (
......@@ -26,7 +26,7 @@ export default function UserProfileCard() {
<div className="flex justify-center items-center gap-3">
<Image src={"/assets/images/current-balance.svg"} alt='' width={48} height={48} />
<div className="content mt-3 text-start">
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">$30,000</strong>
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">${balance?.data?.current_balance}</strong>
<span className="text-white text-[9px]">Current Balance</span>
</div>
</div>
......@@ -35,22 +35,22 @@ export default function UserProfileCard() {
<div className="w-full rounded-[14px] p-4 lg:py-6" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
<Image src={"/assets/images/deposit.svg"} alt='' width={48} height={48} className='mx-auto' />
<div className="content mt-3 ">
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">$30,000</strong>
<span className="text-white text-[9px]">Current Balance</span>
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">${balance?.data?.total_deposit}</strong>
<span className="text-white text-[9px]">Total Deposited</span>
</div>
</div>
<div className="w-full rounded-[14px] p-4 lg:py-6" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
<Image src={"/assets/images/withdrawn.svg"} alt='' width={48} height={48} className='mx-auto' />
<div className="content mt-3">
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">$30,000</strong>
<span className="text-white text-[9px]">Current Balance</span>
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">$3{balance?.data?.total_withdrawl}</strong>
<span className="text-white text-[9px]">Total Withdrawl</span>
</div>
</div>
<div className="w-full rounded-[14px] p-4 lg:py-6" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
<Image src={"/assets/images/withdrawn.svg"} alt='' width={48} height={48} className='mx-auto' />
<div className="content mt-3">
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">$30,000</strong>
<span className="text-white text-[9px]">Current Balance</span>
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">${balance?.data?.total_wining || 0}</strong>
<span className="text-white text-[9px]">Total Winnings</span>
</div>
</div>
</div>
......
src/components/organism/Sidebar/UserSidebar/index.tsx
......@@ -60,7 +60,7 @@ export default function UserMenu({ open }: { open: boolean }) {
/>
</ListItemButton>
</ListItem>
<ListItem>
{/* <ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
......@@ -81,7 +81,7 @@ export default function UserMenu({ open }: { open: boolean }) {
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem>
</ListItem> */}
</List>
<List>
<ListItem>
......@@ -89,13 +89,11 @@ export default function UserMenu({ open }: { open: boolean }) {
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.GAMES.ROOT,
PATH.ADMIN.GAMES.ADD_GAME.ROOT,
"/edit-game"
PATH.USER.GENERAL_PAGES.REFUND_POLICY.ROOT
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.DASHBOARD.ROOT) }}
onClick={() => { router.push(PATH.USER.GENERAL_PAGES.REFUND_POLICY.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
......@@ -112,12 +110,10 @@ export default function UserMenu({ open }: { open: boolean }) {
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.GAMES.ROOT,
PATH.ADMIN.GAMES.ADD_GAME.ROOT,
"/edit-game"
PATH.USER.GENERAL_PAGES.ACCESSIBILITY.ROOT
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.ADMIN.GAMES.ROOT) }}
onClick={() => { router.push(PATH.USER.GENERAL_PAGES.ACCESSIBILITY.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
......@@ -134,12 +130,10 @@ export default function UserMenu({ open }: { open: boolean }) {
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.GAMES.ROOT,
PATH.ADMIN.GAMES.ADD_GAME.ROOT,
"/edit-game"
PATH.USER.GENERAL_PAGES.SWEEPSTAKE_POLICY.ROOT
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.ADMIN.GAMES.ROOT) }}
onClick={() => { router.push(PATH.USER.GENERAL_PAGES.SWEEPSTAKE_POLICY.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
......@@ -156,12 +150,10 @@ export default function UserMenu({ open }: { open: boolean }) {
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.GAMES.ROOT,
PATH.ADMIN.GAMES.ADD_GAME.ROOT,
"/edit-game"
PATH.USER.GENERAL_PAGES.TERMS_AND_CONDITIONS.ROOT
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.ADMIN.GAMES.ROOT) }}
onClick={() => { router.push(PATH.USER.GENERAL_PAGES.TERMS_AND_CONDITIONS.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
......@@ -178,12 +170,10 @@ export default function UserMenu({ open }: { open: boolean }) {
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.GAMES.ROOT,
PATH.ADMIN.GAMES.ADD_GAME.ROOT,
"/edit-game"
PATH.USER.GENERAL_PAGES.PRIVACY_POLICY.ROOT
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.ADMIN.GAMES.ROOT) }}
onClick={() => { router.push(PATH.USER.GENERAL_PAGES.PRIVACY_POLICY.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
......@@ -195,14 +185,12 @@ export default function UserMenu({ open }: { open: boolean }) {
/>
</ListItemButton>
</ListItem>
<ListItem>
{/* <ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.GAMES.ROOT,
PATH.ADMIN.GAMES.ADD_GAME.ROOT,
"/edit-game"
PATH.USER.GENERAL_PAGES.PRIVACY_POLICY.ROOT
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.ADMIN.GAMES.ROOT) }}
......@@ -216,10 +204,10 @@ export default function UserMenu({ open }: { open: boolean }) {
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem>
</ListItem> */}
</List>
</div>
<div className="support">
<div className="support mt-4">
<button type="button" className="ss-btn support__btn flex items-center gap-2 w-full justify-start">
<SupportIcon />
{open ? <strong className='text-[14px] font-semibold opacity-80 !text-white'>Support</strong> : null}
......
src/components/pages/auth/register/index.tsx
......@@ -18,8 +18,10 @@ const validationSchema = Yup.object().shape({
.max(255)
.required('Email is required'),
displayName: Yup.string()
.required('Display Name is required')
.max(50, 'Display Name must be less than 50 characters'),
.required("Display Name is required")
.max(14, "Display Name must be less than 14 characters")
.min(6, "Display Name must be at least 6 characters long")
.matches(/^\S+$/, "Display Name cannot contain spaces"),
password: Yup.string()
.required('Password is required')
.test(
......
src/components/pages/dashboard/userDashboard/games/exclusiveGames/exclusiveGameDetail/UserCoin.tsx 0 → 100644
"use client"
import SilverCoinIcon from '@/icons/SilverCoinIcon'
import { useGetUserBalanceBySlugQuery } from '@/services/userApi'
import { Box } from '@mui/material'
import React from 'react'
export default function UserCoin({ slug }: { slug: string }) {
const { data } = useGetUserBalanceBySlugQuery({ slug });
return (
<Box sx={{
background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%)",
borderRadius: "16px"
}} className="flex justify-center items-center gap-2 py-4 px-6 min-w-[30%] ">
<SilverCoinIcon />
<div className="coins">
<strong className="text-[16px] leading-4 font-[600] block mb-1">{data?.balance||0}</strong>
<span className="text-[12px] block">Current Sweep Coins</span>
</div>
</Box>
)
}
src/components/pages/dashboard/userDashboard/games/exclusiveGames/exclusiveGameDetail/index.tsx
......@@ -8,6 +8,7 @@ import SilverCoinIcon from "@/icons/SilverCoinIcon";
import ScreenShotSlider from "@/components/molecules/Sliders/ScreenShotSlider";
import CustomLightGallery from "@/components/organism/LightGallery";
import Link from "next/link";
import UserCoin from "./UserCoin";
export default function ExclusiveGameDetail({ game }: { game: SingleGameResponse }) {
return (
......@@ -31,7 +32,7 @@ export default function ExclusiveGameDetail({ game }: { game: SingleGameResponse
{renderHTML(game?.data?.description)}
</div>
<div className="action__group flex flex-wrap gap-2">
<Box sx={{
{/* <Box sx={{
background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%)",
borderRadius: "16px"
}} className="flex justify-center items-center gap-2 py-4 px-6 min-w-[30%] ">
......@@ -40,7 +41,8 @@ export default function ExclusiveGameDetail({ game }: { game: SingleGameResponse
<strong className="text-[16px] leading-4 font-[600] block mb-1">20,000</strong>
<span className="text-[12px] block">Current Sweep Coins</span>
</div>
</Box>
</Box> */}
<UserCoin slug={game?.data?.provider} />
<Box sx={{
borderRadius: "16px"
......
src/components/pages/dashboard/userDashboard/games/exclusiveGames/index.tsx
......@@ -25,7 +25,7 @@ export default async function ExclusiveGamePage() {
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 gap-4">
{
games?.data?.data.map((game) => (
<a href={`exclusive-games/${game.id}`} className="group block overflow-hidden hover:shadow-md transition rounded-2xl aspect-[208/222] relative" key={game.id}>
<ProtectedLink href={`exclusive-games/${game.id}`} className="group block overflow-hidden hover:shadow-md transition rounded-2xl aspect-[208/222] relative" key={game.id}>
<Tooltip title={game.name}>
<Image
src={game.thumbnail || "/assets/images/fallback.png"}
......@@ -34,7 +34,7 @@ export default async function ExclusiveGamePage() {
className="w-full h-[222px] object-cover group-hover:scale-105 transition-transform duration-300"
/>
</Tooltip>
</a>
</ProtectedLink>
))
}
</div>
......
src/routes/PATH.ts
......@@ -66,6 +66,23 @@ export const PATH = {
PASSWORD: {
ROOT: "/profile/password"
}
},
GENERAL_PAGES: {
PRIVACY_POLICY: {
ROOT: "/general/privacy-policy"
},
REFUND_POLICY: {
ROOT: "/general/refund-policy"
},
SWEEPSTAKE_POLICY: {
ROOT: "/general/sweepstake-policy"
},
ACCESSIBILITY: {
ROOT: "/general/accessibility"
},
TERMS_AND_CONDITIONS: {
ROOT: "/general/terms-and-conditions"
}
}
}
}
\ No newline at end of file
src/serverApi/pages.ts 0 → 100644
import { PageRequestProps, PageResponseProps } from "@/types/page";
import { cookies } from "next/headers";
import { serverBaseQuery } from "./serverBaseQuery";
export async function getPageDetail(slug: string): Promise<PageResponseProps | undefined> {
return serverBaseQuery(`/api/general/page/${slug}`);
}
src/services/userApi.ts
......@@ -28,10 +28,18 @@ export const userApi = createApi({
query: () => ({
url: "/api/get-balance",
method: "GET"
})
}),
providesTags: ['user']
}),
getUserBalanceBySlug: builder.query<{ provider: string; balance: number, flag: string }, { slug: string }>({
query: ({ slug }) => ({
url: `/api/balance/${slug}`,
method: "GET"
}),
providesTags: ['user']
})
})
})
export const { useAddUserWalletMutation, useUpdateUserProfileMutation, useGetUserBalanceQuery } = userApi;
\ No newline at end of file
export const { useAddUserWalletMutation, useUpdateUserProfileMutation, useGetUserBalanceQuery, useGetUserBalanceBySlugQuery } = userApi;
\ No newline at end of file
src/types/page.ts
export interface pageRequestProps {
export interface PageRequestProps {
id?: string;
name: string;
slug: string;
description: string;
......@@ -8,6 +9,12 @@ export interface pageRequestProps {
}[]
}
export interface PageResponseProps {
success: boolean,
data: PageRequestProps;
message: string;
}
export const pageInitialData = {
name: "",
slug: "",
......
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