From 961d8106451b45882103aff66a0482cc0d77f311 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Thu, 10 Aug 2023 22:27:51 -0700
Subject: [PATCH] Revert "feat: Show popular articles on widget home" (#7706)

---
 app/javascript/sdk/sdk.js                     |  2 +-
 .../components/ArticleSkeletonLoader.vue      | 18 ----
 .../shared/components/IframeLoader.vue        | 55 ------------
 app/javascript/widget/api/endPoints.js        |  1 -
 .../widget/components/AgentMessageBubble.vue  |  2 +-
 .../widget/components/ArticleCategoryCard.vue | 30 +++----
 .../widget/components/ArticleHero.vue         | 20 ++---
 .../widget/components/ArticleList.vue         |  2 +-
 .../widget/components/ArticleListItem.vue     | 10 +--
 .../widget/components/ChatHeader.vue          |  6 +-
 .../widget/components/ChatHeaderExpanded.vue  | 21 +++--
 .../widget/components/HeaderActions.vue       | 10 +--
 .../widget/components/TeamAvailability.vue    |  8 +-
 .../components/layouts/ViewWithHeader.vue     | 44 ++--------
 app/javascript/widget/i18n/locale/en.json     |  3 +-
 app/javascript/widget/router.js               |  6 --
 .../widget/store/modules/articles.js          |  1 +
 app/javascript/widget/views/ArticleViewer.vue | 34 --------
 app/javascript/widget/views/Home.vue          | 83 +++----------------
 .../api/v1/models/_article.json.jbuilder      |  2 -
 app/views/widgets/show.html.erb               |  1 -
 tailwind.config.js                            |  4 +-
 22 files changed, 64 insertions(+), 299 deletions(-)
 delete mode 100644 app/javascript/shared/components/ArticleSkeletonLoader.vue
 delete mode 100644 app/javascript/shared/components/IframeLoader.vue
 delete mode 100644 app/javascript/widget/views/ArticleViewer.vue

diff --git a/app/javascript/sdk/sdk.js b/app/javascript/sdk/sdk.js
index d24faa16a..fd2add3e2 100644
--- a/app/javascript/sdk/sdk.js
+++ b/app/javascript/sdk/sdk.js
@@ -280,7 +280,7 @@ export const SDK_CSS = `
   .woot-widget-holder {
     border-radius: 16px;
     bottom: 104px;
-    height: calc(90% - 64px - 20px);
+    height: calc(85% - 64px - 20px);
     max-height: 590px !important;
     min-height: 250px !important;
     width: 400px !important;
diff --git a/app/javascript/shared/components/ArticleSkeletonLoader.vue b/app/javascript/shared/components/ArticleSkeletonLoader.vue
deleted file mode 100644
index 29061def0..000000000
--- a/app/javascript/shared/components/ArticleSkeletonLoader.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="p-6 space-y-6 bg-white">
-    <div class="space-y-2 animate-pulse ">
-      <div class="h-6 bg-slate-100 rounded w-1/5" />
-      <div class="h-10 bg-slate-100 rounded w-3/5" />
-    </div>
-    <div class="space-y-2 animate-pulse ">
-      <div class="h-5 bg-slate-100 rounded" />
-      <div class="h-5 bg-slate-100 rounded" />
-      <div class="h-5 bg-slate-100 rounded" />
-    </div>
-    <div class="space-y-2 animate-pulse ">
-      <div class="h-5 bg-slate-100 rounded" />
-      <div class="h-5 bg-slate-100 rounded" />
-      <div class="h-5 bg-slate-100 rounded w-7/10" />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/shared/components/IframeLoader.vue b/app/javascript/shared/components/IframeLoader.vue
deleted file mode 100644
index efa9066eb..000000000
--- a/app/javascript/shared/components/IframeLoader.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div class="relative overflow-hidden pb-1/2 h-full">
-    <iframe
-      v-if="url"
-      :src="url"
-      class="absolute w-full h-full top-0 left-0"
-      @load="handleIframeLoad"
-      @error="handleIframeError"
-    />
-    <article-skeleton-loader
-      v-if="isLoading"
-      class="absolute w-full h-full top-0 left-0"
-    />
-    <div
-      v-if="showEmptyState"
-      class="absolute w-full h-full top-0 left-0 flex justify-center items-center"
-    >
-      <p>{{ $t('PORTAL.IFRAME_ERROR') }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-import ArticleSkeletonLoader from 'shared/components/ArticleSkeletonLoader';
-
-export default {
-  name: 'IframeRenderer',
-  components: {
-    ArticleSkeletonLoader,
-  },
-  props: {
-    url: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      isLoading: true,
-      showEmptyState: !this.url,
-    };
-  },
-  methods: {
-    handleIframeLoad() {
-      // Once loaded, the loading state is hidden
-      this.isLoading = false;
-    },
-    handleIframeError() {
-      // Hide the loading state and show the empty state when an error occurs
-      this.isLoading = false;
-      this.showEmptyState = true;
-    },
-  },
-};
-</script>
diff --git a/app/javascript/widget/api/endPoints.js b/app/javascript/widget/api/endPoints.js
index 208214bca..e8193ee9e 100755
--- a/app/javascript/widget/api/endPoints.js
+++ b/app/javascript/widget/api/endPoints.js
@@ -97,7 +97,6 @@ const getMostReadArticles = (slug, locale) => ({
   url: `/hc/${slug}/${locale}/articles.json`,
   params: {
     page: 1,
-    sort: 'views',
   },
 });
 
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index c1fef4b03..04b0808e5 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -10,7 +10,7 @@
       <div
         v-dompurify-html="formatMessage(message, false)"
         class="message-content"
-        :class="$dm('text-slate-900', 'dark:text-slate-50')"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
       />
       <email-input
         v-if="isTemplateEmail"
diff --git a/app/javascript/widget/components/ArticleCategoryCard.vue b/app/javascript/widget/components/ArticleCategoryCard.vue
index 96988c797..97d91f254 100644
--- a/app/javascript/widget/components/ArticleCategoryCard.vue
+++ b/app/javascript/widget/components/ArticleCategoryCard.vue
@@ -1,27 +1,21 @@
 <template>
-  <div>
-    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50 mb-0">
-      {{ title }}
-    </h3>
-    <article-list :articles="articles" @click="onArticleClick" />
+  <div class="py-2">
+    <h3 class="text-sm font-semibold text-slate-900 mb-0">{{ title }}</h3>
+    <article-list :articles="articles" />
     <button
-      class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 see-articles"
-      :style="{ color: widgetColor }"
-      @click="$emit('view-all')"
+      class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 justify-between items-center hover:bg-slate-25 see-articles"
+      @click="$emit('view-all-articles')"
     >
-      <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
+      <span class="pr-2">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
       <fluent-icon icon="arrow-right" size="14" />
     </button>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import ArticleList from './ArticleList.vue';
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-
 export default {
-  components: { FluentIcon, ArticleList },
+  components: { ArticleList },
   props: {
     title: {
       type: String,
@@ -31,13 +25,9 @@ export default {
       type: Array,
       default: () => [],
     },
-  },
-  computed: {
-    ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
-  },
-  methods: {
-    onArticleClick(link) {
-      this.$emit('view', link);
+    categoryPath: {
+      type: String,
+      default: '',
     },
   },
 };
diff --git a/app/javascript/widget/components/ArticleHero.vue b/app/javascript/widget/components/ArticleHero.vue
index c6c025376..6345b05f6 100644
--- a/app/javascript/widget/components/ArticleHero.vue
+++ b/app/javascript/widget/components/ArticleHero.vue
@@ -1,10 +1,13 @@
 <template>
-  <category-card
-    :title="$t('PORTAL.POPULAR_ARTICLES')"
-    :articles="articles.slice(0, 4)"
-    @view-all="$emit('view-all')"
-    @view="onArticleClick"
-  />
+  <div>
+    <h2 class="text-base font-bold leading-6 text-slate-800 mb-0">
+      {{ $t('PORTAL.POPULAR_ARTICLES') }}
+    </h2>
+    <category-card
+      :articles="articles.slice(0, 4)"
+      @view-all-articles="$emit('view-all-articles')"
+    />
+  </div>
 </template>
 
 <script>
@@ -21,11 +24,6 @@ export default {
       default: '',
     },
   },
-  methods: {
-    onArticleClick(link) {
-      this.$emit('view', link);
-    },
-  },
 };
 </script>
 
diff --git a/app/javascript/widget/components/ArticleList.vue b/app/javascript/widget/components/ArticleList.vue
index abbbdb1f0..00612b50d 100644
--- a/app/javascript/widget/components/ArticleList.vue
+++ b/app/javascript/widget/components/ArticleList.vue
@@ -2,7 +2,7 @@
   <ul role="list" class="py-2">
     <article-list-item
       v-for="article in articles"
-      :key="article.slug"
+      :key="article.id"
       :link="article.link"
       :title="article.title"
       @click="onClick"
diff --git a/app/javascript/widget/components/ArticleListItem.vue b/app/javascript/widget/components/ArticleListItem.vue
index 5a3e4f723..3e68552a3 100644
--- a/app/javascript/widget/components/ArticleListItem.vue
+++ b/app/javascript/widget/components/ArticleListItem.vue
@@ -1,24 +1,20 @@
 <template>
   <li
-    class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-75 dark:hover:bg-slate-600 rounded cursor-pointer text-slate-700 dark:text-slate-50 dark:hover:text-slate-25 hover:text-slate-900 "
-    @click="onClick"
+    class="py-1 flex items-center justify-between  -mx-1 px-1 hover:bg-slate-25"
   >
     <button
-      class="underline-offset-2 text-sm leading-6 text-left"
+      class="text-slate-700 hover:text-slate-900 underline-offset-2 text-sm leading-6"
       @click="onClick"
     >
       {{ title }}
     </button>
-    <span class="pl-1 first-letter arrow">
+    <span class="pl-1 text-slate-700 arrow">
       <fluent-icon icon="arrow-right" size="14" />
     </span>
   </li>
 </template>
 <script>
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-
 export default {
-  components: { FluentIcon },
   props: {
     link: {
       type: String,
diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue
index 241163d95..57c014302 100644
--- a/app/javascript/widget/components/ChatHeader.vue
+++ b/app/javascript/widget/components/ChatHeader.vue
@@ -4,11 +4,7 @@
     :class="$dm('bg-white', 'dark:bg-slate-900')"
   >
     <div class="flex items-center">
-      <button
-        v-if="showBackButton"
-        class="-ml-3 px-2"
-        @click="onBackButtonClick"
-      >
+      <button v-if="showBackButton" @click="onBackButtonClick">
         <fluent-icon
           icon="chevron-left"
           size="24"
diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue
index 971138f95..6ddfc6fc5 100755
--- a/app/javascript/widget/components/ChatHeaderExpanded.vue
+++ b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -1,7 +1,7 @@
 <template>
   <header
     class="header-expanded py-6 px-5 relative box-border w-full"
-    :class="showBg ? 'bg-transparent' : 'bg-white dark:bg-slate-900'"
+    :class="$dm('bg-white', 'dark:bg-slate-900')"
   >
     <div
       class="flex items-start"
@@ -13,25 +13,23 @@
         :src="avatarUrl"
         alt="Avatar"
       />
-      <header-actions
-        :show-popout-button="showPopoutButton"
-        :show-end-conversation-button="false"
-      />
+      <header-actions :show-popout-button="showPopoutButton" />
     </div>
     <h2
       v-dompurify-html="introHeading"
-      class="mt-4 text-2xl mb-2 font-normal"
+      class="mt-5 text-3xl mb-3 leading-8 font-normal"
       :class="$dm('text-slate-900', 'dark:text-slate-50')"
     />
     <p
       v-dompurify-html="introBody"
-      class="text-base leading-normal"
+      class="text-lg leading-normal"
       :class="$dm('text-slate-700', 'dark:text-slate-200')"
     />
   </header>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import HeaderActions from './HeaderActions';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 
@@ -58,10 +56,11 @@ export default {
       type: Boolean,
       default: false,
     },
-    showBg: {
-      type: Boolean,
-      default: true,
-    },
+  },
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
   },
 };
 </script>
diff --git a/app/javascript/widget/components/HeaderActions.vue b/app/javascript/widget/components/HeaderActions.vue
index 01051ea32..28f7827e6 100644
--- a/app/javascript/widget/components/HeaderActions.vue
+++ b/app/javascript/widget/components/HeaderActions.vue
@@ -1,11 +1,7 @@
 <template>
   <div v-if="showHeaderActions" class="actions flex items-center">
     <button
-      v-if="
-        canLeaveConversation &&
-          hasEndConversationEnabled &&
-          showEndConversationButton
-      "
+      v-if="canLeaveConversation && hasEndConversationEnabled"
       class="button transparent compact"
       :title="$t('END_CONVERSATION')"
       @click="resolveConversation"
@@ -60,10 +56,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    showEndConversationButton: {
-      type: Boolean,
-      default: true,
-    },
   },
   computed: {
     ...mapGetters({
diff --git a/app/javascript/widget/components/TeamAvailability.vue b/app/javascript/widget/components/TeamAvailability.vue
index 11b25c1ea..7624e0de8 100644
--- a/app/javascript/widget/components/TeamAvailability.vue
+++ b/app/javascript/widget/components/TeamAvailability.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="p-4 shadow rounded-md bg-white dark:bg-slate-700">
+  <div class="px-5">
     <div class="flex items-center justify-between mb-4">
       <div
         class="max-w-xs"
-        :class="$dm('text-slate-700', 'dark:text-slate-50')"
+        :class="$dm('text-black-700', 'dark:text-slate-50')"
       >
-        <div class="text-sm font-medium mb-1">
+        <div class="text-base leading-5 font-medium mb-1">
           {{
             isOnline
               ? $t('TEAM_AVAILABILITY.ONLINE')
               : $t('TEAM_AVAILABILITY.OFFLINE')
           }}
         </div>
-        <div class="text-xs mt-1">
+        <div class="text-xs leading-3 mt-1">
           {{ replyWaitMessage }}
         </div>
       </div>
diff --git a/app/javascript/widget/components/layouts/ViewWithHeader.vue b/app/javascript/widget/components/layouts/ViewWithHeader.vue
index 0ea93c202..ec7cbe455 100644
--- a/app/javascript/widget/components/layouts/ViewWithHeader.vue
+++ b/app/javascript/widget/components/layouts/ViewWithHeader.vue
@@ -1,16 +1,14 @@
 <template>
   <div
-    class="w-full h-full flex flex-col relative bg-slate-50 dark:bg-slate-800"
-    :class="{ 'overflow-auto': isOnHomeView }"
-    :style="portal ? { backgroundColor: backgroundColor } : {}"
+    class="w-full h-full flex flex-col"
+    :class="$dm('bg-slate-50', 'dark:bg-slate-800')"
     @keydown.esc="closeWindow"
   >
     <div
-      class="header-wrap sticky top-0 z-40"
+      class="header-wrap"
       :class="{
         expanded: !isHeaderCollapsed,
         collapsed: isHeaderCollapsed,
-        'custom-header-shadow': (isOnHomeView && !portal) || !isOnArticleViewer,
       }"
     >
       <transition
@@ -27,7 +25,6 @@
           :intro-body="channelConfig.welcomeTagline"
           :avatar-url="channelConfig.avatarUrl"
           :show-popout-button="appConfig.showPopoutButton"
-          :show-bg="!!portal"
         />
         <chat-header
           v-if="isHeaderCollapsed"
@@ -35,7 +32,6 @@
           :avatar-url="channelConfig.avatarUrl"
           :show-popout-button="appConfig.showPopoutButton"
           :available-agents="availableAgents"
-          :show-back-button="showBackButton"
         />
       </transition>
     </div>
@@ -50,7 +46,7 @@
     >
       <router-view />
     </transition>
-    <branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
+    <branding :disable-branding="disableBranding" />
   </div>
 </template>
 <script>
@@ -79,42 +75,20 @@ export default {
   },
   computed: {
     ...mapGetters({
-      appConfig: 'appConfig/getAppConfig',
       availableAgents: 'agent/availableAgents',
-      widgetColor: 'appConfig/getWidgetColor',
+      appConfig: 'appConfig/getAppConfig',
     }),
-    portal() {
-      return window.chatwootWebChannel.portal;
-    },
     isHeaderCollapsed() {
       if (!this.hasIntroText) {
         return true;
       }
-      return !this.isOnHomeView;
-    },
-    backgroundColor() {
-      const color = this.widgetColor.replace('#', '');
-      const r = parseInt(color.slice(0, 2), 16);
-      const g = parseInt(color.slice(2, 4), 16);
-      const b = parseInt(color.slice(4, 6), 16);
-      return `rgba(${r},${g},${b}, 0.02)`;
+      return this.$route.name !== 'home';
     },
     hasIntroText() {
       return (
         this.channelConfig.welcomeTitle || this.channelConfig.welcomeTagline
       );
     },
-    showBackButton() {
-      return ['article-viewer', 'messages', 'prechat-form'].includes(
-        this.$route.name
-      );
-    },
-    isOnArticleViewer() {
-      return ['article-viewer'].includes(this.$route.name);
-    },
-    isOnHomeView() {
-      return ['home'].includes(this.$route.name);
-    },
   },
   methods: {
     closeWindow() {
@@ -128,13 +102,11 @@ export default {
 @import '~widget/assets/scss/variables';
 @import '~widget/assets/scss/mixins';
 
-.custom-header-shadow {
-  @include shadow-large;
-}
-
 .header-wrap {
   flex-shrink: 0;
   transition: max-height 300ms;
+  z-index: 99;
+  @include shadow-large;
 
   &.expanded {
     max-height: 16rem;
diff --git a/app/javascript/widget/i18n/locale/en.json b/app/javascript/widget/i18n/locale/en.json
index 79f386d3d..e5fb85643 100644
--- a/app/javascript/widget/i18n/locale/en.json
+++ b/app/javascript/widget/i18n/locale/en.json
@@ -108,7 +108,6 @@
   },
   "PORTAL": {
     "POPULAR_ARTICLES": "Popular Articles",
-    "VIEW_ALL_ARTICLES": "View all articles",
-    "IFRAME_LOAD_ERROR": "There was an error loading the article, please refresh the page and try again."
+    "VIEW_ALL_ARTICLES": "View all articles"
   }
 }
diff --git a/app/javascript/widget/router.js b/app/javascript/widget/router.js
index 28ba3cc68..a07d37498 100755
--- a/app/javascript/widget/router.js
+++ b/app/javascript/widget/router.js
@@ -36,12 +36,6 @@ export default new Router({
           name: 'messages',
           component: () => import('./views/Messages.vue'),
         },
-        {
-          path: '/article',
-          name: 'article-viewer',
-          props: true,
-          component: () => import('./views/ArticleViewer.vue'),
-        },
       ],
     },
   ],
diff --git a/app/javascript/widget/store/modules/articles.js b/app/javascript/widget/store/modules/articles.js
index b6d0e17e2..8a22ed26f 100644
--- a/app/javascript/widget/store/modules/articles.js
+++ b/app/javascript/widget/store/modules/articles.js
@@ -23,6 +23,7 @@ export const actions = {
     try {
       const { data } = await getMostReadArticles(slug, locale);
       const { payload = [] } = data;
+
       if (payload.length) {
         commit('setArticles', payload);
       }
diff --git a/app/javascript/widget/views/ArticleViewer.vue b/app/javascript/widget/views/ArticleViewer.vue
deleted file mode 100644
index 045bc33a6..000000000
--- a/app/javascript/widget/views/ArticleViewer.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="bg-white h-full">
-    <iframe-loader :url="link" />
-  </div>
-</template>
-
-<script>
-import { IFrameHelper } from 'widget/helpers/utils';
-import IframeLoader from 'shared/components/IframeLoader';
-
-export default {
-  name: 'Campaigns',
-  components: {
-    IframeLoader,
-  },
-  props: {
-    link: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    closeFullView() {
-      if (IFrameHelper.isIFrame()) {
-        IFrameHelper.sendMessage({
-          event: 'setCampaignReadOn',
-        });
-        IFrameHelper.sendMessage({ event: 'toggleBubble' });
-        bus.$emit('snooze-campaigns');
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index 011368e07..10109b318 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -1,54 +1,24 @@
 <template>
-  <div
-    class="z-50 rounded-md border-t border-slate-50 w-full flex flex-1 flex-col justify-end"
-    :class="{ 'pb-2': showArticles }"
-  >
-    <div v-if="false" class="px-4 py-2 w-full">
-      <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow w-full">
-        <article-hero
-          v-if="
-            !articleUiFlags.isFetching &&
-              !articleUiFlags.isError &&
-              popularArticles.length
-          "
-          :articles="popularArticles"
-          @view="openArticleInArticleViewer"
-          @view-all="viewAllArticles"
-        />
-        <div
-          v-if="articleUiFlags.isFetching"
-          class="flex flex-col items-center justify-center py-8"
-        >
-          <div class="inline-block p-4 rounded-lg bg-slate-200">
-            <spinner size="small" />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="px-4 pt-2 w-full sticky bottom-4">
-      <team-availability
-        :available-agents="availableAgents"
-        :has-conversation="!!conversationSize"
-        @start-conversation="startConversation"
-      />
+  <div class="flex flex-1 flex-col justify-end">
+    <div class="flex flex-1 overflow-auto">
+      <!-- Load Conversation List Components Here -->
     </div>
+    <team-availability
+      :available-agents="availableAgents"
+      :has-conversation="!!conversationSize"
+      @start-conversation="startConversation"
+    />
   </div>
 </template>
 
 <script>
+import configMixin from '../mixins/configMixin';
 import TeamAvailability from 'widget/components/TeamAvailability';
-import ArticleHero from 'widget/components/ArticleHero';
-import Spinner from 'shared/components/Spinner.vue';
-
 import { mapGetters } from 'vuex';
 import routerMixin from 'widget/mixins/routerMixin';
-import configMixin from 'widget/mixins/configMixin';
-
 export default {
   name: 'Home',
   components: {
-    Spinner,
-    ArticleHero,
     TeamAvailability,
   },
   mixins: [configMixin, routerMixin],
@@ -62,31 +32,15 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {};
+  },
   computed: {
     ...mapGetters({
       availableAgents: 'agent/availableAgents',
       activeCampaign: 'campaign/getActiveCampaign',
       conversationSize: 'conversation/getConversationSize',
-      popularArticles: 'article/popularArticles',
-      articleUiFlags: 'article/uiFlags',
     }),
-    portal() {
-      return window.chatwootWebChannel.portal;
-    },
-    showArticles() {
-      return (
-        this.portal &&
-        (this.articleUiFlags.isFetching || this.popularArticles.length)
-      );
-    },
-  },
-  mounted() {
-    if (this.portal && this.popularArticles.length === 0) {
-      this.$store.dispatch('article/fetch', {
-        slug: this.portal.slug,
-        locale: 'en',
-      });
-    }
   },
   methods: {
     startConversation() {
@@ -95,19 +49,6 @@ export default {
       }
       return this.replaceRoute('messages');
     },
-    openArticleInArticleViewer(link) {
-      this.$router.push({
-        name: 'article-viewer',
-        params: { link: `${link}?show_plain_layout=true` },
-      });
-    },
-    viewAllArticles() {
-      const {
-        portal: { slug },
-        locale = 'en',
-      } = window.chatwootWebChannel;
-      this.openArticleInArticleViewer(`/hc/${slug}/${locale}`);
-    },
   },
 };
 </script>
diff --git a/app/views/public/api/v1/models/_article.json.jbuilder b/app/views/public/api/v1/models/_article.json.jbuilder
index 7050f3244..1660f7914 100644
--- a/app/views/public/api/v1/models/_article.json.jbuilder
+++ b/app/views/public/api/v1/models/_article.json.jbuilder
@@ -38,5 +38,3 @@ json.associated_articles do
     end
   end
 end
-
-json.link "hc/#{article.portal.slug}/articles/#{article.slug}"
diff --git a/app/views/widgets/show.html.erb b/app/views/widgets/show.html.erb
index 28c4ed901..d5d047074 100644
--- a/app/views/widgets/show.html.erb
+++ b/app/views/widgets/show.html.erb
@@ -14,7 +14,6 @@
         welcomeTagline: '<%= @web_widget.welcome_tagline %>',
         welcomeTitle: '<%= @web_widget.welcome_title %>',
         widgetColor: '<%= @web_widget.widget_color %>',
-        portal: <%= @web_widget.inbox.portal.to_json.html_safe %>,
         enabledFeatures: <%= @web_widget.selected_feature_flags.to_json.html_safe %>,
         enabledLanguages: <%= available_locales_with_name.to_json.html_safe %>,
         replyTime: '<%= @web_widget.reply_time %>',
diff --git a/tailwind.config.js b/tailwind.config.js
index 89546bc30..64b4c346c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,8 +26,8 @@ module.exports = {
   ],
   theme: {
     fontSize: {
-      ...defaultTheme.fontSize,
       xxs: '0.625rem',
+      ...defaultTheme.fontSize,
     },
     colors: {
       transparent: 'transparent',
@@ -127,7 +127,6 @@ module.exports = {
       body: slateDark.slate7,
     },
     keyframes: {
-      ...defaultTheme.keyframes,
       wiggle: {
         '0%': { transform: 'translateX(0)' },
         '15%': { transform: 'translateX(0.375rem)' },
@@ -140,7 +139,6 @@ module.exports = {
       },
     },
     animation: {
-      ...defaultTheme.animation,
       wiggle: 'wiggle 0.5s ease-in-out',
     },
   },