feat: locales for feature notifications

packages/portal/.env.example

@@ -183,6 +183,10 @@ OAUTH_CLIENT="YOUR_CLIENT"
 # Optional expiration date for the feature notification, after which it will no
 # longer be shown.
 # APP_FEATURE_NOTIFICATION_EXPIRATION=2022-02-22
+#
+# Optional comma-separated list of UI locales for which the feature notification
+# will be shown, and not for any others
+# APP_FEATURE_NOTIFICATION_LOCALES=en,nl
 
 # Username of the official Europeana account for published set-driven galleries.
 # APP_GALLERIES_EUROPEANA_ACCOUNT=europeana

packages/portal/nuxt.config.js

@@ -13,7 +13,8 @@ import versions from './pkg-versions.js';
 import { locales as i18nLocales } from '@europeana/i18n';
 import i18nDateTime from './src/i18n/datetime.js';
 import { exclude as i18nRoutesExclude } from './src/i18n/routes.js';
-import features, { featureIsEnabled, featureNotificationExpiration } from './src/features/index.js';
+import features, { featureIsEnabled } from './src/features/index.js';
+import { featureNotificationExpiration } from './src/features/notifications.js';
 
 import {
   nuxtRuntimeConfig as europeanaApisRuntimeConfig
@@ -70,8 +71,11 @@ export default {
       galleries: {
         europeanaAccount: process.env.APP_GALLERIES_EUROPEANA_ACCOUNT || 'europeana'
       },
-      featureNotification: process.env.APP_FEATURE_NOTIFICATION,
-      featureNotificationExpiration: featureNotificationExpiration(process.env.APP_FEATURE_NOTIFICATION_EXPIRATION),
+      featureNotification: {
+        expiration: featureNotificationExpiration(process.env.APP_FEATURE_NOTIFICATION_EXPIRATION),
+        locales: process.env.APP_FEATURE_NOTIFICATION_LOCALES?.split(','),
+        name: process.env.APP_FEATURE_NOTIFICATION
+      },
       feedback: {
         cors: {
           origin: [process.env.PORTAL_BASE_URL].concat(process.env.APP_FEEDBACK_CORS_ORIGIN?.split(',')).filter((origin) => !!origin)

packages/portal/src/components/generic/NewFeatureNotification.vue

@@ -1,6 +1,7 @@
 <template>
   <b-toast
-    id="new-feature-toast"
+    v-if="enabled"
+    :id="toastId"
     auto-hide-delay="60000"
     is-status
     no-close-button
@@ -10,12 +11,13 @@
     append-toast
     toaster="b-toaster-bottom-left-dynamic"
   >
-    <slot />
+    <p>{{ $t(`newFeatureNotification.text.${name}`) }}</p>
     <div class="d-flex justify-content-between align-items-start">
       <b-button
         class="mr-2"
         variant="outline-primary"
-        @click="hideToast"
+        data-qa="new feature dismiss"
+        @click="handleClickDismiss"
       >
         {{ $t('newFeatureNotification.dismiss') }}
       </b-button>
@@ -25,7 +27,7 @@
         :href="url"
         target="blank"
         data-qa="new feature read more"
-        @click="trackEvent('click read more')"
+        @click="handleClickReadMore"
       >
         {{ $t('newFeatureNotification.readMore') }}
       </b-button>
@@ -38,32 +40,61 @@
     name: 'NewFeatureNotification',
 
     props: {
-      url: {
+      name: {
         type: String,
-        default: null
+        required: true
       },
-      feature: {
+
+      url: {
         type: String,
         default: null
       }
     },
 
+    data() {
+      return {
+        cookieName: 'new_feature_notification',
+        matomoEvent: 'New_feature_notification',
+        toastId: 'new-feature-toast'
+      };
+    },
+
+    computed: {
+      enabled() {
+        return this.$cookies.get(this.cookieName) !== this.name;
+      }
+    },
+
     created() {
+      if (!this.enabled) {
+        return;
+      }
+
       this.trackEvent('show');
-      this.$cookies.set('new_feature_notification', this.feature, {
+
+      this.$cookies.set(this.cookieName, this.name, {
         maxAge: 2678400
       });
     },
 
     methods: {
-      hideToast() {
-        this.$bvToast.hide('new-feature-toast');
+      handleClickDismiss() {
+        this.hideToast();
         this.trackEvent('dismissed');
       },
 
+      handleClickReadMore() {
+        this.hideToast();
+        this.trackEvent('click read more');
+      },
+
+      hideToast() {
+        this.$bvToast.hide(this.toastId);
+      },
+
       trackEvent(msg) {
         if (this.$matomo) {
-          this.$matomo.trackEvent('New_feature_notification', msg, this.feature);
+          this.$matomo.trackEvent(this.matomoEvent, msg, this.name);
         }
       }
     }

packages/portal/src/features/README.md

@@ -35,8 +35,8 @@ to be shown to users, its name needs to be set in the environment variable
 
 ```js
 // src/features/notifications.js
-export default [
-  { name: 'sideFilters', url: '/blog/side-filters' }
+const features = [
+  { name: 'immersiveStories', url: '/stories' }
 ];
 ```
 

packages/portal/src/features/index.js

@@ -6,11 +6,6 @@ export const featureIsEnabled = (name) => {
   return valueIsTruthy(process.env[envKey]);
 };
 
-export const featureNotificationExpiration = (value) => {
-  const date = new Date(value);
-  return date.toString() === 'Invalid Date' ? null : date;
-};
-
 export const valueIsTruthy = (value) => Boolean(Number(value));
 
 export default () => featureToggles

packages/portal/src/features/notifications.js

@@ -1,3 +1,32 @@
-export default [
-  { name: 'trendingItems', url: '/collections#trending-items' }
+const features = [
+  { name: 'immersiveStories', url: '/stories/claude-cahun' }
 ];
+
+export const featureNotificationExpiration = (value) => {
+  const date = new Date(value);
+  return date.toString() === 'Invalid Date' ? null : date;
+};
+
+const featureNotificationExpired = (expiration) => {
+  return expiration && (Date.now() >= expiration);
+};
+
+const featureNotificationSupportsLocale = (configLocales, uiLocale) => {
+  return !configLocales || [].concat(configLocales).includes(uiLocale);
+};
+
+const findFeature = (name) => features.find((feature) => feature.name === name);
+
+export const activeFeatureNotification = ({ $config, i18n } = {}) => {
+  const config = $config?.app?.featureNotification || {};
+
+  const feature = findFeature(config.name);
+
+  const isActive = feature &&
+    !featureNotificationExpired(config.expiration) &&
+    featureNotificationSupportsLocale(config.locales, i18n?.locale);
+
+  return isActive ? feature : null;
+};
+
+export default features;

packages/portal/src/i18n/lang/en.js

@@ -959,7 +959,7 @@ export default {
     "dismiss": "Dismiss",
     "readMore": "Show me",
     "text": {
-      "trendingItems": "Discover which items capture people's attention and gain popularity in real-time. Take advantage of the chance to stay ahead of the curve - see what people view, like, curate and reuse the most right now."
+      "immersiveStories": "Our stories have a new look — read one to see."
     }
   },
   "newWindow": "opens in new window",

packages/portal/src/layouts/default.vue

@@ -40,18 +40,13 @@
         id="main"
       />
     </main>
-    <client-only
-      v-if="newFeatureNotificationEnabled"
-    >
+    <client-only>
       <NewFeatureNotification
-        :feature="featureNotification.name"
+        v-if="featureNotification"
+        :name="featureNotification.name"
         :url="featureNotification.url"
         data-qa="new feature notification"
-      >
-        <p>{{ $t(`newFeatureNotification.text.${featureNotification.name}`) }}</p>
-      </NewFeatureNotification>
-    </client-only>
-    <client-only>
+      />
       <PageFooter />
       <DebugApiRequests />
     </client-only>
@@ -79,7 +74,7 @@
   import hotjarMixin from '@/mixins/hotjar.js';
   import klaroMixin from '@/mixins/klaro.js';
   import versions from '../../pkg-versions';
-  import featureNotifications from '@/features/notifications';
+  import { activeFeatureNotification } from '@/features/notifications';
 
   export default {
     name: 'DefaultLayout',
@@ -105,10 +100,8 @@
 
     data() {
       return {
-        dateNow: Date.now(),
         enableAnnouncer: true,
-        featureNotification: featureNotifications.find(feature => feature.name === this.$config?.app?.featureNotification),
-        featureNotificationExpiration: this.$config.app.featureNotificationExpiration,
+        featureNotification: activeFeatureNotification(this.$nuxt?.context),
         hotjarId: this.$config?.hotjar?.id,
         hotjarSv: this.$config?.hotjar?.sv,
         linkGroups: {},
@@ -146,12 +139,6 @@
     computed: {
       breadcrumbs() {
         return this.$store.state.breadcrumb.data;
-      },
-
-      newFeatureNotificationEnabled() {
-        return !!this.featureNotification &&
-          (!this.featureNotificationExpiration || (this.dateNow < this.featureNotificationExpiration)) &&
-          (!this.$cookies.get('new_feature_notification') || this.$cookies.get('new_feature_notification') !== this.featureNotification.name);
       }
     },
 

packages/portal/tests/unit/components/generic/NewFeatureNotification.spec.js

@@ -6,12 +6,15 @@ import sinon from 'sinon';
 const localVue = createLocalVue();
 localVue.use(BootstrapVue);
 
-const factory = (propsData = {}) => shallowMount(NewFeatureNotification, {
+const basePropsData = { name: 'new' };
+
+const factory = (propsData = basePropsData) => shallowMount(NewFeatureNotification, {
   localVue,
   propsData,
   mocks: {
     $t: () => {},
     $cookies: {
+      get: () => null,
       set: () => {}
     },
     $matomo: {
@@ -21,39 +24,76 @@ const factory = (propsData = {}) => shallowMount(NewFeatureNotification, {
 });
 
 describe('components/generic/NewFeatureNotification', () => {
-  describe('when a url prop is passed', () => {
-    it('shows a "read more" button', () => {
-      const wrapper = factory({ url: 'https://www.example.eu' });
-      const readMoreButton = wrapper.find('[data-qa="new feature read more"]');
-      expect(readMoreButton.exists()).toBe(true);
-    });
+  afterEach(sinon.resetHistory);
+
+  it('tracks the showing of the component in matomo', () => {
+    const wrapper = factory();
+    const mtmTrackEvent = wrapper.vm.$matomo.trackEvent;
+
+    expect(mtmTrackEvent.calledWith('New_feature_notification', 'show', 'new')).toBe(true);
   });
-  describe('hideToast', () => {
-    it('hides the toast', async() => {
+
+  it('shows a "dismiss" button', () => {
+    const wrapper = factory();
+
+    const dismissButton = wrapper.find('[data-qa="new feature dismiss"]');
+
+    expect(dismissButton.exists()).toBe(true);
+  });
+
+  describe('when the "dismiss button is clicked', () => {
+    it('tracks the event in matomo', () => {
       const wrapper = factory();
-      const bvToastHide = sinon.spy(wrapper.vm.$bvToast, 'hide');
+      const mtmTrackEvent = wrapper.vm.$matomo.trackEvent;
 
-      await wrapper.vm.hideToast();
+      const dismissButton = wrapper.find('[data-qa="new feature dismiss"]');
+      dismissButton.trigger('click');
 
-      expect(bvToastHide.calledWith('new-feature-toast')).toBe(true);
+      expect(mtmTrackEvent.calledWith('New_feature_notification', 'dismissed', 'new')).toBe(true);
     });
-    it('tracks the "dismissed" event', async()  => {
+
+    it('hides the toast', () => {
       const wrapper = factory();
-      const trackEvent = sinon.spy(wrapper.vm, 'trackEvent');
+      const bvToastHide = sinon.spy(wrapper.vm.$bvToast, 'hide');
 
-      await wrapper.vm.hideToast();
+      const dismissButton = wrapper.find('[data-qa="new feature dismiss"]');
+      dismissButton.trigger('click');
 
-      expect(trackEvent.calledWith('dismissed')).toBe(true);
+      expect(bvToastHide.calledWith('new-feature-toast')).toBe(true);
     });
   });
-  describe('trackEvent', () => {
-    it('tracks a matomo event with the event type and feature name', async() => {
-      const wrapper = factory({ feature: 'organisations' });
-      const mtmTrackEvent = wrapper.vm.$matomo.trackEvent;
 
-      await wrapper.vm.trackEvent('show');
+  describe('when a url prop is passed', () => {
+    const propsData = { name: 'new', url: 'https://www.example.eu' };
+
+    it('shows a "read more" button', () => {
+      const wrapper = factory(propsData);
+
+      const readMoreButton = wrapper.find('[data-qa="new feature read more"]');
+
+      expect(readMoreButton.exists()).toBe(true);
+    });
+
+    describe('when the "read more" button is clicked', () => {
+      it('tracks the event in matomo', () => {
+        const wrapper = factory(propsData);
+        const mtmTrackEvent = wrapper.vm.$matomo.trackEvent;
+
+        const readMoreButton = wrapper.find('[data-qa="new feature read more"]');
+        readMoreButton.trigger('click');
+
+        expect(mtmTrackEvent.calledWith('New_feature_notification', 'click read more', 'new')).toBe(true);
+      });
+
+      it('hides the toast', () => {
+        const wrapper = factory(propsData);
+        const bvToastHide = sinon.spy(wrapper.vm.$bvToast, 'hide');
+
+        const readMoreButton = wrapper.find('[data-qa="new feature read more"]');
+        readMoreButton.trigger('click');
 
-      expect(mtmTrackEvent.calledWith('New_feature_notification', 'show', 'organisations')).toBe(true);
+        expect(bvToastHide.calledWith('new-feature-toast')).toBe(true);
+      });
     });
   });
 });