feat: Add the ability update/edit locale in portal (#5377)

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -249,6 +249,18 @@
           "SUCCESS_MESSAGE": "Locale added successfully",
           "ERROR_MESSAGE": "Unable to add locale. Try again."
         }
+      },
+      "CHANGE_DEFAULT_LOCALE": {
+        "API": {
+          "SUCCESS_MESSAGE": "Default locale updated successfully",
+          "ERROR_MESSAGE": "Unable to update default locale. Try again."
+        }
+      },
+      "DELETE_LOCALE": {
+        "API": {
+          "SUCCESS_MESSAGE": "Locale removed from portal successfully",
+          "ERROR_MESSAGE": "Unable to remove locale from portal. Try again."
+        }
       }
     },
     "TABLE": {

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue

@@ -165,8 +165,8 @@
           <locale-item-table
             :locales="locales"
             :selected-locale-code="portal.meta.default_locale"
-            @swap="swapLocale"
+            @change-default-locale="changeDefaultLocale"
-            @delete="deleteLocale"
+            @delete="deletePortalLocale"
           />
         </div>
       </div>
@@ -223,14 +223,17 @@ export default {
           return 'success';
       }
     },
-    // Delete portal modal
     deleteMessageValue() {
       return ` ${this.selectedPortalForDelete.name}?`;
     },
-
     locales() {
       return this.portal ? this.portal.config.allowed_locales : [];
     },
+    allowedLocales() {
+      return Object.keys(this.locales).map(key => {
+        return this.locales[key].code;
+      });
+    },
   },
   methods: {
     addLocale() {
@@ -270,11 +273,54 @@ export default {
         this.showAlert(this.alertMessage);
       }
     },
-    swapLocale() {
+    changeDefaultLocale({ localeCode }) {
-      this.$emit('swap');
+      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'
+        ),
+      });
     },
-    deleteLocale() {
+    deletePortalLocale({ localeCode }) {
-      this.$emit('delete');
+      const updatedLocales = this.allowedLocales.filter(
+        code => code !== localeCode
+      );
+      const defaultLocale = this.portal.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.portal.slug,
+          config: {
+            default_locale: defaultLocale,
+            allowed_locales: allowedLocales,
+          },
+        });
+        this.alertMessage = successMessage;
+      } catch (error) {
+        this.alertMessage = error?.message || errorMessage;
+      } finally {
+        this.showAlert(this.alertMessage);
+      }
     },
     navigateToPortalEdit() {
       this.$router.push({

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue

@@ -73,7 +73,7 @@
             icon="arrow-swap"
             color-scheme="primary"
             :disabled="locale.code === selectedLocaleCode"
-            @click="swapLocale"
+            @click="changeDefaultLocale(locale.code)"
           />
           <woot-button
             v-tooltip.top-end="
@@ -85,7 +85,8 @@
             variant="smooth"
             icon="delete"
             color-scheme="secondary"
-            @click="deleteLocale"
+            :disabled="locale.code === selectedLocaleCode"
+            @click="deleteLocale(locale.code)"
           />
         </td>
       </tr>
@@ -113,11 +114,11 @@ export default {
   },
 
   methods: {
-    swapLocale() {
+    changeDefaultLocale(localeCode) {
-      this.$emit('swap');
+      this.$emit('change-default-locale', { localeCode });
     },
-    deleteLocale() {
+    deleteLocale(localeCode) {
-      this.$emit('delete');
+      this.$emit('delete', { localeCode });
     },
   },
 };