wcs-overlay.js

let overlay = document.getElementById('wcs-osi-overlay');
if (overlay) {
  overlay.style.display = overlay.style.display === 'none' ? '' : 'none';
} else {
  const style = document.createElement('style');
  style.innerHTML = `
#wcs-osi-overlay {
position: fixed;
top: 64px;
right: 0px;
width: 600px;
height: 360px;
background-color: rgb(239 221 221);
z-index: 1000;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px;
border: 2px solid #e0e0e0;
border-radius: 8px;
}
`;

  document.head.appendChild(style);
  overlay = document.createElement('div');
  overlay.setAttribute('id', 'wcs-osi-overlay');
  document.body.appendChild(overlay);
  document.body.addEventListener('mouseover', (e) => {
    const el = e.target.closest('[data-wcs-osi].placeholder-resolved');

    if (!el) return;

    const {
      offerSelectorIds: [offerSelectorId],
      offerId,
      productArrangement: { productCode, productFamily },
      productArrangementCode,
      planType,
      offerType,
      customerSegment,
      marketSegments: [marketSegment],
      pricePoint,
      language,
      priceDetails: { taxDisplay },
    } = el.value[0];

    const { country, forceTaxExclusive } = el.options;

    overlay.innerHTML = Object.entries({
      'Offer Selector ID': `<a target="_blank" href="https://www.adobe.com/web_commerce_artifact?offer_selector_ids=${offerSelectorId}&country=${country}&language=${language}&api_key=wcms-commerce-ims-ro-user-milo&landscape=PUBLISHED">${offerSelectorId}</a>`,
      'Offer ID': `<a target="_blank" href="https://aos.adobe.io/offers/${offerId}?country=${country}&api_key=wcms-commerce-ims-user-prod&environment=PROD&landscape=PUBLISHED">${offerId}</a>`,
      'Offer Type': offerType,
      'Plan Type': planType,
      'Customer Segment': customerSegment,
      'Market Segment': marketSegment,
      'PA Code': productArrangementCode,
      'Product Code': productCode,
      'Product Family': productFamily,
      'Price Point': pricePoint,
      Language: language,
      'TAX Display': taxDisplay,
      'Force Tax Exclusive': forceTaxExclusive,
    })
      .map(
        ([key, value]) => `<div><span style="font-weight: 700;
                ">${key}:</span> ${value}</div>`,
      )
      .join('');
  });
}