[EP-2362] Deduplicate sign in modals

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

@@ -83,6 +83,10 @@ class RegisterAccountModalController {
     }
   }
 
+  onSignUp () {
+    this.stateChanged('sign-up')
+  }
+
   onIdentitySuccess () {
     // Success Sign-In/Up, Proceed to Step 2.
     this.getDonorDetails()
@@ -142,10 +146,20 @@ class RegisterAccountModalController {
 
   stateChanged (state) {
     this.element.dataset.state = state
-    if (state === 'sign-up') {
+    if (this.minimal && (state === 'sign-in' || state === 'sign-up')) {
+      // Use a small modal for sign in and sign up modals when they are in minimal mode
+      this.setModalSize('sm')
+    } else if (state === 'sign-up') {
+      // Use a medium modal for sign up models when it is not in minimal mode because it can't
+      // benefit from a larger size on larger screens
       this.setModalSize('md')
+    } else if (this.$window.screen.width >= 1200) {
+      // For sign in and other modals, use a large modal
+      this.setModalSize('lg')
     } else {
-      this.setModalSize(this.$window.screen.width >= 1200 ? 'lg' : state === 'contact-info' ? undefined : 'sm')
+      // The contact info modal needs at least medium size, even on small screens, but other modals
+      // can be small
+      this.setModalSize(state === 'contact-info' ? 'md' : 'sm')
     }
 
     this.state = state
@@ -159,9 +173,7 @@ class RegisterAccountModalController {
     // Modal size is unchangeable after initialization. This fetches the modal and changes the size classes.
     const modal = angular.element(document.getElementsByClassName('session-modal'))
     modal.removeClass('modal-sm modal-md modal-lg')
-    if (angular.isDefined(size)) {
-      modal.addClass(`modal-${size}`)
-    }
+    modal.addClass(`modal-${size}`)
   }
 }
 
@@ -183,6 +195,9 @@ export default angular
     bindings: {
       firstName: '=',
       modalTitle: '=',
+      // If true, hide the "Welcome back!" message in the header/sidebar
+      minimal: '<',
+      lastPurchaseId: '<',
       onSuccess: '&',
       onCancel: '&',
       setLoading: '&'

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

@@ -24,7 +24,7 @@ describe('registerAccountModal', function () {
       $element: [{ dataset: {} }],
       orderService: { getDonorDetails: jest.fn() },
       verificationService: { postDonorMatches: jest.fn() },
-      sessionService: { 
+      sessionService: {
         getRole: jest.fn(),
         isOktaRedirecting: jest.fn(),
         removeOktaRedirectIndicator: jest.fn(),
@@ -281,7 +281,7 @@ describe('registerAccountModal', function () {
     it('changes to \'contact-info\' state', () => {
       $ctrl.stateChanged('contact-info')
 
-      expect($ctrl.setModalSize).toHaveBeenCalledWith(undefined)
+      expect($ctrl.setModalSize).toHaveBeenCalledWith('md')
       expect($ctrl.setLoading).toHaveBeenCalledWith({ loading: false })
       expect($ctrl.state).toEqual('contact-info')
     })
@@ -293,6 +293,30 @@ describe('registerAccountModal', function () {
       expect($ctrl.setLoading).toHaveBeenCalledWith({ loading: false })
       expect($ctrl.state).toEqual('failed-verification')
     })
+
+    describe('when minimal is true', () => {
+      beforeEach(() => {
+        $ctrl.minimal = true
+      })
+
+      it('sets the sign-in modal size to small', () => {
+        $ctrl.stateChanged('sign-in')
+
+        expect($ctrl.setModalSize).toHaveBeenCalledWith('sm')
+      })
+
+      it('sets the sign-up modal size to small', () => {
+        $ctrl.stateChanged('sign-up')
+
+        expect($ctrl.setModalSize).toHaveBeenCalledWith('sm')
+      })
+
+      it('sets the contact-info modal size to medium', () => {
+        $ctrl.stateChanged('contact-info')
+
+        expect($ctrl.setModalSize).toHaveBeenCalledWith('md')
+      })
+    })
   })
 
   describe('setModalSize( size )', () => {
@@ -309,12 +333,5 @@ describe('registerAccountModal', function () {
       expect(modal.removeClass).toHaveBeenCalledWith('modal-sm modal-md modal-lg')
       expect(modal.addClass).toHaveBeenCalledWith('modal-sm')
     })
-
-    it('sets size missing param', () => {
-      $ctrl.setModalSize()
-
-      expect(modal.removeClass).toHaveBeenCalledWith('modal-sm modal-md modal-lg')
-      expect(modal.addClass).not.toHaveBeenCalled()
-    })
   })
 })

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

@@ -1,4 +1,4 @@
-<div class="modal-header {{$ctrl.state}}" >
+<div class="modal-header {{$ctrl.state}}" ng-if="$ctrl.state !== 'sign-in' || !$ctrl.minimal">
   <button type="button" class="close" aria-label="Close" ng-click="$ctrl.onCancel()">
     <span aria-hidden="true">×</span>
   </button>
@@ -24,7 +24,8 @@ <h3 translate>Create Your Account</h3>
   <sign-in-modal
     ng-switch-when="sign-in"
     modal-title="$ctrl.modalTitle"
-    on-state-change="$ctrl.stateChanged(state)"
+    last-purchase-id="$ctrl.lastPurchaseId"
+    on-sign-up="$ctrl.onSignUp()"
     on-success="$ctrl.onIdentitySuccess()"
     on-failure="$ctrl.onIdentityFailure()"
     is-inside-another-modal="true"

src/common/components/signInForm/signInForm.component.js

@@ -42,7 +42,6 @@ export default angular
     bindings: {
       onSuccess: '&',
       onFailure: '&',
-      onStateChange: '&',
       lastPurchaseId: '<',
       onSignUpWithOkta: '&',
       onSignInPage: '<'

src/common/components/signInModal/signInModal.component.js

@@ -25,10 +25,6 @@ class SignInModalController {
   getOktaUrl () {
     return this.sessionService.getOktaUrl()
   }
-
-  stateChanged (state) {
-    this.onStateChange({ state })
-  }
 }
 
 export default angular
@@ -43,7 +39,8 @@ export default angular
     bindings: {
       modalTitle: '=',
       lastPurchaseId: '<',
-      onStateChange: '&',
+      // Called when the user clicks the create account link
+      onSignUp: '&',
       onSuccess: '&',
       onFailure: '&',
       isInsideAnotherModal: '='

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

@@ -58,11 +58,4 @@ describe('signInModal', function () {
       expect($ctrl.sessionService.getOktaUrl).toHaveBeenCalled()
     })
   })
-
-  describe('stateChanged', () => {
-    it('updates the state value', () => {
-      $ctrl.stateChanged('newState')
-      expect($ctrl.onStateChange).toHaveBeenCalledWith({state: 'newState'})
-    })
-  })
 })

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

@@ -4,8 +4,7 @@
       on-success="$ctrl.onSuccess()"
       on-failure="$ctrl.onFailure()"
       last-purchase-id="$ctrl.lastPurchaseId"
-      on-state-change="$ctrl.stateChanged(state)"
-      on-sign-up-with-okta="$ctrl.stateChanged('sign-up')"
+      on-sign-up-with-okta="$ctrl.onSignUp()"
     />
   </div>
 </div>

src/common/services/session/sessionModal.component.js

@@ -1,6 +1,5 @@
 import angular from 'angular'
 
-import signInModal from 'common/components/signInModal/signInModal.component'
 import signUpModal from 'common/components/signUpModal/signUpModal.component'
 import userMatchModal from 'common/components/userMatchModal/userMatchModal.component'
 import contactInfoModal from 'common/components/contactInfoModal/contactInfoModal.component'
@@ -36,6 +35,7 @@ class SessionModalController {
       this.firstName = session.first_name
     })
     this.stateChanged(this.resolve.state)
+    this.minimal = this.resolve.minimal
     this.lastPurchaseId = this.resolve.lastPurchaseId
   }
 
@@ -48,6 +48,10 @@ class SessionModalController {
     this.scrollModalToTop()
   }
 
+  onSignUp () {
+    this.stateChanged('sign-up')
+  }
+
   onSignInSuccess () {
     this.sessionService.removeOktaRedirectIndicator()
     const $injector = this.$injector
@@ -87,7 +91,6 @@ class SessionModalController {
 
 export default angular
   .module(componentName, [
-    signInModal.name,
     signUpModal.name,
     userMatchModal.name,
     contactInfoModal.name,

src/common/services/session/sessionModal.service.js

@@ -19,7 +19,7 @@ const SessionModalService = /* @ngInject */ function ($uibModal, $log, modalStat
         return false
       }
     }
-    type = angular.isDefined(type) ? type : 'sign-in'
+    type = angular.isDefined(type) ? type : 'register-account'
     options = angular.isObject(options) ? options : {}
     const modalOptions = angular.merge({}, {
       component: sessionModalComponent.name,
@@ -59,8 +59,11 @@ const SessionModalService = /* @ngInject */ function ($uibModal, $log, modalStat
   return {
     open: openModal,
     currentModal: () => currentModal,
-    signIn: (lastPurchaseId) => openModal('sign-in', {
-      resolve: { lastPurchaseId: () => lastPurchaseId },
+    signIn: (lastPurchaseId) => openModal('register-account', {
+      resolve: {
+        minimal: () => true,
+        lastPurchaseId: () => lastPurchaseId
+      },
       openAnalyticsEvent: 'ga-sign-in',
       dismissAnalyticsEvent: 'ga-sign-in-exit'
     }).result,

src/common/services/session/sessionModal.service.spec.js

@@ -29,12 +29,12 @@ describe('sessionModalService', function () {
       expect(sessionModalService.open).toBeDefined()
     })
 
-    it('should open \'sign-in\' by default', () => {
+    it('should open \'register-account\' by default', () => {
       const modal = sessionModalService.open()
 
       expect($uibModal.open).toHaveBeenCalled()
       expect($uibModal.open.mock.calls.length).toEqual(1)
-      expect($uibModal.open.mock.calls[0][0].resolve.state()).toEqual('sign-in')
+      expect($uibModal.open.mock.calls[0][0].resolve.state()).toEqual('register-account')
       expect(modal).toEqual(sessionModalService.currentModal())
     })
 
@@ -156,11 +156,12 @@ describe('sessionModalService', function () {
   })
 
   describe('signIn', () => {
-    it('should open signIn modal', () => {
+    it('should open registerAccount modal in minimal mode', () => {
       sessionModalService.signIn()
 
       expect($uibModal.open).toHaveBeenCalledTimes(1)
-      expect($uibModal.open.mock.calls[0][0].resolve.state()).toEqual('sign-in')
+      expect($uibModal.open.mock.calls[0][0].resolve.state()).toEqual('register-account')
+      expect($uibModal.open.mock.calls[0][0].resolve.minimal()).toBe(true)
     })
 
     it('should open signIn modal with last purchase id', () => {

src/common/services/session/sessionModal.tpl.html

@@ -1,11 +1,5 @@
 <div class="loading-overlay-parent">
   <div ng-switch="$ctrl.state">
-    <sign-in-modal ng-switch-when="sign-in"
-      modal-title="$ctrl.modalTitle"
-      last-purchase-id="$ctrl.lastPurchaseId"
-      on-state-change="$ctrl.stateChanged(state)"
-      on-success="$ctrl.onSignInSuccess()"
-    ></sign-in-modal>
     <sign-up-modal ng-switch-when="sign-up"
       modal-title="$ctrl.modalTitle"
       last-purchase-id="$ctrl.lastPurchaseId"
@@ -15,6 +9,7 @@
     <register-account-modal ng-switch-when="register-account"
       first-name="$ctrl.firstName"
       modal-title="$ctrl.modalTitle"
+      minimal="$ctrl.minimal"
       on-success="$ctrl.onSignUpSuccess()"
       on-cancel="$ctrl.onCancel()"
       set-loading="$ctrl.setLoading(loading)"