Shoe locales in dropdown

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

@@ -202,7 +202,7 @@
       },
       "ADD_LOCALE": {
         "TITLE": "Add a new locale",
-        "SUB_TITLE": "This adds a new locale to your available translation list. ",
+        "SUB_TITLE": "This adds a new locale to your available translation list.",
         "PORTAL": "Portal",
         "LOCALE": {
           "LABEL": "Locale",
@@ -214,8 +214,8 @@
           "CANCEL": "Cancel"
         },
         "API": {
-          "SUCCESS_MESSAGE": "Category created successfully",
-          "ERROR_MESSAGE": "Unable to create category"
+          "SUCCESS_MESSAGE": "Locale added successfully",
+          "ERROR_MESSAGE": "Unable to add locale. Try again."
         }
       }
     },

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

@@ -14,7 +14,7 @@
               :key="item.name"
               :value="item.id"
             >
-              {{ item.name }}
+              {{ item.name }}-{{ item.code }}
             </option>
           </select>
           <span v-if="$v.selectedLocale.$error" class="message">
@@ -53,9 +53,9 @@ export default {
       type: Boolean,
       default: true,
     },
-    portalId: {
-      type: String,
-      default: '',
+    portal: {
+      type: Object,
+      default: () => ({}),
     },
   },
   data() {
@@ -65,11 +65,19 @@ export default {
   },
   computed: {
     allLocales() {
-      return Object.keys(allLocales).map(key => {
+      const addedLocales = this.portal.config.allowed_locales.map(
+        locale => locale.code
+      );
+      return Object.keys(allLocales)
+        .map(key => {
           return {
             id: key,
             name: allLocales[key],
+            code: key,
           };
+        })
+        .filter(locale => {
+          return !addedLocales.includes(locale.code);
         });
     },
   },
@@ -84,38 +92,32 @@ export default {
     },
     async onCreate() {
       this.$v.$touch();
-      // if (this.$v.$invalid) {
-      //   return;
-      // }
-      // console.log('onCreate', this.selectedLocale);
+      if (this.$v.$invalid) {
+        return;
+      }
+      const { allowed_locales: allowedLocales } = this.portal.config;
+      const addedLocales = Object.keys(allowedLocales).map(key => {
+        return allowedLocales[key].code;
+      });
+      addedLocales.push(this.selectedLocale);
 
-      // try {
-      //   await this.$store.dispatch('portals/create', {
-      //     portal: {
-      //       name: this.name,
-      //       slug: this.slug,
-      //       custom_domain: this.domain,
-      //       // TODO: add support for choosing color
-      //       color: '#1f93ff',
-      //       homepage_link: this.homePageLink,
-      //       page_title: this.pageTitle,
-      //       header_text: this.headerText,
-      //       config: {
-      //         // TODO: add support for choosing locale
-      //         allowed_locales: ['en'],
-      //       },
-      //     },
-      //   });
-      //   this.alertMessage = this.$t(
-      //     'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE'
-      //   );
-      //   this.$emit('cancel');
-      // } catch (error) {
-      //   this.alertMessage =
-      //     error?.message || this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE');
-      // } finally {
-      //   this.showAlert(this.alertMessage);
-      // }
+      this.isUpdating = true;
+      try {
+        await this.$store.dispatch('portals/update', {
+          portalId: this.selectedPortalSlug,
+          config: { allowed_locales: addedLocales },
+        });
+      } catch (error) {
+        this.alertMessage =
+          error?.message ||
+          this.$t('HELP_CENTER.EDIT_ARTICLE.API.ERROR_MESSAGE');
+        this.showAlert(this.alertMessage);
+      } finally {
+        setTimeout(() => {
+          this.isUpdating = false;
+          this.isSaved = true;
+        }, 1500);
+      }
     },
     onClose() {
       this.$emit('cancel');

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

@@ -30,7 +30,11 @@
       :show.sync="isAddLocaleModalOpen"
       :on-close="closeAddLocaleModal"
     >
-      <add-locale :show="isAddLocaleModalOpen" @cancel="closeAddLocaleModal" />
+      <add-locale
+        :show="isAddLocaleModalOpen"
+        :portal="selectedPortal"
+        @cancel="closeAddLocaleModal"
+      />
     </woot-modal>
   </div>
 </template>
@@ -51,6 +55,7 @@ export default {
   data() {
     return {
       isAddLocaleModalOpen: false,
+      selectedPortal: {},
     };
   },
   computed: {
@@ -73,8 +78,9 @@ export default {
     closeAddLocaleModal() {
       this.isAddLocaleModalOpen = false;
     },
-    addLocale() {
+    addLocale(portalId) {
       this.isAddLocaleModalOpen = true;
+      this.selectedPortal = this.portals.find(portal => portal.id === portalId);
       // this.$router.push({ name: 'new_portal_locale', params: { portalId } });
     },
   },