ordering-ui-external 14.1.46 → 14.1.48

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>
   )
 }

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

@@ -4,7 +4,7 @@ import {
   Pencil,
   Trash
 } from 'react-bootstrap-icons'
-import { useUtils, useLanguage, useOrder, useConfig } from 'ordering-components-external'
+import { useUtils, useLanguage, useOrder, useConfig, ProductItemAccordion as ProductItemAccordionController } from 'ordering-components-external'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import {
   AccordionSection,
@@ -31,7 +31,7 @@ import {
 } from './styles'
 import { useTheme } from 'styled-components'
 
-export const ProductItemAccordion = (props) => {
+const ProductItemAccordionUI = (props) => {
   const {
     isDisabledEdit,
     isCartPending,
@@ -45,7 +45,8 @@ export const ProductItemAccordion = (props) => {
     isCheckout,
     isStore,
     isConfirmationPage,
-    toppingsRemoved
+    toppingsRemoved,
+    productInfo
   } = props
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -66,25 +67,7 @@ export const ProductItemAccordion = (props) => {
   const showProductImage = !theme?.[viewString]?.components?.cart?.components?.products?.components?.image?.hidden
   const hideProductDummyLogo = theme?.business_view?.components?.products?.components?.product?.components?.dummy?.hidden
 
-  const productInfo = () => {
-    if (isCartProduct) {
-      const ingredients = JSON.parse(JSON.stringify(Object.values(product.ingredients ?? {})))
-      let options = JSON.parse(JSON.stringify(Object.values(product.options ?? {})))
-
-      options = options.map(option => {
-        option.suboptions = Object.values(option.suboptions ?? {})
-        return option
-      })
-      return {
-        ...productInfo,
-        ingredients,
-        options
-      }
-    }
-    return product
-  }
-
-  const showArrowIcon = props.showArrowIcon && (productInfo()?.ingredients?.length > 0 || productInfo()?.options?.length > 0 || product?.comment)
+  const showArrowIcon = props.showArrowIcon && (productInfo?.ingredients?.length > 0 || productInfo?.options?.length > 0 || product?.comment)
 
   const toggleAccordion = (e) => {
     const isActionsClick = productSelect.current?.contains(e.target) || productActionsEdit.current?.contains(e.target) || productActionsDelete.current?.contains(e.target)
@@ -220,7 +203,7 @@ export const ProductItemAccordion = (props) => {
                     <span>
                       {parsePrice(product.total || product.price)}
                     </span>
-                    {(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || product.comment) && (
+                    {(productInfo.ingredients.length > 0 || productInfo.options.length > 0 || product.comment) && (
                       <p>
                         <IosArrowDown className={`${setRotate}`} />
                       </p>
@@ -305,19 +288,19 @@ export const ProductItemAccordion = (props) => {
           ref={content}
           style={{ maxHeight: `${setHeight}` }}
         >
-          {productInfo().ingredients.length > 0 && productInfo().ingredients.some(ingredient => !ingredient.selected) && (
+          {productInfo.ingredients.length > 0 && productInfo.ingredients.some(ingredient => !ingredient.selected) && (
             <ProductOptionsList>
               <p>{t('INGREDIENTS', 'Ingredients')}</p>
-              {productInfo().ingredients.map(ingredient => !ingredient.selected && (
+              {productInfo.ingredients.map(ingredient => !ingredient.selected && (
                 <li className='ingredient' key={ingredient.id}>
                   <span>{t('NO', 'No')} {ingredient.name}</span>
                 </li>
               ))}
             </ProductOptionsList>
           )}
-          {productInfo().options.length > 0 && (
+          {productInfo.options.length > 0 && (
             <ProductOptionsList>
-              {productInfo().options.sort((a, b) => a.rank - b.rank).map(option => (
+              {productInfo.options.sort((a, b) => a.rank - b.rank).map(option => (
                 <li key={option.id}>
                   <p>{option.name}</p>
                   <ProductOptionsList className='suboption'>
@@ -373,3 +356,13 @@ export const ProductItemAccordion = (props) => {
     </>
   )
 }
+
+export const ProductItemAccordion = (props) => {
+  const productItemAccordion = {
+    ...props,
+    UIComponent: ProductItemAccordionUI
+  }
+  return (
+    <ProductItemAccordionController {...productItemAccordion} />
+  )
+}