From d47a0ae4615c54bf5bb6dee5319d64cdff5a8a5d Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 2 Sep 2022 22:34:07 +0530
Subject: [PATCH] feat: Adds the ability to edit/delete category (#5385)

---
 .../dashboard/api/helpCenter/categories.js    |   7 +-
 .../dashboard/i18n/locale/en/helpCenter.json  |  52 +++++
 .../components/HelpCenterLayout.vue           |   4 +-
 .../helpcenter/components/PortalListItem.vue  |   8 +
 .../helpcenter/components/PortalSwitch.vue    |   8 +
 .../dashboard/helpcenter/helpcenter.routes.js |   8 +-
 .../categories}/AddCategory.vue               |   3 +-
 .../pages/categories/CategoryListItem.vue     | 123 +++++++++++
 .../pages/categories/EditCategory.vue         | 197 +++++++++++++++++-
 .../pages/categories/ListAllCategories.vue    | 193 ++++++++++++++++-
 .../helpcenter/pages/portals/EditPortal.vue   |  21 +-
 .../modules/helpCenterCategories/actions.js   |  16 +-
 .../modules/helpCenterCategories/getters.js   |   7 +
 .../modules/helpCenterCategories/mutations.js |   2 +-
 .../specs/actions.spec.js                     |  49 +++--
 .../specs/getters.spec.js                     |   4 +
 .../dashboard/store/mutation-types.js         |   2 +
 17 files changed, 667 insertions(+), 37 deletions(-)
 rename app/javascript/dashboard/routes/dashboard/helpcenter/{components => pages/categories}/AddCategory.vue (98%)
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue

diff --git a/app/javascript/dashboard/api/helpCenter/categories.js b/app/javascript/dashboard/api/helpCenter/categories.js
index c5cb40cd4..b6eae3f32 100644
--- a/app/javascript/dashboard/api/helpCenter/categories.js
+++ b/app/javascript/dashboard/api/helpCenter/categories.js
@@ -15,8 +15,11 @@ class CategoriesAPI extends PortalsAPI {
     return axios.post(`${this.url}/${portalSlug}/categories`, categoryObj);
   }
 
-  update({ portalSlug, categoryObj }) {
-    return axios.patch(`${this.url}/${portalSlug}/categories`, categoryObj);
+  update({ portalSlug, categoryId, categoryObj }) {
+    return axios.patch(
+      `${this.url}/${portalSlug}/categories/${categoryId}`,
+      categoryObj
+    );
   }
 
   delete({ portalSlug, categoryId }) {
diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index d5ab8c8eb..b5dd77749 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -139,6 +139,21 @@
             "TITLE": "Locales"
           }
         },
+        "CATEGORIES": {
+          "TITLE": "Categories in",
+          "NEW_CATEGORY": "New category",
+          "TABLE": {
+            "NAME": "Name",
+            "DESCRIPTION": "Description",
+            "LOCALE": "Locale",
+            "ARTICLE_COUNT": "No. of articles",
+            "ACTION_BUTTON": {
+              "EDIT": "Edit category",
+              "DELETE": "Delete category"
+            },
+            "EMPTY_TEXT": "No categories found"
+          }
+        },
         "EDIT_BASIC_INFO": {
           "BUTTON_TEXT": "Update basic settings"
         }
@@ -353,6 +368,43 @@
           "SUCCESS_MESSAGE": "Category created successfully",
           "ERROR_MESSAGE": "Unable to create category"
         }
+      },
+      "EDIT": {
+        "TITLE": "Edit a category",
+        "SUB_TITLE": "Editing a category will update the category in the public facing portal.",
+        "PORTAL": "Portal",
+        "LOCALE": "Locale",
+        "NAME": {
+          "LABEL": "Name",
+          "PLACEHOLDER": "Category name",
+          "HELP_TEXT": "The category name will be used in the public facing portal to categorize articles.",
+          "ERROR": "Name is required"
+        },
+        "SLUG": {
+          "LABEL": "Slug",
+          "PLACEHOLDER": "Category slug for urls",
+          "HELP_TEXT": "app.chatwoot.com/portal/my-portal/en-US/categories/my-slug",
+          "ERROR": "Slug is required"
+        },
+        "DESCRIPTION": {
+          "LABEL": "Description",
+          "PLACEHOLDER": "Give a short description about the category.",
+          "ERROR": "Description is required"
+        },
+        "BUTTONS": {
+          "CREATE": "Update category",
+          "CANCEL": "Cancel"
+        },
+        "API": {
+          "SUCCESS_MESSAGE": "Category updated successfully",
+          "ERROR_MESSAGE": "Unable to update category"
+        }
+      },
+      "DELETE": {
+        "API": {
+          "SUCCESS_MESSAGE": "Category deleted successfully",
+          "ERROR_MESSAGE": "Unable to delete category"
+        }
       }
     }
   }
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index 4f9b30d97..e043adba3 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -37,6 +37,7 @@
       />
       <add-category
         v-if="showAddCategoryModal"
+        :show.sync="showAddCategoryModal"
         :portal-name="selectedPortalName"
         :locale="selectedPortalLocale"
         @cancel="onClickCloseAddCategoryModal"
@@ -56,7 +57,7 @@ import CommandBar from 'dashboard/routes/dashboard/commands/commandbar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel';
 import portalMixin from '../mixins/portalMixin';
-import AddCategory from '../components/AddCategory.vue';
+import AddCategory from '../pages/categories/AddCategory';
 
 export default {
   components: {
@@ -182,6 +183,7 @@ export default {
       ];
     },
     additionalSecondaryMenuItems() {
+      if (!this.selectedPortal) return [];
       return [
         {
           icon: 'folder',
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
index 20da37baa..e14ae5fb6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@@ -243,6 +243,7 @@ export default {
       this.$emit('open-site');
     },
     openSettings() {
+      this.fetchPortalsAndItsCategories();
       this.navigateToPortalEdit();
     },
     onClickOpenDeleteModal(portal) {
@@ -252,6 +253,13 @@ export default {
     closeDeletePopup() {
       this.showDeleteConfirmationPopup = false;
     },
+    fetchPortalsAndItsCategories() {
+      this.$store.dispatch('portals/index').then(() => {
+        this.$store.dispatch('categories/index', {
+          portalSlug: this.portal.slug,
+        });
+      });
+    },
     async onClickDeletePortal() {
       const { slug } = this.selectedPortalForDelete;
       try {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
index d4e80463b..3f815be54 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -92,8 +92,16 @@ 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/helpcenter.routes.js b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
index 8def6be6b..fb0dda331 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
@@ -77,6 +77,12 @@ const portalRoutes = [
         component: EditPortalCustomization,
         roles: ['administrator'],
       },
+      {
+        path: getPortalRoute(':portalSlug/edit/:locale/categories'),
+        name: 'list_all_locale_categories',
+        roles: ['administrator', 'agent'],
+        component: ListAllCategories,
+      },
     ],
   },
 ];
@@ -125,7 +131,7 @@ const articleRoutes = [
 const categoryRoutes = [
   {
     path: getPortalRoute(':portalSlug/:locale/categories'),
-    name: 'list_all_locale_categories',
+    name: 'all_locale_categories',
     roles: ['administrator', 'agent'],
     component: ListAllCategories,
   },
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
similarity index 98%
rename from app/javascript/dashboard/routes/dashboard/helpcenter/components/AddCategory.vue
rename to app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
index c3f053559..0fb6bcd2b 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
@@ -132,11 +132,12 @@ export default {
     },
 
     async addCategory() {
-      const { name, slug, description } = this;
+      const { name, slug, description, locale } = this;
       const data = {
         name,
         slug,
         description,
+        locale,
       };
       this.$v.$touch();
       if (this.$v.$invalid) {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
new file mode 100644
index 000000000..3a8b7a850
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">
+            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.NAME') }}
+          </th>
+          <th scope="col">
+            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.DESCRIPTION') }}
+          </th>
+          <th scope="col">
+            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.LOCALE') }}
+          </th>
+          <th scope="col">
+            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ARTICLE_COUNT') }}
+          </th>
+          <th scope="col" />
+        </tr>
+      </thead>
+      <tr>
+        <td colspan="100%" class="horizontal-line" />
+      </tr>
+      <tbody>
+        <tr v-for="category in categories" :key="category.id">
+          <td>
+            <span>{{ category.name }}</span>
+          </td>
+          <td>
+            <span>{{ category.description }}</span>
+          </td>
+          <td>
+            <span>{{ category.locale }}</span>
+          </td>
+          <td>
+            <span>{{ category.meta.articles_count }}</span>
+          </td>
+          <td>
+            <woot-button
+              v-tooltip.top-end="
+                $t(
+                  'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.EDIT'
+                )
+              "
+              size="tiny"
+              variant="smooth"
+              icon="edit"
+              color-scheme="secondary"
+              @click="editCategory(category)"
+            />
+            <woot-button
+              v-tooltip.top-end="
+                $t(
+                  'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.DELETE'
+                )
+              "
+              size="tiny"
+              variant="smooth"
+              icon="delete"
+              color-scheme="alert"
+              @click="deleteCategory(category.id)"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-if="categories.length === 0" class="empty-text">
+      {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.EMPTY_TEXT') }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    categories: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  methods: {
+    editCategory(category) {
+      this.$emit('edit', category);
+    },
+    deleteCategory(categoryId) {
+      this.$emit('delete', categoryId);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+table {
+  thead tr th {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    text-transform: none;
+    color: var(--s-600);
+    padding-left: 0;
+    padding-top: 0;
+  }
+
+  tbody tr {
+    border-bottom: 0;
+    td {
+      font-size: var(--font-size-small);
+      padding-left: 0;
+    }
+  }
+}
+.horizontal-line {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.empty-text {
+  display: flex;
+  justify-content: center;
+  color: var(--s-500);
+  font-size: var(--font-size-default);
+  margin-top: var(--space-three);
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
index ecd03c1b6..ea3bb4aff 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
@@ -1,3 +1,198 @@
 <template>
-  <div>Component to edit a category</div>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('HELP_CENTER.CATEGORY.EDIT.TITLE')"
+      :header-content="$t('HELP_CENTER.CATEGORY.EDIT.SUB_TITLE')"
+    />
+    <form class="row" @submit.prevent="onUpdate">
+      <div class="medium-12 columns">
+        <div class="row article-info">
+          <div class="columns medium-6">
+            <label>
+              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.PORTAL') }}</span>
+              <p class="value">{{ portalName }}</p>
+            </label>
+          </div>
+          <div class="columns medium-6">
+            <label>
+              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.LOCALE') }}</span>
+              <p class="value">{{ locale }}</p>
+            </label>
+          </div>
+        </div>
+        <woot-input
+          v-model.trim="name"
+          :class="{ error: $v.name.$error }"
+          class="medium-12 columns"
+          :error="nameError"
+          :label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
+          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.NAME.HELP_TEXT')"
+          @input="onNameChange"
+        />
+        <woot-input
+          v-model.trim="slug"
+          :class="{ error: $v.slug.$error }"
+          class="medium-12 columns"
+          :error="slugError"
+          :label="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.LABEL')"
+          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.HELP_TEXT')"
+          @input="$v.slug.$touch"
+        />
+        <label>
+          {{ $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.LABEL') }}
+          <textarea
+            v-model="description"
+            rows="3"
+            type="text"
+            :placeholder="
+              $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.PLACEHOLDER')
+            "
+          />
+        </label>
+        <div class="medium-12 columns">
+          <div class="modal-footer justify-content-end w-full">
+            <woot-button class="button clear" @click.prevent="onClose">
+              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CANCEL') }}
+            </woot-button>
+            <woot-button @click="editCategory">
+              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CREATE') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </woot-modal>
 </template>
+
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+import { required, minLength } from 'vuelidate/lib/validators';
+import { convertToCategorySlug } from 'dashboard/helper/commons.js';
+
+export default {
+  mixins: [alertMixin],
+  props: {
+    show: {
+      type: Boolean,
+      default: true,
+    },
+    portalName: {
+      type: String,
+      default: '',
+    },
+    locale: {
+      type: String,
+      default: '',
+    },
+    category: {
+      type: Object,
+      default: () => {},
+    },
+    selectedPortalSlug: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      id: this.category.id,
+      name: '',
+      slug: '',
+      description: '',
+    };
+  },
+  validations: {
+    name: {
+      required,
+      minLength: minLength(2),
+    },
+    slug: {
+      required,
+    },
+  },
+  computed: {
+    nameError() {
+      if (this.$v.name.$error) {
+        return this.$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
+      }
+      return '';
+    },
+    slugError() {
+      if (this.$v.slug.$error) {
+        return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
+      }
+      return '';
+    },
+  },
+  mounted() {
+    this.updateDataFromStore();
+  },
+  methods: {
+    updateDataFromStore() {
+      const { category } = this;
+      this.name = category.name;
+      this.slug = category.slug;
+      this.description = category.description;
+    },
+    onNameChange() {
+      this.slug = convertToCategorySlug(this.name);
+    },
+    onUpdate() {
+      this.$emit('update');
+    },
+    onClose() {
+      this.$emit('cancel');
+    },
+    async editCategory() {
+      const { id, name, slug, description } = this;
+      const data = {
+        id,
+        name,
+        slug,
+        description,
+      };
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+      try {
+        await this.$store.dispatch('categories/update', {
+          portalSlug: this.selectedPortalSlug,
+          categoryId: id,
+          categoryObj: data,
+        });
+        this.alertMessage = this.$t(
+          'HELP_CENTER.CATEGORY.EDIT.API.SUCCESS_MESSAGE'
+        );
+        this.onClose();
+      } catch (error) {
+        const errorMessage = error?.message;
+        this.alertMessage =
+          errorMessage ||
+          this.$t('HELP_CENTER.CATEGORY.EDIT.API.ERROR_MESSAGE');
+      } finally {
+        this.showAlert(this.alertMessage);
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.article-info {
+  width: 100%;
+  margin: 0 0 var(--space-normal);
+  .value {
+    color: var(--s-600);
+  }
+}
+
+.input-container::v-deep {
+  margin: 0 0 var(--space-normal);
+
+  input {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
index 8799add2f..3f63de7bc 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
@@ -1,3 +1,194 @@
 <template>
-  <div>Component to list all categories</div>
+  <div class="category-list--container">
+    <header>
+      <div class="header-left--wrap">
+        <label class="sub-block-title header-text">{{
+          $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TITLE')
+        }}</label>
+        <select
+          :value="currentLocaleCode"
+          class="row small-2 select-locale"
+          @change="changeCurrentCategory"
+        >
+          <option
+            v-for="allowedLocaleCode in allowedLocaleCodes"
+            :key="allowedLocaleCode"
+            :value="allowedLocaleCode"
+          >
+            {{ allowedLocaleCode }}
+          </option>
+        </select>
+      </div>
+      <div class="header-right--wrap">
+        <woot-button
+          size="small"
+          variant="smooth"
+          color-scheme="primary"
+          icon="add"
+          @click="openAddCategoryModal"
+        >
+          {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.NEW_CATEGORY') }}
+        </woot-button>
+      </div>
+    </header>
+    <div class="category-list">
+      <category-list-item
+        :categories="categoryByLocaleCode"
+        @delete="deleteCategory"
+        @edit="openEditCategoryModal"
+      />
+    </div>
+    <edit-category
+      v-if="showEditCategoryModal"
+      :show.sync="showEditCategoryModal"
+      :portal-name="currentPortalName"
+      :locale="selectedCategory.locale"
+      :category="selectedCategory"
+      :selected-portal-slug="currentPortalSlug"
+      @cancel="closeEditCategoryModal"
+    />
+    <add-category
+      v-if="showAddCategoryModal"
+      :show.sync="showAddCategoryModal"
+      :portal-name="currentPortalName"
+      :locale="currentLocaleCode"
+      @cancel="closeAddCategoryModal"
+    />
+  </div>
 </template>
+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import portalMixin from '../../mixins/portalMixin';
+
+import CategoryListItem from './CategoryListItem';
+import AddCategory from './AddCategory';
+import EditCategory from './EditCategory';
+
+export default {
+  components: {
+    CategoryListItem,
+    AddCategory,
+    EditCategory,
+  },
+  mixins: [alertMixin, portalMixin],
+  data() {
+    return {
+      selectedCategory: {},
+      selectedLocaleCode: '',
+      currentLocaleCode: 'en',
+      showEditCategoryModal: false,
+      showAddCategoryModal: false,
+      alertMessage: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      portals: 'portals/allPortals',
+      meta: 'portals/getMeta',
+      isFetching: 'portals/isFetchingPortals',
+    }),
+    currentPortalSlug() {
+      return this.$route.params.portalSlug;
+    },
+    categoryByLocaleCode() {
+      return this.$store.getters['categories/categoriesByLocaleCode'](
+        this.currentLocaleCode
+      );
+    },
+    currentPortal() {
+      const slug = this.currentPortalSlug;
+      if (slug) return this.$store.getters['portals/portalBySlug'](slug);
+
+      return this.$store.getters['portals/allPortals'][0];
+    },
+    currentPortalName() {
+      return this.currentPortal ? this.currentPortal.name : '';
+    },
+    currentPortalLocale() {
+      return this.currentPortal ? this.currentPortal?.meta?.default_locale : '';
+    },
+    allLocales() {
+      return this.currentPortal
+        ? this.currentPortal.config.allowed_locales
+        : [];
+    },
+    allowedLocaleCodes() {
+      return this.allLocales.map(locale => locale.code);
+    },
+  },
+  methods: {
+    openAddCategoryModal() {
+      this.showAddCategoryModal = true;
+    },
+    openEditCategoryModal(category) {
+      this.selectedCategory = category;
+      this.showEditCategoryModal = true;
+    },
+    closeAddCategoryModal() {
+      this.showAddCategoryModal = false;
+    },
+    closeEditCategoryModal() {
+      this.showEditCategoryModal = false;
+    },
+    async deleteCategory(categoryId) {
+      try {
+        await this.$store.dispatch('categories/delete', {
+          portalSlug: this.currentPortalSlug,
+          categoryId: categoryId,
+        });
+        this.alertMessage = this.$t(
+          'HELP_CENTER.CATEGORY.DELETE.API.SUCCESS_MESSAGE'
+        );
+      } catch (error) {
+        const errorMessage = error?.message;
+        this.alertMessage =
+          errorMessage ||
+          this.$t('HELP_CENTER.CATEGORY.DELETE.API.ERROR_MESSAGE');
+      } finally {
+        this.showAlert(this.alertMessage);
+      }
+    },
+    changeCurrentCategory(event) {
+      const localeCode = event.target.value;
+      this.currentLocaleCode = localeCode;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.category-list--container {
+  width: 100%;
+  padding-left: var(--space-normal);
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-normal);
+
+    .header-left--wrap {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .header-text {
+        font-weight: var(--font-weight-normal);
+        margin-right: var(--space-slab);
+        margin-bottom: 0;
+      }
+    }
+
+    .header-right--wrap {
+      flex: none;
+      align-items: center;
+    }
+    .select-locale {
+      height: var(--space-large);
+      margin-bottom: 0;
+      padding-top: var(--space-micro);
+      padding-bottom: var(--space-micro);
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
index dd5b893e0..7c77688cc 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
@@ -49,7 +49,8 @@ export default {
     }),
     currentPortal() {
       const slug = this.$route.params.portalSlug;
-      return this.$store.getters['portals/portalBySlug'](slug);
+      if (slug) return this.$store.getters['portals/portalBySlug'](slug);
+      return this.$store.getters['portals/allPortals'][0];
     },
     tabs() {
       const tabs = [
@@ -64,7 +65,7 @@ export default {
           ),
         },
         {
-          key: 'categories',
+          key: `list_all_locale_categories`,
           name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.CATEGORY_SETTINGS.TITLE'),
         },
         {
@@ -81,6 +82,9 @@ export default {
     portalName() {
       return this.currentPortal ? this.currentPortal.name : '';
     },
+    currentPortalLocale() {
+      return this.currentPortal ? this.currentPortal?.meta?.default_locale : '';
+    },
   },
   methods: {
     onTabChange(index) {
@@ -89,7 +93,7 @@ export default {
 
       this.$router.push({
         name: nextRoute,
-        params: { portalSlug: slug },
+        params: { portalSlug: slug, locale: this.currentPortalLocale },
       });
     },
   },
@@ -99,14 +103,7 @@ export default {
 .wrapper {
   flex: 1;
 }
-.container {
-  display: flex;
-  flex: 1;
-}
-.wizard-box {
-  border-right: 1px solid var(--s-25);
-  ::v-deep .item {
-    background: var(--white);
-  }
+::v-deep .tabs {
+  padding-left: 0;
 }
 </style>
diff --git a/app/javascript/dashboard/store/modules/helpCenterCategories/actions.js b/app/javascript/dashboard/store/modules/helpCenterCategories/actions.js
index 05d9b04e1..ebea5d444 100644
--- a/app/javascript/dashboard/store/modules/helpCenterCategories/actions.js
+++ b/app/javascript/dashboard/store/modules/helpCenterCategories/actions.js
@@ -9,6 +9,7 @@ export const actions = {
         const {
           data: { payload },
         } = await categoriesAPI.get({ portalSlug });
+        commit(types.CLEAR_CATEGORIES);
         const categoryIds = payload.map(category => category.id);
         commit(types.ADD_MANY_CATEGORIES, payload);
         commit(types.ADD_MANY_CATEGORIES_ID, categoryIds);
@@ -39,8 +40,7 @@ export const actions = {
     }
   },
 
-  update: async ({ commit }, portalSlug, categoryObj) => {
-    const categoryId = categoryObj.id;
+  update: async ({ commit }, { portalSlug, categoryId, categoryObj }) => {
     commit(types.ADD_CATEGORY_FLAG, {
       uiFlags: {
         isUpdating: true,
@@ -48,8 +48,14 @@ export const actions = {
       categoryId,
     });
     try {
-      const { data } = await categoriesAPI.update({ portalSlug, categoryObj });
-      commit(types.UPDATE_CATEGORY, data);
+      const {
+        data: { payload },
+      } = await categoriesAPI.update({
+        portalSlug,
+        categoryId,
+        categoryObj,
+      });
+      commit(types.UPDATE_CATEGORY, payload);
       return categoryId;
     } catch (error) {
       return throwErrorMessage(error);
@@ -63,7 +69,7 @@ export const actions = {
     }
   },
 
-  delete: async ({ commit }, portalSlug, categoryId) => {
+  delete: async ({ commit }, { portalSlug, categoryId }) => {
     commit(types.ADD_CATEGORY_FLAG, {
       uiFlags: {
         isDeleting: true,
diff --git a/app/javascript/dashboard/store/modules/helpCenterCategories/getters.js b/app/javascript/dashboard/store/modules/helpCenterCategories/getters.js
index f7745a356..dcf834ab6 100644
--- a/app/javascript/dashboard/store/modules/helpCenterCategories/getters.js
+++ b/app/javascript/dashboard/store/modules/helpCenterCategories/getters.js
@@ -18,6 +18,13 @@ export const getters = {
     });
     return categories;
   },
+  categoriesByLocaleCode: (...getterArguments) => localeCode => {
+    const [state, _getters] = getterArguments;
+    const categories = state.categories.allIds.map(id => {
+      return _getters.categoryById(id);
+    });
+    return categories.filter(category => category.locale === localeCode);
+  },
   getMeta: state => {
     return state.meta;
   },
diff --git a/app/javascript/dashboard/store/modules/helpCenterCategories/mutations.js b/app/javascript/dashboard/store/modules/helpCenterCategories/mutations.js
index 11addb9be..5cd234ba1 100644
--- a/app/javascript/dashboard/store/modules/helpCenterCategories/mutations.js
+++ b/app/javascript/dashboard/store/modules/helpCenterCategories/mutations.js
@@ -19,7 +19,7 @@ export const mutations = {
   [types.CLEAR_CATEGORIES]: $state => {
     Vue.set($state.categories, 'byId', {});
     Vue.set($state.categories, 'allIds', []);
-    Vue.set($state.categories, 'uiFlags', {});
+    Vue.set($state.categories.uiFlags, 'byId', {});
   },
   [types.ADD_MANY_CATEGORIES]($state, categories) {
     const allCategories = { ...$state.categories.byId };
diff --git a/app/javascript/dashboard/store/modules/helpCenterCategories/specs/actions.spec.js b/app/javascript/dashboard/store/modules/helpCenterCategories/specs/actions.spec.js
index 351147e26..b5f62a328 100644
--- a/app/javascript/dashboard/store/modules/helpCenterCategories/specs/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterCategories/specs/actions.spec.js
@@ -13,6 +13,7 @@ describe('#actions', () => {
       await actions.index({ commit }, { portalSlug: 'room-rental' });
       expect(commit.mock.calls).toEqual([
         [types.default.SET_UI_FLAG, { isFetching: true }],
+        [types.default.CLEAR_CATEGORIES],
         [types.default.ADD_MANY_CATEGORIES, categoriesPayload.payload],
         [types.default.ADD_MANY_CATEGORIES_ID, [1, 2]],
         [types.default.SET_UI_FLAG, { isFetching: false }],
@@ -57,21 +58,34 @@ describe('#actions', () => {
 
   describe('#update', () => {
     it('sends correct actions if API is success', async () => {
-      axios.patch.mockResolvedValue({ data: categoriesPayload.payload[0] });
+      axios.patch.mockResolvedValue({ data: categoriesPayload });
       await actions.update(
         { commit },
-        'web-docs',
-        categoriesPayload.payload[0]
+        {
+          portalSlug: 'room-rental',
+          categoryId: 1,
+          categoryObj: categoriesPayload.payload[0],
+        }
       );
       expect(commit.mock.calls).toEqual([
         [
           types.default.ADD_CATEGORY_FLAG,
-          { uiFlags: { isUpdating: true }, categoryId: 1 },
+          {
+            uiFlags: {
+              isUpdating: true,
+            },
+            categoryId: 1,
+          },
         ],
-        [types.default.UPDATE_CATEGORY, categoriesPayload.payload[0]],
+        [types.default.UPDATE_CATEGORY, categoriesPayload.payload],
         [
           types.default.ADD_CATEGORY_FLAG,
-          { uiFlags: { isUpdating: false }, categoryId: 1 },
+          {
+            uiFlags: {
+              isUpdating: false,
+            },
+            categoryId: 1,
+          },
         ],
       ]);
     });
@@ -79,7 +93,14 @@ describe('#actions', () => {
     it('sends correct actions if API is error', async () => {
       axios.patch.mockRejectedValue({ message: 'Incorrect header' });
       await expect(
-        actions.update({ commit }, 'web-docs', categoriesPayload.payload[0])
+        actions.update(
+          { commit },
+          {
+            portalSlug: 'room-rental',
+            categoryId: 1,
+            categoryObj: categoriesPayload.payload[0],
+          }
+        )
       ).rejects.toThrow(Error);
       expect(commit.mock.calls).toEqual([
         [
@@ -96,11 +117,13 @@ describe('#actions', () => {
 
   describe('#delete', () => {
     it('sends correct actions if API is success', async () => {
-      axios.delete.mockResolvedValue({ data: categoriesPayload.payload[0] });
+      axios.delete.mockResolvedValue({ data: categoriesPayload });
       await actions.delete(
         { commit },
-        'portal-slug',
-        categoriesPayload.payload[0].id
+        {
+          portalSlug: 'room-rental',
+          categoryId: categoriesPayload.payload[0].id,
+        }
       );
       expect(commit.mock.calls).toEqual([
         [
@@ -120,8 +143,10 @@ describe('#actions', () => {
       await expect(
         actions.delete(
           { commit },
-          'portal-slug',
-          categoriesPayload.payload[0].id
+          {
+            portalSlug: 'room-rental',
+            categoryId: categoriesPayload.payload[0].id,
+          }
         )
       ).rejects.toThrow(Error);
       expect(commit.mock.calls).toEqual([
diff --git a/app/javascript/dashboard/store/modules/helpCenterCategories/specs/getters.spec.js b/app/javascript/dashboard/store/modules/helpCenterCategories/specs/getters.spec.js
index 9890d6cc6..2556a1dee 100644
--- a/app/javascript/dashboard/store/modules/helpCenterCategories/specs/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterCategories/specs/getters.spec.js
@@ -19,6 +19,10 @@ describe('#getters', () => {
     );
   });
 
+  it('categoriesByLocaleCode', () => {
+    expect(getters.categoriesByLocaleCode(state, getters)('en_US')).toEqual([]);
+  });
+
   it('isFetchingCategories', () => {
     expect(getters.isFetching(state)).toEqual(true);
   });
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index 6766b832b..17a2c78ee 100755
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -234,12 +234,14 @@ export default {
   REMOVE_ARTICLE: 'REMOVE_ARTICLE',
   REMOVE_ARTICLE_ID: 'REMOVE_ARTICLE_ID',
   SET_UI_FLAG: 'SET_UI_FLAG',
+
   // Help Center -- Categories
   ADD_CATEGORY: 'ADD_CATEGORY',
   ADD_CATEGORY_ID: 'ADD_CATEGORY_ID',
   ADD_MANY_CATEGORIES: 'ADD_MANY_CATEGORIES',
   ADD_MANY_CATEGORIES_ID: 'ADD_MANY_CATEGORIES_ID',
   ADD_CATEGORY_FLAG: 'ADD_CATEGORY_FLAG',
+  CLEAR_CATEGORIES: 'CLEAR_CATEGORIES',
   UPDATE_CATEGORY: 'UPDATE_CATEGORY',
   REMOVE_CATEGORY: 'REMOVE_CATEGORY',
   REMOVE_CATEGORY_ID: 'REMOVE_CATEGORY_ID',