[TAS-2734]💄 Display DRM information on product page

src/components/BottomDialog.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="fixed inset-0 z-50 bg-black bg-opacity-[30%]">
+    <div
+      class="fixed left-0 bottom-0 flex flex-col items-center gap-[8px] w-full bg-white rounded-t-[16px]"
+    >
+      <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]"
+      >
+        <h5 class="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-[24px]">
+        <slot name="content" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'BottomDialog',
+  props: {
+    title: {
+      type: String,
+      default: undefined,
+    },
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+  },
+};
+</script>

src/components/Icon/Info.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_2791_3213)">
+      <path
+        d="M7.33334 11.3333H8.66667V7.33334H7.33334V11.3333ZM8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8 13.3333C5.06 13.3333 2.66667 10.94 2.66667 8.00001C2.66667 5.06001 5.06 2.66668 8 2.66668C10.94 2.66668 13.3333 5.06001 13.3333 8.00001C13.3333 10.94 10.94 13.3333 8 13.3333ZM7.33334 6.00001H8.66667V4.66668H7.33334V6.00001Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2791_3213">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

src/components/NFTBook/SpecTableItemAccessMethod.vue

@@ -3,7 +3,12 @@
     <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"
+    />
   </component>
 </template>
 
@@ -29,6 +34,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_tooltips_text_drm_free'
+            ),
+          }
+        : {
+            title: this.$t(
+              'nft_details_page_label_access_methods_tooltips_title_drm'
+            ),
+            text: this.$t(
+              'nft_details_page_label_access_methods_tooltips_text_drm'
+            ),
+          };
+    },
   },
 };
 </script>

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 hidden group laptop:block"
+      @mouseenter="hoverTooltips"
+    >
+      <IconInfo />
+      <NFTBookTooltips
+        class="hidden group-hover:block"
+        :tooltip-text="tooltipText"
+        :tooltip-title="tooltipTitle"
+      />
+    </div>
+
+    <div
+      v-if="tooltipText"
+      class="cursor-pointer laptop:hidden"
+      @click="onclickShowTooltips"
+    >
+      <IconInfo />
+    </div>
+    <BottomDialog
+      v-if="showTooltips"
+      :title="tooltipTitle"
+      @close="closeTooltips"
+    >
+      <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,37 @@ export default {
       type: String,
       default: PRESET_TYPE.DEFAULT,
     },
+    tooltipText: {
+      type: String,
+      default: undefined,
+    },
+    tooltipTitle: {
+      type: String,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      showTooltips: false,
+    };
   },
   computed: {
     textStyle() {
       if (this.preset === PRESET_TYPE.CAMPAIGN) return 'text-white';
       return 'text-dark-gray';
     },
   },
+  methods: {
+    hoverTooltips() {
+      logTrackerEvent(this, 'NFTBook', 'TooltipsHover', '', 1);
+    },
+    onclickShowTooltips() {
+      this.showTooltips = true;
+      logTrackerEvent(this, 'NFTBook', 'TooltipsClicked', '', 1);
+    },
+    closeTooltips() {
+      this.showTooltips = false;
+    },
+  },
 };
 </script>

src/components/NFTBook/Tooltips.vue

@@ -0,0 +1,42 @@
+<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',
+    ]"
+  >
+    <h4 class="font-600 text-dark-gray">{{ tooltipTitle }}</h4>
+    <p>{{ tooltipText }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NFTBookTooltips',
+  props: {
+    tooltipText: {
+      type: String,
+      default: undefined,
+    },
+    tooltipTitle: {
+      type: String,
+      default: undefined,
+    },
+  },
+};
+</script>

src/locales/en.json

@@ -668,6 +668,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_tooltips_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_tooltips_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",

src/locales/zh-Hant.json

@@ -668,6 +668,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_tooltips_text_drm": "指設有數位版權管理技術的電子書，讀者可以於我們的站內開啟及閱讀內容。",
+  "nft_details_page_label_access_methods_tooltips_title_drm": "DRM 內容",
+  "nft_details_page_label_access_methods_tooltips_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": "檢視此系列的其他事件",