MWPW-188624: support promo override in grouped variations

studio/src/editors/merch-card-editor.js

@@ -21,9 +21,54 @@ import { getItemFieldStateByIndex } from '../utils/field-state.js';
 import { Fragment } from '../aem/fragment.js';
 import { toAttribute } from '../aem/aem-tag-picker-field.js';
 import { getGlobalSettingsDefaults } from '../settings/settings-store.js';
+import { getLocaleByCode } from '../../../io/www/src/fragment/locales.js';
 
 const QUANTITY_MODEL = 'quantitySelect';
 const WHAT_IS_INCLUDED = 'whatsIncluded';
+const EVENT_COMMERCE_READY = 'wcms:commerce:ready';
+const INLINE_PRICE_SELECTOR = 'span[is="inline-price"][data-wcs-osi]';
+
+function isEditorPriceElement(element) {
+    if (element.closest('#preview-wrapper')) return true;
+    const host = element.getRootNode()?.host;
+    return host?.nodeName === 'RTE-FIELD' && !!host.closest('merch-card-editor');
+}
+
+export function getActiveMerchCardEditor() {
+    return document.querySelector('merch-card-editor');
+}
+
+function groupedPreviewLocaleProvider(element, options) {
+    if (!isEditorPriceElement(element)) return;
+    const localeCode = getActiveMerchCardEditor()?.previewLocaleOverride;
+    if (!localeCode) return;
+
+    const locale = getLocaleByCode(localeCode);
+    if (!locale) return;
+
+    options.locale = localeCode;
+    options.language = locale.lang;
+    options.country = locale.country;
+}
+
+function registerGroupedPreviewLocaleProvider(service) {
+    if (!service?.providers?.price) return;
+    if (service.providers.has(groupedPreviewLocaleProvider)) return;
+    service.providers.price(groupedPreviewLocaleProvider);
+}
+
+function editorPromoCodeProvider(element, options) {
+    if (!isEditorPriceElement(element)) return;
+    const promoCode = getActiveMerchCardEditor()?.getEffectiveFieldValue('promoCode', 0);
+    if (!promoCode) return;
+    options.promotionCode = promoCode;
+}
+
+function registerEditorPromoCodeProvider(service) {
+    if (!service?.providers?.price) return;
+    if (service.providers.has(editorPromoCodeProvider)) return;
+    service.providers.price(editorPromoCodeProvider);
+}
 
 const VARIANT_RTE_MARKS = {
     [VARIANT_NAMES.MINI]: {
@@ -41,6 +86,7 @@ class MerchCardEditor extends LitElement {
         localeDefaultFragment: { type: Object, attribute: false },
         isVariation: { type: Boolean, attribute: false },
         fieldsReady: { type: Boolean, state: true },
+        previewLocaleOverride: { type: String, state: true },
     };
 
     static SECTION_FIELDS = {
@@ -72,6 +118,7 @@ class MerchCardEditor extends LitElement {
         this.isVariation = false;
         this.lastMnemonicState = null;
         this.fieldsReady = false;
+        this.previewLocaleOverride = null;
         this.localeSearch = '';
         this.reactiveController = new ReactiveController(this, []);
     }
@@ -92,6 +139,44 @@ class MerchCardEditor extends LitElement {
         return (this.fragment.getFieldValues('pznTags') || []).filter(Boolean).join(',');
     }
 
+    #normalizeGroupedPreviewLocaleCode(tagValue) {
+        const localeCode = tagValue?.split('/').pop()?.trim();
+        return getLocaleByCode(localeCode) ? localeCode : null;
+    }
+
+    get groupedPreviewLocales() {
+        if (!this.isGroupedVariation) return [];
+        const tags = this.fragment?.getFieldValues('pznTags') || [];
+        const localeCodes = [...new Set(tags.map((tag) => this.#normalizeGroupedPreviewLocaleCode(tag)).filter(Boolean))];
+        return localeCodes.map((code) => {
+            const locale = getLocaleByCode(code);
+            return {
+                code,
+                lang: locale.lang,
+                country: locale.country,
+                label: `${locale.country} (${locale.lang.toUpperCase()})`,
+            };
+        });
+    }
+
+    #syncGroupedPreviewLocale() {
+        const locales = this.groupedPreviewLocales;
+        if (!locales.length) {
+            if (this.previewLocaleOverride !== null) {
+                this.previewLocaleOverride = null;
+            }
+            return;
+        }
+
+        const codes = locales.map((locale) => locale.code);
+        const globalLocale = Store.localeOrRegion();
+        this.previewLocaleOverride = codes.includes(this.previewLocaleOverride)
+            ? this.previewLocaleOverride
+            : codes.includes(globalLocale)
+              ? globalLocale
+              : codes[0];
+    }
+
     #normalizePznTagIds(value) {
         const rawValues = Array.isArray(value) ? value : typeof value === 'string' ? [value] : [];
         return [
@@ -434,17 +519,41 @@ class MerchCardEditor extends LitElement {
 
     connectedCallback() {
         super.connectedCallback();
+        this.#registerCommercePriceProviders();
+        document.addEventListener(EVENT_COMMERCE_READY, this.#handleCommerceReady);
     }
 
     disconnectedCallback() {
         super.disconnectedCallback();
+        document.removeEventListener(EVENT_COMMERCE_READY, this.#handleCommerceReady);
         this.lastMnemonicState = null;
     }
 
+    #handleCommerceReady = (event) => {
+        this.#registerCommercePriceProviders(event.detail || event.target);
+    };
+
+    #registerCommercePriceProviders(service = document.querySelector('mas-commerce-service')) {
+        registerGroupedPreviewLocaleProvider(service);
+        registerEditorPromoCodeProvider(service);
+    }
+
+    refreshRenderedPrices() {
+        document.querySelector('mas-commerce-service')?.refreshOffers?.();
+        this.querySelectorAll('rte-field').forEach((field) => {
+            field.shadowRoot?.querySelectorAll(INLINE_PRICE_SELECTOR).forEach((price) => {
+                price.requestUpdate(true);
+            });
+        });
+    }
+
     #cachedGlobalDefaults = null;
 
     willUpdate(changedProperties) {
         this.#cachedGlobalDefaults = null;
+        if (this.fragmentStore?.get()) {
+            this.#syncGroupedPreviewLocale();
+        }
         if (changedProperties.has('fragmentStore') && this.fragmentStore) {
             this.fieldsReady = false;
             this.reactiveController.updateStores([this.fragmentStore, Store.settings.rows, Store.search]);
@@ -611,6 +720,19 @@ class MerchCardEditor extends LitElement {
 
     async updated(changedProperties) {
         super.updated(changedProperties);
+        if (changedProperties.has('previewLocaleOverride')) {
+            const oldValue = changedProperties.get('previewLocaleOverride');
+            if (oldValue !== this.previewLocaleOverride) {
+                this.refreshRenderedPrices();
+                this.dispatchEvent(
+                    new CustomEvent('preview-locale-change', {
+                        bubbles: true,
+                        composed: true,
+                        detail: { value: this.previewLocaleOverride },
+                    }),
+                );
+            }
+        }
         if (!this.fieldsReady && this.fragment) {
             await this.updateComplete;
             await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));

studio/src/mas-fragment-editor.js

@@ -8,6 +8,7 @@ import StoreController from './reactivity/store-controller.js';
 import { CARD_MODEL_PATH, COLLECTION_MODEL_PATH, ODIN_PREVIEW_ORIGIN, PAGE_NAMES, TAG_PROMOTION_PREFIX } from './constants.js';
 import router from './router.js';
 import { VARIANTS } from './editors/variant-picker.js';
+import { getActiveMerchCardEditor } from './editors/merch-card-editor.js';
 import { extractLocaleFromPath, generateCodeToUse, getFragmentMapping, replaceLocaleInPath, showToast } from './utils.js';
 import { getSpectrumVersion } from './constants/icon-library.js';
 import './editors/merch-card-editor.js';
@@ -91,6 +92,24 @@ export default class MasFragmentEditor extends LitElement {
             overflow-y: auto;
         }
 
+        .preview-locale-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            width: 100%;
+            padding: 20px 20px 0 20px;
+            box-sizing: border-box;
+        }
+
+        .preview-locale-panel sp-field-label {
+            font-size: 14px;
+            color: var(--spectrum-global-color-gray-800);
+        }
+
+        .preview-locale-panel sp-picker {
+            width: 100%;
+        }
+
         @media (max-width: 1200px) {
             #preview-column {
                 position: relative;
@@ -1043,6 +1062,9 @@ export default class MasFragmentEditor extends LitElement {
         }
 
         this.fragmentStore.updateField(fieldName, value);
+        if (fieldName === 'promoCode') {
+            getActiveMerchCardEditor()?.refreshRenderedPrices?.();
+        }
     }
 
     async deleteFragment() {
@@ -1333,6 +1355,42 @@ export default class MasFragmentEditor extends LitElement {
         </div>`;
     }
 
+    #handleGroupedPreviewLocaleChange = (event) => {
+        const editor = getActiveMerchCardEditor();
+        if (!editor) return;
+        editor.previewLocaleOverride = event.target.value || null;
+    };
+
+    #handlePreviewLocaleChange = (event) => {
+        if (!this.fragmentStore?.previewStore) return;
+        const localeValue = event.detail?.value ?? null;
+        const changed = this.fragmentStore.previewStore.setPreviewLocaleOverride(localeValue);
+        if (!changed) return;
+        this.fragmentStore.previewStore.resolveFragment();
+        this.requestUpdate();
+    };
+
+    get groupedPreviewLocaleSelector() {
+        const editor = getActiveMerchCardEditor();
+        const locales = editor?.groupedPreviewLocales || [];
+        if (!locales.length) return nothing;
+
+        const selectedLocale = editor?.previewLocaleOverride || locales[0].code;
+
+        return html`
+            <div class="preview-locale-panel">
+                <sp-field-label for="grouped-preview-locale">Preview card for:</sp-field-label>
+                <sp-picker
+                    id="grouped-preview-locale"
+                    value="${selectedLocale}"
+                    @change=${this.#handleGroupedPreviewLocaleChange}
+                >
+                    ${locales.map((locale) => html`<sp-menu-item value="${locale.code}">${locale.label}</sp-menu-item>`)}
+                </sp-picker>
+            </div>
+        `;
+    }
+
     get localeVariationHeader() {
         if (!this.fragment || !this.editorContextStore.isVariation(this.fragment.id)) {
             return nothing;
@@ -1502,6 +1560,7 @@ export default class MasFragmentEditor extends LitElement {
                         .updateFragment=${this.updateFragment}
                         .localeDefaultFragment=${this.localeDefaultFragment}
                         .isVariation=${this.editorContextStore.isVariation(this.fragment?.id)}
+                        @preview-locale-change=${this.#handlePreviewLocaleChange}
                     ></merch-card-editor>
                 `;
                 break;
@@ -1540,6 +1599,7 @@ export default class MasFragmentEditor extends LitElement {
         return html`
             <div id="preview-column">
                 <div id="preview-wrapper">
+                    ${this.groupedPreviewLocaleSelector}
                     ${this.editorContextStore.isVariation(this.fragment.id)
                         ? Fragment.isGroupedVariationPath(this.fragment.path)
                             ? this.displayGroupedVariationInfo('preview-header')

studio/src/reactivity/preview-fragment-store.js

@@ -60,6 +60,7 @@ export function mergeResolvedPreviewFields(originalFields = [], resolvedFields =
 export class PreviewFragmentStore extends FragmentStore {
     resolved = false;
     placeholderUnsubscribe = null;
+    previewLocaleOverride = null;
     #resolving = false;
     #resolveDebounceTimer = null;
     #refreshDebounceTimer = null;
@@ -135,6 +136,16 @@ export class PreviewFragmentStore extends FragmentStore {
         this.resolveFragment();
     }
 
+    setPreviewLocaleOverride(value) {
+        const nextValue = value || null;
+        if (this.previewLocaleOverride === nextValue) {
+            return false;
+        }
+        this.previewLocaleOverride = nextValue;
+        this.resolved = false;
+        return true;
+    }
+
     resolveFragment(immediate = false) {
         this.lazy = false;
         clearTimeout(this.#resolveDebounceTimer);
@@ -213,7 +224,7 @@ export class PreviewFragmentStore extends FragmentStore {
         body.fields = serializePreviewFields(originalFields);
 
         const context = {
-            locale: Store.localeOrRegion(),
+            locale: this.previewLocaleOverride || Store.localeOrRegion(),
             surface: Store.surface(),
             dictionary: Store.placeholders.preview.value,
         };

studio/src/reactivity/source-fragment-store.js

@@ -81,7 +81,10 @@ export class SourceFragmentStore extends FragmentStore {
         return success;
     }
 
-    resolvePreviewFragment() {
+    resolvePreviewFragment(previewLocaleOverride) {
+        if (previewLocaleOverride !== undefined) {
+            this.previewStore.setPreviewLocaleOverride(previewLocaleOverride);
+        }
         this.previewStore.resolveFragment();
     }
 

studio/src/rte/ost.js

@@ -202,6 +202,7 @@ export function openOfferSelectorTool(triggerElement, offerElement) {
         let initialReferenceOsi;
         const aosAccessToken = localStorage.getItem('masAccessToken') ?? window.adobeid.authorize();
         const searchParameters = new URLSearchParams();
+        const promotionCode = triggerElement?.closest('merch-card-editor')?.getEffectiveFieldValue('promoCode', 0)?.trim();
 
         const offerSelectorPlaceholderOptions = {};
         if (offerElement) {
@@ -223,6 +224,10 @@ export function openOfferSelectorTool(triggerElement, offerElement) {
                 }
             });
 
+            if (promotionCode && !offerSelectorPlaceholderOptions.promotionCode) {
+                offerSelectorPlaceholderOptions.promotionCode = promotionCode;
+            }
+
             [
                 'promotionCode', // contextual promo code (e.g. set on card/)
                 'storedPromoOverride', // promo code set directly on price/CTA

studio/src/rte/rte-field.js

@@ -1194,6 +1194,7 @@ class RteField extends LitElement {
             const parser = DOMParser.fromSchema(this.#editorSchema);
             const doc = parser.parse(container);
             const tr = this.editorView.state.tr.replaceWith(0, this.editorView.state.doc.content.size, doc.content);
+            tr.setMeta('external', true);
             this.editorView.dispatch(tr);
         } catch (error) {
             console.error('Error updating editor content:', error);
@@ -1216,11 +1217,12 @@ class RteField extends LitElement {
                 const value = this.#serializeContent(newState);
                 // skip change event during initialization
                 const isFirstChange = transaction.getMeta('initialize');
+                const isExternalUpdate = transaction.getMeta('external');
                 if (value !== this.value) {
                     this.#isInternalUpdate = true;
                     this.value = value === '<p></p>' ? '' : value;
                     this.#isInternalUpdate = false;
-                    if (isFirstChange) return;
+                    if (isFirstChange || isExternalUpdate) return;
                     this.dispatchEvent(
                         new CustomEvent('change', {
                             bubbles: true,

studio/test/rte/rte-field.test.html

@@ -103,6 +103,22 @@
                         const rte = await createFromTemplate('rte', this.test.title);
                         expect(rte.shadowRoot).exist;
                     });
+
+                    it('should not emit change when syncing an external value update', async function () {
+                        const rte = await createFromTemplate('rte-link', this.test.title);
+                        let changeCount = 0;
+                        rte.addEventListener('change', () => {
+                            changeCount += 1;
+                        });
+
+                        rte.value = '<a class="accent" data-checkout-workflow="UCv3" data-wcs-osi="abm">Buy now</a>';
+                        await delay(100);
+
+                        expect(changeCount).to.equal(0);
+                        expect(rte.value).to.equal(
+                            '<p><a class="accent" data-checkout-workflow="UCv3" data-wcs-osi="abm">Buy now</a></p>',
+                        );
+                    });
                 });
 
                 describe('RTE Field: styling features', () => {

web-components/src/merch-card.js

@@ -56,6 +56,9 @@ function priceOptionsProvider(element, options) {
         options.literals ??= {};
         Object.assign(options.literals, card.priceLiterals);
     }
+    if (!options.promotionCode) {
+        options.promotionCode = card.promotionCode;
+    }
     if (card.aemFragment) {
         options[FF_DEFAULTS] = true;
     }