diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx index b57f887a39..ead64a76e2 100644 --- a/apps/web/pages/availability/[schedule].tsx +++ b/apps/web/pages/availability/[schedule].tsx @@ -1,124 +1,9 @@ -import { useRouter } from "next/navigation"; -import { useForm } from "react-hook-form"; - -import { withErrorFromUnknown } from "@calcom/lib/getClientErrorFromUnknown"; -import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; -import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { HttpError } from "@calcom/lib/http-error"; import { AvailabilitySettings } from "@calcom/platform-atoms"; -import { trpc } from "@calcom/trpc/react"; -import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery"; -import type { Schedule as ScheduleType, TimeRange } from "@calcom/types/schedule"; -import { showToast } from "@calcom/ui"; import PageWrapper from "@components/PageWrapper"; -type AvailabilityFormValues = { - name: string; - schedule: ScheduleType; - dateOverrides: { ranges: TimeRange[] }[]; - timeZone: string; - isDefault: boolean; -}; - export default function Availability() { - const searchParams = useCompatSearchParams(); - const { t } = useLocale(); - const router = useRouter(); - const utils = trpc.useContext(); - const me = useMeQuery(); - const scheduleId = searchParams?.get("schedule") ? Number(searchParams.get("schedule")) : -1; - const fromEventType = searchParams?.get("fromEventType"); - const { timeFormat } = me.data || { timeFormat: null }; - const { data: schedule, isPending } = trpc.viewer.availability.schedule.get.useQuery( - { scheduleId }, - { - enabled: !!scheduleId, - } - ); - - const form = useForm({ - values: schedule && { - ...schedule, - schedule: schedule?.availability || [], - }, - }); - const updateMutation = trpc.viewer.availability.schedule.update.useMutation({ - onSuccess: async ({ prevDefaultId, currentDefaultId, ...data }) => { - if (prevDefaultId && currentDefaultId) { - // check weather the default schedule has been changed by comparing previous default schedule id and current default schedule id. - if (prevDefaultId !== currentDefaultId) { - // if not equal, invalidate previous default schedule id and refetch previous default schedule id. - utils.viewer.availability.schedule.get.invalidate({ scheduleId: prevDefaultId }); - utils.viewer.availability.schedule.get.refetch({ scheduleId: prevDefaultId }); - } - } - utils.viewer.availability.schedule.get.invalidate({ scheduleId: data.schedule.id }); - utils.viewer.availability.list.invalidate(); - showToast( - t("availability_updated_successfully", { - scheduleName: data.schedule.name, - }), - "success" - ); - }, - onError: (err) => { - if (err instanceof HttpError) { - const message = `${err.statusCode}: ${err.message}`; - showToast(message, "error"); - } - }, - }); - - const deleteMutation = trpc.viewer.availability.schedule.delete.useMutation({ - onError: withErrorFromUnknown((err) => { - showToast(err.message, "error"); - }), - onSettled: () => { - utils.viewer.availability.list.invalidate(); - }, - onSuccess: () => { - showToast(t("schedule_deleted_successfully"), "success"); - router.push("/availability"); - }, - }); - - return ( - { - scheduleId && deleteMutation.mutate({ scheduleId }); - }} - handleSubmit={async ({ dateOverrides, ...values }) => { - scheduleId && - updateMutation.mutate({ - scheduleId, - dateOverrides: dateOverrides.flatMap((override) => override.ranges), - ...values, - }); - }} - /> - ); + return ; } Availability.PageWrapper = PageWrapper; diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx index 05b6675b40..6b8a52035c 100644 --- a/packages/platform/atoms/availability/AvailabilitySettings.tsx +++ b/packages/platform/atoms/availability/AvailabilitySettings.tsx @@ -51,24 +51,6 @@ export type Schedule = { days: number[]; }; -export type TranslationsType = { - save: string; - timezone: string; - availability: string; - set_to_default: string; - delete: string; - delete_schedule: string; - availability_settings: string; - launch_troubleshooter: string; - requires_at_least_one_schedule: string; - delete_schedule_description: string; - name: string; - something_doesnt_look_right: string; - add_an_override: string; - add_time_availability: string; - copy_times_to: string; -}; - export type CustomClassNames = { containerClassName?: string; ctaClassName?: string; @@ -107,7 +89,6 @@ type AvailabilitySettingsProps = { backPath: string | boolean; handleSubmit: (data: AvailabilityFormValues) => Promise; isPlatform?: boolean; - translations?: Partial; customClassNames?: CustomClassNames; }; @@ -252,7 +233,6 @@ export function AvailabilitySettings({ backPath, handleSubmit, isPlatform = false, - translations, customClassNames, }: AvailabilitySettingsProps) { const [openSidebar, setOpenSidebar] = useState(false); @@ -275,11 +255,7 @@ export function AvailabilitySettings({ - {translations?.set_to_default ?? t("set_to_default")} + {t("set_to_default")}
diff --git a/packages/platform/atoms/availability/wrappers/PlatformAvailabilitySettingsWrapper.tsx b/packages/platform/atoms/availability/wrappers/PlatformAvailabilitySettingsWrapper.tsx index fc8faa25b0..2431db771a 100644 --- a/packages/platform/atoms/availability/wrappers/PlatformAvailabilitySettingsWrapper.tsx +++ b/packages/platform/atoms/availability/wrappers/PlatformAvailabilitySettingsWrapper.tsx @@ -8,7 +8,7 @@ import { useMe } from "../../hooks/useMe"; import useUpdateSchedule from "../../hooks/useUpdateSchedule"; import { useToast } from "../../src/components/ui/use-toast"; import type { Schedule } from "../AvailabilitySettings"; -import type { CustomClassNames, TranslationsType } from "../AvailabilitySettings"; +import type { CustomClassNames } from "../AvailabilitySettings"; import { AvailabilitySettings } from "../AvailabilitySettings"; import type { AvailabilityFormValues } from "../types"; @@ -17,7 +17,6 @@ type PlatformAvailabilitySettingsWrapperProps = { labels?: { tooltips: Partial; }; - translations?: Partial; customClassNames?: Partial; onUpdateSuccess?: (res: ApiResponse) => void; onUpdateError?: (err: ApiErrorResponse) => void; @@ -25,27 +24,8 @@ type PlatformAvailabilitySettingsWrapperProps = { onDeleteError?: (err: ApiErrorResponse) => void; }; -const defaultTranslations: TranslationsType = { - availability: "Availability", - set_to_default: "Set to default", - delete: "Delete", - delete_schedule: "Delete schedule", - timezone: "Timezone", - availability_settings: "Availability settings", - launch_troubleshooter: "Launch troubleshooter", - requires_at_least_one_schedule: "Requires at least one schedule", - delete_schedule_description: "Are you sure you want to delete this schedule?", - name: "Name", - something_doesnt_look_right: "Something doesn't look right", - add_an_override: "Add an override", - add_time_availability: "Add new time slot", - copy_times_to: "Copy times to …", - save: "Save", -} as const; - export const PlatformAvailabilitySettingsWrapper = ({ id, - translations = defaultTranslations, customClassNames, onDeleteError, onDeleteSuccess, @@ -144,39 +124,7 @@ export const PlatformAvailabilitySettingsWrapper = ({ isSaving={isSavingInProgress} backPath="" isPlatform={true} - translations={{ ...defaultTranslations, ...translations }} customClassNames={customClassNames} /> ); }; - -[ - [ - { - start: "2024-03-21T09:00:00.000Z", - end: "2024-03-21T17:00:00.000Z", - }, - { - start: "2024-03-21T17:00:00.000Z", - end: "2024-03-21T18:00:00.000Z", - }, - { - start: "2024-03-21T18:00:00.000Z", - end: "2024-03-21T19:00:00.000Z", - }, - ], // thursday - [ - { - start: "2024-03-21T09:00:00.000Z", - end: "2024-03-21T17:00:00.000Z", - }, - { - start: "2024-03-21T17:00:00.000Z", - end: "2024-03-21T18:00:00.000Z", - }, - { - start: "2024-03-21T18:00:00.000Z", - end: "2024-03-21T19:00:00.000Z", - }, - ], //friday -]; diff --git a/packages/platform/atoms/availability/wrappers/WebAvailabilitySettingsWrapper.tsx b/packages/platform/atoms/availability/wrappers/WebAvailabilitySettingsWrapper.tsx new file mode 100644 index 0000000000..cb6b816d8b --- /dev/null +++ b/packages/platform/atoms/availability/wrappers/WebAvailabilitySettingsWrapper.tsx @@ -0,0 +1,113 @@ +import { useRouter } from "next/navigation"; +import { useForm } from "react-hook-form"; + +import { withErrorFromUnknown } from "@calcom/lib/getClientErrorFromUnknown"; +import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { HttpError } from "@calcom/lib/http-error"; +import { trpc } from "@calcom/trpc/react"; +import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery"; +import { showToast } from "@calcom/ui"; + +import { AvailabilitySettings } from "../AvailabilitySettings"; +import type { AvailabilityFormValues } from "../types"; + +export const WebAvailabilitySettingsWrapper = () => { + const searchParams = useCompatSearchParams(); + const { t } = useLocale(); + const router = useRouter(); + const utils = trpc.useContext(); + const me = useMeQuery(); + const scheduleId = searchParams?.get("schedule") ? Number(searchParams.get("schedule")) : -1; + const fromEventType = searchParams?.get("fromEventType"); + const { timeFormat } = me.data || { timeFormat: null }; + const { data: schedule, isPending } = trpc.viewer.availability.schedule.get.useQuery( + { scheduleId }, + { + enabled: !!scheduleId, + } + ); + + const form = useForm({ + values: schedule && { + ...schedule, + schedule: schedule?.availability || [], + }, + }); + const updateMutation = trpc.viewer.availability.schedule.update.useMutation({ + onSuccess: async ({ prevDefaultId, currentDefaultId, ...data }) => { + if (prevDefaultId && currentDefaultId) { + // check weather the default schedule has been changed by comparing previous default schedule id and current default schedule id. + if (prevDefaultId !== currentDefaultId) { + // if not equal, invalidate previous default schedule id and refetch previous default schedule id. + utils.viewer.availability.schedule.get.invalidate({ scheduleId: prevDefaultId }); + utils.viewer.availability.schedule.get.refetch({ scheduleId: prevDefaultId }); + } + } + utils.viewer.availability.schedule.get.invalidate({ scheduleId: data.schedule.id }); + utils.viewer.availability.list.invalidate(); + showToast( + t("availability_updated_successfully", { + scheduleName: data.schedule.name, + }), + "success" + ); + }, + onError: (err) => { + if (err instanceof HttpError) { + const message = `${err.statusCode}: ${err.message}`; + showToast(message, "error"); + } + }, + }); + + const deleteMutation = trpc.viewer.availability.schedule.delete.useMutation({ + onError: withErrorFromUnknown((err) => { + showToast(err.message, "error"); + }), + onSettled: () => { + utils.viewer.availability.list.invalidate(); + }, + onSuccess: () => { + showToast(t("schedule_deleted_successfully"), "success"); + router.push("/availability"); + }, + }); + + return ( + { + scheduleId && deleteMutation.mutate({ scheduleId }); + }} + handleSubmit={async ({ dateOverrides, ...values }) => { + scheduleId && + updateMutation.mutate({ + scheduleId, + dateOverrides: dateOverrides.flatMap((override) => override.ranges), + ...values, + }); + }} + /> + ); +}; diff --git a/packages/platform/atoms/index.ts b/packages/platform/atoms/index.ts index 3223d621d0..60b8a3489a 100644 --- a/packages/platform/atoms/index.ts +++ b/packages/platform/atoms/index.ts @@ -1,6 +1,6 @@ export { BookerWebWrapper as Booker } from "./booker"; +export { WebAvailabilitySettingsWrapper as AvailabilitySettings } from "./availability/wrappers/WebAvailabilitySettingsWrapper"; export { CalProvider } from "./cal-provider/CalProvider"; -export { AvailabilitySettings } from "./availability"; export { useIsPlatform } from "./hooks/useIsPlatform"; export { useAtomsContext } from "./hooks/useAtomsContext"; export { useHandleBookEvent } from "./hooks/useHandleBookEvent";