ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,80 @@
+import React from 'react'
+import { Popup, useLanguage } from 'ordering-components-external'
+import { Button, IconButton } from '../../../styles'
+import { useTheme } from 'styled-components'
+import { XLg } from 'react-bootstrap-icons'
+import {
+  PopupDialog,
+  PopupActions,
+  PopupTitle,
+  PopupContent,
+  PopupIcon
+} from './styles'
+
+const ConfirmUI = (props) => {
+  const {
+    title,
+    children,
+    content,
+    onAccept,
+    onCancel,
+    onClose,
+    acceptText,
+    cancelText
+  } = props
+  const [, t] = useLanguage()
+
+  const errors = {
+    ERROR_REPORT_MAX_A_DAY_AS_PERIOD: 'Error report, max a day as period',
+    ERROR_REPORT_VERY_LONG_PERIOD: 'Error report, very long period'
+  }
+
+  return (
+    <PopupDialog
+      className='popup-dialog'
+      width={props.width}
+    >
+      <PopupIcon>
+        <IconButton color='black' onClick={() => onClose()}>
+          <XLg />
+        </IconButton>
+      </PopupIcon>
+      {title && <PopupTitle>{title}</PopupTitle>}
+      <PopupContent>
+        {content && typeof content === 'string' && content}
+        {content && typeof content === 'object' && Array.isArray(content) && (
+          <ul>
+            {content.map((item, i) => (
+              <li key={i}>{t(item.toUpperCase(), errors[item])}</li>
+            ))}
+          </ul>
+        )}
+        {children}
+      </PopupContent>
+      {(onCancel || onAccept || onClose) && (
+        <PopupActions>
+          {onCancel && <Button outline onClick={() => onCancel()}>{cancelText || t('CANCEL')}</Button>}
+          {onAccept && <Button color='primary' onClick={() => onAccept()}>{acceptText || t('ACCEPT')}</Button>}
+        </PopupActions>)}
+    </PopupDialog>
+  )
+}
+
+export const Confirm = (props) => {
+  const popupProps = {
+    ...props,
+    UIComponent: ConfirmUI
+  }
+
+  const theme = useTheme()
+
+  return (
+    <>
+      {
+        theme && <Popup {...popupProps} />
+      }
+    </>
+  )
+}
+
+export const Alert = Confirm

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

@@ -0,0 +1,98 @@
+import styled, { css } from 'styled-components'
+
+// export const PopupBackDrop = styled.div`
+//   background-color: rgba(0, 0, 0, 0.4);
+//   position: fixed;
+//   top: 0;
+//   bottom: 0;
+//   left: 0;
+//   right: 0;
+//   z-index: 1000;
+// `
+
+export const PopupWrap = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1001;
+  outline: none;
+`
+
+export const PopupDialog = styled.div`
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  padding: 20px;
+  width:  ${({ width }) => width || '70%'};
+  border-radius: 10px;
+`
+
+export const PopupActions = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 30px 0px 0px;
+  button {
+    width: 100%;
+    border-radius: 32px;
+    opacity: 1;
+    height: 45px;
+    &:nth-child(1) {
+      margin-right: 25px;
+      ${props => props.theme?.rtl && css`
+        margin-left: 25px;
+        margin-right: 0; 
+      `}  
+    }
+    &:last-child {
+      ${props => props.theme?.rtl ? css`
+        margin-left: 0;
+      ` : css`
+        margin-right: 0;
+      `}  
+    }
+  }
+`
+
+export const PopupTitle = styled.h2`
+  text-align: left;
+  letter-spacing: 0px;
+  color: #010300;
+  opacity: 1;
+  margin-top: 0px;
+  ${props => props.theme?.rtl && css`
+    text-align: right;
+  `}  
+`
+
+export const PopupContent = styled.div`
+  text-align: left;
+  letter-spacing: 0px;
+  color: #010300;
+  opacity: 1;
+  ${props => props.theme?.rtl && css`
+    text-align: right;
+  `}  
+  ul {
+    padding-left: 30px;
+    ${props => props.theme?.rtl && css`
+      padding-right: 30px;
+      padding-left: 0;
+    `}
+    li {
+      margin-top: 7px;
+      margin-bottom: 7px;
+    }
+  }
+`
+
+export const PopupIcon = styled.span`
+  float: right;
+  font-size: 30px;
+  cursor: pointer;
+  ${props => props.theme?.rtl && css`
+    float: left;
+  `}
+`

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

@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import {
+  useLanguage,
+  CheckPassword as CheckPasswordController
+} from 'ordering-components-external'
+import { Modal } from '../Modal'
+import { Button } from '../../../styles'
+
+import {
+  WrapperCheckPassword,
+  ErrorText
+} from './styles'
+
+const ConfirmAdminUI = (props) => {
+  const {
+    checkPasswordStatus,
+    handleChangePassword,
+    getCheckPassword,
+
+    open,
+    onClose,
+    onConfirm
+  } = props
+
+  const [, t] = useLanguage()
+  const { handleSubmit } = useForm()
+
+  const [password, setPassword] = useState('')
+
+  const handlePassword = (e) => {
+    setPassword(e.target.value)
+  }
+
+  const onSubmit = () => {
+    getCheckPassword()
+  }
+
+  useEffect(() => {
+    handleChangePassword(password)
+  }, [password])
+
+  useEffect(() => {
+    if (checkPasswordStatus.loading || checkPasswordStatus.error !== null) return
+    if (checkPasswordStatus.result === 'OK') {
+      onConfirm()
+    }
+  }, [checkPasswordStatus])
+
+  useEffect(() => {
+    setPassword('')
+  }, [open])
+
+  return (
+    <Modal
+      open={open}
+      width={props.width || '600px'}
+      onClose={() => onClose()}
+    >
+      <WrapperCheckPassword
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <h3>{t('CONFIRM_PASSWORD', 'Confirm password')}</h3>
+        <p>{t('TYPE_YOUR_PASSWORD_TO_CONFIRM_DELETE', 'Type your password to confirm delete.')}</p>
+        <input
+          autoComplete='off'
+          type='password'
+          value={password}
+          placeholder={t('PASSWORD', 'password')}
+          onChange={(e) => handlePassword(e)}
+        />
+        {checkPasswordStatus?.error && (
+          <ErrorText
+            className='text-danger'
+          >
+            {checkPasswordStatus.error}
+          </ErrorText>
+        )}
+        <Button
+          color='primary'
+          borderRadius='7.6px'
+        >
+          {checkPasswordStatus.loading ? t('LOADING', 'Loading') : t('CONFIRM', 'Confirm')}
+        </Button>
+      </WrapperCheckPassword>
+    </Modal>
+  )
+}
+
+export const ConfirmAdmin = (props) => {
+  const checkPasswordControlProps = {
+    ...props,
+    UIComponent: ConfirmAdminUI
+  }
+  return (
+    <>
+      {props.open && (
+        <CheckPasswordController {...checkPasswordControlProps} />
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+
+export const WrapperCheckPassword = styled.form`
+  padding: 10px;
+  color: ${props => props.theme.colors?.headingColor};
+
+  h3 {
+    font-size: 24px;
+    margin: 0px;
+    font-weight: 600;
+  }
+
+  p {
+    margin-top: 25px;
+    margin-bottom: 10px;
+  }
+
+  input {
+    outline: none;
+    border-radius: 8px;
+    font-size: 16px;
+    border: 1px solid rgba(20, 20, 20, 0.2);
+    width: 100%;
+    padding: 10px 15px;
+    &:focus {
+      border: 1px solid ${props => props.theme.colors.primary};
+    }
+  }
+
+  button {
+    margin-top: 40px;
+    width: 150px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+`
+export const ErrorText = styled.div`
+  text-align: center;
+  margin: 10px 0;
+`

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

@@ -0,0 +1,115 @@
+import React, { useRef, useState, useEffect } from 'react'
+import MdKeyboardArrowLeft from '@meronex/icons/md/MdKeyboardArrowLeft'
+import MdKeyboardArrowRight from '@meronex/icons/md/MdKeyboardArrowRight'
+import { useWindowSize } from '../../../../../../hooks/useWindowSize'
+
+import {
+  ScrollBox,
+  ScrollBoxWrapper,
+  ScrollBoxContainer,
+  ArrowButton
+} from './styles'
+
+export const DragScroll = ({ children }) => {
+  const { width } = useWindowSize()
+
+  const scrollWrapperRef = useRef()
+  const scrollContainerRef = useRef()
+  const scrollWrapperCurrent = scrollWrapperRef.current
+  const [clickStartX, setClickStartX] = useState()
+  const [scrollStartX, setScrollStartX] = useState()
+
+  const [wrapperScrollLeft, setWrapperScrollLeft] = useState(null)
+  const [wrapperWidth, setWrapperWidth] = useState(null)
+  const [containerWidth, setContainerWidth] = useState(null)
+
+  useEffect(() => {
+    if (scrollWrapperRef.current) {
+      const handleDragStart = (e) => {
+        setClickStartX(e.screenX)
+        setScrollStartX(scrollWrapperRef.current.scrollLeft)
+      }
+      const handleDragMove = (e) => {
+        if (clickStartX !== undefined && scrollStartX !== undefined) {
+          const touchDelta = clickStartX - e.screenX
+          scrollWrapperRef.current.scrollLeft = scrollStartX + touchDelta
+          setWrapperScrollLeft(scrollWrapperRef.current.scrollLeft)
+        }
+      }
+      const handleDragEnd = () => {
+        if (clickStartX !== undefined) {
+          setClickStartX(undefined)
+          setScrollStartX(undefined)
+        }
+      }
+
+      if (scrollWrapperRef.current.ontouchstart === undefined) {
+        scrollWrapperRef.current.onmousedown = handleDragStart
+        scrollWrapperRef.current.onmousemove = handleDragMove
+        scrollWrapperRef.current.onmouseup = handleDragEnd
+        scrollWrapperRef.current.onmouseleave = handleDragEnd
+      }
+    }
+  }, [scrollWrapperCurrent, clickStartX, scrollStartX])
+
+  const handleScrolling = (left) => {
+    if (left) {
+      const left = (((-scrollContainerRef.current.offsetWidth / 10) > -200) ? -200 : -scrollContainerRef.current.offsetWidth / 10)
+      scrollWrapperRef.current.scrollBy({
+        top: 0,
+        left: left,
+        behavior: 'smooth'
+      })
+      setWrapperScrollLeft(scrollWrapperRef.current.scrollLeft + left)
+    } else {
+      const left = (((+scrollContainerRef.current.offsetWidth / 10) < 200) ? 200 : +scrollContainerRef.current.offsetWidth / 10)
+      scrollWrapperRef.current.scrollBy({
+        top: 0,
+        left: left,
+        behavior: 'smooth'
+      })
+      setWrapperScrollLeft(scrollWrapperRef.current.scrollLeft + left)
+    }
+  }
+
+  useEffect(() => {
+    setWrapperScrollLeft(scrollWrapperRef?.current?.scrollLeft)
+    setWrapperWidth(scrollWrapperRef?.current?.offsetWidth)
+    setContainerWidth(scrollContainerRef?.current?.offsetWidth)
+  }, [scrollWrapperRef, scrollContainerRef, width, children])
+
+  useEffect(() => {
+    setTimeout(() => {
+      setWrapperScrollLeft(scrollWrapperRef.current?.scrollLeft)
+      setWrapperWidth(scrollWrapperRef?.current?.offsetWidth)
+      setContainerWidth(scrollContainerRef?.current?.offsetWidth)
+    }, 300)
+  }, [])
+
+  return (
+    <ScrollBox className='scroll-box'>
+      <ScrollBoxWrapper className='scroll-box__wrapper' ref={scrollWrapperRef}>
+        {wrapperScrollLeft > 10 && (
+          <ArrowButton
+            onMouseDown={() => handleScrolling(true)}
+            className='left-autoscroll'
+          >
+            <MdKeyboardArrowLeft />
+          </ArrowButton>
+        )}
+        <ScrollBoxContainer className='scroll-box__container' role='list' ref={scrollContainerRef}>
+          {children}
+        </ScrollBoxContainer>
+        {wrapperScrollLeft + wrapperWidth + 10 < containerWidth && (
+          <ArrowButton
+            isRight
+            onMouseDown={() => handleScrolling()}
+            className='right-autoscroll'
+          >
+            <MdKeyboardArrowRight />
+          </ArrowButton>
+        )}
+      </ScrollBoxWrapper>
+    </ScrollBox>
+  )
+}

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

@@ -0,0 +1,55 @@
+import styled, { css } from 'styled-components'
+
+export const ScrollBox = styled.div`
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+`
+
+export const ScrollBoxWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  -ms-overflow-style: none; /* IE */
+  overflow: -moz-scrollbars-none; /* Firefox */
+
+  &::-webkit-scrollbar {
+   display: none; /* Chrome and Safari */
+ }
+`
+
+export const ScrollBoxContainer = styled.div`
+  height: 100%;
+  display: inline-flex;
+`
+
+export const ArrowButton = styled.span`
+  display: none;
+  @media (min-width: 1025px) {
+    position: absolute;
+    cursor: pointer;
+    z-index: 10;
+    width: 25px;
+    min-width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: #D9D9D9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #D9D9D9;
+    opacity: 0.8;
+
+    ${({ isRight }) => isRight && css`
+      right: 0px;
+    `}
+
+    svg {
+      color: #000000;
+      font-size: 24px;
+    }
+  }
+`

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

@@ -0,0 +1,41 @@
+import React, { useRef, useEffect, useState } from 'react'
+
+export const Image = React.forwardRef((props, ref) => {
+  const imageRef = ref || useRef(ref)
+  const [error, setError] = useState(false)
+  const [remove, setRemove] = useState(false)
+
+  const onError = (e) => {
+    if (!error) {
+      setError(true)
+    } else {
+      setRemove(true)
+    }
+  }
+
+  useEffect(() => {
+    if (imageRef.current) {
+      imageRef.current.onerror = onError
+    }
+  }, [imageRef, error])
+
+  return (
+    <>
+      {
+        !error && props.src && <img className={props.className} style={props.style} src={props.src} ref={imageRef} alt='profile-image' />
+      }
+      {
+        !error && !props.src && props.fallback && props.fallback
+      }
+      {
+        error && !remove && typeof props.fallback === 'string' && <img className={props.className} style={props.style} src={props.fallback} ref={imageRef} alt='profile-image' />
+      }
+      {
+        error && remove && typeof props.fallback === 'string' && <div className={props.className} style={props.style} ref={imageRef} />
+      }
+      {
+        error && typeof props.fallback !== 'string' && <div className={props.className} style={props.style} ref={imageRef}>{props.fallback}</div>
+      }
+    </>
+  )
+})

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

@@ -0,0 +1,97 @@
+import React, { useEffect, useState, useRef } from 'react'
+import Cropper from 'cropperjs'
+import { useLanguage } from 'ordering-components-external'
+import { Button, IconButton } from '../../../styles'
+import { ArrowClockwise } from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
+import 'cropperjs/dist/cropper.css'
+import {
+  Container,
+  ImageCropWrapper,
+  ImageCropActionWrapper,
+  RangeWrapper,
+  ActionContentWrapper,
+  ButtonWrapper
+} from './styles'
+
+export const ImageCrop = (props) => {
+  const {
+    photo,
+    handleChangePhoto,
+    onClose
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  const [cropper, setCropper] = useState()
+  const [zoomValue, setZoomValue] = useState(50)
+  const cropperRef = useRef(null)
+
+  const handleChangeZoom = (evt) => {
+    const value = evt.target.value
+    cropper.scale(value / 50)
+    setZoomValue(value)
+  }
+
+  const getCropData = () => {
+    if (typeof cropper !== 'undefined') {
+      handleChangePhoto(cropper.getCroppedCanvas({ imageSmoothingQuality: 'high' }).toDataURL())
+      onClose && onClose()
+    }
+  }
+
+  const handleChangeRotate = () => {
+    if (!photo) return
+    cropper.rotate(45)
+  }
+
+  useEffect(() => {
+    if (!cropperRef.current || !photo) return
+
+    const _cropper = new Cropper(cropperRef.current, {
+      // aspectRatio: 16 / 9,
+      dragMode: 'move',
+      zoomable: false,
+      toggleDragModeOnDblclick: false
+    })
+    setCropper(_cropper)
+  }, [photo])
+
+  return (
+    <Container>
+      <ImageCropWrapper>
+        <img ref={cropperRef} src={photo} />
+      </ImageCropWrapper>
+      <ImageCropActionWrapper>
+        <RangeWrapper>
+          <span className='title'>{t('RESIZE_IMAGE', 'Resize image')}</span>
+          <input
+            min='0'
+            type='range'
+            step='0.01'
+            value={zoomValue}
+            onChange={handleChangeZoom}
+            style={{ backgroundImage: `-webkit-gradient(linear, 0% 0%, ${zoomValue}% 0%, color-stop(100%, ${theme.colors.primary}), color-stop(100%, #F6F6FA))` }}
+          />
+          <span className='percent'>{parseInt(zoomValue * 2)} %</span>
+        </RangeWrapper>
+        <ActionContentWrapper>
+          <IconButton onClick={handleChangeRotate}>
+            <span>{t('ROTATE', 'Rotate')}</span>
+            <ArrowClockwise />
+          </IconButton>
+        </ActionContentWrapper>
+      </ImageCropActionWrapper>
+      <ButtonWrapper>
+        <Button
+          borderRadius='7.6px'
+          color='primary'
+          onClick={getCropData}
+        >
+          {t('CROP', 'Crop')}
+        </Button>
+      </ButtonWrapper>
+    </Container>
+  )
+}