update: add analytics event upon group creation/upgrade (temp code & console.logs commented out)

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

@@ -120,12 +120,12 @@
         />
       </div>
       <!-- TEMPORARY BUTTON FOR TESTING -->
-      <button
+<!--       <button
         class="btn btn-primary btn-payment"
         @click="success()"
       >
         Clicky click click!
-      </button>
+      </button> -->
     </div>
   </b-modal>
 </template>
@@ -234,7 +234,7 @@
     }
     .modal-content {
       width: 448px;
-      height: 436px;
+      max-height: 436px;
       border-radius: 8px;
       box-shadow: 0 14px 28px 0 rgba(26, 24, 29, 0.24), 0 10px 10px 0 rgba(26, 24, 29, 0.28);
     }
@@ -277,6 +277,7 @@ export default {
       PAYMENTS: {
         AMAZON: 'amazon',
         STRIPE: 'stripe',
+        // OTHER: 'tempcode', // TEMP CODE
       },
       paymentMethod: '',
       newGroup: {
@@ -316,9 +317,11 @@ export default {
     },
     pay (paymentMethod) {
       const subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
+      const demographicsKey = this.newGroup.demographics;
       const paymentData = {
         subscription: subscriptionKey,
         coupon: null,
+        demographics: demographicsKey,
       };
 
       if (this.upgradingGroup && this.upgradingGroup._id) {
@@ -339,6 +342,11 @@ 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
@@ -350,12 +358,13 @@ export default {
       this.sendingInProgress = false;
     },
     // temporary function to go with temporary button
-    success () {
-      console.log(this.sendAnalytics());
-      this.sendAnalytics();
-      this.$root.$emit('bv::hide::modal', 'create-group');
-      this.$root.$emit('bv::show::modal', 'payments-success-modal');
-    },
+    // 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/payments/successModal.vue

@@ -105,8 +105,8 @@
               ]"
               class="group-input"
               :placeholder="'groupUseDefault'"
-              :value="newGroup.demographics"
-              @select="newGroup.demographics = $event"
+              :value="upgradedGroup.demographics"
+              @select="upgradedGroup.demographics = $event"
             />
           </div>
           <div class="form-group">
@@ -119,7 +119,7 @@
           </div>
         </template>
         <button
-          v-once
+          v-else
           class="btn btn-primary"
           @click="close()"
         >
@@ -257,6 +257,9 @@ export default {
         gem: gemIcon,
       }),
       paymentData: {},
+      upgradedGroup: {
+        demographics: null,
+      },
     };
   },
   computed: {
@@ -288,8 +291,8 @@ export default {
       this.$root.$emit('bv::hide::modal', 'payments-success-modal');
     },
     closeGroup () {
+      console.log(this.updatedGroup.demographics);
       this.close();
-      return this.groupName.analytics; // this needs to go to Amplitude somehow
     },
   },
 };

website/client/src/mixins/payments.js

@@ -140,6 +140,7 @@ export default {
       if (data.subscription) postData.sub = sub.key;
       if (data.coupon) postData.coupon = data.coupon;
       if (data.groupId) postData.groupId = data.groupId;
+      if (data.demographics) postData.demographics = data.demographics;
 
       const response = await axios.post(url, postData);
 
@@ -267,6 +268,10 @@ export default {
         this.amazonPayments.groupToCreate = data.groupToCreate;
       }
 
+      if (data.demographics) { // sending demographics
+        this.amazonPayments.demographics = data.demographics;
+      }
+
       this.amazonPayments.gift = data.gift;
       this.amazonPayments.type = data.type;
     },

website/server/libs/payments/subscriptions.js

@@ -86,6 +86,13 @@ async function createSubscription (data) {
       user: data.user, groupId: data.groupId, populateLeader: false, groupFields,
     });
 
+    if (group) {
+      analytics.track(
+        this.groupID,
+        data.demographics,
+      );
+    }
+
     if (!group) {
       throw new NotFound(shared.i18n.t('groupNotFound'));
     }