feat: add ageGroup Field in attendee form (#3803)

Author: snitin315

app/components/forms/orders/order-form.js

@@ -11,6 +11,7 @@ import {
   validGithubProfileUrlPattern
 } from 'open-event-frontend/utils/validators';
 import { genders } from 'open-event-frontend/utils/dictionary/genders';
+import { ageGroups } from 'open-event-frontend/utils/dictionary/age-groups';
 
 export default Component.extend(FormMixin, {
   router: service(),
@@ -100,6 +101,15 @@ export default Component.extend(FormMixin, {
       ]
     };
 
+    let ageGroupValidation = {
+      rules: [
+        {
+          type   : 'empty',
+          prompt : this.l10n.t('Please select your age group')
+        }
+      ]
+    };
+
     let addressValidation = {
       rules: [
         {
@@ -435,6 +445,7 @@ export default Component.extend(FormMixin, {
       validationRules.fields[`lastname_required_${index}`] = lastNameValidation;
       validationRules.fields[`email_required_${index}`] = emailValidation;
       validationRules.fields[`gender_required_${  index}`] = genderValidation;
+      validationRules.fields[`ageGroup_required_${  index}`] = ageGroupValidation;
       validationRules.fields[`address_required_${  index}`] = addressValidation;
       validationRules.fields[`city_required_${  index}`] = cityValidation;
       validationRules.fields[`state_required_${  index}`] = stateValidation;
@@ -466,7 +477,8 @@ export default Component.extend(FormMixin, {
     return groupBy(this.fields.toArray(), field => field.get('form'));
   }),
 
-  genders: orderBy(genders, 'name'),
+  genders   : orderBy(genders, 'name'),
+  ageGroups : orderBy(ageGroups, 'age'),
 
   actions: {
     submit(data) {

app/mixins/custom-form.js

@@ -291,6 +291,14 @@ export default Mixin.create(MutableArray, {
         isIncluded      : false,
         event           : parent
       }),
+      this.store.createRecord('custom-form', {
+        fieldIdentifier : 'ageGroup',
+        form            : 'attendee',
+        type            : 'select',
+        isRequired      : false,
+        isIncluded      : false,
+        event           : parent
+      }),
       this.store.createRecord('custom-form', {
         fieldIdentifier : 'address',
         form            : 'attendee',

app/models/attendee.js

@@ -32,6 +32,7 @@ export default ModelBase.extend({
   facebook           : attr('string'),
   github             : attr('string'),
   gender             : attr('string'),
+  ageGroup           : attr('string'),
   birthDate          : attr('moment'),
   complexFieldValues : attr(),
 

app/models/custom-form.js

@@ -79,7 +79,8 @@ export default ModelBase.extend({
     twitter         : 'Twitter',
     facebook        : 'Facebook',
     github          : 'GitHub',
-    gender          : 'Gender'
+    gender          : 'Gender',
+    ageGroup        : 'Age Group'
   },
 
   name: computed('fieldIdentifier', 'form', function() {

app/templates/components/forms/orders/order-form.hbs

@@ -90,6 +90,19 @@
                     {{/each}}
                   </div>
                 {{/ui-dropdown}}
+              {{else if (eq field.fieldIdentifier 'ageGroup')}}
+                {{#ui-dropdown class='search selection' value=(mut (get holder field.fieldIdentifier)) onChange=(action (mut holder.ageGroup)) as |execute mapper|}}
+                  {{input type='hidden' name=(if field.isRequired (concat field.fieldIdentifier '_required_' index) (concat field.fieldIdentifier '_' index))}}
+                  <i class="dropdown icon"></i>
+                  <div class="default text">{{t 'Select your age group'}}</div>
+                  <div class="menu">
+                    {{#each ageGroups as |ageGroup|}}
+                      <div class="item" data-value="{{map-value mapper ageGroup.age}}">
+                        {{ageGroup.age}}
+                      </div>
+                    {{/each}}
+                  </div>
+                {{/ui-dropdown}}  
               {{/if}}
             </div>
           {{/if}}

app/utils/dictionary/age-groups.js

@@ -0,0 +1,17 @@
+export const ageGroups = [
+  {
+    age: '19 or less'
+  },
+  {
+    age: '20 to 29'
+  },
+  {
+    age: '30 to 39'
+  },
+  {
+    age: '40 to 49'
+  },
+  {
+    age: '50 or above'
+  }
+];