From 7595b6afa8472d51fb8e452fe49b3702cf922422 Mon Sep 17 00:00:00 2001 From: James Tsay Date: Thu, 9 Jan 2025 13:36:46 -0800 Subject: [PATCH 1/3] Set trial limit and show upsell --- acrobat/blocks/verb-widget/limits.js | 1 + acrobat/blocks/verb-widget/verb-widget.css | 121 +++++++++++++++++++++ acrobat/blocks/verb-widget/verb-widget.js | 45 ++++++++ 3 files changed, 167 insertions(+) diff --git a/acrobat/blocks/verb-widget/limits.js b/acrobat/blocks/verb-widget/limits.js index f9436f94..d8316d45 100644 --- a/acrobat/blocks/verb-widget/limits.js +++ b/acrobat/blocks/verb-widget/limits.js @@ -32,6 +32,7 @@ const LIMITS = { 'image/png', ], multipleFiles: true, + trial: 2, }, }; diff --git a/acrobat/blocks/verb-widget/verb-widget.css b/acrobat/blocks/verb-widget/verb-widget.css index d9c0c61d..96e52591 100644 --- a/acrobat/blocks/verb-widget/verb-widget.css +++ b/acrobat/blocks/verb-widget/verb-widget.css @@ -131,6 +131,7 @@ display: flex; justify-content: space-between; align-items: center; + min-height: 100%; } .verb-col { @@ -277,6 +278,66 @@ text-decoration: none; } +.verb-upsell { + color: rgb(34, 34, 34); + display: flex; + flex-direction: column; + width: 774.75px; + height: 532px; + position: static; + justify-content: normal; + align-items: normal; +} + +.verb-upsell-heading { + display: inline; + font-size: 32px; + font-weight: 700; + line-height: 40px; + margin-bottom: 8px; +} + +.verb-upsell-heading + .verb-upsell-heading { + margin-left: 5px; +} + +.verb-upsell-heading-nopayment { + font-weight: 400 !important; +} + +.verb-upsell-bullets-heading { + margin-bottom: -4px; + margin-top: 24px; + padding-left: 0; +} + +.verb-upsell-bullets { + margin-top: 8px; + padding: 0 0 0 15px; +} + +.verb-upsell-list { + font-size: 16px; + list-style-position: inside; + margin-bottom: 0; + margin-top: 8px; + max-width: 408px; + padding: 0 0 0 10px; +} + +.verb-upsell-bullets li::before { + content: "•"; + position: absolute; + left: -12px; +} + +.verb-upsell-bullets li { + list-style: none; + position: relative; + padding-left: 0; + margin-bottom: 8px; +} + @media screen and (min-width: 768px) { .verb-container { align-items: center; @@ -324,4 +385,64 @@ .verb-cta { cursor: pointer; } + + .verb-upsell { + width: 100%; + height: auto; + } + + .verb-upsell-heading { + display: inline; + word-wrap: break-word; + overflow-wrap: break-word; + white-space: normal; + max-width: 100%; + } + + .verb-upsell-heading + .verb-upsell-heading { + margin-left: 5px; + } + + .verb-upsell-bullets-heading { + margin-bottom: -4px; + margin-top: 16px; + } + + .verb-upsell-bullets { + margin-top: 4px; + } + + .verb-upsell-bullets li { + margin-bottom: 0; + } + + .verb-upsell-bullets li:last-child { + margin-bottom: 0; + } +} + +.verb-wrapper.verb-upsell-active { + cursor: default; + border: 3px solid #d5d5d5; +} + +.verb-wrapper.verb-upsell-active:hover { + border: 3px solid #d5d5d5; +} + +.verb-wrapper.verb-upsell-active.dragging { + background-color: #fff; + border: 3px solid #d5d5d5; +} + +.verb-upsell-column { + flex: 1; + padding-right: 24px; +} + +.verb-upsell-social-container { + flex: 1; + display: flex; + justify-content: center; + align-items: center; } diff --git a/acrobat/blocks/verb-widget/verb-widget.js b/acrobat/blocks/verb-widget/verb-widget.js index 8f5eaee1..3a182195 100644 --- a/acrobat/blocks/verb-widget/verb-widget.js +++ b/acrobat/blocks/verb-widget/verb-widget.js @@ -84,6 +84,37 @@ function handleExit(event) { event.returnValue = true; } +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']; + const bulletsHeading = window.mph['verb-widget-upsell-bullets-heading']; + const bullets = window.mph[`verb-widget-upsell-bullets-${verb}`] || window.mph['verb-widget-upsell-bullets']; + + const headlineEl = createTag('h1', { class: 'verb-upsell-heading' }, headline); + const headingNopaymentEl = createTag('h1', { class: 'verb-upsell-heading verb-upsell-heading-nopayment' }, headlineNopayment); + const upsellBulletsHeading = createTag('p', { class: 'verb-upsell-bullets-heading' }, bulletsHeading); + const upsellBullets = createTag('ul', { class: 'verb-upsell-bullets' }); + bullets.split('\n').forEach((bullet) => { upsellBullets.append(createTag('li', {}, bullet))}); + + const upsell = createTag('div', { class: 'verb-upsell' }); + const upsellColumn = createTag('div', { class: 'verb-upsell-column' }); + const socialContainer = createTag('div', { class: 'verb-upsell-social-container' }); + + const upsellRow = createTag('div', { class: 'verb-row' }); + upsellRow.append(upsellColumn, socialContainer); + + upsell.append(upsellRow); + + upsellColumn.append(headlineEl, headingNopaymentEl, upsellBulletsHeading, upsellBullets); + + const widget = createTag('div', { class: 'verb-wrapper verb-upsell-active' }); + const widgetContainer = createTag('div', { class: 'verb-container' }); + widget.append(widgetContainer); + widgetContainer.append(upsell); + + element.replaceChildren(widget); +} + export default async function init(element) { if (isOldBrowser()) { window.location.href = EOLBrowserPage; @@ -211,6 +242,14 @@ export default async function init(element) { // Analytics verbAnalytics('landing:shown', VERB); + if (LIMITS[VERB].trial) { + const count = parseInt(localStorage.getItem(`${VERB}_trial`), 10); + if (count >= LIMITS[VERB].trial) { + showUpSell(VERB, element); + return; + } + } + window.prefetchInitiated = false; widgetMobileButton.addEventListener('click', () => { @@ -268,6 +307,12 @@ export default async function init(element) { } if (e.detail?.event === 'uploading') { + if (LIMITS[VERB].trial) { + const key = `${VERB}_trial`; + const stored = localStorage.getItem(key); + const count = parseInt(stored, 10); + localStorage.setItem(key, count + 1 || 1); + } verbAnalytics('job:uploading', VERB, e.detail?.data); setUser(); document.cookie = `UTS_Uploading=${Date.now()};domain=.adobe.com;path=/;expires=${cookieExp}`; From 5f360ffd83b5e6ff234561c4e595339e124967bc Mon Sep 17 00:00:00 2001 From: James Tsay Date: Thu, 9 Jan 2025 14:07:52 -0800 Subject: [PATCH 2/3] ESLint fixes --- acrobat/blocks/verb-widget/verb-widget.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/acrobat/blocks/verb-widget/verb-widget.js b/acrobat/blocks/verb-widget/verb-widget.js index dff23344..9929be0d 100644 --- a/acrobat/blocks/verb-widget/verb-widget.js +++ b/acrobat/blocks/verb-widget/verb-widget.js @@ -79,7 +79,7 @@ function handleExit(event) { } async function showUpSell(verb, element) { - const headline = window.mph[`verb-widget-upsell-headline-${verb}`] || window.mph['verb-widget-upsell-headline']; + const headline = window.mph[`verb-widget-upsell-headline-${verb}`] || window.mph['verb-widget-upsell-headline']; const headlineNopayment = window.mph['verb-widget-upsell-headline-nopayment']; const bulletsHeading = window.mph['verb-widget-upsell-bullets-heading']; const bullets = window.mph[`verb-widget-upsell-bullets-${verb}`] || window.mph['verb-widget-upsell-bullets']; @@ -88,7 +88,7 @@ async function showUpSell(verb, element) { const headingNopaymentEl = createTag('h1', { class: 'verb-upsell-heading verb-upsell-heading-nopayment' }, headlineNopayment); const upsellBulletsHeading = createTag('p', { class: 'verb-upsell-bullets-heading' }, bulletsHeading); const upsellBullets = createTag('ul', { class: 'verb-upsell-bullets' }); - bullets.split('\n').forEach((bullet) => { upsellBullets.append(createTag('li', {}, bullet))}); + bullets.split('\n').forEach((bullet) => upsellBullets.append(createTag('li', {}, bullet))); const upsell = createTag('div', { class: 'verb-upsell' }); const upsellColumn = createTag('div', { class: 'verb-upsell-column' }); @@ -305,7 +305,7 @@ export default async function init(element) { const stored = localStorage.getItem(key); const count = parseInt(stored, 10); localStorage.setItem(key, count + 1 || 1); - } + } verbAnalytics('job:uploading', VERB, data); setUser(); document.cookie = `UTS_Uploading=${Date.now()};domain=.adobe.com;path=/;expires=${cookieExp}`; From 57c81802fe104796abaf9b2e29a637976bf1f75d Mon Sep 17 00:00:00 2001 From: James Tsay Date: Mon, 13 Jan 2025 14:02:28 -0800 Subject: [PATCH 3/3] Fix color --- acrobat/blocks/verb-widget/verb-widget.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/acrobat/blocks/verb-widget/verb-widget.css b/acrobat/blocks/verb-widget/verb-widget.css index 96e52591..165bb135 100644 --- a/acrobat/blocks/verb-widget/verb-widget.css +++ b/acrobat/blocks/verb-widget/verb-widget.css @@ -279,7 +279,7 @@ } .verb-upsell { - color: rgb(34, 34, 34); + color: #222; display: flex; flex-direction: column; width: 774.75px;