Added support for rendering in-app messages from Adobe Journey Optimizer

package.json

@@ -14,6 +14,7 @@
     "format": "prettier --write \"*.{html,js}\" \"{sandbox,src,test,scripts}/**/*.{html,js}\"",
     "test": "npm run test:unit && npm run test:scripts && npm run test:functional",
     "test:unit": "karma start --single-run",
+    "test:unit:debug": "karma start --browsers=Chrome --single-run=false --debug",
     "test:unit:watch": "karma start",
     "test:unit:saucelabs:local": "karma start karma.saucelabs.conf.js --single-run",
     "test:unit:coverage": "karma start --single-run --reporters spec,coverage",
@@ -58,11 +59,14 @@
     }
   ],
   "dependencies": {
+    "@adobe/aep-rules-engine": "^2.0.2",
+    "@adobe/reactor-cookie": "^1.0.0",
     "@adobe/reactor-load-script": "^1.1.1",
     "@adobe/reactor-object-assign": "^1.0.0",
     "@adobe/reactor-query-string": "^1.0.0",
     "css.escape": "^1.5.1",
     "js-cookie": "2.2.1",
+    "parse-uri": "^1.0.7",
     "uuid": "^3.3.2"
   },
   "devDependencies": {

sandbox/public/index.html

@@ -54,7 +54,7 @@
       !function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
       []).push(o),n[o]=function(){var u=arguments;return new Promise(
       function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
-      (window,["alloy", "organizationTwo", "cjmProd"]);
+      (window,["alloy", "organizationTwo", "cjmProd", 'iamAlloy']);
     </script>
 
     <script nonce="%REACT_APP_NONCE%">

sandbox/src/App.js

@@ -31,6 +31,7 @@ import PersonalizationFormBased from "./PersonalizationFormBased";
 import Identity from "./Identity";
 import AlloyVersion from "./components/AlloyVersion";
 import ConfigOverrides from "./ConfigOverrides.jsx";
+import InAppMessages from "./components/InAppMessagesDemo/InAppMessages";
 
 const BasicExample = () => {
   return (
@@ -96,6 +97,9 @@ const BasicExample = () => {
             <li>
               <a href="/configOverrides">Config Overrides</a>
             </li>
+            <li>
+              <Link to="/inAppMessages">In-app Messages</Link>
+            </li>
           </ul>
           <hr />
 
@@ -125,6 +129,7 @@ const BasicExample = () => {
           <Route path="/redirectedNewPage" component={RedirectedNewPage} />
           <Route path="/identity" component={Identity} />
           <Route path="/configOverrides" component={ConfigOverrides} />
+          <Route path="/inAppMessages" component={InAppMessages} />
         </div>
       </Router>
       <AlloyVersion />

sandbox/src/components/ContentSecurityPolicy.js

@@ -20,7 +20,7 @@ export default function ContentSecurityPolicy() {
         http-equiv="Content-Security-Policy"
         // cdn.tt.omtrdc.net is necessary for Target VEC to function properly.
         // *.sc.omtrdc.net is necessary for Analytics Data Insertion API to function properly
-        content={`default-src 'self';
+        content={`default-src 'self' blob:;
               script-src 'self' 'nonce-${process.env.REACT_APP_NONCE}' cdn.jsdelivr.net assets.adobedtm.com cdn.tt.omtrdc.net;
               style-src 'self' 'unsafe-inline';
               img-src * data:;

sandbox/src/components/InAppMessagesDemo/InAppMessages.js

@@ -0,0 +1,163 @@
+/* eslint-disable no-bitwise, no-console */
+import React, { useEffect, useState } from "react";
+import ContentSecurityPolicy from "../ContentSecurityPolicy";
+import "./InAppMessagesStyle.css";
+
+const configKey = localStorage.getItem("iam-configKey") || "stage";
+
+const config = {
+  cjmProdNld2: {
+    name: "CJM Prod NLD2 – Prod (NLD2)",
+    alloyInstance: window.alloy,
+    datastreamId: "7a19c434-6648-48d3-948f-ba0258505d98",
+    orgId: "4DA0571C5FDC4BF70A495FC2@AdobeOrg",
+    decisionContext: {},
+    edgeDomain: "edge.adobedc.net"
+  },
+  aemonacpprodcampaign: {
+    name: "AEM Assets Departmental - Campaign – Prod (VA7)",
+    alloyInstance: window.iamAlloy,
+    datastreamId: "8cefc5ca-1c2a-479f-88f2-3d42cc302514",
+    orgId: "906E3A095DC834230A495FD6@AdobeOrg",
+    decisionContext: {},
+    edgeDomain: "edge.adobedc.net"
+  },
+  stage: {
+    name: "CJM Stage - AJO Web (VA7)",
+    alloyInstance: window.iamAlloy,
+    datastreamId: "15525167-fd4e-4511-b9e0-02119485784f",
+    orgId: "745F37C35E4B776E0A49421B@AdobeOrg",
+    decisionContext: {},
+    edgeDomain: "edge-int.adobedc.net"
+  }
+};
+
+const {
+  datastreamId,
+  orgId,
+  decisionContext,
+  edgeDomain,
+  alloyInstance
+} = config[configKey];
+
+const getURLParams = key => {
+  const urlParams = new URLSearchParams(window.location.search);
+  return urlParams.get(key);
+};
+
+if (alloyInstance !== window.alloy) {
+  alloyInstance("configure", {
+    defaultConsent: getURLParams("defaultConsent") || "in",
+    datastreamId,
+    orgId,
+    edgeDomain,
+    thirdPartyCookiesEnabled: false,
+    targetMigrationEnabled: false,
+    debugEnabled: true
+  });
+}
+
+export default function InAppMessages() {
+  const [sentEvent, setSentEvent] = useState(false);
+  const [customTraitKey, setCustomTraitKey] = useState("");
+  const [customTraitValue, setCustomTraitValue] = useState("");
+
+  useEffect(() => {
+    const unsubscribePromise = alloyInstance("subscribeRulesetItems", {
+      callback: result => {
+        console.log("subscribeRulesetItems", result);
+      }
+    });
+
+    return () => {
+      unsubscribePromise.then(({ unsubscribe }) => unsubscribe());
+    };
+  }, []);
+
+  const renderDecisions = (useEvaluateRulesetsCommand = false) => {
+    const context = { ...decisionContext };
+
+    if (customTraitKey.length !== 0 && customTraitValue.length !== 0) {
+      context[customTraitKey] = customTraitValue;
+    }
+
+    if (useEvaluateRulesetsCommand) {
+      alloyInstance("evaluateRulesets", {
+        renderDecisions: true,
+        personalization: {
+          decisionContext: context
+        }
+      });
+      return;
+    }
+
+    alloyInstance("sendEvent", {
+      renderDecisions: true,
+      personalization: { surfaces: ["#hello"], decisionContext: context }
+    }).then(() => setSentEvent(true));
+  };
+
+  const deleteAllCookies = () => {
+    const cookies = document.cookie.split(";");
+
+    for (let i = 0; i < cookies.length; i += 1) {
+      const cookie = cookies[i];
+      const eqPos = cookie.indexOf("=");
+      const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+      document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+    }
+  };
+
+  const setNewConfigEnv = value => {
+    localStorage.setItem("iam-configKey", value);
+    deleteAllCookies();
+    window.location.reload();
+  };
+
+  return (
+    <div>
+      <ContentSecurityPolicy />
+      <h1>In App Messages For Web</h1>
+      <div>
+        <label htmlFor="cars">Environment:</label>
+        <select
+          id="configEnv"
+          name="configEnv"
+          onChange={evt => setNewConfigEnv(evt.target.value)}
+          defaultValue={configKey}
+        >
+          {Object.keys(config).map(conf => (
+            <option key={conf} value={conf}>
+              {config[conf].name}
+            </option>
+          ))}
+        </select>
+        <div style={{ marginBottom: "20px" }}>
+          <h3>Custom Trait</h3>
+          <span style={{ marginRight: "20px" }}>
+            <label htmlFor="input-custom-trait-key">Key</label>
+            <input
+              id="input-custom-trait-key"
+              type="text"
+              value={customTraitKey}
+              onChange={evt => setCustomTraitKey(evt.target.value)}
+            />
+          </span>
+          <span style={{ marginRight: "20px" }}>
+            <label htmlFor="input-custom-trait-value">Value</label>
+            <input
+              id="input-custom-trait-value"
+              type="text"
+              value={customTraitValue}
+              onChange={evt => setCustomTraitValue(evt.target.value)}
+            />
+          </span>
+        </div>
+        <button onClick={() => renderDecisions()}>sendEvent</button>
+        <button onClick={() => renderDecisions(true)} disabled={!sentEvent}>
+          evaluateRulesets
+        </button>
+      </div>
+    </div>
+  );
+}

sandbox/src/components/InAppMessagesDemo/InAppMessagesStyle.css

@@ -0,0 +1,7 @@
+.custom-heading {
+    color: red;
+    font-size: 25px;
+}
+.element-spacing {
+    margin-right: 10px;
+}

src/components/DataCollector/index.js

@@ -80,6 +80,7 @@ const createDataCollector = ({ eventManager, logger }) => {
         run: options => {
           const {
             renderDecisions = false,
+            decisionContext = {},
             responseHeaders = {},
             responseBody = { handle: [] },
             personalization
@@ -89,6 +90,7 @@ const createDataCollector = ({ eventManager, logger }) => {
 
           return eventManager.applyResponse(event, {
             renderDecisions,
+            decisionContext,
             responseHeaders,
             responseBody,
             personalization

src/components/DataCollector/validateApplyResponse.js

@@ -31,7 +31,8 @@ export default ({ options }) => {
       ).required()
     }).required(),
     personalization: objectOf({
-      sendDisplayEvent: boolean().default(true)
+      sendDisplayEvent: boolean().default(true),
+      decisionContext: objectOf({})
     }).default({ sendDisplayEvent: true })
   }).noUnknownFields();
 

src/components/DataCollector/validateUserEventOptions.js

@@ -33,7 +33,8 @@ export default ({ options }) => {
       surfaces: arrayOf(string()).uniqueItems(),
       sendDisplayEvent: boolean().default(true),
       includeRenderedPropositions: boolean().default(false),
-      requestPersonalization: boolean()
+      requestPersonalization: boolean(),
+      decisionContext: objectOf({})
     }).default({ sendDisplayEvent: true }),
     datasetId: string(),
     mergeId: string(),