ordering-ui-external 1.3.2 → 1.4.1

package/template/app.js

@@ -6,47 +6,121 @@ import {
   Link,
   useLocation
 } from 'react-router-dom'
-import { useSession, useLanguage, useOrder, Analytics, useConfig, FacebookPixel } from 'ordering-components-external'
+import { useTheme, ThemeProvider } from 'styled-components'
+import PWAPrompt from 'react-ios-pwa-prompt'
+
+import { useSession, useApi, useLanguage, useOrder, Analytics, FacebookPixel, useConfig, AnalyticsSegment, useEvent, useOrderingTheme, useSite } from 'ordering-components-external'
+import { Header } from '../src/themes/five/src/components/Header'
+import { Header as HeaderKiosk } from '../src/themes/five/src/components/Header/layouts/Kiosk'
+import { Footer } from '../src/themes/five/src/components/Footer'
+import { NotNetworkConnectivity } from '../src/themes/five/src/components/NotNetworkConnectivity'
 
-import { Header } from '../src/components/Header'
-import { Footer } from '../src/components/Footer'
 import { SpinnerLoader } from '../src/components/SpinnerLoader'
-import { NotNetworkConnectivity } from '../src/components/NotNetworkConnectivity'
+import { Header as HeaderOld } from '../src/components/Header'
+import { Header as HeaderRed } from '../src/themes/seven/src/components/Header'
+import { Header as HeaderStarbucks } from '../src/themes/six/src/components/Header'
 import { useOnlineStatus } from '../src/hooks/useOnlineStatus'
+import { useWindowSize } from '../src/hooks/useWindowSize'
 import { Alert } from '../src/components/Confirm'
 import { SmartAppBanner } from '../src/components/SmartAppBanner'
 
+import { NavigationBar } from '../src/themes/five/src/components/NavigationBar'
+import { Modal } from '../src/themes/five/src/components/Modal'
+
+import { ReviewTrigger } from '../src/themes/five/src/components/ReviewTrigger'
+import { ReviewOrder } from '../src/themes/five/src/components/ReviewOrder'
+import { ReviewProduct } from '../src/themes/five/src/components/ReviewProduct'
+import { ReviewDriver } from '../src/themes/five/src/components/ReviewDriver'
+import { SignUpApproval } from '../src/themes/five/src/components/SignUpApproval'
+
+import { AddressList } from './pages/AddressList'
 import { BusinessesList } from './pages/BusinessesList'
 import { BusinessProductsList } from './pages/BusinessProductsList'
 import { CheckoutPage } from './pages/Checkout'
 import { Cms } from './pages/Cms'
-import { ForgotPassword } from './pages/ForgotPassword'
 import { HomePage } from './pages/Home'
-import { Login } from './pages/Login'
 import { MyOrders } from './pages/MyOrders'
 import { OrderDetailsPage } from './pages/OrderDetails'
 import { PageNotFound } from './pages/PageNotFound'
 import { PagesList } from './pages/PagesList'
 import { Profile } from './pages/Profile'
-import { ResetPassword } from './pages/ResetPassword'
-import { SignUp } from './pages/SignUp'
+import { Wallets } from './pages/Wallets'
+import { MessagesList } from './pages/MessagesList'
 import { Help } from './pages/Help'
-
+import { Favorite } from './pages/Favorite'
+import { SessionsList } from './pages/SessionsList'
+import { SignUpBusiness } from './pages/SignUpBusiness'
+import { SignUpDriver } from './pages/SignUpDriver'
+import { UserVerification } from './pages/UserVerification'
+import { BusinessListingSearch } from './pages/BusinessListingSearch'
+import { ResetPassword } from './pages/ResetPassword'
 import { ScrollToTop } from './components/ScrollToTop'
 import { ListenPageChanges } from './components/ListenPageChanges'
 import { HelmetTags } from './components/HelmetTags'
-import settings from './config.json'
+import settings from './config'
+import { Promotions } from './pages/Promotions'
+import { MultiCheckout } from './pages/MultiCheckout'
+import { MultiOrdersDetails } from './pages/MultiOrdersDetails'
 
 export const App = () => {
-  const [{ auth, user, loading }, { login }] = useSession()
-  const [orderStatus] = useOrder()
-  const [{ configs }] = useConfig()
+  const [{ auth, user }, { login }] = useSession()
+  const [events] = useEvent()
+  const [ordering] = useApi()
+  const theme = useTheme()
+  const [orderStatus, { changeType, getLastOrderHasNoReview }] = useOrder()
+  const [{ configs, loading: configLoading }] = useConfig()
+  const [{ loading: siteLoading }] = useSite()
   const [, t] = useLanguage()
+  const [orderingTheme] = useOrderingTheme()
   const [loaded, setLoaded] = useState(false)
   const onlineStatus = useOnlineStatus()
   const location = useLocation()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const signUplayout = 'new'
+  const windowSize = useWindowSize()
+  const [businessSignUpSuccessed, setBusinessSignUpSuccessed] = useState({ open: false, content: {} })
+  const [lastOrderReview, setLastOrderReview] = useState({
+    isReviewOpen: false,
+    order: null,
+    defaultStar: 5,
+    reviewStatus: { trigger: false, order: false, product: false, driver: false },
+    reviewed: { isOrderReviewed: false, isProductReviewed: false, isDriverReviewed: false }
+  })
   const hashKey = new URLSearchParams(useLocation()?.search)?.get('hash') || null
+  const isKioskApp = settings?.use_kiosk
+
+  const themeUpdated = {
+    ...theme,
+    ...orderingTheme?.theme
+  }
+
+  const businessesSlug = {
+    marketplace: 'marketplace',
+    kiosk: settings?.businessSlug
+  }
+
+  const singleBusinessConfig = {
+    isActive: settings?.use_marketplace || isKioskApp,
+    businessSlug: businessesSlug[isKioskApp ? 'kiosk' : 'marketplace']
+  }
+
+  const HeaderComponent =
+    isKioskApp ? HeaderKiosk
+      : orderingTheme?.theme?.header?.components?.layout?.type === 'old'
+        ? HeaderOld
+        : orderingTheme?.theme?.header?.components?.layout?.type === 'red'
+          ? HeaderRed
+          : orderingTheme?.theme?.header?.components?.layout?.type === 'starbucks'
+            ? HeaderStarbucks
+            : Header
+
+  const orderTypeSearchParam = parseInt(new URLSearchParams(useLocation()?.search)?.get('order_type') ?? 0, 10)
+  const configTypes = configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
+
+  const isWalletEnabled = (configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')) && !isKioskApp
+  const isEmailVerifyRequired = auth && configs?.verification_email_required?.value === '1' && !user?.email_verified
+  const isPhoneVerifyRequired = auth && configs?.verification_phone_required?.value === '1' && !user?.phone_verified
+  const isUserVerifyRequired = (isEmailVerifyRequired || isPhoneVerifyRequired) && !isKioskApp
 
   const closeAlert = () => {
     setAlertState({
@@ -61,26 +135,152 @@ export const App = () => {
   }
 
   const isHome = location.pathname === '/' || location.pathname === '/home'
-  const isFooterPage = location.pathname === '/pages/footer'
+  const isFooterPage = location.pathname === '/pages/footer' || isKioskApp
 
   const handleSuccessSignup = (user) => {
-    login({
-      user,
-      token: user?.session?.access_token
+    if (!user?.enabled && (configs?.business_signup_enabled_default?.value === '0' || configs?.driver_signup_enabled_default?.value === '0')) {
+      signUplayout === 'new' ?
+        setBusinessSignUpSuccessed({
+          open: true,
+          content: {
+            approvalType: 'no_automatic',
+            businessType: user?.level,
+            project: settings.project,
+            dashboardUrl: settings.url_dashboard,
+            dashboardLoginUrl: `${settings.url_dashboard}/login/?project=${settings.project}&token=${user?.session?.access_token}`
+          }
+        }) : setAlertState({
+          open: true,
+          content: [t('BUSINESS_SIGNUP_MESSAGE', 'We will contact you as soon as possible')]
+        })
+      return
+    }
+
+    if (configs?.business_signup_enabled_default?.value === '1' || configs?.driver_signup_enabled_default?.value === '1') {
+      signUplayout === 'new' ? setBusinessSignUpSuccessed({
+        open: true,
+        content: {
+          approvalType: 'automatic',
+          businessType: user?.level,
+          project: settings.project,
+          dashboardUrl: settings.url_dashboard,
+          dashboardLoginUrl: `${settings.url_dashboard}/login/?project=${settings.project}&token=${user?.session?.access_token}`
+        }
+      }) : setAlertState({
+        open: true,
+        content: [
+          `${t('PROJECT', 'Project')}: ${settings.project}`
+        ],
+        links: [
+          <span key='url dashboard'>
+            {`${t('DASHBOARD_WEBPAGE_MESSAGE', 'Dashboard webpage')}: `}
+            <a
+              target='blank'
+              href={`${settings.url_dashboard}/login/?project=${settings.project}&token=${user?.session?.access_token}`}
+            >
+              <span style={{ color: theme.colors.links }}>{settings.url_dashboard}</span>
+            </a>
+          </span>
+        ],
+        isOnlyAlert: true
+      })
+
+      login({
+        user,
+        token: user?.session?.access_token
+      })
+    }
+  }
+
+  const goToPage = (page, params) => {
+    events.emit('go_to_page', { page, params })
+  }
+
+  const _getLastOrderHasNoReview = async () => {
+    const lastOrderHasNoReview = await getLastOrderHasNoReview()
+    lastOrderHasNoReview && OrderReviewRequired(lastOrderHasNoReview)
+  }
+
+  const reviewModalTitle = () => {
+    if (lastOrderReview?.reviewStatus?.trigger) return t('HOW_WAS_YOUR_ORDER', 'How was your order?')
+    if (lastOrderReview?.reviewStatus?.order) return t('REVIEW_ORDER', 'Review order')
+    if (lastOrderReview?.reviewStatus?.product) return t('REVIEW_PRODUCT', 'Review Product')
+    return t('REVIEW_DRIVER', 'Review Driver')
+  }
+
+  const OrderReviewRequired = (order) => {
+    setLastOrderReview({
+      isReviewOpen: true,
+      order: order,
+      defaultStar: 5,
+      reviewStatus: { trigger: true, order: false, product: false, driver: false },
+      reviewed: { isOrderReviewed: false, isProductReviewed: false, isDriverReviewed: false }
+    })
+  }
+
+  const handleOpenOrderReview = (star) => {
+    setLastOrderReview({
+      ...lastOrderReview,
+      defaultStar: star,
+      reviewStatus: { trigger: false, order: true, product: false, driver: false }
     })
   }
 
+  const handleCloseReivew = () => {
+    setLastOrderReview({
+      ...lastOrderReview,
+      isReviewOpen: false,
+      reviewStatus: { trigger: false, order: false, product: false, driver: false }
+    })
+  }
+
+  const setIsReviewed = (reviewType) => {
+    const _reviewStatus = { ...lastOrderReview?.reviewed }
+    setLastOrderReview({
+      ...lastOrderReview,
+      reviewed: { ..._reviewStatus, [reviewType]: true }
+    })
+  }
+
+  const closeReviewOrder = () => {
+    if (!lastOrderReview?.reviewed?.isProductReviewed) setLastOrderReview({ ...lastOrderReview, reviewStatus: { order: false, product: true, driver: false } })
+    else if (lastOrderReview?.order?.driver && !lastOrderReview?.order?.user_review && !lastOrderReview?.reviewed?.isDriverReviewed) setLastOrderReview({ ...lastOrderReview, reviewStatus: { order: false, product: false, driver: true } })
+    else handleCloseReivew()
+  }
+
+  const closeReviewProduct = () => {
+    if (lastOrderReview?.order?.driver && !lastOrderReview?.order?.user_review && !lastOrderReview?.reviewed?.isDriverReviewed) setLastOrderReview({ ...lastOrderReview, reviewStatus: { order: false, product: false, driver: true } })
+    else {
+      setIsReviewed('isDriverReviewed')
+      handleCloseReivew()
+    }
+  }
+
   useEffect(() => {
-    if (!loaded && !orderStatus.loading) {
-      setLoaded(true)
+    const _user = window.localStorage.getItem('user')
+    const _token = window.localStorage.getItem('token')
+    const _reviewRequired = window.sessionStorage.getItem('review-required')
+    if (((_user || _token) && auth) && _reviewRequired !== '1') {
+      window.sessionStorage.setItem('review-required', '1')
+      _getLastOrderHasNoReview()
     }
-  }, [orderStatus])
+    if (!(_user || _token)) {
+      window.sessionStorage.removeItem('review-required')
+    }
+  }, [auth])
 
   useEffect(() => {
-    if (!loading) {
-      setLoaded(!auth)
+    if (!loaded && !orderStatus.loading && !configLoading && !siteLoading && !orderingTheme?.loading) {
+      if (orderTypeSearchParam && configTypes.includes(orderTypeSearchParam)) {
+        changeType(parseInt(orderTypeSearchParam, 10))
+        if (orderStatus?.options?.type === parseInt(orderTypeSearchParam, 10)) {
+          setLoaded(true)
+        }
+        return
+      }
+      setLoaded(true)
     }
-  }, [loading])
+  }, [orderStatus, configLoading, siteLoading, orderingTheme])
 
   useEffect(() => {
     if (configs?.front_version?.value && loaded) {
@@ -94,185 +294,357 @@ export const App = () => {
     }
   }, [configs, loaded])
 
+  useEffect(() => {
+    if (isHome && settings?.use_marketplace) {
+      goToPage('business', { store: 'marketplace' })
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!orderStatus.loading) {
+      const localCountryCode = orderStatus?.options?.address?.country_code ??
+        window.localStorage.getItem('country-code')
+
+      if (localCountryCode) {
+        ordering?.setCountryCode(localCountryCode)
+      }
+    }
+  }, [orderStatus])
+
   return (
     <>
       {!!configs?.track_id_google_analytics?.value && (
         <Analytics trackId={configs?.track_id_google_analytics?.value} />
       )}
-      {!!configs?.facebook_id?.value && (
+      {!!configs?.segment_track_id?.value && (
+        <AnalyticsSegment writeKey={configs?.segment_track_id?.value} />
+      )}
+      {!!configs?.facebook_id?.value && FacebookPixel && (
         <FacebookPixel trackId={configs?.facebook_id?.value} />
       )}
-      <ListenPageChanges />
-      {
-        !loaded && (
-          <SpinnerLoader />
-        )
-      }
+      {!loaded && <SpinnerLoader />}
       <SmartAppBanner
-        storeAndroidId={settings?.store_android_id}
-        storeAppleId={settings?.store_apple_id}
-        storeKindleId={settings?.store_kindle_id}
+        storeAndroidId={settings?.store_android_id !== '0' ? settings?.store_android_id : false}
+        storeAppleId={settings?.store_apple_id !== '0' ? settings?.store_apple_id : false}
+        storeKindleId={settings?.store_kindle_id !== '0' ? settings?.store_kindle_id : false}
       />
       {
         loaded && (
-          <>
-            <Header
-              isHome={isHome}
-              location={location}
-            />
-
+          <ThemeProvider theme={themeUpdated}>
+            <ListenPageChanges />
+            {!(isKioskApp && isHome) && (
+              <HeaderComponent
+                isHome={isHome}
+                location={location}
+                isCustomLayout={singleBusinessConfig.isActive}
+              />
+            )}
             <NotNetworkConnectivity />
             {onlineStatus && (
               <ScrollToTop>
                 <HelmetTags />
                 <Switch>
                   <Route exact path='/home'>
-                    {
-                      orderStatus.options?.address?.location
-                        ? <Redirect to='/search' />
-                        : <HomePage />
-                    }
+                    {isUserVerifyRequired ? (
+                      <Redirect to='/verify' />
+                    ) : (
+                      isKioskApp
+                        ? <HomePage />
+                        : orderStatus.options?.address?.location
+                          ? <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/search'} />
+                          : singleBusinessConfig.isActive
+                            ? <Redirect to={singleBusinessConfig.isActive ? '' : '/search'} />
+                            : <HomePage />
+                    )}
                   </Route>
                   <Route exact path='/'>
-                    {
-                      orderStatus.options?.address?.location
-                        ? <Redirect to='/search' />
-                        : <HomePage />
-                    }
+                    {isUserVerifyRequired ? (
+                      <Redirect to='/verify' />
+                    ) : (
+                      isKioskApp
+                        ? <HomePage />
+                        : orderStatus.options?.address?.location
+                          ? <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/search'} />
+                          : <HomePage />
+                    )}
                   </Route>
-                  <Route exact path='/signup'>
-                    {
-                      !auth
-                        ? (
-                          <SignUp
-                            elementLinkToLogin={<Link to='/login'>{t('LOGIN', 'Login')}</Link>}
-                            useLoginByCellphone
-                            useChekoutFileds
-                            handleSuccessSignup={handleSuccessSignup}
-                            isRecaptchaEnable
-                          />
-                        )
-                        : <Redirect to='/' />
-                    }
+                  <Route exact path='/wallets'>
+                    {auth
+                      ? isUserVerifyRequired
+                        ? <Redirect to='/verify' />
+                        : isWalletEnabled
+                          ? <Wallets />
+                          : <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />
+                      : <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />}
                   </Route>
-                  <Route exact path='/login'>
-                    {
-                      !auth
-                        ? (
-                          <Login
-                            elementLinkToSignup={<Link to='/signup'>{t('CREATE_ACCOUNT', 'Create account')}</Link>}
-                            elementLinkToForgotPassword={<Link to='/password/forgot'>{t('RESET_PASSWORD', 'Reset password')}</Link>}
-                            useLoginByCellphone
-                            isRecaptchaEnable
-                          />
-                        )
-                        : (
-                          orderStatus?.options?.user_id && !orderStatus?.loading ? (
-                            orderStatus.options?.address?.location
-                              ? <Redirect to='/search' />
-                              : <Redirect to='/' />
-                          ) : (
-                            <SpinnerLoader />
-                          )
-                        )
-                    }
+                  <Route exact path='/signup_business'>
+                    {!auth && !isKioskApp ? (
+                      <SignUpBusiness
+                        elementLinkToLogin={<Link to='/'>{t('LOGIN', 'Login')}</Link>}
+                        useLoginByCellphone
+                        useChekoutFileds
+                        handleSuccessSignup={handleSuccessSignup}
+                        layout={signUplayout}
+                        isRecaptchaEnable
+                      />
+                    ) : (
+                      <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />
+                    )}
                   </Route>
-                  <Route exact path='/signin'>
-                    {
-                      !auth
-                        ? (
-                          <Login
-                            elementLinkToSignup={<Link to='/signup'>{t('CREATE_ACCOUNT', 'Create account')}</Link>}
-                            elementLinkToForgotPassword={<Link to='/password/forgot'>{t('RESET_PASSWORD', 'Reset password')}</Link>}
-                            useLoginByCellphone
-                            isRecaptchaEnable
-                          />
-                        )
-                        : (
-                          orderStatus?.options?.user_id && !orderStatus?.loading ? (
-                            orderStatus.options?.address?.location
-                              ? <Redirect to='/search' />
-                              : <Redirect to='/' />
-                          ) : (
-                            <SpinnerLoader />
-                          )
-                        )
-                    }
+                  <Route exact path='/signup-driver'>
+                    {!auth && !isKioskApp ? (
+                      <SignUpDriver
+                        layout={signUplayout}
+                        elementLinkToLogin={<Link to='/'>{t('LOGIN', 'Login')}</Link>}
+                        useLoginByCellphone
+                        useChekoutFileds
+                        handleSuccessSignup={handleSuccessSignup}
+                        isRecaptchaEnable
+                      />
+                    ) : (
+                      <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />
+                    )}
                   </Route>
-                  <Route exact path='/password/forgot'>
-                    {
-                      !auth ? (
-                        <ForgotPassword
-                          elementLinkToLogin={<Link to='/login'>{t('LOGIN', 'Login')}</Link>}
-                        />
-                      )
-                        : <Redirect to='/' />
-                    }
+                  <Route exact path='/password/reset'>
+                    {auth ? (
+                      <Redirect to='/' />
+                    ) : (
+                      isKioskApp
+                        ? <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />
+                        : <ResetPassword />
+                    )}
                   </Route>
-                  <Route exact path='/password/reset' component={ResetPassword} />
                   <Route exact path='/profile'>
                     {auth
-                      ? (<Profile userId={user?.id} accessToken={user?.session?.access_token} useValidationFields />)
-                      : <Redirect to='/login' />}
+                      ? isUserVerifyRequired
+                        ? <Redirect to='/verify' />
+                        : (<Profile userId={user?.id} accessToken={user?.session?.access_token} useValidationFields />)
+                      : <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />}
+                  </Route>
+                  <Route exact path='/verify'>
+                    {isUserVerifyRequired
+                      ? <UserVerification />
+                      : <Redirect to={(auth || isKioskApp) ? singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/search' : '/'} />}
                   </Route>
                   <Route exact path='/profile/orders'>
                     {auth
-                      ? (<MyOrders />)
-                      : <Redirect to='/login' />}
+                      ? isUserVerifyRequired
+                        ? <Redirect to='/verify' />
+                        : (<MyOrders />)
+                      : <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />}
+                  </Route>
+                  <Route exact path='/profile/addresses'>
+                    {auth
+                      ? isUserVerifyRequired
+                        ? <Redirect to='/verify' />
+                        : (<AddressList />)
+                      : <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />}
+                  </Route>
+                  <Route exact path='/messages'>
+                    {auth
+                      ? isUserVerifyRequired
+                        ? <Redirect to='/verify' />
+                        : <MessagesList />
+                      : (
+                        isKioskApp
+                          ? <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />
+                          : <Redirect to={{ pathname: '/search' }} />
+                      )}
+                  </Route>
+                  <Route exact path='/help'>
+                    {auth
+                      ? isUserVerifyRequired
+                        ? <Redirect to='/verify' />
+                        : (<Help />)
+                      : <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />}
                   </Route>
                   <Route exact path='/search'>
+                    {
+                      isKioskApp
+                        ? <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />
+                        : (
+                          orderStatus.loading && !orderStatus.options?.address?.location ? (
+                            <SpinnerLoader />
+                          ) : (
+                            isUserVerifyRequired ? (
+                              <Redirect to='/verify' />
+                            ) : (
+                              orderStatus.options?.address?.location
+                                ? <BusinessesList />
+                                : <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />
+                            )
+                          )
+                        )
+                    }
+                  </Route>
+                  <Route exact path='/business_search'>
+                    {isUserVerifyRequired ? (
+                      <Redirect to='/verify' />
+                    ) : (
+                      orderStatus.options?.address?.location && !isKioskApp ? (
+                        <BusinessListingSearch />
+                      ) : (
+                        <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />
+                      )
+                    )}
+                  </Route>
+                  <Route exact path='/promotions'>
                     {orderStatus.loading && !orderStatus.options?.address?.location ? (
                       <SpinnerLoader />
                     ) : (
-                      orderStatus.options?.address?.location
-                        ? <BusinessesList />
-                        : <Redirect to='/' />
+                      isUserVerifyRequired ? (
+                        <Redirect to='/verify' />
+                      ) : (
+                        orderStatus.options?.address?.location && !isKioskApp
+                          ? <Promotions />
+                          : <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />
+                      )
                     )}
                   </Route>
-                  <Route exact path='/store/:store'>
-                    <BusinessProductsList />
-                  </Route>
                   <Route path='/checkout/:cartUuid?'>
                     {auth
-                      ? <CheckoutPage />
+                      ? isUserVerifyRequired
+                        ? <Redirect to='/verify' />
+                        : <CheckoutPage />
                       : (
                         <Redirect to={{
-                          pathname: '/login',
+                          pathname: singleBusinessConfig.isActive
+                            ? `/${singleBusinessConfig.businessSlug}`
+                            : '/',
                           state: { from: location.pathname || null }
                         }}
                         />
                       )}
                   </Route>
-                  <Route exact path='/orders/:orderId'>
-                    {(auth || hashKey)
-                      ? <OrderDetailsPage />
+                  <Route path='/multi-checkout'>
+                    {auth
+                      ? isUserVerifyRequired
+                        ? <Redirect to='/verify' />
+                        : <MultiCheckout />
                       : (
                         <Redirect to={{
-                          pathname: '/login',
+                          pathname: singleBusinessConfig.isActive
+                            ? `/${singleBusinessConfig.businessSlug}`
+                            : '/',
                           state: { from: location.pathname || null }
                         }}
                         />
                       )}
                   </Route>
-                  <Route exact path='/pages/:pageSlug'>
-                    <Cms />
+                  <Route path='/multi-orders'>
+                    {auth
+                      ? isUserVerifyRequired
+                        ? <Redirect to='/verify' />
+                        : <MultiOrdersDetails />
+                      : (
+                        <Redirect to={{
+                          pathname: singleBusinessConfig.isActive
+                            ? `/${singleBusinessConfig.businessSlug}`
+                            : '/',
+                          state: { from: location.pathname || null }
+                        }}
+                        />
+                      )}
                   </Route>
-                  <Route exact path='/pages'>
-                    <PagesList />
+                  <Route exact path='/orders/:orderId'>
+                    {(auth || hashKey)
+                      ? isUserVerifyRequired
+                        ? <Redirect to='/verify' />
+                        : <OrderDetailsPage />
+                      : (
+                        <Redirect to={{
+                          pathname: singleBusinessConfig.isActive
+                            ? `/${singleBusinessConfig.businessSlug}`
+                            : '/',
+                          state: { from: location.pathname || null }
+                        }}
+                        />
+                      )}
                   </Route>
-                  <Route exact path='/help'>
-                    {auth
-                      ? <Help />
+                  <Route exact path='/promotions'>
+                    {(auth || hashKey)
+                      ? isUserVerifyRequired
+                        ? <Redirect to='/verify' />
+                        : <Promotions />
                       : (
                         <Redirect to={{
-                          pathname: '/login',
+                          pathname: singleBusinessConfig.isActive
+                            ? `/${singleBusinessConfig.businessSlug}`
+                            : '/',
                           state: { from: location.pathname || null }
                         }}
                         />
                       )}
                   </Route>
-                  <Route exact path='/:store'>
-                    <BusinessProductsList />
+                  <Route exact path='/pages/:pageSlug'>
+                    {isUserVerifyRequired ? (
+                      <Redirect to='/verify' />
+                    ) : (
+                      <Cms />
+                    )}
+                  </Route>
+                  <Route exact path='/pages'>
+                    {isUserVerifyRequired ? (
+                      <Redirect to='/verify' />
+                    ) : (
+                      <PagesList />
+                    )}
+                  </Route>
+                  <Route exact path='/favorite'>
+                    {auth && !isKioskApp
+                      ? <Favorite />
+                      : (
+                        <Redirect to='/' />
+                      )}
+                  </Route>
+                  <Route exact path='/sessions'>
+                    {auth && !isKioskApp
+                      ? <SessionsList />
+                      : (
+                        <Redirect to='/' />
+                      )}
+                  </Route>
+                  <Route exact path='/store'>
+                    {isUserVerifyRequired ? (
+                      <Redirect to='/verify' />
+                    ) : (
+                      <BusinessProductsList />
+                    )}
+                  </Route>
+                  <Route exact path='/:business_slug'>
+                    {isUserVerifyRequired ? (
+                      <Redirect to='/verify' />
+                    ) : (
+                      <BusinessProductsList />
+                    )}
+                  </Route>
+                  <Route exact path='/:business_slug/:category_slug/:product_slug'>
+                    {isUserVerifyRequired ? (
+                      <Redirect to='/verify' />
+                    ) : (
+                      <BusinessProductsList />
+                    )}
+                  </Route>
+                  <Route exact path='/store/:business_slug'>
+                    {isUserVerifyRequired ? (
+                      <Redirect to='/verify' />
+                    ) : (
+                      <BusinessProductsList />
+                    )}
+                  </Route>
+                  <Route exact path='/store/:business_slug/:category_slug/:product_slug'>
+                    {isUserVerifyRequired ? (
+                      <Redirect to='/verify' />
+                    ) : (
+                      <BusinessProductsList />
+                    )}
+                  </Route>
+                  <Route exact path='/store/:category_slug/:product_slug'>
+                    {isUserVerifyRequired ? (
+                      <Redirect to='/verify' />
+                    ) : (
+                      <BusinessProductsList />
+                    )}
                   </Route>
                   <Route path='*'>
                     <PageNotFound />
@@ -280,20 +652,59 @@ export const App = () => {
                 </Switch>
               </ScrollToTop>
             )}
+            {!navigator.userAgent.match('CriOS') && (
+              <PWAPrompt promptOnVisit={1} timesToShow={100} copyClosePrompt="Close" permanentlyHideOnDismiss={false} />
+            )}
             {!isFooterPage && (
               <Footer />
             )}
+            {(windowSize.width < 576 && auth) && (
+              <NavigationBar />
+            )}
             <Alert
               title={t('INFORMATION', 'Information')}
               content={alertState.content}
+              links={alertState.links}
               acceptText={t('ACCEPT', 'Accept')}
               open={alertState.open}
               onClose={() => closeAlert()}
               onCancel={() => closeAlert()}
-              onAccept={() => acceptAlert()}
+              onAccept={() => alertState?.isOnlyAlert ? closeAlert() : acceptAlert()}
               closeOnBackdrop={false}
             />
-          </>
+            {lastOrderReview?.isReviewOpen && (
+              <Modal
+                open={lastOrderReview?.isReviewOpen}
+                onClose={handleCloseReivew}
+                title={lastOrderReview?.order && reviewModalTitle()}
+                width={lastOrderReview?.reviewStatus?.trigger ? '680px' : null}
+              >
+                <div>
+                  {
+                    lastOrderReview?.reviewStatus?.trigger
+                      ? <ReviewTrigger order={lastOrderReview?.order} handleOpenOrderReview={handleOpenOrderReview} />
+                      : lastOrderReview?.reviewStatus?.order
+                        ? <ReviewOrder order={lastOrderReview?.order} defaultStar={lastOrderReview?.defaultStar} closeReviewOrder={closeReviewOrder} setIsReviewed={() => setIsReviewed('isOrderReviewed')} />
+                        : (lastOrderReview?.reviewStatus?.product
+                          ? <ReviewProduct order={lastOrderReview?.order} closeReviewProduct={closeReviewProduct} setIsProductReviewed={() => setIsReviewed('isProductReviewed')} />
+                          : <ReviewDriver order={lastOrderReview?.order} closeReviewDriver={handleCloseReivew} setIsDriverReviewed={() => setIsReviewed('isDriverReviewed')} />)
+                  }
+                </div>
+              </Modal>
+            )}
+            <Modal
+              open={businessSignUpSuccessed?.open}
+              onClose={() => setBusinessSignUpSuccessed({ open: false, content: {} })}
+              title={t('CONGRATULATIONS', 'Congratulations')}
+              width={'990px'}
+            >
+              <SignUpApproval
+                content={businessSignUpSuccessed?.content}
+                onAccept={() => acceptAlert()}
+                onCancel={() => setBusinessSignUpSuccessed({ open: false, content: {} })}
+              />
+            </Modal>
+          </ThemeProvider>
         )
       }
     </>