🔀 Merge #2052 into deploy/rinkeby

likecoin · Feb 13, 2025 · 99bfadd · 99bfadd
2 parents 97005a7 + db0a57b
commit 99bfadd
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 0 deletions.
diff --git a/src/assets/images/misc/bottleshiu/20250215-bookclub-desktop.png b/src/assets/images/misc/bottleshiu/20250215-bookclub-desktop.png
diff --git a/src/assets/images/misc/bottleshiu/20250215-bookclub-mobile.png b/src/assets/images/misc/bottleshiu/20250215-bookclub-mobile.png
diff --git a/src/constant/index.js b/src/constant/index.js
@@ -438,6 +438,16 @@ export const NFT_BOOK_WITH_SIGN_IMAGE_SET = new Map(
       ]
 );
 
+export const NFT_BOOK_WITH_EVENT_BANNER_LIST = IS_TESTNET
+  ? [
+      'likenft1emvvd04ynymxn7d62mmmqxr7xrye92wqxxgh394r2jnznnl0uneqapg60l',
+      'likenft1vwm4ze65h5vv84uahwd3x52xp8t9q5xqex3d58mvgeurrm0dk0yqcwd6d8',
+    ]
+  : [
+      'likenft17zq3r5t2qwfatle04sz680vl3ka0l8wfeu4n5jv26mnvawnfqs4qd773ny',
+      'likenft154xhw0qyds5pgvsyc7379lnkyvwqkvv2zvmmh2gn5qrewljeqwys2sju6x',
+    ];
+
 export const SIGN_AUTHORIZATION_PERMISSIONS = [
   'profile',
   'read:nftbook',

diff --git a/src/mixins/nft.js b/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_LIST,
 } from '~/constant';
 
 import {
@@ -81,6 +82,8 @@ export default {
 
       isOwnerInfoLoading: false,
       isHistoryInfoLoading: false,
+
+      nftShouldHideEventBanner: false,
     };
   },
   computed: {
@@ -707,6 +710,10 @@ export default {
         customAuthor || this.iscnWorkAuthorName || this.creatorDisplayNameFull
       );
     },
+
+    nftShouldShowEventBanner() {
+      return NFT_BOOK_WITH_EVENT_BANNER_LIST.includes(this.classId);
+    },
   },
   watch: {
     getAddress(newAddress) {
@@ -1427,5 +1434,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);
+    },
   },
 };
diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
@@ -5,6 +5,65 @@
     }}</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 && !nftShouldHideEventBanner"
+          :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="https://docs.google.com/forms/d/e/1FAIpQLSc2ZvcopT5OP4m9g8U_T95V3UluyqqlsJOY-_mIq1nAZ54tqQ/viewform"
+          target="_blank"
+          rel="noopener noreferrer"
+          @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="~/assets/images/misc/bottleshiu/20250215-bookclub-desktop.png"
+              media="(min-width: 528px)"
+            />
+            <source
+              srcset="~/assets/images/misc/bottleshiu/20250215-bookclub-mobile.png"
+            />
+            <img
+              src="~/assets/images/misc/bottleshiu/20250215-bookclub-mobile.png"
+              alt="邵家臻先生著作讀書會"
+            />
+          </picture>
+        </a>
+
         <NFTPageControlBar
           :collected-count="ownCount"
           :class-id="classId"