mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 14:47:53 +01:00
Group plan landing page (#10222)
* Updated task page styles * Added initial page styles * Added login and payments * Updated more styles * Added white header * Added group plan overview modal * Updated copy * Fixed location * Style updates * Added analytics * More style updates * Added locales * Removed duplicate key
This commit is contained in:
Keith Holliday
GitHub
174
website/client/components/group-plans/createGroupModalPages.vue
Normal file
174
website/client/components/group-plans/createGroupModalPages.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template lang="pug">
|
||||
.create-group-modal-pages
|
||||
.col-12(v-if='activePage === PAGES.CREATE_GROUP')
|
||||
h2 {{ $t('nameYourGroup') }}
|
||||
.form-group
|
||||
label.control-label(for='new-group-name') {{ $t('name') }}
|
||||
input.form-control#new-group-name.input-medium.option-content(required, type='text', :placeholder="$t('exampleGroupName')", v-model='newGroup.name')
|
||||
.form-group
|
||||
label(for='new-group-description') {{ $t('description') }}
|
||||
textarea.form-control#new-group-description.option-content(cols='3', :placeholder="$t('exampleGroupDesc')", v-model='newGroup.description')
|
||||
.form-group.text-left(v-if='newGroup.type === "guild"')
|
||||
.custom-control.custom-radio
|
||||
input.custom-control-input(type='radio', name='new-group-privacy', value='private', v-model='newGroup.privacy')
|
||||
label.custom-control-label {{ $t('thisGroupInviteOnly') }}
|
||||
.form-group.text-left
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type='checkbox', v-model='newGroup.leaderOnly.challenges' id='create-group-leaderOnlyChallenges-checkbox')
|
||||
label.custom-control-label(for='create-group-leaderOnlyChallenges-checkbox') {{ $t('leaderOnlyChallenges') }}
|
||||
.form-group(v-if='newGroup.type === "party"')
|
||||
button.btn.btn-secondary.form-control(@click='createGroup()', :value="$t('createGroupPlan')")
|
||||
.form-group
|
||||
button.btn.btn-primary.btn-lg.btn-block(@click="createGroup()", :disabled="!newGroupIsReady") {{ $t('createGroupPlan') }}
|
||||
.col-12(v-if='activePage === PAGES.PAY')
|
||||
h2 {{ $t('choosePaymentMethod') }}
|
||||
.payment-providers
|
||||
.box.payment-button(@click='pay(PAYMENTS.STRIPE)')
|
||||
.svg-icon.credit-card-icon(v-html="icons.creditCard")
|
||||
.box.payment-button.amazon(@click='pay(PAYMENTS.AMAZON)')
|
||||
.svg-icon.amazon-pay-icon(v-html="icons.amazonpay")
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
h2 {
|
||||
font-family: 'Varela Round', sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 29px;
|
||||
color: #34313a;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-radius: 2px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
|
||||
padding: 2em;
|
||||
text-align: center;
|
||||
vertical-align: bottom;
|
||||
height: 100px;
|
||||
width: 306px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.box .svg-icon {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.box:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.amazon-pay-icon {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.credit-card-icon {
|
||||
width: 150px;
|
||||
color: #4e4a57;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.payment-button.amazon {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import * as Analytics from 'client/libs/analytics';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import paymentsMixin from '../../mixins/payments';
|
||||
|
||||
import amazonpay from 'assets/svg/amazonpay.svg';
|
||||
import creditCard from 'assets/svg/credit-card.svg';
|
||||
|
||||
export default {
|
||||
mixins: [paymentsMixin],
|
||||
data () {
|
||||
return {
|
||||
amazonPayments: {},
|
||||
icons: Object.freeze({
|
||||
amazonpay,
|
||||
creditCard,
|
||||
}),
|
||||
PAGES: {
|
||||
CREATE_GROUP: 'create-group',
|
||||
UPGRADE_GROUP: 'upgrade-group',
|
||||
PAY: 'pay',
|
||||
},
|
||||
PAYMENTS: {
|
||||
AMAZON: 'amazon',
|
||||
STRIPE: 'stripe',
|
||||
},
|
||||
activePage: 'create-group',
|
||||
newGroup: {
|
||||
type: 'guild',
|
||||
privacy: 'private',
|
||||
name: '',
|
||||
leaderOnly: {
|
||||
challenges: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
newGroupIsReady () {
|
||||
return Boolean(this.newGroup.name);
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
Analytics.track({
|
||||
hitType: 'event',
|
||||
eventCategory: 'group-plans-static',
|
||||
eventAction: 'view',
|
||||
eventLabel: 'create-group',
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
changePage (page) {
|
||||
Analytics.track({
|
||||
hitType: 'event',
|
||||
eventCategory: 'group-plans-static',
|
||||
eventAction: 'view',
|
||||
eventLabel: page,
|
||||
});
|
||||
this.activePage = page;
|
||||
window.scrollTo(0, 0);
|
||||
},
|
||||
createGroup () {
|
||||
this.changePage(this.PAGES.PAY);
|
||||
},
|
||||
pay (paymentMethod) {
|
||||
const subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
|
||||
let paymentData = {
|
||||
subscription: subscriptionKey,
|
||||
coupon: null,
|
||||
};
|
||||
|
||||
if (this.upgradingGroup && this.upgradingGroup._id) {
|
||||
paymentData.groupId = this.upgradingGroup._id;
|
||||
} else {
|
||||
paymentData.groupToCreate = this.newGroup;
|
||||
}
|
||||
|
||||
this.paymentMethod = paymentMethod;
|
||||
if (this.paymentMethod === this.PAYMENTS.STRIPE) {
|
||||
this.showStripe(paymentData);
|
||||
} else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
|
||||
paymentData.type = 'subscription';
|
||||
this.amazonPaymentsInit(paymentData);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user