ordering-ui-admin-external 1.7.1 → 1.7.2

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};

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

@@ -11,7 +11,7 @@ export const DriverGroupOption = 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/ReportsDriverOrder/index.js

@@ -7,6 +7,7 @@ import { AnalyticsCalendar } from '../AnalyticsCalendar'
 import { Modal } from '../../Shared'
 import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
+import { CountryFilter } from '../CountryFilter'
 import {
   ReportsBusinessSpendContainer,
   Title,
@@ -34,6 +35,7 @@ const ReportsDriverOrderUI = (props) => {
   const [{ parsePrice }] = useUtils()
   const [isBusinessFilter, setIsBusinessFilter] = useState(false)
   const [isBrandFilter, setIsBrandFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
 
   const tableRef = useRef(null)
 
@@ -100,6 +102,11 @@ const ReportsDriverOrderUI = (props) => {
           >
             {t('BUSINESS', 'Business')} ({filterList?.businessIds ? filterList?.businessIds.length : t('ALL', 'All')})
           </Button>
+          <Button
+            onClick={() => setOpenCountryFilter(true)}
+          >
+            {t('COUNTRY', 'Country')}
+          </Button>
         </BrandBusinessWrapper>
         <CalendarWrapper>
           <AnalyticsCalendar
@@ -198,6 +205,18 @@ const ReportsDriverOrderUI = (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/ReportsDriverOrderTime/index.js

@@ -7,6 +7,7 @@ import { AnalyticsCalendar } from '../AnalyticsCalendar'
 import { Modal } from '../../Shared'
 import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
+import { CountryFilter } from '../CountryFilter'
 import {
   ReportsBusinessSpendContainer,
   Title,
@@ -34,6 +35,7 @@ const ReportsDriverOrderTimeUI = (props) => {
   const [, t] = useLanguage()
   const [isBusinessFilter, setIsBusinessFilter] = useState(false)
   const [isBrandFilter, setIsBrandFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
   // const [isOrderTypeFilter, setIsOrderTypeFilter] = useState(false)
 
   const tableRef = useRef(null)
@@ -118,6 +120,11 @@ const ReportsDriverOrderTimeUI = (props) => {
           >
             {t('ORDER_TYPE', 'Order type')} ({filterList?.delivery_types_ids ? filterList?.delivery_types_ids.length : t('ALL', 'All')})
           </Button> */}
+          <Button
+            onClick={() => setOpenCountryFilter(true)}
+          >
+            {t('COUNTRY', 'Country')}
+          </Button>
         </BrandBusinessWrapper>
         <CalendarWrapper>
           <AnalyticsCalendar
@@ -222,6 +229,18 @@ const ReportsDriverOrderTimeUI = (props) => {
           onClose={() => setIsOrderTypeFilter(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/ReportsDriverSpend/index.js

@@ -7,6 +7,7 @@ import { AnalyticsCalendar } from '../AnalyticsCalendar'
 import { Modal } from '../../Shared'
 import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
+import { CountryFilter } from '../CountryFilter'
 import {
   ReportsBusinessSpendContainer,
   Title,
@@ -34,6 +35,7 @@ const ReportsDriverSpendUI = (props) => {
   const [{ parsePrice }] = useUtils()
   const [isBusinessFilter, setIsBusinessFilter] = useState(false)
   const [isBrandFilter, setIsBrandFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
 
   const tableRef = useRef(null)
 
@@ -112,6 +114,11 @@ const ReportsDriverSpendUI = (props) => {
           >
             {t('BUSINESS', 'Business')} ({filterList?.businessIds ? filterList?.businessIds.length : t('ALL', 'All')})
           </Button>
+          <Button
+            onClick={() => setOpenCountryFilter(true)}
+          >
+            {t('COUNTRY', 'Country')}
+          </Button>
         </BrandBusinessWrapper>
         <CalendarWrapper>
           <AnalyticsCalendar
@@ -210,6 +217,18 @@ const ReportsDriverSpendUI = (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/ReportsGeneralSales/index.js

@@ -12,7 +12,7 @@ import { Download } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
 import { Button } from '../../../styles'
 import { Modal } from '../../Shared'
-
+import { CountryFilter } from '../CountryFilter'
 import {
   ReportsBusinessSpendContainer,
   DistancePerBrandWrapper,
@@ -41,6 +41,7 @@ const ReportsGeneralSalesUI = (props) => {
   const [isDriverGroupFilter, setIsDriverGroupFilter] = useState(false)
   const [isBrandFilter, setIsBrandFilter] = useState(false)
   const [isBusinessFilter, setIsBusinessFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
 
   const tableRef = useRef(null)
 
@@ -124,6 +125,11 @@ const ReportsGeneralSalesUI = (props) => {
           >
             {t('BUSINESS', 'Business')} ({filterList?.businessIds ? filterList?.businessIds.length : t('ALL', 'All')})
           </Button>
+          <Button
+            onClick={() => setOpenCountryFilter(true)}
+          >
+            {t('COUNTRY', 'Country')}
+          </Button>
         </BrandBusinessWrapper>
         <CalendarWrapper>
           <AnalyticsCalendar
@@ -235,6 +241,18 @@ const ReportsGeneralSalesUI = (props) => {
           isFranchise
         />
       </Modal>
+      <Modal
+        width='450px'
+        height='650px'
+        padding='25px'
+        open={openCountryFilter}
+        onClose={() => setOpenCountryFilter(false)}
+      >
+        <CountryFilter
+          {...props}
+          onClose={() => setOpenCountryFilter(false)}
+        />
+      </Modal>
     </ReportsBusinessSpendContainer>
   )
 }

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

@@ -9,6 +9,7 @@ import { ReportsDriverFilter } from '../ReportsDriverFilter'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
 import { AnalyticsCalendar } from '../AnalyticsCalendar'
 import { ReportsDriverGroupFilter } from '../ReportsDriverGroupFilter'
+import { CountryFilter } from '../CountryFilter'
 import {
   HeatMapContainer,
   Title,
@@ -32,6 +33,7 @@ const ReportsHeatMapUI = (props) => {
   const [{ user }] = useSession()
   const [isBusinessFilter, setIsBusinessFilter] = useState(false)
   const [isDriverFilter, setIsDriverFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
   const [isDriverGroupFilter, setIsDriverGroupFilter] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [availableDriverIds, setAvailableDriverIds] = useState(null)
@@ -112,6 +114,11 @@ const ReportsHeatMapUI = (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
@@ -210,6 +217,18 @@ const ReportsHeatMapUI = (props) => {
             {...props} onClose={() => setIsBrandFilter(false)}
           />
         </Modal>
+        <Modal
+          width='450px'
+          height='650px'
+          padding='25px'
+          open={openCountryFilter}
+          onClose={() => setOpenCountryFilter(false)}
+        >
+          <CountryFilter
+            {...props}
+            onClose={() => setOpenCountryFilter(false)}
+          />
+        </Modal>
       </HeatMapContainer>
       <Alert
         title={t('HEAT_MAP', 'Heat map')}

package/src/components/BusinessIntelligence/ReportsOrderDistance/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,
@@ -36,6 +37,7 @@ const ReportsOrderDistanceUI = (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 handleChangeDate = (date1, date2) => {
@@ -146,6 +148,11 @@ const ReportsOrderDistanceUI = (props) => {
           >
             {t('BUSINESS', 'Business')} ({filterList?.businessIds ? filterList?.businessIds.length : t('ALL', 'All')})
           </Button>
+          <Button
+            onClick={() => setOpenCountryFilter(true)}
+          >
+            {t('COUNTRY', 'Country')}
+          </Button>
         </BrandBusinessWrapper>
         <CalendarWrapper>
           <AnalyticsCalendar
@@ -246,6 +253,18 @@ const ReportsOrderDistanceUI = (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/ReportsOrderStatus/index.js

@@ -8,6 +8,7 @@ import { Alert, Modal } from '../../Shared'
 import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { ReportsOrderTypeFilter } from '../ReportsOrderTypeFilter'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
+import { CountryFilter } from '../CountryFilter'
 import {
   OrderStatusContainer,
   Title,
@@ -36,6 +37,7 @@ const ReportsOrderStatusUI = (props) => {
   const [{ parsePrice }] = useUtils()
   const [isBusinessFilter, setIsBusinessFilter] = useState(false)
   const [isBrandFilter, setIsBrandFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
   const [isOrderTypeFilter, setIsOrderTypeFilter] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
 
@@ -127,6 +129,11 @@ const ReportsOrderStatusUI = (props) => {
             >
               {t('ORDER_TYPE', 'Order type')} ({filterList?.delivery_types_ids ? filterList?.delivery_types_ids.length : t('ALL', 'All')})
             </Button>
+            <Button
+              onClick={() => setOpenCountryFilter(true)}
+            >
+              {t('COUNTRY', 'Country')}
+            </Button>
           </BrandBusinessWrapper>
           <CalendarWrapper>
             <AnalyticsCalendar
@@ -288,6 +295,18 @@ const ReportsOrderStatusUI = (props) => {
             onClose={() => setIsOrderTypeFilter(false)}
           />
         </Modal>
+        <Modal
+          width='450px'
+          height='650px'
+          padding='25px'
+          open={openCountryFilter}
+          onClose={() => setOpenCountryFilter(false)}
+        >
+          <CountryFilter
+            {...props}
+            onClose={() => setOpenCountryFilter(false)}
+          />
+        </Modal>
       </OrderStatusContainer>
       <Alert
         title={t('DRIVER_SCHEDULE', 'Driver schedule')}

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

@@ -11,7 +11,7 @@ export const OrderTypeFilterOption = 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/ReportsOrders/index.js

@@ -9,6 +9,10 @@ import {
 import { Button } from '../../../styles'
 import Skeleton from 'react-loading-skeleton'
 import { Download } from 'react-bootstrap-icons'
+import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
+import { ReportsBrandFilter } from '../ReportsBrandFilter'
+import { CountryFilter } from '../CountryFilter'
+import { Modal } from '../../Shared'
 
 import {
   ReportsOrdersContainer,
@@ -22,9 +26,6 @@ import {
   EmptyContent,
   ChartFooterContainer
 } from './styles'
-import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
-import { ReportsBrandFilter } from '../ReportsBrandFilter'
-import { Modal } from '../../Shared'
 
 const ReportsOrdersUI = (props) => {
   const {
@@ -36,6 +37,7 @@ const ReportsOrdersUI = (props) => {
   const [, t] = useLanguage()
   const [dataOptions, setDataOptions] = useState(null)
   const [isBusinessFilter, setIsBusinessFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
   const [isBrandFilter, setIsBrandFilter] = useState(false)
 
   const generateData = () => {
@@ -147,6 +149,11 @@ const ReportsOrdersUI = (props) => {
           >
             {t('BUSINESS', 'Business')} ({filterList?.businessIds ? filterList?.businessIds.length : t('ALL', 'All')})
           </Button>
+          <Button
+            onClick={() => setOpenCountryFilter(true)}
+          >
+            {t('COUNTRY', 'Country')}
+          </Button>
         </BrandBusinessWrapper>
         <CalendarWrapper>
           <AnalyticsCalendar
@@ -206,6 +213,18 @@ const ReportsOrdersUI = (props) => {
           {...props} onClose={() => setIsBrandFilter(false)}
         />
       </Modal>
+      <Modal
+        width='450px'
+        height='650px'
+        padding='25px'
+        open={openCountryFilter}
+        onClose={() => setOpenCountryFilter(false)}
+      >
+        <CountryFilter
+          {...props}
+          onClose={() => setOpenCountryFilter(false)}
+        />
+      </Modal>
     </ReportsOrdersContainer>
   )
 }

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

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

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

@@ -11,6 +11,7 @@ import { Modal } from '../../Shared'
 import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { AnalyticsCalendar } from '../AnalyticsCalendar'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
+import { CountryFilter } from '../CountryFilter'
 
 import {
   ReportsContainer,
@@ -36,6 +37,7 @@ const ReportsSaleAndCategoryUI = (props) => {
   const [, t] = useLanguage()
   const [isBusinessFilter, setIsBusinessFilter] = useState(false)
   const [isBrandFilter, setIsBrandFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
 
   const handleChangeDate = (date1, date2) => {
     handleChangeFilterList({ ...filterList, from: date1, to: date2 })
@@ -170,6 +172,11 @@ const ReportsSaleAndCategoryUI = (props) => {
           >
             {t('BUSINESS', 'Business')} ({filterList?.businessIds ? filterList?.businessIds.length : t('ALL', 'All')})
           </Button>
+          <Button
+            onClick={() => setOpenCountryFilter(true)}
+          >
+            {t('COUNTRY', 'Country')}
+          </Button>
         </BrandBusinessWrapper>
         <CalendarWrapper>
           <AnalyticsCalendar
@@ -241,6 +248,18 @@ const ReportsSaleAndCategoryUI = (props) => {
           {...props} onClose={() => setIsBrandFilter(false)}
         />
       </Modal>
+      <Modal
+        width='450px'
+        height='650px'
+        padding='25px'
+        open={openCountryFilter}
+        onClose={() => setOpenCountryFilter(false)}
+      >
+        <CountryFilter
+          {...props}
+          onClose={() => setOpenCountryFilter(false)}
+        />
+      </Modal>
     </ReportsContainer>
   )
 }

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

@@ -10,6 +10,7 @@ import {
 import { Button } from '../../../styles'
 import Skeleton from 'react-loading-skeleton'
 import { Download } from 'react-bootstrap-icons'
+import { CountryFilter } from '../CountryFilter'
 
 import {
   ReportsOrdersContainer,
@@ -39,6 +40,7 @@ const ReportsSalesUI = (props) => {
   const [dataOptions, setDataOptions] = useState(null)
   const [isBusinessFilter, setIsBusinessFilter] = useState(false)
   const [isBrandFilter, setIsBrandFilter] = useState(false)
+  const [openCountryFilter, setOpenCountryFilter] = useState(true)
 
   const generateData = () => {
     const list = []
@@ -149,6 +151,11 @@ const ReportsSalesUI = (props) => {
           >
             {t('BUSINESS', 'Business')} ({filterList?.businessIds ? filterList?.businessIds.length : t('ALL', 'All')})
           </Button>
+          <Button
+            onClick={() => setOpenCountryFilter(true)}
+          >
+            {t('COUNTRY', 'Country')}
+          </Button>
         </BrandBusinessWrapper>
         <CalendarWrapper>
           <AnalyticsCalendar
@@ -208,6 +215,18 @@ const ReportsSalesUI = (props) => {
           {...props} onClose={() => setIsBrandFilter(false)}
         />
       </Modal>
+      <Modal
+        width='450px'
+        height='650px'
+        padding='25px'
+        open={openCountryFilter}
+        onClose={() => setOpenCountryFilter(false)}
+      >
+        <CountryFilter
+          {...props}
+          onClose={() => setOpenCountryFilter(false)}
+        />
+      </Modal>
     </ReportsOrdersContainer>
   )
 }