Migrate widgetPortalArticlesToPinia

app/javascript/widget/views/Home.vue

@@ -1,62 +1,26 @@
 <script>
 import TeamAvailability from 'widget/components/TeamAvailability.vue';
-import ArticleHero from 'widget/components/pageComponents/Home/Article/ArticleBlock.vue';
-import ArticleCardSkeletonLoader from 'widget/components/pageComponents/Home/Article/SkeletonLoader.vue';
 
 import { mapGetters } from 'vuex';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 import routerMixin from 'widget/mixins/routerMixin';
 import configMixin from 'widget/mixins/configMixin';
+import ArticleContainer from '../components/pageComponents/Home/Article/ArticleContainer.vue';
 
 export default {
   name: 'Home',
   components: {
-    ArticleHero,
+    ArticleContainer,
     TeamAvailability,
-    ArticleCardSkeletonLoader,
   },
   mixins: [configMixin, routerMixin],
-  setup() {
-    const { prefersDarkMode } = useDarkMode();
-    return { prefersDarkMode };
-  },
   computed: {
     ...mapGetters({
       availableAgents: 'agent/availableAgents',
       conversationSize: 'conversation/getConversationSize',
       unreadMessageCount: 'conversation/getUnreadMessageCount',
-      popularArticles: 'article/popularArticles',
-      articleUiFlags: 'article/uiFlags',
     }),
-    widgetLocale() {
-      return this.$i18n.locale || 'en';
-    },
-    portal() {
-      return window.chatwootWebChannel.portal;
-    },
-    defaultLocale() {
-      const widgetLocale = this.widgetLocale;
-      const { allowed_locales: allowedLocales, default_locale: defaultLocale } =
-        this.portal.config;
+  },
 
-      // IMPORTANT: Variation strict locale matching, Follow iso_639_1_code
-      // If the exact match of a locale is available in the list of portal locales, return it
-      // Else return the default locale. Eg: `es` will not work if `es_ES` is available in the list
-      if (allowedLocales.includes(widgetLocale)) {
-        return widgetLocale;
-      }
-      return defaultLocale;
-    },
-  },
-  mounted() {
-    if (this.portal && this.popularArticles.length === 0) {
-      const locale = this.defaultLocale;
-      this.$store.dispatch('article/fetch', {
-        slug: this.portal.slug,
-        locale,
-      });
-    }
-  },
   methods: {
     startConversation() {
       if (this.preChatFormEnabled && !this.conversationSize) {
@@ -64,24 +28,6 @@ export default {
       }
       return this.replaceRoute('messages');
     },
-    openArticleInArticleViewer(link) {
-      let linkToOpen = `${link}?show_plain_layout=true`;
-      const isDark = this.prefersDarkMode;
-      if (isDark) {
-        linkToOpen = `${linkToOpen}&theme=dark`;
-      }
-      this.$router.push({
-        name: 'article-viewer',
-        query: { link: linkToOpen },
-      });
-    },
-    viewAllArticles() {
-      const locale = this.defaultLocale;
-      const {
-        portal: { slug },
-      } = window.chatwootWebChannel;
-      this.openArticleInArticleViewer(`/hc/${slug}/${locale}`);
-    },
   },
 };
 </script>
@@ -95,21 +41,6 @@ export default {
       @start-conversation="startConversation"
     />
 
-    <div
-      v-if="portal"
-      class="w-full shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-5 py-4"
-    >
-      <ArticleHero
-        v-if="
-          !articleUiFlags.isFetching &&
-          !articleUiFlags.isError &&
-          popularArticles.length
-        "
-        :articles="popularArticles"
-        @view="openArticleInArticleViewer"
-        @view-all="viewAllArticles"
-      />
-      <ArticleCardSkeletonLoader v-else />
-    </div>
+    <ArticleContainer />
   </div>
 </template>