From cfd601e7bfd4d86051760b0943dd04815c1bc6e0 Mon Sep 17 00:00:00 2001
From: CuriousMagpie <eilatan@gmail.com>
Date: Mon, 8 Aug 2022 17:16:41 -0400
Subject: [PATCH] update: styling and some function work

---
 .../group-plans/groupPlanCreationModal.vue    | 68 ++++++++++++-------
 website/common/locales/en/groups.json         |  1 +
 2 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/website/client/src/components/group-plans/groupPlanCreationModal.vue b/website/client/src/components/group-plans/groupPlanCreationModal.vue
index 01e559ea1a..d9a81ef7dc 100644
--- a/website/client/src/components/group-plans/groupPlanCreationModal.vue
+++ b/website/client/src/components/group-plans/groupPlanCreationModal.vue
@@ -24,6 +24,7 @@
         <button
           class="btn btn-primary next-button"
           :value="$t('next')"
+          :disabled="!newGroupIsReady"
           @click="close()"
         >
           {{ $t('next') }}
@@ -39,7 +40,7 @@
         <input
           id="new-group-name"
           v-model="newGroup.name"
-          class="form-control input-medium option-content"
+          class="form-control input-medium option-content name-input"
           required="required"
           type="text"
           :placeholder="$t('nameStarText')"
@@ -53,7 +54,7 @@
         <textarea
           id="new-group-description"
           v-model="newGroup.description"
-          class="form-control option-content"
+          class="form-control option-content description-input"
           cols="3"
           :placeholder="$t('descriptionOptionalText')"
         ></textarea>
@@ -86,24 +87,28 @@
             for="create-group-leaderOnlyChallenges-checkbox"
           >{{ $t('leaderOnlyChallenges') }}</label>
         </div>
-        <div class="form-group">
-          <lockable-label
-            :text="$t('groupUse')"
-          />
-          <select-translated-array
-            :items="[
-              'groupUseDefault',
-              'groupParentChildren',
-              'groupCouple',
-              'groupFriends',
-              'groupCoworkers',
-              'groupManager',
-              'groupTeacher'
-            ]"
-            :value="groupUseDefault"
-            @select="groupUseDefault"
-          />
-        </div>
+      </div>
+      <div class="form-group">
+        <lockable-label
+          :text="$t('groupUse')"
+        />
+        <select-translated-array
+          v-model="newGroup.demographics"
+          :items="[
+            'groupUseDefault',
+            'groupParentChildren',
+            'groupCouple',
+            'groupFriends',
+            'groupCoworkers',
+            'groupManager',
+            'groupTeacher'
+          ]"
+          :value="groupUseDefault"
+          class="group-input"
+          @select="groupUseDefault"
+        />
+        <!-- need to figure out what goes in @select
+          there's an error being thrown in the component, perhaps I can't reuse it?   -->
       </div>
       <div
         v-if="type === 'party'"
@@ -117,11 +122,11 @@
       </div>
       <div class="form-group">
         <button
-          class="btn btn-primary btn-lg btn-block"
+          class="btn btn-primary btn-lg btn-block btn-payment"
           :disabled="!newGroupIsReady"
           @click="createGroup()"
         >
-          {{ $t('create') }}
+          {{ $t('nextPaymentMethod') }}
         </button>
       </div>
     </div>
@@ -167,6 +172,22 @@
     height: 32px;
   }
 
+  .name-input, .description-input, .group-input {
+    margin-top: -4px;
+  }
+
+  .description-input {
+    height: 56px;
+  }
+
+  .spacer {
+    margin-bottom: 16px !important;
+  }
+
+  .btn-payment {
+    margin-top: 1.5rem;
+  }
+
   .payment-options {
     margin-bottom: 4em;
 
@@ -291,6 +312,7 @@ export default {
         leaderOnly: {
           challenges: false,
         },
+        demographics: '',
       },
       activePage: 'create-group',
       type: 'guild', // Guild or Party @TODO enum this
@@ -301,7 +323,7 @@ export default {
   computed: {
     ...mapState({ user: 'user.data' }),
     newGroupIsReady () {
-      return Boolean(this.newGroup.name);
+      return Boolean(this.newGroup.name) && Boolean(this.newGroup.demographics);
     },
   },
   mounted () {
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index dee4012171..1f824f7448 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -357,6 +357,7 @@
   "nameStarText": "Add a title",
   "descriptionOptional": "Description",
   "descriptionOptionalText": "Add a description",
+  "nextPaymentMethod": "Next: Payment Method",
   "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.",