diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue index e50d4d542e..3ce92d9b14 100644 --- a/website/client/src/components/shops/buyModal.vue +++ b/website/client/src/components/shops/buyModal.vue @@ -825,20 +825,21 @@ export default { ) return; } - const shouldConfirmPurchase = this.item.currency === 'gems' || this.item.currency === 'hourglasses'; - if ( - shouldConfirmPurchase - && !this.confirmPurchase(this.item.currency, this.item.value * this.selectedAmountToBuy) - ) { - return; - } - if (this.item.purchaseType === 'customization') { await this.unlock(this.item.path); this.sync(); - } else if (this.genericPurchase) { - this.makeGenericPurchase(this.item, 'buyModal', this.selectedAmountToBuy); - this.purchased(this.item.text); + } else { + const shouldConfirmPurchase = this.item.currency === 'gems' || this.item.currency === 'hourglasses'; + if ( + shouldConfirmPurchase + && !this.confirmPurchase(this.item.currency, this.item.value * this.selectedAmountToBuy) + ) { + return; + } + if (this.genericPurchase) { + this.makeGenericPurchase(this.item, 'buyModal', this.selectedAmountToBuy); + this.purchased(this.item.text); + } } this.$emit('buyPressed', this.item); diff --git a/website/client/src/components/shops/customizations/index.vue b/website/client/src/components/shops/customizations/index.vue index 1c7bfc57aa..d90fb58a40 100644 --- a/website/client/src/components/shops/customizations/index.vue +++ b/website/client/src/components/shops/customizations/index.vue @@ -55,6 +55,8 @@ :item-width="94" :item-margin="24" :max-items-per-row="8" + :no-items-label="emptyStateString(category.identifier)" + @emptyClick="emptyClick(category.identifier, $event)" > !searchBy || item.text.toLowerCase().includes(searchBy)); }, + emptyClick (identifier, event) { + if (event.target.tagName !== 'A') return; + this.$store.state.avatarEditorOptions.editingUser = true; + switch (identifier) { + case 'animalEars': + this.$store.state.avatarEditorOptions.startingPage = 'extra'; + this.$store.state.avatarEditorOptions.subpage = 'ears'; + break; + case 'animalTails': + this.$store.state.avatarEditorOptions.startingPage = 'extra'; + this.$store.state.avatarEditorOptions.subpage = 'tails'; + break; + case 'background': + this.$store.state.avatarEditorOptions.startingPage = 'background'; + this.$store.state.avatarEditorOptions.subpage = '2024'; + break; + case 'facialHair': + this.$store.state.avatarEditorOptions.startingPage = 'hair'; + this.$store.state.avatarEditorOptions.subpage = 'beard'; + break; + case 'hairColors': + this.$store.state.avatarEditorOptions.startingPage = 'hair'; + this.$store.state.avatarEditorOptions.subpage = 'color'; + break; + case 'hairStyles': + this.$store.state.avatarEditorOptions.startingPage = 'hair'; + this.$store.state.avatarEditorOptions.subpage = 'style'; + break; + case 'shirts': + this.$store.state.avatarEditorOptions.startingPage = 'body'; + this.$store.state.avatarEditorOptions.subpage = 'shirt'; + break; + case 'skins': + this.$store.state.avatarEditorOptions.startingPage = 'skin'; + this.$store.state.avatarEditorOptions.subpage = 'color'; + break; + default: + throw new Error(`Unknown identifier ${identifier}`); + } + this.$root.$emit('bv::show::modal', 'avatar-modal'); + }, + emptyStateString (identifier) { + const { $t } = this; + switch (identifier) { + case 'animalEars': + return $t('allCustomizationsOwned'); + case 'animalTails': + return $t('allCustomizationsOwned'); + case 'background': + return `${$t('allCustomizationsOwned')} ${$t('checkNextMonth')}`; + case 'facialHair': + return $t('allCustomizationsOwned'); + case 'hairColors': + return `${$t('allCustomizationsOwned')} ${$t('checkNextSeason')}`; + case 'hairStyles': + return $t('allCustomizationsOwned'); + case 'shirts': + return $t('allCustomizationsOwned'); + case 'skins': + return `${$t('allCustomizationsOwned')} ${$t('checkNextSeason')}`; + default: + return `Unknown identifier ${identifier}`; + } + }, selectItem (item) { this.$root.$emit('buyModal::showItem', item); }, diff --git a/website/client/src/components/ui/itemRows.vue b/website/client/src/components/ui/itemRows.vue index 52d850ab14..78431f74c0 100644 --- a/website/client/src/components/ui/itemRows.vue +++ b/website/client/src/components/ui/itemRows.vue @@ -13,8 +13,11 @@
- {{ noItemsLabel }} +