ordering-ui-admin-external 1.13.4 → 1.14.1

package/src/components/OrderingProducts/OrderingProductDetails/styles.js

@@ -6,8 +6,13 @@ export const Container = styled.div`
   height: 100%;
   overflow-x: hidden;
   padding: 20px;
-  max-width: 500px;
 `
+
+export const RightHeader = styled.div`
+  display: flex;
+  align-items: center;
+`
+
 export const Tabs = styled.div`
   display: flex;
   border-bottom: 1px solid ${props => props.theme.colors.borderColor};
@@ -42,9 +47,9 @@ export const DetailHeaderContainer = styled.div`
   margin-bottom: 15px;
 
   ${props => props.theme?.rtl ? css`
-    margin-left: 40px;
+    margin-left: 25px;
   ` : css`
-    margin-right: 40px;
+    margin-right: 25px;
   `}
 `
 export const ActionSelectorWrapper = styled.div`

package/src/components/OrderingProducts/OrderingProductsListing/styles.js

@@ -161,11 +161,7 @@ export const PagesBottomContainer = styled.div`
 export const AddNewPageButton = styled.div`
   cursor: pointer;
   font-size: 14px;
-  color: ${props => props.theme.colors.lightGray};
-
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
+  color: ${props => props.theme.colors.primary};
 `
 
 export const InfoWrapper = styled.div`

package/src/components/OrderingProducts/SiteTheme/ThemeImage.js

@@ -139,7 +139,7 @@ export const ThemeImage = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

package/src/components/Orders/Messages/index.js

@@ -4,6 +4,7 @@ import { useForm, Controller } from 'react-hook-form'
 import { useTheme } from 'styled-components'
 import Skeleton from 'react-loading-skeleton'
 import AiOutlineInfoCircle from '@meronex/icons/ai/AiOutlineInfoCircle'
+import MdcCloseOctagonOutline from '@meronex/icons/mdc/MdcCloseOctagonOutline'
 import MdClose from '@meronex/icons/md/MdClose'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
@@ -45,7 +46,8 @@ import {
   InfoBlock,
   SendToContainer,
   MessageSender,
-  QuickMessageWrapper
+  QuickMessageWrapper,
+  NotSendMessage
 } from './styles'
 import { Alert, Image as ImageWithFallback } from '../../Shared'
 import { Button, Input } from '../../../styles'
@@ -96,6 +98,10 @@ export const MessagesUI = (props) => {
   const [load, setLoad] = useState(0)
   const [messageList, setMessageList] = useState([])
   const [isChatDisabled, setIsChatDisabled] = useState(false)
+  const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
+  const chatDisabled = previousStatus.includes(order?.status)
+
+  console.log(order?.status)
 
   const adminMessageList = [
     { key: 'message_1', text: t('ADMIN_MESSAGE_1', 'admin_message_1') },
@@ -346,6 +352,11 @@ export const MessagesUI = (props) => {
     }
   }, [isChat, order])
 
+  useEffect(() => {
+    if (!isChat || !order?.id || messages.loading) return
+    unreadMessageControl()
+  }, [isChat, order?.id, messages.loading])
+
   useEffect(() => {
     if (messages.loading) return
     const _filteredMessages = messages.messages.filter(message => {
@@ -923,95 +934,104 @@ export const MessagesUI = (props) => {
                 </ChatContactInfoContainer>
               )}
             </ImageContainer>
-            {messageList.length > 0 && (
-              <QuickMessageWrapper>
-                {messageList.map((quickMessage, i) => (
-                  <Button
-                    key={i}
-                    color='secundaryDark'
-                    onClick={() => handleClickQuickMessage(quickMessage.text)}
-                  >
-                    {quickMessage.text}
-                  </Button>
-                ))}
-              </QuickMessageWrapper>
-            )}
+            {chatDisabled ? (
+              <NotSendMessage>
+                <MdcCloseOctagonOutline />
+                <p>{t('NOT_SEND_MESSAGES', 'You can\'t send messages because the order has ended')}</p>
+              </NotSendMessage>
+            ) : (
+              <>
+                {messageList.length > 0 && (
+                  <QuickMessageWrapper>
+                    {messageList.map((quickMessage, i) => (
+                      <Button
+                        key={i}
+                        color='secundaryDark'
+                        onClick={() => handleClickQuickMessage(quickMessage.text)}
+                      >
+                        {quickMessage.text}
+                      </Button>
+                    ))}
+                  </QuickMessageWrapper>
+                )}
 
-            <Send onSubmit={handleSubmit(onSubmit)} noValidate>
-              <WrapperSendInput>
-                <Controller
-                  name='message'
-                  control={control}
-                  render={({ onChange, value }) => (
-                    <Input
-                      placeholder={t('WRITE_A_MESSAGE', 'Write a message...')}
-                      value={value}
-                      onChange={e => {
-                        onChange(e.target.value)
-                        onChangeMessage(e)
-                      }}
-                      onFocus={unreadMessageControl}
+                <Send onSubmit={handleSubmit(onSubmit)} noValidate>
+                  <WrapperSendInput>
+                    <Controller
                       name='message'
-                      ref={messageInputRef}
-                      autoComplete='off'
-                      readOnly={isChatDisabled}
-                    />
-                  )}
-                  rules={{
-                    required: !image
-                  }}
-                  defaultValue=''
-                />
-                {!image && (
-                  <SendImage htmlFor='chat_image'>
-                    <input
-                      type='file'
-                      name='image'
-                      id='chat_image'
-                      accept='image/png,image/jpg,image/jpeg'
-                      onChange={onChangeImage}
-                      disabled={isChatDisabled}
+                      control={control}
+                      render={({ onChange, value }) => (
+                        <Input
+                          placeholder={t('WRITE_A_MESSAGE', 'Write a message...')}
+                          value={value}
+                          onChange={e => {
+                            onChange(e.target.value)
+                            onChangeMessage(e)
+                          }}
+                          onFocus={unreadMessageControl}
+                          name='message'
+                          ref={messageInputRef}
+                          autoComplete='off'
+                          readOnly={isChatDisabled}
+                        />
+                      )}
+                      rules={{
+                        required: !image
+                      }}
+                      defaultValue=''
                     />
-                    <BsCardImage />
-                  </SendImage>
-                )}
-                {image && (
-                  <WrapperDeleteImage>
+                    {!image && (
+                      <SendImage htmlFor='chat_image'>
+                        <input
+                          type='file'
+                          name='image'
+                          id='chat_image'
+                          accept='image/png,image/jpg,image/jpeg'
+                          onChange={onChangeImage}
+                          disabled={isChatDisabled}
+                        />
+                        <BsCardImage />
+                      </SendImage>
+                    )}
+                    {image && (
+                      <WrapperDeleteImage>
+                        <Button
+                          circle
+                          onClick={removeImage}
+                          type='reset'
+                        >
+                          <MdClose />
+                        </Button>
+                        <img
+                          src={image}
+                          loading='lazy'
+                        />
+                      </WrapperDeleteImage>
+                    )}
+                  </WrapperSendInput>
+                  <WrapperSendMessageButton>
                     <Button
-                      circle
-                      onClick={removeImage}
-                      type='reset'
+                      borderRadius='8px'
+                      color='primary'
+                      type='submit'
+                      disabled={sendMessage.loading || (message === '' && !image) || messages.loading}
+                      ref={buttonRef}
                     >
-                      <MdClose />
+                      <IosSend />
+                      {sendMessage.loading ? (
+                        <span>
+                          {t('SENDING_MESSAGE', 'Sending...')}
+                        </span>
+                      )
+                        : (
+                          <span>
+                            {t('SEND', 'send')}
+                          </span>)}
                     </Button>
-                    <img
-                      src={image}
-                      loading='lazy'
-                    />
-                  </WrapperDeleteImage>
-                )}
-              </WrapperSendInput>
-              <WrapperSendMessageButton>
-                <Button
-                  borderRadius='8px'
-                  color='primary'
-                  type='submit'
-                  disabled={sendMessage.loading || (message === '' && !image) || messages.loading}
-                  ref={buttonRef}
-                >
-                  <IosSend />
-                  {sendMessage.loading ? (
-                    <span>
-                      {t('SENDING_MESSAGE', 'Sending...')}
-                    </span>
-                  )
-                    : (
-                      <span>
-                        {t('SEND', 'send')}
-                      </span>)}
-                </Button>
-              </WrapperSendMessageButton>
-            </Send>
+                  </WrapperSendMessageButton>
+                </Send>
+              </>
+            )}
           </SendForm>
         )}
         <Alert

package/src/components/Orders/Messages/styles.js

@@ -15,6 +15,26 @@ export const WrapperContainer = styled.div`
   box-sizing: border-box;
 `
 
+export const NotSendMessage = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  color: #909BA9;
+  background: #F8F9FA;
+
+  svg {
+    font-size: 20px;
+  }
+
+  p {
+    font-size: 14px;
+    color: #909BA9;
+    margin: 6px 0;
+  }
+`
+
 export const HeaderProfile = styled.div`
   display: flex;
   padding: 20px 0px;

package/src/components/Orders/OrderDashboardSLASetting/index.js

@@ -195,7 +195,6 @@ export const StatusBlock = (props) => {
             name='minute'
             type='text'
             placeholder='MM'
-            disabled
             defaultValue={configs?.order_deadlines_delayed_time?.value}
             ref={formMethods.register({
               required: t('VALIDATION_ERROR_MINUTE_REQUIRED', 'The field minute is required').replace('_attribute_', t('MINUTE', 'Minute'))

package/src/components/Orders/OrderDetailsHeader/index.js

@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { useLanguage, useSession } from 'ordering-components-admin-external'
 import EnDotSingle from '@meronex/icons/en/EnDotSingle'
 import ReactToPrint from 'react-to-print'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 import {
   // Wallet2,
   Printer,
@@ -9,7 +10,9 @@ import {
   ThreeDots,
   XLg as CloseIcon,
   Chat as ChatIcon,
-  Dot
+  Dot,
+  ArrowsAngleExpand,
+  ArrowsAngleContract
 } from 'react-bootstrap-icons'
 import { IconButton as ButtonLink } from '../../../styles'
 import {
@@ -31,11 +34,14 @@ export const OrderDetailsHeader = (props) => {
     showOption,
     openMessage,
     printRef,
-    isServiceOrder
+    isServiceOrder,
+    extraOpen
   } = props
 
   const [, t] = useLanguage()
   const [{ user }] = useSession()
+  const [isExpand, setIsExpand] = useState(false)
+  const { width } = useWindowSize()
 
   const stripePaymethods = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
 
@@ -53,6 +59,19 @@ export const OrderDetailsHeader = (props) => {
     if (isTourOpen && currentTourStep === 1) setIsTourOpen(false)
   }
 
+  const expandSideBar = () => {
+    const element = document.getElementById('orderDetails')
+    if (!element) return
+
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
+  useEffect(() => {
+    if (extraOpen) setIsExpand(false)
+  }, [extraOpen])
+
   return (
     <OrderDetailsHeaderContainer>
       <div>
@@ -101,6 +120,14 @@ export const OrderDetailsHeader = (props) => {
           >
             <ThreeDots />
           </ButtonLink>
+          {width > 576 && !extraOpen && (
+            <ButtonLink
+              color='black'
+              onClick={() => expandSideBar()}
+            >
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </ButtonLink>
+          )}
           <ButtonLink
             color='black'
             onClick={() => closeSideBar()}

package/src/components/Orders/OrdersFilterGroup/index.js

@@ -103,18 +103,22 @@ const OrdersFilterGroupUI = (props) => {
           />
         </WrapperRow>
         <WrapperRow>
+          <CountryFilter
+            filterValues={filterValues}
+            handleChangeCountryCode={handleChangeCountryCode}
+          />
           <CitySelector
             cities={citiesList}
             filterValues={filterValues}
             handleChangeCity={handleChangeCity}
           />
-          <MultiSelectContainer>
+          {/* <MultiSelectContainer>
             <OrderStatusTypeSelector
               isFilterView
               filterValues={filterValues}
               handleChangeOrderStatus={handleChangeOrderStatus}
             />
-          </MultiSelectContainer>
+          </MultiSelectContainer> */}
         </WrapperRow>
         <WrapperRow>
           <DeliveryTypeSelector
@@ -128,10 +132,6 @@ const OrdersFilterGroupUI = (props) => {
           />
         </WrapperRow>
         <WrapperRow>
-          <CountryFilter
-            filterValues={filterValues}
-            handleChangeCountryCode={handleChangeCountryCode}
-          />
           <CurrencyFilter
             filterValues={filterValues}
             handleChangeCurrency={handleChangeCurrency}

package/src/components/Orders/OrdersLateralBar/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, useUtils } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
-import { XLg } from 'react-bootstrap-icons'
+import { XLg, ArrowsAngleExpand, ArrowsAngleContract } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
 import { OrdersManager } from '../OrdersManager'
 import { IconButton } from '../../../styles/Buttons'
@@ -29,8 +29,9 @@ export const OrdersLateralBar = (props) => {
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
   const theme = useTheme()
-
   const { width } = useWindowSize()
+
+  const [isExpand, setIsExpand] = useState(false)
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [isOpenDriverOrderDetails, setIsOpenDriverOrderDetails] = useState(false)
 
@@ -83,6 +84,15 @@ export const OrdersLateralBar = (props) => {
     }
   }
 
+  const expandSideBar = () => {
+    const element = document.getElementById('driver_lateral_bar')
+    if (!element) return
+
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (!open) return
     document.addEventListener('keydown', onCloseSidebar)
@@ -93,6 +103,14 @@ export const OrdersLateralBar = (props) => {
     <LateralBarContainer id='driver_lateral_bar'>
       <OrdersContainer>
         <CloseButtonWrapper>
+          {width > 576 && (
+            <IconButton
+              color='black'
+              onClick={() => expandSideBar()}
+            >
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </IconButton>
+          )}
           <IconButton
             color='black'
             onClick={() => props.onClose()}

package/src/components/Orders/OrdersLateralBar/styles.js

@@ -21,7 +21,7 @@ export const LateralBarContainer = styled.div`
 `
 
 export const OrdersContainer = styled.div`
-  max-width: 560px;
+  /* max-width: 560px; */
 
   #orderTable {
     border-top: 1px solid ${props => props.theme.colors.borderColor};
@@ -34,6 +34,8 @@ export const OrdersContainer = styled.div`
 `
 
 export const CloseButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
   position: absolute;
   top: 25px;
   cursor: pointer;

package/src/components/Settings/ApiKeysList/styles.js

@@ -32,6 +32,14 @@ export const Header = styled.div`
   button {
     height: 42px;
   }
+
+  @media (min-width: 576px) {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 65px;
+    ` : css`
+      margin-right: 65px;
+    `}
+  }
 `
 
 export const ApiKeysListTable = styled.table`

package/src/components/Settings/Cms/styles.js

@@ -212,5 +212,5 @@ export const PagesBottomContainer = styled.div`
 export const AddNewPageButton = styled.div`
   cursor: pointer;
   font-size: 12px;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
 `

package/src/components/Settings/CountriesList/index.js

@@ -41,7 +41,7 @@ export const CountriesList = (props) => {
   const [totalPages, setTotalPages] = useState(null)
   const [currentCountries, setCurrentCountries] = useState([])
 
-  const [openDetaisl, setOpenDetails] = useState(false)
+  const [openDetails, setOpenDetails] = useState(false)
   const [selectedCountry, setSelectedCountry] = useState(null)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
 
@@ -219,13 +219,14 @@ export const CountriesList = (props) => {
           )}
         </PagesBottomContainer>
       )}
-      {openDetaisl && (
+      {openDetails && (
         <SideBar
-          open={openDetaisl}
+          open={openDetails}
           onClose={() => {
             setOpenDetails(false)
             setSelectedCountry(null)
           }}
+          showExpandIcon
         >
           <CountryDetails
             country={selectedCountry}

package/src/components/Settings/CountriesList/styles.js

@@ -163,5 +163,5 @@ export const PagesBottomContainer = styled.div`
 export const AddNewPageButton = styled.div`
   cursor: pointer;
   font-size: 14px;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
 `

package/src/components/Settings/Deliverect/index.js

@@ -3,7 +3,7 @@ import { useLanguage } from 'ordering-components-admin-external'
 import { Button, IconButton } from '../../../styles'
 import { DragScroll, Modal } from '../../Shared'
 import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
-import { XLg } from 'react-bootstrap-icons'
+import { ArrowsAngleContract, ArrowsAngleExpand, XLg } from 'react-bootstrap-icons'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
@@ -30,6 +30,7 @@ export const Deliverect = (props) => {
   const { width } = useWindowSize()
 
   const [settingsOpen, setSettingsOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
 
   const toggleMainContent = () => {
     if (width <= 500) {
@@ -43,6 +44,13 @@ export const Deliverect = (props) => {
     }
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('catDescription')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (width < 1000) return
     if (settingsOpen) {
@@ -105,6 +113,14 @@ export const Deliverect = (props) => {
       <DeliverectContainer>
         <DescriptionHeader>
           <HeaderIcons>
+            {width > 576 && !settingsOpen && (
+              <IconButton
+                color='black'
+                onClick={expandSidebar}
+              >
+                {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+              </IconButton>
+            )}
             <IconButton
               color='black'
               onClick={onClose}

package/src/components/Settings/DoordashConnect/index.js

@@ -3,7 +3,7 @@ import { useLanguage, ApiKeysList as ApiKeysListController } from 'ordering-comp
 import { Button, IconButton } from '../../../styles'
 import { Alert, Confirm, DragScroll, Modal } from '../../Shared'
 import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
-import { XLg } from 'react-bootstrap-icons'
+import { ArrowsAngleContract, ArrowsAngleExpand, XLg } from 'react-bootstrap-icons'
 
 import {
   Header,
@@ -32,6 +32,7 @@ const DoordashConnectUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [settingsOpen, setSettingsOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
 
   const toggleMainContent = () => {
     if (width <= 500) {
@@ -49,6 +50,13 @@ const DoordashConnectUI = (props) => {
     window.open(link, '_blank')
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('catDescription')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (!actionState?.error) return
     setAlertState({
@@ -149,6 +157,14 @@ const DoordashConnectUI = (props) => {
       <DoordashConnectContainer>
         <DescriptionHeader>
           <HeaderIcons>
+            {width > 576 && !settingsOpen && (
+              <IconButton
+                color='black'
+                onClick={expandSidebar}
+              >
+                {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+              </IconButton>
+            )}
             <IconButton
               color='black'
               onClick={onClose}

package/src/components/Settings/DropdownOptionList/index.js

@@ -240,6 +240,7 @@ export const DropdownOptionList = (props) => {
             setSelectedZoneDropdown(null)
             setOpenZonedropdown(false)
           }}
+          showExpandIcon
         >
           <ZoneDropdownDetails
             zoneDropdown={selectedZoneDropdown}

package/src/components/Settings/DropdownOptionList/styles.js

@@ -226,5 +226,5 @@ export const PagesBottomContainer = styled.div`
 export const AddNewPageButton = styled.div`
   cursor: pointer;
   font-size: 14px;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
 `