From 34d7b15bb762ce1d24372e110c36001fc151fcdd Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <75730405+AuroraHuang22@users.noreply.github.com>
Date: Tue, 18 Feb 2025 19:31:24 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Confirm=20owned=20info=20before?=
 =?UTF-8?q?=20redirecting=20(#2057)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛 Confirm nftId exists before redirecting

* ♻️ Refactor loading states

* 🎨 Improve class owner info retrieval logic

* 🐛 Fix incorrect prop types

* 🎨 Simplify button text

* 🥅 Ensure owners are fetched if necessary
---
 src/components/NFTPage/ControlBar.vue |   2 +-
 src/components/NFTPortfolio/Item.vue  |   2 +-
 src/pages/nft/claim/index.vue         | 134 +++++++++++++++-----------
 3 files changed, 80 insertions(+), 58 deletions(-)

diff --git a/src/components/NFTPage/ControlBar.vue b/src/components/NFTPage/ControlBar.vue
index 96a0486b9..0861d8869 100644
--- a/src/components/NFTPage/ControlBar.vue
+++ b/src/components/NFTPage/ControlBar.vue
@@ -95,7 +95,7 @@ export default {
     },
 
     price: {
-      type: String,
+      type: [String, Number],
       default: undefined,
     },
 
diff --git a/src/components/NFTPortfolio/Item.vue b/src/components/NFTPortfolio/Item.vue
index 2ba26732d..be7b2ca37 100644
--- a/src/components/NFTPortfolio/Item.vue
+++ b/src/components/NFTPortfolio/Item.vue
@@ -81,7 +81,7 @@ export default {
       return this.getAddress === this.portfolioWallet;
     },
     isContentViewable() {
-      return (
+      return !!(
         this.nftIsNFTBook &&
         (this.isBookshelf || this.isCurrentUserPortfolio) &&
         this.nftIdCollectedFirstByUser
diff --git a/src/pages/nft/claim/index.vue b/src/pages/nft/claim/index.vue
index a7d40a458..f8066d2d6 100644
--- a/src/pages/nft/claim/index.vue
+++ b/src/pages/nft/claim/index.vue
@@ -528,34 +528,33 @@
           />
         </template>
         <template #footer>
-          <ButtonV2
-            v-if="shouldShowStartReadingButton"
-            class="phoneLg:w-full phoneLg:max-w-[480px]"
-            :content-class="['px-[48px]']"
-            :text="$t('nft_claim_claimed_button_start_reading')"
-            @click="handleStartReading"
-          />
-          <ButtonV2
-            v-if="claimingAddress"
-            :content-class="['px-[48px]']"
-            class="phoneLg:w-full phoneLg:max-w-[480px]"
-            :preset="isViewCollectionLoading ? 'plain' : 'tertiary'"
-            :text="
-              isViewCollectionLoading
-                ? $t('nft_claim_loading')
-                : $t('nft_claim_claimed_button_view_collection')
-            "
-            @click="handleViewCollection"
-          />
-          <ProgressIndicator v-else-if="isLoginLoading" />
-          <ButtonV2
-            v-else
-            :content-class="['px-[48px]']"
-            class="phoneLg:w-full phoneLg:max-w-[480px]"
-            preset="tertiary"
-            :text="$t('nft_claim_claimed_button_view_collection_sign_in')"
-            @click="handleClickSignIn"
-          />
+          <ProgressIndicator v-if="isViewCollectionLoading" />
+          <div v-else class="flex items-center w-full gap-[12px]">
+            <ButtonV2
+              v-if="shouldShowStartReadingButton"
+              class="phoneLg:w-full phoneLg:max-w-[480px]"
+              :content-class="['px-[48px]']"
+              :text="$t('nft_claim_claimed_button_start_reading')"
+              @click="handleStartReading"
+            />
+            <ButtonV2
+              v-if="claimingAddress"
+              :content-class="['px-[48px]']"
+              class="phoneLg:w-full phoneLg:max-w-[480px]"
+              preset="'tertiary'"
+              :text="$t('nft_claim_claimed_button_view_collection')"
+              @click="handleViewCollection"
+            />
+            <ProgressIndicator v-else-if="isLoginLoading" />
+            <ButtonV2
+              v-else
+              :content-class="['px-[48px]']"
+              class="phoneLg:w-full phoneLg:max-w-[480px]"
+              preset="tertiary"
+              :text="$t('nft_claim_claimed_button_view_collection_sign_in')"
+              @click="handleClickSignIn"
+            />
+          </div>
         </template>
       </NFTClaimMainSection>
     </div>
@@ -659,6 +658,7 @@ export default {
       'getNFTBookStoreInfoByClassId',
       'getNFTCollectionInfoByCollectionId',
       'getIsHideNFTBookDownload',
+      'getNFTClassOwnerInfoById',
       'walletMethodType',
     ]),
     state: {
@@ -1400,7 +1400,7 @@ export default {
       this.isLoginLoading = false;
     },
 
-    handleStartReading() {
+    async handleStartReading() {
       logTrackerEvent(
         this,
         'NFT',
@@ -1410,6 +1410,7 @@ export default {
       );
 
       if (this.nftId) {
+        await this.ensureClassIdInCollected();
         this.$router.push(
           this.localeLocation({
             name: 'nft-class-classId-nftId',
@@ -1427,38 +1428,61 @@ export default {
       }
     },
     async ensureClassIdInCollected() {
-      this.isViewCollectionLoading = true;
+      if (this.classId && this.isAutoDeliver) {
+        this.isViewCollectionLoading = true;
+        let collectedNFTs = this.getCollectedNFTClassesByAddress(
+          this.claimingAddress
+        );
+        let ownCount =
+          this.getNFTClassOwnerInfoById(this.classId)[this.claimingAddress]
+            ?.length || 0;
 
-      let collectedNFTs = this.getCollectedNFTClassesByAddress(
-        this.claimingAddress
-      );
+        if (
+          !collectedNFTs?.some(item => item.classId === this.classId) ||
+          !ownCount
+        ) {
+          for (let attempts = 0; attempts < MAX_ATTEMPT; attempts += 1) {
+            try {
+              const fetchPromises = [
+                this.fetchCollectedNFTClassesByAddress({
+                  address: this.claimingAddress,
+                  nocache: true,
+                }),
+              ];
 
-      if (!collectedNFTs?.some(item => item.classId === this.classId)) {
-        for (let attempts = 0; attempts < MAX_ATTEMPT; attempts += 1) {
-          try {
-            // eslint-disable-next-line no-await-in-loop
-            await this.fetchCollectedNFTClassesByAddress({
-              address: this.claimingAddress,
-              nocache: true,
-            });
+              if (ownCount === 0) {
+                fetchPromises.push(
+                  this.fetchNFTOwners({ classId: this.classId, nocache: true })
+                );
+              }
 
-            collectedNFTs = this.getCollectedNFTClassesByAddress(
-              this.claimingAddress
-            );
+              // eslint-disable-next-line no-await-in-loop
+              await Promise.all(fetchPromises);
 
-            if (collectedNFTs?.some(item => item.classId === this.classId)) {
-              break;
+              collectedNFTs = this.getCollectedNFTClassesByAddress(
+                this.claimingAddress
+              );
+              ownCount =
+                this.getNFTClassOwnerInfoById(this.classId)[
+                  this.claimingAddress
+                ]?.length || 0;
+
+              if (
+                collectedNFTs?.some(item => item.classId === this.classId) &&
+                ownCount > 0
+              ) {
+                break;
+              }
+              // eslint-disable-next-line no-await-in-loop
+              await sleep(1000);
+            } catch (error) {
+              // eslint-disable-next-line no-console
+              console.error(error);
             }
-            // eslint-disable-next-line no-await-in-loop
-            await sleep(1000);
-          } catch (error) {
-            // eslint-disable-next-line no-console
-            console.error(error);
           }
         }
+        this.isViewCollectionLoading = false;
       }
-
-      this.isViewCollectionLoading = false;
     },
     async handleViewCollection() {
       logTrackerEvent(
@@ -1468,9 +1492,7 @@ export default {
         this.productId,
         1
       );
-      if (this.classId && this.isAutoDeliver) {
-        await this.ensureClassIdInCollected();
-      }
+      await this.ensureClassIdInCollected();
       this.$router.push(
         this.localeLocation({
           name: 'bookshelf',