[TAS-185] ✨ Support free WNFT (#1261)

* ✨ Support free WNFT

* 💄 Use IconPrice for free collect

src/components/EventModal/Collect/MethodIcon.vue

@@ -1,6 +1,7 @@
 <template>
   <IconLike v-if="type === 'crypto'" />
   <IconCreditCard v-else-if="type === 'stripe'" />
+  <IconPrice v-else-if="type === 'free'" />
   <div v-else />
 </template>
 <script>

src/components/EventModal/Collect/index.vue

@@ -205,7 +205,19 @@
           align="center"
           :text="$t('nft_collect_modal_subtitle_select_collect_method')"
         />
-        <ul class="mt-[16px] flex flex-col gap-[16px] mx-auto max-w-[320px] w-full">
+        <ul v-if="isFreeNFT" class="mt-[16px] flex flex-col gap-[16px] mx-auto max-w-[320px] w-full">
+          <li >
+            <EventModalCollectMethodButton
+              :class="{ 'border-like-cyan': !mintedFreeNFT }"
+              :title="$t('nft_collect_modal_method_free')"
+              type="free"
+              :is-disabled="mintedFreeNFT"
+              :price="$t('nft_collect_modal_free')"
+              @click="handleSelectPaymentMethod"
+            />
+          </li>
+        </ul>
+        <ul v-else class="mt-[16px] flex flex-col gap-[16px] mx-auto max-w-[320px] w-full">
           <li v-if="enableStripe">
             <EventModalCollectMethodButton
               :class="{ 'border-like-cyan': canPayByFiat && !hasConnectedWallet }"
@@ -426,12 +438,21 @@ export default {
       return this.walletLIKEBalance < this.NFTPrice;
     },
     canPayByFiat() {
-      return this.formattedNFTPriceInUSD && this.formattedNFTPriceInUSD !== '-';
+      return this.nftPriceInUSD !== undefined && this.nftPriceInUSD > 0;
     },
     canPayByLIKE() {
       if (this.developerMode) return true;
       const notSupportedPlatforms = [];
-      return !notSupportedPlatforms.includes(this.walletMethodType);
+      return (
+        this.NFTPrice > 0 &&
+        !notSupportedPlatforms.includes(this.walletMethodType)
+      );
+    },
+    isFreeNFT() {
+      return this.NFTPrice !== undefined && this.NFTPrice === 0;
+    },
+    mintedFreeNFT() {
+      return this.purchaseInfo?.canFreeCollect === false;
     },
     isDisabledPayByLIKE() {
       return (
@@ -631,6 +652,29 @@ export default {
             );
             await this.collectNFTWithStripe(classId, { memo: this.memo });
             break;
+          case 'free': {
+            if (!this.getAddress) {
+              const isConnected = await this.connectWallet({
+                shouldSkipLogin: true,
+              });
+              if (!isConnected) return;
+            }
+            logTrackerEvent(
+              this,
+              'NFT',
+              'NFTCollectPaymentMethod(Free)',
+              classId,
+              1
+            );
+            const result = await this.collectFreeNFT(classId, {
+              memo: this.memo,
+            });
+            if (result) {
+              this.justCollectedNFTId =
+                result.nftId || result.purchased?.[0]?.nftId;
+            }
+            break;
+          }
           default:
             break;
         }

src/locales/en.json

@@ -301,9 +301,11 @@
   "nft_collect_modal_added_to_shopping_cart_description": "You added \"{nft}\" to backpack",
   "nft_collect_modal_alert_fail": "Collect {name} fail: {error}",
   "nft_collect_modal_alert_success": "{name} was collected successfully",
+  "nft_collect_modal_free": "Free",
   "nft_collect_modal_go_to_shopping_cart_button": "View backpack",
   "nft_collect_modal_leave_message": "Leave a signed message to creator",
   "nft_collect_modal_leave_message_to_name": "leave signed message to {name}",
+  "nft_collect_modal_method_free": "Collect for free",
   "nft_collect_modal_method_like": "Pay by LIKE",
   "nft_collect_modal_method_like_available_amount": "Available {amount}",
   "nft_collect_modal_method_like_purchase_like": "Not enough LIKE?",

src/locales/zh-Hant.json

@@ -291,9 +291,11 @@
   "nft_collect_modal_added_to_shopping_cart_description": "你已把《{nft}》加到背包",
   "nft_collect_modal_alert_fail": "收藏 {name} 失敗： {error}",
   "nft_collect_modal_alert_success": "{name} 已成功收藏",
+  "nft_collect_modal_free": "免費",
   "nft_collect_modal_go_to_shopping_cart_button": "前往背包",
   "nft_collect_modal_leave_message": "簽署留言給創作者",
   "nft_collect_modal_leave_message_to_name": "簽署留言給 {name}",
+  "nft_collect_modal_method_free": "免費收藏",
   "nft_collect_modal_method_like": "用 LIKE 購買",
   "nft_collect_modal_method_like_available_amount": "可用額 {amount}",
   "nft_collect_modal_method_like_purchase_like": "不夠 LIKE？",

src/mixins/nft.js

@@ -269,7 +269,7 @@ export default {
         : this.purchaseInfo.price;
     },
     nftIsCollectable() {
-      return this.NFTPrice && this.NFTPrice !== -1;
+      return this.NFTPrice !== undefined && this.NFTPrice !== -1;
     },
     formattedNFTPriceInLIKE() {
       return this.NFTPrice ? formatNumberWithLIKE(this.NFTPrice) : '-';
@@ -318,7 +318,7 @@ export default {
     },
     // For W.NFT
     nftBasePrice() {
-      return this.purchaseInfo.basePrice || 0;
+      return this.purchaseInfo.basePrice;
     },
 
     nftEditions() {
@@ -963,6 +963,47 @@ export default {
         console.error(error);
       }
     },
+    async collectFreeNFT(classId, { memo = '' }) {
+      logTrackerEvent(this, 'NFT', 'NFTCollectFreeNFT', classId, 1);
+      try {
+        this.uiSetTxStatus(TX_STATUS.PROCESSING);
+        const result = await this.$api.post(
+          postNFTPurchase({
+            wallet: this.getAddress,
+            classId,
+            ts: Date.now(),
+          }),
+          { memo }
+        );
+        logTrackerEvent(this, 'NFT', 'NFTCollectFreeNFTCompleted', classId, 1);
+        this.uiSetTxStatus(TX_STATUS.COMPLETED);
+        return result.data;
+      } catch (error) {
+        if (error.toString().includes('code 32')) {
+          const errorHandler = this.getErrorHandlerByCode(32);
+          this.handleError(errorHandler);
+          return undefined;
+        }
+        const errMsg = error.response?.data || error.toString();
+        this.uiSetTxError(errMsg);
+        if (this.uiTxTargetClassId === classId) {
+          this.uiSetTxStatus(TX_STATUS.FAILED);
+        } else {
+          this.alertPromptError(
+            this.$t('nft_collect_modal_alert_fail', {
+              name: this.NFTName,
+              error: errMsg,
+            })
+          );
+        }
+      } finally {
+        this.fetchCollectedNFTClassesByAddress(this.getAddress);
+        this.lazyFetchNFTClassAggregatedData();
+        this.updateNFTHistory({ getAllUserInfo: false });
+        this.walletFetchLIKEBalance();
+      }
+      return undefined;
+    },
     async transferNFT({
       toWallet,
       nftId = this.nftIdCollectedFirstByUser,

src/pages/shopping-cart.vue

@@ -263,6 +263,7 @@ export default {
 
         await this.$api.post(
           postNFTPurchase({
+            wallet: this.getAddress,
             txHash,
             classId: this.classIdList,
             ts: Date.now(),

src/util/api/index.js

@@ -232,11 +232,12 @@ export const getNFTEvents = ({
   )}`;
 };
 
-export const postNFTPurchase = ({ txHash, iscnId, classId, ts }) => {
+export const postNFTPurchase = ({ txHash, iscnId, classId, ts, wallet }) => {
   const qsPayload = {
     tx_hash: txHash,
     iscn_id: iscnId,
     class_id: classId,
+    wallet,
     ts,
   };
   return `${LIKECOIN_API_BASE}/likernft/purchase?${querystring.stringify(

src/util/nft.js

@@ -375,7 +375,7 @@ export function populateGrantEvent(onChainEvents, dbEventMap) {
         granterWallet,
         timestamp,
       } = dbEventMap.get(key);
-      if (grantTxHash && granterMemo) {
+      if (granterMemo) {
         const e = {
           classId,
           nftId,

src/util/ui.js

@@ -63,6 +63,7 @@ export function formatNumberWithUnit(num, unit, options = {}) {
 }
 
 export function formatNumberWithLIKE(num, options = {}) {
+  if (num === 0) return 'FREE';
   return formatNumberWithUnit(num, 'LIKE', options);
 }