From c8205de6c76c00556516d6c50730f762f6c6b484 Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabe@habitica.com>
Date: Fri, 30 Aug 2024 16:03:03 -0500
Subject: [PATCH] fix(groups): correct static page account creation flow

---
 .../group-plans/groupPlanCreationModal.vue    | 90 ++-----------------
 .../src/components/static/groupPlans.vue      | 20 +----
 website/client/src/mixins/payments.js         | 26 ++++++
 website/common/locales/en/groups.json         |  3 +-
 4 files changed, 36 insertions(+), 103 deletions(-)

diff --git a/website/client/src/components/group-plans/groupPlanCreationModal.vue b/website/client/src/components/group-plans/groupPlanCreationModal.vue
index d7980031f9..ccbe038a4f 100644
--- a/website/client/src/components/group-plans/groupPlanCreationModal.vue
+++ b/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>
diff --git a/website/client/src/components/static/groupPlans.vue b/website/client/src/components/static/groupPlans.vue
index fd1d7a0df4..18635e6ca0 100644
--- a/website/client/src/components/static/groupPlans.vue
+++ b/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>
diff --git a/website/client/src/mixins/payments.js b/website/client/src/mixins/payments.js
index c9f1409664..47763dccaf 100644
--- a/website/client/src/mixins/payments.js
+++ b/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);
+    },
   },
 };
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index f6b2832b45..35cfe5f40a 100644
--- a/website/common/locales/en/groups.json
+++ b/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.",