ordering-ui-admin-external 1.13.4 → 1.14.0

package/_modules/index.js

@@ -1635,12 +1635,6 @@ Object.defineProperty(exports, "PluginList", {
     return _Settings.PluginList;
   }
 });
-Object.defineProperty(exports, "PointsWallet", {
-  enumerable: true,
-  get: function get() {
-    return _Loyalty.PointsWallet;
-  }
-});
 Object.defineProperty(exports, "PointsWalletBusinessDetail", {
   enumerable: true,
   get: function get() {
@@ -2295,6 +2289,12 @@ Object.defineProperty(exports, "UsersReviewList", {
     return _BusinessIntelligence.UsersReviewList;
   }
 });
+Object.defineProperty(exports, "Wallet", {
+  enumerable: true,
+  get: function get() {
+    return _Loyalty.Wallet;
+  }
+});
 Object.defineProperty(exports, "WebhookDelaySelector", {
   enumerable: true,
   get: function get() {

package/index-template.js

@@ -49,6 +49,39 @@ import importedMenu from './template/assets/images/imported-menu.png'
 import projectActive from './template/assets/images/projectStatuses/project-active.png'
 import projectPastDuePayment from './template/assets/images/projectStatuses/project-past-due-payment.png'
 
+/**
+ * sales channels
+ */
+import facebookProfileStep2 from './template/assets/images/salesChannels/facebook-profile-step2.png'
+import facebookProfileStep31 from './template/assets/images/salesChannels/facebook-profile-step3-1.png'
+import facebookProfileStep32 from './template/assets/images/salesChannels/facebook-profile-step3-2.png'
+import facebookProfileStep4 from './template/assets/images/salesChannels/facebook-profile-step4.png'
+import facebookProfileStep5 from './template/assets/images/salesChannels/facebook-profile-step5.png'
+import facebookPostStep1 from './template/assets/images/salesChannels/facebook-post-step1.png'
+import facebookPostStep2 from './template/assets/images/salesChannels/facebook-post-step2.png'
+import tiktokStep1 from './template/assets/images/salesChannels/tiktok-step1.png'
+import tiktokStep2 from './template/assets/images/salesChannels/tiktok-step2.png'
+import tiktokStep3 from './template/assets/images/salesChannels/tiktok-step3.png'
+import tiktokStep4 from './template/assets/images/salesChannels/tiktok-step4.png'
+import tiktokStep5 from './template/assets/images/salesChannels/tiktok-step5.png'
+import tiktokStep6 from './template/assets/images/salesChannels/tiktok-step6.png'
+import tiktokStep7 from './template/assets/images/salesChannels/tiktok-step7.png'
+import tiktokStep8 from './template/assets/images/salesChannels/tiktok-step8.png'
+import tiktokStep9 from './template/assets/images/salesChannels/tiktok-step9.png'
+import tiktokStep10 from './template/assets/images/salesChannels/tiktok-step10.png'
+import instagramGeneralStep2 from './template/assets/images/salesChannels/instagram-general-step2.png'
+import instagramGeneralStep3 from './template/assets/images/salesChannels/instagram-general-step3.png'
+import instagramGeneralStep4 from './template/assets/images/salesChannels/instagram-general-step4.png'
+import instagramGeneralStep5 from './template/assets/images/salesChannels/instagram-general-step5.png'
+import instagramGeneralStep6 from './template/assets/images/salesChannels/instagram-general-step6.png'
+import instagramAdvancedStep31 from './template/assets/images/salesChannels/instagram-advanced-step31.png'
+import instagramAdvancedStep32 from './template/assets/images/salesChannels/instagram-advanced-step32.png'
+import instagramAdvancedStep41 from './template/assets/images/salesChannels/instagram-advanced-step41.png'
+import instagramAdvancedStep42 from './template/assets/images/salesChannels/instagram-advanced-step42.png'
+import googleStep1 from './template/assets/images/salesChannels/google-step1.png'
+import googleStep2 from './template/assets/images/salesChannels/google-step2.png'
+import googleStep3 from './template/assets/images/salesChannels/google-step3.png'
+
 /**
  * Theme apps
  */
@@ -105,6 +138,10 @@ import batchWise from './template/assets/images/icons/batch-wise.svg'
 import roundRobin from './template/assets/images/icons/round-robin.svg'
 import leftArrow from './template/assets/images/icons/left-arrow.svg'
 import rightArrow from './template/assets/images/icons/right-arrow.svg'
+import facebook from './template/assets/images/icons/facebook.svg'
+import tiktok from './template/assets/images/icons/tiktok.svg'
+import instagram from './template/assets/images/icons/instagram.svg'
+import businessGoogle from './template/assets/images/icons/business-google.svg'
 
 import orderPending from './template/assets/images/orderStatus/pending.svg'
 import orderInProgress from './template/assets/images/orderStatus/inProgress.svg'
@@ -422,6 +459,37 @@ theme.images = {
     playStoreSmall,
     customProject
   },
+  salesChannels: {
+    facebookProfileStep2,
+    facebookProfileStep31,
+    facebookProfileStep32,
+    facebookProfileStep4,
+    facebookProfileStep5,
+    facebookPostStep1,
+    facebookPostStep2,
+    tiktokStep1,
+    tiktokStep2,
+    tiktokStep3,
+    tiktokStep4,
+    tiktokStep5,
+    tiktokStep6,
+    tiktokStep7,
+    tiktokStep8,
+    tiktokStep9,
+    tiktokStep10,
+    instagramGeneralStep2,
+    instagramGeneralStep3,
+    instagramGeneralStep4,
+    instagramGeneralStep5,
+    instagramGeneralStep6,
+    instagramAdvancedStep31,
+    instagramAdvancedStep32,
+    instagramAdvancedStep41,
+    instagramAdvancedStep42,
+    googleStep1,
+    googleStep2,
+    googleStep3
+  },
   pos: {
     square,
     toast,
@@ -522,6 +590,10 @@ theme.images = {
     roundRobin: roundRobin,
     leftArrow: leftArrow,
     rightArrow: rightArrow,
+    facebook: facebook,
+    tiktok: tiktok,
+    instagram: instagram,
+    businessGoogle: businessGoogle,
     clock1: clock1,
     clockRisk: clockRisk,
     clockDelayed: clockDelayed,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.13.4",
+  "version": "1.14.0",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.13.3",
+    "ordering-components-admin-external": "1.14.0",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

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

@@ -138,6 +138,7 @@ const BusinessReviewsListingUI = (props) => {
             setCurBusiness(null)
             setOpenReview(false)
           }}
+          showExpandIcon
         >
           <BusinessReviewDetails
             business={curBusiness}

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

@@ -21,9 +21,9 @@ export const DetailsHeader = styled.div`
   }
 
   ${props => props.theme?.rtl ? css`
-    padding-left: 35px;
+    padding-left: 60px;
   ` : css`
-    padding-right: 35px;
+    padding-right: 60px;
   `}
 `
 

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

@@ -21,9 +21,9 @@ export const DetailsHeader = styled.div`
   }
 
   ${props => props.theme?.rtl ? css`
-    padding-left: 35px;
+    padding-left: 60px;
   ` : css`
-    padding-right: 35px;
+    padding-right: 60px;
   `}
 `
 export const DetailsList = styled.div`

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

@@ -77,6 +77,7 @@ export const InvoiceManager = (props) => {
             sidebarId='invoice_details'
             open={openInvoiceDetail}
             onClose={handleCloseInvoiceDetail}
+            showExpandIcon
           >
             <InvoiceDetails
               selectedInvoice={selectedInvoice}

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

@@ -26,7 +26,8 @@ const DriversReviewListUI = (props) => {
     usersList,
     paginationProps,
     getUsers,
-    onSearch
+    onSearch,
+    defaultUserTypesSelected
   } = props
 
   const [, t] = useLanguage()
@@ -34,6 +35,7 @@ const DriversReviewListUI = (props) => {
 
   const [openReview, setOpenReview] = useState(false)
   const [curDriver, setCurDriver] = useState(null)
+  const headerTitle = defaultUserTypesSelected.length === 1 && defaultUserTypesSelected[0] === 3 ? t('CUSTOMER', 'Customer') : defaultUserTypesSelected[0] === 8 ? t('PROFESSIONAL', 'Professional') : t('DRIVER', 'Driver')
 
   const handleChangePage = (page) => {
     getUsers(page, 10)
@@ -65,7 +67,7 @@ const DriversReviewListUI = (props) => {
       <ReviewsTable>
         <thead>
           <tr>
-            <th><ReviewObject isHeader>{t('DRIVER', 'Driver')}</ReviewObject></th>
+            <th><ReviewObject isHeader>{headerTitle}</ReviewObject></th>
             <th><ReviewMarkerWrapper isHeader>{t('REVIEWS', 'Reviews')}</ReviewMarkerWrapper></th>
           </tr>
         </thead>
@@ -146,6 +148,7 @@ const DriversReviewListUI = (props) => {
             setCurDriver(null)
             setOpenReview(false)
           }}
+          showExpandIcon
         >
           <UserReviewDetails
             userId={curDriver?.id}

package/src/components/CartRecovery/OpenCartsDetail/index.js

@@ -6,7 +6,7 @@ import { OpenCartBill } from '../OpenCartBill'
 import { OpenCartsContactInformation } from '../OpenCartsContactInformation'
 import { NotFoundSource } from '../../Shared'
 import { IconButton as ButtonLink } from '../../../styles'
-import { XLg as CloseIcon } from 'react-bootstrap-icons'
+import { ArrowsAngleContract, ArrowsAngleExpand, XLg as CloseIcon } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
 
 import {
@@ -32,6 +32,7 @@ const OpenCartsDetailUI = (props) => {
   const [{ parseDate }] = useUtils()
 
   const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
 
   const actionSidebar = (value) => {
     setIsMenuOpen(value)
@@ -66,6 +67,13 @@ const OpenCartsDetailUI = (props) => {
     }
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('cartDetails')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (!open) return
     document.addEventListener('keydown', onCloseSidebar)
@@ -100,6 +108,14 @@ const OpenCartsDetailUI = (props) => {
                   </p>
                 </OrderInfoWrapper>
                 <ButtonGroup>
+                  {width > 576 && (
+                    <ButtonLink
+                      color='black'
+                      onClick={expandSidebar}
+                    >
+                      {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+                    </ButtonLink>
+                  )}
                   <ButtonLink
                     color='black'
                     onClick={() => props.onClose() && props.onClose()}

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

@@ -100,7 +100,9 @@ export const OrderInfoWrapper = styled.div`
   }
 `
 
-export const ButtonGroup = styled.div``
+export const ButtonGroup = styled.div`
+  display: flex;
+`
 
 export const SkeletonWrapper = styled.div`
   width: 100%;

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

@@ -2,8 +2,8 @@ import React, { useState, useEffect } from 'react'
 import { useLanguage, RecoveryActionDetail as RecoveryActionDetailController } from 'ordering-components-admin-external'
 import { Alert, Confirm } from '../../Shared'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
-import { ThreeDots } from 'react-bootstrap-icons'
-import { Switch } from '../../../styles'
+import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
+import { IconButton, Switch } from '../../../styles'
 import { useTheme } from 'styled-components'
 
 import {
@@ -18,6 +18,7 @@ import {
 } from './styles'
 import { RecoveryGeneral } from '../RecoveryGeneral'
 import { RecoveryNotificationList } from '../RecoveryNotificationList'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 const RecoveryActionDetailUI = (props) => {
   const {
@@ -31,10 +32,12 @@ const RecoveryActionDetailUI = (props) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
+  const { width } = useWindowSize()
 
   const [selectedOption, setSelectedOption] = useState('general')
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [isExpand, setIsExpand] = useState(false)
 
   const recoveryOptionList = [
     { key: 'general', name: t('GENERAL', 'General') },
@@ -70,6 +73,13 @@ const RecoveryActionDetailUI = (props) => {
     })
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('loyaltyWallet')
+    if (isExpand) element.style.width = '550px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (!actionState?.error || actionState.loading) return
     setAlertState({
@@ -95,8 +105,16 @@ const RecoveryActionDetailUI = (props) => {
               onChange={val => handleChangeItem({ enabled: val })}
             />
           </LeftHeader>
-          {!isAddMode && (
-            <RightHeader>
+          <RightHeader>
+            {width > 576 && (
+              <IconButton
+                color='black'
+                onClick={expandSidebar}
+              >
+                {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+              </IconButton>
+            )}
+            {!isAddMode && (
               <ActionSelectorWrapper>
                 <DropdownButton
                   menuAlign={theme?.rtl ? 'left' : 'right'}
@@ -111,8 +129,8 @@ const RecoveryActionDetailUI = (props) => {
                   </Dropdown.Item>
                 </DropdownButton>
               </ActionSelectorWrapper>
-            </RightHeader>
-          )}
+            )}
+          </RightHeader>
         </DetailsHeader>
         <Tabs>
           {recoveryOptionList.map(option => (

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

@@ -36,16 +36,15 @@ export const RightHeader = styled.div`
   align-items: center;
   margin-top: 3px;
   margin-bottom: 24px;
-`
-
-export const ActionSelectorWrapper = styled.div`
   padding-right: 35px;
 
   ${props => props.theme.rtl && css`
     padding-left: 35px;
     padding-right: 0px;
   `}
+`
 
+export const ActionSelectorWrapper = styled.div`
   button {
     background: transparent !important;
     border: none;

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

@@ -196,9 +196,5 @@ export const PagesBottomContainer = styled.div`
 export const AddNewPageButton = styled.div`
   cursor: pointer;
   font-size: 14px;
-  color: ${props => props.theme.colors.lightGray};
-
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
+  color: ${props => props.theme.colors.primary};
 `

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

@@ -212,6 +212,7 @@ const DeliveryUsersListingUI = (props) => {
           open={openUserAddForm}
           noAnimation={isTourOpen}
           onClose={() => handleCloseAddForm()}
+          showExpandIcon
         >
           <UserAddForm
             isDriversPage={isDriversPage}

package/src/components/Delivery/DriversCompaniesList/styles.js

@@ -132,5 +132,5 @@ export const PagesBottomContainer = styled.div`
 export const AddNewCompanyButton = styled.div`
   cursor: pointer;
   font-size: 12px;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
 `

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

@@ -4,7 +4,7 @@ import {
   DriversCompanyDetails as DriversCompanyDetailsController
 } from 'ordering-components-admin-external'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
-import { ThreeDots } from 'react-bootstrap-icons'
+import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
 import { Alert, Confirm, DragScroll } from '../../Shared'
 
@@ -17,8 +17,11 @@ import {
   Header,
   TabsContainer,
   Tab,
-  ActionSelectorWrapper
+  ActionSelectorWrapper,
+  RightHeader
 } from './styles'
+import { IconButton } from '../../../styles'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 const DriversCompanyDetailsFormUI = (props) => {
   const {
@@ -31,9 +34,11 @@ const DriversCompanyDetailsFormUI = (props) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
+  const { width } = useWindowSize()
   const [currentTabItem, setCurrentTabItem] = useState('general')
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [isExpand, setIsExpand] = useState(false)
 
   const tabItems = [
     { key: 'general', content: t('GENERAL', 'General') },
@@ -60,6 +65,14 @@ const DriversCompanyDetailsFormUI = (props) => {
     })
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('city-details')
+    if (!element) return
+    if (isExpand) element.style.width = '550px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (!actionState.loading && actionState.error) {
       setAlertState({
@@ -80,21 +93,31 @@ const DriversCompanyDetailsFormUI = (props) => {
                 : t('DRIVER_COMPANY_SETTINGS', 'Driver company settings')
             }
           </h1>
-          {driversCompany && (
-            <ActionSelectorWrapper>
-              <DropdownButton
-                menuAlign={theme?.rtl ? 'left' : 'right'}
-                title={<ThreeDots />}
-                id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+          <RightHeader>
+            {width > 576 && (
+              <IconButton
+                color='black'
+                onClick={expandSidebar}
               >
-                <Dropdown.Item
-                  onClick={() => onDeleteCompany()}
+                {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+              </IconButton>
+            )}
+            {driversCompany && (
+              <ActionSelectorWrapper>
+                <DropdownButton
+                  menuAlign={theme?.rtl ? 'left' : 'right'}
+                  title={<ThreeDots />}
+                  id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
                 >
-                  {t('DELETE', 'Delete')}
-                </Dropdown.Item>
-              </DropdownButton>
-            </ActionSelectorWrapper>
-          )}
+                  <Dropdown.Item
+                    onClick={() => onDeleteCompany()}
+                  >
+                    {t('DELETE', 'Delete')}
+                  </Dropdown.Item>
+                </DropdownButton>
+              </ActionSelectorWrapper>
+            )}
+          </RightHeader>
         </Header>
         <TabsContainer>
           <DragScroll>

package/src/components/Delivery/DriversCompanyDetailsForm/styles.js

@@ -12,12 +12,11 @@ export const Header = styled.div`
   align-items: center;
   justify-content: space-between;
   margin-bottom: 19px;
-  margin-top: 4px;
 
   ${props => props.theme?.rtl ? css`
-    margin-left: 40px;
+    margin-left: 35px;
   ` : css`
-    margin-right: 40px;
+    margin-right: 35px;
   `}
   h1 {
     font-size: 20px;
@@ -55,9 +54,9 @@ export const Tab = styled.div`
 `
 export const ActionSelectorWrapper = styled.div`
   ${props => props.theme?.rtl ? css`
-    margin-right: 20px;
+    margin-right: 5px;
   ` : css`
-    margin-left: 20px;
+    margin-left: 5px;
   `}
   button {
     background: transparent !important;
@@ -108,3 +107,8 @@ export const ActionSelectorWrapper = styled.div`
     }
   }
 `
+
+export const RightHeader = styled.div`
+  display: flex;
+  align-items: center;
+`

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

@@ -5,9 +5,9 @@ import {
   DriversGroupDetails as DriversGroupDetailsController
 } from 'ordering-components-admin-external'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
-import { ThreeDots } from 'react-bootstrap-icons'
+import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
-import { Switch } from '../../../styles'
+import { IconButton, Switch } from '../../../styles'
 import { Alert, Confirm, DragScroll } from '../../Shared'
 import { DriversGroupGeneralForm } from '../DriversGroupGeneralForm'
 import { DriversGroupBusinesses } from '../DriversGroupBusinesses'
@@ -22,7 +22,8 @@ import {
   Header,
   MenusContainer,
   Tab,
-  ActionSelectorWrapper
+  ActionSelectorWrapper,
+  RightHeader
 } from './styles'
 
 const DriversGroupDetailsUI = (props) => {
@@ -49,6 +50,7 @@ const DriversGroupDetailsUI = (props) => {
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [isOpenDetails, setIsOpenDetails] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
 
   useEffect(() => {
     const _driversGroupMenus = !driversGroupState.driversGroup
@@ -95,6 +97,14 @@ const DriversGroupDetailsUI = (props) => {
     handleNextTour()
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('driver_group_details')
+    if (!element) return
+    if (isExpand) element.style.width = '540px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     setUseAdvanced(!(driversGroupState.driversGroup?.autoassign_amount_drivers === 0 && driversGroupState.driversGroup?.orders_group_max_orders === 0))
   }, [driversGroupState.driversGroup])
@@ -126,24 +136,44 @@ const DriversGroupDetailsUI = (props) => {
                   onChange={enabled => handleUpdateDriversGroup({ enabled: enabled })}
                 />
               </div>
-              <ActionSelectorWrapper>
-                <DropdownButton
-                  menuAlign={theme?.rtl ? 'left' : 'right'}
-                  title={<ThreeDots />}
-                  id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
-                >
-                  <Dropdown.Item
-                    onClick={() => onDeleteGroup()}
+              <RightHeader>
+                {width > 576 && (
+                  <IconButton
+                    color='black'
+                    onClick={expandSidebar}
                   >
-                    {t('DELETE', 'Delete')}
-                  </Dropdown.Item>
-                </DropdownButton>
-              </ActionSelectorWrapper>
+                    {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+                  </IconButton>
+                )}
+                <ActionSelectorWrapper>
+                  <DropdownButton
+                    menuAlign={theme?.rtl ? 'left' : 'right'}
+                    title={<ThreeDots />}
+                    id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+                  >
+                    <Dropdown.Item
+                      onClick={() => onDeleteGroup()}
+                    >
+                      {t('DELETE', 'Delete')}
+                    </Dropdown.Item>
+                  </DropdownButton>
+                </ActionSelectorWrapper>
+              </RightHeader>
             </>
           ) : (
-            <div>
-              <h1>{t('ADD_NEW_DRIVER_GROUP', 'Add new driver group')}</h1>
-            </div>
+            <>
+              <div>
+                <h1>{t('ADD_NEW_DRIVER_GROUP', 'Add new driver group')}</h1>
+              </div>
+              {width > 576 && (
+                <IconButton
+                  color='black'
+                  onClick={expandSidebar}
+                >
+                  {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+                </IconButton>
+              )}
+            </>
           )}
         </Header>
         <MenusContainer>

package/src/components/Delivery/DriversGroupDetails/styles.js

@@ -9,7 +9,6 @@ export const DetailsContainer = styled.div`
 
 export const Header = styled.div`
   margin-bottom: 15px;
-  margin-top: 4px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -112,3 +111,8 @@ export const ActionSelectorWrapper = styled.div`
     }
   }
 `
+
+export const RightHeader = styled.div`
+  display: flex;
+  align-items: center;
+`