ordering-ui-external 14.1.45 → 14.1.47

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

package/src/themes/five/src/components/BusinessBasicInformation/BusinessInfoComponent.js

@@ -59,6 +59,9 @@ export const BusinessInfoComponent = (props) => {
             {!loading ? (
               <TitleWrapper isCustomLayout={isCustomLayout} disableLeftSpace={singleBusinessRedirect}>
                 <h2 className='bold' id='business_name'>{business?.name}</h2>
+                {isCustomerMode && business?.address && (
+                  <h3>{business?.address}</h3>
+                )}
                 <span id='business_name_feedback' />
                 {business?.ribbon?.enabled && (
                   <RibbonBox

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

@@ -411,11 +411,23 @@ export const TitleWrapper = styled.div`
         `}
       `}
     }
+
     @media (min-width: 768px) {
       font-size: 32px;
-      
     }
   }
+
+  h3 {
+      font-size: 16px;
+      line-height: 36px;
+      margin: 0px;
+      font-weight: 500;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      background: ${({ theme }) => theme?.colors?.backgroundPage};
+    }
 `
 
 export const RibbonBox = styled.div`

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

@@ -33,7 +33,8 @@ import {
   FavoriteWrapper,
   BusinessHeaderClosedContainer,
   ScheduleContainer,
-  ClosedContainer
+  ClosedContainer,
+  BusinessAddress
   // CardOverlay
 } from './styles'
 import GoPrimitiveDot from '@meronex/icons/go/GoPrimitiveDot'
@@ -258,6 +259,19 @@ const BusinessControllerUI = (props) => {
                     <Skeleton width={100} />
                   )}
                 </div>
+                {isCustomerMode && (
+                  <>
+                    {business?.address ? (
+                      <div>
+                        <BusinessAddress>{business?.address}</BusinessAddress>
+                      </div>
+                    ) : (
+                      <div>
+                        <Skeleton width={100} />
+                      </div>
+                    )}
+                  </>
+                )}
                 <Medadata isCustomerMode={isCustomerMode} isSkeleton={isSkeleton}>
                   {!hideBusinessFee && orderType === 1 && (
                     <>

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

@@ -310,7 +310,7 @@ export const BusinessInfoItem = styled.div`
   }
 `
 
-export const BusinessName = styled.h6`
+export const BusinessName = styled.h5`
   font-size: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -533,3 +533,14 @@ export const ClosedContainer = styled.div`
   width: 100%;
   line-break: anywhere;
 `
+
+export const BusinessAddress = styled.h6`
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  font-weight: 400;
+  color: ${props => props.theme.colors.darkTextColor};
+`

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

@@ -108,7 +108,6 @@ const CheckoutUI = (props) => {
   } = props
 
   const theme = useTheme()
-  const [ordering] = useApi()
   const [{ options, loading }] = useOrder()
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
@@ -134,7 +133,7 @@ const CheckoutUI = (props) => {
   const [paymethodClicked, setPaymethodClicked] = useState(null)
   const [productLoading, setProductLoading] = useState(false)
 
-  const shouldActivateOrderDetailModal = ordering?.project?.includes('alsea')
+  const shouldActivateOrderDetailModal = isCustomerMode
   const cardsMethods = ['stripe', 'credomatic']
   const stripePaymethods = ['stripe', 'stripe_connect', 'stripe_redirect']
   const businessConfigs = businessDetails?.business?.configs ?? []