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
Peer Richelsen 2023-08-31 21:32:52 +02:00 committed by GitHub
parent 332c00dac2
commit e06c07bfec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 50 deletions

View File

@ -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 ">