MWPW-131015: Fix spectrum and layout issues (#721)

* MWPW-131015: Fix spectrum style issues

and improve the layout.

* MWPW-131015: Restore OST urls

* MWPW-131015: Restore merch.js

* MWPW-131015: fix price style in OST

* Update OST version

* Add token parameter support to bypass IMS

wait for IMS ready in order to prevent sign-in attempt too early.

* comment token section.

* remove gnav hiding logic via css

and use metadata for the purpose.

---------

Co-authored-by: Honwai Wong <honstar.wong@gmail.com>

libs/blocks/ost/ost.css

@@ -0,0 +1,30 @@
+body.tool-ost .ost {
+  position: fixed;
+  display: flex;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-gray-75);
+}
+
+body.tool-ost .ost>div {
+  padding: 0 20px 0 20px;
+  min-height: 900px;
+  max-height: 1400px;
+  min-width: 1200px;
+  max-width: 1800px;
+  height: 80%;
+  width: 80%;
+  border-radius: 4px;
+  border-width: 2px;
+  background-color: var(--color-gray-100);
+  border-color: var(--color-gray-200);
+  border-style: solid;
+}
+
+.price-unit-type::before {
+  content: " ";
+}

libs/blocks/ost/ost.js

@@ -2,23 +2,23 @@ import { loadScript, loadStyle } from '../../utils/utils.js';
 
 const IMS_COMMERCE_CLIENT_ID = 'aos_milo_commerce';
 const IMS_PROD_URL = 'https://auth.services.adobe.com/imslib/imslib.min.js';
-const OST_SCRIPT_URL = 'https://www.stage.adobe.com/special/tacocat/ost/lib/index.js';
-const OST_STYLE_URL = 'https://www.stage.adobe.com/special/tacocat/ost/lib/index.css';
+const OST_SCRIPT_URL = 'https://www.stage.adobe.com/special/tacocat/ost/lib/1.10.0/index.js';
+const OST_STYLE_URL = 'https://www.stage.adobe.com/special/tacocat/ost/lib/1.10.0/index.css';
+
+const ENVIRONMENT = 'PROD';
+const WCS_API_KEY = 'wcms-commerce-ims-ro-user-cc';
+const AOS_API_KEY = 'wcms-commerce-ims-user-prod';
+const CHECKOUT_CLIENT_ID = 'creative';
+
+const searchParameters = new URLSearchParams(window.location.search);
+// this is only for testing PRs where test URLs are not supported by IMS.
+const token = searchParameters.get('token');
+if (token) {
+  searchParameters.delete('token');
+}
+
+document.body.classList.add('tool', 'tool-ost');
 
-const getImsToken = async () => {
-  window.adobeid = {
-    client_id: IMS_COMMERCE_CLIENT_ID,
-    environment: 'prod',
-    scope: 'AdobeID,openid',
-  };
-  if (!window.adobeIMS) {
-    await loadScript(IMS_PROD_URL);
-  }
-  if (!window.adobeIMS.isSignedInUser()) {
-    window.adobeIMS.signIn();
-  }
-  return window.adobeIMS?.getAccessToken()?.token;
-};
 export function createLinkMarkup(
   offerSelectorId,
   type,
@@ -75,30 +75,60 @@ export function createLinkMarkup(
   return link;
 }
 
-export default async function init() {
-  const aosAccessToken = await getImsToken();
+let rootElement;
+
+function initOST({ token: aosAccessToken }) {
   const country = 'US';
   const language = 'en';
-  const environment = 'PROD';
-  const wcsApiKey = 'wcms-commerce-ims-ro-user-cc';
-  const aosApiKey = 'wcms-commerce-ims-user-prod';
-  const checkoutClientId = 'creative';
-  const rootContainer = document.querySelector('.ost');
-  const searchParameters = new URLSearchParams(window.location.search);
-  rootContainer.removeChild(rootContainer.firstElementChild);
-  if (!window.ost) {
-    loadStyle(OST_STYLE_URL);
-    await loadScript(OST_SCRIPT_URL);
+
+  const options = {
+    rootMargin: '0px',
+    threshold: 1.0,
+  };
+
+  const main = document.querySelector('main');
+  const observer = new IntersectionObserver(() => {
+    observer.unobserve(main);
+    window.ost.openOfferSelectorTool({
+      country,
+      language,
+      environment: ENVIRONMENT,
+      wcsApiKey: WCS_API_KEY,
+      aosApiKey: AOS_API_KEY,
+      aosAccessToken,
+      checkoutClientId: CHECKOUT_CLIENT_ID,
+      searchParameters,
+      createLinkMarkup,
+      rootElement,
+    });
+  }, options);
+  observer.observe(main);
+}
+
+export default async function init(el) {
+  if (rootElement) return; // only one OST is supported per page
+  el.innerHTML = '<div />';
+  rootElement = el.firstElementChild;
+
+  loadStyle(OST_STYLE_URL);
+  await loadScript(OST_SCRIPT_URL);
+  await loadStyle('https://use.typekit.net/pps7abe.css');
+  if (token) {
+    initOST({ token });
+  } else {
+    window.adobeid = {
+      client_id: IMS_COMMERCE_CLIENT_ID,
+      environment: 'prod',
+      optimizations: { fastEvents: true },
+      autoValidateToken: true,
+      scope: 'AdobeID,openid',
+      onAccessToken: initOST,
+      onReady: () => {
+        if (!window.adobeIMS.isSignedInUser()) {
+          window.adobeIMS.signIn();
+        }
+      },
+    };
+    await loadScript(IMS_PROD_URL);
   }
-  window.ost.openOfferSelectorTool({
-    country,
-    language,
-    environment,
-    wcsApiKey,
-    aosApiKey,
-    aosAccessToken,
-    checkoutClientId,
-    searchParameters,
-    createLinkMarkup,
-  });
 }