Revert "feat: Show popular articles on widget home" (#7706)

2023-08-10 22:27:51 -07:00
parent 1a06bfd69c
commit 961d810645
22 changed files with 64 additions and 299 deletions
--- 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"
--- 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: '',
    },
  },
 };
--- 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>

--- 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"
--- 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,
--- 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"
--- 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>
--- 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({
--- 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>
--- 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;