From 0b283a00f60115d455b5c26431cd2e414980c814 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 13 Nov 2024 14:32:28 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20Add=20discount=20&=20stock?=
 =?UTF-8?q?=20label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTBook/ItemCard.vue       |  4 +--
 src/components/NFTCollection/ItemCard.vue |  4 +--
 src/components/NFTDiscountLabel.vue       | 35 ++++++++++++++++++
 src/components/NFTEditionSelect.vue       | 28 ++++++++-------
 src/components/NFTEditionSelectItemV2.vue | 11 +++---
 src/components/NFTStockLabel.vue          | 44 ++++++++---------------
 src/locales/en.json                       |  1 +
 src/locales/zh-Hant.json                  |  3 +-
 8 files changed, 77 insertions(+), 53 deletions(-)
 create mode 100644 src/components/NFTDiscountLabel.vue

diff --git a/src/components/NFTBook/ItemCard.vue b/src/components/NFTBook/ItemCard.vue
index 9acb4a1d2..ed613a4fd 100644
--- a/src/components/NFTBook/ItemCard.vue
+++ b/src/components/NFTBook/ItemCard.vue
@@ -235,14 +235,14 @@
             />
           </NFTBookSpecTable>
           <div
-            class="relative pt-[36px] flex flex-col items-center laptop:hidden"
+            class="relative pt-[36px] flex flex-col items-center w-full laptop:hidden"
           >
             <div
               class="absolute top-0 left-0 right-0 mx-[-16px] my-[16px] border-b-[1px] border-[#ebebebeb]"
             />
             <slot name="column-edition-select" />
           </div>
-          <div class="flex-col hidden laptop:flex">
+          <div class="flex-col hidden w-full laptop:flex">
             <slot name="column-edition-select" />
           </div>
         </div>
diff --git a/src/components/NFTCollection/ItemCard.vue b/src/components/NFTCollection/ItemCard.vue
index f4295205b..eb6311235 100644
--- a/src/components/NFTCollection/ItemCard.vue
+++ b/src/components/NFTCollection/ItemCard.vue
@@ -155,14 +155,14 @@
             />
           </NFTBookSpecTable>
           <div
-            class="relative pt-[36px] flex flex-col items-center laptop:hidden"
+            class="relative pt-[36px] flex flex-col items-center w-full laptop:hidden"
           >
             <div
               class="absolute top-0 left-0 right-0 mx-[-16px] my-[16px] border-b-[1px] border-[#ebebebeb]"
             />
             <slot name="column-edition-select" />
           </div>
-          <div class="flex-col hidden laptop:flex">
+          <div class="flex-col hidden w-full laptop:flex">
             <slot name="column-edition-select" />
           </div>
         </div>
diff --git a/src/components/NFTDiscountLabel.vue b/src/components/NFTDiscountLabel.vue
new file mode 100644
index 000000000..da7ac66c1
--- /dev/null
+++ b/src/components/NFTDiscountLabel.vue
@@ -0,0 +1,35 @@
+<template>
+  <span
+    v-if="discountInfo"
+    :class="[
+      'whitespace-nowrap',
+      'px-[8px]',
+      'py-[4px]',
+      'rounded-[4px]',
+      'text-[12px]',
+      'font-500',
+      'bg-[#AAF1E7]',
+      'text-like-green',
+    ]"
+    >{{ discountPercentage }}</span
+  >
+</template>
+
+<script>
+export default {
+  name: 'NFTDiscountLabel',
+  props: {
+    discountInfo: {
+      type: Object,
+      default: null,
+    },
+  },
+  computed: {
+    discountPercentage() {
+      return this.$t('nft_edition_select_discount_label', {
+        percentage: this.discountInfo?.discountPercentage,
+      });
+    },
+  },
+};
+</script>
diff --git a/src/components/NFTEditionSelect.vue b/src/components/NFTEditionSelect.vue
index 9a3226eb8..56a351009 100644
--- a/src/components/NFTEditionSelect.vue
+++ b/src/components/NFTEditionSelect.vue
@@ -1,23 +1,25 @@
 <template>
-  <div class="flex items-center gap-[12px] w-full flex-wrap">
+  <div class="flex flex-col gap-[12px] w-full flex-wrap">
     <div
       class="hidden laptop:block border-b-[1px] border-[#ebebebeb] w-full my-[16px]"
     />
     <div class="text-[18px] font-500 text-dark-gray w-full">
       {{ $t('nft_edition_select_section_label') }}
     </div>
-    <NFTEditionSelectItemV2
-      v-for="(item, index) in items"
-      :key="index"
-      :name="item.name"
-      :currency="item.currency"
-      :price-label="item.priceLabel"
-      :stock="item.stock"
-      :is-selected="item.value === selectedValue"
-      :current-price="item.price"
-      :default-price="item.defaultPrice"
-      @click="handleClickPriceSelectItem(item)"
-    />
+    <div class="flex items-stretch gap-[12px] w-full flex-wrap">
+      <NFTEditionSelectItemV2
+        v-for="(item, index) in items"
+        :key="index"
+        :name="item.name"
+        :currency="item.currency"
+        :price-label="item.priceLabel"
+        :stock="item.stock"
+        :is-selected="item.value === selectedValue"
+        :current-price="item.price"
+        :default-price="item.defaultPrice"
+        @click="handleClickPriceSelectItem(item)"
+      />
+    </div>
     <div class="flex items-center gap-[12px] w-full mt-[12px]">
       <ButtonV2
         v-if="
diff --git a/src/components/NFTEditionSelectItemV2.vue b/src/components/NFTEditionSelectItemV2.vue
index d47701b4a..6c98db904 100644
--- a/src/components/NFTEditionSelectItemV2.vue
+++ b/src/components/NFTEditionSelectItemV2.vue
@@ -2,7 +2,7 @@
   <div
     :class="[
       'group',
-      'cursor-pointer',
+      isInStock ? 'cursor-pointer' : 'opacity-50 pointer-events-none',
       'rounded-[16px]',
       preset === 'dialog' ? 'w-full' : 'w-full desktop:w-[48%]',
       'py-[18px] px-[24px]',
@@ -24,15 +24,16 @@
           class="text-like-green w-[20px] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
         />
       </div>
-      <div class="flex flex-col">
-        <div>
+      <div class="flex flex-col gap-[4px]">
+        <div class="flex gap-[8px] items-center">
+          <NFTDiscountLabel v-if="discountInfo" :discount-info="discountInfo" />
           <NFTStockLabel :stock="stock" />
         </div>
         <div class="text-like-green text-[16px] font-500">{{ name }}</div>
       </div>
     </div>
 
-    <div class="flex flex-co whitespace-nowrap">
+    <div class="flex flex-col whitespace-nowrap">
       <div v-if="discountInfo" class="text-like-green text-[12px]">
         {{ discountInfo.originalPriceLabel }}
       </div>
@@ -124,7 +125,7 @@ export default {
                 'HKD'
               )
             : formatNumberWithUSD(originalPrice),
-        discountPercentage: `-${discountPercentage}`,
+        discountPercentage,
       };
     },
   },
diff --git a/src/components/NFTStockLabel.vue b/src/components/NFTStockLabel.vue
index 48c7a74ec..9f4c9b39d 100644
--- a/src/components/NFTStockLabel.vue
+++ b/src/components/NFTStockLabel.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :class="stockLabelClasses">{{ stockLabel }}</span>
+  <span v-if="stockLabel" :class="stockLabelClasses">{{ stockLabel }}</span>
 </template>
 
 <script>
@@ -12,10 +12,6 @@ export default {
       type: Number,
       default: 0,
     },
-    isDark: {
-      type: Boolean,
-      default: true,
-    },
   },
   computed: {
     isSoldOut() {
@@ -31,33 +27,21 @@ export default {
       if (this.isLimitedStock) {
         return this.$tc('nft_stock_left', this.stock, { stock: this.stock });
       }
-      return this.$t('nft_in_stock');
+      return '';
     },
     stockLabelClasses() {
-      const classes = ['whitespace-nowrap'];
-      if (this.isSoldOut || this.isLimitedStock) {
-        if (this.isDark) {
-          classes.push(
-            'inline-block',
-            'px-[16px]',
-            'py-[4px]',
-            'rounded-full',
-            'text-[12px]'
-          );
-        } else {
-          classes.push('text-[16px]');
-        }
-        if (this.isSoldOut) {
-          if (this.isDark) {
-            classes.push('text-white', 'bg-danger');
-          } else {
-            classes.push('text-danger');
-          }
-        } else {
-          classes.push('text-danger', 'bg-white');
-        }
-      } else {
-        classes.push('text-[16px]', 'text-like-cyan');
+      const classes = [
+        'whitespace-nowrap',
+        'px-[8px]',
+        'py-[4px]',
+        'rounded-[4px]',
+        'text-[12px]',
+        'font-500',
+      ];
+      if (this.isLimitedStock) {
+        classes.push('text-[#E35050]', 'bg-[#E35050] bg-opacity-[20%]');
+      } else if (this.isSoldOut) {
+        classes.push('text-white', 'bg-[#E35050]');
       }
       return classes;
     },
diff --git a/src/locales/en.json b/src/locales/en.json
index 3b654559c..f51ef1561 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -705,6 +705,7 @@
   "nft_edition_select_confirm_button_text_collect": "Collect",
   "nft_edition_select_confirm_button_text_gift": "Gift",
   "nft_edition_select_confirm_button_text_purchase": "Buy now",
+  "nft_edition_select_discount_label": "{percentage}% off",
   "nft_edition_select_notify_button_text": "Notify when available",
   "nft_edition_select_section_label": "Purchase books",
   "nft_edition_view_edition_button_text": "View Edition Details",
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index ef2d6cc94..9cd8146df 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -271,7 +271,7 @@
   "footer_nav_faq": "常見問題",
   "footer_nav_faq_link": "https://docs.like.co/v/zh/general-guides/writing-nft",
   "footer_nav_help": "幫助",
-  "footer_nav_mint_nft": "發行電子書",
+  "footer_nav_mint_nft": "發行電子書",
   "footer_nav_store_articles": "熱門文章",
   "footer_nav_store_books": "書店",
   "footer_nav_tnc": "使用條款",
@@ -705,6 +705,7 @@
   "nft_edition_select_confirm_button_text_collect": "收集",
   "nft_edition_select_confirm_button_text_gift": "贈送書本",
   "nft_edition_select_confirm_button_text_purchase": "立即購買",
+  "nft_edition_select_discount_label": "{percentage}% 折扣",
   "nft_edition_select_notify_button_text": "有貨時通知我",
   "nft_edition_select_section_label": "購買書籍",
   "nft_edition_view_edition_button_text": "檢視版本資訊",

From cb70f07df8a8ac5197a56068b9b7d60b2bc21e1a Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 13 Nov 2024 14:57:05 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Use=20v-text=20for=20binding?=
 =?UTF-8?q?=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTDiscountLabel.vue       |  4 ++--
 src/components/NFTEditionSelect.vue       | 16 +++++++++-------
 src/components/NFTEditionSelectItemV2.vue | 16 ++++++++--------
 src/components/NFTStockLabel.vue          |  2 +-
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/NFTDiscountLabel.vue b/src/components/NFTDiscountLabel.vue
index da7ac66c1..bff7c6ad2 100644
--- a/src/components/NFTDiscountLabel.vue
+++ b/src/components/NFTDiscountLabel.vue
@@ -11,8 +11,8 @@
       'bg-[#AAF1E7]',
       'text-like-green',
     ]"
-    >{{ discountPercentage }}</span
-  >
+    v-text="discountPercentage"
+  />
 </template>
 
 <script>
diff --git a/src/components/NFTEditionSelect.vue b/src/components/NFTEditionSelect.vue
index 56a351009..951822929 100644
--- a/src/components/NFTEditionSelect.vue
+++ b/src/components/NFTEditionSelect.vue
@@ -3,9 +3,11 @@
     <div
       class="hidden laptop:block border-b-[1px] border-[#ebebebeb] w-full my-[16px]"
     />
-    <div class="text-[18px] font-500 text-dark-gray w-full">
-      {{ $t('nft_edition_select_section_label') }}
-    </div>
+    <div
+      class="text-[18px] font-500 text-dark-gray w-full"
+      v-text="$t('nft_edition_select_section_label')"
+    />
+
     <div class="flex items-stretch gap-[12px] w-full flex-wrap">
       <NFTEditionSelectItemV2
         v-for="(item, index) in items"
@@ -28,13 +30,13 @@
         :is-disabled="!selectedItem"
         preset="primary"
         class="w-[58%] laptop:w-[260px]"
-        :text="$t('nft_edition_select_confirm_button_text_add_to_cart')"
         @click="handleClickAddToCartButton"
       >
         <IconAdd class="w-[16px]" />
-        <p class="ml-[8px]">
-          {{ $t('nft_edition_select_confirm_button_text_add_to_cart') }}
-        </p>
+        <p
+          class="ml-[8px]"
+          v-text="$t('nft_edition_select_confirm_button_text_add_to_cart')"
+        />
       </ButtonV2>
       <ButtonV2
         v-if="!isAllSoldOut"
diff --git a/src/components/NFTEditionSelectItemV2.vue b/src/components/NFTEditionSelectItemV2.vue
index 6c98db904..da4d7e923 100644
--- a/src/components/NFTEditionSelectItemV2.vue
+++ b/src/components/NFTEditionSelectItemV2.vue
@@ -29,17 +29,17 @@
           <NFTDiscountLabel v-if="discountInfo" :discount-info="discountInfo" />
           <NFTStockLabel :stock="stock" />
         </div>
-        <div class="text-like-green text-[16px] font-500">{{ name }}</div>
+        <div class="text-like-green text-[16px] font-500" v-text="name" />
       </div>
     </div>
 
     <div class="flex flex-col whitespace-nowrap">
-      <div v-if="discountInfo" class="text-like-green text-[12px]">
-        {{ discountInfo.originalPriceLabel }}
-      </div>
-      <div class="text-like-green text-[16px] font-500">
-        {{ priceLabel }}
-      </div>
+      <div
+        v-if="discountInfo"
+        class="text-like-green text-[12px]"
+        v-text="discountInfo.originalPriceLabel"
+      />
+      <div class="text-like-green text-[16px] font-500" v-text="priceLabel" />
     </div>
   </div>
 </template>
@@ -82,7 +82,7 @@ export default {
     },
     defaultPrice: {
       type: Number,
-      default: 900,
+      default: 0,
     },
     preset: {
       type: String,
diff --git a/src/components/NFTStockLabel.vue b/src/components/NFTStockLabel.vue
index 9f4c9b39d..77e73da32 100644
--- a/src/components/NFTStockLabel.vue
+++ b/src/components/NFTStockLabel.vue
@@ -1,5 +1,5 @@
 <template>
-  <span v-if="stockLabel" :class="stockLabelClasses">{{ stockLabel }}</span>
+  <span v-if="stockLabel" :class="stockLabelClasses" v-text="stockLabel" />
 </template>
 
 <script>