✨ Add event banner for bottleshiu

src/constant/index.js

@@ -438,6 +438,24 @@ export const NFT_BOOK_WITH_SIGN_IMAGE_SET = new Map(
       ]
 );
 
+export const NFT_BOOK_WITH_EVENT_BANNER_SET = [
+  {
+    id: '20250215-bottleshiu-bookclub',
+    href:
+      'https://docs.google.com/forms/d/e/1FAIpQLSc2ZvcopT5OP4m9g8U_T95V3UluyqqlsJOY-_mIq1nAZ54tqQ/viewform',
+    imgAlt: '邵家臻先生著作讀書會',
+    classIds: IS_TESTNET
+      ? [
+          'likenft1emvvd04ynymxn7d62mmmqxr7xrye92wqxxgh394r2jnznnl0uneqapg60l',
+          'likenft1vwm4ze65h5vv84uahwd3x52xp8t9q5xqex3d58mvgeurrm0dk0yqcwd6d8',
+        ]
+      : [
+          'likenft17zq3r5t2qwfatle04sz680vl3ka0l8wfeu4n5jv26mnvawnfqs4qd773ny',
+          'likenft154xhw0qyds5pgvsyc7379lnkyvwqkvv2zvmmh2gn5qrewljeqwys2sju6x',
+        ],
+  },
+];
+
 export const SIGN_AUTHORIZATION_PERMISSIONS = [
   'profile',
   'read:nftbook',

src/mixins/nft.js

@@ -12,6 +12,7 @@ import {
   NFT_AUTO_DELIVER_DEFAULT_MESSAGE,
   USD_TO_HKD_RATIO,
   NFT_BOOK_WITH_SIGN_IMAGE_SET,
+  NFT_BOOK_WITH_EVENT_BANNER_SET,
 } from '~/constant';
 
 import {
@@ -81,6 +82,8 @@ export default {
 
       isOwnerInfoLoading: false,
       isHistoryInfoLoading: false,
+
+      nftShouldHideEventBanner: false,
     };
   },
   computed: {
@@ -707,6 +710,23 @@ export default {
         customAuthor || this.iscnWorkAuthorName || this.creatorDisplayNameFull
       );
     },
+
+    nftEventBanner() {
+      const set = NFT_BOOK_WITH_EVENT_BANNER_SET.find(set =>
+        set.classIds.includes(this.classId)
+      );
+
+      if (!set) return undefined;
+
+      return {
+        ...set,
+        imgSrc: `/images/event-banners/${set.id}.png`,
+        imgSrcForMobile: `/images/event-banners/${set.id}-mobile.png`,
+      };
+    },
+    nftShouldShowEventBanner() {
+      return !!this.nftEventBanner && !this.nftShouldHideEventBanner;
+    },
   },
   watch: {
     getAddress(newAddress) {
@@ -1427,5 +1447,12 @@ export default {
     getEditionByIndex(index) {
       return this.getNFTBookStorePriceByClassIdAndIndex(this.classId, index);
     },
+    handleClickEventBannerCloseButton() {
+      this.nftShouldHideEventBanner = true;
+      logTrackerEvent(this, 'NFT', 'NFTEventBannerHide', this.classId, 1);
+    },
+    handleClickEventBanner() {
+      logTrackerEvent(this, 'NFT', 'NFTEventBannerClick', this.classId, 1);
+    },
   },
 };

src/pages/nft/class/_classId/index.vue

@@ -5,6 +5,63 @@
     }}</CardV2>
     <div v-else class="px-[12px] laptop:px-[24px] pb-[120px] w-full">
       <div class="flex flex-col gap-[24px] w-full max-w-[962px] mx-auto">
+        <a
+          v-if="nftShouldShowEventBanner"
+          :class="[
+            'phone:relative fixed',
+            'z-[100]',
+            'sm:left-[30px]',
+            'sm:bottom-[30px]',
+
+            'sm:w-[240px] sm:hover:w-[300px]',
+            'sm:h-[240px] sm:hover:h-[300px]',
+            'sm:hover:rotate-[-3deg]',
+
+            'transition-all',
+            'duration-500',
+          ]"
+          :href="nftEventBanner?.href"
+          target="_blank"
+          rel="noopener"
+          @click="handleClickEventBanner"
+        >
+          <button
+            :class="[
+              'absolute',
+              'top-[28px]',
+              'right-[12px]',
+
+              'phone:hidden flex',
+              'items-center',
+              'justify-center',
+
+              'w-[30px]',
+              'h-[30px]',
+
+              'bg-white',
+              'bg-opacity-[0.1] hover:bg-opacity-25',
+              'rounded-full',
+
+              'transition-all',
+            ]"
+            @click.prevent="handleClickEventBannerCloseButton"
+          >
+            <IconClose class="w-[16px] h-[16px] text-white" />
+          </button>
+
+          <picture>
+            <source
+              :srcset="nftEventBanner?.imgSrc"
+              media="(min-width: 528px)"
+            />
+            <source :srcset="nftEventBanner?.imgSrcForMobile" />
+            <img
+              src="~/assets/images/misc/bottleshiu/20250215-bookclub-mobile.png"
+              :alt="nftEventBanner?.imgAlt"
+            />
+          </picture>
+        </a>
+
         <NFTPageControlBar
           :collected-count="ownCount"
           :class-id="classId"