Allow users to set a different URL for timeouts than manual sign outs

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [1.16.0] - 2020-09-10
+
+### Changed
+
+- `hmrcTimeoutDialog` Allow users to set a different URL for timeouts than manual sign outs
+
 ## [1.15.3] - 2020-08-14
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "1.15.3",
+  "version": "1.16.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",

src/components/timeout-dialog/template.njk

@@ -6,6 +6,7 @@
       data-countdown="{{ params.countdown }}"
       data-keep-alive-url="{{ params.keepAliveUrl }}"
       data-sign-out-url="{{ params.signOutUrl }}"
+      data-timeout-url="{{ params.timeoutUrl }}"
       data-title="{{ params.title }}"
       data-message="{{ params.message }}"
       data-message-suffix="{{ params.messageSuffix }}"

src/components/timeout-dialog/timeout-dialog.js

@@ -58,6 +58,7 @@ function TimeoutDialog ($module) {
       countdown: validate.int(lookupData('data-countdown')),
       keepAliveUrl: validate.string(lookupData('data-keep-alive-url')),
       signOutUrl: validate.string(lookupData('data-sign-out-url')),
+      timeoutUrl: validate.string(lookupData('data-timeout-url')),
       title: validate.string(lookupData('data-title')),
       message: validate.string(lookupData('data-message')),
       messageSuffix: validate.string(lookupData('data-message-suffix')),
@@ -69,6 +70,9 @@ function TimeoutDialog ($module) {
       )
     }
 
+    // Default timeoutUrl to signOutUrl if not set
+    options.timeoutUrl = options.timeoutUrl || options.signOutUrl
+
     validateInput(options)
     settings = mergeOptionsWithDefaults(options, localisedDefaults)
     setupDialogTimer()
@@ -255,7 +259,7 @@ function TimeoutDialog ($module) {
       var counter = getSecondsRemaining()
       updateCountdown(counter, $countdownElement)
       if (counter <= 0) {
-        signOut()
+        timeout()
       }
       currentTimer = window.setTimeout(runUpdate, getNextTimeout())
     }
@@ -278,6 +282,10 @@ function TimeoutDialog ($module) {
     RedirectHelper.redirectToUrl(settings.signOutUrl)
   }
 
+  function timeout () {
+    RedirectHelper.redirectToUrl(settings.timeoutUrl)
+  }
+
   function cleanup () {
     while (cleanupFunctions.length > 0) {
       var fn = cleanupFunctions.shift()

src/components/timeout-dialog/timeout-dialog.test.js

@@ -267,7 +267,8 @@ describe('/components/timeout-dialog', () => {
         'data-message-suffix': 'My message suffix.',
         'data-keep-alive-button-text': 'KEEP alive',
         'data-sign-out-button-text': 'sign OUT',
-        'data-sign-out-url': '/mySignOutUrl.html'
+        'data-sign-out-url': '/mySignOutUrl.html',
+        'data-timeout-url': '/myTimeoutUrl.html'
       })
       pretendSecondsHavePassed(780)
     })
@@ -416,7 +417,8 @@ describe('/components/timeout-dialog', () => {
         'data-timeout': 130,
         'data-countdown': 120,
         'data-message': 'time:',
-        'data-sign-out-url': 'logout'
+        'data-sign-out-url': 'signout',
+        'data-timeout-url': 'timeout'
       })
 
       pretendSecondsHavePassed(10)
@@ -451,20 +453,31 @@ describe('/components/timeout-dialog', () => {
       expect(getAudibleCountText()).toEqual('time: 20 seconds.')
       pretendSecondsHavePassed(1)
 
-      expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('logout')
+      expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('timeout')
       expect(getVisualCountText()).toEqual('time: -1 seconds.')
       expect(getAudibleCountText()).toEqual('time: 20 seconds.')
       pretendSecondsHavePassed(1)
 
       expect(getVisualCountText()).toEqual('time: -2 seconds.')
       expect(getAudibleCountText()).toEqual('time: 20 seconds.')
     })
+    it('should default redirectToUrl to data-sign-out-url if data-timeout-url is not set', function () {
+      setupDialog({
+        'data-timeout': 130,
+        'data-countdown': 120,
+        'data-message': 'time:',
+        'data-sign-out-url': 'logout'
+      })
+      pretendSecondsHavePassed(131)
+      expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('logout')
+    })
     it('should have an audio countdown which counts the last minute in 20 second decrements', function () {
       setupDialog({
         'data-timeout': 70,
         'data-countdown': 65,
         'data-message': 'time:',
-        'data-sign-out-url': 'logout'
+        'data-sign-out-url': 'signout',
+        'data-timeout-url': 'timeout'
       })
 
       pretendSecondsHavePassed(10)
@@ -505,7 +518,8 @@ describe('/components/timeout-dialog', () => {
         'data-timeout': 130,
         'data-countdown': 120,
         'data-message': 'Welsh, time:',
-        'data-sign-out-url': 'logout'
+        'data-sign-out-url': 'signout',
+        'data-timeout-url': 'timeout'
       })
 
       pretendSecondsHavePassed(10)
@@ -540,7 +554,7 @@ describe('/components/timeout-dialog', () => {
       expect(getAudibleCountText()).toEqual('Welsh, time: 20 eiliad.')
       pretendSecondsHavePassed(1)
 
-      expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('logout')
+      expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('timeout')
       expect(getVisualCountText()).toEqual('Welsh, time: -1 eiliad.')
       expect(getAudibleCountText()).toEqual('Welsh, time: 20 eiliad.')
       pretendSecondsHavePassed(1)
@@ -623,7 +637,8 @@ describe('/components/timeout-dialog', () => {
         'data-timeout': 130,
         'data-countdown': 50,
         'data-message': 'Remaining time is',
-        'data-sign-out-url': 'logout'
+        'data-sign-out-url': 'signout',
+        'data-timeout-url': 'timeout'
       })
       const lowestAudibleCount = 'Remaining time is 20 seconds.'
 
@@ -651,7 +666,7 @@ describe('/components/timeout-dialog', () => {
       expect(getAudibleCountText()).toEqual(lowestAudibleCount)
       pretendSecondsHavePassed(1)
 
-      expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('logout')
+      expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('timeout')
       expect(getVisualCountText()).toEqual('Remaining time is -1 seconds.')
       expect(getAudibleCountText()).toEqual(lowestAudibleCount)
       pretendSecondsHavePassed(1)
@@ -666,7 +681,8 @@ describe('/components/timeout-dialog', () => {
         'data-timeout': 130,
         'data-countdown': 50,
         'data-message': 'time:',
-        'data-sign-out-url': 'logout'
+        'data-sign-out-url': 'signout',
+        'data-timeout-url': 'timeout'
       })
 
       pretendSecondsHavePassed(80)