ordering-ui-admin-external 1.43.30 → 1.43.32

package/src/styles/MultiSelect/index.js

@@ -3,7 +3,7 @@ import EnChevronDown from '@meronex/icons/en/EnChevronDown'
 import { CheckSquareFill, Square } from 'react-bootstrap-icons'
 import MdClose from '@meronex/icons/md/MdClose'
 import { Button } from '../Buttons'
-import { SearchBar } from '../../components/Shared'
+import { Pagination, SearchBar } from '../../components/Shared'
 
 import {
   Select as SelectInput,
@@ -18,7 +18,9 @@ import {
 } from '../Selects'
 
 import {
-  CheckBox
+  CheckBox,
+  TextFormatted,
+  PaginationWrapper
 } from './styles'
 
 export const MultiSelect = (props) => {
@@ -33,7 +35,17 @@ export const MultiSelect = (props) => {
     searchBarPlaceholder,
     searchBarIsCustomLayout,
     searchValue,
-    handleChangeSearch
+    handleChangeSearch,
+    useTextStyle,
+    textClassnames,
+    hideChevronIcon,
+    andText,
+    pagination,
+    handleChangePage,
+    handleChangePageSize,
+    useLazyPagination,
+    isLoading,
+    optionsPosition
   } = props
 
   const [open, setOpen] = useState(false)
@@ -48,7 +60,7 @@ export const MultiSelect = (props) => {
   }
 
   const closeSelect = (e) => {
-    if (open) {
+    if (open && !isLoading) {
       const outsideDropdown = !dropdownReference.current?.contains(e.target)
       if (outsideDropdown) {
         setOpen(false)
@@ -62,7 +74,9 @@ export const MultiSelect = (props) => {
     const _defaultOption = options?.filter(
       (option) => defaultValue.includes(option.value)
     )
-    setSelectedOptions(_defaultOption)
+    if (!(useLazyPagination && pagination)) {
+      setSelectedOptions(_defaultOption)
+    }
     setValues(defaultValue)
   }, [defaultValue, options, searchValue])
 
@@ -75,6 +89,11 @@ export const MultiSelect = (props) => {
     return () => document.removeEventListener('click', closeSelect)
   }, [open])
 
+  const handlerChangePage = (page) => {
+    setOpen(true)
+    handleChangePage(page)
+  }
+
   const handleSelectOption = (option) => {
     if (option.value === null || option.value === 'default') return
     const _selectedOptions = [...selectedOptions]
@@ -96,48 +115,89 @@ export const MultiSelect = (props) => {
     onChange && onChange(option.value)
   }
 
+  const optionsTextFormatted = (selectedOption, index) => {
+    if (index <= 2) {
+      return `${selectedOption.showOnSelected || selectedOption.content}${index + 1 !== selectedOptions?.length && index <= 2 ? ', ' : ' '}`
+    }
+    if (index + 1 === selectedOptions?.length && selectedOptions?.length >= 4) {
+      return `${andText || 'And'} ${index - 2} +`
+    }
+    return null
+  }
+
+  const filterFunction = (_, index) => {
+    if (!pagination || useLazyPagination) return true
+    const validation = pagination?.currentPage === 1
+      ? index < (pagination.pageSize * pagination.currentPage)
+      : (index >= (pagination.pageSize * (pagination.currentPage - 1))) && (index < (pagination.pageSize * pagination.currentPage))
+    return validation
+  }
+
   return (
-    <SelectInput className={className || 'multi-select'}>
+    <SelectInput useTextStyle={useTextStyle} className={className || 'multi-select'}>
       {selectedOptions.length === 0 ? (
-        <Selected onClick={(e) => handleSelectClick(e)}>
-          {placeholder || ''}
-          <Chevron>
-            <EnChevronDown />
-          </Chevron>
+        <Selected useTextStyle={useTextStyle} onClick={(e) => handleSelectClick(e)}>
+          {useTextStyle ? (
+            <Header>
+              <TextFormatted className={textClassnames}>
+                {placeholder || ''}
+              </TextFormatted>
+            </Header>
+          ) : (
+            <>
+              {placeholder || ''}
+            </>
+          )}
+          {!hideChevronIcon && (
+            <Chevron>
+              <EnChevronDown />
+            </Chevron>
+          )}
         </Selected>
       ) : (
         <Selected onClick={(e) => handleSelectClick(e)}>
-          <Header>
-            {selectedOptions.map((selectedOption) => (
+          <Header useTextStyle={useTextStyle}>
+            {selectedOptions.map((selectedOption, index) => (
               <React.Fragment key={selectedOption.value}>
-                <MultiSelectOption>
-                  {selectedOption.showOnSelected || selectedOption.content}
-                  {selectedOption?.value !== 'default' && (
-                    <Button
-                      circle
-                      outline
-                      color='primary'
-                      type='reset'
-                      className='remove_option'
-                      onClick={() => onChange && onChange(selectedOption.value)}
-                    >
-                      <MdClose />
-                    </Button>
-                  )}
-                </MultiSelectOption>
+                {
+                  useTextStyle ? (
+                    <TextFormatted className={textClassnames} primary>
+                      {optionsTextFormatted(selectedOption, index)}
+                    </TextFormatted>
+                  ) : (
+                    <MultiSelectOption>
+                      {selectedOption.showOnSelected || selectedOption.content}
+                      {selectedOption?.value !== 'default' && (
+                        <Button
+                          circle
+                          outline
+                          color='primary'
+                          type='reset'
+                          className='remove_option'
+                          onClick={() => onChange && onChange(selectedOption.value)}
+                        >
+                          <MdClose />
+                        </Button>
+                      )}
+                    </MultiSelectOption>
+                  )
+                }
               </React.Fragment>
             ))}
           </Header>
-          <Chevron>
-            <EnChevronDown />
-          </Chevron>
+          {!hideChevronIcon && (
+            <Chevron>
+              <EnChevronDown />
+            </Chevron>
+          )}
         </Selected>
       )}
       {open && options && (
         <Options
           isAbsolute
-          position='right'
+          position={optionsPosition ?? 'right'}
           ref={dropdownReference}
+          minWidth='330px'
         >
           {isShowSearchBar && (
             <SearchBarWrapper
@@ -156,7 +216,7 @@ export const MultiSelect = (props) => {
             optionInnerMargin={props.optionInnerMargin}
             optionInnerMaxHeight={props.optionInnerMaxHeight}
           >
-            {options.map((option, i) => (
+            {options.filter(filterFunction).map((option, i) => (
               <MultiOption
                 key={i}
                 color={option.color}
@@ -174,6 +234,17 @@ export const MultiSelect = (props) => {
               </MultiOption>
             ))}
           </OptionsInner>
+          {pagination && handleChangePageSize && handleChangePage && (
+            <PaginationWrapper>
+              <Pagination
+                currentPage={pagination?.currentPage}
+                totalPages={pagination?.totalPages}
+                handleChangePage={handlerChangePage}
+                handleChangePageSize={handleChangePageSize}
+                defaultPageSize={pagination?.pageSize}
+              />
+            </PaginationWrapper>
+          )}
         </Options>
       )}
     </SelectInput>

package/src/styles/MultiSelect/styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const CheckBox = styled.div`
   color: ${props => props.theme.colors.primary};
@@ -7,3 +7,18 @@ export const CheckBox = styled.div`
     font-size: 16px;
   }
 `
+
+export const TextFormatted = styled.span`
+  ${({ primary, theme }) => primary && css`
+    color: ${theme?.colors?.primary};
+  `}
+
+  div {
+    font-size: 14px;
+    color: ${props => props.theme.colors.primary};
+  }
+`
+
+export const PaginationWrapper = styled.div`
+  margin: 20px;
+`

package/src/styles/Selects/index.js

@@ -59,7 +59,7 @@ export const Option = styled.div`
 `
 
 export const Options = styled.div`
-  min-width: 100%;
+  min-width: ${({ minWidth }) => minWidth || '100%'};
   background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
   z-index: 10000;
   border-width: 1px;
@@ -102,8 +102,10 @@ export const OptionsInner = styled.div`
   overscroll-behavior: contain;
 `
 export const Selected = styled.div`
-  padding-left: 15px;
-  padding-right: 15px;
+  ${({ useTextStyle }) => !useTextStyle && css`
+    padding-left: 15px;
+    padding-right: 15px;
+  `}
   cursor: pointer;
   position: relative;
   display: flex;
@@ -136,14 +138,16 @@ export const Selected = styled.div`
 
 export const Select = styled.div`
   display: inline-block;
-  border-radius: 7.6px;
-  line-height: 34px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #DEE2E6;
   color: #344050;
   position: relative;
 
+  ${props => !props.useTextStyle && css`
+    border-radius: 7.6px;
+    line-height: 34px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #DEE2E6;
+  `}
   ${props => props.open && css`
     background-color: ${darken(0.07, '#CCC')};
   `}
@@ -175,7 +179,7 @@ export const Chevron = styled.div`
 export const Header = styled.div`
   flex: 1;
   overflow: auto;
-  white-space: nowrap;
+  white-space: ${({ useTextStyle }) => useTextStyle ? 'pre-wrap' : 'nowrap'};
   display: flex;
   align-items: center;
 `
@@ -262,7 +266,7 @@ export const MultiOption = styled.div`
 
   ${props => props.selected && css`
     background-color: ${darken(0.07, '#fafafa')};
-  
+
     &:hover {
       background-color: ${darken(0.07, '#fafafa')};
     }

package/src/utils/index.js

@@ -354,55 +354,55 @@ export const reviewCommentList = (type) => {
   const reviews = {
     1: {
       1: {
-        title: t('CUSTOMER_QUICK_COMMENT_TITLE_1', "What went wrong?"),
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_1', 'What went wrong?'),
         list: [
-          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_1_0', "Not handled with care") },
-          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_1_1', "Poor communication") },
-          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_1_2', "COVID-19 issue") },
+          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_1_0', 'Not handled with care') },
+          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_1_1', 'Poor communication') },
+          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_1_2', 'COVID-19 issue') },
           { key: 3, content: t('CUSTOMER_QUICK_COMMENT_1_3', "Didn't follow instructions") },
-          { key: 4, content: t('CUSTOMER_QUICK_COMMENT_1_4', "Rude") },
-          { key: 5, content: t('CUSTOMER_QUICK_COMMENT_1_5', "Not on-time") }
+          { key: 4, content: t('CUSTOMER_QUICK_COMMENT_1_4', 'Rude') },
+          { key: 5, content: t('CUSTOMER_QUICK_COMMENT_1_5', 'Not on-time') }
         ]
       },
       2: {
-        title: t('CUSTOMER_QUICK_COMMENT_TITLE_2', "What went wrong?"),
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_2', 'What went wrong?'),
         list: [
-          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_2_0', "Not handled with care") },
-          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_2_1', "Poor communication") },
-          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_2_2', "COVID-19 issue") },
+          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_2_0', 'Not handled with care') },
+          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_2_1', 'Poor communication') },
+          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_2_2', 'COVID-19 issue') },
           { key: 3, content: t('CUSTOMER_QUICK_COMMENT_2_3', "Didn't follow instructions") },
-          { key: 4, content: t('CUSTOMER_QUICK_COMMENT_2_4', "Rude") },
-          { key: 5, content: t('CUSTOMER_QUICK_COMMENT_2_5', "Not on-time") }
+          { key: 4, content: t('CUSTOMER_QUICK_COMMENT_2_4', 'Rude') },
+          { key: 5, content: t('CUSTOMER_QUICK_COMMENT_2_5', 'Not on-time') }
         ]
       },
       3: {
-        title: t('CUSTOMER_QUICK_COMMENT_TITLE_3', "What could have been better?"),
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_3', 'What could have been better?'),
         list: [
-          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_3_0', "Not handled with care") },
-          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_3_1', "Poor communication") },
-          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_3_2', "COVID-19 issue") },
+          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_3_0', 'Not handled with care') },
+          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_3_1', 'Poor communication') },
+          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_3_2', 'COVID-19 issue') },
           { key: 3, content: t('CUSTOMER_QUICK_COMMENT_3_3', "Didn't follow instructions") },
-          { key: 4, content: t('CUSTOMER_QUICK_COMMENT_3_4', "Rude") },
-          { key: 5, content: t('CUSTOMER_QUICK_COMMENT_3_5', "Not on-time") }
+          { key: 4, content: t('CUSTOMER_QUICK_COMMENT_3_4', 'Rude') },
+          { key: 5, content: t('CUSTOMER_QUICK_COMMENT_3_5', 'Not on-time') }
         ]
       },
       4: {
-        title: t('CUSTOMER_QUICK_COMMENT_TITLE_4', " Tell us more"),
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_4', ' Tell us more'),
         list: [
-          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_4_0', "Not handled with care") },
-          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_4_1', "Poor communication") },
-          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_4_2', "COVID-19 issue") },
+          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_4_0', 'Not handled with care') },
+          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_4_1', 'Poor communication') },
+          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_4_2', 'COVID-19 issue') },
           { key: 3, content: t('CUSTOMER_QUICK_COMMENT_4_3', "Didn't follow instructions") },
-          { key: 4, content: t('CUSTOMER_QUICK_COMMENT_4_4', "Rude") },
-          { key: 5, content: t('CUSTOMER_QUICK_COMMENT_4_5', "Not on-time") }
+          { key: 4, content: t('CUSTOMER_QUICK_COMMENT_4_4', 'Rude') },
+          { key: 5, content: t('CUSTOMER_QUICK_COMMENT_4_5', 'Not on-time') }
         ]
       },
       5: {
-        title: t('CUSTOMER_QUICK_COMMENT_TITLE_5', "What went well?"),
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_5', 'What went well?'),
         list: [
-          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_5_0', "Good communication") },
-          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_5_1', "Friendly") },
-          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_5_2', "Above and beyond") }
+          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_5_0', 'Good communication') },
+          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_5_1', 'Friendly') },
+          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_5_2', 'Above and beyond') }
         ]
       }
     }
@@ -460,7 +460,7 @@ export const getOrderStatuPickUp = (status) => {
     { key: 16, value: 'Canceled by customer', slug: 'CANCELED_BY_CUSTOMER', percentage: 0 },
     { key: 17, value: 'Not picked by customer', slug: 'NOT_PICKED_BY_CUSTOMER', percentage: 0 },
     { key: 20, value: 'Customer almost arrived to business', slug: 'CUSTOMER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 70 },
-    { key: 21, value: 'Customer arrived to business', slug: 'CUSTOMER_ARRIVED_TO_BUSINESS', percentage: 90 },
+    { key: 21, value: 'Customer arrived to business', slug: 'CUSTOMER_ARRIVED_TO_BUSINESS', percentage: 90 }
   ]
 
   const objectStatus = orderStatus.find((o) => o.key === status)
@@ -676,3 +676,36 @@ export const TwentyFourHours = [
   '22:00',
   '23:00'
 ]
+
+export const getAttributeName = (key) => {
+  const [, t] = useLanguage()
+  const attributes = [
+    { key: 'autoassign_amount_drivers', content: t('AUTO_ASSIGN_GROUP_ORDERS_TO_DRIVERS', 'Auto assign the order of group to this amount of drivers') },
+    { key: 'orders_group_max_orders', content: t('MAX_NUMBER_ORDERS', 'Maximum Number of Orders') },
+    { key: 'autoassign_autoaccept_by_driver', content: t('ORDER_CONFIRMED_ACCEPTED_BY_DRIVER', 'Accepted by Driver') },
+    { key: 'orders_group_max_time_between', content: t('MAX_ORDER_TIME_BETWEEN', 'Maximum time between orders in seconds') },
+    { key: 'orders_group_max_distance_between_pickup', content: t('MAX_DISTANCE_BETWEEN_BUSINESS', 'Maximum distance between businesses in meters') },
+    { key: 'orders_group_max_distance_between_delivery', content: t('MAX_DISTANCE_BETWEEN_DELIVERY', 'Maximum distance between deliveries in meters') },
+    { key: 'orders_group_use_maps_api', content: t('USE_MAPS_API', 'Use maps api') },
+    { key: 'orders_group_max_time_between_pickup', content: t('MAX_DISTANCE_BETWEEN_BUSINESS', 'Maximum distance between businesses in meters') },
+    { key: 'orders_group_max_time_between_delivery', content: t('MAX_DISTANCE_BETWEEN_DELIVERY', 'Maximum distance between deliveries in meters') },
+    { key: 'autoassign_forced_assignment', content: t('AUTO_ASSIGN_FORCED_ASSIGNMENT', 'Forced assignment') },
+    { key: 'autoassign_customer_max_distance_from_business', content: t('MAX_CUSTOMER_DISTANCE_FROM_BUSINESS', 'Max distance between customer and business') },
+    { key: 'autoassign_initial_radius', content: t('INITIAL_RADIUS', 'Initial radius in meters') },
+    { key: 'autoassign_increment_radius', content: t('INCREMENT_RADIUS', 'Radius increase in meters') },
+    { key: 'autoassign_max_radius', content: t('MAX_RADIUS', 'Maximum radius in meters') },
+    { key: 'autoassign_autoreject_time', content: t('AUTO_REJECT_ORDER_GROUP_AFTER', 'Auto reject Orders After') },
+    { key: 'autoassign_max_orders', content: t('MAX_AMOUNT_ORDERS_PER_DRIVER', 'Maximum amount of orders per drivers') },
+    { key: 'autoassign_max_in_pending', content: t('ORDER_PENDING', 'Pending') },
+    { key: 'available', content: t('AVAILABLE', 'Available') },
+    { key: 'enabled', content: t('ENABLED', 'Enabled') },
+    { key: 'last_available_at', content: t('LAST_AVAILABLE_AT', 'Last available at') },
+    { key: 'busy', content: t('BUSY', 'Busy') }
+  ]
+  const found = attributes.find(attribute => attribute.key === key)
+  if (found) {
+    return found.content
+  } else {
+    return key
+  }
+}