[TAS-2568]🐛 Fix login issue on claimed book pages

src/locales/en.json

@@ -539,6 +539,7 @@
   "nft_claim_claim_header_title": "Claimed Ebook",
   "nft_claim_claimed_button_start_reading": "Start reading",
   "nft_claim_claimed_button_view_collection": "View collection",
+  "nft_claim_claimed_button_view_collection_sign_in": "Sign in to continue",
   "nft_claim_claimed_content_autoDelivery": "{publisher} has just sent you {name}, Visit your dashboard to start reading.",
   "nft_claim_claimed_content_manualDelivery": "Please wait for the author to sign and send the eBook, which may take about 1-3 days. Any update will be notified via email. Thank you for your support!",
   "nft_claim_claimed_content_mixedDelivery": "Some of the book requires author to sign and send the eBook, which may take about 1-3 days. Any update will be notified via email. For auto delivered books, visit your dashboard to start reading. Thank you for your support!",

src/locales/zh-Hant.json

@@ -539,6 +539,7 @@
   "nft_claim_claim_header_title": "領取的電子書",
   "nft_claim_claimed_button_start_reading": "開始閱讀",
   "nft_claim_claimed_button_view_collection": "檢視收藏",
+  "nft_claim_claimed_button_view_collection_sign_in": "登入以繼續",
   "nft_claim_claimed_content_autoDelivery": "{publisher} 已發送 {name} 。你可到 Liker Land 個人主頁查看你的收藏，及閱讀內容",
   "nft_claim_claimed_content_manualDelivery": "請等候創作者簽署及發送電子書，大概需約 1-3 天時間，我們將會電郵通知你。感謝支持！",
   "nft_claim_claimed_content_mixedDelivery": "部份簽名版書籍需要由創作者親自簽署及發送，大概需約 1-3 天時間，屆時我們將會以電郵通知。你可到 Liker Land 個人主頁查看收藏，及閱讀內容。感謝支持！",

src/pages/nft/claim/index.vue

@@ -533,6 +533,7 @@
             @click="handleStartReading"
           />
           <ButtonV2
+            v-if="claimingAddress"
             :content-class="['px-[48px]']"
             class="phoneLg:w-full phoneLg:max-w-[480px]"
             :preset="isViewCollectionLoading ? 'plain' : 'tertiary'"
@@ -543,6 +544,15 @@
             "
             @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"
+          />
         </template>
       </NFTClaimMainSection>
     </div>
@@ -783,6 +793,11 @@ export default {
   },
   watch: {
     claimingAddress(newValue) {
+      if (this.state === NFT_CLAIM_STATE.CLAIMED) {
+        // For the case where the user is already claimed and went back to the page
+        this.navigateToState(NFT_CLAIM_STATE.CLAIMED);
+        return;
+      }
       if (
         !newValue &&
         !(
@@ -1299,18 +1314,23 @@ export default {
         this.productId,
         1
       );
-      this.isLoginLoading = true;
-      if (!this.claimingAddress) {
-        const isConnected = await this.connectWallet({
-          isOpenAuthcore: true,
-          isSignUp: true,
-        });
-        if (isConnected || this.loginAddress) {
-          this.navigateToState(NFT_CLAIM_STATE.ID_CONFIRMATION);
+      try {
+        this.isLoginLoading = true;
+        if (!this.claimingAddress) {
+          const isConnected = await this.connectWallet({
+            isOpenAuthcore: true,
+            isSignUp: true,
+          });
+          if (isConnected || this.loginAddress) {
+            this.navigateToState(NFT_CLAIM_STATE.ID_CONFIRMATION);
+          }
+        } else {
+          await this.initIfNecessary();
         }
-      } else {
-        await this.initIfNecessary();
+      } finally {
+        this.isLoginLoading = false;
       }
+
       this.isLoginLoading = false;
     },
     async handleClickSignIn() {
@@ -1325,15 +1345,14 @@ export default {
         this.navigateToState(NFT_CLAIM_STATE.ID_CONFIRMATION);
         return;
       }
-      this.isLoginLoading = true;
       if (!this.claimingAddress) {
-        const isConnected = await this.connectWallet();
-        if (isConnected || this.loginAddress) {
-          this.navigateToState(NFT_CLAIM_STATE.ID_CONFIRMATION);
-        }
-      } else {
-        await this.initIfNecessary();
-        if (this.loginAddress) {
+        this.isLoginLoading = true;
+        await this.connectWallet();
+        if (this.claimingAddress) {
+          if (this.state === NFT_CLAIM_STATE.CLAIMED) {
+            this.navigateToState(NFT_CLAIM_STATE.CLAIMED);
+            return;
+          }
           this.navigateToState(NFT_CLAIM_STATE.ID_CONFIRMATION);
         }
       }