overlay message

tjek · Sep 11, 2024 · be7785a · be7785a
1 parent 6628907
commit be7785a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 48 deletions.
diff --git a/lib/kits/core-ui/components/common/offer-overview.ts b/lib/kits/core-ui/components/common/offer-overview.ts
@@ -8,7 +8,8 @@ import {
     getPubState,
     getPubStateMessage,
     parseDateStr,
-    updateShoppingList
+    updateShoppingList,
+    displayOfferMessage
 } from '../helpers/component';
 import {request, V2Offer} from '../../../core';
 import * as clientLocalStorage from '../../../../storage/client-local';
@@ -146,29 +147,33 @@ const OfferOverview = ({
             layoutWidth: sgnData?.incito?.root_view?.layout_width
         });
 
-        const transformedOffer =
-            type === 'paged'
-                ? await fetchOffer(offer.id)
-                : await transformIncitoOffer(offer);
-
-        const disableShoppingList = document.querySelector(
-            '.sgn__offer-shopping'
-        )
-            ? false
-            : true;
-
-        container.innerHTML = Mustache.render(template, {
-            translations,
-            label: sgnData?.details?.label,
-            disableShoppingList,
-            offer: transformedOffer,
-            showQuantityButtons:
-                !disableShoppingList || scriptEls.showQuantityButtons,
-            layoutWidth: sgnData?.incito?.root_view?.layout_width
-        });
+        try {
+            const transformedOffer =
+                type === 'paged'
+                    ? await fetchOffer(offer.id)
+                    : await transformIncitoOffer(offer);
+            const disableShoppingList = document.querySelector(
+                '.sgn__offer-shopping'
+            )
+                ? false
+                : true;
+
+            container.innerHTML = Mustache.render(template, {
+                translations,
+                label: sgnData?.details?.label,
+                disableShoppingList,
+                offer: transformedOffer,
+                showQuantityButtons:
+                    !disableShoppingList || scriptEls.showQuantityButtons,
+                layoutWidth: sgnData?.incito?.root_view?.layout_width
+            });
 
-        dispatchOfferClickEvent(transformedOffer);
-        addEventListeners();
+            dispatchOfferClickEvent(transformedOffer);
+            addEventListeners();
+        } catch (error) {
+            destroyModal();
+            displayOfferMessage(offer.viewId, "Couldn't fetch offer data");
+        }
     };
     const transformProducts = (offer, products) => {
         const {localeCode, currency} = translations;

diff --git a/lib/kits/core-ui/components/helpers/component.ts b/lib/kits/core-ui/components/helpers/component.ts
@@ -410,3 +410,25 @@ export const closeSidebar = () => {
         }
     }
 };
+
+export const displayOfferMessage = (viewId, message) => {
+    if (!message) return;
+
+    const offerContainer = document.querySelector(`[data-id="${viewId}"]`);
+    const existingOverlayEl = offerContainer?.querySelector(
+        '.sgn-offer-link-overlay'
+    );
+
+    if (!existingOverlayEl) {
+        const overlay = document.createElement('div');
+
+        overlay.className = 'sgn-offer-link-overlay';
+        overlay.innerHTML = `<span>${message}</span>`;
+
+        offerContainer?.appendChild(overlay);
+
+        setTimeout(function () {
+            offerContainer?.removeChild(overlay);
+        }, 1500);
+    }
+};
diff --git a/lib/kits/core-ui/incito-publication.ts b/lib/kits/core-ui/incito-publication.ts
@@ -17,7 +17,8 @@ import {
     pushQueryParam,
     transformWebshopLink,
     animateShoppingListCounter,
-    dispatchProductClickEvent
+    dispatchProductClickEvent,
+    displayOfferMessage
 } from './components/helpers/component';
 import MainContainer from './components/incito-publication/main-container';
 import SectionList from './components/incito-publication/section-list';
@@ -275,7 +276,7 @@ const IncitoPublication = (
             scriptEls.offerClickBehavior === 'open_webshop_link_in_tab'
         ) {
             if (!link) {
-                displayNoLinkOverlay(viewId);
+                displayOfferMessage(viewId, scriptEls.noOfferLinkMessage);
                 return;
             }
 
@@ -293,7 +294,7 @@ const IncitoPublication = (
             scriptEls.offerClickBehavior === 'redirect_to_webshop_link'
         ) {
             if (!link) {
-                displayNoLinkOverlay(viewId);
+                displayOfferMessage(viewId, scriptEls.noOfferLinkMessage);
                 return;
             }
 
@@ -308,28 +309,6 @@ const IncitoPublication = (
         }
     };
 
-    const displayNoLinkOverlay = (viewId) => {
-        if (!scriptEls.noOfferLinkMessage) return;
-
-        const offerContainer = document.querySelector(`[data-id="${viewId}"]`);
-        const existingOverlayEl = offerContainer?.querySelector(
-            '.sgn-offer-link-overlay'
-        );
-
-        if (!existingOverlayEl) {
-            const overlay = document.createElement('div');
-
-            overlay.className = 'sgn-offer-link-overlay';
-            overlay.innerHTML = `<span>${scriptEls.noOfferLinkMessage}</span>`;
-
-            offerContainer?.appendChild(overlay);
-
-            setTimeout(function () {
-                offerContainer?.removeChild(overlay);
-            }, 1500);
-        }
-    };
-
     const addToShoppingList = (offer) => {
         const storedPublicationOffers =
             clientLocalStorage.get('publication-saved-offers') || [];