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

Squashed commit of the following:

Browse Source 
commit dd0a410fa6c3741dc0d6793283cf4df3c37790a5
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Mon Nov 4 14:24:30 2024 -0600

    fix(subs): center next hourglass message

commit 72d92ffd76bb43fee8ba2bbabd211e595afbd664
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Fri Nov 1 14:17:59 2024 -0500

    fix(subs): don't hide HG preview entirely

commit ea0ecb0c3d519ed3d5c42266367eaaa7283ac5de
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Fri Nov 1 13:01:06 2024 -0500

    fix(subs): Google wording and HG escape

commit 2bd2c69e18e37c8c8c7106c62f186c372d25c5d2
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Fri Nov 1 09:25:30 2024 -0500

    fix(layout): tighten cancellation note

commit eb2fc40d24
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Thu Oct 24 15:41:43 2024 -0500

    fix(g1g1): don't try to find Gems promo during bogo

commit d3eea86bd7
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Thu Oct 24 15:00:09 2024 -0500

    fix(subs): fix typeError

commit e3ae9a2d67
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Thu Oct 24 13:57:27 2024 -0500

    fix(subs): also redirect to subs after gift sub

commit 690163a0de
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Oct 23 16:42:38 2024 +0200

    fix test

commit 2ad7541fc0
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Oct 23 16:34:52 2024 +0200

    fix test

commit 7e337a9e59
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Oct 23 11:54:15 2024 +0200

    remove only

commit 7462b8a57f
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Oct 23 11:51:25 2024 +0200

    fix bug with incorrectly giving HG bonus

commit acd6183e95
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Mon Oct 21 17:22:26 2024 -0500

    fix(subs): unhovery and un-12-monthy

commit 935e9fd6ec
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Fri Oct 18 14:50:17 2024 -0500

    fix(subs): try again on gifts

commit 6e1fb7df38
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Thu Oct 17 18:19:20 2024 -0500

    fix(lint): do negate object ig

commit 71d434b94e
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Thu Oct 17 18:15:11 2024 -0500

    fix(lint): unnecessary ternary

commit b90b0bb9c3
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Thu Oct 17 17:34:24 2024 -0500

    fix(subs): gifts DON't renew

commit 19469304c5
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Thu Oct 17 17:13:29 2024 -0500

    fix(subs): pass autoRenews through Stripe

commit 6819e7b7e5
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Thu Oct 17 16:03:25 2024 -0500

    fix(subscriptions): minor visual updates

commit 74633b5e5e
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Wed Oct 16 17:27:09 2024 -0500

    fix(subscriptions): more gift layout revisions

commit a90ccb89de
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Wed Oct 16 15:37:50 2024 -0500

    fix(subscription): update layout when gifting

commit c24b2db8dc
Author: Phillip Thelen <phillip@habitica.com>
Date:   Mon Oct 14 16:11:46 2024 +0200

    fix issue with promo hourglasses

commit 7a61c72b47
Author: Phillip Thelen <phillip@habitica.com>
Date:   Mon Oct 14 15:59:40 2024 +0200

    don’t give additional HG for new sub if they already got one this month

commit f14cb09026
Author: Phillip Thelen <phillip@habitica.com>
Date:   Mon Oct 14 10:38:01 2024 +0200

    Admin panel display fixes

commit f4cff698cf
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Thu Oct 3 17:58:59 2024 -0500

    fix(stripe): correct redirect after success

commit c468b58f3f
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Thu Oct 3 17:35:37 2024 -0500

    fix(subs): correct border-radius and redirect

commit 78fb9e31d6
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Wed Oct 2 17:41:49 2024 -0500

    fix(css): correct and refactor heights and selection states

commit e2babe8053
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Mon Sep 30 16:45:29 2024 -0500

    feat(subscription): max Gems progress readout

commit 61af8302a3
Author: Phillip Thelen <phillip@habitica.com>
Date:   Fri Sep 27 15:11:22 2024 +0200

    fix test

commit ef8ff0ea9e
Author: Phillip Thelen <phillip@habitica.com>
Date:   Fri Sep 27 14:14:44 2024 +0200

    show date for hourglass bonus if it was received

commit 4bafafdc8d
Author: Phillip Thelen <phillip@habitica.com>
Date:   Fri Sep 27 14:12:52 2024 +0200

    add new field for cumulative subscription count

commit 30096247b7
Author: Phillip Thelen <phillip@habitica.com>
Date:   Fri Sep 27 13:39:49 2024 +0200

    fix missing transaction type

commit 70872651b0
Author: Phillip Thelen <phillip@habitica.com>
Date:   Fri Sep 27 13:31:40 2024 +0200

    fix admin panel strings

commit f3398db65f
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Thu Sep 26 23:11:16 2024 -0500

    WIP(subs): extant Stripe state

commit c6b2020109
Author: Phillip Thelen <phillip@habitica.com>
Date:   Thu Sep 26 11:41:55 2024 +0200

    fix admin panel display

commit d9afc96d2d
Author: Phillip Thelen <phillip@habitica.com>
Date:   Thu Sep 26 11:40:16 2024 +0200

    Fix hourglass logic for upgrades

commit 6e2c8eeb64
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Sep 25 17:48:54 2024 +0200

    fix hourglass count

commit cd752fbdce
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Fri Sep 20 12:24:21 2024 -0500

    WIP(frontend): draft of main subs page view

commit 0102b29d59
Author: Kalista Payne <sabe@habitica.com>
Date:   Wed Sep 18 15:29:08 2024 -0500

    fix(admin): correct logic and style for shrimple subs

commit 5469a5c5c3
Author: Kalista Payne <sabe@habitica.com>
Date:   Wed Sep 18 15:07:36 2024 -0500

    fix(test): short circuit this.

commit 526193ee6c
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Sep 18 14:42:06 2024 +0200

    fix gem limit

commit 19cf1636aa
Author: Phillip Thelen <phillip@habitica.com>
Date:   Tue Aug 13 17:00:40 2024 +0200

    return nextHourglassDate again

commit eea36e3ed5
Author: Phillip Thelen <phillip@habitica.com>
Date:   Tue Aug 13 13:11:22 2024 +0200

    subscription test improvements

commit ca78e74330
Author: Phillip Thelen <phillip@habitica.com>
Date:   Mon Aug 12 15:46:15 2024 +0200

    add more subscription tests

commit f4c4f93a08
Author: Phillip Thelen <phillip@habitica.com>
Date:   Fri Aug 9 13:35:22 2024 +0200

    finish basic implementation of new logic

commit e036742048
Author: Phillip Thelen <phillip@habitica.com>
Date:   Fri Aug 9 11:37:44 2024 +0200

    cleanup

commit 6431865688
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Aug 7 05:41:18 2024 -0400

    update cron tests

commit 930d875ae9
Author: Phillip Thelen <phillip@habitica.com>
Date:   Thu Aug 8 10:36:50 2024 +0200

    begin refactoring

commit 96623608d0
Author: Phillip Thelen <phillip@habitica.com>
Date:   Tue Aug 6 16:28:16 2024 +0200

    begin removing obsolete tests
This commit is contained in:
Kalista Payne
2024-11-14 12:31:57 -06:00
parent 7f38ffe676
commit fbf69a4a34
43 changed files with 1554 additions and 1686 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
+20 -35
View File
@@ -91,11 +91,11 @@
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">
Consecutive months:
Cumulative months:
</label>
<div class="col-sm-9">
<input
v-model="hero.purchased.plan.consecutive.count"
v-model="hero.purchased.plan.cumulativeCount"
class="form-control"
type="number"
min="0"
@@ -105,39 +105,23 @@
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">
Perk offset months:
Received hourglass bonus:
</label>
<div class="col-sm-9">
<input
v-model="hero.purchased.plan.consecutive.offset"
class="form-control"
type="number"
min="0"
step="1"
>
<div class="input-group">
<input
v-model="hero.purchased.plan.hourglassPromoReceived"
class="form-control"
type="text"
>
<div class="input-group-append">
<strong class="input-group-text">
{{ dateFormat(hero.purchased.plan.hourglassPromoReceived) }}
</strong>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">
Perk month count:
</label>
<div class="col-sm-9">
<input
v-model="hero.purchased.plan.perkMonthCount"
class="form-control"
type="number"
min="0"
max="2"
step="1"
>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">
Next Mystic Hourglass:
</label>
<strong class="col-sm-9 col-form-label">{{ nextHourglassDate }}</strong>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">
Mystic Hourglasses:
@@ -162,8 +146,8 @@
class="form-control"
type="number"
min="0"
max="25"
step="5"
max="26"
step="2"
>
</div>
</div>
@@ -172,7 +156,7 @@
Total Gem cap:
</label>
<strong class="col-sm-9 col-form-label">
{{ Number(hero.purchased.plan.consecutive.gemCapExtra) + 25 }}
{{ Number(hero.purchased.plan.consecutive.gemCapExtra) + 24 }}
</strong>
</div>
<div class="form-group row">
@@ -185,7 +169,7 @@
class="form-control"
type="number"
min="0"
:max="hero.purchased.plan.consecutive.gemCapExtra + 25"
:max="hero.purchased.plan.consecutive.gemCapExtra + 24"
step="1"
>
</div>
@@ -268,6 +252,7 @@ export default {
nextHourglassDate () {
const currentPlanContext = getPlanContext(this.hero, new Date());
if (!currentPlanContext.nextHourglassDate) return 'N/A';
return currentPlanContext.nextHourglassDate.format('MMMM YYYY');
},
},
website/client/src/components/group-plans/billing.vue
+2 -2
View File
@@ -27,13 +27,13 @@
</td>
</tr>
<tr
v-if="group.purchased.plan.consecutive.count || group.purchased.plan.consecutive.offset"
v-if="group.purchased.plan.consecutive.count"
>
<td>
<span class="glyphicon glyphicon-forward"></span>
{{ $t('consecutiveSubscription') }}
<ul class="list-unstyled">
<li>{{ $t('consecutiveMonths') }} {{ group.purchased.plan.consecutive.count + group.purchased.plan.consecutive.offset }}</li> <!-- eslint-disable-line max-len -->
<li>{{ $t('consecutiveMonths') }} {{ group.purchased.plan.consecutive.count }}</li> <!-- eslint-disable-line max-len -->
<li>{{ $t('gemCapExtra') }} {{ group.purchased.plan.consecutive.gemCapExtra }}</li>
<li>{{ $t('mysticHourglasses') }} {{ group.purchased.plan.consecutive.trinkets }}</li>
</ul>
website/client/src/components/notifications.vue
+1 -1
View File
@@ -529,7 +529,7 @@ export default {
// List of prompts for user on changes.
// Sounds like we may need a refactor here, but it is clean for now
if (!this.user.flags.welcomed && !this.$route.name.includes('groupPlan')) {
if (!this.user.flags.welcomed && !this.$route?.name.includes('groupPlan')) {
if (this.$store.state.avatarEditorOptions) {
this.$store.state.avatarEditorOptions.editingUser = false;
}
website/client/src/components/payments/buttons/list.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="payments-column mx-auto mt-auto">
<div class="payments-column mx-auto">
<h4>{{ $t('choosePaymentMethod') }}</h4>
<button
v-if="stripeAvailable"
website/client/src/components/payments/buyGemsModal.vue
+1 -1
View File
@@ -465,7 +465,7 @@ export default {
};
},
isGemsPromoActive () {
return Boolean(this.eventInfo);
return Boolean(this.eventInfo?.gemsPromo);
},
gemsBlocks () {
// We don't want to modify the original gems blocks when a promotion is running
website/client/src/components/payments/sendGiftModal.vue
+13 -18
View File
@@ -51,7 +51,7 @@
</div>
<!-- menu area -->
<div class="row">
<div class="row bg-gray-700">
<div class="col-md-8 offset-md-2 text-center nav">
<div
class="nav-link"
@@ -73,7 +73,7 @@
<!-- subscriber block -->
<subscription-options
v-show="selectedPage === 'subscription'"
class="subscribe-option"
class="bg-gray-700 py-3"
:user-receiving-gift="userReceivingGift"
:receiver-name="receiverName"
/>
@@ -248,6 +248,11 @@
<style lang="scss">
@import '~@/assets/scss/mixins.scss';
#send-gift {
#subscription-form {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.modal-dialog {
max-width: 448px;
}
@@ -280,15 +285,7 @@
}
}
}
#subscription-form .subscribe-option {
background: #F9F9F9;
}
#subscription-form .selected {
background: rgba(213, 200, 255, 0.32);
// using rgba for transparency
}
}
}
</style>
<style scoped lang="scss">
@import '~@/assets/scss/colors.scss';
@@ -322,7 +319,6 @@
}
.row {
background-color: $gray-700;
margin: 0 0 0 0;
min-height: 32px;
}
@@ -336,19 +332,18 @@
}
.nav-link {
color: $gray-100;
color: $gray-50;
display: inline-block;
padding: 0px 8px 6px 8px;
&.active {
color: $purple-300;
border-bottom: 2px solid $purple-400;
color: $purple-300;
border-bottom: 2px solid $purple-400;
}
&:hover {
color: $purple-300;
border-bottom: 2px solid $purple-400;
cursor: pointer;
color: $purple-300;
cursor: pointer;
}
}
website/client/src/components/settings/subscription.vue
+564 -429
View File
File diff suppressed because it is too large Load Diff
website/client/src/components/settings/subscriptionOptions.vue
+283 -64
View File
@@ -1,70 +1,167 @@
<template>
<div id="subscription-form">
<b-form-group class="mb-3 w-100 h-100">
<div
class="w-100 h-100"
:class="{'mb-2': userReceivingGift?._id}"
>
<strong
v-if="userReceivingGift?._id"
class="text-center d-block mb-3 mx-5"
>
{{ $t('giftSubscriptionLeadText') }}
</strong>
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<b-form-radio
<div
v-for="block in subscriptionBlocksOrdered"
v-if="block.target !== 'group' && block.canSubscribe === true"
:key="block.key"
v-model="subscription.key"
:value="block.key"
class="subscribe-option pt-2 pl-5 pb-3 mb-0"
:class="{selected: subscription.key === block.key}"
@click.native="updateSubscriptionData(block.key)"
class="subscribe-option d-flex"
:class="{
selected: subscription.key === block.key,
'mb-2': block.months !== 12,
final: block.months === 12,
'mx-4': userReceivingGift?._id,
}"
@click="updateSubscriptionData(block.key)"
>
<div v-if="subscription.key === block.key">
<div class="selected-corner"></div>
<div
class="svg svg-icon svg-check color m-2"
v-html="icons.check"
>
</div>
</div>
<div
v-if="block.months === 12"
class="ribbon mt-3 d-flex align-items-center"
>
<small class="bold teal-1"> {{ $t('popular') }} </small>
</div>
<!-- eslint-enable vue/no-use-v-if-with-v-for -->
<div
v-if="userReceivingGift && userReceivingGift._id"
class="subscription-text ml-2 mb-1"
v-html="$t('giftSubscriptionRateText', {price: block.price, months: block.months})"
>
<div class="w-100">
<div
class="mx-5"
v-if="block.months < 12"
>
<h2
class="mt-3 mb-1"
> ${{ block.price }}.00 USD </h2>
<small
class="bold mb-2"
>
{{ recurrenceText(block.months) }}
</small>
<div class="d-flex flex-column mb-3">
<div class="d-flex align-items-center mb-1">
<div
class="svg svg-icon svg-plus color mr-1"
v-html="icons.plus"
>
</div>
<small
v-html="userReceivingGift?._id ? $t('unlockNGemsGift', { count: 24 })
: $t('unlockNGems', { count: 24 })"
></small>
</div>
<div class="d-flex align-items-center">
<div
class="svg svg-icon svg-plus color mr-1"
v-html="icons.plus"
>
</div>
<small
v-html="userReceivingGift?._id ? $t('earn2GemsGift') : $t('earn2Gems')"
></small>
</div>
</div>
</div>
<div v-else>
<div
class="bg-white py-3 pl-5"
:class="{ round: userReceivingGift?._id }"
>
<div class="d-flex align-items-center mb-1">
<h2 class="mr-2 my-auto"> ${{ block.price }}.00 USD</h2>
<strike class="gray-200">$60.00 USD</strike>
</div>
<small class="bold mb-2">
{{ recurrenceText(block.months) }}
</small>
<div class="d-flex flex-column">
<div class="d-flex align-items-center mb-1">
<div
class="svg svg-icon svg-plus color mr-1"
v-html="icons.plus"
>
</div>
<small
v-html="userReceivingGift?._id ? $t('unlockNGemsGift', { count: 50 })
: $t('unlockNGems', { count: 50 })"
></small>
</div>
<div class="d-flex align-items-center">
<div
class="svg svg-icon svg-plus color mr-1"
v-html="icons.plus"
>
</div>
<small v-html="userReceivingGift?._id ? $t('maxGemCapGift') : $t('maxGemCap')">
</small>
</div>
</div>
</div>
<div
class="gradient-banner text-center"
v-if="!userReceivingGift?._id && !user?.purchased?.plan?.hourglassPromoReceived"
>
<small class="my-3" v-html="$t('immediate12Hourglasses')"></small>
</div>
</div>
</div>
<div
v-else
class="subscription-text ml-2 mb-1"
v-html="$t('subscriptionRateText', {price: block.price, months: block.months})"
>
</div>
<div
class="ml-2"
v-html="subscriptionBubbles(block.key)"
>
</div>
</b-form-radio>
</b-form-group>
<div class="mx-4 mb-4 text-center">
</div>
<button
class="btn btn-primary"
:class="[canceled ? 'mt-4' : 'mt-3', userReceivingGift?._id ? 'mx-4' : 'w-100']"
@click="$root.$emit('bv::show::modal', 'buy-subscription')"
> {{ userReceivingGift?._id ? $t('selectPayment') : $t('subscribe') }} </button>
</div>
<div
v-if="note"
class="mx-4 my-3 text-center"
>
<small
v-if="note"
v-once
class="font-italic"
>
{{ $t(note) }}
</small>
</div>
<!-- payment buttons first is for gift subs and the second is for renewing subs -->
<payments-buttons
v-if="userReceivingGift && userReceivingGift._id"
:disabled="!subscription.key"
:stripe-fn="() => redirectToStripe({gift, uuid: userReceivingGift._id, receiverName})"
:paypal-fn="() => openPaypalGift({
gift: gift, giftedTo: userReceivingGift._id, receiverName,
})"
:amazon-data="{type: 'single', gift, giftedTo: userReceivingGift._id, receiverName}"
/>
<payments-buttons
v-else
:disabled="!subscription.key"
:stripe-fn="() => redirectToStripe({
subscription: subscription.key,
coupon: subscription.coupon,
})"
:paypal-fn="() => openPaypal({url: paypalPurchaseLink, type: 'subscription'})"
:amazon-data="{
type: 'subscription',
subscription: subscription.key,
coupon: subscription.coupon
}"
/>
<b-modal
id="buy-subscription"
size="md"
:hide-header="true"
:hide-footer="true"
>
<payments-buttons
v-if="userReceivingGift?._id"
:disabled="!subscription.key"
:stripe-fn="() => redirectToStripe({gift, uuid: userReceivingGift._id, receiverName})"
:paypal-fn="() => openPaypalGift({
gift: gift, giftedTo: userReceivingGift._id, receiverName,
})"
/>
<payments-buttons
v-else
:disabled="!subscription.key"
:stripe-fn="() => redirectToStripe({
subscription: subscription.key,
coupon: subscription.coupon,
})"
:paypal-fn="() => openPaypal({url: paypalPurchaseLink, type: 'subscription'})"
/>
</b-modal>
</div>
</template>
@@ -77,9 +174,13 @@
margin-top: 0.75rem;
}
.selected {
background-color: rgba(213, 200, 255, 0.32);
.discount-bubble {
background-color: $green-10;
color: $white;
}
.selected {
outline: 2px solid $purple-300;
.subscription-bubble {
background-color: $purple-300;
color: $white;
@@ -102,9 +203,12 @@
color: $gray-200;
}
.discount-bubble {
background-color: $green-10;
color: $white;
.selected strong {
color: $yellow-5;
}
.selected .gradient-banner strong {
color: $teal-1;
}
}
</style>
@@ -112,20 +216,113 @@
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
small {
small, .small {
color: $gray-100;
display: inline-block;
font-size: 12px ;
font-weight: normal;
line-height: 16px;
&.bold {
font-weight: 700;
}
}
strike, strong {
line-height: 24px;
}
.btn-primary {
min-width: 400px;
}
.gradient-banner small {
color: $teal-1;
width: 61%;
}
.ribbon {
width: fit-content;
background: linear-gradient(90deg, rgba(119, 244, 199, 1), rgba(114, 207, 255, 1));
border-radius: 4px;
clip-path: polygon(0px 0px, calc(100% + 1px) 0px, calc(100% + 1px) calc(100% + 1px),
0px calc(100% + 3px), 4px 50%);
box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
position: absolute;
right: -4px;
line-height: 1.33;
padding: 4px 10px 4px 12px;
}
.selected-corner {
border-color: $purple-300 transparent transparent transparent;
border-style: solid;
border-width: 48px 48px 0 0;
border-top-left-radius: 4px;
position: absolute;
}
.subscribe-option {
background-color: $gray-700;
max-width: 448px;
border-radius: 8px;
box-shadow: 0px 1px 3px 0px rgba($black, 0.12), 0px 1px 2px 0px rgba($black, 0.24);
position: relative;
background-color: $white;
&:not(:last-of-type) {
border-bottom: 1px solid $gray-600;
.bg-white {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
&.round {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
}
&.final h2 {
color: $teal-10;
}
&:hover, &.selected {
box-shadow: 0px 3px 6px 0px rgba($black, 0.16), 0px 3px 6px 0px rgba($black, 0.24);
}
&.selected {
&.final {
small {
color: $teal-1;
}
}
&:not(.final) {
h2, small {
color: $purple-200;
}
}
.svg-plus {
color: $yellow-10;
}
}
&.final {
background: linear-gradient(90deg, rgba($green-500, 1), rgba(114, 207, 255, 1));
}
h2 {
font-family: 'Roboto', sans-serif;
line-height: 24px;
color: $gray-50;
}
}
.svg-check {
width: 16px;
position: absolute;
color: $white;
}
.svg-plus {
color: $gray-300;
min-width: 10px;
}
</style>
@@ -136,6 +333,8 @@ import sortBy from 'lodash/sortBy';
import subscriptionBlocks from '@/../../common/script/content/subscriptionBlocks';
import paymentsButtons from '@/components/payments/buttons/list';
import paymentsMixin from '../../mixins/payments';
import check from '@/assets/svg/check.svg';
import plus from '@/assets/svg/positive.svg';
export default {
components: {
@@ -157,15 +356,23 @@ export default {
type: String,
default: '',
},
canceled: {
type: Boolean,
default: false,
},
},
data () {
return {
subscription: {
key: 'basic_earned',
},
gift: {
type: 'subscription',
subscription: { key: 'basic_earned' },
subscription: { key: 'basic_12mo' },
},
icons: Object.freeze({
check,
plus,
}),
subscription: {
key: 'basic_12mo',
},
};
},
@@ -179,6 +386,18 @@ export default {
},
},
methods: {
recurrenceText (months) {
if (this.userReceivingGift?._id) {
if (months < 2) {
return this.$t('oneMonthGift');
}
return this.$t('nMonthsGift', { months });
}
if (months < 2) {
return this.$t('recurringMonthly');
}
return (this.$t('recurringNMonthly', { length: months }));
},
subscriptionBubbles (subscription) {
switch (subscription) {
case 'basic_3mo':
@@ -193,7 +412,7 @@ export default {
},
updateSubscriptionData (key) {
this.subscription.key = key;
if (this.userReceivingGift._id) this.gift.subscription.key = key;
if (this.userReceivingGift?._id) this.gift.subscription.key = key;
},
},
};