Sales Login
Personal Details
Please fill in the following information
Usage
import { HeaderPaper } from "tawuniya";
import { string, object, InferType, ObjectSchema } from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { Controller, useForm } from "react-hook-form";
import {
Button,
DateSelector,
Input,
RadioButton,
Typography,
} from "tawuniya";
const schema = object({
nationalID: string()
.matches(
/^[12]\d{9}$/,
"National ID must start with 1 or 2 and be 10 digits"
)
.required("Please enter a valid Saudi National ID"),
dateBirth: string()
.min(1, "Please select a date")
.required("Please provide a valid date of birth"),
mobileNo: string()
.required("Please enter a valid mobile number")
.matches(/^5\d{8}$/, "Invalid Mobile Number"),
email: string()
.matches(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, "Invalid Email address")
.required("Please enter a valid email address"),
radio: string().required("Please select an option"),
});
type FormType = InferType<typeof schema>;
const SalesLogin = () => {
const {
control,
register,
handleSubmit,
formState: { errors },
} = useForm<FormType>({
resolver: yupResolver(schema as ObjectSchema<FormType>),
mode: "all",
});
const onSubmit = (values: FormType) => {
alert(JSON.stringify(values, null, 2));
};
return (
<>
<HeaderPaper
title="Personal Details"
description="Please fill in the following information"
classNames={{ wrapperClassName: "bg-gray-50" }}
icon="id-card"
>
<form
className="flex flex-col gap-y-6"
onSubmit={handleSubmit(onSubmit)}
>
<div className="flex flex-col gap-y-4 bg-muted p-6 rounded-lg">
<Input
name="nationalID"
label="Your National ID, Iqama"
register={register}
maxLength={10}
size="lg"
error={errors.nationalID?.message}
/>
<DateSelector
form={{
control,
controller: Controller,
name: "dateBirth",
}}
label="Your Date of Birth"
views={["Month", "Year"]}
format="MM/YYYY"
error={errors.dateBirth?.message}
/>
<Input
name="mobileNo"
label="Your Mobile Number"
register={register}
maxLength={9}
size="lg"
prefix="+966"
error={errors.mobileNo?.message}
/>
<Input
name="email"
label="Your Email Address"
register={register}
size="lg"
error={errors.email?.message}
/>
</div>
<div className="flex flex-col gap-y-4">
<Typography size="xs" color="muted_foreground">
By continuing, I hereby declare that Tawuniya is entitled to
obtain any information related to me or required for the purchase
of Tawuniya's products for the purpose of sending me offers and
services anytime in the future through SMSs، whatsapp or emails. I
also acknowledge that I have reviewed Tawuniya’s{" "}
<a href="https://tawuniya.com/en/privacy-policy" target="_blank">
Privacy Policy
</a>
</Typography>
<Typography size="xs" className="text-[10px]">
I Consent to receiving Marketing Communications, updates and
offers from Tawuniya and subsidiary Companies
</Typography>
</div>
<RadioButton
options={[
{
value: "yes",
label: "Yes",
},
{
value: "no",
label: "No",
},
]}
form={{
controller: Controller,
control,
name: "radio",
}}
wrapperClassName="w-fit"
className="bg-transparent border border-muted-foreground/15 !p-6"
error={errors.radio?.message}
/>
<Button size="lg">Proceed</Button>
</form>
</HeaderPaper>
</>
);
};
export default SalesLogin;
tip
You can handle a form even if the submit button is outside the form by using the form="form-id" attribute on the button to link it to the desired form.
import { HeaderPaper } from "tawuniya";
import { string, object, InferType, ObjectSchema } from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { Controller, useForm } from "react-hook-form";
import {
Button,
DateSelector,
Input,
RadioButton,
Typography,
} from "tawuniya";
const schema = object({
nationalID: string()
.matches(
/^[12]\d{9}$/,
"National ID must start with 1 or 2 and be 10 digits"
)
.required("Please enter a valid Saudi National ID"),
dateBirth: string()
.min(1, "Please select a date")
.required("Please provide a valid date of birth"),
mobileNo: string()
.required("Please enter a valid mobile number")
.matches(/^5\d{8}$/, "Invalid Mobile Number"),
email: string()
.matches(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, "Invalid Email address")
.required("Please enter a valid email address"),
radio: string().required("Please select an option"),
});
type FormType = InferType<typeof schema>;
const SalesLogin = () => {
const {
control,
register,
handleSubmit,
formState: { errors },
} = useForm<FormType>({
resolver: yupResolver(schema as ObjectSchema<FormType>),
mode: "all",
});
const onSubmit = (values: FormType) => {
alert(JSON.stringify(values, null, 2));
};
return (
<>
<HeaderPaper
title="Personal Details"
description="Please fill in the following information"
classNames={{ wrapperClassName: "bg-gray-50" }}
icon="id-card"
>
<form
id="sales-login-form"
className="flex flex-col gap-y-6"
onSubmit={handleSubmit(onSubmit)}
>
<div className="flex flex-col gap-y-4 bg-muted p-6 rounded-lg">
<Input
name="nationalID"
label="Your National ID, Iqama"
register={register}
maxLength={10}
size="lg"
error={errors.nationalID?.message}
/>
<DateSelector
form={{
control,
controller: Controller,
name: "dateBirth",
}}
label="Your Date of Birth"
views={["Month", "Year"]}
format="MM/YYYY"
error={errors.dateBirth?.message}
/>
<Input
name="mobileNo"
label="Your Mobile Number"
register={register}
maxLength={9}
size="lg"
prefix="+966"
error={errors.mobileNo?.message}
/>
<Input
name="email"
label="Your Email Address"
register={register}
size="lg"
error={errors.email?.message}
/>
</div>
<div className="flex flex-col gap-y-4">
<Typography size="xs" color="muted_foreground">
By continuing, I hereby declare that Tawuniya is entitled to
obtain any information related to me or required for the purchase
of Tawuniya's products for the purpose of sending me offers and
services anytime in the future through SMSs، whatsapp or emails. I
also acknowledge that I have reviewed Tawuniya’s{" "}
<a href="https://tawuniya.com/en/privacy-policy" target="_blank">
Privacy Policy
</a>
</Typography>
<Typography size="xs" className="text-[10px]">
I Consent to receiving Marketing Communications, updates and
offers from Tawuniya and subsidiary Companies
</Typography>
</div>
<RadioButton
options={[
{
value: "yes",
label: "Yes",
},
{
value: "no",
label: "No",
},
]}
form={{
controller: Controller,
control,
name: "radio",
}}
wrapperClassName="w-fit"
className="bg-transparent border border-muted-foreground/15 !p-6"
error={errors.radio?.message}
/>
</form>
<Button size="lg" form="sales-login-form">
Proceed
</Button>
</HeaderPaper>
</>
);
};
export default SalesLogin;