TT#96354 CSC: As a Customer, I want to toggle Music-on-hold

AC:
Can see the preference Music-on-hold in the new main page "Call Settings"
Can toggle the preference Music-on-hold
Change-Id: Id725dc65fc08b6b865c69ff035bc3e343e4a7651

src/components/CscMainMenuTop.vue

@@ -70,6 +70,12 @@ export default {
 					sublabel: this.$t('navigation.conversations.subTitle'),
 					visible: true
 				},
+				{
+					to: '/user/call-settings',
+					icon: 'fas fa-cogs',
+					label: this.$t('navigation.callSettings.title'),
+					visible: true
+				},
 				{
 					to: '/user/call-forwarding',
 					icon: 'phone_forwarded',

src/i18n/en.json

@@ -95,6 +95,10 @@
             "outgoing": "Outgoing",
             "privacy": "Privacy"
         },
+        "callSettings": {
+            "title": "Call Settings",
+            "subTitle": "Call Settings"
+        },
         "reminder": {
             "title": "Reminder",
             "subTitle": "Set your personal alarm"
@@ -761,5 +765,9 @@
 		"deleteDestinationText": "You are about to remove destination {destination}",
 		"destinationEmailExists": "The Destination Email is already used",
 		"destinationItemTitle": "<{destination}> as {filetype}"
+	},
+	"callSettings": {
+		"musicOnHold": "Music on Hold",
+		"musicOnHoldHint": "\"Music on Hold\" - if set to true and a music on hold file is provided, a calling party gets that file played when put on hold"
 	}
 }

src/pages/CscPageCallSettings.vue

@@ -0,0 +1,93 @@
+<template>
+	<csc-page
+		id="csc-page-voicebox"
+		class="row q-pa-lg"
+	>
+		<q-list
+			class="col col-xs-12 col-md-6"
+		>
+			<q-item>
+				<q-item-section>
+					<q-toggle
+						:value="musicOnHold"
+						:disable="dataLoading"
+						:label="$t('callSettings.musicOnHold')"
+						:title="$t('callSettings.musicOnHoldHint')"
+						checked-icon="audiotrack"
+						unchecked-icon="audiotrack"
+						@input="toggleMusicOnHold"
+					/>
+				</q-item-section>
+				<q-item-section
+					side
+				>
+					<csc-spinner
+						v-if="dataLoading"
+						class="self-center"
+					/>
+				</q-item-section>
+			</q-item>
+		</q-list>
+	</csc-page>
+</template>
+
+<script>
+import {
+	mapGetters,
+	mapState
+} from 'vuex'
+import {
+	mapWaitingActions,
+	mapWaitingGetters
+} from 'vue-wait'
+import {
+	showGlobalError
+} from 'src/helpers/ui'
+import CscPage from 'components/CscPage'
+import CscSpinner from 'components/CscSpinner'
+export default {
+	name: 'CscPageCallSettings',
+	components: {
+		CscSpinner,
+		CscPage
+	},
+	data () {
+		return {
+		}
+	},
+	computed: {
+		...mapState('callSettings', [
+			'subscriberPreferencesInitialized'
+		]),
+		...mapGetters('callSettings', [
+			'musicOnHold'
+		]),
+		...mapWaitingGetters({
+			processingSubscriberPreferences: 'processing subscriberPreferences'
+		}),
+		dataLoading () {
+			return !this.subscriberPreferencesInitialized || this.processingSubscriberPreferences
+		}
+	},
+	mounted () {
+		try {
+			this.loadSubscriberPreferencesAction()
+		} catch (err) {
+			showGlobalError(err?.message)
+		}
+	},
+	methods: {
+		...mapWaitingActions('callSettings', {
+			loadSubscriberPreferencesAction: 'processing subscriberPreferences',
+			setMusicOnHold: 'processing subscriberPreferences'
+		}),
+		async toggleMusicOnHold () {
+			try {
+				await this.setMusicOnHold(!this.musicOnHold)
+			} catch (err) {
+				showGlobalError(err?.message)
+			}
+		}
+	}
+}
+</script>

src/router/routes.js

@@ -28,6 +28,7 @@ import CscPageUserSettings from 'src/pages/CscPageUserSettings'
 import CscPageError404 from 'src/pages/CscPageError404'
 import CscRecoverPassword from 'src/pages/CscRecoverPassword'
 import CscPageCf from 'pages/CscPageCf'
+import CscPageCallSettings from 'pages/CscPageCallSettings'
 
 const getToken = (route) => {
 	return {
@@ -204,6 +205,14 @@ export default function routes (app) {
 						subtitle: i18n.t('navigation.userSettings.subTitle')
 					}
 				},
+				{
+					path: 'call-settings',
+					component: CscPageCallSettings,
+					meta: {
+						title: i18n.t('navigation.callSettings.title'),
+						subtitle: i18n.t('navigation.callSettings.subTitle')
+					}
+				},
 				{
 					path: 'pbx-settings',
 					component: CscPagePbxSettings,

src/store/call-settings.js

@@ -0,0 +1,45 @@
+import {
+	getPreferences,
+	setPreference
+} from '../api/subscriber'
+
+export default {
+	namespaced: true,
+	state: {
+		subscriberPreferencesInitialized: false,
+		subscriberPreferences: {}
+	},
+	getters: {
+		subscriberId (state, getters, rootState, rootGetters) {
+			return parseInt(rootGetters['user/getSubscriberId'])
+		},
+		musicOnHold (state) {
+			return state.subscriberPreferences.music_on_hold
+		}
+	},
+	mutations: {
+		subscriberPreferencesSucceeded (state, res) {
+			state.subscriberPreferences = res
+			state.subscriberPreferencesInitialized = true
+		},
+		subscriberPreferencesUpdate (state, { field, value }) {
+			state.subscriberPreferences[field] = value
+		}
+	},
+	actions: {
+		async loadSubscriberPreferencesAction (context) {
+			const subscriberPreferences = await getPreferences(context.getters.subscriberId)
+			context.commit('subscriberPreferencesSucceeded', subscriberPreferences)
+		},
+		async fieldUpdateAction (context, options) {
+			await setPreference(context.getters.subscriberId, options.field, options.value)
+			context.commit('subscriberPreferencesUpdate', {
+				field: options.field,
+				value: options.value
+			})
+		},
+		async setMusicOnHold (context, value) {
+			await context.dispatch('fieldUpdateAction', { field: 'music_on_hold', value })
+		}
+	}
+}

src/store/index.js

@@ -10,6 +10,7 @@ import CallForwardModule from './call-forward'
 import CallForwardingModule from './call-forwarding'
 import NewCallForwardModule from './new-call-forward'
 import CallModule, { errorVisibilityTimeout } from './call'
+import CallSettingsModule from './call-settings'
 import ConversationsModule from './conversations'
 
 import PbxModule from './pbx'
@@ -57,6 +58,7 @@ export default function (/* { ssrContext } */) {
 			callForward: CallForwardModule,
 			newCallForward: NewCallForwardModule,
 			call: CallModule,
+			callSettings: CallSettingsModule,
 			conversations: ConversationsModule,
 			reminder: ReminderModule,
 			speedDial: SpeedDialModule,