Feature/custom ringtone [WTEL-4348]

.env

@@ -13,3 +13,4 @@ VITE_CRM_URL = '/crm'
 VITE_OMNI_WIDGET_URL = '/omni-widget'
 VITE_FLOW_DIAGRAM_URL = '/flow'
 VITE_START_PAGE_URL = '/'
+VITE_RINGTONES_URL = '/ringtones'

src/app/locale/en/en.js

@@ -65,6 +65,11 @@ export default {
     webPhone: 'WebPhone',
     useWebPhone: 'Use WebPhone',
     useStun: 'Use STUN',
+    ringtones: {
+      title: 'Change ringtone',
+      ringtone: 'Ringtone',
+      customRingtone: 'Use the custom ringtone',
+    },
   },
 
   validation: {

src/app/locale/ru/ru.js

@@ -65,6 +65,11 @@ export default {
     webPhone: 'Web-телефон',
     useWebPhone: 'Использовать Web-телефон',
     useStun: 'Использовать STUN',
+    ringtones: {
+      title: 'Поменять рингтон',
+      ringtone: 'Рингтон',
+      customRingtone: 'Использовать кастомный рингтон',
+    },
   },
 
   validation: {

src/app/locale/ua/ua.js

@@ -65,6 +65,11 @@ export default {
     webPhone: 'Web-телефон',
     useWebPhone: 'Використовувати Web-телефон',
     useStun: 'Використовувати STUN',
+    ringtones: {
+      title: 'Змінити рінгтон',
+      ringtone: 'Рінгтон',
+      customRingtone: 'Використовувати кастомний рінгтон',
+    },
   },
 
   validation: {

src/modules/settings/api/settings.js

@@ -1,9 +1,9 @@
+import instance from '../../../app/api/instance';
 import applyTransform, {
   camelToSnake,
   notify,
   snakeToCamel,
 } from '@webitel/ui-sdk/src/api/transformers';
-import instance from '../../../app/api/instance';
 
 const baseUrl = 'users';
 
@@ -12,47 +12,76 @@ export const getWebPhone = async () => {
 
   try {
     const response = await instance.get(url);
-    return applyTransform(response.data, [snakeToCamel()]);
+    return applyTransform(response.data, [
+      snakeToCamel(),
+    ]);
   } catch (err) {
     if (err.response.status === 404) return;
     // phone settings doesn't exist on backend if user is new, and we have to hide notification about this error
     // https://webitel.atlassian.net/browse/WTEL-4346
-    throw applyTransform(err, [notify]);
+    throw applyTransform(err, [
+      notify,
+    ]);
   }
 };
 
 export const changeWebPhone = async (changes) => {
-  const item = applyTransform(changes, [camelToSnake()]);
+
+  const item = applyTransform(changes, [
+    camelToSnake(),
+  ]);
 
   const url = 'user/settings/phone';
 
   try {
     const response = await instance.put(url, item);
-    return applyTransform(response.data, [snakeToCamel()]);
+    return applyTransform(response.data, [
+      snakeToCamel(),
+    ]);
+  } catch (err) {
+    throw applyTransform(err, [
+      notify,
+    ]);
+  }
+};
+
+export const getRingtonesList = async () => {
+  try {
+    const ringtones = await fetch(`${import.meta.env.VITE_RINGTONES_URL}/index.json`)
+    .then((res) => res.json());
+    return ringtones.ringtones;
   } catch (err) {
-    throw applyTransform(err, [notify]);
+    throw applyTransform(err, [
+      notify,
+    ]);
   }
 };
 
 const patchItem = async ({ changes, id }) => {
-  const body = applyTransform(changes, [camelToSnake()]);
+  const body = applyTransform(changes, [
+    camelToSnake(),
+  ]);
   const url = `${baseUrl}/${id}`;
   try {
     const response = await instance.patch(url, body);
-    return applyTransform(response.data, [snakeToCamel()]);
+    return applyTransform(response.data, [
+      snakeToCamel(),
+    ]);
   } catch (err) {
-    throw applyTransform(err, [notify]);
+    throw applyTransform(err, [
+      notify,
+    ]);
   }
 };
 
-export const changePassword = ({ id, changes }) =>
-  patchItem({
-    id,
-    changes,
-  });
+export const changePassword = ({ id, changes }) => patchItem({
+  id,
+  changes,
+});
 
 export default {
   changePassword,
   changeWebPhone,
   getWebPhone,
+  getRingtonesList,
 };

src/modules/settings/components/the-ringtone.vue

@@ -0,0 +1,117 @@
+<template>
+  <section class="ringtone">
+    <header class="content-header">
+      <h3 class="content-title">
+        {{ $t('settings.ringtones.title') }}
+      </h3>
+    </header>
+    <form>
+      <div class="ringtone__wrapper">
+        <wt-checkbox
+          :selected="isCustomRingtone"
+          :label="$tc('settings.ringtones.customRingtone')"
+          @change="selectRingtoneType"
+        />
+        <wt-select
+          v-model="ringtone"
+          :options="options"
+          :disabled="!isCustomRingtone"
+          :clearable="false"
+          :label="$tc('settings.ringtones.ringtone')"
+          option-label="label"
+          track-by="label"
+        />
+        <wt-player
+          v-show="audioLink"
+          :src="audioLink"
+          :closable="false"
+          :autoplay="false"
+        />
+        <wt-button
+          @click.prevent="saveRingtone"
+        >
+          {{ $t('objects.save') }}
+        </wt-button>
+      </div>
+    </form>
+  </section>
+</template>
+
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { getRingtonesList } from '../api/settings';
+
+export default {
+  name: 'TheRingtone',
+  setup: () => ({
+    v$: useVuelidate(),
+  }),
+  data: () => ({
+    isCustomRingtone: false,
+    ringtone: {},
+    options: [],
+  }),
+  computed: {
+    ringtone: {
+      get() {
+        return this.ringtone;
+      },
+      set(value) {
+        this.ringtone = value;
+      },
+    },
+    isRingtoneSelected() {
+      return this.isCustomRingtone && this.ringtone.name;
+    },
+    audioLink() {
+     return this.isRingtoneSelected
+       ? `${import.meta.env.VITE_RINGTONES_URL}/${this.ringtone.name}`
+       : '';
+    },
+  },
+  methods: {
+    selectRingtoneType() {
+      this.isCustomRingtone = !this.isCustomRingtone;
+      if (!this.isRingtoneSelected) this.ringtone = {};
+    },
+    saveRingtone() {
+      this.ringtone.name
+        ? localStorage.setItem('ringtone', this.ringtone.name)
+        : localStorage.removeItem('ringtone');
+    },
+    async loadRingtonesOptions() {
+      this.options = await getRingtonesList();
+    },
+    restoreRingtone() {
+      const ringtoneName = localStorage.getItem('ringtone');
+      if (ringtoneName) {
+        this.ringtone = this.options.find(item => item.name === ringtoneName);
+        this.isCustomRingtone = true;
+      }
+    },
+  },
+  async mounted() {
+    try {
+      await this.loadRingtonesOptions();
+      this.restoreRingtone();
+    } catch (error) {
+      throw error;
+    }
+  },
+
+};
+</script>
+
+<style lang="scss" scoped>
+.ringtone__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.wt-button {
+  display: block;
+  margin: 3px 0 0 auto;
+}
+</style>
+

src/modules/settings/components/the-settings.vue

@@ -83,6 +83,7 @@
             </div>
           </form>
         </section>
+        <the-ringtone />
       </section>
     </template>
   </wt-page-wrapper>
@@ -94,9 +95,11 @@ import { required, sameAs } from '@vuelidate/validators';
 import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
 import { mapState } from 'vuex';
 import { changePassword, changeWebPhone, getWebPhone } from '../api/settings';
+import TheRingtone from './the-ringtone.vue';
 
 export default {
   name: 'TheSettings',
+  components: { TheRingtone },
   inject: ['$eventBus'],
 
   setup: () => ({
@@ -251,7 +254,7 @@ export default {
   }
 
   &__switcher {
-    margin-bottom: var(--spacing-xs);
+    margin-bottom: var(--spacing-sm);
   }
 }
 </style>