@calcom/atoms 2.7.2 → 2.8.1

package/src/event-types/hooks/use-team-members-with-segment-platform.tsx

@@ -1,107 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useMemo } from "react";
-import { SUCCESS_STATUS } from "../../constants";
-import type {
-  ApiResponse,
-  ApiSuccessResponse,
-  AtomAttributesQueryValue as AttributesQueryValue,
-  FindTeamMembersMatchingAttributeOutputDto,
-  Host,
-  TeamMember,
-  TeamMemberDto,
-} from "../../contracts";
-
-import { useAtomsContext } from "../../hooks/use-atoms-context";
-import http from "../../lib/http";
-
-export interface UseTeamMembersWithSegmentProps {
-  initialTeamMembers: TeamMember[];
-  assignRRMembersUsingSegment: boolean;
-  teamId?: number;
-  orgId?: number;
-  queryValue?: AttributesQueryValue | null;
-  value: Host[];
-}
-
-export const useProcessTeamMembersData = ({
-  initialTeamMembers,
-  assignRRMembersUsingSegment,
-  matchingTeamMembersWithResult,
-  value,
-}: {
-  initialTeamMembers: TeamMember[];
-  assignRRMembersUsingSegment: boolean;
-  matchingTeamMembersWithResult?: { result: TeamMemberDto[] | null };
-  value: Host[];
-}) => {
-  const teamMembers = useMemo(() => {
-    if (assignRRMembersUsingSegment && matchingTeamMembersWithResult?.result) {
-      return matchingTeamMembersWithResult.result.map((member) => ({
-        value: member.id.toString(),
-        label: member.name || member.email,
-        email: member.email,
-        avatar: "",
-      }));
-    }
-    return initialTeamMembers;
-  }, [assignRRMembersUsingSegment, matchingTeamMembersWithResult, initialTeamMembers]);
-
-  const localWeightsInitialValues = useMemo(
-    () =>
-      teamMembers.reduce<Record<string, number>>((acc, member) => {
-        const memberInValue = value.find((host) => host.userId === parseInt(member.value, 10));
-        acc[member.value] = memberInValue?.weight ?? 100;
-        return acc;
-      }, {}),
-    [teamMembers, value]
-  );
-
-  return {
-    teamMembers,
-    localWeightsInitialValues,
-  };
-};
-
-export const useTeamMembersWithSegmentPlatform = ({
-  initialTeamMembers,
-  assignRRMembersUsingSegment,
-  teamId,
-  orgId,
-  queryValue,
-  value,
-}: UseTeamMembersWithSegmentProps) => {
-  const { isInit } = useAtomsContext();
-
-  const pathname = `/atoms/organizations/${orgId}/teams/${teamId}/members-matching-attribute?${new URLSearchParams(
-    {
-      attributesQueryValue: queryValue ? JSON.stringify(queryValue) : "",
-      enablePerf: "true",
-    }
-  )}`;
-
-  const { data: matchingTeamMembersWithResult, isPending } = useQuery({
-    queryKey: ["teamMembersMatchingAttribute", teamId, orgId, queryValue],
-    queryFn: async () => {
-      return http?.get<ApiResponse<FindTeamMembersMatchingAttributeOutputDto>>(pathname).then((res) => {
-        if (res.data.status === SUCCESS_STATUS) {
-          return (res.data as ApiSuccessResponse<FindTeamMembersMatchingAttributeOutputDto>).data;
-        }
-        throw new Error(res.data.error.message);
-      });
-    },
-    enabled: isInit && !!teamId && !!orgId,
-  });
-
-  const { teamMembers, localWeightsInitialValues } = useProcessTeamMembersData({
-    initialTeamMembers,
-    assignRRMembersUsingSegment,
-    matchingTeamMembersWithResult,
-    value,
-  });
-
-  return {
-    teamMembers,
-    localWeightsInitialValues,
-    isPending,
-  };
-};

package/src/event-types/index.ts

@@ -1 +0,0 @@
-export { ListEventTypesPlatformWrapper } from "./wrappers/list-event-types-platform-wrapper";

package/src/event-types/lib/format-event-type-duration.ts

@@ -1,25 +0,0 @@
-/**
- * Formats event type duration in a human-readable format.
- *
- * @param minutes - Duration in minutes (always an integer for event types)
- * @returns Formatted duration string (e.g., "30m", "1h", "1h 30m")
- *
- * @example
- * formatEventTypeDuration(30)  // "30m"
- * formatEventTypeDuration(60)  // "1h"
- * formatEventTypeDuration(90)  // "1h 30m"
- */
-export function formatEventTypeDuration(minutes: number): string {
-  if (minutes < 60) {
-    return `${minutes}m`;
-  }
-
-  const hours = Math.floor(minutes / 60);
-  const remainingMinutes = minutes % 60;
-
-  if (remainingMinutes === 0) {
-    return `${hours}h`;
-  }
-
-  return `${hours}h ${remainingMinutes}m`;
-}

package/src/event-types/payments/payment-form.tsx

@@ -1,150 +0,0 @@
-// @ts-nocheck — atoms wrapper over loose contracts + Radix prop-pick
-import React, { Suspense } from "react";
-import { PayIcon } from "../../booker/components/pay-icon";
-import { Price } from "../../booker/components/price";
-import { AtomsWrapper } from "../../components/atoms-wrapper";
-import { APP_NAME, WEBSITE_URL } from "../../constants";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { cn } from "../../lib/utils";
-import dayjs from "../../vendor/dayjs";
-import { getPaymentAppData, getSuccessPageLocationMessage } from "../../vendor/payments";
-import { isBrowserLocale24h } from "../../vendor/time-format";
-import { CURRENT_TIMEZONE } from "../../vendor/timezone-constants";
-import { localStorage } from "../../vendor/webstorage";
-import { useAtomsEventTypePaymentInfo } from "../hooks/use-atom-event-type-payment-info";
-import type { PaymentPageProps } from "./payment-page-types";
-
-const StripePaymentForm = React.lazy(() => import("./stripe-payment-form"));
-
-export const PaymentForm = ({
-  paymentUid,
-  onPaymentSuccess,
-  onPaymentCancellation,
-  onEventTypePaymentInfoSuccess,
-  onEventTypePaymentInfoFailure,
-}: {
-  paymentUid: string;
-  onPaymentSuccess?: (input: PaymentPageProps) => void;
-  onPaymentCancellation?: (input: PaymentPageProps) => void;
-  onEventTypePaymentInfoSuccess?: () => void;
-  onEventTypePaymentInfoFailure?: () => void;
-}) => {
-  const { t } = useLocale();
-  const { data: paymentInfo, isLoading } = useAtomsEventTypePaymentInfo({
-    uid: paymentUid,
-    onEventTypePaymentInfoSuccess,
-    onEventTypePaymentInfoFailure,
-  });
-
-  const eventName = paymentInfo?.booking.title;
-
-  const is24h = isBrowserLocale24h();
-  const timezone = localStorage.getItem("timeOption.preferredTimeZone") || CURRENT_TIMEZONE;
-  const date = dayjs.utc(paymentInfo?.booking.startTime).tz(timezone);
-
-  if (isLoading) return <h1 className="p-4 pt-4 text-xl">Loading...</h1>;
-
-  if (!paymentInfo) return <h1 className="p-4 text-xl">No payment found with UID - {paymentUid}</h1>;
-
-  const paymentAppData = getPaymentAppData(paymentInfo?.eventType);
-
-  return (
-    <AtomsWrapper>
-      <div>
-        <Suspense fallback={<></>}>
-          <main className="mx-auto">
-            <div>
-              <div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
-                <div className="inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
-                  <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
-                    &#8203;
-                  </span>
-                  <div
-                    className={cn(
-                      "main bg-default border-subtle inline-block transform overflow-hidden rounded-lg border px-8 pb-4 pt-5 text-left align-bottom transition-all  sm:my-8 sm:w-full sm:max-w-lg sm:py-6 sm:align-middle"
-                    )}
-                    role="dialog"
-                    aria-modal="true"
-                    aria-labelledby="modal-headline"
-                  >
-                    <div>
-                      <div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-                        <PayIcon currency={paymentAppData.currency} className="h-8 w-8 text-green-600" />
-                      </div>
-                      <div className="mt-3 text-center sm:mt-5">
-                        <h3 className="text-emphasis text-2xl font-semibold leading-6" id="modal-headline">
-                          {paymentAppData.paymentOption === "HOLD"
-                            ? t("complete_your_booking")
-                            : t("payment")}
-                        </h3>
-                        <div className="text-default mt-4 grid grid-cols-3 border-b border-t py-4 text-left dark:border-gray-900 dark:text-gray-300">
-                          <div className="font-medium">{t("what")}</div>
-                          <div className="col-span-2 mb-6">{eventName}</div>
-                          <div className="font-medium">{t("when")}</div>
-                          <div className="col-span-2 mb-6">
-                            {date.format("dddd, DD MMMM YYYY")}
-                            <br />
-                            {date.format(is24h ? "H:mm" : "h:mma")} - {paymentInfo.eventType.length} mins{" "}
-                            <span className="text-subtle">({timezone})</span>
-                          </div>
-                          {paymentInfo.booking.location && (
-                            <>
-                              <div className="font-medium">{t("where")}</div>
-                              <div className="col-span-2 mb-6">
-                                {getSuccessPageLocationMessage(paymentInfo.booking.location, t)}
-                              </div>
-                            </>
-                          )}
-                          <div className="font-medium">
-                            {paymentInfo.payment.paymentOption === "HOLD" ? t("no_show_fee") : t("price")}
-                          </div>
-                          <div className="col-span-2 mb-6 font-semibold">
-                            <Price
-                              currency={paymentAppData.currency}
-                              price={paymentAppData.price}
-                              displayAlternateSymbol={false}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div>
-                      {paymentInfo.payment.success && !paymentInfo.payment.refunded && (
-                        <div className="text-default mt-4 text-center dark:text-gray-300">{t("paid")}</div>
-                      )}
-                      {paymentInfo.payment.appId === "stripe" && !paymentInfo.payment.success && (
-                        <StripePaymentForm
-                          clientSecret={paymentInfo.clientSecret}
-                          payment={paymentInfo.payment}
-                          eventType={paymentInfo.eventType}
-                          user={paymentInfo.user}
-                          location={paymentInfo.booking.location}
-                          booking={paymentInfo.booking}
-                          uid={paymentUid}
-                          onPaymentSuccess={onPaymentSuccess}
-                          onPaymentCancellation={onPaymentCancellation}
-                        />
-                      )}
-                      {paymentInfo.payment.refunded && (
-                        <div className="text-default mt-4 text-center dark:text-gray-300">
-                          {t("refunded")}
-                        </div>
-                      )}
-                    </div>
-                    {!paymentInfo.profile.hideBranding && (
-                      <div className="text-muted dark:text-inverted mt-4 border-t pt-4 text-center text-xs dark:border-gray-900">
-                        <a href={`${WEBSITE_URL}/signup`}>
-                          {t("create_booking_link_with_calcom", { appName: APP_NAME })}
-                        </a>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </main>
-        </Suspense>
-      </div>
-    </AtomsWrapper>
-  );
-};

package/src/event-types/payments/payment-page-types.ts

@@ -1,47 +0,0 @@
-/**
- * atoms-local loose port of @calcom/features/ee/payments/pages/payment
- * PaymentPageProps. The features module couples tightly to Prisma
- * booking/event-type shapes; atoms just carries the shape the SDK
- * consumer expects to pass to payment UI.
- */
-export type PaymentPageProps = {
-  booking: {
-    uid: string;
-    title?: string;
-    startTime: string | Date;
-    endTime: string | Date;
-    description?: string | null;
-    location?: string | null;
-    responses?: Record<string, unknown>;
-    [key: string]: unknown;
-  };
-  eventType: {
-    id: number;
-    title: string;
-    length: number;
-    price: number;
-    currency: string;
-    [key: string]: unknown;
-  };
-  payment: {
-    id: number;
-    uid: string;
-    success?: boolean;
-    data?: Record<string, unknown>;
-    paymentOption?: string | null;
-    amount?: number;
-    currency?: string;
-    [key: string]: unknown;
-  };
-  profile?: {
-    name?: string | null;
-    image?: string | null;
-    [key: string]: unknown;
-  };
-  user?: {
-    name?: string | null;
-    username?: string | null;
-    [key: string]: unknown;
-  };
-  [key: string]: unknown;
-};

package/src/event-types/payments/payment.tsx

@@ -1,115 +0,0 @@
-// @ts-nocheck — loose Stripe contract + atoms wrapper props
-"use client";
-
-import { PaymentElement } from "@stripe/react-stripe-js";
-import type { StripeElementLocale, StripeElements, StripePaymentElementOptions } from "@stripe/stripe-js";
-import type { SyntheticEvent } from "react";
-import { useEffect, useState } from "react";
-import { Button } from "../../components/ui/button";
-import { CheckboxField } from "../../components/ui/checkbox";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import type { PaymentPageProps } from "./payment-page-types";
-
-export type Props = {
-  payment: PaymentPageProps["payment"];
-  eventType: PaymentPageProps["eventType"];
-  user: PaymentPageProps["user"];
-  location?: string | null;
-  bookingId: number;
-  bookingUid: string;
-  clientSecret?: string;
-  [key: string]: unknown;
-};
-
-export type States =
-  | { status: "idle" }
-  | { status: "processing" }
-  | { status: "error"; error: Error }
-  | { status: "succeeded" };
-
-/**
- * Dumb Stripe payment form. atoms ships only this inner UI — the full
- * webapp Payment.tsx additionally does booking-success redirect
- * (useBookingSuccessRedirect + ExternalRedirectInterstitial +
- * useCompatSearchParams), which is out of the atoms surface. The
- * atoms <Elements>-aware StripePaymentForm wraps this component.
- */
-export const PaymentFormComponent = (
-  props: Props & {
-    onSubmit: (ev: SyntheticEvent) => void;
-    onCancel: () => void;
-    onPaymentElementChange: () => void;
-    elements: StripeElements | null;
-    paymentOption: string | null;
-    state: States;
-  }
-) => {
-  const { t, i18n } = useLocale();
-  const { paymentOption, elements, state, onPaymentElementChange } = props;
-  const [isCanceling, setIsCanceling] = useState<boolean>(false);
-  const [holdAcknowledged, setHoldAcknowledged] = useState<boolean>(paymentOption === "HOLD" ? false : true);
-  const disableButtons = isCanceling || !holdAcknowledged || ["processing", "error"].includes(state.status);
-
-  const paymentElementOptions = { layout: "accordion" } as StripePaymentElementOptions;
-
-  useEffect(() => {
-    elements?.update({ locale: i18n.language as StripeElementLocale });
-  }, [elements, i18n.language]);
-
-  return (
-    <form id="payment-form" className="bg-subtle mt-4 rounded-md p-6" onSubmit={props.onSubmit}>
-      <div>
-        <PaymentElement options={paymentElementOptions} onChange={() => onPaymentElementChange()} />
-      </div>
-      {paymentOption === "HOLD" && (
-        <div className="bg-cal-info mb-5 mt-2 rounded-md p-3">
-          <CheckboxField
-            description={t("acknowledge_booking_no_show_fee", {
-              amount: (props.payment.amount as number) / 100,
-              formatParams: { amount: { currency: props.payment.currency as string } },
-            })}
-            onChange={(e) => setHoldAcknowledged(e.target.checked)}
-            descriptionClassName="text-info font-semibold"
-          />
-        </div>
-      )}
-      <div className="mt-2 flex justify-end space-x-2">
-        <Button
-          color="minimal"
-          disabled={disableButtons}
-          id="cancel"
-          type="button"
-          loading={isCanceling}
-          onClick={() => {
-            setIsCanceling(true);
-            props.onCancel();
-          }}
-        >
-          <span id="button-text">{t("cancel")}</span>
-        </Button>
-        <Button
-          type="submit"
-          disabled={disableButtons}
-          loading={state.status === "processing"}
-          id="submit"
-          color="secondary"
-        >
-          <span id="button-text">
-            {state.status === "processing" ? (
-              <div className="spinner" id="spinner" />
-            ) : paymentOption === "HOLD" ? (
-              t("submit_card")
-            ) : (
-              t("pay_now")
-            )}
-          </span>
-        </Button>
-      </div>
-      {state.status === "error" && (
-        <div className="mt-4 text-center text-red-900 dark:text-gray-300" role="alert">
-          {state.error.message}
-        </div>
-      )}
-    </form>
-  );
-};

package/src/event-types/payments/stripe-payment-form.tsx

@@ -1,136 +0,0 @@
-// @ts-nocheck — atoms wrapper/hook over loose contracts + Radix 1.x
-import { Elements, useElements, useStripe } from "@stripe/react-stripe-js";
-import type { SyntheticEvent } from "react";
-import { useEffect, useState } from "react";
-import { WEBAPP_URL } from "../../constants";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import getStripe from "../../vendor/get-stripe";
-import type { Props, States } from "./payment";
-import { PaymentFormComponent } from "./payment";
-import type { PaymentPageProps } from "./payment-page-types";
-
-const StripePaymentComponent = (
-  props: Props & {
-    onPaymentSuccess?: (input: PaymentPageProps) => void;
-    onPaymentCancellation?: (input: PaymentPageProps) => void;
-  }
-) => {
-  const { t } = useLocale();
-  const elements = useElements();
-  const paymentOption = props.payment.paymentOption;
-  const attendeeEmail = props.booking.attendees[0].email;
-  const stripe = useStripe();
-
-  const [state, setState] = useState<States>({ status: "idle" });
-
-  return (
-    <PaymentFormComponent
-      {...props}
-      elements={elements}
-      paymentOption={paymentOption}
-      state={state}
-      onSubmit={async (ev: SyntheticEvent) => {
-        ev.preventDefault();
-
-        if (!stripe || !elements) {
-          return;
-        }
-
-        setState({ status: "processing" });
-
-        let payload;
-        const params: {
-          uid: string;
-          email: string | null;
-          location?: string;
-          payment_intent?: string;
-          payment_intent_client_secret?: string;
-          redirect_status?: string;
-        } = {
-          uid: props.booking.uid,
-          email: attendeeEmail,
-        };
-        if (paymentOption === "HOLD" && "setupIntent" in props.payment.data) {
-          payload = await stripe.confirmSetup({
-            elements,
-            redirect: "if_required",
-          });
-          if (payload.setupIntent) {
-            params.payment_intent = payload.setupIntent.id;
-            params.payment_intent_client_secret = payload.setupIntent.client_secret || undefined;
-            params.redirect_status = payload.setupIntent.status;
-          }
-        } else if (paymentOption === "ON_BOOKING") {
-          payload = await stripe.confirmPayment({
-            elements,
-            redirect: "if_required",
-            confirmParams: {
-              return_url: `${WEBAPP_URL}/booking/${params.uid}`,
-            },
-          });
-          if (payload.paymentIntent) {
-            params.payment_intent = payload.paymentIntent.id;
-            params.payment_intent_client_secret = payload.paymentIntent.client_secret || undefined;
-            params.redirect_status = payload.paymentIntent.status;
-          }
-        }
-
-        if (payload?.error) {
-          setState({
-            status: "error",
-            error: new Error(`Payment failed: ${payload.error.message}`),
-          });
-        } else {
-          setState({ status: "idle" });
-          props.onPaymentSuccess?.(props as unknown as PaymentPageProps);
-          if (props.location) {
-            if (props.location.includes("integration")) {
-              params.location = t("web_conferencing_details_to_follow");
-            } else {
-              params.location = props.location;
-            }
-          }
-        }
-      }}
-      onCancel={() => {
-        props.onPaymentCancellation?.(props as unknown as PaymentPageProps);
-      }}
-      onPaymentElementChange={() => {
-        setState({ status: "idle" });
-      }}
-    />
-  );
-};
-
-const StripePaymentForm = (
-  props: Props & {
-    uid: string;
-    onPaymentSuccess?: (input: PaymentPageProps) => void;
-    onPaymentCancellation?: (input: PaymentPageProps) => void;
-  }
-) => {
-  const stripePromise = getStripe(props.payment.data.stripe_publishable_key as any);
-  const [theme, setTheme] = useState<"stripe" | "night">("stripe");
-
-  useEffect(() => {
-    if (document.documentElement.classList.contains("dark")) {
-      setTheme("night");
-    }
-  }, []);
-
-  return (
-    <Elements
-      stripe={stripePromise}
-      options={{
-        clientSecret: props.clientSecret,
-        appearance: {
-          theme,
-        },
-      }}
-    >
-      <StripePaymentComponent {...props} />
-    </Elements>
-  );
-};
-
-export default StripePaymentForm;

package/src/event-types/types.ts

@@ -1,16 +0,0 @@
-/**
- * Event type item as returned by the atoms API
- */
-export type AtomEventTypeListItem = {
-  id: number;
-  title: string;
-  slug: string;
-  description: string | null;
-  length: number;
-  locations: unknown | null;
-  logo?: string;
-};
-
-export type AtomEventTypesResponse = {
-  eventTypes: AtomEventTypeListItem[];
-};