ordering-ui-admin-external 1.7.0 → 1.7.2

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

package/src/components/BusinessIntelligence/ReportsSales/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/SettingItemUI/styles.js

@@ -64,14 +64,14 @@ export const TitleContainer = styled.div`
 export const Title = styled.p`
   font-weight: 500;
   font-size: 13px;
-  color: #344050;
+  color: ${props => props.theme.colors.headingColor};
   margin-bottom: 8px;
 `
 
 export const SettingItemDescription = styled.div`
   font-weight: normal;
   font-size: 12px;
-  color: #909BA9;
+  color: ${props => props.theme.colors.lightGray};
 
   @media (min-width: 577px) {
     display: -webkit-box;

package/src/components/CartRecovery/OpenCartList/styles.js

@@ -179,7 +179,7 @@ export const CheckBox = styled.span`
   `}
   svg {
     font-size: 18px;
-    color: #B1BCCC;
+    color: ${props => props.theme.colors?.secundaryLight};
 
     ${({ isChecked }) => isChecked && css`
       color: ${props => props.theme.colors?.primary};

package/src/components/CartRecovery/OpenCartListing/styles.js

@@ -28,7 +28,7 @@ export const WrapperIndicator = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
+  color: ${props => props.theme.colors.white};
   font-weight: 500;
   font-size: 24px;
 `

package/src/components/CartRecovery/RecoveryActionDetail/styles.js

@@ -94,7 +94,7 @@ export const ActionSelectorWrapper = styled.div`
         }
       }
       .dropdown-item:last-child {
-        color: #E63757;
+        color: ${props => props.theme.colors.danger};
       }
     }
   }

package/src/components/Settings/IntegrationListing/index.js

@@ -19,6 +19,7 @@ import {
   SettingItemContent
 } from './styles'
 import { useTheme } from 'styled-components'
+import { LalaMoveConnect } from '../LalaMoveConnect'
 
 export const IntegrationListing = (props) => {
   const [, t] = useLanguage()
@@ -126,6 +127,17 @@ export const IntegrationListing = (props) => {
               <p>{t('CONNECT_DOORDASH_DESCRIPTION', 'Send orders directly to your driver in Doordash and keep customers happy with their deliveries.')}</p>
             </SettingItemContent>
           </SettingItemContainer>
+          <SettingItemContainer
+            onClick={() => handleOpenSetting('lalamove')}
+          >
+            <IconWrapper>
+              <img src={theme.images.general.lalamove} />
+            </IconWrapper>
+            <SettingItemContent>
+              <h5>{t('CONNECT_WITH_LALAMOVE', 'Connect with lalamove')}</h5>
+              <p>{t('CONNECT_LALAMOVE_DESCRIPTION', 'Send orders directly to your drivers in LalaMove and keep customers happy with their deliveries.')}</p>
+            </SettingItemContent>
+          </SettingItemContainer>
         </SettingListContainer>
       </IntegrationsContainer>
 
@@ -167,6 +179,12 @@ export const IntegrationListing = (props) => {
           onClose={() => handleCloseSettings()}
         />
       )}
+
+      {showOption === 'lalamove' && (
+        <LalaMoveConnect
+          onClose={() => handleCloseSettings()}
+        />
+      )}
     </>
   )
 }