ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,226 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useConfig, SettingsList as SettingsListController } from 'ordering-components-external'
+import { useForm } from 'react-hook-form'
+import { Button } from '../../../styles'
+import { Modal, DragScroll, Alert } from '../../Shared'
+import { useTheme } from 'styled-components'
+import {
+  SettingContainer,
+  SettingHeader,
+  SettingControlPanel,
+  TabsContainer,
+  Tab,
+  DeliveryStatusWrapper,
+  StatusItems,
+  ItemHeader,
+  ItemStatus,
+  ItemContent,
+  IconWrapper,
+  Actions,
+  TimerInputWrapper,
+  OverLine
+} from './styles'
+
+export const OrderDashboardSLASettingUI = (props) => {
+  const {
+    settingsState,
+    handleInputChange,
+    handleClickUpdate
+  } = props
+  const [, t] = useLanguage()
+  const [settingOpen, setSettingOpen] = useState(false)
+  const [currentTabItem, setCurrentTabItem] = useState(1)
+  const [selectedTabStatus, setSelectedTabStatus] = useState(null)
+  const theme = useTheme()
+  const formMethods = useForm()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const defaultOrderTypes = [
+    { key: 1, name: t('DELIVERY', 'Delivery') },
+    { key: 2, name: t('PICKUP', 'Pickup') },
+    { key: 3, name: t('EAT_IN', 'Eat in') },
+    { key: 4, name: t('CURBSIDE', 'Curbside') },
+    { key: 5, name: t('DRIVE_THRU', 'Drive thru') }
+  ]
+
+  const deliveryStatus = [
+    {
+      key: t('OK', 'Ok'),
+      des: t('DELIVERY_OK_STATUS_DESC', 'Get delivery time from the businesses.'),
+      timmer: false,
+      icon: theme.images.icons?.clock1,
+      backColor: '#00D27A'
+    },
+    {
+      key: t('AT_RISK', 'At risk'),
+      des: t('DELIVERY_ATRISK_STATUS_DESC', 'Is the time between delivery time of busines and the delayed time.'),
+      timmer: false,
+      icon: theme.images.icons?.clockRisk,
+      backColor: '#FFC700'
+    },
+    {
+      key: t('DELAYED', 'Delayed'),
+      des: t('DELIVERY_DELAYED_STATUS_DESC', 'If this time is exceeded, the order will be delayed.'),
+      timmer: false,
+      icon: theme.images.icons?.clockDelayed,
+      backColor: '#E63757'
+    }
+  ]
+
+  const handleCloseSettings = () => {
+    setSettingOpen(false)
+  }
+
+  const onSubmit = (data) => {
+    if (data && Object.keys(data).length > 0) {
+      handleClickUpdate()
+    }
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  useEffect(() => {
+    setSelectedTabStatus(deliveryStatus)
+  }, [])
+
+  useEffect(() => {
+    if (Object.keys(formMethods.errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(formMethods.errors).map(error => error.message)
+      })
+    }
+  }, [formMethods.errors])
+
+  useEffect(() => {
+    if (settingsState?.result?.error) {
+      setAlertState({
+        open: true,
+        content: settingsState?.result?.result
+      })
+    }
+  }, [settingsState?.result])
+
+  return (
+    <SettingContainer>
+      <Button
+        color='secundary'
+        onClick={() => setSettingOpen(true)}
+      >
+        {t('SLA_SETTING', 'SLA’s settings')}
+      </Button>
+      <Modal
+        open={settingOpen}
+        onClose={() => handleCloseSettings()}
+        width='fit-content'
+      >
+        <SettingControlPanel
+          onSubmit={formMethods.handleSubmit(onSubmit)}
+        >
+          <SettingHeader>{t('SLA_SETTINGS', 'SLA’s settings')}</SettingHeader>
+          <TabsContainer>
+            <DragScroll>
+              {defaultOrderTypes.map(item => (
+                <Tab
+                  key={item.key}
+                  active={item.key === currentTabItem}
+                  onClick={() => setCurrentTabItem(item.key)}
+                >
+                  {item.name}
+                </Tab>
+              ))}
+            </DragScroll>
+          </TabsContainer>
+          <DeliveryStatusWrapper>
+            {selectedTabStatus && selectedTabStatus.length > 0 && selectedTabStatus.map((item, i) => (
+              <StatusBlock key={i} item={item} last={i + 1 === selectedTabStatus.length} formMethods={formMethods} handleInputChange={handleInputChange} />
+            ))}
+          </DeliveryStatusWrapper>
+          <Actions>
+            <Button
+              color='primary'
+              type='submit'
+            >
+              {t('ACCEPT', 'Accept')}
+            </Button>
+          </Actions>
+        </SettingControlPanel>
+      </Modal>
+      <Alert
+        title={t('SLA_SETTING', 'SLA’s settings')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </SettingContainer>
+  )
+}
+
+export const StatusBlock = (props) => {
+  const { item, last, formMethods, handleInputChange } = props
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [inputWidth, setInputWidth] = useState(38)
+
+  const handleMiuteChange = (e) => {
+    setInputWidth((e.target.value.length + 1) * 8.5)
+    handleInputChange(e.target.value, configs?.order_deadlines_delayed_time?.id)
+  }
+
+  return (
+    <StatusItems>
+      <ItemHeader>
+        <IconWrapper>
+          <img src={item?.icon} alt='' />
+        </IconWrapper>
+        <ItemStatus backColor={item?.backColor} />
+        <span>{item?.key}</span>
+      </ItemHeader>
+      <ItemContent>
+        <p>{item?.des}</p>
+      </ItemContent>
+      {last && (
+        <TimerInputWrapper>
+          <input
+            name='minute'
+            type='text'
+            placeholder='MM'
+            disabled
+            defaultValue={configs?.order_deadlines_delayed_time?.value}
+            ref={formMethods.register({
+              required: t('VALIDATION_ERROR_MINUTE_REQUIRED', 'The field minute is required').replace('_attribute_', t('MINUTE', 'Minute'))
+            })}
+            style={{ width: inputWidth }}
+            onChange={(e) => handleMiuteChange(e)}
+            onKeyPress={(e) => {
+              if (!/^[0-9.]$/.test(e.key)) {
+                e.preventDefault()
+              }
+            }}
+          />
+        </TimerInputWrapper>
+      )}
+      {last && (
+        <OverLine />
+      )}
+    </StatusItems>
+  )
+}
+
+export const OrderDashboardSLASetting = (props) => {
+  const [{ configs }] = useConfig()
+  const settingsListProps = {
+    ...props,
+    category: { configs: [{ ...configs?.order_deadlines_delayed_time }] },
+    UIComponent: OrderDashboardSLASettingUI
+  }
+  return <SettingsListController {...settingsListProps} />
+}

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

@@ -0,0 +1,143 @@
+import styled, { css } from 'styled-components'
+
+export const SettingContainer = styled.div`
+  display: flex;
+  /* margin: 0 10px;
+  width: 90px; */
+  height: 41px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  button {
+    border-radius: 7.6px;
+
+
+    &:hover {
+      background: #f7f7f7;
+    }
+  }
+
+`
+export const SettingControlPanel = styled.form`
+  display: inline-block;
+  width: 100%;
+`
+
+export const SettingHeader = styled.h2`
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 30px;
+  color: ${(props) => props.theme.colors.headingColor};
+`
+
+export const TabsContainer = styled.div`
+  width: 100%;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  margin-bottom: 25px;
+`
+
+export const Tab = styled.div`
+  padding: 10px 0px;
+  cursor: pointer;
+  color: ${props => props.theme.colors?.lightGray};
+  white-space: nowrap;
+  font-size: 12px;
+  text-transform: capitalize;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+
+  ${({ active }) => active && css`
+    color: ${props => props.theme.colors.headingColor};
+    border-bottom: 2px solid ${props => props.theme.colors.headingColor};
+    font-weight: 500;
+    font-size: 14px;
+  `}
+`
+export const DeliveryStatusWrapper = styled.div`
+  position: relative;
+  &:before {
+    content: "";
+    background: #E9ECEF;
+    position: absolute;
+    width: 2px;
+    height: calc(100% - 60px);
+    top: 7px;
+    left: 7px;
+  }
+`
+export const StatusItems = styled.div`
+  position: relative;
+`
+export const ItemStatus = styled.span`
+  width: 4px;
+  height: 22px;
+  margin: 0 15px;
+  border-radius: 4px;
+  background: ${props => props.backColor};
+`
+export const ItemHeader = styled.div`
+  display: flex;
+  margin-bottom: 5px;
+`
+
+export const ItemContent = styled.div`
+  display: flex;
+  padding: 0 30px;
+
+  p {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    color: ${props => props.theme.colors.lightGray};
+  }
+`
+export const IconWrapper = styled.span`
+  display: inline-flex;
+  width: fit-content;
+  height: fit-content;
+  background-color: #fff;
+  z-index: 2;
+`
+export const Actions = styled.div`
+  padding-top: 22px;
+  button {
+    border-radius: 7.6px;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    padding: 7px 15px;
+  }
+`
+export const TimerInputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  border-radius: 7.6px;
+  padding: 7px;
+  width: fit-content;
+  margin: 0 30px 15px;
+  color: ${props => props.theme.colors.disabled};
+
+  input {
+    flex: 1;
+    border: none !important;
+    outline: none !important;
+    padding: 5px;
+    font-size: 14px;
+    min-width: 38px;
+    width: fit-content;
+    color: ${props => props.theme.colors.headingColor};
+  }
+`
+export const OverLine = styled.div`
+  position: absolute;
+  height: 100%;
+  width: 15px;
+  top: 0;
+  background-color: #fff;
+`

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

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, CheckPassword as CheckPasswordController } from 'ordering-components-external'
+import FaTrash from '@meronex/icons/fa/FaTrash'
+import { useWindowSize } from '../../../../../../hooks/useWindowSize'
+import { Button } from '../../../styles/Buttons'
+import { Modal } from '../../Shared'
+
+import {
+  WrapperCheckPassword,
+  ErrorText
+} from './styles'
+
+const OrderDeleteUI = (props) => {
+  const {
+    checkPasswordStatus,
+    handleChangePassword,
+    getCheckPassword,
+    handleDeleteMultiOrders
+  } = props
+  const { width } = useWindowSize()
+  const [, t] = useLanguage()
+
+  const [checkPasswordModalOpen, setCheckPasswordModalOpen] = useState(false)
+  const [password, setPassword] = useState('')
+  const handlePassword = (e) => {
+    setPassword(e.target.value)
+  }
+
+  const handleModalOpen = () => {
+    setPassword('')
+    setCheckPasswordModalOpen(true)
+  }
+
+  useEffect(() => {
+    handleChangePassword(password)
+  }, [password])
+
+  useEffect(() => {
+    if (checkPasswordStatus.loading || checkPasswordStatus.error !== null) return
+    if (checkPasswordStatus.result === 'OK') {
+      setCheckPasswordModalOpen(false)
+      setPassword('')
+      handleDeleteMultiOrders()
+    }
+  }, [checkPasswordStatus])
+
+  return (
+    <>
+      <Button
+        borderRadius='8px'
+        color='secundary'
+        onClick={() => handleModalOpen()}
+      >
+        {width > 600 && t('DELETE', 'Delete')}
+        <FaTrash />
+      </Button>
+
+      <Modal
+        open={checkPasswordModalOpen}
+        width='600px'
+        onClose={() => setCheckPasswordModalOpen(false)}
+      >
+        <WrapperCheckPassword>
+          <h3>{t('CONFIRM_PASSWORD', 'Confirm password')}</h3>
+          <p>{t('TYPE_YOUR_PASSWORD_TO_CONFIRM_DELETE', 'Type your password to confirm delete.')}</p>
+          <input
+            autoComplete='new-password'
+            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'
+            onClick={() => getCheckPassword()}
+          >
+            {t('CONFIRM', 'Confirm')}
+          </Button>
+        </WrapperCheckPassword>
+      </Modal>
+    </>
+  )
+}
+
+export const OrderDelete = (props) => {
+  const checkPasswordControlProps = {
+    ...props,
+    UIComponent: OrderDeleteUI
+  }
+  return <CheckPasswordController {...checkPasswordControlProps} />
+}

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

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+
+export const WrapperCheckPassword = styled.div`
+  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;
+`