ordering-ui-admin-external 1.0.0

package/src/components/BusinessIntelligence/ReportsOrderStatus/index.js

@@ -0,0 +1,313 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { useLanguage, useUtils, AdvancedReports as AdvancedReportsController } from 'ordering-components-admin-external'
+import Skeleton from 'react-loading-skeleton'
+import { Button } from '../../../styles'
+import { Download } from 'react-bootstrap-icons'
+import { AnalyticsCalendar } from '../AnalyticsCalendar'
+import { Alert, Modal } from '../../Shared'
+import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
+import { ReportsOrderTypeFilter } from '../ReportsOrderTypeFilter'
+import { ReportsBrandFilter } from '../ReportsBrandFilter'
+import {
+  OrderStatusContainer,
+  Title,
+  ButtonActionList,
+  BrandBusinessWrapper,
+  CalendarWrapper,
+  OrderStatusTableWrapper,
+  DistanceTitleBlock,
+  DistanceTable,
+  Thead,
+  Tbody,
+  Tfoot,
+  TableWrapper,
+  EmptyContent
+} from './styles'
+
+const ReportsOrderStatusUI = (props) => {
+  const {
+    filterList,
+    handleChangeFilterList,
+    reportData,
+    reportData1
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ parsePrice }] = useUtils()
+  const [isBusinessFilter, setIsBusinessFilter] = useState(false)
+  const [isBrandFilter, setIsBrandFilter] = useState(false)
+  const [isOrderTypeFilter, setIsOrderTypeFilter] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const tableRef = useRef(null)
+
+  const handleChangeDate = (date1, date2) => {
+    handleChangeFilterList({ ...filterList, from: date1, to: date2 })
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const downloadCSV = (name) => {
+    if (reportData?.content?.body?.rows?.length === 0) return
+    let csv = ''
+    reportData.content.header.rows.forEach((tr) => {
+      tr.forEach((th) => {
+        csv += `${th.value},`
+        for (let i = 1; i < th.colspan; i++) {
+          csv += ' ,'
+        }
+      })
+      csv += '\n'
+    })
+    csv += '\n'
+    reportData.content.body.rows.forEach((tr) => {
+      tr.forEach((th) => {
+        if (th.value_unit === 'currency') csv += `${th.value}$,`
+        else csv += `${th.value},`
+        for (let i = 1; i < th.colspan; i++) {
+          csv += ' ,'
+        }
+      })
+      csv += '\n'
+    })
+    csv += '\n'
+    reportData.content.footer.rows.forEach((tr) => {
+      tr.forEach((th) => {
+        csv += `${th.value},`
+        for (let i = 1; i < th.colspan; i++) {
+          csv += ' ,'
+        }
+      })
+      csv += '\n'
+    })
+    csv += '\n'
+    var downloadLink = document.createElement('a')
+    var blob = new Blob(['\ufeff', csv])
+    var url = URL.createObjectURL(blob)
+    downloadLink.href = url
+    const fileSuffix = new Date().getTime()
+    downloadLink.download = `${name}_${fileSuffix}.csv`
+    document.body.appendChild(downloadLink)
+    downloadLink.click()
+    document.body.removeChild(downloadLink)
+  }
+
+  useEffect(() => {
+    if (reportData?.error) {
+      setAlertState({
+        open: true,
+        content: reportData?.error
+      })
+    }
+  }, [reportData?.error])
+
+  return (
+    <>
+      <OrderStatusContainer>
+        <Title>{t('ORDER_STATUS_TEXT', 'Order status')}</Title>
+        <ButtonActionList>
+          <BrandBusinessWrapper>
+            <Button
+              onClick={() => setIsBrandFilter(true)}
+            >
+              {t('BRAND', 'Brand')} ({filterList?.franchises_id ? filterList?.franchises_id?.length : t('ALL', 'All')})
+            </Button>
+            <Button
+              onClick={() => setIsBusinessFilter(true)}
+            >
+              {t('BUSINESS', 'Business')} ({filterList?.businessIds ? filterList?.businessIds.length : t('ALL', 'All')})
+            </Button>
+            <Button
+              onClick={() => setIsOrderTypeFilter(true)}
+            >
+              {t('ORDER_TYPE', 'Order type')} ({filterList?.delivery_types_ids ? filterList?.delivery_types_ids.length : t('ALL', 'All')})
+            </Button>
+          </BrandBusinessWrapper>
+          <CalendarWrapper>
+            <AnalyticsCalendar
+              handleChangeDate={handleChangeDate}
+              defaultValue={filterList}
+            />
+          </CalendarWrapper>
+        </ButtonActionList>
+        <OrderStatusTableWrapper>
+          <DistanceTitleBlock active={reportData?.content?.body?.rows?.length > 0}>
+            <h2>{t('BUSINESS_ORDERS_COUNT_SALES', 'Business orders count sales')}</h2>
+            <Download onClick={() => downloadCSV('business_orders_count_sales')} />
+          </DistanceTitleBlock>
+          {reportData?.loading ? (
+            <div className='row'>
+              {[...Array(20).keys()].map(i => (
+                <div className='col-md-3 col-sm-3 col-3' key={i}><Skeleton /></div>
+              ))}
+            </div>
+          ) : (
+            <TableWrapper>
+              {reportData?.content?.body?.rows?.length > 0 ? (
+                <DistanceTable ref={tableRef}>
+                  {reportData?.content?.header?.rows.length > 0 && (
+                    <Thead>
+                      {
+                        reportData?.content?.header?.rows.map((tr, i) => (
+                          <tr key={i}>
+                            {tr?.map((th, j) => (
+                              <th key={j} colSpan={th.colspan}>{th.value}</th>
+                            ))}
+                          </tr>
+                        ))
+                      }
+                    </Thead>
+                  )}
+                  {reportData?.content?.body?.rows.map((tbody, i) => (
+                    <Tbody key={i}>
+                      <tr>
+                        {tbody.map((td, j) => (
+                          <td key={j} colSpan={td.colspan}>{td.value_unit === 'currency' ? parsePrice(td.value) : td.value}</td>
+                        ))}
+                      </tr>
+                    </Tbody>
+                  ))}
+                  {reportData?.content?.footer?.rows.length > 0 && (
+                    <Tfoot>
+                      {
+                        reportData?.content?.footer?.rows.map((tr, i) => (
+                          <tr key={i}>
+                            {tr?.map((td, j) => (
+                              <td key={j} colSpan={td.colspan}>{td.value}</td>
+                            ))}
+                          </tr>
+                        ))
+                      }
+                    </Tfoot>
+                  )}
+                </DistanceTable>
+              ) : (
+                <EmptyContent>{t('NO_DATA', 'No Data')}</EmptyContent>
+              )}
+            </TableWrapper>
+          )}
+        </OrderStatusTableWrapper>
+        <OrderStatusTableWrapper>
+          <DistanceTitleBlock active={reportData1?.content?.body?.rows?.length > 0}>
+            <h2>{t('FRANCHISE_ORDERS_COUNT_SALES', 'Franchise orders count sales')}</h2>
+            <Download onClick={() => downloadCSV('franchise_orders_count_sales')} />
+          </DistanceTitleBlock>
+          {reportData1?.loading ? (
+            <div className='row'>
+              {[...Array(20).keys()].map(i => (
+                <div className='col-md-3 col-sm-3 col-3' key={i}><Skeleton /></div>
+              ))}
+            </div>
+          ) : (
+            <TableWrapper>
+              {reportData1?.content?.body?.rows?.length > 0 ? (
+                <DistanceTable ref={tableRef}>
+                  {reportData?.content?.header?.rows.length > 0 && (
+                    <Thead>
+                      {
+                        reportData1?.content?.header?.rows.map((tr, i) => (
+                          <tr key={i}>
+                            {tr?.map((th, j) => (
+                              <th key={j} colSpan={th.colspan}>{th.value}</th>
+                            ))}
+                          </tr>
+                        ))
+                      }
+                    </Thead>
+                  )}
+                  {reportData1?.content?.body?.rows.map((tbody, i) => (
+                    <Tbody key={i}>
+                      <tr>
+                        {tbody.map((td, j) => (
+                          <td key={j} colSpan={td.colspan}>{td.value_unit === 'currency' ? parsePrice(td.value) : td.value}</td>
+                        ))}
+                      </tr>
+                    </Tbody>
+                  ))}
+                  {reportData1?.content?.footer?.rows.length > 0 && (
+                    <Tfoot>
+                      {
+                        reportData1?.content?.footer?.rows.map((tr, i) => (
+                          <tr key={i}>
+                            {tr?.map((td, j) => (
+                              <td key={j} colSpan={td.colspan}>{td.value}</td>
+                            ))}
+                          </tr>
+                        ))
+                      }
+                    </Tfoot>
+                  )}
+                </DistanceTable>
+              ) : (
+                <EmptyContent>{t('NO_DATA', 'No Data')}</EmptyContent>
+              )}
+            </TableWrapper>
+          )}
+        </OrderStatusTableWrapper>
+        <Modal
+          width='50%'
+          height='80vh'
+          padding='30px'
+          title={t('BUSINESSES', 'Businesses')}
+          open={isBusinessFilter}
+          onClose={() => setIsBusinessFilter(false)}
+        >
+          <AnalyticsBusinessFilter
+            {...props}
+            onClose={() => setIsBusinessFilter(false)}
+            isFranchise
+          />
+        </Modal>
+        <Modal
+          width='50%'
+          height='80vh'
+          padding='30px'
+          title={t('BRAND', 'Brand')}
+          open={isBrandFilter}
+          onClose={() => setIsBrandFilter(false)}
+        >
+          <ReportsBrandFilter
+            {...props} onClose={() => setIsBrandFilter(false)}
+          />
+        </Modal>
+        <Modal
+          width='50%'
+          height='80vh'
+          padding='30px'
+          title={t('ORDER_TYPE', 'Order type')}
+          open={isOrderTypeFilter}
+          onClose={() => setIsOrderTypeFilter(false)}
+        >
+          <ReportsOrderTypeFilter
+            {...props}
+            onClose={() => setIsOrderTypeFilter(false)}
+          />
+        </Modal>
+      </OrderStatusContainer>
+      <Alert
+        title={t('DRIVER_SCHEDULE', 'Driver schedule')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const ReportsOrderStatus = (props) => {
+  const reportsDriverScheduleProps = {
+    ...props,
+    UIComponent: ReportsOrderStatusUI,
+    endpoint: 'business_orders_count_sales',
+    endpoint1: 'franchise_orders_count_sales'
+  }
+  return <AdvancedReportsController {...reportsDriverScheduleProps} />
+}

package/src/components/BusinessIntelligence/ReportsOrderStatus/styles.js

@@ -0,0 +1,185 @@
+import styled, { css } from 'styled-components'
+
+export const OrderStatusContainer = styled.div`
+  padding: 35px 15px;
+  width: 100%;
+  overflow: auto;
+
+  @media (min-width: 700px) {
+    padding: 35px;
+  }
+`
+
+export const Title = styled.h2`
+  font-weight: bold;
+  font-size: 20px;
+  color: ${props => props.theme?.colors.headingColor};
+  margin-top: 0;
+  margin-bottom: 30px;
+`
+
+export const ButtonActionList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const CalendarWrapper = styled.div`
+  position: relative;
+
+  > button {
+    margin-top: 5px;
+    padding: 7px 15px;
+    color: ${props => props.theme?.colors.secundaryContrast};
+    background: ${props => props.theme?.colors.secundary};
+    border-radius: 7.6px;
+    border: none;
+    text-align: left;
+    margin-left: 10px;
+
+    ${props => props.theme?.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+
+    svg {
+      font-size: 16px;
+      margin-right: 12px;
+
+      ${props => props.theme.rtl && css`
+        margin-right: 0px;
+        margin-left: 12px;
+      `}
+    }
+  }
+`
+
+export const BrandBusinessWrapper = styled(CalendarWrapper)`
+  display: flex;
+
+  > button {
+    margin-right: 10px;
+    margin-left: 0;
+
+  ${props => props.theme?.rtl && css`
+    margin-left: 10px;
+    margin-right: 0;
+  `}
+  }
+`
+
+export const OrderStatusTableWrapper = styled.div`
+  width: 100%;
+  margin-top: 25px;
+  padding: 20px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 7.6px;
+`
+
+export const DistanceTitleBlock = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  h2 {
+    font-weight: 600;
+    font-size: 12px;
+    margin: 0;
+    text-transform: uppercase;
+  }
+
+  svg {
+    font-size: 16px;
+    color: #212121;
+    cursor: pointer;
+  }
+
+  ${({ active }) => !active && css`
+    svg {
+      cursor: not-allowed;
+    }
+  `}
+`
+
+export const DistanceTable = styled.table`
+  width: 100%;
+  min-width: 500px;
+`
+
+export const Thead = styled.thead`
+  position: sticky;
+  top: 0px;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  border-bottom: 1px solid ${props => props.theme?.colors.secundaryDarkContrast};
+
+  tr {
+    th {
+      padding: 12px 5px;
+      font-weight: 500;
+      font-size: 12px;
+      text-align: center;
+
+      &:first-child {
+        text-align: left;
+      }
+    }
+    &:last-child {
+      th {
+        &:nth-child(4n-1) {
+          border-left: 1px solid ${props => props.theme?.colors.secundaryDarkContrast};
+        }
+      }
+    }
+  }
+`
+
+export const Tbody = styled.tbody`
+  border-bottom: 1px solid ${props => props.theme?.colors.secundaryDarkContrast};
+
+  tr {
+    td {
+      padding: 12px 5px;
+      font-size: 12px;
+      text-align: center;
+      color: ${props => props.theme?.colors.lightGray};
+      white-space: nowrap;
+
+      &:first-child {
+        text-align: left;
+        color: ${props => props.theme?.colors.headingColor};
+      }
+      &:nth-child(4n-1) {
+        border-left: 1px solid ${props => props.theme?.colors.secundaryDarkContrast};
+      }
+    }
+  }
+`
+
+export const Tfoot = styled.tfoot`
+  tr {
+    td {
+      font-weight: 500;
+      font-size: 12px;
+      padding: 12px 0;
+
+      &:not(:first-child) {
+        text-align: center;
+      }
+    }
+  }
+`
+
+export const TableWrapper = styled.div`
+  width: 100%;
+  overflow: auto;
+  max-height: 650px;
+`
+
+export const EmptyContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+`

package/src/components/BusinessIntelligence/ReportsOrderTypeFilter/index.js

@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useConfig } from 'ordering-components-admin-external'
+import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
+import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
+import { Button } from '../../../styles'
+import {
+  OrderTypeFilterContainer,
+  OrderTypeFilterOption,
+  OrderTypeName,
+  FilterBtnWrapper
+} from './styles'
+
+export const ReportsOrderTypeFilter = (props) => {
+  const {
+    filterList,
+    handleChangeFilterList,
+    onClose
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [isAllCheck, setIsAllCheck] = useState(false)
+  const [orderTypeIds, setOrderTypeIds] = useState(null)
+
+  const configTypes = configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
+
+  const defaultOrderTypes = [
+    { value: 1, name: t('DELIVERY', 'Delivery'), enabled: true },
+    { value: 2, name: t('PICKUP', 'Pickup'), enabled: true },
+    { value: 3, name: t('EAT_IN', 'Eat in'), enabled: true },
+    { value: 4, name: t('CURBSIDE', 'Curbside'), enabled: true },
+    { value: 5, name: t('DRIVE_THRU', 'Drive thru'), enabled: true }
+  ]
+
+  const [orderTypes, setOrderTypes] = useState(
+    defaultOrderTypes.filter(type => configTypes?.includes(type.value))
+  )
+
+  const handleChangeAllCheck = () => {
+    if (isAllCheck) {
+      setOrderTypeIds(null)
+    } else {
+      const _orderTypeIds = []
+      for (const type of orderTypes) {
+        _orderTypeIds.push(type.value)
+      }
+      setOrderTypeIds(_orderTypeIds)
+    }
+    setIsAllCheck(!isAllCheck)
+  }
+
+  const handleChangeOrderTypeId = (id) => {
+    const found = orderTypeIds?.find(typeId => typeId === id)
+    if (found) {
+      const _orderTypeIds = orderTypeIds?.filter(orderTypeId => orderTypeId !== id)
+      setOrderTypeIds(_orderTypeIds)
+      setIsAllCheck(false)
+    } else {
+      const _orderTypeIds = orderTypeIds ? [...orderTypeIds] : []
+      _orderTypeIds.push(id)
+      if (_orderTypeIds.length === orderTypes.length) setIsAllCheck(true)
+      setOrderTypeIds(_orderTypeIds)
+    }
+  }
+
+  const isCheckEnableSate = (id) => {
+    const found = orderTypeIds?.find(typeId => typeId === id)
+    let valid = false
+    if (found) {
+      valid = true
+    }
+    return valid
+  }
+
+  const handleClickFilterButton = () => {
+    const _orderTypeIds = orderTypeIds ? [...orderTypeIds] : null
+    handleChangeFilterList({ ...filterList, delivery_types_ids: _orderTypeIds })
+    onClose && onClose()
+  }
+
+  useEffect(() => {
+    const _orderTypeIds = orderTypes?.reduce((prev, cur) => [...prev, cur.value], [])
+    setOrderTypeIds([...filterList?.delivery_types_ids || _orderTypeIds])
+    if (!filterList?.delivery_types_ids || filterList?.delivery_types_ids?.length === orderTypes.length) setIsAllCheck(true)
+  }, [])
+
+  return (
+    <>
+      <OrderTypeFilterContainer>
+        <OrderTypeFilterOption
+          onClick={handleChangeAllCheck}
+        >
+          {isAllCheck ? (
+            <RiCheckboxFill className='fill' />
+          ) : (
+            <RiCheckboxBlankLine />
+          )}
+          <OrderTypeName>{t('ALL', 'All')}</OrderTypeName>
+        </OrderTypeFilterOption>
+        {orderTypes.map((type, i) => (
+          <OrderTypeFilterOption
+            key={i}
+            onClick={() => handleChangeOrderTypeId(type?.value)}
+          >
+            {isCheckEnableSate(type.value) ? (
+              <RiCheckboxFill className='fill' />
+            ) : (
+              <RiCheckboxBlankLine />
+            )}
+            <OrderTypeName>{type?.name}</OrderTypeName>
+          </OrderTypeFilterOption>
+        ))}
+      </OrderTypeFilterContainer>
+      <FilterBtnWrapper>
+        <Button
+          borderRadius='7.6px'
+          color='primary'
+          onClick={handleClickFilterButton}
+        >
+          {t('FILTER', 'Filter')}
+        </Button>
+      </FilterBtnWrapper>
+    </>
+  )
+}

package/src/components/BusinessIntelligence/ReportsOrderTypeFilter/styles.js

@@ -0,0 +1,42 @@
+import styled, { css } from 'styled-components'
+
+export const OrderTypeFilterContainer = styled.div``
+
+export const OrderTypeFilterOption = styled.div`
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #E9ECEF;
+  padding: 10px 0;
+  cursor: pointer;
+
+  svg {
+    font-size: 24px;
+    color: #B1BCCC;
+
+    &.fill {
+      color: ${props => props.theme.colors.primary};
+    }
+  }
+`
+
+export const OrderTypeName = styled.span`
+  margin-left: 10px;
+  ${props => props.theme?.rtl && css`
+    margin-right: 10px;
+    margin-left: 0;
+  `}
+  font-size: 15px;
+  color: ${props => props.theme?.colors.headingColor};
+`
+
+export const FilterBtnWrapper = styled.div`
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 100%;
+
+  button {
+    height: 42px;
+  }
+`