feat: "Add an Override" calendar starts with the day specified in general settings (#14663)

* feat: Add an Override calendar starts with the day specified in general settings

* fix: types not matching

* fix: update edit calendar to use user's weekStart

* fix: weekstart defaults to 0 when not provided

---------

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>

packages/features/schedules/components/DateOverrideInputDialog.tsx

@@ -28,6 +28,7 @@ const DateOverrideForm = ({
   excludedDates,
   onChange,
   userTimeFormat,
+  weekStart,
 }: {
   workingHours?: WorkingHours[];
   onChange: (newValue: TimeRange[]) => void;
@@ -35,6 +36,7 @@ const DateOverrideForm = ({
   value?: TimeRange[];
   onClose?: () => void;
   userTimeFormat: number | null;
+  weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }) => {
   const [browsingDate, setBrowsingDate] = useState<Dayjs>();
   const { t, i18n, isLocaleReady } = useLocale();
@@ -142,7 +144,7 @@ const DateOverrideForm = ({
         <DialogHeader title={t("date_overrides_dialog_title")} />
         <DatePicker
           excludedDates={excludedDates}
-          weekStart={0}
+          weekStart={weekStart}
           selected={selectedDates}
           onChange={(day) => {
             if (day) onDateChange(day);
@@ -204,6 +206,7 @@ const DateOverrideInputDialog = ({
   Trigger,
   excludedDates = [],
   userTimeFormat,
+  weekStart = 0,
   ...passThroughProps
 }: {
   workingHours: WorkingHours[];
@@ -212,6 +215,7 @@ const DateOverrideInputDialog = ({
   onChange: (newValue: TimeRange[]) => void;
   value?: TimeRange[];
   userTimeFormat: number | null;
+  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }) => {
   const [open, setOpen] = useState(false);
   return (
@@ -221,6 +225,7 @@ const DateOverrideInputDialog = ({
       <DialogContent enableOverflow={true} size="md" className="p-0">
         <DateOverrideForm
           excludedDates={excludedDates}
+          weekStart={weekStart}
           {...passThroughProps}
           onClose={() => setOpen(false)}
           userTimeFormat={userTimeFormat}

packages/features/schedules/components/DateOverrideList.tsx

@@ -19,6 +19,7 @@ const DateOverrideList = ({
   hour12,
   replace,
   fields,
+  weekStart = 0,
 }: {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   replace: any;
@@ -28,6 +29,7 @@ const DateOverrideList = ({
   userTimeFormat: number | null;
   hour12: boolean;
   travelSchedules?: RouterOutputs["viewer"]["getTravelSchedules"];
+  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }) => {
   const { t, i18n } = useLocale();
 
@@ -87,6 +89,7 @@ const DateOverrideList = ({
               excludedDates={excludedDates}
               workingHours={workingHours}
               value={item.ranges}
+              weekStart={weekStart}
               onChange={(ranges) => {
                 // update has very weird side-effects with sorting.
                 replace([...fields.filter((currentItem) => currentItem.id !== item.id), { ranges }]);

packages/platform/atoms/availability/AvailabilitySettings.tsx

@@ -146,10 +146,12 @@ const DateOverride = ({
   workingHours,
   userTimeFormat,
   travelSchedules,
+  weekStart,
 }: {
   workingHours: WorkingHours[];
   userTimeFormat: number | null;
   travelSchedules?: RouterOutputs["viewer"]["getTravelSchedules"];
+  weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }) => {
   const { append, replace, fields } = useFieldArray<AvailabilityFormValues, "dateOverrides">({
     name: "dateOverrides",
@@ -172,6 +174,7 @@ const DateOverride = ({
           excludedDates={excludedDates}
           replace={replace}
           fields={fields}
+          weekStart={weekStart}
           workingHours={workingHours}
           userTimeFormat={userTimeFormat}
           hour12={Boolean(userTimeFormat === 12)}
@@ -182,6 +185,7 @@ const DateOverride = ({
           excludedDates={excludedDates}
           onChange={(ranges) => ranges.forEach((range) => append({ ranges: [range] }))}
           userTimeFormat={userTimeFormat}
+          weekStart={weekStart}
           Trigger={
             <Button color="secondary" StartIcon="plus" data-testid="add-override">
               {t("add_an_override")}
@@ -487,6 +491,11 @@ export function AvailabilitySettings({
                     workingHours={schedule.workingHours}
                     userTimeFormat={timeFormat}
                     travelSchedules={travelSchedules}
+                    weekStart={
+                      ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
+                        weekStart
+                      ) as 0 | 1 | 2 | 3 | 4 | 5 | 6
+                    }
                   />
                 )}
               </div>