ordering-ui-external 10.5.2 → 10.6.0

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

@@ -65,7 +65,8 @@ const AddressListUI = (props) => {
     setIsAddressFormOpen,
     isProfile,
     isMobile,
-    onCancel
+    onCancel,
+    isOpenUserData
   } = props
 
   const [, t] = useLanguage()
@@ -190,6 +191,12 @@ const AddressListUI = (props) => {
     }
   }, [])
 
+  useEffect(() => {
+    if (addressList?.addresses?.length === 0 && !addressList.loading && isCustomerMode) {
+      openAddress({})
+    }
+  }, [addressList.loading, addressList?.addresses?.length])
+
   const AddressListCallcenterLayout = ({ children }) => {
     return (
       <AddressHalfContainer>
@@ -197,7 +204,7 @@ const AddressListUI = (props) => {
           {children}
         </List>
         {addressOpen && (
-          <AddressFormContainer isCustomerMode={isCustomerMode}>
+          <AddressFormContainer isCustomerMode={isCustomerMode} isOpenUserData={isOpenUserData}>
             <TitleFormContainer>
               <CloseIcon>
                 <MdClose onClick={() => handleCloseAddressForm()} />
@@ -318,9 +325,13 @@ const AddressListUI = (props) => {
           addressList?.addresses?.length === 0 &&
           !isProductForm &&
           (
-            <WrappNotAddresses>
-              <img src={theme.images?.general?.notFound} alt='Not Found' width='200px' height='112px' loading='lazy' />
-              <h1>{t('NOT_FOUND_ADDRESS', 'Sorry, You don\'t seem to have any addresses.')}</h1>
+            <WrappNotAddresses isCustomerMode={isCustomerMode}>
+              {!isCustomerMode && (
+                <>
+                  <img src={theme.images?.general?.notFound} alt='Not Found' width='200px' height='112px' loading='lazy' />
+                  <h1>{t('NOT_FOUND_ADDRESS', 'Sorry, You don\'t seem to have any addresses.')}</h1>
+                </>
+              )}
             </WrappNotAddresses>
           )}
 

package/src/themes/five/src/components/AddressList/styles.js

@@ -127,7 +127,6 @@ export const AddressItemActions = styled.div`
 `
 
 export const WrappNotAddresses = styled.div`
-  height: 350px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -135,6 +134,13 @@ export const WrappNotAddresses = styled.div`
   width: 80%;
   margin: 20px auto 10px;
 
+  ${({ isCustomerMode }) => isCustomerMode ? css`
+    min-height: 200px;
+    height: 200px
+  ` : css`
+    height: 350px;
+  `}
+
   img {
     width: 200px;
     height: auto;
@@ -218,7 +224,7 @@ export const AddressFormContainer = styled.div`
   position: sticky;
   right: 0;
   top: 0;
-  margin-top: ${({ isCustomerMode }) => isCustomerMode ? '-190px' : '0'};
+  margin-top: ${({ isCustomerMode, isOpenUserData }) => isCustomerMode && !isOpenUserData ? '-190px' : '0'};
   height: 100%;
   padding-left: 10px;
 `

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

@@ -62,9 +62,11 @@ export const Header = (props) => {
     searchValue,
     setSearchValue,
     businessSlug,
-    notificationState
+    notificationState,
+    singleBusinessConfig
   } = props
 
+  const isSingleBusiness = !!singleBusinessConfig?.isActive
   const { pathname } = useLocation()
   const [events] = useEvent()
   const [{ parseDate }] = useUtils()
@@ -508,7 +510,7 @@ export const Header = (props) => {
               onClose={() => setModalIsOpen(false)}
               cateringPreorder={!!cateringTypeString}
               isHeader
-              business={pathname.includes('store') && business}
+              business={(pathname.includes('store') && business) || isSingleBusiness}
               {...cateringValues}
             />
           )}

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

@@ -165,11 +165,11 @@ const MomentControlUI = (props) => {
         return
       }
       _timeLists = hoursList
-        .filter(hour => (Object.keys(business || {})?.length === 0 || schedule?.lapses?.some(lapse =>
-          moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${lapse.open.hour}:${lapse.open.minute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${lapse.close.hour}:${lapse.close.minute}`))) &&
-          moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`) &&
-          (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder))
-        .map(hour => {
+      .filter(hour => (Object.keys(business || {})?.length === 0 || schedule?.lapses?.some(lapse =>
+        moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${lapse.open.hour}:${lapse.open.minute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${lapse.close.hour}:${lapse.close.minute}`))) &&
+        moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`) &&
+        (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder))
+      .map(hour => {
           return {
             value: hour.startTime,
             text: is12hours ? (
@@ -200,7 +200,7 @@ const MomentControlUI = (props) => {
   }, [isAsap])
 
   useEffect(() => {
-    if (!pathname.includes('store') || isCart) {
+    if ((!pathname.includes('store') || isCart) && !props.business) {
       setScheduleList(null)
       return
     }

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

@@ -363,7 +363,7 @@ export const PhoneAutocomplete = (props) => {
       {
         value: 1,
         text: t('DELIVERY', 'Delivery'),
-        description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description'),
+        description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description')
       },
       {
         value: 2,

package/src/themes/five/src/components/PhoneAutocomplete/styles.js

@@ -80,7 +80,7 @@ export const ContentWrapper = styled.div`
   height: 100%;
   padding: 0px 20px 0px;
   width: 70%;
-
+  position: relative;
   .select__control {
     border-radius: 30px;
   }
@@ -131,13 +131,16 @@ export const ContentWrapper = styled.div`
 
 export const WrappBtn = styled.div`
   width: 50%;
-  margin-top: 20px;
+  position: relative;
   button {
+    position: absolute;
+    top: 55px;
     min-width: 130px;
     max-width: 400px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    z-index: 100;
   }
 `
 
@@ -287,6 +290,9 @@ export const SelectContainer = styled.div`
       bottom: 8px;
       position: relative;
     }
+    .select__menu{
+      top: 45px;
+    }
     input {
       position: relative;
       top: -5px;
@@ -377,9 +383,19 @@ export const AdditionalTypesContainer = styled.div`
 `
 
 export const PhoneAutocompleteContainer = styled.div`
-
+  position: relative;
   h2 {
     font-size: 20px;
     margin-bottom: 20px;
   }
 `
+
+export const ContinueButton = styled.span`
+  position: absolute;
+  right: 35px;
+  bottom: 5px;
+  width: 
+  button {
+    cursor: pointer;
+  }
+`

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/SignUpForm/index.js

@@ -417,7 +417,7 @@ const SignUpFormUI = (props) => {
                                         name={field.code}
                                         aria-label={field.code}
                                         className='form'
-                                        placeholder={t(field.code.toUpperCase(), field.name)}
+                                        placeholder={isCustomerMode ? t(field.code.toUpperCase() + '_OPTIONAL', field.name + ' (Optional)') : t(field.code.toUpperCase(), field.name)}
                                         onChange={handleChangeInputEmail}
                                         ref={formMethods.register({
                                           required: !isCustomerMode && isRequiredField(field.code)

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/src/themes/five/src/components/UserFormDetails/index.js

@@ -407,7 +407,7 @@ export const UserFormDetailsUI = (props) => {
                 />
               </InputPhoneNumberWrapper>
             )}
-            {!isCheckout && showCustomerPassword && !requiredFields && (
+            {!isCheckout && showCustomerPassword && !requiredFields && !isCustomerMode && (
               <InputGroup>
                 <p>{t('PASSWORD', 'Password')}</p>
                 <Input
@@ -430,7 +430,7 @@ export const UserFormDetailsUI = (props) => {
                 />
               </InputGroup>
             )}
-            {showNotifications && showCustomerPromotions && !requiredFields && (
+            {showNotifications && showCustomerPromotions && !requiredFields && !isCustomerMode && (
               <>
                 <NotificationsGroupSwitchWrapper>
                   <p>{t('MARKETING_NOTIFICATIONS', 'Marketing Notifications')}</p>
@@ -458,7 +458,7 @@ export const UserFormDetailsUI = (props) => {
                 </NotificationsGroupSwitchWrapper>
               </>
             )}
-            {showLangauges && !requiredFields && (
+            {showLangauges && !requiredFields && !isCustomerMode && (
               <>
                 <LanguageSelectorWrapper>
                   <p>{t('LANGUAGE', 'Language')}</p>

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