[Refactor] Support Incito3 offer click

Author: jrlarano

lib/kits/core-ui/components/common/offer-overview.ts

@@ -202,11 +202,25 @@ const OfferOverview = ({
             const priceCurrency =
                 offer.currency_code || offer.pricing?.currency || currency;
 
+            const totalQuantityByOffer = getTotalQuantityByOffer(
+                storedPublicationOffers,
+                product.id
+            );
+
+            console.log('offer product:', offer, product);
+
+            const productPrice = calculateProductPrice(
+                matchingOffer || product,
+                totalQuantityByOffer
+            );
+
             return {
                 ...product,
                 link: product.link || offer.webshop_link,
                 price,
-                formattedPrice: formatPrice(price, localeCode, priceCurrency),
+                formattedPrice: productPrice
+                    ? formatPrice(productPrice, localeCode, priceCurrency)
+                    : null,
                 currency: priceCurrency,
                 quantity: matchingOffer ? matchingOffer.quantity : 0
             };
@@ -224,7 +238,6 @@ const OfferOverview = ({
         const {localeCode, currency, priceFrom} = translations;
         const {offer: incitoOffer} = await fetchOffer({viewId, publicationId});
         offer = incitoOffer;
-        offer.products = transformProducts(offer, products);
 
         if (products?.length > 1) {
             offer.products = transformProducts(offer, products);
@@ -243,7 +256,7 @@ const OfferOverview = ({
             offer.hideOfferDetails = true;
         }
 
-        const hasPriceFrom = products.some((product, i, arr) => {
+        const hasPriceFrom = products?.some((product, i, arr) => {
             if (i === 0) return false;
             return product.price !== arr[i - 1].price;
         });

lib/kits/core-ui/components/helpers/component.ts

@@ -426,7 +426,9 @@ export const closeSidebar = () => {
 export const displayOfferMessage = (viewId, message) => {
     if (!message) return;
 
-    const offerContainer = document.querySelector(`[data-id="${viewId}"]`);
+    const offerContainer = document.querySelector(
+        `[data-id="${viewId}"][data-role="offer"][style]:not([style=""])`
+    );
     const existingOverlayEl = offerContainer?.querySelector(
         '.sgn-offer-link-overlay'
     );
@@ -462,7 +464,7 @@ export const getLocaleCode = (countryId: string): string => {
 
 export const calculateProductPrice = (offer, totalQuantityByOffer = 1) => {
     let productPrice = 0;
-    const offerPrice = offer.pricing.price; // Individual price per piece
+    const offerPrice = offer?.pricing?.price || offer?.price; // Individual price per piece
 
     for (let i = offer?.quantity || 1; i >= 1; i--) {
         if (offer.pieceCount?.from > 1) {

lib/kits/core-ui/incito-publication.ts

@@ -255,8 +255,9 @@ const IncitoPublication = (
     };
 
     const clickOfferCell = async (viewId, publicationId, sgnViewer) => {
-        const {products, link} =
+        const {products} =
             sgnViewer.incito?.ids?.[viewId]?.['tjek.offer.v1'] || {};
+
         dispatchOfferClickEvent({fetchOffer, viewId, publicationId, products});
 
         const shoppingBtn = options.el?.querySelector('.sgn__offer-shopping');
@@ -279,11 +280,6 @@ const IncitoPublication = (
         } else if (
             scriptEls.offerClickBehavior === 'open_webshop_link_in_tab'
         ) {
-            if (!link) {
-                displayOfferMessage(viewId, scriptEls.noOfferLinkMessage);
-                return;
-            }
-
             const newWindowRef = window.open();
             const {offer} = await fetchOffer({viewId, publicationId});
 
@@ -292,20 +288,18 @@ const IncitoPublication = (
                     newWindowRef.location = offer.webshop_link;
                 } else {
                     newWindowRef.close();
+                    displayOfferMessage(viewId, scriptEls.noOfferLinkMessage);
                 }
             }
         } else if (
             scriptEls.offerClickBehavior === 'redirect_to_webshop_link'
         ) {
-            if (!link) {
-                displayOfferMessage(viewId, scriptEls.noOfferLinkMessage);
-                return;
-            }
-
             const {offer} = await fetchOffer({viewId, publicationId});
 
             if (offer.webshop_link) {
                 location.href = offer.webshop_link;
+            } else {
+                displayOfferMessage(viewId, scriptEls.noOfferLinkMessage);
             }
         } else if (shoppingBtn) {
             const {offer} = await fetchOffer({viewId, publicationId});