ordering-ui-admin-external 1.33.1 → 1.35.0

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useLocation } from 'react-router-dom'
 import { DashboardOrdersList as OrdersListController } from 'ordering-components-admin-external'
 import { OrdersListing } from '../OrdersListing'
 
@@ -7,9 +8,15 @@ export const OrdersDashboardList = (props) => {
     selectedSubOrderStatus,
     isMessagesView,
     orderByOption,
-    setOrdersAmountByStatus
+    setOrdersAmountByStatus,
+    isUseQuery
   } = props
 
+  const query = new URLSearchParams(useLocation().search)
+  const defaultStatus = query.get('status')
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
+
   const OrdersCommonControlProps = {
     ...props,
     UIComponent: OrdersListing,
@@ -33,13 +40,23 @@ export const OrdersDashboardList = (props) => {
         <OrdersListController
           isMessagesView
           {...OrdersCommonControlProps}
+          paginationSettings={{
+            initialPage: isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+            pageSize: isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+            controlType: 'pages'
+          }}
           orderStatus={selectedSubOrderStatus?.all}
         />
       ) : (
         <>
           <OrdersListController
-            groupStatus='pending'
             {...OrdersCommonControlProps}
+            paginationSettings={{
+              initialPage: isUseQuery && defaultStatus === 'pending' && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+              pageSize: isUseQuery && defaultStatus === 'pending' && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+              controlType: 'pages'
+            }}
+            groupStatus='pending'
             orderStatus={selectedSubOrderStatus?.pending}
             setOrdersTotalAmount={total => setOrdersAmountByStatus(prevState => ({ ...prevState, pending: total }))}
           />
@@ -47,6 +64,11 @@ export const OrdersDashboardList = (props) => {
           <OrdersListController
             groupStatus='inProgress'
             {...OrdersCommonControlProps}
+            paginationSettings={{
+              initialPage: isUseQuery && defaultStatus === 'inProgress' && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+              pageSize: isUseQuery && defaultStatus === 'inProgress' && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+              controlType: 'pages'
+            }}
             orderStatus={selectedSubOrderStatus?.inProgress}
             setOrdersTotalAmount={total => setOrdersAmountByStatus(prevState => ({ ...prevState, inProgress: total }))}
           />
@@ -54,6 +76,11 @@ export const OrdersDashboardList = (props) => {
           <OrdersListController
             groupStatus='completed'
             {...OrdersCommonControlProps}
+            paginationSettings={{
+              initialPage: isUseQuery && defaultStatus === 'completed' && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+              pageSize: isUseQuery && defaultStatus === 'completed' && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+              controlType: 'pages'
+            }}
             orderStatus={selectedSubOrderStatus?.completed}
             setOrdersTotalAmount={total => setOrdersAmountByStatus(prevState => ({ ...prevState, completed: total }))}
           />
@@ -61,6 +88,11 @@ export const OrdersDashboardList = (props) => {
           <OrdersListController
             groupStatus='cancelled'
             {...OrdersCommonControlProps}
+            paginationSettings={{
+              initialPage: isUseQuery && defaultStatus === 'cancelled' && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+              pageSize: isUseQuery && defaultStatus === 'cancelled' && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+              controlType: 'pages'
+            }}
             orderStatus={selectedSubOrderStatus?.cancelled}
             setOrdersTotalAmount={total => setOrdersAmountByStatus(prevState => ({ ...prevState, cancelled: total }))}
           />

package/src/components/Orders/OrdersFilterGroup/styles.js

@@ -198,7 +198,7 @@ export const WarningMessage = styled.div`
   position: absolute;
   display: flex;
   align-items: center;
-  z-index: 2000;
+  z-index: 10;
   top: 100%;
   background: ${props => props.theme.colors.warning100};
   border: 1px solid ${props => props.theme.colors.warning};

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

@@ -50,7 +50,8 @@ export const OrdersListing = (props) => {
     setAllowColumns,
     handleDrop,
     isDelivery,
-    saveUserSettings
+    saveUserSettings,
+    isUseQuery
   } = props
 
   const theme = useTheme()
@@ -141,6 +142,7 @@ export const OrdersListing = (props) => {
                   setAllowColumns={setAllowColumns}
                   handleDrop={handleDrop}
                   saveUserSettings={saveUserSettings}
+                  isUseQuery={isUseQuery}
                 />
               ) : (
                 <OrdersCards
@@ -159,6 +161,7 @@ export const OrdersListing = (props) => {
                   handleUpdateDriverLocation={handleUpdateDriverLocation}
                   slaSettingTime={slaSettingTime}
                   isDelivery={isDelivery}
+                  isUseQuery={isUseQuery}
                 />
               )}
             </WrapperOrderListContent>

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

@@ -48,7 +48,8 @@ const OrdersManagerUI = (props) => {
     allowColumns,
     setAllowColumns,
     timeStatus,
-    setTimeStatus
+    setTimeStatus,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
@@ -191,6 +192,7 @@ const OrdersManagerUI = (props) => {
           setSlaSettingTime={setSlaSettingTime}
         />
         <OrderStatusFilterBar
+          isUseQuery={isUseQuery}
           selectedOrderStatus={ordersStatusGroup}
           changeOrderStatus={handleOrdersStatusGroupFilter}
           ordersAmountByStatus={ordersAmountByStatus}
@@ -214,6 +216,8 @@ const OrdersManagerUI = (props) => {
                 setIsOpenOrderDetail(true)
               }}
               handleOpenOrderDetail={handleOpenOrderDetail}
+              ordersStatusGroup={ordersStatusGroup}
+              selectedSubOrderStatus={selectedSubOrderStatus}
             />
           )}
         </OrderSubFilterControls>
@@ -221,6 +225,7 @@ const OrdersManagerUI = (props) => {
           <OrdersInnerContent className='order-content'>
             <WrapItemView>
               <OrdersDashboard
+                isUseQuery={isUseQuery}
                 isSelectedOrders={isSelectedOrders}
                 driverId={props.driverId}
                 customerId={props.customerId}

package/src/components/Orders/OrdersManager/styles.js

@@ -5,7 +5,8 @@ export const OrdersListContainer = styled.div`
   padding: 20px;
   box-sizing: border-box;
   transition: all 0.5s;
-  overflow: hidden;
+  overflow: auto;
+  max-height: 100vh;
   ${({ isSelectedOrders }) => isSelectedOrders && css`
     margin-top: 0px;
     padding: 20px 0 0 0;
@@ -15,7 +16,7 @@ export const OrdersListContainer = styled.div`
   }
 `
 export const OrdersContent = styled.div`
-
+  margin-top: 10px;
 `
 export const OrdersInnerContent = styled.div`
 `
@@ -40,6 +41,7 @@ export const WrapItemView = styled.div`
   width: 100%;
 `
 export const OrderSubFilterControls = styled.div`
+  flex-wrap: wrap;
   display: flex;
   justify-content: space-between;
   width: 100%;

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

@@ -11,7 +11,7 @@ import {
 } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { ColumnAllowSettingPopover, Pagination } from '../../Shared'
-import { getCurrenySymbol } from '../../../utils'
+import { getCurrenySymbol, addQueryToUrl } from '../../../utils'
 
 import {
   OrdersContainer,
@@ -56,7 +56,8 @@ export const OrdersTable = (props) => {
     allowColumns,
     setAllowColumns,
     handleDrop,
-    saveUserSettings
+    saveUserSettings,
+    isUseQuery
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -317,6 +318,14 @@ export const OrdersTable = (props) => {
     return () => document.removeEventListener('keydown', handleChangeKeyboard)
   }, [isTourOpen, currentTourStep])
 
+  useEffect(() => {
+    if (!isUseQuery || !pagination?.currentPage || !pagination?.pageSize || !pagination?.total) return
+    addQueryToUrl({
+      page: pagination.currentPage,
+      pageSize: pagination.pageSize
+    })
+  }, [pagination?.currentPage, pagination?.pageSize, pagination?.total])
+
   return (
     <>
       <OrdersContainer

package/src/components/Orders/OrdersTable/styles.js

@@ -7,19 +7,13 @@ export const OrdersContainer = styled.div`
     overflow: hidden;
   `}
 
-  @media (min-width: 768px) {
-    max-height: calc(var(--vh, 1vh) * 100 - 385px);
-  }
-
   @media (min-width: 992px) {
-    max-height: calc(var(--vh, 1vh) * 100 - 305px);
     ${({ isSelectedOrders }) => isSelectedOrders && css`
       max-height: calc(var(--vh, 1vh) * 100 - 345px);
     `}
   }
 
   @media (min-width: 1200px) {
-    max-height: calc(var(--vh, 1vh) * 100 - 275px);
     ${({ isSelectedOrders }) => isSelectedOrders && css`
       max-height: calc(var(--vh, 1vh) * 100 - 345px);
     `}

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, PagesList as PagesListController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Button, IconButton, Switch, LinkButton } from '../../../styles'
@@ -9,6 +10,7 @@ import { useTheme } from 'styled-components'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { List as MenuIcon } from 'react-bootstrap-icons'
 import { PageForm } from '../PageForm'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   StaticPageListContainer,
@@ -39,9 +41,12 @@ const CmsUI = (props) => {
   const [openModal, setOpenModal] = useState(false)
   const [curPageId, setCurPageId] = useState(null)
 
+  const query = new URLSearchParams(useLocation().search)
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
   // Change page
-  const [currentPage, setCurrentPage] = useState(1)
-  const [pagesPerPage, setPagesPerPage] = useState(10)
+  const [currentPage, setCurrentPage] = useState(Number(defaultPage) || 1)
+  const [pagesPerPage, setPagesPerPage] = useState(Number(defaultPageSize) || 10)
 
   // Get current products
   const [currentPages, setCurrentPages] = useState([])
@@ -84,6 +89,14 @@ const CmsUI = (props) => {
     setOpenModal(true)
   }
 
+  useEffect(() => {
+    if (!currentPage || !pagesPerPage || !totalPages) return
+    addQueryToUrl({
+      page: currentPage,
+      pageSize: pagesPerPage
+    })
+  }, [currentPage, pagesPerPage, totalPages])
+
   return (
     <>
       <StaticPageListContainer>

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

@@ -21,6 +21,7 @@ import {
 import { SearchBar } from '../../Shared'
 import { LanguageTransTable } from '../LanguageTransTable'
 import { LanguageTransSpread } from '../LanguageTransSpread'
+import { removeQueryToUrl } from '../../../utils'
 
 const LanguageManagerUI = (props) => {
   const {
@@ -67,7 +68,10 @@ const LanguageManagerUI = (props) => {
             </ViewIconWrapper>
             <ViewIconWrapper
               active={viewMode === 'spread'}
-              onClick={() => setViewMode('spread')}
+              onClick={() => {
+                setViewMode('spread')
+                removeQueryToUrl(['page', 'pageSize'])
+              }}
             >
               <Table />
             </ViewIconWrapper>

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

@@ -1,8 +1,10 @@
 import React, { useState, useEffect, useRef } from 'react'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, LanguageTransTable as LanguageTransTableController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Alert, Pagination } from '../../Shared'
 import { LinkButton } from '../../../styles'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   TranslationTableContainer,
@@ -29,9 +31,12 @@ const LanguageTransTableUI = (props) => {
   const [isShowCreation, setIsShowCreation] = useState(false)
   const translationCreateRef = useRef(null)
 
+  const query = new URLSearchParams(useLocation().search)
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
   // Change page
-  const [currentPage, setCurrentPage] = useState(1)
-  const [translationPerPage, setTranslationPerPage] = useState(10)
+  const [currentPage, setCurrentPage] = useState(Number(defaultPage) || 1)
+  const [translationPerPage, setTranslationPerPage] = useState(Number(defaultPageSize) || 10)
 
   // Get current products
   const [currentPages, setCurrentPages] = useState([])
@@ -110,6 +115,14 @@ const LanguageTransTableUI = (props) => {
     if (searchValue) setCurrentPage(1)
   }, [searchValue])
 
+  useEffect(() => {
+    if (!currentPage || !translationPerPage || !totalPages) return
+    addQueryToUrl({
+      page: currentPage,
+      pageSize: translationPerPage
+    })
+  }, [currentPage, translationPerPage, totalPages])
+
   return (
     <>
       <TranslationTableContainer>

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

@@ -33,8 +33,6 @@ export const SettingsListUI = (props) => {
     saveConfig
   } = props
 
-  const settingsNotAllowed = ['']
-
   const [, t] = useLanguage()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const closeAlert = () => {
@@ -144,44 +142,89 @@ export const SettingsListUI = (props) => {
               <FormContainer>
                 {
                   configs.length > 0 && configs.map((config, i) => (
-                    !settingsNotAllowed.includes(config.key) && (
-                      <div key={i}>
-                        {
-                          config.type === 1 && (
+                    <div key={i}>
+                      {
+                        config.type === 1 && (
+                          <FormGroupText className='form-group'>
+                            <label>{config?.name}</label>
+                            {config?.description && <Description>{config?.description}</Description>}
+                            <input
+                              type='text'
+                              value={config?.value}
+                              onChange={(e) => handleInputChange(e.target.value, config?.id)}
+                              onKeyPress={(e) => handleKeyPress(e, config?.key)}
+                              className='form-control'
+                              placeholder={config?.name}
+                            />
+                          </FormGroupText>
+                        )
+                      }
+                      {
+                        config.type === 2 && (
+                          config.key === 'country_autocomplete' ? (
+                            <SettingsCountryFilter
+                              defaultValue={config?.value}
+                              handleSelectChange={(value) => handleInputChange(value, config?.id)}
+                              label={config?.name}
+                              description={config?.description}
+                            />
+                          ) : (
+                            <SettingsSelectUI
+                              config={config}
+                              defaultValue={config?.value}
+                              handleSelectChange={(value) => handleInputChange(value, config?.id)}
+                            />
+                          )
+                        )
+                      }
+                      {
+                        config.type === 3 && (
+                          <CheckBoxWrapper>
+                            {config?.name && (
+                              <label>{config?.name}</label>
+                            )}
+                            {config?.description && (
+                              <p>{config?.description}</p>
+                            )}
+                            {
+                              config?.options?.length > 0 && config?.options?.map((item, j) => (
+                                <FormGroupWrapper key={j}>
+                                  <FormGroupCheck className='checkbox'>
+                                    <label>
+                                      <input
+                                        type='checkbox'
+                                        name={item?.value}
+                                        data-id={config?.id}
+                                        defaultChecked={config?.value.split('|').includes(item?.value)}
+                                        onChange={(e) => handleCheckBoxChange(e, true, config?.value)}
+                                      />
+                                      {t(item.text.toUpperCase(), item.text.replace(/_/g, ' ').toLowerCase())}
+                                    </label>
+                                  </FormGroupCheck>
+                                </FormGroupWrapper>
+                              ))
+                            }
+                            {
+                              !config?.options && <OptionsError>{t('NO_OPTIONS_VALUE', 'There is no options value')}</OptionsError>
+                            }
+                          </CheckBoxWrapper>
+                        )
+                      }
+                      {
+                        config.type === 4 && (
+                          config.key === 'driver_tip_options' ? (
                             <FormGroupText className='form-group'>
                               <label>{config?.name}</label>
                               {config?.description && <Description>{config?.description}</Description>}
                               <input
                                 type='text'
-                                value={config?.value}
+                                defaultValue={formatArray(config?.value)}
                                 onChange={(e) => handleInputChange(e.target.value, config?.id)}
-                                onKeyPress={(e) => handleKeyPress(e, config?.key)}
                                 className='form-control'
-                                placeholder={config?.name}
+                                placeholder='placeholder'
                               />
                             </FormGroupText>
-                          )
-                        }
-                        {
-                          config.type === 2 && (
-                            config.key === 'country_autocomplete' ? (
-                              <SettingsCountryFilter
-                                defaultValue={config?.value}
-                                handleSelectChange={(value) => handleInputChange(value, config?.id)}
-                                label={config?.name}
-                                description={config?.description}
-                              />
-                            ) : (
-                              <SettingsSelectUI
-                                config={config}
-                                defaultValue={config?.value}
-                                handleSelectChange={(value) => handleInputChange(value, config?.id)}
-                              />
-                            )
-                          )
-                        }
-                        {
-                          config.type === 3 && (
+                          ) : (
                             <CheckBoxWrapper>
                               {config?.name && (
                                 <label>{config?.name}</label>
@@ -198,75 +241,29 @@ export const SettingsListUI = (props) => {
                                           type='checkbox'
                                           name={item?.value}
                                           data-id={config?.id}
-                                          defaultChecked={config?.value.split('|').includes(item?.value)}
-                                          onChange={(e) => handleCheckBoxChange(e, true, config?.value)}
+                                          defaultChecked={JSON.parse(config?.value).includes(parseInt(item?.value))}
+                                          onChange={(e) => handleCheckBoxChange(e, false, config?.value)}
                                         />
-                                        {t(item.text.toUpperCase(), item.text.replace(/_/g, ' ').toLowerCase())}
+                                        {item.text}
                                       </label>
                                     </FormGroupCheck>
                                   </FormGroupWrapper>
                                 ))
                               }
-                              {
-                                !config?.options && <OptionsError>{t('NO_OPTIONS_VALUE', 'There is no options value')}</OptionsError>
-                              }
+                              {!config?.options && <OptionsError>{t('NO_OPTIONS_VALUE', 'There is no options value')}</OptionsError>}
                             </CheckBoxWrapper>
                           )
-                        }
-                        {
-                          config.type === 4 && (
-                            config.key === 'driver_tip_options' ? (
-                              <FormGroupText className='form-group'>
-                                <label>{config?.name}</label>
-                                {config?.description && <Description>{config?.description}</Description>}
-                                <input
-                                  type='text'
-                                  defaultValue={formatArray(config?.value)}
-                                  onChange={(e) => handleInputChange(e.target.value, config?.id)}
-                                  className='form-control'
-                                  placeholder='placeholder'
-                                />
-                              </FormGroupText>
-                            ) : (
-                              <CheckBoxWrapper>
-                                {config?.name && (
-                                  <label>{config?.name}</label>
-                                )}
-                                {config?.description && (
-                                  <p>{config?.description}</p>
-                                )}
-                                {
-                                  config?.options?.length > 0 && config?.options?.map((item, j) => (
-                                    <FormGroupWrapper key={j}>
-                                      <FormGroupCheck className='checkbox'>
-                                        <label>
-                                          <input
-                                            type='checkbox'
-                                            name={item?.value}
-                                            data-id={config?.id}
-                                            defaultChecked={JSON.parse(config?.value).includes(parseInt(item?.value))}
-                                            onChange={(e) => handleCheckBoxChange(e, false, config?.value)}
-                                          />
-                                          {item.text}
-                                        </label>
-                                      </FormGroupCheck>
-                                    </FormGroupWrapper>
-                                  ))
-                                }
-                                {!config?.options && <OptionsError>{t('NO_OPTIONS_VALUE', 'There is no options value')}</OptionsError>}
-                              </CheckBoxWrapper>
-                            )
-                          )
-                        }
-                        {
-                          config.type === 5 && (
-                            <SettingsImage
-                              config={config}
-                              saveConfig={saveConfig}
-                            />
-                          )
-                        }
-                        {/* {config.type === 6 && (
+                        )
+                      }
+                      {
+                        config.type === 5 && (
+                          <SettingsImage
+                            config={config}
+                            saveConfig={saveConfig}
+                          />
+                        )
+                      }
+                      {/* {config.type === 6 && (
                         <>
                           <FormGroupText className='form-group'>
                             <label>{config?.name}</label>
@@ -289,8 +286,7 @@ export const SettingsListUI = (props) => {
                           </FormGroupText>
                         </>
                         )} */}
-                      </div>
-                    )
+                    </div>
                   ))
                 }
               </FormContainer>

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

@@ -6,7 +6,7 @@ import { Option } from './styles'
 export const WebhookDelaySelector = (props) => {
   const {
     defaultValue,
-    handleChangeDelay
+    handleChangeDelay 
   } = props
 
   const [, t] = useLanguage()
@@ -17,7 +17,8 @@ export const WebhookDelaySelector = (props) => {
     { value: '600', content: <Option>10 {t('MINUTES', 'Minutes')}</Option> },
     { value: '900', content: <Option>15 {t('MINUTES', 'Minutes')}</Option> },
     { value: 'delivery_time', content: <Option>{t('DELIVERY_TIME', 'Delivery time')}</Option> },
-    { value: 'pickup_time', content: <Option>{t('PICKUP_TIME', 'Pickup time')}</Option> }
+    { value: 'pickup_time', content: <Option>{t('PICKUP_TIME', 'Pickup time')}</Option> },
+    { value: 'preparation_time', content: <Option>{t('PREPARATION_TIME', 'Preparation time')}</Option> },
   ]
   return (
     <>

package/src/components/Settings/WebhookList/styles.js

@@ -185,6 +185,9 @@ export const SelectorWrapper = styled.div`
 
   .select {
     border: none;
+    > div {
+      padding: 0;
+    }
   }
 `
 

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

@@ -27,6 +27,7 @@ export const WebhookListSelector = (props) => {
     { value: 'orders_pickup_failed_driver', content: <Option>{t('ORDERS_PICKUP_FAILED_DRIVER', 'Order pickup failed by driver')}</Option> },
     { value: 'orders_delivery_completed_driver', content: <Option>{t('ORDERS_DELIVERY_COMPLETED_DRIVER', 'Order delivery completed by driver')}</Option> },
     { value: 'orders_delivery_failed_driver', content: <Option>{t('ORDERS_DELIVERY_FAILED_DRIVER', 'Order delivery failed by driver')}</Option> },
+    { value: 'orders_unassigned_driver', content: <Option>{t('ORDERS_UNASSIGNED_DRIVER', 'Order unassigned driver')}</Option> },
     { value: 'preorder_updated', content: <Option>{t('PREORDER_UPDATED', 'Preorder updated')}</Option> },
     { value: 'drivers_changes', content: <Option>{t('DRIVERS_CHANGES', 'Driver changes')}</Option> }
   ]

package/src/components/Shared/Pagination/index.js

@@ -79,7 +79,7 @@ export const Pagination = (props) => {
     setActivePage(currentPage)
     const _visiblePages = getVisiblePages(currentPage, totalPages)
     setVisiblePages(filterPages(_visiblePages, totalPages))
-  }, [currentPage])
+  }, [currentPage, totalPages])
 
   return (
     <PaginationContainer>