From bde48be8af5a6191e3c0f31c42afadfe75e2fd77 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Mon, 25 Nov 2024 23:36:57 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20gifting=20edition=20select?=
 =?UTF-8?q?ion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTBook/GiftDialog.vue         |  4 +-
 src/components/NFTEditionSelect.vue           |  8 +++-
 src/pages/nft/class/_classId/index.vue        | 39 ++++++++++---------
 .../nft/collection/_collectionId/index.vue    |  4 +-
 4 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/components/NFTBook/GiftDialog.vue b/src/components/NFTBook/GiftDialog.vue
index 7c134f86f..c2650cfb2 100644
--- a/src/components/NFTBook/GiftDialog.vue
+++ b/src/components/NFTBook/GiftDialog.vue
@@ -154,6 +154,9 @@ export default {
     };
   },
   watch: {
+    value() {
+      this.selectedValue = this.value;
+    },
     prefillGiftInfo: {
       handler(newVal) {
         this.fromName = newVal.fromName;
@@ -179,7 +182,6 @@ export default {
       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
index 9478e9680..7abd4262c 100644
--- a/src/components/NFTEditionSelect.vue
+++ b/src/components/NFTEditionSelect.vue
@@ -109,9 +109,14 @@ 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: {
@@ -119,7 +124,6 @@ export default {
       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/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
index c97df56f9..4fd640376 100644
--- a/src/pages/nft/class/_classId/index.vue
+++ b/src/pages/nft/class/_classId/index.vue
@@ -59,7 +59,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
@@ -117,7 +117,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 +384,7 @@
     <NFTBookGiftDialog
       :open="isGiftDialogOpen"
       :items="nftEditions"
-      :value="defaultSelectedValue"
+      :value="selectedValue"
       @change="handleEditionSelectChange"
       @submit="handleGiftSubmit"
       @close="handleGiftClose"
@@ -466,12 +466,10 @@ export default {
       isTippingDialogOpen: false,
       isAddingToCart: false,
       isTriggerFromEditionSelector: false,
-      giftSelectedValue: 0,
 
       trimmedCount: 10,
 
       customPrice: 0,
-      selectedValue: 0,
       isOpeningCheckoutPage: false,
     };
   },
@@ -892,6 +890,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 +923,6 @@ export default {
     isContentViewable() {
       return !(this.nftIsNFTBook && !this.ownCount);
     },
-    defaultSelectedValue() {
-      return this.nftEditions[this.editionPriceIndex || 0]?.value;
-    },
     defaultCurrency() {
       return this.getNFTBookStoreBookDefaultPaymentCurrency(this.classId);
     },
@@ -1147,7 +1154,7 @@ export default {
       );
 
       if (this.nftIsNFTBook) {
-        this.checkTippingAvailability(this.defaultSelectedValue);
+        this.checkTippingAvailability(this.selectedValue);
         return;
       }
 
@@ -1470,11 +1477,10 @@ export default {
         this.classId,
         1
       );
-      await this.handleCollectFromEdition(this.giftSelectedValue, giftInfo);
+      await this.handleCollectFromEdition(this.selectedValue, giftInfo);
       this.isGiftDialogOpen = false;
     },
-    handleGiftFromEditionSelector() {
-      this.giftSelectedValue = this.selectedValue;
+    handleGiftButtonClick() {
       this.isGiftDialogOpen = true;
       logTrackerEvent(
         this,
@@ -1510,14 +1516,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
index 661a02f66..09619c715 100644
--- 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,