update: styling and some function work

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">
+      </div>
-          <lockable-label
+      <div class="form-group">
-            :text="$t('groupUse')"
+        <lockable-label
-          />
+          :text="$t('groupUse')"
-          <select-translated-array
+        />
-            :items="[
+        <select-translated-array
-              'groupUseDefault',
+          v-model="newGroup.demographics"
-              'groupParentChildren',
+          :items="[
-              'groupCouple',
+            'groupUseDefault',
-              'groupFriends',
+            'groupParentChildren',
-              'groupCoworkers',
+            'groupCouple',
-              'groupManager',
+            'groupFriends',
-              'groupTeacher'
+            'groupCoworkers',
-            ]"
+            'groupManager',
-            :value="groupUseDefault"
+            'groupTeacher'
-            @select="groupUseDefault"
+          ]"
-          />
+          :value="groupUseDefault"
-        </div>
+          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 () {

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.",