fix: email embed – remove collapsible and permanently show times (#10996)
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Mehul <mehulzr@gmail.com>pull/11054/head
parent
332c00dac2
commit
e06c07bfec
|
@ -38,7 +38,7 @@ import {
|
|||
TextField,
|
||||
TimezoneSelect,
|
||||
} from "@calcom/ui";
|
||||
import { ArrowDown, ArrowLeft, ArrowUp, Sun } from "@calcom/ui/components/icon";
|
||||
import { ArrowLeft, Sun } from "@calcom/ui/components/icon";
|
||||
|
||||
import { getDimension } from "./lib/getDimension";
|
||||
import type { EmbedTabs, EmbedType, EmbedTypes, PreviewState } from "./types";
|
||||
|
@ -223,58 +223,42 @@ const EmailEmbed = ({ eventType, username }: { eventType?: EventType; username:
|
|||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="mb-[9px] font-medium">
|
||||
<Collapsible open>
|
||||
<CollapsibleContent>
|
||||
<div className="text-default text-sm">{t("select_date")}</div>
|
||||
<DatePicker
|
||||
isLoading={schedule.isLoading}
|
||||
onChange={(date) => setSelectedDate(date ? date.format("YYYY-MM-DD") : date)}
|
||||
onMonthChange={(date) => {
|
||||
setMonth(date.format("YYYY-MM"));
|
||||
setSelectedDate(date.format("YYYY-MM-DD"));
|
||||
}}
|
||||
includedDates={nonEmptyScheduleDays}
|
||||
locale={i18n.language}
|
||||
browsingDate={month ? dayjs(month) : undefined}
|
||||
selected={dayjs(selectedDate)}
|
||||
weekStart={weekdayToWeekIndex(event?.data?.users?.[0]?.weekStart)}
|
||||
eventSlug={eventType?.slug}
|
||||
/>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<div className="text-default text-sm">{t("select_date")}</div>
|
||||
<DatePicker
|
||||
isLoading={schedule.isLoading}
|
||||
onChange={(date) => setSelectedDate(date ? date.format("YYYY-MM-DD") : date)}
|
||||
onMonthChange={(date) => {
|
||||
setMonth(date.format("YYYY-MM"));
|
||||
setSelectedDate(date.format("YYYY-MM-DD"));
|
||||
}}
|
||||
includedDates={nonEmptyScheduleDays}
|
||||
locale={i18n.language}
|
||||
browsingDate={month ? dayjs(month) : undefined}
|
||||
selected={dayjs(selectedDate)}
|
||||
weekStart={weekdayToWeekIndex(event?.data?.users?.[0]?.weekStart)}
|
||||
eventSlug={eventType?.slug}
|
||||
/>
|
||||
</div>
|
||||
{selectedDate ? (
|
||||
<div className="mt-[9px] font-medium ">
|
||||
<Collapsible open>
|
||||
<CollapsibleContent>
|
||||
<div
|
||||
className="text-default mb-[9px] flex cursor-pointer items-center justify-between text-sm"
|
||||
onClick={() => setSelectTime((prev) => !prev)}>
|
||||
<p>{t("select_time")}</p>{" "}
|
||||
<>
|
||||
{!selectedDate || !selectTime ? <ArrowDown className="w-4" /> : <ArrowUp className="w-4" />}
|
||||
</>
|
||||
</div>
|
||||
{selectTime && selectedDate ? (
|
||||
<div className="flex h-full w-full flex-row gap-4">
|
||||
<AvailableTimes
|
||||
className="w-full"
|
||||
date={dayjs(selectedDate)}
|
||||
selectedSlots={
|
||||
eventType.slug &&
|
||||
selectedDatesAndTimes &&
|
||||
selectedDatesAndTimes[eventType.slug] &&
|
||||
selectedDatesAndTimes[eventType.slug][selectedDate as string]
|
||||
? selectedDatesAndTimes[eventType.slug][selectedDate as string]
|
||||
: undefined
|
||||
}
|
||||
onTimeSelect={onTimeSelect}
|
||||
slots={slots}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
{selectTime && selectedDate ? (
|
||||
<div className="flex h-full w-full flex-row gap-4">
|
||||
<AvailableTimes
|
||||
className="w-full"
|
||||
date={dayjs(selectedDate)}
|
||||
selectedSlots={
|
||||
eventType.slug &&
|
||||
selectedDatesAndTimes &&
|
||||
selectedDatesAndTimes[eventType.slug] &&
|
||||
selectedDatesAndTimes[eventType.slug][selectedDate as string]
|
||||
? selectedDatesAndTimes[eventType.slug][selectedDate as string]
|
||||
: undefined
|
||||
}
|
||||
onTimeSelect={onTimeSelect}
|
||||
slots={slots}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="mb-[9px] font-medium ">
|
||||
|
|
Loading…
Reference in New Issue