Skip to content

Commit 3755174

Browse files
CarinaWolliCarinaWollialannnc
authoredMay 30, 2022
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>
1 parent bc74014 commit 3755174

File tree

4 files changed

+57
-33
lines changed

4 files changed

+57
-33
lines changed
 

‎apps/web/components/booking/BookingListItem.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -207,8 +207,8 @@ function BookingListItem(booking: BookingItemProps) {
207207
type: booking.eventType.id,
208208
eventSlug: booking.eventType.slug,
209209
user: user?.username || "",
210-
name: booking.attendees[0].name,
211-
email: booking.attendees[0].email,
210+
name: booking.attendees[0] ? booking.attendees[0].name : undefined,
211+
email: booking.attendees[0] ? booking.attendees[0].email : undefined,
212212
location: booking.location
213213
? booking.location.includes("integration")
214214
? (t("web_conferencing_details_to_follow") as string)
@@ -218,6 +218,8 @@ function BookingListItem(booking: BookingItemProps) {
218218
bookingId: booking.id,
219219
recur: booking.recurringEventId,
220220
reschedule: booking.confirmed,
221+
listingStatus: booking.listingStatus,
222+
status: booking.status,
221223
},
222224
});
223225
};

‎apps/web/pages/success.tsx

+43-28
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ type SuccessProps = inferSSRProps<typeof getServerSideProps>;
148148
export default function Success(props: SuccessProps) {
149149
const { t } = useLocale();
150150
const router = useRouter();
151-
const { location: _location, name, reschedule, status } = router.query;
151+
const { location: _location, name, reschedule, listingStatus, status } = router.query;
152152
const location = Array.isArray(_location) ? _location[0] : _location;
153153
const [is24h, setIs24h] = useState(isBrowserLocale24h());
154154
const { data: session } = useSession();
@@ -176,6 +176,7 @@ export default function Success(props: SuccessProps) {
176176

177177
const eventName = getEventName(eventNameObject);
178178
const needsConfirmation = eventType.requiresConfirmation && reschedule != "true";
179+
const isCancelled = status === "CANCELLED" || status === "REJECTED";
179180
const telemetry = useTelemetry();
180181
useEffect(() => {
181182
telemetry.withJitsu((jitsu) =>
@@ -238,6 +239,9 @@ export default function Success(props: SuccessProps) {
238239

239240
function getTitle(): string {
240241
const titleSuffix = props.recurringBookings ? "_recurring" : "";
242+
if (isCancelled) {
243+
return t("emailed_information_about_cancelled_event");
244+
}
241245
if (needsConfirmation) {
242246
if (props.profile.name !== null) {
243247
return t("user_needs_to_confirm_or_reject_booking" + titleSuffix, {
@@ -298,25 +302,31 @@ export default function Success(props: SuccessProps) {
298302
<div
299303
className={classNames(
300304
"mx-auto flex items-center justify-center",
301-
!giphyImage ? "h-12 w-12 rounded-full bg-green-100" : ""
305+
!giphyImage && !isCancelled ? "h-12 w-12 rounded-full bg-green-100" : "",
306+
isCancelled ? "h-12 w-12 rounded-full bg-red-100" : ""
302307
)}>
303308
{giphyImage && !needsConfirmation && (
304309
// eslint-disable-next-line @next/next/no-img-element
305310
<img src={giphyImage} alt={"Gif from Giphy"} />
306311
)}
307-
{!giphyImage && !needsConfirmation && (
312+
{!giphyImage && !needsConfirmation && !isCancelled && (
308313
<CheckIcon className="h-8 w-8 text-green-600" />
309314
)}
310-
{needsConfirmation && <ClockIcon className="h-8 w-8 text-green-600" />}
315+
{needsConfirmation && !isCancelled && (
316+
<ClockIcon className="h-8 w-8 text-green-600" />
317+
)}
318+
{isCancelled && <XIcon className="h-8 w-8 text-red-600" />}
311319
</div>
312320
<div className="mt-3 text-center sm:mt-5">
313321
<h3
314322
className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
315323
id="modal-headline">
316-
{needsConfirmation
324+
{needsConfirmation && !isCancelled
317325
? props.recurringBookings
318326
? t("submitted_recurring")
319327
: t("submitted")
328+
: isCancelled
329+
? t("event_cancelled")
320330
: props.recurringBookings
321331
? t("meeting_is_scheduled_recurring")
322332
: t("meeting_is_scheduled")}
@@ -333,32 +343,36 @@ export default function Success(props: SuccessProps) {
333343
isReschedule={reschedule === "true"}
334344
eventType={props.eventType}
335345
recurringBookings={props.recurringBookings}
336-
status={(status as string) || "upcoming"}
346+
listingStatus={(listingStatus as string) || "upcoming"}
337347
date={date}
338348
is24h={is24h}
339349
/>
340350
</div>
341-
<div className="font-medium">{t("who")}</div>
342-
<div className="col-span-2 mb-6">
343-
{bookingInfo?.user && (
344-
<div className="mb-3">
345-
<p>{bookingInfo.user.name}</p>
346-
<p className="text-bookinglight">{bookingInfo.user.email}</p>
347-
</div>
348-
)}
349-
{bookingInfo?.attendees.map((attendee, index) => (
350-
<div
351-
key={attendee.name}
352-
className={index === bookingInfo.attendees.length - 1 ? "" : "mb-3"}>
353-
<p>{attendee.name}</p>
354-
<p className="text-bookinglight">{attendee.email}</p>
351+
{(bookingInfo?.user || bookingInfo?.attendees) && (
352+
<>
353+
<div className="font-medium">{t("who")}</div>
354+
<div className="col-span-2 mb-6">
355+
{bookingInfo?.user && (
356+
<div className="mb-3">
357+
<p>{bookingInfo.user.name}</p>
358+
<p className="text-bookinglight">{bookingInfo.user.email}</p>
359+
</div>
360+
)}
361+
{bookingInfo?.attendees.map((attendee, index) => (
362+
<div
363+
key={attendee.name}
364+
className={index === bookingInfo.attendees.length - 1 ? "" : "mb-3"}>
365+
<p>{attendee.name}</p>
366+
<p className="text-bookinglight">{attendee.email}</p>
367+
</div>
368+
))}
355369
</div>
356-
))}
357-
</div>
370+
</>
371+
)}
358372
{location && (
359373
<>
360-
<div className="mt-6 font-medium">{t("where")}</div>
361-
<div className="col-span-2 mt-6">
374+
<div className="mt-3 font-medium">{t("where")}</div>
375+
<div className="col-span-2 mt-3">
362376
{location.startsWith("http") ? (
363377
<a title="Meeting Link" href={location}>
364378
{location}
@@ -401,6 +415,7 @@ export default function Success(props: SuccessProps) {
401415
</div>
402416
</div>
403417
{!needsConfirmation &&
418+
!isCancelled &&
404419
(!isCancellationMode ? (
405420
<div className="border-bookinglightest text-bookingdark mt-2 grid grid-cols-3 border-b py-4 text-left dark:border-gray-900">
406421
<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) {
425440
theme={userIsOwner ? "light" : props.profile.theme}
426441
/>
427442
))}
428-
{userIsOwner && !needsConfirmation && !isCancellationMode && (
443+
{userIsOwner && !needsConfirmation && !isCancellationMode && !isCancelled && (
429444
<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">
430445
<span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
431446
{t("add_to_calendar")}
@@ -591,19 +606,19 @@ type RecurringBookingsProps = {
591606
recurringBookings: SuccessProps["recurringBookings"];
592607
date: dayjs.Dayjs;
593608
is24h: boolean;
594-
status: string;
609+
listingStatus: string;
595610
};
596611

597612
function RecurringBookings({
598613
isReschedule = false,
599614
eventType,
600615
recurringBookings,
601616
date,
602-
status,
617+
listingStatus,
603618
}: RecurringBookingsProps) {
604619
const [moreEventsVisible, setMoreEventsVisible] = useState(false);
605620
const { t } = useLocale();
606-
return !isReschedule && recurringBookings && status === "upcoming" ? (
621+
return !isReschedule && recurringBookings && listingStatus === "upcoming" ? (
607622
<>
608623
{eventType.recurringEvent?.count &&
609624
recurringBookings.slice(0, 4).map((dateStr, idx) => (

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -867,8 +867,10 @@
867867
"nevermind": "Nevermind",
868868
"go_to": "Go to: ",
869869
"zapier_invite_link": "Zapier Invite Link",
870+
"meeting_url_provided_after_confirmed":"A Meeting URL will be created once the event is confirmed.",
871+
"event_cancelled":"This event is cancelled",
872+
"emailed_information_about_cancelled_event": "We emailed you and the other attendees to let them know.",
870873
"this_input_will_shown_booking_this_event": "This input will be shown when booking this event",
871-
"meeting_url_provided_after_confirmed": "A Meeting URL will be created once the event is confirmed.",
872874
"meeting_url_in_conformation_email": "Meeting url is in the confirmation email",
873875
"url_start_with_https": "URL needs to start with http:// or https://",
874876
"number_provided": "Phone number will be provided"

‎turbo.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,12 @@
105105
"outputs": [".next/**"]
106106
},
107107
"build": {
108-
"dependsOn": ["^build", "@calcom/embed-core#build","@calcom/embed-react#build", "@calcom/embed-react#build"],
108+
"dependsOn": [
109+
"^build",
110+
"@calcom/embed-core#build",
111+
"@calcom/embed-react#build",
112+
"@calcom/embed-react#build"
113+
],
109114
"outputs": ["dist/**", ".next/**"]
110115
},
111116
"db-deploy": {},
@@ -150,7 +155,7 @@
150155
"dependsOn": ["@calcom/prisma#db-reset", "@calcom/web#test", "@calcom/web#build"]
151156
},
152157
"type-check": {
153-
"dependsOn": ["@calcom/embed-react#build","@calcom/embed-core#build", "@calcom/embed-snippet#build"],
158+
"dependsOn": ["@calcom/embed-react#build", "@calcom/embed-core#build", "@calcom/embed-snippet#build"],
154159
"outputs": []
155160
}
156161
}

0 commit comments

Comments
 (0)