WIP(groups): style and HTML corrections
Also workflows for static and non-upgrade logged-in scenarios
This commit is contained in:
Sabe Jones
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<!-- @TODO: Move to group plans folder-->
|
||||
<div class="groups-container">
|
||||
<group-plan-creation-modal />
|
||||
<group-plans />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.groups-container {
|
||||
background-color: white;
|
||||
background-image: url('../../assets/images/group-plans-static/top.svg');
|
||||
background-repeat: no-repeat;
|
||||
margin-left: -12px;
|
||||
margin-right: -12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import groupPlans from '../static/groupPlans.vue';
|
||||
import paymentsMixin from '../../mixins/payments';
|
||||
import { mapState } from '@/libs/store';
|
||||
// import paymentsButtons from '@/components/payments/buttons/list';
|
||||
import groupPlanCreationModal from '../group-plans/groupPlanCreationModal';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// paymentsButtons,
|
||||
groupPlanCreationModal,
|
||||
groupPlans,
|
||||
},
|
||||
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: '',
|
||||
leaderOnly: {
|
||||
challenges: false,
|
||||
},
|
||||
},
|
||||
activePage: '',
|
||||
type: 'guild', // Guild or Party @TODO enum this
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
newGroupIsReady () {
|
||||
return Boolean(this.newGroup.name);
|
||||
},
|
||||
upgradingGroup () {
|
||||
return this.$store.state.upgradingGroup;
|
||||
},
|
||||
// @TODO: can we move this to payment mixin?
|
||||
...mapState({ user: 'user.data' }),
|
||||
},
|
||||
mounted () {
|
||||
this.activePage = this.PAGES.BENEFITS;
|
||||
this.$store.dispatch('common:setTitle', {
|
||||
section: this.$t('groupPlans'),
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
launchModal () {
|
||||
this.$root.$emit('bv::show::modal', 'create-group');
|
||||
},
|
||||
createGroup () {
|
||||
this.changePage(this.PAGES.PAY);
|
||||
},
|
||||
pay (paymentMethod) {
|
||||
const subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
|
||||
const paymentData = {
|
||||
subscription: subscriptionKey,
|
||||
coupon: null,
|
||||
};
|
||||
|
||||
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;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -12,7 +12,8 @@
|
||||
class="party"
|
||||
src="../../assets/images/group-plans-static/party@3x.png"
|
||||
>
|
||||
<h1 class="mt-5">{{ $t('groupPlanTitle') }}</h1>
|
||||
<h1 class="mt-5" v-if="upgradingGroup._id">{{ $t('upgradeYourCrew') }}</h1>
|
||||
<h1 class="mt-5" v-else>{{ $t('groupPlanTitle') }}</h1>
|
||||
<p class="mb-0">{{ $t('groupPlanDesc') }}</p>
|
||||
<div class="pricing mt-5">
|
||||
<span>Just</span>
|
||||
@@ -34,23 +35,25 @@
|
||||
<div class="top-right"></div>
|
||||
<div class="d-flex justify-content-between align-items-middle w-100 gap-72 mb-100">
|
||||
<div class="ml-auto my-auto w-448 text-left">
|
||||
<h2>{{ $t('teamBasedTasksList') }}</h2>
|
||||
<h2 class="mt-0">{{ $t('teamBasedTasksList') }}</h2>
|
||||
<small>{{ $t('teamBasedTasksListDesc') }}</small>
|
||||
</div>
|
||||
<div class="mr-auto my-auto">
|
||||
<div
|
||||
<img
|
||||
class="team-based"
|
||||
></div>
|
||||
src="../../assets/images/group-plans-static/group-management@3x.png"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-middle w-100 gap-72 mb-100">
|
||||
<div class="ml-auto my-auto">
|
||||
<div
|
||||
<img
|
||||
class="group-management"
|
||||
></div>
|
||||
src="../../assets/images/group-plans-static/team-based@3x.png"
|
||||
>
|
||||
</div>
|
||||
<div class="mr-auto my-auto w-448 text-left">
|
||||
<h2>{{ $t('groupManagementControls') }}</h2>
|
||||
<h2 class="mt-0">{{ $t('groupManagementControls') }}</h2>
|
||||
<small>{{ $t('groupManagementControlsDesc') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,8 +68,11 @@
|
||||
<div class="text-center mb-128">
|
||||
<div class="bot-left"></div>
|
||||
<div class="col-6 offset-3">
|
||||
<h2 class="purple mb-4">
|
||||
{{ $t('inspireYourParty') }}
|
||||
<h2 class="purple mt-0 mb-4" v-if="upgradingGroup._id">
|
||||
{{ $t('readyToUpgrade') }}
|
||||
</h2>
|
||||
<h2 v-else class="purple mt-0 mb-4">
|
||||
{{ $t('createGroupToday') }}
|
||||
</h2>
|
||||
<div class="pricing mb-4">
|
||||
<span>Just</span>
|
||||
@@ -94,7 +100,7 @@
|
||||
:hide-footer="true"
|
||||
:hide-header="true"
|
||||
>
|
||||
<div v-if="isStaticPage">
|
||||
<div v-if="isStaticPage && !user">
|
||||
<h2>{{ $t('letsMakeAccount') }}</h2>
|
||||
<auth-form @authenticate="authenticate()" />
|
||||
</div>
|
||||
@@ -143,6 +149,10 @@
|
||||
&.static {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
&:not(.static) {
|
||||
margin-left: -12px;
|
||||
}
|
||||
}
|
||||
|
||||
.gap-72 {
|
||||
@@ -172,17 +182,11 @@
|
||||
}
|
||||
|
||||
.team-based {
|
||||
background-image: url('../../assets/images/group-plans-static/group-management@3x.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 252px;
|
||||
width: 448px;
|
||||
}
|
||||
|
||||
.group-management {
|
||||
background-image: url('../../assets/images/group-plans-static/team-based@3x.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 272px;
|
||||
width: 448px;
|
||||
}
|
||||
@@ -271,6 +275,10 @@
|
||||
box-shadow: inset 0 -4px 0 0 rgba(52, 49, 58, 0.4);
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
|
||||
&.btn-primary:hover {
|
||||
background-color: $purple-400;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing {
|
||||
@@ -324,6 +332,12 @@ export default {
|
||||
isStaticPage () {
|
||||
return this.$route.meta.requiresLogin === false;
|
||||
},
|
||||
upgradingGroup () {
|
||||
return this.$store.state.upgradingGroup;
|
||||
},
|
||||
user () {
|
||||
return this.$store.state.user?.data;
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<app-menu />
|
||||
<div
|
||||
class="container-fluid"
|
||||
:class="{'no-margin': noMargin}"
|
||||
:class="{'no-margin': noMargin, 'groups-background': $route.fullPath === '/group-plans' }"
|
||||
>
|
||||
<app-header />
|
||||
<buyModal
|
||||
@@ -67,6 +67,12 @@
|
||||
|
||||
.container-fluid {
|
||||
flex: 1 0 auto;
|
||||
|
||||
&.groups-background {
|
||||
background-color: white;
|
||||
background-image: url('../assets/images/group-plans-static/top.svg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
|
||||
@@ -41,7 +41,7 @@ const StablePage = () => import(/* webpackChunkName: "inventory" */'@/components
|
||||
|
||||
// Guilds & Parties
|
||||
const GroupPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/group');
|
||||
const GroupPlansAppPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/groupPlan');
|
||||
const GroupPlansAppPage = () => import(/* webpackChunkName: "guilds" */ '@/components/static/groupPlans');
|
||||
const LookingForParty = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/lookingForParty');
|
||||
|
||||
// Group Plans
|
||||
|
||||
@@ -339,7 +339,8 @@
|
||||
"worldBossBullet3": "You can continue with normal Quest Bosses, damage will apply to both",
|
||||
"worldBossBullet4": "Check the Tavern regularly to see World Boss progress and Rage attacks",
|
||||
"worldBoss": "World Boss",
|
||||
"groupPlanTitle": "Need more for your crew?",
|
||||
"groupPlanTitle": "Need More for Your Crew?",
|
||||
"upgradeYourCrew": "Ready to Upgrade Your Crew?",
|
||||
"groupPlanDesc": "Organizing the household chores or managing a small class project? Habitica’s Group Plans provide a shared task experience and dedicated chat space to help you and your group stay motivated.",
|
||||
"billedMonthly": "*billed as a monthly subscription",
|
||||
"teamBasedTasksList": "Shared Task Board",
|
||||
@@ -348,7 +349,8 @@
|
||||
"groupManagementControlsDesc": "Share responsibilities by assigning tasks to any number of members, or leave tasks open as a challenge to see who can complete it first. Group members can stay up-to-date on each other's progress by viewing the task status.",
|
||||
"inGameBenefits": "All the Benefits!",
|
||||
"inGameBenefitsDesc": "Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly Equipment sets and the ability to buy Gems with Gold.",
|
||||
"inspireYourParty": "Create your Group Today!",
|
||||
"createGroupToday": "Create Your Group Today!",
|
||||
"readyToUpgrade": "Ready to Upgrade?",
|
||||
"letsMakeAccount": "First, let’s make you an account",
|
||||
"nameYourGroup": "Next, Name Your Group",
|
||||
"exampleGroupName": "Example: Avengers Academy",
|
||||
|
||||
Reference in New Issue
Block a user