fix(groups): correct static page account creation flow

website/client/src/components/group-plans/groupPlanCreationModal.vue

@@ -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') }}
+          {{ $t('next') }}
         </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>

website/client/src/components/static/groupPlans.vue

@@ -318,7 +318,8 @@ export default {
   },
   methods: {
     authenticate () {
-      this.modalPage = 'purchaseGroup';
+      this.$root.$emit('bv::hide::modal', 'group-plan');
+      this.$root.$emit('bv::show::modal', 'create-group');
     },
     goToNewGroupPage () {
       if (this.isStaticPage && !this.user) {
@@ -326,25 +327,10 @@ export default {
         return this.$root.$emit('bv::show::modal', 'group-plan');
       }
       if (this.upgradingGroup._id) {
-        return this.pay();
+        return this.stripeGroup({ group: this.upgradingGroup, upgrade: true });
       }
       return this.$root.$emit('bv::show::modal', 'create-group');
     },
-    pay () {
-      const paymentData = {
-        subscription: 'group_monthly',
-        coupon: null,
-      };
-
-      if (this.upgradingGroup && this.upgradingGroup._id) {
-        paymentData.groupId = this.upgradingGroup._id;
-        paymentData.group = this.upgradingGroup;
-      } else {
-        paymentData.groupToCreate = this.newGroup;
-      }
-
-      this.redirectToStripe(paymentData);
-    },
   },
 };
 </script>

website/client/src/mixins/payments.js

@@ -6,6 +6,7 @@ import { mapState } from '@/libs/store';
 import encodeParams from '@/libs/encodeParams';
 import notificationsMixin from '@/mixins/notifications';
 import { CONSTANTS, setLocalSetting } from '@/libs/userlocalManager';
+import * as Analytics from '@/libs/analytics';
 
 const STRIPE_PUB_KEY = process.env.STRIPE_PUB_KEY;
 
@@ -198,6 +199,16 @@ export default {
           alert(`Error while redirecting to Stripe: ${checkoutSessionResult.error.message}`);
           throw checkoutSessionResult.error;
         }
+        if (paymentType === 'groupPlan') {
+          Analytics.track({
+            hitType: 'event',
+            eventName: 'group plan create',
+            eventAction: 'group plan create',
+            eventCategory: 'behavior',
+            demographics: appState.newGroup.demographics,
+            type: appState.newGroup.type,
+          }, { trackOnClient: true });
+        }
       } catch (err) {
         console.error('Error while redirecting to Stripe', err); // eslint-disable-line
         alert(`Error while redirecting to Stripe: ${err.message}`);
@@ -370,5 +381,20 @@ export default {
         window.alert(e.response.data.message); // eslint-disable-line no-alert
       }
     },
+    stripeGroup (options = { group: {}, upgrade: false }) {
+      const paymentData = {
+        subscription: 'group_monthly',
+        coupon: null,
+      };
+
+      if (options.upgrade && options.group._id) {
+        paymentData.groupId = options.group._id;
+        paymentData.group = options.group;
+      } else {
+        paymentData.groupToCreate = options.group;
+      }
+
+      this.redirectToStripe(paymentData);
+    },
   },
 };

website/common/locales/en/groups.json

@@ -350,6 +350,7 @@
   "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.",
   "createGroupToday": "Create Your Group Today!",
+  "createGroupTitle": "Create Group",
   "readyToUpgrade": "Ready to Upgrade?",
   "letsMakeAccount": "First, let’s make you an account",
   "nameYourGroup": "Next, Name Your Group",
@@ -370,7 +371,7 @@
   "nameStarText": "Add a title",
   "descriptionOptional": "Description",
   "descriptionOptionalText": "Add a description",
-  "nextPaymentMethod": "Next: Payment Method",
+  "nextPaymentMethod": "Next: Payment",
   "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.",