EP-2560-QA-1 (#1131)

* Move email under Organization Name.
CruGlobal · Jan 9, 2025 · 806d875 · 806d875
1 parent d964703
commit 806d875
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 27 deletions.
diff --git a/src/common/components/contactInfo/contactInfo.component.js b/src/common/components/contactInfo/contactInfo.component.js
@@ -9,6 +9,7 @@ import 'rxjs/add/observable/forkJoin'
 import { phoneNumberRegex } from 'common/app.constants'
 
 import addressForm from 'common/components/addressForm/addressForm.component'
+import emailField from './emailField/emailField.component'
 
 import orderService from 'common/services/api/order.service'
 import radioStationsService from 'common/services/api/radioStations.service'
@@ -178,6 +179,7 @@ export default angular
   .module(componentName, [
     'ngMessages',
     addressForm.name,
+    emailField.name,
     orderService.name,
     radioStationsService.name,
     sessionService.name,

diff --git a/src/common/components/contactInfo/contactInfo.tpl.html b/src/common/components/contactInfo/contactInfo.tpl.html
@@ -120,22 +120,6 @@ <h4 ng-if="$ctrl.useV3 === 'true'" class="panel-title  border-bottom-small  visi
           </div>
         </div>
       </div>
-
-        <div ng-if="$ctrl.useV3 === 'true'" class="row">
-          <div class="col-sm-6">
-            <div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.email | showErrors)}">
-              <label>
-                <span translate>{{'EMAIL'}}</span>
-                <input type="email" class="form-control  form-control-subtle" name="email" ng-model="$ctrl.donorDetails['email']" required ng-maxlength="100" ng-disabled="$ctrl.donorDetails.staff">
-              </label>
-              <div role="alert" ng-messages="$ctrl.detailsForm.email.$error" ng-if="($ctrl.detailsForm.email | showErrors)">
-                <div class="help-block" ng-message="required" translate>{{'EMAIL_MISSING_ERROR'}}</div>
-                <div class="help-block" ng-message="email" translate>{{'EMAIL_INVALID_ERROR'}}</div>
-                <div class="help-block" ng-message="maxlength" translate>{{'EMAIL_LENGTH_ERROR'}}</div>
-              </div>
-            </div>
-          </div>
-        </div>
 
       <div class="row" ng-if="$ctrl.donorDetails['donor-type'] === 'Household' && $ctrl.useV3 !== 'true'">
         <div class="col-sm-4">
@@ -225,6 +209,16 @@ <h4 ng-if="$ctrl.useV3 === 'true'" class="panel-title  border-bottom-small  visi
           </div>
         </div>
       </div>
+
+      <div ng-if="$ctrl.useV3 === 'true'" class="row">
+        <div class="col-sm-12">
+          <email-field
+            details-form="$ctrl.detailsForm"
+            donor-details="$ctrl.donorDetails">
+          </email-field>
+        </div>
+      </div>
+
     </div>
 
     <div class="mb">
@@ -242,17 +236,10 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'MAILING_ADDRE
       <h4 class="panel-title  border-bottom-small  visible" translate>{{'CONTACT_INFO'}}</h4>
       <div class="row">
         <div class="col-sm-6">
-          <div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.email | showErrors)}">
-            <label>
-              <span translate>{{'EMAIL'}}</span>
-              <input type="email" class="form-control  form-control-subtle" name="email" ng-model="$ctrl.donorDetails['email']" required ng-maxlength="100" ng-disabled="$ctrl.donorDetails.staff">
-            </label>
-            <div role="alert" ng-messages="$ctrl.detailsForm.email.$error" ng-if="($ctrl.detailsForm.email | showErrors)">
-              <div class="help-block" ng-message="required" translate>{{'EMAIL_MISSING_ERROR'}}</div>
-              <div class="help-block" ng-message="email" translate>{{'EMAIL_INVALID_ERROR'}}</div>
-              <div class="help-block" ng-message="maxlength" translate>{{'EMAIL_LENGTH_ERROR'}}</div>
-            </div>
-          </div>
+          <email-field
+            details-form="$ctrl.detailsForm"
+            donor-details="$ctrl.donorDetails">
+          </email-field>
         </div>
         <div class="col-sm-6">
           <div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.phoneNumber | showErrors)}">

diff --git a/src/common/components/contactInfo/emailField/emailField.component.js b/src/common/components/contactInfo/emailField/emailField.component.js
@@ -0,0 +1,17 @@
+import angular from 'angular'
+import template from './emailField.tpl.html'
+
+const componentName = 'emailField'
+
+class EmailFieldController {}
+
+export default angular
+  .module(componentName, [])
+  .component(componentName, {
+    controller: EmailFieldController,
+    templateUrl: template,
+    bindings: {
+      donorDetails: '<',
+      detailsForm: '<',
+    }
+  })
diff --git a/src/common/components/contactInfo/emailField/emailField.tpl.html b/src/common/components/contactInfo/emailField/emailField.tpl.html
@@ -0,0 +1,11 @@
+<div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.email | showErrors)}">
+	<label>
+		<span translate>{{'EMAIL'}}</span>
+		<input type="email" class="form-control  form-control-subtle" name="email" ng-model="$ctrl.donorDetails['email']" required ng-maxlength="100" ng-disabled="$ctrl.donorDetails.staff">
+	</label>
+	<div role="alert" ng-messages="$ctrl.detailsForm.email.$error" ng-if="($ctrl.detailsForm.email | showErrors)">
+		<div class="help-block" ng-message="required" translate>{{'EMAIL_MISSING_ERROR'}}</div>
+		<div class="help-block" ng-message="email" translate>{{'EMAIL_INVALID_ERROR'}}</div>
+		<div class="help-block" ng-message="maxlength" translate>{{'EMAIL_LENGTH_ERROR'}}</div>
+	</div>
+</div>