Skip to content

S
sweepstake
Commit 49368af2 by Arjun Jhukal
Options

updated the kyc form and verify kyc ui

parent 1ca7fa6c
Showing with 275 additions and 10 deletions
src/app/(dashboard)/(user)/(outsideAuth)/page.tsx
...@@ -7,6 +7,8 @@ import Image from "next/image"; ...@@ -7,6 +7,8 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import DashboardProvider from "./DashboardProvider"; import DashboardProvider from "./DashboardProvider";
import GlassWrapper from "@/components/molecules/GlassWrapper"; import GlassWrapper from "@/components/molecules/GlassWrapper";
import { Stack } from "@mui/material";
import KycBanner from "@/components/pages/dashboard/userDashboard/verifyKyc/KycBanner";
export const dynamic = "force-dynamic"; export const dynamic = "force-dynamic";
...@@ -61,6 +63,7 @@ export default async function Home() { ...@@ -61,6 +63,7 @@ export default async function Home() {
return ( return (
<DashboardProvider> <DashboardProvider>
<> <>
{/* <KycBanner /> */}
{/* Banners */} {/* Banners */}
{bannersError ? ( {bannersError ? (
<p className="text-red-500">{bannersError}</p> <p className="text-red-500">{bannersError}</p>
......
src/app/(dashboard)/(user)/(outsideAuth)/verify-kyc/page.tsx 0 → 100644
import PageHeader from '@/components/molecules/PageHeader'
import VerifyKYCPage from '@/components/pages/dashboard/userDashboard/verifyKyc'
import React from 'react'
export default function VerfiyKYC() {
return (
<>
<PageHeader title='Verify KYC' />
<VerifyKYCPage />
</>
)
}
src/components/pages/auth/register/index.tsx
...@@ -69,8 +69,8 @@ const validationSchema = Yup.object().shape({ ...@@ -69,8 +69,8 @@ const validationSchema = Yup.object().shape({
.max(14, "Display Name must be less than 14 characters") .max(14, "Display Name must be less than 14 characters")
.min(6, "Display Name must be at least 6 characters long") .min(6, "Display Name must be at least 6 characters long")
.matches(/^\S+$/, "Display Name cannot contain spaces"), .matches(/^\S+$/, "Display Name cannot contain spaces"),
phone: Yup.string() // phone: Yup.string()
.required("Phone number is required"), // .required("Phone number is required"),
password: Yup.string() password: Yup.string()
.required('Password is required') .required('Password is required')
.test( .test(
...@@ -82,14 +82,14 @@ const validationSchema = Yup.object().shape({ ...@@ -82,14 +82,14 @@ const validationSchema = Yup.object().shape({
confirmPassword: Yup.string() confirmPassword: Yup.string()
.oneOf([Yup.ref('password')], 'Passwords must match') .oneOf([Yup.ref('password')], 'Passwords must match')
.required('Confirm Password is required'), .required('Confirm Password is required'),
dob: Yup.date() // dob: Yup.date()
.required("Date of birth is required") // .required("Date of birth is required")
.max(new Date(), 'Date of birth cannot be in the future') // .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 18 years old', function (value) {
if (!value) return true; // if (!value) return true;
const cutoff = dayjs().subtract(18, 'years'); // const cutoff = dayjs().subtract(18, 'years');
return dayjs(value).isBefore(cutoff); // return dayjs(value).isBefore(cutoff);
}) // })
}) })
export default function RegisterPage() { export default function RegisterPage() {
......
src/components/pages/dashboard/userDashboard/verifyKyc/KycBanner.tsx 0 → 100644
'use client';
import GlassWrapper from "@/components/molecules/GlassWrapper";
import { Box, Button, Stack, Typography } from "@mui/material";
import Link from "next/link";
export default function KycBanner() {
return (
<GlassWrapper className="max-w-fit ml-auto">
<div className="flex justify-end items-center gap-8 py-2 px-3">
<Typography className="!text-[14px]">
Your KYC is not verified yet. Please verify.
</Typography>
<Link href="/verify-kyc" passHref className="ss-btn bg-primary-grad max-w-fit !text-[12px] !py-3 !px-4">
Verify KYC
</Link>
</div>
</GlassWrapper>
);
}
src/components/pages/dashboard/userDashboard/verifyKyc/index.tsx 0 → 100644
'use client';
import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import dayjs from 'dayjs';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { InputLabel, OutlinedInput, Stack, Button, TextField } from '@mui/material';
// Reuse your MUI styles
const formFieldSx = {
'& .MuiOutlinedInput-root, & .MuiPickersInputBase-root, & .MuiPickersOutlinedInput-root': {
borderRadius: '27px',
background: 'rgba(118, 107, 120, 0.55)',
color: '#fff',
'& .MuiOutlinedInput-notchedOutline, & .MuiPickersOutlinedInput-notchedOutline': {
border: '0.576px solid rgba(255, 255, 255, 0.04)',
},
'&:hover .MuiOutlinedInput-notchedOutline, &:hover .MuiPickersOutlinedInput-notchedOutline': {
borderColor: 'rgba(255,255,255,0.2)',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline, &.Mui-focused .MuiPickersOutlinedInput-notchedOutline': {
borderColor: '#B801C0',
},
},
'& .MuiOutlinedInput-input, & .MuiPickersInputBase-input': {
padding: '12px 16px',
color: '#fff',
'&::placeholder': {
color: 'rgba(255, 255, 255, 0.2)',
fontWeight: 300,
fontSize: '12px',
opacity: 1,
},
},
'& .MuiInputAdornment-root': {
marginRight: '8px',
},
'& .MuiInputAdornment-root button': {
color: 'rgba(255, 255, 255, 0.7)',
'&:hover': {
color: '#fff',
background: 'rgba(255, 255, 255, 0.08)',
},
},
'& .MuiIconButton-root': {
padding: '8px',
},
};
// Yup validation schema
const validationSchema = Yup.object({
first_name: Yup.string().required('First name is required'),
middle_name: Yup.string(),
last_name: Yup.string().required('Last name is required'),
phone: Yup.string().required('Phone number is required'),
dob: Yup.date().max(new Date(), 'Date of birth cannot be in the future').required('DOB is required'),
address: Yup.string(),
user_id: Yup.string().required('User ID is required'),
photo_id: Yup.string().required('Photo ID is required'),
});
export default function VerifyKYCPage() {
const formik = useFormik({
initialValues: {
first_name: '',
middle_name: '',
last_name: '',
phone: '',
dob: null,
address: '',
user_id: '',
photo_id: '',
},
validationSchema,
onSubmit: (values) => {
console.log('Form submitted:', values);
},
});
return (
<form onSubmit={formik.handleSubmit}>
<div className="grid md:grid-cols-2 gap-x-3 gap-y-5">
{/* Phone */}
<div className="col-span-2">
<InputLabel htmlFor="phone">Phone</InputLabel>
<OutlinedInput
fullWidth
id="phone"
name="phone"
placeholder="Enter phone number"
value={formik.values.phone}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
sx={formFieldSx}
/>
<span className="error">{formik.touched.phone && formik.errors.phone ? formik.errors.phone : ""}</span>
</div>
{/* DOB */}
<div className="col-span-2">
<InputLabel htmlFor="dob">Date of Birth</InputLabel>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
value={formik.values.dob}
onChange={(newValue) => formik.setFieldValue('dob', newValue)}
onClose={() => formik.setFieldTouched('dob', true)}
maxDate={dayjs()}
slotProps={{
textField: {
fullWidth: true,
id: 'dob',
name: 'dob',
placeholder: 'MM/DD/YYYY',
error: Boolean(formik.touched.dob && formik.errors.dob),
helperText: formik.touched.dob && formik.errors.dob,
sx: formFieldSx,
},
}}
/>
</LocalizationProvider>
</div>
{/* First Name */}
<div className="input__field">
<InputLabel htmlFor="first_name">First Name<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
id="first_name"
name="first_name"
placeholder="Enter first name"
value={formik.values.first_name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
sx={formFieldSx}
/>
<span className="error">{formik.touched.first_name && formik.errors.first_name}</span>
</div>
{/* Middle Name */}
<div className="input__field">
<InputLabel htmlFor="middle_name">Middle Name</InputLabel>
<OutlinedInput
fullWidth
id="middle_name"
name="middle_name"
placeholder="Enter middle name"
value={formik.values.middle_name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
sx={formFieldSx}
/>
<span className="error">{formik.touched.middle_name && formik.errors.middle_name}</span>
</div>
{/* Last Name */}
<div className="input__field">
<InputLabel htmlFor="last_name">Last Name<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
id="last_name"
name="last_name"
placeholder="Enter last name"
value={formik.values.last_name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
sx={formFieldSx}
/>
<span className="error">{formik.touched.last_name && formik.errors.last_name}</span>
</div>
{/* Address */}
<div className="input__field">
<InputLabel htmlFor="address">Address</InputLabel>
<OutlinedInput
fullWidth
id="address"
name="address"
placeholder="Enter address"
value={formik.values.address}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
sx={formFieldSx}
/>
<span className="error">{formik.touched.address && formik.errors.address}</span>
</div>
{/* User ID */}
<div className="input__field">
<InputLabel htmlFor="user_id">User ID<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
id="user_id"
name="user_id"
placeholder="Enter your user ID"
value={formik.values.user_id}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
sx={formFieldSx}
/>
<span className="error">{formik.touched.user_id && formik.errors.user_id}</span>
</div>
{/* Photo ID */}
<div className="input__field">
<InputLabel htmlFor="photo_id">Photo ID<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
id="photo_id"
name="photo_id"
placeholder="Enter photo ID"
value={formik.values.photo_id}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
sx={formFieldSx}
/>
<span className="error">{formik.touched.photo_id && formik.errors.photo_id}</span>
</div>
</div>
<Stack mt={4} direction="row" justifyContent="flex-end">
<Button type="submit" variant='contained'>
Submit
</Button>
</Stack>
</form>
);
}
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