Refactor overlap search results

Co-authored-by: Alistair Laing <[email protected]>p

assets/sass/application.sass

@@ -23,6 +23,7 @@ $path: "/assets/images/"
 @import './components/_form-row-dl'
 @import './components/_date-picker'
 @import './components/_result-card'
+@import './components/_overlap-details'
 @import 'components/filter'
 @import './local'
 

assets/sass/components/_overlap-details.scss

@@ -0,0 +1,13 @@
+.overlap-details {
+    margin: 0;
+}
+
+.overlap-details__key,
+.overlap-details__value {
+    margin: 0;
+    display: inline;
+}
+
+.overlap-details__row--inline {
+    display: inline;
+}

cypress_shared/components/bedspaceSearchResult.ts

@@ -77,6 +77,6 @@ export default class BedspaceSearchResult extends Component {
 
   clickOverlapLink(crn: string) {
     cy.get('summary').contains('Other people staying').click()
-    cy.get('ul[data-cy-overlaps] > li').contains(crn).find('a').click()
+    cy.get('ul[data-cy-overlaps] > li').find('dd.overlap-details__value').contains(crn).parents('li').find('a').click()
   }
 }

server/utils/bedspaceSearchResultUtils.test.ts

@@ -1,5 +1,17 @@
-import { bedSearchResultFactory, characteristicFactory, premisesFactory, roomFactory } from '../testutils/factories'
-import { bedspaceKeyCharacteristics, premisesKeyCharacteristics } from './bedspaceSearchResultUtils'
+import { TemporaryAccommodationBedSearchResultOverlap } from '@approved-premises/api'
+import {
+  bedSearchResultFactory,
+  bookingFactory,
+  characteristicFactory,
+  personFactory,
+  premisesFactory,
+  roomFactory,
+} from '../testutils/factories'
+import {
+  bedspaceKeyCharacteristics,
+  bedspaceOverlapResult,
+  premisesKeyCharacteristics,
+} from './bedspaceSearchResultUtils'
 
 describe('BedspaceSearchResultUtils', () => {
   describe('bedspaceKeyCharacteristics', () => {
@@ -50,4 +62,43 @@ describe('BedspaceSearchResultUtils', () => {
       ])
     })
   })
+
+  describe('bedspaceOverlapResult', () => {
+    let overLapDays: TemporaryAccommodationBedSearchResultOverlap['days']
+    let overlapResult: Omit<TemporaryAccommodationBedSearchResultOverlap, 'name' | 'sex' | 'assesmentId'>
+
+    const createOverLapResult = () => {
+      return {
+        crn: personFactory.build().crn,
+        days: overLapDays,
+        roomId: roomFactory.build().id,
+        bookingId: bookingFactory.build().id,
+      }
+    }
+
+    beforeEach(() => {
+      overLapDays = 8
+      overlapResult = createOverLapResult()
+    })
+
+    it('returns object of key/value pairs', () => {
+      expect(bedspaceOverlapResult(overlapResult)).toEqual({
+        crn: overlapResult.crn,
+        overlapDays: '8 days overlap',
+        roomId: overlapResult.roomId,
+        bookingId: overlapResult.bookingId,
+      })
+    })
+
+    describe('when overlap by 1 day', () => {
+      beforeEach(() => {
+        overLapDays = 1
+        overlapResult = createOverLapResult()
+      })
+
+      it('returns the correct overlap message for single day', () => {
+        expect(bedspaceOverlapResult(overlapResult).overlapDays).toEqual('1 day overlap')
+      })
+    })
+  })
 })

server/utils/bedspaceSearchResultUtils.ts

@@ -1,4 +1,4 @@
-import { BedSearchResult } from '@approved-premises/api'
+import { BedSearchResult, TemporaryAccommodationBedSearchResultOverlap } from '@approved-premises/api'
 
 export function premisesKeyCharacteristics(result: BedSearchResult): Array<string> {
   return result.premises.characteristics
@@ -11,3 +11,17 @@ export function bedspaceKeyCharacteristics(result: BedSearchResult): Array<strin
     .sort((a, b) => a.name.localeCompare(b.name))
     .map(characteristic => characteristic.name)
 }
+
+export function bedspaceOverlapResult(
+  overlapResult: Omit<TemporaryAccommodationBedSearchResultOverlap, 'name' | 'sex' | 'assesmentId'>,
+) {
+  const { crn, days, roomId, bookingId } = overlapResult
+  const overlapDays = `${days} ${days === 1 ? 'day' : 'days'} overlap`
+
+  return {
+    crn,
+    overlapDays,
+    roomId,
+    bookingId,
+  }
+}

server/views/components/overlap-details/macro.njk

@@ -0,0 +1,20 @@
+{% macro overlapDetails(params) %}
+    <dl class="overlap-details">
+        <div class="overlap-details__row">
+            <dt class="overlap-details__key">
+                CRN: 
+            </dt>    
+            <dd class="overlap-details__value">{{ params.overlap.crn }}</dd>
+        </div>
+        <div class="overlap-details__row overlap-details__row--inline">
+            <dt class="overlap-details__key govuk-visually-hidden">
+                Overlap: 
+            </dt>
+            <dd class="overlap-details__value">{{ params.overlap.overlapDays }}</dd>
+        </div>
+    </dl>
+    <a class="govuk-link"
+        href="{{ addPlaceContext(paths.bookings.show({premisesId: params.premisesId, roomId: params.overlap.roomId, bookingId: params.overlap.bookingId})) }}">
+        View booking
+    </a>
+{% endmacro %}

server/views/temporary-accommodation/bedspace-search/results.njk

@@ -4,6 +4,7 @@
 
 {% from "moj/components/filter/macro.njk" import mojFilter %}
 {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+{% from "../../components/overlap-details/macro.njk" import overlapDetails %}
 
 {% extends "../../partials/layout.njk" %}
 
@@ -91,15 +92,12 @@
                                 {% set otherPeopleStayingHtml %}
                                     <ul class="govuk-list govuk-list--spaced" data-cy-overlaps>
                                         {% for overlap in result.overlaps %}
-                                            <li>
-                                                CRN: {{ overlap.crn }}<br>
-                                                {{ overlap.days }} {{ 'day' if overlap.days == '1' else 'days' }}
-                                                overlap<br>
-                                                <a class="govuk-link"
-                                                   href="{{ addPlaceContext(paths.bookings.show({premisesId: result.premises.id, roomId: overlap.roomId, bookingId: overlap.bookingId})) }}">
-                                                    View booking
-                                                </a>
-                                            </li>
+                                        <li>
+                                            {{ overlapDetails({ 
+                                                overlap: BedspaceSearchResultUtils.bedspaceOverlapResult(overlap),
+                                                premisesId: result.premises.id })
+                                            }}
+                                        </li>
                                         {% endfor %}
                                     </ul>
                                 {% endset %}