[MT-5280] Feature - Implement banner on preview newsrooms

.nvmrc

@@ -1 +1 @@
-v16.14.2
+v16

package.json

@@ -48,7 +48,7 @@
     "react-dom": "^17.x || ^18.x"
   },
   "dependencies": {
-    "@prezly/sdk": "^6.24.0",
+    "@prezly/sdk": "^7.3.0",
     "@react-hookz/web": "^14.2.2",
     "next-seo": "^5.4.0",
     "parse-data-url": "^4.0.1"

src/__mocks__/languages.ts

@@ -48,6 +48,7 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
             subscribe_disclaimer:
                 '<p>Door uw abonnement te bevestigen, bevestigt u dat u begrijpt dat u zich registreert om materiaal te ontvangen en dat uw gegevens veilig worden verwerkt en opgeslagen.</p>',
         },
+        notifications: [],
     },
     nl_NL: {
         code: 'nl_NL',
@@ -88,6 +89,7 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
             cookie_statement: '',
             subscribe_disclaimer: '',
         },
+        notifications: [],
     },
     en: {
         code: 'en',
@@ -134,6 +136,7 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
             subscribe_disclaimer:
                 '<p>By confirming your subscription you are confirming you understand that you are registering to receive content and consent to your information being securely processed and stored.</p>',
         },
+        notifications: [],
     },
     en_US: {
         code: 'en_US',
@@ -180,6 +183,7 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
             subscribe_disclaimer:
                 '<p>By confirming your subscription you are confirming you understand that you are registering to receive content and consent to your information being securely processed and stored.</p>',
         },
+        notifications: [],
     },
     en_GB: {
         code: 'en_GB',
@@ -226,6 +230,7 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
             subscribe_disclaimer:
                 '<p>By confirming your subscription you are confirming you understand that you are registering to receive content and consent to your information being securely processed and stored.</p>',
         },
+        notifications: [],
     },
     fr: {
         code: 'fr',
@@ -272,6 +277,7 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
             subscribe_disclaimer:
                 '<p>En confirmant votre inscription, vous confirmez que vous comprenez que vous vous inscrivez pour recevoir du contenu, et consentez à ce que vos données personnelles soient traitées et stockées en toute sécurité.</p>',
         },
+        notifications: [],
     },
     fr_BE: {
         code: 'fr_BE',
@@ -318,6 +324,7 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
             subscribe_disclaimer:
                 '<p>En confirmant votre inscription, vous confirmez que vous comprenez que vous vous inscrivez pour recevoir du contenu, et consentez à ce que vos données personnelles soient traitées et stockées en toute sécurité.</p>',
         },
+        notifications: [],
     },
     es_ES: {
         code: 'es_ES',
@@ -361,6 +368,7 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
             subscribe_disclaimer:
                 '<p>Al confirmar su suscripción, confirma que entiende que se está registrando para recibir contenido y accede a que su información se procese y guarde de manera segura.</p>',
         },
+        notifications: [],
     },
     es_419: {
         code: 'es_419',
@@ -404,5 +412,6 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
             subscribe_disclaimer:
                 '<p>Al confirmar su suscripción, confirma que entiende que se está registrando para recibir contenido y accede a que su información se procese y guarde de manera segura.</p>',
         },
+        notifications: [],
     },
 };

src/__mocks__/story.ts

@@ -1,5 +1,6 @@
 import type { ExtendedStory } from '@prezly/sdk';
 import {
+    NewsroomStatus,
     StoryLifecycleStatus,
     StoryPublicationStatus,
     StoryVisibility,
@@ -68,6 +69,7 @@ export const STORY: ExtendedStory = {
         thumbnail_url:
             'https://avatars-cdn.prezly.com/newsroom/12698/e4939974b7781d4c61e282713116690387e9b7b1f6302478b13b68e18e0d3055?t=1648556918&v=1',
         timezone: 'europe/london',
+        status: NewsroomStatus.ACTIVE,
         is_active: true,
         is_archived: false,
         is_online: true,
@@ -77,7 +79,6 @@ export const STORY: ExtendedStory = {
         url: 'https://the-good-news-room.prezly.com/',
         links: {
             media_gallery_api: 'https://api.prezly.com/v1/rooms/12698/media',
-            room_contacts_api: 'https://api.prezly.com/v1/rooms/12698/contacts',
             analytics_and_visibility_settings:
                 'https://rock.prezly.com/pressroom/the-good-news-room/ga',
             categories_management:
@@ -178,6 +179,7 @@ export const STORY: ExtendedStory = {
                 thumbnail_url:
                     'https://avatars-cdn.prezly.com/newsroom/12698/e4939974b7781d4c61e282713116690387e9b7b1f6302478b13b68e18e0d3055?t=1648556918&v=1',
                 timezone: 'europe/london',
+                status: NewsroomStatus.ACTIVE,
                 is_active: true,
                 is_archived: false,
                 is_online: true,
@@ -187,7 +189,6 @@ export const STORY: ExtendedStory = {
                 url: 'https://the-good-news-room.prezly.com/',
                 links: {
                     media_gallery_api: 'https://api.prezly.com/v1/rooms/12698/media',
-                    room_contacts_api: 'https://api.prezly.com/v1/rooms/12698/contacts',
                     analytics_and_visibility_settings:
                         'https://rock.prezly.com/pressroom/the-good-news-room/ga',
                     categories_management:
@@ -277,6 +278,7 @@ export const STORY: ExtendedStory = {
                 thumbnail_url:
                     'https://avatars-cdn.prezly.com/newsroom/12698/e4939974b7781d4c61e282713116690387e9b7b1f6302478b13b68e18e0d3055?t=1648556918&v=1',
                 timezone: 'europe/london',
+                status: NewsroomStatus.ACTIVE,
                 is_active: true,
                 is_archived: false,
                 is_online: true,
@@ -286,7 +288,6 @@ export const STORY: ExtendedStory = {
                 url: 'https://the-good-news-room.prezly.com/',
                 links: {
                     media_gallery_api: 'https://api.prezly.com/v1/rooms/12698/media',
-                    room_contacts_api: 'https://api.prezly.com/v1/rooms/12698/contacts',
                     analytics_and_visibility_settings:
                         'https://rock.prezly.com/pressroom/the-good-news-room/ga',
                     categories_management:

src/data-fetching/api/PrezlyApi.ts

@@ -13,6 +13,7 @@ import {
     getDefaultLanguage,
     getLanguageFromNextLocaleIsoCode,
     getLanguageFromStory,
+    getNotifications,
     LocaleObject,
 } from '../../intl';
 import type { PageProps, ServerSidePageProps } from '../../types';
@@ -273,6 +274,7 @@ export class PrezlyApi {
         // TODO: if no information given for current language, show boilerplate from default language
         const companyInformation = getCompanyInformation(languages, locale);
 
+        const notifications = getNotifications(languages, locale);
         const algoliaSettings = getAlgoliaSettings(request);
 
         return {
@@ -282,6 +284,7 @@ export class PrezlyApi {
                 categories,
                 languages,
                 localeCode,
+                notifications,
                 themePreset,
                 algoliaSettings,
             },

src/intl/languages.ts

@@ -168,7 +168,17 @@ export function getCompanyInformation(languages: NewsroomLanguageSettings[], loc
 }
 
 /**
- * Get shortest locale code possible from full locale code
+ * Get newsroom notifications for the selected locale
+ */
+export function getNotifications(languages: NewsroomLanguageSettings[], locale: LocaleObject) {
+    const currentLanguage =
+        getLanguageByExactLocaleCode(languages, locale) || getDefaultLanguage(languages);
+
+    return currentLanguage.notifications;
+}
+
+/**
+ * Get the shortest locale code possible from full locale code
  * First: try shorting to neutral language code (there should be no locales with the same language code)
  * Then: try shorting to region code (there should be no locales with the same region code)
  * Finally: return the original locale code (shorting is not possible)

src/newsroom-context/context.tsx

@@ -6,6 +6,7 @@ import type {
     NewsroomContact,
     NewsroomLanguageSettings,
     NewsroomThemePreset,
+    Notification,
 } from '@prezly/sdk';
 import type { PropsWithChildren } from 'react';
 import { createContext, useMemo } from 'react';
@@ -47,6 +48,10 @@ export interface NewsroomContextType {
      * Currently chosen locale
      */
     locale: LocaleObject;
+    /**
+     * Newsroom user-facing notifications (usually displayed as top-edge banners)
+     */
+    notifications: Notification[];
     /**
      * Theme settings as set in the Prezly app.
      * You need to provide `PREZLY_THEME_UUID` in environment variables in order for the preset to be loaded.
@@ -78,6 +83,7 @@ export function NewsroomContextProvider({
     companyInformation,
     languages,
     localeCode,
+    notifications,
     themePreset,
     algoliaSettings,
     children,
@@ -98,6 +104,7 @@ export function NewsroomContextProvider({
                 companyInformation,
                 languages,
                 locale,
+                notifications,
                 themePreset,
                 algoliaSettings,
             }}