Merge pull request #1139 from CruGlobal/2362-okta-user-match-buttons

[EP-2362] Move footer buttons to user-match-modal

src/assets/scss/components/_registerAccountModal.scss

@@ -35,17 +35,6 @@ register-account-modal {
     margin-top: 20px;
   }
 
-  .footer-buttons {
-    button {
-      width: 100%;
-    }
-
-    button.back {
-      display: none;
-      width: auto;
-    }
-  }
-
   .modal-dialog.modal-sm & {
     &[data-state=sign-in],
     &[data-state=loading-donor] {
@@ -119,26 +108,6 @@ register-account-modal {
         margin-right: 200px;
       }
     }
-
-    .footer-buttons {
-      margin-left: -230px;
-      margin-right: -230px;
-      margin-bottom: -30px;
-      padding: 15px;
-      background-color: #F5F5F5;
-      display: flex;
-
-      button:not(.back) {
-        width: 400px;
-        margin-left: auto;
-      }
-      button.back {
-        display: block;
-      }
-    }
-    .success .footer-buttons {
-      flex-direction: column;
-    }
   }
 
   sign-in-form {

src/assets/scss/components/_userMatchModal.scss

@@ -1,6 +1,15 @@
 user-match-modal {
   display: inline-block;
-  padding: 20px;
+  width: 100%;
+
+  .modal-body {
+    padding: 20px;
+  }
+
+  .modal-footer > div {
+    // Treat the buttons as children of the footer even when they are nested inside a div
+    display: contents;
+  }
 
   h4 {
     font-weight: bold;
@@ -33,28 +42,15 @@ user-match-modal {
     }
   }
 
-  .modal-dialog.modal-lg & .success .footer-buttons button {
-    margin-right: auto;
-  }
-}
-
-session-modal > div > div > user-match-modal {
-  width: 100%;
-
-  .footer-buttons {
-    padding: 15px;
-    background-color: #F5F5F5;
+  .modal-footer {
     display: flex;
+    justify-content: flex-end;
 
-    button:not(.back) {
-      margin-left: auto;
-      width: auto;
+    .btn.back {
+      margin-right: auto;
     }
-    button.back {
-      display: block;
+    .btn-primary {
+      width: 400px;
     }
   }
-  .success .footer-buttons {
-    flex-direction: column;
-  }
 }

src/common/components/contactInfoModal/contactInfoModal.tpl.html

@@ -1,17 +1,19 @@
-<contact-info
-  submitted="$ctrl.submitted"
-  on-submit="$ctrl.onSubmit(success)"
-  donor-details="$ctrl.signUpDonorDetails"
-></contact-info>
-<div class="row">
-  <div class="col-sm-5 hidden-xs">
-    <button id="cancelButtonTop" class="btn btn-default" ng-click="$ctrl.onCancel()" translate>Cancel</button>
-  </div>
-  <div class="col-sm-6 col-sm-offset-1">
-    <button id="submitChangesButton" type="button" class="btn btn-primary pull-right btn-block-mobile" ng-click="$ctrl.submitted = true" translate>Submit</button>
-    <button id="cancelButton" class="btn btn-link btn-block visible-xs" ng-click="$ctrl.onCancel()">
-      <i class="fa fa-angle-left"></i>
-      <translate>Cancel</translate>
-    </button>
+<div class="modal-body">
+  <contact-info
+    submitted="$ctrl.submitted"
+    on-submit="$ctrl.onSubmit(success)"
+    donor-details="$ctrl.signUpDonorDetails"
+  ></contact-info>
+  <div class="row">
+    <div class="col-sm-5 hidden-xs">
+      <button id="cancelButtonTop" class="btn btn-default" ng-click="$ctrl.onCancel()" translate>Cancel</button>
+    </div>
+    <div class="col-sm-6 col-sm-offset-1">
+      <button id="submitChangesButton" type="button" class="btn btn-primary pull-right btn-block-mobile" ng-click="$ctrl.submitted = true" translate>Submit</button>
+      <button id="cancelButton" class="btn btn-link btn-block visible-xs" ng-click="$ctrl.onCancel()">
+        <i class="fa fa-angle-left"></i>
+        <translate>Cancel</translate>
+      </button>
+    </div>
   </div>
 </div>

src/common/components/failedVerificationModal/failedVerificationModal.component.js

@@ -6,9 +6,5 @@ const componentName = 'failedVerificationModal'
 export default angular
   .module(componentName, [])
   .component(componentName, {
-    templateUrl: template,
-    bindings: {
-      title: '@',
-      onOk: '&'
-    }
+    templateUrl: template
   })

src/common/components/failedVerificationModal/failedVerificationModal.tpl.html

@@ -1,22 +1,9 @@
-<div class="modal-body">
-  <div class="alert alert-danger" role="alert">
-    <p>
-      We're sorry, we were not able to set up your account.
-    </p>
-  </div>
-  <div>
-    <p>Please contact us at <a href="tel:8882787233" target="_blank" translate>Call (888) 278-7233</a> or email <a href="mailto:[email protected]">[email protected]</a>.</p>
-    <p>We apologize for the inconvenience.  You may still finish giving the gifts in your cart by checking out as a guest.</p>
-  </div>
+<div class="alert alert-danger" role="alert">
+  <p>
+    We're sorry, we were not able to set up your account.
+  </p>
 </div>
-
-<div class="modal-footer">
-  <div class="col-xs-12">
-    <button type="button"
-            id="okButton"
-            class="btn btn-primary pull-right"
-            ng-click="$ctrl.onOk()"
-            translate>OK
-    </button>
-  </div>
+<div>
+  <p>Please contact us at <a href="tel:8882787233" target="_blank" translate>Call (888) 278-7233</a> or email <a href="mailto:[email protected]">[email protected]</a>.</p>
+  <p>We apologize for the inconvenience.  You may still finish giving the gifts in your cart by checking out as a guest.</p>
 </div>

src/common/components/registerAccountModal/registerAccountModal.component.js

@@ -157,7 +157,7 @@ class RegisterAccountModalController {
         } else if (donorDetails['registration-state'] === 'MATCHED') {
           this.onContactInfoSuccess()
         } else if (donorDetails['registration-state'] === 'FAILED') {
-          this.stateChanged('failed-verification')
+          this.stateChanged('user-match')
         } else {
           // Proceed to Step 3
           this.stateChanged('contact-info')

src/common/components/registerAccountModal/registerAccountModal.component.spec.js

@@ -282,12 +282,12 @@ describe('registerAccountModal', function () {
     })
 
     describe('\'registration-state\' FAILED', () => {
-      it('changes state to \'failed-verification\'', () => {
+      it('changes state to \'user-match\'', () => {
         $ctrl.orderService.getDonorDetails.mockImplementation(() => Observable.of({ 'registration-state': 'FAILED' }))
         $ctrl.checkDonorDetails()
 
         expect($ctrl.orderService.getDonorDetails).toHaveBeenCalled()
-        expect($ctrl.stateChanged).toHaveBeenCalledWith('failed-verification')
+        expect($ctrl.stateChanged).toHaveBeenCalledWith('user-match')
       })
     })
 

src/common/components/registerAccountModal/registerAccountModal.tpl.html

@@ -21,7 +21,7 @@ <h3 translate>Create Your Account</h3>
     Please fill in your information for your online account.
   </div>
 </div>
-<div class="modal-body" ng-switch="$ctrl.state">
+<div ng-switch="$ctrl.state">
   <sign-in-modal
     ng-switch-when="sign-in"
     modal-title="$ctrl.modalTitle"
@@ -38,7 +38,9 @@ <h3 translate>Create Your Account</h3>
     is-inside-another-modal="true"
   ></sign-up-modal>
   <div ng-switch-when="loading-donor">
-    <loading></loading>
+    <div class="modal-body">
+      <loading></loading>
+    </div>
   </div>
   <contact-info-modal
     ng-switch-when="contact-info"
@@ -55,10 +57,5 @@ <h3 translate>Create Your Account</h3>
     on-success="$ctrl.onUserMatchSuccess()"
     set-loading="$ctrl.setLoading({loading: loading})"
   ></user-match-modal>
-  <failed-verification-modal
-    ng-switch-when="failed-verification"
-    modal-title="$ctrl.modalTitle"
-    on-ok="$ctrl.onCancel()"
-  ></failed-verification-modal>
-  <div ng-switch-default style="height: 100px;"></div>
+  <div ng-switch-default class="modal-body" style="height: 100px;"></div>
 </div>

src/common/components/signInModal/signInModal.tpl.html

@@ -1,4 +1,4 @@
-<div ng-class="{'modal-body': !$ctrl.isInsideAnotherModal }">
+<div class="modal-body">
   <div class="content">
     <sign-in-form
       on-success="$ctrl.onSuccess()"

src/common/components/signUpModal/signUpModal.tpl.html

@@ -13,7 +13,7 @@ <h3 translate>Create Your Account</h3>
   </div>
 </div>
 
-<div ng-class="{'modal-body': !$ctrl.isInsideAnotherModal }" class="sticky-buttons">
+<div class="modal-body" class="sticky-buttons">
   <div class="content">
     <div id="osw-container"></div>
   </div>

src/common/components/userMatchModal/userMatchIdentity/userMatchIdentity.component.js

@@ -10,12 +10,22 @@ class UserMatchIdentityController {
     this.hasError = false
   }
 
+  $onChanges (changes) {
+    if (changes.submitted && changes.submitted.currentValue === true) {
+      this.selectContact()
+    }
+  }
+
   selectContact () {
     this.hasError = false
     if (!this.identityForm.$valid) {
       this.hasError = true
+      this.onSubmit({
+        success: false
+      })
     } else {
-      this.onSelectContact({
+      this.onSubmit({
+        success: true,
         contact: isEmpty(this.contact) ? undefined : this.contact
       })
     }
@@ -29,7 +39,10 @@ export default angular
     templateUrl: template,
     bindings: {
       contacts: '<',
-      onBack: '&',
-      onSelectContact: '&'
+      // Set to true from the parent to cause the form to submit and call onSubmit
+      submitted: '<',
+      // Called with a `success` boolean to indicate whether the selection was valid
+      // If the form was valid, it is also called with `contact` set to the selected contact
+      onSubmit: '&'
     }
   })

src/common/components/userMatchModal/userMatchIdentity/userMatchIdentity.component.spec.js

@@ -9,7 +9,7 @@ describe('userMatchIdentity', function () {
   beforeEach(inject(function (_$componentController_) {
     bindings = {
       contacts: ['a', 'b'],
-      onSelectContact: jest.fn(),
+      onSubmit: jest.fn(),
       identityForm: { $valid: false },
       contact: {}
     }
@@ -21,11 +21,30 @@ describe('userMatchIdentity', function () {
     expect($ctrl.hasError).toEqual(false)
   })
 
+  describe('$onChanges', () => {
+    it('submits the form when submitted changes to true', () => {
+      $ctrl.$onChanges({
+        submitted: { currentValue: true }
+      })
+
+      expect($ctrl.onSubmit).toHaveBeenCalled()
+    })
+
+    it('does nothing when the when submitted changes to false', () => {
+      $ctrl.$onChanges({
+        submitted: { currentValue: false }
+      })
+
+      expect($ctrl.onSubmit).not.toHaveBeenCalled()
+    })
+  })
+
   describe('selectContact()', () => {
     describe('invalid form', () => {
       it('set hasError', () => {
         $ctrl.selectContact()
 
+        expect($ctrl.onSubmit).toHaveBeenCalledWith({ success: false })
         expect($ctrl.hasError).toEqual(true)
       })
     })
@@ -39,7 +58,7 @@ describe('userMatchIdentity', function () {
         it('sends selects \'that-is-not-me\' contact', () => {
           $ctrl.selectContact()
 
-          expect($ctrl.onSelectContact).toHaveBeenCalledWith({ contact: undefined })
+          expect($ctrl.onSubmit).toHaveBeenCalledWith({ success: true, contact: undefined })
         })
       })
 
@@ -48,7 +67,7 @@ describe('userMatchIdentity', function () {
           $ctrl.contact = 'a'
           $ctrl.selectContact()
 
-          expect($ctrl.onSelectContact).toHaveBeenCalledWith({ contact: 'a' })
+          expect($ctrl.onSubmit).toHaveBeenCalledWith({ success: true, contact: 'a' })
         })
       })
     })

src/common/components/userMatchModal/userMatchIdentity/userMatchIdentity.tpl.html

@@ -21,12 +21,4 @@ <h4 class="text-center" translate>Are you one of these people?</h4>
              translate>None of the above. Please create a new account.
     </label>
   </div>
-  <div class="footer-buttons">
-    <button type="button" class="btn btn-md back" ng-click="$ctrl.onBack()" translate>Back</button>
-    <button type="button"
-            class="btn btn-md btn-block btn-primary"
-            ng-click="$ctrl.selectContact()"
-            translate>Next
-    </button>
-  </div>
 </form>