update: add analytics to create and success modals

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

@@ -119,13 +119,6 @@
           :amazon-data="pay(PAYMENTS.AMAZON)"
         />
       </div>
-      <!-- TEMPORARY BUTTON FOR TESTING -->
-<!--       <button
-        class="btn btn-primary btn-payment"
-        @click="success()"
-      >
-        Clicky click click!
-      </button> -->
     </div>
   </b-modal>
 </template>
@@ -258,6 +251,7 @@ 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: {
@@ -277,7 +271,6 @@ export default {
       PAYMENTS: {
         AMAZON: 'amazon',
         STRIPE: 'stripe',
-        // OTHER: 'tempcode', // TEMP CODE
       },
       paymentMethod: '',
       newGroup: {
@@ -312,7 +305,10 @@ export default {
       this.activePage = page;
     },
     createGroup () {
-      console.log(this.newGroup);
+      // Analytics.track({
+      //   name: this.paymentData.demographics,
+      // },
+      // console.log(this.paymentData.demographics));
       this.changePage(this.PAGES.PAY);
     },
     pay (paymentMethod) {
@@ -342,29 +338,13 @@ export default {
         this.redirectToStripe(paymentData);
       }
 
-      // TEMP CODE
-      // if (this.paymentMethod === this.PAYMENTS.OTHER) {
-      //   console.log(paymentData);
-      // }
-
       return null;
     },
-    // need to figure out where/how to create the event in amplitude
+
-    // right now being sent to console in success()
-    sendAnalytics () {
-      return this.newGroup.demographics;
-    },
     onHide () {
       this.sendingInProgress = false;
     },
-    // temporary function to go with temporary button
+
-    // success () {
-    //   this.pay(this.PAYMENTS.OTHER);
-    //   console.log(this.sendAnalytics());
-    //   this.sendAnalytics();
-    //   this.$root.$emit('bv::hide::modal', 'create-group');
-    //   this.$root.$emit('bv::show::modal', 'payments-success-modal');
-    // },
   },
 };
 </script>

website/client/src/components/groups/groupPlan.vue

@@ -400,14 +400,8 @@ export default {
   },
   methods: {
     launchModal () {
-      console.log('i am creating a group');
-      // this.changePage(this.PAGES.CREATE_GROUP);
       this.$root.$emit('bv::show::modal', 'create-group');
     },
-    // changePage (page) {
-    //   this.activePage = 'page';
-    //   window.scrollTo(0, 0);
-    // },
     createGroup () {
       this.changePage(this.PAGES.PAY);
     },

website/client/src/components/payments/successModal.vue

@@ -2,8 +2,8 @@
   <b-modal
     id="payments-success-modal"
     :title="$t('accountSuspendedTitle')"
-    :hide-footer="isFromBalance"
+    :hide-footer="isFromBalance || paymentData.newGroup"
-    :modal-class="isFromBalance ? ['modal-hidden-footer'] : []"
+    :modal-class="isFromBalance || paymentData.newGroup ? ['modal-hidden-footer'] : []"
   >
     <div slot="modal-header">
       <div class="check-container d-flex align-items-center justify-content-center">
@@ -136,15 +136,14 @@
           >{{ $t('paymentAutoRenew') }}</span>
         </template>
         <!-- buttons for subscriptions -->
-        <div>
+        <button
-          <button
+          v-if="paymentData.paymentType !== 'groupPlan'"
-            v-if="paymentData.paymentType === 'subscription'"
+          v-once
-            class="btn btn-primary"
+          class="btn btn-primary"
-            @click="onwards()"
+          @click="onwards()"
-          >
+        >
-            {{ $t('onwards') }} to Mayhem!
+          {{ $t('onwards') }}
-          </button>
+        </button>
-        </div>
       </div>
     </div>
   </b-modal>
@@ -325,6 +324,14 @@ 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 groupPlanUpgraded = {
+        demographics: demographicsKey,
+      };
+      return groupPlanUpgraded.demographics;
+    },
   },
   mounted () {
     this.$root.$on('habitica:payment-success', data => {
@@ -341,10 +348,12 @@ export default {
   },
   methods: {
     submit () {
+      Analytics.track({
+        name: this.groupPlanUpgraded.demographics,
+      },
+      console.log(Analytics.track));
       this.paymentData = {};
       this.$root.$emit('bv::hide::modal', 'payments-success-modal');
-      Analytics.track({ },
-        console.log(Analytics.track));
     },
     onwards () {
       this.paymentData = {};