Squashed commit of the following:

commit 04fbddfd9a
Author: Sabe Jones <sabe@habitica.com>
Date:   Fri Aug 30 16:55:12 2024 -0500

    fix(groups): remove outdated group FAQ modal

commit a7ffdc9593
Author: Sabe Jones <sabe@habitica.com>
Date:   Fri Aug 30 16:34:03 2024 -0500

    fix(groups): don't spawn Justin during Groups onboarding

commit c8205de6c7
Author: Sabe Jones <sabe@habitica.com>
Date:   Fri Aug 30 16:03:03 2024 -0500

    fix(groups): correct static page account creation flow

commit 700718bd54
Author: Sabe Jones <sabe@habitica.com>
Date:   Fri Aug 23 17:47:28 2024 -0500

    chore(payments): start retiring Amazon Payments

commit 0df75b771a
Author: Sabe Jones <sabe@habitica.com>
Date:   Tue Aug 20 10:34:28 2024 -0500

    fix(groups): don't use DO NOT USE modal

commit aed7ff5f47
Author: Sabe Jones <sabe@habitica.com>
Date:   Mon Aug 19 19:40:46 2024 -0500

    refactor(groups): rearrange some CSS for better semantics

commit fd743265cf
Author: Sabe Jones <sabe@habitica.com>
Date:   Fri Aug 16 18:11:47 2024 -0500

    fix(groups): add missing upgrade workflow pieces

commit ae4469703d
Author: Sabe Jones <sabe@habitica.com>
Date:   Thu Aug 15 10:32:36 2024 -0500

    WIP(groups): style and HTML corrections
    Also workflows for static and non-upgrade logged-in scenarios

commit c6a468dabc
Author: Sabe Jones <sabe@habitica.com>
Date:   Tue Aug 13 10:58:43 2024 -0500

    WIP(groups): refactored and revised landing designs
This commit is contained in:
Sabe Jones
2024-09-11 15:02:10 -05:00
parent 9934e59629
commit 91b47e56ff
29 changed files with 304 additions and 1367 deletions

View File

@@ -1,16 +1,13 @@
<template>
<b-modal
id="create-group"
:title="activePage === PAGES.CREATE_GROUP ? 'Create your Group' : 'Select Payment'"
:title="$t('createGroupTitle')"
:hide-footer="true"
:hide-header="true"
size="md"
@hide="onHide()"
>
<div
v-if="activePage === PAGES.CREATE_GROUP"
class="col-12"
>
<div class="col-12">
<!-- HEADER -->
<div
class="modal-close"
@@ -25,7 +22,7 @@
class="btn btn-primary next-button"
:value="$t('next')"
:disabled="!newGroupIsReady"
@click="createGroup()"
@click="stripeGroup({ group: newGroup })"
>
{{ $t('next') }}
</button>
@@ -101,25 +98,12 @@
<button
class="btn btn-primary btn-lg btn-block btn-payment"
:disabled="!newGroupIsReady"
@click="createGroup()"
@click="stripeGroup({ group: newGroup })"
>
{{ $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>
@@ -195,9 +179,6 @@
width: 200px;
height: 215px;
.dollar {
}
.number {
font-size: 60px;
}
@@ -248,31 +229,17 @@
<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',
@@ -284,7 +251,6 @@ export default {
demographics: null,
user: '',
},
activePage: 'create-group',
type: 'guild',
};
},
@@ -302,55 +268,9 @@ export default {
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>