update availability settings view
This commit is contained in:
parent
bb40308eaf
commit
b0ee40073c
|
@ -1,14 +1,19 @@
|
||||||
|
import { LargeScreenCTA } from "availability/cta/large-screen";
|
||||||
|
import { SmallScreenCTA } from "availability/cta/small-screen";
|
||||||
import { useClientSchedule } from "availability/hooks/useClientSchedule";
|
import { useClientSchedule } from "availability/hooks/useClientSchedule";
|
||||||
import { useProfileInfo } from "availability/hooks/useProfileInfo";
|
import { useProfileInfo } from "availability/hooks/useProfileInfo";
|
||||||
|
import { Timezone } from "availability/timezone";
|
||||||
|
import { Troubleshooter } from "availability/troubleshooter";
|
||||||
|
import { useState } from "react";
|
||||||
import { useForm, Controller } from "react-hook-form";
|
import { useForm, Controller } from "react-hook-form";
|
||||||
|
|
||||||
import Shell from "@calcom/features/shell/Shell";
|
import Shell from "@calcom/features/shell/Shell";
|
||||||
import { availabilityAsString } from "@calcom/lib/availability";
|
import { availabilityAsString } from "@calcom/lib/availability";
|
||||||
import type { Schedule as ScheduleType, TimeRange } from "@calcom/types/schedule";
|
import type { Schedule as ScheduleType, TimeRange } from "@calcom/types/schedule";
|
||||||
import { SkeletonText } from "@calcom/ui";
|
import { SkeletonText, VerticalDivider, Button, Form } from "@calcom/ui";
|
||||||
|
import { MoreVertical } from "@calcom/ui/components/icon";
|
||||||
import EditableHeading from "@components/ui/EditableHeading";
|
|
||||||
|
|
||||||
|
import EditableHeading from "../../../../apps/web/components/ui/EditableHeading";
|
||||||
import { useApiKey } from "../cal-provider";
|
import { useApiKey } from "../cal-provider";
|
||||||
|
|
||||||
export type AvailabilityFormValues = {
|
export type AvailabilityFormValues = {
|
||||||
|
@ -31,6 +36,7 @@ export function Availability({ id }: AvailabilityProps) {
|
||||||
const user = useProfileInfo(key);
|
const user = useProfileInfo(key);
|
||||||
|
|
||||||
const { timeFormat } = user.data || { timeFormat: null };
|
const { timeFormat } = user.data || { timeFormat: null };
|
||||||
|
const [openSidebar, setOpenSidebar] = useState(false);
|
||||||
|
|
||||||
const form = useForm<AvailabilityFormValues>({
|
const form = useForm<AvailabilityFormValues>({
|
||||||
values: schedule && {
|
values: schedule && {
|
||||||
|
@ -71,6 +77,42 @@ export function Availability({ id }: AvailabilityProps) {
|
||||||
<SkeletonText className="h-4 w-48" />
|
<SkeletonText className="h-4 w-48" />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
/>
|
CTA={
|
||||||
|
<div className="flex items-center justify-end">
|
||||||
|
<LargeScreenCTA
|
||||||
|
isSwitchDisabled={isLoading || schedule?.isDefault}
|
||||||
|
isSwitchChecked={form.watch("isDefault")}
|
||||||
|
onSwitchCheckedChange={(e) => {
|
||||||
|
form.setValue("isDefault", e);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<VerticalDivider className="hidden sm:inline" />
|
||||||
|
<SmallScreenCTA isSidebarOpen={openSidebar} toggleSidebar={() => setOpenSidebar(false)} />
|
||||||
|
<div className="border-default border-l-2" />
|
||||||
|
<Button className="ml-4 lg:ml-0" type="submit" form="availability-form">
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="ml-3 sm:hidden"
|
||||||
|
StartIcon={MoreVertical}
|
||||||
|
variant="icon"
|
||||||
|
color="secondary"
|
||||||
|
onClick={() => setOpenSidebar(true)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}>
|
||||||
|
<div className="mt-4 w-full md:mt-0">
|
||||||
|
<Form form={form} id="availability-form" className="flex flex-col sm:mx-0 xl:flex-row xl:space-x-6">
|
||||||
|
<div className="flex-1 flex-row xl:mr-0" />
|
||||||
|
<div className="min-w-40 col-span-3 hidden space-y-2 md:block lg:col-span-1">
|
||||||
|
<div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
|
||||||
|
<Timezone />
|
||||||
|
<hr className="border-subtle my-6 mr-8" />
|
||||||
|
<Troubleshooter isDisplayBlock={false} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</Shell>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user