update: making dropdown go with PROPS

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

@@ -13,13 +13,20 @@
     >
       <div
         class="modal-close"
-        @click="close()"
       >
         <div
-          class="icon-close"
+          class="cancel-text"
-          v-html="icons.closeIcon"
+          @click="close()"
         >
+          {{ $t('cancel') }}
         </div>
+        <button
+          class="btn btn-primary"
+          :value="$t('next')"
+          @click="close()"
+        >
+          {{ $t('next') }}
+        </button>
       </div>
       <h2>{{ $t('createGroup') }}</h2>
       <div class="form-group">
@@ -78,7 +85,7 @@
           <lockable-label
             :text="$t('groupUse')"
           />
-          <select-group-translated-array
+          <select-translated-array
             :items="[
               'groupUseDefault',
               'groupParentChildren',
@@ -128,6 +135,8 @@
 </template>
 
 <style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
   .payment-options {
     margin-bottom: 4em;
 
@@ -168,7 +177,6 @@
     .modal-dialog {
       max-width: 448px;
     }
-
     .modal-content {
       width: 448px;
       border-radius: 8px;
@@ -177,24 +185,19 @@
     .modal-body{
       padding: 0px;
     }
-
     .modal-close {
       position: absolute;
       right: 16px;
       top: 16px;
       cursor: pointer;
 
-      .icon-close {
+      .cancel-text {
-        width: 18px;
+        color: #2995cd;
-        height: 18px;
+        font-size: 0.875rem;
-        vertical-align: middle;
+        min-height: 24px;
-
+        margin: 16px 0 0;
-        & ::v-deep svg path {
+        text-align: center;
-          fill: #878190;
+        cursor: pointer;
-        }
-         & :hover {
-          fill: #686274;
-        }
       }
     }
   }
@@ -204,17 +207,46 @@
 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 selectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 import lockableLabel from '@/components/tasks/modal-controls/lockableLabel';
-import closeIcon from '@/assets/svg/close.svg';
 
 export default {
   components: {
     paymentsButtons,
-    selectGroupTranslatedArray,
+    selectTranslatedArray,
     lockableLabel,
   },
   mixins: [paymentsMixin],
+  props: {
+    groupUseDefault: {
+      type: String,
+      default: 'groupUseDefault',
+    },
+    groupParentChildren: {
+      type: String,
+      default: 'groupParentChildren',
+    },
+    groupCouple: {
+      type: String,
+      default: 'groupCouple',
+    },
+    groupFriends: {
+      type: String,
+      default: 'groupFriends',
+    },
+    groupCoworkers: {
+      type: String,
+      default: 'groupCoworkers',
+    },
+    groupManager: {
+      type: String,
+      default: 'groupManager',
+    },
+    groupTeacher: {
+      type: String,
+      default: 'groupTeacher',
+    },
+  },
   data () {
     return {
       amazonPayments: {},
@@ -239,7 +271,6 @@ export default {
       activePage: 'create-group',
       type: 'guild', // Guild or Party @TODO enum this
       icons: Object.freeze({
-        closeIcon,
       }),
     };
   },

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

@@ -1,86 +0,0 @@
-<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/common/locales/en/groups.json

@@ -351,6 +351,8 @@
   "groupManager": "Manager setting up tasks for employees",
   "groupTeacher": "Teacher setting up tasks for students",
   "gettingStarted": "Getting Started",
+  "next": "Next",
+  "cancel": "Cancel",
   "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.",