Merge pull request #982 from adobecom/2506

DC Milo Release 0.2506

.kodiak/config.yaml

@@ -9,21 +9,19 @@ notifications:
       project: MWPW # Mandatory
       filters:
         include:
-          risk_rating: R5
+          risk_rating: R3
         exclude:
           files:
             - acrobat/blocks/acom-widget/acom-widget.js
             - acrobat/blocks/acom-widget/pdfAssetManager.js
       fields:
         assignee:
           name: joaquinrivero
-        customfield_11800: MWPW-140779 #epic link
+        customfield_11800: MWPW-164516 #epic link
         customfield_12900:
           value: Slytherin
         watchers:
           - casalino
-          - jmichnow
-          - mauchley
           - tsay
         labels:
           - "OriginatingProcess=Kodiak"

acrobat/blocks/rnr/rnr.js

@@ -498,7 +498,7 @@ export default async function init(element) {
     window.lana?.log('Verb not configured for the rnr widget');
   }
   preloadIcons();
-  await loadPlaceholders();
+  await loadPlaceholders('rnr');
   await loadRnrData();
   initControls(element);
 }

acrobat/blocks/verb-widget/verb-widget.css

@@ -62,6 +62,7 @@
   display: flex;
   margin: unset;
   margin-right: 15px;
+  margin-left: 18px;
 }
 
 .verb-footer {
@@ -118,7 +119,7 @@
   flex-direction: column;
   justify-content: center;
   border-radius: 20px;
-  border: 3px solid #d5d5d5;
+  border: 3px dashed #d5d5d5;
   position: relative;
   background-color: #fff;
   min-height: 560px;
@@ -242,7 +243,7 @@
 
 .verb-errorIcon::after {
   content: '';
-  background-image: url(/acrobat/img/icons/ui/alert.svg);
+  background-image: url('/acrobat/img/icons/ui/alert.svg');
   background-repeat: no-repeat;
   display: flex;
   align-items: center;
@@ -362,8 +363,6 @@
     flex: 1 1 55%;
     flex-direction: row;
     padding: 48px;
-
-    /* cursor: pointer; */
   }
 }
 
@@ -398,24 +397,117 @@
   border-radius: 10px;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (min-width: 768px) {
+  :root {
+    --verb-widget-padding: 24px;
+    --verb-wrapper-padding-y: 57px;
+    --verb-wrapper-padding-x: 39px;
+    --verb-wrapper-border-width: 3px;
+  }
+
+  .verb-widget {
+    padding: var(--verb-widget-padding);
+    min-height: auto;
+  }
+
+  .verb-wrapper.tablet {
+    width: unset;
+    max-width: unset;
+    padding: var(--verb-wrapper-padding-y) var(--verb-wrapper-padding-x);
+    border: var(--verb-wrapper-border-width) dashed #d5d5d5;
+    border-radius: 8px;
+    justify-content: flex-start;
+    min-height: auto;
+  }
+
+  .tablet .verb-container {
+    padding: unset;
+  }
+
+  .tablet .verb-title {
+    font-size: 27px;
+  }
+
+  .tablet .verb-row {
+    gap: 38px;
+  }
+
+  .tablet .verb-col {
+    margin: 10px;
+    margin-bottom: 0;
+  }
+
+  .tablet .verb-col.right {
+    margin: 0;
+  }
+
+  .tablet .verb-heading {
+    font-size: 36px;
+    line-height: 45px;
+  }
+
+  .tablet .verb-copy {
+    font-size: 18px;
+    line-height: 27px;
+    margin-bottom: 32px;
+  }
+
+  .tablet .verb-cta {
+    cursor: pointer;
+    font-size: 23px;
+    line-height: 29px;
+    padding: 11px 25px;
+  }
+}
+@media screen and (min-width: 1000px) and (max-width: 1024px) {
+  :root {
+    --verb-widget-padding: 24px;
+    --verb-wrapper-padding-y: 57px;
+    --verb-wrapper-padding-x: 23px;
+    --verb-wrapper-border-width: 3px;
+  }
+
+  .verb-widget {
+    padding: var(--verb-widget-padding);
+    min-height: auto;
+  }
+
+  .verb-wrapper.tablet {
+    width: unset;
+    max-width: unset;
+    padding: var(--verb-wrapper-padding-y) var(--verb-wrapper-padding-x);
+    border: var(--verb-wrapper-border-width) dashed #d5d5d5;
+    border-radius: 8px;
+    justify-content: flex-start;
+    min-height: auto;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  :root {
+    --verb-widget-padding: 16px;
+    --verb-wrapper-padding-y: 60px;
+    --verb-wrapper-padding-x: 29px;
+    --verb-wrapper-border-width: 3px;
+  }
+
   .verb-widget {
     background-image: linear-gradient(180deg, #EB1000 0%, #F79B94 50%, #FFF 70%);
-    padding: 16px;
+    padding: var(--verb-widget-padding);
   }
 
   .verb-wrapper {
     width: unset;
     max-width: unset;
-    padding: 24px 29px;
-    border: 3px dashed #d5d5d5;
+    padding: var(--verb-wrapper-padding-y) var(--verb-wrapper-padding-x);
+    border: var(--verb-wrapper-border-width) dashed #d5d5d5;
     border-radius: 8px;
-    min-height: calc(100vh - (104px + 32px + 115px + 47px + 7px));
+    min-height: calc(100vh - (104px + 115px + ((var(--verb-widget-padding) + var(--verb-wrapper-padding-y) + var(--verb-wrapper-border-width)) * 2)) );
     justify-content: flex-start;
   }
 
   .verb-wrapper.mobile-app {
-    min-height: calc(100vh - (104px + 32px + 0px + 47px + 7px))
+    min-height: calc(100vh - (104px + ((16px + 3px) * 2) + 36px + 84px));
   }
 
   .verb-row {

acrobat/blocks/verb-widget/verb-widget.js

@@ -1,6 +1,6 @@
 import LIMITS from './limits.js';
 import { setLibs, getEnv, isOldBrowser } from '../../scripts/utils.js';
-import verbAnalytics from '../../scripts/alloy/verb-widget.js';
+import verbAnalytics, { reviewAnalytics } from '../../scripts/alloy/verb-widget.js';
 import createSvgElement from './icons.js';
 
 const miloLibs = setLibs('/libs');
@@ -82,6 +82,38 @@ function handleExit(event) {
   event.returnValue = true;
 }
 
+function isMobileDevice() {
+  const ua = navigator.userAgent.toLowerCase();
+  const isMobileUA = /android|iphone|ipod|blackberry|windows phone/i.test(ua);
+  return isMobileUA;
+}
+
+function isTabletDevice() {
+  const ua = navigator.userAgent.toLowerCase();
+  const isIPadOS = navigator.userAgent.includes('Mac') && 'ontouchend' in document && !/iphone|ipod/i.test(ua);
+  const isTabletUA = /ipad|android(?!.*mobile)/i.test(ua);
+  const largeTouchDevice = (navigator.maxTouchPoints || navigator.msMaxTouchPoints) > 1
+    && window.innerWidth >= 768;
+  return isIPadOS || isTabletUA || largeTouchDevice;
+}
+
+function getStoreType() {
+  const { ua } = window.browser;
+  if (/android/i.test(ua)) {
+    return 'google';
+  }
+  if (/iphone|ipod/i.test(ua)) {
+    return 'apple';
+  }
+  if (navigator.userAgent.includes('Mac') && 'ontouchend' in document && !/iphone|ipod/i.test(navigator.userAgent)) {
+    return 'apple';
+  }
+  if (/ipad/i.test(ua)) {
+    return 'apple';
+  }
+  return 'desktop';
+}
+
 async function showUpSell(verb, element) {
   const headline = window.mph[`verb-widget-upsell-headline-${verb}`] || window.mph['verb-widget-upsell-headline'];
   const headlineNopayment = window.mph['verb-widget-upsell-headline-nopayment'];
@@ -133,11 +165,10 @@ export default async function init(element) {
   const children = element.querySelectorAll(':scope > div');
   const VERB = element.classList[1];
   const widgetHeading = createTag('h1', { class: 'verb-heading' }, children[0].textContent);
+  const storeType = getStoreType();
   let mobileLink = null;
-  if (/iPad|iPhone|iPod/.test(window.browser?.ua) && !window.MSStream) {
-    mobileLink = window.mph[`verb-widget-${VERB}-apple`];
-  } else if (/android/i.test(window.browser?.ua)) {
-    mobileLink = window.mph[`verb-widget-${VERB}-google`];
+  if (storeType !== 'desktop') {
+    mobileLink = window.mph[`verb-widget-${VERB}-${storeType}`];
   }
 
   children.forEach((child) => {
@@ -215,29 +246,45 @@ export default async function init(element) {
   widgetRow.append(widgetLeft, widgetRight);
   widgetHeader.append(widgetIcon, widgetTitle);
   errorState.append(errorIcon, errorStateText, errorCloseBtn);
+  const isMobile = isMobileDevice();
+  const isTablet = isTabletDevice();
+
+  if (isMobile) {
+    widget.classList.add('mobile');
+  } else if (isTablet) {
+    widget.classList.add('tablet');
+  }
+
   if (mobileLink && LIMITS[VERB].mobileApp) {
     widget.classList.add('mobile-app');
     widgetLeft.append(widgetHeader, widgetHeading, widgetMobCopy, errorState, widgetMobileButton);
     element.append(widget);
   } else {
-    widgetLeft.append(widgetHeader, widgetHeading, widgetCopy, errorState, widgetButton, button);
+    if (isMobile || isTablet) {
+      widgetLeft.append(
+        widgetHeader,
+        widgetHeading,
+        widgetMobCopy,
+        errorState,
+        widgetButton,
+        button,
+      );
+    } else {
+      widgetLeft.append(
+        widgetHeader,
+        widgetHeading,
+        widgetCopy,
+        errorState,
+        widgetButton,
+        button,
+      );
+    }
     legalTwo.innerHTML = legalTwo.outerHTML.replace(window.mph['verb-widget-terms-of-use'], `<a class="verb-legal-url" target="_blank" href="${touURL}"> ${window.mph['verb-widget-terms-of-use']}</a>`);
     legalTwo.innerHTML = legalTwo.outerHTML.replace(window.mph['verb-widget-privacy-policy'], `<a class="verb-legal-url" target="_blank" href="${ppURL}"> ${window.mph['verb-widget-privacy-policy']}</a>`);
     legalWrapper.append(legal, legalTwo);
     footer.append(iconSecurity, legalWrapper, infoIcon);
     element.append(widget, footer);
-    if (window.browser?.isMobile) {
-      widgetCopy.after(widgetMobCopy);
-      widgetCopy.remove();
-      const infoMobIconSvg = createSvgElement('INFO_ICON_MOBILE');
-      infoIconSvg.remove();
-      infoIcon.append(infoMobIconSvg);
-      const verbMobImageSvg = createSvgElement(`${VERB}-mobile`);
-      if (verbMobImageSvg) {
-        verbImageSvg.remove();
-        verbMobImageSvg.classList.add('icon-verb-image');
-        widgetImage.appendChild(verbMobImageSvg);
-      }
+    if (isMobile && !isTablet) {
       widgetImage.after(widgetImage);
       iconSecurity.remove(iconSecurity);
       footer.prepend(infoIcon);
@@ -271,6 +318,7 @@ export default async function init(element) {
 
   // Analytics
   verbAnalytics('landing:shown', VERB);
+  reviewAnalytics(VERB);
 
   window.prefetchInitiated = false;
 

acrobat/scripts/alloy/verb-widget.js

@@ -1,3 +1,5 @@
+import frictionless from '../frictionless.js';
+
 const params = new Proxy(
   // eslint-disable-next-line compat/compat
   new URLSearchParams(window.location.search),
@@ -23,15 +25,16 @@ if (params.dropzone2) {
   appTags.push('dropzone2');
 }
 
-export default function init(eventName, verb, metaData, documentUnloading = true) {
-  function ensureSatelliteReady(callback) {
-    // eslint-disable-next-line no-underscore-dangle
-    if (window._satellite && typeof window._satellite.track === 'function') {
-      callback();
-    } else {
-      setTimeout(() => ensureSatelliteReady(callback), 200);
-    }
+function ensureSatelliteReady(callback) {
+  // eslint-disable-next-line no-underscore-dangle
+  if (window._satellite?.track instanceof Function) {
+    callback();
+  } else {
+    setTimeout(() => ensureSatelliteReady(callback), 200);
   }
+}
+
+export default function init(eventName, verb, metaData, documentUnloading = true) {
   function getSessionID() {
     const aToken = window.adobeIMS.getAccessToken();
     const arrayToken = aToken?.token.split('.');
@@ -135,3 +138,9 @@ export default function init(eventName, verb, metaData, documentUnloading = true
     window._satellite.track('event', event);
   });
 }
+
+export function reviewAnalytics(verb) {
+  ensureSatelliteReady(() => {
+    frictionless(verb);
+  });
+}

acrobat/scripts/contentSecurityPolicy/csp.js

@@ -50,6 +50,6 @@ export default async function ContentSecurityPolicy() {
   // Content Security Policy Logging
   window.cspErrors = [];
   document.addEventListener('securitypolicyviolation', (e) => {
-    window.cspErrors.push(`${e.violatedDirective} violation ¶ Refused to load content from ${e.blockedURI}`);
+    window.cspErrors.push(`${e.violatedDirective} violation ¶ Refused to load content from ${e.blockedURI}, Script location: ${e.sourceFile} Line: ${e.lineNumber} Column: ${e.columnNumber}`);
   });
 }

acrobat/scripts/contentSecurityPolicy/dev.js

@@ -121,6 +121,7 @@ const imgSrc = [
   'stage.adobeccstatic.com',
   '*.clarity.ms',
   '*.enterprise.adobe.com',
+  'www.stage.adobe.com',
   '*.services.adobe.com',
   'alb.reddit.com/rp.gif',
   'bat.bing.com/action/',
@@ -168,6 +169,7 @@ const scriptSrc = [
   '\'self\'',
   '\'unsafe-inline\'',
   '\'unsafe-eval\'',
+  'CCb6zi09JRQ6b1z1',
   '*.adobe.com',
   '*.clarity.ms',
   'accounts.google.com/gsi/client',