Merge branch 'group-tracking-modal' into release
This commit is contained in:
SabreCat
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user