Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MWPW-164492: Plans Card via MAS #3649

Merged
merged 22 commits into from
Mar 3, 2025
Merged

MWPW-164492: Plans Card via MAS #3649

merged 22 commits into from
Mar 3, 2025

Conversation

3ch023
Copy link
Contributor

@3ch023 3ch023 commented Feb 7, 2025

  • Add Basic Plans card
  • until Settings ticket is done Stock offer & Secure transaction placeholders are hardcoded
  • pixel perfect will be covered in the follow up ticket
  • grey callout, badge, price swap, quantitySelector - followup tickets

Resolves: MWPW-164492

Plans Gallery:
MWPW-164492--milo--adobecom.aem.page/libs/features/mas/docs/plans.html

Test URLs:

@3ch023 3ch023 added the commerce label Feb 7, 2025
Copy link
Contributor

aem-code-sync bot commented Feb 7, 2025

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run PSI checks
  • Re-sync branch
Commits

Copy link
Contributor

aem-code-sync bot commented Feb 7, 2025

Page Scores Audits Google
📱 /drafts/mariia/pr/test-doc?martech=off PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
🖥️ /drafts/mariia/pr/test-doc?martech=off PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

Copy link
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

eslint

⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/1daaa7f60e2861e82f8f9d7db48819221c3f8191/libs/deps/mas/merch-subscription-panel.js


⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/1daaa7f60e2861e82f8f9d7db48819221c3f8191/libs/deps/mas/merch-twp-d2p.js


⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/1daaa7f60e2861e82f8f9d7db48819221c3f8191/libs/deps/mas/merch-whats-included.js


⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/1daaa7f60e2861e82f8f9d7db48819221c3f8191/libs/features/mas/dist/mas.js


⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/1daaa7f60e2861e82f8f9d7db48819221c3f8191/libs/features/mas/src/aem-fragment.js


⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/1daaa7f60e2861e82f8f9d7db48819221c3f8191/libs/features/mas/src/global.css.js


⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/1daaa7f60e2861e82f8f9d7db48819221c3f8191/libs/features/mas/src/hydrate.js


⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/1daaa7f60e2861e82f8f9d7db48819221c3f8191/libs/features/mas/src/merch-card.js


⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/1daaa7f60e2861e82f8f9d7db48819221c3f8191/libs/features/mas/src/variants/plans.css.js


⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/1daaa7f60e2861e82f8f9d7db48819221c3f8191/libs/features/mas/src/variants/plans.js


⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/1daaa7f60e2861e82f8f9d7db48819221c3f8191/libs/features/mas/src/variants/variants.js

github-actions[bot]

This comment was marked as off-topic.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Copy link
Contributor

@npeltier npeltier left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

description: 'Create, edit, sign, and manage your PDFs — quickly, easily, anywhere.',
price: 'US$19.99/mo',
cta: 'Buy now',
offerid: '30404A88D89A328584307175B8B27616',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should it here also be osi instead of offerid as changed for ccd cards? Or none since none is checked in the test

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good point, i should remove it

await expect(await acomPage.getCardCTA(data.id)).toHaveAttribute('class', /con-button blue/);
await expect(await acomPage.getCardCTA(data.id)).toContainText(data.cta);
await expect((await acomPage.getCardCTA(data.id)).evaluate((el) => el.href)).resolves.toMatch(COMMERCE_LINK_REGEX);
await expect(await acomPage.getCardCTA(data.id)).toHaveAttribute('data-analytics-id', /.*/);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we also add check for the stock checkbox? Maybe also 'See all plans' link

Copy link
Contributor Author

@3ch023 3ch023 Feb 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for the stock checkbox?

will add it once we have stock offers set:
https://jira.corp.adobe.com/browse/MWPW-166756

for see all plans i can add it now, yes

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I meant visibility of the checkbox and the text on the card or not. We have the field and depending whether the text is authored or not, it displays or not. We can do it as part of another jira as well

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added

Copy link
Contributor

@afmicka afmicka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The callout is messed up on DC
https://main--dc--adobecom.hlx.live/acrobat/features?milolibs=mwpw-164492

Screenshot 2025-02-19 at 12 12 14

Also visible on kitchen sink page on all cards. The multiple callouts are also blended into one.
https://mwpw-164492--milo--adobecom.hlx.page/docs/library/kitchen-sink/merch-card?martech=off

For comparison:
Screenshot 2025-02-19 at 12 16 31
Screenshot 2025-02-19 at 12 16 37

@afmicka
Copy link
Contributor

afmicka commented Feb 19, 2025

@bozojovicic @3ch023 these changes are also reordering promo text and callout text on some cards.
https://mwpw-164492--milo--adobecom.hlx.page/docs/library/kitchen-sink/merch-card?martech=off

promo text reorder:
Screenshot 2025-02-19 at 16 28 20
Screenshot 2025-02-19 at 16 28 16

callout text moved to the top
Screenshot 2025-02-19 at 16 30 25
Screenshot 2025-02-19 at 16 30 34

@3ch023
Copy link
Contributor Author

3ch023 commented Feb 19, 2025

Hi @afmicka so this is what i confirmed with Lucy (unfortunately on DM, will comment JIRA now)
according to the new design it should be always
green promo
description
callout.

But worth double checking..

@afmicka
Copy link
Contributor

afmicka commented Feb 19, 2025

Hi @afmicka so this is what i confirmed with Lucy (unfortunately on DM, will comment JIRA now) according to the new design it should be always green promo description callout.

But worth double checking..

Will double check in figma but having callout AFTER the radio buttons does not look "logical" to me. Don't remember having such case. Also not sure if this type of a card is used anywhere.

@st-angelo-adobe
Copy link
Contributor

From the designs, the card may or may not have callout content (first image). I'm noticing that if none is configured, the panel still appears. (second image)
image
image

@3ch023
Copy link
Contributor Author

3ch023 commented Feb 20, 2025

Hi @afmicka so this is what i confirmed with Lucy (unfortunately on DM, will comment JIRA now) according to the new design it should be always green promo description callout.

But worth double checking..

@afmicka checked with Lucy and the order change is expected.
Will mention it in demo today bit i think we should be good now

@3ch023
Copy link
Contributor Author

3ch023 commented Feb 20, 2025

From the designs, the card may or may not have callout content (first image). I'm noticing that if none is configured, the panel still appears. (second image) image image

yep, this is a bug but i'd rather fix it in adobecom/mas#161
so that studio doesn't save

content when callout is not provided

# Conflicts:
#	libs/deps/mas/commerce.js
#	libs/deps/mas/mas.js
#	libs/deps/mas/merch-card.js
#	libs/deps/mas/merch-mnemonic-list.js
#	libs/deps/mas/merch-offer-select.js
#	libs/deps/mas/merch-subscription-panel.js
#	libs/deps/mas/merch-twp-d2p.js
#	libs/features/mas/dist/mas.js
#	libs/features/mas/src/hydrate.js
@afmicka
Copy link
Contributor

afmicka commented Feb 25, 2025

@3ch023 @bozojovicic do you know why there is an extra white space added to mini-compare charts on this branch?
Comparing with both stage and main

Scratch that, cache issue

@afmicka afmicka added verified PR has been E2E tested by a reviewer Ready for Stage labels Feb 25, 2025
@milo-pr-merge milo-pr-merge bot merged commit d6aa49d into stage Mar 3, 2025
20 checks passed
@milo-pr-merge milo-pr-merge bot deleted the MWPW-164492 branch March 3, 2025 10:27
@milo-pr-merge milo-pr-merge bot mentioned this pull request Mar 3, 2025
sanrai pushed a commit that referenced this pull request Mar 5, 2025
* first draft

* add callout

* fix stock js issue

* fix plans variant

* remove sitemap

* fix unit tests

* add nala tests

* MWPW-167305 [Plans Milo] Callout grey block: authoring improvement (#3663)

Co-authored-by: Bozo Jovicic <[email protected]>

* use consonant cta for plans

* add plans.md

* fix review comments

* fix merge issue

* revert obsolete change

* fix nala tests

* address review comments

* merge in stage

* Fix regression

* fix nala tests comments

---------

Co-authored-by: Bozo Jovicic <[email protected]>
Co-authored-by: Bozo Jovicic <[email protected]>
vgoodric pushed a commit that referenced this pull request Mar 6, 2025
… Tab as Android (#3766)

* [MWPW-159511] Create anchor (ID) elements (#3714)

* [MWPW-159511] Create anchor (ID) elements

* address feedback

* address feedback

* [MWPW-167031] top tooltip rtl fix (#3618)

* [MWPW-167031] tooltip top rtl fix

* [MWPW-167031] spacing corrections

* [MWPW-167031] css optimization

* [MWPW-167031] replaced css with js logic

* [MWPW-167031] optimization

* [MWPW-167031] optimization

* MWPW-164492: Plans Card via MAS (#3649)

* first draft

* add callout

* fix stock js issue

* fix plans variant

* remove sitemap

* fix unit tests

* add nala tests

* MWPW-167305 [Plans Milo] Callout grey block: authoring improvement (#3663)

Co-authored-by: Bozo Jovicic <[email protected]>

* use consonant cta for plans

* add plans.md

* fix review comments

* fix merge issue

* revert obsolete change

* fix nala tests

* address review comments

* merge in stage

* Fix regression

* fix nala tests comments

---------

Co-authored-by: Bozo Jovicic <[email protected]>
Co-authored-by: Bozo Jovicic <[email protected]>

* MWPW-160954 Marketo Multi-step (#3671)

* MWPW-160954 Marketo Multi-step

* PR Changes

* QA Fixes

* Next button fix

* Adding support for first localnav menu being a dropdown (#3693)

* Adding support for localnav item being a dropdown

* Fix for button text

* wip

* Updating title for dropdown

* Updating mock for localnav

* Fixing button text

* Lint fix

* Replacing button text after copying

* Lint fix

* [MWPW-162639] youtube block a tag fix (#3703)

* [MWPW-162639] youtube block a tag fix

* [MWPW-162639] condition update

* [MWPW-162639] clause fix

* [MWPW-162639] code removal

* Fix(mwpw-163031): Typo fix long-form (#3710)

* new event added for autoplay videos

* combining the fixe for 163031

* Update adobetv.js

* Upgrading standalone gnav version to 0.0.5 (#3712)

Upgrading gnav version to 0.0.5

* MWPW-167455: Remove node cloning (#3715)

* MWPW-167455: Remove node cloning

* MWPW-167455: Remove redundant code

* MWPW-167455: Remove video test

* MWPW-167455: Remove unnecessary code

* MWPW-167455: Change test name

* Add fix for galaxy tab

* [MWPW-167349] - Added a default logo for the 'A' icon displayed on the right side of GNAV. (#3728)

* Added default case adobe 'A' logo on right side for GNAV(Adobe logo block)

* Added default case adobe 'A' logo on right side for GNAV(Adobe logo block)

---------

Co-authored-by: Dev Ashish Sardana <[email protected]>

* MWPW-164660: [3-in-1][Milo] Implement a link converter for CTAs using an iFrame (#3564)

* added 3-in-1 modal

* moved event listener

* updated tests

* addressed comments

* fixed unit test

* moved constants.js into mas.js

* added cli param

* MWPW-167928 Override Marketo POI (#3702)

* replace overflow x with contain layout (#3706)

* replace overflow x with contain layout

* add a fix for breaking mobile gnav

* move fix to existing media block

* [MWPW-168309] 2 small MEP button updates (#3719)

* Revert "MWPW-140452 - Icon authoring in milo using the federal repo a… (#3357)

Revert "MWPW-140452 - Icon authoring in milo using the federal repo and individual SVG assets (#3259)"

This reverts commit 81a5770.

* [Release] Stage to Main (#3497)

MWPW-165774 [Mobile-GNAV] page is not scrollable in live page (#3495)

* check for new nav when disabling ios scroll

* shortened the check from the previous commit

Co-authored-by: Raghav Sharma <[email protected]>

* Initial checkin.

* Remove white space.

---------

Co-authored-by: milo-pr-merge[bot] <169241390+milo-pr-merge[bot]@users.noreply.github.com>
Co-authored-by: Okan Sahin <[email protected]>
Co-authored-by: Raghav Sharma <[email protected]>

* MWPW-168334 Load georoutingv2.json and georoutingv2.js in parallel (#3720)

* load georoutingv2.json in parallel with georoutingv2.js

* remove performance marks

* fixed unit tests

* Small refactoring

* fallback for the jsonPromise

* fix unit tests

* [MWPW-167309] - Table h tags replace (#3721)

* [MWPW-167749] table h header replaced

* [MWPW-167749] optimization

* [MWPW-167749] naming changes

* [MWPW-167749] optimization

* [MWPW-167749] code optimization

* [MWPW-167749] col role removal

* [MWPW-167749] code style update

* [MWPW-167309] code improvement

* [MWPW-167309] - header role paragraph

* MWPW-166176 - Stop initial tabs click propagation (#3726)

* MWPW-166176 - Stop initial tabs click propagation

* PR feedback

---------

Co-authored-by: Ryan Clayton <[email protected]>

* Fix(mwpw-168006): Viewport bug fix. (#3730)

viewport bug fix

* Remove file overlap condition from merge to stage workflow (#3736)

Remove file overlap condition

* Revert "replace overflow x with contain layout" (#3776)

Revert "replace overflow x with contain layout (#3706)"

This reverts commit 0f54535.

* Adding a class to convert group link title to a simple header instead of a link (#3769)

Adding a class to convert group link title to a simple header instead of link

* MWPW-164093: Adobe Home "Try Buy Widget" merch card (#3651)

* MWPW-164093: Adobe Home 'Pricing Widget' merch card

Co-Authored-By: Angelo Statescu <[email protected]>

* styles

* cr fixes

* refactored swc cta creation

* wip

* Revert "wip"

This reverts commit ebede48.

* wip

* wip

* wip

* removed loading promise from race

* tacocat update

* new fragment mapping approach

* typo fix

* adobe home card improvements

* Enhance merch card background and border color handling

- Refactored background color processing to support custom color mapping
- Updated border color processing to use CSS custom properties
- Added more flexible color configuration for merch cards
- Improved test coverage for color-related functions
- Removed hardcoded color and border styling in favor of dynamic properties

* truncate fixes

* benchmarks duration update

* truncation error handling

* reubens comments

* updated deps

* unit test fix

* data-href for event capture

* Delete .cursor.zip

* Update .gitignore

* bubbled click event

* dataset url

* wip

* Move SWC buttons to light DOM (#3734)

* Move SWC buttons to light DOM

* fix doc

* css padding reset

* remove .cursor rules

* NALA tests

* improved nala tests

* lcp improvements on docs page

* lcp improvements

* Revert "lcp improvements"

This reverts commit bb26697.

* Revert "lcp improvements on docs page"

This reverts commit 936cf14.

* Update MAS package.json version

* fixed nala tests

* lint fixes

* nala test title fixed

* fixed test

* conflicts resolved for the nth time

* conflicts resolved

* no source maps

* right bg color for ah try card

* sp-button analytics

* data-analytics-id in sp-button

* MWPW-169143: AH Try/Buy Widget sizing fixes

* data-analytics-id on checkoutButton

* version bump

---------

Co-authored-by: Angelo Statescu <[email protected]>
Co-authored-by: astatescu <[email protected]>
Co-authored-by: Ilyas Türkben <[email protected]>
Co-authored-by: Ilyas Türkben <[email protected]>

* [MWPW-167752] Loop focus in modals containing iframes (#3716)

* MWPW-163228: Preflight svg issue (#3725)

* WIP: Pushing just for preview purposes

* Added messaging to clairfy the status of the SVG

* Strange issues with dev tools, removing fetch to avoid possible CORS, adding external url to show authors where content lives

* Updating tags and errortype for PEP lana logs (#3731)

Lana log message fix

* MWPW-151376: Check sharepoint url (#3733)

* [MWPW-167759] Hero marquee bg-bottom-tablet fix (#3735)

* MWPW-166689 Add video support to Article Header (#3737)

* MWPW-163320 Gnav Promo CTA overflowing issue - BACOM Global Nav (#3739)

* MWPW-163320 Gnav Promo CTA overflowing issue - BACOM Global Nav

* apply fix specific to button inside feds promo

---------

Co-authored-by: Narcis Radu <[email protected]>
Co-authored-by: Dušan Kosanović <[email protected]>
Co-authored-by: Mariia Lukianets <[email protected]>
Co-authored-by: Bozo Jovicic <[email protected]>
Co-authored-by: Bozo Jovicic <[email protected]>
Co-authored-by: Brandon Marshall <[email protected]>
Co-authored-by: Bandana Laishram <[email protected]>
Co-authored-by: sharathkannan <[email protected]>
Co-authored-by: Ratko Zagorac <[email protected]>
Co-authored-by: Dev Ashish Saradhana <[email protected]>
Co-authored-by: Dev Ashish Sardana <[email protected]>
Co-authored-by: Mira Fedas <[email protected]>
Co-authored-by: Prince Patel <[email protected]>
Co-authored-by: Dave Linhart <[email protected]>
Co-authored-by: milo-pr-merge[bot] <169241390+milo-pr-merge[bot]@users.noreply.github.com>
Co-authored-by: Okan Sahin <[email protected]>
Co-authored-by: Raghav Sharma <[email protected]>
Co-authored-by: Ryan Clayton <[email protected]>
Co-authored-by: Ryan Clayton <[email protected]>
Co-authored-by: Axel Cureno Basurto <[email protected]>
Co-authored-by: Angelo Statescu <[email protected]>
Co-authored-by: astatescu <[email protected]>
Co-authored-by: Ilyas Türkben <[email protected]>
Co-authored-by: Ilyas Türkben <[email protected]>
Co-authored-by: Rares Munteanu <[email protected]>
Co-authored-by: Jason Slavin <[email protected]>
Co-authored-by: Megan Thomas <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
commerce Ready for Stage verified PR has been E2E tested by a reviewer
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants