add pricing-cards, billing-radio & tabs-ax #60
Conversation
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #60 +/- ##
==========================================
+ Coverage 64.52% 64.65% +0.12%
==========================================
Files 41 41
Lines 6399 6445 +46
==========================================
+ Hits 4129 4167 +38
- Misses 2270 2278 +8 ☔ View full report in Codecov by Sentry. |
| /* @TODO REMOVE IMPORTS DIRECTLY FROM MILO STYLE.CSS */ | ||
|
|
||
| /* Spacing */ | ||
| --spacing-xxs: 8px; |
There was a problem hiding this comment.
They added these here instead of their styles.css... so we have some duplicates of what we now already have in styles.css
jrrings
changed the title
| @@ -20,6 +20,9 @@ function addColorSampler(pill, colorHex, btn) { | |||
| } | |||
|
|
|||
| export default async function decorate(block) { | |||
| const headerButton = document.querySelector('.hero-color-wrapper .text-container p:last-child'); | |||
There was a problem hiding this comment.
do we really need this?
| tooltipDiv.append(iconWrapper); | ||
| } | ||
|
|
||
| async function handlePrice(pricingArea, specialPromo, legacyVersion) { |
There was a problem hiding this comment.
handlePrice(placeholders, pricingArea, specialPromo, groupID, legacyVersion)
|
|
||
| priceRow.append(basePrice, price, priceSuffix); | ||
|
|
||
| const response = await fetchPlanOnePlans(priceEl?.href); |
There was a problem hiding this comment.
can you add this directly under?
if (response.term && groupID) {
BlockMediator.set(groupID, response.term);
}
| fetchPlanOnePlans, | ||
| } from '../../scripts/utils/pricing.js'; | ||
| import createToggle, { tagFreePlan } from './pricing-toggle.js'; | ||
|
|
There was a problem hiding this comment.
import BlockMediator from '../../scripts/block-mediator.min.js';
| pricingSuffixTextElem?.remove(); | ||
| } | ||
|
|
||
| async function createPricingSection( |
There was a problem hiding this comment.
async function createPricingSection(
pricingArea,
ctaGroup,
specialPromo,
groupID,
legacyVersion,
)
| offer.classList.add('card-offer'); | ||
| offer.parentElement.outerHTML = offer.outerHTML; | ||
| } | ||
| await handlePrice(pricingArea, specialPromo, legacyVersion); |
There was a problem hiding this comment.
await handlePrice(pricingArea, specialPromo, groupID, legacyVersion);
| const [{ createTag, getConfig }, placeholderMod] = await Promise.all([import(`${getLibs()}/utils/utils.js`), import(`${getLibs()}/features/placeholders.js`)]); | ||
| const PLANS = ['monthly', 'annually']; | ||
| const placeholders = await placeholderMod.replaceKeyArray([...PLANS, 'subscription-type'], getConfig()); | ||
|
|
There was a problem hiding this comment.
new line
const SPECIAL_PLAN = 'annual-billed-monthly';
| const PLANS = ['monthly', 'annually']; | ||
| const placeholders = await placeholderMod.replaceKeyArray([...PLANS, 'subscription-type'], getConfig()); | ||
|
|
||
| function toggleOther(pricingSections, buttons, planIndex) { |
There was a problem hiding this comment.
function togglePlan(pricingSections, buttons, planIndex) {
| buttons[prevIndex].focus(); | ||
| } | ||
|
|
||
| function onKeyDown(e, pricingSections, buttons, toggleWrapper) { |
There was a problem hiding this comment.
replace
function handleKeyNavigation(e, pricingSections, buttons, toggleWrapper) {
| case 'Enter': | ||
| case 'Space': | ||
| e.preventDefault(); | ||
| toggleOther(pricingSections, buttons, currentIndex); |
There was a problem hiding this comment.
replace
togglePlan(pricingSections, buttons, currentIndex);
| }); | ||
| } | ||
|
|
||
| export default function createToggle(pricingSections, groupID, adjElemPos) { |
There was a problem hiding this comment.
replace whole method
export default function createToggle(placeholders, pricingSections, groupID, adjElemPos) {
const subDesc = placeholders?.['subscription-type'] || 'Subscription Type:';
const toggleWrapper = createTag('div', {
class: 'billing-toggle',
role: 'radiogroup',
'aria-labelledby': groupID,
});
const groupLabel = createTag('strong', { id: groupID }, subDesc);
toggleWrapper.appendChild(groupLabel);
const buttons = PLANS.map((basePlan, i) => {
const planLabelID = (BlockMediator.get(groupID) === 'ABM' && placeholders?.[SPECIAL_PLAN] && basePlan === 'monthly')
? SPECIAL_PLAN
: basePlan;
const label = placeholders?.[planLabelID];
const buttonID = `${groupID}:${basePlan}`;
// urgent update
const isDefault = i === (BlockMediator.get(groupID) === 'ABM' ? 1 : 0);
const button = createTag('button', {
class: isDefault ? 'checked' : '',
id: buttonID,
plan: basePlan,
role: 'radio',
'aria-checked': isDefault.toString(),
'aria-labelledby': buttonID,
});
button.appendChild(createTag('span'));
button.appendChild(createTag('div', { id: `${buttonID}:radio` }, label));
button.addEventListener('click', () => {
togglePlan(pricingSections, buttons, i);
adjElemPos();
});
return button;
});
const toggleButtonWrapper = createTag('div', { class: 'toggle-button-wrapper' });
toggleButtonWrapper.append(...buttons);
toggleWrapper.append(toggleButtonWrapper);
toggleWrapper.addEventListener('keydown', (e) => handleKeyNavigation(e, pricingSections, buttons, toggleWrapper));
return toggleWrapper;
}
| @@ -269,6 +269,36 @@ export async function fetchPlanOnePlans(planUrl) { | |||
| return plan; | |||
| } | |||
|
|
|||
| const offerIdSuppressMap = new Map(); | |||
There was a problem hiding this comment.
to replace:
export function shallSuppressOfferEyebrowText(savePer, offerTextContent, isPremiumCard,
isSpecialEyebrowText, offerId) {
if (offerId == null || offerId === undefined) return true;
const key = offerId + isSpecialEyebrowText;
if (offerIdSuppressMap.has(key)) {
return offerIdSuppressMap.get(key);
}
let suppressOfferEyeBrowText = false;
if (offerTextContent) {
suppressOfferEyeBrowText = savePer === '' && offerTextContent.includes('{{savePercentage}}');
}
offerIdSuppressMap.set(key, suppressOfferEyeBrowText);
return suppressOfferEyeBrowText;
}
Describe your specific features or fixes
Resolves:
Test URLs: