updates: add demographic strings & drop-down and translated array code

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

@@ -1,3 +1,4 @@
+ <!-- THIS IS A VERY OLD FILE DO NOT USE -->
 <template>
   <div class="create-group-modal-pages">
     <div

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

@@ -1,8 +1,9 @@
 <template>
   <b-modal
-    id="group-plan-creation-modal"
+    id="create-group"
     :title="activePage === PAGES.CREATE_GROUP ? 'Create your Group' : 'Select Payment'"
     :hide-footer="true"
+    :hide-header="true"
     size="md"
     @hide="onHide()"
   >
@@ -10,6 +11,17 @@
       v-if="activePage === PAGES.CREATE_GROUP"
       class="col-12"
     >
+      <div
+        class="modal-close"
+        @click="close()"
+      >
+        <div
+          class="icon-close"
+          v-html="icons.closeIcon"
+        >
+        </div>
+      </div>
+      <h2>{{ $t('createGroup') }}</h2>
       <div class="form-group">
         <label
           class="control-label"
@@ -62,6 +74,24 @@
             for="create-group-leaderOnlyChallenges-checkbox"
           >{{ $t('leaderOnlyChallenges') }}</label>
         </div>
+        <div class="form-group">
+          <lockable-label
+            :text="$t('groupUse')"
+          />
+          <select-group-translated-array
+            :items="[
+              'groupUseDefault',
+              'groupParentChildren',
+              'groupCouple',
+              'groupFriends',
+              'groupCoworkers',
+              'groupManager',
+              'groupTeacher'
+            ]"
+            :value="groupUseDefault"
+            @select="groupUseDefault"
+          />
+        </div>
       </div>
       <div
         v-if="type === 'party'"
@@ -132,23 +162,62 @@
     }
   }
 </style>
+<style lang="scss">
+  @import '~@/assets/scss/mixins.scss';
+  #create-group {
+    .modal-dialog {
+      max-width: 448px;
+    }
+
+    .modal-content {
+      width: 448px;
+      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);
+    }
+    .modal-body{
+      padding: 0px;
+    }
+
+    .modal-close {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+      cursor: pointer;
+
+      .icon-close {
+        width: 18px;
+        height: 18px;
+        vertical-align: middle;
+
+        & ::v-deep svg path {
+          fill: #878190;
+        }
+         & :hover {
+          fill: #686274;
+        }
+      }
+    }
+  }
+</style>
 
 <script>
 import paymentsMixin from '../../mixins/payments';
 import { mapState } from '@/libs/store';
 import paymentsButtons from '@/components/payments/buttons/list';
+import selectGroupTranslatedArray from '@/components/group-plans/selectGroupTranslatedArray';
+import lockableLabel from '@/components/tasks/modal-controls/lockableLabel';
+import closeIcon from '@/assets/svg/close.svg';
 
 export default {
   components: {
     paymentsButtons,
+    selectGroupTranslatedArray,
+    lockableLabel,
   },
   mixins: [paymentsMixin],
   data () {
     return {
       amazonPayments: {},
-      icons: Object.freeze({
-        // positiveIcon,
-      }),
       PAGES: {
         CREATE_GROUP: 'create-group',
         UPGRADE_GROUP: 'upgrade-group',
@@ -167,8 +236,11 @@ export default {
           challenges: false,
         },
       },
-      activePage: '',
+      activePage: 'create-group',
       type: 'guild', // Guild or Party @TODO enum this
+      icons: Object.freeze({
+        closeIcon,
+      }),
     };
   },
   computed: {
@@ -181,11 +253,14 @@ export default {
     console.log('i am mounted');
   },
   methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'create-group');
+    },
     changePage (page) {
       this.activePage = page;
-      window.scrollTo(0, 0);
     },
     createGroup () {
+      console.log('i am giving habitica money now');
       this.changePage(this.PAGES.PAY);
     },
     pay (paymentMethod) {
@@ -215,6 +290,9 @@ export default {
 
       return null;
     },
+    onHide () {
+      this.sendingInProgress = false;
+    },
   },
 };
 </script>

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

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <select-list
+      :items="items"
+      :value="selected"
+      class="array-select"
+      :class="{disabled: disabled}"
+      :disabled="disabled"
+      :right="right"
+      :hide-icon="false"
+      :inline-dropdown="inlineDropdown"
+      @select="selectItem($event)"
+    >
+      <template v-slot:item="{ item }">
+        <span class="label">{{ $t(item) }}</span>
+      </template>
+    </select-list>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .array-select.disabled {
+    .btn-secondary:disabled, .btn-secondary.disabled, .dropdown >
+    .btn-secondary.dropdown-toggle:not(.btn-success):disabled, .dropdown >
+    .btn-secondary.dropdown-toggle:not(.btn-success).disabled, .show >
+    .btn-secondary.dropdown-toggle:not(.btn-success):disabled, .show >
+    .btn-secondary.dropdown-toggle:not(.btn-success).disabled {
+      background: $gray-700;
+    }
+
+    .dropdown-toggle::after {
+      color: $gray-300;
+      border-top-color: $gray-300;
+    }
+
+    .label {
+      color: $gray-200;
+    }
+  }
+
+  .array-select .disabled, .array-select .disabled:hover {
+    box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+  }
+</style>
+
+<script>
+import selectList from '@/components/ui/selectList';
+
+export default {
+  components: {
+    selectList,
+  },
+  props: {
+    items: {
+      type: Array,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    value: [String, Number, Object],
+    right: {
+      type: Boolean,
+    },
+    inlineDropdown: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data () {
+    return {
+      selected: this.items.find(i => i === this.value),
+    };
+  },
+  methods: {
+    selectItem (item) {
+      this.selected = item;
+      this.$emit('select', item);
+    },
+  },
+};
+</script>

website/client/src/components/groups/groupPlan.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- @TODO: Move to group plans folder-->
   <div>
-    <group-plan-creation=modal />
+    <group-plan-creation-modal />
     <div>
       <div class="header">
         <h1 class="text-center">
@@ -115,7 +115,7 @@
           <div class="col-12 text-center">
             <button
               class="btn btn-primary create-group"
-              @click="launchModal('group-plan-creation-modal')"
+              @click="launchModal('create-page')"
             >
               Create Your New Group
             </button>
@@ -399,14 +399,14 @@ export default {
   },
   methods: {
     launchModal () {
-      console.log('hello world');
+      console.log('i am creating a group');
-      this.changePage(this.PAGES.CREATE_GROUP);
+      // this.changePage(this.PAGES.CREATE_GROUP);
-      this.$root.$emit('bv::show::modal', 'group-plan-creation-modal');
+      this.$root.$emit('bv::show::modal', 'create-group');
-    },
-    changePage (page) {
-      this.activePage = page;
-      window.scrollTo(0, 0);
     },
+    // changePage (page) {
+    //   this.activePage = 'page';
+    //   window.scrollTo(0, 0);
+    // },
     createGroup () {
       this.changePage(this.PAGES.PAY);
     },

website/common/locales/en/groups.json

@@ -341,6 +341,15 @@
   "exampleGroupName": "Example: Avengers Academy",
   "exampleGroupDesc": "For those selected to join the training academy for The Avengers Superhero Initiative",
   "thisGroupInviteOnly": "This group is invitation only.",
+  "createGroup": "Create a Group",
+  "groupUse": "Which best describes the use of your Group?*",
+  "groupUseDefault": "Choose an answer",
+  "groupParentChildren": "Parent(s) setting up tasks for children",
+  "groupCouple": "Couple sharing tasks",
+  "groupFriends": "Friends sharing tasks",
+  "groupCoworkers": "Coworkers sharing tasks",
+  "groupManager": "Manager setting up tasks for employees",
+  "groupTeacher": "Teacher setting up tasks for students",
   "gettingStarted": "Getting Started",
   "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",