[PLA-1973] add dynamic banner (#177)

resources/js/api/index.ts

@@ -2,6 +2,7 @@ import { HttpMethods } from '~/types/types.enums';
 import mutations from '~/api/mutations';
 import snackbar from '~/util/snackbar';
 import { useAppStore } from '~/store';
+import queries from './queries';
 
 export class ApiService {
     static async reloadCsrf() {
@@ -265,4 +266,12 @@ export class ApiService {
 
         return ApiService.sendPlatformRequest(data);
     }
+
+    static async getBanners() {
+        const data = {
+            query: queries.GetBanners,
+        };
+
+        return ApiService.sendPlatformRequest(data);
+    }
 }

resources/js/api/queries.ts

@@ -28,6 +28,7 @@ import GetListings from '~/graphql/query/marketplace/GetListings';
 import GetBids from '~/graphql/query/marketplace/GetBids';
 import GetSales from '~/graphql/query/marketplace/GetSales';
 import GetBlocks from '~/graphql/query/marketplace/GetBlocks';
+import GetBanners from '~/graphql/query/GetBanners';
 
 export default {
     GetTransaction,
@@ -60,4 +61,5 @@ export default {
     GetBids,
     GetSales,
     GetBlocks,
+    GetBanners,
 };

resources/js/components/App.vue

@@ -1,16 +1,19 @@
 <template>
-    <div class="h-full flex flex-row bg-light-surface-background dark:bg-dark-surface-background">
-        <SideNavbar v-if="appStore.loggedIn" />
-        <SnackbarGroup />
-        <SupportButton />
+    <div class="bg-light-surface-background dark:bg-dark-surface-background">
+        <DynamicBanner />
+        <div class="flex flex-row h-screen">
+            <SideNavbar v-if="appStore.loggedIn" />
+            <SnackbarGroup />
+            <SupportButton />
 
-        <div class="flex flex-col w-full overflow-hidden">
-            <UserNavbar />
-            <router-view v-slot="{ Component }">
-                <ScaleTransition>
-                    <component :is="Component" />
-                </ScaleTransition>
-            </router-view>
+            <div class="flex flex-col w-full overflow-hidden">
+                <UserNavbar />
+                <router-view v-slot="{ Component }">
+                    <ScaleTransition>
+                        <component :is="Component" />
+                    </ScaleTransition>
+                </router-view>
+            </div>
         </div>
     </div>
 </template>
@@ -24,6 +27,7 @@ import SnackbarGroup from '~/components/SnackbarGroup.vue';
 import UserNavbar from '~/components/UserNavbar.vue';
 import { computed, watch } from 'vue';
 import { useRouter } from 'vue-router';
+import DynamicBanner from './DynamicBanner.vue';
 
 const appStore = useAppStore();
 const router = useRouter();

resources/js/components/DynamicBanner.vue

@@ -0,0 +1,88 @@
+<template>
+    <Transition name="fade-down" appear>
+        <div
+            v-if="enabled && show"
+            class="flex justify-between items-center px-4 md:px-10 text-light-content-white dark:text-dark-content-white notice-bg h-[72px] w-full z-10 text-white"
+        >
+            <span class="text-xs md:text-base">{{ banner.text }}</span>
+            <div class="flex space-x-2 md:space-x-4">
+                <a
+                    v-if="banner.link"
+                    :href="banner.link"
+                    target="_blank"
+                    class="underline font-medium text-light-content-white dark:text-dark-content-white hover:text-light-content-white hover:dark:text-dark-content-white text-sm md:text-base truncate"
+                >
+                    <span>
+                        {{ banner.linkText ?? 'Learn more' }}
+                    </span>
+                </a>
+                <XMarkIcon
+                    v-if="banner.dismissable"
+                    class="h-5 w-5 ml-auto my-auto cursor-pointer flex-shrink-0"
+                    @click="closeBanner"
+                />
+            </div>
+        </div>
+    </Transition>
+</template>
+
+<script setup lang="ts">
+import { XMarkIcon } from '@heroicons/vue/24/outline';
+import { computed, ref } from 'vue';
+import { ApiService } from '~/api';
+
+const show = ref(true);
+const banner = ref();
+
+const enabled = computed(() => {
+    return banner.value && banner.value.enabled;
+});
+
+const closeBanner = () => {
+    deleteOutdated();
+    localStorage.setItem(banner.value.key, 'true');
+    show.value = false;
+};
+
+const deleteOutdated = () => {
+    const keys = Object.keys(localStorage).filter((key) => key.startsWith('banner'));
+    keys.forEach((key) => {
+        if (key !== banner.value.key) {
+            const item = localStorage.getItem(key);
+            if (item) {
+                localStorage.removeItem(key);
+            }
+        }
+    });
+};
+
+const fetchBanner = async () => {
+    try {
+        const resp = await ApiService.getBanners();
+        banner.value = resp.data.GetBanners[0];
+    } catch {
+        // Do nothing
+    }
+};
+
+(() => {
+    fetchBanner();
+})();
+</script>
+
+<style lang="scss" scoped>
+.fade-down-enter-active,
+.fade-down-leave-active {
+    transition: all 0.3s ease-in-out;
+    margin-top: 0;
+}
+.fade-down-enter-from,
+.fade-down-leave-to {
+    opacity: 0;
+    margin-top: -70px;
+}
+
+.notice-bg {
+    background: linear-gradient(96deg, #4f40af -2.69%, #8c7fe0 98.64%);
+}
+</style>

resources/js/graphql/query/GetBanners.ts

@@ -0,0 +1,9 @@
+export default `query {
+  GetBanners {
+    key
+    text
+    link
+    linkText
+    dismissable
+  }
+}`;