updated the new age verification popup for above 21 and also integrated the…

updated the new age verification popup for above 21 and also integrated the required term and condition

src/app/(dashboard)/(user)/(outsideAuth)/layout.tsx

 import DashboardLayout from '@/components/layouts/DashboardLayout'
+import AgeVerificationModal from '@/components/organism/dialog'
 import React from 'react'
 
 export default function DashboardRootLayout({ children }: { children: React.ReactNode }) {
     return (
         <DashboardLayout>
             {children}
+            <AgeVerificationModal />
         </DashboardLayout>
     )
 }

src/app/layout.tsx

+import { pageSEO } from "@/serverApi/game";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import React from "react";
 import "./globals.css";
 import ProviderWrapper from "./ProviderWrapper";
-import { AgeChecker } from "./AgeChecker";
-import TopLoader from "./TopLoader";
-import React from "react";
-import { pageSEO } from "@/serverApi/game";
 import { SeonProvider } from "./SeonProvider";
+import TopLoader from "./TopLoader";
 
 const metadata: Metadata = {
   title: "Sweepstake",
@@ -55,6 +54,7 @@ export default function RootLayout({
           <ProviderWrapper>
             <React.Suspense fallback={<div />}>
               <TopLoader />
+
             </React.Suspense>
             {children}
           </ProviderWrapper>

src/components/organism/dialog/index.tsx

+"use client";
+import { Box, Button, Dialog, DialogContent, Typography } from "@mui/material";
+import { useState } from "react";
+
+export default function AgeVerificationModal() {
+    const [open, setOpen] = useState(true);
+
+    const handleConfirmAge = () => {
+        setOpen(false);
+    };
+
+    const handleCancel = () => {
+        window.location.href = "about:blank";
+    };
+
+    return (
+        <Dialog
+            open={open}
+            aria-labelledby="age-verification-dialog"
+            disableEscapeKeyDown
+            sx={{
+                "& .MuiBackdrop-root": {
+                    backdropFilter: "blur(8px)", // Blurs the background
+                    backgroundColor: "rgba(0, 0, 0, 0.4)", // Semi-transparent dark overlay
+                },
+            }}
+        >
+            <DialogContent>
+                <Typography variant="h5" fontWeight="bold" gutterBottom>
+                    Age Verification Required
+                </Typography>
+                <Typography mb={2}>
+                    This site is restricted to users who are below 21 years of age.
+                    Please confirm your age to proceed.
+                </Typography>
+                <Typography variant="body2" mb={3}>
+                    By clicking "I am over 21", you agree that you meet the minimum age requirement.
+                    If you are under 21, you will not be able to access this site.
+                </Typography>
+
+                <Box mt={2} display="flex" gap={1} justifyContent="flex-end">
+                    <Button
+                        variant="outlined"
+                        color="secondary"
+                        onClick={handleCancel}
+                        sx={{ ml: 1 }}
+                    >
+                        I am under 21
+                    </Button>
+                    <Button variant="contained" color="primary" onClick={handleConfirmAge}>
+                        I am over 21
+                    </Button>
+
+                </Box>
+            </DialogContent>
+        </Dialog>
+    );
+}

src/components/pages/auth/register/index.tsx

 'use client';
 
-import React from 'react'
-import AuthMessageBlock from '../authMessageBlock'
-import { Box, InputLabel, OutlinedInput } from '@mui/material';
-import * as Yup from 'yup';
-import { useRouter } from 'next/navigation';
-import { Formik, useFormik } from 'formik';
-import Link from 'next/link';
-import { PATH } from '@/routes/PATH';
-import { useRegisterUserMutation, useSendVerificationLinkAgainMutation } from '@/services/authApi';
+import PasswordField from '@/components/molecules/PasswordField';
 import { useAppDispatch } from '@/hooks/hook';
+import { PATH } from '@/routes/PATH';
+import { useRegisterUserMutation } from '@/services/authApi';
 import { showToast, ToastVariant } from '@/slice/toastSlice';
-import PasswordField from '@/components/molecules/PasswordField';
-import { ArrowLeft } from '@wandersonalwes/iconsax-react';
+import { Box, Checkbox, FormControlLabel, InputLabel, OutlinedInput } from '@mui/material';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { ArrowLeft } from '@wandersonalwes/iconsax-react';
 import dayjs, { Dayjs } from 'dayjs';
+import { useFormik } from 'formik';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import * as Yup from 'yup';
+import AuthMessageBlock from '../authMessageBlock';
 
 const formFieldSx = {
     '& .MuiOutlinedInput-root, & .MuiPickersInputBase-root, & .MuiPickersOutlinedInput-root': {
@@ -85,9 +84,9 @@ const validationSchema = Yup.object().shape({
     dob: Yup.date()
         .required("Date of birth is required")
         .max(new Date(), 'Date of birth cannot be in the future')
-        .test('age', 'You must be at least 18 years old', function (value) {
+        .test('age', 'You must be at least 21 years old', function (value) {
             if (!value) return true;
-            const cutoff = dayjs().subtract(18, 'years');
+            const cutoff = dayjs().subtract(21, 'years');
             return dayjs(value).isBefore(cutoff);
         }),
     first_name: Yup.string().required('First name is required'),
@@ -96,6 +95,7 @@ const validationSchema = Yup.object().shape({
     photoid_number: Yup.string(),
     city: Yup.string(),
     pob: Yup.string(),
+    agree: Yup.boolean().required().oneOf([true], 'You must agree to the terms and conditions')
 })
 
 export default function RegisterPage() {
@@ -115,6 +115,7 @@ export default function RegisterPage() {
         dob: null as Dayjs | null,
         city: '',
         pob: '',
+        agree: true
     }
     const { handleSubmit, handleBlur, handleChange, errors, dirty, values, touched, setFieldValue, setFieldTouched } = useFormik(
         {
@@ -136,6 +137,7 @@ export default function RegisterPage() {
                         dob: formattedDob,
                         city: values.city,
                         pob: values.pob,
+                        agree: values.agree
                     }).unwrap();
 
                     dispatch(
@@ -272,16 +274,14 @@ export default function RegisterPage() {
                         {/* Photo ID */}
                         <div className="col-span-2 lg:col-span-3">
                             <div className="input__field">
-                                <InputLabel htmlFor="photoid_number">Photo ID</InputLabel>
-                                <OutlinedInput
-                                    fullWidth
-                                    id="photoid_number"
+                                {/* <InputLabel htmlFor="photoid_number"></InputLabel> */}
+                                <PasswordField
+                                    label='Photo ID'
                                     name="photoid_number"
                                     placeholder="Enter photo ID"
                                     value={values.photoid_number}
                                     onChange={handleChange}
                                     onBlur={handleBlur}
-                                    sx={formFieldSx}
                                 />
                                 <span className="error">{touched.photoid_number && errors.photoid_number}</span>
                             </div>
@@ -429,6 +429,14 @@ export default function RegisterPage() {
                                 />
                             </div>
                         </div>
+                        <div className="col-span-4">
+                            <FormControlLabel
+                                control={<Checkbox
+                                    checked={values.agree}
+                                    onChange={() => setFieldValue("agree", !values.agree)}
+                                />}
+                                label="I agree to the terms and conditions" />
+                        </div>
                     </div>
                     <div className="action__group text-center flex flex-col gap-4 mt-8">
                         <button className='ss-btn bg-primary-grad' disabled={!dirty}>{isLoading ? "Signing Up" : "Sign up"}</button>

src/services/authApi.ts

-import { createApi } from "@reduxjs/toolkit/query/react";
-import { baseQuery } from "./baseQuery";
 import { LoginProps, LoginResponse, RegisterProps } from "@/types/auth";
 import { GlobalResponse } from "@/types/config";
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQuery } from "./baseQuery";
 
 export const authApi = createApi({
     reducerPath: "authApi",
@@ -11,14 +11,14 @@ export const authApi = createApi({
             query: ({ email,
                 username,
                 password,
-                password_confirmation, first_name, middle_name, last_name, phone, photoid_number, dob, city, pob }) => ({
+                password_confirmation, first_name, middle_name, last_name, phone, photoid_number, dob, city, pob, agree }) => ({
                     url: `/api/auth/register`,
                     method: "POST",
                     body: {
                         email,
                         username,
                         password,
-                        password_confirmation, first_name, middle_name, last_name, phone, photoid_number, dob, city, pob
+                        password_confirmation, first_name, middle_name, last_name, phone, photoid_number, dob, city, pob, agree
                     },
                 }),
 

src/types/auth.ts

@@ -39,4 +39,5 @@ export interface RegisterProps extends LoginProps {
     dob: string;
     city: string;
     pob: string;
+    agree: boolean;
 }
\ No newline at end of file

tsconfig.json

 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,9 +23,20 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/utils/RenderHTML.tss"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/utils/RenderHTML.tss",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }