packages/ui/components/form/date-range-picker/Calendar.tsx (1)

62-65: Hardcoded weekday names bypass localization.

The labelWeekday function uses hardcoded English weekday names, which won't translate for non-English users. Consider using date-fns locale-aware formatting or the Intl.DateTimeFormat API for consistency with the rest of the codebase.

♻️ Proposed fix using Intl.DateTimeFormat

       labelWeekday: (day) => {
-        const fullNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-        return fullNames[day.getDay()];
+        return new Intl.DateTimeFormat("en-US", { weekday: "long" }).format(day);
       },

Note: To support the user's locale, you'd need to pass a locale prop to Calendar and use it here. For now, this at least uses a standard API that can be extended.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ui/components/form/date-range-picker/Calendar.tsx` around lines 62 -
65, The labelWeekday implementation in Calendar currently returns hardcoded
English names; update the labelWeekday function to produce locale-aware weekday
labels (e.g., via Intl.DateTimeFormat or date-fns format) and accept a locale
parameter for the Calendar component so it can format using the user's locale;
replace the hardcoded fullNames logic in labelWeekday with a call to new
Intl.DateTimeFormat(locale, { weekday: 'long' }).format(day) (or the equivalent
date-fns call) and ensure the Calendar component accepts and forwards the locale
prop to this formatter.

apps/web/modules/bookings/components/AvailableTimes.test.tsx (1)

9-12: The framer-motion mock appears unnecessary.

This mock imports the original module and re-exports it unchanged, which has no effect. If no mocking is needed, consider removing it. If the intent was to mock specific exports like AnimatePresence or m, update accordingly.

♻️ Option 1: Remove the mock if not needed

-vi.mock("framer-motion", async (importOriginal) => {
-  const actual = (await importOriginal()) as typeof import("framer-motion");
-  return { ...actual };
-});
-

♻️ Option 2: If you need to suppress animations for test stability

 vi.mock("framer-motion", async (importOriginal) => {
   const actual = (await importOriginal()) as typeof import("framer-motion");
-  return { ...actual };
+  return {
+    ...actual,
+    AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+    m: {
+      div: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => <div {...props}>{children}</div>,
+    },
+  };
 });

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/modules/bookings/components/AvailableTimes.test.tsx` around lines 9
- 12, The vi.mock call in AvailableTimes.test.tsx currently re-imports and
re-exports the original framer-motion module (vi.mock("framer-motion", ...))
which is a no-op; either remove this vi.mock block entirely if no mocking is
needed, or replace it with a targeted mock that stubs the specific exports used
in the tests (e.g., mock AnimatePresence to render children directly and mock
the motion component alias like m to a simple passthrough) so tests are stable
without recreating the whole module.

apps/web/modules/bookings/components/AvailableTimes.test.tsx (1)

70-81: Consider more precise assertions for regression safety.

The regex-based assertions (/^Book /i, /, unavailable$/i) are valid but loose. Using exact expected labels would catch subtle formatting regressions (e.g., wrong time zone, missing space).

♻️ Suggested more precise assertions

   it("renders time slot button with Book aria-label for an available slot", () => {
     render(
       <AvailableTimes
         slots={[mockSlot]}
         event={mockEvent}
         unavailableTimeSlots={[]}
         skipConfirmStep={false}
       />
     );
 
-    expect(screen.getByRole("button", { name: /^Book /i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Book 1:30pm" })).toBeInTheDocument();
   });
 
   it("renders time slot button with unavailable aria-label when slot is in unavailableTimeSlots", () => {
     render(
       <AvailableTimes
         slots={[mockSlot]}
         event={mockEvent}
         unavailableTimeSlots={[mockSlot.time]}
         skipConfirmStep={false}
       />
     );
 
-    expect(screen.getByRole("button", { name: /, unavailable$/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "1:30pm, unavailable" })).toBeInTheDocument();
   });

Also applies to: 83-94

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/modules/bookings/components/AvailableTimes.test.tsx` around lines 70
- 81, The test uses loose regex assertions for the button aria-label; update the
assertions in AvailableTimes.test.tsx to assert the exact expected aria-label
text for the rendered buttons (use the exact string that includes the full
label, time and timezone) instead of /^Book /i and /, unavailable$/i so
regressions in formatting are caught; locate the tests that render
<AvailableTimes slots={[mockSlot]} event={mockEvent} ... /> (references:
AvailableTimes component, mockSlot, mockEvent) and replace the regex-based
getByRole name matchers with exact name strings for both the available-slot
assertion and the unavailable-slot assertion (also update the second test around
the other block noted at lines 83-94).