ordering-ui-admin-external 1.7.1 → 1.7.3

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

@@ -19,7 +19,8 @@ import {
 export const AnalyticsDriverOrders = (props) => {
   const {
     isOrders,
-    chartDataList
+    chartDataList,
+    countryCode
   } = props
 
   const [, t] = useLanguage()
@@ -91,11 +92,18 @@ export const AnalyticsDriverOrders = (props) => {
 
   const TotalSales = () => {
     let sales = 0
-    if (!chartDataList?.data?.dataset?.dataset[0]?.data || chartDataList?.data?.dataset?.dataset[0]?.data.length === 0) return sales
+    if (!chartDataList?.data?.dataset?.dataset[0]?.data || chartDataList?.data?.dataset?.dataset[0]?.data.length === 0) return getFormattedValue(sales, countryCode)
     for (const data of chartDataList?.data?.dataset?.dataset[0]?.data) {
       sales += data.y
     }
-    return parsePrice(sales.toFixed(2), { separator: '.' })
+    return getFormattedValue(sales, countryCode)
+  }
+
+  const getFormattedValue = (value, flag) => {
+    const formattedValue = flag
+      ? parsePrice(value.toFixed(2), { separator: '.' })
+      : value.toFixed(2)
+    return formattedValue
   }
 
   const downloadCSV = () => {

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

@@ -61,7 +61,7 @@ export const ChartFooterContainer = styled.div`
 
   p {
     font-size: 14px;
-    color: #909BA9;
+    color: ${props => props.theme.colors.lightGray};
     margin: 0;
   }
 `

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

@@ -17,7 +17,7 @@ export const TreeViewParentItem = styled.div`
 
   svg {
     font-size: 24px;
-    color: #B1BCCC;
+    color: ${props => props.theme.colors.secundaryLight};
     &.fill {
       color: ${props => props.theme?.colors.primary};
     }
@@ -49,7 +49,7 @@ export const TreeViewChildrenItem = 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/AnalyticsFilterTimeZone/styles.js

@@ -8,8 +8,9 @@ export const AnalyticsTimeZoneContainer = styled.div`
     border-radius: 7.6px;
     padding: 7px 12px;
     font-size: 14px;
-    color: #748194;
+    color: ${props => props.theme.colors.secundaryContrast};
     border: none;
+    width: 100%;
   }
 `
 
@@ -17,19 +18,15 @@ export const TimeZoneSelectWrapper = styled.div`
   position: absolute;
   width: 300px;
   top: 100%;
-  right: -60px;
+  right: 0;
   padding: 25px;
   background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
-  border: 1px solid #E9ECEF;
+  border: 1px solid ${props => props.theme.colors.borderColor};
   box-sizing: border-box;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
   border-radius: 7.6px;
   z-index: 100;
   margin-top: 18px;
-
-  @media (min-width: 576px) {
-    right: 0;
-  }
 `
 export const TimeZoneSearchWrapper = styled.div`
   position: relative;
@@ -50,7 +47,7 @@ export const SearchIconWrapper = styled.div`
 
   svg {
     font-size: 16px;
-    color: #B1BCCC;
+    color: ${props => props.theme.colors.secundaryLight};
   }
 `
 

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

@@ -25,7 +25,7 @@ export const ReviewContentWrapper = styled.div`
   p {
     margin: 0;
     font-size: 14px;
-    color: #909BA9;
+    color: ${props => props.theme.colors.lightGray};
     text-align: center;
   }
 `

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

@@ -20,7 +20,8 @@ export const AnalyticsOrdersOrSales = (props) => {
   const {
     isOrders,
     chartDataList,
-    filterList
+    filterList,
+    countryCode
   } = props
 
   const [, t] = useLanguage()
@@ -182,7 +183,10 @@ export const AnalyticsOrdersOrSales = (props) => {
     for (const data of chartDataList?.data) {
       sales += data.sales
     }
-    return parsePrice(sales.toFixed(2), { separator: '.' })
+    const totalSales = countryCode
+      ? parsePrice(sales.toFixed(2), { separator: '.' })
+      : sales.toFixed(2)
+    return totalSales
   }
 
   const downloadCSV = () => {

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

@@ -61,7 +61,7 @@ export const ChartFooterContainer = styled.div`
 
   p {
     font-size: 14px;
-    color: #909BA9;
+    color: ${props => props.theme.colors.lightGray};
     margin: 0;
   }
 `

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

@@ -52,7 +52,7 @@ export const OrderStatusFooter = styled.div`
 
   p {
     font-size: 14px;
-    color: #909BA9;
+    color: ${props => props.theme.colors.lightGray};
     margin: 0;
   }
 `

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,
+    code,
+    setCode
+  } = 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={() => setCode(country?.code)}>
+                  {code === 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>