ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { Select } from '../../../styles/Select/DashboardSelect'
+import { ChevronLeft, ChevronRight } from 'react-bootstrap-icons'
+
+import {
+  PaginationContainer,
+  PaginationButtonContainer,
+  PageButton,
+  PageSizeContainer,
+  PageSizeTitle,
+  Option
+} from './styles'
+
+export const Pagination = (props) => {
+  const {
+    currentPage,
+    totalPages,
+    handleChangePage,
+    defaultPageSize,
+    handleChangePageSize,
+    isHidePagecontrol,
+    paginationSize
+  } = props
+
+  const [, t] = useLanguage()
+  const pageSizeOptions = [
+    {
+      value: 10,
+      content: <Option>10</Option>
+    },
+    {
+      value: 25,
+      content: <Option>25</Option>
+    },
+    {
+      value: 50,
+      content: <Option>50</Option>
+    }
+  ]
+
+  const [visiblePages, setVisiblePages] = useState([])
+  const [activePage, setActivePage] = useState(currentPage)
+
+  const filterPages = (visiblePages, totalPages) => {
+    return visiblePages.filter(page => page <= totalPages)
+  }
+
+  const getVisiblePages = (page, total) => {
+    if (total < 7) {
+      return filterPages([1, 2, 3, 4, 5, 6], total)
+    } else {
+      if (page % 5 >= 0 && page > 4 && page + 2 < total) {
+        return [1, page - 1, page, page + 1, total]
+      } else if (page % 5 >= 0 && page > 4 && page + 2 >= total) {
+        return [1, total - 3, total - 2, total - 1, total]
+      } else {
+        return [1, 2, 3, 4, 5, total]
+      }
+    }
+  }
+
+  const changePage = (page) => {
+    if (page === activePage) {
+      return
+    }
+    setActivePage(page)
+    const _visiblePages = getVisiblePages(page, totalPages)
+    setVisiblePages(filterPages(_visiblePages, totalPages))
+    handleChangePage(page)
+  }
+
+  useEffect(() => {
+    if (!totalPages) return
+    setVisiblePages(getVisiblePages(null, totalPages))
+  }, [totalPages])
+
+  useEffect(() => {
+    setActivePage(currentPage)
+    const _visiblePages = getVisiblePages(currentPage, totalPages)
+    setVisiblePages(filterPages(_visiblePages, totalPages))
+  }, [currentPage])
+
+  return (
+    <PaginationContainer>
+      <PaginationButtonContainer>
+        <PageButton
+          disabled={activePage === 1}
+          onClick={() => (activePage !== 1) && changePage(activePage - 1)}
+        >
+          <ChevronLeft />
+        </PageButton>
+
+        {visiblePages.map((page, index, array) => (
+          <React.Fragment key={page}>
+            {array[index - 1] + 2 <= page ? (
+              <>
+                <PageButton noEffect>
+                  ...
+                </PageButton>
+                <PageButton
+                  active={activePage === page}
+                  onClick={() => changePage(page)}
+                >
+                  {page}
+                </PageButton>
+              </>
+            ) : (
+              <PageButton
+                active={activePage === page}
+                onClick={() => changePage(page)}
+              >
+                {page}
+              </PageButton>
+            )}
+          </React.Fragment>
+        ))}
+
+        <PageButton
+          disabled={activePage === totalPages}
+          onClick={() => (activePage !== totalPages) && changePage(activePage + 1)}
+        >
+          <ChevronRight />
+        </PageButton>
+      </PaginationButtonContainer>
+      {!isHidePagecontrol && (
+        <PageSizeContainer>
+          <PageSizeTitle>
+            {t('ITEMS_PER_PAGE', 'Items per page')}
+          </PageSizeTitle>
+          <Select
+            isSecondIcon
+            notAsync
+            minWidth='70px'
+            defaultValue={defaultPageSize || paginationSize}
+            options={pageSizeOptions}
+            onChange={size => handleChangePageSize(size)}
+          />
+        </PageSizeContainer>
+      )}
+    </PaginationContainer>
+  )
+}

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

@@ -0,0 +1,105 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const PaginationContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+`
+
+export const PaginationButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 20px;
+  ` : css`
+    margin-right: 20px;
+  `}
+`
+
+export const PageButton = styled.button`
+  background-color: transparent;
+  font-size: 14px;
+  color: ${props => props.theme.colors.headingColor};
+  outline: none;
+  border: none;
+  border-radius: 27px;
+  min-width: 27px;
+  min-height: 27px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 7px;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 3px;
+  ` : css`
+    margin-right: 3px;
+  `}
+
+  &:hover {
+    background-color: #1507260a;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:active {
+    background-color: #1507261a;
+  }
+
+  ${({ active }) => active && css`
+    background-color: ${props => props.theme.colors.primary};
+    color: ${props => props.theme.colors.primaryContrast};
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.primary)};
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.primary)};
+    }
+  `}
+
+  ${({ noEffect }) => noEffect && css`
+    cursor: initial;
+    &:hover {
+      background-color: transparent;
+    }
+    &:active {
+      background-color: transparent;
+    }
+  `}
+`
+
+export const PageSizeContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+
+  .select {
+    border-color: ${props => props.theme.colors.lightGray};
+    padding: 5px 0;
+
+    > div:first-child {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
+`
+
+export const PageSizeTitle = styled.p`
+  margin: 0px;
+  color: ${props => props.theme.colors.lightGray};
+  font-size: 12px;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 10px;
+  ` : css`
+    margin-right: 10px;
+  `}
+`
+
+export const Option = styled.div`
+  font-size: 14px;
+  color: ${props => props.theme.colors.lightGray};
+`

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import Prev from '@meronex/icons/md/MdKeyboardArrowLeft'
+import Next from '@meronex/icons/md/MdKeyboardArrowRight'
+import {
+  WrapperPagination,
+  WrapperPageState,
+  PageButton
+} from './styles'
+
+export const PaginationButton = ({ pageSize, total, currentPage, totalPages, prevPaginate, nextPaginate }) => {
+  const indexOfLastOrders = currentPage * pageSize < total ? currentPage * pageSize : total
+  const indexOfFirstOrders = (currentPage - 1) * pageSize + 1
+  return (
+    <WrapperPagination>
+      <WrapperPageState>
+        {indexOfFirstOrders}-{indexOfLastOrders} of {total}
+      </WrapperPageState>
+      <PageButton
+        disabled={currentPage === 1}
+        onClick={() => prevPaginate()}
+      >
+        <Prev />
+      </PageButton>
+      <PageButton
+        onClick={() => nextPaginate()}
+        disabled={currentPage === totalPages || totalPages === 1}
+      >
+        <Next />
+      </PageButton>
+    </WrapperPagination>
+  )
+}

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

@@ -0,0 +1,33 @@
+import styled from 'styled-components'
+
+export const WrapperPagination = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+`
+export const PageButton = styled.button`
+  outline: none;
+  border: 1px solid #00000029;
+  border-radius: 100%;
+  background: transparent;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0 5px;
+
+  &:active {
+    background: #1c202e;
+    color: #fff;
+  }
+  &:disabled {
+    cursor: no-drop;
+    pointer-events: none;
+  }
+`
+export const WrapperPageState = styled.div`
+  display: flex;
+  min-width: 140px;
+`

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useTheme } from 'styled-components'
+import { useLanguage } from 'ordering-components-external'
+import { Button } from '../../../styles'
+import {
+  Container,
+  WrapperButton
+} from './styles'
+
+export const Personalization = (props) => {
+  const {
+    isShowTitle
+  } = props
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  return (
+    <Container>
+      {isShowTitle && (
+        <h1>{t('PERSONALIZATION', 'Personalization')}</h1>
+      )}
+      <p>
+        {t('PERSONALIZATION_TITLE', 'If you are looking for something  special for your Ordering Solution')},
+        <a href='https://orderingco.typeform.com/to/qHPQtU' target='_blank' rel='noopener noreferrer'>{t('SEND_US_SPECIAL_WISH', 'send us your special wish.')}</a>
+      </p>
+      <img src={theme?.images.general?.personalization} loading='lazy' />
+      <WrapperButton>
+        <Button
+          borderRadius='8px'
+          color='primary'
+          onClick={() => window.open('https://orderingco.typeform.com/to/qHPQtU', '_blank')}
+        >
+          {t('CONTACT_US', 'Contact us')}
+        </Button>
+      </WrapperButton>
+    </Container>
+  )
+}

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

@@ -0,0 +1,45 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    color: ${props => props.theme.colors.headingColor};
+    margin-bottom: 30px;
+    width: 100%;
+  }
+
+  p {
+    color: ${props => props.theme.colors.headingColor};
+    font-size: 14px;
+    a {
+      color: ${props => props.theme.colors.primary};
+      text-decoration: none;
+      ${props => props.theme?.rtl ? css`
+        margin-right: 10px;
+      ` : css`
+        margin-left: 10px;
+      `}
+    }
+  }
+
+  img {
+    width: 300px;
+  }
+`
+
+export const WrapperButton = styled.div`
+  position: sticky;
+  top: 100%;
+  width: 100%;
+
+  button {
+    height: 44px;
+  }
+`

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

@@ -0,0 +1,102 @@
+import React from 'react'
+
+export const ProgressRing = (props) => {
+  const {
+    percent,
+    size,
+    lineWidth,
+    progressColor,
+    trackColor,
+    caps,
+    isShowPercent,
+    spin,
+    transitionDuration,
+    percentColor,
+    fontSize
+  } = props
+
+  const halfSize = size / 2
+  const radius = halfSize - lineWidth / 2
+  const circleLength = radius * 2 * Math.PI
+
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        display: 'flex',
+        placeContent: 'center',
+        placeItems: 'center',
+        position: 'relative'
+      }}
+    >
+      <svg
+        height={size}
+        width={size}
+        style={{
+          animation: spin ? 'animation-rotate 2s linear infinite' : undefined
+        }}
+        shapeRendering='geometricPrecision'
+      >
+        <g
+          style={{
+            transformOrigin: `${halfSize}px ${halfSize}px`,
+            transform: 'rotate(-90deg)'
+          }}
+        >
+          <circle
+            cx={halfSize}
+            cy={halfSize}
+            r={radius}
+            stroke={trackColor}
+            strokeWidth={lineWidth}
+            fill='none'
+          />
+          <circle
+            cx={halfSize}
+            cy={halfSize}
+            r={radius}
+            style={{
+              transition:
+                transitionDuration > 0
+                  ? `${transitionDuration}ms stroke-dashoffset`
+                  : undefined,
+              strokeDashoffset: circleLength * (1 - percent / 100)
+            }}
+            fill='none'
+            strokeDasharray={circleLength}
+            strokeWidth={lineWidth}
+            stroke={progressColor}
+            strokeLinecap={caps}
+          />
+        </g>
+      </svg>
+      {isShowPercent && (
+        <div
+          style={{
+            position: 'absolute',
+            color: percentColor || '#2c7be5',
+            fontSize: fontSize || '14px',
+            fontWeight: '600'
+          }}
+        >
+          {Math.round(percent)}%
+        </div>
+      )}
+    </div>
+  )
+}
+
+/*
+  interface Props
+
+  caps?: "butt" | "round";
+  children?: React.ReactNode;
+  lineWidth?: number;
+  percent?: number;
+  progressColor?: string;
+  size?: number;
+  spin?: boolean;
+  trackColor?: string;
+  transitionDuration?: number;
+*/

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Route, Redirect } from 'react-router-dom'
+import { useSession } from 'ordering-components-external'
+import { PageNotFound } from '../../PageNotFound'
+
+export const ProtectedRoute = (props) => {
+  const {
+    path,
+    allowedLevels
+  } = props
+
+  const [{ auth, user }] = useSession()
+
+  return (
+    <Route exact path={path}>
+      {auth ? (
+        <>
+          {allowedLevels.includes(user?.level) ? (
+            props.children
+          ) : (
+            <PageNotFound />
+          )}
+        </>
+      ) : (
+        <Redirect to='/login' />
+      )}
+    </Route>
+  )
+}

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

@@ -0,0 +1,132 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import moment from 'moment'
+import { DateRange, Calendar } from 'react-date-range'
+import 'react-date-range/dist/styles.css'
+import 'react-date-range/dist/theme/default.css'
+import { Calendar4 } from 'react-bootstrap-icons'
+import { Button } from '../../../styles'
+import { Container, CalendarWrapper } from './styles'
+
+export const RangeCalendar = (props) => {
+  const {
+    handleChangeDate,
+    defaultValue,
+    isLeft,
+    isSingleDate,
+    withTime,
+    minDate
+  } = props
+
+  const [, t] = useLanguage()
+  const [dateRange, setDateRange] = useState([
+    {
+      startDate: null,
+      endDate: null,
+      key: 'selection'
+    }
+  ])
+  const [date, setDate] = useState(null)
+  const [isShowCalendar, setIsShowCalendar] = useState(false)
+  const calendarRef = useRef()
+
+  const handleClickOutside = (e) => {
+    if (!isShowCalendar) return
+    const outsideCalendar = !calendarRef.current?.contains(e.target)
+    if (outsideCalendar) {
+      setIsShowCalendar(false)
+    }
+  }
+
+  const handleOpenCalendar = (evt) => {
+    evt.preventDefault()
+    setIsShowCalendar(true)
+  }
+
+  const handleChangeSingleDate = (dateTime) => {
+    const dateFormat = withTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'
+    handleChangeDate && handleChangeDate(moment(dateTime).format(dateFormat))
+
+    setDate(dateTime)
+  }
+
+  const handleChangeDates = (item) => {
+    if (item.selection?.startDate && item.selection?.endDate) {
+      const dateFormat = withTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'
+      handleChangeDate(moment(item.selection.startDate).format(dateFormat), moment(item.selection.endDate).format(dateFormat))
+    }
+
+    setDateRange([item.selection])
+  }
+
+  const rangeFormat = (date1, date2) => {
+    let formattedDate = `${moment(date1).format('YYYY-MM-DD')}~${moment(date2).format('YYYY-MM-DD')}`
+    if (moment(date1).format('YYYY') === moment(date2).format('YYYY')) {
+      if (moment(date1).format('MM') === moment(date2).format('MM')) formattedDate = `${moment(date1).format('DD')} - ${moment(date2).format('DD')} ${moment(date2).format('MMM')}, ${moment(date1).format('YYYY')}`
+      else formattedDate = `${moment(date1).format('MM-DD')} ~ ${moment(date2).format('MM-DD')}, ${moment(date1).format('YYYY')}`
+    }
+    return formattedDate
+  }
+
+  const dateFormat = (dateTime) => {
+    return `${moment(dateTime).format('DD')} ${moment(dateTime).format('MMM')}, ${moment(dateTime).format('YYYY')}`
+  }
+
+  useEffect(() => {
+    window.addEventListener('click', handleClickOutside)
+    return () => window.removeEventListener('click', handleClickOutside)
+  }, [isShowCalendar])
+
+  useEffect(() => {
+    if (isSingleDate && defaultValue) {
+      setDate(new Date(defaultValue))
+      return
+    }
+
+    if (defaultValue && defaultValue?.from !== '' && defaultValue?.to !== '') {
+      setDateRange([
+        {
+          startDate: new Date(defaultValue?.from),
+          endDate: new Date(defaultValue?.to),
+          key: 'selection'
+        }
+      ])
+    }
+  }, [defaultValue])
+
+  return (
+    <Container>
+      <Button
+        onClick={handleOpenCalendar}
+        borderRadius='8px'
+        color='secundary'
+        className='ordering-calendar-btn'
+      >
+        <Calendar4 />
+        {!isSingleDate && (dateRange[0].startDate ? rangeFormat(dateRange[0].startDate, dateRange[0].endDate) : t('SELECT_DATE_RANGE', 'Select Date Range'))}
+        {isSingleDate && (date ? dateFormat(date) : t('SELECT_DATE', 'Select a Date'))}
+      </Button>
+      {
+        isShowCalendar && (
+          <CalendarWrapper ref={calendarRef} isLeft={isLeft}>
+            {isSingleDate ? (
+              <Calendar
+                date={date}
+                onChange={(date) => handleChangeSingleDate(date)}
+                minDate={minDate || new Date('1922-01-01')}
+              />
+            ) : (
+              <DateRange
+                editableDateInputs
+                onChange={item => handleChangeDates(item)}
+                moveRangeOnFirstSelection={false}
+                ranges={dateRange}
+                minDate={minDate || new Date('1922-01-01')}
+              />
+            )}
+          </CalendarWrapper>
+        )
+      }
+    </Container>
+  )
+}