diff --git a/lib/kits/core-ui/components/common/offer-overview.ts b/lib/kits/core-ui/components/common/offer-overview.ts index 2e907432..9ee80333 100644 --- 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 index d1b54768..8bf7ed4c 100644 --- 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 = `${message}`; + + 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 index 1e341e3d..d97727f5 100644 --- 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 = `${scriptEls.noOfferLinkMessage}`; - - offerContainer?.appendChild(overlay); - - setTimeout(function () { - offerContainer?.removeChild(overlay); - }, 1500); - } - }; - const addToShoppingList = (offer) => { const storedPublicationOffers = clientLocalStorage.get('publication-saved-offers') || [];