ordering-ui-external 10.2.2 → 10.3.1

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { nanoid } from 'nanoid'
-import { useUtils, useLanguage, useSession, useConfig, ProductForm as ProductFormController, useOrder } from 'ordering-components-external'
+import { useUtils, useLanguage, useSession, useConfig, useOrder, ProductForm as ProductFormController } from 'ordering-components-external'
 import Skeleton from 'react-loading-skeleton'
 import { Alert } from '../Confirm'
 import { Modal } from '../Modal'
@@ -160,6 +160,7 @@ const ServiceFormUI = (props) => {
   }
 
   const isBusyTime = (professional, selectedMoment) => {
+    if (!professional?.schedule) return true
     if (!selectedMoment) return false
     const startDay = moment(selectedMoment).utc().format('d')
     const isStartScheduleEnabled = professional?.schedule?.[startDay]?.enabled
@@ -183,7 +184,7 @@ const ServiceFormUI = (props) => {
   }
 
   const handleClickOutside = (e) => {
-    if (dropDownRef?.current.contains(e.target)) return
+    if (dropDownRef?.current?.contains(e.target)) return
     setIsDropDown(false)
   }
 
@@ -251,7 +252,7 @@ const ServiceFormUI = (props) => {
 
   useEffect(() => {
     if (selectDate === null || currentProfessional === null) return
-    const _times = getTimeList(selectDate, currentProfessional)
+    const _times = currentProfessional?.schedule ? getTimeList(selectDate, currentProfessional) : []
     setTimeList(_times)
   }, [selectDate, currentProfessional])
 
@@ -319,79 +320,92 @@ const ServiceFormUI = (props) => {
               <p>{product?.description}</p>
             </HeaderInfoWrapper>
             <Divider />
-            <ProfessionalInfoWrapper>
-              <SectionHeader>
-                <h2>{t('PROFESSIONALS', 'Professionals')}</h2>
-                <span>{t('REQUIRED', 'Required')}</span>
-              </SectionHeader>
-              <ProfessionalSelectWrapper ref={dropDownRef}>
-                <SelectedItem onClick={() => setIsDropDown(prev => !prev)}>
-                  {currentProfessional ? (
-                    <InfoWrapper>
-                      {currentProfessional?.photo ? (
-                        <ProfessionalPhoto
-                          bgimage={currentProfessional?.photo}
-                        />
-                      ) : <FaUserAlt />}
-                      <NameWrapper>
-                        <p>{currentProfessional?.name} {currentProfessional?.lastname}</p>
-                        <StatusInfo available={!isBusyTime(currentProfessional, dateSelected)}>
-                          {isBusyTime(currentProfessional, dateSelected) ? (
-                            <>
-                              <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
-                            </>
-                          ) : (
-                            <span className='status'>{t('AVAILABLE', 'Available')}</span>
-                          )}
-                        </StatusInfo>
-                      </NameWrapper>
-                    </InfoWrapper>
-                  ) : (
-                    <p>{t('SELECT_PROFESSIONAL', 'Select professional')}</p>
+            {!professionalSelected && (
+              <ProfessionalInfoWrapper>
+                <SectionHeader>
+                  <h2>{t('PROFESSIONALS', 'Professionals')}</h2>
+                  <span>{t('REQUIRED', 'Required')}</span>
+                </SectionHeader>
+                <ProfessionalSelectWrapper ref={dropDownRef}>
+                  <SelectedItem onClick={() => setIsDropDown(prev => !prev)}>
+                    {currentProfessional ? (
+                      <InfoWrapper>
+                        {currentProfessional?.photo ? (
+                          <ProfessionalPhoto
+                            bgimage={currentProfessional?.photo}
+                          />
+                        ) : <FaUserAlt />}
+                        <NameWrapper>
+                          <p>{currentProfessional?.name} {currentProfessional?.lastname}</p>
+                          <StatusInfo available={!isBusyTime(currentProfessional, dateSelected)}>
+                            {currentProfessional?.schedule ? (
+                              <>
+                                {isBusyTime(currentProfessional, dateSelected) ? (
+                                  <>
+                                    <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
+                                  </>
+                                ) : (
+                                  <span className='status'>{t('AVAILABLE', 'Available')}</span>
+                                )}
+                              </>
+                            ) : (
+                              <span className='status'>{t('NOT_AVAILABLE', 'Not available')}</span>
+                            )}
+                          </StatusInfo>
+                        </NameWrapper>
+                      </InfoWrapper>
+                    ) : (
+                      <p>{t('SELECT_PROFESSIONAL', 'Select professional')}</p>
+                    )}
+                    <ChevronDown />
+                  </SelectedItem>
+                  {isDropDown && (
+                    <DropDownWrapper>
+                      {professionalListState?.professionals?.map((professional) => (
+                        <SelectedItem
+                          key={professional?.id}
+                          isDropDown
+                          active={professional?.id === currentProfessional?.id}
+                          onClick={() => handleChangeProfessional(professional)}
+                        >
+                          <InfoWrapper>
+                            {professional?.photo ? (
+                              <ProfessionalPhoto
+                                bgimage={professional?.photo}
+                              />
+                            ) : <FaUserAlt />}
+                            <NameWrapper>
+                              <p>{professional?.name} {professional?.lastname}</p>
+                              <StatusInfo available={!isBusyTime(professional, dateSelected)}>
+                                {professional?.schedule ? (
+                                  <>
+                                    {isBusyTime(professional, dateSelected) ? (
+                                      <>
+                                        <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
+                                      </>
+                                    ) : (
+                                      <span className='status'>{t('AVAILABLE', 'Available')}</span>
+                                    )}
+                                  </>
+                                ) : (
+                                  <span className='status'>{t('NOT_AVAILABLE', 'Not available')}</span>
+                                )}
+                              </StatusInfo>
+                            </NameWrapper>
+                          </InfoWrapper>
+                        </SelectedItem>
+                      ))}
+                    </DropDownWrapper>
                   )}
-                  <ChevronDown />
-                </SelectedItem>
-                {isDropDown && (
-                  <DropDownWrapper>
-                    {professionalListState?.professionals?.map((professional) => (
-                      <SelectedItem
-                        key={professional?.id}
-                        isDropDown
-                        active={professional?.id === currentProfessional?.id}
-                        onClick={() => handleChangeProfessional(professional)}
-                      >
-                        <InfoWrapper>
-                          {professional?.photo ? (
-                            <ProfessionalPhoto
-                              bgimage={professional?.photo}
-                            />
-                          ) : <FaUserAlt />}
-                          <NameWrapper>
-                            <p>{professional?.name} {professional?.lastname}</p>
-                            <StatusInfo available={!isBusyTime(professional, dateSelected)}>
-                              {isBusyTime(professional, dateSelected) ? (
-                                <>
-                                  <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
-                                </>
-                              ) : (
-                                <span className='status'>{t('AVAILABLE', 'Available')}</span>
-                              )}
-                            </StatusInfo>
-                          </NameWrapper>
-                        </InfoWrapper>
-                      </SelectedItem>
-                    ))}
-                  </DropDownWrapper>
-                )}
-
-              </ProfessionalSelectWrapper>
-            </ProfessionalInfoWrapper>
+                </ProfessionalSelectWrapper>
+              </ProfessionalInfoWrapper>
+            )}
             <ScheduleWrapper>
               <SectionHeader>
                 <h2>{t('SCHEDULE', 'Schedule')}</h2>
                 <span>{t('REQUIRED', 'Required')}</span>
               </SectionHeader>
-              {currentProfessional ? (
+              {currentProfessional?.schedule ? (
                 <OrderTimeWrapper>
                   <DateWrapper>
                     <MonthYearLayer>
@@ -482,9 +496,9 @@ const ServiceFormUI = (props) => {
                 <Button
                   onClick={() => handleAddProduct()}
                   color='primary'
-                  disabled={isBusyTime(currentProfessional, dateSelected)}
+                  disabled={isBusyTime(currentProfessional, dateSelected) || orderState?.loading}
                 >
-                  {t('BOOK', 'Book')}
+                  {orderState?.loading ? t('LOADING', theme?.defaultLanguages?.LOADING || 'Loading') : t('BOOK', 'Book')}
                 </Button>
               )}
               {(!auth || isSoldOut || maxProductQuantity <= 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