ordering-ui-admin-external 1.30.7 → 1.31.1

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

@@ -9,11 +9,15 @@ import { Alert, Modal } from '../../Shared'
 import 'react-toastify/dist/ReactToastify.css'
 import { toast } from 'react-toastify'
 import { useTheme } from 'styled-components'
+import { CheckSquareFill, Square } from 'react-bootstrap-icons'
 
 import {
   ModalContainer,
-  ToastWrapper
+  ToastWrapper,
+  AlarmContent,
+  CheckBoxWrapper
 } from './styles'
+import { Button } from '../../../styles'
 
 toast.configure()
 
@@ -27,6 +31,8 @@ const OrderNotificationUI = (props) => {
   const [, t] = useLanguage()
   const [events] = useEvent()
   const theme = useTheme()
+  const [showModal, setShowModal] = useState(false)
+  const [isChecked, setIsChecked] = useState(false)
 
   const [notificationModalOpen, setNotificationModalOpen] = useState(false)
   const [registerOrderIds, setRegisterOrderIds] = useState([])
@@ -110,12 +116,17 @@ const OrderNotificationUI = (props) => {
   }, [configState, registerOrderIds, customerId])
 
   useEffect(() => {
-    setAlertState({
-      open: true,
-      content: t('SOUND_WILL_BE_PLAYED', 'The sound will be played on this page whenever a new order is received.')
-    })
+    const isSaved = localStorage.getItem('new_order_notification')
+    if (!isSaved) setShowModal(true)
   }, [])
 
+  const handleClose = () => {
+    setShowModal(false)
+    if (isChecked) {
+      localStorage.setItem('new_order_notification', '1')
+    }
+  }
+
   return (
     <>
       <Modal
@@ -147,6 +158,21 @@ const OrderNotificationUI = (props) => {
         onAccept={() => setAlertState({ open: false, content: [] })}
         closeOnBackdrop={false}
       />
+      <Modal
+        open={showModal}
+        width='700px'
+        onClose={handleClose}
+        title={t('ORDERING', 'Ordering')}
+      >
+        <AlarmContent>
+          <span>{t('SOUND_WILL_BE_PLAYED', 'The sound will be played on this page whenever a new order is received.')}</span>
+          <CheckBoxWrapper onClick={() => setIsChecked(prev => !prev)} isChecked={isChecked}>
+            {isChecked ? <CheckSquareFill /> : <Square />}
+            <span>{t('DONT_SHOW_AGAIN', 'Don\'t show again')}</span>
+          </CheckBoxWrapper>
+          <Button color='primary' onClick={handleClose}>{t('ACCEPT', 'Accept')}</Button>
+        </AlarmContent>
+      </Modal>
     </>
   )
 }

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

@@ -79,3 +79,40 @@ export const ToastWrapper = styled.div`
     }
   }
 `
+
+export const AlarmContent = styled.div`
+  button {
+    height: 44px;
+    width: 100%;
+    border-radius: 8px;
+    margin-top: 20px;
+  }
+  > span {
+    font-weight: 500;
+  }
+`
+
+export const CheckBoxWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-top: 10px;
+  span {
+    font-size: 14px;
+  }
+  svg {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 10px;
+    ` : css`
+      margin-right: 10px;
+    `}
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+  }
+
+  ${({ isChecked }) => isChecked && css`
+    svg {
+      color: ${props => props.theme.colors?.primary};
+    }
+  `}
+`

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

@@ -12,7 +12,7 @@ export const OrderStatusFilterBar = (props) => {
   const {
     selectedOrderStatus,
     changeOrderStatus,
-    numberOfOrdersByStatus
+    ordersAmountByStatus
   } = props
 
   const changeSelectedOrderStatus = (orderStatus) => {
@@ -21,6 +21,7 @@ export const OrderStatusFilterBar = (props) => {
   }
 
   const [, t] = useLanguage()
+
   return (
     <>
       <OrderStatusFilterContainer className='order_status_filter'>
@@ -31,8 +32,8 @@ export const OrderStatusFilterBar = (props) => {
           >
             {t('PENDING', 'pending')}
             <span>(
-              {numberOfOrdersByStatus?.result ? (
-                numberOfOrdersByStatus?.result?.pending ?? 0
+              {!isNaN(ordersAmountByStatus?.pending) && ordersAmountByStatus?.pending !== null ? (
+                ordersAmountByStatus?.pending ?? 0
               ) : (
                 <CgSpinnerTwoAlt />
               )}
@@ -46,8 +47,8 @@ export const OrderStatusFilterBar = (props) => {
           >
             {t('IN_PROGRESS', 'in progress')}
             <span>(
-              {numberOfOrdersByStatus?.result ? (
-                numberOfOrdersByStatus?.result?.inProgress ?? 0
+              {!isNaN(ordersAmountByStatus?.inProgress) && ordersAmountByStatus?.inProgress !== null ? (
+                ordersAmountByStatus?.inProgress ?? 0
               ) : (
                 <CgSpinnerTwoAlt />
               )}
@@ -61,8 +62,8 @@ export const OrderStatusFilterBar = (props) => {
           >
             {t('COMPLETED', 'completed')}
             <span>(
-              {numberOfOrdersByStatus?.result ? (
-                numberOfOrdersByStatus?.result?.completed ?? 0
+              {!isNaN(ordersAmountByStatus?.completed) && ordersAmountByStatus?.completed !== null ? (
+                ordersAmountByStatus?.completed ?? 0
               ) : (
                 <CgSpinnerTwoAlt />
               )}
@@ -76,8 +77,8 @@ export const OrderStatusFilterBar = (props) => {
           >
             {t('CANCELLED', 'cancelled')}
             <span>(
-              {numberOfOrdersByStatus?.result ? (
-                numberOfOrdersByStatus?.result?.cancelled ?? 0
+              {!isNaN(ordersAmountByStatus?.cancelled) && ordersAmountByStatus?.cancelled !== null ? (
+                ordersAmountByStatus?.cancelled ?? 0
               ) : (
                 <CgSpinnerTwoAlt />
               )}

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

@@ -6,12 +6,13 @@ import { Funnel, List as MenuIcon, LifePreserver } from 'react-bootstrap-icons'
 import MdcFilterOff from '@meronex/icons/mdc/MdcFilterOff'
 import { OrdersDashboardSLAControls } from '../OrdersDashboardSLAControls'
 import { OrderDashboardSLASetting } from '../OrderDashboardSLASetting'
-import { IconButton } from '../../../styles'
+import { IconButton, LinkButton } from '../../../styles'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { GoogleMapsApiKeySettingButton } from '../GoogleMapsApiKeySettingButton'
 import { WebsocketStatus } from '../WebsocketStatus'
+import TiWarningOutline from '@meronex/icons/ti/TiWarningOutline'
 
 import {
   OrderContentHeaderContainer,
@@ -19,7 +20,8 @@ import {
   HeaderTitle,
   TopRightSection,
   SLAControlsWrapper,
-  WrapperSearchAndFilter
+  WrapperSearchAndFilter,
+  WarningMessage
 } from './styles'
 
 export const OrdersContentHeader = (props) => {
@@ -52,6 +54,11 @@ export const OrdersContentHeader = (props) => {
   const [filterApplied, setFilterApplied] = useState(false)
   const [configState] = useConfig()
 
+  const handleClearFilters = () => {
+    if (searchValue) handleChangeSearch('')
+    if (filterApplied) handleChangeFilterValues({})
+  }
+
   useEffect(() => {
     let _filterApplied = false
     if (Object.keys(filterValues).length === 0) {
@@ -60,7 +67,7 @@ export const OrdersContentHeader = (props) => {
       _filterApplied = filterValues?.groupTypes?.length || filterValues.businessIds.length > 0 || filterValues.cityIds.length > 0 ||
         filterValues.deliveryEndDatetime !== null || filterValues.deliveryFromDatetime !== null || filterValues.deliveryTypes.length > 0 ||
         filterValues.driverIds.length > 0 || filterValues.paymethodIds.length > 0 || filterValues.statuses.length > 0 || filterValues?.metafield?.length > 0 ||
-        filterValues?.externalId || filterValues?.logisticStatus !== null
+        filterValues?.externalId || filterValues?.logisticStatus !== null || filterValues?.assigned !== null
     }
     setFilterApplied(_filterApplied)
   }, [filterValues])
@@ -136,6 +143,13 @@ export const OrdersContentHeader = (props) => {
             >
               {filterApplied ? <Funnel /> : <MdcFilterOff />}
             </IconButton>
+            {(filterApplied || !!searchValue) && (
+              <WarningMessage>
+                <TiWarningOutline />
+                <span>{t('WARNING_FILTER_APPLIED', 'Notifications Paused. Filters applied. You may miss new orders.')}</span>
+                <LinkButton onClick={() => handleClearFilters()}>{t('CLEAR_FILTERS', 'Clear filters')}</LinkButton>
+              </WarningMessage>
+            )}
           </WrapperSearchAndFilter>
         </TopRightSection>
       </OrderContentHeaderContainer>

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

@@ -89,6 +89,7 @@ export const SLAControlsWrapper = styled.div`
 `
 
 export const WrapperSearchAndFilter = styled.div`
+  position: relative;
   display: flex;
   align-items: center;
   margin-top: 10px;
@@ -127,3 +128,56 @@ export const WrapperSearchAndFilter = styled.div`
     `}
   }
 `
+export const WarningMessage = styled.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  z-index: 2000;
+  top: 100%;
+  background: ${props => props.theme.colors.warning100};
+  border: 1px solid ${props => props.theme.colors.warning};
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 6px 15px;
+  box-sizing: border-box;
+  margin: 10px 0px 0px 0px !important;
+
+  right: 0px;
+  ${props => props.theme?.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  svg {
+    font-size: 20px;
+    color: ${props => props.theme.colors.warning};
+  }
+
+  span {
+    font-size: 12px;
+    line-height: 18px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0 10px;
+    flex: 1;
+  }
+
+  a {
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  @media (min-width: 768px) {
+    padding: 8px 20px;
+    font-size: 14px;
+    line-height: 24px;
+    right: 0px;
+    ${props => props.theme?.rtl && css`
+      left: 0px;
+      right: initial;
+    `}
+
+    span {
+      white-space: nowrap;
+    }
+  }
+`

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

@@ -6,7 +6,8 @@ export const OrdersDashboardList = (props) => {
   const {
     selectedSubOrderStatus,
     isMessagesView,
-    orderByOption
+    orderByOption,
+    setOrdersAmountByStatus
   } = props
 
   const OrdersCommonControlProps = {
@@ -40,24 +41,28 @@ export const OrdersDashboardList = (props) => {
             groupStatus='pending'
             {...OrdersCommonControlProps}
             orderStatus={selectedSubOrderStatus?.pending}
+            setOrdersTotalAmount={total => setOrdersAmountByStatus(prevState => ({ ...prevState, pending: total }))}
           />
 
           <OrdersListController
             groupStatus='inProgress'
             {...OrdersCommonControlProps}
             orderStatus={selectedSubOrderStatus?.inProgress}
+            setOrdersTotalAmount={total => setOrdersAmountByStatus(prevState => ({ ...prevState, inProgress: total }))}
           />
 
           <OrdersListController
             groupStatus='completed'
             {...OrdersCommonControlProps}
             orderStatus={selectedSubOrderStatus?.completed}
+            setOrdersTotalAmount={total => setOrdersAmountByStatus(prevState => ({ ...prevState, completed: total }))}
           />
 
           <OrdersListController
             groupStatus='cancelled'
             {...OrdersCommonControlProps}
             orderStatus={selectedSubOrderStatus?.cancelled}
+            setOrdersTotalAmount={total => setOrdersAmountByStatus(prevState => ({ ...prevState, cancelled: total }))}
           />
         </>
       )}

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

@@ -72,6 +72,11 @@ const OrdersFilterGroupUI = (props) => {
     { value: 4, content: <Option>{t('RESOLVED', 'Resolved')}<LogisticStatusDot status={4} /></Option> }
   ]
 
+  const assignedFilterOptions = [
+    { value: 0, content: <Option>{t('ASSIGNED', 'Assigned')}</Option> },
+    { value: 1, content: <Option>{t('UNASSIGNED', 'Unassigned')}</Option> }
+  ]
+
   const handleAcceptFilter = () => {
     handleChangeFilterValues(filterValues)
     handleCloseFilterModal()
@@ -203,6 +208,17 @@ const OrdersFilterGroupUI = (props) => {
             />
           </SelectWrapper>
         </WrapperRow>
+        <WrapperRow>
+          <SelectWrapper>
+            <Select
+              options={assignedFilterOptions}
+              className='select'
+              defaultValue={filterValues?.assigned ?? ''}
+              placeholder={t('SELECT_DRIVER_STATUS', 'Select a driver status')}
+              onChange={(value) => handleChangeChildFilterValue({ assigned: value })}
+            />
+          </SelectWrapper>
+        </WrapperRow>
         {filterValues?.metafield.map(item => (
           <WrapperRow key={item.id}>
             <Input

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

@@ -36,6 +36,7 @@ export const OrdersListing = (props) => {
     orderDetailId,
     filterValues,
     setFilterModalOpen,
+    setOrdersTotalAmount,
 
     isMessagesView,
     setSelectedOrderIds,
@@ -81,6 +82,12 @@ export const OrdersListing = (props) => {
     setFilterApplied(_filterApplied)
   }, [filterValues])
 
+  useEffect(() => {
+    if (!isNaN(pagination.total)) {
+      setOrdersTotalAmount && setOrdersTotalAmount(pagination.total)
+    }
+  }, [pagination.total])
+
   return (
     <>
       {((ordersStatusGroup === groupStatus) || isMessagesView) && (

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

@@ -45,7 +45,6 @@ const OrdersManagerUI = (props) => {
     handleSelectedSubOrderStatus,
     handleCustomOrderDetail,
     setSelectedOrderIds,
-    numberOfOrdersByStatus,
     allowColumns,
     setAllowColumns,
     timeStatus,
@@ -66,6 +65,12 @@ const OrdersManagerUI = (props) => {
   const [isTourFlag, setIsTourFlag] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [slaSettingTime, setSlaSettingTime] = useState(60000)
+  const [ordersAmountByStatus, setOrdersAmountByStatus] = useState({
+    pending: null,
+    inProgress: null,
+    completed: null,
+    cancelled: null
+  })
 
   const [totalSelectedOrder, setTotalSelectedOrder] = useState(0)
   const handleBackRedirect = () => {
@@ -189,7 +194,7 @@ const OrdersManagerUI = (props) => {
         <OrderStatusFilterBar
           selectedOrderStatus={ordersStatusGroup}
           changeOrderStatus={handleOrdersStatusGroupFilter}
-          numberOfOrdersByStatus={numberOfOrdersByStatus}
+          ordersAmountByStatus={ordersAmountByStatus}
         />
         <OrderSubFilterControls>
           <OrderStatusSubFilterWrapper isColumn={selectedOrderIds?.length}>
@@ -240,6 +245,7 @@ const OrdersManagerUI = (props) => {
                 slaSettingTime={slaSettingTime}
                 allowColumns={allowColumns}
                 setAllowColumns={setAllowColumns}
+                setOrdersAmountByStatus={setOrdersAmountByStatus}
               />
             </WrapItemView>
           </OrdersInnerContent>
@@ -263,7 +269,9 @@ const OrdersManagerUI = (props) => {
         />
       )}
 
-      <OrderNotification customerId={props.customerId} />
+      {!isSelectedOrders && (
+        <OrderNotification customerId={props.customerId} />
+      )}
 
       {totalSelectedOrder > 0 && (
         <WrapperIndicator>

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components-admin-external'
+import { useLanguage, useUtils, useConfig, WebsocketStatus as WebsocketStatusController } from 'ordering-components-admin-external'
 import { InfoCircle } from 'react-bootstrap-icons'
 import { Alert, Modal } from '../../Shared'
 import { Button, IconButton } from '../../../styles'
@@ -24,6 +24,9 @@ const SocketStatusUI = (props) => {
 
   const [, t] = useLanguage()
   const [{ parseDate }] = useUtils()
+  const [{ configs }] = useConfig()
+  const isEnabledWhiteLabelModule = configs?.white_label_module?.value
+
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [openModal, setOpenModal] = useState(false)
 
@@ -54,7 +57,7 @@ const SocketStatusUI = (props) => {
         </IconButton>
         <InfoContent>
           {t('WEBSOCKET_STATUS_INFO', 'Verify the server connection by date and time using the Connection status button. Press update to refresh you dashboard and update the status as well. Need help? Contact our Customer support team here:')}
-          <a href='https://www.ordering.co/contact-ordering' target='_blank' rel='noopener noreferrer'>{t('CUSTOMER_SUPPORT', 'Customer support')}</a>
+          {!isEnabledWhiteLabelModule && <a href='https://www.ordering.co/contact-ordering' target='_blank' rel='noopener noreferrer'>{t('CUSTOMER_SUPPORT', 'Customer support')}</a>}
         </InfoContent>
       </InfoWrapper>
       <Button

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

@@ -26,7 +26,9 @@ export const WebhookListSelector = (props) => {
     { value: 'orders_pickup_completed_driver', content: <Option>{t('ORDERS_PICKUP_COMPLETED_DRIVER', 'Order pickup completed by driver')}</Option> },
     { 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_delivery_failed_driver', content: <Option>{t('ORDERS_DELIVERY_FAILED_DRIVER', 'Order delivery failed by driver')}</Option> },
+    { value: 'preorder_updated', content: <Option>{t('PREORDER_UPDATED', 'Preorder updated')}</Option> },
+    { value: 'drivers_changes', content: <Option>{t('DRIVERS_CHANGES', 'Driver changes')}</Option> }
   ]
 
   const placeholder = <Option>{t('SELECT_HOOK', 'Select a hook')}</Option>

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

@@ -12,8 +12,7 @@ export const InputPhoneNumber = (props) => {
     setValue,
     handleIsValid,
     disabled,
-    isUser,
-    defaultCountry
+    isUser
   } = props
 
   const [, t] = useLanguage()
@@ -44,7 +43,7 @@ export const InputPhoneNumber = (props) => {
         <PhoneInput
           disabled={disabled}
           placeholder={t('PHONE_NUMBER', 'Phone number')}
-          defaultCountry={defaultCountry ?? findExitingCode(configs?.default_country_code?.value?.toUpperCase())}
+          defaultCountry={findExitingCode(configs?.default_country_code?.value?.toUpperCase())}
           value={value}
           displayInitialValueAsLocalNumber
           onChange={(val) => setValue && setValue(val, isValidPhoneNumber(val))}

package/src/components/Stores/BusinessAdd/ReceiveOrders/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { useLanguage, useSession } from 'ordering-components-admin-external'
+import { useLanguage, useSession, useConfig } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { Input } from '../../../../styles'
 import {
@@ -16,6 +16,8 @@ export const ReceiveOrders = (props) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [{ configs }] = useConfig()
+  const isEnabledWhiteLabelModule = configs?.white_label_module?.value
 
   useEffect(() => {
     if (user?.email) changeFormState({ email: user?.email })
@@ -34,17 +36,19 @@ export const ReceiveOrders = (props) => {
             placeholder={t('ADD_EMAIL', 'Add email')}
           />
         </FormControl>
-        <DownloadWrapper>
-          <label>{t('DOWNLOADS_APPS', 'Downloads apps')}</label>
-          <DownloadIconWrapper>
-            <a href='https://apps.apple.com/us/app/store-app-2-0/id1608192050' target='_blank' rel='noopener noreferrer'>
-              <img src={theme.images.general.appStore} alt='' />
-            </a>
-            <a href='https://play.google.com/store/apps/details?id=com.ordering.storeappv5&hl=en&gl=US' target='_blank' rel='noopener noreferrer'>
-              <img src={theme.images.general.googlePlay} alt='' />
-            </a>
-          </DownloadIconWrapper>
-        </DownloadWrapper>
+        {!isEnabledWhiteLabelModule && (
+          <DownloadWrapper>
+            <label>{t('DOWNLOADS_APPS', 'Downloads apps')}</label>
+            <DownloadIconWrapper>
+              <a href='https://apps.apple.com/us/app/store-app-2-0/id1608192050' target='_blank' rel='noopener noreferrer'>
+                <img src={theme.images.general.appStore} alt='' />
+              </a>
+              <a href='https://play.google.com/store/apps/details?id=com.ordering.storeappv5&hl=en&gl=US' target='_blank' rel='noopener noreferrer'>
+                <img src={theme.images.general.googlePlay} alt='' />
+              </a>
+            </DownloadIconWrapper>
+          </DownloadWrapper>
+        )}
       </ContentWrapper>
     </ReceiveOrdersContainer>
   )

package/src/components/Stores/BusinessDeviceDetail/index.js

@@ -216,7 +216,7 @@ export const BusinessDeviceDetail = (props) => {
   const businessDeviceDetailProps = {
     ...props,
     UIComponent: BusinessDeviceDetailUI,
-    propsToFetch: ['id', 'name', 'logo', 'owners']
+    propsToFetch: ['id', 'name', 'logo', 'owners', 'address']
   }
   return <BusinessDeviceDetailController {...businessDeviceDetailProps} />
 }

package/src/components/Stores/BusinessProductsListing/index.js

@@ -77,6 +77,8 @@ const BusinessProductsListingUI = (props) => {
     getBusiness,
     businessTypes,
     setBusinessTypes,
+    categoryState,
+    handleUpdateCategoryState,
     siteState
   } = props
 
@@ -510,6 +512,8 @@ const BusinessProductsListingUI = (props) => {
           setTaxes={setTaxes}
           fees={fees}
           setFees={setFees}
+          categoryState={categoryState}
+          handleUpdateCategoryState={handleUpdateCategoryState}
         />
       )}
       {openSidebar === 'business_details' && (

package/src/components/Stores/BusinessSummary/index.js

@@ -55,6 +55,8 @@ export const BusinessSummary = (props) => {
   const [selectedView, setSelectedView] = useState('desktop')
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
 
+  const isEnabledWhiteLabelModule = configs?.white_label_module?.value
+
   const handleOpenCategory = () => {
     events.emit('go_to_page', { page: 'store', params: { store: businessState?.business?.slug } })
   }
@@ -219,11 +221,13 @@ export const BusinessSummary = (props) => {
                 >
                   {t('DUPLICATE', 'Duplicate')}
                 </Dropdown.Item>
-                <Dropdown.Item
-                  onClick={() => handleSelectedItem('personalization')}
-                >
-                  {t('PERSONALIZATION', 'Personalization')}
-                </Dropdown.Item>
+                {!isEnabledWhiteLabelModule && (
+                  <Dropdown.Item
+                    onClick={() => handleSelectedItem('personalization')}
+                  >
+                    {t('PERSONALIZATION', 'Personalization')}
+                  </Dropdown.Item>
+                )}
                 <Dropdown.Item
                   onClick={() => handleSelectedItem('custom_fields')}
                 >
@@ -266,15 +270,17 @@ export const BusinessSummary = (props) => {
             >
               {t('CATEGORIES_AND_PRODUCTS', 'Categories & products')}
             </Button>
-            <Button
-              color='primary'
-              outline
-              borderRadius='8px'
-              onClick={handleOpenSite}
-              disabled={businessState?.loading}
-            >
-              {t('STORE_WEBSITE', 'Store website')}
-            </Button>
+            {!isEnabledWhiteLabelModule && (
+              <Button
+                color='primary'
+                outline
+                borderRadius='8px'
+                onClick={handleOpenSite}
+                disabled={businessState?.loading}
+              >
+                {t('STORE_WEBSITE', 'Store website')}
+              </Button>
+            )}
           </ButtonWrapper>
           <BusinessDescription>
             {businessState?.loading ? (
@@ -289,7 +295,7 @@ export const BusinessSummary = (props) => {
                 ? businessConfigs
                 : businessConfigs.filter(configs => configs.key !== 'spoonity_key')
               : businessConfigs.filter(c => !itemsExcluded.includes(c.key))
-            ).map(config => (
+            ).filter(item => isEnabledWhiteLabelModule ? item.key !== 'personalization' : true).map(config => (
               <BusinessConfigItem
                 key={config.key}
                 active={selectedItem === config.key}

package/src/components/Stores/BusinessWebhooks/index.js

@@ -47,7 +47,9 @@ const BusinessWebhooksUI = (props) => {
     { value: 'orders_pickup_completed_driver', content: t('ORDERS_PICKUP_COMPLETED_DRIVER') },
     { value: 'orders_pickup_failed_driver', content: t('ORDERS_PICKUP_FAILED_DRIVER') },
     { value: 'orders_delivery_completed_driver', content: t('ORDERS_DELIVERY_COMPLETED_DRIVER') },
-    { value: 'orders_delivery_failed_driver', content: t('ORDERS_DELIVERY_FAILED_DRIVER') }
+    { value: 'orders_delivery_failed_driver', content: t('ORDERS_DELIVERY_FAILED_DRIVER') },
+    { value: 'preorder_updated', content: t('PREORDER_UPDATED', 'Preorder updated') },
+    { value: 'drivers_changes', content: t('DRIVERS_CHANGES', 'Driver changes') },
   ]
 
   const timeList = [