Fix booking page when toggling payment app settings (#8451)

* Use getPaymentAppData on booking list item

* Use paymentAppdata for event type description

* Remove console.log

* Type fix

* Type fixes

* Remove updating event type price

apps/web/components/booking/BookingListItem.tsx

@@ -10,6 +10,7 @@ import "@calcom/dayjs/locales";
 import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog";
 import classNames from "@calcom/lib/classNames";
 import { formatTime } from "@calcom/lib/date-fns";
+import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
@@ -86,6 +87,8 @@ function BookingListItem(booking: BookingItemProps) {
   const isTabRecurring = booking.listingStatus === "recurring";
   const isTabUnconfirmed = booking.listingStatus === "unconfirmed";
 
+  const paymentAppData = getPaymentAppData(booking.eventType);
+
   const bookingConfirm = async (confirm: boolean) => {
     let body = {
       bookingId: booking.id,
@@ -413,7 +416,7 @@ function BookingListItem(booking: BookingItemProps) {
               {title}
               <span> </span>
 
-              {!!booking?.eventType?.price && !booking.paid && (
+              {paymentAppData.enabled && !booking.paid && booking.payment.length && (
                 <Badge className="ms-2 me-2 hidden sm:inline-flex" variant="orange">
                   {t("pending_payment")}
                 </Badge>

packages/app-store/_utils/getEventTypeAppData.ts

@@ -29,7 +29,7 @@ export const getEventTypeAppData = <T extends EventTypeAppsList>(
   // Migration isn't being done right now, to allow a revert if needed
   const legacyAppsData = {
     stripe: {
-      enabled: eventType.price > 0,
+      enabled: !!eventType.price,
       // Price default is 0 in DB. So, it would always be non nullish.
       price: eventType.price,
       // Currency default is "usd" in DB.So, it would also be available always

packages/features/eventtypes/components/EventTypeDescription.tsx

@@ -4,6 +4,7 @@ import { useMemo } from "react";
 import type { z } from "zod";
 
 import { classNames, parseRecurringEvent } from "@calcom/lib";
+import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { baseEventTypeSelect } from "@calcom/prisma";
 import type { EventTypeModel } from "@calcom/prisma/zod";
@@ -37,6 +38,8 @@ export const EventTypeDescription = ({
     [eventType.recurringEvent]
   );
 
+  const paymentAppData = getPaymentAppData(eventType);
+
   return (
     <>
       <div className={classNames("text-subtle", className)}>
@@ -89,13 +92,13 @@ export const EventTypeDescription = ({
               </Badge>
             </li>
           )}
-          {eventType.price > 0 && (
+          {paymentAppData.enabled && (
             <li>
               <Badge variant="gray" startIcon={CreditCard}>
                 {new Intl.NumberFormat(i18n.language, {
                   style: "currency",
-                  currency: eventType.currency,
-                }).format(eventType.price / 100)}
+                  currency: paymentAppData.currency,
+                }).format(paymentAppData.price / 100)}
               </Badge>
             </li>
           )}

packages/trpc/server/routers/viewer/bookings.tsx

@@ -23,7 +23,7 @@ import { isPrismaObjOrUndefined, parseRecurringEvent } from "@calcom/lib";
 import logger from "@calcom/lib/logger";
 import { getTranslation } from "@calcom/lib/server";
 import { bookingMinimalSelect } from "@calcom/prisma";
-import { bookingConfirmPatchBodySchema } from "@calcom/prisma/zod-utils";
+import { bookingConfirmPatchBodySchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import type { AdditionalInformation, CalendarEvent, Person } from "@calcom/types/Calendar";
 
 import { TRPCError } from "@trpc/server";
@@ -252,6 +252,8 @@ export const bookingsRouter = router({
                 eventName: true,
                 price: true,
                 recurringEvent: true,
+                currency: true,
+                metadata: true,
                 team: {
                   select: {
                     name: true,
@@ -365,6 +367,9 @@ export const bookingsRouter = router({
           eventType: {
             ...booking.eventType,
             recurringEvent: parseRecurringEvent(booking.eventType?.recurringEvent),
+            price: booking.eventType?.price || 0,
+            currency: booking.eventType?.currency || "usd",
+            metadata: EventTypeMetaDataSchema.parse(booking.eventType?.metadata || {}),
           },
           startTime: booking.startTime.toISOString(),
           endTime: booking.endTime.toISOString(),

packages/trpc/server/routers/viewer/eventTypes.ts

@@ -7,7 +7,6 @@ import { z } from "zod";
 import getAppKeysFromSlug from "@calcom/app-store/_utils/getAppKeysFromSlug";
 import type { LocationObject } from "@calcom/app-store/locations";
 import { DailyLocationType } from "@calcom/app-store/locations";
-import { stripeDataSchema } from "@calcom/app-store/stripepayment/lib/server";
 import getApps, { getAppFromLocationValue, getAppFromSlug } from "@calcom/app-store/utils";
 import updateChildrenEventTypes from "@calcom/features/ee/managed-event-types/lib/handleChildrenEventTypes";
 import { validateIntervalLimitOrder } from "@calcom/lib";
@@ -647,27 +646,6 @@ export const eventTypesRouter = router({
       };
     }
 
-    if (input?.price || input.metadata?.apps?.stripe?.price) {
-      data.price = input.price || input.metadata?.apps?.stripe?.price;
-      const paymentCredential = await ctx.prisma.credential.findFirst({
-        where: {
-          userId: ctx.user.id,
-          type: {
-            contains: "_payment",
-          },
-        },
-        select: {
-          type: true,
-          key: true,
-        },
-      });
-
-      if (paymentCredential?.type === "stripe_payment") {
-        const { default_currency } = stripeDataSchema.parse(paymentCredential.key);
-        data.currency = default_currency;
-      }
-    }
-
     const connectedLink = await ctx.prisma.hashedLink.findFirst({
       where: {
         eventTypeId: input.id,