feat: Custom Fields OR Add-Ons with a fee associated (#19997)

* feat: Addons to bookings

* Add tests

* Add tests

* Fix price field not shown immediately after enabling payment for an event

* Add support for all currencies in addons and fix type errors

* Address review comments

* Add tests to cover all input types

* Address cubic-dev-ai comments

* Remove openapi.json from git tracking

* Revert changes

* Revert unrelated linter/formatter changes

* Address cubic-dev-ai comments

* Addres cubic-dev-ai comment

* Update to use test id instead of hardcoded label

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Address coderabbits review comments

* Fix failing unit test

* some fixes...

* Fix tests

* Fix import

* Move handlePayment test file to appropriate location

* Fix test

---------

Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: amrit <iamamrit27@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Devanshu Sharma <devanshusharma658@gmail.com>
Co-authored-by: Benny Joo <sldisek783@gmail.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Volnei Munhoz <volnei.munhoz@gmail.com>

Author: 10 people

apps/web/app/(use-page-wrapper)/payment/[uid]/PaymentPage.tsx

@@ -141,7 +141,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                       <div className="col-span-2 mb-6 font-semibold">
                         <Price
                           currency={paymentAppData.currency}
-                          price={paymentAppData.price}
+                          price={props.payment?.amount ?? paymentAppData.price}
                           displayAlternateSymbol={false}
                         />
                       </div>

packages/app-store/_utils/payments/currencyConversions.ts

@@ -32,3 +32,27 @@ export const convertFromSmallestToPresentableCurrencyUnit = (amount: number, cur
   }
   return amount / 100;
 };
+
+export const getCurrencySymbol = (currencyCode: string): string => {
+  try {
+    const formatter = Intl.NumberFormat("en", { style: "currency", currency: currencyCode });
+    // formatToParts(1) breaks down the formatted number (1) into its constituent parts
+    // like currency symbol, decimal separator, etc. We use 1 as it's a simple number
+    // that will show the currency symbol clearly.
+    // For example, since we are formatting the number 1 with USD currency, formatToParts(1) would return an array like:
+    // [
+    //   { type: "currency", value: "$" },
+    //   { type: "integer", value: "1" },
+    //   { type: "decimal", value: "." },
+    //   { type: "fraction", value: "00" }
+    // ]
+    const parts = formatter.formatToParts(1);
+    const currencyPart = parts.find((part) => part.type === "currency");
+    return currencyPart?.value || "$";
+  } catch {
+    // Ideally we would not reach here, but if for some reason we reach here, we return
+    // $ as default currency
+    console.warn(`Failed to get currency symbol for ${currencyCode}, falling back to $`);
+    return "$";
+  }
+};

packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx

@@ -89,6 +89,11 @@ export const BookEventForm = ({
     return eventType?.price > 0 && !Number.isNaN(paymentAppData.price) && paymentAppData.price > 0;
   }, [eventType]);
 
+  const paymentCurrency = useMemo(() => {
+    if (!eventType) return "USD";
+    return getPaymentAppData(eventType)?.currency || "USD";
+  }, [eventType]);
+
   if (eventQuery.isError) return <Alert severity="warning" message={t("error_booking_event")} />;
   if (eventQuery.isPending || !eventQuery.data) return <FormSkeleton />;
   if (!timeslot)
@@ -129,6 +134,8 @@ export const BookEventForm = ({
           locations={eventType.locations}
           rescheduleUid={rescheduleUid || undefined}
           bookingData={bookingData}
+          isPaidEvent={isPaidEvent}
+          paymentCurrency={paymentCurrency}
         />
         {errors.hasFormErrors || errors.hasDataErrors ? (
           <div data-testid="booking-fail">

packages/features/bookings/Booker/components/BookEventForm/BookingFields.tsx

@@ -6,30 +6,81 @@ import { useBookerStore } from "@calcom/features/bookings/Booker/store";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import getLocationOptionsForSelect from "@calcom/features/bookings/lib/getLocationOptionsForSelect";
 import { FormBuilderField } from "@calcom/features/form-builder/FormBuilderField";
+import { fieldTypesConfigMap } from "@calcom/features/form-builder/fieldTypes";
+import { fieldsThatSupportLabelAsSafeHtml } from "@calcom/features/form-builder/fieldsThatSupportLabelAsSafeHtml";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import type { RouterOutputs } from "@calcom/trpc/react";
 
 import { SystemField } from "../../../lib/SystemField";
 
+type Fields = NonNullable<RouterOutputs["viewer"]["public"]["event"]>["bookingFields"];
 export const BookingFields = ({
   fields,
   locations,
   rescheduleUid,
   isDynamicGroupBooking,
   bookingData,
+  isPaidEvent,
+  paymentCurrency = "USD",
 }: {
-  fields: NonNullable<RouterOutputs["viewer"]["public"]["event"]>["bookingFields"];
+  fields: Fields;
   locations: LocationObject[];
   rescheduleUid?: string;
   bookingData?: GetBookingType | null;
   isDynamicGroupBooking: boolean;
+  isPaidEvent?: boolean;
+  paymentCurrency?: string;
 }) => {
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
   const { watch, setValue } = useFormContext();
   const locationResponse = watch("responses.location");
   const currentView = rescheduleUid ? "reschedule" : "";
   const isInstantMeeting = useBookerStore((state) => state.isInstantMeeting);
 
+  const getPriceFormattedLabel = (label: string, price: number) =>
+    `${label} (${Intl.NumberFormat(i18n.language, {
+      style: "currency",
+      currency: paymentCurrency,
+    }).format(price)})`;
+
+  const getFieldWithDirectPricing = (field: Fields[number]) => {
+    if (!fieldTypesConfigMap[field.type]?.supportsPricing || !field.label || !field.price) {
+      return field;
+    }
+
+    const price = typeof field.price === "string" ? parseFloat(field.price) : field.price;
+    const label = getPriceFormattedLabel(field.label, price);
+
+    return {
+      ...field,
+      label,
+      ...(fieldsThatSupportLabelAsSafeHtml.includes(field.type) && field.labelAsSafeHtml
+        ? { labelAsSafeHtml: markdownToSafeHTML(label) }
+        : { labelAsSafeHtml: undefined }),
+    };
+  };
+
+  const getFieldWithOptionLevelPrices = (field: Fields[number]) => {
+    if (!fieldTypesConfigMap[field.type]?.optionsSupportPricing || !field.options) return field;
+
+    return {
+      ...field,
+      options: field.options.map((opt) => {
+        const option = opt as { value: string; label: string; price?: number };
+        const optionPrice = option.price;
+
+        // Only add price to label if there's a price
+        if (!optionPrice) return option;
+
+        return {
+          ...option,
+          label: getPriceFormattedLabel(option.label, optionPrice),
+        };
+      }),
+    };
+  };
+
   return (
     // TODO: It might make sense to extract this logic into BookingFields config, that would allow to quickly configure system fields and their editability in fresh booking and reschedule booking view
     // The logic here intends to make modifications to booking fields based on the way we want to specifically show Booking Form
@@ -134,8 +185,28 @@ export const BookingFields = ({
           });
         }
 
+        // Add price display for custom inputs with prices
+        let fieldWithPrice = field;
+
+        if (isPaidEvent) {
+          // Handle number fields and boolean (single checkbox) fields
+          if (fieldTypesConfigMap[field.type]?.supportsPricing) {
+            fieldWithPrice = getFieldWithDirectPricing(field);
+          }
+
+          // Handle fields with option-level prices (select, multiselect, and checkbox group)
+          if (fieldTypesConfigMap[field.type]?.optionsSupportPricing) {
+            fieldWithPrice = getFieldWithOptionLevelPrices(fieldWithPrice);
+          }
+        }
+
         return (
-          <FormBuilderField className="mb-4" field={{ ...field, hidden }} readOnly={readOnly} key={index} />
+          <FormBuilderField
+            className="mb-4"
+            field={{ ...fieldWithPrice, hidden }}
+            readOnly={readOnly}
+            key={index}
+          />
         );
       })}
     </div>

packages/features/bookings/lib/getBookingFields.ts

@@ -18,7 +18,7 @@ import {
   EventTypeMetaDataSchema,
 } from "@calcom/prisma/zod-utils";
 
-type Fields = z.infer<typeof eventTypeBookingFields>;
+export type Fields = z.infer<typeof eventTypeBookingFields>;
 
 if (typeof window !== "undefined" && !process.env.INTEGRATION_TEST_MODE) {
   // This file imports some costly dependencies, so we want to make sure it's not imported on the client side.

packages/features/bookings/lib/handleNewBooking.ts

@@ -2102,6 +2102,8 @@ async function handler(
       bookerEmail,
       bookerPhoneNumber,
       isDryRun,
+      bookingFields: eventType.bookingFields,
+      locale: language,
     });
     const subscriberOptionsPaymentInitiated: GetSubscriberOptions = {
       userId: triggerForUser ? organizerUser.id : null,