Skip to content

S
sweepstake
Commit 3294a2f4 by Arjun Jhukal
Options

reformed the user creations and registraion process

parent ed0ed73d
Showing with 253 additions and 63 deletions
src/components/pages/auth/register/index.tsx
......@@ -96,7 +96,10 @@ const validationSchema = Yup.object().shape({
last_name: Yup.string().required('Last name is required'),
city: Yup.string().required("City is Required"),
state: Yup.string().required("State is Required"),
// zip_code: Yup.string().required("Zip Code is Required"),
// postal_code: Yup.string().required("Zip Code is Required"),
address: Yup.string().required("Address is Required"),
address_line_two: Yup.string(),
gender: Yup.string().required("Gender is Required"),
postal_code: Yup.string().required("Postal Code is Required"),
ssn: Yup.string()
.matches(/^\d{4}$/, "SSN must be exactly 4 digits no characters")
......@@ -122,12 +125,13 @@ export default function RegisterPage() {
photoid_number: '',
dob: null as Dayjs | null,
city: '',
pob: '',
agree: true,
state: "",
zip_code: "",
postal_code: "",
ssn: ""
ssn: "",
address: "",
address_line_two: "",
gender: ""
}
const { handleSubmit, handleBlur, handleChange, errors, dirty, values, touched, setFieldValue, setFieldTouched } = useFormik(
{
......@@ -149,11 +153,12 @@ export default function RegisterPage() {
dob: formattedDob,
city: values.city,
state: values.state,
zip_code: values.zip_code,
pob: values.pob,
agree: values.agree,
postal_code: values.postal_code,
ssn: values.ssn
agree: values.agree,
ssn: values.ssn,
address: values.address,
address_line_two: values.address_line_two,
gender: values.gender
}).unwrap();
dispatch(
......@@ -185,7 +190,6 @@ export default function RegisterPage() {
}
)
console.log(errors)
return (
<>
<AuthMessageBlock
......@@ -276,6 +280,38 @@ export default function RegisterPage() {
</div>
</div>
<div className="input__field lg:col-span-3">
<InputLabel htmlFor="address">Address Line 1<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
id="address"
name="address"
placeholder="Enter address"
value={values.address}
onChange={handleChange}
onBlur={handleBlur}
/>
<span className="error">
{touched.address && errors.address ? errors.address : ""}
</span>
</div>
<div className="input__field lg:col-span-3">
<InputLabel htmlFor="address_line_two">Address Line 2</InputLabel>
<OutlinedInput
fullWidth
id="address_line_two"
name="address_line_two"
placeholder="Enter address line 2"
value={values.address_line_two}
onChange={handleChange}
onBlur={handleBlur}
/>
<span className="error">
{touched.address_line_two && errors.address_line_two ? errors.address_line_two : ""}
</span>
</div>
{/* City */}
<div className="lg:col-span-3">
<div className="input__field">
......@@ -325,6 +361,37 @@ export default function RegisterPage() {
</div>
</div>
<div className="input__field lg:col-span-3">
<InputLabel htmlFor="gender">Gender <span className="text-red-500">*</span></InputLabel>
<Select
fullWidth
id="gender"
name="gender"
displayEmpty
value={values.gender}
onChange={handleChange}
onBlur={handleBlur}
renderValue={(selected) =>
selected === "" ? "Select a Gender" : selected
}
>
<MenuItem value="">
<em>Select a Gender</em>
</MenuItem>
{[
{ label: "Male", value: "M" },
{ label: "Female", value: "F" },
{ label: "Other", value: "O" },
].map((state) => (
<MenuItem key={state.value} value={state.value}>
{state.label}
</MenuItem>
))}
</Select>
<span className="error">{touched.gender && errors.gender}</span>
</div>
<div className="lg:col-span-3">
<div className="input__field">
<InputLabel htmlFor="postal_code">Postal Code <span className="text-red-500">*</span></InputLabel>
......@@ -363,7 +430,7 @@ export default function RegisterPage() {
<div className="lg:col-span-3">
<InputLabel htmlFor="phone">Phone <span className="text-red-500">*</span></InputLabel>
<div className="grid grid-cols-12 gap-1 items-end">
<div className="grid grid-cols-12 gap-1 items-start">
<div className="col-span-4 lg:col-span-3">
<OutlinedInput
fullWidth
......@@ -392,7 +459,8 @@ export default function RegisterPage() {
</div>
</div>
</div>
<div className="lg:col-span-6">
<div className="lg:col-span-3">
<div className="input__field">
<InputLabel htmlFor="dob">Date of Birth <span className="text-red-500">*</span></InputLabel>
<LocalizationProvider dateAdapter={AdapterDayjs}>
......
src/components/pages/dashboard/adminDashboard/players/addPlayerForm/AddPlayerForm.tsx
......@@ -2,6 +2,7 @@
import InputFile from '@/components/atom/InputFile';
import PasswordField from '@/components/molecules/PasswordField';
import { US_STATES } from '@/constants/state';
import { useAppSelector } from '@/hooks/hook';
import { PlayerProps, SinlgePlayerResponseProps } from '@/types/player';
import { Button, InputLabel, MenuItem, OutlinedInput, Select } from '@mui/material';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
......@@ -10,22 +11,51 @@ import dayjs from 'dayjs';
import { FormikProps } from 'formik';
const formFieldSx = {
"&& .MuiPickersInputBase-input": {
borderRadius: "8px !important",
padding: "10px 0px !important",
'& .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,
},
"&& .MuiPickersSectionList-root": {
padding: "4px 16px 4px 0 !important",
},
'& .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',
}
};
export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }: { formik: FormikProps<PlayerProps>, id?: string, data?: SinlgePlayerResponseProps, loading?: boolean, buttonLabel?: string }) {
const user = useAppSelector(state => state.auth.user);
return (
<form onSubmit={formik.handleSubmit}>
<div className="form__fields p-6 lg:p-10 flex flex-col gap-4 lg:gap-6 lg:grid grid-cols-2">
<div className="input__field">
<div className="form__fields p-6 lg:p-10 flex flex-col gap-4 lg:gap-6 lg:grid lg:grid-cols-2">
<div className="input__field col-span-1">
<InputLabel htmlFor="name">Username<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
......@@ -41,7 +71,7 @@ export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }
{formik.touched.name && formik.errors.name ? formik.errors.name : ""}
</span>
</div>
<div className="input__field">
<div className="input__field col-span-1">
<InputLabel htmlFor="email">Email<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
......@@ -106,8 +136,8 @@ export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }
</span>
</div>
<div className="input__field">
<InputLabel htmlFor="address">Address <span className="text-red-500">*</span></InputLabel>
<div className="input__field col-span-1">
<InputLabel htmlFor="address">Address Line 1<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
id="address"
......@@ -122,6 +152,22 @@ export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }
</span>
</div>
<div className="input__field col-span-1">
<InputLabel htmlFor="address_line_two">Address Line 2</InputLabel>
<OutlinedInput
fullWidth
id="address_line_two"
name="address_line_two"
placeholder="Enter address line 2"
value={formik.values.address_line_two}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<span className="error">
{formik.touched.address_line_two && formik.errors.address_line_two ? formik.errors.address_line_two : ""}
</span>
</div>
<div className="input__field">
<InputLabel htmlFor="city">City <span className="text-red-500">*</span></InputLabel>
<OutlinedInput
......@@ -138,8 +184,22 @@ export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }
</span>
</div>
<div className="input__field">
<div className="lg:col-span-2">
<InputLabel htmlFor="phone">Phone <span className="text-red-500">*</span></InputLabel>
<div className="grid grid-cols-12 gap-1 items-start">
<div className="col-span-4 lg:col-span-3">
<OutlinedInput
fullWidth
id="country_code"
name="country_code"
placeholder="Enter country_code number"
value={"+1"}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
disabled
/>
</div>
<div className="input__field col-span-8 lg:col-span-9">
<OutlinedInput
fullWidth
id="phone"
......@@ -153,16 +213,17 @@ export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }
{formik.touched.phone && formik.errors.phone ? formik.errors.phone : ""}
</span>
</div>
</div>
</div>
<div className="input__field">
<InputLabel htmlFor="pob">State <span className="text-red-500">*</span></InputLabel>
<InputLabel htmlFor="state">State <span className="text-red-500">*</span></InputLabel>
<Select
fullWidth
id="pob"
name="pob"
id="state"
name="state"
displayEmpty
value={formik.values.pob}
value={formik.values.state}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
renderValue={(selected) =>
......@@ -179,22 +240,53 @@ export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }
))}
</Select>
<span className="error">{formik.touched.pob && formik.errors.pob}</span>
<span className="error">{formik.touched.state && formik.errors.state}</span>
</div>
<div className="input__field">
<InputLabel htmlFor="gender">Gender <span className="text-red-500">*</span></InputLabel>
<Select
fullWidth
id="gender"
name="gender"
displayEmpty
value={formik.values.gender}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
renderValue={(selected) =>
selected === "" ? "Select a Gender" : selected
}
>
<MenuItem value="">
<em>Select a Gender</em>
</MenuItem>
{[
{ label: "Male", value: "M" },
{ label: "Female", value: "F" },
{ label: "Other", value: "O" },
].map((state) => (
<MenuItem key={state.value} value={state.value}>
{state.label}
</MenuItem>
))}
</Select>
<span className="error">{formik.touched.gender && formik.errors.gender}</span>
</div>
<div className="input__field">
<InputLabel htmlFor="zip_code">Zip Code <span className="text-red-500">*</span></InputLabel>
<InputLabel htmlFor="postal_code">Zip Code <span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
id="zip_code"
name="zip_code"
id="postal_code"
name="postal_code"
placeholder="Enter zip code"
value={formik.values.zip_code}
value={formik.values.postal_code}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<span className="error">
{formik.touched.phone && formik.errors.phone ? formik.errors.phone : ""}
{formik.touched.postal_code && formik.errors.postal_code ? formik.errors.postal_code : ""}
</span>
</div>
......@@ -217,7 +309,15 @@ export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }
error: Boolean(formik.touched.dob && formik.errors.dob),
onBlur: formik.handleBlur,
helperText: formik.touched.dob && formik.errors.dob,
sx: formFieldSx
sx: user?.role === "user" ? { ...formFieldSx } : {
"&& .MuiPickersInputBase-input": {
padding: "10px 14px !important",
},
"&& .MuiPickersSectionList-root": {
borderRadius: "8px !important",
padding: "4px 12px 4px 0 !important",
},
}
},
}}
......
src/components/pages/dashboard/adminDashboard/players/addPlayerForm/index.tsx
......@@ -20,16 +20,17 @@ export const PlayerValidationSchema = (isEdit: boolean) => Yup.object().shape({
wallet_address: Yup.string().nullable(),
address: Yup.string().required("Address is required"),
city: Yup.string().required("City is required"),
zip_code: Yup.string().required("Zip code is required"),
pob: Yup.string().required("State is required"),
postal_code: Yup.string().required("Zip code is required"),
state: Yup.string().required("State is required"),
gender: Yup.string().required("Gender is required"),
phone: Yup.string()
.matches(/^\+?\d{7,15}$/, "Invalid phone number")
.required("Phone is required"),
password: isEdit
? Yup.string().nullable() // not required in edit mode
: Yup.string().min(6, "Password must be at least 6 characters").required("Password is required"),
password_confirmation: Yup.string().when("password", {
is: (val: string) => !!val, // required only if password is filled
password_confirmation: isEdit ? Yup.string().nullable() : Yup.string().when("password", {
is: (val: string) => !!val,
then: (schema) => schema.oneOf([Yup.ref("password")], "Passwords must match").required("Password confirmation is required"),
otherwise: (schema) => schema.nullable(),
}),
......@@ -69,8 +70,10 @@ export default function AddPlayerPage({ id }: { id?: string }) {
password_confirmation: data?.data.password_confirmation,
profile_image: null,
dob: data?.data.dob || null as Dayjs | null,
zip_code: data?.data.zip_code || "",
pob: data?.data.pob || "",
postal_code: data?.data.postal_code || "",
state: data?.data.state || "",
gender: data?.data.gender || "",
address_line_two: data?.data.address_line_two || "",
} : initialPlayerValues,
validationSchema: PlayerValidationSchema(!!id),
enableReinitialize: true,
......@@ -87,8 +90,10 @@ export default function AddPlayerPage({ id }: { id?: string }) {
if (values.city) formData.append("city", values.city);
if (values.phone) formData.append("phone", values.phone);
if (values.dob) formData.append("dob", values.dob.toString());
if (values.zip_code) formData.append("zip_code", values.zip_code);
if (values.pob) formData.append("pob", values.pob);
if (values.postal_code) formData.append("postal_code", values.postal_code);
if (values.state) formData.append("state", values.state);
if (values.gender) formData.append("gender", values.gender);
if (values.address_line_two) formData.append("address_line_two", values.address_line_two);
if (values.profile_image) {
if (Array.isArray(values.profile_image)) {
values.profile_image.forEach((file) => formData.append("profile_image", file));
......
src/components/pages/dashboard/adminDashboard/transaction/TransactionTable.tsx
......@@ -103,8 +103,8 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
accessorKey: "status",
header: ({ column }) => <SortableHeader column={column} label="Status" />,
cell: ({ row }) => {
const status = row.original.status.toLowerCase();
const display = status.charAt(0).toUpperCase() + status.slice(1);
const status = row?.original?.status ? row.original?.status?.toLowerCase() : "";
const display = status?.charAt(0)?.toUpperCase() + status?.slice(1);
return (
<span className={`px-2 py-1 max-w-[60px] block lg: text-[10px] text-white status rounded-[8px] text-center ${status}`} > {display} </span >
);
......@@ -112,11 +112,15 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
},
{
accessorKey: "amount",
header: ({ column }) => <SortableHeader column={column} label="Amount USD" />,
header: ({ column }) => <SortableHeader column={column} label="Deposit Amount" />,
},
{
accessorKey: "gc",
header: ({ column }) => <SortableHeader column={column} label="GC Awarded" />,
},
{
accessorKey: "sweepcoins",
header: ({ column }) => <SortableHeader column={column} label="Sweepcoins" />,
header: ({ column }) => <SortableHeader column={column} label="SC Bonus" />,
},
{
accessorKey: "transaction_date",
......
src/components/pages/dashboard/userDashboard/account/profile/editProfile/index.tsx
......@@ -30,7 +30,10 @@ export default function EditUserProfile({ id, buttonLabel }: { id: string, butto
password_confirmation: '',
profile_image: null,
dob: user.dob || null as Dayjs | null,
zip_code: user.zip_code || "",
postal_code: user.postal_code || "",
gender: user.gender || "",
state: user.state || "",
address_line_two: user.address_line_two || "",
} : initialPlayerValues,
validationSchema: PlayerValidationSchema(user?.id ? true : false),
enableReinitialize: true,
......@@ -49,8 +52,11 @@ export default function EditUserProfile({ id, buttonLabel }: { id: string, butto
if (values.city) formData.append("city", values.city);
if (values.phone) formData.append("phone", values.phone);
if (values.dob) formData.append("dob", formattedDob);
if (values.zip_code) formData.append("zip_code", values.zip_code);
if (values.pob) formData.append("pob", values.pob);
if (values.postal_code) formData.append("postal_code", values.postal_code);
if (values.state) formData.append("state", values.state);
if (values.gender) formData.append("gender", values.gender);
if (values.address_line_two) formData.append("address_line_two", values.address_line_two);
if (values.profile_image) {
if (Array.isArray(values.profile_image)) {
......@@ -110,6 +116,10 @@ export default function EditUserProfile({ id, buttonLabel }: { id: string, butto
total_deposited: user.total_deposited ?? undefined,
profile_image_file: user.profile_image_file ?? undefined,
dob: user.dob ? dayjs(user.dob).format('YYYY-MM-DD') : undefined,
postal_code: user?.postal_code || "",
gender: user?.gender || "",
address_line_two: user?.address_line_two || "",
state: user?.state || "",
} as PlayerItem,
}
: undefined;
......
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout/FortPay.tsx
......@@ -61,7 +61,7 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
address1: user?.address || '',
city: user?.city || '',
state: user?.state || '',
zip: '',
zip: user?.postal_code || '',
},
validationSchema: billingSchema,
onSubmit: () => {
......
src/components/pages/dashboard/userDashboard/withdrawl/index.tsx
......@@ -155,7 +155,7 @@ export default function WithdrawlPage({
};
const handleWithdrawClick = (balance: number, provider: string) => {
if (balance < 10 || balance > 400) {
if (balance < 40 || balance > 400) {
dispatch(
showToast({
message: "Withdraw Amount must be at least $40 and below $400",
......
src/types/auth.ts
......@@ -17,9 +17,8 @@ export interface User {
address: string;
city: string
role: RoleProps;
zip_code?: string;
postal_code?: string;
state?: string;
postal_code: string;
ssn: string;
}
......@@ -43,11 +42,12 @@ export interface RegisterProps extends LoginProps {
photoid_number: string;
dob: string;
city: string;
pob: string;
agree: boolean;
device_id?: string;
zip_code?: string;
postal_code?: string;
state?: string;
postal_code: string;
ssn: string;
address: string;
address_line_two?: string;
gender: string;
}
\ No newline at end of file
src/types/player.ts
......@@ -16,10 +16,10 @@ export interface CommonPlayerProps {
role?: string;
state?: string;
dob?: string | Dayjs | null;
zip_code?: string;
pob?: string;
postal_code?: string;
is_acuity_verified?: boolean
gender: string;
address_line_two?: string;
}
export interface PlayerProps extends CommonPlayerProps {
id?: string;
......@@ -44,8 +44,9 @@ export const initialPlayerValues: PlayerProps = {
password_confirmation: "",
profile_image: null,
dob: null as Dayjs | null,
zip_code: "",
pob: ""
postal_code: "",
gender: "",
address_line_two: "",
};
type GameInformation = {
......
src/types/transaction.ts
......@@ -41,6 +41,7 @@ export interface SingleDepositProps {
type: string;
amount: number;
sweepcoins: number;
gc?: number;
transaction_date: string;
available_balance?: string;
status: TransactionStatus;
......
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