feat(event): 10th Birthday Bash
with @CuriousMagpie and @phillipthelen
This commit is contained in:
SabreCat
@@ -198,52 +198,79 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!filterBackgrounds"
|
||||
class="row text-center title-row"
|
||||
>
|
||||
<strong>{{ backgroundShopSets[1].text }}</strong>
|
||||
</div>
|
||||
<div
|
||||
v-if="!filterBackgrounds"
|
||||
class="row title-row"
|
||||
v-if="!filterBackgrounds && user.purchased.background.birthday_bash"
|
||||
>
|
||||
<div
|
||||
v-for="bg in backgroundShopSets[1].items"
|
||||
:key="bg.key"
|
||||
class="col-4 text-center customize-option background-button"
|
||||
:popover-title="bg.text"
|
||||
:popover="bg.notes"
|
||||
popover-trigger="mouseenter"
|
||||
@click="!user.purchased.background[bg.key]
|
||||
? backgroundSelected(bg) : unlock('background.' + bg.key)"
|
||||
class="row text-center title-row"
|
||||
>
|
||||
<strong>{{ backgroundShopSets[2].text }}</strong>
|
||||
</div>
|
||||
<div
|
||||
class="row title-row"
|
||||
>
|
||||
<div
|
||||
class="background"
|
||||
:class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
|
||||
></div>
|
||||
<i
|
||||
v-if="!user.purchased.background[bg.key]"
|
||||
class="glyphicon glyphicon-lock"
|
||||
></i>
|
||||
<div
|
||||
v-if="!user.purchased.background[bg.key]"
|
||||
class="purchase-background single d-flex align-items-center justify-content-center"
|
||||
v-for="bg in backgroundShopSets[2].items"
|
||||
:key="bg.key"
|
||||
class="col-4 text-center customize-option background-button"
|
||||
:popover-title="bg.text"
|
||||
:popover="bg.notes"
|
||||
popover-trigger="mouseenter"
|
||||
@click="unlock('background.' + bg.key)"
|
||||
>
|
||||
<div
|
||||
class="svg-icon hourglass"
|
||||
v-html="icons.hourglass"
|
||||
class="background"
|
||||
:class="`background_${bg.key}`"
|
||||
></div>
|
||||
<span class="price">1</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="!user.purchased.background[bg.key]"
|
||||
class="badge-top"
|
||||
@click.stop.prevent="togglePinned(bg)"
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!filterBackgrounds">
|
||||
<div
|
||||
class="row text-center title-row"
|
||||
>
|
||||
<strong>{{ backgroundShopSets[1].text }}</strong>
|
||||
</div>
|
||||
<div
|
||||
class="row title-row"
|
||||
>
|
||||
<div
|
||||
v-for="bg in backgroundShopSets[1].items"
|
||||
:key="bg.key"
|
||||
class="col-4 text-center customize-option background-button"
|
||||
:popover-title="bg.text"
|
||||
:popover="bg.notes"
|
||||
popover-trigger="mouseenter"
|
||||
@click="!user.purchased.background[bg.key]
|
||||
? backgroundSelected(bg) : unlock('background.' + bg.key)"
|
||||
>
|
||||
<pin-badge
|
||||
:pinned="isBackgroundPinned(bg)"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="background"
|
||||
:class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
|
||||
></div>
|
||||
<i
|
||||
v-if="!user.purchased.background[bg.key]"
|
||||
class="glyphicon glyphicon-lock"
|
||||
></i>
|
||||
<div
|
||||
v-if="!user.purchased.background[bg.key]"
|
||||
class="purchase-background single d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<div
|
||||
class="svg-icon hourglass"
|
||||
v-html="icons.hourglass"
|
||||
></div>
|
||||
<span class="price">1</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="!user.purchased.background[bg.key]"
|
||||
class="badge-top"
|
||||
@click.stop.prevent="togglePinned(bg)"
|
||||
>
|
||||
<pin-badge
|
||||
:pinned="isBackgroundPinned(bg)"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<sub-menu
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<base-banner
|
||||
banner-id="birthday-banner"
|
||||
class="birthday-banner"
|
||||
:show="showBirthdayBanner"
|
||||
height="3rem"
|
||||
:can-close="false"
|
||||
>
|
||||
<div
|
||||
slot="content"
|
||||
:aria-label="$t('celebrateBirthday')"
|
||||
class="content d-flex justify-content-around align-items-center ml-auto mr-auto"
|
||||
@click="showBirthdayModal"
|
||||
>
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-gifts left-gift"
|
||||
v-html="icons.giftsBirthday"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-ten-birthday"
|
||||
v-html="icons.tenBirthday"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-once
|
||||
class="announce-text"
|
||||
v-html="$t('celebrateBirthday')"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-gifts right-gift"
|
||||
v-html="icons.giftsBirthday"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</base-banner>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.announce-text {
|
||||
color: $purple-50;
|
||||
}
|
||||
|
||||
.birthday-banner {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
padding: 8px;
|
||||
background-image: linear-gradient(90deg,
|
||||
rgba(255,190,93,0) 0%,
|
||||
rgba(255,190,93,1) 25%,
|
||||
rgba(255,190,93,1) 75%,
|
||||
rgba(255,190,93,0) 100%),
|
||||
url('~@/assets/images/glitter.png');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.left-gift {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.right-gift {
|
||||
margin: auto auto auto 8px;
|
||||
filter: flipH;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.svg-gifts {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.svg-ten-birthday {
|
||||
width: 192.5px;
|
||||
margin-left: 8px;
|
||||
margin-right: 8.5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import find from 'lodash/find';
|
||||
import { mapState } from '@/libs/store';
|
||||
import BaseBanner from './base';
|
||||
|
||||
import giftsBirthday from '@/assets/svg/gifts-birthday.svg';
|
||||
import tenBirthday from '@/assets/svg/10th-birthday-linear.svg';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BaseBanner,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
giftsBirthday,
|
||||
tenBirthday,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
currentEventList: 'worldState.data.currentEventList',
|
||||
}),
|
||||
showBirthdayBanner () {
|
||||
return Boolean(find(this.currentEventList, event => Boolean(event.event === 'birthday10')));
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showBirthdayModal () {
|
||||
this.$root.$emit('bv::show::modal', 'birthday-modal');
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<base-notification
|
||||
:can-remove="canRemove"
|
||||
:has-icon="true"
|
||||
:notification="notification"
|
||||
:read-after-click="true"
|
||||
@click="action"
|
||||
>
|
||||
<div
|
||||
slot="content"
|
||||
>
|
||||
<strong> {{ notification.data.title }} </strong>
|
||||
<span> {{ notification.data.text }} </span>
|
||||
</div>
|
||||
<div
|
||||
slot="icon"
|
||||
class="mt-3"
|
||||
:class="notification.data.icon"
|
||||
></div>
|
||||
</base-notification>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseNotification from './base';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BaseNotification,
|
||||
},
|
||||
props: {
|
||||
notification: {
|
||||
type: Object,
|
||||
default (data) {
|
||||
return data;
|
||||
},
|
||||
},
|
||||
canRemove: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
action () {
|
||||
if (!this.notification || !this.notification.data) {
|
||||
return;
|
||||
}
|
||||
if (this.notification.data.destination === 'backgrounds') {
|
||||
this.$store.state.avatarEditorOptions.editingUser = true;
|
||||
this.$store.state.avatarEditorOptions.startingPage = 'backgrounds';
|
||||
this.$store.state.avatarEditorOptions.subpage = '2023';
|
||||
this.$root.$emit('bv::show::modal', 'avatar-modal');
|
||||
} else {
|
||||
this.$router.push({ name: this.notification.data.destination || 'items' });
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -123,23 +123,24 @@ import successImage from '@/assets/svg/success.svg';
|
||||
import starBadge from '@/assets/svg/star-badge.svg';
|
||||
|
||||
// Notifications
|
||||
import NEW_STUFF from './notifications/newStuff';
|
||||
import GROUP_TASK_NEEDS_WORK from './notifications/groupTaskNeedsWork';
|
||||
import GUILD_INVITATION from './notifications/guildInvitation';
|
||||
import PARTY_INVITATION from './notifications/partyInvitation';
|
||||
import CARD_RECEIVED from './notifications/cardReceived';
|
||||
import CHALLENGE_INVITATION from './notifications/challengeInvitation';
|
||||
import QUEST_INVITATION from './notifications/questInvitation';
|
||||
import GIFT_ONE_GET_ONE from './notifications/g1g1';
|
||||
import GROUP_TASK_ASSIGNED from './notifications/groupTaskAssigned';
|
||||
import GROUP_TASK_CLAIMED from './notifications/groupTaskClaimed';
|
||||
import UNALLOCATED_STATS_POINTS from './notifications/unallocatedStatsPoints';
|
||||
import NEW_MYSTERY_ITEMS from './notifications/newMysteryItems';
|
||||
import CARD_RECEIVED from './notifications/cardReceived';
|
||||
import NEW_INBOX_MESSAGE from './notifications/newPrivateMessage';
|
||||
import GROUP_TASK_NEEDS_WORK from './notifications/groupTaskNeedsWork';
|
||||
import GUILD_INVITATION from './notifications/guildInvitation';
|
||||
import ITEM_RECEIVED from './notifications/itemReceived';
|
||||
import NEW_CHAT_MESSAGE from './notifications/newChatMessage';
|
||||
import WORLD_BOSS from './notifications/worldBoss';
|
||||
import VERIFY_USERNAME from './notifications/verifyUsername';
|
||||
import NEW_INBOX_MESSAGE from './notifications/newPrivateMessage';
|
||||
import NEW_MYSTERY_ITEMS from './notifications/newMysteryItems';
|
||||
import NEW_STUFF from './notifications/newStuff';
|
||||
import ONBOARDING_COMPLETE from './notifications/onboardingComplete';
|
||||
import GIFT_ONE_GET_ONE from './notifications/g1g1';
|
||||
import PARTY_INVITATION from './notifications/partyInvitation';
|
||||
import QUEST_INVITATION from './notifications/questInvitation';
|
||||
import UNALLOCATED_STATS_POINTS from './notifications/unallocatedStatsPoints';
|
||||
import VERIFY_USERNAME from './notifications/verifyUsername';
|
||||
import WORLD_BOSS from './notifications/worldBoss';
|
||||
import OnboardingGuide from './onboardingGuide';
|
||||
|
||||
export default {
|
||||
@@ -147,24 +148,25 @@ export default {
|
||||
MenuDropdown,
|
||||
MessageCount,
|
||||
// One component for each type
|
||||
NEW_STUFF,
|
||||
GROUP_TASK_NEEDS_WORK,
|
||||
GUILD_INVITATION,
|
||||
PARTY_INVITATION,
|
||||
CARD_RECEIVED,
|
||||
CHALLENGE_INVITATION,
|
||||
QUEST_INVITATION,
|
||||
GIFT_ONE_GET_ONE,
|
||||
GROUP_TASK_ASSIGNED,
|
||||
GROUP_TASK_CLAIMED,
|
||||
UNALLOCATED_STATS_POINTS,
|
||||
NEW_MYSTERY_ITEMS,
|
||||
CARD_RECEIVED,
|
||||
NEW_INBOX_MESSAGE,
|
||||
GROUP_TASK_NEEDS_WORK,
|
||||
GUILD_INVITATION,
|
||||
ITEM_RECEIVED,
|
||||
NEW_CHAT_MESSAGE,
|
||||
WorldBoss: WORLD_BOSS,
|
||||
VERIFY_USERNAME,
|
||||
OnboardingGuide,
|
||||
NEW_INBOX_MESSAGE,
|
||||
NEW_MYSTERY_ITEMS,
|
||||
NEW_STUFF,
|
||||
ONBOARDING_COMPLETE,
|
||||
GIFT_ONE_GET_ONE,
|
||||
PARTY_INVITATION,
|
||||
QUEST_INVITATION,
|
||||
UNALLOCATED_STATS_POINTS,
|
||||
VERIFY_USERNAME,
|
||||
WorldBoss: WORLD_BOSS,
|
||||
OnboardingGuide,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -185,6 +187,7 @@ export default {
|
||||
// NOTE: Those not listed here won't be shown in the notification panel!
|
||||
handledNotifications: [
|
||||
'NEW_STUFF',
|
||||
'ITEM_RECEIVED',
|
||||
'GIFT_ONE_GET_ONE',
|
||||
'GROUP_TASK_NEEDS_WORK',
|
||||
'GUILD_INVITATION',
|
||||
|
||||
@@ -0,0 +1,877 @@
|
||||
<template>
|
||||
<b-modal
|
||||
id="birthday-modal"
|
||||
:hide-header="true"
|
||||
:hide-footer="true"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<div
|
||||
class="modal-close"
|
||||
@click="close()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon svg-close"
|
||||
v-html="icons.close"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="svg-confetti svg-icon"
|
||||
v-html="icons.confetti"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="~@/assets/images/10-birthday.png"
|
||||
class="ten-birthday"
|
||||
>
|
||||
</div>
|
||||
<div class="limited-wrapper">
|
||||
<div
|
||||
class="svg-gifts svg-icon"
|
||||
v-html="icons.gifts"
|
||||
>
|
||||
</div>
|
||||
<div class="limited-event">
|
||||
{{ $t('limitedEvent') }}
|
||||
</div>
|
||||
<div class="dates">
|
||||
{{ $t('limitedDates') }}
|
||||
</div>
|
||||
<div
|
||||
class="svg-gifts-flip svg-icon"
|
||||
v-html="icons.gifts"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="celebrate d-flex justify-content-center">
|
||||
{{ $t('celebrateAnniversary') }}
|
||||
</div>
|
||||
<h2 class="d-flex justify-content-center">
|
||||
<span
|
||||
class="left-divider"
|
||||
v-html="icons.divider"
|
||||
></span>
|
||||
<span
|
||||
class="svg-cross"
|
||||
v-html="icons.cross"
|
||||
>
|
||||
</span>
|
||||
{{ $t('jubilantGryphatrice') }}
|
||||
<span
|
||||
class="svg-cross"
|
||||
v-html="icons.cross"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
class="right-divider"
|
||||
></span>
|
||||
</h2>
|
||||
<!-- gryphatrice info -->
|
||||
<div class="d-flex">
|
||||
<div class="jubilant-gryphatrice d-flex mr-auto">
|
||||
<img
|
||||
src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Gryphatrice-Jubilant-Large.gif"
|
||||
width="156px"
|
||||
height="144px"
|
||||
alt="a pink, purple, and green gryphatrice pet winks at you adorably"
|
||||
>
|
||||
</div>
|
||||
<div class="align-items-center">
|
||||
<div class="limited-edition mr-auto">
|
||||
{{ $t('limitedEdition') }}
|
||||
</div>
|
||||
<div class="gryphatrice-text">
|
||||
{{ $t('anniversaryGryphatriceText') }}
|
||||
</div>
|
||||
<div
|
||||
class="gryphatrice-price"
|
||||
v-html="$t('anniversaryGryphatricePrice')"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- beginning of payments -->
|
||||
<!-- buy with money OR gems -->
|
||||
<div
|
||||
v-if="!ownGryphatrice && !gryphBought"
|
||||
>
|
||||
<div
|
||||
v-if="selectedPage !== 'payment-buttons'"
|
||||
id="initial-buttons"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<button
|
||||
class="btn btn-secondary buy-now-left"
|
||||
:class="{active: selectedPage === 'payment-buttons'}"
|
||||
@click="selectedPage = 'payment-buttons'"
|
||||
>
|
||||
{{ $t('buyNowMoneyButton') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary buy-now-right"
|
||||
@click="buyGryphatriceGems()"
|
||||
>
|
||||
{{ $t('buyNowGemsButton') }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- buy with money -->
|
||||
<div
|
||||
v-else-if="selectedPage === 'payment-buttons'"
|
||||
id="payment-buttons"
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<button
|
||||
class="btn btn-secondary d-flex stripe"
|
||||
@click="redirectToStripe({ sku: 'price_0MPZ6iZCD0RifGXlLah2furv' })"
|
||||
>
|
||||
<span
|
||||
class="svg-stripe"
|
||||
v-html="icons.stripe"
|
||||
>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary d-flex paypal"
|
||||
@click="openPaypal({
|
||||
url: paypalCheckoutLink, type: 'sku', sku: 'Pet-Gryphatrice-Jubilant'
|
||||
})"
|
||||
>
|
||||
<span
|
||||
class="svg-paypal"
|
||||
v-html="icons.paypal"
|
||||
>
|
||||
</span>
|
||||
</button>
|
||||
<amazon-button
|
||||
:disabled="disabled"
|
||||
:amazon-data="amazonData"
|
||||
class="btn btn-secondary d-flex amazon"
|
||||
v-html="icons.amazon"
|
||||
/>
|
||||
<div
|
||||
class="pay-with-gems"
|
||||
@click="selectedPage = 'initial-buttons'"
|
||||
>
|
||||
{{ $t('wantToPayWithGemsText') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Own the gryphatrice -->
|
||||
<div
|
||||
v-else
|
||||
class="d-flex"
|
||||
>
|
||||
<button
|
||||
class="own-gryphatrice-button"
|
||||
@click="closeAndRedirect('/inventory/stable')"
|
||||
v-html="$t('ownJubilantGryphatrice')"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<!-- end of payments -->
|
||||
<h2 class="d-flex justify-content-center">
|
||||
<span
|
||||
class="left-divider"
|
||||
v-html="icons.divider"
|
||||
></span>
|
||||
<span
|
||||
class="svg-cross"
|
||||
v-html="icons.cross"
|
||||
>
|
||||
</span>
|
||||
{{ $t('plentyOfPotions') }}
|
||||
<span
|
||||
class="svg-cross"
|
||||
v-html="icons.cross"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
class="right-divider"
|
||||
></span>
|
||||
</h2>
|
||||
<div class="plenty-of-potions d-flex">
|
||||
{{ $t('plentyOfPotionsText') }}
|
||||
</div>
|
||||
<div class="potions">
|
||||
<div class="pot-1">
|
||||
<img src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_Porcelain.png">
|
||||
</div>
|
||||
<div class="pot-2">
|
||||
<img src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_Vampire.png">
|
||||
</div>
|
||||
<div class="pot-3">
|
||||
<img src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_Aquatic.png">
|
||||
</div>
|
||||
<div class="pot-4">
|
||||
<img src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_StainedGlass.png">
|
||||
</div>
|
||||
<div class="pot-5">
|
||||
<img src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_Celestial.png">
|
||||
</div>
|
||||
<div class="pot-6">
|
||||
<img src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_Glow.png">
|
||||
</div>
|
||||
<div class="pot-7">
|
||||
<img src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_AutumnLeaf.png">
|
||||
</div>
|
||||
<div class="pot-8">
|
||||
<img src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_SandSculpture.png">
|
||||
</div>
|
||||
<div class="pot-9">
|
||||
<img src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_Peppermint.png">
|
||||
</div>
|
||||
<div class="pot-10">
|
||||
<img src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_Shimmer.png">
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-secondary d-flex justify-content-center visit-the-market"
|
||||
@click="closeAndRedirect('/shops/market')"
|
||||
>
|
||||
{{ $t('visitTheMarketButton') }}
|
||||
</button>
|
||||
<h2 class="d-flex justify-content-center">
|
||||
<span
|
||||
class="left-divider"
|
||||
v-html="icons.divider"
|
||||
></span>
|
||||
<span
|
||||
class="svg-cross"
|
||||
v-html="icons.cross"
|
||||
>
|
||||
</span>
|
||||
{{ $t('fourForFree') }}
|
||||
<span
|
||||
class="svg-cross"
|
||||
v-html="icons.cross"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
class="right-divider"
|
||||
></span>
|
||||
</h2>
|
||||
<div class="four-for-free">
|
||||
{{ $t('fourForFreeText') }}
|
||||
</div>
|
||||
<div class="four-grid d-flex justify-content-center">
|
||||
<div class="day-one-a">
|
||||
<div class="day-text">
|
||||
{{ $t('dayOne') }}
|
||||
</div>
|
||||
<div class="gift d-flex justify-content-center align-items-middle">
|
||||
<img
|
||||
src="~@/assets/images/robes.webp"
|
||||
class="m-auto"
|
||||
width="40px"
|
||||
height="66px"
|
||||
>
|
||||
</div>
|
||||
<div class="description">
|
||||
{{ $t('partyRobes') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="day-one-b">
|
||||
<div class="day-text">
|
||||
{{ $t('dayOne') }}
|
||||
</div>
|
||||
<div class="gift d-flex justify-content-center align-items-middle">
|
||||
<div
|
||||
class="svg-gem svg-icon m-auto"
|
||||
v-html="icons.birthdayGems"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
{{ $t('twentyGems') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="day-five">
|
||||
<div class="day-text">
|
||||
{{ $t('dayFive') }}
|
||||
</div>
|
||||
<div class="gift d-flex justify-content-center align-items-middle">
|
||||
<img
|
||||
src="~@/assets/images/habitica-hero-goober.webp"
|
||||
class="m-auto"
|
||||
><!-- Birthday Set -->
|
||||
</div>
|
||||
<div class="description">
|
||||
{{ $t('birthdaySet') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="day-ten">
|
||||
<div class="day-text">
|
||||
{{ $t('dayTen') }}
|
||||
</div>
|
||||
<div class="gift d-flex justify-content-center align-items-middle">
|
||||
<div
|
||||
class="svg-background svg-icon m-auto"
|
||||
v-html="icons.birthdayBackground"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
{{ $t('background') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-bottom">
|
||||
<div class="limitations d-flex justify-content-center">
|
||||
{{ $t('limitations') }}
|
||||
</div>
|
||||
<div class="fine-print">
|
||||
{{ $t('anniversaryLimitations') }}
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#birthday-modal {
|
||||
.modal-body {
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
.modal-content {
|
||||
border-radius: 14px;
|
||||
border: 0px;
|
||||
}
|
||||
.modal-footer {
|
||||
border-radius: 14px;
|
||||
border: 0px;
|
||||
}
|
||||
.amazon {
|
||||
margin-bottom: 16px;
|
||||
|
||||
svg {
|
||||
width: 84px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.amazonpay-button-inner-image {
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
@import '~@/assets/scss/mixins.scss';
|
||||
|
||||
#birthday-modal {
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
color: $white;
|
||||
column-gap: 0.5rem;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.modal-body{
|
||||
box-shadow: 0 14px 28px 0 rgba(26, 24, 29, 0.24), 0 10px 10px 0 rgba(26, 24, 29, 0.28);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 566px;
|
||||
padding: 32px 24px 24px;
|
||||
background: linear-gradient(158deg,#6133b4,#4f2a93);
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
.modal-bottom {
|
||||
width: 566px;
|
||||
background-color: $purple-50;
|
||||
color: $purple-500;
|
||||
line-height: 1.33;
|
||||
border-top: 0px;
|
||||
padding: 16px 40px 28px 40px;
|
||||
border-bottom-left-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
}
|
||||
.limitations {
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
line-height: 1.71;
|
||||
margin-top: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
.fine-print {
|
||||
font-size: 0.75rem;
|
||||
color: $purple-500;
|
||||
line-height: 1.33;
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ten-birthday {
|
||||
position: relative;
|
||||
width: 268px;
|
||||
height: 244px;
|
||||
margin: 0 125px 16px;
|
||||
}
|
||||
|
||||
.limited-event {
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
letter-spacing: 2.4px;
|
||||
margin-top: -8px;
|
||||
color: $yellow-50;
|
||||
}
|
||||
|
||||
.dates {
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.71;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.celebrate {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
margin: 16px 16px 24px 16px;
|
||||
text-align: center;
|
||||
color: $yellow-50;
|
||||
}
|
||||
|
||||
.jubilant-gryphatrice {
|
||||
height: 176px;
|
||||
width: 204px;
|
||||
border-radius: 12px;
|
||||
background-color: $purple-50;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24px;
|
||||
margin-left: 4px;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.limited-wrapper {
|
||||
margin-top: -36px;
|
||||
margin-bottom: -36px;
|
||||
}
|
||||
|
||||
.limited-edition, .gryphatrice-text, .gryphatrice-price {
|
||||
max-width: 274px;
|
||||
}
|
||||
|
||||
.limited-edition {
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
line-height:1.33;
|
||||
letter-spacing:2.4px;
|
||||
padding-top: 18px;
|
||||
margin-left: 24px;
|
||||
margin-bottom: 8px;
|
||||
color: $yellow-50;
|
||||
}
|
||||
|
||||
.gryphatrice-text, .gryphatrice-price {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.71;
|
||||
margin-left: 24px;
|
||||
margin-right: 4px;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.gryphatrice-price {
|
||||
padding-top: 16px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.buy-now-left {
|
||||
width: 243px;
|
||||
margin: 24px 8px 24px 0px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
|
||||
}
|
||||
|
||||
.buy-now-right {
|
||||
width: 243px;
|
||||
margin: 24px 0px 24px 8px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
|
||||
}
|
||||
|
||||
.stripe {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.paypal {
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.stripe, .paypal, .amazon {
|
||||
width: 506px;
|
||||
height: 32px;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-radius: 4px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pay-with-gems {
|
||||
color: $white;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pay-with-gems:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.own-gryphatrice-button {
|
||||
width: 506px;
|
||||
height: 32px;
|
||||
margin: 24px 4px;
|
||||
border-radius: 4px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: $green-100;
|
||||
background-color: $green-100;
|
||||
color: $green-1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.plenty-of-potions {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.71;
|
||||
margin: 0 8px 24px;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.potions {
|
||||
display: grid;
|
||||
grid-template-columns: 5;
|
||||
grid-template-rows: 2;
|
||||
gap: 24px 24px;
|
||||
justify-content: center;
|
||||
|
||||
.pot-1, .pot-2, .pot-3, .pot-4, .pot-5,
|
||||
.pot-6, .pot-7, .pot-8, .pot-9, .pot-10 {
|
||||
height: 68px;
|
||||
width: 68px;
|
||||
border-radius: 8px;
|
||||
background-color: $purple-50;
|
||||
}
|
||||
|
||||
.pot-1 {
|
||||
grid-column: 1 / 1;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
.pot-2 {
|
||||
grid-column: 2 / 2;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
.pot-3 {
|
||||
grid-column: 3 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
.pot-4 {
|
||||
grid-column: 4 / 4;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
.pot-5 {
|
||||
grid-column: 5 / 5;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
.pot-6 {
|
||||
grid-column: 1 / 5;
|
||||
grid-row: 2 / 2;
|
||||
}
|
||||
.pot-7 {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 2;
|
||||
}
|
||||
.pot-8 {
|
||||
grid-column: 3 / 5;
|
||||
grid-row: 2 / 2;
|
||||
}
|
||||
.pot-9 {
|
||||
grid-column: 4 / 5;
|
||||
grid-row: 2 / 2;
|
||||
}
|
||||
.pot-10 {
|
||||
grid-column: 5 / 5;
|
||||
grid-row: 2 / 2;
|
||||
}
|
||||
|
||||
}
|
||||
.visit-the-market {
|
||||
height: 32px;
|
||||
margin: 24px 4px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.four-for-free {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.71;
|
||||
margin: 0 36px 24px;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.four-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 4;
|
||||
grid-template-rows: 1;
|
||||
gap: 24px;
|
||||
}
|
||||
.day-one-a, .day-one-b, .day-five, .day-ten {
|
||||
height: 140px;
|
||||
width: 100px;
|
||||
border-radius: 8px;
|
||||
background-color: $purple-50;
|
||||
}
|
||||
|
||||
.day-one-a {
|
||||
grid-column: 1 / 1;
|
||||
grid-row: 1 / 1;
|
||||
}
|
||||
.day-one-b {
|
||||
grid-column: 2 / 2;
|
||||
grid-row: 1 / 1;
|
||||
}
|
||||
.day-five {
|
||||
grid-column: 3 / 3;
|
||||
grid-row: 1 / 1;
|
||||
}
|
||||
.day-ten {
|
||||
grid-column: 4 / 4;
|
||||
grid-row: 1 / 1;
|
||||
}
|
||||
|
||||
.day-text {
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.33;
|
||||
letter-spacing: 2.4px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 0px;
|
||||
color: $yellow-50;
|
||||
}
|
||||
|
||||
.gift {
|
||||
height: 80px;
|
||||
width: 84px;
|
||||
margin: 0 8px 32px;
|
||||
background-color: $purple-100;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
text-align: center;
|
||||
padding: 8px 0px;
|
||||
margin-top: -32px;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// SVG CSS
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
.svg-close {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
fill: $purple-50;
|
||||
|
||||
& svg path {
|
||||
fill: $purple-50 !important;;
|
||||
}
|
||||
& :hover {
|
||||
fill: $purple-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-confetti {
|
||||
position: absolute;
|
||||
height: 152px;
|
||||
width: 518px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.svg-gifts, .svg-gifts-flip {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.svg-gifts {
|
||||
margin-left: 70px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.svg-gifts-flip {
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
left: 366px;
|
||||
bottom: 34px;
|
||||
}
|
||||
|
||||
.left-divider, .right-divider {
|
||||
background-image: url('~@/assets/images/fancy-divider.png');
|
||||
background-position: right center;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-flex;
|
||||
flex-grow: 2;
|
||||
min-height: 1.25rem;
|
||||
}
|
||||
|
||||
.right-divider {
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.svg-cross {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
color: $yellow-50;
|
||||
}
|
||||
|
||||
.svg-gem {
|
||||
height: 48px;
|
||||
width: 58px;
|
||||
}
|
||||
|
||||
.svg-background {
|
||||
height: 68px;
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
.svg-stripe {
|
||||
height: 20px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.svg-paypal {
|
||||
height: 16px;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
// to check if user owns JG or not
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
// Purchase functionality
|
||||
import buy from '@/mixins/buy';
|
||||
import notifications from '@/mixins/notifications';
|
||||
import payments from '@/mixins/payments';
|
||||
import content from '@/../../common/script/content/index';
|
||||
import amazonButton from '@/components/payments/buttons/amazon';
|
||||
|
||||
// import images
|
||||
import close from '@/assets/svg/new-close.svg';
|
||||
import confetti from '@/assets/svg/confetti.svg';
|
||||
import gifts from '@/assets/svg/gifts-birthday.svg';
|
||||
import cross from '@/assets/svg/cross.svg';
|
||||
import stripe from '@/assets/svg/stripe.svg';
|
||||
import paypal from '@/assets/svg/paypal-logo.svg';
|
||||
import amazon from '@/assets/svg/amazonpay.svg';
|
||||
import birthdayGems from '@/assets/svg/birthday-gems.svg';
|
||||
import birthdayBackground from '@/assets/svg/icon-background-birthday.svg';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
amazonButton,
|
||||
},
|
||||
mixins: [buy, notifications, payments],
|
||||
data () {
|
||||
return {
|
||||
amazonData: {
|
||||
type: 'single',
|
||||
sku: 'Pet-Gryphatrice-Jubilant',
|
||||
},
|
||||
icons: Object.freeze({
|
||||
close,
|
||||
confetti,
|
||||
gifts,
|
||||
cross,
|
||||
stripe,
|
||||
paypal,
|
||||
amazon,
|
||||
birthdayGems,
|
||||
birthdayBackground,
|
||||
}),
|
||||
selectedPage: 'initial-buttons',
|
||||
gryphBought: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
}),
|
||||
ownGryphatrice () {
|
||||
return Boolean(this.user && this.user.items.pets['Gryphatrice-Jubilant']);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hide () {
|
||||
this.$root.$emit('bv::hide::modal', 'birthday-modal');
|
||||
},
|
||||
buyGryphatriceGems () {
|
||||
const gryphatrice = content.petInfo['Gryphatrice-Jubilant'];
|
||||
if (this.user.balance * 4 < gryphatrice.value) {
|
||||
this.$root.$emit('bv::show::modal', 'buy-gems');
|
||||
return this.hide();
|
||||
}
|
||||
if (!this.confirmPurchase(gryphatrice.currency, gryphatrice.value)) {
|
||||
return null;
|
||||
}
|
||||
this.makeGenericPurchase(gryphatrice);
|
||||
this.gryphBought = true;
|
||||
return this.purchased(gryphatrice.text());
|
||||
},
|
||||
closeAndRedirect (route) {
|
||||
const routeTerminator = route.split('/')[route.split('/').length - 1];
|
||||
if (this.$router.history.current.name !== routeTerminator) {
|
||||
this.$router.push(route);
|
||||
}
|
||||
this.hide();
|
||||
},
|
||||
close () {
|
||||
this.$root.$emit('bv::hide::modal', 'birthday-modal');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -78,6 +78,7 @@ export default {
|
||||
orderReferenceId: null,
|
||||
subscription: null,
|
||||
coupon: null,
|
||||
sku: null,
|
||||
},
|
||||
isAmazonSetup: false,
|
||||
amazonButtonEnabled: false,
|
||||
@@ -174,7 +175,10 @@ export default {
|
||||
storePaymentStatusAndReload (url) {
|
||||
let paymentType;
|
||||
|
||||
if (this.amazonPayments.type === 'single' && !this.amazonPayments.gift) paymentType = 'gems';
|
||||
if (this.amazonPayments.type === 'single') {
|
||||
if (this.amazonPayments.sku) paymentType = 'sku';
|
||||
else if (!this.amazonPayments.gift) paymentType = 'gems';
|
||||
}
|
||||
if (this.amazonPayments.type === 'subscription') paymentType = 'subscription';
|
||||
if (this.amazonPayments.groupId || this.amazonPayments.groupToCreate) paymentType = 'groupPlan';
|
||||
if (this.amazonPayments.type === 'single' && this.amazonPayments.gift && this.amazonPayments.giftReceiver) {
|
||||
@@ -223,6 +227,7 @@ export default {
|
||||
const data = {
|
||||
orderReferenceId: this.amazonPayments.orderReferenceId,
|
||||
gift: this.amazonPayments.gift,
|
||||
sku: this.amazonPayments.sku,
|
||||
};
|
||||
|
||||
if (this.amazonPayments.gemsBlock) {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<b-modal
|
||||
id="payments-success-modal"
|
||||
:hide-footer="isNewGroup || isGems || isSubscription"
|
||||
:modal-class="isNewGroup || isGems || isSubscription
|
||||
:hide-footer="isNewGroup || isGems || isSubscription || ownsJubilantGryphatrice"
|
||||
:modal-class="isNewGroup || isGems || isSubscription || ownsJubilantGryphatrice
|
||||
? ['modal-hidden-footer'] : []"
|
||||
>
|
||||
<!-- HEADER -->
|
||||
@@ -20,7 +20,7 @@
|
||||
<div class="check-container d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon check"
|
||||
class="svg-icon svg-check"
|
||||
v-html="icons.check"
|
||||
></div>
|
||||
</div>
|
||||
@@ -107,6 +107,35 @@
|
||||
class="small-text auto-renew"
|
||||
>{{ $t('paymentAutoRenew') }}</span>
|
||||
</template>
|
||||
<!-- if you buy the Jubilant Gryphatrice during 10th birthday -->
|
||||
<template
|
||||
v-if="ownsJubilantGryphatrice"
|
||||
>
|
||||
<div class="words">
|
||||
<p class="jub-success">
|
||||
<span
|
||||
v-once
|
||||
v-html="$t('jubilantSuccess')"
|
||||
>
|
||||
</span>
|
||||
</p>
|
||||
<p class="jub-success">
|
||||
<span
|
||||
v-once
|
||||
v-html="$t('stableVisit')"
|
||||
>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="gryph-bg">
|
||||
<img
|
||||
src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Gryphatrice-Jubilant-Large.gif"
|
||||
alt="a pink, purple, and green gryphatrice pet winks at you adorably"
|
||||
width="78px"
|
||||
height="72px"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<!-- buttons for subscriptions / new Group / buy Gems for self -->
|
||||
<button
|
||||
v-if="isNewGroup || isGems || isSubscription"
|
||||
@@ -116,6 +145,14 @@
|
||||
>
|
||||
{{ $t('onwards') }}
|
||||
</button>
|
||||
<!-- buttons for Jubilant Gryphatrice purchase during 10th birthday -->
|
||||
<button
|
||||
v-if="ownsJubilantGryphatrice"
|
||||
class="btn btn-primary mx-auto btn-jub"
|
||||
@click="closeAndRedirect()"
|
||||
>
|
||||
{{ $t('takeMeToStable') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- FOOTER -->
|
||||
@@ -232,9 +269,8 @@
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.check {
|
||||
width: 35.1px;
|
||||
height: 28px;
|
||||
.svg-check {
|
||||
width: 45px;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
@@ -293,6 +329,34 @@
|
||||
.group-billing-date {
|
||||
width: 269px;
|
||||
}
|
||||
|
||||
.words {
|
||||
margin-bottom: 16px;
|
||||
justify-content: center;
|
||||
font-size: 0.875rem;
|
||||
color: $gray-50;
|
||||
line-height: 1.71;
|
||||
}
|
||||
|
||||
.jub-success {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.gryph-bg {
|
||||
width: 110px;
|
||||
height: 104px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
background-color: $gray-700;
|
||||
}
|
||||
.btn-jub {
|
||||
margin-bottom: 8px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
.modal-footer {
|
||||
background: $gray-700;
|
||||
@@ -430,6 +494,9 @@ export default {
|
||||
isNewGroup () {
|
||||
return this.paymentData.paymentType === 'groupPlan' && this.paymentData.newGroup;
|
||||
},
|
||||
ownsJubilantGryphatrice () {
|
||||
return this.paymentData.paymentType === 'sku'; // will need to be revised when there are other discrete skus in system
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.$root.$on('habitica:payment-success', data => {
|
||||
@@ -458,6 +525,12 @@ export default {
|
||||
this.sendingInProgress = false;
|
||||
this.$root.$emit('bv::hide::modal', 'payments-success-modal');
|
||||
},
|
||||
closeAndRedirect () {
|
||||
if (this.$router.history.current.name !== 'stable') {
|
||||
this.$router.push('/inventory/stable');
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
submit () {
|
||||
if (this.paymentData.group && !this.paymentData.newGroup) {
|
||||
Analytics.track({
|
||||
|
||||
Reference in New Issue
Block a user