ordering-ui-admin-external 1.25.1 → 1.26.1

package/src/components/Orders/OrdersTable/index.js

@@ -11,6 +11,7 @@ import {
 } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { ColumnAllowSettingPopover, Pagination } from '../../Shared'
+import { getCurrenySymbol } from '../../../utils'
 
 import {
   OrdersContainer,
@@ -36,6 +37,7 @@ import {
 
 export const OrdersTable = (props) => {
   const {
+    hidePhoto,
     isSelectedOrders,
     orderList,
     pagination,
@@ -333,7 +335,7 @@ export const OrdersTable = (props) => {
               <tr>
                 {allowColumns && (Object.keys(allowColumns).filter(col => allowColumns[col]?.visable && allowColumns[col]?.order !== 0).length === 0 ?
                   (
-                    <th className='orderPrice' key={`noDragTh-${i}`}>
+                    <th className='orderPrice'>
                       <ColumnAllowSettingPopover
                         allowColumns={allowColumns}
                         optionsDefault={optionsDefault}
@@ -524,7 +526,9 @@ export const OrdersTable = (props) => {
                   {allowColumns?.business?.visable && (
                     <td className='businessInfo'>
                       <BusinessInfo>
-                        <Skeleton width={45} height={45} />
+                        {!hidePhoto && (
+                          <Skeleton width={45} height={45} />
+                        )}
                         <div className='info'>
                           <p className='bold'><Skeleton width={80} /></p>
                           <p><Skeleton width={100} /></p>
@@ -535,7 +539,9 @@ export const OrdersTable = (props) => {
                   {allowColumns?.customer?.visable && (
                     <td className='customerInfo'>
                       <CustomerInfo>
-                        <Skeleton width={45} height={45} />
+                        {!hidePhoto && (
+                          <Skeleton width={45} height={45} />
+                        )}
                         <div className='info'>
                           <p className='bold'><Skeleton width={100} /></p>
                           <p><Skeleton width={100} /></p>
@@ -546,7 +552,9 @@ export const OrdersTable = (props) => {
                   {allowColumns?.driver?.visable && !isSelectedOrders && (
                     <td className='driverInfo'>
                       <DriversInfo className='d-flex align-items-center'>
-                        <Skeleton width={45} height={45} />
+                        {!hidePhoto && (
+                          <Skeleton width={45} height={45} />
+                        )}
                         <Skeleton width={100} style={{ margin: '10px' }} />
                       </DriversInfo>
                     </td>
@@ -708,9 +716,11 @@ export const OrdersTable = (props) => {
                         return (
                           <td className='businessInfo' key={`businessInfo${i}-${index}`}>
                             <BusinessInfo>
-                              <WrapperImage>
-                                <img src={optimizeImage(order.business?.logo || theme.images?.dummies?.businessLogo, 'h_50,c_limit')} loading='lazy' alt='' />
-                              </WrapperImage>
+                              {!hidePhoto && (
+                                <WrapperImage>
+                                  <img src={optimizeImage(order.business?.logo || theme.images?.dummies?.businessLogo, 'h_50,c_limit')} loading='lazy' alt='' />
+                                </WrapperImage>
+                              )}
                               <div className='info'>
                                 <p className='bold'>{order?.business?.name}</p>
                                 <p>{order?.business?.city?.name}</p>
@@ -723,16 +733,18 @@ export const OrdersTable = (props) => {
                         return (
                           <td className='customerInfo' key={`customerInfo${i}-${index}`}>
                             <CustomerInfo>
-                              <WrapperImage>
-                                {order?.customer?.photo ? (
-                                  <img src={optimizeImage(order?.customer?.photo, 'h_50,c_limit')} loading='lazy' alt='' />
-                                ) : (
-                                  <FaUserAlt />
-                                )}
-                                <OrdersCountWrapper isNew={order?.customer?.orders_count === 0}>
-                                  {order?.customer?.orders_count || t('NEW', 'New')}
-                                </OrdersCountWrapper>
-                              </WrapperImage>
+                              {!hidePhoto && (
+                                <WrapperImage>
+                                  {order?.customer?.photo ? (
+                                    <img src={optimizeImage(order?.customer?.photo, 'h_50,c_limit')} loading='lazy' alt='' />
+                                  ) : (
+                                    <FaUserAlt />
+                                  )}
+                                  <OrdersCountWrapper isNew={order?.customer?.orders_count === 0}>
+                                    {order?.customer?.orders_count || t('NEW', 'New')}
+                                  </OrdersCountWrapper>
+                                </WrapperImage>
+                              )}
                               <div className='info'>
                                 <p className='bold'>
                                   {(!order?.customer?.email && !order?.customer?.cellphone && !order?.customer?.name) ? t('GUEST_USER', 'Guest user') : order?.customer?.name}
@@ -748,13 +760,15 @@ export const OrdersTable = (props) => {
                           <td key={`driver${i}-${index}`}>
                             {order?.delivery_type === 1 && (
                               <CustomerInfo>
-                                <WrapperImage>
-                                  {order?.driver?.photo ? (
-                                    <img src={optimizeImage(order?.driver?.photo, 'h_50,c_limit')} loading='lazy' alt='' />
-                                  ) : (
-                                    <FaUserAlt />
-                                  )}
-                                </WrapperImage>
+                                {!hidePhoto && (
+                                  <WrapperImage>
+                                    {order?.driver?.photo ? (
+                                      <img src={optimizeImage(order?.driver?.photo, 'h_50,c_limit')} loading='lazy' alt='' />
+                                    ) : (
+                                      <FaUserAlt />
+                                    )}
+                                  </WrapperImage>
+                                )}
                                 <div className='info'>
                                   {order?.driver ? (
                                     <>
@@ -826,7 +840,7 @@ export const OrdersTable = (props) => {
                           <td className='orderPrice' key={`total${i}-${index}`}>
                             <div className='info'>
                               {allowColumns?.total?.visable && (
-                                <p className='bold'>{parsePrice(order?.summary?.total, { currency: order?.currency })}</p>
+                                <p className='bold'>{parsePrice(order?.summary?.total, { currency: getCurrenySymbol(order?.currency) })}</p>
                               )}
                               {!(order?.status === 1 || order?.status === 11 || order?.status === 2 || order?.status === 5 || order?.status === 6 || order?.status === 10 || order.status === 12) && (
                                 <p>

package/src/components/Orders/ProductItemAccordion/index.js

@@ -95,7 +95,7 @@ export const ProductItemAccordion = (props) => {
   const getFormattedSubOptionName = ({ quantity, name, position, price }) => {
     if (name !== 'No') {
       const pos = position ? `(${position})` : ''
-      return price > 0 ? `${name} ${pos} ${parsePrice(quantity * price, { currencyPosition: 'left' })}` : `${name} ${pos}`
+      return price > 0 ? `${name} ${pos} ${parsePrice(quantity * price, { currency: currency })}` : `${name} ${pos}`
     } else {
       return 'No'
     }
@@ -168,7 +168,7 @@ export const ProductItemAccordion = (props) => {
                 <h3>{product.name}</h3>
                 {windowSize.width <= 410 && (
                   <span>
-                    <p>{parsePrice(getProductPrice(product), { currencyPosition: 'left', ...(currency && { currency }) })}</p>
+                    <p>{parsePrice(getProductPrice(product), { currency: currency })}</p>
                     {isCartProduct && (
                       <div>
                         {onEditProduct && (
@@ -194,7 +194,7 @@ export const ProductItemAccordion = (props) => {
           <ProductPriceSection>
             <ProductPrice>
               <span>
-                {parsePrice(getProductPrice(product), { currencyPosition: 'left', ...(currency && { currency }) })}
+                {parsePrice(getProductPrice(product), { currency: currency })}
               </span>
               {(productInfo().ingredients?.length > 0 || productInfo().options?.length > 0 || product.comment) && (
                 <p>

package/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-admin-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/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/components/Orders/index.js

@@ -1,3 +1,4 @@
+import { AllInOne } from './AllInOne'
 import { Appointments } from './Appointments'
 import { DeliveriesManager } from './DeliveriesManager'
 import { DriversManager } from './DriversManager'
@@ -49,6 +50,7 @@ import { CountryFilter } from './CountryFilter'
 import { OrderToPrint } from './OrderToPrint'
 
 export {
+  AllInOne,
   Appointments,
   DeliveriesManager,
   DriversManager,

package/src/components/Settings/IntegrationListing/Analytics.js

@@ -0,0 +1,127 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useEvent, Settings as SettingsController } from 'ordering-components-admin-external'
+import { GearFill } from 'react-bootstrap-icons'
+import { SettingsDetail } from '../SettingsDetail'
+import Skeleton from 'react-loading-skeleton'
+import { useHistory, useLocation } from 'react-router-dom'
+import {
+  CategorySection,
+  SettingList,
+  SettingItemContainer,
+  IconWrapper,
+  SettingItemContent
+} from './styles'
+
+const AnalyticsUI = (props) => {
+  const {
+    categoryList
+  } = props
+
+  const [, t] = useLanguage()
+  const [events] = useEvent()
+
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
+
+  const allowOptions = ['facebook_pixel', 'segment', 'google']
+
+  const [selectedCategory, setSelectedCategory] = useState(null)
+  const [showDetail, setShowDetail] = useState(false)
+
+  const handleBackRedirect = () => {
+    setShowDetail(false)
+    setSelectedCategory(null)
+    history.replace(`${location.pathname}`)
+  }
+
+  const onBasicSettingsRedirect = ({ category }) => {
+    if (!category) {
+      return events.emit('go_to_page', { page: 'integrations', replace: true })
+    }
+    if (category) {
+      events.emit('go_to_page', {
+        page: 'integrations',
+        search: `?category=${category}`,
+        replace: true
+      })
+    }
+  }
+
+  const handleOpenSetting = (category, initialRender) => {
+    setSelectedCategory(category)
+    setShowDetail(true)
+    if (!initialRender) {
+      history.replace(`${location.pathname}?category=${category?.id}`)
+    }
+  }
+
+  useEffect(() => {
+    if (categoryList.loading) return
+    const categoryId = query.get('category')
+    if (categoryId) {
+      const categorySelected = categoryList?.categories.find(item => item?.id === parseInt(categoryId))
+      if (categorySelected) {
+        handleOpenSetting(categorySelected, true)
+      }
+    }
+  }, [categoryList.loading])
+
+  return (
+    <CategorySection>
+      <h2>{t('ANALYTICS', 'Analytics')}</h2>
+      {!categoryList?.loading && (
+        <SettingList>
+          {categoryList?.categories?.filter(item => allowOptions.includes(item.key)).map(setting => (
+            <SettingItemContainer
+              key={setting?.id}
+              onClick={() => handleOpenSetting(setting)}
+            >
+              <IconWrapper>
+                <GearFill />
+              </IconWrapper>
+              <SettingItemContent>
+                <h5>{setting?.name}</h5>
+                <p>{setting?.description}</p>
+              </SettingItemContent>
+            </SettingItemContainer>
+          ))}
+        </SettingList>
+      )}
+      {categoryList?.loading && (
+        <SettingList>
+          {[...Array(2).keys()].map(i => (
+            <SettingItemContainer
+              key={i}
+            >
+              <IconWrapper>
+                <Skeleton width={24} height={24} />
+              </IconWrapper>
+              <SettingItemContent>
+                <h5><Skeleton height={18} width={120} /></h5>
+                <p><Skeleton height={13} count={2} /></p>
+              </SettingItemContent>
+            </SettingItemContainer>
+          ))}
+        </SettingList>
+      )}
+      {showDetail && (
+        <SettingsDetail
+          {...props}
+          open={showDetail}
+          category={selectedCategory}
+          onClose={handleBackRedirect}
+          onBasicSettingsRedirect={onBasicSettingsRedirect}
+        />
+      )}
+    </CategorySection>
+  )
+}
+
+export const Analytics = (props) => {
+  const paymentGatewayProps = {
+    ...props,
+    UIComponent: AnalyticsUI,
+    settingsType: 'key_operation'
+  }
+  return <SettingsController {...paymentGatewayProps} />
+}