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

fix(subscriptions): more gift layout revisions

Browse Source
This commit is contained in:
Kalista Payne
2024-10-16 17:27:09 -05:00
parent a90ccb89de
commit 74633b5e5e
3 changed files with 56 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/src/components/payments/sendGiftModal.vue
+6 -5
View File
@@ -73,7 +73,7 @@
<!-- subscriber block -->
<subscription-options
v-show="selectedPage === 'subscription'"
class="subscribe-option py-3"
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,9 +285,6 @@
}
}
}
#subscription-form .subscribe-option {
background: #FFFFFF;
}
}
</style>
<style scoped lang="scss">
@@ -317,7 +319,6 @@
}
.row {
background-color: $gray-700;
margin: 0 0 0 0;
min-height: 32px;
}
website/client/src/components/settings/subscriptionOptions.vue
+43 -24
View File
@@ -2,8 +2,14 @@
<div id="subscription-form">
<div
class="w-100 h-100"
:class="{'mb-3': userReceivingGift?._id}"
: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 -->
<div
v-for="block in subscriptionBlocksOrdered"
@@ -15,7 +21,7 @@
selected: subscription.key === block.key,
'mb-2': block.months !== 12,
final: block.months === 12,
'mx-3': userReceivingGift?._id,
'mx-4': userReceivingGift?._id,
}"
@click="updateSubscriptionData(block.key)"
>
@@ -54,7 +60,10 @@
v-html="icons.plus"
>
</div>
<small v-html="$t('unlockNGems', { count: 24 })"></small>
<small
v-html="userReceivingGift?._id ? $t('unlockNGemsGift', { count: 24 })
: $t('unlockNGems', { count: 24 })"
></small>
</div>
<div class="d-flex align-items-center">
<div
@@ -63,7 +72,7 @@
>
</div>
<small
v-html="userReceivingGift?._id ? $t('plus2Gems') : $t('earn2Gems')"
v-html="userReceivingGift?._id ? $t('earn2GemsGift') : $t('earn2Gems')"
></small>
</div>
</div>
@@ -87,7 +96,10 @@
v-html="icons.plus"
>
</div>
<small v-html="$t('unlockNGems', { count: 50 })"></small>
<small
v-html="userReceivingGift?._id ? $t('unlockNGemsGift', { count: 50 })
: $t('unlockNGems', { count: 50 })"
></small>
</div>
<div class="d-flex align-items-center">
<div
@@ -95,7 +107,8 @@
v-html="icons.plus"
>
</div>
<small v-html="$t('maxGemCap')"></small>
<small v-html="userReceivingGift?._id ? $t('maxGemCapGift') : $t('maxGemCap')">
</small>
</div>
</div>
</div>
@@ -108,6 +121,11 @@
</div>
</div>
</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"
@@ -120,22 +138,6 @@
{{ $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}"
/>
<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
id="buy-subscription"
size="md"
@@ -143,6 +145,15 @@
: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,
@@ -217,10 +228,14 @@
}
}
strike {
strike, strong {
line-height: 24px;
}
.btn-primary {
min-width: 400px;
}
.gradient-banner small {
color: $teal-1;
width: 61%;
@@ -252,6 +267,7 @@
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;
.bg-white {
border-top-left-radius: 8px;
@@ -372,7 +388,10 @@ export default {
methods: {
recurrenceText (months) {
if (this.userReceivingGift?._id) {
return this.$t('oneTimeCharge');
if (months < 2) {
return this.$t('oneMonthGift');
}
return this.$t('nMonthsGift', { months });
}
if (months < 2) {
return this.$t('recurringMonthly');
website/common/locales/en/subscriber.json
+7 -2
View File
@@ -248,6 +248,11 @@
"popular": "Popular",
"immediate12Hourglasses": "Get <strong>12 Mystic Hourglasses</strong> immediately after your first 12-month subscription!",
"subscribe": "Subscribe",
"oneTimeCharge": "One time charge",
"plus2Gems": "<strong>+2 Gems</strong> every month of subscription"
"selectPayment": "Select Payment",
"giftSubscriptionLeadText": "Choose the subscription you'd like to gift below! This purchase will not automatically renew.",
"oneMonthGift": "For 1 month",
"nMonthsGift": "For <%= months %> months",
"unlockNGemsGift": "They'll unlock <strong><%= count %> Gems</strong> per month instantly",
"earn2GemsGift": "They'll earn <strong>+2 Gems</strong> every month they're subscribed",
"maxGemCapGift": "They'll have the max <strong>Gem Cap</strong>"
}