Refactor codebase

.github/workflows/appointment-booking-ci.yaml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '22'
+          node-version: '24'
           cache: 'npm'
           cache-dependency-path: appointment-booking/package-lock.json
 

appointment-booking/app/api/locations.ts → appointment-booking/app/api/service-locations.ts

@@ -1,16 +1,17 @@
 import { getApiBaseUrl } from '../runtime-config'
 
-// Location type used by the booking flow after mapping from the offices API.
-export type Location = {
+// Bookable office for a selected service. nextAppointmentDate is for a later UI step.
+export type ServiceLocation = {
   id: number
   name: string
   address: string
   latitude: number | null
   longitude: number | null
   appointmentMessage: string
+  nextAppointmentDate: string | null
 }
 
-// API response row from GET /api/v1/offices/.
+// API response row from GET /api/v1/offices?service_id=.
 type ApiOffice = {
   office_id: number
   office_name: string
@@ -21,16 +22,17 @@ type ApiOffice = {
   online_status: string | null
   deleted: string | null
   office_appointment_message: string | null
+  next_appointment_date: string | null
 }
 
 type ApiOfficesResponse = {
   offices: ApiOffice[]
 }
 
-// Fetch bookable offices for the booking locations step.
+// Fetch bookable offices for a selected service.
 // Throws on fetch/HTTP/parse failure so the page can tell error apart from empty [].
-export async function getBookingLocations(): Promise<Location[]> {
-  const url = `${await getApiBaseUrl()}/offices/`
+export async function getServiceLocations(serviceId: number): Promise<ServiceLocation[]> {
+  const url = `${await getApiBaseUrl()}/offices?service_id=${serviceId}`
 
   let body: ApiOfficesResponse
   try {
@@ -43,7 +45,7 @@ export async function getBookingLocations(): Promise<Location[]> {
     throw new Error('Failed to load locations')
   }
 
-  const locations: Location[] = []
+  const locations: ServiceLocation[] = []
 
   for (const row of body.offices ?? []) {
     const status = row.online_status ?? ''
@@ -59,6 +61,7 @@ export async function getBookingLocations(): Promise<Location[]> {
       latitude: row.latitude,
       longitude: row.longitude,
       appointmentMessage: row.office_appointment_message?.trim() || '',
+      nextAppointmentDate: row.next_appointment_date ?? null,
     })
   }
 

appointment-booking/app/booking/booking-context.tsx

@@ -2,7 +2,7 @@
 // Also saved in the browser so choices survive the sign-in redirect.
 import { useContext, useEffect, useState, type ReactNode } from 'react'
 
-import type { Location } from '../api/locations'
+import type { ServiceLocation } from '../api/service-locations'
 import type { Service } from '../api/services'
 import { addJsonToSession, getJsonFromSession, removeFromSession } from '../auth/session'
 import { SessionKeys } from '../auth/session-keys'
@@ -19,14 +19,16 @@ function persistJson(key: string, value: unknown) {
 export function BookingProvider({ children }: { children: ReactNode }) {
   const [isReady, setIsReady] = useState(false)
   const [selectedService, setSelectedServiceState] = useState<Service | null>(null)
-  const [selectedLocation, setSelectedLocationState] = useState<Location | null>(null)
+  const [selectedLocation, setSelectedLocationState] = useState<ServiceLocation | null>(null)
   const [selectedSlot, setSelectedSlotState] = useState<BookingSlot | null>(null)
 
   useEffect(() => {
     // Restore saved choices after the page first loads in the browser.
     const id = window.setTimeout(() => {
       setSelectedServiceState(getJsonFromSession<Service>(SessionKeys.BookingSelectedService))
-      setSelectedLocationState(getJsonFromSession<Location>(SessionKeys.BookingSelectedLocation))
+      setSelectedLocationState(
+        getJsonFromSession<ServiceLocation>(SessionKeys.BookingSelectedLocation),
+      )
       setSelectedSlotState(getJsonFromSession<BookingSlot>(SessionKeys.BookingSelectedSlot))
       setIsReady(true)
     }, 0)
@@ -40,7 +42,7 @@ export function BookingProvider({ children }: { children: ReactNode }) {
     persistJson(SessionKeys.BookingSelectedService, service)
   }
 
-  function setSelectedLocation(location: Location | null) {
+  function setSelectedLocation(location: ServiceLocation | null) {
     setSelectedLocationState(location)
     setSelectedSlot(null)
     persistJson(SessionKeys.BookingSelectedLocation, location)

appointment-booking/app/booking/booking-store.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
-import type { Location } from '../api/locations'
+import type { ServiceLocation } from '../api/service-locations'
 import type { Service } from '../api/services'
 
 // The chosen appointment date and time. Date is YYYY-MM-DD; times are HH:MM.
@@ -14,8 +14,8 @@ export type BookingContextValue = {
   isReady: boolean
   selectedService: Service | null
   setSelectedService: (service: Service | null) => void
-  selectedLocation: Location | null
-  setSelectedLocation: (location: Location | null) => void
+  selectedLocation: ServiceLocation | null
+  setSelectedLocation: (location: ServiceLocation | null) => void
   selectedSlot: BookingSlot | null
   setSelectedSlot: (slot: BookingSlot | null) => void
 }

appointment-booking/app/components/BookingDetailCallout.tsx

@@ -0,0 +1,67 @@
+import { Callout, InlineAlert, Text } from '@bcgov/design-system-react-components'
+
+import type { ServiceLocation } from '~/api/service-locations'
+import type { Service } from '~/api/services'
+import type { BookingSlot } from '~/booking/booking-store'
+
+type BookingDetailCalloutProps = {
+  selectedService: Service | null
+  selectedLocation: ServiceLocation | null
+  /** When set (datetime step), show chosen date/time under location details. */
+  selectedSlot?: BookingSlot | null
+  formatDate?: (date: string) => string
+  formatTimeRange?: (startTime: string, endTime: string) => string
+}
+
+export function BookingDetailCallout({
+  selectedService,
+  selectedLocation,
+  selectedSlot = null,
+  formatDate,
+  formatTimeRange,
+}: BookingDetailCalloutProps) {
+  return (
+    <Callout variant="lightBlue">
+      <div className="booking-detail-callout-content">
+        <Text>
+          {selectedService ? (
+            <>
+              Selected service - <strong>{selectedService.name}</strong>
+              <br />
+            </>
+          ) : (
+            <>Please go back to choose a service before selecting a location.</>
+          )}
+          {selectedLocation ? (
+            <>
+              {!selectedService ? <br /> : null}
+              Appointment location - <strong>{selectedLocation.name}</strong>
+              {selectedLocation.address ? (
+                <>
+                  <br />
+                  Address - <strong>{selectedLocation.address}</strong>
+                </>
+              ) : null}
+            </>
+          ) : selectedService ? (
+            <>Select a location from the list to view details.</>
+          ) : null}
+          {selectedSlot && formatDate && formatTimeRange ? (
+            <>
+              <br />
+              Appointment date - <strong>{formatDate(selectedSlot.date)}</strong>
+              <br />
+              Appointment time -{' '}
+              <strong>{formatTimeRange(selectedSlot.startTime, selectedSlot.endTime)}</strong>
+            </>
+          ) : null}
+        </Text>
+        {selectedLocation?.appointmentMessage ? (
+          <InlineAlert variant="info" title="Location notice">
+            {selectedLocation.appointmentMessage}
+          </InlineAlert>
+        ) : null}
+      </div>
+    </Callout>
+  )
+}

appointment-booking/app/components/LocationsTable.tsx

@@ -1,16 +1,16 @@
 import { SvgChevronDownIcon, SvgChevronUpIcon } from '@bcgov/design-system-react-components'
-import type { Location } from '../api/locations'
+import type { ServiceLocation } from '../api/service-locations'
 
 type SortDirection = 'asc' | 'desc'
 
 type LocationsTableProps = {
-  locations: Location[]
+  locations: ServiceLocation[]
   isLoading: boolean
   showNoResults: boolean
   sortDirection: SortDirection
   onToggleSort: () => void
   selectedId: string
-  onSelect: (location: Location) => void
+  onSelect: (location: ServiceLocation) => void
 }
 
 export function LocationsTable({