Skip to content

Commit

Permalink
web parameters support
Browse files Browse the repository at this point in the history 
removed redundant files & some clean up
  • Loading branch information
@shandilya3
shandilya3 committed Sep 12, 2023
1 parent ee9948a commit 4cdb652
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 266 deletions.
2 changes: 2 additions & 0 deletions src/components/DecisioningEngine/consequenceAdapters/inAppMessageConsequenceAdapter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@ import { MESSAGE_IN_APP } from "../../Personalization/constants/schema";
import { TEXT_HTML } from "../../Personalization/constants/contentType";

export default (id, type, detail) => {
// TODO: add webParameters when available from the authoring UI in detail
const { html, mobileParameters } = detail;

// TODO: Remove it once we have webParameters
const webParameters = { info: "this is a placeholder" };

return {
Expand Down
126 changes: 69 additions & 57 deletions src/components/Personalization/in-app-message-actions/actions/displayIframeContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,22 @@ import { parseAnchor, removeElementById } from "../utils";
import { TEXT_HTML } from "../../constants/contentType";
import { INTERACT } from "../../constants/eventType";

const ELEMENT_TAG_CLASSNAME = "alloy-messaging-container";
const ELEMENT_TAG_ID = "alloy-messaging-container";

const OVERLAY_TAG_CLASSNAME = "alloy-overlay-container";
const OVERLAY_TAG_ID = "alloy-overlay-container";
const ALLOY_MESSAGING_CONTAINER_ID = "alloy-messaging-container";
const ALLOY_OVERLAY_CONTAINER_ID = "alloy-overlay-container";
const ALLOY_IFRAME_ID = "alloy-content-iframe";

const dismissMessage = () =>
[ELEMENT_TAG_ID, OVERLAY_TAG_ID].forEach(removeElementById);
[ALLOY_MESSAGING_CONTAINER_ID, ALLOY_OVERLAY_CONTAINER_ID].forEach(
removeElementById
);

export const createElement = elementTagId => {
const element = document.createElement("div");
element.id = elementTagId;
return element;
};

// eslint-disable-next-line no-unused-vars
export const buildStyleFromParameters = (mobileParameters, webParameters) => {
export const buildStyleFromMobileParameters = mobileParameters => {
const {
verticalAlign,
width,
Expand Down Expand Up @@ -132,13 +136,6 @@ export const createIframe = (htmlContent, clickHandler) => {
new Blob([htmlDocument.documentElement.outerHTML], { type: TEXT_HTML })
);
element.id = ALLOY_IFRAME_ID;

Object.assign(element.style, {
border: "none",
width: "100%",
height: "100%"
});

element.addEventListener("load", () => {
const { addEventListener } =
element.contentDocument || element.contentWindow.document;
Expand All @@ -148,60 +145,75 @@ export const createIframe = (htmlContent, clickHandler) => {
return element;
};

export const createContainerElement = settings => {
const { mobileParameters = {}, webParameters = {} } = settings;
const element = document.createElement("div");
element.id = ELEMENT_TAG_ID;
element.className = `${ELEMENT_TAG_CLASSNAME}`;
Object.assign(
element.style,
buildStyleFromParameters(mobileParameters, webParameters)
);

return element;
};

export const createOverlayElement = parameter => {
const element = document.createElement("div");
const backdropOpacity = parameter.backdropOpacity || 0.5;
const backdropColor = parameter.backdropColor || "#FFFFFF";
element.id = OVERLAY_TAG_ID;
element.className = `${OVERLAY_TAG_CLASSNAME}`;

Object.assign(element.style, {
position: "fixed",
top: "0",
left: "0",
width: "100%",
height: "100%",
background: "transparent",
opacity: backdropOpacity,
backgroundColor: backdropColor
});

return element;
};

export const displayHTMLContentInIframe = (settings, interact) => {
dismissMessage();
const { content, contentType, mobileParameters } = settings;
const { content, contentType, mobileParameters, webParameters } = settings;

if (contentType !== TEXT_HTML) {
return;
}

const container = createContainerElement(settings);
const container = createElement(ALLOY_MESSAGING_CONTAINER_ID);

const iframe = createIframe(content, createIframeClickHandler(interact));

container.appendChild(iframe);
const overlay = createElement(ALLOY_OVERLAY_CONTAINER_ID);

if (mobileParameters.uiTakeover) {
const overlay = createOverlayElement(mobileParameters);
document.body.appendChild(overlay);
document.body.style.overflow = "hidden";
container.appendChild(iframe);
if (webParameters && webParameters.info !== "this is a placeholder") {
Object.assign(iframe.style, webParameters[ALLOY_IFRAME_ID].style);
Object.assign(
container.style,
webParameters[ALLOY_MESSAGING_CONTAINER_ID].style
);
if (webParameters[ALLOY_OVERLAY_CONTAINER_ID].params.enabled) {
Object.assign(
overlay.style,
webParameters[ALLOY_OVERLAY_CONTAINER_ID].style
);
document.body.appendChild(overlay);
document.body.style.overflow = "hidden";
}
const parentElementSelector =
webParameters[ALLOY_MESSAGING_CONTAINER_ID].params.parentElement;
if (parentElementSelector) {
const parentElement = document.querySelector(parentElementSelector);
if (parentElement) {
parentElement[
webParameters[ALLOY_MESSAGING_CONTAINER_ID].params.insertionMethod
](container);
} else {
document.body.appendChild(container);
}
}
} else {
Object.assign(iframe.style, {
border: "none",
width: "100%",
height: "100%"
});
Object.assign(
container.style,
buildStyleFromMobileParameters(mobileParameters)
);
if (mobileParameters.uiTakeover) {
const backdropOpacity = mobileParameters.backdropOpacity || 0.5;
const backdropColor = mobileParameters.backdropColor || "#FFFFFF";
Object.assign(overlay.style, {
position: "fixed",
top: "0",
left: "0",
width: "100%",
height: "100%",
background: "transparent",
opacity: backdropOpacity,
backgroundColor: backdropColor
});
document.body.appendChild(overlay);
document.body.style.overflow = "hidden";
}
document.body.appendChild(container);
}
document.body.appendChild(container);
};

export default (settings, collect) => {
Expand Down
78 changes: 0 additions & 78 deletions ...nit/specs/components/Personalization/in-app-message-actions/actions/displayBanner.spec.js
View file

This file was deleted.

59 changes: 2 additions & 57 deletions ...cs/components/Personalization/in-app-message-actions/actions/displayIframeContent.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/
import {
buildStyleFromParameters,
createOverlayElement,
buildStyleFromMobileParameters,
createIframe,
createIframeClickHandler,
displayHTMLContentInIframe
Expand Down Expand Up @@ -46,11 +45,7 @@ describe("DOM Actions on Iframe", () => {
verticalInset: 10,
uiTakeover: true
};

const webParameters = {};

const style = buildStyleFromParameters(mobileParameters, webParameters);

const style = buildStyleFromMobileParameters(mobileParameters);
expect(style.width).toBe("80%");
expect(style.backgroundColor).toBe("rgba(0, 0, 0, 0.7)");
expect(style.borderRadius).toBe("10px");
Expand All @@ -62,40 +57,16 @@ describe("DOM Actions on Iframe", () => {
});
});

describe("createOverlayElement", () => {
it("should create overlay element with correct styles", () => {
const parameter = {
backdropOpacity: 0.8,
backdropColor: "#000000"
};

const overlayElement = createOverlayElement(parameter);

expect(overlayElement.id).toBe("alloy-overlay-container");
expect(overlayElement.style.position).toBe("fixed");
expect(overlayElement.style.top).toBe("0px");
expect(overlayElement.style.left).toBe("0px");
expect(overlayElement.style.width).toBe("100%");
expect(overlayElement.style.height).toBe("100%");
expect(overlayElement.style.background).toBe("rgb(0, 0, 0)");
expect(overlayElement.style.opacity).toBe("0.8");
expect(overlayElement.style.backgroundColor).toBe("rgb(0, 0, 0)");
});
});
describe("createIframe function", () => {
it("should create an iframe element with specified properties", () => {
const mockHtmlContent =
'\u003c!doctype html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n \u003ctitle\u003eBumper Sale!\u003c/title\u003e\\n \u003cstyle\u003e\\n body {\\n margin: 0;\\n padding: 0;\\n font-family: Arial, sans-serif;\\n }\\n\\n #announcement {\\n position: fixed;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background-color: rgba(0, 0, 0, 0.8);\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n color: #fff;\\n }\\n\\n #announcement img {\\n max-width: 80%;\\n height: auto;\\n margin-bottom: 20px;\\n }\\n\\n #cross {\\n position: absolute;\\n top: 10px;\\n right: 10px;\\n cursor: pointer;\\n font-size: 24px;\\n color: #fff;\\n }\\n\\n #buttons {\\n display: flex;\\n justify-content: center;\\n margin-top: 20px;\\n }\\n\\n #buttons a {\\n margin: 0 10px;\\n padding: 10px 20px;\\n background-color: #ff5500;\\n color: #fff;\\n text-decoration: none;\\n border-radius: 4px;\\n font-weight: bold;\\n transition: background-color 0.3s ease;\\n }\\n\\n #buttons a:hover {\\n background-color: #ff3300;\\n }\\n \u003c/style\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003cdiv id\u003d"announcement" class\u003d"fullscreen"\u003e\\n \u003cspan id\u003d"cross" class\u003d"dismiss"\u003e✕\u003c/span\u003e\\n \u003ch2\u003eBlack Friday Sale!\u003c/h2\u003e\\n \u003cimg src\u003d"https://source.unsplash.com/800x600/?technology,gadget" alt\u003d"Technology Image"\u003e\\n \u003cp\u003eDon\u0027t miss out on our incredible discounts and deals at our gadgets!\u003c/p\u003e\\n \u003cdiv id\u003d"buttons"\u003e\\n \u003ca class\u003d"forward" href\u003d"http://localhost:3000/"\u003eShop\u003c/a\u003e\\n \u003ca class\u003d"dismiss"\u003eDismiss\u003c/a\u003e\\n \u003c/div\u003e\\n\u003c/div\u003e\\n\\n\u003c/body\u003e\u003c/html\u003e\\n';
const mockClickHandler = jasmine.createSpy("clickHandler");

const iframe = createIframe(mockHtmlContent, mockClickHandler);

expect(iframe).toBeDefined();
expect(iframe instanceof HTMLIFrameElement).toBe(true);
expect(iframe.src).toContain("blob:");
expect(iframe.style.border).toBe("none");
expect(iframe.style.width).toBe("100%");
expect(iframe.style.height).toBe("100%");
});

it("should set 'nonce' attribute on script tag if it exists", async () => {
Expand Down Expand Up @@ -285,26 +256,14 @@ describe("DOM Actions on Iframe", () => {
let originalAppendChild;
let originalBodyStyle;
let mockCollect;
let originalCreateContainerElement;
let originalCreateIframe;
let originalCreateOverlayElement;

beforeEach(() => {
mockCollect = jasmine.createSpy("collect");
originalAppendChild = document.body.appendChild;
document.body.appendChild = jasmine.createSpy("appendChild");
originalBodyStyle = document.body.style;
document.body.style = {};

originalCreateContainerElement = window.createContainerElement;
window.createContainerElement = jasmine
.createSpy("createContainerElement")
.and.callFake(() => {
const element = document.createElement("div");
element.id = "alloy-messaging-container";
return element;
});

originalCreateIframe = window.createIframe;
window.createIframe = jasmine
.createSpy("createIframe")
Expand All @@ -313,23 +272,12 @@ describe("DOM Actions on Iframe", () => {
element.id = "alloy-content-iframe";
return element;
});

originalCreateOverlayElement = window.createOverlayElement;
window.createOverlayElement = jasmine
.createSpy("createOverlayElement")
.and.callFake(() => {
const element = document.createElement("div");
element.id = "alloy-overlay-container";
return element;
});
});

afterEach(() => {
document.body.appendChild = originalAppendChild;
document.body.style = originalBodyStyle;
document.body.innerHTML = "";
window.createContainerElement = originalCreateContainerElement;
window.createOverlayElement = originalCreateOverlayElement;
window.createIframe = originalCreateIframe;
});

Expand All @@ -351,9 +299,6 @@ describe("DOM Actions on Iframe", () => {
backdropColor: "#4CA206",
height: 63
},
webParameters: {
info: "this is a placeholder"
},
content:
'<!doctype html>\n<html>\n<head>\n <title>Bumper Sale!</title>\n <style>\n body {\n margin: 0;\n padding: 0;\n font-family: Arial, sans-serif;\n }\n\n #announcement {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.8);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: #fff;\n }\n\n #announcement img {\n max-width: 80%;\n height: auto;\n margin-bottom: 20px;\n }\n\n #cross {\n position: absolute;\n top: 10px;\n right: 10px;\n cursor: pointer;\n font-size: 24px;\n color: #fff;\n text-decoration: none;\n }\n\n #buttons {\n display: flex;\n justify-content: center;\n margin-top: 20px;\n }\n\n #buttons a {\n margin: 0 10px;\n padding: 10px 20px;\n background-color: #ff5500;\n color: #fff;\n text-decoration: none;\n border-radius: 4px;\n font-weight: bold;\n transition: background-color 0.3s ease;\n }\n\n #buttons a:hover {\n background-color: #ff3300;\n }\n </style>\n</head>\n<body>\n<div id="announcement">\n <a id="cross" href="adbinapp://dismiss?interaction=cancel">✕</a>\n <h2>Black Friday Sale!</h2>\n <img src="https://media3.giphy.com/media/kLhcBWs9Nza4hCW5IS/200.gif" alt="Technology Image">\n <p>Don\'t miss out on our incredible discounts and deals at our gadgets!</p>\n <div id="buttons">\n <a href="adbinapp://dismiss?interaction=clicked&amp;link=https%3A%2F%2Fwww.nike.com%2Fw%2Fmens-jordan-clothing-37eefz6ymx6znik1">Shop</a>\n <a href="adbinapp://dismiss?interaction=cancel">Dismiss</a>\n </div>\n</div>\n<script>\n // Listen for a click on the button inside the iframe\n document.getElementById("buttons").addEventListener("click", handleButtonClick);\n document.getElementById("cross").addEventListener("click", handleButtonClick);\n function handleButtonClick(event) {\n console.log("A button was clicked with text ", event.target);\n const href = event.target.getAttribute("href");\n // Send a message to the parent page\n console.log("I am sending a message to the parent ", href);\n parent.postMessage({ "Element was clicked": href }, "*");\n }\n</script>\n\n</body></html>\n',
contentType: TEXT_HTML,
Expand Down
Loading

0 comments on commit 4cdb652

Please sign in to comment.