Skip to content

Commit

Permalink
Assets 98993 (#75)
Browse files Browse the repository at this point in the history 
* many updates

* finish dynamic properties

- all properties should be dynamic based on graphql data
- refactored some common lookups to a shared javascript file
- updated overflow for overview/description
- made status, products more presentable
- more elegant handling of empty audience and kpi lists

* test rename svg to resolve issue

* finish updating icon names and mapping

* resolve pr comments
  • Loading branch information
@mdickson-adbe
mdickson-adbe authored May 9, 2024
1 parent 046e6e7 commit 4b2aa39
Show file tree
Hide file tree
Showing 10 changed files with 239 additions and 54 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 4b2aa39

Please sign in to comment.