💄 Display DRM information on product page (#1989)

* 💄 Add <NFTBookTooltips/> for drm info * 💄 Add <BottomDialog/> for mobile version * 💄 Implement drm info UI to <SpecTableValue/> * 💄 Fix z-index issue * 🚸 Improve backdrop behavior * 💄 Adjust minor style issues * ♻️ Optimize info icon * ✏️ Fix tooltip typo * 📈 Add event logging for tooltip clicks * ♻️ Optimize info Icon
likecoin · Dec 31, 2024 · a813b96 · a813b96
1 parent 4704293
commit a813b96
Show file tree

Hide file tree

Showing 11 changed files with 226 additions and 2 deletions.
diff --git a/src/components/BottomDialog.vue b/src/components/BottomDialog.vue
@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="fixed inset-0 z-[1000001] bg-opacity-25 backdrop-filter bg-dark-gray backdrop-blur-sm"
+    @click="close"
+  >
+    <div
+      class="fixed left-0 bottom-0 flex flex-col items-center gap-[8px] w-full bg-white rounded-t-[16px]"
+      @click.stop
+    >
+      <div class="relative w-full">
+        <ButtonV2
+          circle="true"
+          size="small"
+          preset="tertiary"
+          class="absolute bottom-[12px] left-[12px]"
+          @click.prevent="close"
+        >
+          <IconClose class="w-[20px]" />
+        </ButtonV2>
+      </div>
+
+      <div
+        class="flex items-center justify-center w-full pt-[12px] pb-[8px] px-[20px]"
+      >
+        <p class="block text-[18px] font-600 text-black" v-text="title" />
+      </div>
+      <div class="w-full h-[1px] bg-shade-gray" />
+
+      <div class="px-[20px] pt-[18px] pb-[48px]">
+        <slot name="content" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'BottomDialog',
+  props: {
+    title: {
+      type: String,
+      default: undefined,
+    },
+  },
+  mounted() {
+    // Prevent scrolling on the body when the dialog is open
+    document.body.classList.add('overflow-hidden');
+  },
+  beforeUnmount() {
+    document.body.classList.remove('overflow-hidden');
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+      document.body.classList.remove('overflow-hidden');
+    },
+  },
+};
+</script>
diff --git a/src/components/Icon/Info.vue b/src/components/Icon/Info.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none">
+    <path
+      fill="currentColor"
+      d="M7.333 11.333h1.334v-4H7.333v4Zm.667-10A6.67 6.67 0 0 0 1.333 8 6.67 6.67 0 0 0 8 14.667 6.67 6.67 0 0 0 14.667 8 6.67 6.67 0 0 0 8 1.333Zm0 12A5.34 5.34 0 0 1 2.667 8 5.34 5.34 0 0 1 8 2.667 5.34 5.34 0 0 1 13.333 8 5.34 5.34 0 0 1 8 13.333ZM7.333 6h1.334V4.667H7.333V6Z"
+    />
+  </svg>
+</template>
diff --git a/src/components/NFTBook/ItemCard.vue b/src/components/NFTBook/ItemCard.vue
@@ -260,6 +260,7 @@
             <NFTBookSpecTableItemAccessMethod
               :is-downloadable="!nftIsDownloadHidden"
               :preset="preset"
+              @clickTooltip="$emit('clickTooltip')"
             />
           </NFTBookSpecTable>
           <div

diff --git a/src/components/NFTBook/SpecTableItemAccessMethod.vue b/src/components/NFTBook/SpecTableItemAccessMethod.vue
@@ -3,7 +3,13 @@
     <NFTBookSpecTableLabel
       :text="$t('nft_details_page_label_access_methods')"
     />
-    <NFTBookSpecTableValue :text="value" :preset="preset" />
+    <NFTBookSpecTableValue
+      :text="value"
+      :preset="preset"
+      :tooltip-title="tooltipsContent.title"
+      :tooltip-text="tooltipsContent.text"
+      @clickTooltip="$emit('clickTooltip')"
+    />
   </component>
 </template>
 
@@ -29,6 +35,25 @@ export default {
         ? this.$t('nft_details_page_label_access_methods_downloadable')
         : this.$t('nft_details_page_label_access_methods_web_only');
     },
+    tooltipsContent() {
+      return this.isDownloadable
+        ? {
+            title: this.$t(
+              'nft_details_page_label_access_methods_tooltips_title_drm_free'
+            ),
+            text: this.$t(
+              'nft_details_page_label_access_methods_tooltip_text_drm_free'
+            ),
+          }
+        : {
+            title: this.$t(
+              'nft_details_page_label_access_methods_tooltips_title_drm'
+            ),
+            text: this.$t(
+              'nft_details_page_label_access_methods_tooltip_text_drm'
+            ),
+          };
+    },
   },
 };
 </script>
diff --git a/src/components/NFTBook/SpecTableValue.vue b/src/components/NFTBook/SpecTableValue.vue
@@ -1,9 +1,41 @@
 <template>
-  <div :class="['font-[600]', textStyle]" v-text="text" />
+  <div class="flex gap-[8px] items-center">
+    <div :class="['font-[600]', textStyle]" v-text="text" />
+    <div
+      v-if="tooltipText"
+      class="relative z-[300] hidden group laptop:block"
+      @mouseenter="hoverTooltip"
+    >
+      <IconInfo class="w-[16px] h-[16px]" />
+      <NFTBookTooltip
+        class="hidden group-hover:block"
+        :tooltip-text="tooltipText"
+        :tooltip-title="tooltipTitle"
+      />
+    </div>
+
+    <div
+      v-if="tooltipText"
+      class="cursor-pointer laptop:hidden"
+      @click="onclickShowTooltip"
+    >
+      <IconInfo class="w-[16px] h-[16px]" />
+    </div>
+    <BottomDialog
+      v-if="showTooltip"
+      :title="tooltipTitle"
+      @close="closeTooltip"
+    >
+      <template #content>
+        {{ tooltipText }}
+      </template>
+    </BottomDialog>
+  </div>
 </template>
 
 <script>
 import { PRESET_TYPE } from '~/components/NFTBook/ItemCard';
+import { logTrackerEvent } from '~/util/EventLogger';
 
 export default {
   props: {
@@ -15,12 +47,38 @@ export default {
       type: String,
       default: PRESET_TYPE.DEFAULT,
     },
+    tooltipText: {
+      type: String,
+      default: undefined,
+    },
+    tooltipTitle: {
+      type: String,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      showTooltip: false,
+    };
   },
   computed: {
     textStyle() {
       if (this.preset === PRESET_TYPE.CAMPAIGN) return 'text-white';
       return 'text-dark-gray';
     },
   },
+  methods: {
+    hoverTooltip() {
+      logTrackerEvent(this, 'NFTBook', 'TooltipHover', '', 1);
+    },
+    onclickShowTooltip() {
+      this.showTooltip = true;
+      logTrackerEvent(this, 'NFTBook', 'TooltipClicked', '', 1);
+      this.$emit('clickTooltip');
+    },
+    closeTooltip() {
+      this.showTooltip = false;
+    },
+  },
 };
 </script>
diff --git a/src/components/NFTBook/Tooltip.vue b/src/components/NFTBook/Tooltip.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    :class="[
+      'absolute',
+      'top-[24px]',
+      'z-50',
+
+      'flex',
+      'flex-col',
+      'items-start',
+      'px-[16px]',
+      'py-[8px]',
+
+      'border border-[#E3E3E3]',
+      'rounded-[12px]',
+      'bg-white',
+      'w-[230px]',
+
+      'text-[14px]',
+      'shadow-md',
+    ]"
+  >
+    <p
+      class="block text-[14px] font-600 text-dark-gray"
+      v-text="tooltipTitle"
+    />
+    <p v-text="tooltipText" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NFTBookTooltip',
+  props: {
+    tooltipText: {
+      type: String,
+      default: undefined,
+    },
+    tooltipTitle: {
+      type: String,
+      default: undefined,
+    },
+  },
+};
+</script>
diff --git a/src/components/NFTCollection/ItemCard.vue b/src/components/NFTCollection/ItemCard.vue
@@ -155,6 +155,7 @@
             />
             <NFTBookSpecTableItemAccessMethod
               :is-downloadable="isDownloadable"
+              @clickTooltip="$emit('clickTooltip')"
             />
           </NFTBookSpecTable>
           <div

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -671,6 +671,10 @@
   "nft_details_page_errormessage_transfer_self": "You cannot send Writing NFT to yourself.",
   "nft_details_page_label_access_methods": "Access Method",
   "nft_details_page_label_access_methods_downloadable": "Read online / Download",
+  "nft_details_page_label_access_methods_tooltip_text_drm": "Refers to eBooks that have digital rights management technology, allowing readers to open and read the content on our site.",
+  "nft_details_page_label_access_methods_tooltips_title_drm": "DRM Content",
+  "nft_details_page_label_access_methods_tooltip_text_drm_free": "Refers to eBooks without digital rights management technology, allowing readers to freely download and transfer the eBook to different devices.",
+  "nft_details_page_label_access_methods_tooltips_title_drm_free": "DRM-Free Content",
   "nft_details_page_label_access_methods_web_only": "Read Online",
   "nft_details_page_label_ar_view_in_mobile": "Experience your NFT live",
   "nft_details_page_label_class_page": "View all events from this content",

diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
@@ -671,6 +671,10 @@
   "nft_details_page_errormessage_transfer_self": "不能發送給自己",
   "nft_details_page_label_access_methods": "閱讀方式",
   "nft_details_page_label_access_methods_downloadable": "站內閱讀 / 檔案下載",
+  "nft_details_page_label_access_methods_tooltip_text_drm": "指設有數位版權管理技術的電子書，讀者可以於我們的站內開啟及閱讀內容。",
+  "nft_details_page_label_access_methods_tooltips_title_drm": "DRM 內容",
+  "nft_details_page_label_access_methods_tooltip_text_drm_free": "指沒有數位版權管理技術的電子書，讀者可以自由下載和傳輸電子書到不同裝置。",
+  "nft_details_page_label_access_methods_tooltips_title_drm_free": "不設 DRM 內容",
   "nft_details_page_label_access_methods_web_only": "站內閱讀",
   "nft_details_page_label_ar_view_in_mobile": "將你的 NFT 帶到現實",
   "nft_details_page_label_class_page": "檢視此系列的其他事件",

diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
@@ -38,6 +38,7 @@
             :class-id="classId"
             preset="details"
             @click-avatar="handleNFTCardClickAvatar"
+            @clickTooltip="handleNFTCardClickTooltip"
           >
             <template #column-left>
               <ul
@@ -1796,6 +1797,15 @@ export default {
         1
       );
     },
+    handleNFTCardClickTooltip() {
+      logTrackerEvent(
+        this,
+        'NFT',
+        'nft_class_details_card_tooltip_clicked',
+        this.classId,
+        1
+      );
+    },
   },
 };
 </script>
diff --git a/src/pages/nft/collection/_collectionId/index.vue b/src/pages/nft/collection/_collectionId/index.vue
@@ -9,6 +9,7 @@
           :collection-id="collectionId"
           preset="details"
           @click-avatar="handleNFTCardClickAvatar"
+          @clickTooltip="handleNFTCardClickTooltip"
         >
           <template #column-left>
             <ButtonV2
@@ -792,6 +793,15 @@ export default {
         1
       );
     },
+    handleNFTCardClickTooltip() {
+      logTrackerEvent(
+        this,
+        'NFT',
+        'nft_collection_details_card_tooltip_clicked',
+        this.collectionId,
+        1
+      );
+    },
   },
 };
 </script>