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",
+    "testdebug": "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.1",
+    "@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,8 @@ import PersonalizationFormBased from "./PersonalizationFormBased";
 import Identity from "./Identity";
 import AlloyVersion from "./components/AlloyVersion";
 import ConfigOverrides from "./ConfigOverrides.jsx";
+import InAppMessages from "./components/InAppMessagesDemo/InAppMessages";
+import MessageFeed from "./components/MessageFeedDemo/MessageFeed";
 
 const BasicExample = () => {
   return (
@@ -96,6 +98,12 @@ const BasicExample = () => {
             <li>
               <a href="/configOverrides">Config Overrides</a>
             </li>
+            <li>
+              <Link to="/inAppMessages">In-app Messages</Link>
+            </li>
+            <li>
+              <Link to="/messageFeed">Message Feed</Link>
+            </li>
           </ul>
           <hr />
 
@@ -125,6 +133,8 @@ const BasicExample = () => {
           <Route path="/redirectedNewPage" component={RedirectedNewPage} />
           <Route path="/identity" component={Identity} />
           <Route path="/configOverrides" component={ConfigOverrides} />
+          <Route path="/inAppMessages" component={InAppMessages} />
+          <Route path="/messageFeed" component={MessageFeed} />
         </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,204 @@
+/* eslint-disable no-bitwise, no-console */
+import React, { 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",
+    surface: "mobileapp://com.adobe.iamTutorialiOS",
+    decisionContext: {
+      "~type": "com.adobe.eventType.generic.track",
+      "~source": "com.adobe.eventSource.requestContent",
+      state: "",
+      "~state.com.adobe.module.lifecycle/lifecyclecontextdata.dayofweek": 1
+    },
+    edgeDomain: "edge.adobedc.net",
+    activeCampaigns: [
+      "https://experience.adobe.com/#/@cjmprodnld2/sname:prod/journey-optimizer/campaigns/summary/59bfdc09-03b9-4cd5-9ab8-5c2a045b0b2e"
+    ]
+  },
+  aemonacpprodcampaign: {
+    name: "AEM Assets Departmental - Campaign – Prod (VA7)",
+    alloyInstance: window.iamAlloy,
+    datastreamId: "8cefc5ca-1c2a-479f-88f2-3d42cc302514",
+    orgId: "906E3A095DC834230A495FD6@AdobeOrg",
+    surface: "mobileapp://com.adobe.aguaAppIos",
+    decisionContext: {},
+    edgeDomain: "edge.adobedc.net",
+    activeCampaigns: [
+      "https://experience.adobe.com/#/@aemonacpprodcampaign/sname:prod/journey-optimizer/campaigns/summary/8bb52c05-d381-4d8b-a67a-95f345776322"
+    ]
+  },
+  stage: {
+    name: "CJM Stage - AJO Web (VA7)",
+    alloyInstance: window.iamAlloy,
+    datastreamId: "15525167-fd4e-4511-b9e0-02119485784f",
+    orgId: "745F37C35E4B776E0A49421B@AdobeOrg",
+    surface: "web://localhost:3000/inAppMessages",
+    decisionContext: {},
+    edgeDomain: "edge-int.adobedc.net"
+  }
+};
+
+const {
+  datastreamId,
+  orgId,
+  surface,
+  decisionContext,
+  edgeDomain,
+  alloyInstance
+} = config[configKey];
+
+if (alloyInstance !== window.alloy) {
+  alloyInstance("configure", {
+    datastreamId,
+    orgId,
+    edgeDomain,
+    thirdPartyCookiesEnabled: false,
+    targetMigrationEnabled: false,
+    debugEnabled: true
+  });
+}
+
+alloyInstance("subscribeRulesetItems", {
+  surfaces: [surface],
+  callback: result => {
+    console.log("subscribeRulesetItems", result);
+  }
+});
+
+const uuidv4 = () => {
+  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+    (
+      c ^
+      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+    ).toString(16)
+  );
+};
+
+const getInAppPayload = async payload => {
+  const res = await fetch(
+    `https://${edgeDomain}/ee/or2/v1/interact?configId=${datastreamId}&requestId=${uuidv4()}`,
+    {
+      method: "POST",
+      body: JSON.stringify(payload)
+    }
+  );
+  return res.json();
+};
+
+const fetchMobilePayload = () =>
+  getInAppPayload({
+    events: [
+      {
+        query: {
+          personalization: {
+            surfaces: [surface]
+          }
+        },
+        xdm: {
+          timestamp: new Date().toISOString(),
+          implementationDetails: {
+            name: "https://ns.adobe.com/experience/mobilesdk/ios",
+            version: "3.7.4+1.5.0",
+            environment: "app"
+          }
+        }
+      }
+    ]
+  });
+
+export default function InAppMessages() {
+  const [sentEvent, setSentEvent] = useState(false);
+  const [customTraitKey, setCustomTraitKey] = useState("");
+  const [customTraitValue, setCustomTraitValue] = useState("");
+
+  const renderDecisions = (useEvaluateRulesetsCommand = false) => {
+    const context = { ...decisionContext };
+
+    if (customTraitKey.length !== 0 && customTraitValue.length !== 0) {
+      context[customTraitKey] = customTraitValue;
+    }
+
+    if (useEvaluateRulesetsCommand) {
+      alloyInstance("evaluateRulesets", {
+        renderDecisions: true,
+        decisionContext: context
+      });
+      return;
+    }
+
+    if (surface.startsWith("mobileapp://")) {
+      fetchMobilePayload().then(response => {
+        alloyInstance("applyResponse", {
+          renderDecisions: true,
+          decisionContext: context,
+          responseBody: response
+        }).then(() => setSentEvent(true));
+      });
+    } else {
+      alloyInstance("sendEvent", {
+        renderDecisions: true,
+        decisionContext: context
+      }).then(() => setSentEvent(true));
+    }
+  };
+
+  const setNewCofigEnv = value => {
+    localStorage.setItem("iam-configKey", value);
+    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 => setNewCofigEnv(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;
+}

sandbox/src/components/MessageFeedDemo/MessageFeed.css

@@ -0,0 +1,15 @@
+/* Card.css */
+.pretty-card {
+    color: black;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 16px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    background-color: lightblue;
+    transition: transform 0.2s;
+}
+
+.pretty-card:hover {
+    transform: scale(1.05);
+}