@wealthx/shadcn 1.3.2 → 1.3.3

package/src/components/ui/appointment-availability-settings.tsx

@@ -42,6 +42,8 @@ export interface AppointmentAvailabilityPrefs {
   meetingDuration: string;
   schedulingBuffer: string;
   maxSlotsPerDay: string;
+  /** IANA timezone identifier — e.g. "Australia/Sydney" */
+  timezone: string;
 }
 
 export interface AppointmentBlockedDate {
@@ -56,8 +58,29 @@ export interface AppointmentBlockedDate {
 }
 
 export interface AppointmentAvailabilitySettingsProps {
+  /**
+   * Initial weekly schedule.
+   * @remarks Mount-time initialiser only — prop changes after mount are ignored.
+   * Use the `key` prop to reset the component when async data arrives.
+   */
   schedule: AppointmentDaySchedule[];
+  /**
+   * Saved booking preferences from DB — initialises the Booking Preferences tab.
+   * @remarks Mount-time initialiser only.
+   */
+  prefs?: AppointmentAvailabilityPrefs;
+  /**
+   * Custom blocked dates added by the user (non-holiday).
+   * Merged with `publicHolidays` in the Time Off tab.
+   * @remarks Mount-time initialiser only.
+   */
   blockedDates?: AppointmentBlockedDate[];
+  /**
+   * Public holiday list from the DB/API.
+   * When provided, replaces the built-in `AU_PUBLIC_HOLIDAYS_2026` fallback.
+   * @remarks Mount-time initialiser only.
+   */
+  publicHolidays?: AppointmentBlockedDate[];
   onSave?: (
     schedule: AppointmentDaySchedule[],
     prefs: AppointmentAvailabilityPrefs,
@@ -66,9 +89,10 @@ export interface AppointmentAvailabilitySettingsProps {
 }
 
 // ---------------------------------------------------------------------------
-// AU Public Holidays 2026
+// Constants
 // ---------------------------------------------------------------------------
 
+/** Fallback holiday list used when the `publicHolidays` prop is not provided. */
 const AU_PUBLIC_HOLIDAYS_2026: AppointmentBlockedDate[] = [
   { date: "2026-01-01", label: "New Year's Day" },
   { date: "2026-01-26", label: "Australia Day" },
@@ -81,23 +105,19 @@ const AU_PUBLIC_HOLIDAYS_2026: AppointmentBlockedDate[] = [
   { date: "2026-12-26", label: "Boxing Day" },
 ];
 
-// ---------------------------------------------------------------------------
-// Internal type — Time Off entries with switch state
-// ---------------------------------------------------------------------------
-
-interface TimeOffEntry {
-  date: string;
-  label?: string;
-  enabled: boolean;
-  isHoliday: boolean;
-  timeStart?: string;
-  timeEnd?: string;
-}
-
-// ---------------------------------------------------------------------------
-// Time options — 30-min increments from 6:00 to 21:30
-// ---------------------------------------------------------------------------
+export const TIMEZONE_OPTIONS: { value: string; label: string }[] = [
+  { value: "Australia/Sydney", label: "Sydney / Melbourne (AEDT)" },
+  { value: "Australia/Brisbane", label: "Brisbane (AEST, no DST)" },
+  { value: "Australia/Adelaide", label: "Adelaide (ACDT)" },
+  { value: "Australia/Perth", label: "Perth (AWST)" },
+  { value: "Australia/Darwin", label: "Darwin (ACST, no DST)" },
+  { value: "Australia/Hobart", label: "Hobart (AEDT)" },
+  { value: "Asia/Ho_Chi_Minh", label: "Ho Chi Minh City (ICT)" },
+  { value: "Asia/Singapore", label: "Singapore (SGT)" },
+  { value: "UTC", label: "UTC" },
+];
 
+// 30-min increments from 06:00 to 21:30
 const TIME_OPTIONS: { value: string; label: string }[] = (() => {
   const opts: { value: string; label: string }[] = [];
   for (let h = 6; h <= 21; h++) {
@@ -115,6 +135,23 @@ const TIME_OPTIONS: { value: string; label: string }[] = (() => {
 const timeLabel = (v: string) =>
   TIME_OPTIONS.find((o) => o.value === v)?.label ?? v;
 
+// ---------------------------------------------------------------------------
+// Internal type
+// ---------------------------------------------------------------------------
+
+interface TimeOffEntry {
+  date: string;
+  label?: string;
+  enabled: boolean;
+  isHoliday: boolean;
+  timeStart?: string;
+  timeEnd?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
 function TimeSelect({
   value,
   onChange,
@@ -144,10 +181,26 @@ function TimeSelect({
   );
 }
 
-
-// ---------------------------------------------------------------------------
-// "Add More" dialog
-// ---------------------------------------------------------------------------
+/** Shared row layout for the Booking Preferences tab. */
+function PrefRow({
+  label,
+  description,
+  children,
+}: {
+  label: string;
+  description: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-[68px] items-center justify-between px-6 py-4">
+      <div className="flex flex-col gap-0.5">
+        <p className="text-sm font-medium">{label}</p>
+        <p className="text-xs text-muted-foreground">{description}</p>
+      </div>
+      {children}
+    </div>
+  );
+}
 
 function AddTimeOffDialog({
   open,
@@ -156,12 +209,7 @@ function AddTimeOffDialog({
 }: {
   open: boolean;
   onOpenChange: (v: boolean) => void;
-  onAdd: (entry: {
-    date: string;
-    label?: string;
-    timeStart?: string;
-    timeEnd?: string;
-  }) => void;
+  onAdd: (entry: AppointmentBlockedDate) => void;
 }) {
   const [label, setLabel] = React.useState("");
   const [date, setDate] = React.useState<Date | undefined>(undefined);
@@ -179,7 +227,6 @@ function AddTimeOffDialog({
 
   const handleAdd = () => {
     if (!date) return;
-    // Convert Date to ISO date string "YYYY-MM-DD"
     const isoDate = [
       date.getFullYear(),
       String(date.getMonth() + 1).padStart(2, "0"),
@@ -212,7 +259,6 @@ function AddTimeOffDialog({
         </DialogHeader>
 
         <div className="flex flex-col gap-4 py-1">
-          {/* Label */}
           <div className="flex flex-col gap-1.5">
             <Label htmlFor="toff-label">
               Name{" "}
@@ -228,7 +274,6 @@ function AddTimeOffDialog({
             />
           </div>
 
-          {/* Date */}
           <div className="flex flex-col gap-1.5">
             <Label>Date</Label>
             <DatePicker
@@ -239,7 +284,6 @@ function AddTimeOffDialog({
             />
           </div>
 
-          {/* Add time switch */}
           <div className="flex flex-col gap-3">
             <div className="flex items-center gap-3">
               <Switch
@@ -284,30 +328,33 @@ function AddTimeOffDialog({
 
 export function AppointmentAvailabilitySettings({
   schedule: initialSchedule,
+  prefs: prefsProp,
   blockedDates: blockedDatesProp,
+  publicHolidays: publicHolidaysProp,
   onSave,
   onBlockedDatesChange,
 }: AppointmentAvailabilitySettingsProps) {
-  // Track first render to skip auto-save on mount
-  const hasMounted = React.useRef(false);
-  React.useEffect(() => {
-    hasMounted.current = true;
-  }, []);
-
-  // --- Weekly Availability tab ---
   const [schedule, setSchedule] =
     React.useState<AppointmentDaySchedule[]>(initialSchedule);
 
-  // --- Booking Preferences tab ---
-  const [meetingDuration, setMeetingDuration] = React.useState("30");
-  const [schedulingBuffer, setSchedulingBuffer] = React.useState("0");
-  const [maxSlotsPerDay, setMaxSlotsPerDay] = React.useState("8");
+  const [meetingDuration, setMeetingDuration] = React.useState(
+    prefsProp?.meetingDuration ?? "30",
+  );
+  const [schedulingBuffer, setSchedulingBuffer] = React.useState(
+    prefsProp?.schedulingBuffer ?? "0",
+  );
+  const [maxSlotsPerDay, setMaxSlotsPerDay] = React.useState(
+    prefsProp?.maxSlotsPerDay ?? "8",
+  );
+  const [timezone, setTimezone] = React.useState(
+    prefsProp?.timezone ?? "Australia/Sydney",
+  );
 
-  // --- Time Off tab ---
   const [timeOffEntries, setTimeOffEntries] = React.useState<TimeOffEntry[]>(
     () => {
-      const holidayDates = new Set(AU_PUBLIC_HOLIDAYS_2026.map((h) => h.date));
-      const entries: TimeOffEntry[] = AU_PUBLIC_HOLIDAYS_2026.map((h) => ({
+      const holidays = publicHolidaysProp ?? AU_PUBLIC_HOLIDAYS_2026;
+      const holidayDates = new Set(holidays.map((h) => h.date));
+      const entries: TimeOffEntry[] = holidays.map((h) => ({
         ...h,
         enabled: true,
         isHoliday: true,
@@ -328,28 +375,36 @@ export function AppointmentAvailabilitySettings({
   const [addMoreOpen, setAddMoreOpen] = React.useState(false);
 
   // ---------------------------------------------------------------------------
-  // Auto-save — fires after each deliberate state change (skip initial mount)
+  // Auto-save effects
+  //
+  // Each effect uses its own mount-guard ref. A shared ref would break because
+  // React runs effects in declaration order within the same flush — the first
+  // effect would flip the ref to `true`, causing later effects to skip their
+  // own guard and fire onSave/onBlockedDatesChange on mount.
   // ---------------------------------------------------------------------------
 
   const currentPrefs = React.useMemo(
-    () => ({ meetingDuration, schedulingBuffer, maxSlotsPerDay }),
-    [meetingDuration, schedulingBuffer, maxSlotsPerDay],
+    () => ({ meetingDuration, schedulingBuffer, maxSlotsPerDay, timezone }),
+    [meetingDuration, schedulingBuffer, maxSlotsPerDay, timezone],
   );
 
-  React.useEffect(() => {
-    if (!hasMounted.current) return;
-    onSave?.(schedule, currentPrefs);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [schedule]);
+  const saveGuard = React.useRef(false);
+  const timeOffGuard = React.useRef(false);
 
   React.useEffect(() => {
-    if (!hasMounted.current) return;
+    if (!saveGuard.current) {
+      saveGuard.current = true;
+      return;
+    }
     onSave?.(schedule, currentPrefs);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [meetingDuration, schedulingBuffer, maxSlotsPerDay]);
+  }, [schedule, currentPrefs]);
 
   React.useEffect(() => {
-    if (!hasMounted.current) return;
+    if (!timeOffGuard.current) {
+      timeOffGuard.current = true;
+      return;
+    }
     const blocked = timeOffEntries
       .filter((e) => e.enabled)
       .map(({ date, label, timeStart, timeEnd }) => ({
@@ -363,7 +418,7 @@ export function AppointmentAvailabilitySettings({
   }, [timeOffEntries]);
 
   // ---------------------------------------------------------------------------
-  // Weekly handlers
+  // Weekly schedule handlers
   // ---------------------------------------------------------------------------
 
   const toggleDay = (index: number) => {
@@ -396,12 +451,7 @@ export function AppointmentAvailabilitySettings({
     setTimeOffEntries((prev) => prev.filter((e) => e.date !== date));
   };
 
-  const handleAddMore = (entry: {
-    date: string;
-    label?: string;
-    timeStart?: string;
-    timeEnd?: string;
-  }) => {
+  const handleAddMore = (entry: AppointmentBlockedDate) => {
     if (timeOffEntries.some((e) => e.date === entry.date)) return;
     setTimeOffEntries((prev) =>
       [
@@ -421,7 +471,6 @@ export function AppointmentAvailabilitySettings({
   return (
     <div className="border border-border bg-card">
       <Tabs defaultValue="weekly" className="gap-0">
-        {/* Tab strip */}
         <div className="border-b border-border p-1">
           <TabsList variant="default" className="w-full">
             <TabsTrigger value="weekly">Weekly Availability</TabsTrigger>
@@ -430,9 +479,7 @@ export function AppointmentAvailabilitySettings({
           </TabsList>
         </div>
 
-        {/* ---------------------------------------------------------------- */}
-        {/* Tab 1: Weekly Availability                                        */}
-        {/* ---------------------------------------------------------------- */}
+        {/* Tab 1: Weekly Availability */}
         <TabsContent value="weekly">
           <div className="flex flex-col divide-y divide-border">
             {schedule.map((day, index) => (
@@ -476,18 +523,13 @@ export function AppointmentAvailabilitySettings({
           </div>
         </TabsContent>
 
-        {/* ---------------------------------------------------------------- */}
-        {/* Tab 2: Booking Preferences                                        */}
-        {/* ---------------------------------------------------------------- */}
+        {/* Tab 2: Booking Preferences */}
         <TabsContent value="booking">
           <div className="flex flex-col divide-y divide-border">
-            <div className="flex min-h-[68px] items-center justify-between px-6 py-4">
-              <div className="flex flex-col gap-0.5">
-                <p className="text-sm font-medium">Meeting Duration</p>
-                <p className="text-xs text-muted-foreground">
-                  Length of each appointment slot
-                </p>
-              </div>
+            <PrefRow
+              label="Meeting Duration"
+              description="Length of each appointment slot"
+            >
               <Select
                 value={meetingDuration}
                 onValueChange={(v) => setMeetingDuration(v as string)}
@@ -503,15 +545,12 @@ export function AppointmentAvailabilitySettings({
                   <SelectItem value="90">90 minutes</SelectItem>
                 </SelectContent>
               </Select>
-            </div>
+            </PrefRow>
 
-            <div className="flex min-h-[68px] items-center justify-between px-6 py-4">
-              <div className="flex flex-col gap-0.5">
-                <p className="text-sm font-medium">Scheduling Buffer</p>
-                <p className="text-xs text-muted-foreground">
-                  Gap between consecutive bookings
-                </p>
-              </div>
+            <PrefRow
+              label="Scheduling Buffer"
+              description="Gap between consecutive bookings"
+            >
               <Select
                 value={schedulingBuffer}
                 onValueChange={(v) => setSchedulingBuffer(v as string)}
@@ -527,15 +566,12 @@ export function AppointmentAvailabilitySettings({
                   <SelectItem value="30">30 minutes</SelectItem>
                 </SelectContent>
               </Select>
-            </div>
+            </PrefRow>
 
-            <div className="flex min-h-[68px] items-center justify-between px-6 py-4">
-              <div className="flex flex-col gap-0.5">
-                <p className="text-sm font-medium">Daily Slot Limit</p>
-                <p className="text-xs text-muted-foreground">
-                  Maximum bookings accepted per day
-                </p>
-              </div>
+            <PrefRow
+              label="Daily Slot Limit"
+              description="Maximum bookings accepted per day"
+            >
               <Select
                 value={maxSlotsPerDay}
                 onValueChange={(v) => setMaxSlotsPerDay(v as string)}
@@ -552,15 +588,33 @@ export function AppointmentAvailabilitySettings({
                   <SelectItem value="unlimited">Unlimited</SelectItem>
                 </SelectContent>
               </Select>
-            </div>
+            </PrefRow>
+
+            <PrefRow
+              label="Meeting Timezone"
+              description="Timezone used for booking display and notifications"
+            >
+              <Select
+                value={timezone}
+                onValueChange={(v) => setTimezone(v as string)}
+              >
+                <SelectTrigger className="w-56">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {TIMEZONE_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </PrefRow>
           </div>
         </TabsContent>
 
-        {/* ---------------------------------------------------------------- */}
-        {/* Tab 3: Time Off                                                   */}
-        {/* ---------------------------------------------------------------- */}
+        {/* Tab 3: Time Off */}
         <TabsContent value="time-off">
-          {/* Description + Add more button */}
           <div className="flex items-center justify-between px-6 py-4">
             <p className="text-sm text-muted-foreground">
               Toggle dates when you are unavailable. Clients cannot book on
@@ -579,7 +633,6 @@ export function AppointmentAvailabilitySettings({
 
           <Separator />
 
-          {/* Holiday + custom date rows */}
           <div className="flex flex-col divide-y divide-border">
             {timeOffEntries.map((entry) => {
               const formattedDate = formatDateWithWeekday(entry.date);
@@ -615,7 +668,6 @@ export function AppointmentAvailabilitySettings({
                       )}
                     </p>
                   </div>
-                  {/* Only custom (non-holiday) dates can be removed */}
                   {!entry.isHoliday && (
                     <Button
                       type="button"
@@ -634,7 +686,6 @@ export function AppointmentAvailabilitySettings({
         </TabsContent>
       </Tabs>
 
-      {/* Add More dialog */}
       <AddTimeOffDialog
         open={addMoreOpen}
         onOpenChange={setAddMoreOpen}