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 5ab6e132..71023b0f 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: #222; + 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; @@ -367,4 +428,64 @@ margin-top: 0; font-size: 12px; } + + .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 885bad77..28fe2df9 100644 --- a/acrobat/blocks/verb-widget/verb-widget.js +++ b/acrobat/blocks/verb-widget/verb-widget.js @@ -78,6 +78,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; @@ -216,6 +247,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', () => { @@ -256,6 +295,7 @@ export default async function init(element) { element.addEventListener('unity:track-analytics', (e) => { const cookieExp = new Date(Date.now() + 90 * 1000).toUTCString(); + const { event, data } = e.detail || {}; if (!event) return; @@ -279,6 +319,12 @@ export default async function init(element) { setUser(); }, 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, data); if (VERB === 'compress-pdf') { verbAnalytics('job:multi-file-uploading', VERB, data);