ordering-ui-external 10.0.1 → 10.2.0

package/src/themes/callcenterOriginal/src/components/Orders/UserAddForm/styles.js

@@ -0,0 +1,205 @@
+import styled, { css } from 'styled-components'
+
+export const FormContainer = styled.div`
+  width: 100%;
+
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    width: 100%;
+    margin-bottom: 0px;
+    color: ${props => props.theme.colors.headingColor};
+  }
+`
+
+export const UserImage = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  margin: 20px auto;
+
+  @media (min-width: 768px){
+    width: auto;
+  }
+`
+
+export const Image = styled.div`
+  width: 90px;
+  height: 90px;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  background: ${({ isImage, theme }) => isImage ? '#FFF' : `${theme.colors.backgroundPage}`};
+  cursor: -webkit-grab;
+  cursor: grab;
+  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));
+
+  img,
+  div {
+    width: 100%;
+    border-radius: 8px;
+    height: 100%;
+    overflow: hidden;
+  };
+
+  img{
+    object-fit: cover;
+  }
+`
+
+export const Camera = styled.div`
+  > * {
+    margin-top: 10px;
+    width: 30px;
+    height: 30px;
+  }
+`
+
+export const UploadImageIconContainer = styled.div`
+  position: absolute;
+  top: 0px;
+  background: rgba(0,0,0,0.2);
+  padding: 4px;
+`
+
+export const UploadImageIcon = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: #FFF;
+  border: 1px dashed #fff;
+  span {
+    margin: 0;
+  }
+
+  svg {   
+    width: 45px;
+    height: 45px;
+  }
+`
+
+export const SkeletonWrapper = styled.div`
+  span{
+    height: 100%;
+    position: relative;
+    top: -2.5px;
+  }
+`
+
+export const FormInput = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  width: 100%;
+  margin: 0 auto;
+  div.phone_number {
+    margin-bottom: 20px;
+    width: 100%;
+  }
+  input {
+    color: ${props => props.theme.colors.headingColor};
+  }
+  input.form {
+    padding: 10px 15px;
+    width: 100%;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+    &:disabled {
+      background-color: rgba(239, 239, 239, 0.3);
+      cursor: not-allowed;
+    }
+  }
+  div.PhoneInput {
+    input {
+      border-radius: 8px;
+    }
+  }
+  button {
+    width: 100%;
+    padding: 7px 0;
+  }
+`
+
+export const ActionsForm = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  position: sticky;
+  top: 100%;
+  margin: 20px 0;
+
+  button {
+    flex: 1;
+    margin-top: 10px;
+    padding: 7px 0px;
+    width: 49%;
+    box-sizing: border-box;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  ${props => props.theme?.rtl && css`
+    button {
+      &:nth-child(1) {
+        margin-right: 0px;
+      }
+      &:last-child {
+        margin-right: 5px;
+      }
+    }
+  `}
+`
+
+export const SkeletonForm = styled.div`
+  width: 100%;
+  justify-content: center;
+  height: auto;
+  display: inline-flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin-top: 0px;
+  > * {
+    width: 100%;
+    margin: 10px 0;
+    display: inline;
+    height: 50px;
+    span{
+      border-radius: 16px;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  @media (min-width: 768px){
+    justify-content: flex-start;
+    > * {
+      width: calc(50% - 10px);
+      margin: 5px;
+    }
+  }
+`
+
+export const WrapperUserTypeSelector = styled.div`
+  width: 100%;
+  margin-bottom: 10px;
+
+  div.select {
+    border: none;
+    background-color: ${props => props.theme.colors.secundary};
+    > div:first-child {
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
+  }
+
+  > div {
+    width: 100%;
+    color: ${props => props.theme.colors.secundaryContrast};
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/UserTypeSelector/index.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { Select } from '../../../styles/Select'
+import { Select as FirstSelect } from '../../../styles/Select/FirstSelect'
+import {
+  Option
+} from './styles'
+
+export const UserTypeSelector = (props) => {
+  const {
+    userId,
+    defaultUserType,
+    handleChangeUserType,
+    isPrimary
+  } = props
+  const [, t] = useLanguage()
+
+  const userTypes = [
+    {
+      value: 0,
+      content: <Option>{t('ADMINISTRATOR', 'Administrator')}</Option>,
+      showOnSelected: <Option padding>{t('ADMINISTRATOR', 'Administrator')}</Option>,
+      disabled: !isPrimary && defaultUserType === 0
+    },
+    {
+      value: 2,
+      content: <Option>{t('BUSINESS_OWNER', 'Business owner')}</Option>,
+      showOnSelected: <Option padding>{t('BUSINESS_OWNER', 'Business owner')}</Option>,
+      disabled: !isPrimary && defaultUserType === 2
+    },
+    {
+      value: 3,
+      content: <Option>{t('USER', 'User')}</Option>,
+      showOnSelected: <Option padding>{t('USER', 'User')}</Option>,
+      disabled: !isPrimary && defaultUserType === 3
+    },
+    {
+      value: 9,
+      content: <Option>{t('CALL_CENTER_AGENT', 'Call center agent')}</Option>,
+      showOnSelected: <Option padding>{t('CALL_CENTER_AGENT', 'Call center agent')}</Option>,
+      disabled: !isPrimary && defaultUserType === 9
+    },
+    {
+      value: 8,
+      content: <Option>{t('PROFESSIONAL', 'Professional')}</Option>,
+      showOnSelected: <Option padding>{t('PROFESSIONAL', 'Professional')}</Option>,
+      disabled: !isPrimary && defaultUserType === 8
+    }
+  ]
+  const placeholder = <Option isWeight>{t('TYPE', 'Type')}</Option>
+
+  const onUpdateUserType = (type) => {
+    handleChangeUserType && handleChangeUserType({ id: userId, level: type })
+  }
+
+  return (
+    <>
+      {isPrimary ? (
+        <FirstSelect
+          defaultValue={defaultUserType}
+          placeholder={placeholder}
+          options={userTypes}
+          onChange={type => handleChangeUserType(type)}
+        />
+      ) : (
+        <Select
+          type='primary'
+          noSelected
+          placeholder={placeholder}
+          options={userTypes}
+          onChange={type => onUpdateUserType(type)}
+        />
+      )}
+    </>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/UserTypeSelector/styles.js

@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components'
+
+export const Option = styled.div`
+  font-size: 14px;
+  ${({ padding }) => padding && css`
+    padding: 5px 0;  
+  `}
+  ${({ isWeight }) => isWeight && css`
+    font-weight: 600;  
+  `}
+`

package/src/themes/callcenterOriginal/src/components/Orders/WebsocketStatus/index.js

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components-external'
+import { InfoCircle } from 'react-bootstrap-icons'
+import { Alert, Modal } from '../../Shared'
+import { Button, IconButton } from '../../../styles'
+
+import {
+  Contatiner,
+  StatusContainer,
+  WebsocketStatusDot,
+  InfoWrapper,
+  InfoContent,
+  DetailContainer,
+  StatusItemWrapper,
+  ButtonsContainer
+} from './styles'
+
+const SocketStatusUI = (props) => {
+  const {
+    socketStatus,
+    reconnectAttemptCount,
+    connectedDate
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [openModal, setOpenModal] = useState(false)
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+    window.location.reload()
+  }
+
+  useEffect(() => {
+    if (reconnectAttemptCount > 3) {
+      setAlertState({
+        open: true,
+        content: t('WEBSOCKET_CONNECT_ERROR', 'There appears to be an error in establishing the WebSocket connection. Please try reloading the page to resolve the issue.')
+      })
+    }
+  }, [reconnectAttemptCount])
+
+  return (
+    <Contatiner>
+      <InfoWrapper>
+        <IconButton
+          color='primary'
+        >
+          <InfoCircle />
+        </IconButton>
+        <InfoContent>
+          {t('WEBSOCKET_STATUS_INFO', 'Verify the server connection by date and time using the Connection status button. Press update to refresh you dashboard and update the status as well. Need help? Contact our Customer support team here:')}
+          <a href='https://www.ordering.co/contact-ordering' target='_blank' rel='noopener noreferrer'>{t('CUSTOMER_SUPPORT', 'Customer support')}</a>
+        </InfoContent>
+      </InfoWrapper>
+      <Button
+        borderRadius='8px'
+        color='secundary'
+        onClick={() => setOpenModal(true)}
+      >
+        <StatusContainer>
+          <span>{t('CONNECTION_STATUS', 'Connection status')}</span>
+          <WebsocketStatusDot
+            status={socketStatus}
+          />
+        </StatusContainer>
+      </Button>
+
+      <Modal
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+        width='500px'
+      >
+        <DetailContainer>
+          <h2>{t('CONNECTION_STATUS', 'Connection status')}</h2>
+          <p>{t('LAST_UPDATE', 'Last update')}: {parseDate(connectedDate)}</p>
+          <StatusItemWrapper>
+            <div>
+              <WebsocketStatusDot status={1} />
+              <span>{t('OK', 'Ok')}</span>
+            </div>
+            <p>{t('WEBSOCKET_OK', 'The websocket works normally.')}</p>
+          </StatusItemWrapper>
+          <StatusItemWrapper>
+            <div>
+              <WebsocketStatusDot status={0} />
+              <span>{t('CONNECTING', 'Connecting')}</span>
+            </div>
+            <p>{t('WEBSOCKET_CONNECTING', 'The websocket is connecting.')}</p>
+          </StatusItemWrapper>
+          <StatusItemWrapper>
+            <div>
+              <WebsocketStatusDot status={2} />
+              <span>{t('DISCONNECTED', 'Disconnected')}</span>
+            </div>
+            <p>{t('WEBSOCKET_DISCONNECTED', 'The server is slow, please reload.')}</p>
+          </StatusItemWrapper>
+          <ButtonsContainer>
+            <Button
+              color='secundary'
+              onClick={() => setOpenModal(false)}
+            >
+              {t('CLOSE', 'Close')}
+            </Button>
+            <Button
+              color='primary'
+              onClick={() => window.location.reload()}
+            >
+              {t('UPDATE', 'Update')}
+            </Button>
+          </ButtonsContainer>
+        </DetailContainer>
+      </Modal>
+
+      <Alert
+        title={t('ERROR', 'Error')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </Contatiner>
+  )
+}
+
+export const WebsocketStatus = (props) => {
+  const socketProps = {
+    ...props,
+    UIComponent: SocketStatusUI
+  }
+  return <WebsocketStatusController {...socketProps} />
+}

package/src/themes/callcenterOriginal/src/components/Orders/WebsocketStatus/styles.js

@@ -0,0 +1,171 @@
+import styled, { css } from 'styled-components'
+
+export const Contatiner = styled.div`
+  display: flex;
+  align-items: center;
+
+  > button {
+    height: 41px;
+  }
+  
+  @media (min-width: 576px) {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 10px;
+    ` : css`
+      margin-right: 10px;
+    `}
+  }
+`
+
+export const StatusContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  > span:first-child {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 6px;
+    ` : css`
+      margin-right: 6px;
+    `}
+  }
+`
+
+export const WebsocketStatusDot = styled.span`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+
+  ${({ status }) => status === 0 && css`
+    background-color: #FF9922;
+  `}
+  ${({ status }) => status === 1 && css`
+    background-color: #00D27A;
+  `}
+  ${({ status }) => status === 2 && css`
+    background-color: #E63757;
+  `}
+`
+export const DateWrapper = styled.div`
+  font-size: 12px;
+  text-align: center;
+`
+export const InfoWrapper = styled.div`
+  position: relative;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 4px;
+  ` : css`
+    margin-right: 4px;
+  `}
+
+  > button {
+    height: 25px;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  &:hover > div {
+    visibility: visible;
+    opacity: 1;
+  }
+`
+
+export const InfoContent = styled.div`
+  position: absolute;
+  top: 100%;
+  z-index: 999;
+  background: ${props => props.theme.colors.backgroundInfo};
+  border: 1px solid ${props => props.theme.colors.primary};
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 18px;
+  min-width: 150px;
+  transition: all 0.3s linear;
+  visibility: hidden;
+  opacity: 0;
+  /* display: none; */
+  right: 0px;
+  ${props => props.theme.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  a {
+    color: ${props => props.theme.colors.primary};
+    transition: all 0.3s linear;
+    cursor: pointer;
+    margin-left: 5px;
+    ${props => props.theme.rtl && css`
+      margin-left: 0px;
+      margin-right: 5px;
+    `}
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media (min-width: 576px) {
+    min-width: 350px;
+    padding: 12px 15px;
+    left: 0px;
+    ${props => props.theme.rtl && css`
+      right: 0px;
+      left: initial;
+    `}
+  }
+
+  @media (min-width: 993px) {
+    min-width: 535px;
+  }
+`
+export const DetailContainer = styled.div`
+  h2 {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 30px;
+  }
+
+  > p {
+    font-size: 14px;
+  }
+`
+export const StatusItemWrapper = styled.div`
+  > div {
+    display: flex;
+    align-items: center;
+
+    > span:first-child {
+      margin: 0 16px;
+    }
+  }
+  p {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    color: ${props => props.theme.colors.lightGray};
+
+    ${props => props.theme?.rtl ? css`
+      margin-right: 40px;
+    ` : css`
+      margin-left: 40px;
+    `}
+  }
+`
+export const ButtonsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 40px;
+
+  > button {
+    border-radius: 8px;
+    height: 40px;
+    &:last-child {
+      margin: 0 10px;
+    }
+  }
+`

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

@@ -1,5 +1,9 @@
+import { AllInOne } from './AllInOne'
+import { Appointments } from './Appointments'
 import { DeliveriesManager } from './DeliveriesManager'
 import { DriversManager } from './DriversManager'
+import { GiftCardsListing } from './GiftCardsListing'
+
 import { Messages } from './Messages'
 import { OrdersContentHeader } from './OrdersContentHeader'
 import { OrdersDashboardList } from './OrdersDashboardList'
@@ -46,8 +50,11 @@ import { CountryFilter } from './CountryFilter'
 import { OrderToPrint } from './OrderToPrint'
 
 export {
+  AllInOne,
+  Appointments,
   DeliveriesManager,
   DriversManager,
+  GiftCardsListing,
   Messages,
   OrdersContentHeader,
   OrdersManager,

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

@@ -83,6 +83,7 @@ export const AutoScroll = ({ children, modal, special, innerScroll, scrollId })
   useEffect(() => {
     if (!scrollId) return
     const element = document?.getElementById(`${autoScrollId}`)?.parentNode
+    if (!element) return
     setParentWidth(element.width)
     setParentElement(element)
   }, [scrollId])

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

@@ -20,21 +20,25 @@ const CitySelectorUI = (props) => {
     optionInnerMaxHeight
   } = props
 
-  const [cityOptions, setCityOptions] = useState([])
   const [, t] = useLanguage()
+
+  const [cityOptions, setCityOptions] = useState([])
+  const [searchValue, setSearchValue] = useState('')
   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>
-      }
-    })
+    const _cityOptions = citiesList?.cities
+      .filter(option => option?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      .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])
+  }, [citiesList, isDefault, searchValue])
 
   useEffect(() => {
     if (!isAddMode) return
@@ -66,6 +70,11 @@ const CitySelectorUI = (props) => {
               defaultValue={filterValues?.cityIds}
               options={cityOptions}
               onChange={(city) => handleChangeCity(city)}
+              isShowSearchBar
+              searchBarIsCustomLayout
+              searchBarIsNotLazyLoad
+              searchValue={searchValue}
+              handleChangeSearch={(val) => setSearchValue(val)}
             />
           )}
         </>

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

@@ -6,6 +6,7 @@ export const HeaderItem = styled.div`
 `
 
 export const PopoverBody = styled.div`
+  position: fixed !important;
   z-index: 1001;
   background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
   border: 1px solid ${props => props.theme.colors?.borderColor};

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

@@ -45,7 +45,17 @@ const ConfirmUI = (props) => {
         {content && typeof content === 'object' && Array.isArray(content) && (
           <ul>
             {content.map((item, i) => (
-              <li key={i}>{t(item.toUpperCase(), errors[item])}</li>
+              <React.Fragment key={i}>
+                {Array.isArray(item) ? (
+                  item.map((err, index) => (
+                    typeof err === 'string' && (
+                      <li key={index}>{t(err.toUpperCase(), errors[err] || err)}</li>
+                    )
+                  ))
+                ) : (
+                  typeof item === 'string' && <li>{t(item.toUpperCase(), errors[item] || item)}</li>
+                )}
+              </React.Fragment>
             ))}
           </ul>
         )}