ordering-ui-admin-external 1.23.4 → 1.24.0

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

@@ -51,7 +51,8 @@ export const BusinessDetailsUI = (props) => {
     actionStatus,
     handleUpdatePreorderConfigs,
     handleUpdateSpoonityKey,
-    spoonityKeyState
+    spoonityKeyState,
+    siteState
   } = props
 
   const history = useHistory()
@@ -185,6 +186,7 @@ export const BusinessDetailsUI = (props) => {
           handleDeleteBusiness={handleDeleteBusiness}
           extraOpen={extraOpen}
           spoonityConfig={spoonityConfig}
+          siteState={siteState}
         />
       )}
       {extraOpen && (
@@ -316,6 +318,7 @@ export const BusinessDetailsUI = (props) => {
             <BusinessSalesChannel
               business={businessState?.business}
               setIsExtendExtraOpen={setIsExtendExtraOpen}
+              siteState={siteState}
             />
           )}
           {selectedItem === 'layout' && (

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, BusinessDeviceDetail as BusinessDeviceDetailController } from 'ordering-components-admin-external'
-import { ThreeDots, ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
+import { ThreeDots, ArrowsAngleContract, ArrowsAngleExpand, PersonFill } from 'react-bootstrap-icons'
 import { Button, IconButton, DefaultSelect, Input } from '../../../styles'
 import { Select } from '../../../styles/Select/FirstSelect'
 import { useTheme } from 'styled-components'
@@ -34,7 +34,9 @@ const BusinessDeviceDetailUI = (props) => {
 
   const [isExpand, setIsExpand] = useState(false)
   const [businessOptions, setBusinessOptions] = useState(null)
-  const [searchValue, setSearchValue] = useState('')
+  const [ownerOptions, setOwnerOptions] = useState(null)
+  const [businessSearchVal, setBusinessSearchVal] = useState('')
+  const [userSearchVal, setUserSearchVal] = useState('')
   const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const moreOptions = [
@@ -72,13 +74,28 @@ const BusinessDeviceDetailUI = (props) => {
     if (businessList?.loading) return
 
     const options = businessList?.businesses
-      .filter(option => option?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      .filter(option => option?.name.toLocaleLowerCase().includes(businessSearchVal.toLocaleLowerCase()))
       .map(business => ({
         value: business?.id,
         content: <Option><Logo src={business?.logo || theme.images?.dummies?.businessLogo} />{business?.name}</Option>
       }))
     setBusinessOptions(options)
-  }, [searchValue, businessList])
+  }, [businessSearchVal, businessList])
+
+  useEffect(() => {
+    if (!businessList?.loading && (formState?.changes?.business_id || selectedDevice?.business_id)) {
+      const owners = businessList?.businesses.find(business => business.id === (formState?.changes?.business_id || selectedDevice?.business_id))?.owners
+      if (owners?.length > 0) {
+        const options = owners
+          .filter(option => option?.name.toLocaleLowerCase().includes(userSearchVal.toLocaleLowerCase()))
+          .map(user => ({
+            value: user?.id,
+            content: <Option>{user?.photo ? <Logo src={user?.photo} /> : <PersonFill />}{user?.name} {user?.lastname}</Option>
+          }))
+        setOwnerOptions(options)
+      }
+    }
+  }, [userSearchVal, selectedDevice, formState?.changes?.business_id, businessList])
 
   useEffect(() => {
     if (formState?.result?.error) {
@@ -137,11 +154,33 @@ const BusinessDeviceDetailUI = (props) => {
             isShowSearchBar
             searchBarIsCustomLayout
             searchBarIsNotLazyLoad
-            searchValue={searchValue}
-            handleChangeSearch={(val) => setSearchValue(val)}
+            searchValue={businessSearchVal}
+            handleChangeSearch={(val) => setBusinessSearchVal(val)}
           />
         )}
       </SelectWrapper>
+      {(formState?.changes?.business_id || selectedDevice?.business_id) && (
+        <SelectWrapper>
+          <label>{t('BUSINESS_OWNER', 'Business owner')}</label>
+          {businessList?.loading ? (
+            <Skeleton height={44} />
+          ) : (
+            <Select
+              options={ownerOptions}
+              className='select'
+              defaultValue={formState?.changes?.user_id ?? selectedDevice?.user_id}
+              placeholder={t('SELECT_OPTION', 'Select an option')}
+              onChange={(value) => handleChangeFormState({ user_id: value })}
+              isShowSearchBar
+              searchBarIsCustomLayout
+              searchBarIsNotLazyLoad
+              searchValue={userSearchVal}
+              handleChangeSearch={(val) => setUserSearchVal(val)}
+            />
+          )}
+        </SelectWrapper>
+      )}
+
       {selectedDevice && (
         <FormControl>
           <label>{t('DEVICE_CODE', 'Device Code')}</label>
@@ -177,7 +216,7 @@ export const BusinessDeviceDetail = (props) => {
   const businessDeviceDetailProps = {
     ...props,
     UIComponent: BusinessDeviceDetailUI,
-    propsToFetch: ['id', 'name', 'logo']
+    propsToFetch: ['id', 'name', 'logo', 'owners']
   }
   return <BusinessDeviceDetailController {...businessDeviceDetailProps} />
 }

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

@@ -114,6 +114,7 @@ export const SelectWrapper = styled.div`
       color: ${props => props.theme.colors.secundaryContrast};
     }
     .list {
+      width: 100%;
       background-color: ${props => props.theme.colors.secundary};
       border: none;
       
@@ -145,6 +146,16 @@ export const Option = styled.div`
   font-size: 14px;
   line-height: 24px;
   color: ${props => props.theme.colors.secundaryContrast};
+  word-break: break-all;
+  svg {
+    min-width: 25px;
+    height: 25px;
+    margin-right: 15px;
+    ${props => props.theme.rtl && css`
+      margin-left: 15px;
+      margin-right: 0;
+    `}
+  }
 `
 
 export const Logo = styled.img`

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

@@ -74,7 +74,8 @@ const BusinessProductsListingUI = (props) => {
     setFees,
     getBusiness,
     businessTypes,
-    setBusinessTypes
+    setBusinessTypes,
+    siteState
   } = props
 
   const history = useHistory()
@@ -210,7 +211,10 @@ const BusinessProductsListingUI = (props) => {
   }
 
   const handleOpenSite = () => {
-    window.open(`https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`, '_blank')
+    const url = siteState?.site?.domain && siteState?.site?.ssl_process_status === 'ended'
+      ? `https://${siteState?.site?.domain}/store/${businessState?.business?.slug}`
+      : `https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`
+    window.open(url, '_blank')
   }
 
   const handleOpenAddBusiness = () => {

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

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { useLanguage } from 'ordering-components-admin-external'
+import React, { useMemo, useState } from 'react'
+import { useLanguage, useApi } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { useTheme } from 'styled-components'
 import { Button } from '../../../styles'
@@ -17,9 +17,10 @@ import {
 } from './styles'
 
 export const BusinessSalesChannel = (props) => {
-  const { setIsExtendExtraOpen, business } = props
+  const { setIsExtendExtraOpen, business, siteState } = props
 
   const [, t] = useLanguage()
+  const [ordering] = useApi()
   const theme = useTheme()
   const { width } = useWindowSize()
 
@@ -52,6 +53,10 @@ export const BusinessSalesChannel = (props) => {
     setSelectedItem(null)
   }
 
+  const storeUrl = useMemo(() => (siteState?.site?.domain && siteState?.site?.ssl_process_status === 'ended' && siteState?.ssl_status !== 'error'
+    ? `https://${siteState?.site?.domain}/store/${business?.slug}`
+    : `https://${ordering.project}.tryordering.com/store/${business?.slug}`), [siteState, business])
+
   return (
     <Container>
       <SalesContainer>
@@ -94,27 +99,28 @@ export const BusinessSalesChannel = (props) => {
           <>
             {selectedItem?.key === 'facebook' && (
               <BusinessSalesFacebook
-                businessSlug={business.slug}
                 socialItem={selectedItem}
+                storeUrl={storeUrl}
                 onClose={handleCloseDetail}
               />
             )}
             {selectedItem?.key === 'tiktok' && (
               <BusinessSalesTiktok
+                storeUrl={storeUrl}
                 socialItem={selectedItem}
                 onClose={handleCloseDetail}
               />
             )}
             {selectedItem?.key === 'instagram' && (
               <BusinessSalesInstagram
-                businessSlug={business.slug}
+                storeUrl={storeUrl}
                 socialItem={selectedItem}
                 onClose={handleCloseDetail}
               />
             )}
             {selectedItem?.key === 'google_my_business' && (
               <BusinessSalesGoogle
-                businessSlug={business.slug}
+                storeUrl={storeUrl}
                 socialItem={selectedItem}
                 onClose={handleCloseDetail}
               />

package/src/components/Stores/BusinessSalesFacebook/FacebookProfile.js

@@ -8,7 +8,7 @@ import {
   CopyInputWrapper
 } from './styles'
 
-export const FacebookProfile = ({ businessSlug }) => {
+export const FacebookProfile = ({ storeUrl }) => {
   const [, t] = useLanguage()
   const theme = useTheme()
 
@@ -20,7 +20,7 @@ export const FacebookProfile = ({ businessSlug }) => {
         <p>{t('BUSINESS_FACEBOOK_PROFILE_STEP1_DESC', 'Copy this link below. It’s your unique Ordering link for facebook.')}</p>
         <CopyInputWrapper>
           <Input
-            defaultValue='https://yourbusinessname.com/store/storename'
+            defaultValue={storeUrl || 'https://yourbusinessname.com/store/storename'}
             disabled
           />
         </CopyInputWrapper>

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

@@ -4,7 +4,7 @@ import { useWindowSize } from '../../../hooks/useWindowSize'
 import {
   Container,
   Header,
-  LeftHeader,
+  LeftHeader
   // Tabs,
   // Tab
 } from './styles'
@@ -14,7 +14,7 @@ import { FacebookProfile } from './FacebookProfile'
 import { FacebookPost } from './FacebookPost'
 
 export const BusinessSalesFacebook = (props) => {
-  const { onClose, socialItem, businessSlug } = props
+  const { onClose, socialItem, storeUrl } = props
 
   const { width } = useWindowSize()
   // const [, t] = useLanguage()
@@ -74,7 +74,7 @@ export const BusinessSalesFacebook = (props) => {
           </Tab>
         ))}
       </Tabs> */}
-      {selectedTab === 'profile' && <FacebookProfile businessSlug={businessSlug} />}
+      {selectedTab === 'profile' && <FacebookProfile storeUrl={storeUrl} />}
       {selectedTab === 'post' && <FacebookPost />}
     </Container>
   )

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { IconButton, Input } from '../../../styles'
-import { XLg, Files } from 'react-bootstrap-icons'
+import { XLg } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
 import {
   Container,
@@ -14,7 +14,7 @@ import {
 } from './styles'
 
 export const BusinessSalesGoogle = (props) => {
-  const { onClose, socialItem, businessSlug } = props
+  const { onClose, socialItem, storeUrl } = props
 
   const { width } = useWindowSize()
   const [, t] = useLanguage()
@@ -77,7 +77,7 @@ export const BusinessSalesGoogle = (props) => {
         <p>{t('BUSINESS_GOOGLE_STEP3_DESC', 'Scroll down and find Order ahead links and Menu link fields. Paste the link below.')}</p>
         <CopyInputWrapper isBottom>
           <Input
-            defaultValue='https://yourbusinessname.com/store/storename'
+            defaultValue={storeUrl || 'https://yourbusinessname.com/store/storename'}
             disabled
           />
         </CopyInputWrapper>

package/src/components/Stores/BusinessSalesInstagram/AdvancedInstagram.js

@@ -9,7 +9,7 @@ import {
   ImageWrapper
 } from './styles'
 
-export const AdvancedInstagram = (props) => {
+export const AdvancedInstagram = ({ storeUrl }) => {
   const [, t] = useLanguage()
   const theme = useTheme()
 
@@ -40,7 +40,7 @@ export const AdvancedInstagram = (props) => {
         />
         <CopyInputWrapper isBottom>
           <Input
-            defaultValue='https://yourbusinessname.com/store/storename'
+            defaultValue={storeUrl || 'https://yourbusinessname.com/store/storename'}
             disabled
           />
         </CopyInputWrapper>

package/src/components/Stores/BusinessSalesInstagram/GeneralInstagram.js

@@ -8,7 +8,7 @@ import {
   CopyInputWrapper
 } from './styles'
 
-export const GeneralInstagram = ({ businessSlug }) => {
+export const GeneralInstagram = ({ storeUrl }) => {
   const [, t] = useLanguage()
   const theme = useTheme()
 
@@ -37,7 +37,7 @@ export const GeneralInstagram = ({ businessSlug }) => {
         <p>{t('BUSINESS_INSTAGRAM_GENERAL_STEP5_DESC', 'Just add this link to the website field:')}</p>
         <CopyInputWrapper isBottom>
           <Input
-            defaultValue='https://yourbusinessname.com/store/storename'
+            defaultValue={storeUrl || 'https://yourbusinessname.com/store/storename'}
             disabled
           />
         </CopyInputWrapper>

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

@@ -14,7 +14,7 @@ import {
 } from './styles'
 
 export const BusinessSalesInstagram = (props) => {
-  const { onClose, socialItem, businessSlug } = props
+  const { onClose, socialItem, storeUrl } = props
 
   const { width } = useWindowSize()
   const [, t] = useLanguage()
@@ -74,8 +74,8 @@ export const BusinessSalesInstagram = (props) => {
           </Tab>
         ))}
       </Tabs>
-      {selectedTab === 'general' && <GeneralInstagram businessSlug={businessSlug} />}
-      {selectedTab === 'advanced' && <AdvancedInstagram businessSlug={businessSlug} />}
+      {selectedTab === 'general' && <GeneralInstagram storeUrl={storeUrl} />}
+      {selectedTab === 'advanced' && <AdvancedInstagram />}
     </Container>
   )
 }

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

@@ -38,7 +38,8 @@ export const BusinessSummary = (props) => {
     handleDuplicateBusiness,
     handleDeleteBusiness,
     extraOpen,
-    spoonityConfig
+    spoonityConfig,
+    siteState
   } = props
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
@@ -56,7 +57,10 @@ export const BusinessSummary = (props) => {
   }
 
   const handleOpenSite = () => {
-    window.open(`https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`, '_blank')
+    const url = siteState?.site?.domain && siteState?.site?.ssl_process_status === 'ended'
+      ? `https://${siteState?.site?.domain}/store/${businessState?.business?.slug}`
+      : `https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`
+    window.open(url, '_blank')
   }
 
   const itemsExcluded = !!spoonityConfig ? ['publishing', 'personalization'] : ['publishing', 'spoonity_key', 'personalization']

package/src/components/Users/CustomersListing/index.js

@@ -129,16 +129,15 @@ const CustomersListingUI = (props) => {
           <VerifiedStatusFilterContainer>
             <Button
               color={(orderFilterValue === '' || orderFilterValue === null) ? 'primary' : 'secundaryDark'}
-              onClick={() => handleChangeOrderFilterValue('')}
+              onClick={() => handleChangeOrderFilterValue(null)}
             >
               {t('ALL', 'All')}
-              {(orderFilterValue === '' || orderFilterValue === null) && <CloseIcon />}
             </Button>
             {orderList.map((item, i) => (
               <Button
                 key={i}
                 color={orderFilterValue === item.value ? 'primary' : 'secundaryDark'}
-                onClick={() => handleChangeOrderFilterValue(item.value)}
+                onClick={() => handleChangeOrderFilterValue(prev => prev === item.value ? null : item.value)}
               >
                 {item.name}
                 {orderFilterValue === item.value && <CloseIcon />}

package/src/utils/index.js

@@ -3,7 +3,7 @@ import FaCcMastercard from '@meronex/icons/fa/FaCcMastercard'
 import FaCcVisa from '@meronex/icons/fa/FaCcVisa'
 import FaCreditCard from '@meronex/icons/fa/FaCreditCard'
 import moment from 'moment'
-import { useLanguage } from 'ordering-components-admin-external'
+import { useLanguage, CODES } from 'ordering-components-admin-external'
 
 export const optimizeImage = (url, params, fallback) => {
   if (!url && fallback) return fallback
@@ -194,6 +194,11 @@ export const getSeconds = (seconds) => {
   return Math.floor(remain - Math.floor(remain / 60) * 60)
 }
 
+export const findExitingCode = (countryCode) => {
+  const code = CODES.find(code => code.countryCode === (countryCode || '').toUpperCase())
+  return code?.countryCode
+}
+
 /**
  * Function to check if a number is decimal or not
  * @param {*} value number to check if decimal or not
@@ -384,6 +389,59 @@ export const reviewCommentList = (type) => {
   return reviews[type]
 }
 
+ export 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
+  }
+
+export const getOrderStatuPickUp = (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: 4, value: 'Preparation Completed', slug: 'PREPARATION_COMPLETED', percentage: 50 },
+      { key: 5, value: 'Reject by business', slug: 'REJECT_BY_BUSINESS', percentage: 0 },
+      { key: 7, value: 'Accepted by business', slug: 'ACCEPTED_BY_BUSINESS', percentage: 30 },
+      { key: 13, value: 'Preorder', slug: 'PREORDER', percentage: 0 },
+      { key: 14, value: 'Order not ready', slug: 'ORDER_NOT_READY', percentage: 30 },
+      { 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: 20, value: 'Customer almost arrived to business', slug: 'CUSTOMER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 70 },
+      { key: 21, value: 'Customer arrived to business', slug: 'CUSTOMER_ARRIVED_TO_BUSINESS', percentage: 90 },
+    ]
+
+    const objectStatus = orderStatus.find((o) => o.key === status)
+    return objectStatus && objectStatus
+  }
+
 /**
  * function to manage order reject comment list
  * @param {string} param0 type of orders to return

package/template/app.js

@@ -5,9 +5,18 @@ import {
   Route,
   Link,
   Redirect,
-  useLocation
+  useLocation,
+  useHistory
 } from 'react-router-dom'
-import { useSession, useOrder, useLanguage, useConfig, GoogleTagManager, CannyIdentification } from 'ordering-components-admin-external'
+import {
+  useSession,
+  useOrder,
+  useLanguage,
+  useConfig,
+  GoogleTagManager,
+  CannyIdentification,
+  useEvent
+} from 'ordering-components-admin-external'
 import { NotNetworkConnectivity } from '../src/components/NotNetworkConnectivity'
 import { useOnlineStatus } from '../src/hooks/useOnlineStatus'
 import { useWindowSize } from '../src/hooks/useWindowSize'
@@ -77,10 +86,15 @@ import { OrderingWidgets } from './pages/OrderingWidgets'
 import { BusinessDevicesList } from './pages/BusinessDevicesList'
 
 export const App = () => {
+  const history = useHistory()
+  const [events] = useEvent()
   const [{ auth, loading, user }] = useSession()
   const [orderStatus] = useOrder()
-  const [{ configs }] = useConfig()
+  const [{ configs, loading: configLoading }] = useConfig()
   const [loaded, setLoaded] = useState(false)
+  const [oneSignalState, setOneSignalState] = useState({
+    notification_app: settings.notification_app
+  })
   const [, t] = useLanguage()
   const onlineStatus = useOnlineStatus()
   const { height } = useWindowSize()
@@ -115,6 +129,64 @@ export const App = () => {
     }
   }, [height])
 
+  const oneSignalSetup = () => {
+    if (!configs?.onesignal_dashboardweb_id?.value) {
+      setOneSignalState({
+        notification_app: settings.notification_app
+      })
+      return
+    }
+    const OneSignal = window.OneSignal || []
+    const initConfig = {
+      appId: configs?.onesignal_dashboardweb_id?.value,
+      // allowLocalhostAsSecureOrigin: true,
+      notificationClickHandlerAction: 'navigate'
+    }
+
+    OneSignal.push(function () {
+      OneSignal.SERVICE_WORKER_PARAM = { scope: '/push/onesignal/' }
+      OneSignal.SERVICE_WORKER_PATH = 'push/onesignal/OneSignalSDKWorker.js'
+      OneSignal.SERVICE_WORKER_UPDATER_PATH = 'push/onesignal/OneSignalSDKWorker.js'
+      OneSignal.init(initConfig)
+
+      const onNotificationClicked = function (data) {
+        if (data?.data?.order_uuid) {
+          history.push(`/orders?id=${data?.data?.order_uuid}`)
+        }
+      }
+      const handler = function (data) {
+        onNotificationClicked(data)
+        OneSignal.addListenerForNotificationOpened(handler)
+      }
+      OneSignal.addListenerForNotificationOpened(handler)
+
+      OneSignal.on('subscriptionChange', function (isSubscribed) {
+        if (isSubscribed) {
+          OneSignal.getUserId((userId) => {
+            const data = {
+              ...oneSignalState,
+              notification_token: userId
+            }
+            setOneSignalState(data)
+          })
+        }
+      })
+
+      OneSignal.getUserId((userId) => {
+        const data = {
+          ...oneSignalState,
+          notification_token: userId
+        }
+        setOneSignalState(data)
+      })
+    })
+  }
+
+  useEffect(() => {
+    if (configLoading) return
+    oneSignalSetup()
+  }, [configLoading, events])
+
   return (
     <>
       <ListenPageChanges />
@@ -160,6 +232,7 @@ export const App = () => {
                             <Login
                               useLoginByEmail
                               elementLinkToForgotPassword={<Link to='/password/forgot'>{t('RESET_PASSWORD', 'Reset password')}</Link>}
+                              notificationState={oneSignalState}
                             />
                           )
                           : (

package/template/config.json

@@ -1,5 +1,6 @@
 {
   "app_id": "ordering-admin-react",
+  "notification_app": "dashboardweb",
   "app_name": "Ordering Admin",
   "billing_url": "https://billing-dashboard.tryordering.com",
   "api": {