Fixes for advanced tabs form logic (#4731)

* Fixes for advanced tabs form logic

* Typefix

Co-authored-by: Alex van Andel <me@alexvanandel.com>

apps/web/components/v2/eventtype/EventAdvancedTab.tsx

@@ -42,7 +42,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
   const [hashedLinkVisible, setHashedLinkVisible] = useState(!!eventType.hashedLink);
   const [hashedUrl, setHashedUrl] = useState(eventType.hashedLink?.link);
   const [seatsInputVisible, setSeatsInputVisible] = useState(!!eventType.seatsPerTimeSlot);
-  const [seatsPerTimeSlot, setSeatsPerTimeSlot] = useState(eventType.seatsPerTimeSlot || 2);
   const [customInputs, setCustomInputs] = useState<EventTypeCustomInput[]>(
     eventType.customInputs.sort((a, b) => a.id - b.id) || []
   );
@@ -51,7 +50,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
   const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;
 
   const animationRef = useRef(null);
-  const seatsEnabled = !!eventType.seatsPerTimeSlot;
+  const seatsEnabled = formMethods.getValues("seatsPerTimeSlotEnabled");
 
   useEffect(() => {
     animationRef.current && autoAnimate(animationRef.current);
@@ -313,45 +312,57 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
       />
       <hr />
       <Controller
-        name="seatsPerTimeSlot"
+        name="seatsPerTimeSlotEnabled"
         control={formMethods.control}
-        defaultValue={seatsPerTimeSlot}
+        defaultValue={!!eventType.seatsPerTimeSlot}
         render={({ field: { value, onChange } }) => (
-          <>
-            <div className="flex space-x-3">
-              <Switch
-                name="seatsPerTimeSlot"
-                checked={seatsInputVisible}
-                onCheckedChange={(e) => {
-                  setSeatsInputVisible(e);
-                  formMethods.setValue("seatsPerTimeSlot", seatsPerTimeSlot);
-                  onChange(e ? seatsPerTimeSlot : null);
-                }}
-                fitToHeight={true}
-              />
-              <div className="flex flex-col">
-                <Label className="text-sm font-semibold leading-none text-black">{t("offer_seats")}</Label>
-                <p className="-mt-2 text-sm leading-normal text-gray-600">{t("offer_seats_description")}</p>
-              </div>
+          <div className="flex space-x-3">
+            <Switch
+              name="seatsPerTimeSlotEnabled"
+              checked={value}
+              onCheckedChange={(e) => {
+                setSeatsInputVisible(e);
+                // Enabling seats will disable guests and requiring confimation until fully supported
+                if (e) {
+                  formMethods.setValue("disableGuests", true);
+                  formMethods.setValue("requiresConfirmation", false);
+                  formMethods.setValue("seatsPerTimeSlot", 2);
+                } else {
+                  formMethods.setValue("seatsPerTimeSlot", null);
+                }
+                onChange(e);
+              }}
+              fitToHeight={true}
+            />
+            <div className="flex flex-col">
+              <Label className="text-sm font-semibold leading-none text-black">{t("offer_seats")}</Label>
+              <p className="-mt-2 text-sm leading-normal text-gray-600">{t("offer_seats_description")}</p>
             </div>
-            {seatsInputVisible && (
-              <div className="">
-                <TextField
-                  required
-                  name="seatsPerTimeSlot"
-                  label={t("number_of_seats")}
-                  type="number"
-                  defaultValue={seatsPerTimeSlot || 2}
-                  addOnSuffix={<>{t("seats")}</>}
-                  onChange={(e) => {
-                    formMethods.setValue("seatsPerTimeSlot", Number(e.target.value));
-                  }}
-                />
-              </div>
-            )}
-          </>
+          </div>
         )}
       />
+      {seatsInputVisible && (
+        <Controller
+          name="seatsPerTimeSlot"
+          control={formMethods.control}
+          defaultValue={eventType.seatsPerTimeSlot}
+          render={({ field: { value, onChange } }) => (
+            <div className="">
+              <TextField
+                required
+                name="seatsPerTimeSlot"
+                label={t("number_of_seats")}
+                type="number"
+                defaultValue={value || 2}
+                addOnSuffix={<>{t("seats")}</>}
+                onChange={(e) => {
+                  onChange(Number(e.target.value));
+                }}
+              />
+            </div>
+          )}
+        />
+      )}
       {showEventNameTip && (
         <Dialog open={showEventNameTip} onOpenChange={setShowEventNameTip}>
           <DialogContent

apps/web/pages/event-types/[type].tsx

@@ -114,6 +114,7 @@ export type FormValues = {
   periodCountCalendarDays: "1" | "0";
   periodDates: { startDate: Date; endDate: Date };
   seatsPerTimeSlot: number | null;
+  seatsPerTimeSlotEnabled: boolean;
   minimumBookingNotice: number;
   beforeBufferTime: number;
   afterBufferTime: number;

apps/web/pages/v2/event-types/[type]/index.tsx

@@ -70,6 +70,7 @@ export type FormValues = {
   periodCountCalendarDays: "1" | "0";
   periodDates: { startDate: Date; endDate: Date };
   seatsPerTimeSlot: number | null;
+  seatsPerTimeSlotEnabled: boolean;
   minimumBookingNotice: number;
   beforeBufferTime: number;
   afterBufferTime: number;
@@ -223,6 +224,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
             locations,
             blockchainId,
             smartContractAddress,
+            // We don't need to send it to the backend
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            seatsPerTimeSlotEnabled,
             ...input
           } = values;
 

packages/ui/v2/core/Switch.tsx

@@ -21,7 +21,8 @@ const Switch = (
     <div className={classNames("flex h-auto w-auto flex-row items-center", props.fitToHeight && "h-fit")}>
       <PrimitiveSwitch.Root
         className={classNames(
-          props.checked ? "bg-gray-900" : "bg-gray-200 hover:bg-gray-300",
+          props.checked ? "bg-gray-900" : "bg-gray-200",
+          primitiveProps.disabled ? "cursor-not-allowed" : "hover:bg-gray-300",
           "focus:ring-brand-800 h-5 w-[34px] rounded-full shadow-none",
           props.className
         )}
@@ -42,7 +43,10 @@ const Switch = (
       {label && (
         <Label.Root
           htmlFor={id}
-          className="ml-2 cursor-pointer align-text-top text-sm font-medium text-gray-900 ltr:ml-3 rtl:mr-3 dark:text-white">
+          className={classNames(
+            "ml-2 align-text-top text-sm font-medium text-gray-900 ltr:ml-3 rtl:mr-3 dark:text-white",
+            primitiveProps.disabled ? "cursor-not-allowed opacity-25" : "cursor-pointer "
+          )}>
           {label}
         </Label.Root>
       )}