From ae4469703d2b4bc255f5e52152d9fb11c0e1e1be Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabe@habitica.com>
Date: Thu, 15 Aug 2024 10:32:36 -0500
Subject: [PATCH] WIP(groups): style and HTML corrections Also workflows for
 static and non-upgrade logged-in scenarios

---
 .../src/components/groups/groupPlan.vue       | 110 ------------------
 .../src/components/static/groupPlans.vue      |  46 +++++---
 website/client/src/pages/user-main.vue        |   8 +-
 website/client/src/router/index.js            |   2 +-
 website/common/locales/en/groups.json         |   6 +-
 5 files changed, 42 insertions(+), 130 deletions(-)
 delete mode 100644 website/client/src/components/groups/groupPlan.vue

diff --git a/website/client/src/components/groups/groupPlan.vue b/website/client/src/components/groups/groupPlan.vue
deleted file mode 100644
index 04a847cf11c..00000000000
--- a/website/client/src/components/groups/groupPlan.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <!-- @TODO: Move to group plans folder-->
-  <div class="groups-container">
-    <group-plan-creation-modal />
-    <group-plans />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  .groups-container {
-    background-color: white;
-    background-image: url('../../assets/images/group-plans-static/top.svg');
-    background-repeat: no-repeat;
-    margin-left: -12px;
-    margin-right: -12px;
-  }
-</style>
-
-<script>
-import groupPlans from '../static/groupPlans.vue';
-import paymentsMixin from '../../mixins/payments';
-import { mapState } from '@/libs/store';
-// import paymentsButtons from '@/components/payments/buttons/list';
-import groupPlanCreationModal from '../group-plans/groupPlanCreationModal';
-
-export default {
-  components: {
-    // paymentsButtons,
-    groupPlanCreationModal,
-    groupPlans,
-  },
-  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',
-        name: '',
-        leaderOnly: {
-          challenges: false,
-        },
-      },
-      activePage: '',
-      type: 'guild', // Guild or Party @TODO enum this
-    };
-  },
-  computed: {
-    newGroupIsReady () {
-      return Boolean(this.newGroup.name);
-    },
-    upgradingGroup () {
-      return this.$store.state.upgradingGroup;
-    },
-    // @TODO: can we move this to payment mixin?
-    ...mapState({ user: 'user.data' }),
-  },
-  mounted () {
-    this.activePage = this.PAGES.BENEFITS;
-    this.$store.dispatch('common:setTitle', {
-      section: this.$t('groupPlans'),
-    });
-  },
-  methods: {
-    launchModal () {
-      this.$root.$emit('bv::show::modal', 'create-group');
-    },
-    createGroup () {
-      this.changePage(this.PAGES.PAY);
-    },
-    pay (paymentMethod) {
-      const subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
-      const paymentData = {
-        subscription: subscriptionKey,
-        coupon: null,
-      };
-
-      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;
-    },
-  },
-};
-</script>
diff --git a/website/client/src/components/static/groupPlans.vue b/website/client/src/components/static/groupPlans.vue
index f599f2b0c56..08753397f70 100644
--- a/website/client/src/components/static/groupPlans.vue
+++ b/website/client/src/components/static/groupPlans.vue
@@ -12,7 +12,8 @@
             class="party"
             src="../../assets/images/group-plans-static/party@3x.png"
           >
-          <h1 class="mt-5">{{ $t('groupPlanTitle') }}</h1>
+          <h1 class="mt-5" v-if="upgradingGroup._id">{{ $t('upgradeYourCrew') }}</h1>
+          <h1 class="mt-5" v-else>{{ $t('groupPlanTitle') }}</h1>
           <p class="mb-0">{{ $t('groupPlanDesc') }}</p>
           <div class="pricing mt-5">
             <span>Just</span>
@@ -34,23 +35,25 @@
         <div class="top-right"></div>
         <div class="d-flex justify-content-between align-items-middle w-100 gap-72 mb-100">
           <div class="ml-auto my-auto w-448 text-left">
-            <h2>{{ $t('teamBasedTasksList') }}</h2>
+            <h2 class="mt-0">{{ $t('teamBasedTasksList') }}</h2>
             <small>{{ $t('teamBasedTasksListDesc') }}</small>
           </div>
           <div class="mr-auto my-auto">
-            <div
+            <img
               class="team-based"
-            ></div>
+              src="../../assets/images/group-plans-static/group-management@3x.png"
+            >
           </div>
         </div>
         <div class="d-flex justify-content-between align-items-middle w-100 gap-72 mb-100">
           <div class="ml-auto my-auto">
-            <div
+            <img
               class="group-management"
-            ></div>
+              src="../../assets/images/group-plans-static/team-based@3x.png"
+            >
           </div>
           <div class="mr-auto my-auto w-448 text-left">
-            <h2>{{ $t('groupManagementControls') }}</h2>
+            <h2 class="mt-0">{{ $t('groupManagementControls') }}</h2>
             <small>{{ $t('groupManagementControlsDesc') }}</small>
           </div>
         </div>
@@ -65,8 +68,11 @@
         <div class="text-center mb-128">
           <div class="bot-left"></div>
           <div class="col-6 offset-3">
-            <h2 class="purple mb-4">
-              {{ $t('inspireYourParty') }}
+            <h2 class="purple mt-0 mb-4" v-if="upgradingGroup._id">
+              {{ $t('readyToUpgrade') }}
+            </h2>
+            <h2 v-else class="purple mt-0 mb-4">
+              {{ $t('createGroupToday') }}
             </h2>
             <div class="pricing mb-4">
               <span>Just</span>
@@ -94,7 +100,7 @@
           :hide-footer="true"
           :hide-header="true"
         >
-          <div v-if="isStaticPage">
+          <div v-if="isStaticPage && !user">
             <h2>{{ $t('letsMakeAccount') }}</h2>
             <auth-form @authenticate="authenticate()" />
           </div>
@@ -143,6 +149,10 @@
     &.static {
       padding-top: 16px;
     }
+
+    &:not(.static) {
+      margin-left: -12px;
+    }
   }
 
   .gap-72 {
@@ -172,17 +182,11 @@
   }
 
   .team-based {
-    background-image: url('../../assets/images/group-plans-static/group-management@3x.png');
-    background-size: contain;
-    background-repeat: no-repeat;
     height: 252px;
     width: 448px;
   }
 
   .group-management {
-    background-image: url('../../assets/images/group-plans-static/team-based@3x.png');
-    background-size: contain;
-    background-repeat: no-repeat;
     height: 272px;
     width: 448px;
   }
@@ -271,6 +275,10 @@
     box-shadow: inset 0 -4px 0 0 rgba(52, 49, 58, 0.4);
     font-size: 20px;
     line-height: 28px;
+
+    &.btn-primary:hover {
+      background-color: $purple-400;
+    }
   }
 
   .pricing {
@@ -324,6 +332,12 @@ export default {
     isStaticPage () {
       return this.$route.meta.requiresLogin === false;
     },
+    upgradingGroup () {
+      return this.$store.state.upgradingGroup;
+    },
+    user () {
+      return this.$store.state.user?.data;
+    },
   },
   mounted () {
     this.$nextTick(() => {
diff --git a/website/client/src/pages/user-main.vue b/website/client/src/pages/user-main.vue
index 21659754cb2..6d69e593814 100644
--- a/website/client/src/pages/user-main.vue
+++ b/website/client/src/pages/user-main.vue
@@ -24,7 +24,7 @@
       <app-menu />
       <div
         class="container-fluid"
-        :class="{'no-margin': noMargin}"
+        :class="{'no-margin': noMargin, 'groups-background': $route.fullPath === '/group-plans' }"
       >
         <app-header />
         <buyModal
@@ -67,6 +67,12 @@
 
     .container-fluid {
       flex: 1 0 auto;
+
+      &.groups-background {
+        background-color: white;
+        background-image: url('../assets/images/group-plans-static/top.svg');
+        background-repeat: no-repeat;
+      }
     }
 
     .no-margin {
diff --git a/website/client/src/router/index.js b/website/client/src/router/index.js
index 55bc30b2d85..e7ceec6f311 100644
--- a/website/client/src/router/index.js
+++ b/website/client/src/router/index.js
@@ -41,7 +41,7 @@ const StablePage = () => import(/* webpackChunkName: "inventory" */'@/components
 
 // Guilds & Parties
 const GroupPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/group');
-const GroupPlansAppPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/groupPlan');
+const GroupPlansAppPage = () => import(/* webpackChunkName: "guilds" */ '@/components/static/groupPlans');
 const LookingForParty = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/lookingForParty');
 
 // Group Plans
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index c1e6992169b..f6b2832b457 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -339,7 +339,8 @@
   "worldBossBullet3": "You can continue with normal Quest Bosses, damage will apply to both",
   "worldBossBullet4": "Check the Tavern regularly to see World Boss progress and Rage attacks",
   "worldBoss": "World Boss",
-  "groupPlanTitle": "Need more for your crew?",
+  "groupPlanTitle": "Need More for Your Crew?",
+  "upgradeYourCrew": "Ready to Upgrade Your Crew?",
   "groupPlanDesc": "Organizing the household chores or managing a small class project? Habitica’s Group Plans provide a shared task experience and dedicated chat space to help you and your group stay motivated.",
   "billedMonthly": "*billed as a monthly subscription",
   "teamBasedTasksList": "Shared Task Board",
@@ -348,7 +349,8 @@
   "groupManagementControlsDesc": "Share responsibilities by assigning tasks to any number of members, or leave tasks open as a challenge to see who can complete it first. Group members can stay up-to-date on each other's progress by viewing the task status.",
   "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.",
-  "inspireYourParty": "Create your Group Today!",
+  "createGroupToday": "Create Your Group Today!",
+  "readyToUpgrade": "Ready to Upgrade?",
   "letsMakeAccount": "First, let’s make you an account",
   "nameYourGroup": "Next, Name Your Group",
   "exampleGroupName": "Example: Avengers Academy",