ordering-ui-admin-external 1.23.5 → 1.24.0

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/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

@@ -389,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": {