ISSUE 10: fix step 6 and 7 of customer and host tour guide
This commit is contained in:
Ayobami
+1168
-1032
File diff suppressed because it is too large
Load Diff
@@ -23,7 +23,9 @@ export default function CustomerVerificationPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const schema = yup.object({
|
||||
expiry_date: yup.string().test("is-not-in-past", "Not a valid date", (val) => {
|
||||
expiry_date: yup
|
||||
.string()
|
||||
.test("is-not-in-past", "Not a valid date", (val) => {
|
||||
if (val == "") return false;
|
||||
const date = new Date(val);
|
||||
return date.setDate(date.getDate() - 1) > new Date();
|
||||
@@ -35,14 +37,18 @@ export default function CustomerVerificationPage() {
|
||||
register,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useForm({ defaultValues: { selectedType: "Driver's License" }, resolver: yupResolver(schema) });
|
||||
} = useForm({
|
||||
defaultValues: { selectedType: "Driver's License" },
|
||||
resolver: yupResolver(schema),
|
||||
});
|
||||
|
||||
const [frontImage, setFrontImage] = useState(null);
|
||||
const [backImage, setBackImage] = useState(null);
|
||||
const [passport, setPassport] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const { dispatch: globalDispatch, state: globalState } = useContext(GlobalContext);
|
||||
const { dispatch: globalDispatch, state: globalState } =
|
||||
useContext(GlobalContext);
|
||||
const { dispatch: authDispatch } = useContext(AuthContext);
|
||||
|
||||
const [verified, setVerified] = useState(false);
|
||||
@@ -51,7 +57,8 @@ export default function CustomerVerificationPage() {
|
||||
const selectedType = watch("selectedType");
|
||||
|
||||
const isDisabled = () => {
|
||||
if (selectedType == "Driver's License" && frontImage && backImage) return false;
|
||||
if (selectedType == "Driver's License" && frontImage && backImage)
|
||||
return false;
|
||||
if (selectedType == "Passport" && passport) return false;
|
||||
return true;
|
||||
};
|
||||
@@ -88,7 +95,7 @@ export default function CustomerVerificationPage() {
|
||||
image_back: data.backImage ?? null,
|
||||
user_id: Number(localStorage.getItem("user")),
|
||||
},
|
||||
globalState.user.verificationId ? "PUT" : "POST",
|
||||
globalState.user.verificationId ? "PUT" : "POST"
|
||||
);
|
||||
|
||||
// create notification
|
||||
@@ -103,7 +110,7 @@ export default function CustomerVerificationPage() {
|
||||
type: NOTIFICATION_TYPE.NEW_ID_VERIFICATION,
|
||||
status: NOTIFICATION_STATUS.NOT_ADDRESSED,
|
||||
},
|
||||
"POST",
|
||||
"POST"
|
||||
);
|
||||
|
||||
setVerified(true);
|
||||
@@ -130,66 +137,67 @@ export default function CustomerVerificationPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="pb-16 normal-case">
|
||||
<div className='pb-16 normal-case'>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
type='button'
|
||||
onClick={() => navigate(-1)}
|
||||
className="mr-2 mb-2 inline-flex items-center py-2.5 pr-5 text-center text-sm font-semibold"
|
||||
className='mb-2 mr-2 inline-flex items-center py-2.5 pr-5 text-center text-sm font-semibold'
|
||||
>
|
||||
<Icon
|
||||
type="arrow"
|
||||
variant="narrow-left"
|
||||
className="h-4 w-4 stroke-[#667085]"
|
||||
type='arrow'
|
||||
variant='narrow-left'
|
||||
className='h-4 w-4 stroke-[#667085]'
|
||||
/>{" "}
|
||||
<span className="ml-2">Back</span>
|
||||
<span className='ml-2'>Back</span>
|
||||
</button>
|
||||
</div>
|
||||
<h1 className="mb-4 text-2xl font-semibold md:text-5xl">Identity Verification</h1>
|
||||
<div className="mb-[32px] max-w-3xl rounded-lg border border-[#EAECF0] bg-[#F9FAFB] px-[24px] py-[16px]">
|
||||
<h3 className="text-lg flex items-center gap-2 font-semibold">
|
||||
<h1 className='mb-4 text-2xl font-semibold md:text-5xl'>
|
||||
Identity Verification
|
||||
</h1>
|
||||
<div className='mb-[32px] max-w-3xl rounded-lg border border-[#EAECF0] bg-[#F9FAFB] px-[24px] py-[16px]'>
|
||||
<h3 className='text-lg flex items-center gap-2 font-semibold'>
|
||||
<SecurityIcon />
|
||||
<span>Safety is our priority</span>
|
||||
</h3>
|
||||
<p className="ml-5 max-w-xl text-sm leading-relaxed">
|
||||
To establish trust for all parties we verify both hosts and guests. Your personal information is secure. We will never share your information with third parties.
|
||||
<p className='ml-5 max-w-xl text-sm leading-relaxed'>
|
||||
To establish trust for all parties we verify both hosts and guests.
|
||||
Your personal information is secure. We will never share your
|
||||
information with third parties.
|
||||
</p>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<p className="mb-2 font-semibold">Verification Documents.</p>
|
||||
<div data-tour="fifth-step" className="fifth-step radio-container mb-8 flex justify-between md:max-w-lg">
|
||||
<label
|
||||
htmlFor="driversLicense"
|
||||
className="cursor-pointer"
|
||||
<p className='mb-2 font-semibold'>Verification Documents.</p>
|
||||
<div
|
||||
data-tour='sixth-step'
|
||||
className='sixth-step radio-container mb-8 flex justify-between md:max-w-lg'
|
||||
>
|
||||
<label htmlFor='driversLicense' className='cursor-pointer'>
|
||||
<input
|
||||
type="radio"
|
||||
id="driversLicense"
|
||||
type='radio'
|
||||
id='driversLicense'
|
||||
{...register("selectedType")}
|
||||
className="mr-2"
|
||||
className='mr-2'
|
||||
value="Driver's License"
|
||||
/>
|
||||
<span></span>
|
||||
Driver's License
|
||||
</label>
|
||||
<label
|
||||
htmlFor="passport"
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<label htmlFor='passport' className='cursor-pointer'>
|
||||
<input
|
||||
type="radio"
|
||||
id="passport"
|
||||
type='radio'
|
||||
id='passport'
|
||||
{...register("selectedType")}
|
||||
className="mr-2"
|
||||
value="Passport"
|
||||
className='mr-2'
|
||||
value='Passport'
|
||||
/>
|
||||
<span></span>
|
||||
Passport
|
||||
</label>
|
||||
</div>
|
||||
<div className="text-[#667085]">
|
||||
<div className='text-[#667085]'>
|
||||
{selectedType == "Driver's License" ? (
|
||||
<div className="flex flex-col items-center gap-[16px] md:flex-row">
|
||||
<div className='flex flex-col items-center gap-[16px] md:flex-row'>
|
||||
<FileUploader
|
||||
multiple={false}
|
||||
handleChange={(file) => {
|
||||
@@ -197,18 +205,21 @@ export default function CustomerVerificationPage() {
|
||||
}}
|
||||
types={["SVG", "JPEG", "PNG", "GIF", "JPG"]}
|
||||
>
|
||||
<div className="flex h-[130px] w-full max-w-full cursor-pointer flex-col items-center justify-center gap-[12px] border-2 border-dashed border-[#D0D5DD] text-sm md:w-[333px]">
|
||||
<div className='flex h-[130px] w-full max-w-full cursor-pointer flex-col items-center justify-center gap-[12px] border-2 border-dashed border-[#D0D5DD] text-sm md:w-[333px]'>
|
||||
{frontImage?.name ? (
|
||||
<img
|
||||
src={readImage(frontImage, "front-preview")}
|
||||
id="front-preview"
|
||||
className="h-full w-full rounded-sm object-cover"
|
||||
id='front-preview'
|
||||
className='h-full w-full rounded-sm object-cover'
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<h4 className="text-xl font-semibold">Front</h4>
|
||||
<p className="px-[20px]">
|
||||
<strong className="font-semibold underline">Click to upload</strong> or drag and drop SVG, PNG, JPG or GIF (max. 800x400px)
|
||||
<h4 className='text-xl font-semibold'>Front</h4>
|
||||
<p className='px-[20px]'>
|
||||
<strong className='font-semibold underline'>
|
||||
Click to upload
|
||||
</strong>{" "}
|
||||
or drag and drop SVG, PNG, JPG or GIF (max. 800x400px)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
@@ -221,18 +232,21 @@ export default function CustomerVerificationPage() {
|
||||
}}
|
||||
types={["SVG", "JPEG", "PNG", "GIF", "JPG"]}
|
||||
>
|
||||
<div className="flex h-[130px] w-full max-w-full cursor-pointer flex-col items-center justify-center gap-[12px] border-2 border-dashed border-[#D0D5DD] text-sm md:w-[333px]">
|
||||
<div className='flex h-[130px] w-full max-w-full cursor-pointer flex-col items-center justify-center gap-[12px] border-2 border-dashed border-[#D0D5DD] text-sm md:w-[333px]'>
|
||||
{backImage?.name ? (
|
||||
<img
|
||||
src={readImage(backImage, "back-preview")}
|
||||
id="back-preview"
|
||||
className="h-full w-full rounded-sm object-cover"
|
||||
id='back-preview'
|
||||
className='h-full w-full rounded-sm object-cover'
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<h4 className="text-xl font-semibold">Back</h4>
|
||||
<p className="px-[20px]">
|
||||
<strong className="font-semibold underline">Click to upload</strong> or drag and drop SVG, PNG, JPG or GIF (max. 800x400px)
|
||||
<h4 className='text-xl font-semibold'>Back</h4>
|
||||
<p className='px-[20px]'>
|
||||
<strong className='font-semibold underline'>
|
||||
Click to upload
|
||||
</strong>{" "}
|
||||
or drag and drop SVG, PNG, JPG or GIF (max. 800x400px)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
@@ -247,18 +261,23 @@ export default function CustomerVerificationPage() {
|
||||
}}
|
||||
types={["SVG", "JPEG", "PNG", "GIF", "JPG"]}
|
||||
>
|
||||
<div className="flex h-[130px] w-full max-w-full cursor-pointer flex-col items-center justify-center gap-[12px] border-2 border-dashed border-[#D0D5DD] text-sm md:w-[333px]">
|
||||
<div className='flex h-[130px] w-full max-w-full cursor-pointer flex-col items-center justify-center gap-[12px] border-2 border-dashed border-[#D0D5DD] text-sm md:w-[333px]'>
|
||||
{passport?.name ? (
|
||||
<img
|
||||
src={readImage(passport, "passport-preview")}
|
||||
id="passport-preview"
|
||||
className="h-full w-full rounded-sm object-cover"
|
||||
id='passport-preview'
|
||||
className='h-full w-full rounded-sm object-cover'
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<h4 className="text-xl font-semibold">Passport page with photo</h4>
|
||||
<p className="px-[20px]">
|
||||
<strong className="font-semibold underline">Click to upload</strong> or drag and drop SVG, PNG, JPG or GIF (max. 800x400px)
|
||||
<h4 className='text-xl font-semibold'>
|
||||
Passport page with photo
|
||||
</h4>
|
||||
<p className='px-[20px]'>
|
||||
<strong className='font-semibold underline'>
|
||||
Click to upload
|
||||
</strong>{" "}
|
||||
or drag and drop SVG, PNG, JPG or GIF (max. 800x400px)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
@@ -266,43 +285,61 @@ export default function CustomerVerificationPage() {
|
||||
</FileUploader>
|
||||
)}
|
||||
</div>
|
||||
<div className="my-8 max-w-lg">
|
||||
<div className='my-8 max-w-lg'>
|
||||
<label
|
||||
className="mb-2 block text-sm font-bold text-gray-700"
|
||||
htmlFor="expiry_date"
|
||||
className='mb-2 block text-sm font-bold text-gray-700'
|
||||
htmlFor='expiry_date'
|
||||
>
|
||||
Expiration Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
placeholder="expiry_date"
|
||||
type='date'
|
||||
placeholder='expiry_date'
|
||||
{...register("expiry_date")}
|
||||
className={`focus:shadow-outline !min-h-[40px] w-full rounded border py-2 px-3 leading-tight text-gray-700 focus:outline-none`}
|
||||
className={`focus:shadow-outline !min-h-[40px] w-full rounded border px-3 py-2 leading-tight text-gray-700 focus:outline-none`}
|
||||
/>
|
||||
{errors.expiry_date?.message && <p className="my-3 rounded-md border border-[#C42945] bg-white py-2 px-3 text-center text-sm normal-case text-[#C42945]">{errors.expiry_date?.message}</p>}
|
||||
{errors.expiry_date?.message && (
|
||||
<p className='my-3 rounded-md border border-[#C42945] bg-white px-3 py-2 text-center text-sm normal-case text-[#C42945]'>
|
||||
{errors.expiry_date?.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<LoadingButton
|
||||
loading={loading}
|
||||
type="submit"
|
||||
className={`login-btn-gradient rounded tracking-wide text-white outline-none focus:outline-none ${loading ? "py-1" : "py-2"} mt-8 w-[333px] max-w-full`}
|
||||
type='submit'
|
||||
className={`login-btn-gradient submit-doc-btn rounded tracking-wide text-white outline-none focus:outline-none ${
|
||||
loading ? "py-1" : "py-2"
|
||||
} mt-8 w-[333px] max-w-full`}
|
||||
disabled={isDisabled()}
|
||||
data-tour='submit-doc-btn'
|
||||
>
|
||||
Submit Document
|
||||
</LoadingButton>
|
||||
</form>
|
||||
<div className={showVerified ? "popup-container flex items-center justify-center normal-case" : "hidden"}>
|
||||
<div
|
||||
className={`${verified ? "pop-in" : "pop-out"} w-[510px] max-w-[80%] rounded-lg bg-white p-5 px-3 md:px-5`}
|
||||
className={
|
||||
showVerified
|
||||
? "popup-container flex items-center justify-center normal-case"
|
||||
: "hidden"
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`${
|
||||
verified ? "pop-in" : "pop-out"
|
||||
} w-[510px] max-w-[80%] rounded-lg bg-white p-5 px-3 md:px-5`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h2 className="mb-4 text-3xl font-semibold">
|
||||
<h2 className='mb-4 text-3xl font-semibold'>
|
||||
<GreenCheckIcon />
|
||||
Document received
|
||||
</h2>
|
||||
<p className="mb-4 text-sm text-gray-500">Once we verify your document you will receive an email. It usually takes up to 24 hours.</p>
|
||||
<p className='mb-4 text-sm text-gray-500'>
|
||||
Once we verify your document you will receive an email. It usually
|
||||
takes up to 24 hours.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="login-btn-gradient mt-4 w-full rounded py-2 tracking-wide text-white outline-none focus:outline-none"
|
||||
type='button'
|
||||
className='login-btn-gradient mt-4 w-full rounded py-2 tracking-wide text-white outline-none focus:outline-none'
|
||||
onClick={() => {
|
||||
setVerified(false);
|
||||
navigate(searchParams.get("redirect_uri") ?? -1);
|
||||
|
||||
@@ -23,7 +23,9 @@ export default function HostVerificationPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const schema = yup.object({
|
||||
expiry_date: yup.string().test("is-not-in-past", "Not a valid date", (val) => {
|
||||
expiry_date: yup
|
||||
.string()
|
||||
.test("is-not-in-past", "Not a valid date", (val) => {
|
||||
if (val == "") return false;
|
||||
const date = new Date(val);
|
||||
return date.setDate(date.getDate() - 1) > new Date();
|
||||
@@ -35,14 +37,18 @@ export default function HostVerificationPage() {
|
||||
register,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useForm({ defaultValues: { selectedType: "Driver's License" }, resolver: yupResolver(schema) });
|
||||
} = useForm({
|
||||
defaultValues: { selectedType: "Driver's License" },
|
||||
resolver: yupResolver(schema),
|
||||
});
|
||||
|
||||
const [frontImage, setFrontImage] = useState(null);
|
||||
const [backImage, setBackImage] = useState(null);
|
||||
const [passport, setPassport] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const { dispatch: globalDispatch, state: globalState } = useContext(GlobalContext);
|
||||
const { dispatch: globalDispatch, state: globalState } =
|
||||
useContext(GlobalContext);
|
||||
const { dispatch: authDispatch } = useContext(AuthContext);
|
||||
|
||||
const [verified, setVerified] = useState(false);
|
||||
@@ -51,7 +57,8 @@ export default function HostVerificationPage() {
|
||||
const selectedType = watch("selectedType");
|
||||
|
||||
const isDisabled = () => {
|
||||
if (selectedType == "Driver's License" && frontImage && backImage) return false;
|
||||
if (selectedType == "Driver's License" && frontImage && backImage)
|
||||
return false;
|
||||
if (selectedType == "Passport" && passport) return false;
|
||||
return true;
|
||||
};
|
||||
@@ -88,7 +95,7 @@ export default function HostVerificationPage() {
|
||||
image_back: data.backImage ?? null,
|
||||
user_id: Number(localStorage.getItem("user")),
|
||||
},
|
||||
globalState.user.verificationId ? "PUT" : "POST",
|
||||
globalState.user.verificationId ? "PUT" : "POST"
|
||||
);
|
||||
|
||||
// create notification
|
||||
@@ -103,7 +110,7 @@ export default function HostVerificationPage() {
|
||||
type: NOTIFICATION_TYPE.NEW_ID_VERIFICATION,
|
||||
status: NOTIFICATION_STATUS.NOT_ADDRESSED,
|
||||
},
|
||||
"POST",
|
||||
"POST"
|
||||
);
|
||||
|
||||
setVerified(true);
|
||||
@@ -130,66 +137,69 @@ export default function HostVerificationPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="pb-16 normal-case">
|
||||
<div className='pb-16 normal-case'>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
type='button'
|
||||
onClick={() => navigate(-1)}
|
||||
className="mr-2 mb-2 inline-flex items-center py-2.5 pr-5 text-center text-sm font-semibold"
|
||||
className='mb-2 mr-2 inline-flex items-center py-2.5 pr-5 text-center text-sm font-semibold'
|
||||
>
|
||||
<Icon
|
||||
type="arrow"
|
||||
variant="narrow-left"
|
||||
className="h-4 w-4 stroke-[#667085]"
|
||||
type='arrow'
|
||||
variant='narrow-left'
|
||||
className='h-4 w-4 stroke-[#667085]'
|
||||
/>{" "}
|
||||
<span className="ml-2">Back</span>
|
||||
<span className='ml-2'>Back</span>
|
||||
</button>
|
||||
</div>
|
||||
<h1 className="mb-4 text-2xl font-semibold md:text-5xl">Identity Verification</h1>
|
||||
<div className="mb-[32px] max-w-3xl rounded-lg border border-[#EAECF0] bg-[#F9FAFB] px-[24px] py-[16px]">
|
||||
<h3 className="text-lg flex items-center gap-2 font-semibold">
|
||||
<h1 className='mb-4 text-2xl font-semibold md:text-5xl'>
|
||||
Identity Verification
|
||||
</h1>
|
||||
<div className='mb-[32px] max-w-3xl rounded-lg border border-[#EAECF0] bg-[#F9FAFB] px-[24px] py-[16px]'>
|
||||
<h3 className='text-lg flex items-center gap-2 font-semibold'>
|
||||
<SecurityIcon />
|
||||
<span>Safety is our priority</span>
|
||||
</h3>
|
||||
<p className="ml-5 max-w-xl text-sm leading-relaxed">
|
||||
To establish trust for all parties we verify both hosts and guests. Your personal information is secure. We will never share your information with third parties.
|
||||
<p className='ml-5 max-w-xl text-sm leading-relaxed'>
|
||||
To establish trust for all parties we verify both hosts and guests.
|
||||
Your personal information is secure. We will never share your
|
||||
information with third parties.
|
||||
</p>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<p className="mb-2 font-semibold">Explain what document(s) are allowed.</p>
|
||||
<div data-tour="fifth-step" className="radio-container mb-8 flex justify-between md:max-w-lg">
|
||||
<label
|
||||
htmlFor="driversLicense"
|
||||
className="cursor-pointer"
|
||||
<p className='mb-2 font-semibold'>
|
||||
Explain what document(s) are allowed.
|
||||
</p>
|
||||
<div
|
||||
data-tour='sixth-step'
|
||||
className='radio-container sixth-step mb-8 flex justify-between md:max-w-lg'
|
||||
>
|
||||
<label htmlFor='driversLicense' className='cursor-pointer'>
|
||||
<input
|
||||
type="radio"
|
||||
id="driversLicense"
|
||||
type='radio'
|
||||
id='driversLicense'
|
||||
{...register("selectedType")}
|
||||
className="mr-2"
|
||||
className='mr-2'
|
||||
value="Driver's License"
|
||||
/>
|
||||
<span></span>
|
||||
Driver's License
|
||||
</label>
|
||||
<label
|
||||
htmlFor="passport"
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<label htmlFor='passport' className='cursor-pointer'>
|
||||
<input
|
||||
type="radio"
|
||||
id="passport"
|
||||
type='radio'
|
||||
id='passport'
|
||||
{...register("selectedType")}
|
||||
className="mr-2"
|
||||
value="Passport"
|
||||
className='mr-2'
|
||||
value='Passport'
|
||||
/>
|
||||
<span></span>
|
||||
Passport
|
||||
</label>
|
||||
</div>
|
||||
<div className="sixth-step text-[#667085]">
|
||||
<div className='text-[#667085]'>
|
||||
{selectedType == "Driver's License" ? (
|
||||
<div className="flex flex-col items-center gap-[16px] md:flex-row">
|
||||
<div className='flex flex-col items-center gap-[16px] md:flex-row'>
|
||||
<FileUploader
|
||||
multiple={false}
|
||||
handleChange={(file) => {
|
||||
@@ -197,18 +207,21 @@ export default function HostVerificationPage() {
|
||||
}}
|
||||
types={["SVG", "JPEG", "PNG", "GIF", "JPG"]}
|
||||
>
|
||||
<div className="flex h-[130px] w-full max-w-full cursor-pointer flex-col items-center justify-center gap-[12px] border-2 border-dashed border-[#D0D5DD] text-sm md:w-[333px]">
|
||||
<div className='flex h-[130px] w-full max-w-full cursor-pointer flex-col items-center justify-center gap-[12px] border-2 border-dashed border-[#D0D5DD] text-sm md:w-[333px]'>
|
||||
{frontImage?.name ? (
|
||||
<img
|
||||
src={readImage(frontImage, "front-preview")}
|
||||
id="front-preview"
|
||||
className="h-full w-full rounded-sm object-cover"
|
||||
id='front-preview'
|
||||
className='h-full w-full rounded-sm object-cover'
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<h4 className="text-xl font-semibold">Front</h4>
|
||||
<p className="px-[20px]">
|
||||
<strong className="font-semibold underline">Click to upload</strong> or drag and drop SVG, PNG, JPG or GIF (max. 800x400px)
|
||||
<h4 className='text-xl font-semibold'>Front</h4>
|
||||
<p className='px-[20px]'>
|
||||
<strong className='font-semibold underline'>
|
||||
Click to upload
|
||||
</strong>{" "}
|
||||
or drag and drop SVG, PNG, JPG or GIF (max. 800x400px)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
@@ -221,18 +234,21 @@ export default function HostVerificationPage() {
|
||||
}}
|
||||
types={["SVG", "JPEG", "PNG", "GIF", "JPG"]}
|
||||
>
|
||||
<div className="flex h-[130px] w-full max-w-full cursor-pointer flex-col items-center justify-center gap-[12px] border-2 border-dashed border-[#D0D5DD] text-sm md:w-[333px]">
|
||||
<div className='flex h-[130px] w-full max-w-full cursor-pointer flex-col items-center justify-center gap-[12px] border-2 border-dashed border-[#D0D5DD] text-sm md:w-[333px]'>
|
||||
{backImage?.name ? (
|
||||
<img
|
||||
src={readImage(backImage, "back-preview")}
|
||||
id="back-preview"
|
||||
className="h-full w-full rounded-sm object-cover"
|
||||
id='back-preview'
|
||||
className='h-full w-full rounded-sm object-cover'
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<h4 className="text-xl font-semibold">Back</h4>
|
||||
<p className="px-[20px]">
|
||||
<strong className="font-semibold underline">Click to upload</strong> or drag and drop SVG, PNG, JPG or GIF (max. 800x400px)
|
||||
<h4 className='text-xl font-semibold'>Back</h4>
|
||||
<p className='px-[20px]'>
|
||||
<strong className='font-semibold underline'>
|
||||
Click to upload
|
||||
</strong>{" "}
|
||||
or drag and drop SVG, PNG, JPG or GIF (max. 800x400px)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
@@ -247,18 +263,23 @@ export default function HostVerificationPage() {
|
||||
}}
|
||||
types={["SVG", "JPEG", "PNG", "GIF", "JPG"]}
|
||||
>
|
||||
<div className="flex h-[130px] w-full max-w-full cursor-pointer flex-col items-center justify-center gap-[12px] border-2 border-dashed border-[#D0D5DD] text-sm md:w-[333px]">
|
||||
<div className='flex h-[130px] w-full max-w-full cursor-pointer flex-col items-center justify-center gap-[12px] border-2 border-dashed border-[#D0D5DD] text-sm md:w-[333px]'>
|
||||
{passport?.name ? (
|
||||
<img
|
||||
src={readImage(passport, "passport-preview")}
|
||||
id="passport-preview"
|
||||
className="h-full w-full rounded-sm object-cover"
|
||||
id='passport-preview'
|
||||
className='h-full w-full rounded-sm object-cover'
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<h4 className="text-xl font-semibold">Passport page with photo</h4>
|
||||
<p className="px-[20px]">
|
||||
<strong className="font-semibold underline">Click to upload</strong> or drag and drop SVG, PNG, JPG or GIF (max. 800x400px)
|
||||
<h4 className='text-xl font-semibold'>
|
||||
Passport page with photo
|
||||
</h4>
|
||||
<p className='px-[20px]'>
|
||||
<strong className='font-semibold underline'>
|
||||
Click to upload
|
||||
</strong>{" "}
|
||||
or drag and drop SVG, PNG, JPG or GIF (max. 800x400px)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
@@ -266,43 +287,61 @@ export default function HostVerificationPage() {
|
||||
</FileUploader>
|
||||
)}
|
||||
</div>
|
||||
<div className="my-8 max-w-lg">
|
||||
<div className='my-8 max-w-lg'>
|
||||
<label
|
||||
className="mb-2 block text-sm font-bold text-gray-700"
|
||||
htmlFor="expiry_date"
|
||||
className='mb-2 block text-sm font-bold text-gray-700'
|
||||
htmlFor='expiry_date'
|
||||
>
|
||||
Expiry Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
placeholder="expiry_date"
|
||||
type='date'
|
||||
placeholder='expiry_date'
|
||||
{...register("expiry_date")}
|
||||
className={`focus:shadow-outline !min-h-[40px] w-full rounded border py-2 px-3 leading-tight text-gray-700 focus:outline-none`}
|
||||
className={`focus:shadow-outline !min-h-[40px] w-full rounded border px-3 py-2 leading-tight text-gray-700 focus:outline-none`}
|
||||
/>
|
||||
{errors.expiry_date?.message && <p className="my-3 rounded-md border border-[#C42945] bg-white py-2 px-3 text-center text-sm normal-case text-[#C42945]">{errors.expiry_date?.message}</p>}
|
||||
{errors.expiry_date?.message && (
|
||||
<p className='my-3 rounded-md border border-[#C42945] bg-white px-3 py-2 text-center text-sm normal-case text-[#C42945]'>
|
||||
{errors.expiry_date?.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<LoadingButton
|
||||
loading={loading}
|
||||
type="submit"
|
||||
className={`login-btn-gradient rounded tracking-wide text-white outline-none focus:outline-none ${loading ? "py-1" : "py-2"} mt-8 w-[333px] max-w-full`}
|
||||
type='submit'
|
||||
className={`login-btn-gradient submit-doc-btn rounded tracking-wide text-white outline-none focus:outline-none ${
|
||||
loading ? "py-1" : "py-2"
|
||||
} mt-8 w-[333px] max-w-full`}
|
||||
disabled={isDisabled()}
|
||||
data-tour='submit-doc-btn'
|
||||
>
|
||||
Submit Document
|
||||
</LoadingButton>
|
||||
</form>
|
||||
<div className={showVerified ? "popup-container flex items-center justify-center normal-case" : "hidden"}>
|
||||
<div
|
||||
className={`${verified ? "pop-in" : "pop-out"} w-[510px] max-w-[80%] rounded-lg bg-white p-5 px-3 md:px-5`}
|
||||
className={
|
||||
showVerified
|
||||
? "popup-container flex items-center justify-center normal-case"
|
||||
: "hidden"
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`${
|
||||
verified ? "pop-in" : "pop-out"
|
||||
} w-[510px] max-w-[80%] rounded-lg bg-white p-5 px-3 md:px-5`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h2 className="mb-4 text-3xl font-semibold">
|
||||
<h2 className='mb-4 text-3xl font-semibold'>
|
||||
<GreenCheckIcon />
|
||||
Document received
|
||||
</h2>
|
||||
<p className="mb-4 text-sm text-gray-500">Once we verify your document you will receive an email. It usually takes up to 24 hours.</p>
|
||||
<p className='mb-4 text-sm text-gray-500'>
|
||||
Once we verify your document you will receive an email. It usually
|
||||
takes up to 24 hours.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="login-btn-gradient mt-4 w-full rounded py-2 tracking-wide text-white outline-none focus:outline-none"
|
||||
type='button'
|
||||
className='login-btn-gradient mt-4 w-full rounded py-2 tracking-wide text-white outline-none focus:outline-none'
|
||||
onClick={() => {
|
||||
setVerified(false);
|
||||
navigate(searchParams.get("redirect_uri") ?? -1);
|
||||
|
||||
Reference in New Issue
Block a user