Merge branch 'develop' into fix/CW-6944

app/javascript/dashboard/App.vue

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
+import StatusBanner from './components/app/StatusBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
 import vueActionCable from './helper/actionCable';
@@ -27,6 +28,7 @@ export default {
     LoadingState,
     NetworkNotification,
     UpdateBanner,
+    StatusBanner,
     PaymentPendingBanner,
     WootSnackbarBox,
     PendingEmailVerificationBanner,
@@ -137,6 +139,7 @@ export default {
     :dir="isRTL ? 'rtl' : 'ltr'"
   >
     <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
+    <StatusBanner />
     <template v-if="currentAccountId">
       <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
       <PaymentPendingBanner v-if="hideOnOnboardingView" />

app/javascript/dashboard/components-next/banner/Banner.vue

@@ -1,5 +1,3 @@
-<!-- DEPRECIATED -->
-<!-- TODO: Replace this banner component with NextBanner "app/javascript/dashboard/components-next/banner/Banner.vue" -->
 <script setup>
 import { computed } from 'vue';
 
@@ -20,11 +18,13 @@ const emit = defineEmits(['action']);
 
 const bannerClass = computed(() => {
   const classMap = {
-    slate: 'bg-n-slate-3 border-n-slate-4 text-n-slate-11',
-    amber: 'bg-n-amber-3 border-n-amber-4 text-n-amber-11',
-    teal: 'bg-n-teal-3 border-n-teal-4 text-n-teal-11',
-    ruby: 'bg-n-ruby-3 border-n-ruby-4 text-n-ruby-11',
-    blue: 'bg-n-blue-3 border-n-blue-4 text-n-blue-11',
+    slate:
+      'bg-n-slate-3 border-n-slate-4 text-n-slate-11 [&_.link]:text-n-slate-11',
+    amber:
+      'bg-n-amber-3 border-n-amber-4 text-n-amber-11 [&_.link]:text-n-amber-11',
+    teal: 'bg-n-teal-3 border-n-teal-4 text-n-teal-11 [&_.link]:text-n-teal-11',
+    ruby: 'bg-n-ruby-3 border-n-ruby-4 text-n-ruby-11 [&_.link]:text-n-ruby-11',
+    blue: 'bg-n-blue-3 border-n-blue-4 text-n-blue-11 [&_.link]:text-n-blue-11',
   };
 
   return classMap[props.color];

app/javascript/dashboard/components/app/StatusBanner.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { LocalStorage } from 'shared/helpers/localStorage';
+import MessageFormatter from 'shared/helpers/MessageFormatter';
+import Banner from 'dashboard/components-next/banner/Banner.vue';
+
+const BANNER_COLOR_MAP = {
+  info: 'blue',
+  warning: 'amber',
+  error: 'ruby',
+};
+
+const { t } = useI18n();
+const globalConfig = useMapGetter('globalConfig/get');
+
+const dismissedBannerIds = ref(
+  LocalStorage.get(LOCAL_STORAGE_KEYS.DISMISSED_PLATFORM_BANNERS) || []
+);
+
+const dismissKey = banner => `${banner.id}-${banner.updated_at}`;
+
+const visibleBanners = computed(() => {
+  const banners = globalConfig.value?.activePlatformBanners || [];
+  return banners.filter(
+    banner => !dismissedBannerIds.value.includes(dismissKey(banner))
+  );
+});
+
+const formattedMessage = message =>
+  new MessageFormatter(message).formattedMessage;
+
+const bannerColor = bannerType => BANNER_COLOR_MAP[bannerType] || 'slate';
+
+const dismissBanner = banner => {
+  const key = dismissKey(banner);
+  if (dismissedBannerIds.value.includes(key)) return;
+
+  dismissedBannerIds.value.push(key);
+  LocalStorage.set(
+    LOCAL_STORAGE_KEYS.DISMISSED_PLATFORM_BANNERS,
+    dismissedBannerIds.value
+  );
+};
+</script>
+
+<template>
+  <Banner
+    v-for="banner in visibleBanners"
+    :key="banner.id"
+    :color="bannerColor(banner.banner_type)"
+    :action-label="t('GENERAL_SETTINGS.DISMISS')"
+    class="!rounded-none !justify-center [&_.link]:underline [&_p]:m-0"
+    @action="dismissBanner(banner)"
+  >
+    <span
+      v-dompurify-html="formattedMessage(banner.banner_message)"
+      class="text-xs"
+    />
+  </Banner>
+</template>

app/javascript/dashboard/components/ui/Banner.vue

@@ -1,3 +1,5 @@
+<!-- DEPRECIATED -->
+<!-- TODO: Replace this banner component with NextBanner "app/javascript/dashboard/components-next/banner/Banner.vue" -->
 <script>
 import NextButton from 'dashboard/components-next/button/Button.vue';
 

app/javascript/dashboard/constants/localStorage.js

@@ -1,5 +1,6 @@
 export const LOCAL_STORAGE_KEYS = {
   DISMISSED_UPDATES: 'dismissedUpdates',
+  DISMISSED_PLATFORM_BANNERS: 'dismissedPlatformBanners',
   WIDGET_BUILDER: 'widgetBubble_',
   DRAFT_MESSAGES: 'draftMessages',
   COLOR_SCHEME: 'color_scheme',

app/javascript/shared/store/globalConfig.js

@@ -24,6 +24,7 @@ const {
   WIDGET_BRAND_URL: widgetBrandURL,
   DISABLE_USER_PROFILE_UPDATE: disableUserProfileUpdate,
   DEPLOYMENT_ENV: deploymentEnv,
+  ACTIVE_PLATFORM_BANNERS: activePlatformBanners,
 } = window.globalConfig || {};
 
 const state = {
@@ -49,6 +50,7 @@ const state = {
   termsURL,
   widgetBrandURL,
   isEnterprise: parseBoolean(isEnterprise),
+  activePlatformBanners: activePlatformBanners || [],
 };
 
 export const getters = {