Merge pull request #709 from hlxsites/bundle-addto-quote

Fix to the bundle product add to quote from product hero section
hlxsites · Jan 26, 2024 · bfea526 · bfea526
2 parents 35c15ef + 3794aba
commit bfea526
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 5 deletions.
diff --git a/blocks/product-hero/product-hero.js b/blocks/product-hero/product-hero.js
@@ -1,6 +1,7 @@
 import {
   a, div, h1, p, span, hr,
 } from '../../scripts/dom-builder.js';
+import { getAuthorization, getCommerceBase } from '../../scripts/commerce.js';
 import { createOptimizedS7Picture, decorateModals, getProductResponse } from '../../scripts/scripts.js';
 
 function showImage(e) {
@@ -119,6 +120,42 @@ function addBundleDetails(title, bundleDetails) {
   return bundleProducts;
 }
 
+async function addToQuote(product) {
+  try {
+    const baseURL = getCommerceBase();
+    const authHeader = getAuthorization();
+    if (authHeader && (authHeader.has('authentication-token') || authHeader.has('Authorization'))) {
+      const quote = await fetch(`${baseURL}/rfqcart/-`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', ...Object.fromEntries(authHeader) },
+        body: JSON.stringify({
+          quantity: {
+            type: 'Quantity',
+            value: 1,
+            unit: 'N/A',
+          },
+          productSKU: product?.raw?.sku,
+          image: product?.raw?.images?.[0],
+          brand: product?.raw?.opco,
+          referrer: window.location.href,
+          referrerTitle: document.title.replace('| Danaher Lifesciences', '').replace('| Danaher Life Sciences', '').trim(),
+        }),
+      });
+      const { default: getToast } = await import('../../scripts/toast.js');
+      if (quote.status === 200) {
+        const responseJson = await quote.json();
+        const addedProduct = responseJson?.items?.slice(-1)?.at(0);
+        await getToast('quote-toast', addedProduct);
+      } else {
+        await getToast('quote-toast', null);
+      }
+    }
+  } catch (error) {
+    const { default: getToast } = await import('../../scripts/toast.js');
+    await getToast('quote-toast', null);
+  }
+}
+
 export default async function decorate(block) {
   const response = getProductResponse();
   if (response?.length > 0) {
@@ -134,7 +171,13 @@ export default async function decorate(block) {
     const rfqEl = block.querySelector('div')?.firstElementChild;
     if (rfqEl && rfqEl.textContent && rfqEl.textContent === 'Request for Quote') {
       rfqEl.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-4 py-2 !no-underline'.split(' '));
-      const rfqParent = p({ class: 'show-modal-btn lg:w-55 pt-6 cursor-pointer' }, rfqEl);
+      let rfqParent;
+      if (response[0]?.raw?.objecttype === 'Product' || response[0]?.raw?.objecttype === 'Bundle') {
+        rfqParent = p({ class: 'lg:w-55 pt-6 cursor-pointer' }, rfqEl);
+        rfqParent.addEventListener('click', () => { addToQuote(response[0]); });
+      } else {
+        rfqParent = p({ class: 'show-modal-btn lg:w-55 pt-6 cursor-pointer' }, rfqEl);
+      }
       defaultContent.append(rfqParent);
     }
 

diff --git a/scripts/toast.js b/scripts/toast.js
@@ -1,18 +1,19 @@
 import {
-  button, div, img, p,
+  button, div, img, p, span,
 } from './dom-builder.js';
+import { decorateIcons } from './lib-franklin.js';
 
 export default async function getToast(toastId, addedProduct, addEventListeners) {
   let toast = document.getElementById(toastId);
   let title = '';
   let sku = '';
   if (addedProduct?.product) title = addedProduct?.product.productName;
-  else if (addedProduct.productSKU?.trim().length > 0) {
+  else if (addedProduct?.productSKU?.trim().length > 0) {
     title = addedProduct?.referrerTitle;
   } else title = addedProduct?.productDescription;
   if (addedProduct?.product) sku = addedProduct?.product.sku;
-  else if (addedProduct.productSKU?.trim().length > 0) sku = addedProduct?.productSKU;
-  const content = div(
+  else if (addedProduct?.productSKU?.trim().length > 0) sku = addedProduct?.productSKU;
+  const content = addedProduct ? div(
     { class: 'flex w-full font-sans' },
     div(
       { class: 'flex-shrink-0 p-3' },
@@ -34,7 +35,15 @@ export default async function getToast(toastId, addedProduct, addEventListeners)
         button({ class: 'text-sm font-medium', name: 'close', type: 'button' }, 'View'),
       ),
     ),
+  ) : div(
+    { class: 'p-4 font-sans rounded-md bg-red-50' },
+    div(
+      { class: 'flex flex-1 p-1 items-center gap-2' },
+      span({ class: 'icon icon-xcircle text-red-800 w-4 h-4' }),
+      p({ class: 'text-sm font-medium text-red-800' }, 'Error adding to Quote Cart, please try again later.'),
+    ),
   );
+  decorateIcons(content);
   if (!toast) {
     const toastContent = () => div(
       { class: 'text-sm w-full font-normal break-normal font-serif tracking-wide leading-5 select-none' },

diff --git a/styles/styles.css b/styles/styles.css
@@ -5078,6 +5078,11 @@ main .default-content-wrapper ul {
     color: rgb(220 38 38 / var(--tw-text-opacity));
 }
 
+.text-red-800 {
+    --tw-text-opacity: 1;
+    color: rgb(153 27 27 / var(--tw-text-opacity));
+}
+
 .text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));