From e06c07bfec4c38b762dd889549586dc86744a9e0 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Thu, 31 Aug 2023 21:32:52 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20email=20embed=20=E2=80=93=20remove=20col?=
 =?UTF-8?q?lapsible=20and=20permanently=20show=20times=20(#10996)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-authored-by: Mehul <mehulzr@gmail.com>
---
 packages/features/embed/Embed.tsx | 84 +++++++++++++------------------
 1 file changed, 34 insertions(+), 50 deletions(-)

diff --git a/packages/features/embed/Embed.tsx b/packages/features/embed/Embed.tsx
index 444abbbdf2..d1eac52d5b 100644
--- a/packages/features/embed/Embed.tsx
+++ b/packages/features/embed/Embed.tsx
@@ -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 ">