From c2eae81055d9cfde2d202d1391615b22b751a7ed Mon Sep 17 00:00:00 2001 From: "Ng Wing Tat, David" Date: Tue, 26 Nov 2024 15:36:04 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20gifting=20edition=20select?= =?UTF-8?q?ion=20(#1968)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 🐛 Fix gifting edition selection * 🥅 Disable gifting for physical book --- src/components/NFTBook/GiftDialog.vue | 36 ++++++++---- src/components/NFTEditionSelect.vue | 15 +++-- src/components/NFTEditionSelectItemV2.vue | 14 ++++- src/pages/nft/class/_classId/index.vue | 58 ++++++++++++------- .../nft/collection/_collectionId/index.vue | 4 +- 5 files changed, 84 insertions(+), 43 deletions(-) diff --git a/src/components/NFTBook/GiftDialog.vue b/src/components/NFTBook/GiftDialog.vue index 7c134f86f..efa1532d0 100644 --- a/src/components/NFTBook/GiftDialog.vue +++ b/src/components/NFTBook/GiftDialog.vue @@ -25,6 +25,7 @@ :stock="item.stock" :is-selected="item.value === selectedValue" :current-price="item.price" + :is-disabled="item.isPhysicalOnly" :default-price="item.defaultPrice" preset="dialog" @click="handleClickPriceSelectItem(item)" @@ -136,24 +137,36 @@ export default { }, }, data() { - // NOTE: If the selected item is out of stock, select another item. - let selectedItem = this.items.find(item => item.value === this.value); - if (!selectedItem || selectedItem.stock <= 0) { - selectedItem = this.items.find( - item => - selectedItem && item.index !== selectedItem.index && item.stock > 0 - ); - } - return { fromName: this.prefillGiftInfo?.fromName, toName: this.prefillGiftInfo?.toName, toEmail: this.prefillGiftInfo?.toEmail, message: this.prefillGiftInfo?.message, - selectedValue: selectedItem?.value || this.value, + selectedValue: this.value, }; }, watch: { + open(open) { + if (open) { + // NOTE: If the selected item is out of stock or is physical only, select another item. + let selectedItem = this.items.find(item => item.value === this.value); + if ( + !selectedItem || + selectedItem.stock <= 0 || + selectedItem.isPhysicalOnly + ) { + selectedItem = this.items.find( + item => + item.index !== selectedItem.index && + !item.isPhysicalOnly && + item.stock > 0 + ); + this.selectedValue = selectedItem?.value ?? this.value; + } else { + this.selectedValue = this.value; + } + } + }, prefillGiftInfo: { handler(newVal) { this.fromName = newVal.fromName; @@ -167,6 +180,7 @@ export default { methods: { submitGiftInfo() { this.$emit('submit', { + selectedValue: this.selectedValue, giftInfo: { fromName: this.fromName, toName: this.toName, @@ -178,8 +192,6 @@ export default { handleClickPriceSelectItem({ value }) { 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..7eb69864e 100644 --- a/src/components/NFTEditionSelect.vue +++ b/src/components/NFTEditionSelect.vue @@ -86,16 +86,15 @@ export default { }, data() { // NOTE: If the selected item is out of stock, select another item. - const items = [...this.items]; - let selectedItem = items.find(item => item.value === this.value); + let selectedItem = this.items.find(item => item.value === this.value); if (!selectedItem || selectedItem.stock <= 0) { - selectedItem = items.find( + selectedItem = this.items.find( item => selectedItem && item.index !== selectedItem.index && item.stock > 0 ); } return { - selectedValue: selectedItem?.value || this.value, + selectedValue: selectedItem?.value ?? this.value, }; }, computed: { @@ -109,9 +108,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 +123,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/components/NFTEditionSelectItemV2.vue b/src/components/NFTEditionSelectItemV2.vue index e8c0c0ea0..e99b64517 100644 --- a/src/components/NFTEditionSelectItemV2.vue +++ b/src/components/NFTEditionSelectItemV2.vue @@ -14,8 +14,9 @@ : 'ring-[1px] ring-shade-gray hover:ring-[#d1d1d1] transition-all duration-75', 'flex items-center justify-between gap-[16px]', 'min-h-[82px]', + { 'pointer-events-none opacity-50': isDisabled }, ]" - @click="$emit('click', $event)" + @click="handleClick" >
@@ -97,6 +98,10 @@ export default { type: String, default: PRESET_TYPE.PRIMARY, }, + isDisabled: { + type: Boolean, + default: false, + }, }, computed: { isInStock() { @@ -147,5 +152,12 @@ export default { }; }, }, + methods: { + handleClick(event) { + if (!this.isDisabled) { + this.$emit('click', event); + } + }, + }, }; diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue index c97df56f9..4787bfee0 100644 --- a/src/pages/nft/class/_classId/index.vue +++ b/src/pages/nft/class/_classId/index.vue @@ -56,10 +56,16 @@

item.stock === 0 || item.priceLabel === undefined ); }, + isGiftingDisabled() { + return ( + this.isAllSoldOut || + this.nftEditions.find(item => item.value === this.selectedValue) + ?.isPhysicalOnly + ); + }, compareButtonText() { return this.$t( this.nftEditions?.length === 1 @@ -1147,7 +1167,7 @@ export default { ); if (this.nftIsNFTBook) { - this.checkTippingAvailability(this.defaultSelectedValue); + this.checkTippingAvailability(this.selectedValue); return; } @@ -1462,7 +1482,7 @@ export default { ); this.checkTippingAvailability(selectedValue); }, - async handleGiftSubmit({ giftInfo }) { + async handleGiftSubmit({ giftInfo, selectedValue }) { logTrackerEvent( this, 'NFT', @@ -1470,11 +1490,10 @@ export default { this.classId, 1 ); - await this.handleCollectFromEdition(this.giftSelectedValue, giftInfo); + await this.handleCollectFromEdition(selectedValue, giftInfo); this.isGiftDialogOpen = false; }, - handleGiftFromEditionSelector() { - this.giftSelectedValue = this.selectedValue; + handleGiftButtonClick() { this.isGiftDialogOpen = true; logTrackerEvent( this, @@ -1510,14 +1529,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" >