ordering-ui-admin-external 1.7.0 → 1.7.2

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

@@ -28,6 +28,7 @@ import {
   MapWrraper
 } from './styles'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
+import { CountryFilter } from '../CountryFilter'
 
 const BusinessAnalyticsUI = (props) => {
   const {
@@ -42,7 +43,8 @@ const BusinessAnalyticsUI = (props) => {
     customerSatisfactionList,
     ordersAcceptSpendList,
     arrivedPickUpSpendList,
-    orderLocationList
+    orderLocationList,
+    countryCode
   } = props
 
   const [, t] = useLanguage()
@@ -50,6 +52,7 @@ const BusinessAnalyticsUI = (props) => {
 
   const [businessFilterModal, setBusinessFilterModal] = useState(false)
   const [isBrandFilter, setIsBrandFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
 
   const handleChangeDate = (date1, date2) => {
     handleChangeFilterList({ ...filterList, lapse: `${date1},${date2}` })
@@ -70,6 +73,11 @@ const BusinessAnalyticsUI = (props) => {
           <h1>{t('BUSINESS_ANALYTICS', 'Business Analytics')}</h1>
         </HeaderTitleContainer>
         <HeaderFilterContainer>
+          <BusinessFilterWrapper>
+            <Button onClick={() => setOpenCountryFilter(true)}>
+              {t('COUNTRY', 'Country')}
+            </Button>
+          </BusinessFilterWrapper>
           <BusinessFilterWrapper>
             <Button onClick={() => setIsBrandFilter(true)}>
               {t('BRAND', 'Brand')} ({filterList?.franchises_id ? filterList?.franchises_id.length : t('ALL', 'All')})
@@ -106,12 +114,14 @@ const BusinessAnalyticsUI = (props) => {
             isOrders
             filterList={filterList}
             chartDataList={ordersList}
+            countryCode={countryCode}
           />
         </div>
         <div className='col-md-12 col-lg-6'>
           <AnalyticsOrdersOrSales
             filterList={filterList}
             chartDataList={salesList}
+            countryCode={countryCode}
           />
         </div>
         <div className='col-md-12 col-lg-6'>
@@ -184,6 +194,18 @@ const BusinessAnalyticsUI = (props) => {
           onClose={() => setIsBrandFilter(false)}
         />
       </Modal>
+      <Modal
+        width='450px'
+        height='650px'
+        padding='25px'
+        open={openCountryFilter}
+        onClose={() => setOpenCountryFilter(false)}
+      >
+        <CountryFilter
+          {...props}
+          onClose={() => setOpenCountryFilter(false)}
+        />
+      </Modal>
     </BusinessAnalyticsContainer>
   )
 }

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

@@ -13,7 +13,7 @@ export const BusinessAnalyticsHeader = styled.div`
   display: flex;
   flex-direction: column;
 
-  @media (min-width: 769px) {
+  @media (min-width: 1024px) {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
@@ -51,22 +51,41 @@ export const HeaderTitleContainer = styled.div`
 export const HeaderFilterContainer = styled.div`
   display: flex;
   align-items: center;
+  flex-direction: column;
+  > div {
+    width: 100%;
+    margin-top: 10px;
+    > button {
+      width: 100%;
+    }
+  }
+
+  @media (min-width: 600px) {
+    flex-direction: row;
+    > div {
+      margin-top: 0px;
+      width: auto;
+    }
+  }
 `
 
 export const BusinessFilterWrapper = styled.div`
-  margin-left: 25px;
-  ${props => props.theme.rtl && css`
-    margin-right: 25px;
-    margin-left: 0;
-  `}
   > button {
     background: #F8F9FA;
     border-radius: 7.6px;
     padding: 7px 12px;
     font-size: 14px;
-    color: #748194;
+    color: ${props => props.theme.colors.secundaryContrast};
     border: none;
   }
+
+  @media (min-width: 600px) {
+    margin-left: 25px;
+    ${props => props.theme.rtl && css`
+      margin-right: 25px;
+      margin-left: 0;
+    `}
+  }
 `
 
 export const BusinessCalendarWrapper = styled(BusinessFilterWrapper)`

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

@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, CountryList } from 'ordering-components-admin-external'
+import { Button } from '../../../styles'
+import Skeleton from 'react-loading-skeleton'
+import { SearchBar, Pagination } from '../../Shared'
+import { RecordCircleFill, Circle } from 'react-bootstrap-icons'
+import {
+  Container,
+  SearchWrapper,
+  CountryListWrapper,
+  CountryItem,
+  ButtonWrapper,
+  PaginationWrapper
+} from './styles'
+
+const CountryFilterUI = (props) => {
+  const {
+    countriesState,
+    searchValue,
+    onSearch,
+    handleClickFilterButton,
+    countryCode,
+    handleChangeCode
+  } = props
+
+  const [, t] = useLanguage()
+
+  // Change page
+  const [currentPage, setCurrentPage] = useState(1)
+  const [pagesPerPage, setPagesPerPage] = useState(10)
+
+  // Get current products
+  const [currentPages, setCurrentPages] = useState([])
+  const [totalPages, setTotalPages] = useState(null)
+
+  const handleChangePage = (page) => {
+    setCurrentPage(page)
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(((currentPage - 1) * pagesPerPage + 1) / pageSize)
+    setCurrentPage(expectedPage)
+    setPagesPerPage(pageSize)
+  }
+
+  useEffect(() => {
+    if (countriesState.loading) return
+    let _totalPages
+    if (countriesState.countries.length > 0) {
+      _totalPages = Math.ceil(countriesState.countries.length / pagesPerPage)
+    }
+    const indexOfLastPost = currentPage * pagesPerPage
+    const indexOfFirstPost = indexOfLastPost - pagesPerPage
+    const _currentBusinessList = countriesState.countries.slice(indexOfFirstPost, indexOfLastPost)
+    setTotalPages(_totalPages)
+    setCurrentPages(_currentBusinessList)
+  }, [countriesState, currentPage, pagesPerPage])
+
+  return (
+    <>
+      <Container>
+        <h2>{t('CHOOSE_A_COUNTRY', 'Choose a country')}</h2>
+        <SearchWrapper>
+          <SearchBar
+            search={searchValue}
+            isCustomLayout
+            lazyLoad
+            onSearch={(value) => onSearch(value)}
+            placeholder={t('SEARCH', 'Search')}
+          />
+        </SearchWrapper>
+        <CountryListWrapper>
+          {countriesState?.loading ? (
+            <>
+              {[...Array(10).keys()].map(i => (
+                <CountryItem
+                  key={i}
+                >
+                  <Skeleton width={18} height={18} circle />
+                  <Skeleton width={200} height={20} style={{ marginLeft: 10 }} />
+                </CountryItem>
+              ))}
+            </>
+          ) : (
+            <>
+              {currentPages?.map(country => (
+                <CountryItem key={country?.id} onClick={() => handleChangeCode(country?.code)}>
+                  {countryCode === country?.code ? <RecordCircleFill className='checked' /> : <Circle />}
+                  <span className='name'>{country?.name}</span>
+                </CountryItem>
+              ))}
+            </>
+          )}
+        </CountryListWrapper>
+        <PaginationWrapper>
+          {countriesState?.countries?.length > 0 && (
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              handleChangePage={handleChangePage}
+              defaultPageSize={pagesPerPage}
+              handleChangePageSize={handleChangePageSize}
+            />
+          )}
+        </PaginationWrapper>
+      </Container>
+      <ButtonWrapper>
+        <Button
+          color='primary'
+          disabled={countriesState.loading}
+          onClick={handleClickFilterButton}
+        >
+          {t('FILTER', 'Filter')}
+        </Button>
+      </ButtonWrapper>
+    </>
+
+  )
+}
+
+export const CountryFilter = (props) => {
+  const countryFilterProps = {
+    ...props,
+    UIComponent: CountryFilterUI,
+    isSearchByName: true
+  }
+  return <CountryList {...countryFilterProps} />
+}

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

@@ -0,0 +1,65 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  h2 {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 30px;
+    margin-top: 0px;
+    margin-bottom: 24px;
+  }
+`
+
+export const SearchWrapper = styled.div`
+  input {
+    width: 100%;
+  }
+`
+
+export const CountryListWrapper = styled.div`
+  padding-top: 17px;
+`
+
+export const CountryItem = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 10px 0px;
+  cursor: pointer;
+  width: fit-content;
+
+  span.name {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 18px;
+    margin-left: 10px;
+    user-select: none;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0px;
+    `}
+  }
+
+  svg {
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+    &.checked {
+      color: ${props => props.theme.colors.primary};
+    }
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 100%;
+  button {
+    border-radius: 8px;
+    height: 44px;
+  }
+`
+
+export const PaginationWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`

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

@@ -33,6 +33,7 @@ import {
 } from './styles'
 import { AnalyticsDriverOrders } from '../AnalyticsDriverOrders'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
+import { CountryFilter } from '../CountryFilter'
 
 const DriverAnalyticsUI = (props) => {
   const {
@@ -51,7 +52,8 @@ const DriverAnalyticsUI = (props) => {
     busyTimesList,
     completeSpendList,
     pickUpSpendList,
-    deliverySpendList
+    deliverySpendList,
+    countryCode
   } = props
 
   const [, t] = useLanguage()
@@ -64,6 +66,7 @@ const DriverAnalyticsUI = (props) => {
   const [driversFilterModal, setDriversFilterModal] = useState(false)
   const [driverGroupModal, setDriverGroupModal] = useState(false)
   const [isBrandFilter, setIsBrandFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
 
   return (
     <BusinessAnalyticsContainer>
@@ -80,6 +83,11 @@ const DriverAnalyticsUI = (props) => {
           <h1>{t('DRIVERS_ANALYTICS', 'Drivers analytics')}</h1>
         </HeaderTitleContainer>
         <HeaderFilterContainer>
+          <BusinessFilterWrapper>
+            <Button onClick={() => setOpenCountryFilter(true)}>
+              {t('COUNTRY', 'Country')}
+            </Button>
+          </BusinessFilterWrapper>
           <BusinessFilterWrapper>
             <Button onClick={() => setIsBrandFilter(true)}>
               {t('BRAND', 'Brand')} ({filterList?.franchises_id ? filterList?.franchises_id.length : t('ALL', 'All')})
@@ -124,12 +132,14 @@ const DriverAnalyticsUI = (props) => {
             isOrders
             filterList={filterList}
             chartDataList={ordersList}
+            countryCode={countryCode}
           />
         </div>
         <div className='col-md-12 col-lg-6'>
           <AnalyticsDriverOrders
             filterList={filterList}
             chartDataList={salesList}
+            countryCode={countryCode}
           />
         </div>
         <div className='col-md-12 col-lg-6'>
@@ -236,6 +246,18 @@ const DriverAnalyticsUI = (props) => {
           onClose={() => setIsBrandFilter(false)}
         />
       </Modal>
+      <Modal
+        width='450px'
+        height='650px'
+        padding='25px'
+        open={openCountryFilter}
+        onClose={() => setOpenCountryFilter(false)}
+      >
+        <CountryFilter
+          {...props}
+          onClose={() => setOpenCountryFilter(false)}
+        />
+      </Modal>
     </BusinessAnalyticsContainer>
   )
 }

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

@@ -56,24 +56,23 @@ export const HeaderFilterContainer = styled.div`
 
   > div {
     margin-top: 10px;
+    width: 100%;
+    > button, > div:not(.ordering-calendar) {
+      width: 100%;
+    }
   }
 
-  @media (min-width: 576px) {
+  @media (min-width: 600px) {
     flex-direction: row;
 
     > div {
       margin-top: 0;
+      width: auto;
     }
   }
 `
 
 export const BusinessFilterWrapper = styled.div`
-  margin-left: 25px;
-  ${props => props.theme.rtl && css`
-    margin-right: 25px;
-    margin-left: 0;
-  `}
-
   > button {
     background: #F8F9FA;
     border-radius: 7.6px;
@@ -82,6 +81,14 @@ export const BusinessFilterWrapper = styled.div`
     color: #748194;
     border: none;
   }
+
+  @media (min-width: 600px) {
+    margin-left: 25px;
+    ${props => props.theme.rtl && css`
+      margin-right: 25px;
+      margin-left: 0;
+    `}
+  }
 `
 
 export const BusinessCalendarWrapper = styled(BusinessFilterWrapper)`

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

@@ -88,8 +88,8 @@ export const CalendarWrapper = styled.div`
   > button {
     padding: 7px 15px;
     width: 100%;
-    color: #748194;
-    background: #F8F9FA;
+    color: ${props => props.theme.colors.secundaryContrast};
+    background: ${props => props.theme.colors.secundary};
     border-radius: 7.6px;
     border: none;
     text-align: left;

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

@@ -11,7 +11,7 @@ export const BrandFilterOption = styled.div`
 
   svg {
     font-size: 24px;
-    color: #B1BCCC;
+    color: ${props => props.theme.colors.secundaryLight};
 
     &.fill {
       color: ${props => props.theme.colors.primary};

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

@@ -1,8 +1,7 @@
 import React from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage, ReportsBrandFilter as ReportsBrandFilterController } from 'ordering-components-admin-external'
-import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
-import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
+import { CheckSquareFill as Checked, Square as UnChecked } from 'react-bootstrap-icons'
 import { Button } from '../../../styles'
 import {
   ReportsBrandFilterContainer,
@@ -23,22 +22,13 @@ const ReportsBrandFilterUI = (props) => {
 
   const [, t] = useLanguage()
 
-  const isCheckEnableSate = (id) => {
-    const found = brandIds?.find(brandId => brandId === id)
-    let valid = false
-    if (found) {
-      valid = true
-    }
-    return valid
-  }
-
   return (
     <>
       <ReportsBrandFilterContainer>
         {brandList.loading ? (
           [...Array(10).keys()].map(i => (
             <BrandFilterOption key={i}>
-              <Skeleton width={15} height={15} />
+              <Skeleton width={18} height={18} />
               <BusinessName>
                 <Skeleton width={120} height={24} />
               </BusinessName>
@@ -50,9 +40,9 @@ const ReportsBrandFilterUI = (props) => {
               onClick={handleChangeAllCheck}
             >
               {isAllCheck ? (
-                <RiCheckboxFill className='fill' />
+                <Checked className='fill' />
               ) : (
-                <RiCheckboxBlankLine />
+                <UnChecked />
               )}
               <BusinessName>{t('ALL', 'All')}</BusinessName>
             </BrandFilterOption>
@@ -61,10 +51,10 @@ const ReportsBrandFilterUI = (props) => {
                 key={i}
                 onClick={() => handleChangeBrandId(brand?.id)}
               >
-                {isCheckEnableSate(brand.id) ? (
-                  <RiCheckboxFill className='fill' />
+                {brandIds?.includes(brand.id) ? (
+                  <Checked className='fill' />
                 ) : (
-                  <RiCheckboxBlankLine />
+                  <UnChecked />
                 )}
                 <BusinessName>{brand?.name}</BusinessName>
               </BrandFilterOption>

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

@@ -5,13 +5,13 @@ export const ReportsBrandFilterContainer = styled.div``
 export const BrandFilterOption = styled.div`
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #E9ECEF;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
   padding: 10px 0;
   cursor: pointer;
 
   svg {
-    font-size: 24px;
-    color: #B1BCCC;
+    font-size: 18px;
+    color: ${props => props.theme.colors.secundaryLight};
 
     &.fill {
       color: ${props => props.theme.colors.primary};

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

@@ -9,6 +9,7 @@ import { Modal } from '../../Shared'
 import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
 import { ReportsBarChart } from '../ReportsBarChart'
+import { CountryFilter } from '../CountryFilter'
 import {
   ReportsDistanceContainer,
   Title,
@@ -39,6 +40,7 @@ const ReportsBusinessDistanceUI = (props) => {
   const tableRef = useRef(null)
   const [isBusinessFilter, setIsBusinessFilter] = useState(false)
   const [isBrandFilter, setIsBrandFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
   const [chartData, setChartData] = useState(null)
   const [{ parseNumber }] = useUtils()
 
@@ -150,6 +152,11 @@ const ReportsBusinessDistanceUI = (props) => {
           >
             {t('BUSINESS', 'Business')} ({filterList?.businessIds ? filterList?.businessIds.length : t('ALL', 'All')})
           </Button>
+          <Button
+            onClick={() => setOpenCountryFilter(true)}
+          >
+            {t('COUNTRY', 'Country')}
+          </Button>
         </BrandBusinessWrapper>
         <CalendarWrapper>
           <AnalyticsCalendar
@@ -269,6 +276,18 @@ const ReportsBusinessDistanceUI = (props) => {
           {...props} onClose={() => setIsBrandFilter(false)}
         />
       </Modal>
+      <Modal
+        width='450px'
+        height='650px'
+        padding='25px'
+        open={openCountryFilter}
+        onClose={() => setOpenCountryFilter(false)}
+      >
+        <CountryFilter
+          {...props}
+          onClose={() => setOpenCountryFilter(false)}
+        />
+      </Modal>
     </ReportsDistanceContainer>
   )
 }

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

@@ -11,6 +11,7 @@ import { AnalyticsCalendar } from '../AnalyticsCalendar'
 import { Modal } from '../../Shared'
 import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
+import { CountryFilter } from '../CountryFilter'
 import {
   ReportsBusinessSpendContainer,
   Title,
@@ -37,6 +38,8 @@ const ReportsBusinessSpendUI = (props) => {
   const [, t] = useLanguage()
   const [isBusinessFilter, setIsBusinessFilter] = useState(false)
   const [isBrandFilter, setIsBrandFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
+
   const [{ parsePrice }] = useUtils()
 
   const tableRef = useRef(null)
@@ -116,6 +119,11 @@ const ReportsBusinessSpendUI = (props) => {
           >
             {t('BUSINESS', 'Business')} ({filterList?.businessIds ? filterList?.businessIds.length : t('ALL', 'All')})
           </Button>
+          <Button
+            onClick={() => setOpenCountryFilter(true)}
+          >
+            {t('COUNTRY', 'Country')}
+          </Button>
         </BrandBusinessWrapper>
         <CalendarWrapper>
           <AnalyticsCalendar
@@ -214,6 +222,18 @@ const ReportsBusinessSpendUI = (props) => {
           {...props} onClose={() => setIsBrandFilter(false)}
         />
       </Modal>
+      <Modal
+        width='450px'
+        height='650px'
+        padding='25px'
+        open={openCountryFilter}
+        onClose={() => setOpenCountryFilter(false)}
+      >
+        <CountryFilter
+          {...props}
+          onClose={() => setOpenCountryFilter(false)}
+        />
+      </Modal>
     </ReportsBusinessSpendContainer>
   )
 }

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

@@ -8,6 +8,7 @@ import { Alert, Modal } from '../../Shared'
 import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { ReportsDriverFilter } from '../ReportsDriverFilter'
 import { ReportsDriverGroupFilter } from '../ReportsDriverGroupFilter'
+import { CountryFilter } from '../CountryFilter'
 import {
   DriverDistanceContainer,
   Title,
@@ -35,6 +36,7 @@ const ReportsDriverDistanceUI = (props) => {
   const [isBusinessFilter, setIsBusinessFilter] = useState(false)
   const [isDriverFilter, setIsDriverFilter] = useState(false)
   const [isDriverGroupFilter, setIsDriverGroupFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [availableDriverIds, setAvailableDriverIds] = useState(null)
   const [{ parseNumber }] = useUtils()
@@ -126,6 +128,11 @@ const ReportsDriverDistanceUI = (props) => {
             >
               {t('DRIVER', 'DRIVER')} ({filterList?.drivers_ids ? filterList?.drivers_ids.length : t('ALL', 'All')})
             </Button>
+            <Button
+              onClick={() => setOpenCountryFilter(true)}
+            >
+              {t('COUNTRY', 'Country')}
+            </Button>
           </BrandBusinessWrapper>
           <CalendarWrapper>
             <AnalyticsCalendar
@@ -235,6 +242,18 @@ const ReportsDriverDistanceUI = (props) => {
             setAvailableDriverIds={setAvailableDriverIds}
           />
         </Modal>
+        <Modal
+          width='450px'
+          height='650px'
+          padding='25px'
+          open={openCountryFilter}
+          onClose={() => setOpenCountryFilter(false)}
+        >
+          <CountryFilter
+            {...props}
+            onClose={() => setOpenCountryFilter(false)}
+          />
+        </Modal>
       </DriverDistanceContainer>
       <Alert
         title={t('DRIVER_SCHEDULE', 'Driver schedule')}

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

@@ -11,7 +11,7 @@ export const BusinessFilterOption = styled.div`
 
   svg {
     font-size: 24px;
-    color: #B1BCCC;
+    color: ${props => props.theme.colors.secundaryLight};
 
     &.fill {
       color: ${props => props.theme.colors.primary};