diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx index 59240726..09f1c5e3 100644 --- a/apps/web/components/booking/pages/BookingPage.tsx +++ b/apps/web/components/booking/pages/BookingPage.tsx @@ -109,7 +109,7 @@ const BookingPage = ({ const mutation = useMutation(createBooking, { onSuccess: async (responseData) => { - const { attendees, paymentUid } = responseData; + const { id, attendees, paymentUid } = responseData; if (paymentUid) { return await router.push( createPaymentLink({ @@ -143,6 +143,7 @@ const BookingPage = ({ email: attendees[0].email, location, eventName: profile.eventName || "", + bookingId: id, }, }); }, diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx index b3b1aebf..d20a6034 100644 --- a/apps/web/pages/success.tsx +++ b/apps/web/pages/success.tsx @@ -3,6 +3,7 @@ import { ArrowLeftIcon, ClockIcon, XIcon } from "@heroicons/react/solid"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible"; import classNames from "classnames"; import dayjs from "dayjs"; +import localizedFormat from "dayjs/plugin/localizedFormat"; import timezone from "dayjs/plugin/timezone"; import toArray from "dayjs/plugin/toArray"; import utc from "dayjs/plugin/utc"; @@ -44,6 +45,7 @@ import { ssrInit } from "@server/lib/ssr"; dayjs.extend(utc); dayjs.extend(toArray); dayjs.extend(timezone); +dayjs.extend(localizedFormat); function redirectToExternalUrl(url: string) { window.parent.location.href = url; @@ -148,7 +150,7 @@ export default function Success(props: SuccessProps) { const [date, setDate] = useState(dayjs.utc(asStringOrThrow(router.query.date))); const { isReady, Theme } = useTheme(props.profile.theme); - const { eventType } = props; + const { eventType, bookingInfo } = props; const isBackgroundTransparent = useIsBackgroundTransparent(); const isEmbed = useIsEmbed(); @@ -296,6 +298,14 @@ export default function Success(props: SuccessProps) {
{t("what")}
{eventName}
{t("when")}
+
+ {date.format("MMMM DD, YYYY")} +
+ {date.format("LT")} - {date.add(props.eventType.length, "m").format("LT")}{" "} + + ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()}) + +
+
{t("who")}
+
+ {bookingInfo?.user && ( +
+

{bookingInfo.user.name}

+

{bookingInfo.user.email}

+
+ )} + {bookingInfo?.attendees.map((attendee, index) => ( +
+

{attendee.name}

+

{attendee.email}

+
+ ))} +
{location && ( <>
{t("where")}
@@ -319,6 +346,14 @@ export default function Success(props: SuccessProps) { )} + {bookingInfo?.description && ( + <> +
{t("additional_notes")}
+
+

{bookingInfo.description}

+
+ + )} @@ -598,6 +633,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) { const recurringEventIdQuery = asStringOrNull(context.query.recur); const typeSlug = asStringOrNull(context.query.eventSlug) ?? "15min"; const dynamicEventName = asStringOrNull(context.query.eventName) ?? ""; + const bookingId = parseInt(context.query.bookingId as string); if (isNaN(typeId)) { return { @@ -669,6 +705,26 @@ export async function getServerSideProps(context: GetServerSidePropsContext) { darkBrandColor: eventType.team ? null : eventType.users[0].darkBrandColor || null, }; + const bookingInfo = await prisma.booking.findUnique({ + where: { + id: bookingId, + }, + select: { + description: true, + user: { + select: { + name: true, + email: true, + }, + }, + attendees: { + select: { + name: true, + email: true, + }, + }, + }, + }); let recurringBookings = null; if (recurringEventIdQuery) { // We need to get the dates for the bookings to be able to show them in the UI @@ -691,6 +747,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) { trpcState: ssr.dehydrate(), dynamicEventName, userHasSpaceBooking, + bookingInfo, }, }; }