initial commit
This commit is contained in:
undefined
@@ -0,0 +1,464 @@
|
||||
import { AuthContext } from "@/authContext";
|
||||
import { LoadingButton } from "@/components/frontend";
|
||||
import DatePickerV2 from "@/components/frontend/DatePickerV2";
|
||||
import { GlobalContext } from "@/globalContext";
|
||||
import { callCustomAPI } from "@/utils/callCustomAPI";
|
||||
import { NOTIFICATION_STATUS, NOTIFICATION_TYPE } from "@/utils/constants";
|
||||
import MkdSDK from "@/utils/MkdSDK";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import moment from "moment/moment";
|
||||
import React, { useContext, useEffect, useState, useRef } from "react";
|
||||
import { FileUploader } from "react-drag-drop-files";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Navigate, useNavigate } from "react-router";
|
||||
import { Link } from "react-router-dom";
|
||||
import countries from "@/utils/countries.json";
|
||||
import * as yup from "yup";
|
||||
import CustomLocationAutoCompleteV2 from "@/components/CustomLocationAutoCompleteV2";
|
||||
import CustomComboBox from "@/components/CustomComboBox";
|
||||
|
||||
const readImage = (file, previewEl) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
document.getElementById(previewEl).src = event.target.result;
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
async function getFileFromUrl(url) {
|
||||
if (!url) return null;
|
||||
try {
|
||||
let response = await fetch(url);
|
||||
let data = await response.blob();
|
||||
let metadata = {
|
||||
type: "image/jpeg",
|
||||
};
|
||||
return new File([data], url.split("/").pop(), metadata);
|
||||
} catch (err) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default function BecomeAHostPage() {
|
||||
const initialDate = useRef(new Date());
|
||||
const { state: globalState, dispatch: globalDispatch } = useContext(GlobalContext);
|
||||
const { dispatch: authDispatch } = useContext(AuthContext);
|
||||
const [frontImage, setFrontImage] = useState(null);
|
||||
const [backImage, setBackImage] = useState(null);
|
||||
const [passport, setPassport] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [imageErr, setImageErr] = useState("");
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const schema = yup.object({
|
||||
// dob: yup
|
||||
// .string()
|
||||
// .required("This field is required")
|
||||
// .test("is-not-in-future", "Not a valid date", (val) => {
|
||||
// if (val == "") return true;
|
||||
// const date = new Date(val);
|
||||
// return date.setDate(date.getDate() + 1) < new Date();
|
||||
// }),
|
||||
expiry_date: yup
|
||||
.string()
|
||||
.required("This field is required")
|
||||
.test("is-not-in-past", "Invalid expiry date", (val) => {
|
||||
const date = new Date(val);
|
||||
return date.setDate(date.getDate() - 1) > new Date();
|
||||
}),
|
||||
city: yup.string().required("This field is required"),
|
||||
country: yup.string().required("This field is required"),
|
||||
selectedType: yup.string().required("This field is required"),
|
||||
about: yup.string().required("This field is required"),
|
||||
});
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
register,
|
||||
setValue,
|
||||
control,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
dob: globalState.user.dob ? moment(globalState.user.dob).format("yyyy-MM-DD") : "",
|
||||
expiry_date: globalState.user.verificationExpiry ? moment(globalState.user.verificationExpiry).format("yyyy-MM-DD") : "",
|
||||
city: globalState.user.city || "",
|
||||
country: globalState.user.country || "",
|
||||
selectedType: globalState.user.verificationType || "Driver's License",
|
||||
about: globalState.user.about || "",
|
||||
},
|
||||
resolver: yupResolver(schema),
|
||||
});
|
||||
const sdk = new MkdSDK();
|
||||
|
||||
const selectedType = watch("selectedType");
|
||||
|
||||
const handleImageUpload = async (file) => {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
try {
|
||||
const upload = await sdk.uploadImage(formData);
|
||||
return upload.url;
|
||||
} catch (err) {
|
||||
console.log("err", err);
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
async function onSubmit(data) {
|
||||
// check if images are uploaded
|
||||
if (selectedType == "Driver's License" && (!frontImage || !backImage)) {
|
||||
setImageErr("Please upload required documents");
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedType == "Passport" && !passport) {
|
||||
setImageErr("Please upload required documents");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("submitting", data);
|
||||
setLoading(true);
|
||||
try {
|
||||
// edit user
|
||||
await callCustomAPI(
|
||||
"edit-self",
|
||||
"post",
|
||||
{
|
||||
user: { role: ["superadmin", "admin"].includes(globalState.user.role) ? undefined : "host" },
|
||||
profile: {
|
||||
city: data.city,
|
||||
country: data.country,
|
||||
// dob: isSameDay(data.dob, initialDate.current) ? undefined : moment(data.dob).format("yyyy-MM-DD"),
|
||||
about: data.about,
|
||||
getting_started: 0,
|
||||
},
|
||||
},
|
||||
"",
|
||||
);
|
||||
// submit id verification
|
||||
if (selectedType == "Driver's License") {
|
||||
data.image_front = await handleImageUpload(frontImage);
|
||||
data.image_back = await handleImageUpload(backImage);
|
||||
} else {
|
||||
data.image_front = await handleImageUpload(passport);
|
||||
}
|
||||
|
||||
sdk.setTable("id_verification");
|
||||
const result = await sdk.callRestAPI(
|
||||
{
|
||||
id: globalState.user.verificationId,
|
||||
type: selectedType,
|
||||
expiry_date: data.expiry_date,
|
||||
status: 0,
|
||||
image_front: data.image_front,
|
||||
image_back: data.image_back,
|
||||
user_id: Number(localStorage.getItem("user")),
|
||||
},
|
||||
globalState.user.verificationId ? "PUT" : "POST",
|
||||
);
|
||||
|
||||
// create notification
|
||||
sdk.setTable("notification");
|
||||
await sdk.callRestAPI(
|
||||
{
|
||||
user_id: Number(localStorage.getItem("user")),
|
||||
actor_id: null,
|
||||
action_id: result.message,
|
||||
notification_time: new Date().toISOString().split(".")[0],
|
||||
message: "New ID Verification submitted",
|
||||
type: NOTIFICATION_TYPE.NEW_ID_VERIFICATION,
|
||||
status: NOTIFICATION_STATUS.NOT_ADDRESSED,
|
||||
},
|
||||
"POST",
|
||||
);
|
||||
|
||||
globalDispatch({
|
||||
type: "SHOW_CONFIRMATION",
|
||||
payload: {
|
||||
heading: "Success",
|
||||
message: `Host account created, please re login to your account`,
|
||||
btn: "Ok got it",
|
||||
onClose: () => {
|
||||
sdk.logout();
|
||||
authDispatch({ type: "LOGOUT" });
|
||||
navigate("/login");
|
||||
},
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
globalDispatch({
|
||||
type: "SHOW_ERROR",
|
||||
payload: {
|
||||
heading: "Operation failed",
|
||||
message: err.message,
|
||||
},
|
||||
});
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const front = await getFileFromUrl(globalState.user.verificationImageFront);
|
||||
const back = await getFileFromUrl(globalState.user.verificationImageBack);
|
||||
if (globalState.user.verificationType == "Passport") {
|
||||
setPassport(front);
|
||||
} else {
|
||||
setFrontImage(front);
|
||||
setBackImage(back);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
if (!globalState.user.id) return <Navigate to={"/"} />;
|
||||
|
||||
return (
|
||||
<div className="mt-[120px] normal-case">
|
||||
<form
|
||||
className="mx-auto w-full max-w-5xl p-5"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<h1 className="mb-2 text-5xl">Become A Host</h1>
|
||||
<p className="mb-8">Gain the ability to rent your spaces by giving us some additional information</p>
|
||||
|
||||
<h3 className="mb-8 text-2xl font-semibold">Location</h3>
|
||||
<div className="mb-16 max-w-lg">
|
||||
<div className="mb-8">
|
||||
<label
|
||||
className="mb-2 block text-sm font-bold text-gray-700"
|
||||
htmlFor="city"
|
||||
>
|
||||
City
|
||||
</label>
|
||||
<CustomLocationAutoCompleteV2
|
||||
control={control}
|
||||
setValue={(val) => setValue("city", val)}
|
||||
name="city"
|
||||
className={`w-full rounded border py-2 px-3 leading-tight text-gray-700 ${errors.city?.message ? "border-red-500 focus:outline-red-500" : "focus-within:outline-primary"}`}
|
||||
placeholder=""
|
||||
hideIcons
|
||||
suggestionType={["(cities)"]}
|
||||
/>
|
||||
|
||||
{/* <div className="flex">
|
||||
<input
|
||||
placeholder=""
|
||||
type="text"
|
||||
{...register("city")}
|
||||
className={`focus:shadow-outline w-full rounded rounded-l-none border py-2 px-3 leading-tight text-gray-700 focus:outline-none ${errors.city?.message ? "border-red-600" : ""}`}
|
||||
/>
|
||||
</div> */}
|
||||
<p className="mt-2 text-sm italic text-red-600 empty:mt-0">{errors.city?.message}</p>
|
||||
</div>
|
||||
<div className="mb-8">
|
||||
<label
|
||||
className="mb-2 block text-sm font-bold text-gray-700"
|
||||
htmlFor="country"
|
||||
>
|
||||
Country
|
||||
</label>
|
||||
<CustomComboBox
|
||||
control={control}
|
||||
name="country"
|
||||
labelField="name"
|
||||
valueField="name"
|
||||
setValue={(val) => setValue("country", val)}
|
||||
items={countries}
|
||||
containerClassName="relative w-full"
|
||||
className={`w-full truncate border py-2 px-3 text-black ${errors.country?.message ? "border-red-500 focus:outline-red-500" : "focus-within:outline-primary"}`}
|
||||
placeholder=""
|
||||
/>
|
||||
{/* <div className="flex">
|
||||
<input
|
||||
placeholder=""
|
||||
type="text"
|
||||
{...register("country")}
|
||||
className={`focus:shadow-outline w-full rounded rounded-l-none border py-2 px-3 leading-tight text-gray-700 focus:outline-none ${errors.country?.message ? "border-red-600" : ""}`}
|
||||
/>
|
||||
</div> */}
|
||||
<p className="mt-2 text-sm italic text-red-600 empty:mt-0">{errors.country?.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mb-8 text-2xl font-semibold">Profile Information</h3>
|
||||
<div className={`mb-16 max-w-lg ${globalState.user.dob ? "hidden" : "hidden"}`}>
|
||||
<label
|
||||
className="mb-2 block text-sm font-bold text-gray-700"
|
||||
htmlFor="dob"
|
||||
>
|
||||
Date of birth <span className="ml-4 text-sm font-normal italic text-red-500">{errors.dob?.message}</span>
|
||||
</label>
|
||||
<DatePickerV2
|
||||
control={control}
|
||||
name="dob"
|
||||
min={new Date("1950-01-01")}
|
||||
max={initialDate.current}
|
||||
setValue={(v) => setValue("dob", v)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-16 max-w-lg">
|
||||
<label
|
||||
className="mb-2 block text-sm font-bold text-gray-700"
|
||||
htmlFor="about"
|
||||
>
|
||||
About
|
||||
</label>
|
||||
<textarea
|
||||
className={`focus:shadow-outline w-full rounded rounded-l-none border-2 py-2 px-3 leading-tight text-gray-700 focus:outline-none ${errors.about?.message ? "border-red-600" : ""}`}
|
||||
placeholder="Tell us about yourself"
|
||||
{...register("about")}
|
||||
cols="30"
|
||||
rows="10"
|
||||
></textarea>
|
||||
<p className="mt-2 text-sm italic text-red-600 empty:mt-0">{errors.about?.message}</p>
|
||||
</div>
|
||||
|
||||
<h3 className="mb-8 text-2xl font-semibold">Identity Verification</h3>
|
||||
<p className="mb-2 font-semibold">Explain what document(s) are allowed.</p>
|
||||
<div className="radio-container mb-8 flex max-w-lg justify-between">
|
||||
<label
|
||||
htmlFor="driversLicense"
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id="driversLicense"
|
||||
{...register("selectedType")}
|
||||
className="mr-2"
|
||||
value="Driver's License"
|
||||
/>
|
||||
<span></span>
|
||||
Driver's License
|
||||
</label>
|
||||
<label
|
||||
htmlFor="passport"
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id="passport"
|
||||
{...register("selectedType")}
|
||||
className="mr-2"
|
||||
value="Passport"
|
||||
/>
|
||||
<span></span>
|
||||
Passport
|
||||
</label>
|
||||
</div>
|
||||
<p className="mb-2 text-sm italic text-red-600 empty:mb-0">{imageErr}</p>
|
||||
<div className="mb-8 text-[#667085]">
|
||||
{selectedType == "Driver's License" ? (
|
||||
<div className="flex flex-col items-center gap-[16px] md:flex-row">
|
||||
<FileUploader
|
||||
multiple={false}
|
||||
handleChange={(file) => {
|
||||
setFrontImage(file);
|
||||
}}
|
||||
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]">
|
||||
{frontImage?.name ? (
|
||||
<img
|
||||
src={readImage(frontImage, "front-preview")}
|
||||
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)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</FileUploader>
|
||||
<FileUploader
|
||||
multiple={false}
|
||||
handleChange={(file) => {
|
||||
setBackImage(file);
|
||||
}}
|
||||
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]">
|
||||
{backImage?.name ? (
|
||||
<img
|
||||
src={readImage(backImage, "back-preview")}
|
||||
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)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</FileUploader>
|
||||
</div>
|
||||
) : (
|
||||
<FileUploader
|
||||
multiple={false}
|
||||
handleChange={(file) => {
|
||||
setPassport(file);
|
||||
}}
|
||||
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]">
|
||||
{passport?.name ? (
|
||||
<img
|
||||
src={readImage(passport, "passport-preview")}
|
||||
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)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</FileUploader>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-16 max-w-lg">
|
||||
<label
|
||||
className="mb-2 block text-sm font-bold text-gray-700"
|
||||
htmlFor="expiry_date"
|
||||
>
|
||||
Expiry date <span className="ml-4 text-sm font-normal italic text-red-500">{errors.expiry_date?.message}</span>
|
||||
</label>
|
||||
<DatePickerV2
|
||||
control={control}
|
||||
name="expiry_date"
|
||||
min={initialDate.current}
|
||||
max={new Date("2050-01-01")}
|
||||
setValue={(v) => setValue("expiry_date", v)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-16 flex gap-4">
|
||||
<Link
|
||||
to={-1}
|
||||
className="rounded border-2 border-gray-700 py-2 px-4 tracking-wide outline-none focus:outline-none"
|
||||
>
|
||||
Cancel
|
||||
</Link>
|
||||
<LoadingButton
|
||||
loading={loading}
|
||||
type="submit"
|
||||
className={`login-btn-gradient rounded tracking-wide text-white outline-none focus:outline-none ${loading ? "bg-opacity-50 py-1 px-8" : "py-2"} px-4`}
|
||||
>
|
||||
Continue
|
||||
</LoadingButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { AuthContext } from "@/authContext";
|
||||
import React, { useContext, useEffect } from "react";
|
||||
import { Navigate } from "react-router";
|
||||
|
||||
export default function CheckVerificationPage() {
|
||||
const { state: authState, dispatch: authDispatch } = useContext(AuthContext);
|
||||
|
||||
useEffect(() => {
|
||||
let timeout;
|
||||
|
||||
timeout = setTimeout(() => {
|
||||
authDispatch({ type: "DISALLOW_CHECK_VERIFICATION" });
|
||||
}, 10000);
|
||||
|
||||
return () => clearTimeout(timeout);
|
||||
}, []);
|
||||
|
||||
if (!authState.allowCheckVerification) return <Navigate to={"/login"} />;
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center normal-case">
|
||||
<div className="">
|
||||
<h1 className="text-4xl block text-center">Account Created successfully. Please check your email to verify your account</h1>
|
||||
<p className="text-center">You'll be redirected to login page shortly</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import React from "react";
|
||||
import { Outlet } from "react-router";
|
||||
import { Link, useSearchParams } from "react-router-dom";
|
||||
import Icon from "@/components/Icons";
|
||||
import { SignUpContextProvider } from "./signUpContext";
|
||||
|
||||
const PageWrapper = () => {
|
||||
return (
|
||||
<SignUpContextProvider>
|
||||
<div>
|
||||
<header className="absolute top-0 left-0 pt-4 md:pl-16 pl-6">
|
||||
<Link to="/">
|
||||
<Icon
|
||||
type="logo"
|
||||
fill="fill-[#101828]"
|
||||
/>
|
||||
</Link>
|
||||
</header>
|
||||
<div className="min-h-screen flex justify-center w-full">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
</SignUpContextProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageWrapper;
|
||||
@@ -0,0 +1,109 @@
|
||||
import React from 'react'
|
||||
import { GlobalContext } from "@/globalContext";
|
||||
import { callCustomAPI } from "@/utils/callCustomAPI";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { useEffect } from "react";
|
||||
import { useContext } from "react";
|
||||
import { useState } from "react";
|
||||
import { Fragment } from "react";
|
||||
import MkdSDK from "@/utils/MkdSDK";
|
||||
|
||||
const PrivacyAndPolicyModal = ({ isOpen, closeModal }) => {
|
||||
const [privacy, setPrivacy] = useState("");
|
||||
const { dispatch: globalDispatch } = useContext(GlobalContext);
|
||||
|
||||
async function fetchPrivacyPolicy() {
|
||||
globalDispatch({ type: "START_LOADING" });
|
||||
const sdk = new MkdSDK();
|
||||
sdk.setTable("cms");
|
||||
try {
|
||||
const result = await callCustomAPI("cms", "post", { payload: { content_key: "privacy_policy" }, limit: 1000, page: 1 }, "PAGINATE");
|
||||
|
||||
if (Array.isArray(result.list) && result.list.length > 0) {
|
||||
setPrivacy(result.list.find((stg) => stg.content_key == "privacy_policy")?.content_value);
|
||||
}
|
||||
} catch (err) {
|
||||
globalDispatch({
|
||||
type: "SHOW_ERROR",
|
||||
payload: {
|
||||
heading: "Cannot get Privacy policy",
|
||||
message: err.message,
|
||||
},
|
||||
});
|
||||
}
|
||||
globalDispatch({ type: "STOP_LOADING" });
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchPrivacyPolicy();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`${isOpen ? "flex" : "hidden"} fixed inset-0 items-center justify-center`}></div>
|
||||
|
||||
<Transition
|
||||
appear
|
||||
show={isOpen}
|
||||
as={Fragment}
|
||||
>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-10"
|
||||
onClose={closeModal}
|
||||
>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="w-full max-w-6xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-gray-900 flex justify-between items-center"
|
||||
>
|
||||
{" "}
|
||||
{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
className="py-2 border hover:bg-gray-200 active:bg-gray-300 duration-100 px-3 text-2xl font-normal rounded-full flex justify-end"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<article
|
||||
className="sun-editor-editable text-sm max-h-[600px] overflow-y-auto my-8"
|
||||
dangerouslySetInnerHTML={{ __html: privacy }}
|
||||
></article>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default PrivacyAndPolicyModal
|
||||
@@ -0,0 +1,247 @@
|
||||
import React from "react";
|
||||
import { Navigate, useNavigate } from "react-router";
|
||||
import { useSignUpContext } from "./signUpContext";
|
||||
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { useForm } from "react-hook-form";
|
||||
import * as yup from "yup";
|
||||
import { AuthContext } from "@/authContext";
|
||||
import MkdSDK from "@/utils/MkdSDK";
|
||||
import { Link } from "react-router-dom";
|
||||
import { callCustomAPI } from "@/utils/callCustomAPI";
|
||||
import { useRef } from "react";
|
||||
import { isSameDay } from "@/utils/date-time-utils";
|
||||
import moment from "moment/moment";
|
||||
import TermsAndConditionsModal from "./TermsAndConditionsModal";
|
||||
import DatePickerV2 from "@/components/frontend/DatePickerV2";
|
||||
import { LoadingButton } from "@/components/frontend";
|
||||
import PrivacyAndPolicyModal from "./PrivacyAndPolicyModal";
|
||||
|
||||
export default function SignUpDetailsForm() {
|
||||
const navigate = useNavigate();
|
||||
const { signUpData } = useSignUpContext();
|
||||
const role = signUpData.role;
|
||||
const { dispatch: authDispatch } = React.useContext(AuthContext);
|
||||
const [showPassword, setShowPassword] = React.useState(false);
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
const sdk = new MkdSDK();
|
||||
const [modalOpen, setModalOpen] = React.useState(false);
|
||||
const [privacyOpen, setPrivacyModalOpen] = React.useState(false);
|
||||
const initialDate = useRef(new Date());
|
||||
|
||||
function closeModal() {
|
||||
setModalOpen(false);
|
||||
}
|
||||
function closePrivacyModal() {
|
||||
setPrivacyModalOpen(false);
|
||||
}
|
||||
|
||||
const schema = yup.object({
|
||||
firstName: yup.string(),
|
||||
lastName: yup.string(),
|
||||
dob: yup.date(),
|
||||
password: yup.string()
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
setError,
|
||||
handleSubmit,
|
||||
trigger,
|
||||
watch,
|
||||
setValue,
|
||||
control,
|
||||
formState: { errors, dirtyFields },
|
||||
} = useForm({
|
||||
resolver: yupResolver(schema),
|
||||
defaultValues: {
|
||||
firstName: signUpData.firstName,
|
||||
lastName: signUpData.lastName,
|
||||
dob: initialDate.current,
|
||||
password: signUpData.password,
|
||||
},
|
||||
criteriaMode: "all",
|
||||
});
|
||||
|
||||
const data = watch();
|
||||
|
||||
async function onSubmit() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await sdk.register(signUpData.email, data.password, role);
|
||||
if (!result.error) {
|
||||
localStorage.setItem("token", result.token);
|
||||
|
||||
// register device
|
||||
sdk.setTable("device");
|
||||
await sdk.callRestAPI({ active: 1, user_id: result.user_id, last_login_time: new Date().toISOString().split("T")[0], uid: localStorage.getItem("device-uid") }, "POST");
|
||||
|
||||
await callCustomAPI(
|
||||
"edit-self",
|
||||
"post",
|
||||
{
|
||||
user: {
|
||||
first_name: data.firstName,
|
||||
last_name: data.lastName,
|
||||
},
|
||||
profile: {
|
||||
dob: isSameDay(data.dob, initialDate.current) ? undefined : moment(data.dob).format("yyyy-MM-DD"),
|
||||
},
|
||||
},
|
||||
"",
|
||||
result.token,
|
||||
);
|
||||
|
||||
localStorage.removeItem("token");
|
||||
|
||||
authDispatch({ type: "ALLOW_CHECK_VERIFICATION" });
|
||||
navigate("/check-verification");
|
||||
localStorage.setItem("first_login", result.user_id);
|
||||
setLoading(false);
|
||||
} else {
|
||||
setLoading(false);
|
||||
if (result.validation) {
|
||||
const keys = Object.keys(result.validation);
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const field = keys[i];
|
||||
setError(field, {
|
||||
type: "manual",
|
||||
message: result.validation[field],
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
setLoading(false);
|
||||
setError("firstName", {
|
||||
type: "manual",
|
||||
message: err.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!signUpData.email) return <Navigate to={`/signup`} />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="flex flex-col items-center justify-center bg-white md:w-1/2">
|
||||
<form
|
||||
className="flex w-full max-w-md flex-col px-6"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
autoComplete="off"
|
||||
>
|
||||
<h1 className="mb-8 text-center text-5xl font-bold">Finish Signing Up</h1>
|
||||
<div className="mb-8">
|
||||
<input
|
||||
type="text"
|
||||
{...register("firstName")}
|
||||
className="w-full resize-none rounded-md border bg-transparent py-2 px-4 focus:outline-none active:outline-none"
|
||||
placeholder="First name"
|
||||
autoComplete="off"
|
||||
/>
|
||||
<p className="text-red-500 text-xs italic mt-2 block">{errors.firstName?.message}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<input
|
||||
type="text"
|
||||
{...register("lastName")}
|
||||
className="w-full resize-none rounded-md border bg-transparent py-2 px-4 focus:outline-none active:outline-none"
|
||||
placeholder="Last name"
|
||||
autoComplete="off"
|
||||
/>
|
||||
<p className="text-red-500 text-xs italic mt-2 block">{errors.lastName?.message}</p>
|
||||
</div>
|
||||
|
||||
<DatePickerV2
|
||||
control={control}
|
||||
name="dob"
|
||||
min={new Date("1950-01-01")}
|
||||
max={initialDate.current}
|
||||
setValue={(v) => setValue("dob", v)}
|
||||
/>
|
||||
<div className={`${errors.password?.message && dirtyFields.password ? "border rounded-md border-[#C42945]" : "borde"} relative mb-4 flex justify-between rounded-md bg-transparent`}>
|
||||
<input
|
||||
autoComplete={showPassword ? "off" : "new-password"}
|
||||
type={showPassword ? "text" : "password"}
|
||||
{...register("password", {
|
||||
onChange: () => {
|
||||
trigger("password");
|
||||
},
|
||||
})}
|
||||
className="flex-grow rounded-md border p-2 px-4 focus:outline-none active:outline-none "
|
||||
placeholder="Password"
|
||||
/>{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword((prev) => !prev)}
|
||||
className="absolute right-1 top-[20%]"
|
||||
>
|
||||
{" "}
|
||||
{showPassword ? (
|
||||
<img
|
||||
src="/show.png"
|
||||
alt=""
|
||||
className="mr-2 w-6"
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src="/invisible.png"
|
||||
alt=""
|
||||
className="mr-2 w-6"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<p className="mb-4 text-sm normal-case text-gray-500">
|
||||
Select and agree to {" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>setModalOpen(true)}
|
||||
className="underline"
|
||||
// target={"_blank"}
|
||||
>
|
||||
{" "} Terms and Conditions
|
||||
</button>
|
||||
{" "}
|
||||
to continue.
|
||||
{" "}
|
||||
{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>setPrivacyModalOpen(true)}
|
||||
className="underline"
|
||||
>
|
||||
Privacy Policy
|
||||
</button>
|
||||
</p>
|
||||
<LoadingButton
|
||||
loading={loading}
|
||||
type="submit"
|
||||
className={`disabled:cursor-not-allowed login-btn-gradient rounded tracking-wide text-white outline-none focus:outline-none ${loading ? "py-1" : "py-2"}`}
|
||||
// disabled={!recaptchaValidated}
|
||||
>
|
||||
Continue
|
||||
</LoadingButton>
|
||||
</form>
|
||||
</section>
|
||||
<section
|
||||
style={{ backgroundImage: `url(${role == "host" ? "/host-sign-up.jpg" : "/sign-up-bg.jpg"})`, backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "center" }}
|
||||
className="hidden w-1/2 md:block"
|
||||
>
|
||||
</section>
|
||||
<TermsAndConditionsModal
|
||||
isOpen={modalOpen}
|
||||
closeModal={closeModal}
|
||||
/>
|
||||
<PrivacyAndPolicyModal
|
||||
isOpen={privacyOpen}
|
||||
closeModal={closePrivacyModal}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link, Navigate, useNavigate } from "react-router-dom";
|
||||
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { useForm } from "react-hook-form";
|
||||
import * as yup from "yup";
|
||||
import { useSignUpContext } from "./signUpContext";
|
||||
import { callCustomAPI, oauthLoginApi } from "@/utils/callCustomAPI";
|
||||
import { LoadingButton } from "@/components/frontend";
|
||||
import TLDs from "@/assets/json/email-tlds.json";
|
||||
|
||||
const SignUpForm = () => {
|
||||
const navigate = useNavigate();
|
||||
const { signUpData, dispatch } = useSignUpContext();
|
||||
const role = signUpData.role;
|
||||
const schema = yup.object({
|
||||
email: yup
|
||||
.string(),
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setError,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: yupResolver(schema),
|
||||
defaultValues: {
|
||||
email: signUpData.email,
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await callCustomAPI("email-exist", "post", { email: data.email }, "");
|
||||
|
||||
if (result.error || result.exist) throw new Error("User already exists");
|
||||
|
||||
dispatch({ type: "SET_EMAIL", payload: data.email });
|
||||
navigate("/signup/details" + "?role=" + role);
|
||||
} catch (err) {
|
||||
setError("email", { type: "manual", message: err.message });
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleGoogleLogin = async () => {
|
||||
const result = await oauthLoginApi("google", role);
|
||||
window.open(result.data, "_self");
|
||||
};
|
||||
|
||||
const handleFacebookLogin = async () => {
|
||||
const result = await oauthLoginApi("facebook", role);
|
||||
window.open(result.data, "_self");
|
||||
};
|
||||
|
||||
const handleAppleLogin = async () => {
|
||||
const result = await oauthLoginApi("apple", role);
|
||||
window.open(result.data, "_self");
|
||||
};
|
||||
|
||||
|
||||
if (!signUpData.role) return <Navigate to={"/signup/select-role"} />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="flex w-full flex-col items-center justify-center bg-white md:w-1/2">
|
||||
<form
|
||||
className="flex w-full max-w-md flex-col px-6"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
autoComplete="off"
|
||||
>
|
||||
<h1 className="mb-8 text-center text-3xl font-semibold md:text-5xl md:font-bold">{role == "host" ? "Become a host" : "Sign up"}</h1>
|
||||
<input
|
||||
autoComplete="off"
|
||||
{...register("email")}
|
||||
type="text"
|
||||
className="mb-8 resize-none rounded-sm border-2 bg-transparent p-2 px-4 focus:outline-none active:outline-none"
|
||||
placeholder="Email"
|
||||
/>
|
||||
{Object.entries(errors).length > 0 ? (
|
||||
<p className="error-vibrate my-3 rounded-md border border-[#C42945] bg-white py-2 px-3 text-center text-sm normal-case text-[#C42945]">{Object.values(errors)[0].message}</p>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<LoadingButton
|
||||
loading={loading}
|
||||
type="submit"
|
||||
className={`login-btn-gradient rounded tracking-wide text-white outline-none focus:outline-none ${loading ? "py-1" : "py-2"}`}
|
||||
>
|
||||
Continue
|
||||
</LoadingButton>
|
||||
|
||||
</form>
|
||||
<div className="hr my-6 text-center">OR</div>
|
||||
<div className="oauth flex w-full max-w-md flex-col gap-4 px-6 text-[#344054]">
|
||||
<button
|
||||
onClick={() => handleGoogleLogin()}
|
||||
className="flex items-center justify-center gap-2 border-2 py-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/google-icon.png"
|
||||
className="h-[18px] w-[18px]"
|
||||
/>
|
||||
<span>Sign Up With Google</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleFacebookLogin()}
|
||||
className="flex items-center justify-center gap-2 border-2 py-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/facebook-icon.png"
|
||||
className="h-[16px] w-[16px]"
|
||||
/>
|
||||
<span>Sign Up With Facebook</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleAppleLogin()}
|
||||
className="flex items-center justify-center gap-2 border-2 py-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/apple-icon.png"
|
||||
className="h-[16px] w-[16px]"
|
||||
/>
|
||||
<span>Sign Up With Apple</span>
|
||||
</button>
|
||||
<div>
|
||||
<h3 className="text-center text-sm normal-case text-gray-800">
|
||||
Already have an account?{" "}
|
||||
<Link
|
||||
to={"/login" + "?role=" + role}
|
||||
className="my-text-gradient mb-8 self-end text-sm font-semibold"
|
||||
>
|
||||
Log In
|
||||
</Link>{" "}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
style={{ backgroundImage: `url(${role == "host" ? "/jumbotron1.jpg" : "/sign-up-bg.jpg"})`, backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "center" }}
|
||||
className="hidden w-1/2 md:block bg-contain"
|
||||
></section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignUpForm;
|
||||
@@ -0,0 +1,57 @@
|
||||
import NextIcon from "@/components/frontend/icons/NextIcon";
|
||||
import React from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useSignUpContext } from "./signUpContext";
|
||||
|
||||
export default function SignUpSelectRole() {
|
||||
const { dispatch } = useSignUpContext();
|
||||
const navigate = useNavigate();
|
||||
|
||||
function selectHost() {
|
||||
dispatch({ type: "SET_ROLE", payload: "host" });
|
||||
navigate("/signup");
|
||||
}
|
||||
|
||||
function selectCustomer() {
|
||||
dispatch({ type: "SET_ROLE", payload: "customer" });
|
||||
navigate("/signup");
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full flex items-center justify-center normal-case">
|
||||
<div className="max-w-3xl mx-auto w-full text-center mb-40">
|
||||
<h1 className="text-5xl font-semibold mb-4">Sign Up</h1>
|
||||
<p>Select an option below</p>
|
||||
<br />
|
||||
<hr />
|
||||
<br />
|
||||
<div className="flex flex-col gap-12 items-center">
|
||||
<button
|
||||
className="py-4 px-4 shadow-sm w-full max-w-sm hover:shadow-lg duration-200 border rounded-xl hover:ring-2 ring-[#0d9895] focus:outline-none focus:ring-2"
|
||||
onClick={selectHost}
|
||||
>
|
||||
<span className="span flex justify-between items-center mb-4">
|
||||
<span className="font-semibold text-2xl">Sign up as host</span>
|
||||
<span className="">
|
||||
<NextIcon />
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
className="py-4 px-4 shadow-sm w-full max-w-sm hover:shadow-lg duration-200 border rounded-xl hover:ring-2 ring-[#0d9895] focus:outline-none focus:ring-2"
|
||||
onClick={selectCustomer}
|
||||
>
|
||||
<span className="span flex justify-between items-center mb-4">
|
||||
<span className="font-semibold text-2xl">Sign up as customer</span>
|
||||
<span className="">
|
||||
<NextIcon />
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import { LoadingButton } from "@/components/frontend";
|
||||
import { GlobalContext } from "@/globalContext";
|
||||
import { callCustomAPI } from "@/utils/callCustomAPI";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { useEffect } from "react";
|
||||
import { useContext } from "react";
|
||||
import { useState } from "react";
|
||||
import { Fragment } from "react";
|
||||
|
||||
export default function TermsAndConditionsModal({ isOpen, closeModal, setIsAgreed }) {
|
||||
const [termsAndConditions, setTermsAndCondition] = useState("");
|
||||
const [agreed, setAgreed] = useState(false);
|
||||
const { dispatch: globalDispatch } = useContext(GlobalContext);
|
||||
|
||||
async function fetchTermsAndConditions() {
|
||||
try {
|
||||
const result = await callCustomAPI("cms", "post", { where: [`content_key = 'terms_and_conditions'`], limit: 1, page: 1 }, "PAGINATE");
|
||||
|
||||
if (Array.isArray(result.list) && result.list.length > 0) {
|
||||
setTermsAndCondition(result.list[0].content_value);
|
||||
}
|
||||
} catch (err) {
|
||||
globalDispatch({
|
||||
type: "SHOW_ERROR",
|
||||
payload: {
|
||||
heading: "Cannot get Terms and Conditions",
|
||||
message: err.message,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchTermsAndConditions();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className={`${isOpen ? "flex" : "hidden"} fixed inset-0 items-center justify-center`}></div>
|
||||
|
||||
<Transition
|
||||
appear
|
||||
show={isOpen}
|
||||
as={Fragment}
|
||||
>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-10"
|
||||
onClose={closeModal}
|
||||
>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="w-full max-w-6xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-gray-900 flex justify-between items-center"
|
||||
>
|
||||
{" "}
|
||||
{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
className="py-2 border hover:bg-gray-200 active:bg-gray-300 duration-100 px-3 text-2xl font-normal rounded-full flex justify-end"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<article
|
||||
className="sun-editor-editable text-sm max-h-[600px] overflow-y-auto my-8"
|
||||
dangerouslySetInnerHTML={{ __html: termsAndConditions }}
|
||||
></article>
|
||||
</div>
|
||||
<div className="checkbox-container">
|
||||
<input
|
||||
type={"checkbox"}
|
||||
name="i-agree"
|
||||
id="i-agree"
|
||||
checked={agreed}
|
||||
onChange={() => {setAgreed((prev) => !prev); setIsAgreed((prev) => !prev); closeModal()}}
|
||||
/>
|
||||
<label
|
||||
htmlFor="i-agree"
|
||||
className="items-center cursor-pointer remove-select"
|
||||
>
|
||||
Yeah, I agree to everything
|
||||
</label>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import MkdSDK from "@/utils/MkdSDK";
|
||||
import { callCustomAPI } from "@/utils/callCustomAPI";
|
||||
import { GlobalContext, showToast } from "@/globalContext";
|
||||
|
||||
const VerifyEmailPage = () => {
|
||||
const [searchParams] = useSearchParams();
|
||||
const [pageText, setPageText] = useState("Verifying your email...");
|
||||
const navigate = useNavigate();
|
||||
const { dispatch: globalDispatch } = useContext(GlobalContext);
|
||||
|
||||
let sdk = new MkdSDK();
|
||||
|
||||
async function verifyEmail() {
|
||||
const token = searchParams.get("token");
|
||||
try {
|
||||
const result = await sdk.verifyEmail(token);
|
||||
|
||||
if (searchParams.get("is_manual") != "true") {
|
||||
// only send signup confirmation email if email verification link was not triggered manually
|
||||
const user = await callCustomAPI("get-user", "post", { id: result.user_id }, "");
|
||||
const tmpl = await sdk.getEmailTemplate("signup-confirmation");
|
||||
const body = tmpl.html?.replace(new RegExp("{{{first_name}}}", "g"), user.first_name).replace(new RegExp("{{{last_name}}}", "g"), user.last_name);
|
||||
|
||||
await sdk.sendEmail(user.email, tmpl.subject, body);
|
||||
}
|
||||
|
||||
if (!result.error) {
|
||||
showToast(globalDispatch, "Email verified", 3000, "success");
|
||||
}
|
||||
|
||||
setPageText("Your account has been verified, You will be redirected to login page shortly");
|
||||
|
||||
setTimeout(() => {
|
||||
navigate(`/login`);
|
||||
}, 4000);
|
||||
} catch (err) {}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
verifyEmail();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<h1 className="text-5xl">{pageText}</h1>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VerifyEmailPage;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,35 @@
|
||||
import React, { createContext, useContext, useReducer } from "react";
|
||||
|
||||
const initialSignUpData = {
|
||||
email: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
dob: "",
|
||||
password: "",
|
||||
role: "",
|
||||
};
|
||||
|
||||
const reducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case "SET_EMAIL":
|
||||
return { ...state, email: action.payload };
|
||||
case "SET_ROLE":
|
||||
return { ...state, role: action.payload };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
// create context here
|
||||
const signUpContext = createContext({});
|
||||
|
||||
// wrap this component around App.tsx to get access to userData in all components
|
||||
const SignUpContextProvider = ({ children }) => {
|
||||
const [signUpData, dispatch] = useReducer(reducer, initialSignUpData);
|
||||
|
||||
return <signUpContext.Provider value={{ signUpData, dispatch }}>{children}</signUpContext.Provider>;
|
||||
};
|
||||
|
||||
// use this custom hook to get the data in any component in component tree
|
||||
const useSignUpContext = () => useContext(signUpContext);
|
||||
export { useSignUpContext, SignUpContextProvider };
|
||||
Reference in New Issue
Block a user