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