ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,125 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div``
+
+export const ImageCropWrapper = styled.div`
+  width: 100%;
+  height: 400px;
+  margin-bottom: 8px;
+  position: relative;
+
+  > div {
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  img {
+    display: block;
+    /* This rule is very important, please don't ignore this */
+    max-width: 100%;
+  }
+`
+
+export const ImageCropActionWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+  flex-direction: column;
+  
+  @media (min-width: 576px) {
+    flex-direction: row;
+  }
+`
+
+export const RangeWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  span {
+    font-size: 14px;
+    white-space: nowrap;
+    &.title {
+      margin-right: 5px;
+      ${props => props.theme?.rtl && css`
+        margin-right: 0px;
+        margin-left: 5px;
+      `}
+    }
+    &.percent {
+      margin-left: 5px;
+      ${props => props.theme?.rtl && css`
+        margin-right: 5px;
+        margin-left: 0px;
+      `}
+    }
+  }
+
+  input[type='range'] {
+    height: 8px;
+    border: 0px;
+    outline: none !important;
+    flex: 1;
+    border-radius: 10px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    z-index: 10;
+    position: relative;
+  }
+
+  input[type='range'],
+  input[type='range']::-webkit-slider-runnable-track,
+  input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none;
+  }
+
+  input[type='range']::-webkit-slider-thumb {
+    position: relative;
+    height: 20px;
+    width: 20px;
+    background: #FFFFFF;
+    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    border: 5px solid ${props => props.theme.colors.primary};
+  }
+
+  @media (min-width: 576px) {
+    width: auto;
+    flex: 1;
+  }
+`
+
+export const ActionContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  > button {
+    margin-left: 15px;
+    font-size: 14px;
+    ${props => props.theme.rtl && css`
+      margin-right: 15px;
+      margin-left: 0;
+    `}
+
+    svg {
+      width: 16px;
+      height: 16px;
+      margin-left: 5px;
+      ${props => props.theme.rtl && css`
+        margin-right: 5px;
+        margin-left: 0;
+      `}
+    }
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+
+  button {
+    margin-top: 20px;
+    height: 44px;
+  }
+`

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

@@ -0,0 +1,70 @@
+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 { Container, ErrorMsg } from './styles'
+
+export const InputPhoneNumber = (props) => {
+  const {
+    user,
+    value,
+    setValue,
+    handleIsValid,
+    disabled
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ auth }] = useSession()
+  const [{ configs }] = useConfig()
+
+  const isValidPhoneNumber = (number) => {
+    if (!number) return
+    const numberParser = parsePhoneNumber(number)
+    return numberParser?.isValid()
+  }
+
+  useEffect(() => {
+    if (value) {
+      handleIsValid && handleIsValid(isValidPhoneNumber(value))
+    }
+  }, [value])
+
+  return (
+    <Container className='phone_number' disabled={disabled} isValid={value ? isValidPhoneNumber(value) : true}>
+      <>
+        {props.beforeElements?.map((BeforeElement, i) => (
+          <React.Fragment key={i}>
+            {BeforeElement}
+          </React.Fragment>))}
+        {props.beforeComponents?.map((BeforeComponent, i) => (
+          <BeforeComponent key={i} {...props} />))}
+        <PhoneInput
+          disabled={disabled}
+          placeholder={t('PHONE_NUMBER', 'Phone number')}
+          defaultCountry={configs?.default_country_code?.value}
+          value={value}
+          displayInitialValueAsLocalNumber
+          onChange={(val) => setValue && setValue(val, isValidPhoneNumber(val))}
+        />
+        {value && !isValidPhoneNumber(value) && !disabled && (
+          <>
+            {((auth && user?.country_phone_code) || !auth || value.includes('+')) && (
+              <ErrorMsg>{t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')}</ErrorMsg>
+            )}
+
+            {auth && !user?.country_phone_code && !value.includes('+') && (
+              <ErrorMsg>{t('INVALID_ERROR_COUNTRY_CODE_PHONE_NUMBER', 'The country code of the phone number is invalid')}</ErrorMsg>
+            )}
+          </>
+        )}
+        {props.afterComponents?.map((AfterComponent, i) => (
+          <AfterComponent key={i} {...props} />))}
+        {props.afterElements?.map((AfterElement, i) => (
+          <React.Fragment key={i}>
+            {AfterElement}
+          </React.Fragment>))}
+      </>
+    </Container>
+  )
+}

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

@@ -0,0 +1,153 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  text-align: center;
+  select:focus {
+    outline: none;
+  }
+
+  .PhoneInput {
+    display: flex;
+    align-items: center;
+  }
+
+  .PhoneInputInput {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .PhoneInputCountryIcon {
+    width: calc(1em * 1.5);
+    height: 1em;
+  }
+
+  .PhoneInputCountryIcon--square {
+    width: 1em;
+  }
+
+  .PhoneInputCountryIcon--border {
+    background-color: rgba(0,0,0,0.1);
+    box-shadow: 0 0 0 1px  rgba(0,0,0,0.5),
+    inset 0 0 0 1px  rgba(0,0,0,0.5);
+  }
+
+  .PhoneInputCountryIconImg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .PhoneInputInternationalIconPhone {
+    opacity: 0.8;
+  }
+
+  .PhoneInputInternationalIconGlobe {
+    opacity: 0.65;
+  }
+
+  .PhoneInputCountry {
+    position: relative;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    margin-right: 0.35em;
+  }
+
+  .PhoneInputCountrySelect {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    border: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .PhoneInputCountrySelect[disabled] {
+    cursor: default;
+  }
+
+  .PhoneInputCountrySelectArrow {
+    display: block;
+    content: '';
+    width: 0.3em;
+    height: 0.3em;
+    margin-left: 0.35em;
+    border-style: solid;
+    border-color: inherit;
+    border-top-width: 0;
+    border-bottom-width: 1px;
+    border-left-width: 0;
+    border-right-width: 1px;
+    transform: rotate(45deg);
+    opacity: 0.45;
+  }
+
+  .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
+    opacity: 1;
+    color: #03b2cb;
+  }
+
+  .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
+    box-shadow: 0 0 0 1px #03b2cb, inset 0 0 0 1px #03b2cb;
+  }
+
+  .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
+    opacity: 1;
+    color: #03b2cb;
+  }
+
+  .PhoneInputCountryIcon {
+    font-size: 20px;
+    background: transparent;
+    border: 0;
+    box-shadow: 0 0 black;
+    height: 30px;
+    width: 30px;
+    outline: none;
+
+    &.PhoneInputCountryIcon--border img {
+      border-radius: 10px;
+      outline: none;
+    }
+  }
+
+  ${props => props.theme?.rtl && css`
+    .PhoneInputCountrySelectArrow{
+        margin-right: 0.35em;
+    }
+  `}
+
+  input.PhoneInputInput {
+    border-radius: 30px;
+    border: 1px solid #DEE2E6;
+    font-size: 14px;
+    outline: none;
+    padding: 10px 15px;
+
+    &::placeholder {
+      color: #B1BCCC;
+      opacity: 1;
+    }
+    &:-ms-input-placeholder {
+      color: #B1BCCC;
+    }
+    &::-ms-input-placeholder {
+      color: #B1BCCC;
+    }
+
+    ${({ disabled }) => disabled && css`
+      cursor: not-allowed;
+    `}
+  }
+`
+
+export const ErrorMsg = styled.span`
+  margin: 0;
+  padding: 0;
+  color: ${props => props.theme.colors.primary};
+  font-weight: 400;
+  font-size: 14px;
+`

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

@@ -0,0 +1,90 @@
+import React, { useEffect } from 'react'
+import { XLg } from 'react-bootstrap-icons'
+import { Popup, useLanguage } from 'ordering-components-external'
+import { Button, IconButton } from '../../../styles'
+import {
+  ModalDialog,
+  ModalActions,
+  ModalTitle,
+  ModalIcon,
+  ModalHeader,
+  ModalDialogInnerContainer
+} from './styles'
+
+const ModalUI = (props) => {
+  const {
+    title,
+    children,
+    onAccept,
+    onCancel,
+    onClose,
+    acceptText,
+    cancelText,
+    isTransparent,
+    hideCloseDefault,
+    className
+  } = props
+  const [, t] = useLanguage()
+
+  const onCloseModal = (e) => {
+    if (e.code === 'Escape') {
+      onClose && onClose()
+    }
+  }
+
+  useEffect(() => {
+    if (!props.open) return
+    document.addEventListener('keydown', onCloseModal)
+    return () => document.removeEventListener('keydown', onCloseModal)
+  }, [props.open])
+  return (
+    <ModalDialog
+      className={`popup-dialog ${className || ''}`}
+      height={props.height}
+      width={props.width}
+    >
+      <ModalDialogInnerContainer
+        padding={props.padding}
+        isTransparent={isTransparent}
+        overflow={props.overflow}
+        className='dialog-inner'
+      >
+        {!hideCloseDefault && (
+          <ModalIcon className='modal-close-icon'>
+            <IconButton
+              color='black'
+              onClick={() => onClose()}
+            >
+              <XLg />
+            </IconButton>
+          </ModalIcon>
+        )}
+        <ModalHeader>
+          {title && (
+            <ModalTitle>
+              {title}
+            </ModalTitle>
+          )}
+        </ModalHeader>
+        {children}
+        {(onCancel || onAccept) && (
+          <ModalActions>
+            {onAccept && <Button color='darkBlue' onClick={() => onAccept()}>{acceptText || t('ACCEPT')}</Button>}
+            {onCancel && <Button color='primary' onClick={() => onCancel()}>{cancelText || t('CANCEL')}</Button>}
+          </ModalActions>)}
+      </ModalDialogInnerContainer>
+      
+    </ModalDialog>
+  )
+}
+
+export const Modal = (props) => {
+  const ModalProps = {
+    ...props,
+    UIComponent: ModalUI
+  }
+
+  return (
+    <Popup {...ModalProps} />
+  )
+}

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

@@ -0,0 +1,94 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  ${({ zx }) => zx && css`
+    .popup {
+      z-index: ${zx} !important;
+    }
+  `}
+`
+
+export const ModalDialog = styled.div`
+  position: relative;
+  width: ${({ width }) => width || '50%'};
+  height: ${({ height }) => height};
+  border-radius: 10px;
+  box-sizing: border-box;
+  margin-top: auto;
+  margin-bottom: auto;
+  overflow: hidden;
+  max-height: calc(var(--vh, 1vh) * 90);
+  @media (max-width: 860px) {
+    width: 80%;
+  }
+  @media (max-width: 768px) {
+    width: 100vw;
+    height: 100%;
+    max-height: calc(var(--vh, 1vh) * 100);
+    border-radius: 0px;
+  }
+`
+
+export const ModalDialogInnerContainer = styled.div`
+  position: relative;
+  padding: ${({ padding }) => padding || '20px'};
+  overflow: ${({ overflow }) => overflow || 'auto'};
+  background-color: ${({ isTransparent, theme }) => isTransparent ? 'transparent' : theme.colors.backgroundPage || '#FFF'};
+  width: 100%;
+  height: 100%;
+`
+
+export const ModalActions = styled.div`
+  display: flex;
+  justify-content: space-around;
+  margin: 30px 0px 0px;
+
+  button {
+    width: 100%;
+    border-radius: 32px;
+    opacity: 1;
+    max-width: 300px;
+    margin-top: 10px;
+    height: 60px;
+  }
+`
+export const ModalHeader = styled.div`
+  display: flex;
+`
+export const ModalTitle = styled.h2`
+  text-align: left;
+  font-size: 30px;
+  font-weight: 500;
+  letter-spacing: 0px;
+  color: #010300;
+  opacity: 1;
+  margin: 0px 0px;
+  margin-bottom: 20px;
+  text-transform: capitalize;
+  flex: 1;
+  ${props => props.theme?.rtl && css`
+    text-align: right;
+    padding-right: 10px;
+    padding-left: 0px;
+  `}
+`
+
+export const ModalOrderTypes = styled.div`
+  margin-right: 15px;
+  ${props => props.theme?.rtl && css`
+    padding-left: 15px;
+    padding-right: 0px;
+  `}
+`
+export const ModalIcon = styled.span`
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  font-size: 30px;
+  cursor: pointer;
+  z-index: 1;
+  ${props => props.theme?.rtl && css`
+    left: 5px;
+    right: initial;
+  `}
+`

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

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react'
+import { Modal } from '../Modal'
+import { useWindowSize } from '../../../../../../hooks/useWindowSize'
+import { XLg } from 'react-bootstrap-icons'
+import { IconButton } from '../../../styles/Buttons'
+
+import {
+  MainContainer,
+  CloseButtonWrapper
+} from './styles'
+export const MoreSidebarLayout = (props) => {
+  const {
+    isExtendExtraOpen
+  } = props
+  const { width } = useWindowSize()
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  useEffect(() => {
+    if (width > 1000) setIsModalOpen(false)
+    else setIsModalOpen(true)
+  }, [width])
+  return (
+    <>
+      {width > 1000 ? (
+        <MainContainer>
+          <CloseButtonWrapper
+            isExtendExtraOpen={isExtendExtraOpen}
+          >
+            <IconButton
+              color='black'
+              onClick={() => props.onClose()}
+            >
+              <XLg />
+            </IconButton>
+          </CloseButtonWrapper>
+          {props.children}
+        </MainContainer>
+      ) : (
+        <Modal
+          width='80%'
+          open={isModalOpen}
+          onClose={() => props.onClose()}
+        >
+          {props.children}
+        </Modal>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components'
+
+export const MainContainer = styled.div`
+  width: 0;
+
+  @media (min-width: 1000px) {
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    transition: 0.3s;
+    overflow-x: hidden;
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid #E9ECEF;
+    ` : css`
+      border-left: 1px solid #E9ECEF;
+    `}
+  }
+`
+
+export const CloseButtonWrapper = styled.span`
+  z-index: 100;
+  position: absolute;
+  top: 20px;
+  ${props => props.theme?.rtl ? css`
+    left: ${({ isExtendExtraOpen }) => isExtendExtraOpen ? '520px' : '20px'};
+  ` : css`
+    right: ${({ isExtendExtraOpen }) => isExtendExtraOpen ? '520px' : '20px'};
+  `}
+`

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import { useTheme } from 'styled-components'
+import { Button } from '../../../styles'
+
+import {
+  NotFound,
+  NotFoundImage
+} from './styles'
+
+export const NotFoundSource = (props) => {
+  const {
+    content,
+    btnTitle,
+    onClickButton
+  } = props
+
+  const theme = useTheme()
+
+  return (
+    <NotFound id='not-found-source'>
+      <NotFoundImage>
+        <img src={theme.images?.general?.notFound} alt='Not Found' />
+      </NotFoundImage>
+      <h1>{content}</h1>
+      {!onClickButton && props.children && (
+        props.children
+      )}
+      {onClickButton && (
+        <div>
+          <Button
+            color='darkBlue'
+            onClick={() => onClickButton()}
+          >
+            {btnTitle}
+          </Button>
+        </div>
+      )}
+    </NotFound>
+  )
+}

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

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+
+export const NotFound = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 50%;
+  height: calc(100vh - 65px);
+  margin: 0 auto;
+
+  h1 {
+    opacity: 0.5;
+    text-align: center;
+    font-size: 24px;
+    margin: 10px 0;
+  }
+
+  @media (max-width: 576px) {
+    width: 80%;
+    h1 {
+      font-size: 24px;
+    }
+  }
+
+  @media (max-width: 360px) {
+    h1 {
+      font-size: 20px;
+    }
+  }
+`
+
+export const NotFoundImage = styled.div`
+  max-width: 300px;
+  max-width: 300px;
+
+  img {
+    width: 300px;
+  }
+`