MWPW-162452 OST promocode fix

package.json

@@ -13,7 +13,6 @@
         "build": "npm run build --workspaces",
         "studio": "cd studio && npm run proxy & aem up",
         "studio:qa": "cd studio && npm run proxy:qa & aem up",
-        "gallery": "cd studio && npm run proxy:publish & aem up",
         "nala": "node nala/utils/nala.run.js"
     },
     "repository": {
@@ -63,6 +62,7 @@
         "@spectrum-web-components/toast": "^0.47.2",
         "@spectrum-web-components/tooltip": "^0.47.2",
         "@spectrum-web-components/top-nav": "^0.47.2",
+        "@spectrum-web-components/switch": "^0.47.2",
         "@spectrum-web-components/tray": "^0.47.2",
         "@playwright/test": "^1.42.1",
         "prosemirror-commands": "^1.6.1",

studio.html

@@ -32,9 +32,9 @@
                 stage: 'e59471',
                 prod: 'e59433',
             };
-            const href = window.location.href;
-            const envOverride = new URL(href).searchParams.get('aem.env');
-            const isLocal = href.includes('localhost');
+            const params = new URLSearchParams(window.location.search);
+            const envOverride = params.get('aem.env');
+            const isLocal = window.location.href.includes('localhost');
             let bucket;
             let baseUrl;
             if (isLocal) {
@@ -61,8 +61,6 @@
         <link rel="stylesheet" href="./studio/ost/index.css" />
         <link rel="stylesheet" href="./studio/style.css" />
         <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css" />
-        <!-- MAS Studio Icon goes here -->
-        <mas-commerce-service></mas-commerce-service>
         <script>
             window.adobeid = {
                 api_parameters: {
@@ -108,6 +106,7 @@
                     const studio = document.createElement('mas-studio');
                     studio.setAttribute('base-url', baseUrl);
                     bucket && studio.setAttribute('aem-bucket', bucket);
+                    params.get('commerce.env') && studio.setAttribute('commerce-env', params.get('commerce.env'));
                     document.querySelector('sp-theme').appendChild(studio);
                 </script>
             </sp-theme>

studio/src/constants.js

@@ -14,6 +14,8 @@ export const CHECKOUT_CTA_TEXTS = {
     'upgrade-now': 'Upgrade now',
     'get-offer': 'Get offer',
 };
+export const WCS_LANDSCAPE_PUBLISHED = 'PUBLISHED';
+export const WCS_LANDSCAPE_DRAFT = 'DRAFT';
 
 export const ANALYTICS_LINK_IDS = [
     'learn-more',

studio/src/mas-hash-manager.js

@@ -14,6 +14,7 @@ class MasHashManager extends LitElement {
 
     filters = new StoreController(this, Store.filters);
     search = new StoreController(this, Store.search);
+    commerceEnv = new StoreController(this, Store.commerceEnv);
 
     connectedCallback() {
         super.connectedCallback();
@@ -51,6 +52,10 @@ class MasHashManager extends LitElement {
         const params = new URLSearchParams(window.location.hash.slice(1));
         setHashParams(params, this.search.value);
         setHashParams(params, this.filters.value);
+        const isCommerceStage = this.commerceEnv.value == 'stage';
+        setHashParams(params, {
+            'commerce.env': isCommerceStage ? this.commerceEnv.value : null,
+        });
         return params.toString();
     }
 

studio/src/mas-top-nav.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import Store from './store.js';
 
 const EnvColorCode = {
     proxy: 'gray',
@@ -8,16 +9,16 @@ const EnvColorCode = {
 };
 class MasTopNav extends LitElement {
     static properties = {
-        env: { type: String },
+        aemEnv: { type: String, attribute: 'aem-env' },
     };
 
     constructor() {
         super();
-        this.env = 'prod';
+        this.aemEnv = 'prod';
     }
 
     get envIndicator() {
-        return EnvColorCode[this.env];
+        return EnvColorCode[this.aemEnv];
     }
 
     static get styles() {
@@ -67,6 +68,10 @@ class MasTopNav extends LitElement {
         `;
     }
 
+    _toggleCommerce(e) {
+        Store.commerceEnv.set(e.target.checked ? 'stage' : 'prod');
+    }
+
     render() {
         return html`
             <nav>
@@ -93,8 +98,19 @@ class MasTopNav extends LitElement {
                 </a>
                 <a>
                     <sp-badge size="s" variant="${this.envIndicator}"
-                        >${this.env}</sp-badge
+                        >${this.aemEnv}</sp-badge
+                    >
+                </a>
+                <a>
+                    <sp-switch
+                        label="Switch"
+                        @change="${this._toggleCommerce}"
+                        .checked=${Store.commerceEnv.value == 'stage'
+                            ? true
+                            : false}
                     >
+                        Stage Commerce
+                    </sp-switch>
                 </a>
                 <a>
                     <sp-icon-help-outline></sp-icon-help-outline>

studio/src/maslib.js

@@ -1,5 +1,4 @@
 const PARAM_MILO_LIBS = 'milolibs';
-const PARAM_AEM_ENV = 'aem.env';
 const searchParams = new URLSearchParams(window.location.search);
 const getMiloLibs = () => {
     const milolibs = searchParams?.get(PARAM_MILO_LIBS);
@@ -16,46 +15,4 @@ const injectMasLib = () => {
     document.head.prepend(script);
 };
 
-async function replaceBodyWithUrlContent(url) {
-    try {
-        const response = await fetch(url);
-        if (!response.ok)
-            throw new Error(`HTTP error! Status: ${response.status}`);
-        const htmlText = await response.text();
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(htmlText, 'text/html');
-        const newBody = doc.body;
-        document.body.replaceWith(newBody);
-    } catch (error) {
-        console.error('Error fetching and replacing body content:', error);
-    }
-}
-
-function processGallery() {
-    if (searchParams?.get('theme')?.toLowerCase() === 'dark') {
-        document
-            .querySelectorAll('sp-theme')
-            .forEach((theme) => theme.setAttribute('color', 'dark'));
-    }
-    document.querySelectorAll('aem-fragment').forEach((fragment) => {
-        fragment.addEventListener('aem:load', (e) => {
-            const headline = e.target.closest('div').querySelector('h3');
-            if (headline) {
-                const fragmentId = e.target.data?.id;
-                const studioUrl = new URL(window.location);
-                studioUrl.pathname = '/studio.html';
-                const linkHref = `${studioUrl.toString()}#query=${fragmentId}`;
-                headline.innerHTML = `<a href="${linkHref}" target="_blank">${headline.textContent}</a>`;
-            }
-        });
-    });
-}
-
-if (window.location.href.includes('/gallery/')) {
-    await replaceBodyWithUrlContent(
-        `${miloLibs}/libs/features/mas/docs/ccd.html`,
-    );
-    processGallery();
-}
-
 injectMasLib();

studio/src/rte/ost.js

@@ -1,5 +1,10 @@
 import { html } from 'lit';
-import { CHECKOUT_CTA_TEXTS } from '../constants.js';
+import {
+    CHECKOUT_CTA_TEXTS,
+    WCS_LANDSCAPE_PUBLISHED,
+    WCS_LANDSCAPE_DRAFT,
+} from '../constants.js';
+import Store from '../store.js';
 
 let ostRoot;
 let closeFunction;
@@ -89,6 +94,7 @@ const OST_OPTION_ATTRIBUTE_MAPPING = {
     wcsOsi: 'data-wcs-osi',
     workflow: 'data-checkout-workflow',
     workflowStep: 'data-checkout-workflow-step',
+    storedPromoOverride: 'data-promotion-code',
 };
 
 export const OST_OPTION_ATTRIBUTE_MAPPING_REVERSE = Object.fromEntries(
@@ -163,6 +169,10 @@ export function getOffferSelectorTool() {
 }
 
 export function openOfferSelectorTool(offerElement) {
+    const landscape =
+        Store.commerceEnv?.value == 'stage'
+            ? WCS_LANDSCAPE_DRAFT
+            : WCS_LANDSCAPE_PUBLISHED;
     if (!ostRoot) {
         ostRoot = document.createElement('div');
         document.body.appendChild(ostRoot);
@@ -196,19 +206,24 @@ export function openOfferSelectorTool(offerElement) {
             }
         });
 
-        ['promotionCode', 'checkoutType', 'workflowStep', 'country'].forEach(
-            (key) => {
-                const value = offerSelectorPlaceholderOptions[key];
-                if (value) searchParameters.append(key, value);
-            },
-        );
+        [
+            'promotionCode', // contextual promo code (e.g. set on card/)
+            'storedPromoOverride', // promo code set directly on price/CTA
+            'checkoutType',
+            'workflowStep',
+            'country',
+        ].forEach((key) => {
+            const value = offerSelectorPlaceholderOptions[key];
+            if (value) searchParameters.append(key, value);
+        });
     }
     ostRoot.style.display = 'block';
     closeFunction = window.ost.openOfferSelectorTool({
         ...ostDefaults,
         rootElement: ostRoot,
         zIndex: 20,
         aosAccessToken,
+        landscape,
         searchParameters,
         searchOfferSelectorId,
         defaultPlaceholderOptions,

studio/src/store.js

@@ -4,6 +4,9 @@ import MasFilters from './entities/filters.js';
 import MasSearch from './entities/search.js';
 import { reactiveStore } from './reactivity/reactive-store.js';
 
+const params = Object.fromEntries(
+    new URLSearchParams(window.location.hash.slice(1)),
+);
 const initialSearch = MasSearch.fromHash();
 const initialFilters = MasFilters.fromHash();
 
@@ -32,6 +35,7 @@ const Store = {
     selecting: reactiveStore(false),
     selection: reactiveStore([]),
     currentPage: reactiveStore(initialSearch.query ? 'content' : 'splash'), // 'splash' | 'content'
+    commerceEnv: reactiveStore(params['commerce.env'] ?? 'prod'),
 };
 
 export default Store;