feat: show pay & book label to the meeting confirmation button when payment is enabled. (#12960)

* feat: Meeting confirmation button when payment is enabled says `pay & book`

* Update apps/web/public/static/locales/en/common.json

---------

Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>

apps/web/public/static/locales/en/common.json

@@ -2194,6 +2194,7 @@
   "uprade_to_create_instant_bookings": "Upgrade to Enterprise and let guests join an instant call that attendees can jump straight into. This is only for team event types",
   "dont_want_to_wait": "Don't want to wait?",
   "meeting_started": "Meeting Started",
+  "pay_and_book": "Pay to book",
   "booking_not_found_error": "Could not find booking",
   "booking_seats_full_error": "Booking seats are full",
   "missing_payment_credential_error": "Missing payment credentials",

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

@@ -4,7 +4,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useSession } from "next-auth/react";
 import type { TFunction } from "next-i18next";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useMemo } from "react";
 import type { FieldError } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -28,6 +28,7 @@ import getBookingResponsesSchema, {
 import { getFullName } from "@calcom/features/form-builder/utils";
 import { useBookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
 import { MINUTES_TO_BOOK } from "@calcom/lib/constants";
+import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
@@ -174,6 +175,12 @@ export const BookEventFormChild = ({
   const username = useBookerStore((state) => state.username);
   const [expiryTime, setExpiryTime] = useState<Date | undefined>();
 
+  const isPaidEvent = useMemo(() => {
+    if (!eventType?.price) return false;
+    const paymentAppData = getPaymentAppData(eventType);
+    return eventType?.price > 0 || paymentAppData.price > 0;
+  }, [eventType]);
+
   type BookingFormValues = {
     locationType?: EventLocationType["type"];
     responses: z.infer<typeof bookingFormSchema>["responses"] | null;
@@ -429,7 +436,7 @@ export const BookEventFormChild = ({
         <div className="modalsticky mt-auto flex justify-end space-x-2 rtl:space-x-reverse">
           {isInstantMeeting ? (
             <Button type="submit" color="primary" loading={createInstantBookingMutation.isLoading}>
-              {t("confirm")}
+              {isPaidEvent ? t("pay_and_book") : t("confirm")}
             </Button>
           ) : (
             <>
@@ -455,7 +462,9 @@ export const BookEventFormChild = ({
                 {rescheduleUid && bookingData
                   ? t("reschedule")
                   : renderConfirmNotVerifyEmailButtonCond
-                  ? t("confirm")
+                  ? isPaidEvent
+                    ? t("pay_and_book")
+                    : t("confirm")
                   : t("verify_email_email_button")}
               </Button>
             </>