🐛 Fix gifting edition selection (#1968)

* 🐛 Fix gifting edition selection * 🥅 Disable gifting for physical book
likecoin · Nov 26, 2024 · c2eae81 · c2eae81
1 parent f4084f8
commit c2eae81
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 43 deletions.
diff --git a/src/components/NFTBook/GiftDialog.vue b/src/components/NFTBook/GiftDialog.vue
@@ -25,6 +25,7 @@
         :stock="item.stock"
         :is-selected="item.value === selectedValue"
         :current-price="item.price"
+        :is-disabled="item.isPhysicalOnly"
         :default-price="item.defaultPrice"
         preset="dialog"
         @click="handleClickPriceSelectItem(item)"
@@ -136,24 +137,36 @@ export default {
     },
   },
   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,
+      selectedValue: this.value,
     };
   },
   watch: {
+    open(open) {
+      if (open) {
+        // NOTE: If the selected item is out of stock or is physical only, select another item.
+        let selectedItem = this.items.find(item => item.value === this.value);
+        if (
+          !selectedItem ||
+          selectedItem.stock <= 0 ||
+          selectedItem.isPhysicalOnly
+        ) {
+          selectedItem = this.items.find(
+            item =>
+              item.index !== selectedItem.index &&
+              !item.isPhysicalOnly &&
+              item.stock > 0
+          );
+          this.selectedValue = selectedItem?.value ?? this.value;
+        } else {
+          this.selectedValue = this.value;
+        }
+      }
+    },
     prefillGiftInfo: {
       handler(newVal) {
         this.fromName = newVal.fromName;
@@ -167,6 +180,7 @@ export default {
   methods: {
     submitGiftInfo() {
       this.$emit('submit', {
+        selectedValue: this.selectedValue,
         giftInfo: {
           fromName: this.fromName,
           toName: this.toName,
@@ -178,8 +192,6 @@ export default {
     handleClickPriceSelectItem({ value }) {
       if (this.selectedValue === value) return;
       this.selectedValue = value;
-      this.$emit('change', value);
-      this.$emit('update:value', value);
     },
   },
 };

diff --git a/src/components/NFTEditionSelect.vue b/src/components/NFTEditionSelect.vue
@@ -86,16 +86,15 @@ export default {
   },
   data() {
     // NOTE: If the selected item is out of stock, select another item.
-    const items = [...this.items];
-    let selectedItem = items.find(item => item.value === this.value);
+    let selectedItem = this.items.find(item => item.value === this.value);
     if (!selectedItem || selectedItem.stock <= 0) {
-      selectedItem = items.find(
+      selectedItem = this.items.find(
         item =>
           selectedItem && item.index !== selectedItem.index && item.stock > 0
       );
     }
     return {
-      selectedValue: selectedItem?.value || this.value,
+      selectedValue: selectedItem?.value ?? this.value,
     };
   },
   computed: {
@@ -109,17 +108,21 @@ export default {
       return this.selectedItem?.priceLabel;
     },
   },
+  watch: {
+    value() {
+      this.selectedValue = this.value;
+    },
+  },
   mounted() {
     if (this.selectedValue !== this.value) {
-      this.$emit('update:value', this.selectedValue);
+      this.$emit('change', this.selectedValue);
     }
   },
   methods: {
     handleClickPriceSelectItem({ value }) {
       if (this.selectedValue === value) return;
       this.selectedValue = value;
       this.$emit('change', value);
-      this.$emit('update:value', value);
       this.$emit('reset-custom-price');
     },
     handleClickGiftButton() {

diff --git a/src/components/NFTEditionSelectItemV2.vue b/src/components/NFTEditionSelectItemV2.vue
@@ -14,8 +14,9 @@
         : 'ring-[1px] ring-shade-gray hover:ring-[#d1d1d1] transition-all duration-75',
       'flex items-center justify-between gap-[16px]',
       'min-h-[82px]',
+      { 'pointer-events-none opacity-50': isDisabled },
     ]"
-    @click="$emit('click', $event)"
+    @click="handleClick"
   >
     <div class="flex items-center gap-[16px]">
       <div class="relative">
@@ -97,6 +98,10 @@ export default {
       type: String,
       default: PRESET_TYPE.PRIMARY,
     },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     isInStock() {
@@ -147,5 +152,12 @@ export default {
       };
     },
   },
+  methods: {
+    handleClick(event) {
+      if (!this.isDisabled) {
+        this.$emit('click', event);
+      }
+    },
+  },
 };
 </script>
diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
@@ -56,10 +56,16 @@
               <div class="flex flex-col gap-[8px] mt-[24px] w-full">
                 <ButtonV2
                   preset="outline"
-                  class="w-full !h-[32px] !rounded-[10px] border-[#EBEBEB]"
+                  :class="[
+                    'w-full',
+                    '!h-[32px]',
+                    '!rounded-[10px]',
+                    'border-[#EBEBEB]',
+                    { 'opacity-50': isGiftingDisabled },
+                  ]"
                   size="tiny"
-                  :is-disabled="isAllSoldOut"
-                  @click="handleGiftFromEditionSelector"
+                  :is-disabled="isGiftingDisabled"
+                  @click="handleGiftButtonClick"
                 >
                   <IconGift class="w-[16px] text-dark-gray" />
                   <p
@@ -117,7 +123,7 @@
                 class="self-stretch"
                 :items="nftEditions"
                 :should-show-notify-button="false"
-                :value="defaultSelectedValue"
+                :value="selectedValue"
                 :is-all-sold-out="isAllSoldOut"
                 @change="handleEditionSelectChange"
                 @click-collect="handleCollectFromEditionSelector"
@@ -384,7 +390,7 @@
     <NFTBookGiftDialog
       :open="isGiftDialogOpen"
       :items="nftEditions"
-      :value="defaultSelectedValue"
+      :value="selectedValue"
       @change="handleEditionSelectChange"
       @submit="handleGiftSubmit"
       @close="handleGiftClose"
@@ -466,12 +472,10 @@ export default {
       isTippingDialogOpen: false,
       isAddingToCart: false,
       isTriggerFromEditionSelector: false,
-      giftSelectedValue: 0,
 
       trimmedCount: 10,
 
       customPrice: 0,
-      selectedValue: 0,
       isOpeningCheckoutPage: false,
     };
   },
@@ -892,6 +896,18 @@ export default {
     classId() {
       return this.$route.params.classId;
     },
+    selectedValue: {
+      get() {
+        return Number(this.$route.query.price_index) || 0;
+      },
+      set(value) {
+        if (this.$route.query.price_index !== value) {
+          this.$router.replace({
+            query: { ...this.$route.query, price_index: value },
+          });
+        }
+      },
+    },
     platform() {
       return this.$route.query.from || NFT_BOOK_PLATFORM_LIKER_LAND;
     },
@@ -913,9 +929,6 @@ export default {
     isContentViewable() {
       return !(this.nftIsNFTBook && !this.ownCount);
     },
-    defaultSelectedValue() {
-      return this.nftEditions[this.editionPriceIndex || 0]?.value;
-    },
     defaultCurrency() {
       return this.getNFTBookStoreBookDefaultPaymentCurrency(this.classId);
     },
@@ -998,6 +1011,13 @@ export default {
         item => item.stock === 0 || item.priceLabel === undefined
       );
     },
+    isGiftingDisabled() {
+      return (
+        this.isAllSoldOut ||
+        this.nftEditions.find(item => item.value === this.selectedValue)
+          ?.isPhysicalOnly
+      );
+    },
     compareButtonText() {
       return this.$t(
         this.nftEditions?.length === 1
@@ -1147,7 +1167,7 @@ export default {
       );
 
       if (this.nftIsNFTBook) {
-        this.checkTippingAvailability(this.defaultSelectedValue);
+        this.checkTippingAvailability(this.selectedValue);
         return;
       }
 
@@ -1462,19 +1482,18 @@ export default {
       );
       this.checkTippingAvailability(selectedValue);
     },
-    async handleGiftSubmit({ giftInfo }) {
+    async handleGiftSubmit({ giftInfo, selectedValue }) {
       logTrackerEvent(
         this,
         'NFT',
         'nft_class_details_gift_submit',
         this.classId,
         1
       );
-      await this.handleCollectFromEdition(this.giftSelectedValue, giftInfo);
+      await this.handleCollectFromEdition(selectedValue, giftInfo);
       this.isGiftDialogOpen = false;
     },
-    handleGiftFromEditionSelector() {
-      this.giftSelectedValue = this.selectedValue;
+    handleGiftButtonClick() {
       this.isGiftDialogOpen = true;
       logTrackerEvent(
         this,
@@ -1510,14 +1529,9 @@ export default {
         })
       );
     },
-    async handleEditionSelectChange(selectedValue) {
+    handleEditionSelectChange(selectedValue) {
       this.customPrice = 0;
-      await this.$router.replace({
-        query: {
-          ...this.$route.query,
-          price_index: selectedValue,
-        },
-      });
+      this.selectedValue = selectedValue;
       logTrackerEvent(
         this,
         'NFT',

diff --git a/src/pages/nft/collection/_collectionId/index.vue b/src/pages/nft/collection/_collectionId/index.vue
@@ -16,7 +16,7 @@
               class="w-full !h-[32px] !rounded-[10px] border-[#EBEBEB]"
               size="tiny"
               :is-disabled="isAllSoldOut"
-              @click="handleGiftFromEditionSelector"
+              @click="handleGiftButtonClick"
             >
               <IconGift class="w-[16px] text-dark-gray" />
               <p
@@ -627,7 +627,7 @@ export default {
       await this.handleCollectFromEdition(giftInfo);
       this.isGiftDialogOpen = false;
     },
-    handleGiftFromEditionSelector() {
+    handleGiftButtonClick() {
       this.isGiftDialogOpen = true;
       logTrackerEvent(
         this,