Merge pull request #1111 from adobe/consentFlicker

Show personalization containers when consent is out

src/components/Personalization/createComponent.js

@@ -30,10 +30,14 @@ export default ({
   setTargetMigration,
   mergeDecisionsMeta,
   renderedPropositions,
-  onDecisionHandler
+  onDecisionHandler,
+  handleConsentFlicker
 }) => {
   return {
     lifecycle: {
+      onComponentsRegistered() {
+        handleConsentFlicker();
+      },
       onDecision: onDecisionHandler,
       onBeforeRequest({ request }) {
         setTargetMigration(request);

src/components/Personalization/createFetchDataHandler.js

@@ -20,13 +20,17 @@ export default ({
   mergeQuery,
   processPropositions,
   createProposition,
-  notificationHandler
+  notificationHandler,
+  consent
 }) => {
   return ({ cacheUpdate, personalizationDetails, event, onResponse }) => {
-    if (personalizationDetails.isRenderDecisions()) {
-      hideContainers(prehidingStyle);
-    } else {
-      showContainers();
+    const { state, wasSet } = consent.current();
+    if (!(state === "out" && wasSet)) {
+      if (personalizationDetails.isRenderDecisions()) {
+        hideContainers(prehidingStyle);
+      } else {
+        showContainers();
+      }
     }
     mergeQuery(event, personalizationDetails.createQueryDetails());
 

src/components/Personalization/createHandleConsentFlicker.js

@@ -0,0 +1,21 @@
+/*
+Copyright 2024 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 { OUT } from "../../constants/consentStatus";
+
+export default ({ showContainers, consent }) => () => {
+  const { state, wasSet } = consent.current();
+  if (state === OUT && wasSet) {
+    showContainers();
+  } else {
+    consent.awaitConsent().catch(showContainers);
+  }
+};

src/components/Personalization/index.js

@@ -43,8 +43,9 @@ import createProcessInAppMessage from "./handlers/createProcessInAppMessage";
 import initInAppMessageActionsModules from "./in-app-message-actions/initInAppMessageActionsModules";
 import createRedirect from "./dom-actions/createRedirect";
 import createNotificationHandler from "./createNotificationHandler";
+import createHandleConsentFlicker from "./createHandleConsentFlicker";
 
-const createPersonalization = ({ config, logger, eventManager }) => {
+const createPersonalization = ({ config, logger, eventManager, consent }) => {
   const { targetMigrationEnabled, prehidingStyle } = config;
   const collect = createCollect({ eventManager, mergeDecisionsMeta });
 
@@ -104,7 +105,8 @@ const createPersonalization = ({ config, logger, eventManager }) => {
     mergeQuery,
     processPropositions,
     createProposition,
-    notificationHandler
+    notificationHandler,
+    consent
   });
 
   const onClickHandler = createOnClickHandler({
@@ -133,6 +135,11 @@ const createPersonalization = ({ config, logger, eventManager }) => {
     notificationHandler
   });
 
+  const handleConsentFlicker = createHandleConsentFlicker({
+    showContainers,
+    consent
+  });
+
   return createComponent({
     getPageLocation,
     logger,
@@ -147,7 +154,8 @@ const createPersonalization = ({ config, logger, eventManager }) => {
     setTargetMigration,
     mergeDecisionsMeta,
     renderedPropositions,
-    onDecisionHandler
+    onDecisionHandler,
+    handleConsentFlicker
   });
 };
 

src/core/consent/createConsent.js

@@ -54,6 +54,9 @@ export default ({ generalConsentState, logger }) => {
     },
     withConsent() {
       return generalConsentState.withConsent();
+    },
+    current() {
+      return generalConsentState.current();
     }
   };
 };

src/core/consent/createConsentStateMachine.js

@@ -111,6 +111,22 @@ export default ({ logger }) => {
     awaitConsent: awaitInitial,
     withConsent() {
       return this.awaitConsent(true);
+    },
+    current() {
+      switch (this.awaitConsent) {
+        case awaitInDefault:
+          return { state: "in", wasSet: false };
+        case awaitIn:
+          return { state: "in", wasSet: true };
+        case awaitOutDefault:
+          return { state: "out", wasSet: false };
+        case awaitOut:
+          return { state: "out", wasSet: true };
+        case awaitPending:
+          return { state: "pending", wasSet: false };
+        default:
+          return { state: "in", wasSet: false };
+      }
     }
   };
 };

test/functional/specs/Personalization/C17294899.js

@@ -0,0 +1,61 @@
+/*
+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 { t, Selector } from "testcafe";
+import createFixture from "../../helpers/createFixture";
+import {
+  compose,
+  orgMainConfigMain,
+  debugEnabled,
+  consentPending
+} from "../../helpers/constants/configParts";
+import { TEST_PAGE as TEST_PAGE_URL } from "../../helpers/constants/url";
+import createAlloyProxy from "../../helpers/createAlloyProxy";
+import addHtmlToHeader from "../../helpers/dom/addHtmlToHeader";
+import reloadPage from "../../helpers/reloadPage";
+import { CONSENT_OUT } from "../../helpers/constants/consent";
+
+const config = compose(orgMainConfigMain, debugEnabled, consentPending);
+
+createFixture({
+  title: "C17294899: Prehiding style is removed when consent is set to out",
+  url: `${TEST_PAGE_URL}?test=CC17294899`
+});
+
+test.meta({
+  ID: "C17294899",
+  SEVERITY: "P0",
+  TEST_RUN: "Regression"
+});
+
+test("Test C17294899: Prehiding style is removed when consent is set to out", async () => {
+  const alloy = createAlloyProxy();
+  await addHtmlToHeader(
+    `<style id="alloy-prehiding">body { visibility: hidden; }</style`
+  );
+  await alloy.configure(config);
+  await t.expect(Selector("#alloy-prehiding").exists).ok();
+
+  await alloy.sendEventAsync({ renderDecisions: true });
+  await t.expect(Selector("#alloy-prehiding").exists).ok();
+
+  await alloy.setConsent(CONSENT_OUT);
+  await t.expect(Selector("#alloy-prehiding").exists).notOk();
+
+  await reloadPage();
+  await addHtmlToHeader(
+    `<style id="alloy-prehiding">body { visibility: hidden; }</style`
+  );
+  await t.expect(Selector("#alloy-prehiding").exists).ok();
+
+  await alloy.configure(config);
+  await t.expect(Selector("#alloy-prehiding").exists).notOk();
+});

test/unit/specs/components/Personalization/createFetchDataHandler.spec.js

@@ -26,6 +26,7 @@ describe("Personalization::createFetchDataHandler", () => {
   let createProposition;
   let renderedPropositions;
   let notificationHandler;
+  let consent;
 
   let cacheUpdate;
   let personalizationDetails;
@@ -52,6 +53,8 @@ describe("Personalization::createFetchDataHandler", () => {
       collect,
       renderedPropositions
     );
+    consent = jasmine.createSpyObj("consent", ["current"]);
+    consent.current.and.returnValue({ state: "in", wasSet: false });
 
     cacheUpdate = jasmine.createSpyObj("cacheUpdate", ["update"]);
     personalizationDetails = jasmine.createSpyObj("personalizationDetails", [
@@ -75,7 +78,8 @@ describe("Personalization::createFetchDataHandler", () => {
       mergeQuery,
       processPropositions,
       createProposition,
-      notificationHandler
+      notificationHandler,
+      consent
     });
     fetchDataHandler({
       cacheUpdate,
@@ -103,6 +107,13 @@ describe("Personalization::createFetchDataHandler", () => {
     expect(hideContainers).not.toHaveBeenCalled();
   });
 
+  it("shouldn't hide containers if we have out consent cookie", () => {
+    consent.current.and.returnValue({ state: "out", wasSet: true });
+    personalizationDetails.isRenderDecisions.and.returnValue(true);
+    run();
+    expect(hideContainers).not.toHaveBeenCalled();
+  });
+
   it("should trigger responseHandler at onResponse", () => {
     personalizationDetails.isRenderDecisions.and.returnValue(false);
     run();

test/unit/specs/components/Personalization/createHandleConsentFlicker.spec.js

@@ -0,0 +1,46 @@
+import createHandleConsentFlicker from "../../../../../src/components/Personalization/createHandleConsentFlicker";
+import flushPromiseChains from "../../../helpers/flushPromiseChains";
+
+describe("Personalization::createHandleConsentFlicker", () => {
+  let showContainers;
+  let consent;
+  let handleConsentFlicker;
+
+  beforeEach(() => {
+    showContainers = jasmine.createSpy("showContainers");
+    consent = jasmine.createSpyObj("consent", ["current", "awaitConsent"]);
+    handleConsentFlicker = createHandleConsentFlicker({
+      showContainers,
+      consent
+    });
+  });
+
+  it("shows containers when consent is out and was set", () => {
+    consent.current.and.returnValue({ state: "out", wasSet: true });
+    handleConsentFlicker();
+    expect(showContainers).toHaveBeenCalled();
+    flushPromiseChains().then(() => {
+      expect(consent.awaitConsent).not.toHaveBeenCalled();
+    });
+  });
+
+  it("shows containers after consent is rejected", () => {
+    consent.current.and.returnValue({ state: "out", wasSet: false });
+    consent.awaitConsent.and.returnValue(Promise.reject());
+    handleConsentFlicker();
+    expect(consent.awaitConsent).toHaveBeenCalled();
+    flushPromiseChains().then(() => {
+      expect(showContainers).toHaveBeenCalled();
+    });
+  });
+
+  it("does not show containers after consent is given", () => {
+    consent.current.and.returnValue({ state: "out", wasSet: false });
+    consent.awaitConsent.and.returnValue(Promise.resolve());
+    handleConsentFlicker();
+    expect(consent.awaitConsent).toHaveBeenCalled();
+    flushPromiseChains().then(() => {
+      expect(showContainers).not.toHaveBeenCalled();
+    });
+  });
+});

test/unit/specs/components/Personalization/topLevel/buildAlloy.js

@@ -121,14 +121,18 @@ const buildComponent = ({
     renderedPropositions
   );
 
+  const consent = jasmine.createSpyObj("consent", ["current"]);
+  consent.current.and.returnValue({ state: "in", wasSet: false });
+
   const fetchDataHandler = createFetchDataHandler({
     prehidingStyle,
     showContainers,
     hideContainers,
     mergeQuery,
     processPropositions,
     createProposition,
-    notificationHandler
+    notificationHandler,
+    consent
   });
   const onClickHandler = createOnClickHandler({
     mergeDecisionsMeta,