ordering-ui-admin-external 1.23.4 → 1.24.0

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

@@ -0,0 +1,168 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { useLanguage, ExamineClick, DragAndDrop, UploadAudio as UploadAudioController } from 'ordering-components-admin-external'
+import { CloudUploadFill, FileMusicFill } from 'react-bootstrap-icons'
+import { Button, Input } from '../../../styles'
+import { bytesConverter } from '../../../utils'
+import { Alert } from '../../Shared'
+import {
+  Container,
+  FileUploadBox,
+  UploadIconBox,
+  Or,
+  FormControl,
+  ButtonGroup,
+  PdfIconBox
+} from './styles'
+import Skeleton from 'react-loading-skeleton'
+
+const UploadAudioUI = (props) => {
+  const { onClose, formState, changeFormState, handleUploadAudio } = props
+
+  const [, t] = useLanguage()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const fileRef = useRef(null)
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleFiles = (files) => {
+    if (files.length === 1) {
+      const type = files[0].type
+      if (type?.split('/')[0] !== 'audio' && type !== 'audio/mpeg' && type !== 'audio/ogg') {
+        setAlertState({
+          open: true,
+          content: [t('ERROR_ONLY_AUDIO', 'Only audio files can be accepted')]
+        })
+        return
+      }
+
+      if (bytesConverter(files[0]?.size) > 512) {
+        setAlertState({
+          open: true,
+          content: [t('FILE_MAXIMUM_SIZE', 'The maximum file size is 500 kilobytes')]
+        })
+        return
+      }
+      const reader = new window.FileReader()
+      reader.readAsDataURL(files[0])
+      reader.onload = () => {
+        changeFormState({ file: reader.result, type: type === 'application/pdf' ? 'pdf' : 'image' })
+      }
+      reader.onerror = error => console.log(error)
+    }
+  }
+
+  const handleSendRequest = () => {
+    if (formState?.changes?.file || formState?.changes?.url) {
+      handleUploadAudio()
+      return
+    }
+    if (!formState?.changes?.file) {
+      setAlertState({
+        open: true,
+        content: t('AUDIO_FILE_IS_REQUIRED', 'Audio file is required!')
+      })
+      return
+    }
+    if (!formState?.changes?.url) {
+      setAlertState({
+        open: true,
+        content: t('URL_IS_REQUIRED', 'URL is required')
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (formState?.error) {
+      setAlertState({
+        open: true,
+        content: formState.error
+      })
+    }
+  }, [formState?.error])
+
+  return (
+    <>
+      <Container>
+        <h2>{t('UPLOAD_YOUR_CUSTOM_SOUNDS', 'Upload your custom sounds')}</h2>
+        <p>{t('UPLOAD_CUSTOM_SOUNDS_DESC', 'Click to upload your custom sounds or share your custom sounds link')}</p>
+        <FileUploadBox onClick={() => fileRef.current.click()}>
+          {formState?.loading ? (
+            <Skeleton height={150} />
+          ) : (
+            <ExamineClick
+              onFiles={files => handleFiles(files)}
+              childRef={(e) => { fileRef.current = e }}
+              accept='.mp3, .aac, .ogg'
+            >
+              <DragAndDrop
+                onDrop={dataTransfer => handleFiles(dataTransfer.files)}
+                accept='.mp3, .aac, .ogg'
+              >
+                {formState?.changes?.file && (
+                  <PdfIconBox><FileMusicFill /></PdfIconBox>
+                )}
+                <UploadIconBox>
+                  <div>
+                    <CloudUploadFill />
+                    <p>{t('DRAG_AND_DROP', 'Drag and drop')}</p>
+                  </div>
+                </UploadIconBox>
+              </DragAndDrop>
+            </ExamineClick>
+          )}
+        </FileUploadBox>
+        <Or>{t('OR', 'Or')}</Or>
+        <FormControl>
+          <label>{t('SHARE_CUSTOM_SOUNDS_LINK', 'Share your custom sounds link')}</label>
+          {formState?.loading ? (
+            <Skeleton height={44} />
+          ) : (
+            <Input
+              placeholder={t('URL', 'URL')}
+              defaultValue={formState?.changes?.url}
+              onChange={(e) => changeFormState({ url: e.target.value })}
+            />
+          )}
+        </FormControl>
+        <ButtonGroup>
+          <Button
+            color='primary'
+            outline
+            onClick={onClose}
+          >
+            {t('CANCEL', 'Cancel')}
+          </Button>
+          <Button
+            color='primary'
+            onClick={() => handleSendRequest()}
+          >
+            {t('UPLOAD', 'Upload')}
+          </Button>
+        </ButtonGroup>
+      </Container>
+      <Alert
+        title={t('ORDERING', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const UploadAudio = (props) => {
+  const uploadAudioProps = {
+    ...props,
+    UIComponent: UploadAudioUI
+  }
+  return <UploadAudioController {...uploadAudioProps} />
+}

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

@@ -0,0 +1,120 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  > h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 8px;
+  }
+  > p {
+    width: 100%;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    text-align: center;
+    margin: 0 auto;
+  }
+
+  @media (min-width: 768px) {
+    > p {
+      width: 80%;
+    }
+  }
+`
+
+export const FileUploadBox = styled.div`
+  height: 210px;
+  margin-top: 35px;
+  border-radius: 8px;
+  background-color: ${props => props.theme.colors.borderColor};
+  position: relative;
+  overflow: hidden;
+  cursor: -webkit-grab;
+  cursor: grab;
+  img, div {
+    width: 100%;
+    overflow: hidden;
+    height: 100%;
+  }
+  img {
+    object-fit: contain;
+  }
+`
+
+export const UploadIconBox = styled.div`
+  position: absolute;
+  top: 0px;
+  > div {
+    color: ${props => props.theme.colors.secundaryLight};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    svg {
+      width: 43px;
+      font-size: 40px;
+    }
+    p {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      margin-bottom: 0;
+      margin-top: 8px;
+    }
+  }
+`
+
+export const Or = styled.h6`
+  text-align: center;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  margin: 27px 0;
+`
+
+export const FormControl = styled.div`
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 13px;
+  }
+  input {
+    width: 100%;
+    border-radius: 8px;
+    height: 44px;
+  }
+`
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: 30px;
+  > button {
+    width: 100%;
+    margin-top: 15px;
+    height: 44px;
+    border-radius: 8px;
+  }
+
+  @media (min-width: 576px) {
+    justify-content: space-between;
+    flex-direction: row;
+    > button {
+      width: 48%;
+    }
+  }
+`
+
+export const PdfIconBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    font-size: 150px;
+    color: ${props => props.theme.colors.danger};
+  }
+`

package/src/components/MyProducts/index.js

@@ -7,6 +7,7 @@ import { CallCenterApp } from './CallCenterApp'
 import { KioskApp } from './KioskApp'
 import { CustomProject } from './CustomProject'
 import { OrderingWidgets } from './OrderingWidgets'
+import { UploadAudio } from './UploadAudio'
 
 export {
   OrderingWebsite,
@@ -17,5 +18,6 @@ export {
   CallCenterApp,
   KioskApp,
   CustomProject,
-  OrderingWidgets
+  OrderingWidgets,
+  UploadAudio
 }

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

@@ -146,6 +146,7 @@ export const DeliveriesLocation = (props) => {
   }, [interActionMapOrder])
 
   const handleMapChange = (data) => {
+    if(!data?.zoom) return
     setMapZoom(data?.zoom)
   }
 

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

@@ -18,6 +18,7 @@ export const OrderBill = (props) => {
     handleOrderRefund
   } = props
 
+  const isGiftCardOrder = order?.products?.[0]?.type === 'gift_card'
   const [, t] = useLanguage()
   const [{ parsePrice, parseNumber }] = useUtils()
   const [{ configs }] = useConfig()
@@ -262,11 +263,13 @@ export const OrderBill = (props) => {
           </tbody>
         </table>
       )}
-      <RefundToWallet
-        order={order}
-        actionStatus={actionStatus}
-        handleOrderRefund={handleOrderRefund}
-      />
+      {!isGiftCardOrder && (
+        <RefundToWallet
+          order={order}
+          actionStatus={actionStatus}
+          handleOrderRefund={handleOrderRefund}
+        />
+      )}
       {order?.payment_events?.filter(item => item.event === 'refund').length > 0 && (
         <table className='payments'>
           <thead>
@@ -352,7 +355,7 @@ export const OrderBill = (props) => {
         </table>
       )}
 
-      {!order?.refund_data && stripePaymethods.includes(order?.paymethod?.gateway) && (
+      {!isGiftCardOrder && !order?.refund_data && stripePaymethods.includes(order?.paymethod?.gateway) && (
         <RefundButtonWrapper>
           <Button
             color='primary'

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

@@ -130,7 +130,11 @@ export const OrderContactInformation = (props) => {
             </PhotoWrapper>
             <InfoContent>
               <div>
-                <p className='name'>{order?.customer?.name} {order?.customer?.middle_name} {order?.customer?.lastname} {order?.customer?.second_lastname}</p>
+                {(order?.customer?.name || order?.customer?.middle_name || order?.customer?.lastname || order?.customer?.second_lastname) ? (
+                  <p className='name'>{order?.customer?.name} {order?.customer?.middle_name} {order?.customer?.lastname} {order?.customer?.second_lastname}</p>
+                ) : (
+                  (!order?.customer?.email || !order?.customer?.phone) && <p className='name'>{t('GUEST_USER', 'Guest user')}</p>
+                )}
                 {order?.customer?.cellphone && (
                   <IconButton
                     onClick={() => window.open(`tel:${order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.cellphone}`)}

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

@@ -15,6 +15,7 @@ import { NotFoundSource, Modal } from '../../Shared'
 import { IconButton } from '../../../styles'
 import { OrderToPrint } from '../OrderToPrint'
 import { OrderToPrintTicket } from '../OrderToPrintTicket'
+import { getOrderStatuPickUp, getOrderStatus } from '../../../utils'
 
 import {
   Container,
@@ -77,37 +78,6 @@ const OrderDetailsUI = (props) => {
   } = props.order
 
   const rejectResonStatuses = [6, 9, 10, 11, 12, 14]
-  const getOrderStatus = (status) => {
-    const orderStatus = [
-      { key: 0, value: 'Pending Order', slug: 'PENDING_ORDER', percentage: 10 },
-      { key: 1, value: 'Completed by admin', slug: 'COMPLETED_BY_ADMIN', percentage: 100 },
-      { key: 2, value: 'Reject by admin', slug: 'REJECT_BY_ADMIN', percentage: 0 },
-      { key: 3, value: 'Driver arrived by business', slug: 'DRIVER_IN_BUSINESS', percentage: 60 },
-      { key: 4, value: 'Preparation Completed', slug: 'PREPARATION_COMPLETED', percentage: 20 },
-      { key: 5, value: 'Reject by business', slug: 'REJECT_BY_BUSINESS', percentage: 0 },
-      { key: 6, value: 'Reject by driver', slug: 'REJECT_BY_DRIVER', percentage: 0 },
-      { key: 7, value: 'Accepted by business', slug: 'ACCEPTED_BY_BUSINESS', percentage: 15 },
-      { key: 8, value: 'Accepted by driver', slug: 'ACCEPTED_BY_DRIVER', percentage: 40 },
-      { key: 9, value: 'Pick up completed by driver', slug: 'PICK_UP_COMPLETED_BY_DRIVER', percentage: 70 },
-      { key: 10, value: 'Pick up Failed by driver', slug: 'PICK_UP_FAILED_BY_DRIVER', percentage: 0 },
-      { key: 11, value: 'Delivery completed by driver', slug: 'DELIVERY_COMPLETED_BY_DRIVER', percentage: 100 },
-      { key: 12, value: 'Delivery Failed by driver', slug: 'DELIVERY_FAILED_BY_DRIVER', percentage: 0 },
-      { key: 13, value: 'Preorder', slug: 'PREORDER', percentage: 0 },
-      { key: 14, value: 'Order not ready', slug: 'ORDER_NOT_READY', percentage: 15 },
-      { key: 15, value: 'Pickup completed by customer', slug: 'PICKUP_COMPLETED_BY_CUSTOMER', percentage: 100 },
-      { key: 16, value: 'Canceled by customer', slug: 'CANCELED_BY_CUSTOMER', percentage: 0 },
-      { key: 17, value: 'Not picked by customer', slug: 'NOT_PICKED_BY_CUSTOMER', percentage: 0 },
-      { key: 18, value: 'Driver almost arrived to business', slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 50 },
-      { key: 19, value: 'Driver almost arrived to customer', slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', percentage: 90 },
-      { key: 20, value: 'Customer almost arrived to business', slug: 'CUSTOMER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 90 },
-      { key: 21, value: 'Customer arrived to business', slug: 'CUSTOMER_ARRIVED_TO_BUSINESS', percentage: 90 },
-      { key: 22, value: 'Looking for driver', slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 30 },
-      { key: 23, value: 'Driver on way', slug: 'ORDER_DRIVER_ON_WAY', percentage: 80 }
-    ]
-
-    const objectStatus = orderStatus.find((o) => o.key === status)
-    return objectStatus && objectStatus
-  }
 
   const getLogisticTag = (status) => {
     switch (parseInt(status)) {
@@ -302,6 +272,8 @@ const OrderDetailsUI = (props) => {
     }
   }, [loading])
 
+  const progressBarObjt = order?.delivery_type && order?.delivery_type === 2 ? getOrderStatuPickUp : getOrderStatus
+
   return (
     <Container
       isSelectedOrders={isSelectedOrders}
@@ -367,10 +339,10 @@ const OrderDetailsUI = (props) => {
               <p>
                 {t('SPOT', 'Spot')}: {order?.place?.name}
               </p>
-            </PlaceSpotContainer>
+            </PlaceSpotContainer> 
           )}
           <StatusBarContainer>
-            <StatusBar percentage={getOrderStatus(order?.status)?.percentage} />
+            <StatusBar percentage={progressBarObjt(order?.status)?.percentage} />
           </StatusBarContainer>
           <AdvancedLogistic>
             <div>
@@ -542,7 +514,7 @@ const OrderDetailsUI = (props) => {
           ref={printRef}
           order={order}
           placeSpotEnabled={placeSpotEnabled}
-          getOrderStatus={getOrderStatus}
+          getOrderStatus={progressBarObjt}
           getLogisticTag={getLogisticTag}
           getPriorityTag={getPriorityTag}
         />
@@ -551,7 +523,7 @@ const OrderDetailsUI = (props) => {
           <OrderToPrintTicket
             ref={printTicketRef}
             order={order}
-            getOrderStatus={getOrderStatus}
+            getOrderStatus={progressBarObjt}
           />
       )}
     </Container>

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

@@ -734,7 +734,9 @@ export const OrdersTable = (props) => {
                                 </OrdersCountWrapper>
                               </WrapperImage>
                               <div className='info'>
-                                <p className='bold'>{order?.customer?.name}</p>
+                                <p className='bold'>
+                                  {(!order?.customer?.email && !order?.customer?.cellphone && !order?.customer?.name) ? t('GUEST_USER', 'Guest user') : order?.customer?.name}
+                                </p>
                                 <p>{order?.customer?.cellphone}</p>
                               </div>
                             </CustomerInfo>

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

@@ -33,6 +33,8 @@ const NotificationSettingUI = (props) => {
     'onesignal_orderingapp_id',
     'onesignal_businessapp_id',
     'onesignal_deliveryapp_id',
+    'onesignal_orderingweb_id',
+    'onesignal_dashboardweb_id',
     'driver_close_distance',
     'notification_toast'
   ]

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

@@ -190,22 +190,22 @@ export const SettingsListUI = (props) => {
                                 <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())}
-                                      </label>
-                                    </FormGroupCheck>
-                                  </FormGroupWrapper>
-                                ))
+                              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>
@@ -236,22 +236,22 @@ export const SettingsListUI = (props) => {
                                   <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?.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>
@@ -267,27 +267,27 @@ export const SettingsListUI = (props) => {
                           )
                         }
                         {/* {config.type === 6 && (
-                          <>
-                            <FormGroupText className='form-group'>
-                              <label>{config?.name}</label>
-                              {config?.description && <Description>{config?.description}</Description>}
-                              {config?.value?.split('|')?.filter(value => valuesTypeSix.includes(value?.split(',')[0]))?.map((value, i, hash) => (
-                                <React.Fragment key={`${config?.id} ${value}`}>
-                                  <Description typeSix>{t(value?.split(',')[0], value?.split(',')[0].replace('_', ' '))}</Description>
-                                  <input
-                                    type='text'
-                                    defaultValue={value?.split(',')[1]}
-                                    onChange={(e) => handleChangeTypeSix({
-                                      value: e.target.value,
-                                      type: value?.split(',')[0]
-                                    }, config)}
-                                    className='form-control'
-                                    placeholder={0}
-                                  />
-                                </React.Fragment>
-                              ))}
-                            </FormGroupText>
-                          </>
+                        <>
+                          <FormGroupText className='form-group'>
+                            <label>{config?.name}</label>
+                            {config?.description && <Description>{config?.description}</Description>}
+                            {config?.value?.split('|')?.filter(value => valuesTypeSix.includes(value?.split(',')[0]))?.map((value, i, hash) => (
+                              <React.Fragment key={`${config?.id} ${value}`}>
+                                <Description typeSix>{t(value?.split(',')[0], value?.split(',')[0].replace('_', ' '))}</Description>
+                                <input
+                                  type='text'
+                                  defaultValue={value?.split(',')[1]}
+                                  onChange={(e) => handleChangeTypeSix({
+                                    value: e.target.value,
+                                    type: value?.split(',')[0]
+                                  }, config)}
+                                  className='form-control'
+                                  placeholder={0}
+                                />
+                              </React.Fragment>
+                            ))}
+                          </FormGroupText>
+                        </>
                         )} */}
                       </div>
                     )

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

@@ -61,6 +61,7 @@ export const FormGroupCheck = styled.div`
     display: flex;
     align-items: center;
     color: ${props => props.theme.colors.headingColor};
+    text-transform: capitalize;
   }
 `
 
@@ -87,7 +88,7 @@ export const CheckBoxWrapper = styled.div`
 
   > label {
     font-weight: 600;
-    margin: 20px 0 0;
+    margin: 0px;
     font-size: 14px;
     color: ${props => props.theme.colors.headingColor};
   }

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

@@ -21,7 +21,7 @@ export const SettingsSelectUI = (props) => {
   const [, t] = useLanguage()
 
   const [options, setOptions] = useState(null)
-  
+
   useEffect(() => {
     if (!config) return
     if (config.key === 'terms_and_conditions') {

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

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import parsePhoneNumber from 'libphonenumber-js'
 import PhoneInput from 'react-phone-number-input'
 import { useLanguage, useConfig, useSession } from 'ordering-components-admin-external'
-
+import { findExitingCode } from '../../../utils'
 import { Container, ErrorMsg } from './styles'
 
 export const InputPhoneNumber = (props) => {
@@ -42,7 +42,7 @@ export const InputPhoneNumber = (props) => {
         <PhoneInput
           disabled={disabled}
           placeholder={t('PHONE_NUMBER', 'Phone number')}
-          defaultCountry={configs?.default_country_code?.value}
+          defaultCountry={findExitingCode(configs?.default_country_code?.value?.toUpperCase())}
           value={value}
           displayInitialValueAsLocalNumber
           onChange={(val) => setValue && setValue(val, isValidPhoneNumber(val))}

package/src/components/SidebarMenu/index.js

@@ -504,6 +504,7 @@ const SidebarMenuUI = (props) => {
                         <MenuContent>
                           {ordersSubMenus.map(item => (
                             !(sessionState?.user?.level === 2 && item.pageName === 'drivers') &&
+                            !((sessionState?.user?.level === 2 || sessionState?.user?.level === 5) && item.pageName === 'giftCards') &&
                             !(sessionState?.user?.level === 5 && item.pageName === 'appointments') && (
                               item.pageName === 'appointments' ? (
                                 isEnabledAppointmentsFeature && (