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" >
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"
>