mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-05-20 04:38:55 +00:00
Merge branch 'group-tracking-modal' into release
This commit is contained in:
SabreCat
commit
57d3fea523
12 changed files with 612 additions and 180 deletions
|
|
@ -180,8 +180,8 @@ input, textarea, input.form-control, textarea.form-control {
|
|||
}
|
||||
|
||||
// used in checkboxes and radios
|
||||
$bg-focused-active-control: #4f2993;
|
||||
$bg-disabled-control: #34303a;
|
||||
$bg-focused-active-control: $purple-200;
|
||||
$bg-disabled-control: $gray-10;
|
||||
|
||||
// custom control
|
||||
.custom-control {
|
||||
|
|
@ -231,17 +231,21 @@ $bg-disabled-control: #34303a;
|
|||
background-color: inherit;
|
||||
}
|
||||
|
||||
&:focus:not(:checked):not(:disabled)~.custom-control-label::before, &:active:not(:checked):not(:disabled)~.custom-control-label::before {
|
||||
box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
|
||||
&:focus:not(:checked):not(:disabled)~.custom-control-label::before,
|
||||
&:active:not(:checked):not(:disabled)~.custom-control-label::before {
|
||||
border: 2px solid $gray-300;
|
||||
box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
|
||||
}
|
||||
|
||||
&:focus:checked:not(:disabled)~.custom-control-label::before, &:active:checked:not(:disabled)~.custom-control-label::before {
|
||||
box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
|
||||
border-color: $purple-400;
|
||||
&:focus:checked:not(:disabled)~.custom-control-label::before,
|
||||
&:active:checked:not(:disabled)~.custom-control-label::before {
|
||||
box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
|
||||
border-color: 2 px solid $purple-400;
|
||||
background-color: $purple-400;
|
||||
}
|
||||
|
||||
&:focus:disabled~.custom-control-label::before, &:active:disabled~.custom-control-label::before {
|
||||
&:focus:disabled~.custom-control-label::before,
|
||||
&:active:disabled~.custom-control-label::before {
|
||||
box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<!-- THIS IS A VERY OLD FILE DO NOT USE -->
|
||||
<template>
|
||||
<div class="create-group-modal-pages">
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -0,0 +1,356 @@
|
|||
<template>
|
||||
<b-modal
|
||||
id="create-group"
|
||||
:title="activePage === PAGES.CREATE_GROUP ? 'Create your Group' : 'Select Payment'"
|
||||
:hide-footer="true"
|
||||
:hide-header="true"
|
||||
size="md"
|
||||
@hide="onHide()"
|
||||
>
|
||||
<div
|
||||
v-if="activePage === PAGES.CREATE_GROUP"
|
||||
class="col-12"
|
||||
>
|
||||
<!-- HEADER -->
|
||||
<div
|
||||
class="modal-close"
|
||||
>
|
||||
<span
|
||||
class="cancel-text"
|
||||
@click="close()"
|
||||
>
|
||||
{{ $t('cancel') }}
|
||||
</span>
|
||||
<button
|
||||
class="btn btn-primary next-button"
|
||||
:value="$t('next')"
|
||||
:disabled="!newGroupIsReady"
|
||||
@click="createGroup()"
|
||||
>
|
||||
{{ $t('next') }}
|
||||
</button>
|
||||
</div>
|
||||
<h2>{{ $t('createGroup') }}</h2>
|
||||
|
||||
<!-- FORM -->
|
||||
<div class="form-group">
|
||||
<lockable-label
|
||||
:text="$t('nameStar')"
|
||||
/>
|
||||
<input
|
||||
id="new-group-name"
|
||||
v-model="newGroup.name"
|
||||
class="form-control input-medium option-content name-input"
|
||||
required="required"
|
||||
type="text"
|
||||
:placeholder="$t('nameStarText')"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<lockable-label
|
||||
for="new-group-description"
|
||||
:text="$t('descriptionOptional')"
|
||||
class="description-label"
|
||||
/>
|
||||
<div class="characters-remaining">
|
||||
{{ $t('charactersRemaining', {characters: charactersRemaining}) }}
|
||||
</div>
|
||||
<textarea
|
||||
id="new-group-description"
|
||||
v-model="newGroup.description"
|
||||
class="form-control option-content description-input"
|
||||
cols="3"
|
||||
:placeholder="$t('descriptionOptionalText')"
|
||||
maxlength="250"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input
|
||||
id="create-group-leaderOnlyChallenges-checkbox"
|
||||
v-model="newGroup.leaderOnly.challenges"
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="create-group-leaderOnlyChallenges-checkbox"
|
||||
>{{ $t('leaderOnlyChallenges') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<lockable-label
|
||||
:text="$t('groupUse')"
|
||||
/>
|
||||
<select-translated-array
|
||||
:items="[
|
||||
'groupParentChildren',
|
||||
'groupCouple',
|
||||
'groupFriends',
|
||||
'groupCoworkers',
|
||||
'groupManager',
|
||||
'groupTeacher'
|
||||
]"
|
||||
class="group-input"
|
||||
:placeholder="'groupUseDefault'"
|
||||
:value="newGroup.demographics"
|
||||
@select="newGroup.demographics = $event"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button
|
||||
class="btn btn-primary btn-lg btn-block btn-payment"
|
||||
:disabled="!newGroupIsReady"
|
||||
@click="createGroup()"
|
||||
>
|
||||
{{ $t('nextPaymentMethod') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PAYMENT -->
|
||||
<!-- @TODO: Separate payment into a separate modal -->
|
||||
<div
|
||||
v-if="activePage === PAGES.PAY"
|
||||
class="col-12 payments"
|
||||
>
|
||||
<div class="text-center">
|
||||
<payments-buttons
|
||||
:stripe-fn="() => pay(PAYMENTS.STRIPE)"
|
||||
:amazon-data="pay(PAYMENTS.AMAZON)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
h2 {
|
||||
color: $purple-300;
|
||||
font-size: 1.25rem;
|
||||
height: 28px;
|
||||
width: 120px;
|
||||
margin-top: 24px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.cancel-text {
|
||||
color: $blue-10;
|
||||
font-size: 0.875rem;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.next-button {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: $gray-50;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.description-label {
|
||||
margin-bottom: -24px;
|
||||
}
|
||||
|
||||
.name-input, .description-input, .group-input {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.characters-remaining {
|
||||
color: $gray-100;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
text-align: right;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.description-input {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
|
||||
.btn-payment {
|
||||
margin: 24px 112px 24px 112px;
|
||||
width: 177px;
|
||||
}
|
||||
|
||||
.payments {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.payment-options {
|
||||
margin-bottom: 4em;
|
||||
|
||||
.purple-box {
|
||||
background-color: #4f2a93;
|
||||
color: #fff;
|
||||
padding: .5em;
|
||||
border-radius: 8px;
|
||||
width: 200px;
|
||||
height: 215px;
|
||||
|
||||
.dollar {
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100px;
|
||||
margin-left: .3em;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.box, .purple-box {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
@import '~@/assets/scss/mixins.scss';
|
||||
#create-group {
|
||||
.modal-dialog {
|
||||
max-width: 448px;
|
||||
}
|
||||
.modal-content {
|
||||
width: 448px;
|
||||
max-height: 436px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 14px 28px 0 rgba(26, 24, 29, 0.24), 0 10px 10px 0 rgba(26, 24, 29, 0.28);
|
||||
}
|
||||
.modal-body{
|
||||
padding: 0px;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
cursor: pointer;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import paymentsMixin from '../../mixins/payments';
|
||||
import { mapState } from '@/libs/store';
|
||||
import paymentsButtons from '@/components/payments/buttons/list';
|
||||
import selectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
|
||||
import lockableLabel from '@/components/tasks/modal-controls/lockableLabel';
|
||||
import * as Analytics from '@/libs/analytics';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
paymentsButtons,
|
||||
selectTranslatedArray,
|
||||
lockableLabel,
|
||||
},
|
||||
mixins: [paymentsMixin],
|
||||
data () {
|
||||
return {
|
||||
amazonPayments: {},
|
||||
PAGES: {
|
||||
CREATE_GROUP: 'create-group',
|
||||
// UPGRADE_GROUP: 'upgrade-group',
|
||||
PAY: 'pay',
|
||||
},
|
||||
PAYMENTS: {
|
||||
AMAZON: 'amazon',
|
||||
STRIPE: 'stripe',
|
||||
},
|
||||
paymentMethod: '',
|
||||
newGroup: {
|
||||
type: 'guild',
|
||||
privacy: 'private',
|
||||
name: '',
|
||||
description: '',
|
||||
leaderOnly: {
|
||||
challenges: false,
|
||||
},
|
||||
demographics: null,
|
||||
user: '',
|
||||
},
|
||||
activePage: 'create-group',
|
||||
type: 'guild',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({ user: 'user.data' }),
|
||||
newGroupIsReady () {
|
||||
return Boolean(this.newGroup.name) && Boolean(this.newGroup.demographics);
|
||||
},
|
||||
charactersRemaining () {
|
||||
const currentLength = this.newGroup.description ? this.newGroup.description.length : 0;
|
||||
return 250 - currentLength;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
this.$root.$emit('bv::hide::modal', 'create-group');
|
||||
},
|
||||
changePage (page) {
|
||||
this.activePage = page;
|
||||
},
|
||||
createGroup () {
|
||||
this.changePage(this.PAGES.PAY);
|
||||
},
|
||||
pay (paymentMethod) {
|
||||
const subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
|
||||
const demographicsKey = this.newGroup.demographics;
|
||||
const paymentData = {
|
||||
subscription: subscriptionKey,
|
||||
coupon: null,
|
||||
demographics: demographicsKey,
|
||||
};
|
||||
|
||||
Analytics.track({
|
||||
hitType: 'event',
|
||||
eventName: 'group plan create',
|
||||
eventAction: 'group plan create',
|
||||
eventCategory: 'behavior',
|
||||
demographics: this.newGroup.demographics,
|
||||
type: this.newGroup.type,
|
||||
}, { trackOnClient: true });
|
||||
|
||||
if (this.upgradingGroup && this.upgradingGroup._id) {
|
||||
paymentData.groupId = this.upgradingGroup._id;
|
||||
paymentData.group = this.upgradingGroup;
|
||||
} else {
|
||||
paymentData.groupToCreate = this.newGroup;
|
||||
}
|
||||
|
||||
this.paymentMethod = paymentMethod;
|
||||
|
||||
if (this.paymentMethod === this.PAYMENTS.AMAZON) {
|
||||
paymentData.type = 'subscription';
|
||||
return paymentData;
|
||||
}
|
||||
|
||||
if (this.paymentMethod === this.PAYMENTS.STRIPE) {
|
||||
this.redirectToStripe(paymentData);
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
onHide () {
|
||||
this.sendingInProgress = false;
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<!-- @TODO: Move to group plans folder-->
|
||||
<div>
|
||||
<group-plan-creation-modal />
|
||||
<div>
|
||||
<div class="header">
|
||||
<h1 class="text-center">
|
||||
|
|
@ -51,6 +52,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Upgrading an existing group -->
|
||||
<div
|
||||
v-if="upgradingGroup._id"
|
||||
id="upgrading-group"
|
||||
|
|
@ -100,153 +102,53 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Create a new group -->
|
||||
<div
|
||||
v-if="!upgradingGroup._id"
|
||||
class="container col-6 offset-3 create-option"
|
||||
>
|
||||
<div class="row">
|
||||
<h1 class="col-12 text-center purple-header">
|
||||
Create your Group today!
|
||||
Create Your Group Today!
|
||||
</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<button
|
||||
class="btn btn-primary create-group"
|
||||
@click="launchModal('create')"
|
||||
@click="launchModal('create-page')"
|
||||
>
|
||||
Create Your New Group
|
||||
Create Your New Group!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pricing">
|
||||
<div class="col-5">
|
||||
<div class="dollar">
|
||||
$
|
||||
</div>
|
||||
<div class="number">
|
||||
9
|
||||
</div>
|
||||
<div class="name">
|
||||
<div>Group Owner</div>
|
||||
<div>Subscription</div>
|
||||
</div>
|
||||
<div class="row pricing justify-content-center align-items-center">
|
||||
<div class="dollar">
|
||||
$
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="plus">
|
||||
+
|
||||
</div>
|
||||
<div class="number">
|
||||
9
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="dollar">
|
||||
$
|
||||
</div>
|
||||
<div class="number">
|
||||
3
|
||||
</div>
|
||||
<div class="name">
|
||||
<div>Each Additional</div>
|
||||
<div>Member</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div>Group Owner</div>
|
||||
<div>Subscription</div>
|
||||
</div>
|
||||
<div class="plus">
|
||||
+
|
||||
</div>
|
||||
<div class="dollar">
|
||||
$
|
||||
</div>
|
||||
<div class="number">
|
||||
3
|
||||
</div>
|
||||
<div class="name">
|
||||
<div>Each Additional</div>
|
||||
<div>Member</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<b-modal
|
||||
id="group-plan-modal"
|
||||
:title="activePage === PAGES.CREATE_GROUP ? 'Create your Group' : 'Select Payment'"
|
||||
size="md"
|
||||
hide-footer="hide-footer"
|
||||
>
|
||||
<div
|
||||
v-if="activePage === PAGES.CREATE_GROUP"
|
||||
class="col-12"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label
|
||||
class="control-label"
|
||||
for="new-group-name"
|
||||
>Name</label>
|
||||
<input
|
||||
id="new-group-name"
|
||||
v-model="newGroup.name"
|
||||
class="form-control input-medium option-content"
|
||||
required="required"
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-group-description">{{ $t('description') }}</label>
|
||||
<textarea
|
||||
id="new-group-description"
|
||||
v-model="newGroup.description"
|
||||
class="form-control option-content"
|
||||
cols="3"
|
||||
:placeholder="$t('description')"
|
||||
></textarea>
|
||||
</div>
|
||||
<div
|
||||
v-if="type === 'guild'"
|
||||
class="form-group"
|
||||
>
|
||||
<div class="custom-control custom-radio">
|
||||
<input
|
||||
v-model="newGroup.privacy"
|
||||
class="custom-control-input"
|
||||
type="radio"
|
||||
name="new-group-privacy"
|
||||
value="private"
|
||||
>
|
||||
<label class="custom-control-label">{{ $t('inviteOnly') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input
|
||||
id="create-group-leaderOnlyChallenges-checkbox"
|
||||
v-model="newGroup.leaderOnly.challenges"
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="create-group-leaderOnlyChallenges-checkbox"
|
||||
>{{ $t('leaderOnlyChallenges') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="type === 'party'"
|
||||
class="form-group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-secondary form-control"
|
||||
:value="$t('create')"
|
||||
@click="createGroup()"
|
||||
></button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button
|
||||
class="btn btn-primary btn-lg btn-block"
|
||||
:disabled="!newGroupIsReady"
|
||||
@click="createGroup()"
|
||||
>
|
||||
{{ $t('create') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="activePage === PAGES.PAY"
|
||||
class="col-12"
|
||||
>
|
||||
<div class="text-center">
|
||||
<payments-buttons
|
||||
:stripe-fn="() => pay(PAYMENTS.STRIPE)"
|
||||
:amazon-data="pay(PAYMENTS.AMAZON)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -258,8 +160,8 @@
|
|||
|
||||
.dollar {
|
||||
position: absolute;
|
||||
left: -1em;
|
||||
top: 1em;
|
||||
left: -16px;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.purple-box {
|
||||
|
|
@ -291,9 +193,9 @@
|
|||
background: #432874;
|
||||
background: linear-gradient(180deg, #4F2A93 0%, #432874 100%);
|
||||
color: #fff;
|
||||
padding: 2em;
|
||||
padding: 32px;
|
||||
height: 340px;
|
||||
margin-bottom: 2em;
|
||||
margin-bottom: 32px;
|
||||
margin-left: -12px;
|
||||
margin-right: -12px;
|
||||
|
||||
|
|
@ -317,6 +219,7 @@
|
|||
|
||||
.box {
|
||||
height: 416px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -359,17 +262,19 @@
|
|||
button.create-group {
|
||||
width: 330px;
|
||||
height: 96px;
|
||||
border-radius: 8px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.purple-header {
|
||||
color: #6133b4;
|
||||
font-size: 48px;
|
||||
margin-top: 1em;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.pricing {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 4em;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 64px;
|
||||
|
||||
.dollar, .number, .name {
|
||||
display: inline-block;
|
||||
|
|
@ -378,30 +283,32 @@
|
|||
}
|
||||
|
||||
.plus {
|
||||
font-size: 34px;
|
||||
font-size: 2.125rem;
|
||||
color: #a5a1ac;
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.dollar {
|
||||
margin-bottom: 1.5em;
|
||||
font-size: 32px;
|
||||
margin-bottom: 24px;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 24px;
|
||||
margin-bottom: .8em;
|
||||
margin-left: .5em;
|
||||
font-size: 1.5rem;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 72px;
|
||||
font-size: 4.5rem;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-options {
|
||||
margin-bottom: 4em;
|
||||
margin-bottom: 64px;
|
||||
|
||||
h4 {
|
||||
color: #34313a;
|
||||
|
|
@ -410,7 +317,7 @@
|
|||
.purple-box {
|
||||
background-color: #4f2a93;
|
||||
color: #fff;
|
||||
padding: .5em;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
width: 200px;
|
||||
height: 215px;
|
||||
|
|
@ -424,7 +331,7 @@
|
|||
|
||||
.name {
|
||||
width: 100px;
|
||||
margin-left: .3em;
|
||||
margin-left: 4.8px;
|
||||
}
|
||||
|
||||
.plus {
|
||||
|
|
@ -449,10 +356,12 @@ import paymentsMixin from '../../mixins/payments';
|
|||
import { mapState } from '@/libs/store';
|
||||
import positiveIcon from '@/assets/svg/positive.svg';
|
||||
import paymentsButtons from '@/components/payments/buttons/list';
|
||||
import groupPlanCreationModal from '../group-plans/groupPlanCreationModal';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
paymentsButtons,
|
||||
groupPlanCreationModal,
|
||||
},
|
||||
mixins: [paymentsMixin],
|
||||
data () {
|
||||
|
|
@ -501,12 +410,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
launchModal () {
|
||||
this.changePage(this.PAGES.CREATE_GROUP);
|
||||
this.$root.$emit('bv::show::modal', 'group-plan-modal');
|
||||
},
|
||||
changePage (page) {
|
||||
this.activePage = page;
|
||||
window.scrollTo(0, 0);
|
||||
this.$root.$emit('bv::show::modal', 'create-group');
|
||||
},
|
||||
createGroup () {
|
||||
this.changePage(this.PAGES.PAY);
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ export default {
|
|||
appState.group = pick(this.amazonPayments.groupToCreate, ['_id', 'memberCount', 'name']);
|
||||
} else {
|
||||
appState.newGroup = false;
|
||||
appState.group = pick(this.amazonPayments.group, ['_id', 'memberCount', 'name']);
|
||||
appState.group = pick(this.amazonPayments.group, ['_id', 'memberCount', 'name', 'type']);
|
||||
}
|
||||
} else if (paymentType && paymentType.indexOf('gift-') === 0) {
|
||||
appState.gift = this.amazonPayments.gift;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<b-modal
|
||||
id="payments-success-modal"
|
||||
:title="$t('accountSuspendedTitle')"
|
||||
:hide-footer="isFromBalance"
|
||||
:modal-class="isFromBalance ? ['modal-hidden-footer'] : []"
|
||||
:hide-footer="isFromBalance || paymentData.newGroup"
|
||||
:modal-class="isFromBalance || paymentData.newGroup ? ['modal-hidden-footer'] : []"
|
||||
>
|
||||
<div slot="modal-header">
|
||||
<div class="check-container d-flex align-items-center justify-content-center">
|
||||
|
|
@ -16,15 +16,49 @@
|
|||
<h2>{{ $t(isFromBalance ? 'success' : 'paymentSuccessful') }}</h2>
|
||||
</div>
|
||||
<div slot="modal-footer">
|
||||
<!-- everyone else -->
|
||||
<div
|
||||
v-once
|
||||
v-if="paymentData.paymentType !== 'groupPlan' || paymentData.newGroup"
|
||||
class="small-text"
|
||||
>
|
||||
{{ $t('giftSubscriptionText4') }}
|
||||
</div>
|
||||
<!-- upgradedGroup -->
|
||||
<div
|
||||
v-else
|
||||
class="demographics d-flex flex-column justify-content-center"
|
||||
>
|
||||
<lockable-label
|
||||
:text="$t('groupUse')"
|
||||
class="mx-auto label-text"
|
||||
/>
|
||||
<select-translated-array
|
||||
:items="[
|
||||
'groupParentChildren',
|
||||
'groupCouple',
|
||||
'groupFriends',
|
||||
'groupCoworkers',
|
||||
'groupManager',
|
||||
'groupTeacher'
|
||||
]"
|
||||
class="group-input"
|
||||
:placeholder="'groupUseDefault'"
|
||||
:value="upgradedGroup.demographics"
|
||||
@select="upgradedGroup.demographics = $event"
|
||||
/>
|
||||
<button
|
||||
v-if="!paymentData.newGroup"
|
||||
class="btn btn-primary mx-auto"
|
||||
:disabled="!upgradedGroup.demographics"
|
||||
@click="submit()"
|
||||
>
|
||||
{{ $t('submit') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 modal-body-col">
|
||||
<!-- buy gems for self -->
|
||||
<template v-if="paymentData.paymentType === 'gems'">
|
||||
<strong v-once>{{ $t('paymentYouReceived') }}</strong>
|
||||
<div class="details-block gems">
|
||||
|
|
@ -36,6 +70,7 @@
|
|||
<span>{{ paymentData.gemsBlock.gems }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- buy or gift gems to someone else -->
|
||||
<template
|
||||
v-if="paymentData.paymentType === 'gift-gems'
|
||||
|| paymentData.paymentType === 'gift-gems-balance'"
|
||||
|
|
@ -50,12 +85,14 @@
|
|||
<span>{{ paymentData.gift.gems.amount }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- give gift subscription (non-recurring)-->
|
||||
<template v-if="paymentData.paymentType === 'gift-subscription'">
|
||||
<span
|
||||
v-html="$t('paymentYouSentSubscription', {
|
||||
name: paymentData.giftReceiver, months: paymentData.subscription.months})"
|
||||
></span>
|
||||
</template>
|
||||
<!-- buy self subscription (recurring) -->
|
||||
<template v-if="paymentData.paymentType === 'subscription'">
|
||||
<strong v-once>{{ $t('nowSubscribed') }}</strong>
|
||||
<div class="details-block">
|
||||
|
|
@ -65,31 +102,45 @@
|
|||
></span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- group plan new or upgraded -->
|
||||
<template v-if="paymentData.paymentType === 'groupPlan'">
|
||||
<span
|
||||
v-html="$t(paymentData.newGroup
|
||||
? 'groupPlanCreated' : 'groupPlanUpgraded', {groupName: paymentData.group.name})"
|
||||
></span>
|
||||
<div class="details-block">
|
||||
<span
|
||||
v-html="$t('paymentSubBilling', {
|
||||
amount: groupPlanCost, months: paymentData.subscription.months})"
|
||||
></span>
|
||||
<div
|
||||
v-if="!paymentData.newGroup || paymentData.newGroup"
|
||||
class=""
|
||||
>
|
||||
<div class="details-block group-billing-date">
|
||||
<span
|
||||
v-html="$t('groupsPaymentSubBilling', { renewalDate })"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div class="small-text group-auto-renew">
|
||||
<span
|
||||
v-once
|
||||
>{{ $t('groupsPaymentAutoRenew') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- buy self subscription auto renew -->
|
||||
<template
|
||||
v-if="paymentData.paymentType === 'groupPlan'
|
||||
|| paymentData.paymentType === 'subscription'"
|
||||
v-if="paymentData.paymentType === 'subscription'"
|
||||
>
|
||||
<span
|
||||
v-once
|
||||
class="small-text auto-renew"
|
||||
>{{ $t('paymentAutoRenew') }}</span>
|
||||
</template>
|
||||
<!-- buttons for subscriptions -->
|
||||
<button
|
||||
v-if="paymentData.paymentType !== 'groupPlan'"
|
||||
v-once
|
||||
class="btn btn-primary"
|
||||
@click="close()"
|
||||
@click="submit()"
|
||||
>
|
||||
{{ $t('onwards') }}
|
||||
</button>
|
||||
|
|
@ -102,7 +153,7 @@
|
|||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
#payments-success-modal .modal-md {
|
||||
max-width: 20.5rem;
|
||||
max-width: 448px;
|
||||
}
|
||||
|
||||
#payments-success-modal .modal-content {
|
||||
|
|
@ -114,6 +165,7 @@
|
|||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
#payments-success-modal .modal-header {
|
||||
justify-content: center;
|
||||
padding-top: 24px;
|
||||
|
|
@ -124,14 +176,14 @@
|
|||
border-bottom: none;
|
||||
|
||||
h2 {
|
||||
color: white;
|
||||
color: $green-1;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: #1CA372;
|
||||
background: $green-1;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
@ -139,14 +191,13 @@
|
|||
.check {
|
||||
width: 35.1px;
|
||||
height: 28px;
|
||||
color: white;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
#payments-success-modal .modal-body {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 24px;
|
||||
background: white;
|
||||
padding: 16px 32px 24px 32px;
|
||||
background: $white;
|
||||
|
||||
.modal-body-col {
|
||||
display: flex;
|
||||
|
|
@ -162,9 +213,9 @@
|
|||
.details-block {
|
||||
background: $gray-700;
|
||||
border-radius: 4px;
|
||||
padding: 8px 24px;
|
||||
padding: 8px 16px;
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
text-align: center;
|
||||
|
||||
|
|
@ -188,6 +239,14 @@
|
|||
color: $orange-10;
|
||||
font-style: normal;
|
||||
}
|
||||
.group-auto-renew {
|
||||
margin: 12px 20px -8px 20px;
|
||||
color: $yellow-5;
|
||||
font-style: normal;
|
||||
}
|
||||
.group-billing-date {
|
||||
width: 269px;
|
||||
}
|
||||
}
|
||||
|
||||
#payments-success-modal .modal-footer {
|
||||
|
|
@ -201,14 +260,49 @@
|
|||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.demographics {
|
||||
background-color: $gray-700;
|
||||
|
||||
.label-text {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.group-input {
|
||||
width: 400px !important;
|
||||
margin-top: -24px !important;
|
||||
}
|
||||
.btn {
|
||||
margin-top: 0px;
|
||||
width: 77px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/assets/scss/mixins.scss';
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
import checkIcon from '@/assets/svg/check.svg';
|
||||
import gemIcon from '@/assets/svg/gem.svg';
|
||||
import { mapState } from '@/libs/store';
|
||||
import subscriptionBlocks from '@/../../common/script/content/subscriptionBlocks';
|
||||
import selectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
|
||||
import lockableLabel from '@/components/tasks/modal-controls/lockableLabel';
|
||||
import paymentsMixin from '@/mixins/payments';
|
||||
import * as Analytics from '@/libs/analytics';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
selectTranslatedArray,
|
||||
lockableLabel,
|
||||
},
|
||||
mixins: [paymentsMixin],
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
|
|
@ -216,9 +310,14 @@ export default {
|
|||
gem: gemIcon,
|
||||
}),
|
||||
paymentData: {},
|
||||
upgradedGroup: {
|
||||
name: '',
|
||||
demographics: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({ user: 'user.data', group: 'group.data' }),
|
||||
groupPlanCost () {
|
||||
const sub = this.paymentData.subscription;
|
||||
const memberCount = this.paymentData.group.memberCount || 1;
|
||||
|
|
@ -227,6 +326,21 @@ export default {
|
|||
isFromBalance () {
|
||||
return this.paymentData.paymentType === 'gift-gems-balance';
|
||||
},
|
||||
// upgradedGroup () {
|
||||
// const upgradedGroup = (this.paymentData.paymentType === 'groupPlan'
|
||||
// && !this.paymentData.newGroup);
|
||||
// const demographicsKey = upgradedGroup.demographics;
|
||||
// const upgradedGroupName = upgradedGroup.name;
|
||||
// const upgradedGroupType = upgradedGroup.type;
|
||||
// const groupPlanUpgraded = {
|
||||
// demographics: demographicsKey,
|
||||
// name: upgradedGroupName,
|
||||
// type: upgradedGroupType,
|
||||
// };
|
||||
// console.log(groupPlanUpgraded.demographics,
|
||||
// groupPlanUpgraded.name, groupPlanUpgraded.type);
|
||||
// return groupPlanUpgraded;
|
||||
// },
|
||||
},
|
||||
mounted () {
|
||||
this.$root.$on('habitica:payment-success', data => {
|
||||
|
|
@ -242,7 +356,17 @@ export default {
|
|||
this.$root.$off('habitica:payments-success');
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
submit () {
|
||||
if (!this.paymentData.newGroup) {
|
||||
Analytics.track({
|
||||
hitType: 'event',
|
||||
eventName: 'group plan upgrade',
|
||||
eventAction: 'group plan upgrade',
|
||||
eventCategory: 'behavior',
|
||||
demographics: this.upgradedGroup.demographics,
|
||||
type: this.paymentData.group.type, // also tried this.upgradedGroup.type
|
||||
}, { trackOnClient: true });
|
||||
}
|
||||
this.paymentData = {};
|
||||
this.$root.$emit('bv::hide::modal', 'payments-success-modal');
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
:right="right"
|
||||
:hide-icon="false"
|
||||
:inline-dropdown="inlineDropdown"
|
||||
:placeholder="placeholder"
|
||||
@select="selectItem($event)"
|
||||
>
|
||||
<template v-slot:item="{ item }">
|
||||
|
|
@ -70,6 +71,9 @@ export default {
|
|||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<template v-slot:button-content>
|
||||
<slot
|
||||
name="item"
|
||||
:item="selected"
|
||||
:item="selected || placeholder"
|
||||
:button="true"
|
||||
>
|
||||
<!-- Fallback content -->
|
||||
|
|
@ -114,6 +114,9 @@ export default {
|
|||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -39,6 +39,13 @@ export default {
|
|||
return moment(this.user.purchased.plan.dateTerminated)
|
||||
.format(this.user.preferences.dateFormat.toUpperCase());
|
||||
},
|
||||
renewalDate () {
|
||||
const renewalDate = moment().add(1, 'months');
|
||||
if (!this.user.preferences || !this.user.preferences.dateFormat) {
|
||||
return renewalDate;
|
||||
}
|
||||
return renewalDate.format(this.user.preferences.dateFormat.toUpperCase());
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
encodeGift (uuid, gift) {
|
||||
|
|
@ -140,6 +147,7 @@ export default {
|
|||
if (data.subscription) postData.sub = sub.key;
|
||||
if (data.coupon) postData.coupon = data.coupon;
|
||||
if (data.groupId) postData.groupId = data.groupId;
|
||||
if (data.demographics) postData.demographics = data.demographics;
|
||||
|
||||
const response = await axios.post(url, postData);
|
||||
|
||||
|
|
@ -267,6 +275,10 @@ export default {
|
|||
this.amazonPayments.groupToCreate = data.groupToCreate;
|
||||
}
|
||||
|
||||
if (data.demographics) { // sending demographics
|
||||
this.amazonPayments.demographics = data.demographics;
|
||||
}
|
||||
|
||||
this.amazonPayments.gift = data.gift;
|
||||
this.amazonPayments.type = data.type;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -215,7 +215,7 @@
|
|||
"userIsClamingTask": "`<%= username %> has claimed:` <%= task %>",
|
||||
"approvalRequested": "Approval Requested",
|
||||
"cantDeleteAssignedGroupTasks": "Can't delete group tasks that are assigned to you.",
|
||||
"groupPlanUpgraded": "<strong><%- groupName %></strong> was upgraded to a Group Plan!",
|
||||
"groupPlanUpgraded": "<strong><%- groupName %></strong> was successfully upgraded to a Group Plan!",
|
||||
"groupPlanCreated": "<strong><%- groupName %></strong> was created!",
|
||||
"onlyGroupLeaderCanInviteToGroupPlan": "Only the group leader can invite users to a group with a subscription.",
|
||||
"paymentDetails": "Payment Details",
|
||||
|
|
@ -342,7 +342,22 @@
|
|||
"exampleGroupName": "Example: Avengers Academy",
|
||||
"exampleGroupDesc": "For those selected to join the training academy for The Avengers Superhero Initiative",
|
||||
"thisGroupInviteOnly": "This group is invitation only.",
|
||||
"createGroup": "Create a Group",
|
||||
"groupUse": "Which best describes the use of your Group?*",
|
||||
"groupUseDefault": "Choose an answer",
|
||||
"groupParentChildren": "Parent(s) setting up tasks for children",
|
||||
"groupCouple": "Couple sharing tasks",
|
||||
"groupFriends": "Friends sharing tasks",
|
||||
"groupCoworkers": "Coworkers sharing tasks",
|
||||
"groupManager": "Manager setting up tasks for employees",
|
||||
"groupTeacher": "Teacher setting up tasks for students",
|
||||
"gettingStarted": "Getting Started",
|
||||
"next": "Next",
|
||||
"nameStar": "Name*",
|
||||
"nameStarText": "Add a title",
|
||||
"descriptionOptional": "Description",
|
||||
"descriptionOptionalText": "Add a description",
|
||||
"nextPaymentMethod": "Next: Payment Method",
|
||||
"congratsOnGroupPlan": "Congratulations on creating your new Group! Here are a few answers to some of the more commonly asked questions.",
|
||||
"whatsIncludedGroup": "What's included in the subscription",
|
||||
"whatsIncludedGroupDesc": "All members of the Group receive full subscription benefits, including the monthly subscriber items, the ability to buy Gems with Gold, and the Royal Purple Jackalope mount, which is exclusive to users with a Group Plan membership.",
|
||||
|
|
|
|||
|
|
@ -94,8 +94,10 @@
|
|||
"paymentYouSentGems": "You sent <strong><%- name %></strong>:",
|
||||
"paymentYouSentSubscription": "You sent <strong><%- name %></strong> a <%= months %>-months Habitica subscription.",
|
||||
"paymentSubBilling": "Your subscription will be billed <strong>$<%= amount %></strong> every <strong><%= months %> months</strong>.",
|
||||
"groupsPaymentSubBilling": "Your next billing date is <strong><%= renewalDate %></strong>.",
|
||||
"paymentSubBillingWithMethod": "Your subscription will be billed <strong>$<%= amount %></strong> every <strong><%= months %> months</strong> via <strong><%= paymentMethod %></strong>.",
|
||||
"paymentAutoRenew": "This subscription will auto-renew until it is canceled. If you need to cancel this subscription, you can do so from your settings.",
|
||||
"groupsPaymentAutoRenew": "This subscription will auto-renew until it is canceled. If you need to cancel, you can do so from the Group Billing tab.",
|
||||
"paymentCanceledDisputes": "We’ve sent a cancelation confirmation to your email. If you don’t see the email, please contact us to prevent future billing disputes.",
|
||||
"success": "Success!",
|
||||
"classGear": "Class Gear",
|
||||
|
|
|
|||
|
|
@ -86,6 +86,13 @@ async function createSubscription (data) {
|
|||
user: data.user, groupId: data.groupId, populateLeader: false, groupFields,
|
||||
});
|
||||
|
||||
if (group) {
|
||||
analytics.track(
|
||||
this.groupID,
|
||||
data.demographics,
|
||||
);
|
||||
}
|
||||
|
||||
if (!group) {
|
||||
throw new NotFound(shared.i18n.t('groupNotFound'));
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue