adobecom · bozojovicic · Jul 4, 2025 · Jul 4, 2025 · Jul 4, 2025 · Jul 4, 2025
diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js
diff --git a/libs/features/mas/dist/mas.js b/libs/features/mas/dist/mas.js
diff --git a/libs/features/mas/src/merch-card.js b/libs/features/mas/src/merch-card.js
@@ -41,6 +41,9 @@ const MERCH_CARD_LOAD_TIMEOUT = 20000;
 
 const MARK_MERCH_CARD_PREFIX = 'merch-card:';
 
+const PROMO_CODE_ATTR = 'data-promotion-code';
+const PROMO_CODE_NA_ATTR = 'data-promotion-code-na';
+
 function priceOptionsProvider(element, options) {
     const card = element.closest(MERCH_CARD);
     if (!card) return options;
@@ -164,6 +167,8 @@ export class MerchCard extends LitElement {
      */
     variantLayout;
 
+    quantityBasedPromo;
+
     constructor() {
         super();
         this.id = null;
@@ -372,6 +377,29 @@ export class MerchCard extends LitElement {
         for (const link of allLinks) {
             link.dataset.quantity = event.detail.option;
         }
+
+        if (this.prices.length === 0) return;
+
+        const price = this.prices[0];
+        if (this.quantityBasedPromo?.resolved && this.quantityBasedPromo?.promotionCode && price) {
+            if (event.detail.option >= this.quantityBasedPromo.minProductQuantity) {
+                price.setAttribute(PROMO_CODE_ATTR, this.quantityBasedPromo.promotionCode);
+                for (const link of allLinks) {
+                    if (link.dataset.promotionCodeNa === this.quantityBasedPromo.promotionCode) {
+                        link.setAttribute(PROMO_CODE_ATTR, this.quantityBasedPromo.promotionCode);
+                        link.removeAttribute(PROMO_CODE_NA_ATTR);
+                    }
+                }
+            } else {
+                price.removeAttribute(PROMO_CODE_ATTR);
+                for (const link of allLinks) {
+                    if (link.dataset.promotionCode === this.quantityBasedPromo.promotionCode) {
+                        link.setAttribute(PROMO_CODE_NA_ATTR, this.quantityBasedPromo.promotionCode);
+                        link.removeAttribute(PROMO_CODE_ATTR);
+                    }
+                }
+            }
+        }
     }
 
     get titleElement() {
@@ -415,6 +443,35 @@ export class MerchCard extends LitElement {
         return this.textContent.match(new RegExp(text, 'i')) !== null;
     }
 
+    async resolveQuantityBasedPromotions() {
+        if (this.prices.length === 0 || !this.quantitySelect) return;
+
+        const price = this.prices[0];
+        const promotionCode = price.dataset.promotionCode;
+
+        if (!promotionCode) return;
+
+        const osi = price.dataset.wcsOsi;
+        const options = this.#service.collectPriceOptions({}, this);
+        options.wcsOsi = [osi];
+        options.promotionCode = promotionCode;
+        const [promise] = await this.#service.resolveOfferSelectors(options);
+        const [offer] = await promise;
+        const minProductQuantity = offer?.promotion?.displaySummary?.minProductQuantity || 1;
+
+        this.quantityBasedPromo = {
+            promotionCode,
+            minProductQuantity,
+            resolved: true,
+        }
+
+        this.handleQuantitySelection({
+            detail: {
+                option: this.quantitySelect.getAttribute('default-value')
+            }
+        })
+    }
+
     connectedCallback() {
         super.connectedCallback();
         if (!this.#internalId) {
@@ -449,6 +506,7 @@ export class MerchCard extends LitElement {
         if (!this.aemFragment) {
             setTimeout(() => this.checkReady(), 0);
         }
+        this.resolveQuantityBasedPromotions();
     }
 
     disconnectedCallback() {

diff --git a/libs/features/mas/test/merch-card.test.html b/libs/features/mas/test/merch-card.test.html
@@ -832,8 +832,30 @@ <h4 slot="body-xxs">Desktop + Mobile</h4>
                 </div>
             </merch-card>
         </div>
-</div>
 
+        <div class="one-merch-card inline-heading quantity-based-promotion">
+            <merch-card variant="plans" badge-color="#EDCC2D" badge-background-color="#000000" badge-text=" Best value" secure-label="Secure Transaction" checkbox-label="Add a 30-day free trial of Adobe Stock.*" stock-offer-osis="stock-puf,stock-abm,stock-m2m">
+                <merch-icon slot="icons" size="l" src="/test/mocks/img/creative-cloud.svg" alt="Creative Cloud All Apps"></merch-icon>
+                <h4 slot="heading-xs">Creative Cloud All Apps</h4>
+                <h3 slot="heading-m">
+                    <span is="inline-price" data-promotion-code="TEST_PROMO" data-display-per-unit="false" data-display-recurrence="true" data-display-tax="false" data-wcs-osi="m2m"></span>
+                </h3>
+                <p slot="body-xxs" id="individuals2">Desktop</p>
+                <div slot="body-xs">
+                    <p>Get 20+ Creative Cloud apps including Photoshop, Illustrator, Adobe Express, Premiere Pro, and Acrobat Pro. (Substance 3D apps are not included.)</p>
+                    <p><a href="https://adobe.com">See plans & pricing details</a></p>
+                </div>
+                <div slot="quantity-select">
+                    <merch-quantity-select title="Number of licenses" min="1" max="10" step="1" default-value="2" max-input="180"></merch-quantity-select>
+                </div>
+                <div slot="footer">
+                    <a is="checkout-link" href="#" class="con-button blue active no-promo" data-wcs-osi="m2m">Save now</a>
+                    <a is="checkout-link" href="#" data-promotion-code="OTHER_TEST_PROMO" class="con-button blue active other-promo" data-wcs-osi="m2m">Save now</a>
+                    <a is="checkout-link" href="#" data-promotion-code="TEST_PROMO" class="con-button blue active has-promo" data-wcs-osi="m2m">Save now</a>
+                </div>
+            </merch-card>
+        </div>
+        </div>
     </main>
 </body>
 </html>
diff --git a/libs/features/mas/test/merch-card.test.html.js b/libs/features/mas/test/merch-card.test.html.js
@@ -9,6 +9,7 @@ import { mockFetch } from './mocks/fetch.js';
 import { delay } from './utils.js';
 import { mockIms } from './mocks/ims.js';
 import { withWcs } from './mocks/wcs.js';
+import { EVENT_MERCH_QUANTITY_SELECTOR_CHANGE } from '../src/constants';
 
 const skipTests = sessionStorage.getItem('skipTests');
 
@@ -82,6 +83,49 @@ runTests(async () => {
             const button = plansCard.querySelector('.con-button');
             expect(button.getAttribute('data-quantity')).to.equal('1');
         });
+
+        it('should support quantity based promotions', async () => {
+            const card = document.querySelector('.quantity-based-promotion merch-card');
+            const button = card.querySelector('.con-button.has-promo');
+            const buttonNoPromo = card.querySelector('.con-button.no-promo');
+            const buttonOtherPromo = card.querySelector('.con-button.other-promo');
+            const quantitySelect = card.querySelector('merch-quantity-select');
+            expect(quantitySelect).to.exist;
+            await quantitySelect.updateComplete;
+
+            expect(card.price.dataset.promotionCode).to.be.undefined;
+            expect(button.getAttribute('data-promotion-code')).to.be.null;
+            expect(buttonNoPromo.getAttribute('data-promotion-code')).to.be.null;
+            expect(buttonOtherPromo.getAttribute('data-promotion-code')).to.equal('OTHER_TEST_PROMO');
+
+            quantitySelect.dispatchEvent(new CustomEvent(
+                EVENT_MERCH_QUANTITY_SELECTOR_CHANGE,
+                {
+                    detail: { option: 4 },
+                    bubbles: true,
+                },
+            ));
+
+            await delay(100);
+            expect(button.getAttribute('data-promotion-code')).to.equal('TEST_PROMO');
+            expect(buttonNoPromo.getAttribute('data-promotion-code')).to.be.null;
+            expect(buttonOtherPromo.getAttribute('data-promotion-code')).to.equal('OTHER_TEST_PROMO');
+            expect(card.price.dataset.promotionCode).to.equal('TEST_PROMO');
+
+            quantitySelect.dispatchEvent(new CustomEvent(
+                EVENT_MERCH_QUANTITY_SELECTOR_CHANGE,
+                {
+                    detail: { option: 2 },
+                    bubbles: true,
+                },
+            ));
+
+            await delay(100);
+            expect(button.getAttribute('data-promotion-code')).to.be.null;
+            expect(buttonNoPromo.getAttribute('data-promotion-code')).to.be.null;
+            expect(buttonOtherPromo.getAttribute('data-promotion-code')).to.equal('OTHER_TEST_PROMO');
+            expect(card.price.dataset.promotionCode).to.be.undefined;
+        });
     });
 
     it('should return title for segment card', async () => {

diff --git a/libs/features/mas/test/mocks/offers.json b/libs/features/mas/test/mocks/offers.json
@@ -139,7 +139,19 @@
           "offerType": "BASE",
           "pricePoint": "REGULAR",
           "language": "MULT",
-          "merchant": "ADOBE"
+          "merchant": "ADOBE",
+          "promotion": {
+              "id": "7d221764-f6c4-461a-9f3b-9674d1a33699",
+              "promotionCode": "TEST_PROMO",
+              "start": "2024-04-30T07:00:00.000Z",
+              "end": "2186-05-01T06:59:00.000Z",
+              "displaySummary": {
+                  "outcomeType": "PERCENTAGE_DISCOUNT",
+                  "duration": "P1Y",
+                  "amount": 13.0,
+                  "minProductQuantity": 3
+              }
+          }
       }
   ],
   "20gb-mult": [