Initital commit

lib/kits/core-ui/components/incito-publication/main-container.styl

@@ -57,6 +57,23 @@
             &[data-role="offer"]
                 cursor pointer
 
+        .sgn-offer-link-overlay
+            position absolute
+            display flex
+            align-items center
+            justify-content center
+            text-align center
+            top 0
+            left 0
+            width 100%
+            height 100%
+            background rgba(0, 0, 0, 0.5)
+            color #ffffff
+            padding 10px
+            animation-name sgn-animate-link-overlay
+            animation-timing-function ease
+            animation-duration 1.6s
+
     &[data-component-template-disable-header="true"]
     &[data-component-template-enable-sidebar="true"]
         .incito
@@ -86,3 +103,14 @@
             font-weight bold
             letter-spacing -1px
             line-height 1
+
+
+@keyframes sgn-animate-link-overlay
+    0%
+        opacity 0
+    15%
+        opacity 1
+    85%
+        opacity 1
+    100%
+        opacity 0

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

@@ -1,3 +1,4 @@
+import Mustache from 'mustache';
 import type {IIncito} from '../../incito-browser/types';
 import * as clientLocalStorage from '../../storage/client-local';
 import {getQueryParam, on} from '../../util';
@@ -15,7 +16,8 @@ import {
     transformFilter,
     getHashFragments,
     pushQueryParam,
-    tranformWebshopLink
+    tranformWebshopLink,
+    translate
 } from './components/helpers/component';
 import MainContainer from './components/incito-publication/main-container';
 import SectionList from './components/incito-publication/section-list';
@@ -78,6 +80,11 @@ const IncitoPublication = (
         )
     };
 
+    const translations = {
+        localeCode: translate('locale_code'),
+        noOfferLinkLabel: translate('publication_viewer_no_offer_link_label')
+    };
+
     MainContainer({
         template: customTemplates.mainContainer,
         el: document.querySelector(scriptEls.mainContainer),
@@ -257,7 +264,7 @@ const IncitoPublication = (
     };
 
     const clickOfferCell = async (viewId, publicationId, sgnViewer) => {
-        const {products} =
+        const {products, link} =
             sgnViewer.incito?.ids?.[viewId]?.['tjek.offer.v1'] || {};
         dispatchOfferClickEvent({fetchOffer, viewId, publicationId, products});
 
@@ -276,6 +283,11 @@ const IncitoPublication = (
         } else if (
             scriptEls.offerClickBehavior === 'open_webshop_link_in_tab'
         ) {
+            if (link) {
+                displayNoLinkOverlay(viewId);
+                return;
+            }
+
             const newWindowRef = window.open();
             const {offer} = await fetchOffer({viewId, publicationId});
 
@@ -289,6 +301,11 @@ const IncitoPublication = (
         } else if (
             scriptEls.offerClickBehavior === 'redirect_to_webshop_link'
         ) {
+            if (!link) {
+                displayNoLinkOverlay(viewId);
+                return;
+            }
+
             const {offer} = await fetchOffer({viewId, publicationId});
 
             if (offer.webshop_link) {
@@ -300,6 +317,30 @@ const IncitoPublication = (
         }
     };
 
+    const displayNoLinkOverlay = (viewId) => {
+        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 = Mustache.render(
+                '<span>{{translations.noOfferLinkLabel}}</span>',
+                {
+                    translations
+                }
+            );
+
+            offerContainer?.appendChild(overlay);
+
+            setTimeout(function () {
+                offerContainer?.removeChild(overlay);
+            }, 1500);
+        }
+    };
+
     const addToShoppingList = (offer) => {
         const storedPublicationOffers = clientLocalStorage.get(
             'publication-saved-offers'

locales/da_DK.ts

@@ -20,5 +20,7 @@ export default {
     publication_viewer_close_label: 'Tilbage',
     publication_viewer_add_to_shopping_list: 'Tilføj til indkøbsliste',
     publication_viewer_visit_webshop_link: 'Besøg webshoplink',
-    publication_viewer_upcoming: 'Kommende'
+    publication_viewer_upcoming: 'Kommende',
+    publication_viewer_no_offer_link_label:
+        'The product is not available online. For more info please visit one of our stores.'
 };

locales/en_US.ts

@@ -20,5 +20,7 @@ export default {
     publication_viewer_close_label: 'Close',
     publication_viewer_add_to_shopping_list: 'Add to Shopping List',
     publication_viewer_visit_webshop_link: 'Visit Webshop Link',
-    publication_viewer_upcoming: 'Upcoming'
+    publication_viewer_upcoming: 'Upcoming',
+    publication_viewer_no_offer_link_label:
+        'The product is not available online. For more info please visit one of our stores.'
 };

locales/nb_NO.ts

@@ -21,5 +21,7 @@ export default {
     publication_viewer_close_label: 'Tilbake',
     publication_viewer_add_to_shopping_list: 'Legg til handleliste',
     publication_viewer_visit_webshop_link: 'Besøk nettbutikklink',
-    publication_viewer_upcoming: 'Påkommende'
+    publication_viewer_upcoming: 'Påkommende',
+    publication_viewer_no_offer_link_label:
+        'The product is not available online. For more info please visit one of our stores.'
 };

locales/sv_SE.ts

@@ -20,5 +20,7 @@ export default {
     publication_viewer_close_label: 'Tillbaka',
     publication_viewer_add_to_shopping_list: 'Lägg till inköpslista',
     publication_viewer_visit_webshop_link: 'Besök webbshoplänk',
-    publication_viewer_upcoming: 'Kommende'
+    publication_viewer_upcoming: 'Kommende',
+    publication_viewer_no_offer_link_label:
+        'The product is not available online. For more info please visit one of our stores.'
 };