[TAS-2525] 💄 Purchase CTA button improvement

src/components/NFTBook/GiftDialog.vue

@@ -15,6 +15,21 @@
         <IconGift class="w-[32px] text-like-green" />
       </template>
     </Label>
+    <div class="flex items-center gap-[12px] my-[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"
+        preset="dialog"
+        @click="handleClickPriceSelectItem(item)"
+      />
+    </div>
     <Label
       class="text-dark-gray my-[12px]"
       :text="$t('nft_book_gift_dialog_description')"
@@ -111,13 +126,31 @@ export default {
         message: '',
       }),
     },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
+    // NOTE: If the selected item is out of stock, select another item.
+    let selectedItem = this.items.find(item => item.value === this.value);
+    if (!selectedItem || selectedItem.stock <= 0) {
+      selectedItem = this.items.find(
+        item =>
+          selectedItem && item.index !== selectedItem.index && item.stock > 0
+      );
+    }
+
     return {
       fromName: this.prefillGiftInfo?.fromName,
       toName: this.prefillGiftInfo?.toName,
       toEmail: this.prefillGiftInfo?.toEmail,
       message: this.prefillGiftInfo?.message,
+      selectedValue: selectedItem?.value || this.value,
     };
   },
   watch: {
@@ -142,6 +175,12 @@ export default {
         },
       });
     },
+    handleClickPriceSelectItem({ value }) {
+      if (this.selectedValue === value) return;
+      this.selectedValue = value;
+      this.$emit('change', value);
+      this.$emit('update:value', value);
+    },
   },
 };
 </script>

src/components/NFTBook/ItemCard.vue

@@ -66,7 +66,7 @@
         'w-full',
         'rounded-[32px]',
         'px-[16px] sm:px-[32px]',
-        { 'laptop:px-[48px]': !isCompactPreset },
+        { 'laptop:px-[20px]': !isCompactPreset },
         'transition-all',
         'duration-200',
         bgStyle,
@@ -121,7 +121,7 @@
             :resize="200"
           />
 
-          <div class="hidden laptop:block">
+          <div class="hidden w-full laptop:block">
             <slot name="column-left" />
           </div>
         </div>
@@ -148,7 +148,7 @@
             class="text-like-cyan"
             :text="$t('campaign_nft_book_just_arrived')"
           />
-          <Label preset="h4" :class="titleStyle" :text="NFTName" />
+          <Label preset="h3" :class="titleStyle" :text="NFTName" />
           <p :class="['text-14', 'whitespace-pre-line', descriptionStyle]">
             {{ bookDescriptionTrimmed }}
           </p>
@@ -234,17 +234,27 @@
               :preset="preset"
             />
           </NFTBookSpecTable>
-          <div class="flex flex-col items-center w-full laptop:hidden">
+          <div
+            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-[#EBEBEB]"
+            />
+            <slot name="column-edition-select" />
+          </div>
+          <div class="flex-col hidden w-full laptop:flex">
             <slot name="column-edition-select" />
           </div>
         </div>
-        <div class="flex flex-col items-center laptop:hidden">
+        <div
+          class="relative pt-[36px] flex flex-col items-center laptop:hidden"
+        >
+          <div
+            class="absolute top-0 left-0 right-0 mx-[-16px] my-[16px] border-b-[1px] border-[#EBEBEB]"
+          />
           <slot name="column-left" />
         </div>
       </div>
-      <div class="pb-[32px] w-full hidden laptop:flex flex-col">
-        <slot name="column-edition-select" />
-      </div>
     </component>
 
     <!-- Footer -->

src/components/NFTCollection/ItemCard.vue

@@ -14,7 +14,7 @@
         'w-full',
         'rounded-[32px]',
         'px-[16px] sm:px-[32px]',
-        { 'laptop:px-[48px]': !isCompactPreset },
+        { 'laptop:px-[20px]': !isCompactPreset },
         'transition-all',
         'duration-200',
         bgStyle,
@@ -66,7 +66,7 @@
             :text="$t('nft_collection_num_of_books', { num: classIds.length })"
           />
 
-          <div class="hidden laptop:block">
+          <div class="hidden w-full laptop:block">
             <slot name="column-left" />
           </div>
         </div>
@@ -98,7 +98,7 @@
             class="text-like-collection"
             :text="$t('nft_collection_label')"
           />
-          <Label preset="h4" :class="titleStyle" :text="collectionName" />
+          <Label preset="h3" :class="titleStyle" :text="collectionName" />
           <Markdown :md-string="collectionDescription" />
           <NFTBookSpecTable class="mt-[12px]">
             <client-only>
@@ -154,17 +154,25 @@
               :is-downloadable="isDownloadable"
             />
           </NFTBookSpecTable>
-          <div class="flex flex-col items-center w-full laptop:hidden">
+          <div
+            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-[#EBEBEB]"
+            />
+            <slot name="column-edition-select" />
+          </div>
+          <div class="flex-col hidden w-full laptop:flex">
             <slot name="column-edition-select" />
           </div>
         </div>
-        <div class="flex flex-col items-center laptop:hidden">
+        <div class="relative flex flex-col items-center laptop:hidden">
+          <div
+            class="absolute top-0 left-0 right-0 mx-[-16px] my-[16px] border-b-[1px] border-[#EBEBEB]"
+          />
           <slot name="column-left" />
         </div>
       </div>
-      <div class="pb-[32px] w-full hidden laptop:flex flex-col">
-        <slot name="column-edition-select" />
-      </div>
     </component>
 
     <!-- Footer -->

src/components/NFTDiscountLabel.vue

@@ -0,0 +1,35 @@
+<template>
+  <span
+    v-if="discountInfo"
+    :class="[
+      'whitespace-nowrap',
+      'px-[8px]',
+      'py-[2px]',
+      '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>