{t("event_types_page_title")}| Cal.com

; type Profile = PageProps["profiles"][number]; const EventTypesPage = (props: PageProps) => { const { t } = useLocale(); const CreateFirstEventTypeView = () => (

{t("new_event_type_heading")}

{t("new_event_type_description")}

); return (

{t("event_types_page_title")}| Cal.com ) }> {props.user.plan === "FREE" && !props.canAddEvents && ( {t("plan_upgrade")}} message={ <> {t("to_upgrade_go_to")}{" "} {"https://cal.com/upgrade"} } className="my-4" /> )} {props.eventTypes && props.eventTypes.map((input) => ( {/* hide list heading when there is only one (current user) */} {(props.eventTypes.length !== 1 || input.teamId) && ( )} ))} {props.eventTypes.length === 0 && }

); }; const CreateNewEventDialog = ({ profiles, canAddEvents }: { profiles: Profile[]; canAddEvents: boolean }) => { const router = useRouter(); const teamId: number | null = Number(router.query.teamId) || null; const modalOpen = useToggleQuery("new"); const { t } = useLocale(); const createMutation = useMutation(createEventType, { onSuccess: async ({ eventType }) => { await router.push("/event-types/" + eventType.id); showToast(`${eventType.title} event type created successfully`, "success"); }, onError: (err: HttpError) => { const message = `${err.statusCode}: ${err.message}`; showToast(message, "error"); }, }); const slugRef = useRef(null); return ( { router.push(isOpen ? modalOpen.hrefOn : modalOpen.hrefOff); }}> {!profiles.filter((profile) => profile.teamId).length && ( )} {profiles.filter((profile) => profile.teamId).length > 0 && ( {t("new_event_subtitle")} {profiles.map((profile) => ( router.push({ pathname: router.pathname, query: { ...router.query, new: "1", eventPage: profile.slug, ...(profile.teamId ? { teamId: profile.teamId, } : {}), }, }) }> {profile.name ? profile.name : profile.slug} ))} )}

{teamId ? t("add_new_team_event_type") : t("add_new_event_type")}

{t("new_event_type_to_book_description")}

{ e.preventDefault(); const target = e.target as unknown as Record< "title" | "slug" | "description" | "length" | "schedulingType", { value: string } >; const payload = { title: target.title.value, slug: target.slug.value, description: target.description.value, length: parseInt(target.length.value), }; if (router.query.teamId) { payload.teamId = parseInt(asStringOrNull(router.query.teamId), 10); payload.schedulingType = target.schedulingType.value; } createMutation.mutate(payload); }}>

{t("title")}

{ if (!slugRef.current) { return; } slugRef.current.value = e.target.value.replace(/\s+/g, "-").toLowerCase(); }} type="text" name="title" id="title" required className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-neutral-900 focus:border-neutral-900 sm:text-sm" placeholder={t("quick_chat")} />

{t("url")}

{process.env.NEXT_PUBLIC_APP_URL}/{router.query.eventPage || profiles[0].slug}/

{t("description")}

</div>
            </div>
            <div className="mb-4">
              <label htmlFor="length" className="block text-sm font-medium text-gray-700">
                {t("length")}
              </label>
              <div className="relative mt-1 rounded-sm shadow-sm">
                <input
                  type="number"
                  name="length"
                  id="length"
                  required
                  className="block w-full pr-20 border-gray-300 rounded-sm focus:ring-neutral-900 focus:border-neutral-900 sm:text-sm"
                  placeholder="15"
                  defaultValue={15}
                />
                <div className="absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-gray-400">
                  {t("minutes")}
                </div>
              </div>
            </div>
          </div>
          {teamId && (
            <div className="mb-4">
              <label htmlFor="schedulingType" className="block text-sm font-medium text-gray-700">
                {t("scheduling_type")}
              </label>
              <RadioArea.Group
                name="schedulingType"
                className="relative flex mt-1 space-x-6 rounded-sm shadow-sm">
                <RadioArea.Item value={SchedulingType.COLLECTIVE} className="w-1/2 text-sm">
                  <strong className="block mb-1">{t("collective")}</strong>
                  <p>{t("collective_description")}</p>
                </RadioArea.Item>
                <RadioArea.Item value={SchedulingType.ROUND_ROBIN} className="w-1/2 text-sm">
                  <strong className="block mb-1">{t("round_robin")}</strong>
                  <p>{t("round_robin_description")}</p>
                </RadioArea.Item>
              </RadioArea.Group>
            </div>
          )}
          <div className="mt-8 sm:flex sm:flex-row-reverse gap-x-2">
            <Button type="submit" loading={createMutation.isLoading}>
              {t("continue")}
            </Button>
            <DialogClose asChild>
              <Button color="secondary">{t("cancel")}</Button>
            </DialogClose>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
};

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const session = await getSession(context);
  const locale = await getOrSetUserLocaleFromHeaders(context.req);

if (!session?.user?.id) {
    return { redirect: { permanent: false, destination: "/auth/login" } };
  }

/**
   * This makes the select reusable and type safe.
   * @url https://www.prisma.io/docs/concepts/components/prisma-client/advanced-type-safety/prisma-validator#using-the-prismavalidator
   * */
  const eventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
    id: true,
    title: true,
    description: true,
    length: true,
    schedulingType: true,
    slug: true,
    hidden: true,
    price: true,
    currency: true,
    users: {
      select: {
        id: true,
        avatar: true,
        name: true,
      },
    },
  });

const user = await prisma.user.findUnique({
    where: {
      id: session.user.id,
    },
    select: {
      id: true,
      username: true,
      name: true,
      startTime: true,
      endTime: true,
      bufferTime: true,
      avatar: true,
      completedOnboarding: true,
      createdDate: true,
      plan: true,
      teams: {
        where: {
          accepted: true,
        },
        select: {
          role: true,
          team: {
            select: {
              id: true,
              name: true,
              slug: true,
              logo: true,
              members: {
                select: {
                  userId: true,
                },
              },
              eventTypes: {
                select: eventTypeSelect,
              },
            },
          },
        },
      },
      eventTypes: {
        where: {
          team: null,
        },
        select: eventTypeSelect,
      },
    },
  });

if (!user) {
    // this shouldn't happen
    return {
      redirect: {
        permanent: false,
        destination: "/auth/login",
      },
    };
  }

if (
    shouldShowOnboarding({ completedOnboarding: user.completedOnboarding, createdDate: user.createdDate })
  ) {
    return ONBOARDING_NEXT_REDIRECT;
  }

// backwards compatibility, TMP:
  const typesRaw = await prisma.eventType.findMany({
    where: {
      userId: session.user.id,
    },
    select: eventTypeSelect,
  });

type EventTypeGroup = {
    teamId?: number | null;
    profile?: {
      slug: typeof user["username"];
      name: typeof user["name"];
      image: typeof user["avatar"];
    };
    metadata: {
      membershipCount: number;
      readOnly: boolean;
    };
    eventTypes: (typeof user.eventTypes[number] & { $disabled?: boolean })[];
  };

let eventTypeGroups: EventTypeGroup[] = [];
  const eventTypesHashMap = user.eventTypes.concat(typesRaw).reduce((hashMap, newItem) => {
    const oldItem = hashMap[newItem.id] || {};
    hashMap[newItem.id] = { ...oldItem, ...newItem };
    return hashMap;
  }, {} as Record<number, EventTypeGroup["eventTypes"][number]>);
  const mergedEventTypes = Object.values(eventTypesHashMap).map((et, index) => ({
    ...et,
    $disabled: user.plan === "FREE" && index > 0,
  }));

eventTypeGroups.push({
    teamId: null,
    profile: {
      slug: user.username,
      name: user.name,
      image: user.avatar,
    },
    eventTypes: mergedEventTypes,
    metadata: {
      membershipCount: 1,
      readOnly: false,
    },
  });

eventTypeGroups = ([] as EventTypeGroup[]).concat(
    eventTypeGroups,
    user.teams.map((membership) => ({
      teamId: membership.team.id,
      profile: {
        name: membership.team.name,
        image: membership.team.logo || "",
        slug: "team/" + membership.team.slug,
      },
      metadata: {
        membershipCount: membership.team.members.length,
        readOnly: membership.role !== "OWNER",
      },
      eventTypes: membership.team.eventTypes,
    }))
  );

const userObj = Object.assign({}, user, {
    createdDate: user.createdDate.toString(),
  });

const canAddEvents = user.plan !== "FREE" || eventTypeGroups[0].eventTypes.length < 1;

return {
    props: {
      session,
      localeProp: locale,
      canAddEvents,
      user: userObj,
      // don't display event teams without event types,
      eventTypes: eventTypeGroups.filter((groupBy) => !!groupBy.eventTypes?.length),
      // so we can show a dropdown when the user has teams
      profiles: eventTypeGroups.map((group) => ({
        teamId: group.teamId,
        ...group.profile,
        ...group.metadata,
      })),
      ...(await serverSideTranslations(locale, ["common"])),
    },
  };
}

export default EventTypesPage;