[Web App] novu functionalilty to received push notification - added (#…

…999)

* novu functionalilty to received push notification - added

* NovuProviderWrapper: naming refactor

* NovuProviderWrapper: isNovuProviderEnabled flag - added, to avoid using Novu in production for now

packages/web-app/.env

@@ -20,3 +20,6 @@ REACT_APP_STRAPI_UPLOAD_URL=https://cms-api.salad.io
 # Unleash
 REACT_APP_UNLEASH_URL=https://features.salad.com/proxy
 REACT_APP_UNLEASH_API_KEY=3hV0ZDadGDx7I4soIsojIBMoSNEixliH
+
+# Novu
+REACT_APP_NOVU_APP_ID=o2W6ts-mIiuS

packages/web-app/.env.development

@@ -21,6 +21,9 @@ REACT_APP_STRAPI_UPLOAD_URL=https://cms-api-testing.salad.io
 REACT_APP_UNLEASH_URL=https://features-testing.salad.com/proxy
 REACT_APP_UNLEASH_API_KEY=zrujLzhnwVZkIOlS74oZZ0DK7ZXs3Ifo
 
+# Novu
+REACT_APP_NOVU_APP_ID=MAiF4Q6JMQIU
+
 # Apply a custom basename and port to test with a local reverse proxy.
 # PUBLIC_URL=/app
 # PORT=3001

packages/web-app/package.json

@@ -79,6 +79,7 @@
     "@fortawesome/free-regular-svg-icons": "6.3.0",
     "@fortawesome/free-solid-svg-icons": "6.3.0",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "@novu/notification-center": "0.14.0",
     "@saladtechnologies/garden-components": "1.1.5",
     "@saladtechnologies/garden-fonts": "1.0.3",
     "@saladtechnologies/garden-icons": "1.0.11",

packages/web-app/src/components/NovuProviderWrapper/NovuProviderWrapper.tsx

@@ -0,0 +1,28 @@
+import { NovuProvider } from '@novu/notification-center'
+import { observer } from 'mobx-react'
+import type { ReactElement } from 'react'
+import { config } from '../../config'
+import { getStore } from '../../Store'
+
+interface NovuProviderWrapperProps {
+  children: ReactElement
+}
+
+const isNovuProviderEnabled = false
+
+export const NovuProviderWrapper = observer(({ children }: NovuProviderWrapperProps): ReactElement | null => {
+  const store = getStore()
+  const { currentProfile } = store.profile
+  if (currentProfile?.id && isNovuProviderEnabled) {
+    return (
+      <NovuProvider
+        applicationIdentifier={config.novuAppId}
+        subscriberId={currentProfile.id}
+        initialFetchingStrategy={{ fetchNotifications: true }}
+      >
+        {children}
+      </NovuProvider>
+    )
+  }
+  return children
+})

packages/web-app/src/components/NovuProviderWrapper/index.ts

@@ -0,0 +1 @@
+export { NovuProviderWrapper } from './NovuProviderWrapper'

packages/web-app/src/config.tsx

@@ -42,6 +42,7 @@ export class Config {
   public readonly rewardRefreshRate: number = numberOrDefault('REACT_APP_REWARD_REFRESH_RATE', convertMinToMilli(5))
   public readonly searchUrl: string = requiredString('REACT_APP_SEARCH_URL')
   public readonly strapiUploadUrl: string = requiredString('REACT_APP_STRAPI_UPLOAD_URL')
+  public readonly novuAppId: string = requiredString('REACT_APP_NOVU_APP_ID')
 
   public get apiBaseUrl(): string {
     const override = Storage.getItem('OVERRIDE_APP_API_URL')

packages/web-app/src/index.tsx

@@ -1,15 +1,15 @@
 // Import CSS. Order is important!
-import './index.css'
 import '@saladtechnologies/garden-fonts'
 import 'react-hint/css/index.css'
 import 'react-loading-skeleton/dist/skeleton.css'
 import 'react-toastify/dist/ReactToastify.css'
+import './index.css'
 
 // Import polyfills. Order is important!
-import 'react-app-polyfill/stable'
-import 'whatwg-fetch'
 import 'abortcontroller-polyfill'
+import 'react-app-polyfill/stable'
 import 'url-polyfill'
+import 'whatwg-fetch'
 
 // Import dependencies.
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
@@ -26,6 +26,7 @@ import { Router } from 'react-router-dom'
 import { App } from './App'
 import { createClient } from './axiosFactory'
 import { Head } from './components'
+import { NovuProviderWrapper } from './components/NovuProviderWrapper'
 import { config } from './config'
 import { ErrorBoundary } from './ErrorBoundary'
 import { FeatureManagerProvider, UnleashFeatureManager } from './FeatureManager'
@@ -91,10 +92,12 @@ setTimeout(() => {
                         return rootStore.appLoading ? (
                           <LoadingScreen />
                         ) : (
-                          <div>
+                          <>
                             <Tooltips />
-                            <App history={history} />
-                          </div>
+                            <NovuProviderWrapper>
+                              <App history={history} />
+                            </NovuProviderWrapper>
+                          </>
                         )
                       }}
                     </Observer>