ordering-ui-external 10.5.3 → 10.6.0

package/src/themes/five/src/components/QueryLoginSpoonity/index.js

@@ -1,19 +1,136 @@
 import React from 'react'
-import { QueryLoginSpoonity as QueryLoginSpoonityController, useLanguage } from 'ordering-components-external'
+import { QueryLoginSpoonity as QueryLoginSpoonityController, useEvent, useLanguage, useSession, useSite } from 'ordering-components-external'
 import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
+import Modal from '../Modal'
+import { LoginForm } from '../LoginForm'
+import { SignUpForm } from '../SignUpForm'
+import { ForgotPasswordForm } from '../ForgotPasswordForm'
+import { useTheme } from 'styled-components'
 
 const QueryLoginSpoonityUI = (props) => {
   const {
-    userState
+    userState,
+    notificationState,
+    authModalOpen,
+    setAuthModalOpen,
+    modalPageToShow,
+    setModalPageToShow
   } = props
 
   const [, t] = useLanguage()
+  const [{ auth }, { login }] = useSession()
+  const theme = useTheme()
+  const [events] = useEvent()
+  const [{ site }] = useSite()
+  const businessUrlTemplate = site?.business_url_template || '/store/:business_slug'
+
+  const closeAuthModal = () => {
+    setAuthModalOpen(false)
+    setModalPageToShow(null)
+    const store = window.location.pathname.split('/')?.filter(text => text !== '' && text !== 'store')?.[0]
+    if (store) {
+      if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+        events.emit('go_to_page', { page: 'business', params: { business_slug: store } })
+      } else {
+        events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${store}` })
+      }
+    } else {
+      events.emit('go_to_page', { page: 'search' })
+    }
+  }
+
+  const handleSuccessLogin = (user) => {
+    if (user) {
+      closeAuthModal()
+    }
+  }
+
+  const handleSuccessSignup = (user) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+  }
+
+  const handleCustomModalClick = (e, { page }) => {
+    e.preventDefault()
+    setModalPageToShow(page)
+  }
 
   return (
     <>
       {userState?.loading ? (
         <SpinnerLoader content={t('LOADING_DELICIOUS_FOOD', 'Loading Ordering Dashboard...')} />
-      ) : null}
+      ) : (
+        <>
+          {authModalOpen && !auth && (
+            <Modal
+              open={authModalOpen}
+              onRemove={() => closeAuthModal()}
+              onClose={() => closeAuthModal()}
+              width='50%'
+              authModal
+              closeOnBackdrop
+            >
+              {modalPageToShow === 'login' && (
+                <LoginForm
+                  notificationState={notificationState}
+                  handleSuccessLogin={handleSuccessLogin}
+                  elementLinkToSignup={
+                    <a
+                      onClick={
+                        (e) => handleCustomModalClick(e, { page: 'signup' })
+                      } href='#'
+                    >{t('CREATE_ACCOUNT', theme?.defaultLanguages?.CREATE_ACCOUNT || 'Create account')}
+                    </a>
+                  }
+                  elementLinkToForgotPassword={
+                    <a
+                      onClick={
+                        (e) => handleCustomModalClick(e, { page: 'forgotpassword' })
+                      } href='#'
+                    >{t('RESET_PASSWORD', theme?.defaultLanguages?.RESET_PASSWORD || 'Reset password')}
+                    </a>
+                  }
+                  useLoginByCellphone
+                  isPopup
+                />
+              )}
+              {modalPageToShow === 'signup' && (
+                <SignUpForm
+                  notificationState={notificationState}
+                  elementLinkToLogin={
+                    <a
+                      onClick={
+                        (e) => handleCustomModalClick(e, { page: 'login' })
+                      } href='#'
+                    >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
+                    </a>
+                  }
+                  useLoginByCellphone
+                  useChekoutFileds
+                  handleSuccessSignup={handleSuccessSignup}
+                  isPopup
+                  closeModal={() => closeAuthModal()}
+                />
+              )}
+              {modalPageToShow === 'forgotpassword' && (
+                <ForgotPasswordForm
+                  elementLinkToLogin={
+                    <a
+                      onClick={
+                        (e) => handleCustomModalClick(e, { page: 'login' })
+                      } href='#'
+                    >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
+                    </a>
+                  }
+                  isPopup
+                />
+              )}
+            </Modal>
+          )}
+        </>
+      )}
     </>
   )
 }

package/src/themes/five/src/components/RenderProductsLayout/index.js

@@ -161,7 +161,7 @@ export const RenderProductsLayout = (props) => {
     <>
       {!isLoading && business?.id && (
         <WrappLayout isCartOnProductsList={isCartOnProductsList}>
-          {((!hideBusinessNearCity && !useKioskApp) || props.forceShowNearBusiness) && !isCustomLayout && (
+          {((!hideBusinessNearCity && !useKioskApp) || props.forceShowNearBusiness) && !isCustomerMode && !isCustomLayout && (
             <NearBusiness>
               <BusinessesListing
                 logosLayout

package/src/themes/five/src/components/UserDetails/index.js

@@ -190,8 +190,8 @@ const UserDetailsUI = (props) => {
                 <PhoneContainer>
                   <CountryFlag>
                     {
-                      userData?.country_phone_code && (
-                        <PhoneInput onChange={() => { }} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.cellphone.replace(`+${userData?.country_phone_code}`, '')}`)?.country} />
+                      userData?.country_phone_code && userData?.cellphone && (
+                        <PhoneInput onChange={() => { }} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.cellphone?.replace(`+${userData?.country_phone_code}`, '')}`)?.country} />
                       )
                     }
                   </CountryFlag>

package/template/app.js

@@ -569,7 +569,7 @@ export const App = () => {
                       isKioskApp
                         ? <HomePage notificationState={oneSignalState} />
                         : queryIntegrationToken && queryIntegrationCode === 'spoonity'
-                          ? <QueryLoginSpoonity token={queryIntegrationToken} />
+                          ? <QueryLoginSpoonity token={queryIntegrationToken} notificationState={oneSignalState} />
                           : (orderStatus.options?.address?.location || isAllowUnaddressOrderType)
                             ? <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/search'} />
                             : singleBusinessConfig.isActive
@@ -672,7 +672,7 @@ export const App = () => {
                       isKioskApp
                         ? <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />
                         : queryIntegrationToken && queryIntegrationCode === 'spoonity'
-                          ? <QueryLoginSpoonity token={queryIntegrationToken} />
+                          ? <QueryLoginSpoonity token={queryIntegrationToken} notificationState={oneSignalState} />
                           : (
                             orderStatus.loading && !orderStatus.options?.address?.location ? (
                               <SpinnerLoader />
@@ -831,53 +831,67 @@ export const App = () => {
                       )}
                   </Route>
                   <Route exact path='/store'>
-                    {isUserVerifyRequired ? (
-                      <Redirect to='/verify' />
-                    ) : (
-                      <BusinessProductsList />
-                    )}
+                    {queryIntegrationToken && queryIntegrationCode === 'spoonity'
+                      ? <QueryLoginSpoonity token={queryIntegrationToken} notificationState={oneSignalState} />
+                      : isUserVerifyRequired ? (
+                        <Redirect to='/verify' />
+                      ) : (
+                        <BusinessProductsList />
+                      )}
                   </Route>
                   <Route exact path='/store/:business_slug'>
-                    {isUserVerifyRequired ? (
-                      <Redirect to='/verify' />
-                    ) : (
-                      <BusinessProductsList />
-                    )}
+                    {queryIntegrationToken && queryIntegrationCode === 'spoonity'
+                      ? <QueryLoginSpoonity token={queryIntegrationToken} notificationState={oneSignalState} />
+                      : isUserVerifyRequired ? (
+                        <Redirect to='/verify' />
+                      ) : (
+                        <BusinessProductsList />
+                      )}
                   </Route>
                   <Route exact path='/store/:business_slug/:category_slug/:product_slug'>
-                    {isUserVerifyRequired ? (
-                      <Redirect to='/verify' />
-                    ) : (
-                      <BusinessProductsList />
-                    )}
+                    {queryIntegrationToken && queryIntegrationCode === 'spoonity'
+                      ? <QueryLoginSpoonity token={queryIntegrationToken} notificationState={oneSignalState} />
+                      : isUserVerifyRequired ? (
+                        <Redirect to='/verify' />
+                      ) : (
+                        <BusinessProductsList />
+                      )}
                   </Route>
                   <Route exact path='/store/:category_slug/:product_slug'>
-                    {isUserVerifyRequired ? (
-                      <Redirect to='/verify' />
-                    ) : (
-                      <BusinessProductsList />
-                    )}
+                    {queryIntegrationToken && queryIntegrationCode === 'spoonity'
+                      ? <QueryLoginSpoonity token={queryIntegrationToken} notificationState={oneSignalState} />
+                      : isUserVerifyRequired ? (
+                        <Redirect to='/verify' />
+                      ) : (
+                        <BusinessProductsList />
+                      )}
                   </Route>
                   <Route exact path='/:business_slug'>
-                    {isUserVerifyRequired ? (
-                      <Redirect to='/verify' />
-                    ) : (
-                      <BusinessProductsList />
-                    )}
+                    {queryIntegrationToken && queryIntegrationCode === 'spoonity'
+                      ? <QueryLoginSpoonity token={queryIntegrationToken} notificationState={oneSignalState} />
+                      : isUserVerifyRequired ? (
+                        <Redirect to='/verify' />
+                      ) : (
+                        <BusinessProductsList />
+                      )}
                   </Route>
                   <Route exact path='/:business_slug/:category_slug/:product_slug'>
-                    {isUserVerifyRequired ? (
-                      <Redirect to='/verify' />
-                    ) : (
-                      <BusinessProductsList />
-                    )}
+                    {queryIntegrationToken && queryIntegrationCode === 'spoonity'
+                      ? <QueryLoginSpoonity token={queryIntegrationToken} notificationState={oneSignalState} />
+                      : isUserVerifyRequired ? (
+                        <Redirect to='/verify' />
+                      ) : (
+                        <BusinessProductsList />
+                      )}
                   </Route>
                   <Route exact path='/:business_slug/:category_slug'>
-                    {isUserVerifyRequired ? (
-                      <Redirect to='/verify' />
-                    ) : (
-                      <BusinessProductsList />
-                    )}
+                    {queryIntegrationToken && queryIntegrationCode === 'spoonity'
+                      ? <QueryLoginSpoonity token={queryIntegrationToken} notificationState={oneSignalState} />
+                      : isUserVerifyRequired ? (
+                        <Redirect to='/verify' />
+                      ) : (
+                        <BusinessProductsList />
+                      )}
                   </Route>
                   <Route path='*'>
                     <PageNotFound />