Improving cancellation flow (#5447)
* Booking succes query refactor The query is now using the uid as its main identifier for the success page * Minor changes to the succes.tsx and tests * Convert eventtype dates to string, and only select eventtype slug from db to have a smaller query (we don't need more data, and this way we don't need to convert the dates in here to smaller strings either.) * In the payment component get the bookingUid from props instead of the query * design fixes * fix UI for recurring bookings * fix success page for recurring events * fix cancelling recurring events * fix design of successful cancellation page * fix email redirect + design fixes * remove old cancel page * fix v2 design for text area * Changed the recurringMutation to use the uid for the success booking page * redirect form old to new cancel page * fix success page for recurring events * rename to allRemainingbookings * fix old cancel redirect * fix recurring cancel link in email * fix redirect when cancelling one recurring booking * remove reschedule for recurring events in email * create queryschema for cancel success page * scroll down to bottom if cancel * add cancellation reason * fix tests * fix old /cancel component * code clean up * Uses URL query as cancellation state Also fixes string to boolean inference Co-authored-by: Mischa Rouleaux <mischa-rouleaux@live.nl> Co-authored-by: alannnc <alannnc@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: zomars <zomars@me.com>techdebt/upgrade-node18-deps^2
Carina Wollendorfer
GitHub
parent
12d47ab949
commit
fac0b0fa32
|
|
@ -112,7 +112,9 @@ function BookingListItem(booking: BookingItemProps) {
|
|||
label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel"),
|
||||
/* When cancelling we need to let the UI and the API know if the intention is to
|
||||
cancel all remaining bookings or just that booking instance. */
|
||||
href: `/cancel/${booking.uid}${isTabRecurring && isRecurring ? "?allRemainingBookings=true" : ""}`,
|
||||
href: `/success?uid=${booking.uid}&cancel=true${
|
||||
isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
|
||||
}`,
|
||||
icon: Icon.FiX,
|
||||
},
|
||||
{
|
||||
|
|
@ -190,6 +192,7 @@ function BookingListItem(booking: BookingItemProps) {
|
|||
pathname: "/success",
|
||||
query: {
|
||||
uid: booking.uid,
|
||||
allRemainingBookings: isTabRecurring,
|
||||
listingStatus: booking.listingStatus,
|
||||
email: booking.attendees[0] ? booking.attendees[0].email : undefined,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|||
import useTheme from "@calcom/lib/hooks/useTheme";
|
||||
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
|
||||
import type { RecurringEvent } from "@calcom/types/Calendar";
|
||||
import { Button } from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Button, TextArea } from "@calcom/ui/components";
|
||||
|
||||
type Props = {
|
||||
booking: {
|
||||
|
|
@ -22,13 +22,14 @@ type Props = {
|
|||
team?: string | null;
|
||||
setIsCancellationMode: (value: boolean) => void;
|
||||
theme: string | null;
|
||||
allRemainingBookings: boolean;
|
||||
};
|
||||
|
||||
export default function CancelBooking(props: Props) {
|
||||
const [cancellationReason, setCancellationReason] = useState<string>("");
|
||||
const { t } = useLocale();
|
||||
const router = useRouter();
|
||||
const { booking, profile, team } = props;
|
||||
const { booking, profile, team, allRemainingBookings } = props;
|
||||
const [loading, setLoading] = useState(false);
|
||||
const telemetry = useTelemetry();
|
||||
const [error, setError] = useState<string | null>(booking ? null : t("booking_already_cancelled"));
|
||||
|
|
@ -51,30 +52,23 @@ export default function CancelBooking(props: Props) {
|
|||
{!error && (
|
||||
<div className="mt-5 sm:mt-6">
|
||||
<label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
|
||||
<textarea
|
||||
<TextArea
|
||||
placeholder={t("cancellation_reason_placeholder")}
|
||||
value={cancellationReason}
|
||||
onChange={(e) => setCancellationReason(e.target.value)}
|
||||
className="mt-2 mb-3 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:mb-3 "
|
||||
className="mt-2 mb-4 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white "
|
||||
rows={3}
|
||||
/>
|
||||
<div className="flex flex-col-reverse rtl:space-x-reverse sm:flex-row">
|
||||
{!props.recurringEvent && (
|
||||
<div className="border-bookinglightest mt-5 flex w-full justify-center border-t pt-3 sm:mt-0 sm:justify-start sm:border-0 sm:pt-0">
|
||||
<Button
|
||||
color="secondary"
|
||||
className="border-0 sm:border"
|
||||
onClick={() => router.push(`/reschedule/${booking?.uid}`)}>
|
||||
{t("reschedule_this")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-2 flex w-full space-x-2 text-right sm:mb-0 ">
|
||||
<Button color="secondary" onClick={() => props.setIsCancellationMode(false)}>
|
||||
<div className="flex flex-col-reverse rtl:space-x-reverse ">
|
||||
<div className="ml-auto flex w-full space-x-4 ">
|
||||
<Button
|
||||
className="ml-auto"
|
||||
color="secondary"
|
||||
onClick={() => props.setIsCancellationMode(false)}>
|
||||
{t("nevermind")}
|
||||
</Button>
|
||||
<Button
|
||||
className="flex grow justify-center"
|
||||
className="flex justify-center"
|
||||
data-testid="cancel"
|
||||
onClick={async () => {
|
||||
setLoading(true);
|
||||
|
|
@ -82,6 +76,7 @@ export default function CancelBooking(props: Props) {
|
|||
const payload = {
|
||||
id: booking?.id,
|
||||
cancellationReason: cancellationReason,
|
||||
allRemainingBookings,
|
||||
};
|
||||
|
||||
telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
|
||||
|
|
@ -98,7 +93,7 @@ export default function CancelBooking(props: Props) {
|
|||
await router.push(
|
||||
`/cancel/success?name=${props.profile.name}&title=${booking?.title}&eventPage=${
|
||||
profile.slug
|
||||
}&team=${team ? 1 : 0}&recurring=${!!props.recurringEvent}`
|
||||
}&team=${team ? 1 : 0}&allRemainingBookings=${allRemainingBookings}`
|
||||
);
|
||||
} else {
|
||||
setLoading(false);
|
||||
|
|
@ -110,7 +105,7 @@ export default function CancelBooking(props: Props) {
|
|||
}
|
||||
}}
|
||||
loading={loading}>
|
||||
{t("cancel_event")}
|
||||
{props.allRemainingBookings ? t("cancel_all_remaining") : t("cancel_event")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -155,6 +155,7 @@ const BookingPage = ({
|
|||
pathname: "/success",
|
||||
query: {
|
||||
uid,
|
||||
allRemainingBookings: true,
|
||||
email: bookingForm.getValues("email"),
|
||||
eventTypeSlug: eventType.slug,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,29 +1,6 @@
|
|||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
|
||||
import { GetServerSidePropsContext } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
import { useState } from "react";
|
||||
import z from "zod";
|
||||
|
||||
import dayjs from "@calcom/dayjs";
|
||||
import CustomBranding from "@calcom/lib/CustomBranding";
|
||||
import classNames from "@calcom/lib/classNames";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { parseRecurringEvent } from "@calcom/lib/isRecurringEvent";
|
||||
import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
|
||||
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
|
||||
import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
|
||||
import { localStorage } from "@calcom/lib/webstorage";
|
||||
import prisma, { bookingMinimalSelect } from "@calcom/prisma";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Button } from "@calcom/ui/components/button";
|
||||
|
||||
import { getSession } from "@lib/auth";
|
||||
import { inferSSRProps } from "@lib/types/inferSSRProps";
|
||||
|
||||
import { HeadSeo } from "@components/seo/head-seo";
|
||||
|
||||
import { ssrInit } from "@server/lib/ssr";
|
||||
|
||||
const querySchema = z.object({
|
||||
uid: z.string(),
|
||||
allRemainingBookings: z
|
||||
|
|
@ -32,288 +9,16 @@ const querySchema = z.object({
|
|||
.transform((val) => (val ? JSON.parse(val) : false)),
|
||||
});
|
||||
|
||||
export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
const { t } = useLocale();
|
||||
// Get router variables
|
||||
const router = useRouter();
|
||||
const { uid, allRemainingBookings } = querySchema.parse(router.query);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(props.booking ? null : t("booking_already_cancelled"));
|
||||
const [cancellationReason, setCancellationReason] = useState<string>("");
|
||||
const [moreEventsVisible, setMoreEventsVisible] = useState(false);
|
||||
const telemetry = useTelemetry();
|
||||
return (
|
||||
<div className="h-screen bg-neutral-100 dark:bg-neutral-900">
|
||||
<HeadSeo
|
||||
title={`${t("cancel")} ${props.booking && props.booking.title} | ${props.profile?.name}`}
|
||||
description={`${t("cancel")} ${props.booking && props.booking.title} | ${props.profile?.name}`}
|
||||
/>
|
||||
<CustomBranding lightVal={props.profile?.brandColor} darkVal={props.profile?.darkBrandColor} />
|
||||
<main className="h-full sm:flex sm:items-center">
|
||||
<div className="mx-auto flex justify-center px-4 pt-4 pb-20 sm:block sm:p-0">
|
||||
<div className="inline-block transform overflow-hidden rounded-md border bg-white px-8 pt-5 pb-4 text-left align-bottom transition-all dark:border-neutral-700 dark:bg-gray-800 sm:my-8 sm:w-full sm:max-w-lg sm:py-6 sm:align-middle">
|
||||
<div>
|
||||
<div>
|
||||
{error && (
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<Icon.FiX className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
{error}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!error && (
|
||||
<>
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<Icon.FiX className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white">
|
||||
{props.cancellationAllowed
|
||||
? t("really_cancel_booking")
|
||||
: t("cannot_cancel_booking")}
|
||||
</h3>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-neutral-600 dark:text-gray-300">
|
||||
{!props.booking?.eventType.recurringEvent
|
||||
? props.cancellationAllowed
|
||||
? t("reschedule_instead")
|
||||
: t("event_is_in_the_past")
|
||||
: allRemainingBookings
|
||||
? t("cancelling_all_recurring")
|
||||
: t("cancelling_event_recurring")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-bookinglightest text-bookingdark mt-4 grid grid-cols-3 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">{props.booking?.title}</div>
|
||||
<div className="font-medium">{t("when")}</div>
|
||||
<div className="col-span-2 mb-6">
|
||||
{props.booking?.eventType.recurringEvent && props.recurringInstances ? (
|
||||
<>
|
||||
<div className="mb-1 inline py-1 text-left">
|
||||
<div>
|
||||
{dayjs(props.recurringInstances[0].startTime).format(
|
||||
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
|
||||
)}
|
||||
<Collapsible
|
||||
open={moreEventsVisible}
|
||||
onOpenChange={() => setMoreEventsVisible(!moreEventsVisible)}>
|
||||
<CollapsibleTrigger
|
||||
type="button"
|
||||
className={classNames(
|
||||
"-ml-4 block w-full text-center",
|
||||
moreEventsVisible ? "hidden" : ""
|
||||
)}>
|
||||
+ {t("plus_more", { count: props.recurringInstances.length - 1 })}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
{props.booking?.eventType.recurringEvent?.count &&
|
||||
props.recurringInstances.slice(1).map((dateObj, idx) => (
|
||||
<div key={idx} className="">
|
||||
{dayjs(dateObj.startTime).format(
|
||||
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{dayjs(props.booking?.startTime).format(
|
||||
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
|
||||
)}{" "}
|
||||
<span className="text-bookinglight">
|
||||
({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{props.booking?.eventType.recurringEvent &&
|
||||
props.booking?.eventType.recurringEvent.freq &&
|
||||
props.recurringInstances && (
|
||||
<div className="border-b text-center text-gray-500">
|
||||
<Icon.FiRefreshCcw className="mr-3 -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<p className="mb-1 -ml-2 inline px-2 py-1">
|
||||
{getEveryFreqFor({
|
||||
t,
|
||||
recurringEvent: props.booking.eventType.recurringEvent,
|
||||
recurringCount: props.recurringInstances.length,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{props.cancellationAllowed && (
|
||||
<div>
|
||||
<textarea
|
||||
autoFocus={true}
|
||||
name={t("cancellation_reason")}
|
||||
placeholder={t("cancellation_reason_placeholder")}
|
||||
value={cancellationReason}
|
||||
onChange={(e) => setCancellationReason(e.target.value)}
|
||||
className="mt-2 mb-3 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:mb-3 "
|
||||
rows={3}
|
||||
/>
|
||||
<div className="flex justify-between space-x-2 text-center rtl:space-x-reverse">
|
||||
{!props.booking.eventType?.recurringEvent && (
|
||||
<Button color="secondary" onClick={() => router.push("/reschedule/" + uid)}>
|
||||
{t("reschedule_this")}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
data-testid="cancel"
|
||||
onClick={async () => {
|
||||
setLoading(true);
|
||||
|
||||
const payload = {
|
||||
uid: uid,
|
||||
cancellationReason: cancellationReason,
|
||||
allRemainingBookings: !!props.recurringInstances,
|
||||
};
|
||||
|
||||
telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
|
||||
|
||||
const res = await fetch("/api/cancel", {
|
||||
body: JSON.stringify(payload),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (res.status >= 200 && res.status < 300) {
|
||||
await router.push(
|
||||
`/cancel/success?name=${props.profile.name}&title=${
|
||||
props.booking.title
|
||||
}&eventPage=${props.profile.slug}&team=${
|
||||
props.booking.eventType?.team ? 1 : 0
|
||||
}&recurring=${!!props.recurringInstances}`
|
||||
);
|
||||
} else {
|
||||
setLoading(false);
|
||||
setError(
|
||||
`${t("error_with_status_code_occured", { status: res.status })} ${t(
|
||||
"please_try_again"
|
||||
)}`
|
||||
);
|
||||
}
|
||||
}}
|
||||
loading={loading}>
|
||||
{t("cancel_event")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
export default function Type() {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
export const getServerSideProps = async (context: GetServerSidePropsContext) => {
|
||||
const ssr = await ssrInit(context);
|
||||
const session = await getSession(context);
|
||||
const { allRemainingBookings, uid } = querySchema.parse(context.query);
|
||||
const booking = await prisma.booking.findUnique({
|
||||
where: {
|
||||
uid,
|
||||
},
|
||||
select: {
|
||||
...bookingMinimalSelect,
|
||||
recurringEventId: true,
|
||||
user: {
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
name: true,
|
||||
brandColor: true,
|
||||
darkBrandColor: true,
|
||||
},
|
||||
},
|
||||
eventType: {
|
||||
select: {
|
||||
length: true,
|
||||
recurringEvent: true,
|
||||
team: {
|
||||
select: {
|
||||
slug: true,
|
||||
name: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!booking) {
|
||||
// TODO: Booking is already cancelled
|
||||
return {
|
||||
props: { booking: null },
|
||||
};
|
||||
}
|
||||
|
||||
const bookingObj = Object.assign({}, booking, {
|
||||
startTime: booking.startTime.toString(),
|
||||
endTime: booking.endTime.toString(),
|
||||
eventType: {
|
||||
...booking.eventType,
|
||||
recurringEvent: parseRecurringEvent(booking.eventType?.recurringEvent),
|
||||
},
|
||||
});
|
||||
|
||||
let recurringInstances = null;
|
||||
if (booking.eventType?.recurringEvent && allRemainingBookings) {
|
||||
recurringInstances = await prisma.booking.findMany({
|
||||
where: {
|
||||
recurringEventId: booking.recurringEventId,
|
||||
startTime: {
|
||||
gte: new Date(),
|
||||
},
|
||||
NOT: [{ status: "CANCELLED" }, { status: "REJECTED" }],
|
||||
},
|
||||
select: {
|
||||
startTime: true,
|
||||
endTime: true,
|
||||
},
|
||||
});
|
||||
recurringInstances = recurringInstances.map((recurr) => ({
|
||||
...recurr,
|
||||
startTime: recurr.startTime.toString(),
|
||||
endTime: recurr.endTime.toString(),
|
||||
}));
|
||||
}
|
||||
|
||||
const profile = {
|
||||
name: booking.eventType?.team?.name || booking.user?.name || null,
|
||||
slug: booking.eventType?.team?.slug || booking.user?.username || null,
|
||||
brandColor: booking.user?.brandColor || null,
|
||||
darkBrandColor: booking.user?.darkBrandColor || null,
|
||||
};
|
||||
|
||||
return {
|
||||
props: {
|
||||
profile,
|
||||
booking: bookingObj,
|
||||
recurringInstances,
|
||||
cancellationAllowed:
|
||||
(!!session?.user && session.user?.id === booking.user?.id) || booking.startTime >= new Date(),
|
||||
trpcState: ssr.dehydrate(),
|
||||
redirect: {
|
||||
permanent: false,
|
||||
destination: `/success?uid=${uid}&allRemainingBookings=${allRemainingBookings}&cancel=true`,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,20 +1,30 @@
|
|||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/router";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Button } from "@calcom/ui/components/button";
|
||||
|
||||
import { HeadSeo } from "@components/seo/head-seo";
|
||||
|
||||
const querySchema = z.object({
|
||||
title: z.string().optional(),
|
||||
name: z.string().optional(),
|
||||
eventPage: z.string().optional(),
|
||||
allRemainingBookings: z
|
||||
.string()
|
||||
.optional()
|
||||
.transform((val) => (val ? JSON.parse(val) : false)),
|
||||
});
|
||||
|
||||
export default function CancelSuccess() {
|
||||
const { t } = useLocale();
|
||||
// Get router variables
|
||||
const router = useRouter();
|
||||
const { title, name, eventPage, recurring } = router.query;
|
||||
const { title, name, eventPage, allRemainingBookings } = querySchema.parse(router.query);
|
||||
let team: string | string[] | number | undefined = router.query.team;
|
||||
const { data: session, status } = useSession();
|
||||
const isRecurringEvent = recurring === "true" ? true : false;
|
||||
const loading = status === "loading";
|
||||
// If team param passed wrongly just assume it be a non team case.
|
||||
if (team instanceof Array || typeof team === "undefined") {
|
||||
|
|
@ -63,7 +73,7 @@ export default function CancelSuccess() {
|
|||
{!loading && session?.user && (
|
||||
<Button
|
||||
data-testid="back-to-bookings"
|
||||
href={isRecurringEvent ? "/bookings/recurring" : "/bookings/upcoming"}
|
||||
href={!!allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
|
||||
StartIcon={Icon.FiArrowLeft}>
|
||||
{t("back_to_bookings")}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@ import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
|
|||
import { getEventLocationValue, getSuccessPageLocationMessage } from "@calcom/app-store/locations";
|
||||
import { getEventTypeAppData } from "@calcom/app-store/utils";
|
||||
import { getEventName } from "@calcom/core/event";
|
||||
import dayjs from "@calcom/dayjs";
|
||||
import { ConfigType } from "@calcom/dayjs";
|
||||
import dayjs, { ConfigType } from "@calcom/dayjs";
|
||||
import {
|
||||
sdkActionManager,
|
||||
useEmbedNonStylesConfig,
|
||||
|
|
@ -35,11 +34,9 @@ import { localStorage } from "@calcom/lib/webstorage";
|
|||
import prisma, { baseUserSelect } from "@calcom/prisma";
|
||||
import { Prisma } from "@calcom/prisma/client";
|
||||
import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { EmailInput } from "@calcom/ui/form/fields";
|
||||
import { Button, EmailInput } from "@calcom/ui/components";
|
||||
|
||||
import { asStringOrThrow } from "@lib/asStringOrNull";
|
||||
import { timeZone } from "@lib/clock";
|
||||
import { inferSSRProps } from "@lib/types/inferSSRProps";
|
||||
|
||||
|
|
@ -142,11 +139,32 @@ function RedirectionToast({ url }: { url: string }) {
|
|||
|
||||
type SuccessProps = inferSSRProps<typeof getServerSideProps>;
|
||||
|
||||
const stringToBoolean = z
|
||||
.string()
|
||||
.optional()
|
||||
.transform((val) => val === "true");
|
||||
|
||||
const querySchema = z.object({
|
||||
uid: z.string(),
|
||||
allRemainingBookings: stringToBoolean,
|
||||
cancel: stringToBoolean,
|
||||
reschedule: stringToBoolean,
|
||||
isSuccessBookingPage: z.string().optional(),
|
||||
});
|
||||
|
||||
export default function Success(props: SuccessProps) {
|
||||
const { t } = useLocale();
|
||||
const router = useRouter();
|
||||
const { listingStatus, isSuccessBookingPage } = router.query;
|
||||
|
||||
const {
|
||||
allRemainingBookings,
|
||||
isSuccessBookingPage,
|
||||
cancel: isCancellationMode,
|
||||
} = querySchema.parse(router.query);
|
||||
|
||||
if (isCancellationMode && typeof window !== "undefined") {
|
||||
window.scrollTo(0, document.body.scrollHeight);
|
||||
}
|
||||
const location: ReturnType<typeof getEventLocationValue> = Array.isArray(props.bookingInfo.location)
|
||||
? props.bookingInfo.location[0] || ""
|
||||
: props.bookingInfo.location || "";
|
||||
|
|
@ -160,6 +178,7 @@ export default function Success(props: SuccessProps) {
|
|||
const email = props.bookingInfo?.user?.email;
|
||||
const status = props.bookingInfo?.status;
|
||||
const reschedule = props.bookingInfo.status === BookingStatus.ACCEPTED;
|
||||
const cancellationReason = props.bookingInfo.cancellationReason;
|
||||
|
||||
const [is24h, setIs24h] = useState(isBrowserLocale24h());
|
||||
const { data: session } = useSession();
|
||||
|
|
@ -171,7 +190,15 @@ export default function Success(props: SuccessProps) {
|
|||
const isEmbed = useIsEmbed();
|
||||
const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
|
||||
const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
|
||||
const [isCancellationMode, setIsCancellationMode] = useState(false);
|
||||
|
||||
function setIsCancellationMode(value: boolean) {
|
||||
if (value) router.query.cancel = "true";
|
||||
else delete router.query.cancel;
|
||||
router.replace({
|
||||
pathname: router.pathname,
|
||||
query: { ...router.query },
|
||||
});
|
||||
}
|
||||
|
||||
const attendeeName = typeof name === "string" ? name : "Nameless";
|
||||
|
||||
|
|
@ -251,7 +278,7 @@ export default function Success(props: SuccessProps) {
|
|||
function getTitle(): string {
|
||||
const titleSuffix = props.recurringBookings ? "_recurring" : "";
|
||||
if (isCancelled) {
|
||||
return t("emailed_information_about_cancelled_event");
|
||||
return "";
|
||||
}
|
||||
if (needsConfirmation) {
|
||||
if (props.profile.name !== null) {
|
||||
|
|
@ -276,7 +303,7 @@ export default function Success(props: SuccessProps) {
|
|||
<div className={isEmbed ? "" : "h-screen"} data-testid="success-page">
|
||||
{userIsOwner && !isEmbed && (
|
||||
<div className="mt-2 ml-4 -mb-4">
|
||||
<Link href={eventType.recurringEvent?.count ? "/bookings/recurring" : "/bookings/upcoming"}>
|
||||
<Link href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}>
|
||||
<a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-transparent dark:hover:text-white">
|
||||
<Icon.FiChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
|
||||
</a>
|
||||
|
|
@ -345,6 +372,12 @@ export default function Success(props: SuccessProps) {
|
|||
<p className="text-neutral-600 dark:text-gray-300">{getTitle()}</p>
|
||||
</div>
|
||||
<div className="border-bookinglightest text-bookingdark dark:border-darkgray-300 mt-8 grid grid-cols-3 border-t pt-8 text-left dark:text-gray-300">
|
||||
{isCancelled && cancellationReason && (
|
||||
<>
|
||||
<div className="font-medium">{t("reason")}</div>
|
||||
<div className="col-span-2 mb-6 last:mb-0">{cancellationReason}</div>
|
||||
</>
|
||||
)}
|
||||
<div className="font-medium">{t("what")}</div>
|
||||
<div className="col-span-2 mb-6 last:mb-0">{eventName}</div>
|
||||
<div className="font-medium">{t("when")}</div>
|
||||
|
|
@ -352,7 +385,7 @@ export default function Success(props: SuccessProps) {
|
|||
<RecurringBookings
|
||||
eventType={props.eventType}
|
||||
recurringBookings={props.recurringBookings}
|
||||
listingStatus={(listingStatus as string) || "recurring"}
|
||||
allRemainingBookings={allRemainingBookings}
|
||||
date={date}
|
||||
is24h={is24h}
|
||||
/>
|
||||
|
|
@ -434,8 +467,8 @@ export default function Success(props: SuccessProps) {
|
|||
!isCancelled &&
|
||||
(!isCancellationMode ? (
|
||||
<>
|
||||
<hr className="border-bookinglightest dark:border-darkgray-300" />
|
||||
<div className="py-8 text-center last:pb-0">
|
||||
<hr className="border-bookinglightest dark:border-darkgray-300 mb-8" />
|
||||
<div className="text-center last:pb-0">
|
||||
<span className="text-gray-900 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
|
||||
{t("need_to_make_a_change")}
|
||||
</span>
|
||||
|
|
@ -450,6 +483,7 @@ export default function Success(props: SuccessProps) {
|
|||
)}
|
||||
|
||||
<button
|
||||
data-testid="cancel"
|
||||
className={classNames(
|
||||
"text-bookinglight text-gray-700 underline",
|
||||
props.recurringBookings && "ltr:mr-2 rtl:ml-2"
|
||||
|
|
@ -460,19 +494,23 @@ export default function Success(props: SuccessProps) {
|
|||
</div>
|
||||
</>
|
||||
) : (
|
||||
<CancelBooking
|
||||
booking={{ uid: bookingInfo?.uid, title: bookingInfo?.title, id: bookingInfo?.id }}
|
||||
profile={{ name: props.profile.name, slug: props.profile.slug }}
|
||||
recurringEvent={eventType.recurringEvent}
|
||||
team={eventType?.team?.name}
|
||||
setIsCancellationMode={setIsCancellationMode}
|
||||
theme={isSuccessBookingPage ? props.profile.theme : "light"}
|
||||
/>
|
||||
<>
|
||||
<hr className="border-bookinglightest dark:border-darkgray-300" />
|
||||
<CancelBooking
|
||||
booking={{ uid: bookingInfo?.uid, title: bookingInfo?.title, id: bookingInfo?.id }}
|
||||
profile={{ name: props.profile.name, slug: props.profile.slug }}
|
||||
recurringEvent={eventType.recurringEvent}
|
||||
team={eventType?.team?.name}
|
||||
setIsCancellationMode={setIsCancellationMode}
|
||||
theme={isSuccessBookingPage ? props.profile.theme : "light"}
|
||||
allRemainingBookings={allRemainingBookings}
|
||||
/>
|
||||
</>
|
||||
))}
|
||||
{userIsOwner && !needsConfirmation && !isCancellationMode && !isCancelled && (
|
||||
<>
|
||||
<hr className="border-bookinglightest dark:border-darkgray-300" />
|
||||
<div className="text-bookingdark align-center flex flex-row justify-center py-8">
|
||||
<hr className="border-bookinglightest dark:border-darkgray-300 mt-8" />
|
||||
<div className="text-bookingdark align-center flex flex-row justify-center pt-8">
|
||||
<span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
|
||||
{t("add_to_calendar")}
|
||||
</span>
|
||||
|
|
@ -579,7 +617,7 @@ export default function Success(props: SuccessProps) {
|
|||
)}
|
||||
{session === null && !(userIsOwner || props.hideBranding) && (
|
||||
<>
|
||||
<hr className="border-bookinglightest dark:border-darkgray-300" />
|
||||
<hr className="border-bookinglightest dark:border-darkgray-300 mt-8" />
|
||||
<div className="border-bookinglightest text-booking-lighter dark:border-darkgray-300 pt-8 text-center text-xs dark:text-white">
|
||||
<a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
|
||||
|
||||
|
|
@ -596,10 +634,14 @@ export default function Success(props: SuccessProps) {
|
|||
name="email"
|
||||
id="email"
|
||||
defaultValue={email || ""}
|
||||
className="focus:border-brand border-bookinglightest dark:border-darkgray-300 mt-0 block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:bg-black dark:text-white sm:text-sm"
|
||||
className="mr- focus:border-brand border-bookinglightest dark:border-darkgray-300 mt-0 block w-full rounded-none rounded-l-md border-gray-300 shadow-sm focus:ring-black dark:bg-black dark:text-white sm:text-sm"
|
||||
placeholder="rick.astley@cal.com"
|
||||
/>
|
||||
<Button size="lg" type="submit" className="min-w-max" color="primary">
|
||||
<Button
|
||||
size="lg"
|
||||
type="submit"
|
||||
className="min-w-max rounded-none rounded-r-md"
|
||||
color="primary">
|
||||
{t("try_for_free")}
|
||||
</Button>
|
||||
</form>
|
||||
|
|
@ -622,15 +664,15 @@ type RecurringBookingsProps = {
|
|||
recurringBookings: SuccessProps["recurringBookings"];
|
||||
date: dayjs.Dayjs;
|
||||
is24h: boolean;
|
||||
listingStatus: string;
|
||||
allRemainingBookings: boolean;
|
||||
};
|
||||
|
||||
export function RecurringBookings({
|
||||
eventType,
|
||||
recurringBookings,
|
||||
date,
|
||||
allRemainingBookings,
|
||||
is24h,
|
||||
listingStatus,
|
||||
}: RecurringBookingsProps) {
|
||||
const [moreEventsVisible, setMoreEventsVisible] = useState(false);
|
||||
const { t } = useLocale();
|
||||
|
|
@ -639,7 +681,7 @@ export function RecurringBookings({
|
|||
? recurringBookings.sort((a: ConfigType, b: ConfigType) => (dayjs(a).isAfter(dayjs(b)) ? 1 : -1))
|
||||
: null;
|
||||
|
||||
if (recurringBookingsSorted && listingStatus === "recurring") {
|
||||
if (recurringBookingsSorted && allRemainingBookings) {
|
||||
return (
|
||||
<>
|
||||
{eventType.recurringEvent?.count && (
|
||||
|
|
@ -808,6 +850,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
|
|||
startTime: true,
|
||||
location: true,
|
||||
status: true,
|
||||
cancellationReason: true,
|
||||
user: {
|
||||
select: {
|
||||
id: true,
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ test.describe("pro user", () => {
|
|||
await page.locator('[data-testid="cancel"]').first().click();
|
||||
await page.waitForNavigation({
|
||||
url: (url) => {
|
||||
return url.pathname.startsWith("/cancel");
|
||||
return url.pathname.startsWith("/success");
|
||||
},
|
||||
});
|
||||
// --- fill form
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ test("dynamic booking", async ({ page, users }) => {
|
|||
await page.locator('[data-testid="cancel"]').first().click();
|
||||
await page.waitForNavigation({
|
||||
url: (url) => {
|
||||
return url.pathname.startsWith("/cancel");
|
||||
return url.pathname.startsWith("/success");
|
||||
},
|
||||
});
|
||||
// --- fill form
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
"event_request_cancelled": "Your scheduled event was cancelled",
|
||||
"organizer": "Organizer",
|
||||
"need_to_reschedule_or_cancel": "Need to reschedule or cancel?",
|
||||
"cancellation_reason": "Reason for cancellation",
|
||||
"cancellation_reason_placeholder": "Why are you cancelling? (optional)",
|
||||
"cancellation_reason": "Reason for cancellation (optional)",
|
||||
"cancellation_reason_placeholder": "Why are you cancelling?",
|
||||
"rejection_reason": "Reason for rejecting",
|
||||
"rejection_reason_title": "Reject the booking request?",
|
||||
"rejection_reason_description": "Are you sure you want to reject the booking? We'll let the person who tried to book know. You can provide a reason below.",
|
||||
|
|
@ -1362,6 +1362,7 @@
|
|||
"invalid_credential": "Oh no! Looks like permission expired or was revoked. Please reinstall again.",
|
||||
"choose_common_schedule_team_event": "Choose a common schedule",
|
||||
"choose_common_schedule_team_event_description": "Enable this if you want to use a common schedule between hosts. When disabled, each host will be booked based on their default schedule.",
|
||||
"reason": "Reason",
|
||||
"sender_id": "Sender ID",
|
||||
"sender_id_error_message":"Only letters, numbers and spaces allowed (max. 11 characters)",
|
||||
"test_routing_form": "Test Routing Form",
|
||||
|
|
@ -1370,3 +1371,4 @@
|
|||
"test_preview_description": "Test your routing form without submitting any data",
|
||||
"test_routing": "Test Routing"
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,10 +29,15 @@ export function ManageLink(props: { calEvent: CalendarEvent; attendee: Person })
|
|||
gap: "8px",
|
||||
}}>
|
||||
<>{t("need_to_make_a_change")}</>
|
||||
<a href={getRescheduleLink(props.calEvent)} style={{ color: "#3e3e3e" }}>
|
||||
<>{t("reschedule")}</>
|
||||
</a>
|
||||
<>{t("or_lowercase")}</>
|
||||
{!props.calEvent.recurringEvent && (
|
||||
<>
|
||||
<a href={getRescheduleLink(props.calEvent)} style={{ color: "#3e3e3e" }}>
|
||||
<>{t("reschedule")}</>
|
||||
</a>
|
||||
<>{t("or_lowercase")}</>
|
||||
</>
|
||||
)}
|
||||
|
||||
<a href={getCancelLink(props.calEvent)} style={{ color: "#3e3e3e" }}>
|
||||
<>{t("cancel")}</>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -132,7 +132,10 @@ export const getUid = (calEvent: CalendarEvent): string => {
|
|||
};
|
||||
|
||||
export const getCancelLink = (calEvent: CalendarEvent): string => {
|
||||
return WEBAPP_URL + "/cancel/" + getUid(calEvent);
|
||||
return (
|
||||
WEBAPP_URL +
|
||||
`/success?uid=${getUid(calEvent)}&cancel=true&allRemainingBookings=${!!calEvent.recurringEvent}`
|
||||
);
|
||||
};
|
||||
|
||||
export const getRescheduleLink = (calEvent: CalendarEvent): string => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue