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

Axelcureno · 2025-02-07T19:26:07Z

This PR introduces Adobe Home 'Pricing Widget' merch card with 3 variations:

Test URLs:

Before: https://main--milo--adobecom.hlx.live/docs/library/kitchen-sink/merch-card?martech=off
After: https://mwpw-164093--milo--adobecom.hlx.live/docs/library/kitchen-sink/merch-card?martech=off

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

aem-code-sync · 2025-02-07T19:26:12Z

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

67b5957 ✅ (latest)
0817a79 ✅
87d4996 ✅
3432601 ✅
1a37d21 ✅
932a4cd ✅
784b274 ✅
fb4b166 ✅
f4ff0b0 ✅
87d931e ✅
2a7e193 ✅
ff28bee ✅
88c003e ✅
dff5b84 ✅
b720346 ✅
e2b8f6f ✅
9d28cc2 ✅
23eab9f ✅
f265321 ✅
cf8419f ✅
9af3377 ✅
371052e ✅
047ec40 ✅
ebede48 ✅
d97fb85 ✅
4567c1b ✅
c57ce1f ✅
781f75d ✅
5962134 ✅

github-actions

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/5962134316ca6ef39112f61727b506565cd6d1df/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/5962134316ca6ef39112f61727b506565cd6d1df/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/5962134316ca6ef39112f61727b506565cd6d1df/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/5962134316ca6ef39112f61727b506565cd6d1df/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/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/docs/mas-sidenav.js

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

https://github.com/adobecom/milo/blob/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/src/checkout-mixin.js

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

https://github.com/adobecom/milo/blob/5962134316ca6ef39112f61727b506565cd6d1df/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/5962134316ca6ef39112f61727b506565cd6d1df/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/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/src/match-media-controller.js

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

https://github.com/adobecom/milo/blob/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/src/merch-card-collection.js

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

https://github.com/adobecom/milo/blob/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/src/merch-card.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/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/src/merch-stock.js

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

https://github.com/adobecom/milo/blob/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/src/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/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/src/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/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/src/plans-modal.js

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

https://github.com/adobecom/milo/blob/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/src/sidenav/merch-sidenav.js

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

https://github.com/adobecom/milo/blob/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/src/variants/ah-try-buy-widget.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/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/src/variants/ah-try-buy-widget.js

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

https://github.com/adobecom/milo/blob/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/src/variants/variants.js

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

https://github.com/adobecom/milo/blob/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/test/aem-fragment.test.html.js

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

https://github.com/adobecom/milo/blob/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/test/checkout-button.test.js

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

https://github.com/adobecom/milo/blob/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/test/checkout-link.test.js

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

https://github.com/adobecom/milo/blob/5962134316ca6ef39112f61727b506565cd6d1df/libs/features/mas/test/hydrate.test.js

github-actions · 2025-02-07T19:26:44Z

libs/deps/mas/commerce.js

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

github-actions · 2025-02-07T19:26:45Z

libs/deps/mas/mas.js

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

aem-code-sync · 2025-02-07T19:26:46Z

	Page	Scores	Audits	Google
📱	/docs/library/kitchen-sink/merch-card?martech=off
🖥️	/docs/library/kitchen-sink/merch-card?martech=off

github-actions · 2025-02-07T19:26:47Z

libs/deps/mas/merch-card.js

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

libs/features/mas/docs/benchmarks.html

libs/features/mas/docs/checkout-button.html

+                    'light',
+                    el.classList.contains('light'),
+                );
+                targetContainer.innerHTML = `<h4>Demo: </h4><div class="demo-container">${el.textContent}</div>`;


To fix the problem, we need to ensure that any text content inserted into the DOM is properly escaped to prevent XSS attacks. This can be achieved by using a text node instead of setting innerHTML directly. By creating a text node, we ensure that any special characters in the text content are automatically escaped.

The best way to fix this issue is to create a text node for the content of el.textContent and append it to the target container. This way, the text content is safely inserted into the DOM without being interpreted as HTML.

libs/features/mas/docs/checkout-link.html

+                    'light',
+                    el.classList.contains('light'),
+                );
+                targetContainer.innerHTML = `<h4>Demo: </h4><div class="demo-container">${el.textContent}</div>`;


To fix the problem, we need to ensure that any text content assigned to innerHTML is properly escaped to prevent the interpretation of HTML meta-characters. This can be achieved by using a function that escapes HTML special characters before assigning the text to innerHTML.

The best way to fix this without changing existing functionality is to create a utility function that escapes HTML special characters and use this function to sanitize el.textContent before assigning it to innerHTML.

libs/features/mas/docs/inline-price.html

+                    'light',
+                    el.classList.contains('light'),
+                );
+                targetContainer.innerHTML = `<h4>Demo: </h4><div class="demo-container">${el.textContent}</div>`;


To fix the problem, we need to ensure that the text content is properly escaped before being inserted into the HTML. This can be achieved by creating a text node and appending it to the target container, which ensures that any special characters in the text content are properly escaped.

Replace the direct insertion of el.textContent into the HTML with a safer method that escapes the text content.

Specifically, create a text node for the demo content and append it to the target container.

Modify the relevant lines in the file libs/features/mas/docs/inline-price.html.

libs/features/mas/docs/mas.html

+                    'light',
+                    el.classList.contains('light'),
+                );
+                targetContainer.innerHTML = `<h4>Demo: </h4><div class="demo-container">${el.textContent}</div>`;


To fix the problem, we need to ensure that the text content is properly escaped before being inserted into the HTML. This can be achieved by creating a text node and appending it to the container, which ensures that any special characters in the text content are treated as text rather than HTML.

Replace the direct assignment of el.textContent to innerHTML with a method that safely appends the text content.

Specifically, create a text node with the content of el.textContent and append it to the container.

libs/features/mas/docs/mas.js.html

+                    'light',
+                    el.classList.contains('light'),
+                );
+                targetContainer.innerHTML = `<h4>Demo: </h4><div class="demo-container">${el.textContent}</div>`;


To fix the problem, we need to ensure that any text content extracted from the DOM and inserted back as HTML is properly escaped to prevent it from being interpreted as HTML. This can be achieved by using a function to escape HTML special characters before assigning the text content to innerHTML.

The best way to fix this without changing existing functionality is to create a utility function that escapes HTML special characters and use this function to sanitize el.textContent before inserting it into the innerHTML.

libs/features/mas/docs/merch-card.html

github-actions

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/781f75d935e60c184f2ee1180d2e08d34848bc2c/libs/features/mas/src/merch-card.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/781f75d935e60c184f2ee1180d2e08d34848bc2c/libs/features/mas/src/merch-stock.js

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

https://github.com/adobecom/milo/blob/781f75d935e60c184f2ee1180d2e08d34848bc2c/libs/features/mas/src/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/781f75d935e60c184f2ee1180d2e08d34848bc2c/libs/features/mas/src/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/781f75d935e60c184f2ee1180d2e08d34848bc2c/libs/features/mas/src/plans-modal.js

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

https://github.com/adobecom/milo/blob/781f75d935e60c184f2ee1180d2e08d34848bc2c/libs/features/mas/src/sidenav/merch-sidenav.js

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

https://github.com/adobecom/milo/blob/781f75d935e60c184f2ee1180d2e08d34848bc2c/libs/features/mas/src/variants/ah-try-buy-widget.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/781f75d935e60c184f2ee1180d2e08d34848bc2c/libs/features/mas/src/variants/ah-try-buy-widget.js

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

https://github.com/adobecom/milo/blob/781f75d935e60c184f2ee1180d2e08d34848bc2c/libs/features/mas/src/variants/variants.js

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

https://github.com/adobecom/milo/blob/781f75d935e60c184f2ee1180d2e08d34848bc2c/libs/features/mas/test/aem-fragment.test.html.js

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

https://github.com/adobecom/milo/blob/781f75d935e60c184f2ee1180d2e08d34848bc2c/libs/features/mas/test/checkout-button.test.js

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

https://github.com/adobecom/milo/blob/781f75d935e60c184f2ee1180d2e08d34848bc2c/libs/features/mas/test/checkout-link.test.js

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

https://github.com/adobecom/milo/blob/781f75d935e60c184f2ee1180d2e08d34848bc2c/libs/features/mas/test/hydrate.test.js

github-actions · 2025-02-07T21:12:52Z

libs/features/mas/dist/mas.js

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

github-actions · 2025-02-07T21:12:53Z

libs/features/mas/docs/mas-sidenav.js

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

github-actions · 2025-02-07T21:12:54Z

libs/features/mas/src/checkout-mixin.js

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

github-actions · 2025-02-07T21:12:55Z

libs/features/mas/src/global.css.js

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

github-actions · 2025-02-07T21:12:55Z

libs/features/mas/src/hydrate.js

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

github-actions · 2025-02-07T21:12:57Z

libs/features/mas/src/merch-card-collection.js

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

github-actions · 2025-02-08T01:26:05Z

This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR.

yesil · 2025-02-10T09:40:19Z

libs/features/mas/docs/checkout-button.html

I think this is not in the navigation menu(lost in previous PRs) can you add it back?

yesil · 2025-02-10T09:49:42Z

libs/features/mas/src/hydrate.js

+        try {
+          await customElements.whenDefined('checkout-button');
+          const CheckoutButtonEl = customElements.get('checkout-button');
+          const checkoutBtn = CheckoutButtonEl.createCheckoutButton({}, cta.innerHTML);


I think this block causes runtime errors in ah gallery:

mas.js:2370 Failed to initialize checkout-button logic: TypeError: Cannot read properties of null (reading 'setAttribute')
at mas.js:2370:30403

yesil · 2025-02-10T09:50:23Z

libs/features/mas/src/hydrate.js

+          const checkoutBtn = CheckoutButtonEl.createCheckoutButton({}, cta.innerHTML);
+
+          for (const attr of cta.attributes) {
+            checkoutBtn.setAttribute(attr.name, attr.value);


I wonder why this is needed?

yesil · 2025-02-10T09:52:27Z

libs/features/mas/src/hydrate.js

-            /* c8 ignore next 3 */
+    (async () => {
+        try {
+          await customElements.whenDefined('checkout-button');


I think it is safe to assume that checkout-button is already defined before we hit here, if not wee need to check how mas.js is bundled.
I would avoid adding checks for web components that we know are in the bundle.

Disregard my previous comment, I found the root cause for the race condition. It was that in my test page, mas-commerce-service was actually defined after mas.js so the checkout button was not created properly since there was no service.

yesil · 2025-02-10T09:53:16Z

libs/features/mas/src/hydrate.js

            e.stopPropagation();
-            cta.click();
+            if (typeof checkoutBtn.clickHandler === 'function') {


isn't checkoutBtn.click() not enough?

yesil · 2025-02-10T09:54:47Z

libs/features/mas/src/match-media-controller.js

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+
+export default class MatchMediaController {


is this different than https://opensource.adobe.com/spectrum-web-components/tools/match-media/ ?

can we use the lit one instead?

We talked about it a few weeks ago. You said if MatchMediaController from SWC is small we could use it, otherwise we can implement the logic in js. And this is it, a local implementation of the same thing.
However, it's pretty much the same as the one from SWC to be honest. Let me know if you want me to remove this and just use the one from SWC.

Actually since MatchMediaController from SWC is so small we can just use that. I changed it back everywhere too.

true true, I thought this portion was from Axel and I didn't remember our discussion.
if putting MatchMediaController doesn't explode our bundle size, let's use it as it.

yesil · 2025-02-10T09:55:22Z

libs/features/mas/src/merch-stock.js

@@ -1,6 +1,6 @@
 import { LitElement, css, html } from 'lit';
 import { EVENT_MERCH_STOCK_CHANGE } from './constants.js';
-import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
+import MatchMediaController from './match-media-controller.js';


I would like to understand the difference

yesil · 2025-02-10T09:56:23Z

libs/features/mas/src/variants/ah-try-buy-widget.js

+      flex-direction: row;
+    }
+
+    :host([variant='ah-try-buy-widget']) .footer .spectrum-Button-label {


if we don't support Spectrum CSS anymore for AH, we should remove such rules.

yesil · 2025-02-10T09:56:51Z

libs/features/mas/src/variants/ah-try-buy-widget.js

+  `;
+}
+
+customElements.define('ah-try-buy-widget', AHTryBuyWidget);


please cleanup Spectrum CSS related rules since we switched to SWC.

I removed, hopefully all of them

3ch023 · 2025-02-11T12:37:47Z

libs/features/mas/src/checkout-mixin.js

@@ -100,7 +100,6 @@ export function CheckoutMixin(Base) {
        }

        async render(overrides = {}) {
-            if (!this.isConnected) return false;


is it to fix some issue? do you have more details?

@3ch023 I asked them. Since sp-button doesn't have checkout-link capabilities, instead we will render a checkout-link but not in the DOM and just forward clicks to it.
But the DOM element must be rendered even if it is not connected to DOM which is fine IMO.

i am good if there is no impact on events we throw for CCD

3ch023 · 2025-02-11T12:40:28Z

libs/features/mas/src/hydrate.js

+        let title = fields.cardTitle;
+        const { maxCount } = titleConfig;
+        if (maxCount) {
+            const [truncatedTitle, cleanTitle] = getTruncatedTextData(fields.cardTitle, maxCount);


we should have a nala card with 'too long' description and a test checking truncation on /libs/features/mas/docs/adobe-home.html

lets do it as a follow up ticket though, @Axelcureno could you create one?

Yes, created: https://jira.corp.adobe.com/browse/MWPW-167766

Roycethan · 2025-02-20T00:12:08Z

@Axelcureno Can you plz fix following , Thanks

When used dark theme , the theme is not apllied to few cards in double and single plan types:
https://mwpw-164093--milo--adobecom.hlx.live/libs/features/mas/docs/adobe-home.html?theme=dark

2)Plz update the first card in triple plan to have background - Grey

On first card - 'See terms'' and Annual billed monthly' should be in separate rows and not wrapped - Better add pricing in between

ac: buttons should be responsive to hover state, e.g. S2/Accent colored button changes to S2/Primary when hovered over - I don't see hover and change color working in gallery , Can you plz check this requirement ?
ac: product titles should be truncated with ellipses (...) if they exceed 40 characters or 3 lines
Looks like its truncating title before 40 characters or 3 lines -
ex: Creative Cloud All Apps Long Test Exa...

max character count in description should be 200 characters - Its taking more than that

In description field , if i enter around more than 25 characters in 1 row , its not wrapped into next line automatically and remaining characters are not rendered.

why the 'size' feild is blank for this card ?
https://mwpw-164093--mas--adobecom.hlx.page/studio.html?milolibs=MWPW-164093--milo--adobecom#path=adobe-home&page=content&query=f07084e9-1963-4877-8ab0-f7d2982e62cb

st-angelo-adobe · 2025-02-20T09:28:02Z

@Roycethan
2, 3: Done.
4. I seriously doubt Accent buttons need to change to Primary color when hovered. I'll confirm with the AH team if this is an actual requirement, it may have been a misunderstanding.
5. Actually, the title is truncated at 37 characters, plus 3 for ellipses = 40 in total. If this is not the desired behavior we can change that.
6. From what I'm seeing this is actually fine. The editor is counting more than actual characters, possibly (maybe \n is counted as 2 characters, not sure, this needs to be investigated).

8. That was just a remnant, previously Triple was just Normal, then you had the option to pick Single or Double. I changed it to Triple.

For 1 and 7 we'll look into it. cc: @Axelcureno

Roycethan · 2025-02-20T16:47:29Z

@Axelcureno Can you plz fix following , Thanks

When used dark theme , the theme is not apllied to few cards in double and single plan types:
https://mwpw-164093--milo--adobecom.hlx.live/libs/features/mas/docs/adobe-home.html?theme=dark

2)Plz update the first card in triple plan to have background - Grey

On first card - 'See terms'' and Annual billed monthly' should be in separate rows and not wrapped - Better add pricing in between

4. ac: buttons should be responsive to hover state, e.g. S2/Accent colored button changes to S2/Primary when hovered over - I don't see hover and change color working in gallery , Can you plz check this requirement ? 5. ac: product titles should be truncated with ellipses (...) if they exceed 40 characters or 3 lines Looks like its truncating title before 40 characters or 3 lines - ex: Creative Cloud All Apps Long Test Exa... 6. max character count in description should be 200 characters - Its taking more than that 7. In description field , if i enter around more than 25 characters in 1 row , its not wrapped into next line automatically and remaining characters are not rendered. 8. why the 'size' feild is blank for this card ? https://mwpw-164093--mas--adobecom.hlx.page/studio.html?milolibs=MWPW-164093--milo--adobecom#path=adobe-home&page=content&query=f07084e9-1963-4877-8ab0-f7d2982e62cb

In dark theme , the buy button in figma (say for photoshop) looks more darker than whats implemented - can we plz check this as well ?
Figma:

Actual:

10)Figma mentions widjet should have shadow on Desktop and tablet and not in mobile: do we have a separate ticket to address this ?

Actual: Shadow is not rendered in the widject for Desktop/tablet:

@Axelcureno cc @st-angelo-adobe
1 - Need fix
2,3 -fixed
4- Requirement was wrong , and need correction per figma- for now looks ok
5- Ok as explained
6 - Not working as expected
7 - Need investigation
8- fixed
9- Plz review
10 - Plz review

Axelcureno · 2025-02-21T01:17:06Z

@Roycethan we are not delivering "widgets", we are only delivering the cards. The page in milo is just for demonstration purposes, it does not represent the actual widget. The widget containing the cards is built in adobe home code.

Axelcureno · 2025-02-21T01:26:10Z

@Roycethan item #9 is a mistake in the color of figma, we are not overriding colors in dark theme and even in figma it says "Dark mode follows the same S2 guidelines as Light mode."
I've left a comment here for correction: https://www.figma.com/design/7tUtNgFelfMjgPoJ5QcE1k?node-id=5160-32869&m=dev#1142597000

Axelcureno · 2025-02-21T01:26:34Z

I've fixed the remaining items, please check @Roycethan

Roycethan · 2025-02-21T02:33:50Z

I've fixed the remaining items, please check @Roycethan

Thanks 1 is fixed, for 6 and 7 will create a separate followup ticket, approving this to proceed to stage

milo-pr-merge · 2025-02-21T04:18:46Z

Skipped 3651: "MWPW-164093: Adobe Home "Try Buy Widget" merch card" due to file "libs/deps/mas/commerce.js" overlap. Merging will be attempted in the next batch

narcis-radu · 2025-02-21T13:46:48Z

Thanks 1 is fixed, for 6 and 7 will create a separate followup ticket, approving this to proceed to stage
@Roycethan , @Axelcureno , @st-angelo-adobe - Have you created follow-up tickets for 6 / 7 ?

narcis-radu · 2025-02-21T13:51:52Z

@Axelcureno , @Roycethan - it is almost impossible for someone outside the Merch team to test the changes. I had to go through comments to find a URL where the elements are rendered. The testing URL should be in the PR description.
Additionally, I am unable to test on small viewports, the content does not flow properly. I would assume mobile support is present.

Roycethan · 2025-02-21T14:38:48Z

Thanks 1 is fixed, for 6 and 7 will create a separate followup ticket, approving this to proceed to stage
@Roycethan , @Axelcureno , @st-angelo-adobe - Have you created follow-up tickets for 6 / 7 ?

Yes tracking here https://jira.corp.adobe.com/browse/MWPW-168322

Axelcureno · 2025-02-21T15:50:45Z

le for someone outside the Merch team to test the changes. I had to go through comments to find a URL where the elements are rendered. T

@Roycethan 6 and 7 are working as expected. I have validated on my end.

Roycethan · 2025-02-21T17:56:33Z

https://jira.corp.adobe.com/browse/MWPW-168322

Cool thanks @Axelcureno for fixing them, closing as fixed

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

5962134

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

Axelcureno added commerce merch card labels Feb 7, 2025

Axelcureno requested review from yesil, npeltier, 3ch023, seanchoi-dev and st-angelo-adobe February 7, 2025 19:26

Axelcureno self-assigned this Feb 7, 2025

github-actions bot reviewed Feb 7, 2025

View reviewed changes

github-advanced-security bot found potential problems Feb 7, 2025

View reviewed changes

styles

781f75d

github-actions bot reviewed Feb 7, 2025

View reviewed changes

Axelcureno mentioned this pull request Feb 7, 2025

MWPW-164093: Adobe Home 'Buy Try Widget' merch card adobecom/mas#159

Merged

Axelcureno changed the title ~~MWPW-164093: Adobe Home 'Pricing Widget' merch card~~ MWPW-164093: Adobe Home "Try Buy Widget" merch card Feb 7, 2025

yesil requested changes Feb 10, 2025

View reviewed changes

3ch023 reviewed Feb 11, 2025

View reviewed changes

Axelcureno requested a review from yesil February 19, 2025 16:26

yesil approved these changes Feb 19, 2025

View reviewed changes

aem-code-sync bot had a problem deploying to mas-v0.2.7-dev February 19, 2025 16:54 Failure

Axelcureno added 3 commits February 20, 2025 17:07

reubens comments

87d931e

Merge branch 'stage' into MWPW-164093

f4ff0b0

updated deps

fb4b166

unit test fix

784b274

Roycethan added verified PR has been E2E tested by a reviewer Ready for Stage labels Feb 21, 2025

Axelcureno added 3 commits February 21, 2025 18:45

data-href for event capture

932a4cd

Delete .cursor.zip

1a37d21

Update .gitignore

3432601

aem-code-sync bot had a problem deploying to mas-v0.2.8-dev February 22, 2025 03:05 Failure

Axelcureno added 3 commits February 24, 2025 08:04

bubbled click event

87d4996

dataset url

0817a79

wip

67b5957

aem-code-sync bot had a problem deploying to mas-v0.2.9-dev February 25, 2025 03:46 Failure

@@ -586,3 +586,7 @@
                             );
-                            targetContainer.innerHTML = `<h4>Demo: </h4><div class="demo-container">${el.textContent}</div>`;
+                            const demoContainer = document.createElement('div');
+                            demoContainer.className = 'demo-container';
+                            demoContainer.textContent = el.textContent;
+                            targetContainer.innerHTML = '<h4>Demo: </h4>';
+                            targetContainer.appendChild(demoContainer);
                             el.parentElement.after(targetContainer);

@@ -582,2 +582,15 @@
                     <script type="module">
+                        function escapeHTML(str) {
+                            return str.replace(/[&<>"']/g, function (match) {
+                                const escapeMap = {
+                                    '&': '&amp;',
+                                    '<': '&lt;',
+                                    '>': '&gt;',
+                                    '"': '&quot;',
+                                    "'": '&#39;',
+                                };
+                                return escapeMap[match];
+                            });
+                        }
                         document.querySelectorAll('code.demo').forEach((el) => {
@@ -588,3 +601,3 @@
                             );
-                            targetContainer.innerHTML = `<h4>Demo: </h4><div class="demo-container">${el.textContent}</div>`;
+                            targetContainer.innerHTML = `<h4>Demo: </h4><div class="demo-container">${escapeHTML(el.textContent)}</div>`;
                             el.parentElement.after(targetContainer);

@@ -522,3 +522,7 @@
                             );
-                            targetContainer.innerHTML = `<h4>Demo: </h4><div class="demo-container">${el.textContent}</div>`;
+                            const demoContainer = document.createElement('div');
+                            demoContainer.className = 'demo-container';
+                            demoContainer.textContent = el.textContent;
+                            targetContainer.innerHTML = '<h4>Demo: </h4>';
+                            targetContainer.appendChild(demoContainer);
                             el.parentElement.after(targetContainer);

@@ -269,3 +269,7 @@
                             );
-                            targetContainer.innerHTML = `<h4>Demo: </h4><div class="demo-container">${el.textContent}</div>`;
+                            const demoContainer = document.createElement('div');
+                            demoContainer.className = 'demo-container';
+                            demoContainer.textContent = el.textContent;
+                            targetContainer.innerHTML = '<h4>Demo: </h4>';
+                            targetContainer.appendChild(demoContainer);
                             el.parentElement.after(targetContainer);

@@ -785,2 +785,10 @@
                     <script type="module">
+                        function escapeHtml(unsafe) {
+                            return unsafe
+                                .replace(/&/g, "&amp;")
+                                .replace(/</g, "&lt;")
+                                .replace(/>/g, "&gt;")
+                                .replace(/"/g, "&quot;")
+                                .replace(/'/g, "&#039;");
+                        }
                         document.querySelectorAll('code.demo').forEach((el) => {
@@ -791,3 +799,3 @@
                             );
-                            targetContainer.innerHTML = `<h4>Demo: </h4><div class="demo-container">${el.textContent}</div>`;
+                            targetContainer.innerHTML = `<h4>Demo: </h4><div class="demo-container">${escapeHtml(el.textContent)}</div>`;
                             el.parentElement.after(targetContainer);

		@@ -0,0 +1,34 @@
		import { LitElement } from 'lit';

		export default class MatchMediaController {

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

Are you sure you want to change the base?

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

Conversation

Axelcureno commented Feb 7, 2025 • edited Loading

aem-code-sync bot commented Feb 7, 2025 • edited Loading

github-actions bot left a comment

Choose a reason for hiding this comment

github-actions bot Feb 7, 2025

Choose a reason for hiding this comment

github-actions bot Feb 7, 2025

Choose a reason for hiding this comment

aem-code-sync bot commented Feb 7, 2025 • edited Loading

github-actions bot Feb 7, 2025

Choose a reason for hiding this comment

github-actions bot left a comment

Choose a reason for hiding this comment

github-actions bot Feb 7, 2025

Choose a reason for hiding this comment

github-actions bot Feb 7, 2025

Choose a reason for hiding this comment

github-actions bot Feb 7, 2025

Choose a reason for hiding this comment

github-actions bot Feb 7, 2025

Choose a reason for hiding this comment

github-actions bot Feb 7, 2025

Choose a reason for hiding this comment

github-actions bot Feb 7, 2025

Choose a reason for hiding this comment

github-actions bot commented Feb 8, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Axelcureno Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

st-angelo-adobe Feb 11, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Roycethan commented Feb 20, 2025 • edited Loading

st-angelo-adobe commented Feb 20, 2025

Roycethan commented Feb 20, 2025 • edited Loading

Axelcureno commented Feb 21, 2025

Axelcureno commented Feb 21, 2025

Axelcureno commented Feb 21, 2025

Roycethan commented Feb 21, 2025

milo-pr-merge bot commented Feb 21, 2025

narcis-radu commented Feb 21, 2025

narcis-radu commented Feb 21, 2025

Roycethan commented Feb 21, 2025

Axelcureno commented Feb 21, 2025

Roycethan commented Feb 21, 2025

Axelcureno commented Feb 7, 2025 •

edited

Loading

aem-code-sync bot commented Feb 7, 2025 •

edited

Loading

aem-code-sync bot commented Feb 7, 2025 •

edited

Loading

Axelcureno Feb 12, 2025 •

edited

Loading

st-angelo-adobe Feb 11, 2025 •

edited

Loading

Roycethan commented Feb 20, 2025 •

edited

Loading

Roycethan commented Feb 20, 2025 •

edited

Loading