feat(subscription): max Gems progress readout
This commit is contained in:
Kalista Payne
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
@@ -87,6 +87,10 @@ h4 {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.bg-gray-100 {
|
||||
background-color: $gray-100 !important;
|
||||
}
|
||||
|
||||
.bg-gray-300 {
|
||||
background-color: $gray-300 !important;
|
||||
}
|
||||
@@ -103,6 +107,18 @@ h4 {
|
||||
background-color: $green-10 !important;
|
||||
}
|
||||
|
||||
.bg-green-100 {
|
||||
background-color: $green-100 !important;
|
||||
}
|
||||
|
||||
.bg-purple-100 {
|
||||
background-color: $purple-100 !important;
|
||||
}
|
||||
|
||||
.bg-purple-300 {
|
||||
background-color: $purple-300 !important;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: $white !important;
|
||||
}
|
||||
|
||||
@@ -37,7 +37,30 @@
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="d-flex flex-column mr-4">
|
||||
<div class="d-flex mb-3 align-items-center">
|
||||
<div
|
||||
v-if="gemCap > 24"
|
||||
class="w-100 green-gradient mb-3 text-center"
|
||||
>
|
||||
<div class='cap-readout bg-purple-300'>
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-gems"
|
||||
v-html="icons.subscriberGems"
|
||||
></div>
|
||||
<div class="white label"> {{ $t('gemCap') }}</div>
|
||||
<div class="white readout"> {{ gemCap }} / 50</div>
|
||||
<div class="progress-bar bg-purple-100">
|
||||
<div
|
||||
class="progress-fill h-100 bg-green-100"
|
||||
:style="`width: ${gemCap / 50 * 100}%`"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<img src="~@/assets/images/confetti.png">
|
||||
</div>
|
||||
<small class="teal-1">{{ $t('resubscribeToPickUp') }}</small>
|
||||
</div>
|
||||
<div v-else class="d-flex mb-3 align-items-center">
|
||||
<div class="sub-benefit bg-gray-600 d-flex mr-4">
|
||||
<div
|
||||
v-once
|
||||
@@ -221,14 +244,14 @@
|
||||
</div>
|
||||
<div
|
||||
v-else-if="hasCanceledSubscription"
|
||||
class="d-flex flex-column align-items-center mt-4"
|
||||
class="d-flex flex-column align-items-center"
|
||||
>
|
||||
<div class="round-container bg-gray-300
|
||||
<div class="round-container bg-gray-100
|
||||
d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-close"
|
||||
class="svg svg-icon svg-close color white"
|
||||
v-html="icons.closeIcon"
|
||||
></div>
|
||||
</div>
|
||||
@@ -236,12 +259,12 @@
|
||||
{{ $t('subscriptionCanceled') }}
|
||||
</h2>
|
||||
<div
|
||||
class="w-75 text-center mb-4"
|
||||
class="text-center mb-4"
|
||||
v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
|
||||
>
|
||||
</div>
|
||||
<h2>{{ $t('readyToResubscribe') }}</h2>
|
||||
<subscription-options class="w-100 mb-2" />
|
||||
<subscription-options class="w-100 mb-4" :canceled="true"/>
|
||||
</div>
|
||||
<div
|
||||
v-if="hasSubscription"
|
||||
@@ -415,6 +438,50 @@
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.cap-readout {
|
||||
height: 76px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.label {
|
||||
left: 92px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
left: 92px;
|
||||
width: 330px;
|
||||
height: 12px;
|
||||
border-radius: 99px;
|
||||
}
|
||||
|
||||
.readout {
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
.svg-gems {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
.white {
|
||||
position: absolute;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.64;
|
||||
|
||||
@@ -444,6 +511,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.green-gradient {
|
||||
background: linear-gradient(90deg, rgba(119, 244, 199, 1), rgba(114, 207, 255, 1));
|
||||
padding: 2px 2px 0px 2px;
|
||||
border-radius: 8px;
|
||||
height: 108px;
|
||||
|
||||
.teal-1 {
|
||||
position: relative;
|
||||
font-weight: 700;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-mid {
|
||||
width: 347px;
|
||||
}
|
||||
@@ -583,18 +663,8 @@
|
||||
}
|
||||
|
||||
.svg-close {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
|
||||
& ::v-deep svg path {
|
||||
stroke: $white;
|
||||
stroke-width: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-credit-card {
|
||||
width: 21.3px;
|
||||
height: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.svg-food {
|
||||
@@ -684,7 +754,6 @@ import applePayLogo from '@/assets/svg/apple-pay-logo.svg';
|
||||
import calendarIcon from '@/assets/svg/calendar-purple.svg';
|
||||
import checkmarkIcon from '@/assets/svg/check.svg';
|
||||
import closeIcon from '@/assets/svg/close.svg';
|
||||
import creditCardIcon from '@/assets/svg/credit-card-icon.svg';
|
||||
import dividerStars from '@/assets/svg/divider-stars.svg';
|
||||
import gemIcon from '@/assets/svg/gem.svg';
|
||||
import giftBox from '@/assets/svg/gift-purple.svg';
|
||||
@@ -735,7 +804,6 @@ export default {
|
||||
calendarIcon,
|
||||
checkmarkIcon,
|
||||
closeIcon,
|
||||
creditCardIcon,
|
||||
dividerStars,
|
||||
gemIcon,
|
||||
giftBox,
|
||||
@@ -846,22 +914,22 @@ export default {
|
||||
case this.paymentMethods.AMAZON_PAYMENTS:
|
||||
return {
|
||||
icon: this.icons.amazonPayLogo,
|
||||
class: 'svg-amazon-pay mt-3',
|
||||
class: 'svg-amazon-pay',
|
||||
};
|
||||
case this.paymentMethods.APPLE:
|
||||
return {
|
||||
icon: this.icons.applePayLogo,
|
||||
class: 'svg-apple-pay mt-4',
|
||||
class: 'svg-apple-pay',
|
||||
};
|
||||
case this.paymentMethods.GOOGLE:
|
||||
return {
|
||||
icon: this.icons.googlePayLogo,
|
||||
class: 'svg-google-pay mt-4',
|
||||
class: 'svg-google-pay',
|
||||
};
|
||||
case this.paymentMethods.PAYPAL:
|
||||
return {
|
||||
icon: this.icons.paypalLogo,
|
||||
class: 'svg-paypal mt-4',
|
||||
class: 'svg-paypal',
|
||||
};
|
||||
case this.paymentMethods.STRIPE:
|
||||
return {
|
||||
|
||||
@@ -1,14 +1,18 @@
|
||||
<template>
|
||||
<div id="subscription-form">
|
||||
<div class="mb-3 w-100 h-100">
|
||||
<div class="w-100 h-100">
|
||||
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
||||
<div
|
||||
v-for="block in subscriptionBlocksOrdered"
|
||||
v-if="block.target !== 'group' && block.canSubscribe === true"
|
||||
:key="block.key"
|
||||
:value="block.key"
|
||||
class="subscribe-option mb-2 d-flex"
|
||||
:class="{selected: subscription.key === block.key, final: block.months === 12}"
|
||||
class="subscribe-option d-flex"
|
||||
:class="{
|
||||
selected: subscription.key === block.key,
|
||||
'mb-2': block.months !== 12,
|
||||
final: block.months === 12,
|
||||
}"
|
||||
@click="updateSubscriptionData(block.key)"
|
||||
>
|
||||
<div
|
||||
@@ -129,9 +133,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-4 mb-4 text-center">
|
||||
<div
|
||||
v-if="note"
|
||||
class="mx-4 mb-4 text-center"
|
||||
>
|
||||
<small
|
||||
v-if="note"
|
||||
v-once
|
||||
class="font-italic"
|
||||
>
|
||||
@@ -151,6 +157,7 @@
|
||||
<button
|
||||
v-else
|
||||
class="btn btn-primary w-100"
|
||||
:class="canceled ? 'mt-4' : 'mt-3'"
|
||||
@click="$root.$emit('bv::show::modal', 'buy-subscription')"
|
||||
> {{ $t('subscribe') }} </button>
|
||||
<b-modal
|
||||
@@ -234,13 +241,9 @@
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.gradient-banner {
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
|
||||
small {
|
||||
color: $teal-1;
|
||||
}
|
||||
.gradient-banner small {
|
||||
color: $teal-1;
|
||||
width: 61%;
|
||||
}
|
||||
|
||||
.ribbon {
|
||||
@@ -266,7 +269,7 @@
|
||||
}
|
||||
|
||||
.subscribe-option {
|
||||
width: 448px;
|
||||
max-width: 448px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 1px 3px 0px rgba($black, 0.12), 0px 1px 2px 0px rgba($black, 0.24);
|
||||
@@ -331,6 +334,10 @@ export default {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
canceled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -230,6 +230,7 @@
|
||||
"subMonths": "Months Subscribed",
|
||||
"needToUpdateCard": "Need to update your card?",
|
||||
"readyToResubscribe": "Are you ready to resubscribe?",
|
||||
"resubscribeToPickUp": "Resubscribe to pick up where you left off!",
|
||||
"cancelYourSubscription": "Need to cancel your subscription?",
|
||||
"cancelSubAlternatives": "If you're having technical problems or Habitica doesn't seem to be working out for you, please consider <a href='mailto:admin@habitica.com'>contacting us</a>. We want to help you get the most from Habitica.",
|
||||
"sendAGift": "Send Gift",
|
||||
|
||||
Reference in New Issue
Block a user