chore: Move referrerHost to appConfig store (#3433)

app/javascript/shared/components/Branding.vue

@@ -1,23 +1,27 @@
 <template>
-  <div v-if="globalConfig.brandName" class="branding">
+  <div v-if="globalConfig.brandName" class="px-0 py-3 flex justify-center">
     <a
       :href="brandRedirectURL"
       rel="noreferrer noopener nofollow"
       target="_blank"
-      class="branding--link w-full justify-center"
+      class="branding--link justify-center"
     >
-      <img :alt="globalConfig.brandName" :src="globalConfig.logoThumbnail" />
+      <img
+        class="branding--image"
+        :alt="globalConfig.brandName"
+        :src="globalConfig.logoThumbnail"
+      />
       <span>
         {{ useInstallationName($t('POWERED_BY'), globalConfig.brandName) }}
       </span>
     </a>
   </div>
-  <div v-else class="brand--alternative" />
+  <div v-else class="p-3" />
 </template>
 
 <script>
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { mapGetters } from 'vuex';
 
 const {
   LOGO_THUMBNAIL: logoThumbnail,
@@ -29,7 +33,6 @@ export default {
   mixins: [globalConfigMixin],
   data() {
     return {
-      referrerHost: '',
       globalConfig: {
         brandName,
         logoThumbnail,
@@ -38,6 +41,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters({ referrerHost: 'appConfig/getReferrerHost' }),
     brandRedirectURL() {
       const baseURL = `${this.globalConfig.widgetBrandURL}?utm_source=widget_branding`;
       if (this.referrerHost) {
@@ -46,35 +50,22 @@ export default {
       return baseURL;
     },
   },
-  mounted() {
-    bus.$on(BUS_EVENTS.SET_REFERRER_HOST, referrerHost => {
-      this.referrerHost = referrerHost;
-    });
-  },
 };
 </script>
 
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
-.branding {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  padding: $space-normal 0 $space-slab;
-  text-align: center;
-
-  img {
-    margin-right: $space-smaller;
-    max-width: $space-slab;
-    max-height: $space-slab;
-  }
+.branding--image {
+  margin-right: $space-smaller;
+  max-width: $space-slab;
+  max-height: $space-slab;
 }
 
 .branding--link {
   color: $color-light-gray;
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   filter: grayscale(1);
   font-size: $font-size-small;
   opacity: 0.9;
@@ -86,8 +77,4 @@ export default {
     color: $color-gray;
   }
 }
-
-.brand--alternative {
-  padding: $space-slab;
-}
 </style>