ordering-ui-external 1.8.7 → 1.8.9

package/src/themes/callcenterOriginal/src/components/Shared/RangeCalendar/styles.js

@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  position: relative;
+
+  > button {
+    height: 44px;
+    svg {
+      font-size: 16px;
+      margin-right: 12px;
+      ${props => props.theme.rtl && css`
+        margin-left: 12px;
+        margin-right: 0;
+      `}
+    }
+  }
+`
+
+export const CalendarWrapper = styled.div`
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  z-index: 100;
+  position: absolute;
+  margin-top: 18px;
+  overflow: hidden;
+  width: fit-content;
+
+  ${props => props.theme?.rtl ? css`
+    left: 0px;
+  ` : css`
+    right: 0px;
+  `}
+  ${({ isLeft }) => isLeft && css`
+    ${props => props.theme?.rtl ? css`
+      right: 0px;
+    ` : css`
+      left: 0px;
+    `}
+  `}
+  .rdrDateRangeWrapper {
+    .rdrDateDisplayWrapper {
+      background-color: transparent;
+    }
+    .rdrDateDisplayItem {
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      box-shadow: none;
+    }
+    button {
+      .rdrStartEdge,
+      .rdrEndEdge,
+      .rdrInRange {
+        color: ${props => props.theme.colors.lightPrimary} !important;
+      }
+    }
+    .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span, .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span, .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span, .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {
+      color: ${props => props.theme.colors.headingColor};
+    }
+  }  
+`

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

@@ -0,0 +1,311 @@
+import React, { useState, useEffect } from 'react'
+import {
+  useLanguage,
+  useConfig,
+  Schedule as ScheduleController
+} from 'ordering-components-external'
+import {
+  Trash,
+  PlusSquare,
+  PlusCircleFill,
+  DashCircleFill
+} from 'react-bootstrap-icons'
+import { Alert, Confirm } from '../Confirm'
+import { ScheduleCopyTimes } from '../ScheduleCopyTimes'
+import { SecondSelect as DefaultSelect, Checkbox } from '../../../styles'
+
+import {
+  ScheduleContainer,
+  TimeScheduleItemContainer,
+  Option,
+  SplitLine,
+  IconWrapper,
+  SelectWrapper,
+  AddScheduleIconWrapper,
+  TrashIconWrapper
+} from './styles'
+
+const ScheduleUI = (props) => {
+  const {
+    scheduleState,
+    isConflict,
+    setIsConflict,
+    isTimeChangeError,
+    addScheduleTime,
+    openAddSchedule,
+    setIsTimeChangeError,
+    handleEnabledSchedule,
+    handleChangeScheduleTime,
+    handleDeleteSchedule,
+    handleOpenAddSchedule,
+    handleChangeAddScheduleTime,
+    handleAddSchedule,
+    selectedCopyDays,
+    cleanSelectedCopyDays,
+    handleSelectCopyTimes,
+    handleApplyScheduleCopyTimes
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+
+  const is12Hours = configs.format_time?.value === '12'
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+
+  const [scheduleOptions, setScheduleOptions] = useState([])
+  const [isOpenCopytimes, setIsOpenCopytimes] = useState(null)
+
+  const daysOfWeek = [
+    t('SUNDAY_ABBREVIATION', 'Sun'),
+    t('MONDAY_ABBREVIATION', 'Mon'),
+    t('TUESDAY_ABBREVIATION', 'Tue'),
+    t('WEDNESDAY_ABBREVIATION', 'Wed'),
+    t('THURSDAY_ABBREVIATION', 'Thu'),
+    t('FRIDAY_ABBREVIATION', 'Fri'),
+    t('SATURDAY_ABBREVIATION', 'Sat')
+  ]
+
+  const closeAlert = () => {
+    setIsConflict(false)
+    setIsTimeChangeError(false)
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const onClickDelete = (daysOfWeekIndex, index) => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_ITEM', 'Are you sure to delete this _item_?').replace('_item_', t('SCHEDULE', 'Schedule')),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleDeleteSchedule(daysOfWeekIndex, index)
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (!isTimeChangeError) return
+    setAlertState({
+      open: true,
+      content: [t('END_TIME_LATER', 'Choose an end time later than the start time.')]
+    })
+  }, [isTimeChangeError])
+
+  useEffect(() => {
+    if (!isConflict) return
+    setAlertState({
+      open: true,
+      content: [t('SCHEDULE_CONFLICT', 'There is an schedule conflict')]
+    })
+  }, [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>
+          )
+        })
+      }
+    }
+    _scheduleOptions.push({
+      value: '23:59',
+      content: (
+        <Option>{is12Hours ? '11:59 PM' : '23 : 59'}</Option>
+      )
+    })
+    setScheduleOptions(_scheduleOptions)
+  }, [])
+
+  return (
+    <>
+      <ScheduleContainer>
+        {scheduleState.map((schedule, daysOfWeekIndex) => (
+          <TimeScheduleItemContainer
+            key={daysOfWeekIndex}
+          >
+            <div>
+              <Checkbox
+                checked={schedule?.enabled}
+                onChange={e => handleEnabledSchedule(daysOfWeekIndex, e.target.checked)}
+              />
+              <h4>{daysOfWeek[daysOfWeekIndex]}</h4>
+            </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}
+                    >
+                      <Trash
+                        onClick={() => onClickDelete(daysOfWeekIndex, index)}
+                      />
+                    </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>
+            )}
+            <div>
+              <IconWrapper
+                isHide={!schedule?.enabled}
+              >
+                <PlusSquare
+                  onClick={() => handleOpenAddSchedule(daysOfWeekIndex)}
+                />
+              </IconWrapper>
+              <ScheduleCopyTimes
+                disabled={!schedule?.enabled}
+                cleanSelectedCopyDays={cleanSelectedCopyDays}
+                open={isOpenCopytimes === daysOfWeekIndex}
+                daysOfWeekIndex={daysOfWeekIndex}
+                onClick={setIsOpenCopytimes}
+                onClose={() => setIsOpenCopytimes(null)}
+                selectedCopyDays={selectedCopyDays}
+                handleSelectDays={(value) => handleSelectCopyTimes(value)}
+                handleApplyScheduleCopyTimes={handleApplyScheduleCopyTimes}
+              />
+            </div>
+          </TimeScheduleItemContainer>
+        ))}
+      </ScheduleContainer>
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+      <Confirm
+        width='700px'
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={confirm.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={confirm.open}
+        onClose={() => setConfirm({ ...confirm, open: false })}
+        onCancel={() => setConfirm({ ...confirm, open: false })}
+        onAccept={confirm.handleOnAccept}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const Schedule = (props) => {
+  const scheduleProps = {
+    ...props,
+    UIComponent: ScheduleUI
+  }
+  return (
+    <ScheduleController {...scheduleProps} />
+  )
+}

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

@@ -0,0 +1,164 @@
+import styled, { css } from 'styled-components'
+
+export const ScheduleContainer = styled.div`
+  min-width: 400px;
+`
+
+export const TimeScheduleItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+
+  > div {
+    display: flex;
+    align-items: center;
+    h4 {
+      font-size: 13px;
+      font-weight: 600;
+      margin: 0px;
+      padding: 0 16px;
+    }
+
+    &:first-child {
+      width: 95px;
+    }
+
+    &:nth-child(2) {
+      flex-direction: column;
+      flex: 1;
+      ${props => props.theme?.rtl ? css`
+        padding-right: 10px;
+      ` : css`
+        padding-left: 10px;
+      `}
+      > div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &:not(:last-child) {
+          margin-bottom: 10px;
+        }
+  
+        svg {
+          font-size: 20px;
+          cursor: pointer;
+        }
+      }
+      > p {
+        margin: 6px 0;
+        font-size: 13px;
+      }
+    }
+
+    &:nth-child(3) {
+      > span {
+        svg {
+          cursor: pointer;
+          font-size: 20px;
+          color: ${props => props.theme.colors.primary};
+          ${props => props.theme?.rtl ? css`
+            margin-left: 10px;
+          ` : css`
+            margin-right: 10px;
+          `}
+        }
+      }
+    }
+  }
+
+  @media (min-width: 380px) {
+    > div {
+      h4 {
+        font-size: 14px;
+      }
+      &:nth-child(2) {
+        p {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+`
+
+export const SelectWrapper = styled.div`
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  border-radius: 8px;
+  width: 70px;
+  display: flex;
+  justify-content: center;
+  .select {
+    border: none;
+    svg {
+      display: none;
+    }
+    > div {
+      padding-left: 13px;
+      padding-right: 13px;
+      > div:last-child {
+        margin: 0px;
+      }
+    }
+  }
+  .list {
+    .options {
+      > div {
+        > div {
+          min-width: initial;
+        }
+      }
+    }
+  }
+
+  @media (min-width: 380px) {
+    width: 100px;
+  }
+`
+
+export const Option = styled.div`
+  white-space: nowrap;
+`
+
+export const SplitLine = styled.div`
+  height: 1px;
+  width: 8px;
+  margin: 0 8px;
+  background-color: ${props => props.theme.colors.disabled};
+`
+export const IconWrapper = styled.span`
+  ${({ isHide }) => isHide ? css`
+    opacity: 0;
+    pointer-events: none;
+  ` : css`
+    opacity: 1;
+  `}
+`
+export const TrashIconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 56px;
+  ${({ isHide }) => isHide ? css`
+    opacity: 0;
+    pointer-events: none;
+  ` : css`
+    opacity: 1;
+  `}
+`
+
+export const AddScheduleIconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 56px;
+  > svg {
+    color: ${props => props.theme.colors.primary};
+    ${props => props.theme?.rtl ? css`
+      margin-right: 8px;
+    ` : css`
+      margin-left: 8px;
+    `}
+    &:last-child {
+      color: ${props => props.theme.colors.lightGray};
+    }
+  }
+`

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

@@ -0,0 +1,114 @@
+import React, { useRef, useEffect } from 'react'
+import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
+import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
+import { useLanguage } from 'ordering-components-external'
+import MdcContentCopy from '@meronex/icons/mdc/MdcContentCopy'
+import { Button } from '../../../styles'
+
+import {
+  HeaderItem,
+  PopoverBody,
+  Title,
+  PopoverList,
+  CopyItem
+} from './styles'
+
+export const ScheduleCopyTimes = (props) => {
+  const {
+    disabled,
+    open,
+    daysOfWeekIndex,
+    selectedCopyDays,
+    handleSelectDays,
+    cleanSelectedCopyDays,
+    handleApplyScheduleCopyTimes
+  } = props
+  const [, t] = useLanguage()
+  const referenceElement = useRef()
+  const popperElement = useRef()
+
+  const daysOptions = [
+    { value: 0, content: t('DAY7', 'Sunday') },
+    { value: 1, content: t('DAY1', 'Monday') },
+    { value: 2, content: t('DAY2', 'Tuesday') },
+    { value: 3, content: t('DAY3', 'Wednesday') },
+    { value: 4, content: t('DAY4', 'Thursday') },
+    { value: 5, content: t('DAY5', 'Friday') },
+    { 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()
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('mouseup', handleClickOutside)
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('mouseup', handleClickOutside)
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    cleanSelectedCopyDays()
+  }, [open])
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <HeaderItem
+        ref={referenceElement}
+        disabled={disabled}
+        onClick={() => props.onClick(daysOfWeekIndex)}
+      >
+        <MdcContentCopy />
+      </HeaderItem>
+      {open && (
+        <PopoverBody ref={popperElement}>
+          <Title>{t('COPY_TIMES_TO', 'Copy times to')}</Title>
+          <PopoverList>
+            {daysOptions.map(option => (
+              <React.Fragment key={option.value}>
+                <CopyItem
+                  disabled={option.value === daysOfWeekIndex}
+                  isChecked={selectedCopyDays.includes(option.value)}
+                  onClick={() => handleSelectDays(option.value)}
+                >
+                  {(option.value === daysOfWeekIndex || selectedCopyDays.includes(option.value)) ? (
+                    <RiCheckboxFill />
+                  ) : (
+                    <RiCheckboxBlankLine />
+                  )}
+                  <span>
+                    {option.content}
+                  </span>
+                </CopyItem>
+              </React.Fragment>
+            ))}
+          </PopoverList>
+          <Button
+            color='primary'
+            onClick={() => {
+              handleApplyScheduleCopyTimes(daysOfWeekIndex)
+              props.onClose && props.onClose()
+            }}
+          >
+            {t('APPLY', 'Apply')}
+          </Button>
+        </PopoverBody>
+      )}
+    </div>
+  )
+}