feat: Add locales under portal settings (#5386)

* Add locales under portal settings

* Fix path issue

* chore: Updated category route

* chore: Updated category route

Co-authored-by: iamsivin <iamsivin@gmail.com>

app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js

@@ -8,6 +8,7 @@ const EditPortal = () => import('./pages/portals/EditPortal');
 const EditPortalBasic = () => import('./pages/portals/EditPortalBasic');
 const EditPortalCustomization = () =>
   import('./pages/portals/EditPortalCustomization');
+const EditPortalLocales = () => import('./pages/portals/EditPortalLocales.vue');
 const ShowPortal = () => import('./pages/portals/ShowPortal');
 const PortalDetails = () => import('./pages/portals/PortalDetails');
 const PortalCustomization = () => import('./pages/portals/PortalCustomization');
@@ -78,7 +79,13 @@ const portalRoutes = [
         roles: ['administrator'],
       },
       {
-        path: getPortalRoute(':portalSlug/edit/:locale/categories'),
+        path: 'locales',
+        name: 'edit_portal_locales',
+        component: EditPortalLocales,
+        roles: ['administrator'],
+      },
+      {
+        path: 'categories',
         name: 'list_all_locale_categories',
         roles: ['administrator', 'agent'],
         component: ListAllCategories,

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue

@@ -25,7 +25,7 @@
         </woot-tabs>
       </setting-intro-banner>
     </div>
-    <div class="row content-box full-height">
+    <div class="row content-box">
       <router-view />
     </div>
   </div>
@@ -69,7 +69,7 @@ export default {
           name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.CATEGORY_SETTINGS.TITLE'),
         },
         {
-          key: 'locales',
+          key: 'edit_portal_locales',
           name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.LOCALE_SETTINGS.TITLE'),
         },
       ];

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="portal-locales">
+    <div class="button-container">
+      <woot-button
+        variant="smooth"
+        size="small"
+        color-scheme="primary"
+        class="header-action-buttons"
+        @click="addLocale"
+      >
+        {{ $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.ADD') }}
+      </woot-button>
+    </div>
+    <div class="locale-container">
+      <locale-item-table
+        :locales="locales"
+        :selected-locale-code="currentPortal.meta.default_locale"
+        @change-default-locale="changeDefaultLocale"
+        @delete="deletePortalLocale"
+      />
+    </div>
+    <woot-modal
+      :show.sync="isAddLocaleModalOpen"
+      :on-close="closeAddLocaleModal"
+    >
+      <add-locale
+        :show="isAddLocaleModalOpen"
+        :portal="currentPortal"
+        @cancel="closeAddLocaleModal"
+      />
+    </woot-modal>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import LocaleItemTable from 'dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue';
+import AddLocale from 'dashboard/routes/dashboard/helpcenter/components/AddLocale';
+export default {
+  components: {
+    LocaleItemTable,
+    AddLocale,
+  },
+  mixins: [alertMixin],
+  data() {
+    return {
+      isAddLocaleModalOpen: false,
+      lastPortalSlug: undefined,
+      alertMessage: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'portals/uiFlagsIn',
+    }),
+    currentPortalSlug() {
+      return this.$route.params.portalSlug;
+    },
+    currentPortal() {
+      return this.$store.getters['portals/portalBySlug'](
+        this.currentPortalSlug
+      );
+    },
+    locales() {
+      return this.currentPortal.config.allowed_locales;
+    },
+    allowedLocales() {
+      return Object.keys(this.locales).map(key => {
+        return this.locales[key].code;
+      });
+    },
+  },
+  mounted() {
+    this.lastPortalSlug = this.currentPortalSlug;
+  },
+  methods: {
+    changeDefaultLocale({ localeCode }) {
+      this.updatePortalLocales({
+        allowedLocales: this.allowedLocales,
+        defaultLocale: localeCode,
+        successMessage: this.$t(
+          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.SUCCESS_MESSAGE'
+        ),
+        errorMessage: this.$t(
+          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.ERROR_MESSAGE'
+        ),
+      });
+    },
+    deletePortalLocale({ localeCode }) {
+      const updatedLocales = this.allowedLocales.filter(
+        code => code !== localeCode
+      );
+      const defaultLocale = this.currentPortal.meta.default_locale;
+      this.updatePortalLocales({
+        allowedLocales: updatedLocales,
+        defaultLocale,
+        successMessage: this.$t(
+          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.SUCCESS_MESSAGE'
+        ),
+        errorMessage: this.$t(
+          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.ERROR_MESSAGE'
+        ),
+      });
+    },
+    async updatePortalLocales({
+      allowedLocales,
+      defaultLocale,
+      successMessage,
+      errorMessage,
+    }) {
+      try {
+        await this.$store.dispatch('portals/update', {
+          portalSlug: this.currentPortal.slug,
+          config: {
+            default_locale: defaultLocale,
+            allowed_locales: allowedLocales,
+          },
+        });
+        this.alertMessage = successMessage;
+      } catch (error) {
+        this.alertMessage = error?.message || errorMessage;
+      } finally {
+        this.showAlert(this.alertMessage);
+      }
+    },
+    closeAddLocaleModal() {
+      this.isAddLocaleModalOpen = false;
+      this.selectedPortal = {};
+    },
+    addLocale() {
+      this.isAddLocaleModalOpen = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.portal-locales {
+  padding: var(--space-small) var(--space-normal);
+  width: 100%;
+  background: var(--white);
+  height: 100%;
+  padding: 0 var(--space-medium);
+  .button-container {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .locale-container {
+    margin-top: var(--space-large);
+  }
+}
+</style>