ordering-ui-external 1.8.7 → 1.8.9

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

@@ -0,0 +1,57 @@
+import styled, { css } from 'styled-components'
+
+export const WraaperLogs = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8em;
+  border-radius: 97px;
+
+  > button {
+    margin-bottom: 15px;
+    font-size: 14px;
+    padding: 0 25px;
+  }
+`
+export const SkeletonHitory = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  column-gap: 20px;
+
+  span {
+    border-radius: 5px;
+  }
+
+  @media (max-width: 576px) {
+    span {
+      width: 250px !important;
+    }
+  }
+`
+export const BubbleConsole = styled.div`
+  border-radius: 5px;
+  padding: 5px 15px;
+  max-width: 90%;
+  margin-bottom: 15px;
+  background: #EFEFEF;
+  text-align: center;
+  height: auto;
+  overflow: hidden;
+  overflow-wrap: break-word;
+
+  @media (min-width: 1024px){
+    max-width: 60%
+  }
+`
+
+export const UppercaseText = styled.span`
+  text-transform: uppercase;
+
+  ${({ title }) => title && css`
+    font-weight: 500;
+    font-size: 16px;
+    opacity: 0.8;
+  `}
+`

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

@@ -0,0 +1,323 @@
+import React, { useState, useEffect } from 'react'
+import { MetaFields as MetaFieldsController, useLanguage } from 'ordering-components-external'
+import { Alert, SpinnerLoader } from '../../Shared'
+import Skeleton from 'react-loading-skeleton'
+import BsTrash from '@meronex/icons/bs/BsTrash'
+import BsPlusSquare from '@meronex/icons/bs/BsPlusSquare'
+// import { Select } from '../../../styles/Select/FirstSelect'
+import { Select } from '../../../styles/Select/DashboardSelect'
+import { useForm } from 'react-hook-form'
+import { JsonEditor as Editor } from 'jsoneditor-react'
+import 'jsoneditor-react/es/editor.min.css'
+import {
+  WrapMetaFields,
+  MetaTitle,
+  MetaContainer,
+  RoundBorder,
+  NoMetaField,
+  MetaAddForm,
+  MetaAddContainer,
+  SkeletonItem,
+  WrapperSpinnerLoader
+} from './styles'
+
+const MetaFieldsUI = (props) => {
+  const {
+    orderId,
+    metaFieldsList,
+    actionState,
+    handleDeleteMetaField,
+    handeAddMetaField
+  } = props
+  const [, t] = useLanguage()
+  const { handleSubmit, register, errors } = useForm()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [selectedMetaKey, setSelectedMetaKey] = useState('text')
+  const [selectedBoolean, setSelectedBoolean] = useState('1')
+  const [metaKey, setMetaKey] = useState('')
+  const [metaValue, setMetaValue] = useState('')
+  const [json, setJson] = useState({})
+  const metaTypeOptions = [
+    {
+      value: 'integer',
+      content: t('INTEGER', 'integer')
+    },
+    {
+      value: 'decimal',
+      content: t('DECIMAL', 'decimal')
+    },
+    {
+      value: 'boolean',
+      content: t('BOOLEAN', 'boolean')
+    },
+    {
+      value: 'text',
+      content: t('TEXT', 'text')
+    },
+    {
+      value: 'json',
+      content: t('JSON', 'json')
+    }
+  ]
+  const booleanOptions = [
+    {
+      value: '1',
+      content: t('TRUE', 'true')
+    },
+    {
+      value: '0',
+      content: t('FALSE', 'false')
+    }
+  ]
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleChangeJson = (v) => {
+    setJson(v)
+  }
+
+  const onSubmit = () => {
+    let value
+    if (selectedMetaKey === 'json') {
+      value = JSON.stringify(json)
+    } else if (selectedMetaKey === 'boolean') {
+      value = selectedBoolean
+    } else {
+      value = metaValue
+    }
+    handeAddMetaField({
+      key: metaKey,
+      order_id: orderId,
+      value: value,
+      value_type: selectedMetaKey
+    })
+  }
+
+  useEffect(() => {
+    if (document.getElementById('meta_key')) {
+      document.getElementById('meta_key').value = ''
+    }
+    if (document.getElementById('meta_value')) {
+      document.getElementById('meta_value').value = ''
+    }
+  }, [selectedMetaKey])
+
+  useEffect(() => {
+    if (!actionState.loading && actionState.result?.error) {
+      setAlertState({
+        open: true,
+        content: actionState.result?.result || [t('ERROR')]
+      })
+    }
+    if (!actionState.loading && !actionState.result?.error) {
+      if (document.getElementById('meta_key')) {
+        document.getElementById('meta_key').value = ''
+      }
+      if (document.getElementById('meta_value')) {
+        document.getElementById('meta_value').value = ''
+      }
+    }
+  }, [actionState])
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(errors).map((error) => error.message)
+      })
+    }
+  }, [errors])
+
+  return (
+    <>
+      {metaFieldsList.loading ? (
+        <WrapMetaFields>
+          {[...Array(10).keys()].map(i => (
+            <SkeletonItem key={i}>
+              <Skeleton width={50} height={30} />
+              <Skeleton width={50} height={30} />
+              <Skeleton width={150} height={30} />
+              <Skeleton width={25} height={30} />
+            </SkeletonItem>
+          ))}
+        </WrapMetaFields>
+      ) : (
+        <WrapMetaFields>
+          <MetaTitle>
+            {t('CUSTOM_FIELDS', 'Custom Fields')}
+          </MetaTitle>
+          {metaFieldsList.metaFields.length > 0 ? (
+            <>
+              {metaFieldsList.metaFields.map(metaField => (
+                <MetaContainer key={metaField.id}>
+                  <div className='meta_type'>
+                    {metaField.value_type}
+                  </div>
+                  <div className='meta_key'>
+                    <RoundBorder>{metaField.key}</RoundBorder>
+                  </div>
+                  <div className='meta_value'>
+                    <RoundBorder>
+                      {metaField.value_type === 'boolean' ? (
+                        <>
+                          {metaField.value === '0' ? t('FALSE', 'fase') : t('TRUE', 'true')}
+                        </>
+                      ) : (
+                        <>
+                          {metaField.value}
+                        </>
+                      )}
+                    </RoundBorder>
+                    <BsTrash onClick={() => handleDeleteMetaField(metaField.id)} />
+                  </div>
+                </MetaContainer>
+              ))}
+            </>
+          ) : (
+            <NoMetaField>{t('NO_METAFIELD', 'No MetaField')}</NoMetaField>
+          )}
+          <MetaAddForm
+            onSubmit={handleSubmit(onSubmit)}
+          >
+            <MetaAddContainer>
+              <div className='meta_type'>
+                <Select
+                  defaultValue={selectedMetaKey || 'text'}
+                  options={metaTypeOptions}
+                  onChange={(key) => setSelectedMetaKey(key)}
+                />
+              </div>
+              <div className='meta_key'>
+                <input
+                  type='text'
+                  name='key'
+                  id='meta_key'
+                  // value={metaKey}
+                  onChange={(e) => setMetaKey(e.target.value)}
+                  placeholder={t('KEY', 'key')}
+                  ref={register({
+                    required: t(
+                      'VALIDATION_ERROR_REQUIRED',
+                      'Key is required'
+                    ).replace('_attribute_', t('KEY', 'Key'))
+                  })}
+                />
+              </div>
+              <div className='meta_value'>
+                {selectedMetaKey === 'text' && (
+                  <input
+                    type='text'
+                    name='value'
+                    id='meta_value'
+                    // value={metaValue}
+                    onChange={(e) => setMetaValue(e.target.value)}
+                    placeholder={t('VALUE', 'Vlue')}
+                    ref={register({
+                      required: t(
+                        'VALIDATION_ERROR_REQUIRED',
+                        'Value is required'
+                      ).replace('_attribute_', t('VALUE', 'Vlue'))
+                    })}
+                  />
+                )}
+                {selectedMetaKey === 'integer' && (
+                  <input
+                    type='text'
+                    name='value'
+                    // value={metaValue}
+                    onChange={(e) => setMetaValue(e.target.value)}
+                    placeholder={t('VALUE', 'Vlue')}
+                    ref={register({
+                      required: t(
+                        'VALIDATION_ERROR_REQUIRED',
+                        'Value is required'
+                      ).replace('_attribute_', t('VALUE', 'Vlue')),
+                      pattern: {
+                        value: /^\d+$/,
+                        message: t(
+                          'VALIDATION_ERROR_INTEGER',
+                          'Invalid integer'
+                        ).replace('_attribute_', t('VALUE', 'Vlue'))
+                      }
+                    })}
+                  />
+                )}
+                {selectedMetaKey === 'decimal' && (
+                  <input
+                    type='text'
+                    name='value'
+                    // value={metaValue}
+                    onChange={(e) => setMetaValue(e.target.value)}
+                    placeholder={t('VALUE', 'Vlue')}
+                    ref={register({
+                      required: t(
+                        'VALIDATION_ERROR_REQUIRED',
+                        'Value is required'
+                      ).replace('_attribute_', t('VALUE', 'Vlue')),
+                      pattern: {
+                        value: /^[+-]?\d*\.?\d+(?:[Ee][+-]?\d+)?$/,
+                        message: t(
+                          'VALIDATION_ERROR_DECIMAL',
+                          'Invalid decimal'
+                        ).replace('_attribute_', t('VALUE', 'Vlue'))
+                      }
+                    })}
+                  />
+                )}
+                {selectedMetaKey === 'boolean' && (
+                  <Select
+                    className='select-input'
+                    defaultValue={selectedBoolean || '1'}
+                    options={booleanOptions}
+                    onChange={(val) => setSelectedBoolean(val)}
+                  />
+                )}
+                {selectedMetaKey === 'json' && (
+                  <div className='json_editor'>
+                    <Editor
+                      value={json}
+                      onChange={(v) => handleChangeJson(v)}
+                    />
+                  </div>
+                )}
+                <button
+                  type='submit'
+                >
+                  <BsPlusSquare />
+                </button>
+              </div>
+            </MetaAddContainer>
+          </MetaAddForm>
+          {actionState.loading && (
+            <WrapperSpinnerLoader>
+              <SpinnerLoader />
+            </WrapperSpinnerLoader>
+          )}
+        </WrapMetaFields>
+      )}
+      <Alert
+        title={t('ERROR')}
+        content={alertState.content}
+        acceptText={t('ACCEPT')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const OrderMetaFields = (props) => {
+  const MetaFieldsProps = {
+    ...props,
+    asDashboard: true,
+    UIComponent: MetaFieldsUI
+  }
+  return <MetaFieldsController {...MetaFieldsProps} />
+}

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

@@ -0,0 +1,123 @@
+import styled from 'styled-components'
+
+export const WrapMetaFields = styled.div`
+  box-sizing: border-box;
+`
+export const MetaTitle = styled.p`
+  font-size: 20px;
+  font-weight: 600;
+  color: ${props => props.theme.colors?.headingColor};
+`
+export const MetaContainer = styled.div`
+  display: flex;
+  margin-bottom: 20px;
+  color: ${props => props.theme.colors?.headingColor};
+
+  .meta_type {
+    width: 25%;
+    font-size: 14px;
+  }
+  .meta_key {
+    width: 25%;
+    padding: 0 10px;
+    box-sizing: border-box;
+  }
+
+  .meta_value {
+    flex: 1;
+    word-break: break-all;
+    display: flex;
+    column-gap: 10px;
+    > div {
+      width: 100%;
+    }
+    svg {
+      font-size: 20px;
+      color: ${props => props.theme.colors?.headingColor};
+      cursor: pointer;
+    }
+  }
+
+`
+export const MetaAddContainer = styled(MetaContainer)`
+  input {
+    border: 1px solid #c2c2c2;
+    border-radius: 5px;
+    padding: 5px 10px;
+    outline: none;
+    font-size: 16px;
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  button {
+    svg {
+      color: ${props => props.theme.colors.primary} !important;
+    }
+  }
+`
+export const RoundBorder = styled.div`
+  border: 1px solid #c2c2c2;
+  border-radius: 5px;
+  padding: 5px 10px;
+  font-size: 14px;
+  color: ${props => props.theme.colors?.headingColor};
+  overflow: hidden;
+`
+export const NoMetaField = styled.p`
+  font-size: 14px;
+`
+export const MetaAddForm = styled.form`
+  button[type='submit'] {
+    outline: none;
+    background: transparent;
+    border: none;
+    padding: 0px;
+    height: fit-content
+  }
+
+  .select-input {
+    width: 100%;
+
+    svg {
+      color: #000;
+    }
+  }
+  
+  .json_editor {
+    width: 100%;
+    height: 300px;
+    > div {
+      height: 100%;
+    }
+    .jsoneditor {
+      border: 1px solid ${props => props.theme.colors.primary};
+      > div.jsoneditor-menu {
+        background-color: ${props => props.theme.colors.primary};
+        border-bottom: 1px solid ${props => props.theme.colors.primary};
+      }
+    }
+    .jsoneditor-search {
+      display: none;
+    }
+  }
+`
+
+export const SkeletonItem = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px 0;
+
+  span {
+    border-radius: 5px;
+  }
+`
+
+export const WrapperSpinnerLoader = styled.div`
+  > div {
+    position: absolute;
+    top: 0px;
+  }
+`

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

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react'
+import {
+  useLanguage,
+  useConfig,
+  useEvent,
+  OrderNotification as OrderNotificationController
+} from 'ordering-components-external'
+import { Modal } from '../../Shared'
+import 'react-toastify/dist/ReactToastify.css'
+import { toast } from 'react-toastify'
+import { useTheme } from 'styled-components'
+
+import {
+  ModalContainer,
+  ToastWrapper
+} from './styles'
+
+toast.configure()
+
+const OrderNotificationUI = (props) => {
+  const { isOnlyDelivery } = props
+
+  const [configState] = useConfig()
+  const [, t] = useLanguage()
+  const [events] = useEvent()
+  const theme = useTheme()
+
+  const [notificationModalOpen, setNotificationModalOpen] = useState(false)
+  const [registerOrderIds, setRegisterOrderIds] = useState([])
+
+  const handleNotification = (order) => {
+    if (isOnlyDelivery && order?.delivery_type !== 1) return
+    const _registerOrderIds = [...registerOrderIds]
+    if (!_registerOrderIds.includes(order.id)) {
+      _registerOrderIds.push(order.id)
+      setRegisterOrderIds(_registerOrderIds)
+      if (configState?.configs?.notification_toast?.value === 'true') {
+        toastNotify(order.id)
+      } else {
+        setNotificationModalOpen(true)
+      }
+    }
+  }
+
+  const handleCloseNotificationModal = () => {
+    setNotificationModalOpen(false)
+    setRegisterOrderIds([])
+  }
+
+  const toastNotify = (orderId) => {
+    const toastConfigure = {
+      position: 'top-right',
+      autoClose: 3000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined
+    }
+    const content = () => {
+      return (
+        <ToastWrapper>
+          <img src={theme.images.logos.isotype} alt='' />
+          <div>
+            <span>{t('WEB_DASHBOARD_APPNAME', 'Ordering Dashboard')}</span>
+            <span>{t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', `${orderId}`)}</span>
+          </div>
+        </ToastWrapper>
+      )
+    }
+    toast(content, toastConfigure)
+    const sound = document.getElementById('notification-sound')
+    sound.muted = false
+    sound.play()
+    setRegisterOrderIds([])
+  }
+
+  useEffect(() => {
+    if (registerOrderIds.length > 0) return
+    setNotificationModalOpen(false)
+  }, [registerOrderIds])
+
+  useEffect(() => {
+    const sound = document.getElementById('notification-sound')
+    const interval = setInterval(() => {
+      if (notificationModalOpen) {
+        sound.muted = false
+        sound.play()
+      }
+    }, 3000)
+    if (!notificationModalOpen) {
+      clearInterval(interval)
+      return
+    }
+    return () => clearInterval(interval)
+  }, [notificationModalOpen])
+
+  useEffect(() => {
+    if (configState.loading) return
+    events.on('order_added', handleNotification)
+    return () => {
+      events.off('order_added', handleNotification)
+    }
+  }, [configState, registerOrderIds])
+
+  return (
+    <>
+      <Modal
+        width='750px'
+        open={notificationModalOpen}
+        onClose={handleCloseNotificationModal}
+      >
+        <ModalContainer>
+          <h1>{t('NEW_ORDRES_RECEIVED', 'New orders have been received!')}</h1>
+          <img src={theme.images.general.registerOrder} alt='' />
+          {registerOrderIds.map((orderId) =>
+            <p key={orderId}>
+              {t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', `${orderId}`)}
+            </p>
+          )}
+        </ModalContainer>
+      </Modal>
+      {/* <audio id='notification-sound' muted>
+        <source src={theme.sounds.notificationOgg} type='audio/ogg' />
+        <source src={theme.sounds.notificationMp3} type='audio/mpeg' />
+      </audio> */}
+    </>
+  )
+}
+
+export const OrderNotification = (props) => {
+  const orderNotificationProps = {
+    ...props,
+    UIComponent: OrderNotificationUI
+  }
+  return (
+    <OrderNotificationController {...orderNotificationProps} />
+  )
+}