Skip to content

Commit

Permalink
Merge branch 'assets-12024' into ASSETS-88902
Browse files Browse the repository at this point in the history 
* assets-12024:
  ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all dropdown lists to use updated graphql queries) (#77)
  Release 05.09.2024 (#78)
  Assets 98993 (#75)
  Added custom values for campaign and program (#67)
  Update hydration-utils.js (#63)
  MH: Add 'Asset Owner' Field to Add Assets Modal (#57)
  updated hydration-utils.js (#54)

# Conflicts:
#	blocks/gmo-campaign-header/gmo-campaign-header.js

Resolved merge conflict on  blocks/gmo-campaign-header/gmo-campaign-header.js
  • Loading branch information
@TyroneAEM
TyroneAEM committed May 10, 2024
2 parents bc29793 + 5e14728 commit f34ea1d
Show file tree
Hide file tree
Showing 13 changed files with 282 additions and 75 deletions.
18 changes: 18 additions & 0 deletions blocks/gmo-campaign-details/gmo-campaign-details.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ body {
align-items: center;
border: 1px solid #D3D3D3;
border-radius: 4px;
cursor: pointer;
& > .icon {
width: 20px;
height: 30px;
Expand Down Expand Up @@ -54,6 +55,9 @@ body {
width: 17px;
}
}
& > .campaign-img {
background-color: #e1e1e1;
}
& .header-row1 {
display: flex;
align-items: center;
Expand Down Expand Up @@ -127,11 +131,18 @@ body {
font: normal normal normal 14px/21px Adobe Clean;
letter-spacing: 0px;
color: black;
&.hide-overflow {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
}
& .button.no-bg {
font: normal normal normal 14px/17px Adobe Clean;
margin-top: 10px;
color: #505050;
cursor: pointer;
}
}
.kpis-wrapper {
Expand All @@ -142,6 +153,10 @@ body {
-moz-columns: 2;
font: normal normal normal 14px/21px Adobe Clean;
}
& div {
font-size: 14px;
margin-top: 15px;
}
}
.use-cases-wrapper {
margin-bottom: 30px;
Expand Down Expand Up @@ -209,6 +224,9 @@ body {
padding-left: 15px;
}
}
&.audiences > div {
font-size: 14px;
}
}
.milestone, .card-content {
font: normal normal normal 14px/21px Adobe Clean;
Expand Down
160 changes: 121 additions & 39 deletions blocks/gmo-campaign-details/gmo-campaign-details.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { decorateIcons } from '../../scripts/lib-franklin.js';
import { getQueryVariable } from '../../scripts/shared.js';
import { getProgramDetails } from '../../scripts/graphql.js';
import { checkBlankString } from '../gmo-campaign-list/gmo-campaign-list.js'
import { statusMappings, productMappings } from '../../scripts/shared-campaigns.js';
import { getBaseConfigPath } from '../../scripts/site-config.js';

const testData = [
{
Expand Down Expand Up @@ -423,7 +428,16 @@ import { decorateIcons } from '../../scripts/lib-franklin.js';

export default async function decorate(block) {
//const rows = buildTable(testData);
// /graphql/execute.json/gmo/getProgramDetails;programName=<name here>
const programName = getQueryVariable('programName');
const graphqlData = await getProgramDetails(programName);
const program = graphqlData.data.programList.items[0];
const rows = buildTableNoGroups(testData);
const kpis = buildKPIList(program).outerHTML;
const products = buildProductList(program).outerHTML;
const audiences = buildAudienceList(program).outerHTML;
const date = formatDate(program.launchDate);
const status = buildStatus(program.status).outerHTML;
block.innerHTML = `
<div class="back-button">
<span class="icon icon-back"></span>
Expand All @@ -435,12 +449,12 @@ export default async function decorate(block) {
</div>
<div class="header-title">
<div class="header-row1">
<span class="h1">Express Mobile Beta</span>
<div class="campaign-status">In Progress</div>
<span class="h1">${program.programName}</span>
${status}
</div>
<div class="header-row2">
<span class="icon icon-calendar"></span>
<span class="campaign-date">03/07/2024</span>
<span class="campaign-date">${date}</span>
</div>
</div>
</div>
Expand All @@ -453,20 +467,11 @@ export default async function decorate(block) {
<div class="overview-wrapper">
<span class="h1 overview-heading">At a Glance</span>
<span class="h3">Product Value</span>
<span class="description">
Express mobile public beta is not a major at scale marketing moment (due to the limited nature of beta experience) with key audiences of
Existing Express users, investors and media. Marketing approach is signaling to the market our continued momentum with the new mobile
beta release, focusing efforts on PR, social/community and in-app surfaces.
</span>
<div class="button no-bg">Read more</div>
<div class="description hide-overflow">${checkBlankString(program.productValue.plaintext)}</div>
<div class="button no-bg read-more">Read more</div>
<div class="kpis-wrapper">
<span class="h3">KPIs to Measure Success</span>
<ul>
<li>PR impressions & dedicated earned stories</li>
<li>Mobile exports</li>
<li>Community & social interactions</li>
<li>100% by EOL</li>
</ul>
${kpis}
</div>
<div class="use-cases-wrapper inactive">
<span class="h3">Hero Use Cases</span>
Expand Down Expand Up @@ -519,10 +524,7 @@ export default async function decorate(block) {
</div>
<div class="card products">
<div class="card-heading h3">Products</div>
<div class="product card-content">
<span class="icon icon-Express"></span>
Adobe Express Mobile App
</div>
${products}
</div>
<div class="card scope inactive">
<div class="card-heading h3">Feature Scope</div>
Expand All @@ -534,26 +536,7 @@ export default async function decorate(block) {
</div>
<div class="card audiences">
<div class="card-heading h3">Audiences</div>
<div class="audience card-content">
<span class="icon icon-gear"></span>
Existing Express Users
</div>
<div class="audience card-content">
<span class="icon icon-gear"></span>
Prospects with priority on communicators
</div>
<div class="audience card-content">
<span class="icon icon-gear"></span>
CC entitled members who have not used Express
</div>
<div class="audience card-content">
<span class="icon icon-gear"></span>
CC free unentitled members on mobile (PsX, LR)
</div>
<div class="audience card-content">
<span class="icon icon-gear"></span>
K12
</div>
${audiences}
</div>
</div>
</div>
Expand Down Expand Up @@ -597,6 +580,13 @@ export default async function decorate(block) {
block.querySelector('.tab-wrapper').addEventListener('click', (event) => {
switchTab(event.target);
})
block.querySelector('.back-button').addEventListener('click', () => {
const host = location.origin + getBaseConfigPath();
document.location.href = host + `/campaigns`;
})
block.querySelector('.read-more').addEventListener('click', () => {
document.querySelector('.overview-wrapper > .description').classList.toggle('hide-overflow');
})
decorateIcons(block);
}

Expand All @@ -612,6 +602,98 @@ function switchTab(tab) {
tab.classList.toggle('active');
}

function buildKPIList(program) {
let kpiList = document.createElement('ul');
program.primaryKpi?.forEach((kpi) => {
const kpiLi = createKPI(kpi);
kpiList.appendChild(kpiLi);
})
program.additionalKpi?.forEach((kpi) => {
const kpiLi = createKPI(kpi);
kpiList.appendChild(kpiLi);
})
if (kpiList.children.length == 0) {
kpiList.remove();
kpiList = document.createElement('div');
kpiList.textContent = "Not Available";
}
return kpiList;
}

function createKPI(kpi) {
const kpiLi = document.createElement('li');
const kpiText = parseString(kpi);
kpiLi.textContent = kpiText;
return kpiLi;
}

function buildProductList(program) {
const product = checkBlankString(program.productOffering);
const productList = document.createElement('div');
productList.classList.add('product', 'card-content');
const productName = productMappings[product].name;
const productLabel = productMappings[product].icon;
productList.innerHTML = `
<span class="icon icon-${productLabel}"></span>
${productName}
`
return productList;
}

function buildAudienceList(program) {
const audienceList = document.createElement('div');
program.primaryAudience?.forEach((audience) => {
const audienceDiv = createAudience(audience);
audienceList.appendChild(audienceDiv);
})
program.additionalAudiences?.forEach((audience) => {
const audienceDiv = createAudience(audience);
audienceList.appendChild(audienceDiv);
})
if (audienceList.children.length == 0) audienceList.textContent = "Not Available";
return audienceList;
}

function buildStatus(status) {
const statusDiv = document.createElement('div');
statusDiv.classList.add('campaign-status');
const statusLabel = statusMappings[status].label;
const statusColor = statusMappings[status].color;
statusDiv.textContent = statusLabel;
statusDiv.classList.add(statusColor);
return statusDiv;
}

function createAudience(audience) {
const text = parseString(audience);
const audienceDiv = document.createElement('div');
audienceDiv.classList.add('audience', 'card-content');
audienceDiv.innerHTML = `
<span class="icon icon-gear"></span>
${text}
`;
return audienceDiv;
}

function parseString(text) {
let parsed = text.replace(/-/g, ' ').split(' ');
parsed[0] = parsed[0].charAt(0).toUpperCase() + parsed[0].slice(1);
parsed = parsed.join(' ');
return parsed;
}

function formatDate(dateString) {
const parts = dateString.split('-');
const yyyy = parts[0];
const mm = parts[1];
const dd = parts[2];

// Formatting the date into mm/dd/yyyy format
const formattedDate = mm + '/' + dd + '/' + yyyy;

return formattedDate;
}

function buildTable(data) {
const rows = document.createElement('div');
const uniqueCategories = getUniqueValues(data, 'category');
Expand Down
3 changes: 3 additions & 0 deletions blocks/gmo-campaign-list/gmo-campaign-list.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,9 @@ body {
}
.campaign-description {
line-height:20px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
}
Expand Down
Loading

0 comments on commit f34ea1d

Please sign in to comment.