ordering-ui-admin-external 1.44.100 → 1.45.1

package/src/components/Shared/Schedule/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import {
   useLanguage,
   useConfig,
@@ -59,7 +59,8 @@ const ScheduleUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
 
-  const [scheduleOptions, setScheduleOptions] = useState([])
+  const minuteOptions = useRef([])
+  const hourOptions = useRef([])
   const [isOpenCopytimes, setIsOpenCopytimes] = useState(null)
 
   const daysOfWeek = [
@@ -115,53 +116,24 @@ const ScheduleUI = (props) => {
   }, [isConflict])
 
   useEffect(() => {
-    const _scheduleOptions = []
-    for (let hour = 0; hour < 24; hour++) {
-      let hh = ''
-      let meridian = ''
-      if (!is12Hours) hh = hour < 10 ? `0${hour}` : hour
-      else {
-        if (hour === 0) {
-          hh = '12'
-          meridian = ' ' + t('AM', 'AM')
-        } else if (hour > 0 && hour < 12) {
-          hh = (hour < 10 ? '0' + hour : hour)
-          meridian = ' ' + t('AM', 'AM')
-        } else if (hour === 12) {
-          hh = '12'
-          meridian = ' ' + t('PM', 'PM')
-        } else {
-          hh = ((hour - 12 < 10) ? '0' + (hour - 12) : (hour - 12))
-          meridian = ' ' + t('PM', 'PM')
-        }
-      }
-      for (let min = 0; min < 4; min++) {
-        _scheduleOptions.push({
-          value: hour + ':' + min * 15,
-          content: (
-            <Option>
-              {is12Hours ? (
-                <>
-                  {hh}:{min === 0 ? '00' : min * 15} {meridian}
-                </>
-              ) : (
-                <>
-                  {hh} : {min === 0 ? '00' : min * 15}
-                </>
-              )}
-            </Option>
-          )
-        })
-      }
+    const generateOptions = (count, formatFn) => {
+      return Array.from({ length: count }, (_, i) => ({
+        value: i,
+        content: <Option>{formatFn(i)}</Option>
+      }))
     }
-    _scheduleOptions.push({
-      value: '23:59',
-      content: (
-        <Option>{is12Hours ? '11:59 PM' : '23 : 59'}</Option>
-      )
-    })
-    setScheduleOptions(_scheduleOptions)
-  }, [])
+
+    const formatMinute = (i) => (i < 10 ? `0${i}` : i)
+    const formatHour = (hour) => {
+      if (!is12Hours) return hour < 10 ? `0${hour}` : hour
+      if (hour === 0) return `12 ${t('AM', 'AM')}`
+      if (hour < 12) return `${hour} ${t('AM', 'AM')}`
+      if (hour === 12) return `12 ${t('PM', 'PM')}`
+      return `${hour - 12} ${t('PM', 'PM')}`
+    }
+    minuteOptions.current = generateOptions(60, formatMinute)
+    hourOptions.current = generateOptions(24, formatHour)
+  }, [is12Hours])
 
   return (
     <>
@@ -184,95 +156,117 @@ const ScheduleUI = (props) => {
                 )}
               </DateWrapper>
             </div>
-            {schedule?.enabled ? (
-              <div>
-                {schedule?.lapses.map((lapse, index) => (
-                  <div
-                    key={index}
-                  >
-                    <SelectWrapper>
-                      <DefaultSelect
-                        noSelected
-                        options={scheduleOptions}
-                        defaultValue={
-                          lapse?.open?.hour === 23 && lapse?.open?.minute === 59
-                            ? `${lapse?.open?.hour}:${lapse?.open?.minute}`
-                            : `${lapse?.open?.hour}:${parseInt(lapse?.open?.minute / 15) * 15}`
-                        }
-                        onChange={val => handleChangeScheduleTime(val, daysOfWeekIndex, index, true)}
-                        optionInnerMaxHeight='300px'
-                      />
-                    </SelectWrapper>
-                    <SplitLine />
-                    <SelectWrapper>
-                      <DefaultSelect
-                        noSelected
-                        options={scheduleOptions}
-                        defaultValue={
-                          lapse?.close?.hour === 23 && lapse?.close?.minute === 59
-                            ? `${lapse?.close?.hour}:${lapse?.close?.minute}`
-                            : `${lapse?.close?.hour}:${parseInt(lapse?.close?.minute / 15) * 15}`
-                        }
-                        onChange={val => handleChangeScheduleTime(val, daysOfWeekIndex, index, false)}
-                        optionInnerMaxHeight='300px'
-                      />
-                    </SelectWrapper>
-                    <TrashIconWrapper
-                      isHide={schedule?.lapses.length <= 1}
+            {schedule?.enabled
+              ? (
+                <div>
+                  {schedule?.lapses.map((lapse, index) => (
+                    <div
+                      key={index}
                     >
-                      {!disableSchedule && (
-                        <Trash
-                          onClick={() => onClickDelete(daysOfWeekIndex, index)}
+                      <SelectWrapper>
+                        <DefaultSelect
+                          noSelected
+                          options={hourOptions.current}
+                          defaultValue={lapse?.open?.hour}
+                          onChange={val => handleChangeScheduleTime(val, daysOfWeekIndex, index, true, 'hour')}
+                          optionInnerMaxHeight='300px'
                         />
-                      )}
-                    </TrashIconWrapper>
-                  </div>
-                ))}
-                {openAddSchedule[daysOfWeekIndex] && (
-                  <div>
-                    <SelectWrapper>
-                      <DefaultSelect
-                        noSelected
-                        options={scheduleOptions}
-                        defaultValue={
-                          addScheduleTime?.open?.hour === 23 && addScheduleTime?.open?.minute === 59
-                            ? `${addScheduleTime?.open?.hour}:${addScheduleTime?.open?.minute}`
-                            : `${addScheduleTime?.open?.hour}:${parseInt(addScheduleTime?.open?.minute / 15) * 15}`
-                        }
-                        optionInnerMaxHeight='300px'
-                        onChange={val => handleChangeAddScheduleTime(val, true)}
-                      />
-                    </SelectWrapper>
-                    <SplitLine />
-                    <SelectWrapper>
-                      <DefaultSelect
-                        noSelected
-                        options={scheduleOptions}
-                        defaultValue={
-                          addScheduleTime?.close?.hour === 23 && addScheduleTime?.close?.minute === 59
-                            ? `${addScheduleTime?.close?.hour}:${addScheduleTime?.close?.minute}`
-                            : `${addScheduleTime?.close?.hour}:${parseInt(addScheduleTime?.close?.minute / 15) * 15}`
-                        }
-                        optionInnerMaxHeight='300px'
-                        onChange={val => handleChangeAddScheduleTime(val, false)}
-                      />
-                    </SelectWrapper>
-                    <AddScheduleIconWrapper>
-                      <PlusCircleFill
-                        onClick={() => handleAddSchedule(daysOfWeekIndex)}
-                      />
-                      <DashCircleFill
-                        onClick={() => handleOpenAddSchedule(null)}
-                      />
-                    </AddScheduleIconWrapper>
-                  </div>
-                )}
-              </div>
-            ) : (
-              <div>
-                <p>{t('UNAVAILABLE', 'Unavailable')}</p>
-              </div>
-            )}
+                      </SelectWrapper>
+                      <SelectWrapper>
+                        <DefaultSelect
+                          noSelected
+                          options={minuteOptions.current}
+                          defaultValue={lapse?.open?.minute}
+                          onChange={val => handleChangeScheduleTime(val, daysOfWeekIndex, index, true, 'minute')}
+                          optionInnerMaxHeight='300px'
+                        />
+                      </SelectWrapper>
+                      <SplitLine />
+                      <SelectWrapper>
+                        <DefaultSelect
+                          noSelected
+                          options={hourOptions.current}
+                          defaultValue={lapse?.close?.hour}
+                          onChange={val => handleChangeScheduleTime(val, daysOfWeekIndex, index, false, 'hour')}
+                          optionInnerMaxHeight='300px'
+                        />
+                      </SelectWrapper>
+                      <SelectWrapper>
+                        <DefaultSelect
+                          noSelected
+                          options={minuteOptions.current}
+                          defaultValue={lapse?.close?.minute}
+                          onChange={val => handleChangeScheduleTime(val, daysOfWeekIndex, index, false, 'minute')}
+                          optionInnerMaxHeight='300px'
+                        />
+                      </SelectWrapper>
+                      <TrashIconWrapper
+                        isHide={schedule?.lapses.length <= 1}
+                      >
+                        {!disableSchedule && (
+                          <Trash
+                            onClick={() => onClickDelete(daysOfWeekIndex, index)}
+                          />
+                        )}
+                      </TrashIconWrapper>
+                    </div>
+                  ))}
+                  {openAddSchedule[daysOfWeekIndex] && (
+                    <div>
+                      <SelectWrapper>
+                        <DefaultSelect
+                          noSelected
+                          options={hourOptions.current}
+                          defaultValue={addScheduleTime?.open?.hour}
+                          onChange={val => handleChangeAddScheduleTime(val, true, 'hour')}
+                          optionInnerMaxHeight='300px'
+                        />
+                      </SelectWrapper>
+                      <SelectWrapper>
+                        <DefaultSelect
+                          noSelected
+                          options={minuteOptions.current}
+                          defaultValue={addScheduleTime?.open?.minute}
+                          onChange={val => handleChangeAddScheduleTime(val, true, 'minute')}
+                          optionInnerMaxHeight='300px'
+                        />
+                      </SelectWrapper>
+                      <SplitLine />
+                      <SelectWrapper>
+                        <DefaultSelect
+                          noSelected
+                          options={hourOptions.current}
+                          defaultValue={addScheduleTime?.close?.hour}
+                          onChange={val => handleChangeAddScheduleTime(val, false, 'hour')}
+                          optionInnerMaxHeight='300px'
+                        />
+                      </SelectWrapper>
+                      <SelectWrapper>
+                        <DefaultSelect
+                          noSelected
+                          options={minuteOptions.current}
+                          defaultValue={addScheduleTime?.close?.minute}
+                          onChange={val => handleChangeAddScheduleTime(val, false, 'minute')}
+                          optionInnerMaxHeight='300px'
+                        />
+                      </SelectWrapper>
+                      <AddScheduleIconWrapper>
+                        <PlusCircleFill
+                          onClick={() => handleAddSchedule(daysOfWeekIndex)}
+                        />
+                        <DashCircleFill
+                          onClick={() => handleOpenAddSchedule(null)}
+                        />
+                      </AddScheduleIconWrapper>
+                    </div>
+                  )}
+                </div>
+              )
+              : (
+                <div>
+                  <p>{t('UNAVAILABLE', 'Unavailable')}</p>
+                </div>
+              )}
             {!disableSchedule && (
               <div>
                 <IconWrapper

package/src/components/Shared/Schedule/styles.js

@@ -22,17 +22,12 @@ export const TimeScheduleItemContainer = styled.div`
     }
 
     &:first-child {
-      min-width: 95px;
+      min-width: 70px;
     }
 
     &:nth-child(2) {
       flex-direction: column;
       flex: 1;
-      ${props => props.theme?.rtl ? css`
-        padding-right: 8px;
-      ` : css`
-        padding-left: 8px;
-      `}
       > div {
         display: flex;
         justify-content: center;
@@ -40,7 +35,6 @@ export const TimeScheduleItemContainer = styled.div`
         &:not(:last-child) {
           margin-bottom: 10px;
         }
-  
         svg {
           font-size: 18px;
           cursor: pointer;
@@ -58,9 +52,11 @@ export const TimeScheduleItemContainer = styled.div`
           cursor: pointer;
           font-size: 18px;
           color: ${props => props.theme.colors.primary};
-          ${props => props.theme?.rtl ? css`
+          ${props => props.theme?.rtl
+? css`
             margin-left: 10px;
-          ` : css`
+          `
+: css`
             margin-right: 10px;
           `}
         }
@@ -125,7 +121,8 @@ export const SelectWrapper = styled.div`
   }
 
   @media (min-width: 450px) {
-    width: 95px;
+    width: 70px;
+    margin: 0px 5px;
     .select {
       > div {
         font-size: 16px;
@@ -146,10 +143,12 @@ export const SplitLine = styled.div`
   background-color: ${props => props.theme.colors.disabled};
 `
 export const IconWrapper = styled.span`
-  ${({ isHide }) => isHide ? css`
+  ${({ isHide }) => isHide
+? css`
     opacity: 0;
     pointer-events: none;
-  ` : css`
+  `
+: css`
     opacity: 1;
   `}
 `
@@ -157,10 +156,12 @@ export const TrashIconWrapper = styled.div`
   display: flex;
   justify-content: center;
   width: 50px;
-  ${({ isHide }) => isHide ? css`
+  ${({ isHide }) => isHide
+? css`
     opacity: 0;
     pointer-events: none;
-  ` : css`
+  `
+: css`
     opacity: 1;
   `}
   @media (min-width: 450px) {
@@ -174,9 +175,11 @@ export const AddScheduleIconWrapper = styled.div`
   width: 50px;
   > svg {
     color: ${props => props.theme.colors.primary};
-    ${props => props.theme?.rtl ? css`
+    ${props => props.theme?.rtl
+? css`
       margin-right: 8px;
-    ` : css`
+    `
+: css`
       margin-left: 8px;
     `}
     &:last-child {

package/src/components/Shared/ScheduleCopyTimes/index.js

@@ -4,7 +4,9 @@ import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
 import { useLanguage } from 'ordering-components-admin-external'
 import MdcContentCopy from '@meronex/icons/mdc/MdcContentCopy'
 import { Button } from '../../../styles'
-
+import {
+  X as CloseIcon
+} from 'react-bootstrap-icons'
 import {
   HeaderItem,
   PopoverBody,
@@ -37,15 +39,6 @@ export const ScheduleCopyTimes = (props) => {
     { value: 6, content: t('DAY6', 'Saturday') }
   ]
 
-  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()
@@ -53,10 +46,8 @@ export const ScheduleCopyTimes = (props) => {
   }
 
   useEffect(() => {
-    window.addEventListener('mouseup', handleClickOutside)
     window.addEventListener('keydown', handleKeyDown)
     return () => {
-      window.removeEventListener('mouseup', handleClickOutside)
       window.removeEventListener('keydown', handleKeyDown)
     }
   }, [open])
@@ -77,6 +68,7 @@ export const ScheduleCopyTimes = (props) => {
       </HeaderItem>
       {open && (
         <PopoverBody ref={popperElement}>
+          <CloseIcon className='close-icon' onClick={() => props.onClose && props.onClose()} />
           <Title>{t('COPY_TIMES_TO', 'Copy times to')}</Title>
           <PopoverList>
             {daysOptions.map(option => (

package/src/components/Shared/ScheduleCopyTimes/styles.js

@@ -30,15 +30,24 @@ export const PopoverBody = styled.div`
   border-radius: 6px;
 
   ${props => props.theme?.rtl ? css`
-    left: 0px;
+    left: 60px;
   ` : css`
-    right: 0px;
+    right: 60px;
   `}
 
   > button {
     width: calc(100% - 20px);
     margin: 5px 10px 0 10px;
   }
+  .close-icon {
+    position: absolute;
+    width: 28px;
+    height: 28px;
+    z-index: 100;
+    right: 0px;
+    top: 0px;
+    cursor: pointer;
+  }
 `
 
 export const Title = styled.div`
@@ -89,4 +98,4 @@ export const CopyItem = styled.div`
       color: ${props => props.theme.colors?.primary};
     }
   `}
-`
+`

package/src/styles/Select/index.js

@@ -21,7 +21,7 @@ import {
 } from './styles'
 import { PaginationWrapper } from '../MultiSelect/styles'
 
-export const Select = (props) => {
+export const Select = React.memo((props) => {
   const {
     placeholder,
     options,
@@ -237,4 +237,11 @@ export const Select = (props) => {
       </PopoverBody>
     </div>
   )
-}
+}, (prevProps, nextProps) => {
+  return prevProps.defaultValue === nextProps.defaultValue &&
+    prevProps.options === nextProps.options &&
+    prevProps.searchValue === nextProps.searchValue &&
+    prevProps.pagination === nextProps.pagination
+})
+
+Select.displayName = 'Select'