MWPW-164493 [Plans] Merch card for Plans page students tab #3933

bozojovicic · 2025-04-09T12:01:12Z

Plans card for students tab. Will be used outside card collection. Requested width 568px.
Authored in MAS Studio with new variant "Plans students".

Test Milo page https://mwpw164493students--milo--bozojovicic.aem.page/drafts/bozo/students?martech=off
MAS PR mas/pull/236
MAS studio test page mwpw-164493--mas--adobecom.aem.live/studio.html?milolibs=mwpw164493students--milo--bozojovicic#path=sandbox&page=content&query=78856cda-ba13-424d-ac46-be79ac6545cb

Resolves: MWPW-164493

Test URLs:

aem-code-sync · 2025-04-09T12:01:33Z

	Page	Scores	Audits	Google
📱	/drafts/bozo/pr/students?martech=off
🖥️	/drafts/bozo/pr/students?martech=off
📱	/drafts/bozo/students?martech=off
🖥️	/drafts/bozo/students?martech=off

yesil · 2025-04-10T12:34:21Z

libs/features/mas/src/variants/plans.css.js

    width: var(--consonant-merch-card-plans-width);
 }

+merch-card[variant="plans"][size="students"] {


please do not use size field for this. You need to add a new attribute like customer-segment

Customer segment? You probably mean Market segment (COM / EDU)?
Customer segment is INDIVIDUAL / TEAM, that would be probably needed for business cards.

So @yesil we will need another field in odin for market segment and new dropdown in card editor with values for COM and EDU, right?

Actually, instead of COM/EDU we better have options like : Individuals, Business, Students, Universities.

You ruined mine and @3ch023's idea to make this extremely simple. :)

@bozojovicic sorry, width="students" is a no go for me.
we can also create plans-edu variant, and re-use the same plans variant code without having to add a new field.
cc: @3ch023

we can, but isn't it too much code to just have a slightly different card width?

we don't add a new field, just a new 'width' variation

I created new variant "Plans students" for this card. It inherits Plans variant completely and adds new attribute segment="students" to the card so we can add styles for this card (which is for now only the card width) and reuse all styles of the plans card.

yesil · 2025-04-10T12:35:05Z

libs/features/mas/src/variants/plans.js

  allowedBorderColors: ['spectrum-yellow-300-plans', 'spectrum-gray-300-plans'],
  borderColor: { attribute: 'border-color' },
-  size: ['wide', 'super-wide'],
+  size: ['wide', 'super-wide', 'students'],


What if there is a wide Student card? We should not misuse fields.

we add 'studebts-wide' option then

I had a call with Ilyas and he explained his ideas so this comment is no longer relevant. It is not much different from what I already did. The biggest difference is - I rebased this PR to his branch MWPW-170799.

libs/features/mas/src/hydrate.js

libs/features/mas/src/variants/plans-edu.js

3ch023 · 2025-04-14T11:36:26Z

@bozojovicic pls add a marquee to your test page with a card and use it in before/after instead of a start page

3ch023 · 2025-04-14T11:39:13Z

nala/features/mas/acom/masacom.test.js

+
+    await test.step('step-2: Verify Plans Students Merch Card CSS', async () => {
+      await expect(acomPage.getCard(data.id)).toBeVisible();
+      await expect(acomPage.getCard(data.id)).toHaveAttribute('segment', 'students');


yesil · 2025-04-14T13:41:11Z

libs/features/mas/src/variants/plans.js

        padding: 2px 10px 3px;
    }
+    
+    :host([variant='plans'][segment='students']) {


do we still need segment='students' ? should we simply use host([variant='plans-edu'] ?

@yesil With host([variant='plans-edu'] none of those styles for merch-card[variant="plans"] will not be applied (and we need them for students card as well) so I either need to do add segment='students' attribute to the card or I would need to add merch-card[variant="plans-edu"] to every single CSS selector merch-card[variant="plans"] which is not a solution really.

what if we change them from :host([variant='plans']) to : :host([variant^='plans'])

Good idea! Done with merch-card[variant^="plans"] and merch-card[variant="plans-edu"]
No more segment attribute.

3ch023 · 2025-04-14T13:44:40Z

libs/features/mas/src/hydrate.js

  ANALYTICS_SECTION_ATTR,
  ];
  attributesToRemove.forEach(attr => merchCard.removeAttribute(attr));
+  if (variant === 'plans') merchCard.removeAttribute('segment');


Suggested change

if (variant === 'plans') merchCard.removeAttribute('segment');

merchCard.removeAttribute('segment');

no need to check for a variant, just always delete it

I can't. If I do that without this check I will lose styles for students card. Let me explain why I need this :
we open the card editor in mas for students card
when I change the variant from "plans students" to "plans" I need to remove the "segment" attribute
otherwise styles for students card will be applied although we changed it to plans

Deleted. :)

Roycethan · 2025-04-16T23:21:04Z

@bozojovicic
How to format "Exclusive of VAT. Annual, paid monthly." so that they are placed below the Price in same line with Body XS, 400, 14px formatting as in figma ?
I tried adding in Prices field but the formatting is not matched and not moved to next line

Expected:

afmicka · 2025-04-17T07:17:56Z

@bozojovicic How to format "Exclusive of VAT. Annual, paid monthly." so that they are placed below the Price in same line with Body XS, 400, 14px formatting as in figma ? I tried adding in Prices field but the formatting is not matched and not moved to next line

@Roycethan @bozojovicic that should be enabled with Ilyas's PR (but not ready yet): #3971
Not yet possible unless you put that text manually in the description which then separates it from the price but...

MWPW-164493 [Plans] Merch card for Plans page students tab

06b68da

bozojovicic marked this pull request as ready for review April 9, 2025 12:11

Bozo Jovicic added 3 commits April 9, 2025 15:58

Nala

de20e7b

Lint

4819d41

Trigger Build

0aa15f9

yesil requested changes Apr 10, 2025

View reviewed changes

Bozo Jovicic added 4 commits April 11, 2025 14:30

MWPW-164493 [Plans] Merch card for Plans page students tab

3be2bdb

MWPW-164493 [Plans] Merch card for Plans page students tab

bb47bfc

Merge branch 'stage' into mwpw164493students

0694fb6

build mas

f47b341

3ch023 reviewed Apr 14, 2025

View reviewed changes

libs/features/mas/src/hydrate.js Outdated Show resolved Hide resolved

3ch023 reviewed Apr 14, 2025

View reviewed changes

libs/features/mas/src/variants/plans-edu.js Outdated Show resolved Hide resolved

3ch023 reviewed Apr 14, 2025

View reviewed changes

Bozo Jovicic added 2 commits April 14, 2025 14:10

Merge branch 'MWPW-170799' into mwpw164493students

2d22896

MWPW-164493 [Plans] Merch card for Plans page students tab

d82f236

bozojovicic changed the base branch from stage to MWPW-170799 April 14, 2025 12:32

Bozo Jovicic added 3 commits April 14, 2025 14:34

MWPW-164493 [Plans] Merch card for Plans page students tab

8f98077

Trigger Build

46a95be

revert

ed631d2

yesil reviewed Apr 14, 2025

View reviewed changes

3ch023 reviewed Apr 14, 2025

View reviewed changes

3ch023 approved these changes Apr 14, 2025

View reviewed changes

MWPW-164493 [Plans] Merch card for Plans page students tab

5b8e2fd

yesil approved these changes Apr 14, 2025

View reviewed changes

bozojovicic mentioned this pull request Apr 15, 2025

MWPW-164493 [Plans] Merch card for Plans page students tab adobecom/mas#236

Merged

Bozo Jovicic added 3 commits April 16, 2025 10:05

Merge branch 'MWPW-170799' into mwpw164493students

0a0b94e

MWPW-164493 [Plans] Merch card for Plans page students tab

b714f7d

MWPW-164493 [Plans] Merch card for Plans page students tab

29be5fe

milo-pr-merge bot deleted the branch adobecom:MWPW-170799 April 17, 2025 09:18

milo-pr-merge bot closed this Apr 17, 2025

	if (variant === 'plans') merchCard.removeAttribute('segment');
	merchCard.removeAttribute('segment');

MWPW-164493 [Plans] Merch card for Plans page students tab #3933

MWPW-164493 [Plans] Merch card for Plans page students tab #3933

Uh oh!

Conversation

bozojovicic commented Apr 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aem-code-sync bot commented Apr 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bozojovicic Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yesil Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bozojovicic Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

3ch023 commented Apr 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Roycethan commented Apr 16, 2025

Uh oh!

afmicka commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

bozojovicic commented Apr 9, 2025 •

edited

Loading

aem-code-sync bot commented Apr 9, 2025 •

edited

Loading

bozojovicic Apr 10, 2025 •

edited

Loading

yesil Apr 10, 2025 •

edited

Loading

bozojovicic Apr 11, 2025 •

edited

Loading

3ch023 commented Apr 14, 2025 •

edited

Loading

afmicka commented Apr 17, 2025 •

edited

Loading