ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, GoogleMapsApiKeySetting as GoogleMapsApiKeySettingController } from 'ordering-components-external'
+import { useForm } from 'react-hook-form'
+import { Modal, Alert } from '../../Shared'
+import { Button, Input } from '../../../styles'
+import {
+  Container,
+  ModalBody
+} from './style'
+
+const GoogleMapsApiKeySettingUI = (props) => {
+  const {
+    actionState,
+    handleSaveApiKey
+  } = props
+
+  const [, t] = useLanguage()
+  const [openModal, setOpenModal] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const { handleSubmit, register, errors } = useForm()
+
+  const onSubmit = (values) => {
+    handleSaveApiKey(values.api_key)
+  }
+
+  useEffect(() => {
+    if (!actionState.error) return
+    setAlertState({
+      open: true,
+      content: actionState.error
+    })
+  }, [actionState.error])
+
+  return (
+    <Container>
+      <Button
+        borderRadius='8px'
+        color='lightPrimary'
+        onClick={() => setOpenModal(true)}
+      >
+        {t('INSTRUCTIONS_HERE', 'Instructions here')}
+      </Button>
+      <Modal
+        width='700px'
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+      >
+        <ModalBody onSubmit={handleSubmit(onSubmit)}>
+          <h2>{t('GOOGLE_MAPS_API', 'Google Maps API Key')}</h2>
+          <p>{t('GOOGLE_MAPS_API_SETUP_DESCRIPTION', 'Set up the google map API of your platform.')}</p>
+          <Input
+            placeholder={t('ADD_API_KEY', 'Add API Key')}
+            name='api_key'
+            ref={register({
+              required: t(
+                'VALIDATION_ERROR_REQUIRED',
+                'Value is required'
+              ).replace('_attribute_', t('API_KEY', 'Api Key'))
+            })}
+            autoComplete='off'
+          />
+          {errors?.api_key?.message && (
+            <p className='error'>{errors.api_key.message}</p>
+          )}
+          <Button
+            color='primary'
+            borderRadius='8px'
+            disabled={actionState.loading}
+          >
+            {t('SAVE', 'Save')}
+          </Button>
+        </ModalBody>
+      </Modal>
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+    </Container>
+  )
+}
+
+export const GoogleMapsApiKeySettingButton = (props) => {
+  const apiKeySettingProps = {
+    ...props,
+    UIComponent: GoogleMapsApiKeySettingUI
+  }
+  return <GoogleMapsApiKeySettingController {...apiKeySettingProps} />
+}

package/src/themes/callcenterOriginal/src/components/Orders/GoogleMapsApiKeySettingButton/style.js

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  > button {
+    height: 44px;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+    ` : css`
+      margin-right: 8px;
+    `}
+  }
+`
+export const ModalBody = styled.form`
+  display: flex;
+  flex-direction: column;
+
+  h2 {
+    font-size: 20px;
+    font-weight: 700;
+    margin-top: 0;
+    margin-bottom: 12px;
+  }
+  p {
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 38px;
+
+    &.error {
+      color: ${props => props.theme.colors.danger};
+      margin-top: 10px;
+    }
+  }
+  button {
+    height: 44px;
+    width: fit-content;
+    margin-top: 60px;
+  }
+`

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

@@ -0,0 +1,160 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useLanguage, useUtils } from 'ordering-components-external'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
+import { useTheme } from 'styled-components'
+import {
+  InfoContainer,
+  TextContainer,
+  Text,
+  WrapperMapMarker,
+  MapMarkerImg
+} from './styles'
+
+export const InterActOrderMarker = (props) => {
+  const {
+    image,
+    customer,
+    business,
+    driver
+  } = props
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+
+  const theme = useTheme()
+  const [infoShow, setInfoShow] = useState(false)
+  const infoRef = useRef(null)
+  const [infoTop, setInfoTop] = useState('0px')
+
+  useEffect(() => {
+    if (!infoShow) return
+    setInfoTop(`-${infoRef.current.scrollHeight + 55}px`)
+  }, [infoShow])
+
+  return (
+    <>
+      {infoShow && (
+        <InfoContainer ref={infoRef} style={{ transform: `translate(-50%, ${infoTop})` }}>
+          {business && (
+            <>
+              <TextContainer>
+                <Text fontWeight='bold'>
+                  {t('NAME', 'Name')}:
+                </Text>
+                <Text>{business.name}</Text>
+              </TextContainer>
+              {business?.email && (
+                <TextContainer>
+                  <Text fontWeight='bold'>
+                    {t('EMAIL', 'Email')}:
+                  </Text>
+                  <Text>{business.email}</Text>
+                </TextContainer>
+              )}
+              {business?.phone && (
+                <TextContainer>
+                  <Text fontWeight='bold'>
+                    {t('PHONE', 'Phone')}:
+                  </Text>
+                  <Text>{business.phone}</Text>
+                </TextContainer>
+              )}
+            </>
+          )}
+          {customer && (
+            <>
+              <TextContainer>
+                <Text fontWeight='bold'>
+                  {t('NAME', 'Name')}:
+                </Text>
+                <Text>{customer.name} {customer.lastname}</Text>
+              </TextContainer>
+              {customer?.order_id && (
+                <TextContainer>
+                  <Text fontWeight='bold'>
+                    {t('INVOICE_ORDER_NO', 'Order No')}
+                  </Text>
+                  <Text>{customer.order_id}</Text>
+                </TextContainer>
+              )}
+              {customer?.email && (
+                <TextContainer>
+                  <Text fontWeight='bold'>
+                    {t('EMAIL', 'Email')}:
+                  </Text>
+                  <Text>{customer.email}</Text>
+                </TextContainer>
+              )}
+              {customer?.cellphone && (
+                <TextContainer>
+                  <Text fontWeight='bold'>
+                    {t('CELLPHONE', 'Cellphone')}:
+                  </Text>
+                  <Text>{customer.cellphone}</Text>
+                </TextContainer>
+              )}
+            </>
+          )}
+          {driver && (
+            <>
+              <TextContainer>
+                <Text fontWeight='bold'>
+                  {t('NAME', 'Name')}:
+                </Text>
+                <Text>{driver.name} {driver.lastname}</Text>
+              </TextContainer>
+              {driver?.email && (
+                <TextContainer>
+                  <Text fontWeight='bold'>
+                    {t('EMAIL', 'Email')}:
+                  </Text>
+                  <Text>{driver.email}</Text>
+                </TextContainer>
+              )}
+              {driver?.cellphone && (
+                <TextContainer>
+                  <Text fontWeight='bold'>
+                    {t('CELLPHONE', 'Cellphone')}:
+                  </Text>
+                  <Text>{driver.cellphone}</Text>
+                </TextContainer>
+              )}
+              {driver?.drivergroups?.length > 0 && (
+                <TextContainer>
+                  <Text fontWeight='bold'>
+                    {t('DRIVER_GROUP', 'Driver group')}:
+                  </Text>
+                  {driver.drivergroups.map(group => (
+                    <Text key={group.id}>{group.name},</Text>
+                  ))}
+                </TextContainer>
+              )}
+              {driver?.last_location_at && (
+                <TextContainer>
+                  <Text fontWeight='bold'>
+                    {t('LAST_LOCATION', 'Last location')}:
+                  </Text>
+                  <Text>{parseDate(driver.last_location_at, { utc: false })}</Text>
+                </TextContainer>
+              )}
+            </>
+          )}
+        </InfoContainer>
+      )}
+      <WrapperMapMarker
+        onMouseOver={() => setInfoShow(true)}
+        onMouseLeave={() => setInfoShow(false)}
+      >
+        {image ? (
+          <MapMarkerImg bgimage={image} />
+        ) : (
+          <>
+            {customer && <FaUserAlt />}
+            {driver && (
+              <MapMarkerImg bgimage={theme?.images?.icons?.noDriver} />
+            )}
+          </>
+        )}
+      </WrapperMapMarker>
+    </>
+  )
+}

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

@@ -0,0 +1,84 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const WrapperMapMarker = styled.div`
+  width: 50px;
+  height: 50px;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  border: 3px solid ${props => props.theme.colors.primary};
+  border-radius: 100%;
+  position: absolute;
+  transform: translate(-50%, -100%);
+
+  svg {
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    padding: 3px;
+    box-sizing: border-box;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+    z-index: 1;
+  }
+
+  &:after {
+    content:'';
+    position: absolute;
+    top: 77%;
+    left: 50%;
+    margin-left: -22px;
+    width: 0;
+    height: 0;
+    border-top: solid 22px ${props => props.theme.colors.primary};
+    border-left: solid 22px transparent;
+    border-right: solid 22px transparent;
+    z-index: -1;
+  }
+`
+const MapMarkerImgStyled = styled.div`
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 100%;
+  z-index: 100;
+`
+export const MapMarkerImg = (props) => {
+  return (
+    <MapMarkerImgStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </MapMarkerImgStyled>
+  )
+}
+
+export const InfoContainer = styled.div`
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  position: absolute;
+  border-radius: 5px;
+  padding: 10px;
+  row-gap: 5px;
+  z-index: 200;
+  box-shadow: 0px 2px 2px #00000029;
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+`
+export const TextContainer = styled.div`
+  display: flex;
+  column-gap: 10px;
+`
+export const Text = styled.span`
+  ${({ fontWeight }) => fontWeight && css`
+    font-weight: 600;
+  `}
+  font-size: 14px;
+  white-space: nowrap;
+`

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

@@ -0,0 +1,72 @@
+import React from 'react'
+import { useLanguage, useUtils, Logistics as LogisticsController } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import {
+  WraaperLogs,
+  BubbleConsole,
+  TimeofSent,
+  Reason,
+  SkeletonHitory
+} from './styles'
+
+const LogisticsUI = (props) => {
+  const {
+    logisticList,
+    parseLog
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ getTimeAgo, parseDate }] = useUtils()
+
+  return (
+    <>
+      {logisticList.loading ? (
+        <>
+          {[...Array(3)].map((item, i) => (
+            <SkeletonHitory key={i}>
+              <Skeleton width={400} height={50} style={{ marginBottom: '20px' }} />
+              <Skeleton width={300} height={50} style={{ marginBottom: '20px' }} />
+              <Skeleton width={380} height={50} style={{ marginBottom: '20px' }} />
+              <Skeleton width={200} height={50} style={{ marginBottom: '20px' }} />
+              <Skeleton width={450} height={50} style={{ marginBottom: '20px' }} />
+            </SkeletonHitory>
+          ))}
+        </>
+      ) : (
+        <WraaperLogs>
+          {logisticList.logs.map((log) => (
+            <BubbleConsole key={log.id}>
+              <div dangerouslySetInnerHTML={{
+                __html: parseLog(log)
+              }}
+              />
+              {log.event === 'logistic_expired' && (
+                <Reason>{t('REASON', 'Reason')}: {log?.data?.reason}</Reason>
+              )}
+              <OverlayTrigger
+                placement='top'
+                overlay={
+                  <Tooltip>
+                    {parseDate(log.updated_at)}
+                  </Tooltip>
+                }
+              >
+                <TimeofSent>{getTimeAgo(log.updated_at)}</TimeofSent>
+              </OverlayTrigger>
+            </BubbleConsole>
+          ))}
+        </WraaperLogs>
+      )}
+    </>
+  )
+}
+
+export const Logistics = (props) => {
+  const logisticsProps = {
+    ...props,
+    orderId: props.orderId,
+    UIComponent: LogisticsUI
+  }
+  return <LogisticsController {...logisticsProps} />
+}

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

@@ -0,0 +1,56 @@
+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;
+`
+export const BubbleConsole = styled.div`
+  border-radius: 5px;
+  padding: 10px 25px;
+  margin-bottom: 20px;
+  background: ${props => props.theme.colors.secundary};
+  text-align: center;
+  height: auto;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  max-width: 80%;
+`
+export const TimeofSent = styled.p`
+  position: relative;
+  font-size: 0.8em;
+  margin-block-start: 0.2em;
+  margin-block-end: initial;
+  width: fit-content;
+  cursor: pointer;
+  font-weight: 600;
+  
+  ${props => props.theme?.rtl ? css`
+    margin-right: auto;
+  ` : css`
+    margin-left: auto;
+  `}
+`
+export const Reason = styled.p`
+  text-align: center;
+  margin: 0px;
+`
+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;
+    }
+  }
+`