Compare commits
21 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 112c61ab1c | |||
| 7e5a851d9c | |||
| 3bccb1ac01 | |||
| 2e99ed520f | |||
| 344a32e3e4 | |||
| b630b40c92 | |||
| db892409ef | |||
| c83214cf42 | |||
| 80101fc37c | |||
| 8ee58471b2 | |||
| 35d31a984d | |||
| f62c0b112d | |||
| f1bb7c4fa6 | |||
| 56b11befe9 | |||
| f70dd96c65 | |||
| 42f3e3211a | |||
| 465db89ab4 | |||
| ee7fc2e9bf | |||
| c8610ec28d | |||
| a582bd04b7 | |||
| b8a9e8cc09 |
@@ -2,9 +2,9 @@ name: CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main, dev]
|
||||
branches: [main, dev, uat]
|
||||
pull_request:
|
||||
branches: [main, dev]
|
||||
branches: [main, dev, uat]
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
ref:
|
||||
@@ -78,6 +78,8 @@ jobs:
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
with:
|
||||
driver-opts: network=host
|
||||
|
||||
- name: Log in to Gitea Container Registry
|
||||
uses: docker/login-action@v3
|
||||
@@ -92,6 +94,7 @@ 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' || '' }}
|
||||
+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 curl -f http://localhost:80/ || exit 1
|
||||
CMD wget --spider -q http://localhost:80/ || exit 1
|
||||
@@ -69,6 +69,7 @@ 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
|
||||
|
||||
@@ -77,6 +78,26 @@ 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 |
|
||||
@@ -283,6 +304,26 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
|
||||
| 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 |
|
||||
|
||||
## 6. Pass/Fail Criteria
|
||||
|
||||
**Pass:**
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
<?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>
|
||||
@@ -1,9 +0,0 @@
|
||||
<?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>
|
||||
@@ -1,9 +0,0 @@
|
||||
<?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>
|
||||
@@ -1,9 +0,0 @@
|
||||
<?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>
|
||||
@@ -1,9 +0,0 @@
|
||||
<?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>
|
||||
@@ -1,9 +0,0 @@
|
||||
<?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>
|
||||
@@ -1,9 +0,0 @@
|
||||
<?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>
|
||||
@@ -1,9 +0,0 @@
|
||||
<?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>
|
||||
@@ -1,9 +0,0 @@
|
||||
<?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>
|
||||
@@ -1,9 +0,0 @@
|
||||
<?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>
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"$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"}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
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", "/");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,83 @@
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -8,6 +8,19 @@
|
||||
--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 {
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
// 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 ?? "",
|
||||
baseURL: import.meta.env.VITE_API_URL || (typeof window !== "undefined" ? window.location.origin : ""),
|
||||
});
|
||||
|
||||
export const { signIn, signOut, useSession, changePassword } = authClient;
|
||||
@@ -0,0 +1,7 @@
|
||||
// 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;
|
||||
+6
-1
@@ -1,6 +1,7 @@
|
||||
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 ───────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -193,12 +194,14 @@ export function BookPage() {
|
||||
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() {
|
||||
@@ -208,6 +211,7 @@ export function BookPage() {
|
||||
}
|
||||
setFormError(null);
|
||||
setStep(4);
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_CONTACT, { step: "contact", flow: "public" });
|
||||
}
|
||||
|
||||
async function submitBooking() {
|
||||
@@ -236,6 +240,7 @@ 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) {
|
||||
@@ -519,7 +524,7 @@ export function BookPage() {
|
||||
<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="x-large">X-Large (over 80 lbs)</option>
|
||||
<option value="xlarge">X-Large (over 80 lbs)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
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
|
||||
@@ -7,12 +14,12 @@ export function BookingCancelledPage() {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontFamily: "system-ui, sans-serif",
|
||||
background: "#fff7ed",
|
||||
background: "var(--color-cancelled-bg)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: "#fff",
|
||||
background: "var(--color-surface)",
|
||||
borderRadius: 12,
|
||||
padding: "2.5rem 3rem",
|
||||
boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
|
||||
@@ -21,28 +28,45 @@ export function BookingCancelledPage() {
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 56, marginBottom: "0.5rem" }}>✗</div>
|
||||
<h1 style={{ color: "#c2410c", fontSize: 24, margin: "0 0 0.5rem" }}>
|
||||
Appointment Cancelled
|
||||
<h1 style={{ color: "var(--color-cancelled-dark)", fontSize: 24, margin: "0 0 0.5rem" }}>
|
||||
{STRINGS.heading}
|
||||
</h1>
|
||||
<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 style={{ color: "var(--color-text-secondary)", margin: "0 0 1.5rem" }}>
|
||||
{STRINGS.body}
|
||||
</p>
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,11 @@
|
||||
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={{
|
||||
|
||||
+62
-22
@@ -1,4 +1,20 @@
|
||||
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={{
|
||||
@@ -7,12 +23,12 @@ export function BookingErrorPage() {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontFamily: "system-ui, sans-serif",
|
||||
background: "#fef2f2",
|
||||
background: "var(--color-error-bg)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: "#fff",
|
||||
background: "var(--color-surface)",
|
||||
borderRadius: 12,
|
||||
padding: "2.5rem 3rem",
|
||||
boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
|
||||
@@ -21,28 +37,52 @@ export function BookingErrorPage() {
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 56, marginBottom: "0.5rem" }}>⚠️</div>
|
||||
<h1 style={{ color: "#b91c1c", fontSize: 24, margin: "0 0 0.5rem" }}>
|
||||
Link Invalid or Expired
|
||||
<h1 style={{ color: "var(--color-error-dark)", fontSize: 24, margin: "0 0 0.5rem" }}>
|
||||
{STRINGS.heading}
|
||||
</h1>
|
||||
<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 style={{ color: "var(--color-text-secondary)", margin: "0 0 1.5rem" }}>
|
||||
{STRINGS.body}
|
||||
</p>
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
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;
|
||||
@@ -720,6 +721,11 @@ 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);
|
||||
@@ -801,6 +807,7 @@ 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);
|
||||
@@ -876,6 +883,7 @@ 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
|
||||
@@ -1034,7 +1042,10 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setStep(4)}
|
||||
onClick={() => {
|
||||
setStep(4);
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_CONTACT, { step: "groomer", flow: "portal" });
|
||||
}}
|
||||
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium"
|
||||
>
|
||||
Next
|
||||
@@ -1093,7 +1104,10 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setStep(5)}
|
||||
onClick={() => {
|
||||
setStep(5);
|
||||
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_TIME, { step: "time", flow: "portal" });
|
||||
}}
|
||||
disabled={!selectedDate || !selectedTime}
|
||||
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium disabled:opacity-50"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user