WIP

2024-01-10 16:38:59 +04:00 · 2024-01-10 16:38:59 +04:00 · 6ebf167d4b
parent b2c6122ed7
commit 6ebf167d4b
5 changed files with 38 additions and 29 deletions
--- a/apps/web/components/eventtype/EventAvailabilityTab.tsx
+++ b/apps/web/components/eventtype/EventAvailabilityTab.tsx
@ -155,11 +155,8 @@ EventTypeScheduleDetails.displayName = "EventTypeScheduleDetails";
 const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
  const { t } = useLocale();
  const formMethods = useFormContext<FormValues>();
-  const { shouldLockIndicator, isManagedEventType, isChildrenManagedEventType } = useLockedFieldsManager(
-    eventType,
-    formMethods,
-    t
-  );
+  const { shouldLockIndicator, shouldLockDisableProps, isManagedEventType, isChildrenManagedEventType } =
+    useLockedFieldsManager(eventType, formMethods, t);
  const { watch, setValue, getValues } = useFormContext<FormValues>();
  const watchSchedule = watch("schedule");
  const [options, setOptions] = useState<AvailabilityOption[]>([]);
@ -234,7 +231,7 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
      <div className="border-subtle rounded-t-md border p-6">
        <label htmlFor="availability" className="text-default mb-2 block text-sm font-medium leading-none">
          {t("availability")}
-          {shouldLockIndicator("availability")}
+          {(isManagedEventType || isChildrenManagedEventType) && shouldLockIndicator("availability")}
        </label>
        {isLoading && <SelectSkeletonLoader />}
        {!isLoading && (
@ -245,6 +242,7 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
                <Select
                  placeholder={t("select")}
                  options={options}
+                  isDisabled={shouldLockDisableProps("availability").disabled}
                  isSearchable={false}
                  onChange={(selected) => {
                    field.onChange(selected?.value || null);
--- a/apps/web/components/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/eventtype/EventLimitsTab.tsx
@ -146,6 +146,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy

  const bookingLimitsLocked = shouldLockDisableProps("bookingLimits");
  const durationLimitsLocked = shouldLockDisableProps("durationLimits");
+  const onlyFirstAvailableSlotLocked = shouldLockDisableProps("onlyShowFirstAvailableSlot");
  const periodTypeLocked = shouldLockDisableProps("periodType");
  const offsetStartLockedProps = shouldLockDisableProps("offsetStart");

@ -196,7 +197,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                    onChange={(val) => {
                      if (val) onChange(val.value);
                    }}
-                    isDisabled={shouldLockDisableProps("bookingLimits").disabled}
+                    isDisabled={shouldLockDisableProps("beforeBufferTime").disabled}
                    defaultValue={
                      beforeBufferOptions.find((option) => option.value === value) || beforeBufferOptions[0]
                    }
@ -232,7 +233,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                    onChange={(val) => {
                      if (val) onChange(val.value);
                    }}
-                    isDisabled={shouldLockDisableProps("bookingLimits").disabled}
+                    isDisabled={shouldLockDisableProps("afterBufferTime").disabled}
                    defaultValue={
                      afterBufferOptions.find((option) => option.value === value) || afterBufferOptions[0]
                    }
@ -343,6 +344,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
              title={t("limit_booking_only_first_slot")}
              description={t("limit_booking_only_first_slot_description")}
              checked={isChecked}
+              {...onlyFirstAvailableSlotLocked}
              onCheckedChange={(active) => {
                formMethods.setValue("onlyShowFirstAvailableSlot", active ?? false);
              }}
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@ -203,6 +203,7 @@ export const EventSetupTab = (
                  required
                  onChange={onChange}
                  value={value}
+                  {...(shouldLockDisableProps("locations").disabled ? { disabled: true } : {})}
                  className="my-0"
                  {...rest}
                />
@ -222,6 +223,7 @@ export const EventSetupTab = (
              return (
                <PhoneInput
                  required
+                  isDisabled={shouldLockDisableProps("locations").disabled}
                  placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
                  name={`locations[${index}].${eventLocationType.defaultValueVariable}`}
                  value={value}
@ -292,16 +294,18 @@ export const EventSetupTab = (
                      }
                    }}
                  />
-                  <button
-                    data-testid={`delete-locations.${index}.type`}
-                    className="min-h-9 block h-9 px-2"
-                    type="button"
-                    onClick={() => remove(index)}
-                    aria-label={t("remove")}>
-                    <div className="h-4 w-4">
-                      <X className="border-l-1 hover:text-emphasis text-subtle h-4 w-4" />
-                    </div>
-                  </button>
+                  {!(shouldLockDisableProps("locations").disabled && isChildrenManagedEventType) && (
+                    <button
+                      data-testid={`delete-locations.${index}.type`}
+                      className="min-h-9 block h-9 px-2"
+                      type="button"
+                      onClick={() => remove(index)}
+                      aria-label={t("remove")}>
+                      <div className="h-4 w-4">
+                        <X className="border-l-1 hover:text-emphasis text-subtle h-4 w-4" />
+                      </div>
+                    </button>
+                  )}
                </div>

                {eventLocationType?.organizerInputType && (
@ -333,6 +337,7 @@ export const EventSetupTab = (
                      <CheckboxField
                        name={`locations[${index}].displayLocationPublicly`}
                        data-testid="display-location"
+                        isDisabled={shouldLockDisableProps("locations").disabled}
                        defaultChecked={defaultLocation?.displayLocationPublicly}
                        description={t("display_location_label")}
                        onChange={(e) => {
@ -421,7 +426,8 @@ export const EventSetupTab = (
              </a>
            </p>
          )}
-          {validLocations.length > 0 && !isManagedEventType && !isChildrenManagedEventType && (
+          {validLocations.length > 0 && !shouldLockDisableProps("locations").disabled && (
+            //  && !isChildrenManagedEventType : Add this to hide add-location button only when location is disabled by Admin
            <li>
              <Button
                data-testid="add-location"
@ -448,6 +454,8 @@ export const EventSetupTab = (

  const lengthLockedProps = shouldLockDisableProps("length");
  const descriptionLockedProps = shouldLockDisableProps("description");
+  const urlLockedProps = shouldLockDisableProps("slug");
+  const titleLockedProps = shouldLockDisableProps("title");
  const urlPrefix = orgBranding
    ? orgBranding?.fullDomain.replace(/^(https?:|)\/\//, "")
    : `${CAL_URL?.replace(/^(https?:|)\/\//, "")}`;
@ -459,14 +467,14 @@ export const EventSetupTab = (
          <TextField
            required
            label={t("title")}
-            {...shouldLockDisableProps("title")}
+            {...(isManagedEventType || isChildrenManagedEventType ? titleLockedProps : {})}
            defaultValue={eventType.title}
            {...formMethods.register("title")}
          />
          <div>
            <Label htmlFor="editor">
              {t("description")}
-              {shouldLockIndicator("description")}
+              {(isManagedEventType || isChildrenManagedEventType) && shouldLockIndicator("description")}
            </Label>
            <DescriptionEditor
              description={eventType?.description}
@ -476,7 +484,7 @@ export const EventSetupTab = (
          <TextField
            required
            label={t("URL")}
-            {...shouldLockDisableProps("slug")}
+            {...(isManagedEventType || isChildrenManagedEventType ? urlLockedProps : {})}
            defaultValue={eventType.slug}
            addOnLeading={
              <>
@ -559,7 +567,7 @@ export const EventSetupTab = (
            <TextField
              required
              type="number"
-              {...lengthLockedProps}
+              {...(isManagedEventType || isChildrenManagedEventType ? lengthLockedProps : {})}
              label={t("duration")}
              defaultValue={eventType.length ?? 15}
              {...formMethods.register("length")}
@ -589,14 +597,15 @@ export const EventSetupTab = (
            </div>
          )}
        </div>
-
+        {console.log("Event Type=>", eventType)}
        <div className="border-subtle rounded-lg border p-6">
          <div>
            <Skeleton as={Label} loadingClassName="w-16" htmlFor="locations">
              {t("location")}
+              {/*improve shouldLockIndicator function to also accept eventType and then conditionally render
+              based on Managed Event type or not.*/}
              {shouldLockIndicator("locations")}
            </Skeleton>
-
            <Controller
              name="locations"
              control={formMethods.control}
--- a/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx
+++ b/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx
@ -139,6 +139,7 @@ const useLockedFieldsManager = (
      // eslint-disable-next-line react-hooks/rules-of-hooks
      fieldStates[fieldName] = useState(getLockedInitState(fieldName));
    }
+    console.log("fieldStates", fieldStates);
    return LockedIndicator(
      isManagedEventType,
      fieldStates[fieldName],
--- a/packages/features/ee/managed-event-types/lib/handleChildrenEventTypes.ts
+++ b/packages/features/ee/managed-event-types/lib/handleChildrenEventTypes.ts
@ -122,9 +122,7 @@ export default async function handleChildrenEventTypes({

  // Define what values are expected to be changed from a managed event type
  const allManagedEventTypePropsZod = _EventTypeModel.pick(allManagedEventTypeProps);
-  const managedEventTypeValues = allManagedEventTypePropsZod
-    .omit(unlockedManagedEventTypeProps)
-    .parse(eventType);
+  const managedEventTypeValues = allManagedEventTypePropsZod.parse(eventType);

  // Check we are certainly dealing with a managed event type through its metadata
  if (!managedEventTypeValues.metadata?.managedEventConfig)
@ -220,7 +218,7 @@ export default async function handleChildrenEventTypes({
      userIds: oldUserIds,
      teamName: oldEventType.team?.name || null,
    });
-
+    console.log(managedEventTypeValues);
    // Update event types for old users
    const oldEventTypes = await prisma.$transaction(
      oldUserIds.map((userId) => {
@ -233,6 +231,7 @@ export default async function handleChildrenEventTypes({
          },
          data: {
            ...managedEventTypeValues,
+            locations: managedEventTypeValues.locations,
            hidden: children?.find((ch) => ch.owner.id === userId)?.hidden ?? false,
            bookingLimits:
              (managedEventTypeValues.bookingLimits as unknown as Prisma.InputJsonObject) ?? undefined,