Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(event): one more banner

Browse Source
This commit is contained in:
Sabe Jones
2020-12-16 16:33:47 -06:00
parent fa197e1b57
commit bf28a46803
4 changed files with 88 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/src/components/payments/sendGemsModal.vue
+1 -22
View File
@@ -78,9 +78,7 @@
</h3>
<div class="panel-body">
<div class="row">
<div
:class="columnClass"
>
<div class="col-md-12">
<div class="form-group mb-0">
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<div
@@ -102,20 +100,6 @@
</div>
</div>
</div>
<div
v-if="currentEvent && currentEvent.promo && currentEvent.promo === 'g1g1'"
class="col-md-7"
>
<h4 v-once>
{{ $t('winterPromoGiftHeader') }}
</h4>
<p v-once>
{{ $t('winterPromoGiftDetails1') }}
</p>
<p v-once>
{{ $t('winterPromoGiftDetails2') }}
</p>
</div>
</div>
</div>
</div>
@@ -224,7 +208,6 @@ export default {
...mapState({
userLoggedIn: 'user.data',
originalSubscriptionBlocks: 'content.subscriptionBlocks',
currentEvent: 'worldState.data.currentEvent',
}),
subscriptionBlocks () {
let subscriptionBlocks = toArray(this.originalSubscriptionBlocks);
@@ -250,10 +233,6 @@ export default {
}
return this.userReceivingGems.profile.name;
},
columnClass () {
if (this.currentEvent && this.currentEvent.promo && this.currentEvent.promo === 'g1g1') return 'col-md-5';
return 'col-md-12';
},
},
mounted () {
this.$root.$on('habitica::send-gems', data => {
website/client/src/components/settings/index.vue
+73
View File
@@ -45,18 +45,91 @@
{{ $t('notifications') }}
</router-link>
</secondary-menu>
<div
class="g1g1-banner d-flex justify-content-center"
v-if="$route.name === 'subscription' && promo === 'g1g1'"
>
<div
v-once
class="svg-icon svg-gifts left-gift"
v-html="icons.gifts"
>
</div>
<div class="d-flex flex-column align-items-center text-center">
<strong
class="mt-auto mb-1"
> {{ $t('g1g1Event') }} </strong>
<p
class="mb-auto"
> {{ $t('g1g1Details') }} </p>
</div>
<div
v-once
class="svg-icon svg-gifts right-gift"
v-html="icons.gifts"
>
</div>
</div>
<div class="col-12">
<router-view />
</div>
</div>
</template>
<style scoped lang="scss">
@import '~@/assets/scss/colors.scss';
strong {
font-size: 1rem;
line-height: 1.25;
}
.g1g1-banner {
color: $white;
width: 100%;
height: 5.75rem;
background-image: linear-gradient(90deg, $teal-50 0%, $purple-400 100%);
}
.left-gift {
margin: auto 3rem auto auto;
}
.right-gift {
margin: auto auto auto 3rem;
filter: flipH;
transform: scaleX(-1);
}
.svg-gifts {
width: 3.5rem;
}
</style>
<script>
import { mapState } from '@/libs/store';
import SecondaryMenu from '@/components/secondaryMenu';
import gifts from '@/assets/svg/gifts-vertical.svg';
export default {
components: {
SecondaryMenu,
},
data () {
return {
icons: Object.freeze({
gifts,
}),
};
},
computed: {
...mapState({
currentEvent: 'worldState.data.currentEvent',
}),
promo () {
if (!this.currentEvent || !this.currentEvent.promo) return 'none';
return this.currentEvent.promo;
},
},
};
</script>
website/client/src/components/settings/subscription.vue
+13 -44
View File
@@ -113,7 +113,6 @@
</div>
<div
v-else
v-once
class="w-55 text-center"
v-html="$t('paymentSubBillingWithMethod', {
amount: purchasedPlanIdInfo.price,
@@ -144,7 +143,6 @@
</div>
<div
v-else
v-once
class="svg-icon"
:class="paymentMethodLogo.class"
v-html="paymentMethodLogo.icon"
@@ -152,7 +150,6 @@
</div>
<div
v-if="purchasedPlanExtraMonthsDetails.months > 0"
v-once
class="extra-months green-10 py-2 px-3 mt-4"
v-html="$t('purchasedPlanExtraMonths',
{months: purchasedPlanExtraMonthsDetails.months})"
@@ -174,7 +171,6 @@
{{ $t('subscriptionCanceled') }}
</h2>
<div
v-once
class="w-75 text-center mb-4"
v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
>
@@ -269,13 +265,11 @@
</div>
<div
v-if="!hasGroupPlan && !canCancelSubscription"
v-once
v-html="$t(`cancelSubInfo${user.purchased.plan.paymentMethod}`)"
>
</div>
<div
v-if="canCancelSubscription"
v-once
v-html="$t('cancelSubAlternatives')"
>
</div>
@@ -289,43 +283,22 @@
</div>
</div>
</div>
<div class="d-flex justify-content-center align-items-start">
<div class="d-flex flex-column align-items-center mt-4">
<div
v-once
class="svg-icon svg-gift-box m-auto"
v-html="icons.giftBox"
>
</div>
<div class="muted mx-auto mt-3 mb-1">
{{ $t('giftSubscription') }}
</div>
<a
class="mx-auto"
@click="showSelectUser()"
>
{{ $t('giftASubscription') }}
</a>
</div>
<div class="d-flex flex-column align-items-center mt-4">
<div
v-if="currentEvent && currentEvent.promo && currentEvent.promo === 'g1g1'"
class="m-5"
v-once
class="svg-icon svg-gift-box m-auto"
v-html="icons.giftBox"
>
</div>
<div
v-if="currentEvent && currentEvent.promo && currentEvent.promo === 'g1g1'"
class="ml-5 mt-3"
>
<h2 v-once>
{{ $t('winterPromoGiftHeader') }}
</h2>
<p v-once>
{{ $t('winterPromoGiftDetails1') }}
</p>
<p v-once>
{{ $t('winterPromoGiftDetails2') }}
</p>
<div class="muted mx-auto mt-3 mb-1">
{{ $t('giftSubscription') }}
</div>
<a
class="mx-auto"
@click="showSelectUser()"
>
{{ $t('giftASubscription') }}
</a>
</div>
</div>
</template>
@@ -624,11 +597,7 @@ export default {
};
},
computed: {
...mapState({
user: 'user.data',
credentials: 'credentials',
currentEvent: 'worldState.data.currentEvent',
}),
...mapState({ user: 'user.data', credentials: 'credentials' }),
purchasedPlanIdInfo () {
if (!this.subscriptionBlocks[this.user.purchased.plan.planId]) {
// @TODO: find which subs are in the common