Add recommendations announcement

Author: marcellamaki

contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue

@@ -5,6 +5,22 @@
     fluid
     class="ma-0 main pa-0 panel"
   >
+    <AiRecommendationsBanner
+      v-if="canEdit"
+      :dismissible="true"
+      class="recommendations-announcement"
+    >
+      <KRouterLink
+        appearance="flat-button"
+        :primary="true"
+        :to="importFromChannelsRoute"
+        class="recommendations-announcement-cta"
+        @click="trackClickEvent('View recommendations')"
+      >
+        {{ searchRecommendationsStrings.viewRecommendationsButton$() }}
+      </KRouterLink>
+    </AiRecommendationsBanner>
+
     <!-- Breadcrumbs -->
     <VToolbar
       dense
@@ -306,6 +322,8 @@
   import { DraggableTypes, DropEffect } from 'shared/mixins/draggable/constants';
   import { DraggableFlags } from 'shared/vuex/draggablePlugin/module/constants';
   import DraggableRegion from 'shared/views/draggable/DraggableRegion';
+  import { searchRecommendationsStrings } from 'shared/strings/searchRecommendationsStrings';
+  import AiRecommendationsBanner from 'shared/views/AiRecommendationsBanner';
 
   export default {
     name: 'CurrentTopicView',
@@ -320,8 +338,12 @@
       MoveModal,
       DraggableRegion,
       InheritAncestorMetadataModal,
+      AiRecommendationsBanner,
     },
     mixins: [titleMixin, routerMixin],
+    setup() {
+      return { searchRecommendationsStrings };
+    },
     props: {
       topicId: {
         type: String,
@@ -1075,4 +1097,12 @@
     flex-shrink: 0;
   }
 
+  .recommendations-announcement {
+    margin: 24px 36px;
+  }
+
+  .recommendations-announcement-cta {
+    margin-top: 12px;
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelList/views/Channel/StudioChannelsPage/index.vue

@@ -1,6 +1,7 @@
 <template>
 
   <div class="channels-page">
+    <AiRecommendationsBanner class="recommendations-announcement" />
     <StudioRaisedBox
       v-if="invitations.length"
       class="invitations"
@@ -56,12 +57,14 @@
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import ChannelInvitation from '../ChannelInvitation';
   import StudioRaisedBox from 'shared/views/StudioRaisedBox';
+  import AiRecommendationsBanner from 'shared/views/AiRecommendationsBanner';
 
   export default {
     name: 'StudioChannelsPage',
     components: {
       ChannelInvitation,
       StudioRaisedBox,
+      AiRecommendationsBanner,
     },
     setup() {
       const { windowBreakpoint } = useKResponsiveWindow();
@@ -129,6 +132,7 @@
 
   .channels-page {
     padding-bottom: 24px;
+    margin: auto;
   }
 
   .channels,
@@ -138,6 +142,7 @@
   }
 
   .invitations {
+    margin-top: 24px; // added for space between search recs announcement and invitations box
     margin-bottom: 24px;
   }
 
@@ -149,4 +154,9 @@
     margin-top: 16px;
   }
 
+  .recommendations-announcement {
+    max-width: 900px;
+    margin: auto;
+  }
+
 </style>

contentcuration/contentcuration/frontend/shared/strings/searchRecommendationsStrings.js

@@ -1,6 +1,19 @@
 import { createTranslator } from 'shared/i18n';
 
 export const searchRecommendationsStrings = createTranslator('SearchRecommendationsStrings', {
+  trySearchRecommendationsHeader: {
+    message: "Try our new 'Recommendations' feature!",
+    context: 'Header for a banner announcing the new recommendations feature',
+  },
+  trySearchRecommendationsText: {
+    message:
+      "Based on the title and descriptions of your folders, we'll suggest content from the Kolibri Library. Choose 'Import from channels' in any channel folder to see your recommendations.",
+    context: 'Body text for a banner announcing the new recommendations feature',
+  },
+  viewRecommendationsButton: {
+    message: 'View recommendations',
+    context: 'Label for a button that takes the user to the recommendations feature',
+  },
   aboutRecommendationsText: {
     message: 'About recommendations',
     context: 'A title that introduces how the recommendation system works',

contentcuration/contentcuration/frontend/shared/views/AiRecommendationsBanner.vue

@@ -0,0 +1,124 @@
+<template>
+
+  <StudioBanner
+    v-if="!dismissed"
+    :style="{
+      backgroundColor: $themePalette.blue.v_100,
+      padding: '20px',
+      gap: '20px',
+      borderRadius: '4px',
+    }"
+  >
+    <template #icon>
+      <div
+        class="icon-wrapper"
+        :style="{ backgroundColor: $themePalette.blue.v_200 }"
+      >
+        <KIcon
+          icon="library"
+          class="icon"
+          :color="$themePalette.white"
+          :style="{ backgroundColor: $themePalette.blue.v_400 }"
+        />
+      </div>
+    </template>
+
+    <div class="content">
+      <div class="text">
+        <h2>
+          {{ searchRecommendationsStrings.trySearchRecommendationsHeader$() }}
+        </h2>
+        <p>
+          {{ searchRecommendationsStrings.trySearchRecommendationsText$() }}
+        </p>
+      </div>
+      <slot></slot>
+    </div>
+
+    <KIconButton
+      v-if="dismissible"
+      icon="close"
+      :tooltip="searchRecommendationsStrings.closeAction$()"
+      class="dismiss-btn"
+      @click="dismiss"
+    />
+  </StudioBanner>
+
+</template>
+
+
+<script>
+
+  import StudioBanner from 'shared/views/StudioBanner';
+  import { searchRecommendationsStrings } from 'shared/strings/searchRecommendationsStrings';
+
+  const DISMISSED_KEY = 'recommendations-announcement-dismissed';
+
+  export default {
+    name: 'AiRecommendationsBanner',
+    components: { StudioBanner },
+    setup() {
+      return { searchRecommendationsStrings };
+    },
+    props: {
+      dismissible: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        dismissed: localStorage.getItem(DISMISSED_KEY) === 'true',
+      };
+    },
+    methods: {
+      dismiss() {
+        localStorage.setItem(DISMISSED_KEY, 'true');
+        this.dismissed = true;
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .icon-wrapper {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 96px;
+    height: 96px;
+    border-radius: 2px;
+  }
+
+  .icon {
+    width: 40px;
+    height: 40px;
+    padding: 6px;
+    border-radius: 50%;
+  }
+
+  .content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: flex-end;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  h2 {
+    font-size: 18px;
+  }
+
+  .dismiss-btn {
+    flex-shrink: 0;
+    align-self: flex-start;
+  }
+
+</style>

contentcuration/contentcuration/frontend/shared/views/StudioBanner.vue

@@ -7,11 +7,13 @@
       backgroundColor: error ? $themePalette.red.v_100 : '',
     }"
   >
-    <KIcon
-      v-if="error"
-      class="icon"
-      icon="error"
-    />
+    <slot name="icon">
+      <KIcon
+        v-if="error"
+        class="icon"
+        icon="error"
+      />
+    </slot>
     <slot>
       {{ text }}
     </slot>