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/service-locations.ts

@@ -1,9 +1,13 @@
 import { getApiBaseUrl } from '../runtime-config'
-import type { Location } from './locations'
 
-// Location for the booking service-locations step (filtered offices + next appointment date).
-// nextAppointmentDate is mapped now for a later UI step; this page does not display it yet.
-export type ServiceLocation = 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
 }
 

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({