ordering-ui-admin-external 1.43.54 → 1.43.56

package/src/components/Delivery/DriversAdvancedLogs/styles.js

@@ -0,0 +1,186 @@
+import styled, { css } from 'styled-components'
+
+export const DriversAdvacedLogsContainer = styled.div`
+  height: calc(100% - 180px);
+  ${({ disabled }) => disabled && css`
+    opacity: 0.7;
+    pointer-events: none;
+  `}
+`
+
+export const TableWrapper = styled.div`
+  overflow: auto;
+  height: 100%;
+`
+
+export const SeeChanges = styled.span`
+  color: ${props => props.theme.colors.primary};
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+export const Table = styled.table`
+  width: 100%;
+  min-width: 1000px;
+  color: ${props => props.theme.colors?.headingColor};
+
+  thead {
+    tr {
+      border-bottom: solid 1px ${props => props.theme.colors.disabled};
+      th {
+        padding: 13px 0;
+        font-size: 12px;
+        &:first-child {
+          width: 10%;
+          ${props => props.theme?.rtl ? css`
+            padding-left: 15px;
+          ` : css`
+            padding-right: 15px;
+          `}
+          box-sizing: border-box;
+        }
+        &:nth-child(2) {
+          width: 10%;
+          padding-left: 15px;
+          padding-right: 15px;
+        }
+        &:nth-child(3) {
+          width: 15%;
+          padding-left: 15px;
+          padding-right: 15px;
+          box-sizing: border-box;
+        }
+        &:nth-child(4) {
+          ${props => props.theme?.rtl ? css`
+            padding-right: 15px;
+          ` : css`
+            padding-left: 15px;
+          `}
+          box-sizing: border-box;
+        }
+      }
+    }
+  }
+
+  > tbody {
+    border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+    td {
+      padding: 13px 0;
+      font-size: 12px;
+      &:first-child {
+        width: 10%;
+        ${props => props.theme?.rtl ? css`
+          padding-left: 15px;
+        ` : css`
+          padding-right: 15px;
+        `}
+        box-sizing: border-box;
+      }
+      &:nth-child(2) {
+        width: 10%;
+        padding-left: 15px;
+        padding-right: 15px;
+      }
+      &:nth-child(3) {
+        width: 15%;
+        padding-left: 15px;
+        padding-right: 15px;
+      }
+      &:nth-child(4) {
+        ${props => props.theme?.rtl ? css`
+          padding-right: 15px;
+        ` : css`
+          padding-left: 15px;
+        `}
+        box-sizing: border-box;
+      }
+    }
+  }
+`
+
+export const UserInfoContainer = styled.div`
+  p {
+    color: ${props => props.theme.colors.lightGray};
+    margin: 0px;
+    font-size: 12px;
+    &:first-child {
+      color: ${props => props.theme.colors.headingColor};
+      font-weight: 500;
+    }
+  }
+`
+
+export const DateTimeWrapper = styled.div`
+  white-space: nowrap;
+  font-size: 12px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+
+  ${props => props.theme?.rtl ? css`
+    padding-left: 15px;
+    margin-left: 15px;
+    border-left: 1px solid ${props => props.theme.colors.borderColor};
+  ` : css`
+    padding-right: 15px;
+    margin-right: 15px;
+    border-right: 1px solid ${props => props.theme.colors.borderColor};
+  `}
+`
+
+export const NoData = styled.div`
+  font-size: 16px;
+`
+export const WrapperPagination = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 20px 0;
+`
+
+export const DataListTable = styled.table`
+  width: 100%;
+  border-right: 1px solid ${props => props.theme.colors.borderColor};
+
+  tbody {
+    border-bottom: none;
+    td {
+      box-sizing: border-box;
+      &:first-child {
+        width: 50% !important;
+        padding-left: 15px;
+        padding-right: 15px;
+        box-sizing: border-box;
+      }
+      &:not(:first-child) {
+        width: initial !important;
+      }
+      white-space: nowrap;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      ${props => props.theme?.rtl ? css`
+        padding-left: 15px;
+      ` : css`
+        padding-right: 15px;
+      `}
+    }
+  }
+`
+
+export const EventTypeContainer = styled.div`
+  white-space: nowrap;
+  font-size: 12px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-left: 15px;
+  margin-right: 10px;
+  border-right: 1px solid ${props => props.theme.colors.borderColor};
+  border-left: 1px solid ${props => props.theme.colors.borderColor};
+  p{
+    margin-bottom: 0px;
+  }
+`

package/src/components/Delivery/UserDetails/index.js

@@ -13,6 +13,7 @@ import { UserMetaFields } from '../../Users'
 import { DriversLogs } from '../DriversLogs'
 import { DriversGroupLogsUI } from '../DriversGroupLogs'
 import { DriverGroupSetting } from '../DriverGroupSetting'
+import { DriversAdvancedLogs } from '../DriversAdvancedLogs'
 import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
 import { Switch, Button, IconButton } from '../../../styles'
 import { ActionsForm } from '../UserFormDetails/styles'
@@ -207,6 +208,12 @@ export const UserDetailsUI = (props) => {
               UIComponent={DriversGroupLogsUI}
             />
           )}
+          {currentMenuSelected === 'advanced_logs' && (
+            <DriversAdvancedLogs
+              userId={userState.user?.id}
+              UIComponent={DriversGroupLogsUI}
+            />
+          )}
           {currentMenuSelected === 'orders' && (
             <OrdersManager
               isSelectedOrders

package/src/components/Delivery/UserDetailsMenu/index.js

@@ -21,6 +21,7 @@ export const UserDetailsMenu = (props) => {
     { key: 'saved_places', content: t('SAVED_PLACES', 'Saved places') },
     { key: 'schedule', content: t('SCHEDULE', 'Schedule') },
     { key: 'logs', content: t('LOGS', 'Logs') },
+    { key: 'advanced_logs', content: t('ADVANCED_LOGS', 'Advanced logs') },
     { key: 'push_tokens', content: t('PUSH_TOKENS', 'Push tokens') }
     // { key: 'metafields', content: t('METAFIELDS', 'Metafields') },
     // { key: 'personalization', content: t('PERSONALIZATION', 'Personalization') }

package/src/components/Delivery/index.js

@@ -17,6 +17,7 @@ import { DriversGroupBusinesses } from './DriversGroupBusinesses'
 import { DriversGroupPaymethods } from './DriversGroupPaymethods'
 import { DriversGroupLogistics } from './DriversGroupLogistics'
 import { DriversGroupLogs } from './DriversGroupLogs'
+import { DriversAdvancedLogs } from './DriversAdvancedLogs'
 import { DriversGroupCompanies } from './DriversGroupCompanies'
 import { DriversGroupDrivers } from './DriversGroupDrivers'
 import { DriversGroupOrders } from './DriversGroupOrders'
@@ -46,6 +47,7 @@ export {
   DriversGroupPaymethods,
   DriversGroupLogistics,
   DriversGroupLogs,
+  DriversAdvancedLogs,
   DriversGroupCompanies,
   DriversGroupDrivers,
   DriversGroupOrders,

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, ExportCSV as ExportCSVController } from 'ordering-components-admin-external'
-import { Modal, SpinnerLoader } from '../../Shared'
+import { Alert, Modal, SpinnerLoader } from '../../Shared'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { Button } from '../../../styles'
 import { Download } from 'react-bootstrap-icons'
@@ -20,6 +20,7 @@ const ExportCSVUI = (props) => {
   const { width } = useWindowSize()
   const [popoverOpen, setPopoverOpen] = useState(false)
   const [modalOpen, setModalOpen] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const handleExportAll = () => {
     setPopoverOpen(false)
@@ -35,6 +36,13 @@ const ExportCSVUI = (props) => {
     setPopoverOpen(false)
   }
 
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
   useEffect(() => {
     if (!popoverOpen) return
     document.addEventListener('click', closePopover)
@@ -42,6 +50,12 @@ const ExportCSVUI = (props) => {
   }, [popoverOpen])
 
   useEffect(() => {
+    if (actionStatus?.error) {
+      setAlertState({
+        open: true,
+        content: actionStatus?.error
+      })
+    }
     if (!actionStatus?.result || actionStatus?.error) return
     setModalOpen(true)
   }, [actionStatus])
@@ -59,7 +73,7 @@ const ExportCSVUI = (props) => {
           <Download />
         </Button>
         {popoverOpen && (
-          <PopoverContainer>
+          <PopoverContainer disabled={actionStatus.loading}>
             <Item onClick={() => handleExportAll()}>
               {t('EXPORT_ALL', 'Export all')}
             </Item>
@@ -92,6 +106,15 @@ const ExportCSVUI = (props) => {
           </Button>
         </ExportCSVResult>
       </Modal>
+      <Alert
+        title={t('CSV_ORDERS', 'Csv orders')}
+        content={alertState?.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState?.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
     </>
   )
 }

package/src/components/Orders/OrdersExportCSV/styles.js

@@ -26,13 +26,17 @@ export const PopoverContainer = styled.div`
   padding: 5px 0;
   background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
   box-shadow: 0 6px 12px rgba(0,0,0,.175);
-  z-index: 110;
+  z-index: 1100;
 
   ${props => props.theme?.rtl ? css`
     left: 14px;
   ` : css`
     right: 14px;
   `}
+
+  ${({ disabled }) => disabled && css`
+    pointer-events: none;
+  `}
 `
 
 export const Item = styled.div`

package/src/index.js

@@ -135,6 +135,7 @@ import {
   DriversGroupPaymethods,
   DriversGroupLogistics,
   DriversGroupLogs,
+  DriversAdvancedLogs,
   DriversGroupCompanies,
   DriversGroupDrivers,
   DriversGroupOrders,
@@ -557,6 +558,7 @@ export {
   DriversGroupPaymethods,
   DriversGroupLogistics,
   DriversGroupLogs,
+  DriversAdvancedLogs,
   DriversGroupCompanies,
   DriversGroupDrivers,
   DriversGroupOrders,