From d2d745396271602b0949fd3587ff32796ca72cc9 Mon Sep 17 00:00:00 2001 From: Rajiv Sahal Date: Wed, 19 Jun 2024 17:49:25 +0530 Subject: [PATCH] feat: add date overrides to availability settings atom (#15459) * remove console.log * fixup: logic to convert overrides was not calling functions * refactor handleSubmit function * add portal to platform dialog component * cleanup * add props to enable and disable date overrides * show date overrides for availability settings atom * fix: date overrides formatting for api request --------- Co-authored-by: Rajiv Sahal Co-authored-by: supalarry Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com> --- .../components/DateOverrideInputDialog.tsx | 24 +++++++------- .../availability/AvailabilitySettings.tsx | 31 ++++++++---------- .../transformAtomScheduleForApi.ts | 32 ++++++++++++++++--- .../AvailabilitySettingsPlatformWrapper.tsx | 3 ++ .../AvailabilitySettingsWebWrapper.tsx | 1 + .../atoms/src/components/ui/dialog.tsx | 32 +++++++++++-------- .../examples/base/src/pages/availability.tsx | 1 + 7 files changed, 74 insertions(+), 50 deletions(-) diff --git a/packages/features/schedules/components/DateOverrideInputDialog.tsx b/packages/features/schedules/components/DateOverrideInputDialog.tsx index f9d594d815..d4af89cabf 100644 --- a/packages/features/schedules/components/DateOverrideInputDialog.tsx +++ b/packages/features/schedules/components/DateOverrideInputDialog.tsx @@ -108,11 +108,18 @@ const DateOverrideForm = ({
{ - if (selectedDates.length === 0) return; - const datesInRanges: TimeRange[] = []; - if (!datesUnavailable) { + if (selectedDates.length === 0) return; + + if (datesUnavailable) { + selectedDates.map((date) => { + datesInRanges.push({ + start: date.utc(true).startOf("day").toDate(), + end: date.utc(true).startOf("day").toDate(), + }); + }); + } else { selectedDates.map((date) => { values.range.map((item) => { datesInRanges.push({ @@ -127,16 +134,7 @@ const DateOverrideForm = ({ }); } - onChange( - datesUnavailable - ? selectedDates.map((date) => { - return { - start: date.utc(true).startOf("day").toDate(), - end: date.utc(true).startOf("day").toDate(), - }; - }) - : datesInRanges - ); + onChange(datesInRanges); setSelectedDates([]); }} className="p-6 sm:flex sm:p-0 xl:flex-row"> diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx index b16c9ced0e..65f164548a 100644 --- a/packages/platform/atoms/availability/AvailabilitySettings.tsx +++ b/packages/platform/atoms/availability/AvailabilitySettings.tsx @@ -89,6 +89,7 @@ type AvailabilitySettingsProps = { isPlatform?: boolean; customClassNames?: CustomClassNames; disableEditableHeading?: boolean; + enableOverrides?: boolean; }; const DeleteDialogButton = ({ @@ -234,6 +235,7 @@ export function AvailabilitySettings({ isPlatform = false, customClassNames, disableEditableHeading = false, + enableOverrides = false, }: AvailabilitySettingsProps) { const [openSidebar, setOpenSidebar] = useState(false); const { t, i18n } = useLocale(); @@ -248,7 +250,6 @@ export function AvailabilitySettings({ useEffect(() => { const subscription = form.watch( (value, { name }) => { - console.log(name); if (!!name && name.split(".")[0] !== "schedule" && name !== "name") handleSubmit(value as AvailabilityFormValues); }, @@ -507,23 +508,17 @@ export function AvailabilitySettings({ )} - {!isPlatform ? ( -
- {schedule?.workingHours && ( - - )} -
- ) : ( - <> + {enableOverrides && ( + )}
diff --git a/packages/platform/atoms/availability/atom-api-transformers/transformAtomScheduleForApi.ts b/packages/platform/atoms/availability/atom-api-transformers/transformAtomScheduleForApi.ts index 358a05ce7a..a9aa70cc6e 100644 --- a/packages/platform/atoms/availability/atom-api-transformers/transformAtomScheduleForApi.ts +++ b/packages/platform/atoms/availability/atom-api-transformers/transformAtomScheduleForApi.ts @@ -12,11 +12,7 @@ export function transformAtomScheduleForApi(body: AvailabilityFormValues): Updat const overrides = dateOverrides.flatMap( (dateOverridesRanges) => - dateOverridesRanges?.ranges?.map((range) => ({ - date: `${range.start.getUTCFullYear}-${range.start.getUTCMonth}-${range.start.getUTCDate}`, - startTime: `${range.start.getUTCHours}-${range.start.getUTCMinutes}`, - endTime: `${range.end.getUTCHours}-${range.end.getUTCMinutes}`, - })) ?? [] + dateOverridesRanges?.ranges?.map((range) => transfromAtomOverrideForApi(range)) ?? [] ) ?? []; const availability = formatScheduleTime(schedule); @@ -24,6 +20,32 @@ export function transformAtomScheduleForApi(body: AvailabilityFormValues): Updat return { name, timeZone, isDefault, availability, overrides }; } +type AtomDateOverride = { + start: Date; + end: Date; +}; + +function transfromAtomOverrideForApi(override: AtomDateOverride) { + const date = `${override.start.getUTCFullYear()}-${(override.start.getUTCMonth() + 1) + .toString() + .padStart(2, "0")}-${override.start.getUTCDate().toString().padStart(2, "0")}`; + + return { + date, + startTime: padHoursMinutesWithZeros(`${override.start.getUTCHours()}:${override.start.getUTCMinutes()}`), + endTime: padHoursMinutesWithZeros(`${override.end.getUTCHours()}:${override.end.getUTCMinutes()}`), + }; +} + +function padHoursMinutesWithZeros(hhMM: string) { + const [hours, minutes] = hhMM.split(":"); + + const formattedHours = hours.padStart(2, "0"); + const formattedMinutes = minutes.padStart(2, "0"); + + return `${formattedHours}:${formattedMinutes}`; +} + function formatScheduleTime( weekSchedule: AvailabilityFormValues["schedule"] ): UpdateScheduleInput_2024_06_11["availability"] { diff --git a/packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx b/packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx index b44f82d903..7c4bc43adc 100644 --- a/packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx +++ b/packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx @@ -26,6 +26,7 @@ type AvailabilitySettingsPlatformWrapperProps = { onDeleteSuccess?: (res: ApiResponse) => void; onDeleteError?: (err: ApiErrorResponse) => void; disableEditableHeading?: boolean; + enableOverrides?: boolean; }; export const AvailabilitySettingsPlatformWrapper = ({ @@ -36,6 +37,7 @@ export const AvailabilitySettingsPlatformWrapper = ({ onUpdateError, onUpdateSuccess, disableEditableHeading = false, + enableOverrides = false, }: AvailabilitySettingsPlatformWrapperProps) => { const { isLoading, data: schedule } = useSchedule(id); const { data: schedules } = useSchedules(); @@ -99,6 +101,7 @@ export const AvailabilitySettingsPlatformWrapper = ({ }} weekStart="Sunday" timeFormat={timeFormat} + enableOverrides={enableOverrides} isLoading={isLoading} schedule={{ name: atomSchedule.name, diff --git a/packages/platform/atoms/availability/wrappers/AvailabilitySettingsWebWrapper.tsx b/packages/platform/atoms/availability/wrappers/AvailabilitySettingsWebWrapper.tsx index 01843bbd5a..3af1688dee 100644 --- a/packages/platform/atoms/availability/wrappers/AvailabilitySettingsWebWrapper.tsx +++ b/packages/platform/atoms/availability/wrappers/AvailabilitySettingsWebWrapper.tsx @@ -86,6 +86,7 @@ export const AvailabilitySettingsWebWrapper = () => { isDeleting={deleteMutation.isPending} isLoading={isPending} isSaving={updateMutation.isPending} + enableOverrides={true} timeFormat={timeFormat} weekStart={me.data?.weekStart || "Sunday"} backPath={fromEventType ? true : "/availability"} diff --git a/packages/platform/atoms/src/components/ui/dialog.tsx b/packages/platform/atoms/src/components/ui/dialog.tsx index e35cad9be8..9e3d69ae5c 100644 --- a/packages/platform/atoms/src/components/ui/dialog.tsx +++ b/packages/platform/atoms/src/components/ui/dialog.tsx @@ -33,20 +33,24 @@ const DialogContent = React.forwardRef< React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( <> - - - {children} - - - Close - - + +
+ + + {children} + + + Close + + +
+ )); DialogContent.displayName = DialogPrimitive.Content.displayName; diff --git a/packages/platform/examples/base/src/pages/availability.tsx b/packages/platform/examples/base/src/pages/availability.tsx index ce64dbb4a5..6be3b2ad4f 100644 --- a/packages/platform/examples/base/src/pages/availability.tsx +++ b/packages/platform/examples/base/src/pages/availability.tsx @@ -11,6 +11,7 @@ export default function Availability(props: { calUsername: string; calEmail: str