Merge pull request #232 from bullhorn/f/consent-checkbox

Add consent checkbox to apply modal and config options to app.json
bullhorn · Oct 26, 2018 · 3224714 · 3224714
2 parents ebb0f0f + 4af20f0
commit 3224714
Show file tree

Hide file tree

Showing 14 changed files with 102 additions and 149 deletions.
diff --git a/src/app.json.template b/src/app.json.template
@@ -35,5 +35,14 @@
         "genderRaceEthnicity": false,
         "veteran": false,
         "disability": false
+    },
+    "privacyConsent": {
+        "consentCheckbox": false,
+        "privacyStatementParagraphs": [
+            "[FIRST PARAGRAPH]",
+            "[SECOND PARAGRAPH]"
+        ],
+        "privacyPolicyUrl": "",
+        "usePrivacyPolicyUrl": false
     }
 }
diff --git a/src/app/detail/detail.controller.js b/src/app/detail/detail.controller.js
@@ -1,6 +1,6 @@
 class JobDetailController {
     /* jshint -W072 */
-    constructor($rootScope, $window, $location, $log, ShareService, SearchService, SharedData, job, configuration, APPLIED_JOBS_KEY, MobileDetection) {
+    constructor($rootScope, $window, $location, $log, ShareService, SearchService, SharedData, job, configuration, APPLIED_JOBS_KEY) {
         'ngInject';
         // NG Dependencies
         this.$window = $window;

diff --git a/src/app/index.module.js b/src/app/index.module.js
@@ -13,7 +13,6 @@ import CareerPortalHeader from './header/header.directive';
 import CareerPortalModal from './modal/modal.directive';
 
 import SearchService from './services/search.service';
-import MobileDetection from './services/mobiledetection.service';
 import ShareService from './services/share.service';
 import ApplyService from './services/apply.service';
 import SharedData from './services/shared.factory';
@@ -46,7 +45,6 @@ angular.module('CareerPortal', ['ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router
     .service('ShareService', ShareService)
     .service('ApplyService', ApplyService)
     .service('SearchService', SearchService)
-    .service('MobileDetection', MobileDetection)
     .service('CacheService', CacheService)
     .service('EeocService', EeocService);
 

diff --git a/src/app/modal/modal.controller.js b/src/app/modal/modal.controller.js
@@ -33,6 +33,13 @@ class CareerPortalModalController {
             footer: ''
         };
 
+        this.consentValue = false || !configuration.privacyConsent.consentCheckbox;
+
+        configuration.privacyConsent.privacyStatementParagraphs = configuration.privacyConsent.privacyStatementParagraphs.join('<br/><br/>');
+        this.privacyConsent = configuration.privacyConsent;
+
+        this.tooltipStyle = {top: '50%'};
+
         // Load directive with modal closed by default
         this.closeModal();
     }
@@ -95,14 +102,14 @@ class CareerPortalModalController {
         }
     }
 
-    enableSendButton(isFormValid) {
+    disableSendButton(isFormValid) {
         let resume = this.ApplyService.form.resumeInfo;
 
-        if (isFormValid && (resume || this.linkedInData.resume)) {
+        if (isFormValid && (resume || this.linkedInData.resume) && this.consentValue) {
             if (this.linkedInData.resume.length !== 0 || resume.type) {
                 return false;
             }
-        } else if (this.email) {
+        } else if (this.email && this.consentValue) {
             return false;
         }
         return true;
@@ -114,8 +121,28 @@ class CareerPortalModalController {
         // 2: EEOC  Race/Ethnicity
         // 3: EEOC Veteran
         // 4: EEOC Disability
-        if (toolTipType || toolTipType === 0) {
+        // 5: Privacy Policy
+        if ((toolTipType || toolTipType === 0) && (toolTipType !== 5 || (toolTipType === 5 && !this.privacyConsent.usePrivacyPolicyUrl))) {
             this.isToolTipHidden = false;
+            let percentage = '50%';
+            switch (toolTipType) {
+                case 5:
+                if (this.EeocService.isVeteranEnabled() && this.EeocService.isGenderRaceEthnicityEnabled() && this.EeocService.getCheckedEthnicities()) {
+                    percentage = '75%';
+                } else if (this.EeocService.isVeteranEnabled() || this.EeocService.isGenderRaceEthnicityEnabled() || this.EeocService.getCheckedEthnicities()) {
+                    percentage = '55%';
+                } else {
+                    percentage = '45%';
+                }
+                    break;
+                case 4:
+                percentage = '65%';
+                    break;
+                default:
+                    break;
+            }
+
+            this.tooltipStyle = {top: percentage};
             this.currentToolTip = toolTipType;
         }
     }

diff --git a/src/app/modal/modal.html b/src/app/modal/modal.html
@@ -72,7 +72,7 @@ <h3>{{ 'modal.successSubHeading' | i18n }}</h3>
                     </div>
                     <!-- TOOLTIP -->
                     <div class="tooltip-info" data-ng-show="!modal.isToolTipHidden">
-                        <div class="tooltip-modal">
+                        <div ng-style="modal.tooltipStyle" class="tooltip-modal">
                             <div class="tooltip-info-closer">
                                 <i class="bhi-close" data-ng-click="modal.hideTooltip()"></i>
                             </div>
@@ -102,6 +102,7 @@ <h3>{{ 'modal.successSubHeading' | i18n }}</h3>
                             <div data-ng-if="modal.currentToolTip === 3" data-i18n="eeoc.veteranHelp" data-companyName="{{ modal.configuration.companyName }}" data-companyName2="{{ modal.configuration.companyName }}" data-companyName3="{{ modal.configuration.companyName }}"></div>
                             <!-- DISABILITY -->
                             <p data-ng-if="modal.currentToolTip === 4" data-i18n="eeoc.disabilityHelp" data-companyName="{{ modal.configuration.companyName }}" data-companyName2="{{ modal.configuration.companyName }}"></p>
+                            <p data-ng-if="modal.currentToolTip === 5" ng-bind-html="modal.privacyConsent.privacyStatementParagraphs" ></p>
                         </div>
                     </div>
                     <!-- UPLOAD LABEL -->
@@ -233,13 +234,20 @@ <h4>
                             </div>
                         </div>
                     </div>
+
+                    <div ng-show="modal.privacyConsent.consentCheckbox" class="consent-checkbox-section">
+                        <span class="required">*</span>
+                        <input id="consent-checkbox" class="consent-checkbox" type="checkbox" ng-model="modal.consentValue"/>
+                        <label for="consent-checkbox" class="consent-checkbox-label">{{ 'modal.byChecking' | i18n }}
+                            <a data-ng-click="modal.showTooltip(5)" ng-href="{{modal.privacyConsent.privacyPolicyUrl}}">{{ 'modal.privacyPolicy' | i18n }}</a></label>
+                    </div>
                     <div class="clearfix"><br/></div>
                 </form>
             </section>
             <!-- FOOTER -->
             <footer data-ng-class="{'success':!modal.showForm}">
                 <button data-ng-show="modal.showForm" name="cancel" data-ng-click="modal.closeModal(applyForm)">{{ 'modal.cancelButton' | i18n }}</button>
-                <button data-ng-show="modal.showForm" name="submit" data-ng-click="modal.submit(applyForm)" data-ng-disabled="modal.isSubmitting || modal.enableSendButton(applyForm.$valid)" data-ng-class="{ 'disabled': modal.enableSendButton(applyForm.$valid) }">
+                <button data-ng-show="modal.showForm" name="submit" data-ng-click="modal.submit(applyForm)" data-ng-disabled="modal.isSubmitting || modal.disableSendButton(applyForm.$valid)" data-ng-class="{ 'disabled': modal.disableSendButton(applyForm.$valid) }">
                     <span data-ng-if="!modal.isSubmitting">
                         {{ 'modal.sendButton' | i18n }}
                     </span>

diff --git a/src/app/modal/modal.scss b/src/app/modal/modal.scss
@@ -9,6 +9,11 @@
     background: rgba(0, 0, 0, .7);
     z-index: $modal-z-index;
     overflow-y: auto;
+    .required {
+        color: $error;
+        font-size: 1.2em;
+    }
+
 
     > div.modal {
         display: block;
@@ -139,6 +144,8 @@
                         border-radius: 3px;
                         box-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
                         z-index: 999;
+                        overflow-y: auto;
+                        max-height: 550px;
 
                         & > p {
                             margin: 0;
@@ -180,10 +187,6 @@
                             flex-direction: row;
                             align-items: center;
 
-                            > .required {
-                                color: $error;
-                                font-size: 1.2em;
-                            }
 
                             input,
                             select {
@@ -217,18 +220,14 @@
                                     width: 100%;
                                     font-size: 1.1em;
                                     color: rgb(121, 124, 126);
-                                    > .required {
-                                        color: $error;
-                                        font-size: 1.2em;
-                                    }
+
                                 }
 
                                 select {
-                                    border-color: #adafb0;
-                                    border-radius: 4px;
-
+                                    border-color: #cecece;
                                     &:focus {
                                         outline: none;
+                                        border-color: #5198DE;
                                     }
                                 }
 
@@ -347,6 +346,13 @@
                             border-bottom: 1px solid $primary;
                         }
                     }
+                    &.consent-checkbox {
+                        width: 40px;
+                    }
+                }
+                .consent-checkbox-label{
+                    color: #3D5668;
+                    font-weight: 500;
                 }
                 // Linked In Skills and expertise:
                 textarea {

diff --git a/src/app/services/mobiledetection.service.js b/src/app/services/mobiledetection.service.js
diff --git a/src/res/en-EU/modal.json b/src/res/en-EU/modal.json
@@ -42,5 +42,7 @@
     "education": "Education:",
     "skillHeading": "Skills:",
     "present": "Present",
-    "profileURL": "LinkedIn Profile URL:"
+    "profileURL": "LinkedIn Profile URL:",
+    "byChecking": "By checking this box you're agreeing to our",
+    "privacyPolicy": "Privacy Policy"
 }
diff --git a/src/res/en-GB/modal.json b/src/res/en-GB/modal.json
@@ -42,5 +42,7 @@
     "education": "Education:",
     "skillHeading": "Skills:",
     "present": "Present",
-    "profileURL": "LinkedIn Profile URL:"
+    "profileURL": "LinkedIn Profile URL:",
+    "byChecking": "By checking this box you're agreeing to our",
+    "privacyPolicy": "Privacy Policy"
 }
diff --git a/src/res/en-US/modal.json b/src/res/en-US/modal.json
@@ -42,5 +42,7 @@
     "education": "Education:",
     "skillHeading": "Skills:",
     "present": "Present",
-    "profileURL": "LinkedIn Profile URL:"
+    "profileURL": "LinkedIn Profile URL:",
+    "byChecking": "By checking this box you're agreeing to our",
+    "privacyPolicy": "Privacy Policy"
 }
diff --git a/src/res/fr-FR/modal.json b/src/res/fr-FR/modal.json
@@ -41,5 +41,7 @@
     "education": "Éducation:",
     "skillHeading": "Compétences",
     "present": "Présent",
-    "profileURL": "LinkedIn Profil URL:"
+    "profileURL": "LinkedIn Profil URL:",
+    "byChecking": "En cochant cette case, vous acceptez notre",
+    "privacyPolicy": "politique de confidentialité"
 }
diff --git a/test/unit/controllers/modal.controller.spec.js b/test/unit/controllers/modal.controller.spec.js
@@ -10,7 +10,16 @@ describe('Controller: CareerPortalModalController', () => {
                 service: {corpToken: 1, port: 1, swimlane: 1},
                 acceptedResumeTypes: ['html', 'text', 'txt'],
                 minUploadSize: 4096,
-                maxUploadSize: 5242880
+                maxUploadSize: 5242880,
+                privacyConsent: {
+                    consentCheckbox: false,
+                    privacyStatementParagraphs: [
+                        "[FIRST PARAGRAPH]",
+                        "[SECOND PARAGRAPH]"
+                    ],
+                    privacyPolicyUrl: '',
+                    usePrivacyPolicyUrl: false,
+                }
             });
         });
     });
@@ -121,9 +130,9 @@ describe('Controller: CareerPortalModalController', () => {
         });
     });
 
-    describe('Function: enableSendButton()', () => {
+    describe('Function: disableSendButton()', () => {
         it('should be defined.', () => {
-            expect(vm.enableSendButton).toBeDefined();
+            expect(vm.disableSendButton).toBeDefined();
         });
     });
 

diff --git a/test/unit/directives/modal.directive.spec.js b/test/unit/directives/modal.directive.spec.js
@@ -4,7 +4,16 @@ describe('Directive: CareerPortalModal', () => {
             $provide.constant('configuration', {
                 someUrl: '/dummyValue',
                 service: {corpToken: 1, port: 1, swimlane: 1},
-                acceptedResumeTypes: []
+                acceptedResumeTypes: [],
+                privacyConsent: {
+                    consentCheckbox: true,
+                    privacyStatementParagraphs: [
+                        "[FIRST PARAGRAPH]",
+                        "[SECOND PARAGRAPH]"
+                    ],
+                    privacyPolicyUrl: '',
+                    usePrivacyPolicyUrl: false
+                }
             });
         });
     });