fix: Avoid keys getting translated in availability (#1418)

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -6,7 +6,7 @@
       />
 
       <div class="status-view--title">
-        {{ currentUserAvailabilityStatus }}
+        {{ availabilityDisplayLabel }}
       </div>
     </div>
 
@@ -47,6 +47,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
+const AVAILABILITY_STATUS_KEYS = ['online', 'busy', 'offline'];
 
 export default {
   mixins: [clickaway],
@@ -62,14 +63,25 @@ export default {
     ...mapGetters({
       currentUser: 'getCurrentUser',
     }),
+    availabilityDisplayLabel() {
+      const availabilityIndex = AVAILABILITY_STATUS_KEYS.findIndex(
+        key => key === this.currentUserAvailabilityStatus
+      );
+      return this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST')[
+        availabilityIndex
+      ];
+    },
     currentUserAvailabilityStatus() {
       return this.currentUser.availability_status;
     },
     availabilityStatuses() {
       return this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST').map(
-        status => ({
+        (statusLabel, index) => ({
-          ...status,
+          label: statusLabel,
-          disabled: this.currentUserAvailabilityStatus === status.value,
+          value: AVAILABILITY_STATUS_KEYS[index],
+          disabled:
+            this.currentUserAvailabilityStatus ===
+            AVAILABILITY_STATUS_KEYS[index],
         })
       );
     },

app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js

@@ -46,7 +46,7 @@ describe('AvailabilityStatus', () => {
   it('shows current user status', () => {
     const statusViewTitle = availabilityStatus.find('.status-view--title');
 
-    expect(statusViewTitle.text()).toBe(currentUser.availability_status);
+    expect(statusViewTitle.text()).toBe('Online');
   });
 
   it('opens the menu when user clicks "change"', async () => {

app/javascript/dashboard/i18n/locale/ar/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "التوفر",
         "STATUSES_LIST": [
-          {
+          "متصل",
-            "value": "متصل",
+          "مشغول",
-            "label": "متصل"
+          "غير متصل"
-          },
-          {
-            "value": "مشغول",
-            "label": "مشغول"
-          },
-          {
-            "value": "غير متصل",
-            "label": "غير متصل"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/ca/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Disponibilitat",
         "STATUSES_LIST": [
-          {
+          "En línia",
-            "value": "en línia",
+          "Ocupat",
-            "label": "En línia"
+          "Fora de línia"
-          },
-          {
-            "value": "ocupat",
-            "label": "Ocupat"
-          },
-          {
-            "value": "fora de línia",
-            "label": "Fora de línia"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/cs/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/da/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/el/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Διαθεσιμότητα",
         "STATUSES_LIST": [
-          {
+          "Στην Γραμμή",
-            "value": "online",
+          "Απασχολημένος",
-            "label": "Στην Γραμμή"
+          "Εκτός"
-          },
-          {
-            "value": "busy",
-            "label": "Απασχολημένος"
-          },
-          {
-            "value": "offline",
-            "label": "Εκτός"
-          }
         ]
       },
       "EMAIL": {

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

@@ -57,18 +57,10 @@
       },
       "AVAILABILITY": {
         "LABEL": "Availability",
-        "STATUSES_LIST": [{
+        "STATUSES_LIST": [
-            "value": "online",
+          "Online",
-            "label": "Online"
+          "Busy",
-          },
+          "Offline"
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/es/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Disponibilidad",
         "STATUSES_LIST": [
-          {
+          "En línea",
-            "value": "online",
+          "Ocupado",
-            "label": "En línea"
+          "Fuera de línea"
-          },
-          {
-            "value": "busy",
-            "label": "Ocupado"
-          },
-          {
-            "value": "offline",
-            "label": "Fuera de línea"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/fa/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "در دسترس",
         "STATUSES_LIST": [
-          {
+          "آنلاین",
-            "value": "آنلاین",
+          "مشغول",
-            "label": "آنلاین"
+          "آفلاین"
-          },
-          {
-            "value": "مشغول",
-            "label": "مشغول"
-          },
-          {
-            "value": "آفلاین",
-            "label": "آفلاین"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/fi/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/fr/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Disponibilité",
         "STATUSES_LIST": [
-          {
+          "En ligne",
-            "value": "online",
+          "Occupé(e)",
-            "label": "En ligne"
+          "Hors-ligne"
-          },
-          {
-            "value": "busy",
-            "label": "Occupé(e)"
-          },
-          {
-            "value": "offline",
-            "label": "Hors-ligne"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/hi/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/hu/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/it/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/ja/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "利用可能期間",
         "STATUSES_LIST": [
-          {
+          "オンライン",
-            "value": "オンライン",
+          "取り込み中",
-            "label": "オンライン"
+          "オフライン"
-          },
-          {
-            "value": "取り込み中",
-            "label": "取り込み中"
-          },
-          {
-            "value": "オフライン",
-            "label": "オフライン"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/ko/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/ml/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "ലഭ്യത",
         "STATUSES_LIST": [
-          {
+          "ഓൺ‌ലൈൻ",
-            "value": "online",
+          "തിരക്ക്",
-            "label": "ഓൺ‌ലൈൻ"
+          "ഓഫ്‌ലൈൻ"
-          },
-          {
-            "value": "busy",
-            "label": "തിരക്ക്"
-          },
-          {
-            "value": "offline",
-            "label": "ഓഫ്‌ലൈൻ"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/nl/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Druk",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/pt/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/pt_BR/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Disponibilidade",
         "STATUSES_LIST": [
-          {
+          "Disponível",
-            "value": "online",
+          "Ocupado",
-            "label": "Disponível"
+          "Desconectado"
-          },
-          {
-            "value": "busy",
-            "label": "Ocupado"
-          },
-          {
-            "value": "offline",
-            "label": "Desconectado"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/ro/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Disponibilitate",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Ocupat",
-            "label": "Online"
+          "Deconectat"
-          },
-          {
-            "value": "busy",
-            "label": "Ocupat"
-          },
-          {
-            "value": "offline",
-            "label": "Deconectat"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/ru/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Доступность",
         "STATUSES_LIST": [
-          {
+          "В сети",
-            "value": "online",
+          "Занят",
-            "label": "В сети"
+          "Оффлайн"
-          },
-          {
-            "value": "busy",
-            "label": "Занят"
-          },
-          {
-            "value": "offline",
-            "label": "Оффлайн"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/sk/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/sv/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/ta/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/th/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/tr/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/uk/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Availability",
         "STATUSES_LIST": [
-          {
+          "Online",
-            "value": "online",
+          "Busy",
-            "label": "Online"
+          "Offline"
-          },
-          {
-            "value": "busy",
-            "label": "Busy"
-          },
-          {
-            "value": "offline",
-            "label": "Offline"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/vi/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "Khả dụng",
         "STATUSES_LIST": [
-          {
+          "Trực Tuyến",
-            "value": "online",
+          "Bận",
-            "label": "Trực Tuyến"
+          "Không Trực Tuyến"
-          },
-          {
-            "value": "busy",
-            "label": "Bận"
-          },
-          {
-            "value": "offline",
-            "label": "Không Trực Tuyến"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/zh/settings.json

@@ -56,18 +56,9 @@
       "AVAILABILITY": {
         "LABEL": "有效的",
         "STATUSES_LIST": [
-          {
+          "在线的",
-            "value": "online",
+          "忙碌中",
-            "label": "在线的"
+          "离线的"
-          },
-          {
-            "value": "busy",
-            "label": "忙碌中"
-          },
-          {
-            "value": "offline",
-            "label": "离线的"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/zh_CN/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "有效的",
         "STATUSES_LIST": [
-          {
+          "在线的",
-            "value": "online",
+          "忙碌中",
-            "label": "在线的"
+          "离线的"
-          },
-          {
-            "value": "busy",
-            "label": "忙碌中"
-          },
-          {
-            "value": "offline",
-            "label": "离线的"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/i18n/locale/zh_TW/settings.json

@@ -58,18 +58,9 @@
       "AVAILABILITY": {
         "LABEL": "有效的",
         "STATUSES_LIST": [
-          {
+          "線上的",
-            "value": "online",
+          "忙碌中",
-            "label": "線上的"
+          "離線的"
-          },
-          {
-            "value": "busy",
-            "label": "忙碌中"
-          },
-          {
-            "value": "offline",
-            "label": "離線的"
-          }
         ]
       },
       "EMAIL": {

app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue

@@ -49,21 +49,6 @@
               {{ $t('PROFILE_SETTINGS.FORM.EMAIL.ERROR') }}
             </span>
           </label>
-          <label>
-            {{ $t('PROFILE_SETTINGS.FORM.AVAILABILITY.LABEL') }}
-            <select v-model="availability">
-              <option
-                v-for="status in $t(
-                  'PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST'
-                )"
-                :key="status.key"
-                class="text-capitalize"
-                :value="status.value"
-              >
-                {{ status.label }}
-              </option>
-            </select>
-          </label>
         </div>
       </div>
       <div class="profile--settings--row row">
@@ -145,7 +130,6 @@ export default {
       email: '',
       password: '',
       passwordConfirmation: '',
-      availability: 'online',
       isUpdating: false,
     };
   },
@@ -175,7 +159,6 @@ export default {
     ...mapGetters({
       currentUser: 'getCurrentUser',
       currentUserId: 'getCurrentUserID',
-      currentAvailabilityStatus: 'getCurrentUserAvailabilityStatus',
     }),
   },
   watch: {
@@ -184,11 +167,6 @@ export default {
         this.initializeUser();
       }
     },
-    currentAvailabilityStatus(newStatus, oldStatus) {
-      if (newStatus !== oldStatus) {
-        this.availability = newStatus;
-      }
-    },
   },
   mounted() {
     if (this.currentUserId) {
@@ -200,7 +178,6 @@ export default {
       this.name = this.currentUser.name;
       this.email = this.currentUser.email;
       this.avatarUrl = this.currentUser.avatar_url;
-      this.availability = this.currentUser.availability_status;
       this.displayName = this.currentUser.display_name;
     },
     async updateUser() {
@@ -218,7 +195,6 @@ export default {
           avatar: this.avatarFile,
           password: this.password,
           displayName: this.displayName,
-          availability: this.availability,
           password_confirmation: this.passwordConfirmation,
         });
         this.isUpdating = false;