SBCQ-97: Part 2 - Update services (#74)

Author: BradyMitch

src/app/protected/admin/services/page.tsx

@@ -1,5 +1,6 @@
 import { revalidatePath } from "next/cache"
 import { ServiceTable } from "@/components/admin/services/ServiceTable"
+import { doesServiceCodeExist } from "@/lib/prisma/service/doesServiceCodeExist"
 import { getAllServices } from "@/lib/prisma/service/getAllServices"
 import { updateService } from "@/lib/prisma/service/updateService"
 import { getAllLocations } from "@/utils"
@@ -23,6 +24,7 @@ export default async function Page() {
         services={services}
         updateService={updateService}
         offices={offices}
+        doesServiceCodeExist={doesServiceCodeExist}
         revalidateTable={revalidateTable}
       />
     </div>

src/components/admin/services/EditServiceModal/EditServiceModal.test.tsx

@@ -1,3 +1,4 @@
+import "@testing-library/jest-dom"
 import { fireEvent, render, screen, waitFor } from "@testing-library/react"
 import { describe, expect, it, vi } from "vitest"
 
@@ -11,13 +12,44 @@ import type { ServiceWithRelations } from "@/lib/prisma/service/types"
 import { EditServiceModal } from "./EditServiceModal"
 
 describe("EditServiceModal", () => {
-  const service = { id: "s1", code: "SRV1", deletedAt: null } as unknown as ServiceWithRelations
+  const now = new Date()
+  const service = {
+    id: "s1",
+    code: "SRV1",
+    name: "Service 1",
+    description: "Description",
+    publicName: "Public Service",
+    ticketPrefix: "T",
+    legacyServiceId: null,
+    backOffice: false,
+    deletedAt: null,
+    createdAt: now,
+    updatedAt: now,
+    locations: [
+      {
+        id: "o1",
+        name: "Office 1",
+        deletedAt: null,
+        createdAt: now,
+        updatedAt: now,
+        timezone: "UTC",
+        streetAddress: "123 Test St",
+        mailAddress: null,
+        phoneNumber: null,
+        latitude: 0,
+        longitude: 0,
+        legacyOfficeNumber: null,
+      },
+    ],
+  } as unknown as ServiceWithRelations
+
   const offices = [{ id: "o1", name: "Office 1" }] as unknown as Location[]
 
   it("renders modal title when open with a service", async () => {
     const onClose = vi.fn()
     const updateService = vi.fn().mockResolvedValue(service)
     const revalidateTable = vi.fn().mockResolvedValue(undefined)
+    const doesServiceCodeExist = vi.fn().mockResolvedValue(false)
 
     render(
       <EditServiceModal
@@ -26,6 +58,7 @@ describe("EditServiceModal", () => {
         service={service}
         offices={offices}
         updateService={updateService}
+        doesServiceCodeExist={doesServiceCodeExist}
         revalidateTable={revalidateTable}
       />
     )
@@ -38,6 +71,7 @@ describe("EditServiceModal", () => {
     const onClose = vi.fn()
     const updateService = vi.fn().mockResolvedValue(service)
     const revalidateTable = vi.fn().mockResolvedValue(undefined)
+    const doesServiceCodeExist = vi.fn().mockResolvedValue(false)
 
     render(
       <EditServiceModal
@@ -46,6 +80,7 @@ describe("EditServiceModal", () => {
         service={service}
         offices={offices}
         updateService={updateService}
+        doesServiceCodeExist={doesServiceCodeExist}
         revalidateTable={revalidateTable}
       />
     )
@@ -60,7 +95,10 @@ describe("EditServiceModal", () => {
     onClose.mockReset()
     updateService.mockReset()
     revalidateTable.mockReset()
+    doesServiceCodeExist.mockReset()
 
+    // wait for async validation to complete so Save is enabled
+    await waitFor(() => expect(screen.getByText("Save Changes")).toBeEnabled())
     fireEvent.click(screen.getByText("Save Changes"))
 
     await waitFor(() => expect(updateService).toHaveBeenCalled())

src/components/admin/services/EditServiceModal/EditServiceModal.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useEffect, useState } from "react"
+import { z } from "zod"
 import {
   CloseButton,
   DialogActions,
@@ -22,6 +23,7 @@ type EditServiceModalProps = {
     service: Partial<ServiceWithRelations>,
     prevService: Partial<ServiceWithRelations>
   ) => Promise<ServiceWithRelations | null>
+  doesServiceCodeExist: (code: string) => Promise<boolean>
   revalidateTable: () => Promise<void>
 }
 
@@ -31,11 +33,37 @@ export const EditServiceModal = ({
   service,
   offices,
   updateService,
+  doesServiceCodeExist,
   revalidateTable,
 }: EditServiceModalProps) => {
   const [isSaving, setIsSaving] = useState(false)
   const [formData, setFormData] = useState<ServiceWithRelations | null>(null)
   const [previousService, setPreviousService] = useState<ServiceWithRelations | null>(null)
+  const [isFormValidState, setIsFormValidState] = useState<boolean>(false)
+  const [isFormValidating, setIsFormValidating] = useState<boolean>(false)
+
+  const EditServiceWithRelationsSchema = z.object({
+    name: z.string().min(1, "Name is required"),
+    code: z
+      .string()
+      .min(1, "Code is required")
+      .refine(
+        async (code) => {
+          if (code === previousService?.code) return true
+          return !(await doesServiceCodeExist(code))
+        },
+        { message: "Code already exists" }
+      ),
+    description: z.string(),
+    publicName: z.string().min(1, "Public name is required"),
+    ticketPrefix: z.string().min(1, "Ticket prefix is required"),
+    legacyServiceId: z.number().nullable(),
+    backOffice: z.boolean(),
+    deletedAt: z.date().nullable(),
+    createdAt: z.date(),
+    updatedAt: z.date(),
+    locations: z.array(z.any()),
+  })
 
   useEffect(() => {
     if (open && service) {
@@ -44,6 +72,34 @@ export const EditServiceModal = ({
     }
   }, [open, service])
 
+  // Validate formData asynchronously and update local state instead of calling async validators during render
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <>
+  useEffect(() => {
+    if (!formData) {
+      setIsFormValidState(false)
+      setIsFormValidating(false)
+      return
+    }
+
+    let active = true
+    setIsFormValidating(true)
+
+    EditServiceWithRelationsSchema.parseAsync(formData)
+      .then(() => {
+        if (active) setIsFormValidState(true)
+      })
+      .catch(() => {
+        if (active) setIsFormValidState(false)
+      })
+      .finally(() => {
+        if (active) setIsFormValidating(false)
+      })
+
+    return () => {
+      active = false
+    }
+  }, [formData, previousService, doesServiceCodeExist])
+
   if (!service || !formData || !previousService) return null
 
   const isArchived = service.deletedAt !== null
@@ -81,6 +137,7 @@ export const EditServiceModal = ({
             service={formData}
             offices={offices}
             setFormData={setFormData}
+            doesServiceCodeExist={doesServiceCodeExist}
             isReadonly={isReadonly}
           />
         </form>
@@ -94,7 +151,7 @@ export const EditServiceModal = ({
           type="button"
           className="primary"
           onClick={handleSave}
-          disabled={isReadonly || isSaving}
+          disabled={isReadonly || isSaving || isFormValidating || !isFormValidState}
         >
           {isSaving ? "Saving..." : "Save Changes"}
         </button>

src/components/admin/services/ServiceForm.tsx

@@ -1,38 +1,83 @@
 import type { Dispatch, SetStateAction } from "react"
-import { useMemo } from "react"
-import { Switch, TextArea, TextField } from "@/components/common"
+import { useEffect, useMemo, useRef, useState } from "react"
+import { Notice, Switch, TextArea, TextField } from "@/components/common"
 import { MultiSelect } from "@/components/common/select/MultiSelect"
 import type { Location } from "@/generated/prisma/client"
 import type { ServiceWithRelations } from "@/lib/prisma/service/types"
 
 type ServiceFormProps = {
+  initialCode?: string
   service: ServiceWithRelations
   offices: Location[]
   setFormData: Dispatch<SetStateAction<ServiceWithRelations | null>>
+  doesServiceCodeExist: (code: string) => Promise<boolean>
   isReadonly: boolean
 }
 
 /**
  * ServiceForm component renders the form fields for editing a service.
  *
  * @param props - The properties object.
+ * @property props.initialCode - The initial code of the service, used to determine if the code has changed.
  * @property props.service - The service being edited.
  * @property props.offices - List of office locations.
  * @property props.setFormData - Function to update the form data state.
+ * @property props.doesServiceCodeExist - Function to check if a service code already exists.
  * @property props.isReadonly - Whether the section inputs are read-only.
  */
-export const ServiceForm = ({ service, offices, setFormData, isReadonly }: ServiceFormProps) => {
+export const ServiceForm = ({
+  initialCode,
+  service,
+  offices,
+  setFormData,
+  doesServiceCodeExist,
+  isReadonly,
+}: ServiceFormProps) => {
   const officeOptions = useMemo(() => offices.map((o) => ({ key: o.id, label: o.name })), [offices])
 
   const selectedOfficeIds = service.locations ? service.locations.map((l) => l.id) : []
+  const [codeExists, setCodeExists] = useState<boolean | null>(null)
+  const initialCodeRef = useRef<string | undefined>(initialCode ?? service.code)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <>
+  useEffect(() => {
+    // when the service changes (new service loaded) reset initial code and state
+    initialCodeRef.current = initialCode ?? service.code
+    setCodeExists(null)
+  }, [service.updatedAt, initialCode])
+
+  useEffect(() => {
+    // debounce checking service code existence
+    const code = service.code
+    if (!code || code.length === 0) {
+      setCodeExists(null)
+      return
+    }
+
+    // don't warn if the code is unchanged from the initial value
+    if (initialCodeRef.current === code) {
+      setCodeExists(false)
+      return
+    }
+
+    const t = setTimeout(() => {
+      doesServiceCodeExist(code)
+        .then((exists) => setCodeExists(exists))
+        .catch(() => setCodeExists(null))
+    }, 500)
+
+    return () => clearTimeout(t)
+  }, [service.code, doesServiceCodeExist])
+
   return (
     <div className="flex flex-col gap-2">
+      {codeExists && <Notice type="warn" message="A service with this code already exists." />}
       <div className="grid grid-cols-7 gap-2">
         <TextField
           id="service-code"
           label="Code"
           value={service.code}
-          onChange={(v) => setFormData((s) => (s ? { ...s, code: v } : s))}
+          onChange={(v) => setFormData((s) => (s ? { ...s, code: v.replace(/\s/g, "") } : s))}
           disabled={isReadonly}
           required
           className="col-span-3"

src/components/admin/services/ServiceTable/ServiceTable.tsx

@@ -16,13 +16,15 @@ export type ServiceTableProps = {
     service: Partial<ServiceWithRelations>,
     prevService: Partial<ServiceWithRelations>
   ) => Promise<ServiceWithRelations | null>
+  doesServiceCodeExist: (code: string) => Promise<boolean>
   revalidateTable: () => Promise<void>
 }
 
 export const ServiceTable = ({
   services,
   offices,
   updateService,
+  doesServiceCodeExist,
   revalidateTable,
 }: ServiceTableProps) => {
   const {
@@ -69,6 +71,7 @@ export const ServiceTable = ({
         service={selectedService}
         offices={offices}
         updateService={updateService}
+        doesServiceCodeExist={doesServiceCodeExist}
         revalidateTable={revalidateTable}
       />
     </>

src/components/common/index.ts

@@ -4,6 +4,7 @@ export * from "./footer"
 export * from "./header"
 export * from "./icons"
 export * from "./loginout"
+export * from "./notice"
 export * from "./select"
 export * from "./switch"
 export * from "./textarea"

src/components/common/notice/Notice.tsx

@@ -0,0 +1,40 @@
+type NoticeProps = {
+  type: "success" | "error" | "warn" | "info"
+  message: string
+}
+
+export const Notice = ({ type, message }: NoticeProps) => {
+  const bgColor =
+    type === "success"
+      ? "bg-green-50"
+      : type === "error"
+        ? "bg-red-50"
+        : type === "warn"
+          ? "bg-yellow-50"
+          : "bg-blue-50"
+  const borderLeftColor =
+    type === "success"
+      ? "border-l-green-400"
+      : type === "error"
+        ? "border-l-red-400"
+        : type === "warn"
+          ? "border-l-yellow-400"
+          : "border-l-blue-400"
+  const textColor =
+    type === "success"
+      ? "text-green-800"
+      : type === "error"
+        ? "text-red-800"
+        : type === "warn"
+          ? "text-yellow-800"
+          : "text-blue-800"
+
+  return (
+    <div
+      role="alert"
+      className={`rounded-md border-l-4 ${borderLeftColor} ${bgColor} p-2 text-sm ${textColor}`}
+    >
+      {message}
+    </div>
+  )
+}

src/components/common/notice/index.ts

@@ -0,0 +1 @@
+export * from "./Notice"