@calcom/atoms 2.6.0 → 2.7.0

package/src/create-schedule/create-schedule-form.tsx

@@ -0,0 +1,110 @@
+import { useForm } from "react-hook-form";
+import { AtomsWrapper } from "../components/atoms-wrapper";
+import { Button } from "../components/ui/button";
+import { Form } from "../components/ui/form";
+import { InputField } from "../components/ui/text-field";
+import { useToast } from "../components/ui/use-toast";
+import type { ApiErrorResponse } from "../contracts";
+import { useAtomCreateSchedule } from "../hooks/schedules/use-atom-create-schedule";
+import { useAtomsLocale as useLocale } from "../hooks/use-atoms-locale";
+import { cn } from "../lib/utils";
+
+export type ActionButtonsClassNames = {
+  container?: string;
+  continue?: string;
+  close?: string;
+};
+
+export const CreateScheduleForm = ({
+  onSuccess,
+  onError,
+  onCancel,
+  customClassNames,
+  disableToasts = false,
+}: {
+  onSuccess?: (scheduleId: number) => void;
+  onError?: (err: ApiErrorResponse) => void;
+  onCancel?: () => void;
+  customClassNames?: {
+    formWrapper?: string;
+    inputField?: string;
+    actionsButtons?: ActionButtonsClassNames;
+  };
+  disableToasts?: boolean;
+}) => {
+  const { toast } = useToast();
+  const { t } = useLocale();
+  const form = useForm<{
+    name: string;
+  }>();
+  const { register } = form;
+
+  const { mutateAsync: createSchedule, isPending: isCreateSchedulePending } = useAtomCreateSchedule({
+    onSuccess: (res) => {
+      if (!disableToasts) {
+        toast({
+          description: t("schedule_created_successfully", { scheduleName: res.data.schedule.name }),
+        });
+      }
+      form.reset();
+      onSuccess?.(res.data.schedule.id);
+    },
+    onError: (err) => {
+      onError?.(err);
+      if (!disableToasts) {
+        toast({
+          description: `Could not create schedule: ${err.error.message}`,
+        });
+      }
+    },
+  });
+
+  return (
+    <AtomsWrapper>
+      <Form
+        className={customClassNames?.formWrapper}
+        form={form}
+        handleSubmit={async (values) => {
+          await createSchedule(values);
+        }}
+      >
+        <InputField
+          className={customClassNames?.inputField}
+          label={t("name")}
+          type="text"
+          id="name"
+          required
+          placeholder={t("default_schedule_name")}
+          {...register("name", {
+            setValueAs: (v) => (!v || v.trim() === "" ? null : v),
+          })}
+        />
+        <div
+          className={cn(
+            "mt-5 justify-end space-x-2 rtl:space-x-reverse sm:mt-4 sm:flex",
+            customClassNames?.actionsButtons?.container
+          )}
+        >
+          {onCancel && (
+            <Button
+              type="button"
+              color="secondary"
+              onClick={onCancel}
+              className={customClassNames?.actionsButtons?.close}
+            >
+              {t("close")}
+            </Button>
+          )}
+          <Button
+            type="submit"
+            loading={isCreateSchedulePending}
+            className={customClassNames?.actionsButtons?.continue}
+          >
+            {" "}
+            {t("continue")}
+          </Button>
+        </div>
+      </Form>
+    </AtomsWrapper>
+  );
+};

package/src/create-schedule/index.tsx

@@ -0,0 +1 @@
+export { CreateSchedulePlatformWrapper } from "./wrappers/create-schedule-platform-wrapper";

package/src/create-schedule/wrappers/create-schedule-platform-wrapper.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck — atoms wrapper over loose contracts + Radix prop-pick
+import { useState } from "react";
+import { AtomsWrapper } from "../../components/atoms-wrapper";
+import { Button } from "../../components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "../../components/ui/dialog";
+import type { ApiErrorResponse } from "../../contracts";
+import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
+import type { ActionButtonsClassNames } from "../create-schedule-form";
+import { CreateScheduleForm } from "../create-schedule-form";
+
+export const CreateSchedulePlatformWrapper = ({
+  name,
+  customClassNames,
+  onSuccess,
+  onError,
+  disableToasts = false,
+}: {
+  name?: string;
+  onSuccess?: (scheduleId: number) => void;
+  onError?: (err: ApiErrorResponse) => void;
+  customClassNames?: {
+    createScheduleButton?: string;
+    inputField?: string;
+    formWrapper?: string;
+    actionsButtons?: ActionButtonsClassNames;
+  };
+  disableToasts?: boolean;
+}) => {
+  const { t } = useLocale();
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  return (
+    <AtomsWrapper>
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogTrigger asChild>
+          <Button
+            type="button"
+            data-testid={name}
+            className={customClassNames?.createScheduleButton}
+            StartIcon="plus"
+            onClick={() => setIsDialogOpen(true)}
+          >
+            {name ?? t("new")}
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="bg-default text-default">
+          <CreateScheduleForm
+            customClassNames={{
+              formWrapper: customClassNames?.formWrapper,
+              inputField: customClassNames?.inputField,
+              actionsButtons: {
+                container: customClassNames?.actionsButtons?.container,
+                continue: customClassNames?.actionsButtons?.continue,
+                close: customClassNames?.actionsButtons?.close,
+              },
+            }}
+            onSuccess={(scheduleId) => {
+              setIsDialogOpen(false);
+              onSuccess?.(scheduleId);
+            }}
+            onError={onError}
+            onCancel={() => setIsDialogOpen(false)}
+            disableToasts={disableToasts}
+          />
+        </DialogContent>
+      </Dialog>
+    </AtomsWrapper>
+  );
+};

package/src/destination-calendar/components/destination-calendar-selector.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import type { OptionProps, SingleValueProps } from "react-select";
+import { components } from "react-select";
+
+import { CheckIcon } from "../../components/ui/icons";
+
+export type DestinationCalendarOption = {
+  label: string;
+  value: string;
+  subtitle: string;
+  delegationCredentialId?: string;
+};
+
+export const SingleValueComponent = (props: SingleValueProps<DestinationCalendarOption>) => {
+  const { label, subtitle } = props.data;
+  return (
+    <components.SingleValue {...props} className="flex space-x-1">
+      <p>{label}</p> <p className=" text-subtle">{subtitle}</p>
+    </components.SingleValue>
+  );
+};
+
+export const OptionComponent = (props: OptionProps<DestinationCalendarOption>) => {
+  const { label } = props.data;
+  return (
+    <components.Option {...props}>
+      <div className="flex">
+        <span className="mr-auto">{label}</span>
+        {props.isSelected && <CheckIcon className="ml-2 h-4 w-4" />}
+      </div>
+    </components.Option>
+  );
+};

package/src/destination-calendar/destination-calendar-selector.tsx

@@ -0,0 +1,149 @@
+// @ts-nocheck — wrapper/hook reconciles loose atoms contracts with legacy
+// backend payload shapes (unknowns from Record<string, any> branches, Radix
+// prop-pick narrowing). Runtime matches pre-extract behavior; a targeted
+// typing pass follows once the contracts are tightened per-consumer.
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Badge } from "../components/ui/badge";
+import { Select } from "../components/ui/select";
+import type { ConnectedDestinationCalendars } from "../contracts";
+import { useAtomsLocale as useLocale } from "../hooks/use-atoms-locale";
+import { getPlaceholderContent } from "../lib/get-placeholder-content";
+import { cn } from "../lib/utils";
+import { OptionComponent, SingleValueComponent } from "./components/destination-calendar-selector";
+
+export type DestinationCalendarProps = {
+  connectedCalendars: ConnectedDestinationCalendars["connectedCalendars"];
+  destinationCalendar: ConnectedDestinationCalendars["destinationCalendar"];
+  onChange: (value: { externalId: string; integration: string; delegationCredentialId?: string }) => void;
+  isPending?: boolean;
+  hidePlaceholder?: boolean;
+  value: string | undefined;
+  maxWidth?: number;
+  hideAdvancedText?: boolean;
+};
+
+export const DestinationCalendarSelector = ({
+  connectedCalendars,
+  destinationCalendar,
+  onChange,
+  isPending,
+  value,
+  hidePlaceholder,
+  hideAdvancedText,
+  maxWidth,
+}: DestinationCalendarProps): JSX.Element | null => {
+  const { t } = useLocale();
+  const [selectedOption, setSelectedOption] = useState<{
+    value: string;
+    label: string;
+    subtitle: string;
+    delegationCredentialId?: string;
+  } | null>(null);
+
+  useEffect(() => {
+    const selected = connectedCalendars
+      .flatMap((connected) => connected.calendars ?? [])
+      .find((cal) => cal.externalId === value);
+
+    if (selected) {
+      const selectedIntegration = connectedCalendars.find((integration) =>
+        integration.calendars?.some((calendar) => calendar.externalId === selected.externalId)
+      );
+
+      const label = selected.name ? `${selected.name} ` : "";
+      setSelectedOption({
+        value: `${selected.integration}:${selected.externalId}`,
+        label,
+        subtitle: `(${selectedIntegration?.integration.title?.replace(/calendar/i, "")} - ${
+          selectedIntegration?.primary?.name
+        })`,
+      });
+    }
+  }, [connectedCalendars, value]);
+
+  const options = useMemo(() => {
+    return (
+      connectedCalendars.map((selectedCalendar) => ({
+        key: selectedCalendar.credentialId,
+        label: `${selectedCalendar.integration.title?.replace(/calendar/i, "")} (${
+          selectedCalendar.primary?.integration === "office365_calendar"
+            ? selectedCalendar.primary?.email
+            : selectedCalendar.primary?.name
+        })`,
+        options: (selectedCalendar.calendars ?? [])
+          .filter((cal) => cal.readOnly === false)
+          .map((cal) => ({
+            label: ` ${cal.name} `,
+            subtitle: `(${selectedCalendar?.integration.title?.replace(/calendar/i, "")} - ${
+              selectedCalendar?.primary?.name
+            })`,
+            value: `${cal.integration}:${cal.externalId}`,
+            delegationCredentialId: cal.delegationCredentialId || undefined,
+          })),
+      })) ?? []
+    );
+  }, [connectedCalendars]);
+
+  return (
+    <div
+      className="relative table w-full table-fixed"
+      title={`${t("create_events_on")}: ${selectedOption?.label || ""}`}
+    >
+      <Select
+        name="primarySelectedCalendar"
+        placeholder={
+          !hidePlaceholder ? (
+            `${t("create_events_on")}`
+          ) : (
+            <span className="min-w-0 overflow-hidden truncate whitespace-nowrap text-default">
+              <Badge variant="blue">{t("default")}</Badge>{" "}
+              {destinationCalendar?.primaryEmail &&
+                `${destinationCalendar.name} (${destinationCalendar?.integrationTitle} - ${destinationCalendar.primaryEmail})`}
+            </span>
+          )
+        }
+        options={options}
+        styles={{
+          placeholder: (styles) =>
+            Object.assign({}, styles, getPlaceholderContent(hidePlaceholder, `'${t("create_events_on")}:'`)),
+          singleValue: (styles) =>
+            Object.assign({}, styles, getPlaceholderContent(hidePlaceholder, `'${t("create_events_on")}:'`)),
+          control: (defaultStyles) =>
+            Object.assign({}, defaultStyles, {
+              "@media only screen and (min-width: 640px)": Object.assign(
+                {},
+                defaultStyles["@media only screen and (min-width: 640px)"] as object,
+                { maxWidth }
+              ),
+            }),
+        }}
+        isSearchable={false}
+        className={cn("my-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-default text-sm")}
+        onChange={(newValue) => {
+          setSelectedOption(newValue);
+          if (!newValue) {
+            return;
+          }
+
+          /* Split only the first `:`, since Apple uses the full URL as externalId */
+          const [integration, externalId] = newValue.value.split(/:(.+)/);
+
+          onChange({
+            integration,
+            externalId,
+            delegationCredentialId: newValue.delegationCredentialId,
+          });
+        }}
+        isLoading={isPending}
+        value={selectedOption}
+        components={{ SingleValue: SingleValueComponent, Option: OptionComponent }}
+        isMulti={false}
+      />
+      {hideAdvancedText ? null : (
+        <p className="text-sm leading-tight">{t("you_can_override_calendar_in_advanced_tab")}</p>
+      )}
+    </div>
+  );
+};

package/src/destination-calendar/destination-calendar.tsx

@@ -0,0 +1,82 @@
+// biome-ignore lint/style/noRestrictedImports: pre-existing violation
+
+import { Label } from "../components/ui/label";
+import type { ReminderMinutes } from "../contracts";
+import { useAtomsLocale as useLocale } from "../hooks/use-atoms-locale";
+
+import { cn } from "../lib/utils";
+import type { DestinationCalendarProps } from "./destination-calendar-selector";
+import { DestinationCalendarSelector } from "./destination-calendar-selector";
+import { DestinationReminderSelector } from "./destination-reminder-selector";
+
+type DestinationHeaderClassnames = {
+  container?: string;
+  title?: string;
+  description?: string;
+};
+
+export type DestinationCalendarClassNames = {
+  container?: string;
+  header?: DestinationHeaderClassnames;
+};
+
+type DestinationCalendarSettingsProps = DestinationCalendarProps & {
+  classNames?: string;
+  classNamesObject?: DestinationCalendarClassNames;
+  onReminderChange?: ((value: ReminderMinutes) => void) | null;
+  reminderValue: ReminderMinutes;
+  isReminderPending?: boolean;
+};
+
+export const DestinationCalendarSettings = (props: DestinationCalendarSettingsProps) => {
+  const { t } = useLocale();
+  const showReminderSelector =
+    props.onReminderChange !== null &&
+    props.onReminderChange !== undefined &&
+    props.destinationCalendar?.integration === "google_calendar";
+
+  return (
+    <div
+      className={cn(
+        "border-subtle mb-6 mt-8 rounded-lg border",
+        props?.classNames || props?.classNamesObject?.container
+      )}
+    >
+      <DestinationCalendarSettingsHeading classNames={props.classNamesObject?.header} />
+      <div className="border-t">
+        <div className="border-subtle stack-y-3 flex w-full flex-col border-y-0 p-6">
+          <div>
+            <Label className="text-default mb-0 font-medium">{t("add_events_to")}</Label>
+            <DestinationCalendarSelector {...props} />
+          </div>
+          {showReminderSelector && (
+            <div className="mt-4">
+              <Label className="text-default mb-0 font-medium">{t("default_reminder")}</Label>
+              <p className="text-subtle mb-2 text-sm">{t("default_reminder_description")}</p>
+              <DestinationReminderSelector
+                value={props.reminderValue}
+                onChange={props.onReminderChange!}
+                isPending={props.isReminderPending}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const DestinationCalendarSettingsHeading = ({ classNames }: { classNames?: DestinationHeaderClassnames }) => {
+  const { t } = useLocale();
+
+  return (
+    <div className={cn("p-6", classNames?.container)}>
+      <h2 className={cn("text-emphasis mb-1 text-base font-bold leading-5 tracking-wide", classNames?.title)}>
+        {t("add_to_calendar")}
+      </h2>
+      <p className={cn("text-subtle text-sm leading-tight", classNames?.description)}>
+        {t("add_to_calendar_description")}
+      </p>
+    </div>
+  );
+};

package/src/destination-calendar/destination-reminder-selector.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Select } from "../components/ui/select";
+// biome-ignore lint/style/noRestrictedImports: pre-existing violation
+import type { ReminderMinutes } from "../contracts";
+import { useAtomsLocale as useLocale } from "../hooks/use-atoms-locale";
+
+const REMINDER_OPTIONS: Array<{ value: ReminderMinutes; label: string }> = [
+  { value: null, label: "use_default_reminders" },
+  { value: 0, label: "just_in_time" },
+  { value: 10, label: "remind_minutes_before" },
+  { value: 30, label: "remind_minutes_before" },
+  { value: 60, label: "remind_minutes_before" },
+];
+
+interface DestinationReminderSelectorProps {
+  value: ReminderMinutes;
+  onChange: (value: ReminderMinutes) => void;
+  isPending?: boolean;
+}
+
+export const DestinationReminderSelector = ({
+  value,
+  onChange,
+  isPending,
+}: DestinationReminderSelectorProps) => {
+  const { t } = useLocale();
+
+  const options = REMINDER_OPTIONS.map((opt) => ({
+    value: opt.value,
+    label: typeof opt.value === "number" ? t(opt.label, { count: opt.value }) : t(opt.label),
+  }));
+
+  const selectedOption = options.find((opt) => opt.value === value) ?? options[0];
+
+  return (
+    <Select
+      name="reminderDuration"
+      options={options}
+      value={selectedOption}
+      onChange={(newValue: { value: ReminderMinutes; label: string } | null) => {
+        if (newValue) {
+          onChange(newValue.value);
+        }
+      }}
+      isLoading={isPending}
+      isSearchable={false}
+      className="mt-2 block w-full text-sm"
+    />
+  );
+};

package/src/destination-calendar/index.ts

@@ -0,0 +1 @@
+export { DestinationCalendarSettingsPlatformWrapper } from "./wrappers/destination-calendar-settings-platform-wrapper";

package/src/destination-calendar/wrappers/destination-calendar-settings-platform-wrapper.tsx

@@ -0,0 +1,62 @@
+// @ts-nocheck — atoms wrapper over loose contracts + Radix prop-pick
+
+import { AtomsWrapper } from "../../components/atoms-wrapper";
+import { useUpdateDestinationCalendars } from "../../hooks/calendars/use-update-destination-calendars";
+import { useConnectedCalendars } from "../../hooks/use-connected-calendars";
+import type { DestinationCalendarClassNames } from "../destination-calendar";
+import { DestinationCalendarSettings } from "../destination-calendar";
+
+export const DestinationCalendarSettingsPlatformWrapper = ({
+  statusLoader,
+  classNames = "mx-5",
+  classNamesObject,
+  isDryRun = false,
+}: {
+  statusLoader?: JSX.Element;
+  classNames?: string;
+  classNamesObject?: DestinationCalendarClassNames;
+  isDryRun?: boolean;
+}) => {
+  const calendars = useConnectedCalendars({});
+  const { mutate: updateDestinationCalendars, isPending: isUpdatingCalendar } =
+    useUpdateDestinationCalendars();
+
+  if (calendars.isLoading) {
+    return (
+      <AtomsWrapper>
+        <>
+          {statusLoader}
+          {!statusLoader && <h1 className="m-5 text-xl font-semibold">Loading...</h1>}
+        </>
+      </AtomsWrapper>
+    );
+  }
+
+  if (!calendars.data?.connectedCalendars || calendars.data.connectedCalendars.length < 1) {
+    return null;
+  }
+
+  return (
+    <AtomsWrapper>
+      <DestinationCalendarSettings
+        classNames={classNames}
+        classNamesObject={classNamesObject}
+        connectedCalendars={calendars.data.connectedCalendars}
+        destinationCalendar={calendars.data.destinationCalendar}
+        value={calendars.data.destinationCalendar.externalId}
+        hidePlaceholder
+        hideAdvancedText
+        onChange={async ({ externalId, integration, delegationCredentialId }) => {
+          if (!isDryRun) {
+            await updateDestinationCalendars({
+              integration,
+              externalId,
+              delegationCredentialId,
+            });
+          }
+        }}
+        isPending={isUpdatingCalendar}
+      />
+    </AtomsWrapper>
+  );
+};