MWPW-186822 [Lingo][io/www] Product Merch card variant in M@S Studio

[bozojovicic]

Resolves https://jira.corp.adobe.com/browse/MWPW-186822
Resolves https://jira.corp.adobe.com/browse/MWPW-175845
QA Checklist: https://wiki.corp.adobe.com/display/adobedotcom/M@S+Engineering+QA+Use+Cases

MAS Studio https://mwpw-186822--mas--adobecom.aem.live/studio.html#fragmentId=e942f7d4-153e-4e0d-aedb-87c41874945d&page=fragment-editor&path=sandbox
Collection https://main--milo--adobecom.aem.page/drafts/bozo/pr/product-coll?maslibs=MWPW-186822
Single card https://main--milo--adobecom.aem.page/drafts/bozo/pr/product-cards?maslibs=MWPW-186822

Please do the steps below before submitting your PR for a code review or QA

• C1. Cover code with Unit Tests
• C2. Add a Nala test (double check with #fishbags if nala test is needed)
• C3. Verify all Checks are green (unit tests, nala tests)
• C4. PR description contains working Test Page link where the feature can be tested
• C5: you are ready to do a demo from Test Page in PR (bonus: write a working demo script that you'll use on Thursday, you can eventually put in your PR)
• C.6 read your Jira one more time to validate that you've addressed all AC's and nothing is missing

🧪 Nala E2E Tests

Nala tests run automatically when you open this PR.

To run Nala tests again:

1. Add the run nala label to this PR (in the right sidebar)
2. Tests will run automatically on the current commit
3. Any future commits will also trigger tests as long as the label remains

To stop automatic Nala tests:

• Remove the run nala label

Note: Tests only run on commits if the run nala label is present. Add the label whenever you need tests to run on new changes.

Test URLs:

• Before: https://main--mas--adobecom.aem.live/
• After: https://mwpw-186822--mas--adobecom.aem.live/

[aem-code-sync]

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

• Re-sync branch

Commits

• 7fc8bac ✅ (latest)
• 982bdab ✅
• 6311184 ✅
• 9ba7067 ✅
• df19ced ✅
• 44419bb ✅
• e23695b ✅
• fd1089d ✅
• 17eefbe ✅
• c4a9768 ✅
• 6508b78 ✅
• e8b85c1 ✅
• 8d58dc4 ✅
• 2b0f50a ✅
• 9f3fd6f ✅
• 0f68ca3 ✅
• 4fb157e ✅
• 3d07ce3 ✅
• 8e981a9 ✅
• b1073aa ✅
• d455d34 ✅
• 09bb9be ❌
• 45941db ✅
• ab5fedb ✅
• 9baeecc ✅
• 6217d0e ✅
• 6380fa9 ✅

[codecov]

Codecov Report

❌ Patch coverage is 96.52510% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 83.81%. Comparing base (cd996f6) to head (7fc8bac).

Files with missing lines	Patch %	Lines
web-components/src/variants/product.js	96.33%	4 Missing ⚠️
web-components/src/merch-card.js	92.50%	3 Missing ⚠️
studio/src/rte/rte-field.js	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #603      +/-   ##
==========================================
+ Coverage   83.71%   83.81%   +0.09%     
==========================================
  Files         179      179              
  Lines       48186    48431     +245     
==========================================
+ Hits        40341    40594     +253     
+ Misses       7845     7837       -8     

Files with missing lines	Coverage Δ
studio/src/constants/icon-library.js	100.00% <100.00%> (ø)
studio/src/editors/merch-card-editor.js	74.96% <100.00%> (ø)
studio/src/editors/variant-picker.js	98.69% <100.00%> (+0.05%)	⬆️
studio/src/mas-fragment-editor.js	88.38% <100.00%> (ø)
web-components/src/global.css.js	100.00% <100.00%> (ø)
web-components/src/hydrate.js	91.48% <100.00%> (+0.29%)	⬆️
web-components/src/merch-card-collection.js	90.49% <100.00%> (+0.03%)	⬆️
web-components/src/variants/product.css.js	100.00% <100.00%> (ø)
web-components/src/variants/variants.js	89.70% <100.00%> (+0.20%)	⬆️
studio/src/rte/rte-field.js	76.76% <0.00%> (-0.09%)	⬇️
... and 2 more

... and 1 file with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cd996f6...7fc8bac. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Roycethan]

@bozojovicic Plz see these gaps while im trying to create this prototype:
https://milo.adobe.com/docs/authoring/commerce/samples/merch-card-product-card-step12

Card: https://mwpw-186822--mas--adobecom.aem.live/studio.html#fragmentId=009cb783-a5e6-4e3b-99cc-0e45f65a499d&page=fragment-editor&path=sandbox

1. Green badge should have white badge text
2. Possible to align the price in same line "US$23.99/moper license" like the expected ?
3. Not able to link "See term" in Green promo text
4. In the callout text, the tooltip icon is very close to the text which is also making "." after first line to go to next line.
5. How to author lighter version of " Annual subscription, cancel within 14 days for a full refund. " below the pricing - there should be Sub-title field i guess for this purpose....
   6)There is bit more padding below the green promo in the prototype
6. How to add Quantity selector below the Horizontal line as in prototype..?
7. Secure transaction label not rendered when configured
8. When used as standalone cards in Milo columns, the layout is getting broken - same issue fixed by Joaquin for special-Offers and Image cards:
   ex: See Bottom one
   https://main--cc--adobecom.aem.page/drafts/reuben/image?maslibs=MWPW-186822

[bozojovicic]

@Roycethan

1. Fixed. You will have to re-author badge if it's still black text.
2. I will have to see with Fred about this. We never have that "per licence" in MAS cards next to the price, it is always in the next line displayed as part of the subtext i.e. legal pricing disclaimer, how Fred calls it. Then that "per licence" can be overridden in the field "Per unit label" if you want to display the text like "Annual subscription, cancel within 14 days for a full refund." You asked that in 5. This is extremely strange way to author something but it is as it is. That's how it is done for plans cards.
3. That is implemented in MWPW-186818 [Lingo][io/www] Segment Merch card variant in M@S Studio #567 I expect that PR will be merged before this one.
4. That tooltip and that info icon is in total mess and should be re-implemented. I did not touch anything in this PR because we already have a ticket for that problem.
5. Answered in 2.
6. In that prototype there is one <br> at the beginning of the card description. That empty space is not some padding/margin, it is simply authored with one extra new line in the text.
7. Fred wrote in the ticket that we will not have that horizontal line above the quantity selector in MAS card, only above the footer with CTAs.
8. For segment card I configured in io/www to display that "legal pricing disclaimer" and the secure transaction label but then Nico said that it will be configurable in the future, and that my changes in io/www will not be needed. I think his PR for that change is still not merged. I will ask him how this will work in the future. But that's why it doesn't work for the product card yet.
9. Fixed

[Roycethan]

https://milo.adobe.com/docs/authoring/commerce/samples/merch-card-product-card-step12

For #5 (or as answered in #2) i tried to author "Annual subscription, cancel within 14 days for a full refund." in "Per unit label" field - but its not rendered, Plz review below and see if this can be configured or does it need #8 to be fixed ? ... thanks
https://mwpw-186822--mas--adobecom.aem.live/studio.html#fragmentId=009cb783-a5e6-4e3b-99cc-0e45f65a499d&page=fragment-editor&path=sandbox

[bozojovicic]

@Roycethan The ticket that should make that "secure transaction" label and "legal disclaimer" configurable is this one https://jira.corp.adobe.com/browse/MWPW-166756, the PR #613
but I don't think it will me merged soon so I added the support for the product card as well to io/www code and now you can see the secure transaction label and also "Annual, billed monthly" and "Annual subscription, cancel within 14 days for a full refund." here https://main--milo--adobecom.aem.page/drafts/bozo/pr/product-coll?maslibs=MWPW-186822
but have in mind that this will have to be re-done once #613 is merged.

[Roycethan]

@bozojovicic Here as well i see few regressions on prod pages:
https://main--dc--adobecom.aem.live/acrobat/pricing/students?maslibs=MWPW-186822

@bozojovicic also along with above regressions, plz fix the JS conflicts here thanks

[Roycethan]

@bozojovicic Plz resolve conflicts and see if this brings up the promo text field as RTE editor in https://mwpw-186822--mas--adobecom.aem.live/studio.html
right now both product card and image card are having regular text field and not rte, even though the segment card pr is merged to main

[bozojovicic]

@bozojovicic Plz resolve conflicts and see if this brings up the promo text field as RTE editor

Yes, it is RTE. For both, image and product. https://mwpw-186822--mas--adobecom.aem.live/studio.html#fragmentId=e942f7d4-153e-4e0d-aedb-87c41874945d&page=fragment-editor&path=sandbox

[Roycethan]

@bozojovicic Resolve conflicts and get reviews completed for merging , thanks