From 1fb1be3ddc231f8760b84dd1109a3baae252e0ae Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Thu, 20 Oct 2022 05:39:32 +0530
Subject: [PATCH 01/27] feat: Add search functionality for public portal
 (#5683)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../api/v1/portals/articles_controller.rb     |   4 +-
 app/javascript/packs/portal.js                |  21 ++-
 app/javascript/portal/api/article.js          |  14 ++
 .../portal/components/PublicArticleSearch.vue | 129 ++++++++++++++++++
 .../portal/components/PublicSearchInput.vue   |  60 ++++++++
 .../portal/components/SearchSuggestions.vue   | 103 ++++++++++++++
 app/javascript/portal/portalHelpers.js        |   5 +
 .../shared/components/FluentIcon/icons.json   |   3 +-
 app/views/layouts/portal.html.erb             |  13 ++
 .../api/v1/models/_article.json.jbuilder      |   8 ++
 .../public/api/v1/portals/_footer.html.erb    |   2 +-
 .../public/api/v1/portals/_header.html.erb    |   2 +-
 .../public/api/v1/portals/_hero.html.erb      |   9 +-
 .../api/v1/portals/articles/index.html.erb    |   9 +-
 config/locales/en.yml                         |   8 ++
 config/routes.rb                              |   1 +
 16 files changed, 378 insertions(+), 13 deletions(-)
 create mode 100644 app/javascript/portal/api/article.js
 create mode 100644 app/javascript/portal/components/PublicArticleSearch.vue
 create mode 100644 app/javascript/portal/components/PublicSearchInput.vue
 create mode 100644 app/javascript/portal/components/SearchSuggestions.vue

diff --git a/app/controllers/public/api/v1/portals/articles_controller.rb b/app/controllers/public/api/v1/portals/articles_controller.rb
index 0dfa2ea9b..ae0fb2b6a 100644
--- a/app/controllers/public/api/v1/portals/articles_controller.rb
+++ b/app/controllers/public/api/v1/portals/articles_controller.rb
@@ -1,7 +1,7 @@
 class Public::Api::V1::Portals::ArticlesController < PublicController
   before_action :ensure_custom_domain_request, only: [:show, :index]
   before_action :portal
-  before_action :set_category
+  before_action :set_category, except: [:index]
   before_action :set_article, only: [:show]
   layout 'portal'
 
@@ -20,7 +20,7 @@ class Public::Api::V1::Portals::ArticlesController < PublicController
   end
 
   def set_category
-    @category = @portal.categories.find_by!(slug: params[:category_slug])
+    @category = @portal.categories.find_by!(slug: params[:category_slug]) if params[:category_slug].present?
   end
 
   def portal
diff --git a/app/javascript/packs/portal.js b/app/javascript/packs/portal.js
index 2f7736deb..5c1867658 100644
--- a/app/javascript/packs/portal.js
+++ b/app/javascript/packs/portal.js
@@ -3,8 +3,10 @@
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so that it will be compiled.
 
+import Vue from 'vue';
 import Rails from '@rails/ujs';
 import Turbolinks from 'turbolinks';
+import PublicArticleSearch from '../portal/components/PublicArticleSearch.vue';
 
 import { navigateToLocalePage } from '../portal/portalHelpers';
 
@@ -13,4 +15,21 @@ import '../portal/application.scss';
 Rails.start();
 Turbolinks.start();
 
-document.addEventListener('DOMContentLoaded', navigateToLocalePage);
+const initPageSetUp = () => {
+  navigateToLocalePage();
+  const isSearchContainerAvailable = document.querySelector('#search-wrap');
+  if (isSearchContainerAvailable) {
+    new Vue({
+      components: { PublicArticleSearch },
+      template: '<PublicArticleSearch />',
+    }).$mount('#search-wrap');
+  }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  initPageSetUp();
+});
+
+document.addEventListener('turbolinks:load', () => {
+  initPageSetUp();
+});
diff --git a/app/javascript/portal/api/article.js b/app/javascript/portal/api/article.js
new file mode 100644
index 000000000..d28f53c88
--- /dev/null
+++ b/app/javascript/portal/api/article.js
@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+class ArticlesAPI {
+  constructor() {
+    this.baseUrl = '';
+  }
+
+  searchArticles(portalSlug, locale, query) {
+    let baseUrl = `${this.baseUrl}/hc/${portalSlug}/${locale}/articles.json?query=${query}`;
+    return axios.get(baseUrl);
+  }
+}
+
+export default new ArticlesAPI();
diff --git a/app/javascript/portal/components/PublicArticleSearch.vue b/app/javascript/portal/components/PublicArticleSearch.vue
new file mode 100644
index 000000000..4ced0665b
--- /dev/null
+++ b/app/javascript/portal/components/PublicArticleSearch.vue
@@ -0,0 +1,129 @@
+<template>
+  <div
+    v-on-clickaway="closeSearch"
+    class="mx-auto max-w-md w-full relative my-4"
+  >
+    <public-search-input
+      v-model="searchTerm"
+      :search-placeholder="searchTranslations.searchPlaceholder"
+      @focus="openSearch"
+    />
+    <div
+      v-if="shouldShowSearchBox"
+      class="absolute show-search-box w-full"
+      @mouseover="openSearch"
+    >
+      <search-suggestions
+        :items="searchResults"
+        :is-loading="isLoading"
+        :empty-placeholder="searchTranslations.emptyPlaceholder"
+        :results-title="searchTranslations.resultsTitle"
+        :loading-placeholder="searchTranslations.loadingPlaceholder"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+
+import SearchSuggestions from './SearchSuggestions';
+import PublicSearchInput from './PublicSearchInput';
+
+import ArticlesAPI from '../api/article';
+
+export default {
+  components: {
+    PublicSearchInput,
+    SearchSuggestions,
+  },
+  mixins: [clickaway],
+  props: {
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+  },
+  data() {
+    return {
+      searchTerm: '',
+      isLoading: false,
+      showSearchBox: false,
+      searchResults: [],
+    };
+  },
+
+  computed: {
+    portalSlug() {
+      return window.portalConfig.portalSlug;
+    },
+    localeCode() {
+      return window.portalConfig.localeCode;
+    },
+    shouldShowSearchBox() {
+      return this.searchTerm !== '' && this.showSearchBox;
+    },
+    searchTranslations() {
+      const { searchTranslations = {} } = window.portalConfig;
+      return searchTranslations;
+    },
+  },
+
+  watch: {
+    searchTerm() {
+      if (this.typingTimer) {
+        clearTimeout(this.typingTimer);
+      }
+
+      this.openSearch();
+      this.isLoading = true;
+      this.typingTimer = setTimeout(() => {
+        this.fetchArticlesByQuery();
+      }, 1000);
+    },
+    currentPage() {
+      this.clearSearchTerm();
+    },
+  },
+
+  methods: {
+    onChange(e) {
+      this.$emit('input', e.target.value);
+    },
+    onBlur(e) {
+      this.$emit('blur', e.target.value);
+    },
+    openSearch() {
+      this.showSearchBox = true;
+    },
+    closeSearch() {
+      this.showSearchBox = false;
+    },
+    clearSearchTerm() {
+      this.searchTerm = '';
+    },
+    async fetchArticlesByQuery() {
+      try {
+        this.isLoading = true;
+        this.searchResults = [];
+        const { data } = await ArticlesAPI.searchArticles(
+          this.portalSlug,
+          this.localeCode,
+          this.searchTerm
+        );
+        this.searchResults = data.payload;
+        this.isLoading = true;
+      } catch (error) {
+        // Show something wrong message
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.show-search-box {
+  top: 4rem;
+}
+</style>
diff --git a/app/javascript/portal/components/PublicSearchInput.vue b/app/javascript/portal/components/PublicSearchInput.vue
new file mode 100644
index 000000000..5183f3293
--- /dev/null
+++ b/app/javascript/portal/components/PublicSearchInput.vue
@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="w-full flex items-center rounded-md border-solid  h-16 bg-white px-4 py-2 text-slate-600"
+    :class="{
+      'shadow border-2 border-woot-100': isFocused,
+      'border border-slate-50 shadow-sm': !isFocused,
+    }"
+  >
+    <fluent-icon icon="search" />
+    <input
+      :value="value"
+      type="text"
+      class="w-full search-input focus:outline-none text-base h-full bg-white px-2 py-2
+    text-slate-700 placeholder-slate-500 sm:text-sm"
+      :placeholder="searchPlaceholder"
+      role="search"
+      @input="onChange"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+  </div>
+</template>
+
+<script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+export default {
+  components: {
+    FluentIcon,
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    searchPlaceholder: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      isFocused: false,
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.$emit('input', e.target.value);
+    },
+    onFocus(e) {
+      this.isFocused = true;
+      this.$emit('focus', e.target.value);
+    },
+    onBlur(e) {
+      this.isFocused = false;
+      this.$emit('blur', e.target.value);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/portal/components/SearchSuggestions.vue b/app/javascript/portal/components/SearchSuggestions.vue
new file mode 100644
index 000000000..838d4ba7e
--- /dev/null
+++ b/app/javascript/portal/components/SearchSuggestions.vue
@@ -0,0 +1,103 @@
+<template>
+  <div
+    class="shadow-md bg-white mt-2 max-h-72 scroll-py-2 p-4 rounded overflow-y-auto text-sm text-slate-700"
+  >
+    <div v-if="isLoading" class="font-medium text-sm text-slate-400">
+      {{ loadingPlaceholder }}
+    </div>
+    <h3 v-if="shouldShowResults" class="font-medium text-sm text-slate-400">
+      {{ resultsTitle }}
+    </h3>
+    <ul
+      v-if="shouldShowResults"
+      class="bg-white mt-2 max-h-72 scroll-py-2 overflow-y-auto text-sm text-slate-700"
+      role="listbox"
+    >
+      <li
+        v-for="(article, index) in items"
+        :id="article.id"
+        :key="article.id"
+        class="group flex cursor-default select-none items-center rounded-md p-2 mb-1"
+        :class="{ 'bg-slate-25': index === selectedIndex }"
+        role="option"
+        tabindex="-1"
+        @mouseover="onHover(index)"
+      >
+        <a
+          :href="generateArticleUrl(article)"
+          class="flex-auto truncate text-base font-medium leading-6 w-full hover:underline"
+        >
+          {{ article.title }}
+        </a>
+      </li>
+    </ul>
+
+    <div v-if="showEmptyResults" class="font-medium text-sm text-slate-400">
+      {{ emptyPlaceholder }}
+    </div>
+  </div>
+</template>
+
+<script>
+import mentionSelectionKeyboardMixin from 'dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js';
+
+export default {
+  mixins: [mentionSelectionKeyboardMixin],
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    emptyPlaceholder: {
+      type: String,
+      default: '',
+    },
+    searchPlaceholder: {
+      type: String,
+      default: '',
+    },
+    loadingPlaceholder: {
+      type: String,
+      default: '',
+    },
+    resultsTitle: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      selectedIndex: 0,
+    };
+  },
+
+  computed: {
+    showEmptyResults() {
+      return !this.items.length && !this.isLoading;
+    },
+    shouldShowResults() {
+      return this.items.length && !this.isLoading;
+    },
+  },
+
+  methods: {
+    generateArticleUrl(article) {
+      return `/hc/${article.portal.slug}/${article.category.locale}/${article.category.slug}/${article.id}`;
+    },
+    handleKeyboardEvent(e) {
+      this.processKeyDownEvent(e);
+      this.$el.scrollTop = 40 * this.selectedIndex;
+    },
+    onHover(index) {
+      this.selectedIndex = index;
+    },
+    onSelect() {
+      window.location = this.generateArticleUrl(this.items[this.selectedIndex]);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/portal/portalHelpers.js b/app/javascript/portal/portalHelpers.js
index d31d1b6ba..647059b73 100644
--- a/app/javascript/portal/portalHelpers.js
+++ b/app/javascript/portal/portalHelpers.js
@@ -1,8 +1,13 @@
 export const navigateToLocalePage = () => {
   const allLocaleSwitcher = document.querySelector('.locale-switcher');
 
+  if (!allLocaleSwitcher) {
+    return false;
+  }
+
   const { portalSlug } = allLocaleSwitcher.dataset;
   allLocaleSwitcher.addEventListener('change', event => {
     window.location = `/hc/${portalSlug}/${event.target.value}/`;
   });
+  return false;
 };
diff --git a/app/javascript/shared/components/FluentIcon/icons.json b/app/javascript/shared/components/FluentIcon/icons.json
index 20981ed5c..27a81344f 100644
--- a/app/javascript/shared/components/FluentIcon/icons.json
+++ b/app/javascript/shared/components/FluentIcon/icons.json
@@ -11,6 +11,7 @@
   "link-outline": "M9.25 7a.75.75 0 0 1 .11 1.492l-.11.008H7a3.5 3.5 0 0 0-.206 6.994L7 15.5h2.25a.75.75 0 0 1 .11 1.492L9.25 17H7a5 5 0 0 1-.25-9.994L7 7h2.25ZM17 7a5 5 0 0 1 .25 9.994L17 17h-2.25a.75.75 0 0 1-.11-1.492l.11-.008H17a3.5 3.5 0 0 0 .206-6.994L17 8.5h-2.25a.75.75 0 0 1-.11-1.492L14.75 7H17ZM7 11.25h10a.75.75 0 0 1 .102 1.493L17 12.75H7a.75.75 0 0 1-.102-1.493L7 11.25h10H7Z",
   "more-vertical-outline": "M12 7.75a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5ZM12 13.75a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5ZM10.25 18a1.75 1.75 0 1 0 3.5 0 1.75 1.75 0 0 0-3.5 0Z",
   "open-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.783 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z",
+  "search-outline": "M10 2.75a7.25 7.25 0 0 1 5.63 11.819l4.9 4.9a.75.75 0 0 1-.976 1.134l-.084-.073-4.901-4.9A7.25 7.25 0 1 1 10 2.75Zm0 1.5a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Z",
   "send-outline": "M5.694 12 2.299 3.272c-.236-.607.356-1.188.942-.982l.093.04 18 9a.75.75 0 0 1 .097 1.283l-.097.058-18 9c-.583.291-1.217-.244-1.065-.847l.03-.096L5.694 12 2.299 3.272 5.694 12ZM4.402 4.54l2.61 6.71h6.627a.75.75 0 0 1 .743.648l.007.102a.75.75 0 0 1-.649.743l-.101.007H7.01l-2.609 6.71L19.322 12 4.401 4.54Z",
-  "sign-out-outline": ["M8.502 11.5a1.002 1.002 0 1 1 0 2.004 1.002 1.002 0 0 1 0-2.004Z","M12 4.354v6.651l7.442-.001L17.72 9.28a.75.75 0 0 1-.073-.976l.073-.084a.75.75 0 0 1 .976-.073l.084.073 2.997 2.997a.75.75 0 0 1 .073.976l-.073.084-2.996 3.004a.75.75 0 0 1-1.134-.975l.072-.085 1.713-1.717-7.431.001L12 19.25a.75.75 0 0 1-.88.739l-8.5-1.502A.75.75 0 0 1 2 17.75V5.75a.75.75 0 0 1 .628-.74l8.5-1.396a.75.75 0 0 1 .872.74Zm-1.5.883-7 1.15V17.12l7 1.236V5.237Z","M13 18.501h.765l.102-.006a.75.75 0 0 0 .648-.745l-.007-4.25H13v5.001ZM13.002 10 13 8.725V5h.745a.75.75 0 0 1 .743.647l.007.102.007 4.251h-1.5Z"]
+  "sign-out-outline": ["M8.502 11.5a1.002 1.002 0 1 1 0 2.004 1.002 1.002 0 0 1 0-2.004Z", "M12 4.354v6.651l7.442-.001L17.72 9.28a.75.75 0 0 1-.073-.976l.073-.084a.75.75 0 0 1 .976-.073l.084.073 2.997 2.997a.75.75 0 0 1 .073.976l-.073.084-2.996 3.004a.75.75 0 0 1-1.134-.975l.072-.085 1.713-1.717-7.431.001L12 19.25a.75.75 0 0 1-.88.739l-8.5-1.502A.75.75 0 0 1 2 17.75V5.75a.75.75 0 0 1 .628-.74l8.5-1.396a.75.75 0 0 1 .872.74Zm-1.5.883-7 1.15V17.12l7 1.236V5.237Z", "M13 18.501h.765l.102-.006a.75.75 0 0 0 .648-.745l-.007-4.25H13v5.001ZM13.002 10 13 8.725V5h.745a.75.75 0 0 1 .743.647l.007.102.007 4.251h-1.5Z"]
 }
diff --git a/app/views/layouts/portal.html.erb b/app/views/layouts/portal.html.erb
index 533c32d10..071fde9ee 100644
--- a/app/views/layouts/portal.html.erb
+++ b/app/views/layouts/portal.html.erb
@@ -17,6 +17,7 @@ By default, it renders:
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1">
+    <meta name= "turbolinks-cache-control" content= "no-cache">
     <%= javascript_pack_tag 'portal' %>
     <%= stylesheet_pack_tag 'portal' %>
     <%= csrf_meta_tags %>
@@ -35,4 +36,16 @@ By default, it renders:
       </main>
     </div>
   </body>
+  <script>
+    window.portalConfig = {
+      portalSlug: '<%= @portal.slug %>',
+      localeCode: '<%= @locale %>',
+      searchTranslations: {
+        searchPlaceholder: '<%= I18n.t('public_portal.search.search_placeholder') %>',
+        emptyPlaceholder: '<%= I18n.t('public_portal.search.empty_placeholder') %>',
+        loadingPlaceholder: '<%= I18n.t('public_portal.search.loading_placeholder') %>',
+        resultsTitle: '<%= I18n.t('public_portal.search.results_title') %>'
+      }
+    };
+  </script>
 </html>
diff --git a/app/views/public/api/v1/models/_article.json.jbuilder b/app/views/public/api/v1/models/_article.json.jbuilder
index 994c6c029..f9f7c3694 100644
--- a/app/views/public/api/v1/models/_article.json.jbuilder
+++ b/app/views/public/api/v1/models/_article.json.jbuilder
@@ -13,6 +13,14 @@ if article.portal.present?
   end
 end
 
+if article.category.present?
+  json.category do
+    json.id article.category.id
+    json.slug article.category.slug
+    json.locale article.category.locale
+  end
+end
+
 json.views article.views
 
 if article.author.present?
diff --git a/app/views/public/api/v1/portals/_footer.html.erb b/app/views/public/api/v1/portals/_footer.html.erb
index cd69a4fe4..2d0533b78 100644
--- a/app/views/public/api/v1/portals/_footer.html.erb
+++ b/app/views/public/api/v1/portals/_footer.html.erb
@@ -2,7 +2,7 @@
 <footer class="pt-16 pb-8 flex flex-col items-center justify-center">
   <div class="mx-auto max-w-2xl">
     <p class="text-slate-700 py-2 text-center">
-      Made with <a class="hover:underline" href="https://www.chatwoot.com" target="_blank" rel="noopener noreferrer nofoll/ow">Chatwoot</a> 💙.
+      Made with <a class="hover:underline" href="https://www.chatwoot.com" target="_blank" rel="noopener noreferrer nofoll/ow">Chatwoot</a> 💙
     </p>
   </div>
 </footer>
diff --git a/app/views/public/api/v1/portals/_header.html.erb b/app/views/public/api/v1/portals/_header.html.erb
index b7b1cbad2..59065d012 100644
--- a/app/views/public/api/v1/portals/_header.html.erb
+++ b/app/views/public/api/v1/portals/_header.html.erb
@@ -22,7 +22,7 @@
       <div class="inline-flex relative w-24">
         <select
           data-portal-slug="<%= @portal.slug %>"
-          class="appearance-none w-full bg-white px-3 py-2 pr-8 rounded leading-tight focus:outline-none focus:shadow-outline locale-switcher"
+          class="appearance-none w-full bg-white px-3 py-2 pr-8 rounded leading-tight focus:outline-none focus:shadow-outline locale-switcher hover:bg-slate-75 cursor-pointer"
         >
           <% @portal.config["allowed_locales"].each do |locale| %>
             <option <%= locale == params[:locale] ? 'selected': '' %> value="<%= locale %>"><%= locale %></option>
diff --git a/app/views/public/api/v1/portals/_hero.html.erb b/app/views/public/api/v1/portals/_hero.html.erb
index d4f59da7d..7976f61e6 100644
--- a/app/views/public/api/v1/portals/_hero.html.erb
+++ b/app/views/public/api/v1/portals/_hero.html.erb
@@ -1,9 +1,10 @@
 
-<section class="bg-gradient-to-b from-white to-black-50 pt-8 pb-16 md:py-16 flex flex-col items-center justify-center">
-  <div class="mx-auto max-w-2xl">
-    <h1 class="text-2xl px-5 md:text-4xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed text-center">
+<section class="bg-gradient-to-b from-white to-slate-75 pt-8 pb-16 md:py-16 flex flex-col items-center justify-center">
+  <div class="mx-auto w-full max-w-2xl flex flex-col items-center">
+    <h1 class="text-2xl px-5 md:text-4xl text-slate-900 font-semibold subpixel-antialiased leading-normal text-center">
       <%= portal.header_text %>
     </h1>
-    <p class="text-slate-700 py-2 text-center mt-10">Browse the categories below</p>
+    <p class="text-slate-600 py-2 text-center my-2 max-w-sm leading-normal"><%= I18n.t('public_portal.hero.sub_title') %></p>
+    <div id="search-wrap"></div>
   </div>
 </section>
diff --git a/app/views/public/api/v1/portals/articles/index.html.erb b/app/views/public/api/v1/portals/articles/index.html.erb
index 2b85c7edd..6bea67b54 100644
--- a/app/views/public/api/v1/portals/articles/index.html.erb
+++ b/app/views/public/api/v1/portals/articles/index.html.erb
@@ -2,8 +2,12 @@
 	<div class="max-w-4xl px-6 py-16 mx-auto space-y-12 w-full">
 		<div class="space-y-4">
 		<div>
-				<a class="text-slate-800 hover:underline leading-8"
-        href="/hc/<%= @portal.slug %>/<%= @category.slug %>" class=""><%= @portal.name %> Home</a>
+			<a
+				class="text-slate-800 hover:underline leading-8"
+        href="/hc/<%= @portal.slug %>/<%= @category.present? ? @category.slug : '' %>"
+			>
+				<%= @portal.name %> Home
+			</a>
 		<span>/</span>
 		<span>/</span>
 		</div>
@@ -23,7 +27,6 @@
 			<% end %>
 		</div>
 	</div>
-
 </div>
 <div class="max-w-4xl flex-grow w-full px-6 py-16 mx-auto space-y-12">
 	<article class="space-y-8 ">
diff --git a/config/locales/en.yml b/config/locales/en.yml
index fcad0e47b..982a480a2 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -165,3 +165,11 @@ en:
     fullcontact:
       name: "Fullcontact"
       description: "FullContact integration helps to enrich visitor profiles. Identify the users as soon as they share their email address and offer them tailored customer service. Connect your FullContact to your account by sharing the FullContact API Key."
+  public_portal:
+    search:
+      search_placeholder: Search for article by title or body...
+      empty_placeholder: No results found.
+      loading_placeholder: Searching...
+      results_title: Search results
+    hero:
+      sub_title: Search for the articles here or browse the categories below.
diff --git a/config/routes.rb b/config/routes.rb
index b5a5cbdc7..23c6f1f8a 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -290,6 +290,7 @@ Rails.application.routes.draw do
 
   get 'hc/:slug', to: 'public/api/v1/portals#show'
   get 'hc/:slug/:locale', to: 'public/api/v1/portals#show'
+  get 'hc/:slug/:locale/articles', to: 'public/api/v1/portals/articles#index'
   get 'hc/:slug/:locale/categories', to: 'public/api/v1/portals/categories#index'
   get 'hc/:slug/:locale/:category_slug', to: 'public/api/v1/portals/categories#show'
   get 'hc/:slug/:locale/:category_slug/articles', to: 'public/api/v1/portals/articles#index'

From 22d5703b92828a0a13e392fdf91f5bf555effbf2 Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Thu, 20 Oct 2022 05:43:13 +0530
Subject: [PATCH 02/27] feat: Macros listing and Editor (#5606)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .codeclimate.yml                              |   2 +
 .../widgets/AutomationActionInput.vue         |  28 ++-
 .../dashboard/helper/specs/macrosFixtures.js  |  71 +++++++
 .../helper/specs/macrosHelper.spec.js         |  17 ++
 .../dashboard/i18n/locale/en/macros.json      |  70 ++++++-
 .../dashboard/mixins/macrosMixin.js           |  20 ++
 .../dashboard/mixins/specs/macros.spec.js     |  41 +++++
 .../dashboard/settings/automation/Index.vue   |   2 +-
 .../settings/macros/ActionButton.vue          |  58 ++++++
 .../dashboard/settings/macros/Index.vue       | 118 +++++++++++-
 .../dashboard/settings/macros/MacroEditor.vue | 134 +++++++++++++-
 .../dashboard/settings/macros/MacroForm.vue   | 126 +++++++++++++
 .../dashboard/settings/macros/MacroNode.vue   | 149 +++++++++++++++
 .../dashboard/settings/macros/MacroNodes.vue  | 109 +++++++++++
 .../settings/macros/MacroProperties.vue       | 174 ++++++++++++++++++
 .../settings/macros/MacrosTableRow.vue        |  74 ++++++++
 .../routes/dashboard/settings/macros/Pill.vue |  30 +++
 .../dashboard/settings/macros/constants.js    |  42 +++++
 .../dashboard/settings/macros/macroHelper.js  |  10 +
 .../settings/macros/macros.routes.js          |  12 +-
 app/javascript/dashboard/store/index.js       |  18 +-
 .../assets/stylesheets/border-radius.scss     |  12 +-
 .../FluentIcon/dashboard-icons.json           |   1 +
 23 files changed, 1287 insertions(+), 31 deletions(-)
 create mode 100644 app/javascript/dashboard/helper/specs/macrosFixtures.js
 create mode 100644 app/javascript/dashboard/helper/specs/macrosHelper.spec.js
 create mode 100644 app/javascript/dashboard/mixins/macrosMixin.js
 create mode 100644 app/javascript/dashboard/mixins/specs/macros.spec.js
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/macros/ActionButton.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/macros/Pill.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/macros/constants.js
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/macros/macroHelper.js

diff --git a/.codeclimate.yml b/.codeclimate.yml
index 974681a09..d8b8d985b 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -54,3 +54,5 @@ exclude_patterns:
   - 'app/javascript/widget/i18n/index.js'
   - 'app/javascript/survey/i18n/index.js'
   - 'app/javascript/shared/constants/locales.js'
+  - 'app/javascript/dashboard/helper/specs/macrosFixtures.js'
+  - 'app/javascript/dashboard/routes/dashboard/settings/macros/constants.js'
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index 248bb5b35..93a5e3e6c 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="filter"
-    :class="{ error: v.action_params.$dirty && v.action_params.$error }"
-  >
+  <div class="filter" :class="actionInputStyles">
     <div class="filter-inputs">
       <select
         v-model="action_name"
@@ -60,6 +57,7 @@
         </div>
       </div>
       <woot-button
+        v-if="!isMacro"
         icon="dismiss"
         variant="clear"
         color-scheme="secondary"
@@ -120,6 +118,10 @@ export default {
       type: String,
       default: '',
     },
+    isMacro: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     action_name: {
@@ -146,6 +148,12 @@ export default {
       return this.actionTypes.find(action => action.key === this.action_name)
         .inputType;
     },
+    actionInputStyles() {
+      return {
+        error: this.v.action_params.$dirty && this.v.action_params.$error,
+        'is-a-macro': this.isMacro,
+      };
+    },
   },
   methods: {
     removeAction() {
@@ -165,6 +173,18 @@ export default {
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-medium);
   margin-bottom: var(--space-small);
+
+  &.is-a-macro {
+    margin-bottom: 0;
+    background: var(--white);
+    padding: var(--space-zero);
+    border: unset;
+    border-radius: unset;
+  }
+}
+
+.no-margin-bottom {
+  margin-bottom: 0;
 }
 
 .filter.error {
diff --git a/app/javascript/dashboard/helper/specs/macrosFixtures.js b/app/javascript/dashboard/helper/specs/macrosFixtures.js
new file mode 100644
index 000000000..745168d40
--- /dev/null
+++ b/app/javascript/dashboard/helper/specs/macrosFixtures.js
@@ -0,0 +1,71 @@
+export const teams = [
+  {
+    id: 1,
+    name: '⚙️ sales team',
+    description: 'This is our internal sales team',
+    allow_auto_assign: true,
+    account_id: 1,
+    is_member: true,
+  },
+  {
+    id: 2,
+    name: '🤷‍♂️ fayaz',
+    description: 'Test',
+    allow_auto_assign: true,
+    account_id: 1,
+    is_member: true,
+  },
+  {
+    id: 3,
+    name: '🇮🇳 apac sales',
+    description: 'Sales team for France Territory',
+    allow_auto_assign: true,
+    account_id: 1,
+    is_member: true,
+  },
+];
+
+export const labels = [
+  {
+    id: 6,
+    title: 'sales',
+    description: 'sales team',
+    color: '#8EA20F',
+    show_on_sidebar: true,
+  },
+  {
+    id: 2,
+    title: 'billing',
+    description: 'billing',
+    color: '#4077DA',
+    show_on_sidebar: true,
+  },
+  {
+    id: 1,
+    title: 'snoozed',
+    description: 'Items marked for later',
+    color: '#D12F42',
+    show_on_sidebar: true,
+  },
+  {
+    id: 5,
+    title: 'mobile-app',
+    description: 'tech team',
+    color: '#2DB1CC',
+    show_on_sidebar: true,
+  },
+  {
+    id: 14,
+    title: 'human-resources-department-with-long-title',
+    description: 'Test',
+    color: '#FF6E09',
+    show_on_sidebar: true,
+  },
+  {
+    id: 22,
+    title: 'priority',
+    description: 'For important sales leads',
+    color: '#7E7CED',
+    show_on_sidebar: true,
+  },
+];
diff --git a/app/javascript/dashboard/helper/specs/macrosHelper.spec.js b/app/javascript/dashboard/helper/specs/macrosHelper.spec.js
new file mode 100644
index 000000000..26c731aa8
--- /dev/null
+++ b/app/javascript/dashboard/helper/specs/macrosHelper.spec.js
@@ -0,0 +1,17 @@
+import { emptyMacro } from '../../routes/dashboard/settings/macros/macroHelper';
+
+describe('#emptyMacro', () => {
+  const defaultMacro = {
+    name: '',
+    actions: [
+      {
+        action_name: 'assign_team',
+        action_params: [],
+      },
+    ],
+    visibility: 'global',
+  };
+  it('returns the default macro', () => {
+    expect(emptyMacro).toEqual(defaultMacro);
+  });
+});
diff --git a/app/javascript/dashboard/i18n/locale/en/macros.json b/app/javascript/dashboard/i18n/locale/en/macros.json
index 3923e4374..132151241 100644
--- a/app/javascript/dashboard/i18n/locale/en/macros.json
+++ b/app/javascript/dashboard/i18n/locale/en/macros.json
@@ -1,5 +1,73 @@
 {
   "MACROS": {
-    "HEADER": "Macros"
+    "HEADER": "Macros",
+    "HEADER_BTN_TXT": "Add a new macro",
+    "HEADER_BTN_TXT_SAVE": "Save macro",
+    "LOADING": "Fetching macros",
+    "SIDEBAR_TXT": "<p><b>Macros</b><p>A macro is a set of saved actions that help customer service agents easily complete tasks. The agents can define a set of actions like tagging a conversation with a label, sending an email transcript, updating a custom attribute, etc., and they can run these actions in a single click. When the agents run the macro, the actions would be performed sequentially in the order they are defined. Macros improve productivity and increase consistency in actions. </p><p>A macro can be helpful in 2 ways. </p><p><b>As an agent assist:</b> If an agent performs a set of actions multiple times, they can save it as a macro and execute all the actions together using a single click.</p><p><b>As an option to onboard a team member:</b> Every agent has to perform many different checks/actions during each conversation. Onboarding a new support team member will be easy if pre-defined macros are available on the account. Instead of describing each step in detail, the manager/team lead can point to the macros used in different scenarios.</p>",
+    "ERROR": "Something went wrong. Please try again",
+    "ORDER_INFO": "Macros will run in the order you add your actions. You can rearrange them by dragging them by the handle beside each node.",
+    "ADD": {
+      "FORM": {
+        "NAME": {
+          "LABEL": "Macro name",
+          "PLACEHOLDER": "Enter a name for your macro",
+          "ERROR": "Name is required for creating a macro"
+        },
+        "ACTIONS": {
+          "LABEL": "Actions"
+        }
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Macro added successfully",
+        "ERROR_MESSAGE": "Unable to create macro, Please try again later"
+      }
+    },
+    "LIST": {
+      "TABLE_HEADER": [
+        "Name",
+        "Created by",
+        "Last updated by",
+        "Visibility"
+      ],
+      "404": "No macros found"
+    },
+    "DELETE": {
+      "TOOLTIP": "Delete macro",
+      "CONFIRM": {
+        "MESSAGE": "Are you sure to delete ",
+        "YES": "Yes, Delete",
+        "NO": "No"
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Macro deleted successfully",
+        "ERROR_MESSAGE": "There was an error deleting the macro. Please try again later"
+      }
+    },
+    "EDIT": {
+      "TOOLTIP": "Edit macro",
+      "API": {
+        "SUCCESS_MESSAGE": "Macro updated successfully",
+        "ERROR_MESSAGE": "Could not update Macro, Please try again later"
+      }
+    },
+    "EDITOR": {
+      "START_FLOW": "Start Flow",
+      "END_FLOW": "End Flow",
+      "LOADING": "Fetching macro",
+      "ADD_BTN_TOOLTIP": "Add new action",
+      "DELETE_BTN_TOOLTIP": "Delete Action",
+      "VISIBILITY": {
+        "LABEL": "Macro Visibility",
+        "GLOBAL": {
+          "LABEL": "Public",
+          "DESCRIPTION": "This macro is available publicly for all agents in this account."
+        },
+        "PERSONAL": {
+          "LABEL": "Private",
+          "DESCRIPTION": "This macro will be private to you and not be available to others."
+        }
+      }
+    }
   }
 }
diff --git a/app/javascript/dashboard/mixins/macrosMixin.js b/app/javascript/dashboard/mixins/macrosMixin.js
new file mode 100644
index 000000000..d28f82ab5
--- /dev/null
+++ b/app/javascript/dashboard/mixins/macrosMixin.js
@@ -0,0 +1,20 @@
+export default {
+  methods: {
+    getDropdownValues(type) {
+      switch (type) {
+        case 'assign_team':
+        case 'send_email_to_team':
+          return this.teams;
+        case 'add_label':
+          return this.labels.map(i => {
+            return {
+              id: i.title,
+              name: i.title,
+            };
+          });
+        default:
+          return [];
+      }
+    },
+  },
+};
diff --git a/app/javascript/dashboard/mixins/specs/macros.spec.js b/app/javascript/dashboard/mixins/specs/macros.spec.js
new file mode 100644
index 000000000..5c9804ee9
--- /dev/null
+++ b/app/javascript/dashboard/mixins/specs/macros.spec.js
@@ -0,0 +1,41 @@
+import { createWrapper } from '@vue/test-utils';
+import macrosMixin from '../macrosMixin';
+import Vue from 'vue';
+import { teams, labels } from '../../helper/specs/macrosFixtures';
+describe('webhookMixin', () => {
+  describe('#getEventLabel', () => {
+    it('returns correct i18n translation:', () => {
+      const Component = {
+        render() {},
+        title: 'MyComponent',
+        mixins: [macrosMixin],
+        data: () => {
+          return {
+            teams,
+            labels,
+          };
+        },
+        methods: {
+          $t(text) {
+            return text;
+          },
+        },
+      };
+
+      const resolvedLabels = labels.map(i => {
+        return {
+          id: i.title,
+          name: i.title,
+        };
+      });
+
+      const Constructor = Vue.extend(Component);
+      const vm = new Constructor().$mount();
+      const wrapper = createWrapper(vm);
+      expect(wrapper.vm.getDropdownValues('assign_team')).toEqual(teams);
+      expect(wrapper.vm.getDropdownValues('send_email_to_team')).toEqual(teams);
+      expect(wrapper.vm.getDropdownValues('add_label')).toEqual(resolvedLabels);
+      expect(wrapper.vm.getDropdownValues()).toEqual([]);
+    });
+  });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index a6feb1346..248aa884b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -225,7 +225,7 @@ export default {
           mode === 'EDIT'
             ? this.$t('AUTOMATION.EDIT.API.SUCCESS_MESSAGE')
             : this.$t('AUTOMATION.ADD.API.SUCCESS_MESSAGE');
-        await await this.$store.dispatch(action, payload);
+        await this.$store.dispatch(action, payload);
         this.showAlert(this.$t(successMessage));
         this.hideAddPopup();
         this.hideEditPopup();
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/ActionButton.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/ActionButton.vue
new file mode 100644
index 000000000..ce5645961
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/ActionButton.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <button
+      v-tooltip="tooltip"
+      class="macros__action-button"
+      :class="type"
+      @click="$emit('click')"
+    >
+      <fluent-icon :icon="icon" aria-hidden="true" />
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'add',
+    },
+    tooltip: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.macros__action-button {
+  height: var(--space-three);
+  width: var(--space-three);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: var(--font-size-default);
+  border-radius: var(--border-radius-rounded);
+  position: relative;
+  margin-left: var(--space-one);
+
+  &.add {
+    background-color: var(--g-100);
+    color: var(--g-600);
+  }
+  &.delete {
+    position: absolute;
+    top: calc(var(--space-three) / -2);
+    right: calc(var(--space-three) / -2);
+    background-color: var(--r-100);
+    color: var(--r-600);
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index 39f017fef..31f661a55 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -1,11 +1,121 @@
 <template>
-  <div>
-    Macros
+  <div class="column content-box">
+    <router-link
+      :to="addAccountScoping('settings/macros/new')"
+      class="button success button--fixed-right-top"
+    >
+      <fluent-icon icon="add-circle" />
+      <span class="button__content">
+        {{ $t('MACROS.HEADER_BTN_TXT') }}
+      </span>
+    </router-link>
+    <div class="row">
+      <div class="small-8 columns with-right-space">
+        <div
+          v-if="!uiFlags.isFetching && !records.length"
+          class="macros__empty-state"
+        >
+          <p class="no-items-error-message">
+            {{ $t('MACROS.LIST.404') }}
+          </p>
+        </div>
+        <woot-loading-state
+          v-if="uiFlags.isFetching"
+          :message="$t('MACROS.LOADING')"
+        />
+        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
+          <thead>
+            <th
+              v-for="thHeader in $t('MACROS.LIST.TABLE_HEADER')"
+              :key="thHeader"
+            >
+              {{ thHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <macros-table-row
+              v-for="(macro, index) in records"
+              :key="index"
+              :macro="macro"
+              @delete="openDeletePopup(macro, index)"
+            />
+          </tbody>
+        </table>
+      </div>
+      <div class="small-4 columns">
+        <span v-dompurify-html="$t('MACROS.SIDEBAR_TXT')" />
+      </div>
+    </div>
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
+      :message="$t('MACROS.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
+      :confirm-text="$t('MACROS.DELETE.CONFIRM.YES')"
+      :reject-text="$t('MACROS.DELETE.CONFIRM.NO')"
+    />
   </div>
 </template>
 
 <script>
-export default {};
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import accountMixin from 'dashboard/mixins/account.js';
+import MacrosTableRow from './MacrosTableRow';
+export default {
+  components: {
+    MacrosTableRow,
+  },
+  mixins: [alertMixin, accountMixin],
+  data() {
+    return {
+      showDeleteConfirmationPopup: false,
+      selectedResponse: {},
+      loading: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      records: ['macros/getMacros'],
+      uiFlags: 'macros/getUIFlags',
+    }),
+    deleteMessage() {
+      return ` ${this.selectedResponse.name}?`;
+    },
+  },
+  mounted() {
+    this.$store.dispatch('macros/get');
+  },
+  methods: {
+    openDeletePopup(response) {
+      this.showDeleteConfirmationPopup = true;
+      this.selectedResponse = response;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    confirmDeletion() {
+      this.loading[this.selectedResponse.id] = true;
+      this.closeDeletePopup();
+      this.deleteMacro(this.selectedResponse.id);
+    },
+    async deleteMacro(id) {
+      try {
+        await this.$store.dispatch('macros/delete', id);
+        this.showAlert(this.$t('MACROS.DELETE.API.SUCCESS_MESSAGE'));
+        this.loading[this.selectedResponse.id] = false;
+      } catch (error) {
+        this.showAlert(this.$t('MACROS.DELETE.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
 </script>
 
-<style></style>
+<style scoped>
+.macros__empty-state {
+  padding: var(--space-slab);
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
index 2de1f787c..b3ead6750 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
@@ -1,9 +1,137 @@
 <template>
-  <div>MacrosEditor</div>
+  <div class="column content-box">
+    <woot-loading-state
+      v-if="uiFlags.isFetchingItem"
+      :message="$t('MACROS.EDITOR.LOADING')"
+    />
+    <macro-form
+      v-if="macro && !uiFlags.isFetchingItem"
+      :macro-data.sync="macro"
+      @submit="saveMacro"
+    />
+  </div>
 </template>
 
 <script>
-export default {};
+import MacroForm from './MacroForm';
+import { MACRO_ACTION_TYPES } from './constants';
+import { mapGetters } from 'vuex';
+import { emptyMacro } from './macroHelper';
+import actionQueryGenerator from 'dashboard/helper/actionQueryGenerator.js';
+import alertMixin from 'shared/mixins/alertMixin';
+import macrosMixin from 'dashboard/mixins/macrosMixin';
+
+export default {
+  components: {
+    MacroForm,
+  },
+  mixins: [alertMixin, macrosMixin],
+  provide() {
+    return {
+      macroActionTypes: this.macroActionTypes,
+    };
+  },
+  data() {
+    return {
+      macro: null,
+      mode: 'CREATE',
+      macroActionTypes: MACRO_ACTION_TYPES,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'macros/getUIFlags',
+      labels: 'labels/getLabels',
+      teams: 'teams/getTeams',
+    }),
+    macroId() {
+      return this.$route.params.macroId;
+    },
+  },
+  watch: {
+    $route: {
+      handler() {
+        if (this.$route.params.macroId) {
+          this.fetchMacro();
+        } else {
+          this.initNewMacro();
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    fetchMacro() {
+      this.mode = 'EDIT';
+      this.$store.dispatch('agents/get');
+      this.$store.dispatch('teams/get');
+      this.$store.dispatch('labels/get');
+      this.manifestMacro();
+    },
+    async manifestMacro() {
+      await this.$store.dispatch('macros/getSingleMacro', this.macroId);
+      const singleMacro = this.$store.getters['macros/getMacro'](this.macroId);
+      this.macro = this.formatMacro(singleMacro);
+    },
+    formatMacro(macro) {
+      const formattedActions = macro.actions.map(action => {
+        let actionParams = [];
+        if (action.action_params.length) {
+          const inputType = this.macroActionTypes.find(
+            item => item.key === action.action_name
+          ).inputType;
+          if (inputType === 'multi_select') {
+            actionParams = [
+              ...this.getDropdownValues(action.action_name, this.$store),
+            ].filter(item => [...action.action_params].includes(item.id));
+          } else if (inputType === 'team_message') {
+            actionParams = {
+              team_ids: [
+                ...this.getDropdownValues(action.action_name, this.$store),
+              ].filter(item =>
+                [...action.action_params[0].team_ids].includes(item.id)
+              ),
+              message: action.action_params[0].message,
+            };
+          } else actionParams = [...action.action_params];
+        }
+        return {
+          ...action,
+          action_params: actionParams,
+        };
+      });
+      return {
+        ...macro,
+        actions: formattedActions,
+      };
+    },
+    initNewMacro() {
+      this.mode = 'CREATE';
+      this.macro = emptyMacro;
+    },
+    async saveMacro(macro) {
+      try {
+        const action = this.mode === 'EDIT' ? 'macros/update' : 'macros/create';
+        let successMessage =
+          this.mode === 'EDIT'
+            ? this.$t('MACROS.EDIT.API.SUCCESS_MESSAGE')
+            : this.$t('MACROS.ADD.API.SUCCESS_MESSAGE');
+        let serializedMacro = JSON.parse(JSON.stringify(macro));
+        serializedMacro.actions = actionQueryGenerator(serializedMacro.actions);
+        await this.$store.dispatch(action, serializedMacro);
+        this.showAlert(successMessage);
+        this.$router.push({ name: 'macros_wrapper' });
+      } catch (error) {
+        this.showAlert(this.$t('MACROS.ERROR'));
+      }
+    },
+  },
+};
 </script>
 
-<style></style>
+<style scoped>
+.content-box {
+  padding: 0;
+  height: 100vh;
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
new file mode 100644
index 000000000..36162db3a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="row">
+    <div class="small-8 columns with-right-space macros-canvas">
+      <macro-nodes
+        v-model="macro.actions"
+        @addNewNode="appendNode"
+        @deleteNode="deleteNode"
+        @resetAction="resetNode"
+      />
+    </div>
+    <div class="small-4 columns">
+      <macro-properties
+        :macro-name="macro.name"
+        :macro-visibility="macro.visibility"
+        @update:name="updateName"
+        @update:visibility="updateVisibility"
+        @submit="submit"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MacroNodes from './MacroNodes';
+import MacroProperties from './MacroProperties';
+import { required, requiredIf } from 'vuelidate/lib/validators';
+
+export default {
+  components: {
+    MacroNodes,
+    MacroProperties,
+  },
+  provide() {
+    return {
+      $v: this.$v,
+    };
+  },
+  props: {
+    macroData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      macro: this.macroData,
+    };
+  },
+  watch: {
+    macroData: {
+      handler() {
+        this.macro = this.macroData;
+      },
+      immediate: true,
+    },
+  },
+  validations: {
+    macro: {
+      name: {
+        required,
+      },
+      visibility: {
+        required,
+      },
+      actions: {
+        required,
+        $each: {
+          action_params: {
+            required: requiredIf(prop => {
+              if (prop.action_name === 'send_email_to_team') return true;
+              return !(
+                prop.action_name === 'mute_conversation' ||
+                prop.action_name === 'snooze_conversation' ||
+                prop.action_name === 'resolve_conversation'
+              );
+            }),
+          },
+        },
+      },
+    },
+  },
+  mounted() {
+    this.$v.$reset();
+  },
+  methods: {
+    updateName(value) {
+      this.macro.name = value;
+    },
+    updateVisibility(value) {
+      this.macro.visibility = value;
+    },
+    appendNode() {
+      this.macro.actions.push({
+        action_name: 'assign_team',
+        action_params: [],
+      });
+    },
+    deleteNode(index) {
+      this.macro.actions.splice(index, 1);
+    },
+    submit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('submit', this.macro);
+    },
+    resetNode(index) {
+      this.macro.actions[index].action_params = [];
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.row {
+  height: 100%;
+}
+.macros-canvas {
+  background-image: radial-gradient(var(--s-100) 1.2px, transparent 0);
+  background-size: var(--space-normal) var(--space-normal);
+  height: 100%;
+  max-height: 100%;
+  padding: var(--space-normal) var(--space-three);
+  max-height: 100vh;
+  overflow-y: auto;
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
new file mode 100644
index 000000000..533512c87
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="macro__node-action-container">
+    <fluent-icon
+      v-if="!singleNode"
+      size="20"
+      icon="navigation"
+      class="macros__node-drag-handle"
+    />
+    <div
+      class="macro__node-action-item"
+      :class="{
+        'has-error': hasError($v.macro.actions.$each[index]),
+      }"
+    >
+      <action-input
+        v-model="actionData"
+        :action-types="macroActionTypes"
+        :dropdown-values="dropdownValues()"
+        :show-action-input="showActionInput"
+        :show-remove-button="false"
+        :is-macro="true"
+        :v="$v.macro.actions.$each[index]"
+        @resetAction="$emit('resetAction')"
+      />
+      <macro-action-button
+        v-if="!singleNode"
+        icon="dismiss-circle"
+        class="macro__node macro__node-action-button-delete"
+        type="delete"
+        :tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
+        @click="$emit('deleteNode')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ActionInput from 'dashboard/components/widgets/AutomationActionInput';
+import MacroActionButton from './ActionButton.vue';
+import macrosMixin from 'dashboard/mixins/macrosMixin';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: {
+    ActionInput,
+    MacroActionButton,
+  },
+  mixins: [macrosMixin],
+  inject: ['macroActionTypes', '$v'],
+  props: {
+    singleNode: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: Object,
+      default: () => ({}),
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      labels: 'labels/getLabels',
+      teams: 'teams/getTeams',
+    }),
+    actionData: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+      },
+    },
+    showActionInput() {
+      if (
+        this.actionData.action_name === 'send_email_to_team' ||
+        this.actionData.action_name === 'send_message'
+      )
+        return false;
+      const type = this.macroActionTypes.find(
+        action => action.key === this.actionData.action_name
+      ).inputType;
+      return !!type;
+    },
+  },
+  methods: {
+    dropdownValues() {
+      return this.getDropdownValues(this.value.action_name, this.$store);
+    },
+    hasError(v) {
+      return !!(v.action_params.$dirty && v.action_params.$error);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.macro__node-action-container {
+  position: relative;
+  .macros__node-drag-handle {
+    position: absolute;
+    left: var(--space-minus-medium);
+    top: var(--space-smaller);
+    cursor: move;
+    color: var(--s-400);
+  }
+  .macro__node-action-item {
+    background-color: var(--white);
+    padding: var(--space-slab);
+    border-radius: var(--border-radius-medium);
+    box-shadow: rgb(0 0 0 / 3%) 0px 6px 24px 0px,
+      rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+
+    .macro__node-action-button-delete {
+      display: none;
+    }
+    &:hover {
+      .macro__node-action-button-delete {
+        display: flex;
+      }
+    }
+    &.has-error {
+      animation: shake 0.3s ease-in-out 0s 2;
+      background-color: var(--r-50);
+    }
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(0.375rem);
+  }
+  50% {
+    transform: translateX(-0.375rem);
+  }
+  75% {
+    transform: translateX(0.375rem);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
new file mode 100644
index 000000000..6e8b82007
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="macros__nodes">
+    <macros-pill :label="$t('MACROS.EDITOR.START_FLOW')" class="macro__node" />
+    <draggable
+      :list="actionData"
+      animation="200"
+      ghost-class="ghost"
+      tag="div"
+      class="macros__nodes-draggable"
+      handle=".macros__node-drag-handle"
+      @start="dragging = true"
+      @end="dragging = false"
+    >
+      <div v-for="(action, i) in actionData" :key="i" class="macro__node">
+        <macro-node
+          v-model="actionData[i]"
+          class="macros__node-action"
+          type="add"
+          :index="i"
+          :single-node="actionData.length === 1"
+          @resetAction="$emit('resetAction', i)"
+          @deleteNode="$emit('deleteNode', i)"
+        />
+      </div>
+    </draggable>
+    <macro-action-button
+      icon="add-circle"
+      class="macro__node"
+      :tooltip="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')"
+      type="add"
+      @click="$emit('addNewNode')"
+    />
+    <macros-pill :label="$t('MACROS.EDITOR.END_FLOW')" class="macro__node" />
+  </div>
+</template>
+
+<script>
+import MacrosPill from './Pill.vue';
+import Draggable from 'vuedraggable';
+import MacroNode from './MacroNode.vue';
+import MacroActionButton from './ActionButton.vue';
+
+export default {
+  components: {
+    Draggable,
+    MacrosPill,
+    MacroNode,
+    MacroActionButton,
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      dragging: false,
+    };
+  },
+  computed: {
+    actionData: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+      },
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.macros__nodes {
+  max-width: 800px;
+}
+
+.macro__node:not(:last-child) {
+  position: relative;
+  padding-bottom: var(--space-three);
+}
+
+.macro__node:not(:last-child):not(.sortable-chosen):after,
+.macros__nodes-draggable:after {
+  content: '';
+  position: absolute;
+  height: var(--space-three);
+  width: var(--space-smaller);
+  margin-left: var(--space-medium);
+  background-image: url("data:image/svg+xml,%3Csvg width='4' height='30' viewBox='0 0 4 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1.50098' y1='0.579529' x2='1.50098' y2='30.5795' stroke='%2393afc8' stroke-width='2' stroke-dasharray='5 5'/%3E%3C/svg%3E%0A");
+}
+
+.macros__nodes-draggable {
+  position: relative;
+  padding-bottom: var(--space-three);
+}
+
+.macros__node-action-container {
+  position: relative;
+  .drag-handle {
+    position: absolute;
+    left: var(--space-minus-medium);
+    top: var(--space-smaller);
+    cursor: move;
+    color: var(--s-400);
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
new file mode 100644
index 000000000..ec8588ef8
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="macros__properties-panel">
+    <div>
+      <woot-input
+        :value="macroName"
+        :label="$t('MACROS.ADD.FORM.NAME.LABEL')"
+        :placeholder="$t('MACROS.ADD.FORM.NAME.PLACEHOLDER')"
+        :error="$v.macro.name.$error ? $t('MACROS.ADD.FORM.NAME.ERROR') : null"
+        :class="{ error: $v.macro.name.$error }"
+        @input="onUpdateName($event)"
+      />
+    </div>
+    <div>
+      <p class="title">{{ $t('MACROS.EDITOR.VISIBILITY.LABEL') }}</p>
+      <div class="macros__form-visibility">
+        <button
+          class="card"
+          :class="isActive('global')"
+          @click="onUpdateVisibility('global')"
+        >
+          <fluent-icon
+            v-if="macroVisibility === 'global'"
+            icon="checkmark-circle"
+            type="solid"
+            class="visibility-check"
+          />
+          <p class="title">
+            {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL') }}
+          </p>
+          <p class="subtitle">
+            {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.DESCRIPTION') }}
+          </p>
+        </button>
+        <button
+          class="card"
+          :class="isActive('personal')"
+          @click="onUpdateVisibility('personal')"
+        >
+          <fluent-icon
+            v-if="macroVisibility === 'personal'"
+            icon="checkmark-circle"
+            type="solid"
+            class="visibility-check"
+          />
+          <p class="title">
+            {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL') }}
+          </p>
+          <p class="subtitle">
+            {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.DESCRIPTION') }}
+          </p>
+        </button>
+      </div>
+      <div class="macros__info-panel">
+        <fluent-icon icon="info" size="20" />
+        <p>
+          {{ $t('MACROS.ORDER_INFO') }}
+        </p>
+      </div>
+    </div>
+    <div class="macros__submit-button">
+      <woot-button
+        size="expanded"
+        color-scheme="success"
+        @click="$emit('submit')"
+      >
+        {{ $t('MACROS.HEADER_BTN_TXT_SAVE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['$v'],
+  props: {
+    macroName: {
+      type: String,
+      default: '',
+    },
+    macroVisibility: {
+      type: String,
+      default: 'global',
+    },
+  },
+  methods: {
+    isActive(key) {
+      return { active: this.macroVisibility === key };
+    },
+    onUpdateName(value) {
+      this.$emit('update:name', value);
+    },
+    onUpdateVisibility(value) {
+      this.$emit('update:visibility', value);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.macros__properties-panel {
+  padding: var(--space-slab);
+  background-color: var(--white);
+  // full screen height subtracted by the height of the header
+  height: calc(100vh - 5.6rem);
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--s-50);
+}
+
+.macros__submit-button {
+  margin-top: auto;
+}
+
+.macros__form-visibility {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-slab);
+
+  .card {
+    padding: var(--space-small);
+    border-radius: var(--border-radius-normal);
+    border: 1px solid var(--s-200);
+    text-align: left;
+    cursor: pointer;
+    position: relative;
+
+    &.active {
+      background-color: var(--w-25);
+      border: 1px solid var(--w-300);
+    }
+
+    .subtitle {
+      font-size: var(--font-size-mini);
+      color: var(--s-500);
+    }
+
+    .title {
+      display: block;
+      margin: 0;
+      font-size: var(--font-size-small);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.8;
+      color: var(--color-body);
+    }
+
+    .visibility-check {
+      position: absolute;
+      color: var(--w-500);
+      top: var(--space-small);
+      right: var(--space-small);
+    }
+  }
+}
+
+.macros__info-panel {
+  margin-top: var(--space-small);
+  display: flex;
+  background-color: var(--s-50);
+  padding: var(--space-small);
+  border-radius: var(--border-radius-normal);
+  align-items: flex-start;
+  svg {
+    flex-shrink: 0;
+  }
+  p {
+    margin-left: var(--space-small);
+    color: var(--s-600);
+  }
+}
+
+::v-deep input[type='text'] {
+  margin-bottom: var(--space-small);
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
new file mode 100644
index 000000000..29419db85
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
@@ -0,0 +1,74 @@
+<template>
+  <tr>
+    <td>{{ macro.name }}</td>
+    <td>
+      <div class="avatar-container">
+        <thumbnail :username="macro.created_by.name" size="24px" />
+        <span class="ml-2">{{ macro.created_by.name }}</span>
+      </div>
+    </td>
+    <td>
+      <div class="avatar-container">
+        <thumbnail :username="macro.updated_by.name" size="24px" />
+        <span class="ml-2">{{ macro.updated_by.name }}</span>
+      </div>
+    </td>
+    <td>{{ visibilityLabel }}</td>
+    <td class="button-wrapper">
+      <router-link :to="addAccountScoping(`settings/macros/${macro.id}/edit`)">
+        <woot-button
+          v-tooltip.top="$t('MACROS.EDIT.TOOLTIP')"
+          variant="smooth"
+          size="tiny"
+          color-scheme="secondary"
+          class-names="grey-btn"
+          icon="edit"
+        />
+      </router-link>
+      <woot-button
+        v-tooltip.top="$t('MACROS.DELETE.TOOLTIP')"
+        variant="smooth"
+        color-scheme="alert"
+        size="tiny"
+        icon="dismiss-circle"
+        class-names="grey-btn"
+        @click="$emit('delete')"
+      />
+    </td>
+  </tr>
+</template>
+
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+import accountMixin from 'dashboard/mixins/account.js';
+export default {
+  components: {
+    Thumbnail,
+  },
+  mixins: [accountMixin],
+  props: {
+    macro: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    visibilityLabel() {
+      return this.macro.visibility === 'global'
+        ? this.$t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL')
+        : this.$t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL');
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.avatar-container {
+  display: flex;
+  align-items: center;
+
+  span {
+    margin-left: var(--space-one);
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Pill.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Pill.vue
new file mode 100644
index 000000000..d17afe774
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Pill.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div class="macros-item macros-pill">
+      <span>{{ label }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.macros-pill {
+  padding: var(--space-slab);
+  background-color: var(--w-500);
+  max-width: max-content;
+  color: var(--white);
+  font-size: var(--font-size-small);
+  border-radius: var(--border-radius-full);
+  position: relative;
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/constants.js b/app/javascript/dashboard/routes/dashboard/settings/macros/constants.js
new file mode 100644
index 000000000..d0638d414
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/constants.js
@@ -0,0 +1,42 @@
+export const MACRO_ACTION_TYPES = [
+  {
+    key: 'assign_team',
+    label: 'Assign a team',
+    inputType: 'multi_select',
+  },
+  {
+    key: 'add_label',
+    label: 'Add a label',
+    inputType: 'multi_select',
+  },
+  {
+    key: 'send_email_transcript',
+    label: 'Send an email transcript',
+    inputType: 'email',
+  },
+  {
+    key: 'mute_conversation',
+    label: 'Mute conversation',
+    inputType: null,
+  },
+  {
+    key: 'snooze_conversation',
+    label: 'Snooze conversation',
+    inputType: null,
+  },
+  {
+    key: 'resolve_conversation',
+    label: 'Resolve conversation',
+    inputType: null,
+  },
+  {
+    key: 'send_attachment',
+    label: 'Send Attachment',
+    inputType: 'attachment',
+  },
+  {
+    key: 'send_message',
+    label: 'Send a message',
+    inputType: 'textarea',
+  },
+];
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/macroHelper.js b/app/javascript/dashboard/routes/dashboard/settings/macros/macroHelper.js
new file mode 100644
index 000000000..134e0d943
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/macroHelper.js
@@ -0,0 +1,10 @@
+export const emptyMacro = {
+  name: '',
+  actions: [
+    {
+      action_name: 'assign_team',
+      action_params: [],
+    },
+  ],
+  visibility: 'global',
+};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
index 9752b79fb..23306a8bf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
@@ -8,10 +8,14 @@ export default {
     {
       path: frontendURL('accounts/:accountId/settings/macros'),
       component: SettingsContent,
-      props: {
-        headerTitle: 'MACROS.HEADER',
-        icon: 'flash-settings',
-        showNewButton: false,
+      props: params => {
+        const showBackButton = params.name !== 'macros_wrapper';
+        return {
+          headerTitle: 'MACROS.HEADER',
+          headerButtonText: 'MACROS.HEADER_BTN_TXT',
+          icon: 'flash-settings',
+          showBackButton,
+        };
       },
       children: [
         {
diff --git a/app/javascript/dashboard/store/index.js b/app/javascript/dashboard/store/index.js
index f2fe95b50..481c6f107 100755
--- a/app/javascript/dashboard/store/index.js
+++ b/app/javascript/dashboard/store/index.js
@@ -2,14 +2,16 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 
 import accounts from './modules/accounts';
-import agents from './modules/agents';
 import agentBots from './modules/agentBots';
+import agents from './modules/agents';
+import articles from './modules/helpCenterArticles';
 import attributes from './modules/attributes';
 import auth from './modules/auth';
 import automations from './modules/automations';
 import bulkActions from './modules/bulkActions';
 import campaigns from './modules/campaigns';
 import cannedResponse from './modules/cannedResponse';
+import categories from './modules/helpCenterCategories';
 import contactConversations from './modules/contactConversations';
 import contactLabels from './modules/contactLabels';
 import contactNotes from './modules/contactNotes';
@@ -30,28 +32,29 @@ import inboxes from './modules/inboxes';
 import inboxMembers from './modules/inboxMembers';
 import integrations from './modules/integrations';
 import labels from './modules/labels';
+import macros from './modules/macros';
 import notifications from './modules/notifications';
+import portals from './modules/helpCenterPortals';
 import reports from './modules/reports';
 import teamMembers from './modules/teamMembers';
 import teams from './modules/teams';
 import userNotificationSettings from './modules/userNotificationSettings';
 import webhooks from './modules/webhooks';
-import articles from './modules/helpCenterArticles';
-import portals from './modules/helpCenterPortals';
-import categories from './modules/helpCenterCategories';
 
 Vue.use(Vuex);
 export default new Vuex.Store({
   modules: {
     accounts,
-    agents,
     agentBots,
+    agents,
+    articles,
     attributes,
     auth,
     automations,
     bulkActions,
     campaigns,
     cannedResponse,
+    categories,
     contactConversations,
     contactLabels,
     contactNotes,
@@ -72,14 +75,13 @@ export default new Vuex.Store({
     inboxMembers,
     integrations,
     labels,
+    macros,
     notifications,
+    portals,
     reports,
     teamMembers,
     teams,
     userNotificationSettings,
     webhooks,
-    articles,
-    portals,
-    categories,
   },
 });
diff --git a/app/javascript/shared/assets/stylesheets/border-radius.scss b/app/javascript/shared/assets/stylesheets/border-radius.scss
index 69a2a804a..76ea3c731 100644
--- a/app/javascript/shared/assets/stylesheets/border-radius.scss
+++ b/app/javascript/shared/assets/stylesheets/border-radius.scss
@@ -1,8 +1,8 @@
 :root {
-    // border-radius
-    --border-radius-small: 0.3rem;
-    --border-radius-normal: 0.5rem;
-    --border-radius-medium: 0.7rem;
-    --border-radius-large: 0.9rem;
-    --border-radius-rounded: 50%;
+  --border-radius-small: 0.3rem;
+  --border-radius-normal: 0.5rem;
+  --border-radius-medium: 0.7rem;
+  --border-radius-large: 0.9rem;
+  --border-radius-full: 10rem;
+  --border-radius-rounded: 50%;
 }
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index bf6f4127d..5b6cda950 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -107,6 +107,7 @@
   "microphone-stop-outline": "M18,18H6V6H18V18Z",
   "microphone-pause-outline": "M14,19H18V5H14M6,19H10V5H6V19Z",
   "microphone-play-outline": "M8,5.14V19.14L19,12.14L8,5.14Z",
+  "navigation-outline": "M3 17h18a1 1 0 0 1 .117 1.993L21 19H3a1 1 0 0 1-.117-1.993L3 17h18H3Zm0-6l18-.002a1 1 0 0 1 .117 1.993l-.117.007L3 13a1 1 0 0 1-.117-1.993L3 11l18-.002L3 11Zm0-6h18a1 1 0 0 1 .117 1.993L21 7H3a1 1 0 0 1-.117-1.993L3 5h18H3Z",
   "number-symbol-outline": "M10.987 2.89a.75.75 0 1 0-1.474-.28L8.494 7.999 3.75 8a.75.75 0 1 0 0 1.5l4.46-.002-.946 5-4.514.002a.75.75 0 0 0 0 1.5l4.23-.002-.967 5.116a.75.75 0 1 0 1.474.278l1.02-5.395 5.474-.002-.968 5.119a.75.75 0 1 0 1.474.278l1.021-5.398 4.742-.002a.75.75 0 1 0 0-1.5l-4.458.002.946-5 4.512-.002a.75.75 0 1 0 0-1.5l-4.229.002.966-5.104a.75.75 0 0 0-1.474-.28l-1.018 5.385-5.474.002.966-5.107Zm-1.25 6.608 5.474-.003-.946 5-5.474.002.946-5Z",
   "open-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.783 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z",
   "panel-sidebar-outline": "M4.75 4A2.75 2.75 0 0 0 2 6.75v10.5A2.75 2.75 0 0 0 4.75 20h14.5A2.75 2.75 0 0 0 22 17.25V6.75A2.75 2.75 0 0 0 19.25 4H4.75ZM9 18.5v-13h10.25c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H9ZM5.5 3.5h4M5.5 5.5h4M5.5 7.5h4M5.5 9.5h4",

From 10d86fbb35e87369778a494b7776db920e9018f8 Mon Sep 17 00:00:00 2001
From: Nusret Ozates <m.nusret.ozates@gmail.com>
Date: Thu, 20 Oct 2022 03:25:16 +0300
Subject: [PATCH 03/27] chore: Ability to Remove password info from sentinel
 config (#4550)

Introduce the REDIS_SENTINEL_PASSWORD environment variable to customize the behaviour of sentinel passwords.

Co-authored-by: EXT02D22861 <nusret.ozates@consultant.turkcell.com.tr>
Co-authored-by: Sojan Jose <sojan@pepalo.com>
---
 .env.example                  |  5 ++++
 lib/redis/config.rb           | 11 ++++++--
 spec/lib/redis/config_spec.rb | 53 ++++++++++++++++++++++++++++-------
 3 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/.env.example b/.env.example
index 12262576e..830ee7bce 100644
--- a/.env.example
+++ b/.env.example
@@ -34,6 +34,11 @@ REDIS_SENTINELS=
 # You can find list of master using "SENTINEL masters" command
 REDIS_SENTINEL_MASTER_NAME=
 
+# By default Chatwoot will pass REDIS_PASSWORD as the password value for sentinels
+# Use the following environment variable to customize passwords for sentinels. 
+# Use empty string if sentinels are configured with out passwords
+# REDIS_SENTINEL_PASSWORD=
+
 # Redis premium breakage in heroku fix
 # enable the following configuration
 # ref: https://github.com/chatwoot/chatwoot/issues/2420
diff --git a/lib/redis/config.rb b/lib/redis/config.rb
index 8e91b5bb0..f35c32c24 100644
--- a/lib/redis/config.rb
+++ b/lib/redis/config.rb
@@ -23,13 +23,20 @@ module Redis::Config
       ENV.fetch('REDIS_SENTINELS', nil).presence
     end
 
+    def sentinel_url_config(sentinel_url)
+      host, port = sentinel_url.split(':').map(&:strip)
+      sentinel_url_config = { host: host, port: port || DEFAULT_SENTINEL_PORT }
+      password = ENV.fetch('REDIS_SENTINEL_PASSWORD', base_config[:password])
+      sentinel_url_config[:password] = password if password.present?
+      sentinel_url_config
+    end
+
     def sentinel_config
       redis_sentinels = ENV.fetch('REDIS_SENTINELS', nil)
 
       # expected format for REDIS_SENTINELS url string is host1:port1, host2:port2
       sentinels = redis_sentinels.split(',').map do |sentinel_url|
-        host, port = sentinel_url.split(':').map(&:strip)
-        { host: host, port: port.presence || DEFAULT_SENTINEL_PORT, password: base_config[:password] }
+        sentinel_url_config(sentinel_url)
       end
 
       # over-write redis url as redis://:<your-redis-password>@<master-name>/ when using sentinel
diff --git a/spec/lib/redis/config_spec.rb b/spec/lib/redis/config_spec.rb
index a9093c341..02e31339c 100644
--- a/spec/lib/redis/config_spec.rb
+++ b/spec/lib/redis/config_spec.rb
@@ -7,11 +7,9 @@ describe ::Redis::Config do
 
     before do
       described_class.instance_variable_set(:@config, nil)
-      allow(ENV).to receive(:fetch).with('REDIS_URL', 'redis://127.0.0.1:6379').and_return(redis_url)
-      allow(ENV).to receive(:fetch).with('REDIS_PASSWORD', nil).and_return(redis_pasword)
-      allow(ENV).to receive(:fetch).with('REDIS_SENTINELS', nil).and_return('')
-      allow(ENV).to receive(:fetch).with('REDIS_SENTINEL_MASTER_NAME', 'mymaster').and_return('')
-      described_class.config
+      with_modified_env REDIS_URL: redis_url, REDIS_PASSWORD: redis_pasword, REDIS_SENTINELS: '', REDIS_SENTINEL_MASTER_NAME: '' do
+        described_class.config
+      end
     end
 
     it 'checks for app redis config' do
@@ -38,11 +36,10 @@ describe ::Redis::Config do
 
     before do
       described_class.instance_variable_set(:@config, nil)
-      allow(ENV).to receive(:fetch).with('REDIS_URL', 'redis://127.0.0.1:6379').and_return(redis_url)
-      allow(ENV).to receive(:fetch).with('REDIS_PASSWORD', nil).and_return(redis_pasword)
-      allow(ENV).to receive(:fetch).with('REDIS_SENTINELS', nil).and_return(redis_sentinels)
-      allow(ENV).to receive(:fetch).with('REDIS_SENTINEL_MASTER_NAME', 'mymaster').and_return(redis_master_name)
-      described_class.config
+      with_modified_env REDIS_URL: redis_url, REDIS_PASSWORD: redis_pasword, REDIS_SENTINELS: redis_sentinels,
+                        REDIS_SENTINEL_MASTER_NAME: redis_master_name do
+        described_class.config
+      end
     end
 
     it 'checks for app redis config' do
@@ -50,5 +47,41 @@ describe ::Redis::Config do
       expect(described_class.app[:url]).to eq("redis://#{redis_master_name}")
       expect(described_class.app[:sentinels]).to match_array(expected_sentinels)
     end
+
+    context 'when redis sentinel is used with REDIS_SENTINEL_PASSWORD empty string' do
+      let(:redis_sentinel_password) { '' }
+
+      before do
+        described_class.instance_variable_set(:@config, nil)
+        with_modified_env REDIS_URL: redis_url, REDIS_PASSWORD: redis_pasword, REDIS_SENTINELS: redis_sentinels,
+                          REDIS_SENTINEL_MASTER_NAME: redis_master_name, REDIS_SENTINEL_PASSWORD: redis_sentinel_password do
+          described_class.config
+        end
+      end
+
+      it 'checks for app redis config and sentinel passwords will be empty' do
+        expect(described_class.app.keys).to match_array([:url, :password, :sentinels, :network_timeout, :reconnect_attempts, :ssl_params])
+        expect(described_class.app[:url]).to eq("redis://#{redis_master_name}")
+        expect(described_class.app[:sentinels]).to match_array(expected_sentinels.map { |s| s.except(:password) })
+      end
+    end
+
+    context 'when redis sentinel is used with REDIS_SENTINEL_PASSWORD' do
+      let(:redis_sentinel_password) { 'sentinel_password' }
+
+      before do
+        described_class.instance_variable_set(:@config, nil)
+        with_modified_env REDIS_URL: redis_url, REDIS_PASSWORD: redis_pasword, REDIS_SENTINELS: redis_sentinels,
+                          REDIS_SENTINEL_MASTER_NAME: redis_master_name, REDIS_SENTINEL_PASSWORD: redis_sentinel_password do
+          described_class.config
+        end
+      end
+
+      it 'checks for app redis config and redis password is replaced in sentinel config' do
+        expect(described_class.app.keys).to match_array([:url, :password, :sentinels, :network_timeout, :reconnect_attempts, :ssl_params])
+        expect(described_class.app[:url]).to eq("redis://#{redis_master_name}")
+        expect(described_class.app[:sentinels]).to match_array(expected_sentinels.map { |s| s.merge(password: redis_sentinel_password) })
+      end
+    end
   end
 end

From a3277b45af1b8bd88fb0b32274b11613df2cff06 Mon Sep 17 00:00:00 2001
From: DanielGannage <45047880+DanielGannage@users.noreply.github.com>
Date: Wed, 19 Oct 2022 20:26:10 -0400
Subject: [PATCH 04/27] feat: Update conversation attributes in realtime when
 they changed (#5542)

Co-authored-by: daniel gannage <daniel@pxdel.com>
Co-authored-by: Tejaswini Chile <tejaswini@chatwoot.com>
---
 app/javascript/dashboard/helper/actionCable.js |  6 ++++++
 app/listeners/action_cable_listener.rb         |  7 +++++++
 spec/listeners/action_cable_listener_spec.rb   | 16 ++++++++++++++++
 3 files changed, 29 insertions(+)

diff --git a/app/javascript/dashboard/helper/actionCable.js b/app/javascript/dashboard/helper/actionCable.js
index e00cf283f..ba21a3e6a 100644
--- a/app/javascript/dashboard/helper/actionCable.js
+++ b/app/javascript/dashboard/helper/actionCable.js
@@ -25,6 +25,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       'notification.created': this.onNotificationCreated,
       'first.reply.created': this.onFirstReplyCreated,
       'conversation.read': this.onConversationRead,
+      'conversation.updated': this.onConversationUpdated,
     };
   }
 
@@ -85,6 +86,11 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.fetchConversationStats();
   };
 
+  onConversationUpdated = data => {
+    this.app.$store.dispatch('updateConversation', data);
+    this.fetchConversationStats();
+  };
+
   onTypingOn = ({ conversation, user }) => {
     const conversationId = conversation.id;
 
diff --git a/app/listeners/action_cable_listener.rb b/app/listeners/action_cable_listener.rb
index 3d3bbdf83..e7c025600 100644
--- a/app/listeners/action_cable_listener.rb
+++ b/app/listeners/action_cable_listener.rb
@@ -52,6 +52,13 @@ class ActionCableListener < BaseListener
     broadcast(account, tokens, CONVERSATION_STATUS_CHANGED, conversation.push_event_data)
   end
 
+  def conversation_updated(event)
+    conversation, account = extract_conversation_and_account(event)
+    tokens = user_tokens(account, conversation.inbox.members) + contact_inbox_tokens(conversation.contact_inbox)
+
+    broadcast(account, tokens, CONVERSATION_UPDATED, conversation.push_event_data)
+  end
+
   def conversation_typing_on(event)
     conversation = event.data[:conversation]
     account = conversation.account
diff --git a/spec/listeners/action_cable_listener_spec.rb b/spec/listeners/action_cable_listener_spec.rb
index d1bad487f..b0c14c4d0 100644
--- a/spec/listeners/action_cable_listener_spec.rb
+++ b/spec/listeners/action_cable_listener_spec.rb
@@ -128,4 +128,20 @@ describe ActionCableListener do
       listener.contact_deleted(event)
     end
   end
+
+  describe '#conversation_updated' do
+    let(:event_name) { :'conversation.updated' }
+    let!(:event) { Events::Base.new(event_name, Time.zone.now, conversation: conversation, user: agent, is_private: false) }
+
+    it 'sends update to inbox members' do
+      expect(conversation.inbox.reload.inbox_members.count).to eq(1)
+
+      expect(ActionCableBroadcastJob).to receive(:perform_later).with(
+        [agent.pubsub_token, admin.pubsub_token, conversation.contact_inbox.pubsub_token],
+        'conversation.updated',
+        conversation.push_event_data.merge(account_id: account.id)
+      )
+      listener.conversation_updated(event)
+    end
+  end
 end

From fa73b5290c39e6fefc1fb8b2821b73fdb23e8542 Mon Sep 17 00:00:00 2001
From: smartdev58 <30475578+smartdev58@users.noreply.github.com>
Date: Thu, 20 Oct 2022 06:16:36 +0200
Subject: [PATCH 05/27] chore: Allow feature flag parameters in platform API
 for account creation (#5589)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../platform/api/v1/accounts_controller.rb    | 16 +++---
 .../api/v1/accounts/create.json.jbuilder      |  1 +
 .../api/v1/accounts/show.json.jbuilder        |  1 +
 .../api/v1/accounts/update.json.jbuilder      |  1 +
 .../api/v1/models/_account.json.jbuilder      |  9 ++++
 .../api/v1/accounts_controller_spec.rb        | 50 +++++++++++++++++--
 6 files changed, 69 insertions(+), 9 deletions(-)
 create mode 100644 app/views/platform/api/v1/accounts/create.json.jbuilder
 create mode 100644 app/views/platform/api/v1/accounts/show.json.jbuilder
 create mode 100644 app/views/platform/api/v1/accounts/update.json.jbuilder
 create mode 100644 app/views/platform/api/v1/models/_account.json.jbuilder

diff --git a/app/controllers/platform/api/v1/accounts_controller.rb b/app/controllers/platform/api/v1/accounts_controller.rb
index 9c8f60f38..78143410f 100644
--- a/app/controllers/platform/api/v1/accounts_controller.rb
+++ b/app/controllers/platform/api/v1/accounts_controller.rb
@@ -3,16 +3,12 @@ class Platform::Api::V1::AccountsController < PlatformController
     @resource = Account.new(account_params)
     @resource.save!
     @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
-    render json: @resource
   end
 
-  def show
-    render json: @resource
-  end
+  def show; end
 
   def update
     @resource.update!(account_params)
-    render json: @resource
   end
 
   def destroy
@@ -27,6 +23,14 @@ class Platform::Api::V1::AccountsController < PlatformController
   end
 
   def account_params
-    params.permit(:name, :locale)
+    if permitted_params[:enabled_features]
+      return permitted_params.except(:enabled_features).merge(selected_feature_flags: permitted_params[:enabled_features].map(&:to_sym))
+    end
+
+    permitted_params
+  end
+
+  def permitted_params
+    params.permit(:name, :locale, enabled_features: [], limits: {})
   end
 end
diff --git a/app/views/platform/api/v1/accounts/create.json.jbuilder b/app/views/platform/api/v1/accounts/create.json.jbuilder
new file mode 100644
index 000000000..449293eb6
--- /dev/null
+++ b/app/views/platform/api/v1/accounts/create.json.jbuilder
@@ -0,0 +1 @@
+json.partial! 'platform/api/v1/models/account', formats: [:json], resource: @resource
diff --git a/app/views/platform/api/v1/accounts/show.json.jbuilder b/app/views/platform/api/v1/accounts/show.json.jbuilder
new file mode 100644
index 000000000..449293eb6
--- /dev/null
+++ b/app/views/platform/api/v1/accounts/show.json.jbuilder
@@ -0,0 +1 @@
+json.partial! 'platform/api/v1/models/account', formats: [:json], resource: @resource
diff --git a/app/views/platform/api/v1/accounts/update.json.jbuilder b/app/views/platform/api/v1/accounts/update.json.jbuilder
new file mode 100644
index 000000000..449293eb6
--- /dev/null
+++ b/app/views/platform/api/v1/accounts/update.json.jbuilder
@@ -0,0 +1 @@
+json.partial! 'platform/api/v1/models/account', formats: [:json], resource: @resource
diff --git a/app/views/platform/api/v1/models/_account.json.jbuilder b/app/views/platform/api/v1/models/_account.json.jbuilder
new file mode 100644
index 000000000..9a22e6518
--- /dev/null
+++ b/app/views/platform/api/v1/models/_account.json.jbuilder
@@ -0,0 +1,9 @@
+json.id resource.id
+json.name resource.name
+json.locale resource.locale
+json.domain resource.domain
+json.support_email resource.support_email
+json.enabled_features resource.enabled_features
+json.custom_attributes resource.custom_attributes
+json.limits resource.limits
+json.status resource.status
diff --git a/spec/controllers/platform/api/v1/accounts_controller_spec.rb b/spec/controllers/platform/api/v1/accounts_controller_spec.rb
index addb3c885..b854e44d4 100644
--- a/spec/controllers/platform/api/v1/accounts_controller_spec.rb
+++ b/spec/controllers/platform/api/v1/accounts_controller_spec.rb
@@ -32,12 +32,49 @@ RSpec.describe 'Platform Accounts API', type: :request do
       end
 
       it 'creates an account with locale' do
+        InstallationConfig.where(name: 'ACCOUNT_LEVEL_FEATURE_DEFAULTS').first_or_create!(value: [{ 'name' => 'agent_management',
+                                                                                                    'enabled' => true }])
         post '/platform/api/v1/accounts', params: { name: 'Test Account', locale: 'es' },
                                           headers: { api_access_token: platform_app.access_token.token }, as: :json
 
+        expect(response).to have_http_status(:success)
+
+        json_response = JSON.parse(response.body)
+        expect(json_response['name']).to eq('Test Account')
+        expect(json_response['locale']).to eq('es')
+        expect(json_response['enabled_features']).to eq(
+          {
+            'agent_management' => true
+          }
+        )
+      end
+
+      it 'creates an account with feature flags' do
+        InstallationConfig.where(name: 'ACCOUNT_LEVEL_FEATURE_DEFAULTS').first_or_create!(value: [{ 'name' => 'inbox_management',
+                                                                                                    'enabled' => true }])
+
+        post '/platform/api/v1/accounts', params: { name: 'Test Account', enabled_features: %w[feature_ip_lookup feature_help_center] },
+                                          headers: { api_access_token: platform_app.access_token.token }, as: :json
+
+        json_response = JSON.parse(response.body)
+        expect(json_response['name']).to include('Test Account')
+        expect(json_response['enabled_features']).to eq(
+          {
+            'inbox_management' => true,
+            'ip_lookup' => true,
+            'help_center' => true
+          }
+        )
+      end
+
+      it 'creates an account with limits settings' do
+        post '/platform/api/v1/accounts', params: { name: 'Test Account', limits: { agents: 5, inboxes: 10 } },
+                                          headers: { api_access_token: platform_app.access_token.token }, as: :json
+
         expect(response).to have_http_status(:success)
         expect(response.body).to include('Test Account')
-        expect(response.body).to include('es')
+        expect(response.body).to include('5')
+        expect(response.body).to include('10')
       end
     end
   end
@@ -105,11 +142,18 @@ RSpec.describe 'Platform Accounts API', type: :request do
       it 'updates an account when its permissible object' do
         create(:platform_app_permissible, platform_app: platform_app, permissible: account)
 
-        patch "/platform/api/v1/accounts/#{account.id}", params: { name: 'Test Account' },
-                                                         headers: { api_access_token: platform_app.access_token.token }, as: :json
+        patch "/platform/api/v1/accounts/#{account.id}", params: {
+          name: 'Test Account',
+          enabled_features: %w[feature_ip_lookup feature_help_center],
+          limits: { agents: 5, inboxes: 10 }
+        }, headers: { api_access_token: platform_app.access_token.token }, as: :json
 
         expect(response).to have_http_status(:success)
         expect(account.reload.name).to eq('Test Account')
+        expect(account.reload.enabled_features['ip_lookup']).to be(true)
+        expect(account.reload.enabled_features['help_center']).to be(true)
+        expect(account.reload.limits['agents']).to eq(5)
+        expect(account.reload.limits['inboxes']).to eq(10)
       end
     end
   end

From a8561cd798626e9c675a042a00e232819da064ed Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Wed, 19 Oct 2022 21:49:34 -0700
Subject: [PATCH 06/27] fix: Add portal pack to tailwind config (#5686)

---
 tailwind.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tailwind.config.js b/tailwind.config.js
index 90408a779..1076ae315 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ const { colors } = require('tailwindcss/defaultTheme');
 module.exports = {
   purge: [
     './app/javascript/widget/**/*.vue',
+    './app/javascript/portal/**/*.vue',
     './app/javascript/shared/**/*.vue',
     './app/javascript/survey/**/*.vue',
     './app/views/**/*.html.erb',

From 4d0b3028029ca8846813a64cef0cceda58691bc9 Mon Sep 17 00:00:00 2001
From: Chad Burggraf <chad.burggraf@gmail.com>
Date: Thu, 20 Oct 2022 19:13:20 -0700
Subject: [PATCH 07/27] Avoid crashing when `AudioContext` is not available.
 (#5641)

#4942. We've also had a number of crash reports show up in our logs related to this. Typically we see "undefined is not a constructor" because of the `window.AudioContext || window.webkitAudioContext` returns `undefined`.
---
 .../shared/helpers/AudioNotificationHelper.js | 51 ++++++++++++-------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/app/javascript/shared/helpers/AudioNotificationHelper.js b/app/javascript/shared/helpers/AudioNotificationHelper.js
index 7db280fa2..a0d5e196e 100644
--- a/app/javascript/shared/helpers/AudioNotificationHelper.js
+++ b/app/javascript/shared/helpers/AudioNotificationHelper.js
@@ -5,29 +5,46 @@ import { showBadgeOnFavicon } from './faviconHelper';
 
 export const initOnEvents = ['click', 'touchstart', 'keypress', 'keydown'];
 export const getAlertAudio = async (baseUrl = '', type = 'dashboard') => {
-  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  const audioCtx = getAudioContext();
+
   const playsound = audioBuffer => {
     window.playAudioAlert = () => {
-      const source = audioCtx.createBufferSource();
-      source.buffer = audioBuffer;
-      source.connect(audioCtx.destination);
-      source.loop = false;
-      source.start();
+      if (audioCtx) {
+        const source = audioCtx.createBufferSource();
+        source.buffer = audioBuffer;
+        source.connect(audioCtx.destination);
+        source.loop = false;
+        source.start();
+      }
     };
   };
 
-  const resourceUrl = `${baseUrl}/audio/${type}/ding.mp3`;
-  const audioRequest = new Request(resourceUrl);
+  if (audioCtx) {
+    const resourceUrl = `${baseUrl}/audio/${type}/ding.mp3`;
+    const audioRequest = new Request(resourceUrl);
 
-  fetch(audioRequest)
-    .then(response => response.arrayBuffer())
-    .then(buffer => {
-      audioCtx.decodeAudioData(buffer).then(playsound);
-      return new Promise(res => res());
-    })
-    .catch(() => {
-      // error
-    });
+    fetch(audioRequest)
+      .then(response => response.arrayBuffer())
+      .then(buffer => {
+        audioCtx.decodeAudioData(buffer).then(playsound);
+        return new Promise(res => res());
+      })
+      .catch(() => {
+        // error
+      });
+  }
+};
+
+export const getAudioContext = () => {
+  let audioCtx;
+
+  try {
+    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  } catch {
+    // AudioContext is not available.
+  }
+
+  return audioCtx;
 };
 
 export const notificationEnabled = (enableAudioAlerts, id, userId) => {

From a274a1702a857092c9407e166c80fbb782cadfc0 Mon Sep 17 00:00:00 2001
From: Tejaswini Chile <tejaswini@chatwoot.com>
Date: Fri, 21 Oct 2022 08:11:48 +0530
Subject: [PATCH 08/27] chore: Macros enhancement (#5609)

- Fixed send_attachment and send_email_transcript
- Fixed duplicate activity messages
- Fixed Order of execution

Fixes: #5584
---
 .../api/v1/accounts/macros_controller.rb      | 24 +++++++++++
 app/models/macro.rb                           | 22 +++++++++-
 app/policies/macro_policy.rb                  |  4 ++
 app/services/action_service.rb                |  6 +++
 .../automation_rules/action_service.rb        | 12 ++----
 app/services/macros/execution_service.rb      | 27 +++++++++----
 app/views/api/v1/models/_macro.json.jbuilder  |  1 +
 config/routes.rb                              |  5 +--
 .../api/v1/accounts/macros_controller_spec.rb | 40 ++++++++++++++++---
 9 files changed, 113 insertions(+), 28 deletions(-)

diff --git a/app/controllers/api/v1/accounts/macros_controller.rb b/app/controllers/api/v1/accounts/macros_controller.rb
index e7946a54e..3e812ed63 100644
--- a/app/controllers/api/v1/accounts/macros_controller.rb
+++ b/app/controllers/api/v1/accounts/macros_controller.rb
@@ -14,6 +14,8 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
     render json: { error: @macro.errors.messages }, status: :unprocessable_entity and return unless @macro.valid?
 
     @macro.save!
+    process_attachments
+    @macro
   end
 
   def show
@@ -25,10 +27,21 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
     head :ok
   end
 
+  def attach_file
+    file_blob = ActiveStorage::Blob.create_and_upload!(
+      key: nil,
+      io: params[:attachment].tempfile,
+      filename: params[:attachment].original_filename,
+      content_type: params[:attachment].content_type
+    )
+    render json: { blob_key: file_blob.key, blob_id: file_blob.id }
+  end
+
   def update
     ActiveRecord::Base.transaction do
       @macro.update!(macros_with_user)
       @macro.set_visibility(current_user, permitted_params)
+      process_attachments
       @macro.save!
     rescue StandardError => e
       Rails.logger.error e
@@ -42,6 +55,17 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
     head :ok
   end
 
+  def process_attachments
+    actions = @macro.actions.filter_map { |k, _v| k if k['action_name'] == 'send_attachment' }
+    return if actions.blank?
+
+    actions.each do |action|
+      blob_id = action['action_params']
+      blob = ActiveStorage::Blob.find_by(id: blob_id)
+      @macro.files.attach(blob)
+    end
+  end
+
   def permitted_params
     params.permit(
       :name, :account_id, :visibility,
diff --git a/app/models/macro.rb b/app/models/macro.rb
index df002d680..188c98ab7 100644
--- a/app/models/macro.rb
+++ b/app/models/macro.rb
@@ -19,17 +19,21 @@
 #  index_macros_on_updated_by_id  (updated_by_id)
 #
 class Macro < ApplicationRecord
+  include Rails.application.routes.url_helpers
+
   belongs_to :account
   belongs_to :created_by,
              class_name: :User
   belongs_to :updated_by,
              class_name: :User
+  has_many_attached :files
+
   enum visibility: { personal: 0, global: 1 }
 
   validate :json_actions_format
 
-  ACTIONS_ATTRS = %w[send_message add_label send_email_to_team assign_team assign_best_agent send_webhook_event mute_conversation change_status
-                     resolve_conversation snooze_conversation].freeze
+  ACTIONS_ATTRS = %w[send_message add_label assign_team assign_best_agent mute_conversation change_status
+                     resolve_conversation snooze_conversation send_email_transcript send_attachment].freeze
 
   def set_visibility(user, params)
     self.visibility = params[:visibility]
@@ -47,6 +51,20 @@ class Macro < ApplicationRecord
     params[:page] || 1
   end
 
+  def file_base_data
+    files.map do |file|
+      {
+        id: file.id,
+        macro_id: id,
+        file_type: file.content_type,
+        account_id: account_id,
+        file_url: url_for(file),
+        blob_id: file.blob_id,
+        filename: file.filename.to_s
+      }
+    end
+  end
+
   private
 
   def json_actions_format
diff --git a/app/policies/macro_policy.rb b/app/policies/macro_policy.rb
index f1a83bc4a..3c67424a5 100644
--- a/app/policies/macro_policy.rb
+++ b/app/policies/macro_policy.rb
@@ -22,4 +22,8 @@ class MacroPolicy < ApplicationPolicy
   def execute?
     true
   end
+
+  def attach_file?
+    true
+  end
 end
diff --git a/app/services/action_service.rb b/app/services/action_service.rb
index 2983b3050..192979da5 100644
--- a/app/services/action_service.rb
+++ b/app/services/action_service.rb
@@ -39,6 +39,12 @@ class ActionService
     @conversation.update!(team_id: team_ids[0])
   end
 
+  def send_email_transcript(emails)
+    emails.each do |email|
+      ConversationReplyMailer.with(account: @conversation.account).conversation_transcript(@conversation, email)&.deliver_later
+    end
+  end
+
   private
 
   def agent_belongs_to_account?(agent_ids)
diff --git a/app/services/automation_rules/action_service.rb b/app/services/automation_rules/action_service.rb
index c28285fe7..ac7ce5d96 100644
--- a/app/services/automation_rules/action_service.rb
+++ b/app/services/automation_rules/action_service.rb
@@ -26,21 +26,15 @@ class AutomationRules::ActionService < ActionService
 
     return unless @rule.files.attached?
 
-    blob = ActiveStorage::Blob.find(blob_ids)
+    blobs = ActiveStorage::Blob.where(id: blob_ids)
 
-    return if blob.blank?
+    return if blobs.blank?
 
-    params = { content: nil, private: false, attachments: blob }
+    params = { content: nil, private: false, attachments: blobs }
     mb = Messages::MessageBuilder.new(nil, @conversation, params)
     mb.perform
   end
 
-  def send_email_transcript(emails)
-    emails.each do |email|
-      ConversationReplyMailer.with(account: @conversation.account).conversation_transcript(@conversation, email)&.deliver_later
-    end
-  end
-
   def send_webhook_event(webhook_url)
     payload = @conversation.webhook_data.merge(event: "automation_event.#{@rule.event_name}")
     WebhookJob.perform_later(webhook_url[0], payload)
diff --git a/app/services/macros/execution_service.rb b/app/services/macros/execution_service.rb
index f9a32ef68..1fdbbb103 100644
--- a/app/services/macros/execution_service.rb
+++ b/app/services/macros/execution_service.rb
@@ -21,18 +21,29 @@ class Macros::ExecutionService < ActionService
 
   private
 
-  def send_webhook_event(webhook_url)
-    payload = @conversation.webhook_data.merge(event: "macro_event.#{@macro.name}")
-    WebhookJob.perform_later(webhook_url[0], payload)
-  end
-
   def send_message(message)
     return if conversation_a_tweet?
 
-    params = { content: message[0], private: false, content_attributes: { macro_id: @macro.id } }
-    mb = Messages::MessageBuilder.new(nil, @conversation, params)
+    params = { content: message[0], private: false }
+
+    # Added reload here to ensure conversation us persistent with the latest updates
+    mb = Messages::MessageBuilder.new(nil, @conversation.reload, params)
     mb.perform
   end
 
-  def send_email_to_team(_params); end
+  def send_attachment(blob_ids)
+    return if conversation_a_tweet?
+
+    return unless @macro.files.attached?
+
+    blobs = ActiveStorage::Blob.where(id: blob_ids)
+
+    return if blobs.blank?
+
+    params = { content: nil, private: false, attachments: blobs }
+
+    # Added reload here to ensure conversation us persistent with the latest updates
+    mb = Messages::MessageBuilder.new(nil, @conversation.reload, params)
+    mb.perform
+  end
 end
diff --git a/app/views/api/v1/models/_macro.json.jbuilder b/app/views/api/v1/models/_macro.json.jbuilder
index 5a13d1ba6..c1a420508 100644
--- a/app/views/api/v1/models/_macro.json.jbuilder
+++ b/app/views/api/v1/models/_macro.json.jbuilder
@@ -16,3 +16,4 @@ end
 
 json.account_id macro.account_id
 json.actions macro.actions
+json.files macro.file_base_data if macro.files.any?
diff --git a/config/routes.rb b/config/routes.rb
index 23c6f1f8a..d11269a97 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -58,9 +58,8 @@ Rails.application.routes.draw do
             post :attach_file, on: :collection
           end
           resources :macros, only: [:index, :create, :show, :update, :destroy] do
-            member do
-              post :execute
-            end
+            post :execute, on: :member
+            post :attach_file, on: :collection
           end
           resources :campaigns, only: [:index, :create, :show, :update, :destroy]
           resources :dashboard_apps, only: [:index, :show, :create, :update, :destroy]
diff --git a/spec/controllers/api/v1/accounts/macros_controller_spec.rb b/spec/controllers/api/v1/accounts/macros_controller_spec.rb
index 7e4be84b1..0bc86ca67 100644
--- a/spec/controllers/api/v1/accounts/macros_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/macros_controller_spec.rb
@@ -117,6 +117,40 @@ RSpec.describe 'Api::V1::Accounts::MacrosController', type: :request do
         expect(json_response['payload']['visibility']).to eql('personal')
         expect(json_response['payload']['created_by']['id']).to eql(agent.id)
       end
+
+      it 'Saves file in the macros actions to send an attachments' do
+        file = fixture_file_upload(Rails.root.join('spec/assets/avatar.png'), 'image/png')
+
+        post "/api/v1/accounts/#{account.id}/macros/attach_file",
+             headers: administrator.create_new_auth_token,
+             params: { attachment: file }
+
+        expect(response).to have_http_status(:success)
+
+        blob = JSON.parse(response.body)
+
+        expect(blob['blob_key']).to be_present
+        expect(blob['blob_id']).to be_present
+
+        params[:actions] = [
+          {
+            'action_name': :send_message,
+            'action_params': ['Welcome to the chatwoot platform.']
+          },
+          {
+            'action_name': :send_attachment,
+            'action_params': [blob['blob_id']]
+          }
+        ]
+
+        post "/api/v1/accounts/#{account.id}/macros",
+             headers: administrator.create_new_auth_token,
+             params: params
+
+        macro = account.macros.last
+        expect(macro.files.presence).to be_truthy
+        expect(macro.files.count).to eq(1)
+      end
     end
   end
 
@@ -196,12 +230,6 @@ RSpec.describe 'Api::V1::Accounts::MacrosController', type: :request do
       create(:account_user, user: user_1, account: account)
       macro.update!(actions:
                               [
-                                {
-                                  'action_name' => 'send_email_to_team', 'action_params' => [{
-                                    'message' => 'Please pay attention to this conversation, its from high priority customer',
-                                    'team_ids' => [team.id]
-                                  }]
-                                },
                                 { 'action_name' => 'assign_team', 'action_params' => [team.id] },
                                 { 'action_name' => 'add_label', 'action_params' => %w[support priority_customer] },
                                 { 'action_name' => 'snooze_conversation' },

From 95cc55d043adef39c2b929c7c965b36ac5ca6e97 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Thu, 20 Oct 2022 20:05:17 -0700
Subject: [PATCH 09/27] fix: Update pagination logic in the help center (#5693)

---
 .../components/widgets/TableFooter.vue        | 48 +++++++++----------
 .../helpcenter/components/ArticleTable.vue    |  8 ++--
 .../pages/articles/ListAllArticles.vue        | 15 +++---
 .../shared/helpers/AudioNotificationHelper.js | 23 +++++----
 .../v1/accounts/articles/index.json.jbuilder  |  1 -
 .../v1/accounts/portals/_portal.json.jbuilder |  1 +
 .../v1/accounts/articles_controller_spec.rb   |  1 -
 7 files changed, 45 insertions(+), 52 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue
index c89b37b01..e28099bff 100644
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -83,75 +83,71 @@ export default {
     },
     pageSize: {
       type: Number,
-      default: 15,
+      default: 25,
     },
     totalCount: {
       type: Number,
       default: 0,
     },
-    onPageChange: {
-      type: Function,
-      default: () => {},
-    },
   },
   computed: {
     isFooterVisible() {
       return this.totalCount && !(this.firstIndex > this.totalCount);
     },
     firstIndex() {
-      const firstIndex = this.pageSize * (this.currentPage - 1) + 1;
-      return firstIndex;
+      return this.pageSize * (this.currentPage - 1) + 1;
     },
     lastIndex() {
-      const index = Math.min(this.totalCount, this.pageSize * this.currentPage);
-      return index;
+      return Math.min(this.totalCount, this.pageSize * this.currentPage);
     },
     searchButtonClass() {
       return this.searchQuery !== '' ? 'show' : '';
     },
     hasLastPage() {
-      const isDisabled =
-        this.currentPage === Math.ceil(this.totalCount / this.pageSize);
-      return isDisabled;
+      return !!Math.ceil(this.totalCount / this.pageSize);
     },
     hasFirstPage() {
-      const isDisabled = this.currentPage === 1;
-      return isDisabled;
+      return this.currentPage === 1;
     },
     hasNextPage() {
-      const isDisabled =
-        this.currentPage === Math.ceil(this.totalCount / this.pageSize);
-      return isDisabled;
+      return this.currentPage === Math.ceil(this.totalCount / this.pageSize);
     },
     hasPrevPage() {
-      const isDisabled = this.currentPage === 1;
-      return isDisabled;
+      return this.currentPage === 1;
     },
   },
   methods: {
     onNextPage() {
-      if (this.hasNextPage) return;
+      if (this.hasNextPage) {
+        return;
+      }
       const newPage = this.currentPage + 1;
       this.onPageChange(newPage);
     },
     onPrevPage() {
-      if (this.hasPrevPage) return;
-
+      if (this.hasPrevPage) {
+        return;
+      }
       const newPage = this.currentPage - 1;
       this.onPageChange(newPage);
     },
     onFirstPage() {
-      if (this.hasFirstPage) return;
-
+      if (this.hasFirstPage) {
+        return;
+      }
       const newPage = 1;
       this.onPageChange(newPage);
     },
     onLastPage() {
-      if (this.hasLastPage) return;
-
+      if (this.hasLastPage) {
+        return;
+      }
       const newPage = Math.ceil(this.totalCount / this.pageSize);
       this.onPageChange(newPage);
     },
+    onPageChange(page) {
+      this.$emit('page-change', page);
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
index 101bc72d7..1f61f3bb7 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
@@ -29,10 +29,10 @@
     </table>
     <table-footer
       v-if="articles.length"
-      :on-page-change="onPageChange"
-      :current-page="Number(currentPage)"
+      :current-page="currentPage"
       :total-count="totalCount"
       :page-size="pageSize"
+      @page-change="onPageChange"
     />
   </div>
 </template>
@@ -60,12 +60,12 @@ export default {
     },
     pageSize: {
       type: Number,
-      default: 15,
+      default: 25,
     },
   },
   methods: {
     onPageChange(page) {
-      this.$emit('on-page-change', page);
+      this.$emit('page-change', page);
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
index 628db3782..34c9d7217 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
@@ -2,16 +2,15 @@
   <div class="container overflow-auto">
     <article-header
       :header-title="headerTitle"
-      :count="articleCount"
+      :count="meta.count"
       selected-value="Published"
       @newArticlePage="newArticlePage"
     />
     <article-table
       :articles="articles"
-      :article-count="articles.length"
       :current-page="Number(meta.currentPage)"
-      :total-count="articleCount"
-      @on-page-change="onPageChange"
+      :total-count="Number(meta.count)"
+      @page-change="onPageChange"
     />
     <div v-if="shouldShowLoader" class="articles--loader">
       <spinner />
@@ -128,9 +127,9 @@ export default {
     newArticlePage() {
       this.$router.push({ name: 'new_article' });
     },
-    fetchArticles() {
+    fetchArticles({ pageNumber } = {}) {
       this.$store.dispatch('articles/index', {
-        pageNumber: this.pageNumber,
+        pageNumber: pageNumber || this.pageNumber,
         portalSlug: this.$route.params.portalSlug,
         locale: this.$route.params.locale,
         status: this.status,
@@ -138,8 +137,8 @@ export default {
         category_slug: this.selectedCategorySlug,
       });
     },
-    onPageChange(page) {
-      this.fetchArticles({ pageNumber: page });
+    onPageChange(pageNumber) {
+      this.fetchArticles({ pageNumber });
     },
   },
 };
diff --git a/app/javascript/shared/helpers/AudioNotificationHelper.js b/app/javascript/shared/helpers/AudioNotificationHelper.js
index a0d5e196e..a80a12e14 100644
--- a/app/javascript/shared/helpers/AudioNotificationHelper.js
+++ b/app/javascript/shared/helpers/AudioNotificationHelper.js
@@ -4,6 +4,17 @@ import { IFrameHelper } from 'widget/helpers/utils';
 import { showBadgeOnFavicon } from './faviconHelper';
 
 export const initOnEvents = ['click', 'touchstart', 'keypress', 'keydown'];
+
+export const getAudioContext = () => {
+  let audioCtx;
+  try {
+    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  } catch {
+    // AudioContext is not available.
+  }
+  return audioCtx;
+};
+
 export const getAlertAudio = async (baseUrl = '', type = 'dashboard') => {
   const audioCtx = getAudioContext();
 
@@ -35,18 +46,6 @@ export const getAlertAudio = async (baseUrl = '', type = 'dashboard') => {
   }
 };
 
-export const getAudioContext = () => {
-  let audioCtx;
-
-  try {
-    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-  } catch {
-    // AudioContext is not available.
-  }
-
-  return audioCtx;
-};
-
 export const notificationEnabled = (enableAudioAlerts, id, userId) => {
   if (enableAudioAlerts === 'mine') {
     return userId === id;
diff --git a/app/views/api/v1/accounts/articles/index.json.jbuilder b/app/views/api/v1/accounts/articles/index.json.jbuilder
index 906cabae1..bcefd6d06 100644
--- a/app/views/api/v1/accounts/articles/index.json.jbuilder
+++ b/app/views/api/v1/accounts/articles/index.json.jbuilder
@@ -5,7 +5,6 @@ end
 json.meta do
   json.current_page @current_page
   json.articles_count @articles_count
-  json.all_articles_count @articles_count
   json.archived_articles_count @articles.archived.size
   json.published_count @articles.published.size
   json.draft_articles_count @articles.draft.size
diff --git a/app/views/api/v1/accounts/portals/_portal.json.jbuilder b/app/views/api/v1/accounts/portals/_portal.json.jbuilder
index 2d1ffb309..46c7a2fb0 100644
--- a/app/views/api/v1/accounts/portals/_portal.json.jbuilder
+++ b/app/views/api/v1/accounts/portals/_portal.json.jbuilder
@@ -7,6 +7,7 @@ json.name portal.name
 json.page_title portal.page_title
 json.slug portal.slug
 json.archived portal.archived
+json.account_id portal.account_id
 
 json.config do
   json.allowed_locales do
diff --git a/spec/controllers/api/v1/accounts/articles_controller_spec.rb b/spec/controllers/api/v1/accounts/articles_controller_spec.rb
index a34079c69..2090533bd 100644
--- a/spec/controllers/api/v1/accounts/articles_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/articles_controller_spec.rb
@@ -195,7 +195,6 @@ RSpec.describe 'Api::V1::Accounts::Articles', type: :request do
         json_response = JSON.parse(response.body)
         expect(json_response['payload'].count).to be 1
         expect(json_response['meta']['articles_count']).to be 2
-        expect(json_response['meta']['all_articles_count']).to be 2
         expect(json_response['meta']['mine_articles_count']).to be 1
       end
     end

From 782165478bd0590baf7e69c6d798c20e89bb67b6 Mon Sep 17 00:00:00 2001
From: Tejaswini Chile <tejaswini@chatwoot.com>
Date: Sat, 22 Oct 2022 02:13:15 +0530
Subject: [PATCH 10/27] fix: Update article count in portal admin dashboard
 (#5647)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../api/v1/accounts/articles_controller.rb    |  7 ++--
 .../api/v1/accounts/categories_controller.rb  |  1 +
 .../api/v1/accounts/portals_controller.rb     |  5 ++-
 .../dashboard/api/helpCenter/categories.js    |  4 +-
 .../dashboard/api/helpCenter/portals.js       |  4 ++
 .../components/HelpCenterLayout.vue           | 40 ++++++++++++-------
 .../helpcenter/components/PortalSwitch.vue    |  8 ----
 .../pages/articles/ListAllArticles.vue        |  3 --
 .../modules/helpCenterCategories/actions.js   |  4 +-
 .../modules/helpCenterPortals/actions.js      | 19 +++++++--
 .../modules/helpCenterPortals/getters.js      |  4 +-
 .../store/modules/helpCenterPortals/index.js  |  6 ++-
 .../modules/helpCenterPortals/mutations.js    | 13 ++++--
 .../helpCenterPortals/specs/actions.spec.js   | 31 +++++++++++++-
 .../helpCenterPortals/specs/mutations.spec.js | 16 ++++++--
 app/models/article.rb                         |  6 +--
 .../accounts/articles/_article.json.jbuilder  |  6 ---
 .../_associated_article.json.jbuilder         |  2 +-
 .../v1/accounts/articles/index.json.jbuilder  |  9 +++--
 .../categories/_category.json.jbuilder        |  2 +-
 .../v1/accounts/portals/_portal.json.jbuilder | 12 +++---
 .../portals/add_members.json.jbuilder         |  2 +-
 .../v1/accounts/portals/create.json.jbuilder  |  2 +-
 .../v1/accounts/portals/index.json.jbuilder   |  4 +-
 .../v1/accounts/portals/show.json.jbuilder    |  2 +-
 .../v1/accounts/portals/update.json.jbuilder  |  2 +-
 .../v1/accounts/articles_controller_spec.rb   |  3 +-
 .../v1/accounts/portals_controller_spec.rb    | 19 +++++++++
 spec/models/article_spec.rb                   | 15 -------
 29 files changed, 157 insertions(+), 94 deletions(-)

diff --git a/app/controllers/api/v1/accounts/articles_controller.rb b/app/controllers/api/v1/accounts/articles_controller.rb
index d650b19d9..50c960206 100644
--- a/app/controllers/api/v1/accounts/articles_controller.rb
+++ b/app/controllers/api/v1/accounts/articles_controller.rb
@@ -5,9 +5,10 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
   before_action :set_current_page, only: [:index]
 
   def index
-    @articles_count = @portal.articles.count
-    @articles = @portal.articles
-    @articles = @articles.search(list_params) if list_params.present?
+    @portal_articles = @portal.articles
+    @all_articles = @portal_articles.search(list_params)
+    @articles_count = @all_articles.count
+    @articles = @all_articles.page(@current_page)
   end
 
   def create
diff --git a/app/controllers/api/v1/accounts/categories_controller.rb b/app/controllers/api/v1/accounts/categories_controller.rb
index bc18b61b8..e28e601d5 100644
--- a/app/controllers/api/v1/accounts/categories_controller.rb
+++ b/app/controllers/api/v1/accounts/categories_controller.rb
@@ -5,6 +5,7 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle
   before_action :set_current_page, only: [:index]
 
   def index
+    @current_locale = params[:locale]
     @categories = @portal.categories.search(params)
   end
 
diff --git a/app/controllers/api/v1/accounts/portals_controller.rb b/app/controllers/api/v1/accounts/portals_controller.rb
index 6ac000b58..62a98a872 100644
--- a/app/controllers/api/v1/accounts/portals_controller.rb
+++ b/app/controllers/api/v1/accounts/portals_controller.rb
@@ -14,7 +14,10 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     @portal.members << agents
   end
 
-  def show; end
+  def show
+    @all_articles = @portal.articles
+    @articles = @all_articles.search(locale: params[:locale])
+  end
 
   def create
     @portal = Current.account.portals.build(portal_params)
diff --git a/app/javascript/dashboard/api/helpCenter/categories.js b/app/javascript/dashboard/api/helpCenter/categories.js
index b6eae3f32..01658497e 100644
--- a/app/javascript/dashboard/api/helpCenter/categories.js
+++ b/app/javascript/dashboard/api/helpCenter/categories.js
@@ -7,8 +7,8 @@ class CategoriesAPI extends PortalsAPI {
     super('categories', { accountScoped: true });
   }
 
-  get({ portalSlug }) {
-    return axios.get(`${this.url}/${portalSlug}/categories`);
+  get({ portalSlug, locale }) {
+    return axios.get(`${this.url}/${portalSlug}/categories?locale=${locale}`);
   }
 
   create({ portalSlug, categoryObj }) {
diff --git a/app/javascript/dashboard/api/helpCenter/portals.js b/app/javascript/dashboard/api/helpCenter/portals.js
index 520453540..28220b0b5 100644
--- a/app/javascript/dashboard/api/helpCenter/portals.js
+++ b/app/javascript/dashboard/api/helpCenter/portals.js
@@ -6,6 +6,10 @@ class PortalsAPI extends ApiClient {
     super('portals', { accountScoped: true });
   }
 
+  getPortal({ portalSlug, locale }) {
+    return axios.get(`${this.url}/${portalSlug}?locale=${locale}`);
+  }
+
   updatePortal({ portalSlug, portalObj }) {
     return axios.patch(`${this.url}/${portalSlug}`, portalObj);
   }
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index 562d6bd07..bda19b764 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -16,7 +16,7 @@
       :accessible-menu-items="accessibleMenuItems"
       :additional-secondary-menu-items="additionalSecondaryMenuItems"
       @open-popover="openPortalPopover"
-      @open-modal="onClickOpenAddCatogoryModal"
+      @open-modal="onClickOpenAddCategoryModal"
     />
     <section class="app-content columns" :class="contentClassName">
       <router-view />
@@ -134,14 +134,14 @@ export default {
     },
     accessibleMenuItems() {
       if (!this.selectedPortal) return [];
+
       const {
-        meta: {
-          all_articles_count: allArticlesCount,
-          mine_articles_count: mineArticlesCount,
-          draft_articles_count: draftArticlesCount,
-          archived_articles_count: archivedArticlesCount,
-        } = {},
-      } = this.selectedPortal;
+        allArticlesCount,
+        mineArticlesCount,
+        draftArticlesCount,
+        archivedArticlesCount,
+      } = this.meta;
+
       return [
         {
           icon: 'book',
@@ -216,6 +216,13 @@ export default {
       return this.selectedPortal ? this.selectedPortal.name : '';
     },
   },
+
+  watch: {
+    selectedPortal() {
+      this.fetchPortalsAndItsCategories();
+    },
+  },
+
   mounted() {
     window.addEventListener('resize', this.handleResize);
     this.handleResize();
@@ -251,12 +258,15 @@ export default {
     toggleSidebar() {
       this.isSidebarOpen = !this.isSidebarOpen;
     },
-    fetchPortalsAndItsCategories() {
-      this.$store.dispatch('portals/index').then(() => {
-        this.$store.dispatch('categories/index', {
-          portalSlug: this.selectedPortalSlug,
-        });
-      });
+    async fetchPortalsAndItsCategories() {
+      await this.$store.dispatch('portals/index');
+
+      const selectedPortalParam = {
+        portalSlug: this.selectedPortalSlug,
+        locale: this.selectedLocaleInPortal,
+      };
+      this.$store.dispatch('portals/show', selectedPortalParam);
+      this.$store.dispatch('categories/index', selectedPortalParam);
       this.$store.dispatch('agents/get');
     },
     toggleKeyShortcutModal() {
@@ -277,7 +287,7 @@ export default {
     closePortalPopover() {
       this.showPortalPopover = false;
     },
-    onClickOpenAddCatogoryModal() {
+    onClickOpenAddCategoryModal() {
       this.showAddCategoryModal = true;
     },
     onClickCloseAddCategoryModal() {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
index 91b8a0467..4404a6c67 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -112,16 +112,8 @@ export default {
     this.selectedLocale = this.locale || this.portal?.meta?.default_locale;
   },
   methods: {
-    fetchPortalsAndItsCategories() {
-      this.$store.dispatch('portals/index').then(() => {
-        this.$store.dispatch('categories/index', {
-          portalSlug: this.portal.slug,
-        });
-      });
-    },
     onClick(event, code, portal) {
       event.preventDefault();
-      this.fetchPortalsAndItsCategories();
       this.$router.push({
         name: 'list_all_locale_articles',
         params: {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
index 34c9d7217..cacbd2195 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
@@ -104,9 +104,6 @@ export default {
       }
       return null;
     },
-    articleCount() {
-      return this.articles ? this.articles.length : 0;
-    },
     headerTitleInCategoryView() {
       return this.categories && this.categories.length
         ? this.selectedCategory.name
diff --git a/app/javascript/dashboard/store/modules/helpCenterCategories/actions.js b/app/javascript/dashboard/store/modules/helpCenterCategories/actions.js
index ebea5d444..2d212ded3 100644
--- a/app/javascript/dashboard/store/modules/helpCenterCategories/actions.js
+++ b/app/javascript/dashboard/store/modules/helpCenterCategories/actions.js
@@ -2,13 +2,13 @@ import categoriesAPI from 'dashboard/api/helpCenter/categories.js';
 import { throwErrorMessage } from 'dashboard/store/utils/api';
 import types from '../../mutation-types';
 export const actions = {
-  index: async ({ commit }, { portalSlug }) => {
+  index: async ({ commit }, { portalSlug, locale }) => {
     try {
       commit(types.SET_UI_FLAG, { isFetching: true });
       if (portalSlug) {
         const {
           data: { payload },
-        } = await categoriesAPI.get({ portalSlug });
+        } = await categoriesAPI.get({ portalSlug, locale });
         commit(types.CLEAR_CATEGORIES);
         const categoryIds = payload.map(category => category.id);
         commit(types.ADD_MANY_CATEGORIES, payload);
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
index 2be7dc03f..bfae85d27 100644
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
@@ -7,14 +7,12 @@ export const actions = {
     try {
       commit(types.SET_UI_FLAG, { isFetching: true });
       const {
-        data: { payload, meta },
+        data: { payload },
       } = await portalAPIs.get();
       commit(types.CLEAR_PORTALS);
       const portalSlugs = payload.map(portal => portal.slug);
       commit(types.ADD_MANY_PORTALS_ENTRY, payload);
       commit(types.ADD_MANY_PORTALS_IDS, portalSlugs);
-
-      commit(types.SET_PORTALS_META, meta);
     } catch (error) {
       throwErrorMessage(error);
     } finally {
@@ -22,6 +20,21 @@ export const actions = {
     }
   },
 
+  show: async ({ commit }, { portalSlug, locale }) => {
+    commit(types.SET_UI_FLAG, { isFetchingItem: true });
+    try {
+      const response = await portalAPIs.getPortal({ portalSlug, locale });
+      const {
+        data: { meta },
+      } = response;
+      commit(types.SET_PORTALS_META, meta);
+    } catch (error) {
+      // Ignore error
+    } finally {
+      commit(types.SET_UI_FLAG, { isFetchingItem: false });
+    }
+  },
+
   create: async ({ commit }, params) => {
     commit(types.SET_UI_FLAG, { isCreating: true });
     try {
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js b/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js
index c3cc790aa..b52f6b4ad 100644
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js
@@ -20,7 +20,5 @@ export const getters = {
     return portals;
   },
   count: state => state.portals.allIds.length || 0,
-  getMeta: state => {
-    return state.meta;
-  },
+  getMeta: state => state.meta,
 };
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/index.js b/app/javascript/dashboard/store/modules/helpCenterPortals/index.js
index fecb17d4d..346eb9e33 100755
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/index.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/index.js
@@ -10,8 +10,10 @@ export const defaultPortalFlags = {
 
 const state = {
   meta: {
-    count: 0,
-    currentPage: 1,
+    allArticlesCount: 0,
+    mineArticlesCount: 0,
+    draftArticlesCount: 0,
+    archivedArticlesCount: 0,
   },
 
   portals: {
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
index 421b0dc7e..dcce09854 100644
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
@@ -44,9 +44,16 @@ export const mutations = {
   },
 
   [types.SET_PORTALS_META]: ($state, data) => {
-    const { portals_count: count, current_page: currentPage } = data;
-    Vue.set($state.meta, 'count', count);
-    Vue.set($state.meta, 'currentPage', currentPage);
+    const {
+      all_articles_count: allArticlesCount,
+      mine_articles_count: mineArticlesCount,
+      draft_articles_count: draftArticlesCount,
+      archived_articles_count: archivedArticlesCount,
+    } = data;
+    Vue.set($state.meta, 'allArticlesCount', allArticlesCount);
+    Vue.set($state.meta, 'archivedArticlesCount', archivedArticlesCount);
+    Vue.set($state.meta, 'mineArticlesCount', mineArticlesCount);
+    Vue.set($state.meta, 'draftArticlesCount', draftArticlesCount);
   },
 
   [types.ADD_PORTAL_ID]($state, portalSlug) {
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js
index aeda57df0..6fdd054b3 100644
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js
@@ -22,7 +22,6 @@ describe('#actions', () => {
         [types.CLEAR_PORTALS],
         [types.ADD_MANY_PORTALS_ENTRY, apiResponse.payload],
         [types.ADD_MANY_PORTALS_IDS, ['domain', 'campaign']],
-        [types.SET_PORTALS_META, { current_page: 1, portals_count: 1 }],
         [types.SET_UI_FLAG, { isFetching: false }],
       ]);
     });
@@ -66,6 +65,36 @@ describe('#actions', () => {
     });
   });
 
+  describe('#show', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: { meta: { all_articles_count: 1 } },
+      });
+      await actions.show(
+        { commit },
+        {
+          portalSlug: 'handbook',
+          locale: 'en',
+        }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_UI_FLAG, { isFetchingItem: true }],
+        [types.SET_PORTALS_META, { all_articles_count: 1 }],
+        [types.SET_UI_FLAG, { isFetchingItem: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.create({ commit, dispatch, state: { portals: {} } }, {})
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_UI_FLAG, { isCreating: true }],
+        [types.SET_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
   describe('#update', () => {
     it('sends correct actions if API is success', async () => {
       axios.patch.mockResolvedValue({ data: apiResponse.payload[1] });
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js
index d20cacd1b..2e58c1de7 100644
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js
@@ -107,12 +107,20 @@ describe('#mutations', () => {
   describe('#SET_PORTALS_META', () => {
     it('add meta to state', () => {
       mutations[types.SET_PORTALS_META](state, {
-        portals_count: 10,
-        current_page: 1,
-      });
-      expect(state.meta).toEqual({
         count: 10,
         currentPage: 1,
+        all_articles_count: 10,
+        archived_articles_count: 10,
+        draft_articles_count: 10,
+        mine_articles_count: 10,
+      });
+      expect(state.meta).toEqual({
+        count: 0,
+        currentPage: 1,
+        allArticlesCount: 10,
+        archivedArticlesCount: 10,
+        draftArticlesCount: 10,
+        mineArticlesCount: 10,
       });
     });
   });
diff --git a/app/models/article.rb b/app/models/article.rb
index ac6506d01..351053380 100644
--- a/app/models/article.rb
+++ b/app/models/article.rb
@@ -83,11 +83,7 @@ class Article < ApplicationRecord
     ).search_by_category_locale(params[:locale]).search_by_author(params[:author_id]).search_by_status(params[:status])
 
     records = records.text_search(params[:query]) if params[:query].present?
-    records.page(current_page(params))
-  end
-
-  def self.current_page(params)
-    params[:page] || 1
+    records
   end
 
   def associate_root_article(associated_article_id)
diff --git a/app/views/api/v1/accounts/articles/_article.json.jbuilder b/app/views/api/v1/accounts/articles/_article.json.jbuilder
index 4a0d8a505..19b759161 100644
--- a/app/views/api/v1/accounts/articles/_article.json.jbuilder
+++ b/app/views/api/v1/accounts/articles/_article.json.jbuilder
@@ -13,12 +13,6 @@ json.category do
   json.locale article.category.locale
 end
 
-if article.portal.present?
-  json.portal do
-    json.partial! 'api/v1/accounts/portals/portal', formats: [:json], portal: article.portal
-  end
-end
-
 json.views article.views
 
 if article.author.present?
diff --git a/app/views/api/v1/accounts/articles/_associated_article.json.jbuilder b/app/views/api/v1/accounts/articles/_associated_article.json.jbuilder
index 74101ed33..342018857 100644
--- a/app/views/api/v1/accounts/articles/_associated_article.json.jbuilder
+++ b/app/views/api/v1/accounts/articles/_associated_article.json.jbuilder
@@ -8,7 +8,7 @@ json.account_id article.account_id
 
 if article.portal.present?
   json.portal do
-    json.partial! 'api/v1/accounts/portals/portal', formats: [:json], portal: article.portal
+    json.partial! 'api/v1/accounts/portals/portal', formats: [:json], portal: article.portal, articles: []
   end
 end
 
diff --git a/app/views/api/v1/accounts/articles/index.json.jbuilder b/app/views/api/v1/accounts/articles/index.json.jbuilder
index bcefd6d06..afc8b14d9 100644
--- a/app/views/api/v1/accounts/articles/index.json.jbuilder
+++ b/app/views/api/v1/accounts/articles/index.json.jbuilder
@@ -3,10 +3,11 @@ json.payload do
 end
 
 json.meta do
-  json.current_page @current_page
-  json.articles_count @articles_count
+  json.all_articles_count @portal_articles.size
   json.archived_articles_count @articles.archived.size
+  json.articles_count @articles_count
+  json.current_page @current_page
+  json.draft_articles_count @all_articles.draft.size
+  json.mine_articles_count @all_articles.search_by_author(current_user.id).size if current_user.present?
   json.published_count @articles.published.size
-  json.draft_articles_count @articles.draft.size
-  json.mine_articles_count @articles.search_by_author(current_user.id).size if current_user.present?
 end
diff --git a/app/views/api/v1/accounts/categories/_category.json.jbuilder b/app/views/api/v1/accounts/categories/_category.json.jbuilder
index 35105c813..825b9c2d7 100644
--- a/app/views/api/v1/accounts/categories/_category.json.jbuilder
+++ b/app/views/api/v1/accounts/categories/_category.json.jbuilder
@@ -27,5 +27,5 @@ if category.root_category.present?
 end
 
 json.meta do
-  json.articles_count category.articles.size
+  json.articles_count category.articles.search(locale: @current_locale).size
 end
diff --git a/app/views/api/v1/accounts/portals/_portal.json.jbuilder b/app/views/api/v1/accounts/portals/_portal.json.jbuilder
index 46c7a2fb0..b17c844d9 100644
--- a/app/views/api/v1/accounts/portals/_portal.json.jbuilder
+++ b/app/views/api/v1/accounts/portals/_portal.json.jbuilder
@@ -28,11 +28,11 @@ json.portal_members do
 end
 
 json.meta do
-  json.all_articles_count portal.articles.size
-  json.archived_articles_count portal.articles.archived.size
-  json.published_count portal.articles.published.size
-  json.draft_articles_count portal.articles.draft.size
-  json.mine_articles_count portal.articles.search_by_author(current_user.id).size if current_user.present?
-  json.categories_count portal.categories.size
+  json.all_articles_count articles.try(:size)
+  json.archived_articles_count articles.try(:archived).try(:size)
+  json.published_count articles.try(:published).try(:size)
+  json.draft_articles_count articles.try(:draft).try(:size)
+  json.mine_articles_count articles.search_by_author(current_user.id).try(:size) if current_user.present? && articles.any?
+  json.categories_count portal.categories.try(:size)
   json.default_locale portal.default_locale
 end
diff --git a/app/views/api/v1/accounts/portals/add_members.json.jbuilder b/app/views/api/v1/accounts/portals/add_members.json.jbuilder
index f4bc72924..40641fa79 100644
--- a/app/views/api/v1/accounts/portals/add_members.json.jbuilder
+++ b/app/views/api/v1/accounts/portals/add_members.json.jbuilder
@@ -1 +1 @@
-json.partial! 'portal', portal: @portal
+json.partial! 'portal', portal: @portal, articles: []
diff --git a/app/views/api/v1/accounts/portals/create.json.jbuilder b/app/views/api/v1/accounts/portals/create.json.jbuilder
index f4bc72924..40641fa79 100644
--- a/app/views/api/v1/accounts/portals/create.json.jbuilder
+++ b/app/views/api/v1/accounts/portals/create.json.jbuilder
@@ -1 +1 @@
-json.partial! 'portal', portal: @portal
+json.partial! 'portal', portal: @portal, articles: []
diff --git a/app/views/api/v1/accounts/portals/index.json.jbuilder b/app/views/api/v1/accounts/portals/index.json.jbuilder
index 2fb93d918..d602b660b 100644
--- a/app/views/api/v1/accounts/portals/index.json.jbuilder
+++ b/app/views/api/v1/accounts/portals/index.json.jbuilder
@@ -1,5 +1,7 @@
 json.payload do
-  json.array! @portals, partial: 'portal', as: :portal
+  json.array! @portals.each do |portal|
+    json.partial! 'portal', formats: [:json], portal: portal, articles: []
+  end
 end
 
 json.meta do
diff --git a/app/views/api/v1/accounts/portals/show.json.jbuilder b/app/views/api/v1/accounts/portals/show.json.jbuilder
index f4bc72924..6350b5a73 100644
--- a/app/views/api/v1/accounts/portals/show.json.jbuilder
+++ b/app/views/api/v1/accounts/portals/show.json.jbuilder
@@ -1 +1 @@
-json.partial! 'portal', portal: @portal
+json.partial! 'portal', portal: @portal, articles: @articles
diff --git a/app/views/api/v1/accounts/portals/update.json.jbuilder b/app/views/api/v1/accounts/portals/update.json.jbuilder
index f4bc72924..40641fa79 100644
--- a/app/views/api/v1/accounts/portals/update.json.jbuilder
+++ b/app/views/api/v1/accounts/portals/update.json.jbuilder
@@ -1 +1 @@
-json.partial! 'portal', portal: @portal
+json.partial! 'portal', portal: @portal, articles: []
diff --git a/spec/controllers/api/v1/accounts/articles_controller_spec.rb b/spec/controllers/api/v1/accounts/articles_controller_spec.rb
index 2090533bd..1de808a20 100644
--- a/spec/controllers/api/v1/accounts/articles_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/articles_controller_spec.rb
@@ -194,7 +194,8 @@ RSpec.describe 'Api::V1::Accounts::Articles', type: :request do
         expect(response).to have_http_status(:success)
         json_response = JSON.parse(response.body)
         expect(json_response['payload'].count).to be 1
-        expect(json_response['meta']['articles_count']).to be 2
+        expect(json_response['meta']['all_articles_count']).to be 2
+        expect(json_response['meta']['articles_count']).to be 1
         expect(json_response['meta']['mine_articles_count']).to be 1
       end
     end
diff --git a/spec/controllers/api/v1/accounts/portals_controller_spec.rb b/spec/controllers/api/v1/accounts/portals_controller_spec.rb
index 71a4b755d..8333d52e5 100644
--- a/spec/controllers/api/v1/accounts/portals_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/portals_controller_spec.rb
@@ -50,6 +50,25 @@ RSpec.describe 'Api::V1::Accounts::Portals', type: :request do
         expect(response).to have_http_status(:success)
         json_response = JSON.parse(response.body)
         expect(json_response['name']).to eq portal.name
+        expect(json_response['meta']['all_articles_count']).to eq 0
+      end
+
+      it 'returns portal articles metadata' do
+        portal.update(config: { allowed_locales: %w[en es], default_locale: 'en' })
+        en_cat = create(:category, locale: :en, portal_id: portal.id, slug: 'en-cat')
+        es_cat = create(:category, locale: :es, portal_id: portal.id, slug: 'es-cat')
+        create(:article, category_id: en_cat.id, portal_id: portal.id, author_id: agent.id)
+        create(:article, category_id: en_cat.id, portal_id: portal.id, author_id: admin.id)
+        create(:article, category_id: es_cat.id, portal_id: portal.id, author_id: agent.id)
+
+        get "/api/v1/accounts/#{account.id}/portals/#{portal.slug}?locale=en",
+            headers: agent.create_new_auth_token
+
+        expect(response).to have_http_status(:success)
+        json_response = JSON.parse(response.body)
+        expect(json_response['name']).to eq portal.name
+        expect(json_response['meta']['all_articles_count']).to eq 2
+        expect(json_response['meta']['mine_articles_count']).to eq 1
       end
     end
   end
diff --git a/spec/models/article_spec.rb b/spec/models/article_spec.rb
index 2e0f957dc..dac5a3d52 100644
--- a/spec/models/article_spec.rb
+++ b/spec/models/article_spec.rb
@@ -126,20 +126,5 @@ RSpec.describe Article, type: :model do
         expect(article.slug).to include('the-awesome-article-1')
       end
     end
-
-    context 'with pagination' do
-      it 'returns paginated articles' do
-        build_list(:article, 30) do |record, i|
-          record.category_id = category_2.id
-          record.title = "title #{i}"
-          record.portal_id = portal_2.id
-          record.author_id = user.id
-          record.save!
-        end
-        params = { category_slug: 'category_2' }
-        records = portal_2.articles.search(params)
-        expect(records.count).to eq(25)
-      end
-    end
   end
 end

From 4a299a9441d338cd2ff8286df9213da49da1b455 Mon Sep 17 00:00:00 2001
From: Tejaswini Chile <tejaswini@chatwoot.com>
Date: Sat, 22 Oct 2022 04:42:35 +0530
Subject: [PATCH 11/27] fix: Add an action cable events for label updates
 (#5694)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../store/modules/conversations/actions.js     |  6 ++++++
 app/models/conversation.rb                     |  2 ++
 .../conversations/event_data_presenter.rb      |  1 +
 spec/listeners/action_cable_listener_spec.rb   | 15 +++++++++++++++
 spec/models/conversation_spec.rb               | 18 ++++++++++++++++--
 .../conversations/event_data_presenter_spec.rb |  1 +
 6 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/store/modules/conversations/actions.js b/app/javascript/dashboard/store/modules/conversations/actions.js
index 22c6721c1..e38f1a7b2 100644
--- a/app/javascript/dashboard/store/modules/conversations/actions.js
+++ b/app/javascript/dashboard/store/modules/conversations/actions.js
@@ -252,6 +252,12 @@ const actions = {
       meta: { sender },
     } = conversation;
     commit(types.UPDATE_CONVERSATION, conversation);
+
+    dispatch('conversationLabels/setConversationLabel', {
+      id: conversation.id,
+      data: conversation.labels,
+    });
+
     dispatch('contacts/setContact', sender);
   },
 
diff --git a/app/models/conversation.rb b/app/models/conversation.rb
index 29eab8433..3a1abf335 100644
--- a/app/models/conversation.rb
+++ b/app/models/conversation.rb
@@ -262,6 +262,8 @@ class Conversation < ApplicationRecord
     previous_labels, current_labels = previous_changes[:label_list]
     return unless (previous_labels.is_a? Array) && (current_labels.is_a? Array)
 
+    dispatcher_dispatch(CONVERSATION_UPDATED, previous_changes)
+
     create_label_added(user_name, current_labels - previous_labels)
     create_label_removed(user_name, previous_labels - current_labels)
   end
diff --git a/app/presenters/conversations/event_data_presenter.rb b/app/presenters/conversations/event_data_presenter.rb
index 5981af051..d7e170bfa 100644
--- a/app/presenters/conversations/event_data_presenter.rb
+++ b/app/presenters/conversations/event_data_presenter.rb
@@ -8,6 +8,7 @@ class Conversations::EventDataPresenter < SimpleDelegator
       id: display_id,
       inbox_id: inbox_id,
       messages: push_messages,
+      labels: label_list,
       meta: push_meta,
       status: status,
       custom_attributes: custom_attributes,
diff --git a/spec/listeners/action_cable_listener_spec.rb b/spec/listeners/action_cable_listener_spec.rb
index b0c14c4d0..fc8c7f589 100644
--- a/spec/listeners/action_cable_listener_spec.rb
+++ b/spec/listeners/action_cable_listener_spec.rb
@@ -133,6 +133,10 @@ describe ActionCableListener do
     let(:event_name) { :'conversation.updated' }
     let!(:event) { Events::Base.new(event_name, Time.zone.now, conversation: conversation, user: agent, is_private: false) }
 
+    before do
+      conversation.add_labels(['support'])
+    end
+
     it 'sends update to inbox members' do
       expect(conversation.inbox.reload.inbox_members.count).to eq(1)
 
@@ -143,5 +147,16 @@ describe ActionCableListener do
       )
       listener.conversation_updated(event)
     end
+
+    it 'broadcast event with label data' do
+      expect(conversation.push_event_data[:labels]).to eq(conversation.label_list)
+
+      expect(ActionCableBroadcastJob).to receive(:perform_later).with(
+        [agent.pubsub_token, admin.pubsub_token, conversation.contact_inbox.pubsub_token],
+        'conversation.updated',
+        conversation.push_event_data.merge(account_id: account.id)
+      )
+      listener.conversation_updated(event)
+    end
   end
 end
diff --git a/spec/models/conversation_spec.rb b/spec/models/conversation_spec.rb
index 3271bdf19..309b28afe 100644
--- a/spec/models/conversation_spec.rb
+++ b/spec/models/conversation_spec.rb
@@ -109,12 +109,25 @@ RSpec.describe Conversation, type: :model do
       Current.user = old_assignee
     end
 
+    it 'sends conversation updated event if labels are updated' do
+      conversation.update(label_list: [label.title])
+      changed_attributes = conversation.previous_changes
+      expect(Rails.configuration.dispatcher).to have_received(:dispatch)
+        .with(
+          described_class::CONVERSATION_UPDATED,
+          kind_of(Time),
+          conversation: conversation,
+          notifiable_assignee_change: false,
+          changed_attributes: changed_attributes,
+          performed_by: nil
+        )
+    end
+
     it 'runs after_update callbacks' do
       conversation.update(
         status: :resolved,
         contact_last_seen_at: Time.now,
-        assignee: new_assignee,
-        label_list: [label.title]
+        assignee: new_assignee
       )
       status_change = conversation.status_change
       changed_attributes = conversation.previous_changes
@@ -433,6 +446,7 @@ RSpec.describe Conversation, type: :model do
         },
         id: conversation.display_id,
         messages: [],
+        labels: [],
         inbox_id: conversation.inbox_id,
         status: conversation.status,
         contact_inbox: conversation.contact_inbox,
diff --git a/spec/presenters/conversations/event_data_presenter_spec.rb b/spec/presenters/conversations/event_data_presenter_spec.rb
index c883597a8..534d4b8fc 100644
--- a/spec/presenters/conversations/event_data_presenter_spec.rb
+++ b/spec/presenters/conversations/event_data_presenter_spec.rb
@@ -19,6 +19,7 @@ RSpec.describe Conversations::EventDataPresenter do
         id: conversation.display_id,
         messages: [],
         inbox_id: conversation.inbox_id,
+        labels: [],
         status: conversation.status,
         contact_inbox: conversation.contact_inbox,
         can_reply: conversation.can_reply?,

From c3426929d7589fa90801a569e8da1e4ef1236855 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Sat, 22 Oct 2022 05:13:43 +0530
Subject: [PATCH 12/27] chore: Refactor sidebar components used in help center
 (#5695)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../api/v1/accounts/articles_controller.rb    |  2 +-
 .../SecondaryChildNavItem.vue                 | 17 +++--
 .../sidebarComponents/SecondaryNavItem.vue    | 75 +++++++------------
 .../components/HelpCenterLayout.vue           |  6 +-
 .../helpcenter/components/PortalListItem.vue  |  8 +-
 .../helpcenter/components/Sidebar/Sidebar.vue | 14 +++-
 .../components/Sidebar/SidebarHeader.vue      |  2 +-
 .../pages/articles/DefaultPortalArticles.vue  |  4 +-
 .../pages/portals/PortalDetails.vue           | 12 +--
 .../modules/helpCenterPortals/mutations.js    |  8 +-
 10 files changed, 68 insertions(+), 80 deletions(-)

diff --git a/app/controllers/api/v1/accounts/articles_controller.rb b/app/controllers/api/v1/accounts/articles_controller.rb
index 50c960206..a7891ffd4 100644
--- a/app/controllers/api/v1/accounts/articles_controller.rb
+++ b/app/controllers/api/v1/accounts/articles_controller.rb
@@ -38,7 +38,7 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
   end
 
   def portal
-    @portal ||= Current.account.portals.find_by(slug: params[:portal_id])
+    @portal ||= Current.account.portals.find_by!(slug: params[:portal_id])
   end
 
   def article_params
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
index de10dda4a..2dd23544f 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -26,7 +26,7 @@
           :class="{ 'text-truncate': shouldTruncate }"
         >
           {{ label }}
-          <span v-if="isHelpCenterSidebar && childItemCount" class="count-view">
+          <span v-if="showChildCount" class="count-view">
             {{ childItemCount }}
           </span>
         </span>
@@ -76,7 +76,7 @@ export default {
       type: String,
       default: '',
     },
-    isHelpCenterSidebar: {
+    showChildCount: {
       type: Boolean,
       default: false,
     },
@@ -127,11 +127,16 @@ $label-badge-size: var(--space-slab);
     color: var(--w-500);
     border-color: var(--w-25);
   }
+  &.is-active .count-view {
+    background: var(--w-75);
+    color: var(--w-500);
+  }
 }
 
 .menu-label {
   flex-grow: 1;
-  line-height: var(--space-two);
+  display: inline-flex;
+  align-items: center;
 }
 
 .inbox-icon {
@@ -175,10 +180,6 @@ $label-badge-size: var(--space-slab);
   font-weight: var(--font-weight-bold);
   margin-left: var(--space-smaller);
   padding: var(--space-zero) var(--space-smaller);
-
-  &.is-active {
-    background: var(--w-50);
-    color: var(--w-500);
-  }
+  line-height: var(--font-size-small);
 }
 </style>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index 8661a488f..644258f50 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -4,16 +4,15 @@
       <span class="secondary-menu--header fs-small">
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </span>
-      <div v-if="isHelpCenterSidebar" class="submenu-icons">
+      <div v-if="menuItem.showNewButton" class="submenu-icons">
         <woot-button
           size="tiny"
           variant="clear"
           color-scheme="secondary"
+          icon="add"
           class="submenu-icon"
           @click="onClickOpen"
-        >
-          <fluent-icon icon="add" size="16" />
-        </woot-button>
+        />
       </div>
     </div>
     <router-link
@@ -28,11 +27,7 @@
         size="14"
       />
       {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      <span
-        v-if="isHelpCenterSidebar"
-        class="count-view"
-        :class="computedClass"
-      >
+      <span v-if="showChildCount(menuItem.count)" class="count-view">
         {{ `${menuItem.count}` }}
       </span>
       <span
@@ -55,7 +50,7 @@
         :should-truncate="child.truncateLabel"
         :icon="computedInboxClass(child)"
         :warning-icon="computedInboxErrorClass(child)"
-        :is-help-center-sidebar="isHelpCenterSidebar"
+        :show-child-count="showChildCount(child.count)"
         :child-item-count="child.count"
       />
       <router-link
@@ -64,10 +59,10 @@
         :to="menuItem.toState"
         custom
       >
-        <li>
+        <li class="menu-item--new">
           <a
             :href="href"
-            class="button small clear menu-item--new secondary"
+            class="button small link clear secondary"
             :class="{ 'is-active': isActive }"
             @click="e => newLinkClick(e, navigate)"
           >
@@ -78,9 +73,6 @@
           </a>
         </li>
       </router-link>
-      <p v-if="isHelpCenterSidebar && isCategoryEmpty" class="empty-text">
-        {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
-      </p>
     </ul>
   </li>
 </template>
@@ -104,14 +96,6 @@ export default {
       type: Object,
       default: () => ({}),
     },
-    isHelpCenterSidebar: {
-      type: Boolean,
-      default: false,
-    },
-    isCategoryEmpty: {
-      type: Boolean,
-      default: false,
-    },
   },
   computed: {
     ...mapGetters({
@@ -161,8 +145,8 @@ export default {
         this.menuItem.toStateName === 'settings_applications'
       );
     },
-    isArticlesView() {
-      return this.$store.state.route.name === this.menuItem.toStateName;
+    isCurrentRoute() {
+      return this.$store.state.route.name.includes(this.menuItem.toStateName);
     },
 
     computedClass() {
@@ -181,12 +165,11 @@ export default {
         }
         return ' ';
       }
-      if (this.isHelpCenterSidebar) {
-        if (this.isArticlesView) {
-          return 'is-active';
-        }
-        return ' ';
+
+      if (this.isCurrentRoute) {
+        return 'is-active';
       }
+
       return '';
     },
   },
@@ -222,6 +205,9 @@ export default {
     onClickOpen() {
       this.$emit('open');
     },
+    showChildCount(count) {
+      return Number.isInteger(count);
+    },
   },
 };
 </script>
@@ -277,6 +263,11 @@ export default {
     color: var(--w-500);
     border-color: var(--w-25);
   }
+
+  &.is-active .count-view {
+    background: var(--w-75);
+    color: var(--w-600);
+  }
 }
 
 .secondary-menu--icon {
@@ -306,15 +297,12 @@ export default {
   top: -1px;
 }
 
-.sidebar-item .button.menu-item--new {
-  display: inline-flex;
-  height: var(--space-medium);
-  margin: var(--space-smaller) 0;
-  padding: var(--space-smaller);
-  color: var(--s-500);
+.sidebar-item .menu-item--new {
+  padding: var(--space-small) 0;
 
-  &:hover {
-    color: var(--w-500);
+  .button {
+    display: inline-flex;
+    color: var(--s-500);
   }
 }
 
@@ -340,11 +328,6 @@ export default {
   font-weight: var(--font-weight-bold);
   margin-left: var(--space-smaller);
   padding: var(--space-zero) var(--space-smaller);
-
-  &.is-active {
-    background: var(--w-50);
-    color: var(--w-500);
-  }
 }
 
 .submenu-icons {
@@ -356,10 +339,4 @@ export default {
     margin-left: var(--space-small);
   }
 }
-
-.empty-text {
-  color: var(--s-500);
-  font-size: var(--font-size-small);
-  margin: var(--space-smaller);
-}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index bda19b764..44754694e 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -196,6 +196,7 @@ export default {
           icon: 'folder',
           label: 'HELP_CENTER.CATEGORY',
           hasSubMenu: true,
+          showNewButton: true,
           key: 'category',
           children: this.categories.map(category => ({
             id: category.id,
@@ -218,7 +219,7 @@ export default {
   },
 
   watch: {
-    selectedPortal() {
+    '$route.params.portalSlug'() {
       this.fetchPortalsAndItsCategories();
     },
   },
@@ -239,7 +240,7 @@ export default {
   },
   updated() {
     const slug = this.$route.params.portalSlug;
-    if (slug) {
+    if (slug !== this.lastActivePortalSlug) {
       this.lastActivePortalSlug = slug;
       this.updateUISettings({
         last_active_portal_slug: slug,
@@ -260,7 +261,6 @@ export default {
     },
     async fetchPortalsAndItsCategories() {
       await this.$store.dispatch('portals/index');
-
       const selectedPortalParam = {
         portalSlug: this.selectedPortalSlug,
         locale: this.selectedLocaleInPortal,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
index 0354ad22b..045bd77cd 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@@ -376,7 +376,6 @@ export default {
         }
       }
       .portal-title {
-        color: var(--s-900);
         margin-bottom: 0;
       }
       .portal-count {
@@ -389,14 +388,17 @@ export default {
       }
     }
     .portal-locales {
-      margin-top: var(--space-medium);
-      margin-bottom: var(--space-small);
+      margin-bottom: var(--space-large);
       .locale-title {
         color: var(--s-800);
         font-weight: var(--font-weight-medium);
         margin-bottom: var(--space-small);
       }
     }
+
+    .portal--heading {
+      margin-bottom: var(--space-normal);
+    }
   }
   .portal-settings--icon {
     padding: var(--space-smaller);
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
index 355ffc0a1..a88121eb3 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
@@ -12,16 +12,20 @@
         v-for="menuItem in accessibleMenuItems"
         :key="menuItem.toState"
         :menu-item="menuItem"
-        :is-help-center-sidebar="true"
       />
       <secondary-nav-item
         v-for="menuItem in additionalSecondaryMenuItems"
         :key="menuItem.key"
         :menu-item="menuItem"
-        :is-help-center-sidebar="true"
-        :is-category-empty="!hasCategory"
         @open="onClickOpenAddCatogoryModal"
       />
+      <p
+        v-if="!hasCategory"
+        key="empty-category-nessage"
+        class="empty-text text-muted"
+      >
+        {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
+      </p>
     </transition-group>
   </div>
 </template>
@@ -123,4 +127,8 @@ export default {
     overflow-y: auto;
   }
 }
+
+.empty-text {
+  padding: var(--space-smaller) var(--space-normal);
+}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
index 044efafd6..d526787bf 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
@@ -76,7 +76,7 @@ export default {
   justify-content: space-between;
   padding: var(--space-normal);
   margin: var(--space-minus-small);
-  margin-bottom: var(--space-small);
+  margin-bottom: var(--space-smaller);
   border-bottom: 1px solid var(--color-border-light);
 }
 
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
index a9033b6ac..6381ebe7b 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
@@ -13,7 +13,7 @@ export default {
     } = this.uiSettings || {};
 
     if (lastActivePortalSlug)
-      this.$router.push({
+      this.$router.replace({
         name: 'list_all_locale_articles',
         params: {
           portalSlug: lastActivePortalSlug,
@@ -22,7 +22,7 @@ export default {
         replace: true,
       });
     else
-      this.$router.push({
+      this.$router.replace({
         name: 'list_all_portals',
         replace: true,
       });
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
index 78876f630..385eb44ca 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
@@ -6,7 +6,7 @@
         'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.CREATE_BASIC_SETTING_BUTTON'
       )
     "
-    @submit="updateBasicSettings"
+    @submit="createPortal"
   />
 </template>
 
@@ -37,7 +37,7 @@ export default {
   },
 
   methods: {
-    async updateBasicSettings(portal) {
+    async createPortal(portal) {
       try {
         await this.$store.dispatch('portals/create', {
           portal,
@@ -45,16 +45,16 @@ export default {
         this.alertMessage = this.$t(
           'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_BASIC'
         );
+        this.$router.push({
+          name: 'portal_customization',
+          params: { portalSlug: portal.slug },
+        });
       } catch (error) {
         this.alertMessage =
           error?.message ||
           this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_BASIC');
       } finally {
         this.showAlert(this.alertMessage);
-        this.$router.push({
-          name: 'portal_customization',
-          params: { portalSlug: portal.slug },
-        });
       }
     },
   },
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
index dcce09854..9ece174cd 100644
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
@@ -45,10 +45,10 @@ export const mutations = {
 
   [types.SET_PORTALS_META]: ($state, data) => {
     const {
-      all_articles_count: allArticlesCount,
-      mine_articles_count: mineArticlesCount,
-      draft_articles_count: draftArticlesCount,
-      archived_articles_count: archivedArticlesCount,
+      all_articles_count: allArticlesCount = 0,
+      mine_articles_count: mineArticlesCount = 0,
+      draft_articles_count: draftArticlesCount = 0,
+      archived_articles_count: archivedArticlesCount = 0,
     } = data;
     Vue.set($state.meta, 'allArticlesCount', allArticlesCount);
     Vue.set($state.meta, 'archivedArticlesCount', archivedArticlesCount);

From 8d5a9a9daa0f19fba4931840cc8b1504ca2e2cc8 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Sat, 22 Oct 2022 05:54:52 +0530
Subject: [PATCH 13/27] fix: Show account switch modal from portal dashboard
 (#5712)

---
 .../helpcenter/components/HelpCenterLayout.vue        | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index 44754694e..b4626e108 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -2,6 +2,7 @@
   <div class="row app-wrapper">
     <sidebar
       :route="currentRoute"
+      @toggle-account-modal="toggleAccountModal"
       @open-notification-panel="openNotificationPanel"
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
@@ -21,6 +22,10 @@
     <section class="app-content columns" :class="contentClassName">
       <router-view />
       <command-bar />
+      <account-selector
+        :show-account-modal="showAccountModal"
+        @close-account-modal="toggleAccountModal"
+      />
       <woot-key-shortcut-modal
         v-if="showShortcutModal"
         @close="closeKeyShortcutModal"
@@ -58,6 +63,7 @@ import PortalPopover from '../components/PortalPopover.vue';
 import HelpCenterSidebar from '../components/Sidebar/Sidebar.vue';
 import CommandBar from 'dashboard/routes/dashboard/commands/commandbar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal';
+import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import portalMixin from '../mixins/portalMixin';
@@ -72,6 +78,7 @@ export default {
     NotificationPanel,
     PortalPopover,
     AddCategory,
+    AccountSelector,
   },
   mixins: [portalMixin, uiSettingsMixin],
   data() {
@@ -83,6 +90,7 @@ export default {
       showPortalPopover: false,
       showAddCategoryModal: false,
       lastActivePortalSlug: '',
+      showAccountModal: false,
     };
   },
 
@@ -293,6 +301,9 @@ export default {
     onClickCloseAddCategoryModal() {
       this.showAddCategoryModal = false;
     },
+    toggleAccountModal() {
+      this.showAccountModal = !this.showAccountModal;
+    },
   },
 };
 </script>

From 6823b04e5b8f74f327693681c390d58fdad02cb9 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Fri, 21 Oct 2022 17:32:01 -0700
Subject: [PATCH 14/27] fix: Update public partials to fix help center search
 (#5713)

---
 app/views/public/api/v1/models/_article.json.jbuilder       | 6 +++---
 .../v1/models/{ => hc}/_associated_article.json.jbuilder    | 2 +-
 app/views/public/api/v1/models/hc/_author.json.jbuilder     | 3 +++
 .../public/api/v1/models/{ => hc}/_portal.json.jbuilder     | 0
 4 files changed, 7 insertions(+), 4 deletions(-)
 rename app/views/public/api/v1/models/{ => hc}/_associated_article.json.jbuilder (76%)
 create mode 100644 app/views/public/api/v1/models/hc/_author.json.jbuilder
 rename app/views/public/api/v1/models/{ => hc}/_portal.json.jbuilder (100%)

diff --git a/app/views/public/api/v1/models/_article.json.jbuilder b/app/views/public/api/v1/models/_article.json.jbuilder
index f9f7c3694..cacf48dff 100644
--- a/app/views/public/api/v1/models/_article.json.jbuilder
+++ b/app/views/public/api/v1/models/_article.json.jbuilder
@@ -9,7 +9,7 @@ json.last_updated_at article.updated_at
 
 if article.portal.present?
   json.portal do
-    json.partial! 'api/v1/accounts/portals/portal', formats: [:json], portal: article.portal
+    json.partial! 'public/api/v1/models/hc/portal', formats: [:json], portal: article.portal
   end
 end
 
@@ -25,14 +25,14 @@ json.views article.views
 
 if article.author.present?
   json.author do
-    json.partial! 'api/v1/models/agent', formats: [:json], resource: article.author
+    json.partial! 'public/api/v1/models/hc/author', formats: [:json], resource: article.author
   end
 end
 
 json.associated_articles do
   if article.associated_articles.any?
     json.array! article.associated_articles.each do |associated_article|
-      json.partial! 'api/v1/accounts/articles/associated_article', formats: [:json], article: associated_article
+      json.partial! 'public/api/v1/models/hc/associated_article', formats: [:json], article: associated_article
     end
   end
 end
diff --git a/app/views/public/api/v1/models/_associated_article.json.jbuilder b/app/views/public/api/v1/models/hc/_associated_article.json.jbuilder
similarity index 76%
rename from app/views/public/api/v1/models/_associated_article.json.jbuilder
rename to app/views/public/api/v1/models/hc/_associated_article.json.jbuilder
index 178d67d24..dde37e5be 100644
--- a/app/views/public/api/v1/models/_associated_article.json.jbuilder
+++ b/app/views/public/api/v1/models/hc/_associated_article.json.jbuilder
@@ -10,6 +10,6 @@ json.views article.views
 
 if article.author.present?
   json.author do
-    json.partial! 'api/v1/models/agent', formats: [:json], resource: article.author
+    json.partial! 'public/api/v1/models/portal/author', formats: [:json], resource: article.author
   end
 end
diff --git a/app/views/public/api/v1/models/hc/_author.json.jbuilder b/app/views/public/api/v1/models/hc/_author.json.jbuilder
new file mode 100644
index 000000000..954a5f07c
--- /dev/null
+++ b/app/views/public/api/v1/models/hc/_author.json.jbuilder
@@ -0,0 +1,3 @@
+json.available_name resource.available_name
+json.name resource.name
+json.thumbnail resource.avatar_url
diff --git a/app/views/public/api/v1/models/_portal.json.jbuilder b/app/views/public/api/v1/models/hc/_portal.json.jbuilder
similarity index 100%
rename from app/views/public/api/v1/models/_portal.json.jbuilder
rename to app/views/public/api/v1/models/hc/_portal.json.jbuilder

From af020f446e8fa749554d166c70ce6764729fb7c3 Mon Sep 17 00:00:00 2001
From: jacsonsantospht <87338089+jacsonsantospht@users.noreply.github.com>
Date: Fri, 21 Oct 2022 22:05:36 -0300
Subject: [PATCH 15/27] fix: check the content type for the file when uploading
 from cloud storage (#5378)

When sending the message with audio, only the signed id of the file is sent.
In the back end check only the UploadedFile type.
The attachment has the default file type image, now it gets the content type from the signed id

Fixes: #5375

Co-authored-by: Sojan Jose <sojan@pepalo.com>
---
 app/builders/messages/message_builder.rb      |  8 +++++-
 app/helpers/file_type_helper.rb               |  6 ++++
 .../builders/messages/message_builder_spec.rb | 28 +++++++++++++++++++
 spec/rails_helper.rb                          |  1 +
 spec/support/file_upload_helpers.rb           |  9 ++++++
 5 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 spec/support/file_upload_helpers.rb

diff --git a/app/builders/messages/message_builder.rb b/app/builders/messages/message_builder.rb
index e9bf0802b..69ed786ce 100644
--- a/app/builders/messages/message_builder.rb
+++ b/app/builders/messages/message_builder.rb
@@ -35,7 +35,13 @@ class Messages::MessageBuilder
         file: uploaded_attachment
       )
 
-      attachment.file_type = file_type(uploaded_attachment&.content_type) if uploaded_attachment.is_a?(ActionDispatch::Http::UploadedFile)
+      attachment.file_type = if uploaded_attachment.is_a?(String)
+                               file_type_by_signed_id(
+                                 uploaded_attachment
+                               )
+                             else
+                               file_type(uploaded_attachment&.content_type)
+                             end
     end
   end
 
diff --git a/app/helpers/file_type_helper.rb b/app/helpers/file_type_helper.rb
index db3f6249d..03b807aad 100644
--- a/app/helpers/file_type_helper.rb
+++ b/app/helpers/file_type_helper.rb
@@ -8,6 +8,12 @@ module FileTypeHelper
     :file
   end
 
+  # Used in case of DIRECT_UPLOADS_ENABLED=true
+  def file_type_by_signed_id(signed_id)
+    blob = ActiveStorage::Blob.find_signed(signed_id)
+    file_type(blob&.content_type)
+  end
+
   def image_file?(content_type)
     [
       'image/jpeg',
diff --git a/spec/builders/messages/message_builder_spec.rb b/spec/builders/messages/message_builder_spec.rb
index 6227f2a48..b17f752db 100644
--- a/spec/builders/messages/message_builder_spec.rb
+++ b/spec/builders/messages/message_builder_spec.rb
@@ -50,5 +50,33 @@ describe ::Messages::MessageBuilder do
         expect(message.message_type).to eq params[:message_type]
       end
     end
+
+    context 'when attachment messages' do
+      let(:params) do
+        ActionController::Parameters.new({
+                                           content: 'test',
+                                           attachments: [Rack::Test::UploadedFile.new('spec/assets/avatar.png', 'image/png')]
+                                         })
+      end
+
+      it 'creates message with attachments' do
+        message = message_builder
+        expect(message.attachments.first.file_type).to eq 'image'
+      end
+
+      context 'when DIRECT_UPLOAD_ENABLED' do
+        let(:params) do
+          ActionController::Parameters.new({
+                                             content: 'test',
+                                             attachments: [get_blob_for('spec/assets/avatar.png', 'image/png').signed_id]
+                                           })
+        end
+
+        it 'creates message with attachments' do
+          message = message_builder
+          expect(message.attachments.first.file_type).to eq 'image'
+        end
+      end
+    end
   end
 end
diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb
index 517f336a0..3b42c77ff 100644
--- a/spec/rails_helper.rb
+++ b/spec/rails_helper.rb
@@ -64,6 +64,7 @@ RSpec.configure do |config|
   # arbitrary gems may also be filtered via:
   # config.filter_gems_from_backtrace("gem name")
   config.include SlackStubs
+  config.include FileUploadHelpers
   config.include Devise::Test::IntegrationHelpers, type: :request
   config.include ActiveSupport::Testing::TimeHelpers
   config.include ActionCable::TestHelper
diff --git a/spec/support/file_upload_helpers.rb b/spec/support/file_upload_helpers.rb
new file mode 100644
index 000000000..fa4e577cf
--- /dev/null
+++ b/spec/support/file_upload_helpers.rb
@@ -0,0 +1,9 @@
+module FileUploadHelpers
+  def get_blob_for(file_path, content_type)
+    ActiveStorage::Blob.create_and_upload!(
+      io: File.open(file_path, 'rb'),
+      filename: File.basename(file_path),
+      content_type: content_type
+    )
+  end
+end

From 3a71fe32605a74d611820d4f494ff531ae6817d0 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Fri, 21 Oct 2022 18:06:02 -0700
Subject: [PATCH 16/27] chore: Stop duplicate websocket updates for
 conversation updates (#5711)

- remove extra dispatch for label updates
---
 app/models/conversation.rb | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/models/conversation.rb b/app/models/conversation.rb
index 3a1abf335..03fedb6e4 100644
--- a/app/models/conversation.rb
+++ b/app/models/conversation.rb
@@ -219,7 +219,7 @@ class Conversation < ApplicationRecord
 
   def notify_conversation_updation
     return unless previous_changes.keys.present? && (previous_changes.keys & %w[team_id assignee_id status snoozed_until
-                                                                                custom_attributes]).present?
+                                                                                custom_attributes label_list]).present?
 
     dispatcher_dispatch(CONVERSATION_UPDATED, previous_changes)
   end
@@ -262,8 +262,6 @@ class Conversation < ApplicationRecord
     previous_labels, current_labels = previous_changes[:label_list]
     return unless (previous_labels.is_a? Array) && (current_labels.is_a? Array)
 
-    dispatcher_dispatch(CONVERSATION_UPDATED, previous_changes)
-
     create_label_added(user_name, current_labels - previous_labels)
     create_label_removed(user_name, previous_labels - current_labels)
   end

From d54392cb53d80b781c53540e928b2c06e0f3197e Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 25 Oct 2022 08:29:36 +0530
Subject: [PATCH 17/27] fix: Update max-width to fix overflow for emoji
 selector (#5727)

---
 app/javascript/widget/components/ChatInputWrap.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index f0f21d1ba..c5c760f21 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -191,6 +191,7 @@ export default {
 .emoji-dialog {
   right: $space-smaller;
   top: -278px;
+  max-width: 100%;
 
   &::before {
     right: $space-one;

From c3ec1d4f8abbab7650bafda726dc0f4d6eb84340 Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Tue, 25 Oct 2022 09:03:59 +0530
Subject: [PATCH 18/27] feat: Add the ability for the agents to execute a macro
 (#5698)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 app/javascript/dashboard/components/index.js  |  10 +-
 .../components/widgets/FeatureToggle.vue      |  25 ++++
 .../helper/specs/macrosHelper.spec.js         |  37 +++++-
 .../i18n/locale/en/conversation.json          |   3 +-
 .../dashboard/i18n/locale/en/macros.json      |  12 +-
 .../dashboard/mixins/specs/uiSettings.spec.js |   1 +
 app/javascript/dashboard/mixins/uiSettings.js |  13 +-
 .../dashboard/conversation/ContactPanel.vue   |  15 +++
 .../dashboard/conversation/Macros/List.vue    |  75 +++++++++++
 .../conversation/Macros/MacroItem.vue         | 111 +++++++++++++++++
 .../conversation/Macros/MacroPreview.vue      | 116 ++++++++++++++++++
 .../dashboard/settings/macros/macroHelper.js  |  23 ++++
 .../shared/assets/stylesheets/spacing.scss    |   3 +-
 .../FluentIcon/dashboard-icons.json           |   1 +
 14 files changed, 431 insertions(+), 14 deletions(-)
 create mode 100644 app/javascript/dashboard/components/widgets/FeatureToggle.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue

diff --git a/app/javascript/dashboard/components/index.js b/app/javascript/dashboard/components/index.js
index 5e58aa049..f5ce5d856 100644
--- a/app/javascript/dashboard/components/index.js
+++ b/app/javascript/dashboard/components/index.js
@@ -5,9 +5,12 @@ import Button from './ui/WootButton';
 import Code from './Code';
 import ColorPicker from './widgets/ColorPicker';
 import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
+import ConfirmModal from './widgets/modal/ConfirmationModal.vue';
+import ContextMenu from './ui/ContextMenu.vue';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
 import DropdownItem from 'shared/components/ui/dropdown/DropdownItem';
 import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import FeatureToggle from './widgets/FeatureToggle';
 import HorizontalBar from './widgets/chart/HorizontalBarChart';
 import Input from './widgets/forms/Input.vue';
 import Label from './ui/Label';
@@ -21,8 +24,6 @@ import SubmitButton from './buttons/FormSubmitButton';
 import Tabs from './ui/Tabs/Tabs';
 import TabsItem from './ui/Tabs/TabsItem';
 import Thumbnail from './widgets/Thumbnail.vue';
-import ConfirmModal from './widgets/modal/ConfirmationModal.vue';
-import ContextMenu from './ui/ContextMenu.vue';
 
 const WootUIKit = {
   AvatarUploader,
@@ -31,9 +32,12 @@ const WootUIKit = {
   Code,
   ColorPicker,
   ConfirmDeleteModal,
+  ConfirmModal,
+  ContextMenu,
   DeleteModal,
   DropdownItem,
   DropdownMenu,
+  FeatureToggle,
   HorizontalBar,
   Input,
   Label,
@@ -47,8 +51,6 @@ const WootUIKit = {
   Tabs,
   TabsItem,
   Thumbnail,
-  ConfirmModal,
-  ContextMenu,
   install(Vue) {
     const keys = Object.keys(this);
     keys.pop(); // remove 'install' from keys
diff --git a/app/javascript/dashboard/components/widgets/FeatureToggle.vue b/app/javascript/dashboard/components/widgets/FeatureToggle.vue
new file mode 100644
index 000000000..ec7759a9c
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/FeatureToggle.vue
@@ -0,0 +1,25 @@
+<template>
+  <div v-if="isFeatureEnabled">
+    <slot />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  props: {
+    featureKey: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      accountId: 'getCurrentAccountId',
+    }),
+    isFeatureEnabled() {
+      return this.isFeatureEnabledonAccount(this.accountId, this.featureKey);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/helper/specs/macrosHelper.spec.js b/app/javascript/dashboard/helper/specs/macrosHelper.spec.js
index 26c731aa8..649eff8c5 100644
--- a/app/javascript/dashboard/helper/specs/macrosHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/macrosHelper.spec.js
@@ -1,4 +1,11 @@
-import { emptyMacro } from '../../routes/dashboard/settings/macros/macroHelper';
+import {
+  emptyMacro,
+  resolveActionName,
+  resolveLabels,
+  resolveTeamIds,
+} from '../../routes/dashboard/settings/macros/macroHelper';
+import { MACRO_ACTION_TYPES } from '../../routes/dashboard/settings/macros/constants';
+import { teams, labels } from './macrosFixtures';
 
 describe('#emptyMacro', () => {
   const defaultMacro = {
@@ -15,3 +22,31 @@ describe('#emptyMacro', () => {
     expect(emptyMacro).toEqual(defaultMacro);
   });
 });
+
+describe('#resolveActionName', () => {
+  it('resolve action name from key and return the correct label', () => {
+    expect(resolveActionName(MACRO_ACTION_TYPES[0].key)).toEqual(
+      MACRO_ACTION_TYPES[0].label
+    );
+    expect(resolveActionName(MACRO_ACTION_TYPES[1].key)).toEqual(
+      MACRO_ACTION_TYPES[1].label
+    );
+    expect(resolveActionName(MACRO_ACTION_TYPES[1].key)).not.toEqual(
+      MACRO_ACTION_TYPES[0].label
+    );
+  });
+});
+
+describe('#resolveTeamIds', () => {
+  it('resolves team names from ids, and returns a joined string', () => {
+    const resolvedTeams = '⚙️ sales team, 🤷‍♂️ fayaz';
+    expect(resolveTeamIds(teams, [1, 2])).toEqual(resolvedTeams);
+  });
+});
+
+describe('#resolveLabels', () => {
+  it('resolves labels names from ids and returns a joined string', () => {
+    const resolvedLabels = 'sales, billing';
+    expect(resolveLabels(labels, ['sales', 'billing'])).toEqual(resolvedLabels);
+  });
+});
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 7c6fa76d5..771b5305f 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -208,7 +208,8 @@
       "CONVERSATION_LABELS": "Conversation Labels",
       "CONVERSATION_INFO": "Conversation Information",
       "CONTACT_ATTRIBUTES": "Contact Attributes",
-      "PREVIOUS_CONVERSATION": "Previous Conversations"
+      "PREVIOUS_CONVERSATION": "Previous Conversations",
+      "MACROS": "Macros"
     }
   },
   "CONVERSATION_CUSTOM_ATTRIBUTES": {
diff --git a/app/javascript/dashboard/i18n/locale/en/macros.json b/app/javascript/dashboard/i18n/locale/en/macros.json
index 132151241..28c4660aa 100644
--- a/app/javascript/dashboard/i18n/locale/en/macros.json
+++ b/app/javascript/dashboard/i18n/locale/en/macros.json
@@ -24,12 +24,7 @@
       }
     },
     "LIST": {
-      "TABLE_HEADER": [
-        "Name",
-        "Created by",
-        "Last updated by",
-        "Visibility"
-      ],
+      "TABLE_HEADER": ["Name", "Created by", "Last updated by", "Visibility"],
       "404": "No macros found"
     },
     "DELETE": {
@@ -68,6 +63,11 @@
           "DESCRIPTION": "This macro will be private to you and not be available to others."
         }
       }
+    },
+    "EXECUTE": {
+      "BUTTON_TOOLTIP": "Execute",
+      "PREVIEW": "Preview Macro",
+      "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
     }
   }
 }
diff --git a/app/javascript/dashboard/mixins/specs/uiSettings.spec.js b/app/javascript/dashboard/mixins/specs/uiSettings.spec.js
index 79c06939e..3613574ba 100644
--- a/app/javascript/dashboard/mixins/specs/uiSettings.spec.js
+++ b/app/javascript/dashboard/mixins/specs/uiSettings.spec.js
@@ -119,6 +119,7 @@ describe('uiSettingsMixin', () => {
         { name: 'conversation_info' },
         { name: 'contact_attributes' },
         { name: 'previous_conversation' },
+        { name: 'macros' },
       ]);
     });
   });
diff --git a/app/javascript/dashboard/mixins/uiSettings.js b/app/javascript/dashboard/mixins/uiSettings.js
index adc407eb3..e517d6961 100644
--- a/app/javascript/dashboard/mixins/uiSettings.js
+++ b/app/javascript/dashboard/mixins/uiSettings.js
@@ -1,6 +1,7 @@
 import { mapGetters } from 'vuex';
 export const DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER = [
   { name: 'conversation_actions' },
+  { name: 'macros' },
   { name: 'conversation_info' },
   { name: 'contact_attributes' },
   { name: 'previous_conversation' },
@@ -30,7 +31,17 @@ export default {
     ...mapGetters({ uiSettings: 'getUISettings' }),
     conversationSidebarItemsOrder() {
       const { conversation_sidebar_items_order: itemsOrder } = this.uiSettings;
-      return itemsOrder || DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER;
+      // If the sidebar order is not set, use the default order.
+      if (!itemsOrder) {
+        return DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER;
+      }
+      // If the sidebar order doesn't have the new elements, then add them to the list.
+      DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER.forEach(item => {
+        if (!itemsOrder.find(i => i.name === item.name)) {
+          itemsOrder.push(item);
+        }
+      });
+      return itemsOrder;
     },
     contactSidebarItemsOrder() {
       const { contact_sidebar_items_order: itemsOrder } = this.uiSettings;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 4405ed2ad..4c20bfec2 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -93,6 +93,19 @@
               />
             </accordion-item>
           </div>
+          <woot-feature-toggle
+            v-else-if="element.name === 'macros'"
+            feature-key="macros"
+          >
+            <accordion-item
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.MACROS')"
+              :is-open="isContactSidebarItemOpen('is_macro_open')"
+              compact
+              @click="value => toggleSidebarUIState('is_macro_open', value)"
+            >
+              <macros-list :conversation-id="conversationId" />
+            </accordion-item>
+          </woot-feature-toggle>
         </div>
       </transition-group>
     </draggable>
@@ -112,6 +125,7 @@ import CustomAttributes from './customAttributes/CustomAttributes.vue';
 import CustomAttributeSelector from './customAttributes/CustomAttributeSelector.vue';
 import draggable from 'vuedraggable';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import MacrosList from './Macros/List';
 
 export default {
   components: {
@@ -123,6 +137,7 @@ export default {
     CustomAttributeSelector,
     ConversationAction,
     draggable,
+    MacrosList,
   },
   mixins: [alertMixin, uiSettingsMixin],
   props: {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
new file mode 100644
index 000000000..d16051ce7
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div
+      v-if="!uiFlags.isFetching && !macros.length"
+      class="macros_list--empty-state"
+    >
+      <p class="no-items-error-message">
+        {{ $t('MACROS.LIST.404') }}
+      </p>
+      <router-link :to="addAccountScoping('settings/macros')">
+        <woot-button
+          variant="smooth"
+          icon="add"
+          size="tiny"
+          class="macros_add-button"
+        >
+          {{ $t('MACROS.HEADER_BTN_TXT') }}
+        </woot-button>
+      </router-link>
+    </div>
+    <woot-loading-state
+      v-if="uiFlags.isFetching"
+      :message="$t('MACROS.LOADING')"
+    />
+    <div v-if="!uiFlags.isFetching && macros.length" class="macros-list">
+      <macro-item
+        v-for="macro in macros"
+        :key="macro.id"
+        :macro="macro"
+        :conversation-id="conversationId"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import MacroItem from './MacroItem';
+import accountMixin from 'dashboard/mixins/account.js';
+
+export default {
+  components: {
+    MacroItem,
+  },
+  mixins: [accountMixin],
+  props: {
+    conversationId: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      macros: ['macros/getMacros'],
+      uiFlags: 'macros/getUIFlags',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('macros/get');
+  },
+};
+</script>
+<style scoped lang="scss">
+.macros-list {
+  padding: var(--space-smaller);
+}
+.macros_list--empty-state {
+  padding: var(--space-slab);
+  p {
+    margin: 0;
+  }
+}
+.macros_add-button {
+  margin: var(--space-small) auto 0;
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
new file mode 100644
index 000000000..c8cac6829
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="macro">
+    <span class="text-truncate">{{ macro.name }}</span>
+    <div class="macros-actions">
+      <woot-button
+        v-tooltip.left-start="$t('MACROS.EXECUTE.PREVIEW')"
+        size="tiny"
+        variant="smooth"
+        color-scheme="secondary"
+        icon="info"
+        class="margin-right-smaller"
+        @click="toggleMacroPreview(macro)"
+      />
+      <woot-button
+        v-tooltip.left-start="$t('MACROS.EXECUTE.BUTTON_TOOLTIP')"
+        size="tiny"
+        variant="smooth"
+        color-scheme="secondary"
+        icon="play-circle"
+        :is-loading="isExecuting"
+        @click="executeMacro(macro)"
+      />
+    </div>
+    <transition name="menu-slide">
+      <macro-preview
+        v-if="showPreview"
+        v-on-clickaway="closeMacroPreview"
+        :macro="macro"
+      />
+    </transition>
+  </div>
+</template>
+
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+import { mixin as clickaway } from 'vue-clickaway';
+import MacroPreview from './MacroPreview';
+export default {
+  components: {
+    MacroPreview,
+  },
+  mixins: [alertMixin, clickaway],
+  props: {
+    macro: {
+      type: Object,
+      required: true,
+    },
+    conversationId: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isExecuting: false,
+      showPreview: false,
+    };
+  },
+  methods: {
+    async executeMacro(macro) {
+      try {
+        this.isExecuting = true;
+        await this.$store.dispatch('macros/execute', {
+          macroId: macro.id,
+          conversationIds: [this.conversationId],
+        });
+        this.showAlert(this.$t('MACROS.EXECUTE.EXECUTED_SUCCESSFULLY'));
+      } catch (error) {
+        this.showAlert(this.$t('MACROS.ERROR'));
+      } finally {
+        this.isExecuting = false;
+      }
+    },
+    toggleMacroPreview() {
+      this.showPreview = !this.showPreview;
+    },
+    closeMacroPreview() {
+      this.showPreview = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.macro {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+  padding: var(--space-small);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--border-radius-normal);
+  color: var(--s-700);
+
+  &:hover {
+    background: var(--s-25);
+    color: var(--s-600);
+  }
+
+  &:focus {
+    border-color: var(--w-300);
+  }
+
+  .macros-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
new file mode 100644
index 000000000..bf7d09cbd
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="macro-preview">
+    <p class="macro-title">{{ macro.name }}</p>
+    <div v-for="(action, i) in resolvedMacro" :key="i" class="macro-block">
+      <div v-if="i !== macro.actions.length - 1" class="macro-block-border" />
+      <div class="macro-block-dot" />
+      <p class="macro-action-name">{{ action.actionName }}</p>
+      <p class="macro-action-params">{{ action.actionValue }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  resolveActionName,
+  resolveTeamIds,
+  resolveLabels,
+} from 'dashboard/routes/dashboard/settings/macros/macroHelper';
+import { mapGetters } from 'vuex';
+
+export default {
+  props: {
+    macro: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    resolvedMacro() {
+      return this.macro.actions.map(action => {
+        return {
+          actionName: resolveActionName(action.action_name),
+          actionValue: this.getActionValue(
+            action.action_name,
+            action.action_params
+          ),
+        };
+      });
+    },
+    ...mapGetters({
+      labels: 'labels/getLabels',
+      teams: 'teams/getTeams',
+    }),
+  },
+  methods: {
+    getActionValue(key, params) {
+      const actionsMap = {
+        assign_team: resolveTeamIds(this.teams, params),
+        add_label: resolveLabels(this.labels, params),
+        mute_conversation: null,
+        snooze_conversation: null,
+        resolve_conversation: null,
+        send_webhook_event: params[0],
+        send_message: params[0],
+        send_email_transcript: params[0],
+      };
+      return actionsMap[key] || '';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.macro-preview {
+  position: absolute;
+  max-height: calc(var(--space-giga) * 1.5);
+  min-height: var(--space-jumbo);
+  width: calc(var(--space-giga) + var(--space-large));
+  border-radius: var(--border-radius-normal);
+  background-color: var(--white);
+  box-shadow: var(--shadow-dropdown-pane);
+  bottom: calc(var(--space-three) + var(--space-half));
+  right: calc(var(--space-three) + var(--space-half));
+  overflow-y: auto;
+  padding: var(--space-slab);
+
+  .macro-title {
+    margin-bottom: var(--space-slab);
+    color: var(--s-900);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .macro-block {
+    position: relative;
+    padding-left: var(--space-slab);
+    &:not(:last-child) {
+      padding-bottom: var(--space-slab);
+    }
+
+    .macro-block-border {
+      top: 0.625rem;
+      position: absolute;
+      bottom: var(--space-minus-half);
+      left: 0;
+      width: 1px;
+      background-color: var(--s-100);
+    }
+
+    .macro-block-dot {
+      position: absolute;
+      left: -0.35rem;
+      height: var(--space-small);
+      width: var(--space-small);
+      border: 2px solid var(--s-100);
+      background-color: var(--white);
+      border-radius: var(--border-radius-full);
+      top: 0.4375rem;
+    }
+  }
+
+  .macro-action-name {
+    font-size: var(--font-size-mini);
+    color: var(--s-500);
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/macroHelper.js b/app/javascript/dashboard/routes/dashboard/settings/macros/macroHelper.js
index 134e0d943..584deeb5e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/macroHelper.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/macroHelper.js
@@ -1,3 +1,4 @@
+import { MACRO_ACTION_TYPES as macroActionTypes } from 'dashboard/routes/dashboard/settings/macros/constants.js';
 export const emptyMacro = {
   name: '',
   actions: [
@@ -8,3 +9,25 @@ export const emptyMacro = {
   ],
   visibility: 'global',
 };
+
+export const resolveActionName = key => {
+  return macroActionTypes.find(i => i.key === key).label;
+};
+
+export const resolveTeamIds = (teams, ids) => {
+  return ids
+    .map(id => {
+      const team = teams.find(i => i.id === id);
+      return team ? team.name : '';
+    })
+    .join(', ');
+};
+
+export const resolveLabels = (labels, ids) => {
+  return ids
+    .map(id => {
+      const label = labels.find(i => i.title === id);
+      return label ? label.title : '';
+    })
+    .join(', ');
+};
diff --git a/app/javascript/shared/assets/stylesheets/spacing.scss b/app/javascript/shared/assets/stylesheets/spacing.scss
index c556c65b8..7ef494a7a 100644
--- a/app/javascript/shared/assets/stylesheets/spacing.scss
+++ b/app/javascript/shared/assets/stylesheets/spacing.scss
@@ -16,9 +16,10 @@
   --space-jumbo: 6.4rem;
   --space-mega: 10rem;
   --space-giga: 24rem;
-  
+
   --space-minus-micro: -0.2rem;
   --space-minus-smaller: -0.4rem;
+  --space-minus-half: -0.5rem;
   --space-minus-small: -0.8rem;
   --space-minus-one: -1rem;
   --space-minus-slab: -1.2rem;
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 5b6cda950..c08b66c77 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -119,6 +119,7 @@
   "person-add-outline": "M17.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zm-5.477 2a6.47 6.47 0 0 0-.709 1.5H4.253a.749.749 0 0 0-.75.75v.577c0 .535.192 1.053.54 1.46c1.253 1.469 3.22 2.214 5.957 2.214c.597 0 1.157-.035 1.68-.106c.246.495.553.954.912 1.367c-.795.16-1.66.24-2.592.24c-3.146 0-5.532-.906-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.578A2.249 2.249 0 0 1 4.253 14h7.77zm5.477 0l-.09.008a.5.5 0 0 0-.402.402L17 14.5V17h-2.496l-.09.008a.5.5 0 0 0-.402.402l-.008.09l.008.09a.5.5 0 0 0 .402.402l.09.008H17L17 20.5l.008.09a.5.5 0 0 0 .402.402l.09.008l.09-.008a.5.5 0 0 0 .402-.402L18 20.5V18h2.504l.09-.008a.5.5 0 0 0 .402-.402l.008-.09l-.008-.09a.5.5 0 0 0-.402-.402l-.09-.008H18L18 14.5l-.008-.09a.5.5 0 0 0-.402-.402L17.5 14zM10 2.005a5 5 0 1 1 0 10a5 5 0 0 1 0-10zm0 1.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7z",
   "person-assign-outline": "M11.313 15.5a6.471 6.471 0 0 1 .709-1.5h-7.77a2.249 2.249 0 0 0-2.249 2.25v.577c0 .892.319 1.756.899 2.435c1.566 1.834 3.952 2.74 7.098 2.74c.931 0 1.796-.08 2.592-.24a6.51 6.51 0 0 1-.913-1.366c-.524.07-1.083.105-1.68.105c-2.737 0-4.703-.745-5.957-2.213a2.25 2.25 0 0 1-.539-1.461v-.578a.75.75 0 0 1 .75-.749h7.06ZM10 2.005a5 5 0 1 1 0 10a5 5 0 0 1 0-10Zm0 1.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7ZM23 17.5a5.5 5.5 0 1 1-11 0a5.5 5.5 0 0 1 11 0Zm-4.647-2.853a.5.5 0 0 0-.707.707L19.293 17H15a.5.5 0 1 0 0 1h4.293l-1.647 1.647a.5.5 0 0 0 .707.707l2.5-2.5a.497.497 0 0 0 .147-.345V17.5a.498.498 0 0 0-.15-.357l-2.497-2.496Z",
   "person-outline": "M17.754 14a2.249 2.249 0 0 1 2.25 2.249v.575c0 .894-.32 1.76-.902 2.438-1.57 1.834-3.957 2.739-7.102 2.739-3.146 0-5.532-.905-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.577a2.249 2.249 0 0 1 2.249-2.25h11.501Zm0 1.5H6.253a.749.749 0 0 0-.75.749v.577c0 .536.192 1.054.54 1.461 1.253 1.468 3.219 2.214 5.957 2.214s4.706-.746 5.962-2.214a2.25 2.25 0 0 0 .541-1.463v-.575a.749.749 0 0 0-.749-.75ZM12 2.004a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 1.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z",
+  "play-circle-outline": "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12Zm8.856-3.845A1.25 1.25 0 0 0 9 9.248v5.504a1.25 1.25 0 0 0 1.856 1.093l5.757-3.189a.75.75 0 0 0 0-1.312l-5.757-3.189Z",
   "power-outline": "M8.204 4.82a.75.75 0 0 1 .634 1.36A7.51 7.51 0 0 0 4.5 12.991c0 4.148 3.358 7.51 7.499 7.51s7.499-3.362 7.499-7.51a7.51 7.51 0 0 0-4.323-6.804.75.75 0 1 1 .637-1.358 9.01 9.01 0 0 1 5.186 8.162c0 4.976-4.029 9.01-9 9.01C7.029 22 3 17.966 3 12.99a9.01 9.01 0 0 1 5.204-8.17ZM12 2.496a.75.75 0 0 1 .743.648l.007.102v7.5a.75.75 0 0 1-1.493.102l-.007-.102v-7.5a.75.75 0 0 1 .75-.75Z",
   "quote-outline": "M7.5 6a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.555-1.24 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.64-1.737 2.66-3.674 3.077-5.859A2.5 2.5 0 1 1 7.5 6Zm9 0a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.56-1.238 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.643-1.738 2.662-3.672 3.078-5.859A2.5 2.5 0 1 1 16.5 6Zm-9 1.5a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Zm9 0a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Z",
   "resize-large-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5A3.25 3.25 0 0 1 6.25 3h1.5a.75.75 0 0 1 0 1.5h-1.5ZM19.5 6.25a1.75 1.75 0 0 0-1.75-1.75h-1.5a.75.75 0 0 1 0-1.5h1.5A3.25 3.25 0 0 1 21 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5ZM19.5 17.75a1.75 1.75 0 0 1-1.75 1.75h-1.5a.75.75 0 0 0 0 1.5h1.5A3.25 3.25 0 0 0 21 17.75v-1.5a.75.75 0 0 0-1.5 0v1.5ZM4.5 17.75c0 .966.784 1.75 1.75 1.75h1.5a.75.75 0 0 1 0 1.5h-1.5A3.25 3.25 0 0 1 3 17.75v-1.5a.75.75 0 0 1 1.5 0v1.5ZM8.25 6A2.25 2.25 0 0 0 6 8.25v7.5A2.25 2.25 0 0 0 8.25 18h7.5A2.25 2.25 0 0 0 18 15.75v-7.5A2.25 2.25 0 0 0 15.75 6h-7.5ZM7.5 8.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75v-7.5Z",

From 06e22191108f82bdeba141be752928f58f0e7a95 Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Tue, 25 Oct 2022 12:19:19 +0530
Subject: [PATCH 19/27] chore: Improve macros stability (#5700)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../widgets/AutomationActionInput.vue         |  4 +-
 .../widgets/AutomationFileInput.vue           |  1 +
 .../dashboard/mixins/specs/uiSettings.spec.js |  2 +-
 .../dashboard/settings/macros/MacroEditor.vue | 12 +++++-
 .../dashboard/settings/macros/MacroForm.vue   | 13 ++++--
 .../dashboard/settings/macros/MacroNodes.vue  |  7 ---
 .../settings/macros/MacroProperties.vue       | 43 +++++++++++--------
 .../specs/conversations/actions.spec.js       |  5 +++
 8 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index 93a5e3e6c..c79406680 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -150,7 +150,7 @@ export default {
     },
     actionInputStyles() {
       return {
-        error: this.v.action_params.$dirty && this.v.action_params.$error,
+        'has-error': this.v.action_params.$dirty && this.v.action_params.$error,
         'is-a-macro': this.isMacro,
       };
     },
@@ -187,7 +187,7 @@ export default {
   margin-bottom: 0;
 }
 
-.filter.error {
+.filter.has-error {
   background: var(--r-50);
 }
 
diff --git a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
index 595faa8fb..0840072a6 100644
--- a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
@@ -113,5 +113,6 @@ input[type='file'] {
   overflow: hidden;
   text-overflow: ellipsis;
   width: 100%;
+  margin-bottom: 0;
 }
 </style>
diff --git a/app/javascript/dashboard/mixins/specs/uiSettings.spec.js b/app/javascript/dashboard/mixins/specs/uiSettings.spec.js
index 3613574ba..7959f8996 100644
--- a/app/javascript/dashboard/mixins/specs/uiSettings.spec.js
+++ b/app/javascript/dashboard/mixins/specs/uiSettings.spec.js
@@ -116,10 +116,10 @@ describe('uiSettingsMixin', () => {
       const wrapper = shallowMount(Component, { store, localVue });
       expect(wrapper.vm.conversationSidebarItemsOrder).toEqual([
         { name: 'conversation_actions' },
+        { name: 'macros' },
         { name: 'conversation_info' },
         { name: 'contact_attributes' },
         { name: 'previous_conversation' },
-        { name: 'macros' },
       ]);
     });
   });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
index b3ead6750..6a6531f88 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
@@ -16,7 +16,6 @@
 import MacroForm from './MacroForm';
 import { MACRO_ACTION_TYPES } from './constants';
 import { mapGetters } from 'vuex';
-import { emptyMacro } from './macroHelper';
 import actionQueryGenerator from 'dashboard/helper/actionQueryGenerator.js';
 import alertMixin from 'shared/mixins/alertMixin';
 import macrosMixin from 'dashboard/mixins/macrosMixin';
@@ -107,7 +106,16 @@ export default {
     },
     initNewMacro() {
       this.mode = 'CREATE';
-      this.macro = emptyMacro;
+      this.macro = {
+        name: '',
+        actions: [
+          {
+            action_name: 'assign_team',
+            action_params: [],
+          },
+        ],
+        visibility: 'global',
+      };
     },
     async saveMacro(macro) {
       try {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
index 36162db3a..95db0ed65 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
@@ -47,6 +47,12 @@ export default {
     };
   },
   watch: {
+    $route: {
+      handler() {
+        this.resetValidation();
+      },
+      immediate: true,
+    },
     macroData: {
       handler() {
         this.macro = this.macroData;
@@ -79,9 +85,6 @@ export default {
       },
     },
   },
-  mounted() {
-    this.$v.$reset();
-  },
   methods: {
     updateName(value) {
       this.macro.name = value;
@@ -104,8 +107,12 @@ export default {
       this.$emit('submit', this.macro);
     },
     resetNode(index) {
+      this.$v.macro.actions.$each[index].$reset();
       this.macro.actions[index].action_params = [];
     },
+    resetValidation() {
+      this.$v.$reset();
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
index 6e8b82007..0123055cf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
@@ -8,8 +8,6 @@
       tag="div"
       class="macros__nodes-draggable"
       handle=".macros__node-drag-handle"
-      @start="dragging = true"
-      @end="dragging = false"
     >
       <div v-for="(action, i) in actionData" :key="i" class="macro__node">
         <macro-node
@@ -53,11 +51,6 @@ export default {
       default: () => [],
     },
   },
-  data() {
-    return {
-      dragging: false,
-    };
-  },
   computed: {
     actionData: {
       get() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
index ec8588ef8..076dad07b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -10,7 +10,7 @@
         @input="onUpdateName($event)"
       />
     </div>
-    <div>
+    <div class="macros__form-visibility-container">
       <p class="title">{{ $t('MACROS.EDITOR.VISIBILITY.LABEL') }}</p>
       <div class="macros__form-visibility">
         <button
@@ -110,7 +110,9 @@ export default {
 .macros__submit-button {
   margin-top: auto;
 }
-
+.macros__form-visibility-container {
+  margin-top: var(--space-small);
+}
 .macros__form-visibility {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -129,20 +131,6 @@ export default {
       border: 1px solid var(--w-300);
     }
 
-    .subtitle {
-      font-size: var(--font-size-mini);
-      color: var(--s-500);
-    }
-
-    .title {
-      display: block;
-      margin: 0;
-      font-size: var(--font-size-small);
-      font-weight: var(--font-weight-medium);
-      line-height: 1.8;
-      color: var(--color-body);
-    }
-
     .visibility-check {
       position: absolute;
       color: var(--w-500);
@@ -152,6 +140,20 @@ export default {
   }
 }
 
+.subtitle {
+  font-size: var(--font-size-mini);
+  color: var(--s-500);
+}
+
+.title {
+  display: block;
+  margin: 0;
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.8;
+  color: var(--color-body);
+}
+
 .macros__info-panel {
   margin-top: var(--space-small);
   display: flex;
@@ -164,11 +166,18 @@ export default {
   }
   p {
     margin-left: var(--space-small);
+    margin-bottom: 0;
     color: var(--s-600);
   }
 }
 
 ::v-deep input[type='text'] {
-  margin-bottom: var(--space-small);
+  margin-bottom: 0;
+}
+
+::v-deep .error {
+  .message {
+    margin-bottom: 0;
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
index d566b1df7..9259a3972 100644
--- a/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
@@ -58,6 +58,7 @@ describe('#actions', () => {
         id: 1,
         messages: [],
         meta: { sender: { id: 1, name: 'john-doe' } },
+        labels: ['support'],
       };
       actions.updateConversation(
         { commit, rootState: { route: { name: 'home' } }, dispatch },
@@ -67,6 +68,10 @@ describe('#actions', () => {
         [types.UPDATE_CONVERSATION, conversation],
       ]);
       expect(dispatch.mock.calls).toEqual([
+        [
+          'conversationLabels/setConversationLabel',
+          { id: 1, data: ['support'] },
+        ],
         [
           'contacts/setContact',
           {

From bcde84b5b52eb144c38ada38410185ce853f6cd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Kube=C5=A1?=
 <46596180+KubesDavid@users.noreply.github.com>
Date: Tue, 25 Oct 2022 10:05:11 +0200
Subject: [PATCH 20/27] feat: Add ability to paste file/image from clipboard
 (#5627)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 app/javascript/shared/helpers/FileHelper.js     |  6 +-----
 .../shared/helpers/specs/FileHelper.spec.js     |  2 +-
 .../widget/components/ChatAttachment.vue        | 17 +++++++++++++++++
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/javascript/shared/helpers/FileHelper.js b/app/javascript/shared/helpers/FileHelper.js
index d9ca9f943..e58f52f16 100644
--- a/app/javascript/shared/helpers/FileHelper.js
+++ b/app/javascript/shared/helpers/FileHelper.js
@@ -11,11 +11,7 @@ export const formatBytes = (bytes, decimals = 2) => {
 };
 
 export const fileSizeInMegaBytes = bytes => {
-  if (bytes === 0) {
-    return 0;
-  }
-  const sizeInMB = (bytes / (1024 * 1024)).toFixed(2);
-  return sizeInMB;
+  return bytes / (1024 * 1024);
 };
 
 export const checkFileSizeLimit = (file, maximumUploadLimit) => {
diff --git a/app/javascript/shared/helpers/specs/FileHelper.spec.js b/app/javascript/shared/helpers/specs/FileHelper.spec.js
index a0d1ac52f..750eab52c 100644
--- a/app/javascript/shared/helpers/specs/FileHelper.spec.js
+++ b/app/javascript/shared/helpers/specs/FileHelper.spec.js
@@ -24,7 +24,7 @@ describe('#File Helpers', () => {
       expect(fileSizeInMegaBytes(0)).toBe(0);
     });
     it('should return 19.07 if 20000000 is passed', () => {
-      expect(fileSizeInMegaBytes(20000000)).toBe('19.07');
+      expect(fileSizeInMegaBytes(20000000)).toBeCloseTo(19.07, 2);
     });
   });
   describe('checkFileSizeLimit', () => {
diff --git a/app/javascript/widget/components/ChatAttachment.vue b/app/javascript/widget/components/ChatAttachment.vue
index 0412ca5fb..bcf2e0ffa 100755
--- a/app/javascript/widget/components/ChatAttachment.vue
+++ b/app/javascript/widget/components/ChatAttachment.vue
@@ -1,5 +1,6 @@
 <template>
   <file-upload
+    ref="upload"
     :size="4096 * 2048"
     :accept="allowedFileTypes"
     :data="{
@@ -48,7 +49,23 @@ export default {
       return ALLOWED_FILE_TYPES;
     },
   },
+  mounted() {
+    document.addEventListener('paste', this.handleClipboardPaste);
+  },
+  destroyed() {
+    document.removeEventListener('paste', this.handleClipboardPaste);
+  },
   methods: {
+    handleClipboardPaste(e) {
+      const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+      items.forEach(item => {
+        if (item.kind === 'file') {
+          e.preventDefault();
+          const file = item.getAsFile();
+          this.$refs.upload.add(file);
+        }
+      });
+    },
     getFileType(fileType) {
       return fileType.includes('image') ? 'image' : 'file';
     },

From abe439594e7011f02daf39f83bcf1ae81e1ec04e Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 26 Oct 2022 03:34:29 +0530
Subject: [PATCH 21/27] fix: Add preference to choose browser lang for widget
 settings page (#5726)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 app/javascript/packs/sdk.js           | 10 ++++++++--
 app/javascript/widget/App.vue         | 16 +++++++++++++---
 app/views/widget_tests/index.html.erb |  1 +
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/javascript/packs/sdk.js b/app/javascript/packs/sdk.js
index 2fdd6c57b..13e41a98e 100755
--- a/app/javascript/packs/sdk.js
+++ b/app/javascript/packs/sdk.js
@@ -18,6 +18,11 @@ const runSDK = ({ baseUrl, websiteToken }) => {
   }
 
   const chatwootSettings = window.chatwootSettings || {};
+  let locale = chatwootSettings.locale || 'en';
+  if (chatwootSettings.useBrowserLanguage) {
+    locale = window.navigator.language.replace('-', '_');
+  }
+
   window.$chatwoot = {
     baseUrl,
     hasLoaded: false,
@@ -25,7 +30,8 @@ const runSDK = ({ baseUrl, websiteToken }) => {
     isOpen: false,
     position: chatwootSettings.position === 'left' ? 'left' : 'right',
     websiteToken,
-    locale: chatwootSettings.locale,
+    locale,
+    useBrowserLanguage: chatwootSettings.useBrowserLanguage || false,
     type: getBubbleView(chatwootSettings.type),
     launcherTitle: chatwootSettings.launcherTitle || '',
     showPopoutButton: chatwootSettings.showPopoutButton || false,
@@ -58,7 +64,7 @@ const runSDK = ({ baseUrl, websiteToken }) => {
       IFrameHelper.events.popoutChatWindow({
         baseUrl: window.$chatwoot.baseUrl,
         websiteToken: window.$chatwoot.websiteToken,
-        locale: window.$chatwoot.locale,
+        locale,
       });
     },
 
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index 17b610f09..7210cf654 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -134,10 +134,20 @@ export default {
         });
       });
     },
-    setLocale(locale) {
+    setLocale(localeWithVariation) {
       const { enabledLanguages } = window.chatwootWebChannel;
-      if (enabledLanguages.some(lang => lang.iso_639_1_code === locale)) {
-        this.$root.$i18n.locale = locale;
+      const localeWithoutVariation = localeWithVariation.split('_')[0];
+      const hasLocaleWithoutVariation = enabledLanguages.some(
+        lang => lang.iso_639_1_code === localeWithoutVariation
+      );
+      const hasLocaleWithVariation = enabledLanguages.some(
+        lang => lang.iso_639_1_code === localeWithVariation
+      );
+
+      if (hasLocaleWithVariation) {
+        this.$root.$i18n.locale = localeWithVariation;
+      } else if (hasLocaleWithoutVariation) {
+        this.$root.$i18n.locale = localeWithoutVariation;
       }
     },
     registerUnreadEvents() {
diff --git a/app/views/widget_tests/index.html.erb b/app/views/widget_tests/index.html.erb
index 3352f5a3a..5a3ba29e0 100644
--- a/app/views/widget_tests/index.html.erb
+++ b/app/views/widget_tests/index.html.erb
@@ -16,6 +16,7 @@ window.chatwootSettings = {
   hideMessageBubble: false,
   position: '<%= @widget_position %>',
   locale: 'en',
+  useBrowserLanguage: true,
   type: '<%= @widget_type %>',
   showPopoutButton: true,
   widgetStyle: '<%= @widget_style %>',

From bedb2cab634b208e208a66a2da0b4bc03c12ccf3 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Tue, 25 Oct 2022 15:16:09 -0700
Subject: [PATCH 22/27] Use @page-change instead of on-page-change (#5749)

---
 .../routes/dashboard/contacts/components/ContactsView.vue       | 2 +-
 .../dashboard/notifications/components/NotificationsView.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
index dbac2f0bc..bef3ceccb 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
@@ -24,9 +24,9 @@
         @on-sort-change="onSortChange"
       />
       <table-footer
-        :on-page-change="onPageChange"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
+        @page-change="onPageChange"
       />
     </div>
 
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
index 587a8bb54..ca60b3750 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
@@ -9,9 +9,9 @@
         :on-mark-all-done-click="onMarkAllDoneClick"
       />
       <table-footer
-        :on-page-change="onPageChange"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
+        @page-change="onPageChange"
       />
     </div>
   </div>

From 352558dd11f457bfe62d616654f233201c4d0ce1 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 26 Oct 2022 04:47:05 +0530
Subject: [PATCH 23/27] fix: Update color for the action button used in card
 messages (#5740)

---
 app/javascript/shared/components/CardButton.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/javascript/shared/components/CardButton.vue b/app/javascript/shared/components/CardButton.vue
index d6d116ade..981c6f93d 100644
--- a/app/javascript/shared/components/CardButton.vue
+++ b/app/javascript/shared/components/CardButton.vue
@@ -4,6 +4,7 @@
     :key="action.uri"
     class="action-button button"
     :href="action.uri"
+    :style="{ background: widgetColor, borderColor: widgetColor }"
     target="_blank"
     rel="noopener nofollow noreferrer"
   >
@@ -13,13 +14,14 @@
     v-else
     :key="action.payload"
     class="action-button button"
+    :style="{ borderColor: widgetColor, color: widgetColor }"
     @click="onClick"
   >
     {{ action.text }}
   </button>
 </template>
-
 <script>
+import { mapGetters } from 'vuex';
 export default {
   components: {},
   props: {
@@ -29,6 +31,9 @@ export default {
     },
   },
   computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
     isLink() {
       return this.action.type === 'link';
     },

From 12cd15b6ad2783634308cdee2d03f70d07adbb3c Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Wed, 26 Oct 2022 03:40:47 -0700
Subject: [PATCH 24/27] chore: Disable email processing for suspended accounts
 (#5762)

- Disable email processing for suspended accounts
---
 app/mailboxes/support_mailbox.rb       |  2 ++
 spec/mailboxes/support_mailbox_spec.rb | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/app/mailboxes/support_mailbox.rb b/app/mailboxes/support_mailbox.rb
index 8accda902..ca7f39a9a 100644
--- a/app/mailboxes/support_mailbox.rb
+++ b/app/mailboxes/support_mailbox.rb
@@ -7,6 +7,8 @@ class SupportMailbox < ApplicationMailbox
                     :decorate_mail
 
   def process
+    # to turn off spam conversation creation
+    return unless @account.active?
     # prevent loop from chatwoot notification emails
     return if notification_email_from_chatwoot?
 
diff --git a/spec/mailboxes/support_mailbox_spec.rb b/spec/mailboxes/support_mailbox_spec.rb
index 946275b71..a3a85de9e 100644
--- a/spec/mailboxes/support_mailbox_spec.rb
+++ b/spec/mailboxes/support_mailbox_spec.rb
@@ -16,6 +16,26 @@ RSpec.describe SupportMailbox, type: :mailbox do
     end
   end
 
+  describe 'when an account is suspended' do
+    let(:account) { create(:account, status: :suspended) }
+    let(:agent) { create(:user, email: 'agent1@example.com', account: account) }
+    let!(:channel_email) { create(:channel_email, account: account) }
+    let(:support_mail) { create_inbound_email_from_fixture('support.eml') }
+    let(:described_subject) { described_class.receive support_mail }
+    let(:conversation) { Conversation.where(inbox_id: channel_email.inbox).last }
+
+    before do
+      # this email is hardcoded in the support.eml, that's why we are updating this
+      channel_email.email = 'care@example.com'
+      channel_email.save!
+    end
+
+    it 'shouldnt create a conversation in the channel' do
+      described_subject
+      expect(conversation.present?).to be(false)
+    end
+  end
+
   describe 'add mail as a new ticket in the email inbox' do
     let(:account) { create(:account) }
     let(:agent) { create(:user, email: 'agent1@example.com', account: account) }

From 89d7e4ead67b86210bc8c399c662c969a0c57836 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Kube=C5=A1?=
 <46596180+KubesDavid@users.noreply.github.com>
Date: Thu, 27 Oct 2022 21:32:23 +0200
Subject: [PATCH 25/27] chore: refactor thumbnail (#5682)

---
 .../dashboard/components/widgets/Avatar.vue   | 62 ++-----------
 .../components/widgets/Thumbnail.vue          | 92 +++++--------------
 2 files changed, 32 insertions(+), 122 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue
index df654ee7e..6d7e17d50 100644
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/app/javascript/dashboard/components/widgets/Avatar.vue
@@ -1,10 +1,6 @@
 <template>
-  <div
-    class="avatar-container"
-    :style="[style, customStyle]"
-    aria-hidden="true"
-  >
-    <span>{{ userInitial }}</span>
+  <div class="avatar-container" :style="style" aria-hidden="true">
+    {{ userInitial }}
   </div>
 </template>
 
@@ -16,69 +12,26 @@ export default {
       type: String,
       default: '',
     },
-    backgroundColor: {
-      type: String,
-      default: '#c2e1ff',
-    },
-    color: {
-      type: String,
-      default: '#1976cc',
-    },
-    customStyle: {
-      type: Object,
-      default: undefined,
-    },
     size: {
       type: Number,
       default: 40,
     },
-    src: {
-      type: String,
-      default: '',
-    },
-    rounded: {
-      type: Boolean,
-      default: true,
-    },
-    variant: {
-      type: String,
-      default: 'circle',
-    },
   },
   computed: {
     style() {
-      let style = {
-        width: `${this.size}px`,
-        height: `${this.size}px`,
-        borderRadius:
-          this.variant === 'square' ? 'var(--border-radius-large)' : '50%',
-        lineHeight: `${this.size + Math.floor(this.size / 20)}px`,
+      return {
         fontSize: `${Math.floor(this.size / 2.5)}px`,
       };
-
-      if (this.backgroundColor) {
-        style = { ...style, backgroundColor: this.backgroundColor };
-      }
-      if (this.color) {
-        style = { ...style, color: this.color };
-      }
-      return style;
     },
     userInitial() {
-      return this.initials || this.initial(this.username);
-    },
-  },
-  methods: {
-    initial(username) {
-      const parts = username ? username.split(/[ -]/) : [];
-      let initials = '';
-      for (let i = 0; i < parts.length; i += 1) {
-        initials += parts[i].charAt(0);
-      }
+      const parts = this.username.split(/[ -]/);
+      let initials = parts.reduce((acc, curr) => acc + curr.charAt(0), '');
+
       if (initials.length > 2 && initials.search(/[A-Z]/) !== -1) {
         initials = initials.replace(/[a-z]+/g, '');
       }
       initials = initials.substring(0, 2).toUpperCase();
+
       return initials;
     },
   },
@@ -88,6 +41,7 @@ export default {
 <style lang="scss" scoped>
 .avatar-container {
   display: flex;
+  line-height: 100%;
   font-weight: 500;
   align-items: center;
   justify-content: center;
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 4bfc729de..e0d9da24c 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -1,74 +1,23 @@
 <template>
   <div class="user-thumbnail-box" :style="{ height: size, width: size }">
     <img
-      v-if="!imgError && Boolean(src)"
-      id="image"
+      v-if="!imgError && src"
       :src="src"
       :class="thumbnailClass"
-      @error="onImgError()"
+      @error="onImgError"
     />
     <Avatar
       v-else
       :username="userNameWithoutEmoji"
       :class="thumbnailClass"
       :size="avatarSize"
-      :variant="variant"
     />
     <img
-      v-if="badge === 'instagram_direct_message'"
-      id="badge"
+      v-if="badgeSrc"
       class="source-badge"
       :style="badgeStyle"
-      src="/integrations/channels/badges/instagram-dm.png"
-    />
-    <img
-      v-else-if="badge === 'facebook'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/messenger.png"
-    />
-    <img
-      v-else-if="badge === 'twitter-tweet'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/twitter-tweet.png"
-    />
-    <img
-      v-else-if="badge === 'twitter-dm'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/twitter-dm.png"
-    />
-    <img
-      v-else-if="badge === 'whatsapp'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/whatsapp.png"
-    />
-    <img
-      v-else-if="badge === 'sms'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/sms.png"
-    />
-    <img
-      v-else-if="badge === 'Channel::Line'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/line.png"
-    />
-    <img
-      v-else-if="badge === 'Channel::Telegram'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/telegram.png"
+      :src="`/integrations/channels/badges/${badgeSrc}.png`"
+      alt="Badge"
     />
     <div
       v-if="showStatusIndicator"
@@ -83,7 +32,7 @@
  * Src - source for round image
  * Size - Size of the thumbnail
  * Badge - Chat source indication { fb / telegram }
- * Username - User name for avatar
+ * Username - Username for avatar
  */
 import Avatar from './Avatar';
 import { removeEmoji } from 'shared/helpers/emoji';
@@ -103,7 +52,7 @@ export default {
     },
     badge: {
       type: String,
-      default: 'fb',
+      default: '',
     },
     username: {
       type: String,
@@ -142,6 +91,19 @@ export default {
     avatarSize() {
       return Number(this.size.replace(/\D+/g, ''));
     },
+    badgeSrc() {
+      return {
+        instagram_direct_message: 'instagram-dm',
+        facebook: 'messenger',
+        'twitter-tweet': 'twitter-tweet',
+        'twitter-dm': 'twitter-dm',
+        whatsapp: 'whatsapp',
+        sms: 'sms',
+        'Channel::Line': 'line',
+        'Channel::Telegram': 'telegram',
+        'Channel::WebWidget': '',
+      }[this.badge];
+    },
     badgeStyle() {
       const size = Math.floor(this.avatarSize / 3);
       const badgeSize = `${size + 2}px`;
@@ -160,12 +122,10 @@ export default {
     },
   },
   watch: {
-    src: {
-      handler(value, oldValue) {
-        if (value !== oldValue && this.imgError) {
-          this.imgError = false;
-        }
-      },
+    src(value, oldValue) {
+      if (value !== oldValue && this.imgError) {
+        this.imgError = false;
+      }
     },
   },
   methods: {
@@ -229,9 +189,5 @@ export default {
   .user-online-status--offline {
     background: var(--s-500);
   }
-
-  .user-online-status--offline {
-    background: var(--s-500);
-  }
 }
 </style>

From 2aa99ee1375470306ad396e1060689998ebbbdef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Kube=C5=A1?=
 <46596180+KubesDavid@users.noreply.github.com>
Date: Thu, 27 Oct 2022 21:35:39 +0200
Subject: [PATCH 26/27] fix: Fix timestamp auto-update in conversations chat
 list (#5640)

* fix: Fix timestamp auto-update

* fix: rewrite `setInterval` to `setTimeout`

* fix: change refresh time logic

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../dashboard/components/ui/TimeAgo.vue       | 63 ++++++++-----------
 1 file changed, 25 insertions(+), 38 deletions(-)

diff --git a/app/javascript/dashboard/components/ui/TimeAgo.vue b/app/javascript/dashboard/components/ui/TimeAgo.vue
index c262a8aa0..c796ed0f6 100644
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -1,17 +1,15 @@
 <template>
   <span class="time-ago">
-    <span> {{ timeAgo }}</span>
+    <span>{{ timeAgo }}</span>
   </span>
 </template>
 
 <script>
-const ZERO = 0;
 const MINUTE_IN_MILLI_SECONDS = 60000;
 const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
 const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;
 
 import timeMixin from 'dashboard/mixins/time';
-import { differenceInMilliseconds } from 'date-fns';
 
 export default {
   name: 'TimeAgo',
@@ -28,51 +26,40 @@ export default {
   },
   data() {
     return {
-      timeAgo: '',
+      timeAgo: this.dynamicTime(this.timestamp),
       timer: null,
     };
   },
-  computed: {
+  watch: {
+    timestamp() {
+      this.timeAgo = this.dynamicTime(this.timestamp);
+    },
+  },
+  mounted() {
+    if (this.isAutoRefreshEnabled) {
+      this.createTimer();
+    }
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
+  methods: {
+    createTimer() {
+      this.timer = setTimeout(() => {
+        this.timeAgo = this.dynamicTime(this.timestamp);
+        this.createTimer();
+      }, this.refreshTime());
+    },
     refreshTime() {
-      const timeDiff = differenceInMilliseconds(
-        new Date(),
-        new Date(this.timestamp * 1000)
-      );
+      const timeDiff = Date.now() - this.timestamp * 1000;
       if (timeDiff > DAY_IN_MILLI_SECONDS) {
         return DAY_IN_MILLI_SECONDS;
       }
       if (timeDiff > HOUR_IN_MILLI_SECONDS) {
         return HOUR_IN_MILLI_SECONDS;
       }
-      if (timeDiff > MINUTE_IN_MILLI_SECONDS) {
-        return MINUTE_IN_MILLI_SECONDS;
-      }
-      return ZERO;
-    },
-  },
-  mounted() {
-    this.timeAgo = this.dynamicTime(this.timestamp);
-    if (this.isAutoRefreshEnabled) {
-      this.createTimer();
-    }
-  },
-  beforeDestroy() {
-    this.clearTimer();
-  },
-  methods: {
-    createTimer() {
-      const refreshTime = this.refreshTime;
-      if (refreshTime > ZERO) {
-        this.timer = setTimeout(() => {
-          this.timeAgo = this.dynamicTime(this.timestamp);
-          this.createTimer();
-        }, refreshTime);
-      }
-    },
-    clearTimer() {
-      if (this.timer) {
-        clearTimeout(this.timer);
-      }
+
+      return MINUTE_IN_MILLI_SECONDS;
     },
   },
 };

From 3b09840d3916de268dc041b475597c3c9108ce3d Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Fri, 28 Oct 2022 01:42:24 +0530
Subject: [PATCH 27/27] chore: Fix import paths in storybook (#5772)

---
 .../helpcenter/components/stories/AddCategory.stories.js        | 2 +-
 .../helpcenter/components/stories/ArticleEditor.stories.js      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/AddCategory.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/AddCategory.stories.js
index c0b5bb079..c0d2a7507 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/AddCategory.stories.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/AddCategory.stories.js
@@ -1,4 +1,4 @@
-import AddCategoryComponent from '../AddCategory.vue';
+import AddCategoryComponent from '../../pages/categories/AddCategory.vue';
 import { action } from '@storybook/addon-actions';
 
 export default {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleEditor.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleEditor.stories.js
index a790350a7..1f507fbad 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleEditor.stories.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleEditor.stories.js
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import ArticleEditor from './ArticleEditor.vue';
+import ArticleEditor from '../../components/ArticleEditor.vue';
 
 export default {
   title: 'Components/Help Center',