Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Chris Farhood
|
0acb86fb17 | ||
|
Chris Farhood
|
9a3799cc5a |
@@ -2,9 +2,9 @@ name: CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main, dev, uat]
|
||||
branches: [main, dev]
|
||||
pull_request:
|
||||
branches: [main, dev, uat]
|
||||
branches: [main, dev]
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
ref:
|
||||
@@ -62,6 +62,10 @@ jobs:
|
||||
name: Build & Push Docker Image
|
||||
runs-on: ubuntu-latest
|
||||
needs: [lint-typecheck, test]
|
||||
permissions:
|
||||
contents: read
|
||||
packages: write
|
||||
id-token: write
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
@@ -78,15 +82,13 @@ jobs:
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
with:
|
||||
driver-opts: network=host
|
||||
|
||||
- name: Log in to Gitea Container Registry
|
||||
- name: Log in to GitHub Container Registry
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: git.farh.net
|
||||
username: ${{ gitea.actor }}
|
||||
password: ${{ secrets.REGISTRY_TOKEN }}
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Build and push Web image
|
||||
uses: docker/build-push-action@v6
|
||||
@@ -94,9 +96,8 @@ jobs:
|
||||
context: .
|
||||
file: Dockerfile
|
||||
push: true
|
||||
provenance: false
|
||||
tags: |
|
||||
git.farh.net/groombook/web:${{ steps.version.outputs.tag }}
|
||||
${{ github.ref == 'refs/heads/main' && 'git.farh.net/groombook/web:latest' || '' }}
|
||||
cache-from: type=registry,ref=git.farh.net/groombook/cache:web
|
||||
cache-to: type=registry,ref=git.farh.net/groombook/cache:web,mode=max
|
||||
ghcr.io/groombook/web:${{ steps.version.outputs.tag }}
|
||||
${{ github.ref == 'refs/heads/main' && 'ghcr.io/groombook/web:latest' || '' }}
|
||||
cache-from: type=gha
|
||||
cache-to: type=gha,mode=max
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"mcpServers": {
|
||||
"gitea": {
|
||||
"type": "http",
|
||||
"url": "https://git-mcp.farh.net/mcp",
|
||||
"headers": {
|
||||
"Authorization": "Bearer ${GITEA_TOKEN}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+1
-1
@@ -18,4 +18,4 @@ COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||
EXPOSE 80
|
||||
HEALTHCHECK --interval=30s --timeout=5s --start-period=5s --retries=3 \
|
||||
CMD wget --spider -q http://localhost:80/ || exit 1
|
||||
CMD curl -f http://localhost:80/ || exit 1
|
||||
-231
@@ -53,9 +53,6 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
|
||||
| TC-WEB-5.1.2 | OIDC redirect | Click OIDC login button | Redirected to OIDC provider, then back to app with session established |
|
||||
| TC-WEB-5.1.3 | Logout | Click logout button | Session cleared, redirected to login page |
|
||||
| TC-WEB-5.1.4 | Session indicator | After successful login | User info/initials visible in UI indicating active session |
|
||||
| TC-WEB-5.1.5 | Unauthenticated `/login` renders the form (GRO-2011) | In a private/incognito window with no session cookie, navigate to UAT `/login` | React root mounts; the GroomBook sign-in card with the OIDC button is visible. Network tab shows `/api/auth/get-session` 200, `/api/setup/status` 200, and the login form is rendered (NOT a blank white viewport). |
|
||||
| TC-WEB-5.1.6 | Swallowed render error surfaces in DOM (GRO-2094) | Trigger a render-time exception in the React tree (e.g. via temporary throw in a child component on a test build) and load `/login` in a clean context | Either the login form renders normally (happy path) OR the top-level `ErrorBoundary` testid `error-boundary` is visible with a populated `error-boundary-message` pre block showing the exception name/message/stack. **NEVER** a blank `<div id="root">` with no error indicator. Browser console must contain either zero render errors or a `[ErrorBoundary]` line plus the raw exception. |
|
||||
| TC-WEB-5.1.7 | Global `error` and `unhandledrejection` listeners are wired (GRO-2094) | In a clean browser context, load `/login`, then trigger `setTimeout(() => { throw new Error("synthetic") }, 0)` from the console and `Promise.reject(new Error("synthetic-promise"))` | Browser console shows `[window.error]` and `[unhandledrejection]` log lines with the thrown values. Confirms global listeners are active in production. |
|
||||
|
||||
### 5.2 Authentication — VITE_API_URL Set
|
||||
|
||||
@@ -72,7 +69,6 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
|
||||
| TC-AUTH-5.3.1 | Auth client falls back to window.location.origin | Do not set `VITE_API_URL`, load app | Auth client uses `window.location.origin` as base URL |
|
||||
| TC-AUTH-5.3.2 | Sign-in on localhost | Load app without `VITE_API_URL` on localhost:3000 | Auth client uses `http://localhost:3000` as base URL |
|
||||
| TC-AUTH-5.3.3 | Sign-in on dev environment | Load app without `VITE_API_URL` on `https://dev.groombook.dev` | Auth client uses `https://dev.groombook.dev` as base URL |
|
||||
| TC-AUTH-5.3.4 | SSO cookie set after Authentik callback (GRO-1592) | Complete Authentik SSO login on UAT without `VITE_API_URL` set | `__Secure-better-auth.session_token` cookie is present in browser; subsequent `/api/*` calls include the cookie and return 200 |
|
||||
|
||||
### 5.4 Session Persistence
|
||||
|
||||
@@ -81,26 +77,6 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
|
||||
| TC-AUTH-5.4.1 | Session persists across page reload | Sign in, reload page | Session remains active |
|
||||
| TC-AUTH-5.4.2 | Session clears on sign-out | Sign in, sign out | User is logged out, redirected to login |
|
||||
|
||||
### 5.4.1 SSO Login Journey (Authentik OIDC end-to-end)
|
||||
|
||||
| # | Scenario | Steps | Pass Criteria | Fail Criteria |
|
||||
|---|----------|-------|---------------|---------------|
|
||||
| TC-WEB-SSO-1 | Sign-in page shows SSO button | Navigate to app root URL | Sign-in page displayed with "Sign in with SSO" button visible | No SSO button, 403 before page loads |
|
||||
| TC-WEB-SSO-2 | Click SSO redirects to Authentik | Click "Sign in with SSO" button | Browser redirected to Authentik login at auth.farh.net | No redirect, error shown, button does nothing |
|
||||
| TC-WEB-SSO-3 | Valid OIDC credentials authenticate | At Authentik, enter valid credentials and authenticate | Redirected back to app with active session | Redirect loop, 403, session not established |
|
||||
| TC-WEB-SSO-4 | Post-login dashboard accessible | After SSO flow completes, dashboard loads | Dashboard displays correctly with user identity shown | Blank page, 403, session not active |
|
||||
| TC-WEB-SSO-5 | User identity displayed correctly | After SSO login, check header/nav | User name/email/initials shown in nav, role reflected in UI | No user indicator, wrong user shown |
|
||||
|
||||
### 5.4.2 OOBE Flow Post-Login
|
||||
|
||||
| # | Scenario | Steps | Pass Criteria | Fail Criteria |
|
||||
|---|----------|-------|---------------|---------------|
|
||||
| TC-WEB-OOBE-1 | Fresh DB shows setup wizard | On fresh DB (no super user), navigate to app | Setup wizard / OOBE screen displayed | Regular login page shown instead of setup |
|
||||
| TC-WEB-OOBE-2 | Configure OIDC via setup | During OOBE, configure OIDC auth provider via /api/setup/auth-provider | OIDC configured successfully, no 403 | 403 during setup, config rejected |
|
||||
| TC-WEB-OOBE-3 | Setup completes and redirects | Complete OOBE setup with business name | Redirected to app dashboard as super user, setup bypassed on reload | Setup errors, wrong redirect, setup reappears |
|
||||
| TC-WEB-OOBE-4 | Admin panel accessible after setup | After completing OOBE, navigate to admin panel | Admin features accessible | 403 on admin panel, insufficient permissions |
|
||||
| TC-WEB-OOBE-5 | SSO login during OOBE does not interfere | During fresh OOBE, attempt SSO login before completing setup | SSO login redirected appropriately, setup can still complete | Auto-provision creates staff prematurely, setup flow broken |
|
||||
|
||||
### 5.5 Dashboard
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
@@ -127,20 +103,6 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
|
||||
| TC-WEB-5.7.2 | Add pet | Click "Add Pet", fill form, submit | Pet created and linked to client |
|
||||
| TC-WEB-5.7.3 | Edit pet details | Click on pet, modify details, save | Pet updated successfully |
|
||||
| TC-WEB-5.7.4 | Grooming history view | View pet profile | Past appointments/grooming sessions displayed |
|
||||
| TC-WEB-5.7.5 | Add pet with size/coat | Create pet with Size Category and Coat Type filled | Size and coat type persisted, visible on pet profile |
|
||||
| TC-WEB-5.7.6 | Edit pet size/coat | Edit existing pet, change size/coat dropdowns | Updated values saved to pet record |
|
||||
| TC-WEB-5.7.7 | Size/coat optional | Create pet without selecting size or coat | Pet created successfully, fields remain unset |
|
||||
|
||||
### 5.8.1 Buffer Rules Management UI (GRO-1173)
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
|---|----------|-------|----------|
|
||||
| TC-WEB-5.8.2 | Buffer rules section visible | Navigate to Settings | "Buffer Rules" section shown with description |
|
||||
| TC-WEB-5.8.3 | Create buffer rule | Click "+ Add Rule", select service and buffer minutes, submit | Rule appears in list, matches service/size/coat |
|
||||
| TC-WEB-5.8.4 | Edit buffer minutes inline | Click Edit on a rule, change minutes, click Save | New buffer value reflected in list |
|
||||
| TC-WEB-5.8.5 | Delete buffer rule | Click Delete, confirm | Rule removed from list |
|
||||
| TC-WEB-5.8.6 | Create rule with size/coat | Create rule with Size Category or Coat Type specified | Rule shows size/coat tags in list |
|
||||
| TC-WEB-5.8.7 | Empty state | Navigate to Settings with no rules | "No buffer rules configured yet" message shown |
|
||||
|
||||
### 5.8 Appointment Scheduling UI
|
||||
|
||||
@@ -159,8 +121,6 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
|
||||
| TC-WEB-5.9.1 | Service catalog loads | Navigate to Services | List of available services displayed |
|
||||
| TC-WEB-5.9.2 | Create service | Click "New Service", fill form, submit | Service created successfully |
|
||||
| TC-WEB-5.9.3 | Edit service | Click on service, modify details, save | Service updated successfully |
|
||||
| TC-WEB-5.9.4 | Create service with default buffer | Create service with "Default buffer time" filled | Buffer shown in service list and form after save |
|
||||
| TC-WEB-5.9.5 | Edit service buffer | Open existing service, change default buffer minutes | Updated value persisted after save |
|
||||
|
||||
### 5.10 Staff Management UI
|
||||
|
||||
@@ -186,29 +146,6 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
|
||||
| TC-WEB-5.12.3 | Confirm appointment | Click confirm on pending appointment | Appointment status updated to confirmed |
|
||||
| TC-WEB-5.12.4 | Cancel appointment | Click cancel on appointment | Appointment marked as cancelled |
|
||||
|
||||
#### 5.12b Dynamic Portal Time Slots (GRO-1793)
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
|---|----------|-------|----------|
|
||||
| TC-WEB-5.12.5 | BookingFlow dynamic slots | Open Book New, select pet and service, pick a date | Time slots fetched from API; "Checking availability…" shown while loading |
|
||||
| TC-WEB-5.12.6 | BookingFlow slots match wizard | Compare BookingFlow slot times with public booking wizard for same date | Same slots displayed |
|
||||
| TC-WEB-5.12.7 | BookingFlow error state | Mock API failure on availability fetch | "Failed to load time slots" error shown |
|
||||
| TC-WEB-5.12.8 | BookingFlow no slots | Select date with no availability | "No available slots on this date" shown |
|
||||
| TC-WEB-5.12.9 | RescheduleFlow dynamic slots | Open reschedule, pick a new date | Time slots fetched from API; loading state shown |
|
||||
| TC-WEB-5.12.10 | RescheduleFlow error state | Mock API failure on availability fetch | "Failed to load time slots" error shown |
|
||||
| TC-WEB-5.12.11 | RescheduleFlow no slots | Select date with no availability | "No available slots on this date" shown |
|
||||
|
||||
#### 5.12c Waitlist/Booking Status Badges (GRO-1795)
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
|---|----------|-------|----------|
|
||||
| TC-WEB-5.12.12 | Confirmed badge | View appointment card with confirmed status | Green "Confirmed" badge displayed |
|
||||
| TC-WEB-5.12.13 | Pending badge | View appointment card with pending status | Amber "Pending" badge displayed |
|
||||
| TC-WEB-5.12.14 | Waitlisted badge | View appointment card with waitlisted status | Blue "Waitlisted" badge displayed |
|
||||
| TC-WEB-5.12.15 | Badge uses CSS classes | Inspect badge element | Badge uses CSS variable-based classes (e.g., bg-green-100, text-amber-600), not hardcoded colors |
|
||||
| TC-WEB-5.12.16 | Badge status from data | Compare badge label to appointment.status field | Badge label matches the API appointment status exactly |
|
||||
| TC-WEB-5.12.17 | Unknown status fallback | Render badge with unknown status value | Badge renders with the raw status string as label and fallback CSS class |
|
||||
|
||||
### 5.13 Reports UI
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
@@ -247,174 +184,6 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
|
||||
| TC-WEB-5.17.2 | Missing data | Navigate to section with no data | Empty state message displayed, not blank page |
|
||||
| TC-WEB-5.17.3 | Error boundaries | Trigger error condition | Friendly error message displayed, app doesn't crash |
|
||||
|
||||
### 5.18 Pet Profile UI — Enhanced Fields (GRO-1178)
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
|---|----------|-------|----------|
|
||||
| TC-WEB-5.18.1 | Coat type displayed in Grooming tab | Open pet profile, go to Grooming tab | Coat type shown (e.g. "Curly", "Double") |
|
||||
| TC-WEB-5.18.2 | Preferred cuts displayed | Open Grooming tab | Preferred cuts shown as tags/chips |
|
||||
| TC-WEB-5.18.3 | Temperament score displayed (read-only) | Open Basic Info tab | 1–5 star display with score label "(N/5 · staff-set)" |
|
||||
| TC-WEB-5.18.4 | Temperament flags displayed (read-only) | Open Basic Info tab | Flag chips shown (e.g. "Anxious", "Good with kids") |
|
||||
| TC-WEB-5.18.5 | Medical alerts in Medical tab | Open Medical tab | Alert cards with type, description, severity badge |
|
||||
| TC-WEB-5.18.6 | Medical alert severity badges | View Medical tab | Low=green, Medium=amber, High=red badges |
|
||||
| TC-WEB-5.18.7 | Edit pet — coat type dropdown | Click Edit on pet, select coat type | Coat type persisted on save |
|
||||
| TC-WEB-5.18.8 | Edit pet — add medical alert | Click Edit, add alert with type + severity, save | Alert appears in Medical tab after save |
|
||||
| TC-WEB-5.18.9 | Edit pet — remove medical alert | Click Edit, remove an alert, save | Alert removed after save |
|
||||
| TC-WEB-5.18.10 | Edit pet — add preferred cut (Enter) | Click Edit, type cut name, press Enter | Cut tag added; persists after save |
|
||||
| TC-WEB-5.18.11 | Edit pet — remove preferred cut | Click Edit, click X on cut tag | Cut removed; not persisted after save |
|
||||
| TC-WEB-5.18.12 | Medical alert validation | Click Edit, add alert with empty type, try to save | Error "Type is required"; form not submitted |
|
||||
| TC-WEB-5.18.13 | Temperament fields read-only | View edit form for pet with temperament data | Temperament score and flags not editable (display only) |
|
||||
|
||||
### 5.19 Booking Wizard — Pet Size & Coat (GRO-1174)
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
|---|----------|-------|----------|
|
||||
| TC-WEB-5.19.1 | Pet size dropdown visible | Step 3 of booking wizard (pet details) | Pet size dropdown shown after breed field with options: Small, Medium, Large, X-Large |
|
||||
| TC-WEB-5.19.2 | Coat type dropdown visible | Step 3 of booking wizard | Coat type dropdown shown after pet size with options: Smooth, Double, Curly, Wire, Long, Hairless |
|
||||
| TC-WEB-5.19.3 | Size/coat pre-fill from URL | Navigate to booking with `?petSizeCategory=large&petCoatType=curly` | Fields pre-filled with provided values |
|
||||
| TC-WEB-5.19.4 | Size/coat optional | Proceed through booking without selecting size/coat | Booking completes successfully |
|
||||
| TC-WEB-5.19.5 | Confirmation shows appointment duration | Confirm booking step | Service duration shown as "X min appointment" (buffer not exposed) |
|
||||
| TC-WEB-5.19.6 | Confirmation shows pet size/coat | Confirm booking with size/coat selected | Size and coat type shown on pet card in confirmation |
|
||||
| TC-WEB-5.19.7 | Availability uses buffer for large/x-large | Select large or x-large size, check availability | Availability slots reflect service duration + buffer for large/x-large |
|
||||
| TC-WEB-5.19.8 | Form reset clears size/coat | Complete booking, click "Book another" | Size and coat fields reset to empty |
|
||||
| TC-WEB-5.19.9 | New pet record has size/coat | Complete booking, view created pet in admin | Pet record shows selected size and coat type |
|
||||
|
||||
### 5.20 Buffer Rules Management — Admin UI (GRO-1173)
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
|---|----------|-------|----------|
|
||||
| TC-WEB-5.20.1 | Buffer rules section loads | Navigate to Settings page (admin) | "Buffer Rules" section visible with "+ Add Rule" button |
|
||||
| TC-WEB-5.20.2 | Add rule — required fields only | Click "+ Add Rule", select a service, enter buffer minutes, submit | Rule created, appears in list below |
|
||||
| TC-WEB-5.20.3 | Add rule — with size category | Add rule, select service + size category + buffer minutes | Rule created with size tag shown in list |
|
||||
| TC-WEB-5.20.4 | Add rule — with coat type | Add rule, select service + coat type + buffer minutes | Rule created with coat tag shown in list |
|
||||
| TC-WEB-5.20.5 | Add rule — with both size and coat | Add rule, select service + size + coat + buffer minutes | Rule created with both tags shown |
|
||||
| TC-WEB-5.20.6 | Validation — missing service | Submit form without selecting service | Error: "Service and valid buffer minutes are required" |
|
||||
| TC-WEB-5.20.7 | Validation — zero buffer | Submit form with 0 buffer minutes | Error: "Service and valid buffer minutes are required" |
|
||||
| TC-WEB-5.20.8 | Edit rule inline | Click "Edit" on a rule, change buffer value, click "Save" | Rule updated in list |
|
||||
| TC-WEB-5.20.9 | Cancel edit | Click "Edit", then "Cancel" | Original value unchanged |
|
||||
| TC-WEB-5.20.10 | Delete rule — confirmation | Click "Delete" on a rule | Confirmation prompt appears |
|
||||
| TC-WEB-5.20.11 | Confirm delete | On confirmation prompt, click "Confirm" | Rule removed from list |
|
||||
| TC-WEB-5.20.12 | Cancel delete | On confirmation prompt, click "Cancel" | Rule remains in list |
|
||||
| TC-WEB-5.20.13 | Empty state | No rules exist | Message: "No buffer rules configured yet." |
|
||||
| TC-WEB-5.20.14 | Toggle form | Click "+ Add Rule", then "Cancel" | Form hidden, no rule created |
|
||||
|
||||
### 5.21 Service Default Buffer Minutes (GRO-1173)
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
|---|----------|-------|----------|
|
||||
| TC-WEB-5.21.1 | Default buffer shown in table | Navigate to Services page | "Default Buffer" column visible in services table |
|
||||
| TC-WEB-5.21.2 | New service default is 0 | Click "+ Add Service" | Default Buffer field pre-filled with 0 |
|
||||
| TC-WEB-5.21.3 | Create service with buffer | Fill service form, set Default Buffer = 10, submit | Service created with 10 min default buffer |
|
||||
| TC-WEB-5.21.4 | Edit service — view buffer | Edit an existing service | Current default buffer value shown in form |
|
||||
| TC-WEB-5.21.5 | Update buffer on existing service | Edit service, change Default Buffer to 15, save | Buffer updated, table shows 15 min |
|
||||
| TC-WEB-5.21.6 | Buffer field — zero allowed | Set Default Buffer to 0, save | Service saved with 0 (no default buffer) |
|
||||
| TC-WEB-5.21.7 | Buffer field — integer only | Enter non-integer value | Field restricts to integer values |
|
||||
|
||||
### 5.22 Pet Profile — Size Category & Coat Type (GRO-1173)
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
|---|----------|-------|----------|
|
||||
| TC-WEB-5.22.1 | Size category dropdown visible | Open Add Pet or Edit Pet form (portal) | "Size Category" dropdown visible with options: Small, Medium, Large, X-Large |
|
||||
| TC-WEB-5.22.2 | Coat type dropdown visible | Open Add Pet or Edit Pet form | "Coat Type" dropdown visible with options: Smooth, Double, Curly, Wire, Long, Hairless |
|
||||
| TC-WEB-5.22.3 | Size and coat both optional | Submit pet form without selecting size or coat | Pet saved successfully |
|
||||
| TC-WEB-5.22.4 | Save pet with size category | Select "Large", fill required fields, save | Pet saved with size = "large" |
|
||||
| TC-WEB-5.22.5 | Save pet with coat type | Select "Curly", fill required fields, save | Pet saved with coat = "curly" |
|
||||
| TC-WEB-5.22.6 | Size and coat persisted | Save pet with size + coat, edit again | Both fields retain their selected values |
|
||||
| TC-WEB-5.22.7 | Clear size | Select size, then clear back to default | Size cleared on save |
|
||||
|
||||
### 5.23 Pet Profile — API Persistence & Save UX (GRO-1470)
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
|---|----------|-------|----------|
|
||||
| TC-WEB-5.23.1 | Save pet — API persistence | Edit a pet, change a field (e.g. coat type), click Save, reload the page | Changed field retained after reload (proves PATCH round-trip to server) |
|
||||
| TC-WEB-5.23.2 | Save pet — error state | Trigger an API save failure (e.g. network error) | Error message displayed; edit form stays open; no data cleared |
|
||||
| TC-WEB-5.23.3 | Save pet — saving indicator | Click Save | Spinner/indicator shown while request is in flight; form controls disabled |
|
||||
|
||||
|
||||
### 5.24 Booking Funnel Analytics Events (GRO-1794)
|
||||
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
|---|----------|-------|----------|
|
||||
| TC-WEB-5.24.1 | booking_step_service — public | Select a service in the public booking wizard | `booking_step_service` CustomEvent fires with detail.step="service" and detail.flow="public" |
|
||||
| TC-WEB-5.24.2 | booking_step_time — public | Select a time slot and click Continue | `booking_step_time` fires with detail.step="time" and detail.flow="public" |
|
||||
| TC-WEB-5.24.3 | booking_step_contact — public | Fill in contact/pet form, click "Review booking" | `booking_step_contact` fires with detail.step="contact" and detail.flow="public" |
|
||||
| TC-WEB-5.24.4 | booking_step_submit — public | Confirm and submit the booking | `booking_step_submit` fires with detail.step="submit" and detail.flow="public" |
|
||||
| TC-WEB-5.24.5 | booking_confirmed — public | Navigate to /booking-confirmed | `booking_confirmed` fires once on mount with detail.step="confirmed" and detail.flow="public" |
|
||||
| TC-WEB-5.24.6 | booking_error — public | Navigate to /booking-error | `booking_error` fires once on mount with detail.step="error" and detail.flow="public" |
|
||||
| TC-WEB-5.24.7 | booking_step_service — portal | Select a pet in the portal BookingFlow | `booking_step_service` fires with detail.step="service" and detail.flow="portal" |
|
||||
| TC-WEB-5.24.8 | booking_step_time — portal | Pick a date and time in portal BookingFlow | `booking_step_time` fires with detail.step="time" and detail.flow="portal" |
|
||||
| TC-WEB-5.24.9 | booking_step_contact — portal | Proceed from groomer selection to review screen | `booking_step_contact` fires with detail.step="groomer" and detail.flow="portal" |
|
||||
| TC-WEB-5.24.10 | booking_step_submit — portal | Submit booking in portal BookingFlow | `booking_step_submit` fires with detail.step="submit" and detail.flow="portal" |
|
||||
| TC-WEB-5.24.11 | booking_confirmed — portal | Portal booking request succeeds | Inline success state is shown and `booking_confirmed` fires with detail.step="confirmed" and detail.flow="portal" |
|
||||
| TC-WEB-5.24.12 | No PII in analytics payloads | Fire each event and inspect detail object | Payload contains only: step, flow, timestamp — no names, emails, phone numbers, or pet names |
|
||||
| TC-WEB-5.24.13 | No-op safe | Trigger analytics with window.dispatchEvent blocked (e.g. CSP) | No error thrown; booking flow completes normally |
|
||||
|
||||
### 5.25 Customer Portal — Better Auth SSO Bridge (GRO-1867)
|
||||
|
||||
These cases cover the `CustomerPortal` initialisation path that bridges an Authentik / Better Auth session into a portal session via `POST /api/portal/session-from-auth`. The bridge runs after the URL-impersonation (`?sessionId=`) and dev-user paths have been ruled out.
|
||||
|
||||
**Pre-conditions:**
|
||||
|
||||
- UAT is configured with Authentik SSO. The seeded customer **Authentik** password lives in the `authentik-uat-users-credentials` Secret in the `groombook-uat` namespace (key `uat_customer_password`) — **NOT** in `seed-uat-passwords:customer-password` (that Secret holds the *Better Auth* email+password credential, a separate identity store; see GRO-2089). Pull the Authentik password at the start of every run:
|
||||
```bash
|
||||
CUSTOMER_AUTHENTIK=$(kubectl get secret authentik-uat-users-credentials -n groombook-uat \
|
||||
-o jsonpath='{.data.uat_customer_password}' | base64 -d)
|
||||
```
|
||||
The Authentik user is provisioned by Terraform (`infra/terraform/users.tf`); the `lifecycle.ignore_changes = [password]` block means the password is set on initial creation and never auto-rotated, so the value held in the live Secret is the one Authentik itself has. If Authentik rejects it, the user was re-provisioned out-of-band via the Authentik admin UI and the Secret has drifted from the live identity — fix the Secret (or the admin-set password) and re-run.
|
||||
- `POST /api/portal/session-from-auth` from [GRO-1866](https://paperclip.farhoodlabs.com/GRO/issues/GRO-1866) is deployed on UAT.
|
||||
- Clear cookies and localStorage between cases unless otherwise noted.
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
|---|----------|-------|----------|
|
||||
| TC-WEB-5.25.1 | Authenticated customer reaches portal dashboard | 1. From clean state, navigate to UAT `/login`. 2. Click "Sign in with SSO" and complete Authentik flow with a seeded **customer** identity. 3. After callback, land on `/`. | Portal dashboard renders. No redirect to `/login`. No impersonation banner. Top-right greeting reads "Hi, <FirstName>". |
|
||||
| TC-WEB-5.25.2 | Bridge call sequence | Repeat TC-WEB-5.25.1 with DevTools → Network open and the **All** tab filtered to `/api/`. | In order: `GET /api/auth/get-session` → 200. `POST /api/portal/session-from-auth` → 201 with body `{ sessionId, clientId, clientName }`. |
|
||||
| TC-WEB-5.25.3 | Subsequent portal calls use the bridged session ID | After TC-WEB-5.25.1 succeeds, navigate to **Appointments**, **My Pets**, **Billing**, **Settings**. Inspect any `/api/portal/*` request in DevTools → Network. | Each portal API call carries an `X-Impersonation-Session-Id` header whose value equals the `sessionId` returned by `session-from-auth` (not a URL-param value). Each call returns 200 (or 404 for genuinely empty collections), never 401. |
|
||||
| TC-WEB-5.25.4 | No impersonation chrome for the customer's own session | After TC-WEB-5.25.1, scan the portal UI. | No amber border around the page. No "STAFF VIEW" watermark. No "End Impersonation" button in the sidebar. The customer is themselves; only impersonation sessions started via `?sessionId=` show the banner. |
|
||||
| TC-WEB-5.25.5 | 404 fallback for authenticated user with no client record | 1. Sign in via SSO with an Authentik account whose email is **not** present in `clients`. 2. Land on `/`. | `POST /api/portal/session-from-auth` returns 404. The portal renders a centred card titled **"Portal access not configured"** with the message about contacting the groomer and a **Sign out** button. No redirect loop, no portal chrome. |
|
||||
| TC-WEB-5.25.6 | 404 fallback Sign-out escape hatch | From TC-WEB-5.25.5 click **Sign out**. | `POST /api/auth/sign-out` fires; browser navigates to `/login`; the Authentik session cookie is cleared. Reloading `/` no longer hits 404 (will show the login page). |
|
||||
| TC-WEB-5.25.7 | Bridge precedence — impersonation URL wins | 1. Sign in via SSO as a customer. 2. Open a new tab to `https://uat.groombook.dev/?sessionId=<a-valid-staff-impersonation-session-id>`. | The impersonation path runs; the amber banner appears for the impersonated client. The Better Auth bridge is **not** called on this load (`session-from-auth` absent in Network). |
|
||||
| TC-WEB-5.25.8 | Bridge precedence — dev user wins | In dev mode (e.g. local) with `localStorage["dev-user"]` set to a client persona, navigate to `/`. | The dev-session path runs (`POST /api/portal/dev-session`). The Better Auth bridge is **not** called (`session-from-auth` absent in Network). Staff dev users still redirect to `/admin`. |
|
||||
| TC-WEB-5.25.9 | Staff Better Auth session does not run the customer bridge | Sign in via SSO with a staff identity. Navigate to `/`. | `App.tsx` routing redirects to `/admin`. `POST /api/portal/session-from-auth` is **not** called. |
|
||||
| TC-WEB-5.25.10 | Unauthenticated user is sent to login (no infinite loop) | Without signing in, navigate directly to `/`. | `App.tsx` renders the LoginPage. `CustomerPortal` does not render. No `session-from-auth` request is made. |
|
||||
| TC-WEB-5.25.11 | Session persists across reload via Better Auth cookie | After TC-WEB-5.25.1 succeeds, reload the page. | Portal dashboard re-renders. A fresh `GET /api/auth/get-session` + `POST /api/portal/session-from-auth` pair runs and yields 200/201. Greeting still reads "Hi, <FirstName>". |
|
||||
|
||||
### 5.27 Customer Portal — Authenticated HTML-route cold mount (GRO-2099)
|
||||
|
||||
These cases guard against the regression where a customer who had just completed SSO sign-in was bounced back to `/login` (with a blank React root) when navigating directly to `/portal`, `/book`, `/schedule`, or even `/login` itself. Root cause: `Dashboard.tsx`'s `!sessionId && !isImpersonating && !getDevUser()` guard fired during the CustomerPortal's bootstrap — before the SSO bridge resolved `portalSessionId` — and redirected to `/login`. The fix: `CustomerPortal` now shows a loading state while the bootstrap is in flight, so the portal chrome and its `!sessionId` child guards do not mount prematurely. App.tsx additionally redirects an authenticated user at `/login` to `/` instead of rendering `null`.
|
||||
|
||||
**Pre-conditions:**
|
||||
|
||||
- TC-WEB-5.25.1 — TC-WEB-5.25.3 must pass on the build under test.
|
||||
- Clear cookies and localStorage between cases.
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
|---|----------|-------|----------|
|
||||
| TC-WEB-5.27.1 | Authenticated customer lands on `/portal` after direct nav | 1. From clean state, complete TC-WEB-5.25.1 (SSO sign-in as a customer). 2. Land on `/`. 3. `browser_navigate` (full page load) directly to `/portal`. | Final URL stays at `/portal`. The React root is non-empty. The portal dashboard renders with the customer's name. No `Navigate to /login` fires. |
|
||||
| TC-WEB-5.27.2 | Authenticated customer lands on `/book` and `/schedule` after direct nav | From TC-WEB-5.27.1, `browser_navigate` to `/book` then `/schedule` (one fresh navigation each). | Each final URL stays at the navigated path. The portal chrome is visible. The page does not redirect to `/login`. |
|
||||
| TC-WEB-5.27.3 | Authenticated customer at `/login` is auto-redirected to `/` | From TC-WEB-5.27.1, `browser_navigate` to `/login`. | The browser ends at `/` (not at a blank `/login`). The portal dashboard renders. No blank React root at `/login`. |
|
||||
| TC-WEB-5.27.4 | Loading state is visible during the bootstrap, no portal chrome flash | 1. With the UAT build under test, open DevTools → Network and throttle to Slow 3G. 2. Sign in via SSO. 3. Land on `/`. | A "Loading…" element (`role="status"`) is briefly visible. The portal nav (Home / Appointments / etc.) is NOT visible during the loading window. No `Navigate to /login` fires during the bootstrap. |
|
||||
| TC-WEB-5.27.5 | SSO bridge still runs and yields 201 | From TC-WEB-5.27.4 (or TC-WEB-5.27.1), inspect Network. | The same `GET /api/auth/get-session` (200) → `POST /api/portal/session-from-auth` (201) sequence from TC-WEB-5.25.2 still runs. The customer name appears in the greeting. |
|
||||
| TC-WEB-5.27.6 | Unauthenticated direct nav to `/portal` still ends at `/login` (no regression) | Clear cookies. `browser_navigate` to `/portal`. | The portal briefly shows the loading state, then `CustomerPortal`'s `!session && !portalSessionId` guard redirects to `/login`. The login form renders. No infinite loop. |
|
||||
| TC-WEB-5.27.7 | Groomer SSO still works (no regression) | 1. From clean state, sign in via SSO as the groomer identity (uat-groomer). 2. Land on `/`. | `App.tsx`'s staff check redirects to `/admin`. The groomer nav renders. No `CustomerPortal` flash. No `/portal` redirect loop. |
|
||||
| TC-WEB-5.27.8 | Impersonation session still works (no regression) | 1. With an active impersonation session, open `/?sessionId=<id>`. | The amber "STAFF VIEW" chrome renders. The portal loads. No `/login` redirect. |
|
||||
|
||||
### 5.26 Customer Portal — RescheduleFlow under SSO Bridge (GRO-2012)
|
||||
|
||||
These cases guard against the regression where an SSO-bridge customer (no `?sessionId=` URL param, no impersonation session) could trigger the RescheduleFlow and have `RescheduleFlow` receive `sessionId={null}`, which caused the internal `/api/book/availability` call to send `X-Impersonation-Session-Id: ` (empty) and return 401. The fix: `CustomerPortal` now passes `sessionId={session?.id ?? portalSessionId}` to `<RescheduleFlow>` (matching the fallback `renderSection()` already used).
|
||||
|
||||
**Pre-conditions:**
|
||||
|
||||
- TC-WEB-5.25.1 — TC-WEB-5.25.3 must pass on the build under test.
|
||||
- The seeded customer used has at least one upcoming, non-cancelled appointment with `status` ∈ {`pending`, `confirmed`}.
|
||||
|
||||
| # | Scenario | Steps | Expected |
|
||||
|---|----------|-------|----------|
|
||||
| TC-WEB-5.26.1 | RescheduleFlow receives portalSessionId (no 401) | 1. Complete TC-WEB-5.25.1 (SSO sign-in as a customer). 2. From the dashboard, click **Reschedule** on the next-upcoming appointment. 3. In the RescheduleFlow modal, pick a future date. 4. Open DevTools → Network and filter to `/api/`. | The `GET /api/book/availability?date=<picked>` request includes an `X-Impersonation-Session-Id` header whose value equals the `sessionId` from `session-from-auth`. The request returns 200. The time-slot list populates. No 401. |
|
||||
| TC-WEB-5.26.2 | RescheduleFlow submit succeeds | From TC-WEB-5.26.1, pick a time slot and confirm. | `POST /api/portal/appointments/<id>/reschedule` (or the equivalent) includes the same `X-Impersonation-Session-Id` value. Returns 200. The modal closes and the appointment card reflects the new time. |
|
||||
| TC-WEB-5.26.3 | Impersonation flow reschedule is unchanged (no regression) | 1. With an active impersonation session (`?sessionId=<active>`), load `/`. 2. Click **Reschedule** on an appointment. 3. Pick a date. | `GET /api/book/availability` includes `X-Impersonation-Session-Id` equal to the impersonation `sessionId` (not `portalSessionId`). Returns 200. Behaves identically to the pre-fix build. |
|
||||
| TC-WEB-5.26.4 | No `X-Impersonation-Session-Id` is empty / null | From TC-WEB-5.26.1, inspect every `/api/portal/*` and `/api/book/*` request. | No request has an empty or `null` `X-Impersonation-Session-Id` header. |
|
||||
|
||||
## 6. Pass/Fail Criteria
|
||||
|
||||
**Pass:**
|
||||
|
||||
@@ -39,12 +39,6 @@ export interface Pet {
|
||||
cutStyle: string | null;
|
||||
shampooPreference: string | null;
|
||||
specialCareNotes: string | null;
|
||||
coatType?: string | null;
|
||||
petSizeCategory?: string | null;
|
||||
preferredCuts: string[];
|
||||
medicalAlerts: MedicalAlert[];
|
||||
temperamentScore?: number;
|
||||
temperamentFlags?: string[];
|
||||
customFields: Record<string, string>;
|
||||
photoKey?: string;
|
||||
photoUploadedAt?: string;
|
||||
@@ -71,7 +65,6 @@ export interface Service {
|
||||
basePriceCents: number;
|
||||
durationMinutes: number;
|
||||
active: boolean;
|
||||
defaultBufferMinutes?: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
@@ -215,14 +208,3 @@ export interface PaginatedList<T> {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
export type AlertSeverity = "low" | "medium" | "high";
|
||||
|
||||
export interface MedicalAlert {
|
||||
id: string;
|
||||
type: string;
|
||||
description: string;
|
||||
severity: AlertSeverity;
|
||||
}
|
||||
|
||||
export type CoatType = "smooth" | "double" | "curly" | "wire" | "long" | "hairless";
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Error>
|
||||
<Code>AccessDenied</Code>
|
||||
<Message>You have no right to access this object because of bucket acl.</Message>
|
||||
<RequestId>69D96C853FAECD363909C4A0</RequestId>
|
||||
<HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
|
||||
<EC>0003-00000001</EC>
|
||||
<RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
|
||||
</Error>
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Error>
|
||||
<Code>AccessDenied</Code>
|
||||
<Message>You have no right to access this object because of bucket acl.</Message>
|
||||
<RequestId>69D96CFC84D7A9333708F278</RequestId>
|
||||
<HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
|
||||
<EC>0003-00000001</EC>
|
||||
<RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
|
||||
</Error>
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Error>
|
||||
<Code>AccessDenied</Code>
|
||||
<Message>You have no right to access this object because of bucket acl.</Message>
|
||||
<RequestId>69D96D48D7892E37386B9ACB</RequestId>
|
||||
<HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
|
||||
<EC>0003-00000001</EC>
|
||||
<RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
|
||||
</Error>
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Error>
|
||||
<Code>AccessDenied</Code>
|
||||
<Message>You have no right to access this object because of bucket acl.</Message>
|
||||
<RequestId>69D96C25663D703833F23607</RequestId>
|
||||
<HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
|
||||
<EC>0003-00000001</EC>
|
||||
<RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
|
||||
</Error>
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Error>
|
||||
<Code>AccessDenied</Code>
|
||||
<Message>You have no right to access this object because of bucket acl.</Message>
|
||||
<RequestId>69D96D89851C843332073968</RequestId>
|
||||
<HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
|
||||
<EC>0003-00000001</EC>
|
||||
<RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
|
||||
</Error>
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Error>
|
||||
<Code>AccessDenied</Code>
|
||||
<Message>You have no right to access this object because of bucket acl.</Message>
|
||||
<RequestId>69D96C9C5A03D33730C61AD8</RequestId>
|
||||
<HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
|
||||
<EC>0003-00000001</EC>
|
||||
<RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
|
||||
</Error>
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Error>
|
||||
<Code>AccessDenied</Code>
|
||||
<Message>You have no right to access this object because of bucket acl.</Message>
|
||||
<RequestId>69D96BEB91911B30317E3BE8</RequestId>
|
||||
<HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
|
||||
<EC>0003-00000001</EC>
|
||||
<RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
|
||||
</Error>
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Error>
|
||||
<Code>AccessDenied</Code>
|
||||
<Message>You have no right to access this object because of bucket acl.</Message>
|
||||
<RequestId>69D96BFB7B92D33535D6D90D</RequestId>
|
||||
<HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
|
||||
<EC>0003-00000001</EC>
|
||||
<RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
|
||||
</Error>
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Error>
|
||||
<Code>AccessDenied</Code>
|
||||
<Message>You have no right to access this object because of bucket acl.</Message>
|
||||
<RequestId>69D96B8BDF4B473630A2E120</RequestId>
|
||||
<HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
|
||||
<EC>0003-00000001</EC>
|
||||
<RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
|
||||
</Error>
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Error>
|
||||
<Code>AccessDenied</Code>
|
||||
<Message>You have no right to access this object because of bucket acl.</Message>
|
||||
<RequestId>69D96D78BFFCAD343037C27C</RequestId>
|
||||
<HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
|
||||
<EC>0003-00000001</EC>
|
||||
<RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
|
||||
</Error>
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||
"extends": ["config:recommended", ":pinAllExceptPeerDependencies", "helpers:pinGitHubActionDigests"],
|
||||
"labels": ["dependencies"],
|
||||
"prConcurrentLimit": 5,
|
||||
"packageRules": [
|
||||
{"matchUpdateTypes": ["minor", "patch"], "groupName": "minor and patch dependencies", "automerge": false},
|
||||
{"matchDepTypes": ["devDependencies"], "matchUpdateTypes": ["minor", "patch"], "automerge": true, "automergeType": "pr"}
|
||||
]
|
||||
}
|
||||
+7
-25
@@ -327,16 +327,11 @@ export function App() {
|
||||
.catch(() => setAuthDisabled(false));
|
||||
}, []);
|
||||
|
||||
// After session is confirmed, check if setup is needed.
|
||||
// Always run the setup/status fetch as soon as the auth state is known — even for
|
||||
// unauthenticated users, so the `needsSetup` value is in place if they sign in
|
||||
// mid-session. The unauth branch in the render below is handled before
|
||||
// `needsSetup` is consulted, so this is safe and avoids a stuck-`null` state.
|
||||
// See GRO-2011.
|
||||
// After session is confirmed, check if setup is needed
|
||||
useEffect(() => {
|
||||
if (authDisabled === null || sessionLoading) return;
|
||||
// In dev mode, only fetch when a dev user has been selected — otherwise the
|
||||
// user is mid-redirect to the dev login selector and we don't need setup state.
|
||||
// Skip if no authenticated session (will redirect to login or dev selector)
|
||||
if (!authDisabled && !session) return;
|
||||
if (authDisabled && !getDevUser()) return;
|
||||
|
||||
fetch("/api/setup/status")
|
||||
@@ -378,12 +373,8 @@ export function App() {
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
|
||||
// Show login BEFORE checking needsSetup (needsSetup is never set for unauthenticated users).
|
||||
// At /login with a valid session, fall through so the staff redirect below can
|
||||
// route staff to /admin and the final render can redirect customers to / (portal).
|
||||
// Previously, an authenticated customer at /login would see a blank page because
|
||||
// the final render returns null at /login (showCustomerPortal is false). See GRO-2099.
|
||||
if (!authDisabled && !session && location.pathname === "/login") {
|
||||
// Show login BEFORE checking needsSetup (needsSetup is never set for unauthenticated users)
|
||||
if (!authDisabled && !session) {
|
||||
return <LoginPage />;
|
||||
}
|
||||
|
||||
@@ -395,24 +386,15 @@ export function App() {
|
||||
return <Navigate to="/setup" replace />;
|
||||
}
|
||||
|
||||
// Redirect staff to /admin; allow customers to access portal (preserve impersonation via ?sessionId=)
|
||||
// Redirect authenticated users to /admin (but preserve impersonation flow via ?sessionId=)
|
||||
const searchParams = new URLSearchParams(location.search);
|
||||
const isStaff = session?.user && (session.user as any).role === "staff";
|
||||
if (!authDisabled && session && !location.pathname.startsWith("/admin") && !searchParams.has("sessionId") && isStaff) {
|
||||
if (!authDisabled && session && !location.pathname.startsWith("/admin") && !searchParams.has("sessionId")) {
|
||||
return <Navigate to="/admin" replace />;
|
||||
}
|
||||
|
||||
// Don't render portal chrome at /login — DevLoginSelector is shown instead
|
||||
const showCustomerPortal = !location.pathname.startsWith("/admin") && location.pathname !== "/login";
|
||||
|
||||
// At /login with a valid session, redirect to the portal root. Without this,
|
||||
// the final render returns null at /login (showCustomerPortal is false) and
|
||||
// the user sees a blank page after a successful sign-in. Staff are routed
|
||||
// to /admin by the earlier staff check. See GRO-2099.
|
||||
if (!authDisabled && session && location.pathname === "/login") {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
|
||||
return (
|
||||
<BrandingProvider>
|
||||
{location.pathname.startsWith("/admin") ? (
|
||||
|
||||
@@ -1,77 +0,0 @@
|
||||
import { Component } from "react";
|
||||
import type { ErrorInfo, ReactNode } from "react";
|
||||
|
||||
interface ErrorBoundaryProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface ErrorBoundaryState {
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Top-level ErrorBoundary — renders the error visibly so the actual exception
|
||||
* appears in the DOM (and therefore in the Playwright snapshot) instead of
|
||||
* React 18+ unmounting the entire tree to a blank `<div id="root">`.
|
||||
*
|
||||
* Background: GRO-2094. The bundle was executing but never painting, with
|
||||
* the failure swallowed. Surfacing the error here is the first step; the
|
||||
* real fix is in the underlying component that threw.
|
||||
*/
|
||||
export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
||||
state: ErrorBoundaryState = { error: null };
|
||||
|
||||
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
||||
return { error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, info: ErrorInfo): void {
|
||||
// Also surface to the console — this is what the test harness greps for.
|
||||
// eslint-disable-next-line no-console
|
||||
console.error("[ErrorBoundary] Uncaught render error:", error, info);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.error) {
|
||||
const err = this.state.error;
|
||||
return (
|
||||
<div
|
||||
data-testid="error-boundary"
|
||||
style={{
|
||||
padding: "2rem",
|
||||
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
|
||||
color: "#7f1d1d",
|
||||
background: "#fef2f2",
|
||||
minHeight: "100vh",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<h1 style={{ fontSize: 18, margin: "0 0 0.5rem" }}>Something went wrong</h1>
|
||||
<p style={{ margin: "0 0 1rem", color: "#991b1b" }}>
|
||||
The app failed to render. The full error is shown below — please share this
|
||||
output when reporting the bug.
|
||||
</p>
|
||||
<pre
|
||||
data-testid="error-boundary-message"
|
||||
style={{
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
background: "#fff",
|
||||
border: "1px solid #fecaca",
|
||||
borderRadius: 6,
|
||||
padding: "0.75rem 1rem",
|
||||
margin: 0,
|
||||
fontSize: 13,
|
||||
lineHeight: 1.4,
|
||||
}}
|
||||
>
|
||||
{err.name}: {err.message}
|
||||
{"\n\n"}
|
||||
{err.stack ?? "(no stack)"}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
@@ -121,65 +121,6 @@ describe("App navigation", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("GRO-2011 — setup/status fetch for unauthenticated users", () => {
|
||||
it("calls /api/setup/status for unauthenticated users so needsSetup is never stuck null", async () => {
|
||||
const setupStatusCalls: string[] = [];
|
||||
|
||||
global.fetch = vi.fn((url: string) => {
|
||||
if (url === "/api/dev/config") {
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
json: async () => ({ authDisabled: false }),
|
||||
} as Response);
|
||||
}
|
||||
if (url === "/api/auth/get-session") {
|
||||
// Better Auth returns 200 with null session for unauthenticated users.
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
json: async () => null,
|
||||
} as unknown as Response);
|
||||
}
|
||||
if (url === "/api/setup/status") {
|
||||
setupStatusCalls.push(url);
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
json: async () => ({ needsSetup: false }),
|
||||
} as Response);
|
||||
}
|
||||
if (url === "/api/branding") {
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
businessName: "GroomBook",
|
||||
primaryColor: "#4f8a6f",
|
||||
accentColor: "#8b7355",
|
||||
logoBase64: null,
|
||||
logoMimeType: null,
|
||||
}),
|
||||
} as Response);
|
||||
}
|
||||
return Promise.resolve({ ok: true, json: async () => [] } as Response);
|
||||
}) as unknown as typeof fetch;
|
||||
|
||||
render(
|
||||
<MemoryRouter initialEntries={["/login"]}>
|
||||
<App />
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
// The login page should be rendered for the unauthenticated user.
|
||||
await screen.findByText("Sign in to continue");
|
||||
|
||||
// Crucially, /api/setup/status must be called even when the user is unauthenticated —
|
||||
// otherwise `needsSetup` stays null and a later code path can short-circuit to a
|
||||
// blank page (GRO-2011).
|
||||
await waitFor(() => {
|
||||
expect(setupStatusCalls.length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
expect(setupStatusCalls[0]).toBe("/api/setup/status");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Dev login selector", () => {
|
||||
it("redirects to /login when auth is disabled and no user selected", async () => {
|
||||
global.fetch = vi.fn((url: string) => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
||||
import { parseTimeTo24Hour, isUpcoming, CustomerNotesSection, ConfirmationSection, StatusBadge } from "../portal/sections/Appointments.tsx";
|
||||
import { parseTimeTo24Hour, isUpcoming, CustomerNotesSection, ConfirmationSection } from "../portal/sections/Appointments.tsx";
|
||||
|
||||
const UPCOMING_APPT = {
|
||||
id: "appt-1",
|
||||
@@ -379,202 +379,4 @@ describe("ConfirmationSection", () => {
|
||||
expect(screen.getByText(/Confirmed!/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("StatusBadge", () => {
|
||||
it("renders Confirmed for confirmed status", () => {
|
||||
render(<StatusBadge status="confirmed" />);
|
||||
expect(screen.getByText("Confirmed")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders Pending for pending status", () => {
|
||||
render(<StatusBadge status="pending" />);
|
||||
expect(screen.getByText("Pending")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders Waitlisted for waitlisted status", () => {
|
||||
render(<StatusBadge status="waitlisted" />);
|
||||
expect(screen.getByText("Waitlisted")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders Completed for completed status", () => {
|
||||
render(<StatusBadge status="completed" />);
|
||||
expect(screen.getByText("Completed")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders Cancelled for cancelled status", () => {
|
||||
render(<StatusBadge status="cancelled" />);
|
||||
expect(screen.getByText("Cancelled")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("falls back to status string for unknown status", () => {
|
||||
render(<StatusBadge status="custom-status" />);
|
||||
expect(screen.getByText("custom-status")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("uses correct CSS class for confirmed status", () => {
|
||||
render(<StatusBadge status="confirmed" />);
|
||||
const badge = screen.getByText("Confirmed").closest('span');
|
||||
expect(badge?.className).toContain("bg-green-100");
|
||||
expect(badge?.className).toContain("text-green-700");
|
||||
});
|
||||
|
||||
it("uses correct CSS class for waitlisted status", () => {
|
||||
render(<StatusBadge status="waitlisted" />);
|
||||
const badge = screen.getByText("Waitlisted").closest('span');
|
||||
expect(badge?.className).toContain("bg-blue-100");
|
||||
expect(badge?.className).toContain("text-blue-600");
|
||||
});
|
||||
|
||||
it("uses correct CSS class for pending status", () => {
|
||||
render(<StatusBadge status="pending" />);
|
||||
const badge = screen.getByText("Pending").closest('span');
|
||||
expect(badge?.className).toContain("bg-amber-100");
|
||||
expect(badge?.className).toContain("text-amber-600");
|
||||
});
|
||||
|
||||
it("uses fallback styling for unknown status", () => {
|
||||
render(<StatusBadge status="unknown" />);
|
||||
const badge = screen.getByText("unknown").closest('span');
|
||||
expect(badge?.className).toContain("bg-stone-100");
|
||||
expect(badge?.className).toContain("text-stone-600");
|
||||
});
|
||||
});
|
||||
|
||||
describe("RescheduleFlow dynamic time slots", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
global.fetch = vi.fn();
|
||||
});
|
||||
|
||||
const RESCHEDULE_APPT = {
|
||||
id: "appt-r1",
|
||||
petId: "pet-1",
|
||||
petName: "Buddy",
|
||||
groomerId: "groomer-1",
|
||||
groomerName: "Sarah",
|
||||
services: ["Bath & Brush"],
|
||||
serviceId: "service-1",
|
||||
addOns: [],
|
||||
date: "2027-01-01",
|
||||
time: "10:00 AM",
|
||||
duration: 60,
|
||||
price: 50,
|
||||
status: "confirmed" as const,
|
||||
notes: "",
|
||||
customerNotes: "",
|
||||
confirmationStatus: "confirmed" as const,
|
||||
};
|
||||
|
||||
it("shows loading state while fetching availability", async () => {
|
||||
vi.mocked(global.fetch).mockReturnValue(new Promise(() => {})); // Never resolves
|
||||
|
||||
const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
|
||||
render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
|
||||
|
||||
const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
|
||||
fireEvent.change(dateInput, { target: { value: "2027-01-15" } });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Checking availability/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("displays fetched time slots from API", async () => {
|
||||
vi.mocked(global.fetch).mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ["9:00 AM", "10:00 AM", "2:00 PM"],
|
||||
} as Response);
|
||||
|
||||
const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
|
||||
render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
|
||||
|
||||
const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
|
||||
fireEvent.change(dateInput, { target: { value: "2027-01-15" } });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("9:00 AM")).toBeInTheDocument();
|
||||
expect(screen.getByText("10:00 AM")).toBeInTheDocument();
|
||||
expect(screen.getByText("2:00 PM")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows error state when availability fetch fails", async () => {
|
||||
vi.mocked(global.fetch).mockRejectedValue(new Error("Network error"));
|
||||
|
||||
const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
|
||||
render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
|
||||
|
||||
const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
|
||||
fireEvent.change(dateInput, { target: { value: "2027-01-15" } });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Failed to load time slots/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows no slots message when API returns empty array", async () => {
|
||||
vi.mocked(global.fetch).mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => [] as string[],
|
||||
} as Response);
|
||||
|
||||
const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
|
||||
render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
|
||||
|
||||
const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
|
||||
fireEvent.change(dateInput, { target: { value: "2027-01-15" } });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/No available slots on this date/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("calls /api/book/availability with the selected date", async () => {
|
||||
vi.mocked(global.fetch).mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ["9:00 AM"] as string[],
|
||||
} as Response);
|
||||
|
||||
const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
|
||||
render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
|
||||
|
||||
const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
|
||||
fireEvent.change(dateInput, { target: { value: "2027-02-20" } });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(global.fetch).toHaveBeenCalledWith(
|
||||
"/api/book/availability?date=2027-02-20",
|
||||
expect.objectContaining({
|
||||
headers: expect.objectContaining({ "X-Impersonation-Session-Id": "test-session-id" }),
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it("re-fetches slots when date changes", async () => {
|
||||
vi.mocked(global.fetch)
|
||||
.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => ["9:00 AM"] as string[],
|
||||
} as Response)
|
||||
.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => ["11:00 AM", "1:00 PM"] as string[],
|
||||
} as Response);
|
||||
|
||||
const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
|
||||
render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
|
||||
|
||||
const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
|
||||
|
||||
fireEvent.change(dateInput, { target: { value: "2027-01-10" } });
|
||||
await waitFor(() => expect(screen.getByText("9:00 AM")).toBeInTheDocument());
|
||||
|
||||
fireEvent.change(dateInput, { target: { value: "2027-01-15" } });
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("11:00 AM")).toBeInTheDocument();
|
||||
expect(screen.getByText("1:00 PM")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,27 +0,0 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { BookingCancelledPage } from "../pages/BookingCancelled.tsx";
|
||||
|
||||
describe("BookingCancelledPage", () => {
|
||||
it("renders the cancelled heading", () => {
|
||||
render(<BookingCancelledPage />);
|
||||
expect(screen.getByRole("heading", { name: /Appointment Cancelled/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the cancelled body text", () => {
|
||||
render(<BookingCancelledPage />);
|
||||
expect(screen.getByText(/Your appointment has been cancelled/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("has a Book again link pointing to /admin/book", () => {
|
||||
render(<BookingCancelledPage />);
|
||||
const link = screen.getByRole("link", { name: /Book again/i });
|
||||
expect(link).toHaveAttribute("href", "/admin/book");
|
||||
});
|
||||
|
||||
it("has a Back to Portal link pointing to /", () => {
|
||||
render(<BookingCancelledPage />);
|
||||
const link = screen.getByRole("link", { name: /Back to Portal/i });
|
||||
expect(link).toHaveAttribute("href", "/");
|
||||
});
|
||||
});
|
||||
@@ -1,38 +0,0 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { BookingErrorPage } from "../pages/BookingError.tsx";
|
||||
import { BUSINESS_CONTACT_INFO } from "../lib/contact.ts";
|
||||
|
||||
describe("BookingErrorPage", () => {
|
||||
it("renders the error heading", () => {
|
||||
render(<BookingErrorPage />);
|
||||
expect(screen.getByRole("heading", { name: /Link Invalid or Expired/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the error body text", () => {
|
||||
render(<BookingErrorPage />);
|
||||
expect(screen.getByText(/This confirmation link is invalid/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("has a Start a new booking link pointing to /admin/book", () => {
|
||||
render(<BookingErrorPage />);
|
||||
const link = screen.getByRole("link", { name: /Start a new booking/i });
|
||||
expect(link).toHaveAttribute("href", "/admin/book");
|
||||
});
|
||||
|
||||
it("has a Back to Portal link pointing to /", () => {
|
||||
render(<BookingErrorPage />);
|
||||
const link = screen.getByRole("link", { name: /Back to Portal/i });
|
||||
expect(link).toHaveAttribute("href", "/");
|
||||
});
|
||||
|
||||
it("displays business contact phone", () => {
|
||||
render(<BookingErrorPage />);
|
||||
expect(screen.getByText(new RegExp(BUSINESS_CONTACT_INFO.phone.replace(/[()]/g, "\\$&")))).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("displays business contact email", () => {
|
||||
render(<BookingErrorPage />);
|
||||
expect(screen.getByText(new RegExp(BUSINESS_CONTACT_INFO.email))).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,54 +0,0 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, screen, cleanup } from "@testing-library/react";
|
||||
import { ErrorBoundary } from "../ErrorBoundary";
|
||||
|
||||
function ThrowingChild(): never {
|
||||
throw new Error("synthetic render-time failure for GRO-2094");
|
||||
}
|
||||
|
||||
function GoodChild() {
|
||||
return <div data-testid="good-child">ok</div>;
|
||||
}
|
||||
|
||||
describe("ErrorBoundary (GRO-2094)", () => {
|
||||
let errorSpy: ReturnType<typeof vi.spyOn>;
|
||||
|
||||
beforeEach(() => {
|
||||
// React 18+ logs caught render errors to console.error via React's own
|
||||
// instrumentation; suppress it so test output is clean but capture it
|
||||
// for an assertion below.
|
||||
errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
errorSpy.mockRestore();
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it("renders children when nothing throws", () => {
|
||||
render(
|
||||
<ErrorBoundary>
|
||||
<GoodChild />
|
||||
</ErrorBoundary>
|
||||
);
|
||||
expect(screen.getByTestId("good-child")).toBeInTheDocument();
|
||||
expect(screen.queryByTestId("error-boundary")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the error visibly when a child throws during render", () => {
|
||||
render(
|
||||
<ErrorBoundary>
|
||||
<ThrowingChild />
|
||||
</ErrorBoundary>
|
||||
);
|
||||
|
||||
const fallback = screen.getByTestId("error-boundary");
|
||||
expect(fallback).toBeInTheDocument();
|
||||
const message = screen.getByTestId("error-boundary-message");
|
||||
// The actual exception is shown — no more silent blank root.
|
||||
expect(message.textContent).toContain("synthetic render-time failure for GRO-2094");
|
||||
// The boundary also calls console.error so it shows up in the Playwright
|
||||
// console log even if the DOM-rendered fallback is somehow missed.
|
||||
expect(errorSpy).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -1,157 +0,0 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import { PetForm } from "../portal/sections/PetForm.js";
|
||||
import type { Pet } from "@groombook/types";
|
||||
|
||||
const BASE_PET: Pet = {
|
||||
id: "pet-1",
|
||||
clientId: "client-1",
|
||||
name: "Buddy",
|
||||
species: "dog",
|
||||
breed: "Labrador",
|
||||
weightKg: 25,
|
||||
dateOfBirth: "2020-03-15T00:00:00.000Z",
|
||||
healthAlerts: null,
|
||||
groomingNotes: null,
|
||||
cutStyle: null,
|
||||
shampooPreference: null,
|
||||
specialCareNotes: null,
|
||||
customFields: {},
|
||||
coatType: null,
|
||||
preferredCuts: [],
|
||||
medicalAlerts: [],
|
||||
createdAt: "2024-01-01T00:00:00.000Z",
|
||||
updatedAt: "2024-01-01T00:00:00.000Z",
|
||||
};
|
||||
|
||||
describe("PetForm", () => {
|
||||
const onSave = vi.fn();
|
||||
const onCancel = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
onSave.mockClear();
|
||||
onCancel.mockClear();
|
||||
});
|
||||
|
||||
// ── Coat type ───────────────────────────────────────────────────────────────
|
||||
|
||||
it("allows coat type selection from dropdown", () => {
|
||||
render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
|
||||
const select = screen.getByRole("combobox", { name: /coat type/i });
|
||||
fireEvent.change(select, { target: { value: "curly" } });
|
||||
expect((select as HTMLSelectElement).value).toBe("curly");
|
||||
});
|
||||
|
||||
it("persists coat type on save", () => {
|
||||
render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
|
||||
fireEvent.change(screen.getByRole("combobox", { name: /coat type/i }), { target: { value: "double" } });
|
||||
fireEvent.click(screen.getByRole("button", { name: /save/i }));
|
||||
expect(onSave).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ coatType: "double" })
|
||||
);
|
||||
});
|
||||
|
||||
// ── Preferred cuts tag input ────────────────────────────────────────────────
|
||||
|
||||
it("adds a cut when Enter is pressed", () => {
|
||||
render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
|
||||
const input = screen.getByPlaceholderText(/type a cut name/i);
|
||||
fireEvent.change(input, { target: { value: "Puppy Cut" } });
|
||||
fireEvent.keyDown(input, { key: "Enter" });
|
||||
expect(screen.getByText("Puppy Cut")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("adds a cut when the + button is clicked", () => {
|
||||
render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
|
||||
const input = screen.getByPlaceholderText(/type a cut name/i);
|
||||
fireEvent.change(input, { target: { value: "Teddy Bear" } });
|
||||
fireEvent.click(screen.getByRole("button", { name: "Add" }));
|
||||
expect(screen.getByText("Teddy Bear")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("removes a cut when X is clicked", () => {
|
||||
const petWithCuts: Pet = {
|
||||
...BASE_PET,
|
||||
preferredCuts: ["Puppy Cut", "Teddy Bear"],
|
||||
};
|
||||
render(<PetForm pet={petWithCuts} onSave={onSave} onCancel={onCancel} />);
|
||||
const puppyCutSpans = screen.getAllByText("Puppy Cut");
|
||||
const puppyCutTag = puppyCutSpans[0]?.closest("span");
|
||||
if (!puppyCutTag) return;
|
||||
const removeBtn = puppyCutTag.querySelector("button");
|
||||
if (!removeBtn) return;
|
||||
fireEvent.click(removeBtn);
|
||||
expect(screen.queryByText("Puppy Cut")).toBeNull();
|
||||
expect(screen.getByText("Teddy Bear")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("includes preferred cuts in save payload", () => {
|
||||
render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
|
||||
fireEvent.change(screen.getByPlaceholderText(/type a cut name/i), { target: { value: "Puppy Cut" } });
|
||||
fireEvent.keyDown(screen.getByPlaceholderText(/type a cut name/i), { key: "Enter" });
|
||||
fireEvent.click(screen.getByRole("button", { name: /save/i }));
|
||||
expect(onSave).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ preferredCuts: ["Puppy Cut"] })
|
||||
);
|
||||
});
|
||||
|
||||
// ── Medical alerts ───────────────────────────────────────────────────────────
|
||||
|
||||
it("adds a medical alert", () => {
|
||||
render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
|
||||
fireEvent.click(screen.getByRole("button", { name: /add alert/i }));
|
||||
expect(screen.getByPlaceholderText(/alert type/i)).toBeTruthy();
|
||||
});
|
||||
|
||||
it("removes a medical alert", () => {
|
||||
const petWithAlert: Pet = {
|
||||
...BASE_PET,
|
||||
medicalAlerts: [{ id: "alert-1", type: "Allergic to chicken", description: "Causes hives", severity: "high" }],
|
||||
};
|
||||
render(<PetForm pet={petWithAlert} onSave={onSave} onCancel={onCancel} />);
|
||||
const removeButtons = screen.getAllByRole("button", { name: "" });
|
||||
if (removeButtons.length === 0) return;
|
||||
const removeButton = removeButtons[0]!;
|
||||
if (!removeButton) return;
|
||||
fireEvent.click(removeButton);
|
||||
expect(screen.queryByText("Allergic to chicken")).toBeNull();
|
||||
});
|
||||
|
||||
it("validates alert type is non-empty", () => {
|
||||
render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
|
||||
fireEvent.click(screen.getByRole("button", { name: /add alert/i }));
|
||||
fireEvent.click(screen.getByRole("button", { name: /save/i }));
|
||||
expect(screen.getByText(/type is required/i)).toBeTruthy();
|
||||
expect(onSave).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("shows medical alerts in save payload", () => {
|
||||
const petWithAlert: Pet = {
|
||||
...BASE_PET,
|
||||
medicalAlerts: [{ id: "alert-1", type: "Sensitive skin", description: "Use hypoallergenic shampoo only", severity: "medium" }],
|
||||
};
|
||||
render(<PetForm pet={petWithAlert} onSave={onSave} onCancel={onCancel} />);
|
||||
fireEvent.click(screen.getByRole("button", { name: /save/i }));
|
||||
expect(onSave).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
medicalAlerts: expect.arrayContaining([
|
||||
expect.objectContaining({ type: "Sensitive skin", severity: "medium" }),
|
||||
]),
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// ── Temperament read-only display ─────────────────────────────────────────────
|
||||
|
||||
it("displays temperament score as read-only stars", () => {
|
||||
const petWithTemperament: Pet = {
|
||||
...BASE_PET,
|
||||
temperamentScore: 4,
|
||||
temperamentFlags: ["Anxious", "Good with kids"],
|
||||
};
|
||||
render(<PetForm pet={petWithTemperament} onSave={onSave} onCancel={onCancel} />);
|
||||
expect(screen.getByText("(4/5)")).toBeTruthy();
|
||||
expect(screen.getByText("Anxious")).toBeTruthy();
|
||||
expect(screen.getByText("Good with kids")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,83 +0,0 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics";
|
||||
|
||||
describe("analytics", () => {
|
||||
describe("ANALYTICS_EVENTS constants", () => {
|
||||
it("exports all required event names", () => {
|
||||
expect(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE).toBe("booking_step_service");
|
||||
expect(ANALYTICS_EVENTS.BOOKING_STEP_TIME).toBe("booking_step_time");
|
||||
expect(ANALYTICS_EVENTS.BOOKING_STEP_CONTACT).toBe("booking_step_contact");
|
||||
expect(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT).toBe("booking_step_submit");
|
||||
expect(ANALYTICS_EVENTS.BOOKING_CONFIRMED).toBe("booking_confirmed");
|
||||
expect(ANALYTICS_EVENTS.BOOKING_ERROR).toBe("booking_error");
|
||||
});
|
||||
|
||||
it("has no duplicate event names", () => {
|
||||
const values = Object.values(ANALYTICS_EVENTS);
|
||||
const unique = new Set(values);
|
||||
expect(unique.size).toBe(values.length);
|
||||
});
|
||||
});
|
||||
|
||||
describe("fireAnalyticsEvent", () => {
|
||||
it("dispatches a CustomEvent with the correct event name", () => {
|
||||
const listener = vi.fn();
|
||||
window.addEventListener(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, listener);
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, { step: "service", flow: "public" });
|
||||
expect(listener).toHaveBeenCalledTimes(1);
|
||||
const event = listener.mock.calls[0]![0] as CustomEvent;
|
||||
expect(event.type).toBe("booking_step_service");
|
||||
expect(event.detail.step).toBe("service");
|
||||
expect(event.detail.flow).toBe("public");
|
||||
expect(event.detail.timestamp).toBeDefined();
|
||||
window.removeEventListener(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, listener);
|
||||
});
|
||||
|
||||
it("includes a timestamp in the event detail", () => {
|
||||
const listener = vi.fn();
|
||||
window.addEventListener(ANALYTICS_EVENTS.BOOKING_CONFIRMED, listener);
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_CONFIRMED, { step: "confirmed", flow: "public" });
|
||||
const event = listener.mock.calls[0]![0] as CustomEvent;
|
||||
expect(event.detail.timestamp).toBeTruthy();
|
||||
expect(new Date(event.detail.timestamp as string)).toBeInstanceOf(Date);
|
||||
window.removeEventListener(ANALYTICS_EVENTS.BOOKING_CONFIRMED, listener);
|
||||
});
|
||||
|
||||
it("does not throw when called with no payload", () => {
|
||||
expect(() => {
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_ERROR, {});
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it("does not throw when window.dispatchEvent throws", () => {
|
||||
const original = window.dispatchEvent;
|
||||
window.dispatchEvent = () => {
|
||||
throw new Error("analytics blocked");
|
||||
};
|
||||
expect(() => {
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT, { step: "submit", flow: "public" });
|
||||
}).not.toThrow();
|
||||
window.dispatchEvent = original;
|
||||
});
|
||||
|
||||
it("fires events for all event types", () => {
|
||||
const events = Object.values(ANALYTICS_EVENTS);
|
||||
for (const eventName of events) {
|
||||
const listener = vi.fn();
|
||||
window.addEventListener(eventName, listener);
|
||||
fireAnalyticsEvent(eventName as typeof events[number], { step: "test", flow: "public" });
|
||||
expect(listener).toHaveBeenCalledTimes(1);
|
||||
window.removeEventListener(eventName, listener);
|
||||
}
|
||||
});
|
||||
|
||||
it("does not include PII in payload", () => {
|
||||
// Payload only contains step, flow, and timestamp — no names, emails, or phones
|
||||
const payload = { step: "contact", flow: "public" };
|
||||
const keys = Object.keys(payload);
|
||||
const piish = ["name", "email", "phone", "clientName", "clientEmail", "clientPhone", "petName"];
|
||||
const hasPII = piish.some((k) => keys.includes(k));
|
||||
expect(hasPII).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -5,22 +5,6 @@ import { ImpersonationBanner } from "../portal/ImpersonationBanner.js";
|
||||
import { AuditLogViewer } from "../portal/AuditLogViewer.js";
|
||||
import type { ImpersonationSession, ImpersonationAuditLog } from "@groombook/types";
|
||||
|
||||
// Spy on the RescheduleFlow so we can assert the sessionId prop it receives
|
||||
// from CustomerPortal without rendering the full flow UI. The real module is
|
||||
// still loaded via importActual; only RescheduleFlow is swapped.
|
||||
const rescheduleFlowSpy = vi.hoisted(() =>
|
||||
vi.fn((_props: { sessionId: string | null; appointment: { id: string } }) => null)
|
||||
);
|
||||
vi.mock("../portal/sections/Appointments.js", async () => {
|
||||
const actual = await vi.importActual<typeof import("../portal/sections/Appointments.js")>(
|
||||
"../portal/sections/Appointments.js"
|
||||
);
|
||||
return {
|
||||
...actual,
|
||||
RescheduleFlow: rescheduleFlowSpy,
|
||||
};
|
||||
});
|
||||
|
||||
const SESSION: ImpersonationSession = {
|
||||
id: "sess-1",
|
||||
staffId: "staff-1",
|
||||
@@ -329,287 +313,3 @@ describe("CustomerPortal session loading", () => {
|
||||
Object.defineProperty(window, "location", { value: originalLocation, writable: true });
|
||||
});
|
||||
});
|
||||
|
||||
// ─── CustomerPortal — Better Auth SSO bridge (GRO-1867) ────────────────────
|
||||
|
||||
describe("CustomerPortal SSO bridge", () => {
|
||||
beforeEach(() => {
|
||||
// Make sure no dev-user leaks across tests
|
||||
window.localStorage.clear();
|
||||
});
|
||||
|
||||
const brandingResponse = {
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
businessName: "GroomBook",
|
||||
primaryColor: "#4f8a6f",
|
||||
accentColor: "#8b7355",
|
||||
logoBase64: null,
|
||||
logoMimeType: null,
|
||||
}),
|
||||
} as Response;
|
||||
|
||||
it("bridges Better Auth session via /api/portal/session-from-auth and uses returned sessionId", async () => {
|
||||
global.fetch = vi.fn((input: RequestInfo, init?: RequestInit) => {
|
||||
const url = typeof input === "string" ? input : input.toString();
|
||||
if (url === "/api/branding") return Promise.resolve(brandingResponse);
|
||||
if (url === "/api/auth/get-session") {
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
json: async () => ({ user: { email: "customer@example.com", role: "customer" } }),
|
||||
} as Response);
|
||||
}
|
||||
if (url === "/api/portal/session-from-auth" && init?.method === "POST") {
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
status: 201,
|
||||
json: async () => ({ sessionId: "sso-sess-1", clientId: "client-1", clientName: "Jane Doe" }),
|
||||
} as Response);
|
||||
}
|
||||
// Subsequent portal API calls — surface them so we can assert the header
|
||||
return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
|
||||
}) as unknown as typeof fetch;
|
||||
|
||||
const { CustomerPortal } = await import("../portal/CustomerPortal.js");
|
||||
render(
|
||||
<MemoryRouter initialEntries={["/"]}>
|
||||
<CustomerPortal />
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(global.fetch).toHaveBeenCalledWith("/api/auth/get-session", expect.objectContaining({ credentials: "include" }));
|
||||
});
|
||||
await waitFor(() => {
|
||||
expect(global.fetch).toHaveBeenCalledWith(
|
||||
"/api/portal/session-from-auth",
|
||||
expect.objectContaining({ method: "POST", credentials: "include" })
|
||||
);
|
||||
});
|
||||
// Client greeting reflects the bridged customer name (proof the response was consumed)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Hi, Jane/)).toBeInTheDocument();
|
||||
});
|
||||
// The impersonation banner must NOT appear — this is the customer themselves
|
||||
expect(screen.queryByRole("button", { name: /End Session/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows a friendly fallback when session-from-auth returns 404 (no client record)", async () => {
|
||||
global.fetch = vi.fn((input: RequestInfo) => {
|
||||
const url = typeof input === "string" ? input : input.toString();
|
||||
if (url === "/api/branding") return Promise.resolve(brandingResponse);
|
||||
if (url === "/api/auth/get-session") {
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
json: async () => ({ user: { email: "stranger@example.com", role: "customer" } }),
|
||||
} as Response);
|
||||
}
|
||||
if (url === "/api/portal/session-from-auth") {
|
||||
return Promise.resolve({
|
||||
ok: false,
|
||||
status: 404,
|
||||
json: async () => ({ error: "No client record found for this user" }),
|
||||
} as Response);
|
||||
}
|
||||
return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
|
||||
}) as unknown as typeof fetch;
|
||||
|
||||
const { CustomerPortal } = await import("../portal/CustomerPortal.js");
|
||||
render(
|
||||
<MemoryRouter initialEntries={["/"]}>
|
||||
<CustomerPortal />
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Portal access not configured/i)).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.getByText(/not linked to a customer record/i)).toBeInTheDocument();
|
||||
// Sign-out escape hatch is present so the user is not stuck in a loop
|
||||
expect(screen.getByRole("button", { name: /Sign out/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not call session-from-auth when there is no Better Auth session", async () => {
|
||||
global.fetch = vi.fn((input: RequestInfo) => {
|
||||
const url = typeof input === "string" ? input : input.toString();
|
||||
if (url === "/api/branding") return Promise.resolve(brandingResponse);
|
||||
if (url === "/api/auth/get-session") {
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
json: async () => null,
|
||||
} as Response);
|
||||
}
|
||||
return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
|
||||
}) as unknown as typeof fetch;
|
||||
|
||||
const { CustomerPortal } = await import("../portal/CustomerPortal.js");
|
||||
render(
|
||||
<MemoryRouter initialEntries={["/"]}>
|
||||
<CustomerPortal />
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(global.fetch).toHaveBeenCalledWith("/api/auth/get-session", expect.objectContaining({ credentials: "include" }));
|
||||
});
|
||||
// Wait one tick to ensure no subsequent bridge call is queued
|
||||
await new Promise((r) => setTimeout(r, 30));
|
||||
const bridgeCalls = vi.mocked(global.fetch).mock.calls.filter(
|
||||
([u]) => typeof u === "string" && u === "/api/portal/session-from-auth"
|
||||
);
|
||||
expect(bridgeCalls).toHaveLength(0);
|
||||
});
|
||||
|
||||
it("skips the bridge for staff Better Auth sessions", async () => {
|
||||
global.fetch = vi.fn((input: RequestInfo) => {
|
||||
const url = typeof input === "string" ? input : input.toString();
|
||||
if (url === "/api/branding") return Promise.resolve(brandingResponse);
|
||||
if (url === "/api/auth/get-session") {
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
json: async () => ({ user: { email: "staff@example.com", role: "staff" } }),
|
||||
} as Response);
|
||||
}
|
||||
return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
|
||||
}) as unknown as typeof fetch;
|
||||
|
||||
const { CustomerPortal } = await import("../portal/CustomerPortal.js");
|
||||
render(
|
||||
<MemoryRouter initialEntries={["/"]}>
|
||||
<CustomerPortal />
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(global.fetch).toHaveBeenCalledWith("/api/auth/get-session", expect.objectContaining({ credentials: "include" }));
|
||||
});
|
||||
await new Promise((r) => setTimeout(r, 30));
|
||||
const bridgeCalls = vi.mocked(global.fetch).mock.calls.filter(
|
||||
([u]) => typeof u === "string" && u === "/api/portal/session-from-auth"
|
||||
);
|
||||
expect(bridgeCalls).toHaveLength(0);
|
||||
});
|
||||
|
||||
it("passes portalSessionId (not null) to RescheduleFlow for SSO bridge customers (GRO-2012)", async () => {
|
||||
rescheduleFlowSpy.mockClear();
|
||||
|
||||
global.fetch = vi.fn((input: RequestInfo, init?: RequestInit) => {
|
||||
const url = typeof input === "string" ? input : input.toString();
|
||||
if (url === "/api/branding") return Promise.resolve(brandingResponse);
|
||||
if (url === "/api/auth/get-session") {
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
json: async () => ({ user: { email: "customer@example.com", role: "customer" } }),
|
||||
} as Response);
|
||||
}
|
||||
if (url === "/api/portal/session-from-auth" && init?.method === "POST") {
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
status: 201,
|
||||
json: async () => ({ sessionId: "sso-sess-1", clientId: "client-1", clientName: "Jane Doe" }),
|
||||
} as Response);
|
||||
}
|
||||
// Dashboard data — return an upcoming appointment so the Reschedule
|
||||
// button is rendered on the dashboard card.
|
||||
if (url === "/api/portal/appointments") {
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
appointments: [
|
||||
{
|
||||
id: "appt-1",
|
||||
date: "2099-01-01",
|
||||
time: "10:00",
|
||||
petName: "Buddy",
|
||||
serviceName: "Bath & Brush",
|
||||
status: "confirmed",
|
||||
},
|
||||
],
|
||||
}),
|
||||
} as Response);
|
||||
}
|
||||
if (url === "/api/portal/pets") {
|
||||
return Promise.resolve({ ok: true, json: async () => ({ pets: [] }) } as Response);
|
||||
}
|
||||
if (url === "/api/portal/invoices") {
|
||||
return Promise.resolve({ ok: true, json: async () => ({ invoices: [] }) } as Response);
|
||||
}
|
||||
return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
|
||||
}) as unknown as typeof fetch;
|
||||
|
||||
const { CustomerPortal } = await import("../portal/CustomerPortal.js");
|
||||
render(
|
||||
<MemoryRouter initialEntries={["/"]}>
|
||||
<CustomerPortal />
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
// Wait for the Reschedule button to appear on the dashboard card
|
||||
const rescheduleBtn = await screen.findByRole("button", { name: /^Reschedule$/i });
|
||||
fireEvent.click(rescheduleBtn);
|
||||
|
||||
// RescheduleFlow should have been invoked with the bridged portalSessionId,
|
||||
// NOT null. Pre-fix, the call would be sessionId={null} for SSO customers.
|
||||
await waitFor(() => {
|
||||
expect(rescheduleFlowSpy).toHaveBeenCalled();
|
||||
});
|
||||
const lastProps = rescheduleFlowSpy.mock.lastCall?.[0];
|
||||
expect(lastProps).toBeDefined();
|
||||
expect(lastProps!.sessionId).toBe("sso-sess-1");
|
||||
expect(lastProps!.appointment.id).toBe("appt-1");
|
||||
});
|
||||
|
||||
// GRO-2099 regression: the portal chrome (and Dashboard's `!sessionId` guard)
|
||||
// must NOT render before the SSO bridge resolves. A loading state must be
|
||||
// shown instead. Previously, the Dashboard's redirect-to-/login guard fired
|
||||
// mid-bootstrap, leaving the user with a blank page after sign-in.
|
||||
it("renders a loading state during the SSO bridge (does not flash portal chrome)", async () => {
|
||||
// Slow bridge: resolve get-session and session-from-auth after a tick so
|
||||
// we can observe the loading state mid-bootstrap.
|
||||
let resolveBridge!: (value: Response) => void;
|
||||
const bridgePromise = new Promise<Response>((resolve) => {
|
||||
resolveBridge = resolve;
|
||||
});
|
||||
|
||||
global.fetch = vi.fn((input: RequestInfo, init?: RequestInit) => {
|
||||
const url = typeof input === "string" ? input : input.toString();
|
||||
if (url === "/api/branding") return Promise.resolve(brandingResponse);
|
||||
if (url === "/api/auth/get-session") {
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
json: async () => ({ user: { email: "customer@example.com", role: "customer" } }),
|
||||
} as Response);
|
||||
}
|
||||
if (url === "/api/portal/session-from-auth" && init?.method === "POST") {
|
||||
return bridgePromise;
|
||||
}
|
||||
return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
|
||||
}) as unknown as typeof fetch;
|
||||
|
||||
const { CustomerPortal } = await import("../portal/CustomerPortal.js");
|
||||
render(
|
||||
<MemoryRouter initialEntries={["/"]}>
|
||||
<CustomerPortal />
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
// Loading state is visible while the bridge is in flight. The portal nav
|
||||
// (Home / Appointments / etc.) must NOT be present — its presence would
|
||||
// indicate the chrome is rendering with a null session, which is the
|
||||
// pre-GRO-2099 bug.
|
||||
expect(await screen.findByRole("status")).toHaveTextContent(/Loading/i);
|
||||
expect(screen.queryByText("Home")).not.toBeInTheDocument();
|
||||
expect(screen.queryByText("Appointments")).not.toBeInTheDocument();
|
||||
|
||||
// Resolve the bridge and confirm the portal renders normally.
|
||||
resolveBridge({
|
||||
ok: true,
|
||||
status: 201,
|
||||
json: async () => ({ sessionId: "sso-sess-1", clientId: "client-1", clientName: "Jane Doe" }),
|
||||
} as Response);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Hi, Jane/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,282 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
interface Service {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
basePriceCents: number;
|
||||
durationMinutes: number;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
interface BufferRule {
|
||||
id: string;
|
||||
serviceId: string;
|
||||
serviceName: string;
|
||||
sizeCategory?: string;
|
||||
coatType?: string;
|
||||
bufferMinutes: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface BufferRuleForm {
|
||||
serviceId: string;
|
||||
sizeCategory: string;
|
||||
coatType: string;
|
||||
bufferMinutes: string;
|
||||
}
|
||||
|
||||
const EMPTY_FORM: BufferRuleForm = {
|
||||
serviceId: "",
|
||||
sizeCategory: "",
|
||||
coatType: "",
|
||||
bufferMinutes: "",
|
||||
};
|
||||
|
||||
const SIZE_OPTIONS = ["", "small", "medium", "large", "xlarge"] as const;
|
||||
const COAT_OPTIONS = ["", "smooth", "double", "wire", "curly", "long", "hairless"] as const;
|
||||
|
||||
export function BufferRulesSection() {
|
||||
const [rules, setRules] = useState<BufferRule[]>([]);
|
||||
const [services, setServices] = useState<Service[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [form, setForm] = useState<BufferRuleForm>(EMPTY_FORM);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [editBuffer, setEditBuffer] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
fetch("/api/buffer-rules").then(r => r.ok ? r.json() : []),
|
||||
fetch("/api/services?includeInactive=true").then(r => r.ok ? r.json() : []),
|
||||
]).then(([rulesData, servicesData]) => {
|
||||
setRules(rulesData as BufferRule[]);
|
||||
setServices(servicesData as Service[]);
|
||||
}).catch(() => setError("Failed to load")).finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
async function handleCreate(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
const mins = parseInt(form.bufferMinutes);
|
||||
if (!form.serviceId || isNaN(mins) || mins <= 0) {
|
||||
setFormError("Service and valid buffer minutes are required.");
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
setFormError(null);
|
||||
try {
|
||||
const body: Record<string, string | number> = {
|
||||
serviceId: form.serviceId,
|
||||
bufferMinutes: mins,
|
||||
};
|
||||
if (form.sizeCategory) body.sizeCategory = form.sizeCategory;
|
||||
if (form.coatType) body.coatType = form.coatType;
|
||||
const res = await fetch("/api/buffer-rules", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({})) as { error?: string };
|
||||
throw new Error(err.error ?? `HTTP ${res.status}`);
|
||||
}
|
||||
const newRule = await res.json() as BufferRule;
|
||||
setRules(prev => [...prev, newRule]);
|
||||
setShowForm(false);
|
||||
setForm(EMPTY_FORM);
|
||||
} catch (e: unknown) {
|
||||
setFormError(e instanceof Error ? e.message : "Failed to create rule");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(id: string) {
|
||||
setDeletingId(id);
|
||||
try {
|
||||
await fetch(`/api/buffer-rules/${id}`, { method: "DELETE" });
|
||||
setRules(prev => prev.filter(r => r.id !== id));
|
||||
} finally {
|
||||
setDeletingId(null);
|
||||
setConfirmDeleteId(null);
|
||||
}
|
||||
}
|
||||
|
||||
function startEdit(rule: BufferRule) {
|
||||
setEditingId(rule.id);
|
||||
setEditBuffer(String(rule.bufferMinutes));
|
||||
}
|
||||
|
||||
async function saveEdit(rule: BufferRule) {
|
||||
const mins = parseInt(editBuffer);
|
||||
if (isNaN(mins) || mins <= 0) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const res = await fetch(`/api/buffer-rules/${rule.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ bufferMinutes: mins }),
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const updated = await res.json() as BufferRule;
|
||||
setRules(prev => prev.map(r => r.id === updated.id ? updated : r));
|
||||
} catch {
|
||||
// silent fail
|
||||
} finally {
|
||||
setSaving(false);
|
||||
setEditingId(null);
|
||||
setEditBuffer("");
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 size={20} className="animate-spin text-stone-400" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="py-4 text-sm text-red-500">{error}</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-stone-800">Buffer Rules</h2>
|
||||
<p className="text-sm text-stone-500">Extra time rules per service / pet size / coat type</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { setShowForm(!showForm); setFormError(null); }}
|
||||
className="px-3 py-1.5 bg-(--color-primary) text-white text-sm rounded-lg hover:bg-(--color-primary-hover)"
|
||||
>
|
||||
{showForm ? "Cancel" : "+ Add Rule"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<form onSubmit={handleCreate} className="mb-6 p-4 bg-stone-50 rounded-xl border border-stone-200 space-y-3">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-stone-600 mb-1">Service *</label>
|
||||
<select
|
||||
value={form.serviceId}
|
||||
onChange={e => setForm(f => ({ ...f, serviceId: e.target.value }))}
|
||||
required
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
>
|
||||
<option value="">Select service…</option>
|
||||
{services.map(s => (
|
||||
<option key={s.id} value={s.id}>{s.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-stone-600 mb-1">Buffer (minutes) *</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
step="1"
|
||||
value={form.bufferMinutes}
|
||||
onChange={e => setForm(f => ({ ...f, bufferMinutes: e.target.value }))}
|
||||
required
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-stone-600 mb-1">Size Category</label>
|
||||
<select
|
||||
value={form.sizeCategory}
|
||||
onChange={e => setForm(f => ({ ...f, sizeCategory: e.target.value }))}
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
>
|
||||
<option value="">Any</option>
|
||||
{SIZE_OPTIONS.filter(s => s).map(s => (
|
||||
<option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-stone-600 mb-1">Coat Type</label>
|
||||
<select
|
||||
value={form.coatType}
|
||||
onChange={e => setForm(f => ({ ...f, coatType: e.target.value }))}
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
>
|
||||
<option value="">Any</option>
|
||||
{COAT_OPTIONS.filter(c => c).map(c => (
|
||||
<option key={c} value={c}>{c.charAt(0).toUpperCase() + c.slice(1)}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{formError && <p className="text-sm text-red-500">{formError}</p>}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="px-4 py-2 bg-(--color-primary) text-white text-sm rounded-lg hover:bg-(--color-primary-hover) disabled:opacity-60"
|
||||
>
|
||||
{saving ? "Saving…" : "Create Rule"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{rules.length === 0 && !showForm ? (
|
||||
<p className="text-sm text-stone-400 py-6 text-center">No buffer rules configured yet.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{rules.map(rule => (
|
||||
<div key={rule.id} className="flex items-center gap-3 p-3 bg-white rounded-xl border border-stone-200">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-stone-800 truncate">{rule.serviceName}</div>
|
||||
<div className="text-xs text-stone-500 flex gap-2 flex-wrap">
|
||||
{rule.sizeCategory && <span>Size: {rule.sizeCategory}</span>}
|
||||
{rule.coatType && <span>Coat: {rule.coatType}</span>}
|
||||
</div>
|
||||
</div>
|
||||
{editingId === rule.id ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
value={editBuffer}
|
||||
onChange={e => setEditBuffer(e.target.value)}
|
||||
className="w-20 border border-stone-200 rounded px-2 py-1 text-sm"
|
||||
/>
|
||||
<span className="text-xs text-stone-500">min</span>
|
||||
<button onClick={() => saveEdit(rule)} disabled={saving} className="text-xs text-green-600 font-medium">Save</button>
|
||||
<button onClick={() => setEditingId(null)} className="text-xs text-stone-500">Cancel</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<span className="text-sm font-medium text-stone-700">{rule.bufferMinutes} min</span>
|
||||
<button onClick={() => startEdit(rule)} className="text-xs text-stone-500 hover:text-stone-700 px-2">Edit</button>
|
||||
</>
|
||||
)}
|
||||
{confirmDeleteId === rule.id ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-red-500">Delete?</span>
|
||||
<button onClick={() => handleDelete(rule.id)} disabled={deletingId === rule.id} className="text-xs text-red-600 font-medium">Confirm</button>
|
||||
<button onClick={() => setConfirmDeleteId(null)} className="text-xs text-stone-500">Cancel</button>
|
||||
</div>
|
||||
) : (
|
||||
<button onClick={() => setConfirmDeleteId(rule.id)} className="text-xs text-red-400 hover:text-red-600">Delete</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -8,19 +8,6 @@
|
||||
--color-accent-dark: color-mix(in srgb, var(--color-accent) 78%, #000);
|
||||
--color-accent-light: color-mix(in srgb, var(--color-accent) 18%, #fff);
|
||||
--color-accent-lighter: color-mix(in srgb, var(--color-accent) 9%, #fff);
|
||||
|
||||
/* Semantic / booking page tokens */
|
||||
--color-error: #dc2626;
|
||||
--color-error-dark: #b91c1c;
|
||||
--color-error-bg: #fef2f2;
|
||||
--color-cancelled: #ea580c;
|
||||
--color-cancelled-dark: #c2410c;
|
||||
--color-cancelled-bg: #fff7ed;
|
||||
--color-success: #16a34a;
|
||||
--color-success-dark: #15803d;
|
||||
--color-success-bg: #f0fdf4;
|
||||
--color-text-secondary: #4b5563;
|
||||
--color-surface: #fff;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
// Analytics event names — single source of truth
|
||||
export const ANALYTICS_EVENTS = {
|
||||
BOOKING_STEP_SERVICE: "booking_step_service",
|
||||
BOOKING_STEP_TIME: "booking_step_time",
|
||||
BOOKING_STEP_CONTACT: "booking_step_contact",
|
||||
BOOKING_STEP_SUBMIT: "booking_step_submit",
|
||||
BOOKING_CONFIRMED: "booking_confirmed",
|
||||
BOOKING_ERROR: "booking_error",
|
||||
} as const;
|
||||
|
||||
export type AnalyticsEventName = (typeof ANALYTICS_EVENTS)[keyof typeof ANALYTICS_EVENTS];
|
||||
|
||||
export type AnalyticsPayload = {
|
||||
step?: string;
|
||||
flow?: "public" | "portal";
|
||||
[key: string]: string | undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
* Fires a lightweight analytics event via window.dispatchEvent.
|
||||
* No-op safe: failures are swallowed so analytics never breaks the booking flow.
|
||||
* Designed for later Plausible/GTM integration.
|
||||
*/
|
||||
export function fireAnalyticsEvent(
|
||||
eventName: AnalyticsEventName,
|
||||
payload: AnalyticsPayload = {}
|
||||
): void {
|
||||
try {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent(eventName, {
|
||||
detail: {
|
||||
...payload,
|
||||
timestamp: new Date().toISOString(),
|
||||
},
|
||||
})
|
||||
);
|
||||
} catch {
|
||||
// no-op: analytics must never break the booking flow
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { createAuthClient } from "better-auth/react";
|
||||
|
||||
export const authClient = createAuthClient({
|
||||
baseURL: import.meta.env.VITE_API_URL || (typeof window !== "undefined" ? window.location.origin : ""),
|
||||
baseURL: import.meta.env.VITE_API_URL ?? "",
|
||||
});
|
||||
|
||||
export const { signIn, signOut, useSession, changePassword } = authClient;
|
||||
@@ -1,7 +0,0 @@
|
||||
// Business contact information — update values to reflect actual business details.
|
||||
// Used on error/cancellation pages to help customers reach the business.
|
||||
export const BUSINESS_CONTACT_INFO = {
|
||||
phone: "(555) 000-1234",
|
||||
email: "hello@groombook.example.com",
|
||||
address: "123 Main St, Anytown, USA",
|
||||
} as const;
|
||||
+3
-37
@@ -2,41 +2,9 @@ import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { App } from "./App.js";
|
||||
import { ErrorBoundary } from "./ErrorBoundary.js";
|
||||
import { installDevFetchInterceptor } from "./lib/devFetch.js";
|
||||
import "./index.css";
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
// Global error capture (GRO-2094).
|
||||
//
|
||||
// Symptom: React root stays empty at /login — bundle parses, no console
|
||||
// errors, no error boundary fallback. Some failure is being swallowed
|
||||
// before it reaches React's commit phase. These listeners make sure any
|
||||
// thrown error or unhandled promise rejection is at least visible in
|
||||
// the console (and in the Playwright network/console log) instead of
|
||||
// vanishing into the void.
|
||||
// --------------------------------------------------------------------
|
||||
function reportGlobalError(kind: string, payload: unknown): void {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`[${kind}]`, payload);
|
||||
}
|
||||
|
||||
window.addEventListener("error", (event) => {
|
||||
reportGlobalError("window.error", {
|
||||
message: event.message,
|
||||
filename: event.filename,
|
||||
lineno: event.lineno,
|
||||
colno: event.colno,
|
||||
error: event.error,
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener("unhandledrejection", (event) => {
|
||||
reportGlobalError("unhandledrejection", {
|
||||
reason: event.reason,
|
||||
});
|
||||
});
|
||||
|
||||
installDevFetchInterceptor();
|
||||
|
||||
const root = document.getElementById("root");
|
||||
@@ -44,10 +12,8 @@ if (!root) throw new Error("Root element not found");
|
||||
|
||||
createRoot(root).render(
|
||||
<StrictMode>
|
||||
<ErrorBoundary>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</ErrorBoundary>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>
|
||||
);
|
||||
|
||||
+7
-62
@@ -1,7 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import type { Service } from "@groombook/types";
|
||||
import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics";
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -14,8 +13,6 @@ interface BookingBody {
|
||||
petName: string;
|
||||
petSpecies: string;
|
||||
petBreed: string;
|
||||
petSizeCategory: string;
|
||||
petCoatType: string;
|
||||
notes: string;
|
||||
}
|
||||
|
||||
@@ -126,8 +123,6 @@ export function BookPage() {
|
||||
petName: "",
|
||||
petSpecies: "",
|
||||
petBreed: "",
|
||||
petSizeCategory: "",
|
||||
petCoatType: "",
|
||||
notes: "",
|
||||
});
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
@@ -141,9 +136,7 @@ export function BookPage() {
|
||||
const petName = searchParams.get("petName");
|
||||
const petSpecies = searchParams.get("petSpecies");
|
||||
const petBreed = searchParams.get("petBreed");
|
||||
const petSizeCategory = searchParams.get("petSizeCategory");
|
||||
const petCoatType = searchParams.get("petCoatType");
|
||||
if (clientName || clientEmail || clientPhone || petName || petSpecies || petBreed || petSizeCategory || petCoatType) {
|
||||
if (clientName || clientEmail || clientPhone || petName || petSpecies || petBreed) {
|
||||
setForm((f) => ({
|
||||
...f,
|
||||
...(clientName && { clientName }),
|
||||
@@ -152,8 +145,6 @@ export function BookPage() {
|
||||
...(petName && { petName }),
|
||||
...(petSpecies && { petSpecies }),
|
||||
...(petBreed && { petBreed }),
|
||||
...(petSizeCategory && { petSizeCategory }),
|
||||
...(petCoatType && { petCoatType }),
|
||||
}));
|
||||
}
|
||||
}, [searchParams]);
|
||||
@@ -177,31 +168,25 @@ export function BookPage() {
|
||||
if (!selectedService || !date) return;
|
||||
setSlotsLoading(true);
|
||||
setSelectedSlot(null);
|
||||
const params = new URLSearchParams({
|
||||
serviceId: selectedService.id,
|
||||
date,
|
||||
});
|
||||
if (form.petSizeCategory) params.set("petSizeCategory", form.petSizeCategory);
|
||||
if (form.petCoatType) params.set("petCoatType", form.petCoatType);
|
||||
fetch(`/api/book/availability?${params.toString()}`)
|
||||
fetch(
|
||||
`/api/book/availability?serviceId=${encodeURIComponent(selectedService.id)}&date=${encodeURIComponent(date)}`
|
||||
)
|
||||
.then((r) => r.json() as Promise<string[]>)
|
||||
.then(setSlots)
|
||||
.catch(() => setSlots([]))
|
||||
.finally(() => setSlotsLoading(false));
|
||||
}, [selectedService, date, form.petSizeCategory, form.petCoatType]);
|
||||
}, [selectedService, date]);
|
||||
|
||||
function goToStep2(svc: Service) {
|
||||
setSelectedService(svc);
|
||||
setForm((f) => ({ ...f, serviceId: svc.id }));
|
||||
setStep(2);
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, { step: "service", flow: "public" });
|
||||
}
|
||||
|
||||
function goToStep3() {
|
||||
if (!selectedSlot) return;
|
||||
setForm((f) => ({ ...f, startTime: selectedSlot }));
|
||||
setStep(3);
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_TIME, { step: "time", flow: "public" });
|
||||
}
|
||||
|
||||
function goToStep4() {
|
||||
@@ -211,7 +196,6 @@ export function BookPage() {
|
||||
}
|
||||
setFormError(null);
|
||||
setStep(4);
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_CONTACT, { step: "contact", flow: "public" });
|
||||
}
|
||||
|
||||
async function submitBooking() {
|
||||
@@ -230,8 +214,6 @@ export function BookPage() {
|
||||
petName: form.petName,
|
||||
petSpecies: form.petSpecies,
|
||||
petBreed: form.petBreed || undefined,
|
||||
petSizeCategory: form.petSizeCategory || undefined,
|
||||
petCoatType: form.petCoatType || undefined,
|
||||
notes: form.notes || undefined,
|
||||
}),
|
||||
});
|
||||
@@ -240,7 +222,6 @@ export function BookPage() {
|
||||
throw new Error(body.error ?? `HTTP ${res.status}`);
|
||||
}
|
||||
const data = (await res.json()) as BookingResult;
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT, { step: "submit", flow: "public" });
|
||||
setResult(data);
|
||||
setStep(5);
|
||||
} catch (e: unknown) {
|
||||
@@ -513,36 +494,6 @@ export function BookPage() {
|
||||
placeholder="Golden Retriever"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={label}>Pet size</label>
|
||||
<select
|
||||
style={input}
|
||||
value={form.petSizeCategory}
|
||||
onChange={(e) => setForm((f) => ({ ...f, petSizeCategory: e.target.value }))}
|
||||
>
|
||||
<option value="">Select size…</option>
|
||||
<option value="small">Small (under 15 lbs)</option>
|
||||
<option value="medium">Medium (15–40 lbs)</option>
|
||||
<option value="large">Large (40–80 lbs)</option>
|
||||
<option value="xlarge">X-Large (over 80 lbs)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style={label}>Coat type</label>
|
||||
<select
|
||||
style={input}
|
||||
value={form.petCoatType}
|
||||
onChange={(e) => setForm((f) => ({ ...f, petCoatType: e.target.value }))}
|
||||
>
|
||||
<option value="">Select coat…</option>
|
||||
<option value="smooth">Smooth</option>
|
||||
<option value="double">Double</option>
|
||||
<option value="curly">Curly</option>
|
||||
<option value="wire">Wire</option>
|
||||
<option value="long">Long</option>
|
||||
<option value="hairless">Hairless</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style={label}>Notes for groomer</label>
|
||||
<textarea
|
||||
@@ -577,7 +528,7 @@ export function BookPage() {
|
||||
<div>
|
||||
<div style={{ color: "#9ca3af", fontSize: 12, fontWeight: 600, textTransform: "uppercase" }}>Service</div>
|
||||
<div style={{ fontWeight: 600 }}>{selectedService.name}</div>
|
||||
<div style={{ color: "#6b7280" }}>{fmtPrice(selectedService.basePriceCents)} · {fmtDuration(selectedService.durationMinutes)} appointment</div>
|
||||
<div style={{ color: "#6b7280" }}>{fmtPrice(selectedService.basePriceCents)} · {fmtDuration(selectedService.durationMinutes)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ color: "#9ca3af", fontSize: 12, fontWeight: 600, textTransform: "uppercase" }}>Date & Time</div>
|
||||
@@ -594,11 +545,6 @@ export function BookPage() {
|
||||
<div style={{ color: "#9ca3af", fontSize: 12, fontWeight: 600, textTransform: "uppercase" }}>Pet</div>
|
||||
<div style={{ fontWeight: 600 }}>{form.petName}</div>
|
||||
<div style={{ color: "#6b7280", textTransform: "capitalize" }}>{form.petSpecies}{form.petBreed ? ` · ${form.petBreed}` : ""}</div>
|
||||
{(form.petSizeCategory || form.petCoatType) && (
|
||||
<div style={{ color: "#6b7280", fontSize: 12, marginTop: 2 }}>
|
||||
{form.petSizeCategory ? `${form.petSizeCategory} · ` : ""}{form.petCoatType ? form.petCoatType : ""}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{form.notes && (
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
@@ -653,8 +599,7 @@ export function BookPage() {
|
||||
setResult(null);
|
||||
setForm({
|
||||
serviceId: "", startTime: "", clientName: "", clientEmail: "",
|
||||
clientPhone: "", petName: "", petSpecies: "", petBreed: "",
|
||||
petSizeCategory: "", petCoatType: "", notes: "",
|
||||
clientPhone: "", petName: "", petSpecies: "", petBreed: "", notes: "",
|
||||
});
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -1,10 +1,3 @@
|
||||
const STRINGS = {
|
||||
heading: "Appointment Cancelled",
|
||||
body: "Your appointment has been cancelled. If this was a mistake or you'd like to rebook, please contact us.",
|
||||
bookAgain: "Book again",
|
||||
backToPortal: "Back to Portal",
|
||||
} as const;
|
||||
|
||||
export function BookingCancelledPage() {
|
||||
return (
|
||||
<div
|
||||
@@ -14,12 +7,12 @@ export function BookingCancelledPage() {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontFamily: "system-ui, sans-serif",
|
||||
background: "var(--color-cancelled-bg)",
|
||||
background: "#fff7ed",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: "var(--color-surface)",
|
||||
background: "#fff",
|
||||
borderRadius: 12,
|
||||
padding: "2.5rem 3rem",
|
||||
boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
|
||||
@@ -28,45 +21,28 @@ export function BookingCancelledPage() {
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 56, marginBottom: "0.5rem" }}>✗</div>
|
||||
<h1 style={{ color: "var(--color-cancelled-dark)", fontSize: 24, margin: "0 0 0.5rem" }}>
|
||||
{STRINGS.heading}
|
||||
<h1 style={{ color: "#c2410c", fontSize: 24, margin: "0 0 0.5rem" }}>
|
||||
Appointment Cancelled
|
||||
</h1>
|
||||
<p style={{ color: "var(--color-text-secondary)", margin: "0 0 1.5rem" }}>
|
||||
{STRINGS.body}
|
||||
<p style={{ color: "#4b5563", margin: "0 0 1.5rem" }}>
|
||||
Your appointment has been cancelled. If this was a mistake or you'd
|
||||
like to rebook, please contact us.
|
||||
</p>
|
||||
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "center" }}>
|
||||
<a
|
||||
href="/admin/book"
|
||||
style={{
|
||||
display: "inline-block",
|
||||
padding: "0.6rem 1.5rem",
|
||||
background: "var(--color-primary)",
|
||||
color: "#fff",
|
||||
borderRadius: 6,
|
||||
textDecoration: "none",
|
||||
fontWeight: 600,
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{STRINGS.bookAgain}
|
||||
</a>
|
||||
<a
|
||||
href="/"
|
||||
style={{
|
||||
display: "inline-block",
|
||||
padding: "0.6rem 1.5rem",
|
||||
background: "var(--color-cancelled)",
|
||||
color: "#fff",
|
||||
borderRadius: 6,
|
||||
textDecoration: "none",
|
||||
fontWeight: 600,
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{STRINGS.backToPortal}
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
href="/"
|
||||
style={{
|
||||
display: "inline-block",
|
||||
padding: "0.6rem 1.5rem",
|
||||
background: "#ea580c",
|
||||
color: "#fff",
|
||||
borderRadius: 6,
|
||||
textDecoration: "none",
|
||||
fontWeight: 600,
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
Back to Portal
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,4 @@
|
||||
import { useEffect } from "react";
|
||||
import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics";
|
||||
|
||||
export function BookingConfirmedPage() {
|
||||
useEffect(() => {
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_CONFIRMED, { step: "confirmed", flow: "public" });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
|
||||
+22
-62
@@ -1,20 +1,4 @@
|
||||
import { useEffect } from "react";
|
||||
import { BUSINESS_CONTACT_INFO } from "../lib/contact";
|
||||
import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics";
|
||||
|
||||
const STRINGS = {
|
||||
heading: "Link Invalid or Expired",
|
||||
body: "This confirmation link is invalid, has already been used, or your appointment has already passed. Please contact us if you need help.",
|
||||
newBooking: "Start a new booking",
|
||||
backToPortal: "Back to Portal",
|
||||
contactLabel: "Need help?",
|
||||
} as const;
|
||||
|
||||
export function BookingErrorPage() {
|
||||
useEffect(() => {
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_ERROR, { step: "error", flow: "public" });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@@ -23,12 +7,12 @@ export function BookingErrorPage() {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontFamily: "system-ui, sans-serif",
|
||||
background: "var(--color-error-bg)",
|
||||
background: "#fef2f2",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: "var(--color-surface)",
|
||||
background: "#fff",
|
||||
borderRadius: 12,
|
||||
padding: "2.5rem 3rem",
|
||||
boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
|
||||
@@ -37,52 +21,28 @@ export function BookingErrorPage() {
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 56, marginBottom: "0.5rem" }}>⚠️</div>
|
||||
<h1 style={{ color: "var(--color-error-dark)", fontSize: 24, margin: "0 0 0.5rem" }}>
|
||||
{STRINGS.heading}
|
||||
<h1 style={{ color: "#b91c1c", fontSize: 24, margin: "0 0 0.5rem" }}>
|
||||
Link Invalid or Expired
|
||||
</h1>
|
||||
<p style={{ color: "var(--color-text-secondary)", margin: "0 0 1.5rem" }}>
|
||||
{STRINGS.body}
|
||||
<p style={{ color: "#4b5563", margin: "0 0 1.5rem" }}>
|
||||
This confirmation link is invalid, has already been used, or your
|
||||
appointment has already passed. Please contact us if you need help.
|
||||
</p>
|
||||
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "center" }}>
|
||||
<a
|
||||
href="/admin/book"
|
||||
style={{
|
||||
display: "inline-block",
|
||||
padding: "0.6rem 1.5rem",
|
||||
background: "var(--color-primary)",
|
||||
color: "#fff",
|
||||
borderRadius: 6,
|
||||
textDecoration: "none",
|
||||
fontWeight: 600,
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{STRINGS.newBooking}
|
||||
</a>
|
||||
<a
|
||||
href="/"
|
||||
style={{
|
||||
display: "inline-block",
|
||||
padding: "0.6rem 1.5rem",
|
||||
background: "var(--color-error)",
|
||||
color: "#fff",
|
||||
borderRadius: 6,
|
||||
textDecoration: "none",
|
||||
fontWeight: 600,
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{STRINGS.backToPortal}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "1.5rem", paddingTop: "1rem", borderTop: "1px solid #e5e7eb", fontSize: 13, color: "var(--color-text-secondary)" }}>
|
||||
<p style={{ margin: "0 0 0.25rem", fontWeight: 600 }}>{STRINGS.contactLabel}</p>
|
||||
<p style={{ margin: 0 }}>
|
||||
{BUSINESS_CONTACT_INFO.phone} · {BUSINESS_CONTACT_INFO.email}
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href="/"
|
||||
style={{
|
||||
display: "inline-block",
|
||||
padding: "0.6rem 1.5rem",
|
||||
background: "#dc2626",
|
||||
color: "#fff",
|
||||
borderRadius: 6,
|
||||
textDecoration: "none",
|
||||
fontWeight: 600,
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
Back to Portal
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -25,8 +25,6 @@ interface PetForm {
|
||||
cutStyle: string;
|
||||
shampooPreference: string;
|
||||
specialCareNotes: string;
|
||||
coatType: string;
|
||||
sizeCategory: string;
|
||||
}
|
||||
|
||||
interface VisitLogForm {
|
||||
@@ -40,7 +38,6 @@ const EMPTY_CLIENT: ClientForm = { name: "", email: "", phone: "", address: "",
|
||||
const EMPTY_PET: PetForm = {
|
||||
name: "", species: "Dog", breed: "", weightStr: "", dob: "",
|
||||
healthAlerts: "", groomingNotes: "", cutStyle: "", shampooPreference: "", specialCareNotes: "",
|
||||
coatType: "", sizeCategory: "",
|
||||
};
|
||||
const EMPTY_VISIT_LOG: VisitLogForm = { cutStyle: "", productsUsed: "", notes: "", groomedAt: "" };
|
||||
|
||||
@@ -212,8 +209,6 @@ export function ClientsPage() {
|
||||
cutStyle: p.cutStyle ?? "",
|
||||
shampooPreference: p.shampooPreference ?? "",
|
||||
specialCareNotes: p.specialCareNotes ?? "",
|
||||
coatType: p.coatType ?? "",
|
||||
sizeCategory: p.petSizeCategory ?? "",
|
||||
});
|
||||
setPetFormError(null);
|
||||
setShowPetForm(true);
|
||||
@@ -320,8 +315,6 @@ export function ClientsPage() {
|
||||
cutStyle: petForm.cutStyle || undefined,
|
||||
shampooPreference: petForm.shampooPreference || undefined,
|
||||
specialCareNotes: petForm.specialCareNotes || undefined,
|
||||
coatType: petForm.coatType || undefined,
|
||||
petSizeCategory: petForm.sizeCategory || undefined,
|
||||
};
|
||||
const res = editingPet
|
||||
? await fetch(`/api/pets/${editingPet.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) })
|
||||
@@ -697,34 +690,6 @@ export function ClientsPage() {
|
||||
<Field label="Breed (optional)">
|
||||
<input value={petForm.breed} onChange={(e) => setPetForm((f) => ({ ...f, breed: e.target.value }))} style={inputStyle} />
|
||||
</Field>
|
||||
<Field label="Size Category (optional)">
|
||||
<select
|
||||
value={petForm.sizeCategory}
|
||||
onChange={(e) => setPetForm((f) => ({ ...f, sizeCategory: e.target.value }))}
|
||||
style={inputStyle}
|
||||
>
|
||||
<option value="">Not set</option>
|
||||
<option value="small">Small</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="large">Large</option>
|
||||
<option value="xlarge">X-Large</option>
|
||||
</select>
|
||||
</Field>
|
||||
<Field label="Coat Type (optional)">
|
||||
<select
|
||||
value={petForm.coatType}
|
||||
onChange={(e) => setPetForm((f) => ({ ...f, coatType: e.target.value }))}
|
||||
style={inputStyle}
|
||||
>
|
||||
<option value="">Not set</option>
|
||||
<option value="smooth">Smooth</option>
|
||||
<option value="double">Double</option>
|
||||
<option value="curly">Curly</option>
|
||||
<option value="wire">Wire</option>
|
||||
<option value="long">Long</option>
|
||||
<option value="hairless">Hairless</option>
|
||||
</select>
|
||||
</Field>
|
||||
<Field label="Weight kg (optional)">
|
||||
<input type="number" step="0.1" min="0" value={petForm.weightStr} onChange={(e) => setPetForm((f) => ({ ...f, weightStr: e.target.value }))} style={inputStyle} />
|
||||
</Field>
|
||||
|
||||
+1
-19
@@ -6,7 +6,6 @@ interface ServiceForm {
|
||||
description: string;
|
||||
priceStr: string;
|
||||
durationMinutes: number;
|
||||
defaultBufferMinutes: number;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
@@ -15,7 +14,6 @@ const EMPTY_FORM: ServiceForm = {
|
||||
description: "",
|
||||
priceStr: "",
|
||||
durationMinutes: 60,
|
||||
defaultBufferMinutes: 0,
|
||||
active: true,
|
||||
};
|
||||
|
||||
@@ -57,7 +55,6 @@ export function ServicesPage() {
|
||||
description: s.description ?? "",
|
||||
priceStr: (s.basePriceCents / 100).toFixed(2),
|
||||
durationMinutes: s.durationMinutes,
|
||||
defaultBufferMinutes: s.defaultBufferMinutes ?? 0,
|
||||
active: s.active,
|
||||
});
|
||||
setFormError(null);
|
||||
@@ -79,7 +76,6 @@ export function ServicesPage() {
|
||||
description: form.description || undefined,
|
||||
basePriceCents: Math.round(price * 100),
|
||||
durationMinutes: form.durationMinutes,
|
||||
defaultBufferMinutes: form.defaultBufferMinutes,
|
||||
active: form.active,
|
||||
};
|
||||
const res = editing
|
||||
@@ -142,7 +138,7 @@ export function ServicesPage() {
|
||||
<table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
|
||||
<thead>
|
||||
<tr style={{ background: "#f8fafc" }}>
|
||||
{["Name", "Description", "Price", "Duration", "Default Buffer", "Status", ""].map((h) => (
|
||||
{["Name", "Description", "Price", "Duration", "Status", ""].map((h) => (
|
||||
<th key={h} style={{ textAlign: "left", padding: "0.55rem 0.75rem", borderBottom: "1px solid #e5e7eb", fontSize: 11, fontWeight: 600, color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.04em" }}>
|
||||
{h}
|
||||
</th>
|
||||
@@ -156,7 +152,6 @@ export function ServicesPage() {
|
||||
<td style={tdStyle}>{s.description ?? "—"}</td>
|
||||
<td style={tdStyle}>${(s.basePriceCents / 100).toFixed(2)}</td>
|
||||
<td style={tdStyle}>{s.durationMinutes} min</td>
|
||||
<td style={tdStyle}>{(s as Service & { defaultBufferMinutes?: number }).defaultBufferMinutes ?? 0} min</td>
|
||||
<td style={tdStyle}>
|
||||
<button
|
||||
onClick={() => toggleActive(s)}
|
||||
@@ -245,19 +240,6 @@ export function ServicesPage() {
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Default Buffer (minutes)">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
value={form.defaultBufferMinutes}
|
||||
onChange={(e) => setForm((f) => ({ ...f, defaultBufferMinutes: parseInt(e.target.value) || 0 }))}
|
||||
style={inputStyle}
|
||||
/>
|
||||
<p style={{ fontSize: 12, color: "#9ca3af", marginTop: "0.2rem" }}>
|
||||
Default buffer time applied when no specific rule matches
|
||||
</p>
|
||||
</Field>
|
||||
<Field label="Status">
|
||||
<label style={{ display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer" }}>
|
||||
<input
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useBranding } from "../BrandingContext.js";
|
||||
import { BufferRulesSection } from "../components/BufferRules.js";
|
||||
|
||||
interface AuthProviderConfig {
|
||||
id: number;
|
||||
@@ -534,10 +533,6 @@ issuerUrl: authForm.issuerUrl,
|
||||
{saving ? "Saving..." : "Save Changes"}
|
||||
</button>
|
||||
|
||||
{/* Buffer Rules Section */}
|
||||
<hr style={{ margin: "2rem 0", border: "none", borderTop: "1px solid #e5e7eb" }} />
|
||||
<BufferRulesSection />
|
||||
|
||||
{/* Auth Provider Section — super users only */}
|
||||
{currentUser?.isSuperUser && (
|
||||
<>
|
||||
|
||||
@@ -43,15 +43,6 @@ export function CustomerPortal() {
|
||||
// Track whether an impersonation session fetch from URL param is in-flight
|
||||
// Dashboard will not redirect while this is true, allowing the session to load
|
||||
const [isImpersonating, setIsImpersonating] = useState(false);
|
||||
// Portal session ID for real SSO customers (GRO-1867). Populated by the
|
||||
// Better Auth → /api/portal/session-from-auth bridge below. Carries the
|
||||
// X-Impersonation-Session-Id header on subsequent portal API calls without
|
||||
// triggering the impersonation banner (the customer is themselves).
|
||||
const [portalSessionId, setPortalSessionId] = useState<string | null>(null);
|
||||
// User-facing message when the SSO bridge cannot resolve a client record
|
||||
// (e.g. authenticated user with no matching client row). Rendered in place
|
||||
// of the portal chrome instead of bouncing back to /login.
|
||||
const [authError, setAuthError] = useState<string | null>(null);
|
||||
const { branding } = useBranding();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
|
||||
@@ -107,64 +98,10 @@ export function CustomerPortal() {
|
||||
}
|
||||
})
|
||||
.finally(() => setInitComplete(true));
|
||||
return;
|
||||
}
|
||||
|
||||
if (devUser && devUser.type === "staff") {
|
||||
// Staff dev user — fall through; App.tsx redirects to /admin.
|
||||
} else {
|
||||
// No valid session: staff dev users and unauthenticated users fall through here
|
||||
setInitComplete(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Real SSO customer (GRO-1867): bridge a Better Auth session into a portal
|
||||
// session via POST /api/portal/session-from-auth. The returned session ID
|
||||
// is used in the X-Impersonation-Session-Id header for portal API calls.
|
||||
(async () => {
|
||||
try {
|
||||
const sessionResp = await fetch("/api/auth/get-session", { credentials: "include" });
|
||||
if (!sessionResp.ok) {
|
||||
setInitComplete(true);
|
||||
return;
|
||||
}
|
||||
let sessionData: { user?: { email?: string; role?: string | null } } | null = null;
|
||||
try {
|
||||
sessionData = (await sessionResp.json()) as { user?: { email?: string; role?: string | null } } | null;
|
||||
} catch {
|
||||
// Better Auth returns an empty body when there is no session
|
||||
}
|
||||
if (!sessionData || !sessionData.user) {
|
||||
setInitComplete(true);
|
||||
return;
|
||||
}
|
||||
// Staff are routed to /admin by App.tsx; don't run the customer bridge.
|
||||
if (sessionData.user.role === "staff") {
|
||||
setInitComplete(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const bridgeResp = await fetch("/api/portal/session-from-auth", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (bridgeResp.ok) {
|
||||
const data = await bridgeResp.json() as { sessionId: string; clientId: string; clientName: string };
|
||||
setPortalSessionId(data.sessionId);
|
||||
setClientName(data.clientName);
|
||||
} else if (bridgeResp.status === 404) {
|
||||
// Authenticated but no matching client row — show a friendly message
|
||||
// instead of bouncing back to /login (which would loop indefinitely).
|
||||
setAuthError(
|
||||
"Your account is not linked to a customer record. Please contact your groomer to set up portal access."
|
||||
);
|
||||
}
|
||||
// 401/other: fall through; App.tsx render guard will redirect to /login.
|
||||
} catch {
|
||||
// Network error — fall through; the render guard will redirect to /login.
|
||||
} finally {
|
||||
setInitComplete(true);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const handleEnd = useCallback(async () => {
|
||||
@@ -220,7 +157,7 @@ export function CustomerPortal() {
|
||||
const isReadOnly = session?.status === "active";
|
||||
|
||||
const renderSection = () => {
|
||||
const sessionId = session?.id ?? portalSessionId;
|
||||
const sessionId = session?.id ?? null;
|
||||
switch (activeSection) {
|
||||
case "dashboard":
|
||||
return <Dashboard onNavigate={handleNavClick} readOnly={!!isReadOnly} sessionId={sessionId} clientName={clientName} onReschedule={handleReschedule} isImpersonating={isImpersonating} />;
|
||||
@@ -241,63 +178,12 @@ export function CustomerPortal() {
|
||||
|
||||
const avatarInitials = (clientName.split(" ")[0] || "G").charAt(0).toUpperCase();
|
||||
|
||||
// Show a loading state while the SSO bridge is in progress. The portal chrome
|
||||
// and its sections (e.g. Dashboard) assume a session is established and run
|
||||
// their own auth guards — rendering them before the bridge resolves triggers
|
||||
// a redirect to /login from `Dashboard.tsx`'s `!sessionId` check, breaking the
|
||||
// post-sign-in flow. Once `initComplete` is true we know whether a session was
|
||||
// established and can render the correct branch. See GRO-2099.
|
||||
if (!initComplete) {
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen flex items-center justify-center bg-[#faf8f5]"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
<div className="text-stone-500 text-sm">Loading…</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// After init completes, redirect unauthenticated users to /login and staff to /admin.
|
||||
// The portal chrome must NEVER be visible to users without a valid client session.
|
||||
// For client dev users, we stay on the portal even if session is null — the dev-session
|
||||
// response may not have id set immediately, or there may be timing issues with the
|
||||
// session state. Dev users are verified via localStorage and the dev-session flow.
|
||||
// SSO customers are recognised by portalSessionId (set by the Better Auth bridge).
|
||||
if (!session && !portalSessionId) {
|
||||
if (authError) {
|
||||
// GRO-1867: graceful 404 fallback — authenticated user has no client row.
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen flex items-center justify-center bg-[#faf8f5] font-sans px-6"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
>
|
||||
<div className="max-w-md w-full bg-white rounded-xl shadow-sm border border-stone-200 p-8 text-center">
|
||||
<div className="w-12 h-12 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center mx-auto mb-4">
|
||||
<Shield size={22} />
|
||||
</div>
|
||||
<h1 className="text-lg font-semibold text-stone-800 mb-2">Portal access not configured</h1>
|
||||
<p className="text-sm text-stone-600 mb-6">{authError}</p>
|
||||
<button
|
||||
onClick={async () => {
|
||||
try {
|
||||
await fetch("/api/auth/sign-out", { method: "POST", credentials: "include" });
|
||||
} catch {
|
||||
// Best-effort sign-out; redirect to /login regardless.
|
||||
}
|
||||
window.location.href = "/login";
|
||||
}}
|
||||
className="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-stone-700 bg-stone-100 hover:bg-stone-200 transition-colors"
|
||||
>
|
||||
<LogOut size={14} />
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (initComplete && !session) {
|
||||
const devUser = getDevUser();
|
||||
if (devUser && devUser.type === "staff") {
|
||||
return <Navigate to="/admin" replace />;
|
||||
@@ -344,7 +230,7 @@ export function CustomerPortal() {
|
||||
<RescheduleFlow
|
||||
appointment={rescheduleAppointment}
|
||||
onClose={() => { setShowReschedule(false); setRescheduleAppointment(null); }}
|
||||
sessionId={session?.id ?? portalSessionId}
|
||||
sessionId={session?.id ?? null}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Calendar, Clock, Plus, ChevronRight, ChevronDown, Loader2 } from 'lucide-react';
|
||||
import { ANALYTICS_EVENTS, fireAnalyticsEvent } from '../../lib/analytics';
|
||||
|
||||
export interface Appointment {
|
||||
id: string;
|
||||
@@ -83,34 +82,14 @@ export function isUpcoming(appt: Appointment): boolean {
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
confirmed: 'bg-green-100 text-green-700',
|
||||
pending: 'bg-amber-100 text-amber-600',
|
||||
waitlisted: 'bg-blue-100 text-blue-600',
|
||||
pending: 'bg-amber-100 text-amber-700',
|
||||
waitlisted: 'bg-blue-100 text-blue-700',
|
||||
completed: 'bg-stone-100 text-stone-600',
|
||||
cancelled: 'bg-red-100 text-red-600',
|
||||
'no-show': 'bg-yellow-100 text-yellow-700',
|
||||
scheduled: 'bg-blue-100 text-blue-600',
|
||||
scheduled: 'bg-blue-100 text-blue-700',
|
||||
};
|
||||
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
confirmed: 'Confirmed',
|
||||
pending: 'Pending',
|
||||
waitlisted: 'Waitlisted',
|
||||
completed: 'Completed',
|
||||
cancelled: 'Cancelled',
|
||||
'no-show': 'No-show',
|
||||
scheduled: 'Scheduled',
|
||||
};
|
||||
|
||||
export function StatusBadge({ status }: { status: string }) {
|
||||
const label = STATUS_LABELS[status] ?? status;
|
||||
const colorClass = STATUS_COLORS[status] ?? 'bg-stone-100 text-stone-600';
|
||||
return (
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const CONFIRMATION_STATUS_COLORS: Record<string, string> = {
|
||||
confirmed: 'bg-green-100 text-green-700',
|
||||
pending: 'bg-amber-100 text-amber-700',
|
||||
@@ -318,7 +297,13 @@ function AppointmentCard({
|
||||
<span>with {appt.groomerName || 'First Available'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<StatusBadge status={appt.status} />
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
STATUS_COLORS[appt.status] || ''
|
||||
}`}
|
||||
>
|
||||
{appt.status}
|
||||
</span>
|
||||
{expanded ? (
|
||||
<ChevronDown size={16} className="text-stone-400" />
|
||||
) : (
|
||||
@@ -588,26 +573,16 @@ export function RescheduleFlow({
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [slotsLoading, setSlotsLoading] = useState(false);
|
||||
const [slotsError, setSlotsError] = useState<string | null>(null);
|
||||
const [availableTimes, setAvailableTimes] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedDate || !sessionId) {
|
||||
setAvailableTimes([]);
|
||||
return;
|
||||
}
|
||||
const params = new URLSearchParams({ date: selectedDate });
|
||||
setSlotsLoading(true);
|
||||
setSlotsError(null);
|
||||
fetch(`/api/book/availability?${params.toString()}`, {
|
||||
headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
|
||||
})
|
||||
.then((r) => r.json() as Promise<string[]>)
|
||||
.then(setAvailableTimes)
|
||||
.catch(() => setSlotsError('Failed to load time slots'))
|
||||
.finally(() => setSlotsLoading(false));
|
||||
}, [selectedDate, sessionId]);
|
||||
const availableTimes = [
|
||||
'9:00 AM',
|
||||
'10:00 AM',
|
||||
'11:00 AM',
|
||||
'1:00 PM',
|
||||
'2:00 PM',
|
||||
'3:00 PM',
|
||||
'4:00 PM',
|
||||
];
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!selectedDate || !selectedTime) return;
|
||||
@@ -679,7 +654,6 @@ export function RescheduleFlow({
|
||||
<h3 className="font-medium text-stone-800 mb-3">Pick a New Date & Time</h3>
|
||||
<input
|
||||
type="date"
|
||||
aria-label="Select date"
|
||||
value={selectedDate}
|
||||
onChange={(e) => setSelectedDate(e.target.value)}
|
||||
min={new Date().toISOString().split('T')[0]}
|
||||
@@ -687,12 +661,7 @@ export function RescheduleFlow({
|
||||
/>
|
||||
{selectedDate && (
|
||||
<div className="grid grid-cols-3 gap-2 mb-4">
|
||||
{slotsLoading && <p className="col-span-3 text-sm text-stone-500 py-2">Checking availability…</p>}
|
||||
{!slotsLoading && slotsError && <p className="col-span-3 text-sm text-red-500 py-2">{slotsError}</p>}
|
||||
{!slotsLoading && availableTimes.length === 0 && !slotsError && (
|
||||
<p className="col-span-3 text-sm text-stone-500 py-2">No available slots on this date.</p>
|
||||
)}
|
||||
{!slotsLoading && availableTimes.map((time) => (
|
||||
{availableTimes.map((time) => (
|
||||
<button
|
||||
key={time}
|
||||
onClick={() => setSelectedTime(time)}
|
||||
@@ -751,34 +720,19 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
|
||||
const [notes, setNotes] = useState('');
|
||||
const [recurring, setRecurring] = useState('');
|
||||
const [confirmed, setConfirmed] = useState(false);
|
||||
useEffect(() => {
|
||||
if (confirmed) {
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_CONFIRMED, { step: "confirmed", flow: "portal" });
|
||||
}
|
||||
}, [confirmed]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [slotsLoading, setSlotsLoading] = useState(false);
|
||||
const [slotsError, setSlotsError] = useState<string | null>(null);
|
||||
const [availableTimes, setAvailableTimes] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedDate || !sessionId) {
|
||||
setAvailableTimes([]);
|
||||
return;
|
||||
}
|
||||
const params = new URLSearchParams({ date: selectedDate });
|
||||
setSlotsLoading(true);
|
||||
setSlotsError(null);
|
||||
fetch(`/api/book/availability?${params.toString()}`, {
|
||||
headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
|
||||
})
|
||||
.then((r) => r.json() as Promise<string[]>)
|
||||
.then(setAvailableTimes)
|
||||
.catch(() => setSlotsError('Failed to load time slots'))
|
||||
.finally(() => setSlotsLoading(false));
|
||||
}, [selectedDate, sessionId]);
|
||||
const availableTimes = [
|
||||
'9:00 AM',
|
||||
'10:00 AM',
|
||||
'11:00 AM',
|
||||
'1:00 PM',
|
||||
'2:00 PM',
|
||||
'3:00 PM',
|
||||
'4:00 PM',
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@@ -847,7 +801,6 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
|
||||
|
||||
if (response.ok) {
|
||||
setConfirmed(true);
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT, { step: "submit", flow: "portal" });
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
@@ -923,7 +876,6 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
|
||||
onClick={() => {
|
||||
setSelectedPet(pet);
|
||||
setStep(2);
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, { step: "service", flow: "portal" });
|
||||
}}
|
||||
className={`w-full flex items-center gap-3 p-3 rounded-xl border text-left transition-colors ${
|
||||
selectedPet?.id === pet.id
|
||||
@@ -1082,10 +1034,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setStep(4);
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_CONTACT, { step: "groomer", flow: "portal" });
|
||||
}}
|
||||
onClick={() => setStep(4)}
|
||||
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium"
|
||||
>
|
||||
Next
|
||||
@@ -1099,7 +1048,6 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
|
||||
<h3 className="font-medium text-stone-800 mb-3">Pick Date & Time</h3>
|
||||
<input
|
||||
type="date"
|
||||
aria-label="Select date"
|
||||
value={selectedDate}
|
||||
onChange={(e) => setSelectedDate(e.target.value)}
|
||||
min={new Date().toISOString().split('T')[0]}
|
||||
@@ -1107,12 +1055,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
|
||||
/>
|
||||
{selectedDate && (
|
||||
<div className="grid grid-cols-3 gap-2 mb-4">
|
||||
{slotsLoading && <p className="col-span-3 text-sm text-stone-500 py-2">Checking availability…</p>}
|
||||
{!slotsLoading && slotsError && <p className="col-span-3 text-sm text-red-500 py-2">{slotsError}</p>}
|
||||
{!slotsLoading && availableTimes.length === 0 && !slotsError && (
|
||||
<p className="col-span-3 text-sm text-stone-500 py-2">No available slots on this date.</p>
|
||||
)}
|
||||
{!slotsLoading && availableTimes.map((time) => (
|
||||
{availableTimes.map((time) => (
|
||||
<button
|
||||
key={time}
|
||||
onClick={() => setSelectedTime(time)}
|
||||
@@ -1150,10 +1093,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setStep(5);
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_TIME, { step: "time", flow: "portal" });
|
||||
}}
|
||||
onClick={() => setStep(5)}
|
||||
disabled={!selectedDate || !selectedTime}
|
||||
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium disabled:opacity-50"
|
||||
>
|
||||
|
||||
+42
-285
@@ -1,330 +1,87 @@
|
||||
import { useState } from "react";
|
||||
import { X, Save, Plus, Star, Loader2 } from "lucide-react";
|
||||
import type { Pet, MedicalAlert, CoatType, AlertSeverity } from "@groombook/types";
|
||||
|
||||
const COAT_TYPES: CoatType[] = ["double", "wire", "curly", "smooth", "long", "hairless"];
|
||||
const SEVERITY_OPTIONS: AlertSeverity[] = ["low", "medium", "high"];
|
||||
const SIZE_OPTIONS = ["small", "medium", "large", "xlarge"] as const;
|
||||
type SizeOption = typeof SIZE_OPTIONS[number];
|
||||
import { X, Save } from "lucide-react";
|
||||
import type { Pet } from "../mockData.js";
|
||||
|
||||
interface Props {
|
||||
pet?: Pet;
|
||||
onSave: (pet: Pet) => void | Promise<void>;
|
||||
onSave: (pet: Pet) => void;
|
||||
onCancel: () => void;
|
||||
saving?: boolean;
|
||||
saveError?: string | null;
|
||||
}
|
||||
|
||||
function newAlert(): Omit<MedicalAlert, "id"> {
|
||||
return { type: "", description: "", severity: "low" };
|
||||
}
|
||||
|
||||
export function PetForm({ pet, onSave, onCancel, saving, saveError }: Props) {
|
||||
export function PetForm({ pet, onSave, onCancel }: Props) {
|
||||
const [name, setName] = useState(pet?.name ?? "");
|
||||
const [breed, setBreed] = useState(pet?.breed ?? "");
|
||||
const [weight, setWeight] = useState(pet?.weightKg ?? 0);
|
||||
const [notes, setNotes] = useState(pet?.healthAlerts ?? "");
|
||||
const [coatType, setCoatType] = useState<CoatType | "">((pet?.coatType as CoatType) ?? "");
|
||||
const [petSizeCategory, setPetSizeCategory] = useState<SizeOption | "">(pet?.petSizeCategory as SizeOption ?? "");
|
||||
const [preferredCuts, setPreferredCuts] = useState<string[]>(pet?.preferredCuts ?? []);
|
||||
const [cutInput, setCutInput] = useState("");
|
||||
const [alerts, setAlerts] = useState<Omit<MedicalAlert, "id">[]>(
|
||||
pet?.medicalAlerts?.map((alert: MedicalAlert) => ({ type: alert.type, description: alert.description, severity: alert.severity })) ?? []
|
||||
);
|
||||
const [alertErrors, setAlertErrors] = useState<Record<number, string>>({});
|
||||
|
||||
function addAlert() {
|
||||
setAlerts(prev => [...prev, newAlert()]);
|
||||
}
|
||||
|
||||
function updateAlert(idx: number, field: keyof Omit<MedicalAlert, "id">, value: string) {
|
||||
setAlerts(prev => prev.map((a, i) => i === idx ? { ...a, [field]: value } : a));
|
||||
setAlertErrors(prev => { const e = { ...prev }; delete e[idx]; return e; });
|
||||
}
|
||||
|
||||
function removeAlert(idx: number) {
|
||||
setAlerts(prev => prev.filter((_, i) => i !== idx));
|
||||
setAlertErrors(prev => { const e = { ...prev }; delete e[idx]; return e; });
|
||||
}
|
||||
|
||||
function addCut() {
|
||||
const trimmed = cutInput.trim();
|
||||
if (trimmed && !preferredCuts.includes(trimmed)) {
|
||||
setPreferredCuts(prev => [...prev, trimmed]);
|
||||
}
|
||||
setCutInput("");
|
||||
}
|
||||
|
||||
function removeCut(cut: string) {
|
||||
setPreferredCuts(prev => prev.filter(c => c !== cut));
|
||||
}
|
||||
|
||||
function handleCutKey(e: React.KeyboardEvent<HTMLInputElement>) {
|
||||
if (e.key === "Enter") { e.preventDefault(); addCut(); }
|
||||
}
|
||||
|
||||
function validateAlerts(): boolean {
|
||||
const errors: Record<number, string> = {};
|
||||
alerts.forEach((a, i) => {
|
||||
if (!a.type.trim()) errors[i] = "Type is required";
|
||||
else if (a.severity === "medium" && !a.description.trim()) errors[i] = "Description required at medium/high severity";
|
||||
});
|
||||
setAlertErrors(errors);
|
||||
return Object.keys(errors).length === 0;
|
||||
}
|
||||
const [weight, setWeight] = useState(pet?.weight ?? 0);
|
||||
const [notes, setNotes] = useState(pet?.allergies ?? "");
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!pet) return;
|
||||
if (!handleCutKey) {} // noop reference
|
||||
if (alerts.length > 0 && !validateAlerts()) return;
|
||||
|
||||
const savedPet: Pet = {
|
||||
...pet,
|
||||
name,
|
||||
breed: breed || null,
|
||||
weightKg: weight || null,
|
||||
healthAlerts: notes,
|
||||
coatType: coatType || null,
|
||||
petSizeCategory: petSizeCategory || null,
|
||||
preferredCuts,
|
||||
medicalAlerts: alerts.map((a, i) => ({ ...a, id: pet.medicalAlerts?.[i]?.id ?? crypto.randomUUID() })),
|
||||
};
|
||||
onSave(savedPet);
|
||||
onSave({ ...pet, name, breed, weight, allergies: notes });
|
||||
}
|
||||
|
||||
const temperamentScore = pet?.temperamentScore;
|
||||
const temperamentFlags = pet?.temperamentFlags ?? [];
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-2xl border border-stone-200 p-6 shadow-sm">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-semibold text-stone-800">{pet?.id ? "Edit Pet" : "Add Pet"}</h2>
|
||||
<h2 className="text-lg font-semibold text-stone-800">{pet ? "Edit Pet" : "Add Pet"}</h2>
|
||||
<button onClick={onCancel} className="p-2 hover:bg-stone-50 rounded-lg">
|
||||
<X size={16} className="text-stone-400" />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
|
||||
{/* Basic Info */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-600 mb-1">Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
required
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-600 mb-1">Breed</label>
|
||||
<input
|
||||
type="text"
|
||||
value={breed}
|
||||
onChange={e => setBreed(e.target.value)}
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-600 mb-1">Weight (kg)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={weight}
|
||||
onChange={e => setWeight(Number(e.target.value))}
|
||||
min="0"
|
||||
step="0.1"
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-600 mb-1">Notes</label>
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={e => setNotes(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Coat Type */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="coat-type" className="block text-sm font-medium text-stone-600 mb-1">Coat Type</label>
|
||||
<select
|
||||
id="coat-type"
|
||||
value={coatType}
|
||||
onChange={e => setCoatType(e.target.value as CoatType)}
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent) bg-white"
|
||||
>
|
||||
<option value="">Select coat type</option>
|
||||
{COAT_TYPES.map(ct => (
|
||||
<option key={ct} value={ct}>{ct.charAt(0).toUpperCase() + ct.slice(1)}</option>
|
||||
))}
|
||||
</select>
|
||||
<label className="block text-sm font-medium text-stone-600 mb-1">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Size Category */}
|
||||
<div>
|
||||
<label htmlFor="size-category" className="block text-sm font-medium text-stone-600 mb-1">Size Category</label>
|
||||
<select
|
||||
id="size-category"
|
||||
value={petSizeCategory}
|
||||
onChange={e => setPetSizeCategory(e.target.value as SizeOption)}
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent) bg-white"
|
||||
>
|
||||
<option value="">Select size</option>
|
||||
{SIZE_OPTIONS.map(s => (
|
||||
<option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
|
||||
))}
|
||||
</select>
|
||||
<label className="block text-sm font-medium text-stone-600 mb-1">Breed</label>
|
||||
<input
|
||||
type="text"
|
||||
value={breed}
|
||||
onChange={e => setBreed(e.target.value)}
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Temperament (read-only) */}
|
||||
{(temperamentScore != null || temperamentFlags.length > 0) && (
|
||||
<div className="bg-stone-50 rounded-xl p-4 space-y-2">
|
||||
<label className="block text-sm font-medium text-stone-500 mb-1">Temperament</label>
|
||||
{temperamentScore != null && (
|
||||
<div className="flex items-center gap-1">
|
||||
{[1, 2, 3, 4, 5].map(s => (
|
||||
<Star
|
||||
key={s}
|
||||
size={14}
|
||||
className={s <= temperamentScore ? "text-amber-400 fill-amber-400" : "text-stone-300"}
|
||||
/>
|
||||
))}
|
||||
<span className="ml-1 text-xs text-stone-500">({temperamentScore}/5)</span>
|
||||
</div>
|
||||
)}
|
||||
{temperamentFlags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{temperamentFlags.map(flag => (
|
||||
<span key={flag} className="inline-flex items-center px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 text-xs">{flag}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Medical Alerts */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="block text-sm font-medium text-stone-600">Medical Alerts</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addAlert}
|
||||
className="flex items-center gap-1 text-xs text-(--color-accent-dark) font-medium hover:underline"
|
||||
>
|
||||
<Plus size={12} /> Add Alert
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{alerts.map((alert, idx) => (
|
||||
<div key={idx} className="border border-stone-200 rounded-lg p-3 space-y-2">
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Alert type (e.g. Allergic to chicken)"
|
||||
value={alert.type}
|
||||
onChange={e => updateAlert(idx, "type", e.target.value)}
|
||||
className="flex-1 border border-stone-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
/>
|
||||
<select
|
||||
value={alert.severity}
|
||||
onChange={e => updateAlert(idx, "severity", e.target.value as AlertSeverity)}
|
||||
className="border border-stone-200 rounded-lg px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent) bg-white"
|
||||
>
|
||||
{SEVERITY_OPTIONS.map(sev => (
|
||||
<option key={sev} value={sev}>{sev.charAt(0).toUpperCase() + sev.slice(1)}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<textarea
|
||||
placeholder="Description (optional)"
|
||||
value={alert.description}
|
||||
onChange={e => updateAlert(idx, "description", e.target.value)}
|
||||
rows={2}
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
/>
|
||||
{alertErrors[idx] && (
|
||||
<p className="text-xs text-red-500">{alertErrors[idx]}</p>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeAlert(idx)}
|
||||
className="p-1 hover:bg-stone-100 rounded text-stone-400 mt-0.5"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{alerts.length === 0 && (
|
||||
<p className="text-sm text-stone-400">No medical alerts on file.</p>
|
||||
)}
|
||||
</div>
|
||||
<label className="block text-sm font-medium text-stone-600 mb-1">Weight (lbs)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={weight}
|
||||
onChange={e => setWeight(Number(e.target.value))}
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Preferred Cuts */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-600 mb-1">Preferred Cuts</label>
|
||||
<div className="flex gap-2 mb-2">
|
||||
<input
|
||||
type="text"
|
||||
value={cutInput}
|
||||
onChange={e => setCutInput(e.target.value)}
|
||||
onKeyDown={handleCutKey}
|
||||
placeholder="Type a cut name and press Enter"
|
||||
className="flex-1 border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addCut}
|
||||
aria-label="Add"
|
||||
className="px-3 py-2 border border border-stone-200 rounded-lg text-sm text-stone-600 hover:bg-stone-50"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{preferredCuts.map(cut => (
|
||||
<span key={cut} className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-stone-100 text-stone-700 text-xs">
|
||||
{cut}
|
||||
<button type="button" onClick={() => removeCut(cut)} className="hover:text-red-500">
|
||||
<X size={10} />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
{preferredCuts.length === 0 && <span className="text-xs text-stone-400">None added yet.</span>}
|
||||
</div>
|
||||
<label className="block text-sm font-medium text-stone-600 mb-1">Notes</label>
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={e => setNotes(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={saving}
|
||||
className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm text-stone-600 hover:bg-stone-50 disabled:opacity-50"
|
||||
className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm text-stone-600 hover:bg-stone-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover) disabled:opacity-50"
|
||||
className="flex-1 flex items-center justify-center gap-1.5 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover)"
|
||||
>
|
||||
{saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
|
||||
{saving ? "Saving…" : "Save"}
|
||||
<Save size={14} />
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
{saveError && (
|
||||
<p className="text-sm text-red-500 text-center">{saveError}</p>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,16 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { PawPrint, Heart, Scissors, Clock, Edit3, Loader2, Star } from "lucide-react";
|
||||
import { PawPrint, Heart, Scissors, Clock, Edit3, Loader2 } from "lucide-react";
|
||||
import { PetForm } from "./PetForm.js";
|
||||
import type { Pet } from "@groombook/types";
|
||||
|
||||
interface Pet {
|
||||
id: string;
|
||||
name: string;
|
||||
breed: string;
|
||||
weight: number;
|
||||
birthDate: string;
|
||||
photoUrl: string | null;
|
||||
notes: string | null;
|
||||
}
|
||||
|
||||
interface Appointment {
|
||||
id: string;
|
||||
@@ -60,14 +69,14 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
|
||||
throw new Error("Failed to load appointments");
|
||||
}
|
||||
|
||||
const petsData: Pet[] = await petsRes.json();
|
||||
const petsData = await petsRes.json();
|
||||
const apptsData: AppointmentsResponse = await apptsRes.json();
|
||||
|
||||
setPets(petsData);
|
||||
setAppointments(apptsData);
|
||||
|
||||
if (petsData.length > 0 && !selectedPetId) {
|
||||
setSelectedPetId(petsData[0]?.id ?? "");
|
||||
setSelectedPetId(petsData[0].id);
|
||||
}
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Failed to load data");
|
||||
@@ -83,37 +92,19 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
|
||||
const petHistory = appointments.appointments.filter(a => a.pet?.id === selectedPetId && new Date(a.startTime) <= new Date());
|
||||
const editingPet = editingPetId ? pets.find(p => p.id === editingPetId) ?? null : null;
|
||||
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
|
||||
async function handlePetSave(updatedPet: Pet) {
|
||||
setSaving(true);
|
||||
setSaveError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/portal/pets/${updatedPet.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json", ...buildHeaders(sessionId) },
|
||||
body: JSON.stringify(updatedPet),
|
||||
});
|
||||
if (!res.ok) throw new Error("Failed to save pet");
|
||||
const saved: Pet = await res.json();
|
||||
setPets(prev => prev.map(p => p.id === saved.id ? saved : p));
|
||||
setEditingPetId(null);
|
||||
} catch (e) {
|
||||
setSaveError(e instanceof Error ? e.message : "Failed to save pet");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
function handlePetSave(updatedPet: Pet) {
|
||||
setPets(prev => prev.map(p => p.id === updatedPet.id ? updatedPet : p));
|
||||
setEditingPetId(null);
|
||||
}
|
||||
|
||||
if (editingPet) {
|
||||
return (
|
||||
<PetForm
|
||||
pet={editingPet}
|
||||
onSave={handlePetSave}
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
pet={editingPet as any}
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
onSave={handlePetSave as any}
|
||||
onCancel={() => setEditingPetId(null)}
|
||||
saving={saving}
|
||||
saveError={saveError}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -154,10 +145,10 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
|
||||
p.id === selectedPetId ? "border-(--color-accent) bg-(--color-accent-lighter)" : "border-stone-200 bg-white hover:border-stone-300"
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl">{p.photoKey ? "🐾" : "🐾"}</span>
|
||||
<span className="text-2xl">{p.photoUrl ? "🐾" : "🐾"}</span>
|
||||
<div className="text-left">
|
||||
<p className="font-medium text-stone-800 text-sm">{p.name}</p>
|
||||
<p className="text-xs text-stone-500">{p.breed ?? "Unknown breed"}</p>
|
||||
<p className="text-xs text-stone-500">{p.breed}</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
@@ -168,17 +159,17 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
|
||||
<div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-20 rounded-2xl bg-(--color-accent-light) flex items-center justify-center text-4xl overflow-hidden">
|
||||
{selectedPet.photoKey ? (
|
||||
<span>🐾</span>
|
||||
{selectedPet.photoUrl ? (
|
||||
<img src={selectedPet.photoUrl} alt={selectedPet.name} className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<span>🐾</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-xl font-semibold text-stone-800">{selectedPet.name}</h2>
|
||||
<p className="text-stone-500 text-sm">{selectedPet.breed ?? "Unknown breed"} · {selectedPet.weightKg ? `${selectedPet.weightKg} kg` : "Unknown weight"}</p>
|
||||
<p className="text-stone-500 text-sm">{selectedPet.breed} · {selectedPet.weight} lbs</p>
|
||||
<p className="text-stone-400 text-xs mt-0.5">
|
||||
Born {selectedPet.dateOfBirth ? new Date(selectedPet.dateOfBirth).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"}
|
||||
Born {selectedPet.birthDate ? new Date(selectedPet.birthDate).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"}
|
||||
</p>
|
||||
</div>
|
||||
{!readOnly && (
|
||||
@@ -222,7 +213,7 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
|
||||
);
|
||||
}
|
||||
|
||||
function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
function InfoRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row sm:items-center py-2.5 border-b border-stone-100 last:border-0">
|
||||
<span className="text-sm text-stone-500 sm:w-40 shrink-0">{label}</span>
|
||||
@@ -231,59 +222,14 @@ function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
function SeverityBadge({ severity }: { severity: "low" | "medium" | "high" }) {
|
||||
const classes = {
|
||||
low: "bg-green-100 text-green-700",
|
||||
medium: "bg-amber-100 text-amber-700",
|
||||
high: "bg-red-100 text-red-700",
|
||||
};
|
||||
return (
|
||||
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${classes[severity]}`}>
|
||||
{severity.charAt(0).toUpperCase() + severity.slice(1)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
|
||||
const score = pet.temperamentScore;
|
||||
const flags = pet.temperamentFlags ?? [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<InfoRow label="Name" value={pet.name} />
|
||||
<InfoRow label="Breed" value={pet.breed || "Unknown"} />
|
||||
<InfoRow label="Weight" value={pet.weightKg ? `${pet.weightKg} kg` : "Unknown"} />
|
||||
<InfoRow label="Date of Birth" value={pet.dateOfBirth ? new Date(pet.dateOfBirth).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"} />
|
||||
|
||||
{/* Temperament (staff-set, read-only) */}
|
||||
{(score != null || flags.length > 0) && (
|
||||
<div className="py-2.5 border-b border-stone-100">
|
||||
<span className="text-sm text-stone-500 sm:w-40 shrink-0 block mb-1">Temperament</span>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{score != null && (
|
||||
<div className="flex items-center gap-1">
|
||||
{[1, 2, 3, 4, 5].map(s => (
|
||||
<Star
|
||||
key={s}
|
||||
size={14}
|
||||
className={s <= score ? "text-amber-400 fill-amber-400" : "text-stone-300"}
|
||||
/>
|
||||
))}
|
||||
<span className="ml-1 text-xs text-stone-500">({score}/5 · staff-set)</span>
|
||||
</div>
|
||||
)}
|
||||
{flags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{flags.map(flag => (
|
||||
<span key={flag} className="inline-flex items-center px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 text-xs">{flag}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<InfoRow label="Notes" value={pet.healthAlerts || "None"} />
|
||||
<InfoRow label="Weight" value={`${pet.weight} lbs`} />
|
||||
<InfoRow label="Date of Birth" value={pet.birthDate ? new Date(pet.birthDate).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"} />
|
||||
<InfoRow label="Notes" value={pet.notes || "None"} />
|
||||
{!readOnly && (
|
||||
<button className="mt-4 text-sm text-(--color-accent-dark) font-medium hover:underline">
|
||||
Upload Photo
|
||||
@@ -294,30 +240,12 @@ function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
|
||||
}
|
||||
|
||||
function MedicalTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
|
||||
const alerts = pet.medicalAlerts ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{alerts.length === 0 ? (
|
||||
<p className="text-sm text-stone-400">No medical alerts on file.</p>
|
||||
) : (
|
||||
alerts.map(alert => (
|
||||
<div key={alert.id} className="flex items-start gap-3 py-2 border-b border-stone-100 last:border-0">
|
||||
<div className="flex-1 space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-stone-800">{alert.type}</span>
|
||||
<SeverityBadge severity={alert.severity} />
|
||||
</div>
|
||||
{alert.description && (
|
||||
<p className="text-sm text-stone-500">{alert.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<div>
|
||||
<InfoRow label="Notes" value={pet.notes || "No medical notes on file"} />
|
||||
{!readOnly && (
|
||||
<p className="mt-3 text-xs text-stone-400">
|
||||
Changes to medical alerts will be flagged for staff review.
|
||||
Changes to medical notes will be flagged for staff review.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -325,29 +253,9 @@ function MedicalTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
|
||||
}
|
||||
|
||||
function GroomingTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
|
||||
const coatType = pet.coatType;
|
||||
const cuts = pet.preferredCuts ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{coatType && (
|
||||
<InfoRow
|
||||
label="Coat Type"
|
||||
value={<span className="capitalize">{coatType}</span>}
|
||||
/>
|
||||
)}
|
||||
<div className="py-2.5 border-b border-stone-100">
|
||||
<span className="text-sm text-stone-500 sm:w-40 shrink-0 block mb-1">Preferred Cuts</span>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{cuts.map(cut => (
|
||||
<span key={cut} className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-stone-100 text-stone-700 text-xs">
|
||||
{cut}
|
||||
</span>
|
||||
))}
|
||||
{cuts.length === 0 && <span className="text-sm text-stone-400">None on file.</span>}
|
||||
</div>
|
||||
</div>
|
||||
<InfoRow label="Grooming Notes" value={pet.groomingNotes || "None"} />
|
||||
<div>
|
||||
<InfoRow label="Notes" value={pet.notes || "No grooming notes on file"} />
|
||||
{!readOnly && (
|
||||
<button className="mt-4 text-sm text-(--color-accent-dark) font-medium hover:underline">
|
||||
Upload Reference Photo
|
||||
@@ -387,4 +295,4 @@ function HistoryTab({ petHistory }: { petHistory: Appointment[] }) {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,8 +39,6 @@ export default defineConfig({
|
||||
],
|
||||
},
|
||||
workbox: {
|
||||
skipWaiting: true,
|
||||
clientsClaim: true,
|
||||
globPatterns: ["**/*.{js,css,html,ico,png,svg,woff2}"],
|
||||
navigateFallbackDenylist: [
|
||||
/^\/api\/auth\//,
|
||||
|
||||
Reference in New Issue
Block a user