@adobe/alloy 2.19.0-beta.9 → 2.19.0

package/libEs6/components/Personalization/createViewCacheManager.js

@@ -10,9 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { groupBy } from "../../utils";
+import { assign, groupBy } from "../../utils";
 import defer from "../../utils/defer";
-import { DEFAULT_CONTENT_ITEM } from "./constants/schema";
+import { DEFAULT_CONTENT_ITEM } from "../../constants/schema";
 import { VIEW_SCOPE_TYPE } from "./constants/scopeType";
 export default (({
   createProposition
@@ -42,7 +42,16 @@ export default (({
   const createCacheUpdate = viewName => {
     const updateCacheDeferred = defer();
     cacheUpdateCreatedAtLeastOnce = true;
-    viewStoragePromise = viewStoragePromise.then(oldViewStorage => updateCacheDeferred.promise.catch(() => oldViewStorage));
+
+    // Additional updates will merge the new view propositions with the old.
+    // i.e. if there are new "cart" view propositions they will overwrite the
+    // old "cart" view propositions, but if there are no new "cart" view
+    // propositions the old "cart" view propositions will remain.
+    viewStoragePromise = viewStoragePromise.then(oldViewStorage => {
+      return updateCacheDeferred.promise.then(newViewStorage => {
+        return assign({}, oldViewStorage, newViewStorage);
+      }).catch(() => oldViewStorage);
+    });
     return {
       update(viewPropositions) {
         const viewPropositionsWithScope = viewPropositions.filter(proposition => proposition.getScope());

package/libEs6/components/Personalization/dom-actions/createRedirect.js

@@ -10,4 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export default (window => url => window.location.replace(url));
+export default (window => (url, preserveHistory = false) => {
+  if (preserveHistory) {
+    window.location.href = url;
+  } else {
+    window.location.replace(url);
+  }
+  // Return a promise that never resolves because redirects never complete
+  // within the current page.
+  return new Promise(() => undefined);
+});

package/libEs6/components/Personalization/event.js

@@ -10,24 +10,29 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-const EVENT_TYPE_TRUE = 1;
+import { EVENT_TYPE_TRUE } from "../../constants/eventType";
 
 /* eslint-disable no-underscore-dangle */
-export const mergeDecisionsMeta = (event, decisionsMeta, eventType, eventLabel = "") => {
+export const mergeDecisionsMeta = (event, decisionsMeta, propositionEventTypes, propositionAction) => {
+  // Do not send a display notification with no decisions. Even empty view changes
+  // should include a proposition.
+  if (decisionsMeta.length === 0) {
+    return;
+  }
+  const propositionEventType = {};
+  propositionEventTypes.forEach(type => {
+    propositionEventType[type] = EVENT_TYPE_TRUE;
+  });
   const xdm = {
     _experience: {
       decisioning: {
         propositions: decisionsMeta,
-        propositionEventType: {
-          [eventType]: EVENT_TYPE_TRUE
-        }
+        propositionEventType
       }
     }
   };
-  if (eventLabel) {
-    xdm._experience.decisioning.propositionAction = {
-      label: eventLabel
-    };
+  if (propositionAction) {
+    xdm._experience.decisioning.propositionAction = propositionAction;
   }
   event.mergeXdm(xdm);
 };

package/libEs6/components/Personalization/handlers/createProcessInAppMessage.js

@@ -0,0 +1,77 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { APPLICATION_JSON } from "../../../constants/contentType";
+const DEFAULT_CONTENT = "defaultContent";
+const expectedProps = ["content", "contentType"];
+const expectedContentProps = ["mobileParameters", "webParameters", "html"];
+const isValidInAppMessage = (data, logger) => {
+  for (let i = 0; i < expectedProps.length; i += 1) {
+    const prop = expectedProps[i];
+    if (!Object.prototype.hasOwnProperty.call(data, prop)) {
+      logger.warn(`Invalid in-app message data: missing property '${prop}'.`, data);
+      return false;
+    }
+  }
+  const {
+    content,
+    contentType
+  } = data;
+  if (contentType === APPLICATION_JSON) {
+    for (let i = 0; i < expectedContentProps.length; i += 1) {
+      const prop = expectedContentProps[i];
+      if (!Object.prototype.hasOwnProperty.call(content, prop)) {
+        logger.warn(`Invalid in-app message data.content: missing property '${prop}'.`, data);
+        return false;
+      }
+    }
+  }
+  return true;
+};
+export default (({
+  modules,
+  logger
+}) => {
+  return item => {
+    const data = item.getData();
+    const meta = {
+      ...item.getProposition().getNotification()
+    };
+    if (!data) {
+      logger.warn("Invalid in-app message data: undefined.", data);
+      return {};
+    }
+    const {
+      type = DEFAULT_CONTENT
+    } = data;
+    if (!modules[type]) {
+      logger.warn("Invalid in-app message data: unknown type.", data);
+      return {};
+    }
+    if (!isValidInAppMessage(data, logger)) {
+      return {};
+    }
+    if (!meta) {
+      logger.warn("Invalid in-app message meta: undefined.", meta);
+      return {};
+    }
+    return {
+      render: () => {
+        return modules[type]({
+          ...data,
+          meta
+        });
+      },
+      setRenderAttempted: true,
+      includeInNotification: true
+    };
+  };
+});

package/libEs6/components/Personalization/handlers/createProcessRedirect.js

@@ -26,8 +26,11 @@ export default (({
       decisionsMeta: [item.getProposition().getNotification()],
       documentMayUnload: true
     }).then(() => {
-      executeRedirect(content);
-      // We've already sent the display notification, so don't return anything
+      return executeRedirect(content);
+      // Execute redirect will never resolve. If there are bottom of page events that are waiting
+      // for display notifications from this request, they will never run because this promise will
+      // not resolve. This is intentional because we don't want to run bottom of page events if
+      // there is a redirect.
     });
   };
 

package/libEs6/components/Personalization/in-app-message-actions/actions/displayIframeContent.js

@@ -0,0 +1,291 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { getNonce } from "../../dom-actions/dom";
+import { parseAnchor, removeElementById } from "../utils";
+import { TEXT_HTML } from "../../../../constants/contentType";
+import { assign, includes, isNonEmptyString, values } from "../../../../utils";
+import { createNode } from "../../../../utils/dom";
+import { objectOf } from "../../../../utils/validation";
+import { PropositionEventType } from "../../../../constants/propositionEventType";
+import { EVENT_TYPE_TRUE, INTERACT } from "../../../../constants/eventType";
+import createRedirect from "../../dom-actions/createRedirect";
+const MESSAGING_CONTAINER_ID = "alloy-messaging-container";
+const OVERLAY_CONTAINER_ID = "alloy-overlay-container";
+const IFRAME_ID = "alloy-content-iframe";
+const dismissMessage = () => [MESSAGING_CONTAINER_ID, OVERLAY_CONTAINER_ID].forEach(removeElementById);
+export const createIframeClickHandler = (interact, navigateToUrl = createRedirect(window)) => {
+  return event => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const {
+      target
+    } = event;
+    const anchor = target.tagName.toLowerCase() === "a" ? target : target.closest("a");
+    if (!anchor) {
+      return;
+    }
+    const {
+      action,
+      interaction,
+      link,
+      label,
+      uuid
+    } = parseAnchor(anchor);
+    interact(action, {
+      label,
+      id: interaction,
+      uuid,
+      link
+    });
+    if (action === "dismiss") {
+      dismissMessage();
+    }
+    if (isNonEmptyString(link) && link.length > 0) {
+      navigateToUrl(link, true);
+    }
+  };
+};
+export const createIframe = (htmlContent, clickHandler) => {
+  const parser = new DOMParser();
+  const htmlDocument = parser.parseFromString(htmlContent, TEXT_HTML);
+  const scriptTag = htmlDocument.querySelector("script");
+  if (scriptTag) {
+    scriptTag.setAttribute("nonce", getNonce());
+  }
+  const element = createNode("iframe", {
+    src: URL.createObjectURL(new Blob([htmlDocument.documentElement.outerHTML], {
+      type: "text/html"
+    })),
+    id: IFRAME_ID
+  });
+  element.addEventListener("load", () => {
+    const {
+      addEventListener
+    } = element.contentDocument || element.contentWindow.document;
+    addEventListener("click", clickHandler);
+  });
+  return element;
+};
+const renderMessage = (iframe, webParameters, container, overlay) => {
+  [{
+    id: OVERLAY_CONTAINER_ID,
+    element: overlay
+  }, {
+    id: MESSAGING_CONTAINER_ID,
+    element: container
+  }, {
+    id: IFRAME_ID,
+    element: iframe
+  }].forEach(({
+    id,
+    element
+  }) => {
+    const {
+      style = {},
+      params = {}
+    } = webParameters[id];
+    assign(element.style, style);
+    const {
+      parentElement = "body",
+      insertionMethod = "appendChild",
+      enabled = true
+    } = params;
+    const parent = document.querySelector(parentElement);
+    if (enabled && parent && typeof parent[insertionMethod] === "function") {
+      parent[insertionMethod](element);
+    }
+  });
+};
+export const buildStyleFromMobileParameters = mobileParameters => {
+  const {
+    verticalAlign,
+    width,
+    horizontalAlign,
+    backdropColor,
+    height,
+    cornerRadius,
+    horizontalInset,
+    verticalInset,
+    uiTakeover = false
+  } = mobileParameters;
+  const style = {
+    width: width ? `${width}%` : "100%",
+    backgroundColor: backdropColor || "rgba(0, 0, 0, 0.5)",
+    borderRadius: cornerRadius ? `${cornerRadius}px` : "0px",
+    border: "none",
+    position: uiTakeover ? "fixed" : "relative",
+    overflow: "hidden"
+  };
+  if (horizontalAlign === "left") {
+    style.left = horizontalInset ? `${horizontalInset}%` : "0";
+  } else if (horizontalAlign === "right") {
+    style.right = horizontalInset ? `${horizontalInset}%` : "0";
+  } else if (horizontalAlign === "center") {
+    style.left = "50%";
+    style.transform = "translateX(-50%)";
+  }
+  if (verticalAlign === "top") {
+    style.top = verticalInset ? `${verticalInset}%` : "0";
+  } else if (verticalAlign === "bottom") {
+    style.position = "fixed";
+    style.bottom = verticalInset ? `${verticalInset}%` : "0";
+  } else if (verticalAlign === "center") {
+    style.top = "50%";
+    style.transform = `${horizontalAlign === "center" ? `${style.transform} ` : ""}translateY(-50%)`;
+    style.display = "flex";
+    style.alignItems = "center";
+    style.justifyContent = "center";
+  }
+  if (height) {
+    style.height = `${height}vh`;
+  } else {
+    style.height = "100%";
+  }
+  return style;
+};
+export const mobileOverlay = mobileParameters => {
+  const {
+    backdropOpacity,
+    backdropColor
+  } = mobileParameters;
+  const opacity = backdropOpacity || 0.5;
+  const color = backdropColor || "#FFFFFF";
+  const style = {
+    position: "fixed",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    background: "transparent",
+    opacity,
+    backgroundColor: color
+  };
+  return style;
+};
+const REQUIRED_PARAMS = ["enabled", "parentElement", "insertionMethod"];
+const isValidWebParameters = webParameters => {
+  if (!webParameters) {
+    return false;
+  }
+  const ids = Object.keys(webParameters);
+  if (!includes(ids, MESSAGING_CONTAINER_ID)) {
+    return false;
+  }
+  if (!includes(ids, OVERLAY_CONTAINER_ID)) {
+    return false;
+  }
+  const valuesArray = values(webParameters);
+  for (let i = 0; i < valuesArray.length; i += 1) {
+    if (!objectOf(valuesArray[i], "style")) {
+      return false;
+    }
+    if (!objectOf(valuesArray[i], "params")) {
+      return false;
+    }
+    for (let j = 0; j < REQUIRED_PARAMS.length; j += 1) {
+      if (!objectOf(valuesArray[i].params, REQUIRED_PARAMS[j])) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+const generateWebParameters = mobileParameters => {
+  if (!mobileParameters) {
+    return undefined;
+  }
+  const {
+    uiTakeover = false
+  } = mobileParameters;
+  return {
+    [IFRAME_ID]: {
+      style: {
+        border: "none",
+        width: "100%",
+        height: "100%"
+      },
+      params: {
+        enabled: true,
+        parentElement: "#alloy-messaging-container",
+        insertionMethod: "appendChild"
+      }
+    },
+    [MESSAGING_CONTAINER_ID]: {
+      style: buildStyleFromMobileParameters(mobileParameters),
+      params: {
+        enabled: true,
+        parentElement: "body",
+        insertionMethod: "appendChild"
+      }
+    },
+    [OVERLAY_CONTAINER_ID]: {
+      style: mobileOverlay(mobileParameters),
+      params: {
+        enabled: uiTakeover === true,
+        parentElement: "body",
+        insertionMethod: "appendChild"
+      }
+    }
+  };
+};
+export const displayHTMLContentInIframe = (settings = {}, interact) => {
+  dismissMessage();
+  const {
+    content,
+    contentType,
+    mobileParameters
+  } = settings;
+  let {
+    webParameters
+  } = settings;
+  if (contentType !== TEXT_HTML) {
+    return;
+  }
+  const container = createNode("div", {
+    id: MESSAGING_CONTAINER_ID
+  });
+  const iframe = createIframe(content, createIframeClickHandler(interact));
+  const overlay = createNode("div", {
+    id: OVERLAY_CONTAINER_ID
+  });
+  if (!isValidWebParameters(webParameters)) {
+    webParameters = generateWebParameters(mobileParameters);
+  }
+  if (!webParameters) {
+    return;
+  }
+  renderMessage(iframe, webParameters, container, overlay);
+};
+export default ((settings, collect) => {
+  return new Promise(resolve => {
+    const {
+      meta
+    } = settings;
+    displayHTMLContentInIframe(settings, (action, propositionAction) => {
+      const propositionEventTypes = {};
+      propositionEventTypes[PropositionEventType.INTERACT] = EVENT_TYPE_TRUE;
+      if (Object.values(PropositionEventType).indexOf(action) !== -1) {
+        propositionEventTypes[action] = EVENT_TYPE_TRUE;
+      }
+      collect({
+        decisionsMeta: [meta],
+        propositionAction,
+        eventType: INTERACT,
+        propositionEventTypes: Object.keys(propositionEventTypes)
+      });
+    });
+    resolve({
+      meta
+    });
+  });
+});

package/libEs6/components/Personalization/in-app-message-actions/initInAppMessageActionsModules.js

@@ -0,0 +1,17 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import displayIframeContent from "./actions/displayIframeContent";
+export default (collect => {
+  return {
+    defaultContent: settings => displayIframeContent(settings, collect)
+  };
+});

package/libEs6/components/Personalization/in-app-message-actions/utils.js

@@ -0,0 +1,49 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { isNonEmptyArray, queryString, startsWith } from "../../../utils";
+import { removeNode, selectNodes } from "../../../utils/dom";
+export const removeElementById = id => {
+  const element = selectNodes(`#${id}`, document);
+  if (element && element.length > 0) {
+    removeNode(element[0]);
+  }
+};
+export const parseAnchor = anchor => {
+  const nothing = {};
+  if (!anchor || anchor.tagName.toLowerCase() !== "a") {
+    return nothing;
+  }
+  const {
+    href
+  } = anchor;
+  if (!href || !startsWith(href, "adbinapp://")) {
+    return nothing;
+  }
+  const hrefParts = href.split("?");
+  const action = hrefParts[0].split("://")[1];
+  const label = anchor.innerText;
+  const uuid = anchor.getAttribute("data-uuid") || "";
+  let interaction;
+  let link;
+  if (isNonEmptyArray(hrefParts)) {
+    const queryParams = queryString.parse(hrefParts[1]);
+    interaction = queryParams.interaction || "";
+    link = decodeURIComponent(queryParams.link || "");
+  }
+  return {
+    action,
+    interaction,
+    link,
+    label,
+    uuid
+  };
+};

package/libEs6/components/Personalization/index.js

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { string, boolean, objectOf } from "../../utils/validation";
+import { boolean, objectOf, string } from "../../utils/validation";
 import createComponent from "./createComponent";
 import { initDomActionsModules } from "./dom-actions";
 import createCollect from "./createCollect";
@@ -31,14 +31,18 @@ import remapHeadOffers from "./dom-actions/remapHeadOffers";
 import createPreprocess from "./dom-actions/createPreprocess";
 import injectCreateProposition from "./handlers/injectCreateProposition";
 import createAsyncArray from "./utils/createAsyncArray";
-import * as schema from "./constants/schema";
+import * as schema from "../../constants/schema";
 import processDefaultContent from "./handlers/processDefaultContent";
 import { isPageWideSurface } from "./utils/surfaceUtils";
 import createProcessDomAction from "./handlers/createProcessDomAction";
 import createProcessHtmlContent from "./handlers/createProcessHtmlContent";
 import createProcessRedirect from "./handlers/createProcessRedirect";
 import createProcessPropositions from "./handlers/createProcessPropositions";
+import createOnDecisionHandler from "./createOnDecisionHandler";
+import createProcessInAppMessage from "./handlers/createProcessInAppMessage";
+import initInAppMessageActionsModules from "./in-app-message-actions/initInAppMessageActionsModules";
 import createRedirect from "./dom-actions/createRedirect";
+import createNotificationHandler from "./createNotificationHandler";
 const createPersonalization = ({
   config,
   logger,
@@ -60,7 +64,7 @@ const createPersonalization = ({
   const getPageLocation = createGetPageLocation({
     window
   });
-  const modules = initDomActionsModules();
+  const domActionsModules = initDomActionsModules();
   const preprocess = createPreprocess([remapHeadOffers, remapCustomCodeOffers]);
   const createProposition = injectCreateProposition({
     preprocess,
@@ -73,18 +77,22 @@ const createPersonalization = ({
   const schemaProcessors = {
     [schema.DEFAULT_CONTENT_ITEM]: processDefaultContent,
     [schema.DOM_ACTION]: createProcessDomAction({
-      modules,
+      modules: domActionsModules,
       logger,
       storeClickMetrics
     }),
     [schema.HTML_CONTENT_ITEM]: createProcessHtmlContent({
-      modules,
+      modules: domActionsModules,
       logger
     }),
     [schema.REDIRECT_ITEM]: createProcessRedirect({
       logger,
       executeRedirect,
       collect
+    }),
+    [schema.MESSAGE_IN_APP]: createProcessInAppMessage({
+      modules: initInAppMessageActionsModules(collect),
+      logger
     })
   };
   const processPropositions = createProcessPropositions({
@@ -92,15 +100,15 @@ const createPersonalization = ({
     logger
   });
   const renderedPropositions = createAsyncArray();
+  const notificationHandler = createNotificationHandler(collect, renderedPropositions);
   const fetchDataHandler = createFetchDataHandler({
     prehidingStyle,
     showContainers,
     hideContainers,
     mergeQuery,
-    collect,
     processPropositions,
     createProposition,
-    renderedPropositions
+    notificationHandler
   });
   const onClickHandler = createOnClickHandler({
     mergeDecisionsMeta,
@@ -121,6 +129,11 @@ const createPersonalization = ({
   const setTargetMigration = createSetTargetMigration({
     targetMigrationEnabled
   });
+  const onDecisionHandler = createOnDecisionHandler({
+    processPropositions,
+    createProposition,
+    notificationHandler
+  });
   return createComponent({
     getPageLocation,
     logger,
@@ -134,7 +147,8 @@ const createPersonalization = ({
     applyPropositions,
     setTargetMigration,
     mergeDecisionsMeta,
-    renderedPropositions
+    renderedPropositions,
+    onDecisionHandler
   });
 };
 createPersonalization.namespace = "Personalization";

package/libEs6/{components/Personalization/constants/eventType.js → constants/contentType.js}

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 Adobe. All rights reserved.
+Copyright 2023 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -9,6 +9,5 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-
-export const DISPLAY = "decisioning.propositionDisplay";
-export const INTERACT = "decisioning.propositionInteract";
+export const TEXT_HTML = "text/html";
+export const APPLICATION_JSON = "application/json";

package/libEs6/{components/Personalization/constants/propositionEventType.js → constants/decisionProvider.js}

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 Adobe. All rights reserved.
+Copyright 2023 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -9,8 +9,4 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-
-export const PropositionEventType = {
-  DISPLAY: "display",
-  INTERACT: "interact"
-};
+export const ADOBE_JOURNEY_OPTIMIZER = "AJO";