feat: WebEngage integration

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) {
@@ -20,13 +20,11 @@ function enableHotReload(store) {
     });
   }
 }
-
 if (window.OneSignal) {
   Object.assign(opts, {
-    serviceWorkerLocation: "/OneSignalSDKWorker.js"
+    serviceWorkerLocation: "/OneSignalSDKWorker.js",
   });
 }
-
 global.wretch = wretch;
 
 startApp(renderApplication, REDUCERS, opts).then(enableHotReload);

app/server/app.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-console, no-unused-vars, import/extensions, object-shorthand, global-require */
+import bodyParser from "body-parser";
 import createApp from "@quintype/framework/server/create-app";
 import { getClient, Collection } from "@quintype/framework/server/api-client";
 import logger from "@quintype/framework/server/logger";
@@ -14,6 +15,8 @@ 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 { enableWebengage } from "../../config/webengage-config";
+import { handleWebEngageNotifications } from "./webengage/webengage-handler";
 
 export const app = createApp();
 
@@ -72,7 +75,12 @@ app.get("*", (req, res, next) => {
     return next();
   }
 });
+// Begin webengage integration route
+if (enableWebengage) {
+  app.post("/integrations/webengage/trigger-notification", bodyParser.json(), handleWebEngageNotifications);
+}
 
+// End webengage integration route
 function generateSeo(config, pageType) {
   return new SEO({
     staticTags: Object.assign(generateStaticData(config)),
@@ -133,6 +141,6 @@ isomorphicRoutes(app, {
   staticRoutes: STATIC_ROUTES,
   seo: generateSeo,
   preloadJs: true,
-  oneSignalServiceWorkers: true,
+  oneSignalServiceWorkers: false,
   prerenderServiceUrl: "https://prerender.quintype.io",
 });

app/server/handlers/render-layout.js

@@ -17,6 +17,7 @@ const fontJsContent = assetPath("font.js") ? readAsset("font.js") : "";
 const allChunks = getAllChunks("list", "story", "home");
 
 export async function renderLayout(res, params) {
+  const storeState = params.store.getState();
   const {
     gtmId,
     gaId,
@@ -28,17 +29,15 @@ export async function renderLayout(res, params) {
     loadAdsSynchronously,
     pageType,
     enableMetype,
-  } = getConfig(params.store.getState());
+  } = getConfig(storeState);
   const chunk = params.shell ? null : allChunks[getChunkName(params.pageType)];
   const criticalCss = await getCriticalCss();
   const styleTags = await getStyleTags();
-  const arrowCss = await getArrowCss(params.store.getState());
+  const arrowCss = await getArrowCss(storeState);
   const isProduction = process.env.NODE_ENV === "production";
 
-  const placeholderDelay = parseInt(
-    get(params.store.getState(), ["qt", "config", "publisher-attributes", "placeholder_delay"])
-  );
-
+  const placeholderDelay = parseInt(get(storeState, ["qt", "config", "publisher-attributes", "placeholder_delay"]));
+  const webengageLicenseCode = get(storeState, ["qt", "config", "webengage-config", "licenseCode"], "");
   // Need to change this condition after static page api is fixed
   const metadataHeader =
     (pageType === "static-page" && params.metadata?.header && params.metadata?.header === true) ||
@@ -51,6 +50,7 @@ export async function renderLayout(res, params) {
     "pages/layout",
     Object.assign(
       {
+        webengageLicenseCode,
         isProduction,
         assetPath: assetPath,
         metadata: params.metadata,

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,
       "ads-config": ads,
-      svgSpritePath
+      svgSpritePath,
+      "webengage-config": webengageConfig,
     }),
     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,
         "image-cdn-format": "gumlet",
         "ads-config": ads,
         svgSpritePath,
         domainSlug,
-        showPlaceholder: publisherAttributes.enable_placeholder
-      })
+        showPlaceholder: publisherAttributes.enable_placeholder,
+        "webengage-config": webengageConfig,
+      }),
     };
   });
 }

app/server/webengage/createCampaign.js

@@ -0,0 +1,39 @@
+import get from "lodash/get";
+import fetch from "node-fetch";
+
+async function createCampaign({ res, webhookContent, platform, url, webengageHeaders, logger }) {
+  const headline = get(webhookContent, ["headline"], "");
+  const title = get(webhookContent, ["title"], headline);
+  const TAGS = ["storypublish"];
+
+  const webRequestPayload = {
+    title,
+    sdks: null,
+    container: "ONETIME",
+    tags: TAGS,
+    experimentMetaData: { applyUCG: true },
+    applyUCG: true,
+  };
+
+  const appRequestPayload = {
+    title,
+    sdks: [2, 3],
+    container: "ONETIME",
+    tags: TAGS,
+    appIds: {},
+  };
+  const requestPayload = platform === "push-notifications" ? appRequestPayload : webRequestPayload;
+  try {
+    const apiResponse = await fetch(url, {
+      method: "POST",
+      body: JSON.stringify(requestPayload),
+      headers: webengageHeaders,
+    });
+    const audienceCreationResponse = await apiResponse.json();
+    return get(audienceCreationResponse, ["response", "data", "id"]);
+  } catch (e) {
+    logger.error("Error handling Audience/Campaign Creation : " + e);
+    res.status(503).send({ error: { message: "Audience/Campaign creation failure" } });
+  }
+}
+export default createCampaign;

app/server/webengage/createConversion.js

@@ -0,0 +1,46 @@
+import fetch from "node-fetch";
+import get from "lodash/get";
+import { licenseCode } from "../../../config/webengage-config";
+
+async function createConversion({ res, webhookContent, url, campaignId, webengageHeaders, logger }) {
+  const headline = get(webhookContent, ["headline"], "");
+  const title = get(webhookContent, ["title"], headline);
+  const requestPayload = {
+    deadline: "+7d",
+    experiment: `${campaignId}`,
+    licenseCode: `${licenseCode}`,
+    controlGroup: 0,
+    name: title,
+    triggerSet: {
+      triggers: [
+        {
+          name: "Trigger ",
+          category: "application",
+          type: "EVENT",
+          timeDifference: "",
+          timeAttribute: {
+            name: "event_time",
+            category: "system",
+          },
+          filters: null,
+        },
+      ],
+    },
+    version: 2,
+    status: "ACTIVE",
+  };
+
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      body: JSON.stringify(requestPayload),
+      headers: webengageHeaders,
+    });
+    await response.json();
+  } catch (e) {
+    logger.error("Error handling createConversion Creation : " + e);
+    res.status(503).send({ error: { message: "Conversion creation failure" } });
+  }
+}
+
+export default createConversion;

app/server/webengage/createVariation.js

@@ -0,0 +1,90 @@
+import get from "lodash/get";
+import {
+  webPushTextLayoutId,
+  appPushTextLayoutId,
+  appPushBannerLayoutId,
+  icon,
+} from "../../../config/webengage-config";
+import fetch from "node-fetch";
+
+async function createVariation({
+  res,
+  webhookContent,
+  platform,
+  url,
+  sketchesHost,
+  eventType,
+  cdnName,
+  webengageHeaders,
+  logger,
+}) {
+  const headline = get(webhookContent, ["headline"], "");
+  const title = get(webhookContent, ["title"], headline);
+  const message = get(webhookContent, ["message"], "");
+  const subheadline = get(webhookContent, ["subheadline"], "");
+  const storyUrl = get(webhookContent, ["story-url"], "");
+  const slug = `${sketchesHost}/${get(webhookContent, ["slug"], "")}`;
+  const STORY_PUBLISH_EVENT = "story-publish";
+  const heroImage =
+    eventType === STORY_PUBLISH_EVENT
+      ? `${cdnName}${get(webhookContent, ["v1", "data", "hero-image-s3-key"])}`
+      : get(webhookContent, ["hero-image-url"], "");
+
+  const webRequestPayload = [
+    {
+      layoutEId: webPushTextLayoutId,
+      title,
+      description: message || subheadline,
+      sampling: 100,
+      icon,
+      requireInteraction: true,
+      cta: { actionText: "NA", actionLink: storyUrl || slug, type: "EXTERNAL_URL", isPrime: true },
+    },
+  ];
+  const appPushRequestPayload = [
+    {
+      sampling: 50,
+      layoutEId: appPushTextLayoutId,
+      title,
+      message: message || subheadline,
+      androidDetails: {
+        expandableDetails: {},
+      },
+      iosDetails: {
+        expandableDetails: {},
+      },
+    },
+    {
+      sampling: 50,
+      layoutEId: appPushBannerLayoutId,
+      experimentVariationStatus: "ACTIVE",
+      title,
+      message: message || subheadline,
+      androidDetails: {
+        expandableDetails: {
+          image: heroImage,
+        },
+      },
+      iosDetails: {
+        expandableDetails: {
+          image: heroImage,
+        },
+      },
+    },
+  ];
+  const requestPayload = platform === "push-notifications" ? appPushRequestPayload : webRequestPayload;
+
+  try {
+    const response = await fetch(url, {
+      method: "PUT",
+      body: JSON.stringify(requestPayload),
+      headers: webengageHeaders,
+    });
+    await response.json();
+  } catch (e) {
+    logger.error("Error handling Variation Creation : " + e);
+    res.status(503).send({ error: { message: "Variation creation failure" } });
+  }
+}
+
+export default createVariation;

app/server/webengage/launchCampaign.js

@@ -0,0 +1,12 @@
+import fetch from "node-fetch";
+async function launchCampaign({ res, url, webengageHeaders, logger }) {
+  try {
+    const response = await fetch(url, { method: "PUT", headers: webengageHeaders });
+    await response.json();
+  } catch (e) {
+    logger.error("Error handling launch Campaign:", +e);
+    res.status(503).send({ error: { message: "Campaign activation failure" } });
+  }
+}
+
+export default launchCampaign;

app/server/webengage/scheduleCampaign.js

@@ -0,0 +1,35 @@
+import fetch from "node-fetch";
+async function scheduleCampaign({ res, url, webengageHeaders, logger }) {
+  const requestPayload = {
+    trafficSegmentDto: {},
+    scheduler: {
+      sendNow: true,
+      sendInTz: "ACCOUNT",
+      sendIntelligently: false,
+      time: null,
+    },
+    triggerSet: null,
+    oneTime: true,
+    queueMessage: true,
+    ttl: 86400,
+    applyFrequencyCapping: true,
+    incrementFrequencyCappingCount: true,
+    applyDnd: true,
+    startDate: null,
+    endDate: null,
+  };
+
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      body: JSON.stringify(requestPayload),
+      headers: webengageHeaders,
+    });
+    await response.json();
+  } catch (e) {
+    logger.error("Error handling ScheduleCampaign  : " + e);
+    res.status(503).send({ error: { message: "ScheduleCampaign failure" } });
+  }
+}
+
+export default scheduleCampaign;