remove gallery, add commerce env switch

adobecom · Dec 16, 2024 · 9e13ffd · 9e13ffd
1 parent 75ccf9a
commit 9e13ffd
Show file tree

Hide file tree

Showing 12 changed files with 384 additions and 476 deletions.
diff --git a/README.md b/README.md
@@ -28,13 +28,6 @@ aem up --port 6456
 ```
 and access studio at http://localhost:3000/studio.html?milolibs=local
 
-to test gallery:
-1. shut down npm run studio if you were running it.
-2.
-```
-npm run gallery
-```
-
 Refer to the corresponding README.md under any of the packages:
 * studio - M@S Studio for creating, updating and publishing merch fragments
 * ost-audit - crawls EDS pages HTML for OST links and generates a CSV report

diff --git a/gallery/ccd.html b/gallery/ccd.html
diff --git a/gallery/styles.css b/gallery/styles.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,8 +12,7 @@
         "test": "npm run test:ci --workspaces",
         "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"
+        "studio:qa": "cd studio && npm run proxy:qa & aem up"
     },
     "repository": {
         "type": "git",
@@ -61,6 +60,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",
         "prosemirror-commands": "^1.6.1",
         "prosemirror-example-setup": "^1.2.3",

diff --git a/studio.html b/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) {
@@ -62,7 +62,6 @@
         <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 +107,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>

diff --git a/studio/libs/swc.js b/studio/libs/swc.js
diff --git a/studio/src/events.js b/studio/src/events.js
@@ -15,3 +15,4 @@ export const EVENT_KEYDOWN = 'keydown';
 export const EVENT_KEYUP = 'keyup';
 
 export const EVENT_FRAGMENT_CHANGE = 'fragment:change';
+export const EVENT_COMMERCE_TOGGLE = 'commerce:toggle';
diff --git a/studio/src/mas-top-nav.js b/studio/src/mas-top-nav.js
@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { EVENT_COMMERCE_TOGGLE } from './events.js';
 
 const EnvColorCode = {
     proxy: 'gray',
@@ -8,12 +9,14 @@ const EnvColorCode = {
 };
 class MasTopNav extends LitElement {
     static properties = {
-        env: { type: String },
+        aemEnv: { type: String, attribute: 'aem-env' },
+        commerceEnv: { type: String, attribute: 'commerce-env' },
     };
 
     constructor() {
         super();
-        this.env = 'prod';
+        this.aemEnv = 'prod';
+        this.commerceEnv = 'prod';
     }
 
     get envIndicator() {
@@ -53,7 +56,23 @@ class MasTopNav extends LitElement {
         `;
     }
 
+    toggleCommerce(e) {
+        e.preventDefault();
+        this.dispatchEvent(
+            new CustomEvent(EVENT_COMMERCE_TOGGLE, {
+                bubbles: true,
+                composed: true,
+            }),
+        );
+    }
+
     render() {
+        const commerceEnvSwitch =
+            this.commerceEnv === 'stage'
+                ? html`<sp-switch label="Switch" checked>
+                      Stage Commerce
+                  </sp-switch>`
+                : html`<sp-switch label="Switch"> Stage Commerce </sp-switch>`;
         return html`
             <sp-top-nav>
                 <sp-top-nav-item
@@ -81,13 +100,16 @@ class MasTopNav extends LitElement {
                     </svg>
                     <strong>Merch @ Scale Studio</strong>
                 </sp-top-nav-item>
-                <sp-top-nav-item href="#" label="Help" placement="bottom-end">
-                    <sp-badge size="s" variant="${this.envIndicator}">${this.env}</sp-badge>
+                <sp-top-nav-item href="#" label="Odin Env" placement="bottom-end">
+                    <sp-badge size="s" variant="${this.envIndicator}">${this.aemEnv}</sp-badge>
+                </sp-top-nav-item>
+                <sp-top-nav-item href="#" label="Commerce Env" placement="bottom-end" @click="${this.toggleCommerce}">
+                    ${commerceEnvSwitch}
                 </sp-top-nav-item>
                 <sp-top-nav-item href="#" label="Help" placement="bottom-end">
                     <sp-icon-help-outline></sp-icon-help-outline>
                 </sp-top-nav-item>
-                <sp-top-nav-item href="#" label="Help" placement="bottom-end">
+                <sp-top-nav-item href="#" label="Notifications" placement="bottom-end">
                     <sp-icon-bell></sp-icon-bell>
                     <sp-top-nav-item
                         href="#"

diff --git a/studio/src/maslib.js b/studio/src/maslib.js
@@ -1,5 +1,6 @@
 const PARAM_MILO_LIBS = 'milolibs';
 const PARAM_AEM_ENV = 'aem.env';
+const PARAM_COMMERCE_ENV = 'commerce.env';
 const searchParams = new URLSearchParams(window.location.search);
 const getMiloLibs = () => {
     const milolibs = searchParams?.get(PARAM_MILO_LIBS);
@@ -16,46 +17,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();
diff --git a/studio/src/studio.js b/studio/src/studio.js
@@ -1,5 +1,5 @@
 import { html, LitElement, nothing } from 'lit';
-import { EVENT_CHANGE, EVENT_SUBMIT } from './events.js';
+import { EVENT_CHANGE, EVENT_SUBMIT, EVENT_COMMERCE_TOGGLE } from './events.js';
 import { deeplink, pushState } from './deeplink.js';
 import './editor-panel.js';
 import './editors/merch-card-editor.js';
@@ -24,11 +24,13 @@ class MasStudio extends LitElement {
         variant: { type: String, state: true },
         newFragment: { type: Object, state: true },
         showEditorPanel: { type: Boolean, state: true },
+        commerceEnv: { type: String, attribute: 'commerce-env' },
     };
 
     constructor() {
         super();
         this.bucket = '';
+        this.commerceEnv = 'prod';
         this.newFragment = null;
         this.variant = 'all';
         this.searchText = '';
@@ -72,6 +74,19 @@ class MasStudio extends LitElement {
         this.addEventListener('select-fragment', (e) =>
             this.handleOpenFragment(e),
         );
+
+        this.addEventListener(EVENT_COMMERCE_TOGGLE, () => {
+            this.commerceEnv = this.commerceEnv === 'stage' ? 'prod' : 'stage';
+            const service = this.querySelector('mas-commerce-service');
+            const newService = service.cloneNode(true);
+            newService.setAttribute('env', this.commerceEnv);
+            service.remove();
+            this.prepend(newService);
+            // update url
+            const url = new URL(window.location.href);
+            url.searchParams.set('commerce.env', this.commerceEnv);
+            window.history.pushState({}, '', url);
+        });
     }
 
     disconnectedCallback() {
@@ -119,7 +134,7 @@ class MasStudio extends LitElement {
         return this.source?.fragment;
     }
 
-    get env() {
+    get aemEnv() {
         return BUCKET_TO_ENV[this.bucket] || 'proxy';
     }
 
@@ -192,7 +207,13 @@ class MasStudio extends LitElement {
 
     render() {
         return html`
-            <mas-top-nav env="${this.env}"></mas-top-nav>
+            <mas-commerce-service
+                env="${this.commerceEnv}"
+            ></mas-commerce-service>
+            <mas-top-nav
+                aem-env="${this.aemEnv}"
+                commerce-env="${this.commerceEnv}"
+            ></mas-top-nav>
             <side-nav></side-nav>
             ${this.content}${this.editorPanel} ${this.toast}
             ${this.loadingIndicator}

diff --git a/studio/src/swc.js b/studio/src/swc.js
@@ -1,4 +1,3 @@
-
 import '@spectrum-web-components/action-bar/sp-action-bar.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/action-group/sp-action-group.js';
@@ -88,3 +87,4 @@ import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import '@spectrum-web-components/top-nav/sp-top-nav-item.js';
 import '@spectrum-web-components/top-nav/sp-top-nav.js';
 import '@spectrum-web-components/underlay/sp-underlay.js';
+import '@spectrum-web-components/switch/sp-switch.js';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,4 @@ export const EVENT_KEYDOWN = 'keydown';
		export const EVENT_KEYUP = 'keyup';

		export const EVENT_FRAGMENT_CHANGE = 'fragment:change';
		export const EVENT_COMMERCE_TOGGLE = 'commerce:toggle';