ordering-ui-external 10.2.1 → 10.3.0

package/src/themes/six/src/components/Header/index.js

@@ -32,18 +32,25 @@ import { LanguageSelector } from '../LanguageSelector'
 import { CartContent } from '../CartContent'
 import { SidebarMenu } from '../SidebarMenu'
 import { HeaderOption } from '../HeaderOption'
+import { LoginForm } from '../../../../../themes/five/src/components/LoginForm'
+import { SignUpForm } from '../../../../../themes/five/src/components/SignUpForm'
+import { ForgotPasswordForm } from '../../../../../themes/five/src/components/ForgotPasswordForm'
+
+
 export const Header = (props) => {
   const {
     isHome,
     location,
     isShowOrderOptions,
     isHideSignup,
-    isCustomerMode
+    isCustomerMode,
+    notificationState,
+    useModalMode
   } = props
   const { pathname } = useLocation()
   const [events] = useEvent()
   const [, t] = useLanguage()
-  const [{ auth }] = useSession()
+  const [{ auth }, { login }] = useSession()
   const [orderState, { refreshOrderOptions }] = useOrder()
   const [openPopover, setOpenPopover] = useState({})
   const theme = useTheme()
@@ -54,6 +61,9 @@ export const Header = (props) => {
   const [customerModalOpen, setCustomerModalOpen] = useState(false)
   const [modalSelected, setModalSelected] = useState(null)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [authModalOpen, setAuthModalOpen] = useState(false)
+  const [modalPageToShow, setModalPageToShow] = useState(null)
+
   const cartsWithProducts = (orderState?.carts && Object.values(orderState?.carts).filter(cart => cart.products && cart.products?.length > 0)) || null
   const windowSize = useWindowSize()
   const onlineStatus = useOnlineStatus()
@@ -99,6 +109,39 @@ export const Header = (props) => {
       refreshOrderOptions()
     }
   }
+
+  const handleCustomModalClick = (e, { page }) => {
+    e.preventDefault()
+    setModalPageToShow(page)
+  }
+
+  const closeAuthModal = () => {
+    setAuthModalOpen(false)
+    setModalPageToShow(null)
+  }
+
+  const handleSuccessSignup = (user) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+  }
+
+  const handleSuccessLogin = (user) => {
+    if (user) {
+      closeAuthModal()
+    }
+  }
+
+  const handleOpenLoginSignUp = (index) => {
+    if (isCustomerMode) {
+      events.emit('go_to_page', { page: 'home' })
+    } else {
+      setModalPageToShow(index)
+      setAuthModalOpen(true)
+    }
+  }
+
   useEffect(() => {
     if (isCustomerMode) {
       setCustomerModalOpen(false)
@@ -171,9 +214,9 @@ export const Header = (props) => {
                 {
                   !auth && windowSize.width > 768 && (
                     <>
-                      <MenuLink onClick={() => handleGoToPage({ page: 'signin' })} name='signin'>{t(theme?.defaultLanguages?.SIGN_IN || 'Sign in')}</MenuLink>
+                      <MenuLink onClick={() => useModalMode ? handleOpenLoginSignUp('login') : handleGoToPage({ page: 'signin' })} name='signin'>{t(theme?.defaultLanguages?.SIGN_IN || 'Sign in')}</MenuLink>
                       {!isHideSignup && (
-                        <MenuLink onClick={() => handleGoToPage({ page: 'signup' })} highlight={1} name='signup'>{t(theme?.defaultLanguages?.SIGN_UP || 'Join now')}</MenuLink>
+                        <MenuLink onClick={() => useModalMode ? handleOpenLoginSignUp('signup') : handleGoToPage({ page: 'signup' })} highlight={1} name='signup'>{t(theme?.defaultLanguages?.SIGN_UP || 'Join now')}</MenuLink>
                       )}
                     </>
                   )
@@ -288,6 +331,72 @@ export const Header = (props) => {
             </UserEdit>
           </Modal>
         )}
+        {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>
+        )}
         <Confirm
           title={t('CUSTOMER', theme?.defaultLanguages?.CUSTOMER || 'Customer')}
           content={confirm.content}

package/src/utils/index.js

@@ -707,10 +707,17 @@ export const calendarLanguages = {
 }
 
 export const getCateringValues = (cateringTypeString, configs) => {
-  const splitCateringValue = (configName) => Object.values(configs || {})
-    ?.find(config => config?.key === configName)
-    ?.value?.split('|')
-    ?.find(val => val.includes(cateringTypeString))?.split(',')[1]
+  let splitCateringValue
+  if (configs?.preorder_slot_interval) {
+    splitCateringValue = (configName) => configs[configName]
+      ?.value?.split('|')
+      ?.find(val => val.includes(cateringTypeString))?.split(',')[1]
+  } else {
+    splitCateringValue = (configName) => Object.values(configs || {})
+      ?.find(config => config?.key === configName)
+      ?.value?.split('|')
+      ?.find(val => val.includes(cateringTypeString))?.split(',')[1]
+  }
   const preorderSlotInterval = parseInt(splitCateringValue('preorder_slot_interval'))
   const preorderLeadTime = parseInt(splitCateringValue('preorder_lead_time'))
   const preorderTimeRange = parseInt(splitCateringValue('preorder_time_range'))

package/template/app.js

@@ -171,8 +171,8 @@ export const App = () => {
     }
   }
 
-  const websiteThemeType = themeUpdated?.theme?.my_products?.components?.website_theme?.components?.type
-  const websiteThemeBusinessSlug = themeUpdated?.theme?.my_products?.components?.website_theme?.components?.business_slug
+  const websiteThemeType = themeUpdated?.my_products?.components?.website_theme?.components?.type
+  const websiteThemeBusinessSlug = themeUpdated?.my_products?.components?.website_theme?.components?.business_slug
   const updatedBusinessSlug = (websiteThemeType === 'single_store' && websiteThemeBusinessSlug) || settings?.businessSlug
 
   const businessesSlug = {
@@ -185,21 +185,21 @@ export const App = () => {
     businessSlug: businessesSlug[isKioskApp ? 'kiosk' : 'marketplace']
   }
 
-  const signUpBusinesslayout = themeUpdated?.theme?.business_signup?.components?.layout?.type === 'old'
+  const signUpBusinesslayout = themeUpdated?.business_signup?.components?.layout?.type === 'old'
     ? 'old'
     : 'new'
 
-  const signUpDriverlayout = themeUpdated?.theme?.driver_signup?.components?.layout?.type === 'old'
+  const signUpDriverlayout = themeUpdated?.driver_signup?.components?.layout?.type === 'old'
     ? 'old'
     : 'new'
 
   const HeaderComponent =
     isKioskApp ? HeaderKiosk
-      : themeUpdated?.theme?.header?.components?.layout?.type === 'old'
+      : themeUpdated?.header?.components?.layout?.type === 'old'
         ? HeaderOld
-        : themeUpdated?.theme?.header?.components?.layout?.type === 'red'
+        : themeUpdated?.header?.components?.layout?.type === 'red'
           ? HeaderRed
-          : themeUpdated?.theme?.header?.components?.layout?.type === 'starbucks'
+          : themeUpdated?.header?.components?.layout?.type === 'starbucks'
             ? HeaderStarbucks
             : Header
 
@@ -210,7 +210,7 @@ export const App = () => {
   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 isHideFooter = themeUpdated?.theme?.footer?.hidden
+  const isHideFooter = themeUpdated?.footer?.hidden
 
   const isHome = location.pathname === '/' || location.pathname === '/home'
   const isFooterPage = location.pathname === '/pages/footer' || isKioskApp || isHideFooter