ordering-ui-admin-external 1.30.6 → 1.31.0

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

@@ -12,6 +12,7 @@ import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { AnalyticsCalendar } from '../AnalyticsCalendar'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
 import { CountryFilter } from '../CountryFilter'
+import { AnalyticsFilterTimeZone } from '../AnalyticsFilterTimeZone'
 
 import {
   ReportsContainer,
@@ -23,7 +24,9 @@ import {
   ChartTitleBlock,
   ChartWrapper,
   EmptyContent,
-  ChartListWrapper
+  ChartListWrapper,
+  AnalyticsTimeZoneWrapper,
+  TimeZoneAndCalendar
 } from './styles'
 
 const ReportsSaleAndCategoryUI = (props) => {
@@ -182,12 +185,17 @@ const ReportsSaleAndCategoryUI = (props) => {
             </Button>
           )}
         </BrandBusinessWrapper>
+        <TimeZoneAndCalendar>
+          <AnalyticsTimeZoneWrapper>
+            <AnalyticsFilterTimeZone {...props} />
+          </AnalyticsTimeZoneWrapper>
           <CalendarWrapper>
             <AnalyticsCalendar
               handleChangeDate={handleChangeDate}
               defaultValue={filterList}
             />
           </CalendarWrapper>
+        </TimeZoneAndCalendar>
       </ButtonActionList>
       <ChartListWrapper>
         <ChartBlockWrapper>

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

@@ -139,3 +139,37 @@ export const EmptyContent = styled.div`
 export const ChartListWrapper = styled.div`
   padding-bottom: 10px;
 `
+
+export const AnalyticsTimeZoneWrapper = styled.div`
+  width: 100%;
+  button {
+    margin-top: 5px;
+    background: ${props => props.theme.colors.secundary};
+    border-radius: 7.6px;
+    padding: 7px 15px;
+    font-size: 14px;
+    color: ${props => props.theme.colors.secundaryContrast};
+    border: none;
+  }
+
+  @media (min-width: 600px) {
+    width: fit-content;
+    margin-left: 10px;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const TimeZoneAndCalendar = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: 600px) {
+    flex-direction: row;
+    width: fit-content;
+  }
+`

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

@@ -11,6 +11,7 @@ import { Button } from '../../../styles'
 import Skeleton from 'react-loading-skeleton'
 import { Download } from 'react-bootstrap-icons'
 import { CountryFilter } from '../CountryFilter'
+import { AnalyticsFilterTimeZone } from '../AnalyticsFilterTimeZone'
 
 import {
   ReportsOrdersContainer,
@@ -22,7 +23,9 @@ import {
   ChartTitleBlock,
   ChartWrapper,
   EmptyContent,
-  ChartFooterContainer
+  ChartFooterContainer,
+  AnalyticsTimeZoneWrapper,
+  TimeZoneAndCalendar
 } from './styles'
 import { AnalyticsBusinessFilter } from '../AnalyticsBusinessFilter'
 import { ReportsBrandFilter } from '../ReportsBrandFilter'
@@ -161,12 +164,17 @@ const ReportsSalesUI = (props) => {
             </Button>
           )}
         </BrandBusinessWrapper>
+        <TimeZoneAndCalendar>
+          <AnalyticsTimeZoneWrapper>
+            <AnalyticsFilterTimeZone {...props} />
+          </AnalyticsTimeZoneWrapper>
           <CalendarWrapper>
             <AnalyticsCalendar
               handleChangeDate={handleChangeDate}
               defaultValue={filterList}
             />
           </CalendarWrapper>
+        </TimeZoneAndCalendar>
       </ButtonActionList>
       <ChartBlockWrapper>
         <ChartTitleBlock active={reportData?.content?.dataset?.dataset?.data?.length > 0}>

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

@@ -151,3 +151,37 @@ export const ChartFooterContainer = styled.div`
     margin: 0;
   }
 `
+
+export const AnalyticsTimeZoneWrapper = styled.div`
+  width: 100%;
+  button {
+    margin-top: 5px;
+    background: ${props => props.theme.colors.secundary};
+    border-radius: 7.6px;
+    padding: 7px 15px;
+    font-size: 14px;
+    color: ${props => props.theme.colors.secundaryContrast};
+    border: none;
+  }
+
+  @media (min-width: 600px) {
+    width: fit-content;
+    margin-left: 10px;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const TimeZoneAndCalendar = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: 600px) {
+    flex-direction: row;
+    width: fit-content;
+  }
+`

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

@@ -7,6 +7,7 @@ import { AnalyticsCalendar } from '../AnalyticsCalendar'
 import { Modal } from '../../Shared'
 import { ReportsDriverGroupFilter } from '../ReportsDriverGroupFilter'
 import { ReportsDriverFilter } from '../ReportsDriverFilter'
+import { AnalyticsFilterTimeZone } from '../AnalyticsFilterTimeZone'
 import { convertHMS } from '../../../utils'
 import {
   ReportsBusinessSpendContainer,
@@ -21,7 +22,9 @@ import {
   Tbody,
   Tfoot,
   TableWrapper,
-  EmptyContent
+  EmptyContent,
+  AnalyticsTimeZoneWrapper,
+  TimeZoneAndCalendar
 } from './styles'
 
 const ReportsSpentTimeUI = (props) => {
@@ -109,12 +112,17 @@ const ReportsSpentTimeUI = (props) => {
             {t('DRIVER', 'Driver')} ({filterList?.drivers_ids ? filterList?.drivers_ids.length : t('ALL', 'All')})
           </Button>
         </BrandBusinessWrapper>
-        <CalendarWrapper>
-          <AnalyticsCalendar
-            handleChangeDate={handleChangeDate}
-            defaultValue={filterList}
-          />
-        </CalendarWrapper>
+        <TimeZoneAndCalendar>
+          <AnalyticsTimeZoneWrapper>
+            <AnalyticsFilterTimeZone {...props} />
+          </AnalyticsTimeZoneWrapper>
+          <CalendarWrapper>
+            <AnalyticsCalendar
+              handleChangeDate={handleChangeDate}
+              defaultValue={filterList}
+            />
+          </CalendarWrapper>
+        </TimeZoneAndCalendar>
       </ButtonActionList>
       <DistancePerBrandWrapper>
         <DistanceTitleBlock active={reportData?.content?.body?.rows?.length > 0}>

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

@@ -213,3 +213,37 @@ export const EmptyContent = styled.div`
   justify-content: center;
   padding: 10px;
 `
+
+export const AnalyticsTimeZoneWrapper = styled.div`
+  width: 100%;
+  button {
+    margin-top: 5px;
+    background: ${props => props.theme.colors.secundary};
+    border-radius: 7.6px;
+    padding: 7px 15px;
+    font-size: 14px;
+    color: ${props => props.theme.colors.secundaryContrast};
+    border: none;
+  }
+
+  @media (min-width: 600px) {
+    width: fit-content;
+    margin-left: 10px;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const TimeZoneAndCalendar = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: 600px) {
+    flex-direction: row;
+    width: fit-content;
+  }
+`

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

@@ -7,7 +7,7 @@ import { Download } from 'react-bootstrap-icons'
 import { Bar } from 'react-chartjs-2'
 import Skeleton from 'react-loading-skeleton'
 import { convertHMS } from '../../../utils'
-
+import { AnalyticsFilterTimeZone } from '../AnalyticsFilterTimeZone'
 import {
   ReportsTopDriversContainer,
   Title,
@@ -17,7 +17,9 @@ import {
   ChartBlockWrapper,
   ChartTitleBlock,
   ChartWrapper,
-  EmptyContent
+  EmptyContent,
+  AnalyticsTimeZoneWrapper,
+  TimeZoneAndCalendar
 } from './styles'
 import { Button } from '../../../styles'
 import { AnalyticsCalendar } from '../AnalyticsCalendar'
@@ -175,12 +177,17 @@ const ReportsTopDriversUI = (props) => {
             {t('DRIVER', 'Driver')} ({filterList?.drivers_ids ? filterList?.drivers_ids.length : t('ALL', 'All')})
           </Button>
         </BrandBusinessWrapper>
+        <TimeZoneAndCalendar>
+          <AnalyticsTimeZoneWrapper>
+            <AnalyticsFilterTimeZone {...props} />
+          </AnalyticsTimeZoneWrapper>
           <CalendarWrapper>
             <AnalyticsCalendar
               handleChangeDate={handleChangeDate}
               defaultValue={filterList}
             />
           </CalendarWrapper>
+        </TimeZoneAndCalendar>
       </ButtonActionList>
       <ChartBlockWrapper>
         <ChartTitleBlock active={reportData?.content?.dataset?.dataset?.data?.length > 0}>

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

@@ -134,3 +134,37 @@ export const EmptyContent = styled.div`
   justify-content: center;
   padding: 10px;
 `
+
+export const AnalyticsTimeZoneWrapper = styled.div`
+  width: 100%;
+  button {
+    margin-top: 5px;
+    background: ${props => props.theme.colors.secundary};
+    border-radius: 7.6px;
+    padding: 7px 15px;
+    font-size: 14px;
+    color: ${props => props.theme.colors.secundaryContrast};
+    border: none;
+  }
+
+  @media (min-width: 600px) {
+    width: fit-content;
+    margin-left: 10px;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const TimeZoneAndCalendar = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: 600px) {
+    flex-direction: row;
+    width: fit-content;
+  }
+`

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

@@ -8,6 +8,7 @@ import { Line } from 'react-chartjs-2'
 import Skeleton from 'react-loading-skeleton'
 import { Download } from 'react-bootstrap-icons'
 import { Modal } from '../../Shared'
+import { AnalyticsFilterTimeZone } from '../AnalyticsFilterTimeZone'
 import {
   ReportsUsersContainer,
   Title,
@@ -17,7 +18,9 @@ import {
   ChartBlockWrapper,
   ChartTitleBlock,
   ChartWrapper,
-  EmptyContent
+  EmptyContent,
+  AnalyticsTimeZoneWrapper,
+  TimeZoneAndCalendar
 } from './styles'
 import { Button } from '../../../styles'
 import { AnalyticsCalendar } from '../AnalyticsCalendar'
@@ -158,12 +161,17 @@ const ReportsUsersUI = (props) => {
             {t('APP_ID', 'App id')} ({filterList?.app_ids ? filterList?.app_ids.length : t('ALL', 'All')})
           </Button>
         </BrandBusinessWrapper>
-        <CalendarWrapper>
-          <AnalyticsCalendar
-            handleChangeDate={handleChangeDate}
-            defaultValue={filterList}
-          />
-        </CalendarWrapper>
+        <TimeZoneAndCalendar>
+          <AnalyticsTimeZoneWrapper>
+            <AnalyticsFilterTimeZone {...props} />
+          </AnalyticsTimeZoneWrapper>
+          <CalendarWrapper>
+            <AnalyticsCalendar
+              handleChangeDate={handleChangeDate}
+              defaultValue={filterList}
+            />
+          </CalendarWrapper>
+        </TimeZoneAndCalendar>
       </ButtonActionList>
       <ChartBlockWrapper>
         <ChartTitleBlock active={reportData?.content?.dataset?.dataset[0]?.data?.length > 0}>

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

@@ -134,3 +134,37 @@ export const EmptyContent = styled.div`
   justify-content: center;
   padding: 10px;
 `
+
+export const AnalyticsTimeZoneWrapper = styled.div`
+  width: 100%;
+  button {
+    margin-top: 5px;
+    background: ${props => props.theme.colors.secundary};
+    border-radius: 7.6px;
+    padding: 7px 15px;
+    font-size: 14px;
+    color: ${props => props.theme.colors.secundaryContrast};
+    border: none;
+  }
+
+  @media (min-width: 600px) {
+    width: fit-content;
+    margin-left: 10px;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const TimeZoneAndCalendar = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: 600px) {
+    flex-direction: row;
+    width: fit-content;
+  }
+`

package/src/components/Delivery/AddressList/index.js

@@ -54,7 +54,8 @@ const AddressListUI = (props) => {
     setCustomerModalOpen,
     setExtraOpen,
     userState,
-    handleSuccessUpdate
+    handleSuccessUpdate,
+    isAutoOpenAddNewAddress
   } = props
 
   const [, t] = useLanguage()
@@ -171,6 +172,15 @@ const AddressListUI = (props) => {
     setUniqueAddressesList(_uniqueAddressesList)
   }, [addressList])
 
+  useEffect(() => {
+    if (addressList.loading || !isAutoOpenAddNewAddress) return
+    if (!addressList.error && addressList?.addresses?.length === 0) {
+      setTimeout(() => {
+        openAddress({})
+      }, 500)
+    }
+  }, [addressList])
+
   return (
     <>
       <AddressListContainer id='address_control' isLoading={actionStatus?.loading || orderState?.loading}>

package/src/components/Home/HomePage/index.js

@@ -71,6 +71,8 @@ const HomeUI = (props) => {
   const [isSubmitted, setIsSubmitted] = useState(false)
   const [ordering] = useApi()
 
+  const isEnabledWhiteLabelModule = configs?.white_label_module?.value
+
   const project = {
     active: {
       description: t('ORDERING_GUIDE_MSG', 'Our guide helps you to configure your Ordering products.'),
@@ -234,7 +236,9 @@ const HomeUI = (props) => {
         {width > 997 && (
           <OrderingButtonWrapper>
             <span>{t('WHAT_DO_YOU_WANT_SEE_ORDERING', 'What do you want to see in ordering?')}</span>
-            <Button color='primary' onClick={() => setShowForm(true)}>{t('CLICK_HERE', 'Click here')}</Button>
+            {!isEnabledWhiteLabelModule && (
+              <Button color='primary' onClick={() => setShowForm(true)}>{t('CLICK_HERE', 'Click here')}</Button>
+            )}
           </OrderingButtonWrapper>
         )}
         <Breadcrumb>

package/src/components/MyProducts/OrderingWebsite/index.js

@@ -71,7 +71,8 @@ const OrderingWebsiteUI = (props) => {
     site,
     setSite,
     businessesList,
-    franchisesList
+    franchisesList,
+    handleChangeInput
   } = props
 
   const [, t] = useLanguage()
@@ -178,6 +179,7 @@ const OrderingWebsiteUI = (props) => {
 
   const handleChangeSiteSettings = (e) => {
     handleChangeValue(e.target.value, 'website_settings', `values.${e.target.name}`)
+    handleChangeInput(e)
   }
 
   const handleChangeContent = (type, content) => {
@@ -290,7 +292,7 @@ const OrderingWebsiteUI = (props) => {
                     <Input
                       name='name'
                       placeholder={t('SOURCE_DEMO_WEBSITE', 'Source demo website')}
-                      value={themeValues?.website_settings?.components?.values?.name || ''}
+                      value={site?.name || ''}
                       onChange={handleChangeSiteSettings}
                     />
                   )}
@@ -311,7 +313,7 @@ const OrderingWebsiteUI = (props) => {
                     <TextArea
                       name='description'
                       placeholder={t('DESCRIPTION', 'Decription')}
-                      value={themeValues?.website_settings?.components?.values?.description || ''}
+                      value={site?.description || ''}
                       onChange={handleChangeSiteSettings}
                     />
                   )}
@@ -587,15 +589,26 @@ const OrderingWebsiteUI = (props) => {
               <InputFormWrapper>
                 <h4>{t('THEME_SETTINGS', 'Theme Settings')}</h4>
                 <InnerBlock>
-                  <ColorPickerWrapper>
-                    <div>
-                      <p>{t('PRIMARY_COLOR_BUTTONS', 'Primary Color for Buttons')}</p>
-                      <ColorPicker
-                        defaultColor={themeValues?.theme_settings?.components?.style?.primary_btn_color}
-                        onChangeColor={(color) => handleChangeValue(color, 'theme_settings', 'style.primary_btn_color')}
-                      />
-                    </div>
-                  </ColorPickerWrapper>
+                  <ContentWrapper>
+                    <ColorPickerWrapper>
+                      <div>
+                        <p>{t('BACKGROUND_COLOR', 'Background color')}</p>
+                        <ColorPicker
+                          defaultColor={themeValues?.theme_settings?.components?.style?.background_page ?? '#FFFFFF'}
+                          onChangeColor={(color) => handleChangeValue(color, 'theme_settings', 'style.background_page')}
+                        />
+                      </div>
+                    </ColorPickerWrapper>
+                    <ColorPickerWrapper>
+                      <div>
+                        <p>{t('PRIMARY_COLOR_BUTTONS', 'Primary Color for Buttons')}</p>
+                        <ColorPicker
+                          defaultColor={themeValues?.theme_settings?.components?.style?.primary_btn_color}
+                          onChangeColor={(color) => handleChangeValue(color, 'theme_settings', 'style.primary_btn_color')}
+                        />
+                      </div>
+                    </ColorPickerWrapper>
+                  </ContentWrapper>
                   <ContentWrapper>
                     <div>
                       <p>{t('HOMEPAGE_CONTENT', 'Homepage Content')}</p>

package/src/components/MyProducts/OrderingWebsite/styles.js

@@ -309,12 +309,10 @@ export const CheckBoxWrapper = styled.div`
 `
 
 export const ColorPickerWrapper = styled.div`
-  padding-top: 25px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   > div {
-    margin-top: 25px;
     > p {
       font-weight: 400;
       font-size: 14px;

package/src/components/Orders/AllInOne/index.js

@@ -54,7 +54,6 @@ const OrdersManagerUI = (props) => {
     handleSelectedSubOrderStatus,
     handleCustomOrderDetail,
     setSelectedOrderIds,
-    numberOfOrdersByStatus,
     allowColumns,
     setAllowColumns
   } = props
@@ -75,6 +74,12 @@ const OrdersManagerUI = (props) => {
   const [timeStatus, setTimeStatus] = useState(null)
   const [slaSettingTime, setSlaSettingTime] = useState(60000)
   const [totalSelectedOrder, setTotalSelectedOrder] = useState(0)
+  const [ordersAmountByStatus, setOrdersAmountByStatus] = useState({
+    pending: null,
+    inProgress: null,
+    completed: null,
+    cancelled: null
+  })
 
   const [mapsData, setMapsData] = useState({
     driversIsOnline: true,
@@ -213,7 +218,7 @@ const OrdersManagerUI = (props) => {
               <OrderStatusFilterBar
                 selectedOrderStatus={ordersStatusGroup}
                 changeOrderStatus={handleOrdersStatusGroupFilter}
-                numberOfOrdersByStatus={numberOfOrdersByStatus}
+                ordersAmountByStatus={ordersAmountByStatus}
               />
               <OrderSubFilterControls isColumn={selectedOrderIds?.length}>
                 <OrderStatusSubFilterWrapper isColumn={selectedOrderIds?.length}>
@@ -261,6 +266,7 @@ const OrdersManagerUI = (props) => {
                       slaSettingTime={slaSettingTime}
                       allowColumns={allowColumns}
                       setAllowColumns={setAllowColumns}
+                      setOrdersAmountByStatus={setOrdersAmountByStatus}
                     />
                   </WrapItemView>
                 </OrdersInnerContent>