@@ -191,10 +198,12 @@ function BookingListItem(booking: BookingItemProps) {
setLocationMutation.mutate({ bookingId: booking.id, newLocation });
};
- // Calculate the booking date(s)
+ // Calculate the booking date(s) and setup recurring event data to show
let recurringStrings: string[] = [];
- if (booking.recurringCount && booking.eventType.recurringEvent?.freq !== null) {
- [recurringStrings] = parseRecurringDates(
+ let recurringDates: Date[] = [];
+ const today = new Date();
+ if (booking.recurringCount && booking.eventType.recurringEvent?.freq !== undefined) {
+ [recurringStrings, recurringDates] = parseRecurringDates(
{
startDate: booking.startTime,
recurringEvent: parseRecurringEvent(booking.eventType.recurringEvent),
@@ -202,6 +211,11 @@ function BookingListItem(booking: BookingItemProps) {
},
i18n
);
+ if (booking.status === BookingStatus.PENDING) {
+ // Only take into consideration next up instances if booking is confirmed
+ recurringDates = recurringDates.filter((aDate) => aDate >= today);
+ recurringStrings = recurringDates.map((_, key) => recurringStrings[key]);
+ }
}
let location = booking.location || "";
@@ -285,9 +299,7 @@ function BookingListItem(booking: BookingItemProps) {
- |
+ |
{startTime}
@@ -297,24 +309,27 @@ function BookingListItem(booking: BookingItemProps) {
{booking.recurringCount &&
booking.eventType?.recurringEvent?.freq &&
- booking.listingStatus === "upcoming" && (
+ (booking.listingStatus === "recurring" || booking.listingStatus === "cancelled") && (
(
{aDate}
))}>
-
-
- {`${t("every_for_freq", {
- freq: t(
- `${Frequency[booking.eventType.recurringEvent.freq].toString().toLowerCase()}`
- ),
- })} ${booking.recurringCount} ${t(
- `${Frequency[booking.eventType.recurringEvent.freq].toString().toLowerCase()}`,
- { count: booking.recurringCount }
- )}`}
-
+
+
+
+ {booking.status === BookingStatus.ACCEPTED
+ ? `${t("event_remaining", {
+ count: recurringDates.length,
+ })}`
+ : getEveryFreqFor({
+ t,
+ recurringEvent: booking.eventType.recurringEvent,
+ recurringCount: booking.recurringCount,
+ })}
+
+
diff --git a/apps/web/components/booking/CancelBooking.tsx b/apps/web/components/booking/CancelBooking.tsx
index d3ebc2cd0a..1b26e67ca1 100644
--- a/apps/web/components/booking/CancelBooking.tsx
+++ b/apps/web/components/booking/CancelBooking.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { RecurringEvent } from "@calcom/types/Calendar";
import { Button } from "@calcom/ui/Button";
import useTheme from "@lib/hooks/useTheme";
@@ -17,6 +18,7 @@ type Props = {
name: string | null;
slug: string | null;
};
+ recurringEvent: RecurringEvent | null;
team?: string | null;
setIsCancellationMode: (value: boolean) => void;
theme: string | null;
@@ -59,11 +61,13 @@ export default function CancelBooking(props: Props) {
rows={3}
/>
-
-
-
+ {!props.recurringEvent && (
+
+
+
+ )}
|