✨ Support batch collect (#1137)

* 🚧 Add UI for batch collect * 👔 Remove shopping cart entry * 🚸 Move collect all button to the side * 🚸 Prevent collect all while loading * 🚸 Filter WNFT batch collected in portfolio * 💬 Update text * 🎨 FIx possible try-catch issue * 💄 Move insufficient balance label * 🚸 Prevent closing tx dialog in batch purchase * 🐛 Fix batch collect message handling * 💬 Use backpack for shopping cart --------- Co-authored-by: Edmond Yu <[email protected]>
likecoin · Jun 28, 2023 · e7f7436 · e7f7436
1 parent 82b2c56
commit e7f7436
Show file tree

Hide file tree

Showing 21 changed files with 822 additions and 51 deletions.
diff --git a/src/assets/icons/local-mall.svg b/src/assets/icons/local-mall.svg
diff --git a/src/components/CardV2.vue b/src/components/CardV2.vue
@@ -25,17 +25,30 @@ export default class Card extends Vue {
   @Prop({ default: false })
   readonly isDark!: boolean;
 
+  @Prop({ default: false })
+  readonly isOutline!: boolean;
+
   get rootClasses() {
-    return [
-      this.isDark
-        ? 'bg-like-green bg-gradient-to-r from-transparent to-like-cyan-translucent'
-        : 'bg-white',
+    const classes = [
       'rounded-[24px]',
-      {
-        'text-like-cyan-pale': this.isDark,
-        'px-[24px] py-[32px]': this.hasPadding,
-      },
+      { 'px-[24px] py-[32px]': this.hasPadding },
     ];
+    if (this.isOutline) {
+      classes.push('border');
+      if (this.isDark) {
+        classes.push('border-like-cyan-pale');
+      } else {
+        classes.push('border-gray-d8');
+      }
+    } else if (this.isDark) {
+      classes.push(
+        'bg-like-green bg-gradient-to-r from-transparent to-like-cyan-translucent',
+        'text-like-cyan-pale'
+      );
+    } else {
+      classes.push('bg-white');
+    }
+    return classes;
   }
 }
 </script>
diff --git a/src/components/EventModal/Collect/MethodButton.vue b/src/components/EventModal/Collect/MethodButton.vue
@@ -7,7 +7,9 @@
     @click="handleClick"
   >
     <template #prepend>
+      <slot v-if="$slots.prepend" name="prepend" />
       <EventModalCollectMethodIcon
+        v-else
         class="w-[24px] h-[24px] text-like-green"
         :type="type"
       />

diff --git a/src/components/EventModal/Collect/index.vue b/src/components/EventModal/Collect/index.vue
@@ -40,7 +40,12 @@
           />
         </client-only>
       </transition>
-      <template v-if="isCompleted">
+      <Label
+        v-if="isAddedToShoppingCart"
+        preset="p5"
+        align="center"
+      >{{ $t('nft_collect_modal_added_to_shopping_cart_description', { nft: NFTName }) }}</Label>
+      <template v-else-if="isCompleted">
         <Label class="text-medium-gray mt-[12px] flex-nowrap" preset="h6" align="center">
           <i18n
             :path="
@@ -61,7 +66,7 @@
           </i18n>
         </Label>
         <div
-          v-if="!isFollowPromptStateDefault"
+          v-if="!isFollowPromptStateDefault && !isBatchCollect"
           class="flex justify-center items-center mt-[16px] px-[12px] rounded-[48px] border-[1px] border-medium-gray"
         >
           <NFTMessageIdentity
@@ -131,9 +136,20 @@
       #button
     >
       <ButtonV2
+        v-if="isBatchCollect"
+        preset="outline"
+        :text="$t('nft_details_page_button_view_portfolio')"
+        :to="localeLocation({ name: 'id', params: { id: getAddress }, query: { tab: 'collected' } })"
+        @click.native="handleClose"
+      >
+        <template #prepend>
+          <IconEye class="w-[20px]" />
+        </template>
+      </ButtonV2>
+      <ButtonV2
+        v-else
         preset="outline"
         :text="$t('nft_details_page_button_view_details')"
-        class="mr-[12px]"
         @click="goToNFTDetails"
       >
         <template #prepend>
@@ -142,7 +158,20 @@
       </ButtonV2>
     </template>
 
-    <template v-if="!uiTxNFTStatus">
+    <template v-else-if="isAddedToShoppingCart" #button>
+      <ButtonV2
+        preset="secondary"
+        :text="$t('nft_collect_modal_go_to_shopping_cart_button')"
+        :to="localeLocation({ name: 'shopping-cart' })"
+        @click.native="handleClose"
+      >
+        <template #prepend>
+          <LocalMallIcon class="w-[20px]" />
+        </template>
+      </ButtonV2>
+    </template>
+
+    <template v-if="!isAddedToShoppingCart && !uiTxNFTStatus">
       <section
         v-if="paymentMethod === undefined"
         class="flex flex-col items-start mb-[28px]"
@@ -242,6 +271,26 @@
               </a>
             </div>
           </li>
+          <!--
+          <li v-if="isShowAddToShoppingCartButton">
+            <Separator class="mx-auto" />
+            <EventModalCollectMethodButton
+              :title="(
+                hasAddedToShoppingCart
+                  ? $t('nft_collect_modal_added_to_cart')
+                  : $tc('nft_collect_modal_add_to_cart', shoppingCartQuantity, { count: shoppingCartQuantity })
+              )"
+              type="crypto"
+              :price="formattedNFTPriceInLIKE"
+              :is-disabled="hasAddedToShoppingCart"
+              @click="handleAddToCart"
+            >
+              <template #prepend>
+                <LocalMallIcon :class="['w-[24px]', { 'text-like-green': !hasAddedToShoppingCart }]" />
+              </template>
+            </EventModalCollectMethodButton>
+          </li>
+          -->
         </ul>
       </section>
       <section v-else>
@@ -255,6 +304,8 @@
 import { mapActions, mapGetters } from 'vuex';
 
 import modelLoadingImage from '~/assets/images/nft/model-loading.png';
+import LocalMallIcon from '~/assets/icons/local-mall.svg?inline';
+
 import { logTrackerEvent } from '~/util/EventLogger';
 import { formatNumberWithLIKE, oscillate } from '~/util/ui';
 
@@ -271,6 +322,9 @@ export default {
   filters: {
     formatNumberWithLIKE,
   },
+  components: {
+    LocalMallIcon,
+  },
   mixins: [clipboardMixin, nftMixin],
   props: {
     isOpen: {
@@ -317,11 +371,13 @@ export default {
       isFollowPromptUpdating: false,
       modelExposure: 0,
       animationTimer: null,
+      isAddedToShoppingCart: false,
     };
   },
   computed: {
     ...mapGetters([
       'getAddress',
+      'getShoppingCartNFTClassQuantity',
       'walletFollowees',
       'walletIsLoggingIn',
       'walletInteractedCreators',
@@ -332,9 +388,14 @@ export default {
     developerMode() {
       return !!this.$route.query.debug;
     },
+    isBatchCollect() {
+      return Array.isArray(this.uiTxTargetClassId);
+    },
     classId() {
       // Alias for NFT mixin
-      return this.uiTxTargetClassId;
+      return this.isBatchCollect
+        ? this.uiTxTargetClassId[0]
+        : this.uiTxTargetClassId;
     },
     headerText() {
       return this.paymentMethod === undefined ||
@@ -344,7 +405,8 @@ export default {
     },
     isShowCloseButton() {
       return (
-        this.paymentMethod === undefined ||
+        (this.paymentMethod === undefined &&
+          !this.getRouteBaseName(this.$route) === 'shopping-cart') ||
         this.uiTxNFTStatus === 'completed' ||
         this.uiTxNFTStatus === 'processing_non_blocking'
       );
@@ -426,6 +488,15 @@ export default {
     purchaseLIKELink() {
       return 'https://faucet.like.co/purchase';
     },
+    isShowAddToShoppingCartButton() {
+      return this.canPayByLIKE && !this.nftIsUseListingPrice;
+    },
+    shoppingCartQuantity() {
+      return this.getShoppingCartNFTClassQuantity(this.classId);
+    },
+    hasAddedToShoppingCart() {
+      return this.shoppingCartQuantity > 0;
+    },
   },
   watch: {
     isOpen(isOpen) {
@@ -483,6 +554,7 @@ export default {
       'walletFollowCreator',
       'walletAddInteractedCreator',
       'walletUnfollowCreator',
+      'addNFTClassToShoppingCart',
     ]),
     startExposureAnimation(time = performance.now(), lastTime = time) {
       if (this.isProcessing) {
@@ -508,6 +580,7 @@ export default {
       this.paymentMethod = undefined;
       this.justCollectedNFTId = undefined;
       this.memo = '';
+      this.isAddedToShoppingCart = false;
 
       // Mixin
       this.userCollectedCount = undefined;
@@ -564,6 +637,17 @@ export default {
         }
       }
     },
+    handleAddToCart() {
+      logTrackerEvent(
+        this,
+        'NFT',
+        'nft_collect_modal_click_add_to_cart',
+        this.classId,
+        1
+      );
+      this.addNFTClassToShoppingCart({ classId: this.classId });
+      this.isAddedToShoppingCart = true;
+    },
     goToNFTDetails() {
       this.$router.push(
         this.localeLocation({

diff --git a/src/components/NFTPortfolio/MainView.vue b/src/components/NFTPortfolio/MainView.vue
@@ -104,6 +104,8 @@
         </div>
       </div>
 
+      <slot name="before-grid" />
+
       <NFTPagePrimitiveDisclaimer
         v-if="isPortfolioOtherFilterActive"
         class="w-full"

diff --git a/src/components/NFTPortfolio/SubscriptionForm.vue b/src/components/NFTPortfolio/SubscriptionForm.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-col items-center gap-[24px] text-medium-gray bg-shade-gray rounded-[24px] px-[32px] py-[24px]">
+  <CardV2
+    class="flex flex-col items-center gap-[24px] text-medium-gray"
+    :is-outline="true"
+  >
     <Label
       preset="h4"
       align="center"
@@ -88,7 +91,7 @@
       </Label>
       <p class="text-center underline text-[10px] text-medium-gray mt-[32px] cursor-pointer" @click="handleClickResend">{{ $t('portfolio_subscription_verify_sendAgain') }}</p>
     </Dialog>
-  </div>
+  </CardV2>
 </template>
 
 <script>