ordering-ui-external 14.1.46 → 14.1.47

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

@@ -168,20 +168,24 @@ export const Header = (props) => {
         {isShowOrderOptions && (
           <>
             <Menu className='left-header' id='center-side'>
-              <AddressMenu
-                onClick={(e) => handleClickUserCustomer(e)}
-              >
-                <GeoAlt /> <span><p>{orderState.options?.address?.address?.split(',')?.[0] || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}</p></span>
-              </AddressMenu>
-              <Divider />
-              {isCustomerMode && windowSize.width > 450 && (
+              {windowSize.width > 820 && (
+                <>
+                  <AddressMenu
+                    onClick={(e) => handleClickUserCustomer(e)}
+                  >
+                    <GeoAlt /> <span><p>{orderState.options?.address?.address?.split(',')?.[0] || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}</p></span>
+                  </AddressMenu>
+                  <Divider />
+                </>
+              )}
+              {isCustomerMode && (
                 <CustomerInfo
                   onClick={(e) => handleClickUserCustomer(e)}
                 >
                   <span>
                     <p>
-                      {windowSize.width > 940 ? userCustomer?.name : cutCharactersName({ str: userCustomer?.name })}
-                      {' '}{windowSize.width > 940 ? userCustomer?.lastname : null}
+                      {windowSize.width > 1200 ? userCustomer?.name : cutCharactersName({ str: userCustomer?.name })}
+                      {' '}{windowSize.width > 1200 ? userCustomer?.lastname : null}
                     </p>
                   </span>
                   <span
@@ -218,14 +222,12 @@ export const Header = (props) => {
           </>
         )}
         <>
-          {user?.level === 0 && (
+          {user?.level === 0 && windowSize.width > 1200 && (
             <>
               {!isShowOrderOptions && (
                 <Menu className='left-header invisible' id='center-side' />
               )}
               <AdminAreaPopover
-                withLogout
-                isCustomerMode={isCustomerMode}
                 open={openPopover.admin}
                 onClick={() => handleTogglePopover('admin')}
                 onClose={() => handleClosePopover('admin')}

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

@@ -16,25 +16,7 @@ export const InnerHeader = styled.div`
   align-items: center;
 
   #center-side {
-    width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? 'calc(60% - 140px)' : 'calc(60% - 30px)'};
-  }
-
-  @media (min-width: 1024px) {
-    #center-side {
-      width: calc(60% - 100px);
-    }
-  }
-
-  @media (min-width: 1200px) {
-    #center-side {
-      width: calc(60% - 160px);
-    }
-  }
-
-  @media (min-width: 1500px) {
-    #center-side {
-      width: calc(60% - 200px);
-    }
+    width: calc(60% - 30px);
   }
 `
 
@@ -241,32 +223,28 @@ export const SubMenu = styled(InnerHeader)`
 `
 
 export const CustomerInfo = styled.div`
-  display: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
   flex: 1;
   position: relative;
-  @media (min-width: 450px) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
 
-    span {
-      display: flex;
-      align-items: center;
+  span {
+    align-items: center;
+    margin: 0;
+    p {
+      max-width: 250px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #909BA9;
       margin: 0;
-      p {
-        max-width: 250px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        color: #909BA9;
-        margin: 0;
-      }
-      svg {
-        color: #748194;
-        margin: 0;
-        font-size: 20px;
-      }
+    }
+    svg {
+      color: #748194;
+      margin: 0;
+      font-size: 20px;
     }
   }
 `

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useUtils, useLanguage, useConfig, useOrder } from 'ordering-components-external'
-import AiOutlineShoppingCart from '@meronex/icons/ai/AiOutlineShoppingCart'
+import { Cart3 } from 'react-bootstrap-icons'
 import FaMapMarkerAlt from '@meronex/icons/fa/FaMapMarkerAlt'
 
 import {
@@ -23,57 +23,36 @@ export const HeaderOption = (props) => {
   const [orderStatus] = useOrder()
 
   return (
-    <>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
+    <Container
+      variant={variant}
+      onClick={() => props.onClick(variant)}
+    >
+      {variant === 'cart' && (
+        <span>
+          <Cart3 />
+          {totalCarts > 0 && <span>{totalCarts}</span>}
+        </span>
+      )}
+      {variant === 'address' && (
+        <>
+          <FaMapMarkerAlt id='icon' />
+          {addressState || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
+        </>
+      )}
+      {variant === 'moment' && (
+        <>
+          {momentState
+            ? parseDate(momentState, { outputFormat: configs?.dates_moment_format?.value })
+            : t('ASAP_ABBREVIATION', 'ASAP')}
+        </>
+      )}
       {
-      props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))
+        variant === 'delivery' && (
+          <DeliveryType>
+            {(orderTypeList && orderTypeList[orderStatus?.options.type - 1]) || t('DELIVERY', 'Delivery')}
+          </DeliveryType>
+        )
       }
-      <Container
-        variant={variant}
-        onClick={() => props.onClick(variant)}
-        isHome={props.isHome}
-      >
-        {variant === 'cart' && (
-          <span>
-            <AiOutlineShoppingCart id='icon' />
-            {totalCarts > 0 && <p>{totalCarts}</p>}
-          </span>
-        )}
-        {variant === 'address' && (
-          <>
-            <FaMapMarkerAlt id='icon' />
-            {addressState || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
-          </>
-        )}
-        {variant === 'moment' && (
-          <>
-            {momentState
-              ? parseDate(momentState, { outputFormat: configs?.dates_moment_format?.value })
-              : t('ASAP_ABBREVIATION', 'ASAP')}
-          </>
-        )}
-        {
-          variant === 'delivery' && (
-            <DeliveryType>
-              {(orderTypeList && orderTypeList[orderStatus?.options.type - 1]) || t('DELIVERY', 'Delivery')}
-            </DeliveryType>
-          )
-        }
-      </Container>
-      {
-      props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))
-      }
-      {
-      props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))
-      }
-    </>
+    </Container>
   )
 }

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

@@ -5,9 +5,7 @@ export const Container = styled.div`
 
   ${({ variant }) => variant === 'cart' && css`
     > span {
-      cursor: pointer;
-      height: 20px;
-      padding: 10px 9px;
+      padding: 10px;
       display: flex;
       align-items: center;
       background: ${props => props.theme.colors.primary};
@@ -21,7 +19,7 @@ export const Container = styled.div`
           margin-right: 10px;
         ` : css`
           margin-left: 10px;
-        `} 
+        `}
       }
       svg {
         font-size: 17px;

package/src/themes/callcenterOriginal/src/components/SidebarMenu/index.js

@@ -9,10 +9,13 @@ import AiOutlineHome from '@meronex/icons/ai/AiOutlineHome'
 import BiStore from '@meronex/icons/bi/BiStore'
 import FaUserCircle from '@meronex/icons/fa/FaUserCircle'
 import BiHelpCircle from '@meronex/icons/bi/BiHelpCircle'
+import GiHistogram from '@meronex/icons/gi/GiHistogram'
+import BsGraphUp from '@meronex/icons/bs/BsGraphUp'
 
 import { useEvent, useLanguage, useOrder, useSession } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 
+import { capitalize } from '../../../../../utils'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { LogoutButton } from '../../../../../components/LogoutButton'
 import { Modal } from '../Modal'
@@ -35,9 +38,20 @@ import {
   MobileMessage
 } from './styles'
 
+const extraOptions = [
+  { name: 'profile', pathname: '/profile', displayName: 'view account', key: 'view_account' },
+  { name: 'help', pathname: '/help', displayName: 'help', key: 'help' }
+]
+
+const adminOptionsDefault = [
+  { name: 'orderlist', pathname: '/orderlist', displayName: 'order list', key: 'ORDER_LIST' },
+  { name: 'deliveries', pathname: '/deliveries', displayName: 'delivery dashboard', key: 'DELIVERY_DASHBOARD' },
+  { name: 'drivers_dashboard', pathname: '/drivers', displayName: 'drivers dashboard', key: 'DRIVERS_DASHBOARD' }
+]
+
 export const SidebarMenu = (props) => {
   const { auth, isHideSignup, userCustomer, isCustomerMode } = props
-  const [{ login }] = useSession()
+  const [sessionState, { login }] = useSession()
   const [events] = useEvent()
   const [, t] = useLanguage()
   const [{ options }] = useOrder()
@@ -48,8 +62,6 @@ export const SidebarMenu = (props) => {
   const [modalPageToShow, setModalPageToShow] = useState(null)
   const [showMessage, setShowMessage] = useState(false)
 
-  const isHome = window.location.pathname === '/' || window.location.pathname === '/home'
-
   const closeModal = () => {
     setModalIsOpen(false)
     setModalPageToShow(null)
@@ -104,21 +116,26 @@ export const SidebarMenu = (props) => {
   }, [width])
 
   useEffect(() => {
-    if(!isCustomerMode) return
+    if (!isCustomerMode) return
     if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
       setShowMessage(true)
     }
   }, [])
 
+  const getMenuIcon = (icon) => {
+    const list = {
+      profile: <FaRegAddressCard />,
+      help: <BiHelpCircle />,
+      orderlist: <FaRegListAlt />,
+      deliveries: <GiHistogram />,
+      drivers_dashboard: <BsGraphUp />
+    }
+    return list[icon]
+  }
+
   return (
     <>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
-        {showMessage && (
+      {showMessage && (
         <MobileMessage>
           <div>
             <CloseIcon onClick={() => setShowMessage(false)} />
@@ -128,18 +145,13 @@ export const SidebarMenu = (props) => {
       )}
       <Container auth={auth}>
         <IconContent
-          isHome={isHome}
           aria-label='menu'
           onClick={() => actionSidebar(true)}
         >
           <IosMenu />
         </IconContent>
-        <SidebarContent
-          id='sidebar_menu'
-          isHome={isHome}
-        >
+        <SidebarContent id='sidebar_menu'>
           <MenuClose
-            isHome={isHome}
             aria-label='close'
             onClick={() => actionSidebar(false)}
           >
@@ -147,17 +159,15 @@ export const SidebarMenu = (props) => {
           </MenuClose>
 
           {userCustomer && (
-            <MenuLink isHome={isHome} isCustomer={userCustomer}>
+            <MenuLink isCustomer={userCustomer}>
               <WrappContent>
                 <MenuLinkIcon
-                  isHome={isHome}
                   active={false}
                 >
                   <FaUserCircle />
                 </MenuLinkIcon>
                 <MenuLinkText>
                   <TextInfo
-                    isHome={isHome}
                     active={false}
                   >
                     {`${userCustomer?.name} ${userCustomer?.lastname}`}
@@ -172,13 +182,9 @@ export const SidebarMenu = (props) => {
             </MenuLink>
           )}
 
-          <MenuLink
-            isHome={isHome}
-            onClick={() => handleGoToPage({ page: options?.address?.location ? 'search' : 'home' })}
-          >
+          <MenuLink onClick={() => handleGoToPage({ page: options?.address?.location ? 'search' : 'home' })}>
             <WrappContent>
               <MenuLinkIcon
-                isHome={isHome}
                 active={
                   window.location.pathname === '/' ||
                   window.location.pathname === '/home' ||
@@ -193,7 +199,6 @@ export const SidebarMenu = (props) => {
               </MenuLinkIcon>
               <MenuLinkText>
                 <TextInfo
-                  isHome={isHome}
                   active={
                     window.location.pathname === '/' ||
                     window.location.pathname === '/home' ||
@@ -217,75 +222,57 @@ export const SidebarMenu = (props) => {
 
           {auth && (
             <>
-              <MenuLink
-                isHome={isHome}
-                onClick={() => handleGoToPage({ page: 'profile' })}
-              >
-                <WrappContent>
-                  <MenuLinkIcon
-                    isHome={isHome}
-                    active={
-                      window.location.pathname === '/profile'
-                    }
-                  >
-                    <FaRegAddressCard />
-                  </MenuLinkIcon>
-                  <MenuLinkText>
-                    <TextInfo
-                      isHome={isHome}
-                      active={
-                        window.location.pathname === '/profile'
-                      }
-                    >
-                      {t('PROFILE', 'Profile')}
-                    </TextInfo>
-                  </MenuLinkText>
-                  <MenuLinkSeparator>
-                    <div>
-                      <hr />
-                    </div>
-                  </MenuLinkSeparator>
-                </WrappContent>
-              </MenuLink>
-              <MenuLink
-                isHome={isHome}
-                onClick={() => handleGoToPage({ page: 'help' })}
-              >
-                <WrappContent>
-                  <MenuLinkIcon
-                    isHome={isHome}
-                    active={
-                      window.location.pathname === '/help'
-                    }
-                  >
-                    <BiHelpCircle />
-                  </MenuLinkIcon>
-                  <MenuLinkText>
-                    <TextInfo
-                      isHome={isHome}
-                      active={
-                        window.location.pathname === '/help'
-                      }
-                    >
-                      {t('HELP', 'help')}
-                    </TextInfo>
-                  </MenuLinkText>
-                  <MenuLinkSeparator>
-                    <div>
-                      <hr />
-                    </div>
-                  </MenuLinkSeparator>
-                </WrappContent>
-              </MenuLink>
+              {extraOptions.map(option => (
+                <MenuLink
+                  key={option.key}
+                  onClick={() => handleGoToPage({ page: option.name })}
+                >
+                  <WrappContent>
+                    <MenuLinkIcon active={window.location.pathname === option.pathname}>
+                      {getMenuIcon(option.name)}
+                    </MenuLinkIcon>
+                    <MenuLinkText>
+                      <TextInfo active={window.location.pathname === option.pathname}>
+                        {t((option.key || option.name).toUpperCase(), capitalize(option.displayName || option.name))}
+                      </TextInfo>
+                    </MenuLinkText>
+                    <MenuLinkSeparator>
+                      <div>
+                        <hr />
+                      </div>
+                    </MenuLinkSeparator>
+                  </WrappContent>
+                </MenuLink>
+              ))}
+              {sessionState?.user?.level === 0 && adminOptionsDefault.map(option => (
+                <MenuLink
+                  key={option.key}
+                  onClick={() => handleGoToPage({ page: option.name })}
+                >
+                  <WrappContent>
+                    <MenuLinkIcon active={window.location.pathname === option.pathname}>
+                      {getMenuIcon(option.name)}
+                    </MenuLinkIcon>
+                    <MenuLinkText>
+                      <TextInfo active={window.location.pathname === option.pathname}>
+                        {t((option.key || option.name).toUpperCase(), capitalize(option.displayName || option.name))}
+                      </TextInfo>
+                    </MenuLinkText>
+                    <MenuLinkSeparator>
+                      <div>
+                        <hr />
+                      </div>
+                    </MenuLinkSeparator>
+                  </WrappContent>
+                </MenuLink>
+              ))}
               {
                 !isCustomerMode && (
                   <MenuLink
-                    isHome={isHome}
                     onClick={() => handleGoToPage({ page: 'orders' })}
                   >
                     <WrappContent>
                       <MenuLinkIcon
-                        isHome={isHome}
                         active={
                           window.location.pathname === '/profile/orders'
                         }
@@ -294,7 +281,6 @@ export const SidebarMenu = (props) => {
                       </MenuLinkIcon>
                       <MenuLinkText>
                         <TextInfo
-                          isHome={isHome}
                           active={
                             window.location.pathname === '/profile/orders'
                           }
@@ -318,19 +304,16 @@ export const SidebarMenu = (props) => {
           {!auth && (
             <>
               <MenuLink
-                isHome={isHome}
                 onClick={() => handleOpenLoginSignUp('login')}
               >
                 <WrappContent>
                   <MenuLinkIcon
-                    isHome={isHome}
                     active={modalPageToShow === 'login'}
                   >
                     <AiOutlineLogin />
                   </MenuLinkIcon>
                   <MenuLinkText>
                     <TextInfo
-                      isHome={isHome}
                       active={modalPageToShow === 'login'}
                     >
                       {t('SIGN_IN', 'Sign in')}
@@ -345,19 +328,16 @@ export const SidebarMenu = (props) => {
               </MenuLink>
               {!isHideSignup && (
                 <MenuLink
-                  isHome={isHome}
                   onClick={() => handleOpenLoginSignUp('signup')}
                 >
                   <WrappContent>
                     <MenuLinkIcon
-                      isHome={isHome}
                       active={modalPageToShow === 'signup'}
                     >
                       <AiOutlineUserAdd />
                     </MenuLinkIcon>
                     <MenuLinkText>
                       <TextInfo
-                        isHome={isHome}
                         active={modalPageToShow === 'signup'}
                       >
                         {t('SIGNUP', 'Sign up')}
@@ -435,12 +415,6 @@ export const SidebarMenu = (props) => {
           </Modal>
         )}
       </Container>
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
     </>
   )
 }

package/src/themes/callcenterOriginal/src/components/UserPopover/index.js

@@ -27,6 +27,12 @@ const extraOptions = [
   { name: 'help', pathname: '/help', displayName: 'help', key: 'help' }
 ]
 
+const adminOptionsDefault = [
+  { name: 'orderlist', pathname: '/orderlist', displayName: 'order list', key: 'ORDER_LIST' },
+  { name: 'deliveries', pathname: '/deliveries', displayName: 'delivery dashboard', key: 'DELIVERY_DASHBOARD' },
+  { name: 'drivers_dashboard', pathname: '/drivers', displayName: 'drivers dashboard', key: 'DRIVERS_DASHBOARD' }
+]
+
 export const UserPopover = (props) => {
   const {
     open,
@@ -58,7 +64,7 @@ export const UserPopover = (props) => {
     ]
   })
 
-  const { styles, attributes, forceUpdate } = popper
+  const { styles, attributes } = popper
 
   useEffect(() => {
     // forceUpdate && forceUpdate()
@@ -99,12 +105,6 @@ export const UserPopover = (props) => {
   }
   return (
     <div style={{ overflow: 'hidden' }}>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
       <HeaderItem
         isPhoto={sessionState?.user?.photo}
         isHome={isHome}
@@ -150,20 +150,39 @@ export const UserPopover = (props) => {
                 ))
               )
             }
-
-            <Divider />
-            {withLogout && (
-              <PopoverListItemLogout onClose={props.onClose} />
+            {!(sessionState?.user?.level === 0) && (
+              <>
+                <Divider />
+                {withLogout && (
+                  <PopoverListItemLogout onClose={props.onClose} />
+                )}
+              </>
             )}
           </ExtraOptions>
+          {sessionState?.user?.level === 0 && (
+            <>
+              <Divider />
+              <ExtraOptions>
+                {
+                  adminOptionsDefault && (adminOptionsDefault.map((option, i) => (
+                    <PopoverListLink
+                      key={i}
+                      active={window.location.pathname === option.pathname}
+                      onClick={() => handleGoToPage(option.name)}
+                    >
+                      {t((option.key || option.name).toUpperCase(), capitalize(option.displayName || option.name))}
+                    </PopoverListLink>
+                  )))
+                }
+                <Divider />
+                {withLogout && (
+                  <PopoverListItemLogout onClose={props.onClose} />
+                )}
+              </ExtraOptions>
+            </>
+          )}
         </PopoverList>
       </PopoverBody>
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
     </div>
   )
 }