From 28b94a865f0aa773ac197488708350cc53bd5723 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Thu, 17 Aug 2023 15:12:33 +0100
Subject: [PATCH] perf: Create a seperate component for dependencies of
 BookEventForm (#10808)

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
---
 .../BookEventForm/BookFormAsModal.tsx         | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx
index 8a2a71a569..a43f58eb3b 100644
--- a/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx
+++ b/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx
@@ -9,35 +9,42 @@ import { useBookerStore } from "../../store";
 import { useEvent } from "../../utils/event";
 import { BookEventForm } from "./BookEventForm";
 
-export function BookFormAsModal({ visible, onCancel }: { visible: boolean; onCancel: () => void }) {
+const BookEventFormWrapper = ({ onCancel }: { onCancel: () => void }) => {
   const { t } = useLocale();
   const selectedTimeslot = useBookerStore((state) => state.selectedTimeslot);
   const selectedDuration = useBookerStore((state) => state.selectedDuration);
   const { data } = useEvent();
   const parsedSelectedTimeslot = dayjs(selectedTimeslot);
   const { timeFormat, timezone } = useTimePreferences();
+  return (
+    <>
+      <h1 className="font-cal text-emphasis text-xl leading-5">{t("confirm_your_details")} </h1>
+      <div className="my-4 flex space-x-2 rounded-md leading-none">
+        <Badge variant="grayWithoutHover" startIcon={Calendar} size="lg">
+          <span>
+            {parsedSelectedTimeslot.format("LL")} {parsedSelectedTimeslot.tz(timezone).format(timeFormat)}
+          </span>
+        </Badge>
+        {(selectedDuration || data?.length) && (
+          <Badge variant="grayWithoutHover" startIcon={Clock} size="lg">
+            <span>{selectedDuration || data?.length}</span>
+          </Badge>
+        )}
+      </div>
+      <BookEventForm onCancel={onCancel} />
+    </>
+  );
+};
 
+export const BookFormAsModal = ({ visible, onCancel }: { visible: boolean; onCancel: () => void }) => {
   return (
     <Dialog open={visible} onOpenChange={onCancel}>
       <DialogContent
         type={undefined}
         enableOverflow
         className="[&_.modalsticky]:border-t-subtle [&_.modalsticky]:bg-default max-h-[80vh] pb-0 [&_.modalsticky]:sticky [&_.modalsticky]:bottom-0 [&_.modalsticky]:left-0 [&_.modalsticky]:right-0 [&_.modalsticky]:-mx-8 [&_.modalsticky]:border-t [&_.modalsticky]:px-8 [&_.modalsticky]:py-4">
-        <h1 className="font-cal text-emphasis text-xl leading-5">{t("confirm_your_details")} </h1>
-        <div className="my-4 flex space-x-2 rounded-md leading-none">
-          <Badge variant="grayWithoutHover" startIcon={Calendar} size="lg">
-            <span>
-              {parsedSelectedTimeslot.format("LL")} {parsedSelectedTimeslot.tz(timezone).format(timeFormat)}
-            </span>
-          </Badge>
-          {(selectedDuration || data?.length) && (
-            <Badge variant="grayWithoutHover" startIcon={Clock} size="lg">
-              <span>{selectedDuration || data?.length}</span>
-            </Badge>
-          )}
-        </div>
-        <BookEventForm onCancel={onCancel} />
+        <BookEventFormWrapper onCancel={onCancel} />
       </DialogContent>
     </Dialog>
   );
-}
+};