Add set default locale

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

@@ -217,6 +217,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

@@ -142,7 +142,7 @@
           <locale-item-table
             :locales="locales"
             :selected-locale-code="portal.meta.default_locale"
-            @swap="swapLocale"
+            @change-default-locale="changeDefaultLocale"
             @delete="deleteLocale"
           />
         </div>
@@ -152,6 +152,7 @@
 </template>
 
 <script>
+import alertMixin from 'shared/mixins/alertMixin';
 import thumbnail from 'dashboard/components/widgets/Thumbnail';
 import Label from 'dashboard/components/ui/Label';
 import LocaleItemTable from './PortalListItemTable';
@@ -161,6 +162,7 @@ export default {
     Label,
     LocaleItemTable,
   },
+  mixins: [alertMixin],
   props: {
     portal: {
       type: Object,
@@ -196,11 +198,60 @@ export default {
     openSettings() {
       this.navigateToPortalEdit();
     },
-    swapLocale() {
-      this.$emit('swap');
+    changeDefaultLocale(localeCode) {
+      const { allowed_locales: allowedLocales } = this.portal.config;
+      const locales = Object.keys(allowedLocales).map(key => {
+        return allowedLocales[key].code;
+      });
+      this.updatePortalLocales({
+        allowedLocales: locales,
+        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() {
-      this.$emit('delete');
+    deleteLocale(localeCode) {
+      const { allowed_locales: allowedLocales } = this.portal.config;
+      const addedLocales = Object.keys(allowedLocales).map(key => {
+        return allowedLocales[key].code;
+      });
+      const newLocales = addedLocales.filter(code => code !== localeCode);
+      const defaultLocale = this.portal.meta.default_locale;
+      this.updatePortalLocales({
+        allowedLocales: newLocales,
+        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() {
-      this.$emit('swap');
+    changeDefaultLocale(localeCode) {
+      this.$emit('change-default-locale', localeCode);
     },
-    deleteLocale() {
-      this.$emit('delete');
+    deleteLocale(localeCode) {
+      this.$emit('delete', localeCode);
     },
   },
 };