TT#101107 CSC: As Customer, I want to see the custom Logo in the CSC header

Change-Id: I2d9ede142eab427c0db9c993e71ff5fc1cb7c7ea

src/api/subscriber.js

@@ -547,3 +547,15 @@ export async function recoverPassword (data) {
 	}
 	return await Vue.http.post('api/passwordrecovery/', payLoad)
 }
+
+export async function getBrandingLogo (subscriberId) {
+	const url = 'api/resellerbrandinglogos/?subscriber_id=' + subscriberId
+	try {
+		const res = await Vue.http.get(url, {
+			responseType: 'blob'
+		})
+		return URL.createObjectURL(res.body)
+	} catch (err) {
+		return null
+	}
+}

src/components/CscCustomLogo.vue

@@ -0,0 +1,20 @@
+<template>
+	<div>
+		<q-img
+			:src="logoData"
+			alt="Logo"
+		/>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'CscCustomLogo',
+	props: {
+		logoData: {
+			type: String,
+			default: ''
+		}
+	}
+}
+</script>

src/components/CscLogo.vue

@@ -123,9 +123,6 @@ export default {
 			default: 'light'
 		}
 	},
-	data () {
-		return {}
-	},
 	computed: {
 		componentClasses () {
 			const classes = ['csc-logo']

src/css/quasar.variables.styl

@@ -54,6 +54,9 @@ $header-height-mobile = 60px
 
 $logo-margin = $flex-gutter-sm
 $logo-margin-mobile = $flex-gutter-xs
+$logo-min-width = 84px
+$logo-max-width = 100px
+$logo-max-height = $header-height
 
 $csc-label = rgba(0,0,0,0.46)
 

src/layouts/CscLayoutMain.vue

@@ -72,9 +72,15 @@
 				</q-btn>
 				<q-space />
 				<csc-logo
-					style="height: 48px"
+					v-if="isLogoRequested && !customLogo"
+					id="csc-default-logo"
 					color="light"
 				/>
+				<csc-custom-logo
+					v-else-if="isLogoRequested && customLogo"
+					id="csc-custom-logo"
+					:logo-data="customLogo"
+				/>
 			</q-toolbar>
 			<q-toolbar
 				v-if="menuMinimized"
@@ -208,6 +214,7 @@ import {
 import CscCall from 'components/call/CscCall'
 import CscSendFax from 'components/CscSendFax'
 import CscLogo from 'components/CscLogo'
+import CscCustomLogo from 'components/CscCustomLogo'
 import CscLanguageMenu from 'components/CscLanguageMenu'
 import CscUserMenu from 'components/CscUserMenu'
 import {
@@ -227,6 +234,7 @@ export default {
 		CscCall,
 		CscSendFax,
 		CscLogo,
+		CscCustomLogo,
 		CscUserMenu
 	},
 	mixins: [
@@ -243,7 +251,8 @@ export default {
 				right: false
 			},
 			mobileMenu: null,
-			faxDialog: false
+			faxDialog: false,
+			customLogo: null
 		}
 	},
 	computed: {
@@ -296,7 +305,9 @@ export default {
 			'changeSessionLocaleState',
 			'locale',
 			'languageLabels',
-			'isRtcEngineUiVisible'
+			'isRtcEngineUiVisible',
+			'isLogoRequesting',
+			'isLogoRequested'
 		]),
 		...mapGetters('communication', [
 			'createFaxState',
@@ -437,7 +448,7 @@ export default {
 			}
 		}
 	},
-	mounted () {
+	async mounted () {
 		this.$store.dispatch('user/initUser')
 		window.addEventListener('orientationchange', () => {
 			this.$root.$emit('orientation-changed')
@@ -445,6 +456,7 @@ export default {
 		window.addEventListener('resize', () => {
 			this.$root.$emit('window-resized')
 		})
+		this.customLogo = await this.$store.dispatch('user/getCustomLogo')
 	},
 	methods: {
 		...mapActions('user', [
@@ -683,4 +695,10 @@ export default {
     .csc-collapsible-menu
         .q-icon
             display none
+		#csc-default-logo
+				height 48px
+		#csc-custom-logo
+				min-width $logo-min-width
+				max-width $logo-max-width
+				max-height $logo-max-height
 </style>

src/store/user.js

@@ -13,7 +13,7 @@ import {
 	login,
 	getUserData
 } from '../api/user'
-import { changePassword, resetPassword, recoverPassword } from '../api/subscriber'
+import { changePassword, resetPassword, recoverPassword, getBrandingLogo } from '../api/subscriber'
 import { deleteJwt, getJwt, getSubscriberId, setJwt, setSubscriberId } from 'src/auth'
 import { setSession } from 'src/storage'
 
@@ -42,7 +42,10 @@ export default {
 		languageLabels: [],
 		changePasswordState: RequestState.initiated,
 		changePasswordError: null,
-		newPasswordRequesting: false
+		newPasswordRequesting: false,
+		logo: null,
+		logoRequesting: false,
+		logoRequested: false
 	},
 	getters: {
 		isLogged (state) {
@@ -160,6 +163,12 @@ export default {
 				return []
 			}
 			return state.subscriber.alias_numbers
+		},
+		isLogoRequesting (state) {
+			return state.logoRequesting
+		},
+		isLogoRequested (state) {
+			return state.logoRequested
 		}
 	},
 	mutations: {
@@ -250,8 +259,15 @@ export default {
 		newPasswordRequesting (state, isRequesting) {
 			state.newPasswordRequesting = isRequesting
 		},
+		updateLogo (state, value) {
+			state.logo = value
+		},
 		updateFaxActiveCapabilityState (state, value) {
 			state.capabilities.faxactive = value
+		},
+		updateLogoRequestState (state, isRequesting) {
+			state.logoRequesting = isRequesting
+			state.logoRequested = !isRequesting
 		}
 	},
 	actions: {
@@ -347,6 +363,14 @@ export default {
 			if (context.rootState.route.path === '/user/home' && !context.getters.isRtcEngineUiVisible) {
 				await router.push({ path: '/user/conversations' })
 			}
+		},
+		async getCustomLogo (context) {
+			if (!context.state.logo) {
+				context.commit('updateLogoRequestState', true)
+				context.commit('updateLogo', await getBrandingLogo(context.state.subscriberId))
+				context.commit('updateLogoRequestState', false)
+			}
+			return context.state.logo
 		}
 	}
 }