From 703e19304d1536f95cdb5b8d15ef8f5d9c26b18e Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 25 Jul 2023 05:15:55 +0530
Subject: [PATCH] feat: Components to render articles in widget home (#7596)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../widget/components/ArticleCategoryCard.vue | 42 +++++++++++++++
 .../widget/components/ArticleHero.vue         | 30 +++++++++++
 .../widget/components/ArticleList.vue         | 34 +++++++++++++
 .../widget/components/ArticleListItem.vue     | 37 ++++++++++++++
 .../widget/components/ArticleSearch.vue       | 51 +++++++++++++++++++
 .../widget/components/SearchArticle.vue       | 51 +++++++++++++++++++
 .../components/stories/ArticleHero.stories.js | 30 +++++++++++
 app/javascript/widget/i18n/locale/en.json     |  4 ++
 8 files changed, 279 insertions(+)
 create mode 100644 app/javascript/widget/components/ArticleCategoryCard.vue
 create mode 100644 app/javascript/widget/components/ArticleHero.vue
 create mode 100644 app/javascript/widget/components/ArticleList.vue
 create mode 100644 app/javascript/widget/components/ArticleListItem.vue
 create mode 100644 app/javascript/widget/components/ArticleSearch.vue
 create mode 100644 app/javascript/widget/components/SearchArticle.vue
 create mode 100644 app/javascript/widget/components/stories/ArticleHero.stories.js

diff --git a/app/javascript/widget/components/ArticleCategoryCard.vue b/app/javascript/widget/components/ArticleCategoryCard.vue
new file mode 100644
index 000000000..97d91f254
--- /dev/null
+++ b/app/javascript/widget/components/ArticleCategoryCard.vue
@@ -0,0 +1,42 @@
+<template>
+  <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 justify-between items-center hover:bg-slate-25 see-articles"
+      @click="$emit('view-all-articles')"
+    >
+      <span class="pr-2">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
+      <fluent-icon icon="arrow-right" size="14" />
+    </button>
+  </div>
+</template>
+
+<script>
+import ArticleList from './ArticleList.vue';
+export default {
+  components: { ArticleList },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    articles: {
+      type: Array,
+      default: () => [],
+    },
+    categoryPath: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.see-articles {
+  color: var(--brand-textButtonClear);
+  svg {
+    color: var(--brand-textButtonClear);
+  }
+}
+</style>
diff --git a/app/javascript/widget/components/ArticleHero.vue b/app/javascript/widget/components/ArticleHero.vue
new file mode 100644
index 000000000..6345b05f6
--- /dev/null
+++ b/app/javascript/widget/components/ArticleHero.vue
@@ -0,0 +1,30 @@
+<template>
+  <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>
+import CategoryCard from './ArticleCategoryCard.vue';
+export default {
+  components: { CategoryCard },
+  props: {
+    articles: {
+      type: Array,
+      default: () => [],
+    },
+    categoryPath: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/app/javascript/widget/components/ArticleList.vue b/app/javascript/widget/components/ArticleList.vue
new file mode 100644
index 000000000..00612b50d
--- /dev/null
+++ b/app/javascript/widget/components/ArticleList.vue
@@ -0,0 +1,34 @@
+<template>
+  <ul role="list" class="py-2">
+    <article-list-item
+      v-for="article in articles"
+      :key="article.id"
+      :link="article.link"
+      :title="article.title"
+      @click="onClick"
+    />
+  </ul>
+</template>
+<script>
+import ArticleListItem from './ArticleListItem';
+
+export default {
+  components: {
+    ArticleListItem,
+  },
+  props: {
+    articles: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onClick(link) {
+      this.$emit('click', link);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/widget/components/ArticleListItem.vue b/app/javascript/widget/components/ArticleListItem.vue
new file mode 100644
index 000000000..3e68552a3
--- /dev/null
+++ b/app/javascript/widget/components/ArticleListItem.vue
@@ -0,0 +1,37 @@
+<template>
+  <li
+    class="py-1 flex items-center justify-between  -mx-1 px-1 hover:bg-slate-25"
+  >
+    <button
+      class="text-slate-700 hover:text-slate-900 underline-offset-2 text-sm leading-6"
+      @click="onClick"
+    >
+      {{ title }}
+    </button>
+    <span class="pl-1 text-slate-700 arrow">
+      <fluent-icon icon="arrow-right" size="14" />
+    </span>
+  </li>
+</template>
+<script>
+export default {
+  props: {
+    link: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onClick() {
+      this.$emit('click', this.link);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/widget/components/ArticleSearch.vue b/app/javascript/widget/components/ArticleSearch.vue
new file mode 100644
index 000000000..8ce663321
--- /dev/null
+++ b/app/javascript/widget/components/ArticleSearch.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="relative flex items-center">
+    <div
+      class="absolute inset-y-0 left-0 flex items-center py-2 px-2 text-slate-500"
+    >
+      <fluent-icon icon="search" size="14" />
+    </div>
+    <input
+      id="search"
+      v-model="searchQuery"
+      :placeholder="placeholder"
+      type="text"
+      name="search"
+      class="block w-full h-8 rounded-md focus-visible:outline-none pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
+      @input="handleInput"
+    />
+    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
+      <kbd
+        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
+      >
+        ⌘K
+      </kbd>
+    </div>
+  </div>
+</template>
+
+<script>
+import { debounce } from '@chatwoot/utils';
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      searchQuery: '',
+    };
+  },
+  methods: {
+    handleInput: debounce(
+      () => {
+        this.$emit('search', this.searchQuery);
+      },
+      500,
+      true
+    ),
+  },
+};
+</script>
diff --git a/app/javascript/widget/components/SearchArticle.vue b/app/javascript/widget/components/SearchArticle.vue
new file mode 100644
index 000000000..df38af763
--- /dev/null
+++ b/app/javascript/widget/components/SearchArticle.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="relative flex items-center">
+    <div
+      class="absolute inset-y-0 left-0 flex items-center px-2 h-8 text-slate-500"
+    >
+      <fluent-icon icon="search" size="14" />
+    </div>
+    <input
+      id="search"
+      v-model="searchQuery"
+      :placeholder="placeholder"
+      type="text"
+      name="search"
+      class="block w-full h-8 rounded-md focus-visible:outline-none m-0 pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
+      @input="handleInput"
+    />
+    <div class="absolute inset-y-0 right-0 flex h-8 p-1">
+      <kbd
+        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
+      >
+        ⌘K
+      </kbd>
+    </div>
+  </div>
+</template>
+
+<script>
+import { debounce } from '@chatwoot/utils';
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      searchQuery: '',
+    };
+  },
+  methods: {
+    handleInput: debounce(
+      () => {
+        this.$emit('search', this.searchQuery);
+      },
+      500,
+      true
+    ),
+  },
+};
+</script>
diff --git a/app/javascript/widget/components/stories/ArticleHero.stories.js b/app/javascript/widget/components/stories/ArticleHero.stories.js
new file mode 100644
index 000000000..354eeaf2d
--- /dev/null
+++ b/app/javascript/widget/components/stories/ArticleHero.stories.js
@@ -0,0 +1,30 @@
+import { action } from '@storybook/addon-actions';
+import ArticleHero from '../ArticleHero.vue'; // adjust this path to match your file's location
+
+export default {
+  title: 'Components/Widgets/ArticleHero',
+  component: ArticleHero,
+  argTypes: {
+    articles: { control: 'array', description: 'Array of articles' },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ArticleHero },
+  template:
+    '<article-hero v-bind="$props" @view-all-articles="viewAllArticles" />',
+  methods: {
+    viewAllArticles: action('view-all-articles'),
+  },
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  articles: [
+    { title: 'Article 1', content: 'This is article 1.' },
+    { title: 'Article 2', content: 'This is article 2.' },
+    { title: 'Article 3', content: 'This is article 3.' },
+    { title: 'Article 4', content: 'This is article 4.' },
+  ],
+};
diff --git a/app/javascript/widget/i18n/locale/en.json b/app/javascript/widget/i18n/locale/en.json
index 67843ddda..e5fb85643 100644
--- a/app/javascript/widget/i18n/locale/en.json
+++ b/app/javascript/widget/i18n/locale/en.json
@@ -105,5 +105,9 @@
       "CLICK_HERE_TO_JOIN": "Click here to join",
       "LEAVE_THE_ROOM": "Leave the call"
     }
+  },
+  "PORTAL": {
+    "POPULAR_ARTICLES": "Popular Articles",
+    "VIEW_ALL_ARTICLES": "View all articles"
   }
 }