ordering-ui-external 1.8.8 → 1.8.10

package/_modules/themes/callcenterOriginal/src/styles/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Buttons.Button;
+  }
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _Checkbox.Checkbox;
+  }
+});
+Object.defineProperty(exports, "DefaultSelect", {
+  enumerable: true,
+  get: function get() {
+    return _FirstSelect.Select;
+  }
+});
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function get() {
+    return _Buttons.IconButton;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _Inputs.Input;
+  }
+});
+Object.defineProperty(exports, "MultiSelect", {
+  enumerable: true,
+  get: function get() {
+    return _MultiSelect.MultiSelect;
+  }
+});
+Object.defineProperty(exports, "SecondSelect", {
+  enumerable: true,
+  get: function get() {
+    return _Select.Select;
+  }
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function get() {
+    return _Switch.Switch;
+  }
+});
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function get() {
+    return _Tabs.Tab;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _Tabs.Tabs;
+  }
+});
+Object.defineProperty(exports, "TextArea", {
+  enumerable: true,
+  get: function get() {
+    return _Inputs.TextArea;
+  }
+});
+var _Buttons = require("./Buttons");
+var _Checkbox = require("./Checkbox");
+var _Inputs = require("./Inputs");
+var _MultiSelect = require("./MultiSelect");
+var _Select = require("./Select");
+var _FirstSelect = require("./Select/FirstSelect");
+var _Switch = require("./Switch");
+var _Tabs = require("./Tabs");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "1.8.8",
+  "version": "1.8.10",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -85,7 +85,7 @@
     "libphonenumber-js": "^1.9.4",
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
-    "ordering-components-external": "1.7.3",
+    "ordering-components-external": "1.7.4",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",
     "react-calendar": "^3.3.1",

package/src/contexts/InfoShareContext/index.js

@@ -0,0 +1,40 @@
+import React, { useState, createContext } from 'react'
+/**
+ * Create InfoShareContext
+ * This context will manage the info between pages and provide an easy interface
+ */
+export const InfoShareContext = createContext()
+
+/**
+  * Custom provider to mange shared info
+  * @param {props} props
+  */
+export const InfoShareProvider = ({ children }) => {
+  const [infoState, setInfoState] = useState({
+    isCollapse: false
+  })
+
+  const handleMenuCollapse = (val) => {
+    setInfoState({
+      ...infoState,
+      isCollapse: val
+    })
+  }
+
+  const functions = {
+    handleMenuCollapse
+  }
+
+  return (
+    <InfoShareContext.Provider value={[infoState, functions]}>
+      {children}
+    </InfoShareContext.Provider>
+  )
+}
+
+// hook context
+
+export function useInfoShare () {
+  const infoShareManager = React.useContext(InfoShareContext)
+  return infoShareManager || [{}, () => {}]
+}

package/src/contexts/ThemeContext/index.js

@@ -47,6 +47,14 @@ export const ThemeProvider = ({ children, ...props }) => {
       ::-webkit-scrollbar-track {
         background: rgba(204, 204, 204, 0.3);
       }
+      #___reactour {
+        div{
+          color: rgba(0,0,0,0.5);
+          button svg {
+            display: none;
+          }
+        }
+      }
     }
     body {
       font-family: '${theme.fonts.primary?.name || 'Helvetica'}', sans-serif;

package/src/themes/callcenterOriginal/index.js

@@ -71,7 +71,9 @@ import { UserPopover } from './src/components/UserPopover'
 import { UserProfileForm } from './src/components/UserProfileForm'
 import { Confirm } from './src/components/Confirm'
 import { LanguageSelector } from './src/components/LanguageSelector'
-
+import { DeliveriesManager } from './src/components/Orders/DeliveriesManager'
+import { DriversManager } from './src/components/Orders/DriversManager'
+import { OrdersManager } from './src/components/Orders/OrdersManager'
 import { Button } from './src/styles/Buttons'
 import { Input, TextArea } from './src/styles/Inputs'
 import { Select } from './src/styles/Select'
@@ -150,7 +152,9 @@ export {
   UserProfileForm,
   Confirm,
   LanguageSelector,
-
+  DeliveriesManager,
+  DriversManager,
+  OrdersManager,
   // styles
   Button,
   Input,

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

@@ -0,0 +1,113 @@
+import React, { useRef, useEffect } from 'react'
+import { useLanguage, useEvent } from 'ordering-components-external'
+import { usePopper } from 'react-popper'
+import {
+  HeaderItem,
+  PopoverBody,
+  PopoverList,
+  PopoverListLink,
+  AdminSection
+} from './styles'
+import { capitalize } from '../../../../../utils'
+import BisDownArrow from '@meronex/icons/bi/BisDownArrow'
+
+const optionsDefault = [
+  { 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 AdminAreaPopover = (props) => {
+  const {
+    open,
+    isHome
+  } = props
+  const [, t] = useLanguage()
+  const [events] = useEvent()
+  const referenceElement = useRef()
+  const popperElement = useRef()
+  const arrowElement = useRef()
+
+  const options = optionsDefault
+  const popper = usePopper(referenceElement.current, popperElement.current, {
+    placement: 'auto',
+    modifiers: [
+      { name: 'arrow', options: { element: arrowElement.current } },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 12]
+        }
+      }
+    ]
+  })
+
+  const { styles, attributes } = popper
+
+  const handleClickOutside = (e) => {
+    if (!open) return
+    const outsidePopover = !popperElement.current?.contains(e.target)
+    const outsidePopoverMenu = !referenceElement.current?.contains(e.target)
+    if (outsidePopover && outsidePopoverMenu) {
+      props.onClose && props.onClose()
+    }
+  }
+
+  const handleKeyDown = (e) => {
+    if (e.keyCode === 27) {
+      props.onClose && props.onClose()
+    }
+  }
+
+  const handleGoToPage = (page) => {
+    events.emit('go_to_page', { page })
+    props.onClick && props.onClick()
+  }
+
+  useEffect(() => {
+    window.addEventListener('mouseup', handleClickOutside)
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('mouseup', handleClickOutside)
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open])
+
+  const popStyle = { ...styles.popper, visibility: open ? 'visible' : 'hidden', minWidth: '150px' }
+  if (!open) {
+    popStyle.transform = 'translate3d(0px, 0px, 0px)'
+  }
+  return (
+    <div style={{ overflow: 'hidden' }}>
+      <HeaderItem
+        isHome={isHome}
+        ref={referenceElement}
+        isOpen={open}
+        onClick={props.onClick}
+      >
+        <AdminSection>
+          <p>
+            {t('ADMIN_AREA', 'Admin Area')}
+          </p>
+          <BisDownArrow />
+        </AdminSection>
+
+      </HeaderItem>
+      <PopoverBody ref={popperElement} style={popStyle} {...attributes.popper}>
+        <PopoverList>
+          {options && options.length > 0 && (
+            options.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>
+            ))
+          )}
+        </PopoverList>
+      </PopoverBody>
+    </div>
+  )
+}

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

@@ -0,0 +1,144 @@
+import styled, { css } from 'styled-components'
+
+export const HeaderItem = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  border-radius: 7.6px;
+  padding: 7px 13px;
+  margin: 0 10px;
+
+  ${({ isOpen }) => isOpen && css`
+    background: #F8F9FA;
+  `}
+
+  .menu-list {
+    font-size: 16px;
+    width: auto;
+    height: auto;
+    margin-right: 20px;
+    ${props => props.theme?.rtl && css`
+      margin-left: 20px;
+      margin-right: 0;
+    `}
+    color: ${props => props.theme.colors.darkTextColor};
+  }
+
+  img {
+    width: 42px;
+    height: 42px;
+    border-radius: 7.6px;
+  }
+`
+
+export const PopoverBody = styled.div`
+  background-color: #FFF;
+  color: #333;
+  padding: 20px 15px;
+  border-radius: 10px;
+  max-width: 500px;
+  min-width: 300px !important;
+  z-index: 1001;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
+`
+
+export const PopoverList = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const PopoverListItemStyles = css`
+  display: flex;
+  padding: 7px 15px;
+  align-items: center;
+  font-weight: 600;
+  font-size: 14px;
+  color: #000000;
+  border-radius: 7.6px;
+
+  svg {
+    margin-right: 5px;
+    ${props => props.theme?.rtl && css`
+      margin-left: 5px;
+      margin-right: 0px;
+    `}
+  }
+
+  :hover {
+    cursor: pointer;
+    background-color: #f8f8f8;
+  }
+
+  :last-child {
+    border-bottom: 0;
+  }
+`
+
+export const PopoverListItem = styled.div`
+  ${PopoverListItemStyles}
+`
+
+export const PopoverListLink = styled.a`
+  ${PopoverListItemStyles}
+  text-decoration: none;
+
+  ${({ active }) => active && css`
+    background-color: #eee;
+  `}
+`
+
+export const ExtraOptions = styled.div`
+  a, div {
+    font-weight: normal;
+  }
+`
+
+export const Divider = styled.div`
+  margin-top: 20px;
+  margin-bottom: 15px;
+  width: calc(100% + 30px);
+  margin-left: -15px;
+  height: 1px;
+  background: #E9ECEF;
+
+  ${props => props.theme?.rtl && css`
+    margin-right: -15px;
+    margin-left: 0;
+  `}
+`
+
+export const UserImgWrapper = styled.div`
+  position: relative;
+  display: flex;
+`
+
+export const RoundMark = styled.div`
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #E63757;
+  top: -3px;
+  right: -6px;
+`
+
+export const AdminSection = styled.div`
+  border: 1px solid ${({ theme }) => theme?.colors?.primary};
+  background: #fff;
+  height: 30px;
+  width: 120px;
+  color: ${({ theme }) => theme?.colors?.primary};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+  cursor: pointer;
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+  svg{
+    width: 14px;
+    height: 14px;
+  }
+`

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

@@ -8,6 +8,8 @@ import TiWarningOutline from '@meronex/icons/ti/TiWarningOutline'
 import { OrderTypeSelectorContent } from '../OrderTypeSelectorContent'
 import { LanguageSelector } from '../LanguageSelector'
 import AiOutlineClose from '@meronex/icons/ai/AiOutlineClose'
+import BisDownArrow from '@meronex/icons/bi/BisDownArrow'
+
 import {
   Header as HeaderContainer,
   InnerHeader,
@@ -22,7 +24,8 @@ import {
   AddressMenu,
   MomentMenu,
   FarAwayMessage,
-  Divider
+  Divider,
+  AdminSection
 } from './styles'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { useOnlineStatus } from '../../../../../hooks/useOnlineStatus'
@@ -41,6 +44,7 @@ import { UserDetails } from '../UserDetails'
 import { Confirm } from '../Confirm'
 import { getDistance } from '../../../../../utils'
 import { BusinessPreorder } from '../BusinessPreorder'
+import { AdminAreaPopover } from '../AdminAreaPopover'
 
 export const Header = (props) => {
   const {
@@ -55,7 +59,7 @@ export const Header = (props) => {
   const [events] = useEvent()
   const [{ parseDate }] = useUtils()
   const [, t] = useLanguage()
-  const [{ auth }] = useSession()
+  const [{ auth, user }] = useSession()
   const [orderState, { refreshOrderOptions }] = useOrder()
   const [openPopover, setOpenPopover] = useState({})
   const theme = useTheme()
@@ -144,7 +148,7 @@ export const Header = (props) => {
     if (isCustomerMode) {
       setCustomerModalOpen(false)
     }
-  }, [customerState?.user?.address])
+  }, [JSON.stringify(orderState?.options?.address?.address)])
 
   useEffect(() => {
     if (!(pathname.includes('/search') || pathname.includes('/checkout'))) {
@@ -190,64 +194,75 @@ export const Header = (props) => {
             </LogoHeader>
           </LeftHeader>
           {isShowOrderOptions && (
-            <Menu className='left-header'>
-              {windowSize.width > 820 && isFarAway && (
-                <FarAwayMessage>
-                  <TiWarningOutline />
-                  <span>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</span>
-                </FarAwayMessage>
-              )}
-              <AddressMenu
-                onClick={(e) => handleClickUserCustomer(e)}
-              >
-                <GeoAlt /> {orderState.options?.address?.address?.split(',')?.[0] || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
-              </AddressMenu>
-              <Divider />
-              {isCustomerMode && windowSize.width > 450 && (
-                <CustomerInfo
+            <>
+              <Menu className='left-header' id='center-side'>
+                {windowSize.width > 820 && isFarAway && (
+                  <FarAwayMessage>
+                    <TiWarningOutline />
+                    <span>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</span>
+                  </FarAwayMessage>
+                )}
+                <AddressMenu
                   onClick={(e) => handleClickUserCustomer(e)}
                 >
-                  <span>
-                    <p>{userCustomer?.name} {userCustomer?.lastname}</p>
-                  </span>
-                  <span
-                    ref={clearCustomer}
+                  <GeoAlt /> {orderState.options?.address?.address?.split(',')?.[0] || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
+                </AddressMenu>
+                <Divider />
+                {isCustomerMode && windowSize.width > 450 && (
+                  <CustomerInfo
+                    onClick={(e) => handleClickUserCustomer(e)}
                   >
-                    <AiOutlineClose />
-                  </span>
-                </CustomerInfo>
-              )}
-              <Divider />
-              {onlineStatus && windowSize.width > 820 && (
-                <>
-                  {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
-                    <MomentMenu
-                      onClick={configState?.configs?.max_days_preorder?.value === -1 || configState?.configs?.max_days_preorder?.value === 0
-                        ? null
-                        : () => openModal('moment')}
+                    <span>
+                      <p>{userCustomer?.name} {userCustomer?.lastname}</p>
+                    </span>
+                    <span
+                      ref={clearCustomer}
                     >
-                      <div>
-                        {orderState.options?.moment
-                          ? parseDate(orderState.options?.moment, { outputFormat: configState?.configs?.dates_moment_format?.value })
-                          : t('ASAP_ABBREVIATION', 'ASAP')}
-                      </div>
-                    </MomentMenu>
-                  )}
-                </>
-              )}
-              {windowSize.width > 768 ? (
-                <OrderTypeSelectorHeader
-                  orderTypeList={orderTypeList}
-                  onClick={() => openModal('delivery')}
-                />
-              ) : (
-                <HeaderOption
-                  variant='delivery'
-                  onClick={(variant) => openModal(variant)}
-                  orderTypeList={orderTypeList}
+                      <AiOutlineClose />
+                    </span>
+                  </CustomerInfo>
+                )}
+                <Divider />
+                {onlineStatus && windowSize.width > 820 && (
+                  <>
+                    {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
+                      <MomentMenu
+                        onClick={configState?.configs?.max_days_preorder?.value === -1 || configState?.configs?.max_days_preorder?.value === 0
+                          ? null
+                          : () => openModal('moment')}
+                      >
+                        <div>
+                          {orderState.options?.moment
+                            ? parseDate(orderState.options?.moment, { outputFormat: configState?.configs?.dates_moment_format?.value })
+                            : t('ASAP_ABBREVIATION', 'ASAP')}
+                        </div>
+                      </MomentMenu>
+                    )}
+                  </>
+                )}
+                {windowSize.width > 768 ? (
+                  <OrderTypeSelectorHeader
+                    orderTypeList={orderTypeList}
+                    onClick={() => openModal('delivery')}
+                  />
+                ) : (
+                  <HeaderOption
+                    variant='delivery'
+                    onClick={(variant) => openModal(variant)}
+                    orderTypeList={orderTypeList}
+                  />
+                )}
+              </Menu>
+              {user?.level === 0 && (
+                <AdminAreaPopover
+                  withLogout
+                  isCustomerMode={isCustomerMode}
+                  open={openPopover.admin}
+                  onClick={() => handleTogglePopover('admin')}
+                  onClose={() => handleClosePopover('admin')}
                 />
               )}
-            </Menu>
+            </>
           )}
           {onlineStatus && (
             <RightHeader>
@@ -413,31 +428,29 @@ export const Header = (props) => {
             hideCloseDefault
           >
             <UserEdit>
-              {!customerState?.loading && (
-                <>
-                  <UserDetails
-                    isAddressFormOpen={isAddressFormOpen}
-                    userData={customerState?.user}
-                    userId={customerState?.user?.id}
-                    isOpenUserData={isOpenUserData}
-                    isCustomerMode
-                    isModal
-                    setIsOpenUserData={setIsOpenUserData}
-                    onClose={() => setCustomerModalOpen(false)}
-                  />
-                  <AddressList
-                    isModal
-                    userId={customerState?.user?.id}
-                    changeOrderAddressWithDefault
-                    userCustomerSetup={customerState.user}
-                    isOpenUserData={isOpenUserData}
-                    setCustomerModalOpen={setCustomerModalOpen}
-                    setIsOpenUserData={setIsOpenUserData}
-                    setIsAddressFormOpen={setIsAddressFormOpen}
-                    isHeader
-                  />
-                </>
-              )}
+              <>
+                <UserDetails
+                  isAddressFormOpen={isAddressFormOpen}
+                  userData={customerState?.user}
+                  userId={customerState?.user?.id}
+                  isOpenUserData={isOpenUserData}
+                  isCustomerMode
+                  isModal
+                  setIsOpenUserData={setIsOpenUserData}
+                  onClose={() => setCustomerModalOpen(false)}
+                />
+                <AddressList
+                  isModal
+                  userId={customerState?.user?.id}
+                  changeOrderAddressWithDefault
+                  userCustomerSetup={customerState.user}
+                  isOpenUserData={isOpenUserData}
+                  setCustomerModalOpen={setCustomerModalOpen}
+                  setIsOpenUserData={setIsOpenUserData}
+                  setIsAddressFormOpen={setIsAddressFormOpen}
+                  isHeader
+                />
+              </>
             </UserEdit>
           </Modal>
         )}