Add offer description and viewerUrl

Author: jrlarano

lib/config-defaults.ts

@@ -2,3 +2,5 @@ export const coreUrl = 'https://squid-api.tjek.com';
 export const coreUrlStaging = 'https://squid-api.tjek-staging.com';
 export const eventsTrackUrl = 'https://wolf-api.tjek.com/sync';
 export const eventsTrackUrlStaging = 'https://wolf-api.tjek-staging.com/sync';
+export const viewerUrl = 'https://publication-viewer.tjek.com';
+export const viewerUrlStaging = 'https://publication-viewer.tjek-staging.com';

lib/config.ts

@@ -2,7 +2,13 @@ import MicroEvent from '../vendor/microevent';
 import * as configDefaults from './config-defaults';
 
 class Config extends MicroEvent<{change: [Record<string, any>]}> {
-    keys = ['apiKey', 'eventTracker', 'coreUrl', 'eventsTrackUrl'] as const;
+    keys = [
+        'apiKey',
+        'eventTracker',
+        'coreUrl',
+        'eventsTrackUrl',
+        'viewerUrl'
+    ] as const;
     _attrs = {...configDefaults};
 
     set(config: Record<string, any>) {

lib/kits/core-ui/list-publications.ts

@@ -21,12 +21,14 @@ const ListPublications = (
         mainContainer = '',
         apiKey,
         coreUrl,
-        eventTracker
+        eventTracker,
+        viewerUrl
     }: {
         mainContainer: string;
         apiKey: string;
         coreUrl: string;
         eventTracker: Tracker;
+        viewerUrl: string | undefined;
     }
 ) => {
     const scriptEls = {
@@ -112,7 +114,8 @@ const ListPublications = (
                     mainContainer: '#sgn-publication-viewer-container',
                     apiKey,
                     coreUrl,
-                    eventTracker
+                    eventTracker,
+                    viewerUrl
                 });
 
                 pagedPublication.setOptions({id});

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

@@ -30,12 +30,14 @@ const PagedPublication = (
         mainContainer = '',
         apiKey,
         coreUrl,
-        eventTracker
+        eventTracker,
+        viewerUrl
     }: {
         mainContainer: string;
         apiKey: string;
         coreUrl: string;
         eventTracker: Tracker;
+        viewerUrl: string | undefined;
     }
 ) => {
     let options;
@@ -161,6 +163,7 @@ const PagedPublication = (
             el: document.querySelector<HTMLDivElement>('.sgn__pp'),
             apiKey,
             coreUrl,
+            viewerUrl,
             eventTracker,
             pageId:
                 opts?.pageId ||

lib/kits/paged-publication/bootstrapper.ts

@@ -9,6 +9,7 @@ interface BootstrapperInit {
     eventTracker: Tracker;
     apiKey: string;
     coreUrl: string;
+    viewerUrl: string | undefined;
     keyboard: 'disabled' | 'enabled' | 'global';
 }
 export default class Bootstrapper {
@@ -174,11 +175,15 @@ export default class Bootstrapper {
     }
 
     fetchPageHotspotsAndDecorations = (pageId: number) => {
-        return request({
-            apiKey: this.options.apiKey,
-            coreUrl: 'https://publication-viewer.tjek.com/',
-            url: `/api/paged-publications/${this.options.id}/${pageId}`
-        });
+        if (this.options.viewerUrl) {
+            return request({
+                apiKey: this.options.apiKey,
+                coreUrl: this.options.viewerUrl,
+                url: `/api/paged-publications/${this.options.id}/${pageId}`
+            });
+        }
+
+        return false;
 
         // this.applyHotspots(hotspots);
     };

lib/kits/paged-publication/hotspots.ts

@@ -99,17 +99,21 @@ function renderHotspot(hotspot, position, contentRect, boundingRect) {
 
     if (hotspot.type === 'offer') {
         const translations = {
-            for: translate('publication_viewer_offer_price_for')
+            for: translate('publication_viewer_offer_price_for'),
+            description: translate('publication_viewer_offer_description')
         };
         const pieceCountFor =
             hotspot.offer.quantity.pieces.from > 1
                 ? `${hotspot.offer.quantity.pieces.from} ${translations.for} `
                 : '';
+        const description = hotspot.offer.description
+            ? `${translations.description}${hotspot.offer.description}`
+            : '';
 
         el.setAttribute('tabindex', '-1');
         el.setAttribute(
             'aria-label',
-            `${hotspot.offer.heading}; ${pieceCountFor}${hotspot.offer.pricing.price} ${hotspot.offer.pricing.currency};`
+            `${hotspot.offer.heading}; ${pieceCountFor}${hotspot.offer.pricing.price} ${hotspot.offer.pricing.currency}; ${description};`
         );
 
         const observer = new IntersectionObserver((entries) => {

lib/kits/paged-publication/viewer.ts

@@ -53,6 +53,7 @@ export interface V3Hotspot {
         | {
               id: string;
               name: string;
+              description: string | undefined;
           }
         | undefined;
     rotate: number | undefined;
@@ -507,6 +508,7 @@ class Viewer extends MicroEvent {
                 id: hotspot.offer?.id || '',
                 ern: '',
                 heading: hotspot.offer?.name || '',
+                description: hotspot.offer?.description || '',
                 pricing: {
                     currency: '',
                     price: 0
@@ -543,6 +545,10 @@ class Viewer extends MicroEvent {
             pageNumber
         );
 
+        if (!hotspots) {
+            return;
+        }
+
         const transformedHotspots = this.transformPageHotspotsAndDecorations(
             hotspots,
             pageNumber

lib/sgn-sdk.ts

@@ -17,7 +17,11 @@ import {
 import * as clientLocal from './storage/client-local';
 import './stylus/sgn.styl';
 import {error, isBrowser} from './util';
-import {coreUrlStaging, eventsTrackUrlStaging} from './config-defaults';
+import {
+    coreUrlStaging,
+    eventsTrackUrlStaging,
+    viewerUrlStaging
+} from './config-defaults';
 
 export const config = new Config();
 config.bind('change', (changedAttributes) => {
@@ -61,6 +65,7 @@ if (isBrowser()) {
             apiKey?: string;
             eventTracker?: Tracker;
             coreUrl?: string;
+            viewerUrl?: string;
         } = {};
 
         if (apiKey) {
@@ -69,6 +74,7 @@ if (isBrowser()) {
 
         if (isStaging) {
             scriptConfig.coreUrl = coreUrlStaging;
+            scriptConfig.viewerUrl = viewerUrlStaging;
         }
 
         if (trackId) {

locales/da_DK.ts

@@ -24,5 +24,6 @@ export default {
     publication_viewer_offer_price_from: 'Fra',
     publication_viewer_offer_price_for: 'for',
     publication_viewer_offer_valid_from: 'Gælder kun fra d. ',
+    publication_viewer_offer_description: 'Beskrivelse ',
     publication_viewer_no_product_message: 'Ingen produkt detaljer'
 };

locales/en_US.ts

@@ -24,5 +24,6 @@ export default {
     publication_viewer_offer_price_from: 'From',
     publication_viewer_offer_price_for: 'for',
     publication_viewer_offer_valid_from: 'Valid from ',
+    publication_viewer_offer_description: 'Description ',
     publication_viewer_no_product_message: 'No product details'
 };

locales/nb_NO.ts

@@ -25,5 +25,6 @@ export default {
     publication_viewer_offer_price_from: 'Fra',
     publication_viewer_offer_price_for: 'for',
     publication_viewer_offer_valid_from: 'Gjelder kun fra ',
+    publication_viewer_offer_description: 'Beskrivelse ',
     publication_viewer_no_product_message: 'Ingen produktdetalje'
 };

locales/sv_SE.ts

@@ -24,5 +24,6 @@ export default {
     publication_viewer_offer_price_from: 'Från',
     publication_viewer_offer_price_for: 'för',
     publication_viewer_offer_valid_from: 'Gäller endast fr.o.m ',
+    publication_viewer_offer_description: 'Beskrivning ',
     publication_viewer_no_product_message: 'Inga produktdetaljer'
 };