ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,78 @@
+import styled from 'styled-components'
+
+export const PageNotFoundContainer = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 55px;
+  margin-top: 60px;
+  div{
+    width: 50%;
+  }
+  img {
+    width: 100%;
+  }
+  @media (max-width: 980px){
+    div{
+      width: 80%;
+    }
+  }
+  @media (max-width: 550px){
+    div{
+      width: 100%;
+    }
+  }
+`
+
+export const PageNotFoundText = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 14px;
+  span{
+    padding: 12px 20px;
+    background-color: white;
+    font-size: 2.5rem;
+    border-radius: 12px;
+    border: 2px solid black;
+  }
+  img{
+    position: relative;
+    width: 8%;
+    bottom: 17px;
+  }
+  @media (max-width: 1024px){
+    span{
+      padding: 10px 20px;
+      font-size: 1.7rem;
+      border: 1.8px solid black;
+    }
+    img{
+      bottom: 14px;
+    }
+  }
+  @media (max-width: 980px){
+    span{
+      border: 2px solid black;
+    }
+    img{
+      width: 7%;
+    }
+  }
+  @media (max-width: 425px){
+    span{
+      font-size: 1.2rem;
+      border-width: 1px;
+      padding: 10px 15px
+    }
+  }
+  @media (max-width: 320px){
+    img{
+      width: 10%;
+    }
+  }
+`

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

@@ -0,0 +1,102 @@
+import React, { useState, useEffect, useLayoutEffect } from 'react'
+import { useWindowSize } from '../../../../../../hooks/useWindowSize'
+import { AutoscrollContainer } from './styles'
+import MdKeyboardArrowLeft from '@meronex/icons/md/MdKeyboardArrowLeft'
+import MdKeyboardArrowRight from '@meronex/icons/md/MdKeyboardArrowRight'
+import { useTheme } from '../../../../../../contexts/ThemeContext'
+
+export const AutoScroll = ({ children, modal, special, innerScroll, scrollId }) => {
+  const { width } = useWindowSize()
+  const [parentElement, setParentElement] = useState([])
+  const [containerElement, setContainerElement] = useState([])
+  const [theme] = useTheme()
+
+  const autoScrollId = scrollId || 'autoscroll'
+  const [parentWidth, setParentWidth] = useState(null)
+
+  useLayoutEffect(() => {
+    const element = document?.getElementById(`${autoScrollId}`)?.parentNode
+    element && element.parentNode.addEventListener('scroll', handleScroll)
+    const containerElement = element?.parentNode
+    setParentWidth(element?.offsetWidth)
+    setParentElement(element)
+    setContainerElement(containerElement)
+
+    return () => {
+      if (containerElement?.length) {
+        containerElement.removeEventListener('scroll', handleScroll)
+      }
+    }
+  })
+
+  useEffect(() => {
+    handleScroll()
+  })
+
+  const handleScroll = () => {
+    const autoScrollContainer = document?.getElementById(`${autoScrollId}`)
+    const botonRight = autoScrollContainer?.querySelector('.right-autoscroll')
+    const botonLeft = autoScrollContainer?.querySelector('.left-autoscroll')
+    if (botonLeft || botonRight) {
+      if (theme?.rtl) {
+        if ((containerElement?.scrollLeft * -1) < 40) {
+          botonRight && botonRight.classList.add('hidden')
+        } else {
+          botonRight && botonRight.classList.remove('hidden')
+        }
+        if ((containerElement?.scrollLeft * -1) > parentElement?.scrollWidth - containerElement?.offsetWidth - 20) {
+          botonLeft && botonLeft.classList.add('hidden')
+        } else {
+          botonLeft && botonLeft.classList.remove('hidden')
+        }
+      } else {
+        if (containerElement?.scrollLeft < 40) {
+          botonLeft && botonLeft.classList.add('hidden')
+        } else {
+          botonLeft && botonLeft.classList.remove('hidden')
+        }
+        if (containerElement?.scrollLeft > parentElement?.scrollWidth - containerElement?.offsetWidth - 40) {
+          botonRight && botonRight.classList.add('hidden')
+        } else {
+          botonRight && botonRight.classList.remove('hidden')
+        }
+      }
+    }
+  }
+
+  const scrolling = (left) => {
+    if (left) {
+      containerElement.scrollBy({
+        top: 0,
+        left: (((-parentElement.offsetWidth / 10) > -200) ? -200 : -parentElement.offsetWidth / 10),
+        behavior: 'smooth'
+      })
+    } else {
+      containerElement.scrollBy({
+        top: 0,
+        left: (((+parentElement.offsetWidth / 10) < 200) ? 200 : +parentElement.offsetWidth / 10),
+        behavior: 'smooth'
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (!scrollId) return
+    const element = document?.getElementById(`${autoScrollId}`)?.parentNode
+    setParentWidth(element.width)
+    setParentElement(element)
+  }, [scrollId])
+
+  return (
+    <AutoscrollContainer modal={modal} id={`${autoScrollId}`}>
+      {
+        ((!special ? width < parentWidth + 50 : width < parentWidth) || (!special && innerScroll ? containerElement?.offsetWidth < parentWidth + 50 : containerElement?.offsetWidth < parentWidth)) ? <MdKeyboardArrowLeft className='left-autoscroll' onMouseDown={() => scrolling(true)} /> : ''
+      }
+      {children}
+      {
+        ((!special ? width < parentWidth + 50 : width < parentWidth) || (!special && innerScroll ? containerElement?.offsetWidth < parentWidth + 50 : containerElement?.offsetWidth < parentWidth)) ? <MdKeyboardArrowRight className='right-autoscroll' onMouseDown={() => scrolling()} /> : ''
+      }
+    </AutoscrollContainer>
+
+  )
+}

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

@@ -0,0 +1,85 @@
+import styled, { css } from 'styled-components'
+
+export const AutoscrollContainer = styled.span`
+  display: ${props => props.modal ? 'flex' : 'inherit'};
+  width: ${props => props.modal ? '300vw' : 'initial'};
+   
+  .right-autoscroll,
+  .left-autoscroll {
+    z-index: 10;
+    width: 25px;
+    min-width: 25px;
+    height: 25px;
+    background: #D9D9D9;
+    display: inline-block;
+    border-radius: 50%;
+    align-self: center;
+    top: ${props => props.modal ? '35%' : '0'};
+    position: sticky;
+    color: #000000;
+    border: 1px solid #D9D9D9;
+    opacity: 0.8;
+  }
+
+  .right-autoscroll{
+    ${props => props.theme?.rtl ? css`
+      left: 91%;
+    ` : css`
+      right: 1%;
+    `}
+  }
+  .left-autoscroll{
+    ${props => props.theme?.rtl ? css`
+      right: 91%;
+    ` : css`
+      left: 1%;
+    `}    
+  }
+  svg:active{
+    border: 0
+  }
+  svg.hidden{
+    display: none;
+  }
+
+  @media (min-width: 480px){
+    .right-autoscroll{
+    ${props => props.theme?.rtl && css`
+      left: 94%;
+    `}
+   }
+    .left-autoscroll{
+      ${props => props.theme?.rtl && css`
+        right: 94%;
+      `
+      }
+    }
+  }
+
+  @media (min-width: 768px){
+    width: ${props => props.modal && '100%'};
+    display: inherit;
+    ${props => props.modal && css`
+      .left-autoscroll{
+        opacity: 0;
+      }
+      .right-autoscroll{
+        opacity: 0;
+      }
+    `}
+  }
+
+  @media (min-width: 1024px){
+    .right-autoscroll{
+    ${props => props.theme?.rtl && css`
+      left: 97%;
+    `}
+   }
+    .left-autoscroll{
+      ${props => props.theme?.rtl && css`
+        right: 97%;
+      `
+    }
+  }
+  }
+`

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

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, CityList as CityListController } from 'ordering-components-external'
+import { MultiSelect } from '../../../styles'
+import { Select } from '../../../styles/Select'
+import Skeleton from 'react-loading-skeleton'
+import {
+  PlaceholderTitle,
+  Option
+} from './styles'
+
+const CitySelectorUI = (props) => {
+  const {
+    isAddMode,
+    citiesList,
+    isDefault,
+    filterValues,
+    defaultValue,
+    handleChangeCity,
+    position,
+    optionInnerMaxHeight
+  } = props
+
+  const [cityOptions, setCityOptions] = useState([])
+  const [, t] = useLanguage()
+  const placeholder = <PlaceholderTitle isDefault={isDefault}>{t('SELECT_CITY', 'Select City')}</PlaceholderTitle>
+
+  useEffect(() => {
+    if (citiesList?.loading) return
+    const _cityOptions = citiesList?.cities.map(city => {
+      return {
+        value: city.id,
+        content: <Option noPadding isDefault={isDefault}>{city?.name}</Option>,
+        showOnSelected: <Option isDefault={isDefault}>{city?.name}</Option>
+      }
+    })
+    setCityOptions(_cityOptions)
+  }, [citiesList, isDefault])
+
+  useEffect(() => {
+    if (!isAddMode) return
+    if (cityOptions.length === 1) {
+      handleChangeCity(citiesList?.cities[0]?.id)
+    }
+  }, [cityOptions, isAddMode])
+
+  return (
+    <>
+      {citiesList?.loading ? (
+        <div>
+          <Skeleton style={{ height: '100%', lineHeight: 'normal' }} />
+        </div>
+      ) : (
+        <>
+          {isDefault ? (
+            <Select
+              position={position}
+              optionInnerMaxHeight={optionInnerMaxHeight}
+              placeholder={placeholder}
+              defaultValue={defaultValue}
+              options={cityOptions}
+              onChange={(city) => handleChangeCity(city)}
+            />
+          ) : (
+            <MultiSelect
+              placeholder={placeholder}
+              defaultValue={filterValues?.cityIds}
+              options={cityOptions}
+              onChange={(city) => handleChangeCity(city)}
+            />
+          )}
+        </>
+      )}
+    </>
+  )
+}
+
+export const CitySelector = (props) => {
+  const cityListProps = {
+    ...props,
+    UIComponent: CitySelectorUI
+  }
+  return <CityListController {...cityListProps} />
+}

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

@@ -0,0 +1,50 @@
+import styled, { css } from 'styled-components'
+
+export const Option = styled.div`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 300px;
+
+  ${({ isDefault }) => isDefault ? css`
+    padding: 5px 15px;
+  ` : css`
+    padding: 10px;
+  `}
+
+  ${({ noPadding }) => noPadding && css`
+    padding: 0px;
+  `}
+
+  svg {
+    margin-right: 5px;
+    ${props => props.theme?.rtl && css`
+      margin-left: 5px;
+      margin-right: 0px;
+    `} 
+  }
+
+  ${({ isDefault }) => !isDefault && css`
+    ${props => props.theme?.rtl ? css`
+      margin-right: 10px;
+    ` : css`
+      margin-left: 10px;
+    `}
+  `}
+`
+
+export const PlaceholderTitle = styled(Option)`
+  color: ${props => props.theme.colors.headingColor};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+
+  ${({ isDefault }) => isDefault ? css`
+    padding: 5px 15px;
+    ` : css`
+    padding: 10px;
+    margin-right: 0px;
+    margin-left: 0px;
+  `}
+`

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

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react'
+import { CaretDownFill } from 'react-bootstrap-icons'
+import { SketchPicker } from 'react-color'
+import {
+  Container,
+  ColorWrapper,
+  ColorBox,
+  ColorPickerWrapper
+} from './styles'
+
+export const ColorPicker = (props) => {
+  const {
+    defaultColor,
+    onChangeColor
+  } = props
+
+  const [sketchPickerColor, setSketchPickerColor] = useState('#F5F9FF')
+  const [open, setOpen] = useState(false)
+
+  const handleChangePickerColor = (picker) => {
+    setSketchPickerColor(picker.hex)
+    onChangeColor && onChangeColor(picker.hex)
+  }
+
+  useEffect(() => {
+    if (defaultColor) {
+      setSketchPickerColor(defaultColor)
+    }
+  }, [defaultColor])
+
+  const closePicker = (e) => {
+    if (!open) return
+    const outSideClick = !e.target.closest('.ordering-color-picker')
+    if (outSideClick) setOpen(false)
+  }
+
+  useEffect(() => {
+    document.addEventListener('click', closePicker)
+    return () => document.removeEventListener('click', closePicker)
+  }, [open])
+
+  return (
+    <Container>
+      <ColorWrapper onClick={() => setOpen(true)}>
+        <ColorBox bgColor={sketchPickerColor} />
+        <CaretDownFill />
+      </ColorWrapper>
+      {open && (
+        <ColorPickerWrapper className='ordering-color-picker'>
+          <SketchPicker
+            onChange={handleChangePickerColor}
+            color={sketchPickerColor}
+            disableAlpha
+          />
+        </ColorPickerWrapper>
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  position: relative;
+`
+
+export const ColorWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  svg {
+    font-size: 20px;
+  }
+`
+
+export const ColorBox = styled.div`
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  min-width: 44px;
+  margin-right: 10px;
+  background-color: ${props => props.theme.colors.backgroundInfo};
+  border: 1px solid ${props => props.theme.colors.borderColor};
+
+  ${props => props.theme.rtl && css`
+    margin-left: 10px;
+    margin-right: 0px;
+  `}
+
+  ${({ bgColor }) => bgColor && css`
+    background-color: ${bgColor};
+  `}
+`
+
+export const ColorPickerWrapper = styled.div`
+  position: absolute;
+  left: 0px;
+  top: 100%;
+  z-index: 999;
+  margin-top: 5px;
+
+  ${props => props.theme?.rtl && css`
+    right: 0px;
+    left: initial;
+  `}
+`

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

@@ -0,0 +1,116 @@
+import React, { useState, useRef, useEffect } from 'react'
+import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
+import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
+import { LayoutThreeColumns } from 'react-bootstrap-icons'
+import { usePopper } from 'react-popper'
+import { IconButton } from '../../../styles'
+
+import {
+  HeaderItem,
+  PopoverBody,
+  PopoverList,
+  AllowItem,
+  Title
+} from './styles'
+
+export const ColumnAllowSettingPopover = (props) => {
+  const {
+    optionsDefault,
+    allowColumns,
+    handleChangeAllowColumns,
+    title,
+    isOrder
+  } = props
+
+  const [open, setOpen] = useState(false)
+
+  const referenceElement = useRef()
+  const popperElement = useRef()
+  const arrowElement = useRef()
+
+  const popper = usePopper(referenceElement.current, popperElement.current, {
+    placement: 'bottom-end',
+    modifiers: [
+      { name: 'arrow', options: { element: arrowElement.current } },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 12]
+        }
+      }
+    ]
+  })
+
+  const { styles, attributes, update } = popper
+
+  useEffect(() => {
+    update && update()
+  }, [open])
+
+  const handleClickOutside = (e) => {
+    if (!open) return
+    const outsidePopover = !popperElement.current?.contains(e.target)
+    const outsidePopoverMenu = !referenceElement.current?.contains(e.target)
+    if (outsidePopover && outsidePopoverMenu) {
+      setOpen(false)
+    }
+  }
+
+  const handleKeyDown = (e) => {
+    if (e.keyCode === 27) {
+      setOpen(false)
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('mouseup', handleClickOutside)
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('mouseup', handleClickOutside)
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open])
+
+  const popStyle = { ...styles.popper, display: open ? 'block' : 'none', minWidth: '100px' }
+  if (!open) {
+    popStyle.transform = 'translate3d(0px, 0px, 0px)'
+  }
+
+  return (
+    <div style={{ overflow: 'hidden' }}>
+      <HeaderItem>
+        <IconButton
+          color='black'
+          ref={referenceElement}
+          onClick={() => setOpen(!open)}
+        >
+          <LayoutThreeColumns />
+        </IconButton>
+      </HeaderItem>
+      <PopoverBody ref={popperElement} style={popStyle} {...attributes.popper}>
+        {title && <Title>{title}</Title>}
+        <PopoverList>
+          {optionsDefault.map(option => (
+            <AllowItem
+              key={option.value}
+              isChecked={isOrder ? allowColumns?.[option.value]?.visable : allowColumns[option.value]}
+              onClick={() => handleChangeAllowColumns(option.value)}
+            >
+              {(isOrder
+                ? allowColumns?.[option.value]?.visable
+                : allowColumns[option.value])
+                ? (
+                  <RiCheckboxFill />
+                ) : (
+                  <RiCheckboxBlankLine />
+                )}
+              <span>
+                {option.content}
+              </span>
+            </AllowItem>
+          ))}
+        </PopoverList>
+      </PopoverBody>
+    </div>
+  )
+}

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

@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components'
+
+export const HeaderItem = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`
+
+export const PopoverBody = styled.div`
+  z-index: 1001;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  border: 1px solid ${props => props.theme.colors?.borderColor};
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
+  border-radius: 7.6px;
+  padding: 15px;
+  max-width: 250px;
+`
+
+export const PopoverList = styled.div`
+`
+
+export const AllowItem = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${props => props.theme.colors?.headingColor};
+  padding: 7px;
+  cursor: pointer;
+  svg {
+    font-size: 24px;
+  }
+  span {
+    white-space: nowrap;
+    font-size: 12px;
+    font-weight: 400;
+    ${props => props.theme?.rtl ? css`
+      margin-right: 10px;
+      ` : css`
+      margin-left: 10px;
+    `}
+  }
+
+  ${({ isChecked }) => isChecked && css`
+    svg {
+      color: ${props => props.theme.colors?.primary};
+    }
+  `}
+`
+
+export const Title = styled.div`
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 18px;
+  padding: 0px 7px;
+`