Implement webengage

app/client/app.js

@@ -9,7 +9,7 @@ import "../../app/assets/stylesheets/app.scss";
 const opts = {
   enableServiceWorker: process.env.NODE_ENV === "production",
   appVersion: require("../isomorphic/app-version"),
-  preRenderApplication
+  preRenderApplication,
 };
 
 function enableHotReload(store) {
@@ -21,12 +21,6 @@ function enableHotReload(store) {
   }
 }
 
-if (window.OneSignal) {
-  Object.assign(opts, {
-    serviceWorkerLocation: "/OneSignalSDKWorker.js"
-  });
-}
-
 global.wretch = wretch;
 
 startApp(renderApplication, REDUCERS, opts).then(enableHotReload);

app/server/app.js

@@ -7,56 +7,64 @@ import {
   isomorphicRoutes,
   staticRoutes,
   ampRoutes,
-  getWithConfig
+  getWithConfig,
 } from "@quintype/framework/server/routes";
 import { generateRoutes, STATIC_ROUTES } from "./routes";
 import { renderLayout } from "./handlers/render-layout";
 import { loadData, loadErrorData } from "./load-data";
 import { pickComponent } from "../isomorphic/pick-component";
 import { generateStaticData, generateStructuredData, SEO } from "@quintype/seo";
+import webengageConfig from "../../config/webengage-config";
 
 export const app = createApp();
 
 upstreamQuintypeRoutes(app, {});
 
-const redirectCollectionHandler = () => async (req, res, next, { client, config }) => {
-  const response = await Collection.getCollectionBySlug(client, req.params.collectionSlug, { limit: 20 }, { depth: 2 });
-  if (!response) {
-    return next();
-  }
-  const collection = response && response.collection;
-  if (collection.template === "section") {
-    const sectionId = collection.metadata.section[0].id;
-    const section = config.sections.find(section => section.id === sectionId) || {};
-    return res.redirect(301, `${section["section-url"]}`);
-  }
+const redirectCollectionHandler =
+  () =>
+  async (req, res, next, { client, config }) => {
+    const response = await Collection.getCollectionBySlug(
+      client,
+      req.params.collectionSlug,
+      { limit: 20 },
+      { depth: 2 }
+    );
+    if (!response) {
+      return next();
+    }
+    const collection = response && response.collection;
+    if (collection.template === "section") {
+      const sectionId = collection.metadata.section[0].id;
+      const section = config.sections.find((section) => section.id === sectionId) || {};
+      return res.redirect(301, `${section["section-url"]}`);
+    }
 
-  if (collection.template === "author") {
-    return res.redirect(301, `/author/${req.params.collectionSlug}`);
-  }
-  return next();
-};
+    if (collection.template === "author") {
+      return res.redirect(301, `/author/${req.params.collectionSlug}`);
+    }
+    return next();
+  };
 
-const logError = error => logger.error(error);
+const logError = (error) => logger.error(error);
 
 getWithConfig(app, "/collection/:collectionSlug", redirectCollectionHandler(), {
-  logError
+  logError,
 });
 
 function returnConfig(req) {
   return getClient(req.hostname)
     .getConfig()
-    .then(res => res.config || []);
+    .then((res) => res.config || []);
 }
 
 app.get("*", (req, res, next) => {
   if (req.hostname.includes("auth")) {
     const whitelistedUrls = ["user-login", "route-data.json", "manifest.json"];
-    const isPathPresent = element => req.params[0].includes(element);
+    const isPathPresent = (element) => req.params[0].includes(element);
     if (whitelistedUrls.some(isPathPresent)) {
       return next();
     } else {
-      returnConfig(req).then(response => {
+      returnConfig(req).then((response) => {
         const sketchesHost = response["sketches-host"];
         res.redirect(301, sketchesHost);
       });
@@ -72,21 +80,21 @@ function generateSeo(config, pageType) {
     structuredData: Object.assign(generateStructuredData(config), {
       enableLiveBlog: true,
       enableVideo: true,
-      enableNewsArticle: true
+      enableNewsArticle: true,
     }),
     enableTwitterCards: true,
     enableOgTags: true,
-    enableNews: true
+    enableNews: true,
   });
 }
 
 ampRoutes(app, {
-  seo: generateSeo
+  seo: generateSeo,
 });
 
 isomorphicRoutes(app, {
   appVersion: require("../isomorphic/app-version"),
-  logError: error => logger.error(error),
+  logError: (error) => logger.error(error),
   generateRoutes: generateRoutes,
   loadData: loadData,
   pickComponent: pickComponent,
@@ -96,6 +104,6 @@ isomorphicRoutes(app, {
   staticRoutes: STATIC_ROUTES,
   seo: generateSeo,
   preloadJs: true,
-  oneSignalServiceWorkers: true,
-  prerenderServiceUrl: "https://prerender.quintype.io"
+  prerenderServiceUrl: "https://prerender.quintype.io",
+  webengageConfig,
 });

app/server/handlers/render-layout.js

@@ -17,17 +17,9 @@ const fontJsContent = assetPath("font.js") ? readAsset("font.js") : "";
 const allChunks = getAllChunks("list", "story", "home");
 
 export async function renderLayout(res, params) {
-  const {
-    gtmId,
-    gaId,
-    cdnImage,
-    isOnesignalEnable,
-    isGtmEnable,
-    isGaEnable,
-    enableAds,
-    loadAdsSynchronously,
-    pageType,
-  } = getConfig(params.store.getState());
+  const { gtmId, gaId, cdnImage, isGtmEnable, isGaEnable, enableAds, loadAdsSynchronously, pageType } = getConfig(
+    params.store.getState()
+  );
   const chunk = params.shell ? null : allChunks[getChunkName(params.pageType)];
   const criticalCss = await getCriticalCss();
   const styleTags = await getStyleTags();
@@ -38,6 +30,8 @@ export async function renderLayout(res, params) {
     get(params.store.getState(), ["qt", "config", "publisher-attributes", "placeholder_delay"])
   );
 
+  const webengageLicenseCode = get(params.store.getState(), ["qt", "config", "webengage-config", "licenseCode"], "");
+
   res.render(
     "pages/layout",
     Object.assign(
@@ -72,13 +66,12 @@ export async function renderLayout(res, params) {
         serialize,
         isGtmEnable,
         isGaEnable,
-        isOnesignalEnable,
-        oneSignalScript: params.oneSignalScript,
         enableAds: enableAds && params.pageType !== "profile-page",
         loadAdsSynchronously,
         placeholderDelay,
         pageType,
         enableBreakingNews: params.pageType !== "profile-page",
+        webengageLicenseCode,
       },
       params
     )

app/server/helpers/index.js

@@ -94,7 +94,6 @@ export const getConfig = (state) => {
     gaId: get(state, ["qt", "config", "publisher-attributes", "google_analytics", "id"], ""),
     isGaEnable: get(state, ["qt", "config", "publisher-attributes", "google_analytics", "is_enable"], false),
     cdnImage: get(state, ["qt", "config", "cdn-image"], ""),
-    isOnesignalEnable: get(state, ["qt", "config", "publisher-attributes", "onesignal", "is_enable"], false),
     enableAds: get(state, ["qt", "config", "ads-config", "dfp_ads", "enable_ads"]),
     loadAdsSynchronously: get(state, ["qt", "config", "ads-config", "dfp_ads", "load_ads_synchronously"]),
     pageType: get(state, ["qt", "pageType"], ""),

app/server/load-data.js

@@ -15,6 +15,7 @@ import { getNavigationMenuArray } from "./data-loaders/menu-data";
 import { loadCollectionPageData } from "./data-loaders/collection-page-data";
 import { loadAuthorPageData } from "./data-loaders/author-page-data";
 import { PAGE_TYPE } from "../isomorphic/constants";
+import webengageConfig from "../../config/webengage-config";
 
 const { ads } = require("@quintype/framework/server/static-configuration");
 
@@ -27,10 +28,10 @@ const WHITELIST_CONFIG_KEYS = [
   "publisher-name",
   "public-integrations",
   "sketches-host",
-  "publisher-settings"
+  "publisher-settings",
 ];
 
-const svgSpritePath = Array.from(getAssetFiles()).find(asset => asset.includes("sprite"));
+const svgSpritePath = Array.from(getAssetFiles()).find((asset) => asset.includes("sprite"));
 
 export function getPublisherAttributes(publisherYml = publisher) {
   const publisherAttributes = get(publisherYml, ["publisher"], {});
@@ -42,15 +43,16 @@ export function loadErrorData(error, config) {
   const errorComponents = { 404: "not-found" };
   return Promise.resolve({
     data: {
-      navigationMenu: getNavigationMenuArray(config.layout.menu, config.sections)
+      navigationMenu: getNavigationMenuArray(config.layout.menu, config.sections),
     },
     config: Object.assign(pick(config.asJson(), WHITELIST_CONFIG_KEYS), {
       "publisher-attributes": publisherAttributes,
+      "webengage-config": webengageConfig,
       "ads-config": ads,
-      svgSpritePath
+      svgSpritePath,
     }),
     pageType: errorComponents[error.httpStatusCode],
-    httpStatusCode: error.httpStatusCode || 500
+    httpStatusCode: error.httpStatusCode || 500,
   });
 }
 
@@ -89,22 +91,23 @@ export function loadData(pageType, params, config, client, { host, next, domainS
     }
   }
 
-  return _loadData().then(data => {
+  return _loadData().then((data) => {
     return {
       httpStatusCode: data.httpStatusCode || 200,
       pageType: data.pageType || pageType,
       data: Object.assign({}, data, {
         navigationMenu: getNavigationMenuArray(config.layout.menu, config.sections),
-        timezone: publisherAttributes.timezone || null
+        timezone: publisherAttributes.timezone || null,
       }),
       config: Object.assign(pick(config.asJson(), WHITELIST_CONFIG_KEYS), {
         "publisher-attributes": publisherAttributes,
+        "webengage-config": webengageConfig,
         "image-cdn-format": "gumlet",
         "ads-config": ads,
         svgSpritePath,
         domainSlug,
-        showPlaceholder: publisherAttributes.enable_placeholder
-      })
+        showPlaceholder: publisherAttributes.enable_placeholder,
+      }),
     };
   });
 }

config/webengage-config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  enableWebengage: true,
+  licenseCode: "~10a5cb515",
+  apiKey: "2bdc2d5d-583f-4937-bd5a-4dff207a59c3",
+};