Fix booking detail page for cancelled events (#2905)
* fix booking detail page for cancelled events * Fix typo * fix bug when now attendees exist in booking Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Alan <alannnc@gmail.com>
This commit is contained in:
Carina Wollendorfer
GitHub
parent
bc74014040
commit
375517486c
|
|
@ -207,8 +207,8 @@ function BookingListItem(booking: BookingItemProps) {
|
|||
type: booking.eventType.id,
|
||||
eventSlug: booking.eventType.slug,
|
||||
user: user?.username || "",
|
||||
name: booking.attendees[0].name,
|
||||
email: booking.attendees[0].email,
|
||||
name: booking.attendees[0] ? booking.attendees[0].name : undefined,
|
||||
email: booking.attendees[0] ? booking.attendees[0].email : undefined,
|
||||
location: booking.location
|
||||
? booking.location.includes("integration")
|
||||
? (t("web_conferencing_details_to_follow") as string)
|
||||
|
|
@ -218,6 +218,8 @@ function BookingListItem(booking: BookingItemProps) {
|
|||
bookingId: booking.id,
|
||||
recur: booking.recurringEventId,
|
||||
reschedule: booking.confirmed,
|
||||
listingStatus: booking.listingStatus,
|
||||
status: booking.status,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ type SuccessProps = inferSSRProps<typeof getServerSideProps>;
|
|||
export default function Success(props: SuccessProps) {
|
||||
const { t } = useLocale();
|
||||
const router = useRouter();
|
||||
const { location: _location, name, reschedule, status } = router.query;
|
||||
const { location: _location, name, reschedule, listingStatus, status } = router.query;
|
||||
const location = Array.isArray(_location) ? _location[0] : _location;
|
||||
const [is24h, setIs24h] = useState(isBrowserLocale24h());
|
||||
const { data: session } = useSession();
|
||||
|
|
@ -176,6 +176,7 @@ export default function Success(props: SuccessProps) {
|
|||
|
||||
const eventName = getEventName(eventNameObject);
|
||||
const needsConfirmation = eventType.requiresConfirmation && reschedule != "true";
|
||||
const isCancelled = status === "CANCELLED" || status === "REJECTED";
|
||||
const telemetry = useTelemetry();
|
||||
useEffect(() => {
|
||||
telemetry.withJitsu((jitsu) =>
|
||||
|
|
@ -238,6 +239,9 @@ export default function Success(props: SuccessProps) {
|
|||
|
||||
function getTitle(): string {
|
||||
const titleSuffix = props.recurringBookings ? "_recurring" : "";
|
||||
if (isCancelled) {
|
||||
return t("emailed_information_about_cancelled_event");
|
||||
}
|
||||
if (needsConfirmation) {
|
||||
if (props.profile.name !== null) {
|
||||
return t("user_needs_to_confirm_or_reject_booking" + titleSuffix, {
|
||||
|
|
@ -298,25 +302,31 @@ export default function Success(props: SuccessProps) {
|
|||
<div
|
||||
className={classNames(
|
||||
"mx-auto flex items-center justify-center",
|
||||
!giphyImage ? "h-12 w-12 rounded-full bg-green-100" : ""
|
||||
!giphyImage && !isCancelled ? "h-12 w-12 rounded-full bg-green-100" : "",
|
||||
isCancelled ? "h-12 w-12 rounded-full bg-red-100" : ""
|
||||
)}>
|
||||
{giphyImage && !needsConfirmation && (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={giphyImage} alt={"Gif from Giphy"} />
|
||||
)}
|
||||
{!giphyImage && !needsConfirmation && (
|
||||
{!giphyImage && !needsConfirmation && !isCancelled && (
|
||||
<CheckIcon className="h-8 w-8 text-green-600" />
|
||||
)}
|
||||
{needsConfirmation && <ClockIcon className="h-8 w-8 text-green-600" />}
|
||||
{needsConfirmation && !isCancelled && (
|
||||
<ClockIcon className="h-8 w-8 text-green-600" />
|
||||
)}
|
||||
{isCancelled && <XIcon className="h-8 w-8 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"
|
||||
id="modal-headline">
|
||||
{needsConfirmation
|
||||
{needsConfirmation && !isCancelled
|
||||
? props.recurringBookings
|
||||
? t("submitted_recurring")
|
||||
: t("submitted")
|
||||
: isCancelled
|
||||
? t("event_cancelled")
|
||||
: props.recurringBookings
|
||||
? t("meeting_is_scheduled_recurring")
|
||||
: t("meeting_is_scheduled")}
|
||||
|
|
@ -333,32 +343,36 @@ export default function Success(props: SuccessProps) {
|
|||
isReschedule={reschedule === "true"}
|
||||
eventType={props.eventType}
|
||||
recurringBookings={props.recurringBookings}
|
||||
status={(status as string) || "upcoming"}
|
||||
listingStatus={(listingStatus as string) || "upcoming"}
|
||||
date={date}
|
||||
is24h={is24h}
|
||||
/>
|
||||
</div>
|
||||
<div className="font-medium">{t("who")}</div>
|
||||
<div className="col-span-2 mb-6">
|
||||
{bookingInfo?.user && (
|
||||
<div className="mb-3">
|
||||
<p>{bookingInfo.user.name}</p>
|
||||
<p className="text-bookinglight">{bookingInfo.user.email}</p>
|
||||
{(bookingInfo?.user || bookingInfo?.attendees) && (
|
||||
<>
|
||||
<div className="font-medium">{t("who")}</div>
|
||||
<div className="col-span-2 mb-6">
|
||||
{bookingInfo?.user && (
|
||||
<div className="mb-3">
|
||||
<p>{bookingInfo.user.name}</p>
|
||||
<p className="text-bookinglight">{bookingInfo.user.email}</p>
|
||||
</div>
|
||||
)}
|
||||
{bookingInfo?.attendees.map((attendee, index) => (
|
||||
<div
|
||||
key={attendee.name}
|
||||
className={index === bookingInfo.attendees.length - 1 ? "" : "mb-3"}>
|
||||
<p>{attendee.name}</p>
|
||||
<p className="text-bookinglight">{attendee.email}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{bookingInfo?.attendees.map((attendee, index) => (
|
||||
<div
|
||||
key={attendee.name}
|
||||
className={index === bookingInfo.attendees.length - 1 ? "" : "mb-3"}>
|
||||
<p>{attendee.name}</p>
|
||||
<p className="text-bookinglight">{attendee.email}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{location && (
|
||||
<>
|
||||
<div className="mt-6 font-medium">{t("where")}</div>
|
||||
<div className="col-span-2 mt-6">
|
||||
<div className="mt-3 font-medium">{t("where")}</div>
|
||||
<div className="col-span-2 mt-3">
|
||||
{location.startsWith("http") ? (
|
||||
<a title="Meeting Link" href={location}>
|
||||
{location}
|
||||
|
|
@ -401,6 +415,7 @@ export default function Success(props: SuccessProps) {
|
|||
</div>
|
||||
</div>
|
||||
{!needsConfirmation &&
|
||||
!isCancelled &&
|
||||
(!isCancellationMode ? (
|
||||
<div className="border-bookinglightest text-bookingdark mt-2 grid grid-cols-3 border-b py-4 text-left dark:border-gray-900">
|
||||
<span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
|
||||
|
|
@ -425,7 +440,7 @@ export default function Success(props: SuccessProps) {
|
|||
theme={userIsOwner ? "light" : props.profile.theme}
|
||||
/>
|
||||
))}
|
||||
{userIsOwner && !needsConfirmation && !isCancellationMode && (
|
||||
{userIsOwner && !needsConfirmation && !isCancellationMode && !isCancelled && (
|
||||
<div className="border-bookinglightest mt-9 flex border-b pt-2 pb-4 text-center dark:border-gray-900 sm:mt-0 sm:pt-4">
|
||||
<span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
|
||||
{t("add_to_calendar")}
|
||||
|
|
@ -591,7 +606,7 @@ type RecurringBookingsProps = {
|
|||
recurringBookings: SuccessProps["recurringBookings"];
|
||||
date: dayjs.Dayjs;
|
||||
is24h: boolean;
|
||||
status: string;
|
||||
listingStatus: string;
|
||||
};
|
||||
|
||||
function RecurringBookings({
|
||||
|
|
@ -599,11 +614,11 @@ function RecurringBookings({
|
|||
eventType,
|
||||
recurringBookings,
|
||||
date,
|
||||
status,
|
||||
listingStatus,
|
||||
}: RecurringBookingsProps) {
|
||||
const [moreEventsVisible, setMoreEventsVisible] = useState(false);
|
||||
const { t } = useLocale();
|
||||
return !isReschedule && recurringBookings && status === "upcoming" ? (
|
||||
return !isReschedule && recurringBookings && listingStatus === "upcoming" ? (
|
||||
<>
|
||||
{eventType.recurringEvent?.count &&
|
||||
recurringBookings.slice(0, 4).map((dateStr, idx) => (
|
||||
|
|
|
|||
|
|
@ -867,8 +867,10 @@
|
|||
"nevermind": "Nevermind",
|
||||
"go_to": "Go to: ",
|
||||
"zapier_invite_link": "Zapier Invite Link",
|
||||
"meeting_url_provided_after_confirmed":"A Meeting URL will be created once the event is confirmed.",
|
||||
"event_cancelled":"This event is cancelled",
|
||||
"emailed_information_about_cancelled_event": "We emailed you and the other attendees to let them know.",
|
||||
"this_input_will_shown_booking_this_event": "This input will be shown when booking this event",
|
||||
"meeting_url_provided_after_confirmed": "A Meeting URL will be created once the event is confirmed.",
|
||||
"meeting_url_in_conformation_email": "Meeting url is in the confirmation email",
|
||||
"url_start_with_https": "URL needs to start with http:// or https://",
|
||||
"number_provided": "Phone number will be provided"
|
||||
|
|
|
|||
|
|
@ -105,7 +105,12 @@
|
|||
"outputs": [".next/**"]
|
||||
},
|
||||
"build": {
|
||||
"dependsOn": ["^build", "@calcom/embed-core#build","@calcom/embed-react#build", "@calcom/embed-react#build"],
|
||||
"dependsOn": [
|
||||
"^build",
|
||||
"@calcom/embed-core#build",
|
||||
"@calcom/embed-react#build",
|
||||
"@calcom/embed-react#build"
|
||||
],
|
||||
"outputs": ["dist/**", ".next/**"]
|
||||
},
|
||||
"db-deploy": {},
|
||||
|
|
@ -150,7 +155,7 @@
|
|||
"dependsOn": ["@calcom/prisma#db-reset", "@calcom/web#test", "@calcom/web#build"]
|
||||
},
|
||||
"type-check": {
|
||||
"dependsOn": ["@calcom/embed-react#build","@calcom/embed-core#build", "@calcom/embed-snippet#build"],
|
||||
"dependsOn": ["@calcom/embed-react#build", "@calcom/embed-core#build", "@calcom/embed-snippet#build"],
|
||||
"outputs": []
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user