ordering-ui-external 1.7.2 → 1.8.0

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

@@ -12,7 +12,6 @@ export const FooterWrapper = styled.div`
   flex-wrap: wrap;
   flex-direction: column;
   border-bottom: 1px solid #d9d9d9;
-
   @media (min-width: 768px) {
     flex-direction: row;
     justify-content: flex-start;
@@ -24,13 +23,11 @@ export const Content = styled.div`
   width: 100%;
   text-align: center;
   margin-bottom: 10px;
-
   > h4 {
     font-weight: 600;
     font-size: 16px;
     margin: 20px 0px 15px 0px;
   }
-
   > div {
     margin: 10px 0;
     > a {
@@ -40,16 +37,12 @@ export const Content = styled.div`
       text-decoration: none;
       color: #344050;
       transition: all 0.2s linear;
-
       &:hover {
         color: ${props => props.theme.colors.primary};
         text-decoration: underline;
       }
     }
   }
-
-
-
   @media (min-width: 768px) {
     width: 50%;
     text-align: left;
@@ -57,7 +50,6 @@ export const Content = styled.div`
       text-align: right;
     `}
   }
-
   @media (min-width: 992px) {
     width: 25%;
     margin: 0;
@@ -69,7 +61,6 @@ export const FooterBottom = styled.div`
   justify-content: space-between;
   align-items: center;
   flex-direction: column;
-
   @media (min-width: 768px) {
     flex-direction: row;
   }
@@ -84,7 +75,6 @@ export const Description = styled.div`
 export const SocialIconList = styled.div`
   display: flex;
   align-items: center;
-
   @media (min-width: 1400px) {
     width: 25%;
     justify-content: space-between;
@@ -100,7 +90,6 @@ export const LanguageWrapper = styled.div`
     margin-left: 15px;
     margin-right: 0px;
   `}
-
   svg {
     font-size: 20px;
   }
@@ -108,7 +97,6 @@ export const LanguageWrapper = styled.div`
     background-color: transparent !important;
     border: none;
     color: #344050 !important;
-
     > div:first-child {
       font-size: 14px;
       text-decoration: underline;
@@ -132,7 +120,6 @@ export const LanguageWrapper = styled.div`
 export const SocialGroup = styled.div`
   display: flex;
   align-items: center;
-
   a {
     color:  #344050;
     display: flex;
@@ -145,10 +132,24 @@ export const SocialGroup = styled.div`
       font-size: 20px;
     }
     transition: all 0.3s ease;
-
     &:hover {
       transform: scale(1.04);
       color: ${props => props.theme.colors.primary};
     }
   }
 `
+
+export const PoweredByOrdering = styled.p`
+  text-align: center;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  white-space: pre;
+  margin-bottom: 10px;
+  a{
+    font-weight: 600;
+  }
+`

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

@@ -93,6 +93,7 @@ export const Header = (props) => {
   const orderTypeList = [t('DELIVERY', 'Delivery'), t('PICKUP', 'Pickup'), t('EAT_IN', 'Eat in'), t('CURBSIDE', 'Curbside'), t('DRIVE_THRU', 'Drive thru')]
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
   const isPreOrderSetting = configState?.configs?.preorder_status_enabled?.value === '1'
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type === 'Chew'
 
   const handleSuccessSignup = (user) => {
     login({
@@ -212,7 +213,7 @@ export const Header = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
-      <HeaderContainer>
+      <HeaderContainer isChew={isChew}>
         <InnerHeader>
           <LeftHeader id='left-side'>
             <SidebarMenu
@@ -223,13 +224,14 @@ export const Header = (props) => {
             />
             <LogoHeader
               onClick={() => handleGoToPage({ page: orderState?.options?.address?.location && !isCustomerMode ? 'search' : 'home' })}
+              isChew={isChew}
             >
-              <img alt='Logotype' width='170px' height='45px' src={orderingTheme?.my_products?.components?.images?.components?.logo?.components?.image || theme?.images?.logos?.logotype} loading='lazy' />
-              <img alt='Isotype' width='35px' height='45px' src={orderingTheme?.my_products?.components?.images?.components?.logo?.components?.image || (isHome ? theme?.images?.logos?.isotypeInvert : theme?.images?.logos?.isotype)} loading='lazy' />
+              <img alt='Logotype' width='170px' height={isChew ? '35px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : orderingTheme?.my_products?.components?.images?.components?.logo?.components?.image || theme?.images?.logos?.logotype} loading='lazy' />
+              <img alt='Isotype' width={isChew ? '70px' : '35px'} height={isChew ? '20px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : orderingTheme?.my_products?.components?.images?.components?.logo?.components?.image || (isHome ? theme?.images?.logos?.isotypeInvert : theme?.images?.logos?.isotype)} loading='lazy' />
             </LogoHeader>
           </LeftHeader>
           {isShowOrderOptions && !props.isCustomLayout && (
-            <Menu id='center-side' className='left-header' isCustomerMode={isCustomerMode}>
+            <Menu id='center-side' className='left-header' isCustomerMode={isCustomerMode} isChew={isChew}>
               {windowSize.width > 820 && isFarAway && (
                 <FarAwayMessage>
                   <TiWarningOutline />

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

@@ -5,7 +5,8 @@ export const Header = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  border-bottom: 1px solid #E9ECEF;
+  background-color: ${props => props.isChew && props.theme.colors.primary};
+  border-bottom: ${props => !props.isChew && css`1px solid #E9ECEF`};
 `
 
 export const InnerHeader = styled.div`
@@ -17,15 +18,15 @@ export const InnerHeader = styled.div`
   align-items: center;
 
   #left-side {
-    width: 20%;
+    width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? '30%' : '25%'};
     justify-content: flex-start;
   }
   #right-side {
-    width: 20%;
+    width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? '30%' : '20%'};
     justify-content: flex-end;
   }
   #center-side {
-    width: calc(60% - 30px);
+    width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? 'calc(60% - 140px)' : 'calc(60% - 30px)'};
   }
 
   @media (min-width: 1024px) {
@@ -51,8 +52,8 @@ export const LogoHeader = styled.div`
   cursor: pointer;
 
   img {
-    width: ${props => props.imgW ?? '35px'};
-    height: ${props => props.imgH ?? '45px'};
+    width: ${props => props.isChew ? '70px' : props.imgW ?? '35px'};
+    height: ${props => props.isChew ? '20px' : props.imgH ?? '45px'};
     margin: 0;
     vertical-align: middle;
     margin-left: 10px;
@@ -64,6 +65,7 @@ export const LogoHeader = styled.div`
 
     @media (min-width: 768px) {
       width: ${props => props.imgW ?? '150px'};
+      height: ${props => props.isChew && '35px'};
     }
   }
 
@@ -86,6 +88,7 @@ export const LogoHeader = styled.div`
 export const LeftHeader = styled.div`
   align-self: center;
   display: flex;
+  align-items: center;
 `
 
 export const RightHeader = styled.div`
@@ -135,7 +138,7 @@ export const Menu = styled.div`
     background: #F8F9FA;
     border: none;
     box-sizing: border-box;
-    border-radius: 50px;
+    border-radius: ${props => props.isChew ? '8px' : '50px'};
     margin: 0 15px;
     flex-grow: 1;
     padding: 0 10px;
@@ -282,8 +285,8 @@ export const CustomerInfo = styled.div`
         white-space: nowrap;
         color: #909BA9;
       }
-      svg {       
-        color: #748194; 
+      svg {
+        color: #748194;
         margin: 0;
         font-size: 20px;
         position: absolute;
@@ -295,7 +298,7 @@ export const CustomerInfo = styled.div`
 
 export const UserEdit = styled.div`
   > :first-child{
-     margin-bottom: 20px;  
+     margin-bottom: 20px;
   }
 `
 
@@ -303,7 +306,7 @@ export const AddressMenu = styled.div`
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
-  color: ${props => props.theme.colors?.headingColor};
+  color: ${props => props.isChew ? props.theme.colors?.backgroundPage : props.theme.colors?.headingColor};
   display: flex;
   align-items: center;
   position: relative;

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useUtils, useLanguage, useConfig, useOrder } from 'ordering-components-external'
+import { useUtils, useLanguage, useConfig, useOrder, useOrderingTheme } from 'ordering-components-external'
 import AiOutlineShoppingCart from '@meronex/icons/ai/AiOutlineShoppingCart'
 import FaMapMarkerAlt from '@meronex/icons/fa/FaMapMarkerAlt'
 
@@ -19,8 +19,10 @@ export const HeaderOption = (props) => {
 
   const [{ configs }] = useConfig()
   const [{ parseDate }] = useUtils()
+  const [{ theme: orderingTheme }] = useOrderingTheme()
   const [, t] = useLanguage()
   const [orderStatus] = useOrder()
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type === 'Chew'
 
   return (
     <>
@@ -29,11 +31,12 @@ export const HeaderOption = (props) => {
           {BeforeElement}
         </React.Fragment>))}
       {
-      props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))
+        props.beforeComponents?.map((BeforeComponent, i) => (
+          <BeforeComponent key={i} {...props} />))
       }
       <Container
         variant={variant}
+        isChew={isChew}
         onClick={() => props.onClick(variant)}
         isHome={props.isHome}
       >
@@ -58,21 +61,21 @@ export const HeaderOption = (props) => {
         )}
         {
           variant === 'delivery' && (
-            <DeliveryType>
+            <DeliveryType isChew={isChew}>
               {(orderTypeList && orderTypeList[orderStatus?.options.type - 1]) || t('DELIVERY', 'Delivery')}
             </DeliveryType>
           )
         }
       </Container>
       {
-      props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))
+        props.afterComponents?.map((AfterComponent, i) => (
+          <AfterComponent key={i} {...props} />))
       }
       {
-      props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))
+        props.afterElements?.map((AfterElement, i) => (
+          <React.Fragment key={i}>
+            {AfterElement}
+          </React.Fragment>))
       }
     </>
   )

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

@@ -30,7 +30,7 @@ export const Container = styled.div`
   `}
 
   ${({ variant }) => variant === 'address' && css`
-    color: #909BA9;
+    color: ${props => props.isChew ? props.theme.colors?.backgroundPage : props.theme.colors?.headingColor};
     display: flex;
     align-items: center;
 
@@ -45,7 +45,7 @@ export const Container = styled.div`
   `}
 
   ${({ variant }) => variant === 'moment' && css`
-    color: #909BA9;
+    color: ${props => props.isChew ? props.theme.colors?.backgroundPage : props.theme.colors?.headingColor};
     display: flex;
     align-items: center;
 

package/src/themes/five/src/components/HomeHero/layouts/OriginalHomeHero/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useTheme } from 'styled-components'
-import { useSession, useOrder, useLanguage, useOrderingTheme } from 'ordering-components-external'
+import { useSession, useOrder, useLanguage, useOrderingTheme, useConfig } from 'ordering-components-external'
 import HiOutlineLocationMarker from '@meronex/icons/hi/HiOutlineLocationMarker'
 import {
   HeroContainer,
@@ -11,7 +11,8 @@ import {
   LogoWrapper,
   UseAccount,
   HeroContent,
-  SectionHeader
+  SectionHeader,
+  PoweredByOrdering
 } from './styles'
 
 import { Modal } from '../../../Modal'
@@ -29,6 +30,7 @@ export const OriginalHomeHero = (props) => {
   const [{ auth }, { login }] = useSession()
   const [orderState] = useOrder()
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
   const [modals, setModals] = useState({ listOpen: false, formOpen: false })
   const theme = useTheme()
   const userCustomer = parseInt(window.localStorage.getItem('user-customer'))
@@ -41,7 +43,7 @@ export const OriginalHomeHero = (props) => {
   const bgImg = orderingTheme?.theme?.my_products?.components?.images?.components?.homepage_background?.components?.image
   const logo = orderingTheme?.theme?.my_products?.components?.images?.components?.logo?.components?.image
   const isFullScreen = orderingTheme?.theme?.my_products?.components?.images?.components?.homepage_image_fullscreen
-
+  const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
   const handleFindBusinesses = () => {
     if (!orderState?.options?.address?.location) {
       setModals({ ...modals, formOpen: true })
@@ -126,13 +128,23 @@ export const OriginalHomeHero = (props) => {
       </ContentWrapper>
 
       {windowSize.width < 576 && !auth && isShowLoginAccount && (
-        <UseAccount>
-          <SectionHeader>
-            {t('YOUR_ACCOUNT', 'Use your account')}
-          </SectionHeader>
-          <Button color='primary' onClick={() => handleOpenLoginSignUp('login')}>{t('LOGIN', 'login')}</Button>
-          <Button color='primary' onClick={() => handleOpenLoginSignUp('signup')}>{t('SIGNUP', 'signUp')}</Button>
-        </UseAccount>
+        <>
+          {enabledPoweredByOrdering && (
+            <PoweredByOrdering>
+              {t('POWERED_BY', 'Powered by')}
+              <a href='https://www.ordering.co'>
+                {' '}{t('ORDERING_CO', 'Ordering.co')}
+              </a>
+            </PoweredByOrdering>
+          )}
+          <UseAccount>
+            <SectionHeader>
+              {t('YOUR_ACCOUNT', 'Use your account')}
+            </SectionHeader>
+            <Button color='primary' onClick={() => handleOpenLoginSignUp('login')}>{t('LOGIN', 'login')}</Button>
+            <Button color='primary' onClick={() => handleOpenLoginSignUp('signup')}>{t('SIGNUP', 'signUp')}</Button>
+          </UseAccount>
+        </>
       )}
 
       <Modal

package/src/themes/five/src/components/HomeHero/layouts/OriginalHomeHero/styles.js

@@ -269,3 +269,11 @@ export const HeroContent = styled.div`
     }
   }
 `
+
+export const PoweredByOrdering = styled.div`
+  text-align: center;
+  margin-top: 10px;
+  a{
+    font-weight: 600;
+  }
+`

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

@@ -1,12 +1,15 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components-external'
-import { Card } from './styles'
+import {
+  Card,
+  CardWrapper,
+  CardsContainer
+} from './styles'
 import { OrdersContainer } from '../OrdersOption/styles'
 
-import { AutoScroll } from '../AutoScroll'
-import { Tabs } from '../../styles/Tabs'
 import { Button } from '../../styles/Buttons'
 import { SingleOrderCard } from '../SingleOrderCard'
+import { Pagination } from '../Pagination'
 
 export const HorizontalOrdersLayout = (props) => {
   const {
@@ -15,11 +18,10 @@ export const HorizontalOrdersLayout = (props) => {
     isBusinessesPage,
     customArray,
     businessesIds,
-    activeOrders,
-    pastOrders,
     isCustomerMode,
     isProducts,
-    isBusiness
+    isBusiness,
+    handleChangePage
   } = props
 
   const orders = customArray || props.orders
@@ -82,36 +84,22 @@ export const HorizontalOrdersLayout = (props) => {
       ordersLength={orders?.length <= 1}
       isBusinessesPage={isBusinessesPage}
     >
-      {!isBusinessesPage ? (
-        <Tabs>
-          <AutoScroll scrollId={activeOrders ? 'activeOrders' : (pastOrders ? 'pastOrders' : 'prevOrders')}>
-            {orders.length > 0 && ordersToShow.map(order => (
-              <SingleOrderCard
-                {...props}
-                key={order.id}
-                order={order}
-              />
-            ))}
-            {pagination?.totalPages && pagination?.currentPage < pagination?.totalPages && (
-              <Card
-                flex
-                nobg
-                isBusinessesPage={isBusinessesPage}
-                isCustomerMode={isCustomerMode}
-              >
-                <Button
-                  className='load-orders'
-                  color='primary'
-                  outline
-                  onClick={loadMoreOrders}
-                >
-                  {t('LOAD_MORE_ORDERS', 'Load more orders')}
-                </Button>
-              </Card>
-            )}
-          </AutoScroll>
-        </Tabs>
-      ) : <Orders />}
+      <CardWrapper>
+        <CardsContainer>
+          {orders.length > 0 && ordersToShow.map(order => (
+            <SingleOrderCard
+              {...props}
+              key={order.id}
+              order={order}
+            />
+          ))}
+        </CardsContainer>
+        <Pagination
+          currentPage={pagination.currentPage}
+          totalPages={Math.ceil(pagination?.totalPages)}
+          handleChangePage={handleChangePage}
+        />
+      </CardWrapper>
     </OrdersContainer>
   )
 }

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

@@ -14,9 +14,20 @@ export const Content = styled.div`
   `}
 `
 
+export const CardWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`
+export const CardsContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  overflow-x: auto;
+`
+
 export const Price = styled.div`
   width: 35%;
-  
+
   ${({ isCustomerMode }) => isCustomerMode ? css`
   text-align: end;
   white-space: nowrap;

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

@@ -52,6 +52,7 @@ export const InputPhoneNumber = (props) => {
           placeholder={t('PHONE_NUMBER', 'Phone number')}
           defaultCountry={configs?.default_country_code?.value}
           value={value}
+          name='telefono'
           displayInitialValueAsLocalNumber
           onChange={(val) => setValue && setValue(val, isValidPhoneNumber(val))}
         />

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

@@ -415,6 +415,7 @@ const LoginFormUI = (props) => {
           <FormInput
             noValidate
             isPopup={isPopup}
+            autoComplete='on'
           >
             {
               props.beforeMidElements?.map((BeforeMidElements, i) => (
@@ -473,7 +474,7 @@ const LoginFormUI = (props) => {
                       pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
                     })}
                     onChange={handleChangeInputEmail}
-                    autoComplete='off'
+                    autoComplete='on'
                     isError={formMethods.errors?.email}
                   />
                   <InputBeforeIcon>

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

@@ -27,7 +27,6 @@ export const MyOrders = (props) => {
   const [orderingTheme] = useOrderingTheme()
   const layout = orderingTheme?.theme?.orders?.components?.layout?.type || 'original'
 
-  const [selectItem, setSelectItem] = useState('all')
   const [isEmptyActive, setIsEmptyActive] = useState(false)
   const [isEmptyPast, setIsEmptyPast] = useState(false)
   const [isEmptyPreorder, setIsEmptyPreorder] = useState(false)
@@ -35,13 +34,6 @@ export const MyOrders = (props) => {
   const [isEmptyBusinesses, setIsEmptyBusinesses] = useState(false)
   const [businessOrderIds, setBusinessOrderIds] = useState([])
 
-  const filterList = [
-    { key: 'all', value: t('ALL', 'All') },
-    { key: 'active', value: t('ACTIVE', 'Active') },
-    { key: 'past', value: t('PAST', 'Past') },
-    { key: 'preorder', value: t('PREORDERS', 'Preorders') }
-  ]
-
   const MyOrdersMenu = [
     { key: 'orders', value: t('ORDERS', 'Orders') },
     { key: 'business', value: t('BUSINESS', 'Business') },
@@ -51,11 +43,6 @@ export const MyOrders = (props) => {
   const notOrderOptions = ['business', 'products', 'professionals']
   const allEmpty = (isEmptyActive && isEmptyPast && isEmptyPreorder) || ((isEmptyBusinesses || businessOrderIds?.length === 0) && hideOrders)
 
-  const handleChangeFilter = (key) => {
-    if (selectItem === key) setSelectItem('all')
-    else setSelectItem(key)
-  }
-
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -99,19 +86,6 @@ export const MyOrders = (props) => {
             </Tabs>
           </MyOrdersMenuContainer>
         )}
-        {!(isEmptyActive && isEmptyPast && isEmptyPreorder) && selectedOption === 'orders' && layout !== 'appointments' && (
-          <OrderGroupFilterWrapper>
-            {filterList?.map((order, i) => (
-              <Button
-                key={i}
-                color={selectItem === order.key ? 'primary' : 'secundary'}
-                onClick={() => handleChangeFilter(order.key)}
-              >
-                {order.value}{selectItem === order.key && <MdClose />}
-              </Button>
-            ))}
-          </OrderGroupFilterWrapper>
-        )}
         {selectedOption === 'orders' && (
           <>
             {(isEmptyActive && isEmptyPast && isEmptyPreorder) ? (
@@ -126,42 +100,26 @@ export const MyOrders = (props) => {
               </NoOrdersWrapper>
             ) : (
               <>
-                {(selectItem === 'all' || selectItem === 'preorder') && (
-                  <>
-                    <OrdersOption
-                      {...props}
-                      preOrders
-                      horizontal
-                      setIsEmptyPreorder={setIsEmptyPreorder}
-                      selectItem={selectItem}
-                    />
-                    {!isEmptyPreorder && <Divider />}
-                  </>
-                )}
-                {(selectItem === 'all' || selectItem === 'active') && (
-                  <>
-                    <OrdersOption
-                      {...props}
-                      activeOrders
-                      horizontal
-                      setIsEmptyActive={setIsEmptyActive}
-                      selectItem={selectItem}
-                    />
-                    {!isEmptyActive && <Divider />}
-                  </>
-                )}
-                {(selectItem === 'all' || selectItem === 'past') && (
-                  <>
-                    <OrdersOption
-                      {...props}
-                      pastOrders
-                      horizontal
-                      setIsEmptyPast={setIsEmptyPast}
-                      selectItem={selectItem}
-                    />
-                    {!isEmptyPast && <Divider />}
-                  </>
-                )}
+                <OrdersOption
+                  {...props}
+                  preOrders
+                  horizontal
+                  setIsEmptyPreorder={setIsEmptyPreorder}
+                />
+                {!isEmptyPreorder && <Divider />}
+                <OrdersOption
+                  {...props}
+                  activeOrders
+                  horizontal
+                  setIsEmptyActive={setIsEmptyActive}
+                />
+                {!isEmptyActive && <Divider />}
+                <OrdersOption
+                  {...props}
+                  pastOrders
+                  setIsEmptyPast={setIsEmptyPast}
+                />
+                {!isEmptyPast && <Divider />}
               </>
             )}
           </>

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

@@ -20,8 +20,7 @@ export const Container = styled.div`
   @media (min-width: 769px) {
     ${({ hideOrders }) => !hideOrders ? css`
       padding: 40px;
-      width: 80%;
-    
+      width: 100%;
       @media (min-width: 993px) {
         min-height: calc(100vh - 382px);
       }