diff --git a/src/main.jsx b/src/main.jsx index 585e55b..723baaf 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,7 +1,14 @@ import React, { useState } from "react"; import { AuthContext, tokenExpireError } from "./authContext"; import { GlobalContext } from "./globalContext"; -import { Routes, Route, Navigate, useLocation, useNavigate, Link } from "react-router-dom"; +import { + Routes, + Route, + Navigate, + useLocation, + useNavigate, + Link, +} from "react-router-dom"; import SnackBar from "@/components/SnackBar"; import PublicHeader from "@/components/PublicHeader"; import TopHeader from "@/components/TopHeader"; @@ -241,361 +248,318 @@ function renderRoutes(role) { case "admin": return ( + }> } > } - > - } > + }> + }> } - > - } - > - } > + }> } - > - } > } > } > + }> } - > - } > } > - } - > - } - > + }> + }> } > } > + }> + }> + } + path='/admin/edit-host/:id' + element={} > } + path='/admin/view-host/:id' + element={} > } - > - } - > - - } > } > } + path='/admin/edit-customer/:id' + element={} > } + path='/admin/view-customer/:id' + element={} > } > } > } > } > + }> } - > - } > } > } > } > } > + }> } - > - } > } > } > } > } > } > } > } + path='/admin/edit-property/:id' + element={} > } + path='/admin/view-property/:id' + element={} > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > } > + }> } - > - } > } > + }> } - > - } > + }> } - > - } > } > } > {/* } > */} } > } > } > } > } > } > } > } > } > } > } > } > } > } > + }> } - > - || } + path='*' + element={ || } > ); @@ -675,317 +636,158 @@ function renderRoutes(role) { } /> - } - /> - } - /> - } - /> - } - /> - } - > - } - /> - } - /> - } - /> - } - /> + } /> + } /> + } /> + } /> + }> + } /> + } /> + } /> + } /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - > + } /> + } /> + } /> + } /> + } /> + } /> + } /> + }> + } /> } - /> - } /> } /> - } - > + }> + } /> } - /> - } /> - } - /> - } - /> - } - /> - - } - > + } /> + } /> + } /> + + }> + } /> } + path='host/edit-add_on/:id' + element={} /> - } - /> - } - > + }> + } /> } + path='host/edit-amenity/:id' + element={} /> - } - /> - - } - /> - } - > + } /> + }> + } /> + } /> } - /> - } - /> - } /> } /> } /> } /> + } /> + } /> } - /> - } - /> - } /> } /> } /> } /> } /> } /> - } - > - } - /> - } - /> - } - /> - } - /> - } - /> + }> + } /> + } /> + } /> + } /> + } /> - } - > + }> } + path='/customer/verify-email' + element={} /> } + path='/host/verify-email' + element={} /> } /> } /> } /> @@ -996,207 +798,109 @@ function renderRoutes(role) { } /> - } - /> - } - /> - } - /> - } - /> - } - > - } - /> - } - /> - } - /> - } - /> + } /> + } /> + } /> + } /> + }> + } /> + } /> + } /> + } /> } > - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - > + } /> + } /> + } /> + } /> + } /> + } /> + } /> + }> + } /> } - /> - } /> } /> - } - > + }> } /> } /> } /> + } /> + } /> + } /> + } /> + } /> } - /> - } - /> - } - /> - } - /> - } - /> - } /> } /> } /> } /> } /> } /> } /> } /> - } - > + }> ); @@ -1205,185 +909,113 @@ function renderRoutes(role) { } + path='/admin/login' + element={} > } + path='/superadmin/login' + element={} > } > } > } + path='/customer/login' + element={} > } + path='/customer/reset' + element={} > } + path='/host/login' + element={} > } + path='/host/reset' + element={} > {/* frontend login screens */} - } - /> - } - /> - } - /> - } - /> - } - > - } - /> - } - /> - } - /> - } - /> + } /> + } /> + } /> + } /> + }> + } /> + } /> + } /> + } /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - > + } /> + } /> + } /> + } /> + } /> + } /> + }> + } /> } - /> - } /> } /> } /> } /> } /> } /> } /> } /> } /> - } - > + }> ); break; @@ -1392,10 +1024,16 @@ function renderRoutes(role) { function Main() { const { state, dispatch } = React.useContext(AuthContext); - const { state: globalState, dispatch: globalDispatch } = React.useContext(GlobalContext); + const { state: globalState, dispatch: globalDispatch } = + React.useContext(GlobalContext); const { pathname } = useLocation(); - const tidioBlacklist = useMemo(() => ["/admin", "/login", "/signup", "/account/messages"], []); - const shouldInsertTidio = tidioBlacklist.every((path) => !pathname.startsWith(path)); + const tidioBlacklist = useMemo( + () => ["/admin", "/login", "/signup", "/account/messages"], + [] + ); + const shouldInsertTidio = tidioBlacklist.every( + (path) => !pathname.startsWith(path) + ); // const [currentStep, setCurrentStep] = useState(0); const sdk = new MkdSDK(); @@ -1445,7 +1083,11 @@ function Main() { async function markAsNotFirstTimeUser() { try { - await sdk.callRawAPI("/v2/api/custom/ergo/edit-self", { profile: { getting_started: 1 } }, "POST"); + await sdk.callRawAPI( + "/v2/api/custom/ergo/edit-self", + { profile: { getting_started: 1 } }, + "POST" + ); globalDispatch({ type: "SET_USER_DATA", payload: { @@ -1463,543 +1105,814 @@ function Main() { globalDispatch({ type: "END_TOUR" }); globalDispatch({ type: "CLOSE_MENU_ICON" }); globalDispatch({ type: "CLOSE_ADD_PAYMENT_METHOD" }); - setCurrentStep(0) + setCurrentStep(0); markAsNotFirstTimeUser(); - } - const disableBody = (target) => disableBodyScroll(target) - const enableBody = (target) => enableBodyScroll(target) + }; + const disableBody = (target) => disableBodyScroll(target); + const enableBody = (target) => enableBodyScroll(target); const styles = { highlightedArea: (base, { x, y }) => ({ ...base, x: x + 10, y: y + 10, - padding: "10px" + padding: "10px", }), - maskArea: (base) => ({ ...base, rx: '10px' }), - badge: (base) => ({ ...base, right: '-0.8125em' }), + maskArea: (base) => ({ ...base, rx: "10px" }), + badge: (base) => ({ ...base, right: "-0.8125em" }), controls: (base) => ({ ...base, marginTop: 100 }), styles: { popover: (base) => ({ ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - padding: '30px', - backgroundColor: '#dedede', - }) + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + padding: "30px", + backgroundColor: "#dedede", + }), }, maskWrapper: (base) => ({ ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - padding: '40px', - backgroundColor: '#dedede', + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + padding: "40px", + backgroundColor: "#dedede", }), popover: (base) => ({ ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - padding: '40px', - backgroundColor: '#dedede', + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + padding: "40px", + backgroundColor: "#dedede", }), - badge: (base) => ({ ...base, color: 'white', background: '#0ba68a' }), - } - - const hostSteps = - [ - { - selector: '.first-step', - content: ({ goTo, inDOM, setCurrentStep, isHighlightingObserved }) => ( -
-

Navigate to the Profile menu

- From the profile menu, users can manage their profile, view bookings, message hosts, view reviews, manage payments and billing information. - -
- ), - action: () => { - setCurrentStep(0) - if (!globalState?.menuIconOpen) { - globalDispatch({ type: "OPEN_MENU_ICON" }); - } - }, - position: "center", - highlightedSelectors: [".first-step"], - resizeObservables: [".first-step"], - mutationObservables: ['[data-tour="photo-step"]'], + badge: (base) => ({ ...base, color: "white", background: "#0ba68a" }), + }; + const hostSteps = [ + { + selector: ".first-step", + content: ({ goTo, inDOM, setCurrentStep, isHighlightingObserved }) => ( +
+

+ Navigate to the Profile menu +

+ + From the profile menu, users can manage their profile, view + bookings, message hosts, view reviews, manage payments and billing + information. + + +
+ ), + action: () => { + setCurrentStep(0); + if (!globalState?.menuIconOpen) { + globalDispatch({ type: "OPEN_MENU_ICON" }); + } }, - - { - selector: '[data-tour="photo-step"]', - content: ({ goTo, inDOM, setCurrentStep }) => ( -
- Upload your photo. All photos are subject to approval. For further questions, please visit our FAQs or - User Agreement page. -
- - -
-
- ), - styles: { - popover: (base) => ({ - ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginLeft: '30px', - marginTop: '30px', - backgroundColor: '#dedede', - }) - }, - position: "bottom", - action: () => { - navigate("/account/profile"); - globalDispatch({ type: "CLOSE_MENU_ICON" }); - }, - mutationObservables: ['[data-tour="photo-step"]'], - }, - { - selector: '[data-tour="profile-step"]', - content: ({ setCurrentStep }) => ( -
- Complete your About Me and include information about yourself and/or your company. -
- - -
-
- ), - styles: { - popover: (base) => ({ - ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginLeft: '30px', - backgroundColor: '#dedede', - }) - }, - action: () => { - navigate("/account/profile"); - globalDispatch({ type: "CLOSE_MENU_ICON" }); - }, - mutationObservables: ['[data-tour="about-step"]'], - }, - { - selector: '[data-tour="email-step"]', - content: ({ setCurrentStep }) => ( -
- Enable or disable Email Alerts for Site Activity if you want to be alerted via email on all site actions. -
- - -
-
- ), - styles: { - popover: (base) => ({ - ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - backgroundColor: '#dedede', - }) - }, position: "center", - action: () => { - navigate("/account/profile"); - globalDispatch({ type: "CLOSE_MENU_ICON" }); - }, - mutationObservables: ['[data-tour="email-step"]'], - }, - { - selector: '[data-tour="fourth-step"]', - onTransition: { - position: "center" - }, - content: ({ goTo, inDOM, setCurrentStep, transition }) => ( -
-

Click on Get Verified to submit your identity for verification.

-
-
- - -
-
+ highlightedSelectors: [".first-step"], + resizeObservables: [".first-step"], + mutationObservables: ['[data-tour="photo-step"]'], + }, + + { + selector: '[data-tour="photo-step"]', + content: ({ goTo, inDOM, setCurrentStep }) => ( +
+ + Upload your photo. All photos are subject to approval. For further + questions, please visit our{" "} + + FAQs + {" "} + or + + User Agreement page. + + +
+ +
- ), - styles: { - popover: (base) => ({ - ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginTop: '30px', - backgroundColor: '#dedede', - }) - }, - action: () => { - navigate("/account/profile"); - globalDispatch({ type: "CLOSE_MENU_ICON" }); - }, - mutationObservables: ['[data-tour="fourth-step"]'], +
+ ), + styles: { + popover: (base) => ({ + ...base, + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginLeft: "30px", + marginTop: "30px", + backgroundColor: "#dedede", + }), }, - { - selector: '[data-tour="fifth-step"]', - content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Select and Upload a Government issued ID or Passport.

- Identification is subject to approval. The image must be current, legible and expiration date must be valid. For further questions, please review our User Agreement. -
- + position: "bottom", + action: () => { + navigate("/account/profile"); + globalDispatch({ type: "CLOSE_MENU_ICON" }); + }, + mutationObservables: ['[data-tour="photo-step"]'], + }, + { + selector: '[data-tour="profile-step"]', + content: ({ setCurrentStep }) => ( +
+ + Complete your About Me and include information about yourself and/or + your company. + +
+ + +
+
+ ), + styles: { + popover: (base) => ({ + ...base, + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginLeft: "30px", + backgroundColor: "#dedede", + }), + }, + action: () => { + navigate("/account/profile"); + globalDispatch({ type: "CLOSE_MENU_ICON" }); + }, + mutationObservables: ['[data-tour="about-step"]'], + }, + { + selector: '[data-tour="email-step"]', + content: ({ setCurrentStep }) => ( +
+ + Enable or disable Email Alerts for Site Activity if you want to be + alerted via email on all site actions. + +
+ + +
+
+ ), + styles: { + popover: (base) => ({ + ...base, + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + backgroundColor: "#dedede", + }), + }, + position: "center", + action: () => { + navigate("/account/profile"); + globalDispatch({ type: "CLOSE_MENU_ICON" }); + }, + mutationObservables: ['[data-tour="email-step"]'], + }, + { + selector: '[data-tour="fourth-step"]', + onTransition: { + position: "center", + }, + content: ({ goTo, inDOM, setCurrentStep, transition }) => ( +
+

+ Click on Get Verified to submit your identity for verification. +

+
+
+ onClick={() => setCurrentStep(3)} + className='mt-2 rounded-md bg-[#0ba68a] px-[10px] py-[7px] text-white' + > + Prev step + +
- ), - position: 'bottom', - styles: { - popover: (base) => ({ - ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginTop: '30px', - marginLeft: '30px', - backgroundColor: '#dedede', - }) - }, - mutationObservables: [`[data-tour-id="mask-position-recompute"]`] +
+ ), + styles: { + popover: (base) => ({ + ...base, + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginTop: "30px", + backgroundColor: "#dedede", + }), }, - - { - selector: "", - content: ({ goTo, inDOM, setCurrentStep }) => ( -
- + action: () => { + navigate("/account/profile"); + globalDispatch({ type: "CLOSE_MENU_ICON" }); + }, + mutationObservables: ['[data-tour="fourth-step"]'], + }, + { + selector: ".sixth-step", + content: ({ goTo, inDOM, setCurrentStep }) => ( +
+

+ Select and Upload a Government issued ID or Passport. +

+ + Identification is subject to approval. The image must be current, + legible and expiration date must be valid. For further questions, + please review our{" "} + + User Agreement + + . + +
+ +
- ), - styles: { - popover: (base) => ({ - ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginTop: '-30px', - marginLeft: '20px', - backgroundColor: '#dedede', - }) - }, - action: () => { - if (pathname != "/account/verification") { - navigate("/account/verification"); - } - }, +
+ ), + action: () => { + navigate("/account/verification"); + globalDispatch({ type: "CLOSE_MENU_ICON" }); }, - { - selector: ".tenth-step", - content: ({ goTo, inDOM, setCurrentStep }) => { - return ( -
-

Under Billing, please add your payment and payout methods

-
- - -
+ position: "bottom", + styles: { + popover: (base) => ({ + ...base, + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginTop: "30px", + marginLeft: "30px", + backgroundColor: "#dedede", + }), + }, + mutationObservables: [`[data-tour-id="mask-position-recompute"]`], + }, + { + selector: ".submit-doc-btn", + content: ({ goTo, inDOM, setCurrentStep }) => ( +
+

Click the submit button

+

+ Once approved, you will receive an email with approval confirmation + from our support team and your account will be activated. For + questions or concerns, please navigate to the{" "} + { + + FAQs + + }{" "} + page. +

+
+ + +
+
+ ), + position: "bottom", + styles: { + popover: (base) => ({ + ...base, + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginTop: "30px", + marginLeft: "30px", + backgroundColor: "#dedede", + }), + }, + mutationObservables: [`[data-tour-id="mask-position-recompute"]`], + action: () => { + navigate("/account/verification"); + globalDispatch({ type: "CLOSE_MENU_ICON" }); + }, + }, + { + selector: ".tenth-step", + content: ({ goTo, inDOM, setCurrentStep }) => { + return ( +
+

+ Under Billing, please add your payment and payout methods +

+
+ +
- ) - }, - styles: { - popover: (base) => ({ - ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginTop: '30px', - backgroundColor: '#dedede', - }) - }, - action: () => { - navigate("/account/billing"); +
+ ); + }, + styles: { + popover: (base) => ({ + ...base, + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginTop: "30px", + backgroundColor: "#dedede", + }), + }, + action: () => { + navigate("/account/billing"); + globalDispatch({ type: "CLOSE_MENU_ICON" }); + }, + }, + { + selector: ".twelfth-step", + content: ({ goTo, inDOM, setCurrentStep }) => ( +
+

+ Under Payments, view your payment history +

+ + Payments you've received from Customers after bookings are + completed. + + {/* Once approved, you will receive an email with approval confirmation from our support team and your account will be activated. For questions or concerns, please navigate to the FAQs page. */} +
+ + +
+
+ ), + position: "bottom", + action: () => { + if (pathname != "/account/payments") { + navigate("/account/payments"); globalDispatch({ type: "CLOSE_MENU_ICON" }); - }, + } }, - { - selector: ".twelfth-step", - content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Under Payments, view your payment history

- Payments you’ve received from Customers after bookings are completed. - {/* Once approved, you will receive an email with approval confirmation from our support team and your account will be activated. For questions or concerns, please navigate to the FAQs page. */} -
- - -
+ }, + { + selector: ".thirteenth-step", + content: ({ goTo, inDOM, setCurrentStep }) => ( +
+

+ See reviews given by your customers +

+ {/* Once approved, you will receive an email with approval confirmation from our support team and your account will be activated. For questions or concerns, please navigate to the FAQs page. */} +
+ +
- ), - position: "bottom", - action: () => { - if (pathname != "/account/payments") { - navigate("/account/payments"); - globalDispatch({ type: "CLOSE_MENU_ICON" }); - } - }, +
+ ), + position: "top", + styles: { + popover: (base) => ({ + ...base, + marginLeft: "30px", + marginTop: "30px", + }), }, - { - selector: ".thirteenth-step", - content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

See reviews given by your customers

- {/* Once approved, you will receive an email with approval confirmation from our support team and your account will be activated. For questions or concerns, please navigate to the FAQs page. */} -
- - -
+ action: () => { + if (globalState.menuIconOpen) { + globalDispatch({ type: "CLOSE_MENU_ICON" }); + } + if (globalState.addPaymentMethodModal) { + globalDispatch({ type: "CLOSE_ADD_PAYMENT_METHOD" }); + } + if (pathname != "/account/reviews") { + navigate("/account/reviews"); + } + }, + }, + { + selector: ".seventeen-step", + content: ({ goTo, inDOM, setCurrentStep }) => ( +
+

+ Manage all bookings made for your space +

+
+ +
- ), - position: "top", - styles: { - popover: (base) => ({ - ...base, - marginLeft: '30px', - marginTop: '30px', - }) - }, - action: () => { - if (globalState.menuIconOpen) { - globalDispatch({ type: "CLOSE_MENU_ICON" }); - } - if (globalState.addPaymentMethodModal) { - globalDispatch({ type: "CLOSE_ADD_PAYMENT_METHOD" }); - } - if (pathname != "/account/reviews") { - navigate("/account/reviews"); - } - }, +
+ ), + position: "center", + styles: { + popover: (base) => ({ + ...base, + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginTop: "10px", + backgroundColor: "#dedede", + }), }, - { - selector: ".seventeen-step", - content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Manage all bookings made for your space

-
- - -
+ action: () => { + if (pathname != "/account/my-bookings") { + navigate("/account/my-bookings"); + } + }, + }, + { + selector: ".nineteen-step", + content: ({ goTo, inDOM, setCurrentStep }) => ( +
+

Chat with your customers

+ + You will be notified via email when new messages are received. + +
+ +
- ), - position: "center", - styles: { - popover: (base) => ({ - ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginTop: '10px', - backgroundColor: '#dedede', - }) - }, - action: () => { - if (pathname != "/account/my-bookings") { - navigate("/account/my-bookings"); - } - }, +
+ ), + position: "center", + styles: { + popover: (base) => ({ + ...base, + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + backgroundColor: "#dedede", + }), }, - { - selector: ".nineteen-step", - content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Chat with your customers

- You will be notified via email when new messages are received. -
- - -
+ action: () => { + // if (pathname != "/account/messages") { + navigate("/account/messages"); + // } + }, + }, + { + selector: ".fourteen-step", + content: ({ goTo, inDOM, setCurrentStep }) => ( +
+

Add a new space

+
+ +
- ), - position: "center", - styles: { - popover: (base) => ({ - ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - backgroundColor: '#dedede', - }) - }, - action: () => { - // if (pathname != "/account/messages") { - navigate("/account/messages"); - // } - }, +
+ ), + styles: { + popover: (base) => ({ + ...base, + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginTop: "30px", + marginLeft: "30px", + display: "flex", + justify: "center", + position: "center", + backgroundColor: "#dedede", + }), }, - { - selector: ".fourteen-step", - content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Add a new space

-
- - -
+ position: "center", + action: () => { + // if (pathname != "/account/my-spaces") { + navigate("/account/my-spaces"); + // } + }, + }, + { + selector: ".fifteen-step", + content: ({ goTo, inDOM, setCurrentStep }) => ( +
+

+ Input details of your space +

+
+ +
- ), - styles: { - popover: (base) => ({ - ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginTop: '30px', - marginLeft: '30px', - display: 'flex', - justify: 'center', - position: 'center', - backgroundColor: '#dedede', - }) - }, - position: "center", - action: () => { - // if (pathname != "/account/my-spaces") { - navigate("/account/my-spaces"); - // } - }, +
+ ), + position: "center", + action: () => { + if (pathname != "/spaces/add") { + navigate("/spaces/add"); + } }, - { - selector: ".fifteen-step", - content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Input details of your space

-
- - -
+ }, + { + selector: ".eighteen-step-imag", + content: ({ goTo, inDOM, setCurrentStep }) => ( +
+

+ Add Images, Addons, Amenities, Faqs for your space +

+
+ +
- ), - position: "center", - action: () => { - if (pathname != "/spaces/add") { - navigate("/spaces/add"); - } - }, +
+ ), + position: "center", + styles: { + popover: (base) => ({ + ...base, + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginTop: "-30px", + backgroundColor: "#dedede", + }), }, - { - selector: ".eighteen-step-imag", - content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Add Images, Addons, Amenities, Faqs for your space

-
- - -
+ action: () => { + if (pathname != "/spaces/add/2") { + navigate("/spaces/add/2"); + } + }, + }, + { + selector: ".eighteen-step-schedul", + content: ({ goTo, inDOM, setCurrentStep }) => ( +
+

+ Add available slots for your space +

+ + Customize and maintain the available slots for your space. + +
+ +
- ), - position: "center", - styles: { - popover: (base) => ({ - ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginTop: '-30px', - backgroundColor: '#dedede', - }) - }, - action: () => { - if (pathname != "/spaces/add/2") { - navigate("/spaces/add/2"); - } - }, +
+ ), + position: "center", + action: () => { + if (pathname != "/spaces/add/3") { + navigate("/spaces/add/3"); + } }, - { - selector: ".eighteen-step-schedul", - content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Add available slots for your space

- Customize and maintain the available slots for your space. -
- - -
+ }, + { + selector: ".eighteen-step-summary", + content: ({ goTo, inDOM, setCurrentStep }) => ( +
+

Review your space details

+ + Review the final details for your space for approval and posting. + +
+ +
- ), - position: "center", - action: () => { - if (pathname != "/spaces/add/3") { - navigate("/spaces/add/3"); - } - }, +
+ ), + position: "center", + action: () => { + if (pathname != "/spaces/add/4") { + navigate("/spaces/add/4"); + } }, - { - selector: ".eighteen-step-summary", - content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Review your space details

- Review the final details for your space for approval and posting. -
- - -
+ }, + { + selector: ".sixteen-step", + content: ({ goTo, inDOM, setCurrentStep }) => ( +
+

+ Submit your space for admin approval +

+ + Once approved, you will receive an email with approval confirmation + from our support team and your account will be activated. For + questions or concerns, please navigate to the{" "} + + FAQs + {" "} + page. + +
+ +
- ), - position: "center", - action: () => { - if (pathname != "/spaces/add/4") { - navigate("/spaces/add/4"); - } - }, +
+ ), + styles: { + popover: (base) => ({ + ...base, + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginTop: "-30px", + marginLeft: "20px", + backgroundColor: "#dedede", + }), }, - { - selector: ".sixteen-step", - content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Submit your space for admin approval

- Once approved, you will receive an email with approval confirmation from our support team and your account will be activated. For questions or concerns, please navigate to the FAQs page. -
- - -
-
- ), - styles: { - popover: (base) => ({ - ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginTop: '-30px', - marginLeft: '20px', - backgroundColor: '#dedede', - }) - }, - action: () => { - if (pathname != "/spaces/add/4") { - navigate("/spaces/add/4"); - } - }, + action: () => { + if (pathname != "/spaces/add/4") { + navigate("/spaces/add/4"); + } }, - { - selector: "last_step", - content: ({ goTo, inDOM, setIsOpen }) => ( -
- -
- ), - position: "center", - action: () => { - navigate("/"); - }, + }, + { + selector: "last_step", + content: ({ goTo, inDOM, setIsOpen }) => ( +
+ +
+ ), + position: "center", + action: () => { + navigate("/"); }, - - ] + }, + ]; const customerSteps = [ { - selector: '.first-step', + selector: ".first-step", content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Navigate to the Profile menu

- From the profile menu, users can manage their profile, view bookings, message hosts, view reviews, manage payments and billing information. - +
+

+ Navigate to the Profile menu +

+ + From the profile menu, users can manage their profile, view + bookings, message hosts, view reviews, manage payments and billing + information. + +
), action: () => { @@ -2015,28 +1928,48 @@ function Main() { { selector: '[data-tour="photo-step"]', content: ({ goTo, inDOM, setCurrentStep }) => ( -
- Upload your photo. All photos are subject to approval. For further questions, please visit our FAQs or - User Agreement page. -
- - +
+ + Upload your photo. All photos are subject to approval. For further + questions, please visit our{" "} + + FAQs + {" "} + or + + User Agreement page. + + +
+ +
), styles: { popover: (base) => ({ ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginLeft: '30px', - marginTop: '30px', - backgroundColor: '#dedede', - }) + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginLeft: "30px", + marginTop: "30px", + backgroundColor: "#dedede", + }), }, position: "bottom", action: () => { @@ -2048,27 +1981,36 @@ function Main() { { selector: '[data-tour="profile-step"]', content: ({ goTo, inDOM, setCurrentStep }) => ( -
- Complete your About Me and include information about yourself. -
- - +
+ + Complete your About Me and include information about yourself. + +
+ +
), styles: { popover: (base) => ({ ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginLeft: '30px', - backgroundColor: '#dedede', - }) + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginLeft: "30px", + backgroundColor: "#dedede", + }), }, action: () => { navigate("/account/profile"); @@ -2079,24 +2021,36 @@ function Main() { { selector: '[data-tour="email-step"]', content: ({ goTo, inDOM, setCurrentStep }) => ( -
- Enable or disable Email Alerts for Site Activity if you want to be alerted via email on all site actions. -
- - +
+ + Enable or disable Email Alerts for Site Activity if you want to be + alerted via email on all site actions. + +
+ +
), styles: { popover: (base) => ({ ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - backgroundColor: '#dedede', - }) + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + backgroundColor: "#dedede", + }), }, position: "center", action: () => { @@ -2108,15 +2062,24 @@ function Main() { { selector: '[data-tour="fourth-step"]', content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Click on Get Verified to submit your identity for verification.

-
-
+
+

+ Click on Get Verified to submit your identity for verification. +

+
+
- + onClick={() => setCurrentStep(3)} + className='mt-2 rounded-md bg-[#0ba68a] px-[10px] py-[7px] text-white' + > + Prev step + +
@@ -2124,10 +2087,10 @@ function Main() { styles: { popover: (base) => ({ ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginTop: '30px', - backgroundColor: '#dedede', - }) + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginTop: "30px", + backgroundColor: "#dedede", + }), }, action: () => { navigate("/account/profile"); @@ -2136,81 +2099,138 @@ function Main() { mutationObservables: ['[data-tour="fourth-step"]'], }, { - selector: '[data-tour="fifth-step"]', + selector: ".sixth-step", content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Select and Upload a Government issued ID or Passport.

- Identification is subject to approval. The image must be current, legible and expiration date must be valid. For further questions, please review our User Agreement. -
- +
+

+ Select and Upload a Government issued ID or Passport. +

+ + Identification is subject to approval. The image must be current, + legible and expiration date must be valid. For further questions, + please review our{" "} + + User Agreement + + . + +
+ onClick={() => setCurrentStep(4)} + className='mt-2 rounded-md bg-[#0ba68a] px-[10px] py-[7px] text-white' + > + Prev step + +
), + action: () => { + navigate("/account/verification"); + globalDispatch({ type: "CLOSE_MENU_ICON" }); + }, + position: "bottom", styles: { popover: (base) => ({ ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginTop: '30px', - marginLeft: '30px', - display: 'flex', - justify: 'center', - position: 'center', - backgroundColor: '#dedede', - }) + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginTop: "30px", + marginLeft: "30px", + backgroundColor: "#dedede", + }), }, - mutationObservables: ['[data-tour="fifth-step"]'], + mutationObservables: [`[data-tour-id="mask-position-recompute"]`], }, - { - selector: "", + selector: ".submit-doc-btn", content: ({ goTo, inDOM, setCurrentStep }) => ( -
+
+

Click the submit button

+

+ Once approved, you will receive an email with approval confirmation + from our support team and your account will be activated. For + questions or concerns, please navigate to the{" "} + { + + FAQs + + }{" "} + page. +

+
+ + +
), + position: "bottom", styles: { popover: (base) => ({ ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - backgroundColor: '#dedede', - marginLeft: '20px', - marginTop: '-30px', - }) + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginTop: "30px", + marginLeft: "30px", + backgroundColor: "#dedede", + }), }, + mutationObservables: [`[data-tour-id="mask-position-recompute"]`], action: () => { - if (pathname != "/account/verification") { - navigate("/account/verification"); - } + navigate("/account/verification"); + globalDispatch({ type: "CLOSE_MENU_ICON" }); }, }, { selector: ".tenth-step", content: ({ goTo, inDOM, setCurrentStep }) => { return ( -
-

Under Billing, please add your payment methods

-
- - +
+

+ Under Billing, please add your payment methods +

+
+ +
- ) + ); }, styles: { popover: (base) => ({ ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginTop: '30px', - backgroundColor: '#dedede', - }) + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginTop: "30px", + backgroundColor: "#dedede", + }), }, action: () => { if (pathname != "/account/billing") { @@ -2222,12 +2242,27 @@ function Main() { { selector: ".twelfth-step", content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

Under Payments, view your payment history

- Payments you’ve made after bookings are completed. -
- - +
+

+ Under Payments, view your payment history +

+ + {" "} + Payments you've made after bookings are completed. + +
+ +
), @@ -2242,12 +2277,21 @@ function Main() { { selector: ".thirteenth-step", content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

View your review history

-
- - +
+

View your review history

+
+ +
), @@ -2267,12 +2311,21 @@ function Main() { { selector: ".seventeen-step", content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

View your booking history

-
- - +
+

View your booking history

+
+ +
), @@ -2286,23 +2339,36 @@ function Main() { { selector: ".nineteen-step", content: ({ goTo, inDOM, setCurrentStep }) => ( -
-

View and manage your messages with your hosts

- You will be notified via email when new messages are received. -
- - +
+

+ View and manage your messages with your hosts +

+ + You will be notified via email when new messages are received. + +
+ +
), styles: { popover: (base) => ({ ...base, - boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)', - marginLeft: '10px', - backgroundColor: '#dedede', - }) + boxShadow: "0 0 3em rgba(0, 0, 0, 0.5)", + marginLeft: "10px", + backgroundColor: "#dedede", + }), }, action: () => { if (pathname != "/account/messages") { @@ -2313,8 +2379,17 @@ function Main() { { selector: "last_step", content: ({ goTo, inDOM, setIsOpen, setCurrentStep }) => ( -
- +
+
), position: "center", @@ -2322,16 +2397,13 @@ function Main() { navigate("/"); }, }, - - - ] - + ]; return ( -
+
- {state.role == "host" && + {state.role == "host" && ( { - return [prev.x, prev.y] + return [prev.x, prev.y]; }} setCurrentStep={setCurrentStep} currentStep={step} - accentColor="#0ba68a" + accentColor='#0ba68a' steps={hostSteps} - onClickClose={({ setIsOpen, setCurrentStep }) => { setIsOpen(false); globalDispatch({ type: "CLOSE_MENU_ICON" }); setCurrentStep(0) }} - onClickMask={({ setIsOpen, setCurrentStep }) => { setIsOpen(false); globalDispatch({ type: "CLOSE_MENU_ICON" }); setCurrentStep(0) }} - isOpen={globalState?.tourOpen}> -
- {!state.isAuthenticated ? : renderHeader(state.role)} -
- {state.isAuthenticated && ["superadmin", "admin"].includes(state.role) ? : null} + onClickClose={({ setIsOpen, setCurrentStep }) => { + setIsOpen(false); + globalDispatch({ type: "CLOSE_MENU_ICON" }); + setCurrentStep(0); + }} + onClickMask={({ setIsOpen, setCurrentStep }) => { + setIsOpen(false); + globalDispatch({ type: "CLOSE_MENU_ICON" }); + setCurrentStep(0); + }} + isOpen={globalState?.tourOpen} + > +
+ {!state.isAuthenticated ? ( + + ) : ( + renderHeader(state.role) + )} +
+ {state.isAuthenticated && + ["superadmin", "admin"].includes(state.role) ? ( + + ) : null}
- {!state.isAuthenticated ? renderRoutes("none") : renderRoutes(state.role)} + {!state.isAuthenticated + ? renderRoutes("none") + : renderRoutes(state.role)} {globalState.showModal ? (
- } - {state.role != "host" && + )} + {state.role != "host" && ( { setIsOpen(false); globalDispatch({ type: "CLOSE_MENU_ICON" }); setCurrentStep(0) }} - onClickMask={({ setIsOpen, setCurrentStep }) => { setIsOpen(false); globalDispatch({ type: "CLOSE_MENU_ICON" }); setCurrentStep(0) }} - isOpen={globalState?.tourOpen}> -
- {!state.isAuthenticated ? : renderHeader(state.role)} -
- {state.isAuthenticated && ["superadmin", "admin"].includes(state.role) ? : null} + onClickClose={({ setIsOpen, setCurrentStep }) => { + setIsOpen(false); + globalDispatch({ type: "CLOSE_MENU_ICON" }); + setCurrentStep(0); + }} + onClickMask={({ setIsOpen, setCurrentStep }) => { + setIsOpen(false); + globalDispatch({ type: "CLOSE_MENU_ICON" }); + setCurrentStep(0); + }} + isOpen={globalState?.tourOpen} + > +
+ {!state.isAuthenticated ? ( + + ) : ( + renderHeader(state.role) + )} +
+ {state.isAuthenticated && + ["superadmin", "admin"].includes(state.role) ? ( + + ) : null}
- {!state.isAuthenticated ? renderRoutes("none") : renderRoutes(state.role)} + {!state.isAuthenticated + ? renderRoutes("none") + : renderRoutes(state.role)} {globalState.showModal ? (
- } + )} diff --git a/src/pages/Customer/Verification/CustomerVerificationPage.jsx b/src/pages/Customer/Verification/CustomerVerificationPage.jsx index d2672e3..15af422 100644 --- a/src/pages/Customer/Verification/CustomerVerificationPage.jsx +++ b/src/pages/Customer/Verification/CustomerVerificationPage.jsx @@ -23,11 +23,13 @@ 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) => { - if (val == "") return false; - const date = new Date(val); - return date.setDate(date.getDate() - 1) > new Date(); - }), + 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(); + }), }); const { @@ -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 ( -
+
-

Identity Verification

-
-

+

+ Identity Verification +

+
+

Safety is our priority

-

- 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.

-

Verification Documents.

-
-