🔀 Merge #1948 into deploy/rinkeby

likecoin · Nov 13, 2024 · 78c2faf · 78c2faf
2 parents 0e07b68 + cb70f07
commit 78c2faf
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 67 deletions.
diff --git 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
@@ -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
@@ -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',
+    ]"
+    v-text="discountPercentage"
+  />
+</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
@@ -1,23 +1,27 @@
 <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="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"
+        :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="
@@ -26,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
@@ -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,21 +24,22 @@
           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 class="text-like-green text-[16px] font-500" v-text="name" />
       </div>
     </div>
 
-    <div class="flex flex-co 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 class="flex flex-col whitespace-nowrap">
+      <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>
@@ -81,7 +82,7 @@ export default {
     },
     defaultPrice: {
       type: Number,
-      default: 900,
+      default: 0,
     },
     preset: {
       type: String,
@@ -124,7 +125,7 @@ export default {
                 'HKD'
               )
             : formatNumberWithUSD(originalPrice),
-        discountPercentage: `-${discountPercentage}`,
+        discountPercentage,
       };
     },
   },

diff --git 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" v-text="stockLabel" />
 </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
@@ -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
@@ -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": "檢視版本資訊",