ordering-ui-external 10.0.1 → 10.1.0

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

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 import parsePhoneNumber from 'libphonenumber-js'
 import PhoneInput from 'react-phone-number-input'
 import { useLanguage, useConfig, useSession } from 'ordering-components-external'
+import { findExitingCode } from '../../../../../../utils'
 
 import { Container, ErrorMsg } from './styles'
 
@@ -11,7 +12,8 @@ export const InputPhoneNumber = (props) => {
     value,
     setValue,
     handleIsValid,
-    disabled
+    disabled,
+    isUser
   } = props
 
   const [, t] = useLanguage()
@@ -42,9 +44,10 @@ export const InputPhoneNumber = (props) => {
         <PhoneInput
           disabled={disabled}
           placeholder={t('PHONE_NUMBER', 'Phone number')}
-          defaultCountry={configs?.default_country_code?.value}
+          defaultCountry={findExitingCode(configs?.default_country_code?.value?.toUpperCase())}
           value={value}
-          displayInitialValueAsLocalNumber
+          displayInitialValueAsLocalNumber={!isUser}
+          international={isUser}
           onChange={(val) => setValue && setValue(val, isValidPhoneNumber(val))}
         />
         {value && !isValidPhoneNumber(value) && !disabled && (

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import Linkify from 'react-linkify'
+
+export const LinkableText = (props) => {
+  const { text } = props
+  return (
+    <Linkify
+      componentDecorator={(decoratedHref, decoratedText, key) => (
+        <a target='blank' href={decoratedHref} key={key}>
+          {decoratedText}
+        </a>
+      )}
+    >
+      {text}
+    </Linkify>
+  )
+}

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

@@ -18,6 +18,7 @@ const ModalUI = (props) => {
     onAccept,
     onCancel,
     onClose,
+    onRemove,
     acceptText,
     cancelText,
     isTransparent,
@@ -32,6 +33,11 @@ const ModalUI = (props) => {
     }
   }
 
+  const handleClose = () => {
+    if (onRemove) onRemove()
+    else onClose()
+  }
+
   useEffect(() => {
     if (!props.open) return
     document.addEventListener('keydown', onCloseModal)
@@ -53,7 +59,7 @@ const ModalUI = (props) => {
           <ModalIcon className='modal-close-icon'>
             <IconButton
               color='black'
-              onClick={() => onClose()}
+              onClick={handleClose}
             >
               <XLg />
             </IconButton>
@@ -73,7 +79,6 @@ const ModalUI = (props) => {
             {onCancel && <Button color='primary' onClick={() => onCancel()}>{cancelText || t('CANCEL')}</Button>}
           </ModalActions>)}
       </ModalDialogInnerContainer>
-
     </ModalDialog>
   )
 }

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

@@ -16,7 +16,7 @@ export const ModalDialog = styled.div`
   box-sizing: border-box;
   margin-top: auto;
   margin-bottom: auto;
-  overflow: hidden;
+  overflow: auto;
   max-height: calc(var(--vh, 1vh) * 90);
   @media (max-width: 860px) {
     width: 80%;

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

@@ -54,10 +54,10 @@ export const PageButton = styled.button`
     background-color: ${props => props.theme.colors.primary};
     color: ${props => props.theme.colors.primaryContrast};
     &:hover {
-      background: ${props => darken(0.04, props.theme.colors.primary)};
+      background: ${props => props.theme.colors.primary};
     }
     &:active {
-      background: ${props => darken(0.1, props.theme.colors.primary)};
+      background: ${props => props.theme.colors.primary};
     }
   `}
 

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

@@ -22,7 +22,13 @@ export const ProtectedRoute = (props) => {
           )}
         </>
       ) : (
-        <Redirect to='/login' />
+        <Redirect to={{
+          pathname: '/login',
+          state: {
+            from: path
+          }
+        }}
+        />
       )}
     </Route>
   )

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

@@ -7,6 +7,8 @@ import 'react-date-range/dist/theme/default.css'
 import { Calendar4 } from 'react-bootstrap-icons'
 import { Button } from '../../../styles'
 import { Container, CalendarWrapper } from './styles'
+import * as locales from 'react-date-range/dist/locale'
+import { getLocale } from '../../../../../../utils'
 
 export const RangeCalendar = (props) => {
   const {
@@ -18,7 +20,7 @@ export const RangeCalendar = (props) => {
     minDate
   } = props
 
-  const [, t] = useLanguage()
+  const [state, t] = useLanguage()
   const [dateRange, setDateRange] = useState([
     {
       startDate: null,
@@ -111,6 +113,7 @@ export const RangeCalendar = (props) => {
           <CalendarWrapper ref={calendarRef} isLeft={isLeft}>
             {isSingleDate ? (
               <Calendar
+                locale={getLocale(state?.language?.code, locales)}
                 date={date}
                 onChange={(date) => handleChangeSingleDate(date)}
                 minDate={minDate || new Date('1922-01-01')}
@@ -118,10 +121,13 @@ export const RangeCalendar = (props) => {
             ) : (
               <DateRange
                 editableDateInputs
+                locale={getLocale(state?.language?.code, locales)}
                 onChange={item => handleChangeDates(item)}
                 moveRangeOnFirstSelection={false}
                 ranges={dateRange}
                 minDate={minDate || new Date('1922-01-01')}
+                startDatePlaceholder={t('EARLY', 'Early')}
+                endDatePlaceholder={t('CONTINUOUS', 'Continuous')}
               />
             )}
           </CalendarWrapper>

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

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react'
 import {
   useLanguage,
   useConfig,
-  Schedule as ScheduleController
+  Schedule as ScheduleController,
+  useUtils
 } from 'ordering-components-external'
 import {
   Trash,
@@ -22,7 +23,8 @@ import {
   IconWrapper,
   SelectWrapper,
   AddScheduleIconWrapper,
-  TrashIconWrapper
+  TrashIconWrapper,
+  DateWrapper
 } from './styles'
 
 const ScheduleUI = (props) => {
@@ -43,11 +45,13 @@ const ScheduleUI = (props) => {
     selectedCopyDays,
     cleanSelectedCopyDays,
     handleSelectCopyTimes,
-    handleApplyScheduleCopyTimes
+    handleApplyScheduleCopyTimes,
+    isShowDate
   } = props
 
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
+  const [{ parseDate }] = useUtils()
 
   const is12Hours = configs.format_time?.value === '12'
 
@@ -87,6 +91,12 @@ const ScheduleUI = (props) => {
     })
   }
 
+  const getNextDate = (x) => {
+    const now = new Date()
+    now.setDate(now.getDate() + (x + (7 - now.getDay())) % 7)
+    return now
+  }
+
   useEffect(() => {
     if (!isTimeChangeError) return
     setAlertState({
@@ -164,7 +174,12 @@ const ScheduleUI = (props) => {
                 checked={schedule?.enabled}
                 onChange={e => handleEnabledSchedule(daysOfWeekIndex, e.target.checked)}
               />
-              <h4>{daysOfWeek[daysOfWeekIndex]}</h4>
+              <DateWrapper>
+                <h4>{daysOfWeek[daysOfWeekIndex]}</h4>
+                {isShowDate && (
+                  <h4 className='date'>{parseDate(getNextDate(daysOfWeekIndex), { outputFormat: 'YYYY-MM-DD' })}</h4>
+                )}
+              </DateWrapper>
             </div>
             {schedule?.enabled ? (
               <div>

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

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 
 export const ScheduleContainer = styled.div`
-  min-width: 400px;
+  min-width: 320px;
 `
 
 export const TimeScheduleItemContainer = styled.div`
@@ -18,20 +18,20 @@ export const TimeScheduleItemContainer = styled.div`
       font-size: 13px;
       font-weight: 600;
       margin: 0px;
-      padding: 0 16px;
+      padding: 0 10px;
     }
 
     &:first-child {
-      width: 95px;
+      min-width: 95px;
     }
 
     &:nth-child(2) {
       flex-direction: column;
       flex: 1;
       ${props => props.theme?.rtl ? css`
-        padding-right: 10px;
+        padding-right: 8px;
       ` : css`
-        padding-left: 10px;
+        padding-left: 8px;
       `}
       > div {
         display: flex;
@@ -42,7 +42,7 @@ export const TimeScheduleItemContainer = styled.div`
         }
   
         svg {
-          font-size: 20px;
+          font-size: 18px;
           cursor: pointer;
         }
       }
@@ -56,7 +56,7 @@ export const TimeScheduleItemContainer = styled.div`
       > span {
         svg {
           cursor: pointer;
-          font-size: 20px;
+          font-size: 18px;
           color: ${props => props.theme.colors.primary};
           ${props => props.theme?.rtl ? css`
             margin-left: 10px;
@@ -68,15 +68,26 @@ export const TimeScheduleItemContainer = styled.div`
     }
   }
 
-  @media (min-width: 380px) {
+  @media (min-width: 450px) {
     > div {
       h4 {
         font-size: 14px;
+        padding: 0 12px;
       }
       &:nth-child(2) {
         p {
           font-size: 14px;
         }
+        svg {
+          font-size: 20px;
+        }
+      }
+      &:nth-child(3) {
+        > span {
+          svg {
+            font-size: 20px;
+          }
+        }
       }
     }
   }
@@ -96,6 +107,7 @@ export const SelectWrapper = styled.div`
     > div {
       padding-left: 13px;
       padding-right: 13px;
+      font-size: 13px;
       > div:last-child {
         margin: 0px;
       }
@@ -111,13 +123,19 @@ export const SelectWrapper = styled.div`
     }
   }
 
-  @media (min-width: 380px) {
-    width: 100px;
+  @media (min-width: 450px) {
+    width: 95px;
+    .select {
+      > div {
+        font-size: 16px;
+      }
+    }
   }
 `
 
 export const Option = styled.div`
   white-space: nowrap;
+  font-size: 15px;
 `
 
 export const SplitLine = styled.div`
@@ -137,19 +155,22 @@ export const IconWrapper = styled.span`
 export const TrashIconWrapper = styled.div`
   display: flex;
   justify-content: center;
-  width: 56px;
+  width: 50px;
   ${({ isHide }) => isHide ? css`
     opacity: 0;
     pointer-events: none;
   ` : css`
     opacity: 1;
   `}
+  @media (min-width: 450px) {
+    width: 56px;
+  }
 `
 
 export const AddScheduleIconWrapper = styled.div`
   display: flex;
   justify-content: center;
-  width: 56px;
+  width: 50px;
   > svg {
     color: ${props => props.theme.colors.primary};
     ${props => props.theme?.rtl ? css`
@@ -161,4 +182,18 @@ export const AddScheduleIconWrapper = styled.div`
       color: ${props => props.theme.colors.lightGray};
     }
   }
+
+  @media (min-width: 450px) {
+    width: 56px;
+  }
+`
+export const DateWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  h4 {
+    &.date {
+      font-weight: normal;
+    }
+  }
 `

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

@@ -1,16 +1,16 @@
 import React, { useRef, useEffect } from 'react'
 import { SearchContainer } from './styles'
-import IosSearch from '@meronex/icons/ios/IosSearch'
+import { Search, XCircle } from 'react-bootstrap-icons'
 
 export const SearchBar = (props) => {
   const {
     onSearch,
     search,
     placeholder,
-    isCustomLayout,
     lazyLoad,
     customClass
   } = props
+
   let timeout = null
   let previousSearch
   const el = useRef()
@@ -35,6 +35,11 @@ export const SearchBar = (props) => {
     previousSearch = e.target.value
   }
 
+  const handleClear = () => {
+    onSearch('')
+    el.current.value = ''
+  }
+
   useEffect(() => {
     el.current.onkeyup = onChangeSearch
   }, [])
@@ -46,9 +51,11 @@ export const SearchBar = (props) => {
   }, [search])
 
   return (
-    <SearchContainer isCustomLayout={isCustomLayout} className={customClass || ''}>
-      <IosSearch />
+    <SearchContainer className={customClass || ''}>
       <input type='text' ref={el} name='search' placeholder={placeholder} autoComplete='off' />
+      {el.current?.value
+        ? <XCircle className='close' onClick={handleClear} />
+        : <Search />}
     </SearchContainer>
   )
 }

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

@@ -2,30 +2,20 @@ import styled, { css } from 'styled-components'
 
 export const SearchContainer = styled.div`
   position: relative;
-
-  svg {
-    position: absolute;
-    top: 10px;
-    ${props => props.theme?.rtl ? css`
-      right: 15px;
-    ` : css`
-      left: 15px;
-    `}
-    font-size: 20px;
-    color: ${props => props.theme.colors.lightGray};
-  }
+  display: flex;
+  align-items: center;
 
   > input {
-    width: 250px;
+    width: 100%;
     border: 1px solid ${props => props.theme.colors.borderColor} !important;
     background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
-    border-radius: 22px;
     outline: none;
-    padding: 10px 8px;
+    padding: 10px 15px;
+    border-radius: 8px;
     ${props => props.theme?.rtl ? css`
-      padding-right: 40px;
-    ` : css`
       padding-left: 40px;
+    ` : css`
+      padding-right: 40px;
     `}
     font-size: 14px;
     color: ${props => props.theme.colors.headingColor};
@@ -35,23 +25,20 @@ export const SearchContainer = styled.div`
     }
   }
 
-  ${({ isCustomLayout }) => isCustomLayout && css`
-    input {
-      border-radius: 8px;
-      width: 100%;
-      padding: 10px 15px;
-    }
+  svg {
+    position: absolute;
+    ${props => props.theme?.rtl ? css`
+      left: 15px;
+    ` : css`
+      right: 15px;
+    `}
+    font-size: 16px;
+    color: ${props => props.theme.colors.lightGray};
 
-    svg {
-      ${props => props.theme?.rtl ? css`
-        right: initial;
-        left: 10px;
-      ` : css`
-        left: initial;
-        right: 10px;
-      `}
+    &.close {
+      cursor: pointer;
     }
-  `}
+  }
 
   @media (max-width: 1200px) {
     flex: 1;

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

@@ -1,9 +1,10 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useWindowSize } from '../../../../../../hooks/useWindowSize'
-import { XLg } from 'react-bootstrap-icons'
+import { XLg, ArrowsAngleExpand, ArrowsAngleContract } from 'react-bootstrap-icons'
 import { IconButton } from '../../../styles'
 import {
-  BarContainer
+  BarContainer,
+  IconButtonWrapper
 } from './styles'
 
 export const SideBar = (props) => {
@@ -14,12 +15,15 @@ export const SideBar = (props) => {
     isBorderShow,
     noAnimation,
     handleCloseWizard,
-    IconTop
+    IconTop,
+    showExpandIcon,
+    sidebarId
   } = props
 
   const sideBarRef = useRef(null)
   const { width } = useWindowSize()
   const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
   const sideBarWidth = defaultSideBarWidth || 500
 
   const actionSidebar = (value) => {
@@ -51,6 +55,12 @@ export const SideBar = (props) => {
     }
   }
 
+  const expandSideBar = () => {
+    if (isExpand) sideBarRef.current.style.width = `${sideBarWidth}px`
+    else sideBarRef.current.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (!open) return
     document.addEventListener('keydown', onCloseSidebar)
@@ -64,14 +74,24 @@ export const SideBar = (props) => {
         isBorderShow={isBorderShow}
         moveDistance={moveDistance}
         noAnimation={noAnimation}
-        IconTop={IconTop}
+        id={sidebarId ?? 'sideSlider'}
       >
-        <IconButton
-          color='black'
-          onClick={() => props.onClose()}
-        >
-          <XLg />
-        </IconButton>
+        <IconButtonWrapper IconTop={IconTop}>
+          {width > 576 && showExpandIcon && (
+            <IconButton
+              color='black'
+              onClick={() => expandSideBar()}
+            >
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </IconButton>
+          )}
+          <IconButton
+            color='black'
+            onClick={() => props.onClose()}
+          >
+            <XLg />
+          </IconButton>
+        </IconButtonWrapper>
         {props.children}
       </BarContainer>
     </>

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

@@ -29,21 +29,20 @@ export const BarContainer = styled.div`
     right: 0;
     padding-right: ${({ moveDistance }) => moveDistance ? `${moveDistance}px` : '0px'};
   `}
+`
 
-  > button {
-    position: absolute;
-    z-index: 10;
-    top: 20px;
-    ${props => props.theme?.rtl ? css`
-      left: ${({ moveDistance }) => moveDistance ? `${moveDistance + 20}px` : '20px'};
-    ` : css`
-      right: ${({ moveDistance }) => moveDistance ? `${moveDistance + 20}px` : '20px'};
-    `}
-  }
-
+export const IconButtonWrapper = styled.div`
+  position: absolute;
+  z-index: 10;
+  top: 20px;
+  display: flex;
+  align-items: center;
+  ${props => props.theme?.rtl ? css`
+    left: ${({ moveDistance }) => moveDistance ? `${moveDistance + 20}px` : '20px'};
+  ` : css`
+    right: ${({ moveDistance }) => moveDistance ? `${moveDistance + 20}px` : '20px'};
+  `}
   ${({ IconTop }) => IconTop && css`
-    > button {
-      top: ${IconTop}
-    }
+    top: ${IconTop}
   `}
 `

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

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components'
+
+export const Tabs = styled.div`
+  display: flex;  
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+`
+
+export const Tab = styled.div`
+  padding: 10px 0;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  white-space: nowrap;
+  font-size: 14px;
+
+  ${({ active }) => active && css`
+    border-bottom: 3px solid;
+    font-weight: 500;
+  `}
+
+  ${({ active }) => !active && css`
+    color: ${props => props.theme.colors.lightGray};
+  `}
+`

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

@@ -7,6 +7,7 @@ import { DragScroll } from './DragScroll'
 import { Image } from './Image'
 import { ImageCrop } from './ImageCrop'
 import { InputPhoneNumber } from './InputPhoneNumber'
+import { LinkableText } from './LinkableText'
 import { Modal } from './Modal'
 import { MoreSidebarLayout } from './MoreSidebarLayout'
 import { NotFoundSource } from './NotFoundSource'
@@ -17,6 +18,7 @@ import { ProtectedRoute } from './ProtectedRoute'
 import { Schedule } from './Schedule'
 import { SearchBar } from './SearchBar'
 import { RangeCalendar } from './RangeCalendar'
+import { Tabs, Tab } from './Tabs'
 
 import { SelectBusinessCategories } from './SelectBusinessCategories'
 import { SelectBusinessProducts } from './SelectBusinessProducts'
@@ -29,6 +31,7 @@ import { SpinnerLoader } from './SpinnerLoader'
 import SpreadSheetEditor from './SpreadSheetEditor'
 import { ProgressRing } from './ProgressRing'
 import { ColorPicker } from './ColorPicker'
+import { HtmlEditor } from './HtmlEditor'
 
 export {
   AutoScroll,
@@ -41,6 +44,7 @@ export {
   Image,
   ImageCrop,
   InputPhoneNumber,
+  LinkableText,
   Modal,
   MoreSidebarLayout,
   NotFoundSource,
@@ -51,6 +55,8 @@ export {
   Schedule,
   SearchBar,
   RangeCalendar,
+  Tabs,
+  Tab,
 
   SelectBusinessCategories,
   SelectBusinessProducts,
@@ -62,5 +68,6 @@ export {
   SpinnerLoader,
   SpreadSheetEditor,
   ProgressRing,
-  ColorPicker
+  ColorPicker,
+  HtmlEditor
 }