ordering-ui-admin-external 1.14.3 → 1.15.1

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

@@ -1,22 +1,26 @@
-import React from 'react'
+import React, { useState, useEffect, useRef } from 'react'
+import { PlusCircle, Trash3 } from 'react-bootstrap-icons'
 import { useLanguage, OrdersFilter as OrdersFilterController } from 'ordering-components-admin-external'
 import { BusinessesSelector } from '../BusinessesSelector'
 import { DriversGroupTypeSelector } from '../DriversGroupTypeSelector'
 import { DateTypeSelector } from '../DateTypeSelector'
 import { DriverSelector } from '../DriverSelector'
 import { CitySelector, Modal } from '../../Shared'
-import { OrderStatusTypeSelector } from '../OrderStatusTypeSelector'
+// import { OrderStatusTypeSelector } from '../OrderStatusTypeSelector'
 import { DeliveryTypeSelector } from '../DeliveryTypeSelector'
 import { PaymethodTypeSelector } from '../PaymethodTypeSelector'
 import { CountryFilter } from '../CountryFilter'
-import { Button, Input } from '../../../styles'
+import { Button, IconButton, Input } from '../../../styles'
 import { CurrencyFilter } from '../CurrencyFilter'
+import { getUniqueId } from '../../../utils'
 
 import {
   FilterGroupListContainer,
   WrapperRow,
-  MultiSelectContainer,
-  ButtonGroup
+  // MultiSelectContainer,
+  ButtonGroup,
+  AddInputWrapper,
+  AddMetaFiled
 } from './styles'
 
 const OrdersFilterGroupUI = (props) => {
@@ -36,17 +40,23 @@ const OrdersFilterGroupUI = (props) => {
     handleChangeBusinesses,
     handleChangeDriver,
     handleChangeCity,
-    handleChangeOrderStatus,
+    // handleChangeOrderStatus,
     handleChangeDeliveryType,
     handleChangePaymethodType,
     handleResetFilterValues,
     handleChangeFilterValues,
     handleChangeOrderId,
     handleChangeCountryCode,
-    handleChangeCurrency
+    handleChangeCurrency,
+    handleChangeMetaFieldValue,
+    handleAddMetaField,
+    handleDeleteMetafield
   } = props
 
   const [, t] = useLanguage()
+  const [metafield, setMetaField] = useState({ key: '', value: '' })
+  const [isShow, setIsShow] = useState(false)
+  const metafieldRef = useRef()
 
   const handleAcceptFilter = () => {
     handleChangeFilterValues(filterValues)
@@ -58,6 +68,33 @@ const OrdersFilterGroupUI = (props) => {
     // handleChangeFilterValues({})
   }
 
+  const handleAddMetafieldValue = () => {
+    handleAddMetaField({
+      id: getUniqueId(),
+      key: metafield?.key,
+      value: metafield?.value
+    })
+    setMetaField({ key: '', value: '' })
+    setIsShow(false)
+  }
+
+  const handleDeleteMetafieldValue = (id) => {
+    handleDeleteMetafield(id)
+  }
+
+  const handleClickOutside = (e) => {
+    if (!isShow) return
+    const outsideCalendar = !metafieldRef.current?.contains(e.target)
+    if (outsideCalendar) {
+      setIsShow(false)
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('mouseup', handleClickOutside)
+    return () => window.removeEventListener('mouseup', handleClickOutside)
+  }, [isShow])
+
   return (
     <Modal
       width='80%'
@@ -75,6 +112,10 @@ const OrdersFilterGroupUI = (props) => {
             value={filterValues?.orderId || ''}
             onChange={(e) => handleChangeOrderId(e)}
           />
+          <CurrencyFilter
+            filterValues={filterValues}
+            handleChangeCurrency={handleChangeCurrency}
+          />
         </WrapperRow>
         <WrapperRow>
           <DriversGroupTypeSelector
@@ -131,12 +172,69 @@ const OrdersFilterGroupUI = (props) => {
             handleChangePaymethodType={handleChangePaymethodType}
           />
         </WrapperRow>
-        <WrapperRow>
-          <CurrencyFilter
-            filterValues={filterValues}
-            handleChangeCurrency={handleChangeCurrency}
-          />
-        </WrapperRow>
+        {filterValues?.metafield.map(item => (
+          <WrapperRow key={item.id}>
+            <Input
+              type='text'
+              name='key'
+              placeholder={t('METAFIELD_NAME', 'Metafield name')}
+              autoComplete='off'
+              value={item.key || ''}
+              onChange={(e) => handleChangeMetaFieldValue(e, item.id)}
+            />
+            {item?.key && (
+              <AddInputWrapper>
+                <Input
+                  type='text'
+                  name='value'
+                  placeholder={t('METAFIELD_VALUE', 'Metafield value')}
+                  autoComplete='off'
+                  value={item?.value || ''}
+                  onChange={(e) => handleChangeMetaFieldValue(e, item.id)}
+                />
+                <IconButton
+                  color='black'
+                  onClick={() => handleDeleteMetafieldValue(item.id)}
+                >
+                  <Trash3 />
+                </IconButton>
+              </AddInputWrapper>
+            )}
+          </WrapperRow>
+        ))}
+        {!isShow && (
+          <AddMetaFiled onClick={() => setIsShow(true)}>{t('ADD_METAFIELD', 'Add a metafield')}</AddMetaFiled>
+        )}
+        {isShow && (
+          <WrapperRow ref={metafieldRef}>
+            <Input
+              type='text'
+              name='key'
+              placeholder={t('METAFIELD_NAME', 'Metafield name')}
+              autoComplete='off'
+              value={metafield.key || ''}
+              onChange={(e) => setMetaField({ ...metafield, key: e.target.value })}
+            />
+            {metafield?.key && (
+              <AddInputWrapper>
+                <Input
+                  type='text'
+                  name='value'
+                  placeholder={t('METAFIELD_VALUE', 'Metafield value')}
+                  autoComplete='off'
+                  value={metafield.value || ''}
+                  onChange={(e) => setMetaField({ ...metafield, value: e.target.value })}
+                />
+                <IconButton
+                  color='primary'
+                  onClick={handleAddMetafieldValue}
+                >
+                  <PlusCircle />
+                </IconButton>
+              </AddInputWrapper>
+            )}
+          </WrapperRow>
+        )}
         <ButtonGroup>
           <Button
             color='primary'

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

@@ -123,3 +123,29 @@ export const ButtonGroup = styled.div`
     }
   }
 `
+
+export const AddInputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: transparent !important;
+  input {
+    flex: 1;
+    height: 57px;
+  }
+  button {
+    width: 30px;
+    height: 30px;
+    margin-left: 10px;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const AddMetaFiled = styled.span`
+  font-size: 14px;
+  color: ${props => props.theme.colors.primary};
+  cursor: pointer;
+  width: 100%;
+`

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

@@ -149,7 +149,6 @@ const OrdersManagerUI = (props) => {
         handleBackRedirect()
       } else {
         setOrderDetailId(id)
-        onOrderRedirect && onOrderRedirect(id)
         setIsOpenOrderDetail(true)
       }
     }

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Pagination, SideBar, Confirm } from '../../Shared'
@@ -34,6 +35,8 @@ export const CountriesList = (props) => {
     handleDeleteCountry
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
   const [currentPage, setCurrentPage] = useState(1)
@@ -70,11 +73,14 @@ export const CountriesList = (props) => {
     setCurrentCountries(_currentDropdownOptions)
   }, [countriesState, currentPage, countriesPerPage, searchValue])
 
-  const handleClickCountry = (e, country) => {
-    const isInvalid = e.target.closest('.country-checkbox') || e.target.closest('.country-enabled') || e.target.closest('.country-actions')
+  const handleClickCountry = (e, country, isInitialRender) => {
+    const isInvalid = e?.target?.closest('.country-checkbox') || e?.target?.closest('.country-enabled') || e?.target?.closest('.country-actions')
     if (isInvalid) return
     setSelectedCountry(country)
     setOpenDetails(true)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?country=${country.id}`)
+    }
   }
 
   const onDeleteCountry = (countryId) => {
@@ -106,12 +112,29 @@ export const CountriesList = (props) => {
     }
   }
 
+  const handleCloseDetail = () => {
+    setOpenDetails(false)
+    setSelectedCountry(null)
+    history.replace(`${location.pathname}`)
+  }
+
   useEffect(() => {
     if (actionState.loading || actionState.error || selectedCountry) return
     setOpenDetails(false)
     setSelectedCountry(null)
   }, [actionState])
 
+  useEffect(() => {
+    if (countriesState.loading) return
+    const countryId = query.get('country')
+    if (countryId) {
+      const initCountry = countriesState.countries.find(country => country.id === Number(countryId))
+      if (initCountry) {
+        handleClickCountry(null, initCountry, true)
+      }
+    }
+  }, [countriesState.loading])
+
   return (
     <CountriesContainer>
       <CountryWrapper isHeader>
@@ -222,10 +245,7 @@ export const CountriesList = (props) => {
       {openDetails && (
         <SideBar
           open={openDetails}
-          onClose={() => {
-            setOpenDetails(false)
-            setSelectedCountry(null)
-          }}
+          onClose={() => handleCloseDetail()}
           showExpandIcon
         >
           <CountryDetails

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { Button, IconButton } from '../../../styles'
 import { DragScroll, Modal } from '../../Shared'
@@ -26,6 +27,8 @@ export const Deliverect = (props) => {
     onClose
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
 
@@ -64,12 +67,33 @@ export const Deliverect = (props) => {
     toggleMainContent()
   }, [width])
 
+  const handleOpenMore = (isInitialRender) => {
+    setSettingsOpen(true)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&more=settings`)
+    }
+  }
+
+  const handleCloseDescription = () => {
+    setSettingsOpen(false)
+    const id = query.get('id')
+    history.replace(`${location.pathname}?id=${id}`)
+  }
+
+  useEffect(() => {
+    const more = query.get('more')
+    if (more === 'settings') {
+      handleOpenMore(true)
+    }
+  }, [])
+
   const LalaMoveConnectDescription = () => {
     return (
       <CategoryExtraContent>
         <IconButton
           color='black'
-          onClick={() => setSettingsOpen(false)}
+          onClick={() => handleCloseDescription()}
         >
           <XLg />
         </IconButton>
@@ -134,7 +158,7 @@ export const Deliverect = (props) => {
           <Button color='lightPrimary'>{t('NEW', 'New')}</Button>
         </Header>
         <Description dangerouslySetInnerHTML={{ __html: t('SYNC_DEC_SECOND', 'Deliverect integrates all your <span>online orders</span> to your <span>existing POS</span> or our <span>Delivery Manger app.</span> Restaurants large and small rely on Deliverect to reduce failures and order mistakes while speeding up order preparation.') }} />
-        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => setSettingsOpen(true)}>
+        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => handleOpenMore()}>
           <span>{t('SETTINGS', 'All settings')}</span>
           <BsArrowRight />
         </Button>

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, ApiKeysList as ApiKeysListController } from 'ordering-components-admin-external'
 import { Button, IconButton } from '../../../styles'
 import { Alert, Confirm, DragScroll, Modal } from '../../Shared'
@@ -26,6 +27,8 @@ const DoordashConnectUI = (props) => {
     onClose
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
 
@@ -78,12 +81,33 @@ const DoordashConnectUI = (props) => {
     toggleMainContent()
   }, [width])
 
+  const handleOpenMore = (isInitialRender) => {
+    setSettingsOpen(true)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&more=settings`)
+    }
+  }
+
+  const handleCloseDescription = () => {
+    setSettingsOpen(false)
+    const id = query.get('id')
+    history.replace(`${location.pathname}?id=${id}`)
+  }
+
+  useEffect(() => {
+    const more = query.get('more')
+    if (more === 'settings') {
+      handleOpenMore(true)
+    }
+  }, [])
+
   const DoordashConnectDescription = () => {
     return (
       <CategoryExtraContent>
         <IconButton
           color='black'
-          onClick={() => setSettingsOpen(false)}
+          onClick={() => handleCloseDescription()}
         >
           <XLg />
         </IconButton>
@@ -179,7 +203,7 @@ const DoordashConnectUI = (props) => {
         <Description>
           {t('CONNECT_WITH_DOORDASH_DESCRIPTION', 'If you have already worked with Doordash or are running your business with Doordash and Ordering simultaneously, this integration will help you connect both platforms and assign orders through them, making your job easy and automated.')}
         </Description>
-        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => setSettingsOpen(true)}>
+        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => handleOpenMore()}>
           <span>{t('SETTINGS', 'All settings')}</span>
           <BsArrowRight />
         </Button>

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
@@ -46,6 +47,8 @@ export const DropdownOptionList = (props) => {
     handleAllCheckboxZoneClick
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
   const [cities, setCities] = useState([])
@@ -93,10 +96,20 @@ export const DropdownOptionList = (props) => {
     setCities(_cities)
   }, [countriesState])
 
-  const handleClickZoneDropdown = (e, zone) => {
-    const isInvalid = e.target.closest('.zone-checkbox') || e.target.closest('.zone-enabled') || e.target.closest('.zone-actions')
+  const handleClickZoneDropdown = (e, zone, isInitialRender) => {
+    const isInvalid = e?.target?.closest('.zone-checkbox') || e?.target?.closest('.zone-enabled') || e?.target?.closest('.zone-actions')
     if (isInvalid) return
     handleOpenZoneDropdownDetails(zone)
+
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?zone=${zone.id}`)
+    }
+  }
+
+  const handleCloseZoneDetail = () => {
+    setSelectedZoneDropdown(null)
+    setOpenZonedropdown(false)
+    history.replace(`${location.pathname}`)
   }
 
   const onDeleteZone = (zoneId) => {
@@ -110,6 +123,17 @@ export const DropdownOptionList = (props) => {
     })
   }
 
+  useEffect(() => {
+    if (dropdownOptionsState.loading) return
+    const zoneId = query.get('zone')
+    if (zoneId) {
+      const initZone = dropdownOptionsState.options.find(item => item.id === Number(zoneId))
+      if (initZone) {
+        handleClickZoneDropdown(null, initZone, true)
+      }
+    }
+  }, [dropdownOptionsState.loading])
+
   return (
     <>
       <DropdownOptionsContainer>
@@ -236,10 +260,7 @@ export const DropdownOptionList = (props) => {
           sidebarId='city-details'
           defaultSideBarWidth={550}
           open={openZoneDropdown}
-          onClose={() => {
-            setSelectedZoneDropdown(null)
-            setOpenZonedropdown(false)
-          }}
+          onClose={() => handleCloseZoneDetail()}
           showExpandIcon
         >
           <ZoneDropdownDetails

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

@@ -41,11 +41,11 @@ export const IntegrationListing = (props) => {
 
   const settingId = settingParams && settingParams.split('=')[1]
 
-  const onBasicSettingsRedirect = ({ id }) => {
+  const onBasicSettingsRedirect = ({ id }, isInitialRender) => {
     if (!id) {
       return events.emit('go_to_page', { page: 'integrations', replace: true })
     }
-    if (id) {
+    if (id && !isInitialRender) {
       events.emit('go_to_page', {
         page: 'integrations',
         search: `?id=${id}`,
@@ -66,7 +66,7 @@ export const IntegrationListing = (props) => {
 
   useEffect(() => {
     if (settingId) {
-      onBasicSettingsRedirect({ id: settingId })
+      onBasicSettingsRedirect({ id: settingId }, true)
       setShowOption(settingId)
     }
   }, [])

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { Button, IconButton } from '../../../styles'
 import { DragScroll, Modal } from '../../Shared'
@@ -26,6 +27,8 @@ export const ItsaCheckmate = (props) => {
     onClose
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
 
@@ -64,12 +67,33 @@ export const ItsaCheckmate = (props) => {
     toggleMainContent()
   }, [width])
 
+  const handleOpenMore = (isInitialRender) => {
+    setSettingsOpen(true)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&more=settings`)
+    }
+  }
+
+  const handleCloseDescription = () => {
+    setSettingsOpen(false)
+    const id = query.get('id')
+    history.replace(`${location.pathname}?id=${id}`)
+  }
+
+  useEffect(() => {
+    const more = query.get('more')
+    if (more === 'settings') {
+      handleOpenMore(true)
+    }
+  }, [])
+
   const LalaMoveConnectDescription = () => {
     return (
       <CategoryExtraContent>
         <IconButton
           color='black'
-          onClick={() => setSettingsOpen(false)}
+          onClick={() => handleCloseDescription()}
         >
           <XLg />
         </IconButton>
@@ -155,7 +179,7 @@ export const ItsaCheckmate = (props) => {
             <p>{t('ITSACHECKMATE_MENU_4', 'Add, edit, or delete items ')}</p>
           </div>
         </Description>
-        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => setSettingsOpen(true)}>
+        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => handleOpenMore()}>
           <span>{t('SETTINGS', 'All settings')}</span>
           <BsArrowRight />
         </Button>

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, ApiKeysList as ApiKeysListController } from 'ordering-components-admin-external'
 import { Button, IconButton } from '../../../styles'
 import { Alert, Confirm, DragScroll, Modal } from '../../Shared'
@@ -26,6 +27,8 @@ const LalaMoveConnectUI = (props) => {
     onClose
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
 
@@ -78,12 +81,33 @@ const LalaMoveConnectUI = (props) => {
     toggleMainContent()
   }, [width])
 
+  const handleOpenMore = (isInitialRender) => {
+    setSettingsOpen(true)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&more=settings`)
+    }
+  }
+
+  const handleCloseDescription = () => {
+    setSettingsOpen(false)
+    const id = query.get('id')
+    history.replace(`${location.pathname}?id=${id}`)
+  }
+
+  useEffect(() => {
+    const more = query.get('more')
+    if (more === 'settings') {
+      handleOpenMore(true)
+    }
+  }, [])
+
   const LalaMoveConnectDescription = () => {
     return (
       <CategoryExtraContent>
         <IconButton
           color='black'
-          onClick={() => setSettingsOpen(false)}
+          onClick={() => handleCloseDescription()}
         >
           <XLg />
         </IconButton>
@@ -179,7 +203,7 @@ const LalaMoveConnectUI = (props) => {
         <Description>
           {t('CONNECT_WITH_LALAMOVE_DESCRIPTION', 'If you have already worked with LalaMove or are running your business with LalaMove and Ordering simultaneously, this integration will help you connect both platforms and assign orders through them, making your job easy and automated.')}
         </Description>
-        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => setSettingsOpen(true)}>
+        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => handleOpenMore()}>
           <span>{t('SETTINGS', 'All settings')}</span>
           <BsArrowRight />
         </Button>

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, ApiKeysList as ApiKeysListController } from 'ordering-components-admin-external'
 import { Button, IconButton } from '../../../styles'
 import { Alert, Confirm, DragScroll, Modal } from '../../Shared'
@@ -26,6 +27,8 @@ const PickerExpressUI = (props) => {
     onClose
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
 
@@ -78,12 +81,33 @@ const PickerExpressUI = (props) => {
     toggleMainContent()
   }, [width])
 
+  const handleOpenMore = (isInitialRender) => {
+    setSettingsOpen(true)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&more=settings`)
+    }
+  }
+
+  const handleCloseDescription = () => {
+    setSettingsOpen(false)
+    const id = query.get('id')
+    history.replace(`${location.pathname}?id=${id}`)
+  }
+
+  useEffect(() => {
+    const more = query.get('more')
+    if (more === 'settings') {
+      handleOpenMore(true)
+    }
+  }, [])
+
   const LalaMoveConnectDescription = () => {
     return (
       <CategoryExtraContent>
         <IconButton
           color='black'
-          onClick={() => setSettingsOpen(false)}
+          onClick={() => handleCloseDescription()}
         >
           <XLg />
         </IconButton>
@@ -179,7 +203,7 @@ const PickerExpressUI = (props) => {
         <Description>
           {t('CONNECT_WITH_PICKER_EXPRESS_DESCRIPTION', 'If you have already worked with Pickerexpress or are running your business with Pickerexpress and Ordering simultaneously, this integration will help you connect both platforms and assign orders through them, making your job easy and automated.')}
         </Description>
-        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => setSettingsOpen(true)}>
+        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => handleOpenMore()}>
           <span>{t('SETTINGS', 'All settings')}</span>
           <BsArrowRight />
         </Button>