TT#108160 Branding - As Customer, I want to see the custom primary color if it is available

AC:
Can see the custom primary and secondary color if it is set
Can see the standard colours if not set

Change-Id: Iac09886d1442c145d448e1d0431bf37f1b409f03

quasar.conf.js

@@ -30,7 +30,8 @@ module.exports = function (/* ctx */) {
             'vue-scrollto',
             'constants',
             'vue-wait',
-            'e2e-testing'
+            'e2e-testing',
+            'branding'
         ],
 
         // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css

src/api/user.js

@@ -37,12 +37,14 @@ export function getUserData (id) {
         return Promise.all([
             getSubscriberById(id),
             getCapabilities(id),
-            getFaxServerSettings(id)
+            getFaxServerSettings(id),
+            getResellerBranding()
         ]).then((results) => {
             results[1].faxactive = results[2].active
             resolve({
                 subscriber: results[0],
-                capabilities: results[1]
+                capabilities: results[1],
+                resellerBranding: results[3]?.items[0] || null
             })
         }).catch((err) => {
             reject(err)
@@ -127,3 +129,9 @@ export function getNumbers () {
         })
     })
 }
+
+export async function getResellerBranding () {
+    return getList({
+        resource: 'resellerbrandings'
+    })
+}

src/boot/branding.js

@@ -0,0 +1,8 @@
+import { colors } from 'quasar'
+
+export default async ({ Vue, store, app }) => {
+    await store.dispatch('user/setDefaultBranding', {
+        primaryColor: colors.getBrand('primary'),
+        secondaryColor: colors.getBrand('secondary')
+    })
+}

src/layouts/CscLayoutMain.vue

@@ -198,6 +198,7 @@
 </template>
 
 <script>
+import { colors } from 'quasar'
 import platformMixin from '../mixins/platform'
 import {
     startLoading,
@@ -309,6 +310,10 @@ export default {
             'isLogoRequesting',
             'isLogoRequested'
         ]),
+        ...mapState('user', [
+            'resellerBranding',
+            'defaultBranding'
+        ]),
         ...mapGetters('communication', [
             'createFaxState',
             'createFaxError'
@@ -409,6 +414,8 @@ export default {
         userDataSucceeded (userDataSucceeded) {
             if (userDataSucceeded) {
                 enableIncomingCallNotifications()
+
+                this.updateBrandings()
             }
         },
         isCallEnabled (value) {
@@ -449,13 +456,14 @@ export default {
         }
     },
     async mounted () {
-        this.$store.dispatch('user/initUser')
+        await this.$store.dispatch('user/initUser')
         window.addEventListener('orientationchange', () => {
             this.$root.$emit('orientation-changed')
         })
         window.addEventListener('resize', () => {
             this.$root.$emit('window-resized')
         })
+        this.updateBrandings()
         this.customLogo = await this.$store.dispatch('user/getCustomLogo')
     },
     methods: {
@@ -543,6 +551,16 @@ export default {
         },
         sideStateLeft () {
             return this.sideStates.left
+        },
+        updateBrandings () {
+            const primaryColor = this.resellerBranding?.csc_color_primary || this.defaultBranding?.primaryColor
+            const secondaryColor = this.resellerBranding?.csc_color_secondary || this.defaultBranding?.secondaryColor
+            if (primaryColor) {
+                colors.setBrand('primary', primaryColor)
+            }
+            if (secondaryColor) {
+                colors.setBrand('secondary', secondaryColor)
+            }
         }
     }
 }

src/store/user.js

@@ -45,7 +45,9 @@ export default {
         newPasswordRequesting: false,
         logo: null,
         logoRequesting: false,
-        logoRequested: false
+        logoRequested: false,
+        resellerBranding: null,
+        defaultBranding: {}
     },
     getters: {
         isLogged (state) {
@@ -194,6 +196,8 @@ export default {
             state.loginError = error
         },
         userDataRequesting (state) {
+            state.resellerBranding = null
+
             state.userDataRequesting = true
             state.userDataSucceeded = false
             state.userDataError = null
@@ -201,6 +205,8 @@ export default {
         userDataSucceeded (state, options) {
             state.subscriber = options.subscriber
             state.capabilities = options.capabilities
+            state.resellerBranding = options.resellerBranding
+
             state.userDataSucceeded = true
             state.userDataRequesting = false
             state.userDataError = null
@@ -272,6 +278,9 @@ export default {
         updateLogoRequestState (state, isRequesting) {
             state.logoRequesting = isRequesting
             state.logoRequested = !isRequesting
+        },
+        setDefaultBranding (state, value) {
+            state.defaultBranding = value
         }
     },
     actions: {
@@ -299,11 +308,13 @@ export default {
                     context.commit('userDataRequesting')
                     const userData = await getUserData(getSubscriberId())
                     context.commit('userDataSucceeded', userData)
+
                     if (_.isNumber(context.getters.jwtTTL)) {
                         setTimeout(() => {
                             context.dispatch('logout')
                         }, context.getters.jwtTTL * 1000)
                     }
+
                     if (context.getters.hasRtcEngineCapabilityEnabled && context.getters.isRtcEngineUiVisible) {
                         context.commit('rtcEngineInitRequesting')
                         Vue.$rtcEngine.setNgcpApiJwt(getJwt())
@@ -375,6 +386,11 @@ export default {
                 context.commit('updateLogoRequestState', false)
             }
             return context.state.logo
+        },
+        setDefaultBranding (context, value) {
+            if (value) {
+                context.commit('setDefaultBranding', value)
+            }
         }
     }
 }