ordering-ui-admin-external 1.42.14 → 1.42.16

package/index-template.js

@@ -8,6 +8,7 @@ import { Integrations } from '@sentry/tracing'
 import { ThemeProvider } from './src/contexts/ThemeContext'
 import { ConfigFileContext } from './src/contexts/ConfigFileContext'
 import { InfoShareProvider } from './src/contexts/InfoShareContext'
+import { ProjectProvider } from './src/contexts/ProjectContext'
 import { Toast } from './src/styles/Toast'
 import theme from './template/theme.json'
 import settings from './template/config.json'
@@ -656,8 +657,10 @@ const RouteApp = () => {
         <AutologinParams configFile={configFile}>
           <OrderingProvider Alert={Alert}>
             <InfoShareProvider>
-              <Router />
-              <Toast />
+              <ProjectProvider>
+                <Router />
+                <Toast />
+              </ProjectProvider>
             </InfoShareProvider>
           </OrderingProvider>
         </AutologinParams>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.42.14",
+  "version": "1.42.16",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.42.9",
+    "ordering-components-admin-external": "1.42.11",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

package/src/components/Banners/index.js

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from 'react'
+import { useLanguage, useSession } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { ExclamationTriangle } from 'react-bootstrap-icons'
+
+import {
+  Container,
+  Banner,
+  Icon,
+  Content,
+  ButtonWrap
+} from './styles'
+import { Button } from '../../styles'
+
+export const Banners = (props) => {
+  const { type, urlToGo, setLayoutPT } = props
+
+  const fixedRef = useRef(null)
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ user }] = useSession()
+
+  const handleClick = () => {
+    if (!urlToGo) return
+    window.open(urlToGo, '_blank').focus()
+  }
+
+  useEffect(() => {
+    if (fixedRef.current) {
+      setLayoutPT(fixedRef.current.offsetHeight)
+    }
+  })
+
+  return (
+    type === 'past_due' ? (
+      <Container ref={fixedRef}>
+        <Banner>
+          <Icon>
+            <ExclamationTriangle
+              size={26}
+              color={theme.colors.warning}
+            />
+          </Icon>
+          <Content>
+            <h1>{t('PAST_DUE_TITLE_BANNER', 'Hey :user:, we have a problem, your account is past due.').replace(':user:', user?.name)}</h1>
+            <p>{t('PAST_DUE_SUBTITLE_BANNER', 'There appears to be an issue with your payment. Kindly update the card on file and complete your payment.')}</p>
+          </Content>
+          <ButtonWrap>
+            <Button
+              color='warning'
+              style={{
+                borderRadius: 8,
+                padding: '5px 30px',
+                maxHeight: '40px'
+              }}
+              onClick={() => handleClick()}
+            >
+              {t('PAY_NOW', 'Pay now')}
+            </Button>
+          </ButtonWrap>
+        </Banner>
+      </Container>
+    ) : null
+  )
+}
+
+Banners.defaultProps = {
+  type: 'past_due'
+}

package/src/components/Banners/styles.js

@@ -0,0 +1,68 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+`
+
+export const Banner = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  background-color: ${props => props.theme.colors.warning100};
+  padding: 20px;
+  border-radius: 8px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    height: auto;
+  }
+`
+
+export const Icon = styled.div`
+  flex: 1;
+  max-width: 5%;
+  text-align: center;
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+    margin-bottom: 10px;
+  }
+`
+
+export const Content = styled.div`
+  flex: 2;
+  max-width: 80%;
+  text-align: left;
+
+  h1, p {
+    font-size: 1rem;
+    margin: 0;
+    padding: 0;
+  }
+
+  h1 {
+    font-weight: bold;
+  }
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+`
+
+export const ButtonWrap = styled.div`
+  flex: 1;
+  max-width: 15%;
+  text-align: center;
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+    margin-bottom: 10px;
+  }
+`

package/src/components/Home/HomePage/index.js

@@ -4,6 +4,7 @@ import { Line } from 'react-chartjs-2'
 import moment from 'moment'
 import { IconButton, Button } from '../../../styles/Buttons'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { useProjectState } from '../../../contexts/ProjectContext'
 import Skeleton from 'react-loading-skeleton'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { useTheme } from 'styled-components'
@@ -51,7 +52,6 @@ import {
 
 const HomeUI = (props) => {
   const {
-    projectStatus,
     ordersList,
     todaySalelsList,
     monthSalesList,
@@ -65,6 +65,7 @@ const HomeUI = (props) => {
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [timeAxes, setTimeAxes] = useState([])
   const [events] = useEvent()
+  const [projectStatus] = useProjectState()
   const { width } = useWindowSize()
   const [{ parsePrice }] = useUtils()
   const [sessionState] = useSession()

package/src/components/Layout/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 export const Layout = (props) => {
   return (
-    <div className='d-flex' style={{ maxWidth: '100vw', width: '100vw' }}>
+    <div className='d-flex' style={{ maxWidth: '100vw', width: '100vw', paddingTop: props.pt ?? 0 }}>
       {props.children}
     </div>
   )

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

@@ -32,7 +32,7 @@ export const DeliveryDashboard = (props) => {
   const [{ configs }] = useConfig()
 
   if ((configs?.optimize_order_data && (configs?.optimize_order_data?.value === '1'))) {
-    ordersDashboardListProps.propsToFetch = ['app_id', 'business', 'business_id', 'created_at', 'customer', 'customer_id', 'delivery_type', 'driver_group_id', 'driver_id', 'driver', 'delivery_datetime', 'delivery_datetime_utc', 'external_id', 'eta_time', 'id', 'logistic_status', 'logistic_attemps', 'uuid', 'order_group', 'order_group_id', 'priority', 'summary', 'status', 'time_status', 'total']
+    ordersDashboardListProps.propsToFetch = ['app_id', 'business', 'business_id', 'created_at', 'customer', 'customer_id', 'delivery_type', 'driver_group_id', 'driver_id', 'driver', 'delivery_datetime', 'delivery_datetime_utc', 'external_id', 'eta_time', 'id', 'logistic_status', 'logistic_attemps', 'uuid', 'order_group', 'order_group_id', 'priority', 'summary', 'status', 'time_status', 'total', 'metadata']
   }
 
   const [interActionMapOrder, setInterActionMapOrder] = useState(null)

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

@@ -256,6 +256,15 @@ export const OrdersCards = (props) => {
                       <p className={order?.time_status}>{displayDelayedTime(order)}</p>
                     </Timer>
                   )}
+                  { order?.codigoPod && (
+                    <div style={{paddingTop: 50}}>
+                      <p>
+                        {
+                          `${t('PODS', 'Pod')}: ${order?.codigoPod}` 
+                        }
+                      </p>
+                    </div>
+                  )}
                 </CardHeading>
                 {isMessagesView && order?.unread_count > 0 && (
                   <UnreadMessageCounter>

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

@@ -11,7 +11,7 @@ export const OrdersDashboard = (props) => {
     ...props
   }
   if ((configs?.optimize_order_data && (configs?.optimize_order_data?.value === '1'))) {
-    ordersDashboardListProps.propsToFetch = ['app_id', 'business', 'business_id', 'created_at', 'customer', 'customer_id', 'delivery_type', 'driver_group_id', 'driver_id', 'driver', 'delivery_datetime', 'delivery_datetime_utc', 'external_id', 'eta_time', 'id', 'logistic_status', 'logistic_attemps', 'uuid', 'order_group', 'order_group_id', 'priority', 'summary', 'status', 'time_status', 'total', 'driver_group_business']
+    ordersDashboardListProps.propsToFetch = ['app_id', 'business', 'business_id', 'created_at', 'customer', 'customer_id', 'delivery_type', 'driver_group_id', 'driver_id', 'driver', 'delivery_datetime', 'delivery_datetime_utc', 'external_id', 'eta_time', 'id', 'logistic_status', 'logistic_attemps', 'uuid', 'order_group', 'order_group_id', 'priority', 'summary', 'status', 'time_status', 'total', 'driver_group_business', 'metadata']
   }
   return (
     <OrdersManageContainer>

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BusinessInfo, CheckBox, CustomerInfo, LogisticStatusDot, OrderNumberContainer, OrdersCountWrapper, PriorityDot, StatusInfo, Timer, Timestatus, WrapperImage, InfoWrapper, ChannelInfo, EtaInfo } from './styles'
+import { BusinessInfo, CheckBox, CustomerInfo, LogisticStatusDot, OrderNumberContainer, OrdersCountWrapper, PriorityDot, StatusInfo, Timer, Timestatus, WrapperImage, InfoWrapper, ChannelInfo, EtaInfo, PodInfo } from './styles'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
 import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import { useLanguage, useUtils } from 'ordering-components-admin-external'
@@ -287,11 +287,20 @@ export const Order = React.memo((props) => {
             return (
               <td className='channelInfo' key={`channelInfo${i}-${index}`}>
                 <ChannelInfo>
-                  <p className='bold'>{order.app_id}</p>
+                  <p className='bold'>{order?.app_id}</p>
                 </ChannelInfo>
               </td>
             )
           }
+          if (column === 'pod') {
+            return (
+              <td className='podInfo' key={`podInfo${i}-${index}`}>
+                <PodInfo>
+                  <p className='bold'>{order?.codigoPod}</p>
+                </PodInfo>
+              </td>
+            )
+          }
           if (column === 'total') {
             return (
               <td className='orderPrice' key={`total${i}-${index}`}>

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

@@ -146,6 +146,10 @@ export const OrdersTable = memo((props) => {
     {
       value: 'channel',
       content: t('CHANNEL', 'Channel')
+    },
+    {
+      value: 'pod',
+      content: t('PODS', 'Pod')
     }
   ]
 
@@ -263,11 +267,13 @@ export const OrdersTable = memo((props) => {
 
   const handleChangeAllowColumns = (type) => {
     let _column = {}
-    if (type === 'channel'){
-      _column = { visable:allowColumns[type].visable ,title: t('CHANNEL', 'Channel'), className: 'channelInfo', draggable: true, colSpan: 1, order: 12 }
-     }else{
+    if (type === 'channel') {
+      _column = { visable: allowColumns[type]?.visable ?? false, title: t('CHANNEL', 'Channel'), className: 'channelInfo', draggable: true, colSpan: 1, order: 12 }
+     } else if (type === 'pod') {
+      _column = { visable: allowColumns[type]?.visable ?? false, title: t('PODS', 'Pod'), className: 'podInfo', draggable: true, colSpan: 1, order: 13 }
+     } else {
       _column = allowColumns[type]
-    }
+     }
     const updatedAllowColumns = {
       ...allowColumns,
       [type]: { ..._column, visable: !_column?.visable }
@@ -629,6 +635,13 @@ export const OrdersTable = memo((props) => {
                       </WrapOrderStatusSelector>
                     </td>
                   )}
+                  {allowColumns?.pod?.visable && !isSelectedOrders && (
+                    <td className='orderStatusTitle'>
+                      <WrapOrderStatusSelector>
+                        <Skeleton width={100} height={30} />
+                      </WrapOrderStatusSelector>
+                    </td>
+                  )}
                   {!isSelectedOrders && (
                     <td className='orderPrice'>
                       <div className='info'>

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

@@ -178,6 +178,7 @@ export const CustomerInfo = styled(BusinessInfo)`
     max-width: 125px;
   }
 `
+
 export const StatusInfo = styled.div`
   .bold {
     max-width: 150px;
@@ -185,6 +186,7 @@ export const StatusInfo = styled.div`
     margin: 0;
   }
 `
+
 export const ChannelInfo = styled.div`
   .bold {
     max-width: 150px;
@@ -192,6 +194,7 @@ export const ChannelInfo = styled.div`
     margin: 0;
   }
 `
+
 export const EtaInfo = styled.div`
   .bold {
     max-width: 150px;
@@ -200,6 +203,14 @@ export const EtaInfo = styled.div`
   }
 `
 
+export const PodInfo = styled.div`
+  .bold {
+    max-width: 150px;
+    font-weight: 600;
+    margin: 0;
+  }
+`
+
 export const DriversInfo = styled.div`
   .select {
     > div:first-child {

package/src/index.js

@@ -8,6 +8,7 @@ import {
   OrderingProductDetails
 } from './components/OrderingProducts'
 import { PageNotFound } from './components/PageNotFound'
+import { Banners } from './components/Banners'
 import {
   AllInOne,
   Appointments,
@@ -436,6 +437,7 @@ export {
   ChatBusinessesList,
   OrdersManager,
   PageNotFound,
+  Banners,
   Messages,
   OrdersContentHeader,
   OrdersDashboardList,

package/src/styles/Buttons/index.js

@@ -219,6 +219,17 @@ export const Button = styled.button`
       background: ${props => darken(0.1, props.theme.colors.lightPrimary)};
     }
   `}
+  ${({ color }) => color === 'warning' && css`
+    background: ${props => props.theme.colors.warning};
+    color: #FFF;
+    border-color: ${props => props.theme.colors.warning};
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.warning)};
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.warning)};
+    }
+  `}
   ${({ color }) => color === 'secundaryDark' && css`
     background: ${props => props.theme.colors.secundaryDarkContrast};
     color: ${props => props.theme.colors.secundaryDark};

package/template/app.js

@@ -86,14 +86,18 @@ import { CustomProject } from './pages/CustomProject'
 import { OrderingWidgets } from './pages/OrderingWidgets'
 import { BusinessDevicesList } from './pages/BusinessDevicesList'
 import { SettingsLogs } from './pages/SettingsLogs'
+import { Banners } from '../src/components/Banners'
+import { useProjectState } from '../src/contexts/ProjectContext'
 
 export const App = () => {
   const history = useHistory()
   const [events] = useEvent()
   const [{ auth, loading, user }] = useSession()
   const [orderStatus] = useOrder()
+  const [projectStatus] = useProjectState()
   const [{ configs, loading: configLoading }] = useConfig()
   const [loaded, setLoaded] = useState(false)
+  const [layoutPT, setLayoutPT] = useState(0)
   const [oneSignalState, setOneSignalState] = useState({
     notification_app: settings.notification_app
   })
@@ -102,6 +106,8 @@ export const App = () => {
   const { height } = useWindowSize()
 
   const cannyAppId = '5b05e5e2d3f6c47201694ad4'
+  const isPastDue = projectStatus.project?.current_status === 'past_due'
+  const showBanner = auth && isPastDue
 
   const { search } = useLocation()
   let queryProject
@@ -207,7 +213,14 @@ export const App = () => {
             {cannyAppId && (
               <CannyIdentification appId={cannyAppId} />
             )}
-            <Layout>
+            {showBanner && (
+              <Banners
+                type={projectStatus.project?.current_status}
+                urlToGo={settings?.billing_url}
+                setLayoutPT={setLayoutPT}
+              />
+            )}
+            <Layout pt={showBanner && `${layoutPT}px`}>
               {auth && (
                 <SidebarMenu billingUrl={settings?.billing_url} />
               )}

package/template/config.json

@@ -2,7 +2,7 @@
   "app_id": "ordering-admin-react",
   "notification_app": "dashboardweb",
   "app_name": "Ordering Admin",
-  "billing_url": "https://billing-dashboard.tryordering.com",
+  "billing_url": "https://start-free.tryordering.com",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",