calcom · leog · Jun 10, 2022 · May 11, 2022 · May 12, 2022 · May 12, 2022
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
@@ -18,7 +18,7 @@ import { parseRecurringEvent } from "@calcom/lib";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
-import { Frequency } from "@calcom/prisma/zod-utils";
+import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { Tooltip } from "@calcom/ui/Tooltip";
@@ -63,9 +63,9 @@ function BookingListItem(booking: BookingItemProps) {
       };
       /**
        * Only pass down the recurring event id when we need to confirm the entire series, which happens in
-       * the "Upcoming" tab, to support confirming discretionally in the "Recurring" tab.
+       * the "Recurring" tab, to support confirming discretionally in the "Recurring" tab.
        */
-      if (booking.listingStatus === "upcoming" && booking.recurringEventId !== null) {
+      if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
         body = Object.assign({}, body, { recurringEventId: booking.recurringEventId });
       }
       const res = await fetch("/api/book/confirm", {
@@ -96,7 +96,7 @@ function BookingListItem(booking: BookingItemProps) {
     {
       id: "reject",
       label:
-        booking.listingStatus === "upcoming" && booking.recurringEventId !== null
+        booking.listingStatus === "recurring" && booking.recurringEventId !== null
           ? t("reject_all")
           : t("reject"),
       onClick: () => {
@@ -108,7 +108,7 @@ function BookingListItem(booking: BookingItemProps) {
     {
       id: "confirm",
       label:
-        booking.listingStatus === "upcoming" && booking.recurringEventId !== null
+        booking.listingStatus === "recurring" && booking.recurringEventId !== null
           ? t("confirm_all")
           : t("confirm"),
       onClick: () => {
@@ -120,10 +120,13 @@ function BookingListItem(booking: BookingItemProps) {
     },
   ];
 
-  const bookedActions: ActionType[] = [
+  let bookedActions: ActionType[] = [
     {
       id: "cancel",
-      label: t("cancel"),
+      label:
+        booking.listingStatus === "recurring" && booking.recurringEventId !== null
+          ? t("cancel_all_remaining")
+          : t("cancel"),
       href: `/cancel/${booking.uid}`,
       icon: XIcon,
     },
@@ -159,6 +162,10 @@ function BookingListItem(booking: BookingItemProps) {
     },
   ];
 
+  if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
+    bookedActions = bookedActions.filter((action) => action.id !== "edit_booking");
+  }
+
   const RequestSentMessage = () => {
     return (
       <div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
@@ -191,17 +198,24 @@ 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),
         recurringCount: booking.recurringCount,
       },
       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) {
       </Dialog>
 
       <tr className="flex hover:bg-neutral-50">
-        <td
-          className="hidden whitespace-nowrap align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:w-56"
-          onClick={onClick}>
+        <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:w-64" onClick={onClick}>
           <div className="cursor-pointer py-4">
             <div className="text-sm leading-6 text-gray-900">{startTime}</div>
             <div className="text-sm text-gray-500">
@@ -297,24 +309,27 @@ function BookingListItem(booking: BookingItemProps) {
             <div className="text-sm text-gray-400">
               {booking.recurringCount &&
                 booking.eventType?.recurringEvent?.freq &&
-                booking.listingStatus === "upcoming" && (
+                (booking.listingStatus === "recurring" || booking.listingStatus === "cancelled") && (
                   <div className="underline decoration-gray-400 decoration-dashed underline-offset-2">
                     <div className="flex">
                       <Tooltip
                         content={recurringStrings.map((aDate, key) => (
                           <p key={key}>{aDate}</p>
                         ))}>
-                        <p className="text-gray-600 dark:text-white">
-                          <RefreshIcon className="mr-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
-                          {`${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 }
-                          )}`}
-                        </p>
+                        <div className="text-gray-600 dark:text-white">
+                          <RefreshIcon className="float-left mr-1 mt-[2px] inline-block h-4 w-4 text-gray-400" />
+                          <p className="pl-[21px]">
+                            {booking.status === BookingStatus.ACCEPTED
+                              ? `${t("event_remaining", {
+                                  count: recurringDates.length,
+                                })}`
+                              : getEveryFreqFor({
+                                  t,
+                                  recurringEvent: booking.eventType.recurringEvent,
+                                  recurringCount: booking.recurringCount,
+                                })}
+                          </p>
+                        </div>
                       </Tooltip>
                     </div>
                   </div>

diff --git 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}
             />
             <div className="flex rtl:space-x-reverse">
-              <div className="w-full">
-                <Button color="secondary" onClick={() => router.push("/reschedule/" + booking?.uid)}>
-                  {t("reschedule_this")}
-                </Button>
-              </div>
+              {!props.recurringEvent && (
+                <div className="w-full">
+                  <Button color="secondary" onClick={() => router.push("/reschedule/" + booking?.uid)}>
+                    {t("reschedule_this")}
+                  </Button>
+                </div>
+              )}
               <div className="w-full space-x-2 text-right">
                 <Button color="secondary" onClick={() => props.setIsCancellationMode(false)}>
                   {t("nevermind")}
@@ -92,7 +96,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}`
+                        }&team=${team ? 1 : 0}&recurring=${!!props.recurringEvent}`
                       );
                     } else {
                       setLoading(false);

diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -33,8 +33,8 @@ import {
 import classNames from "@calcom/lib/classNames";
 import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { localStorage } from "@calcom/lib/webstorage";
-import { Frequency } from "@calcom/prisma/zod-utils";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
@@ -296,33 +296,6 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                           <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                           {eventType.length} {t("minutes")}
                         </p>
-                        {!rescheduleUid && eventType.recurringEvent?.count && eventType.recurringEvent?.freq && (
-                          <div className="text-gray-600 dark:text-white">
-                            <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
-                            <p className="mb-1 -ml-2 inline px-2 py-1">
-                              {t("every_for_freq", {
-                                freq: t(
-                                  `${Frequency[eventType.recurringEvent.freq].toString().toLowerCase()}`
-                                ),
-                              })}
-                            </p>
-                            <input
-                              type="number"
-                              min="1"
-                              max={eventType.recurringEvent.count}
-                              className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
-                              defaultValue={eventType.recurringEvent.count}
-                              onChange={(event) => {
-                                setRecurringEventCount(parseInt(event?.target.value));
-                              }}
-                            />
-                            <p className="inline text-gray-600 dark:text-white">
-                              {t(`${Frequency[eventType.recurringEvent.freq].toString().toLowerCase()}`, {
-                                count: recurringEventCount,
-                              })}
-                            </p>
-                          </div>
-                        )}
                         {eventType.price > 0 && (
                           <div className="text-gray-600 dark:text-white">
                             <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 dark:text-gray-400" />
@@ -335,31 +308,29 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                             </IntlProvider>
                           </div>
                         )}
-                        {!rescheduleUid && eventType.recurringEvent?.count && eventType.recurringEvent?.freq && (
+                        {!rescheduleUid && eventType.recurringEvent && (
                           <div className="text-gray-600 dark:text-white">
-                            <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
-                            <p className="mb-1 -ml-2 inline px-2 py-1">
-                              {t("every_for_freq", {
-                                freq: t(
-                                  `${Frequency[eventType.recurringEvent.freq].toString().toLowerCase()}`
-                                ),
-                              })}
-                            </p>
-                            <input
-                              type="number"
-                              min="1"
-                              max={eventType.recurringEvent.count}
-                              className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
-                              defaultValue={eventType.recurringEvent.count}
-                              onChange={(event) => {
-                                setRecurringEventCount(parseInt(event?.target.value));
-                              }}
-                            />
-                            <p className="inline text-gray-600 dark:text-white">
-                              {t(`${Frequency[eventType.recurringEvent.freq].toString().toLowerCase()}`, {
-                                count: recurringEventCount,
-                              })}
-                            </p>
+                            <RefreshIcon className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                            <div className="ml-[27px]">
+                              <p className="mb-1 -ml-2 inline px-2 py-1">
+                                {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
+                              </p>
+                              <input
+                                type="number"
+                                min="1"
+                                max={eventType.recurringEvent.count}
+                                className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                                defaultValue={eventType.recurringEvent.count}
+                                onChange={(event) => {
+                                  setRecurringEventCount(parseInt(event?.target.value));
+                                }}
+                              />
+                              <p className="inline text-gray-600 dark:text-white">
+                                {t("occurrence", {
+                                  count: recurringEventCount,
+                                })}
+                              </p>
+                            </div>
                           </div>
                         )}
                         <TimezoneDropdown />
@@ -460,29 +431,29 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                       <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                       {eventType.length} {t("minutes")}
                     </p>
-                    {!rescheduleUid && eventType.recurringEvent?.count && eventType.recurringEvent?.freq && (
+                    {!rescheduleUid && eventType.recurringEvent && (
                       <div className="text-gray-600 dark:text-white">
-                        <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
-                        <p className="mb-1 -ml-2 inline px-2 py-1">
-                          {t("every_for_freq", {
-                            freq: t(`${Frequency[eventType.recurringEvent.freq].toString().toLowerCase()}`),
-                          })}
-                        </p>
-                        <input
-                          type="number"
-                          min="1"
-                          max={eventType.recurringEvent.count}
-                          className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
-                          defaultValue={eventType.recurringEvent.count}
-                          onChange={(event) => {
-                            setRecurringEventCount(parseInt(event?.target.value));
-                          }}
-                        />
-                        <p className="inline text-gray-600 dark:text-white">
-                          {t(`${Frequency[eventType.recurringEvent.freq].toString().toLowerCase()}`, {
-                            count: recurringEventCount,
-                          })}
-                        </p>
+                        <RefreshIcon className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                        <div className="ml-[27px]">
+                          <p className="mb-1 -ml-2 inline px-2 py-1">
+                            {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
+                          </p>
+                          <input
+                            type="number"
+                            min="1"
+                            max={eventType.recurringEvent.count}
+                            className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                            defaultValue={eventType.recurringEvent.count}
+                            onChange={(event) => {
+                              setRecurringEventCount(parseInt(event?.target.value));
+                            }}
+                          />
+                          <p className="inline text-gray-600 dark:text-white">
+                            {t("occurrence", {
+                              count: recurringEventCount,
+                            })}
+                          </p>
+                        </div>
                       </div>
                     )}
                     {eventType.price > 0 && (

diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
@@ -31,7 +31,7 @@ import {
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
-import { Frequency } from "@calcom/prisma/zod-utils";
+import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { createPaymentLink } from "@calcom/stripe/client";
 import { Button } from "@calcom/ui/Button";
 import { Tooltip } from "@calcom/ui/Tooltip";
@@ -517,12 +517,11 @@ const BookingPage = ({
                   <div className="mb-3 text-gray-600 dark:text-white">
                     <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                     <p className="mb-1 -ml-2 inline px-2 py-1">
-                      {`${t("every_for_freq", {
-                        freq: t(`${Frequency[eventType.recurringEvent.freq].toString().toLowerCase()}`),
-                      })} ${recurringEventCount} ${t(
-                        `${Frequency[eventType.recurringEvent.freq].toString().toLowerCase()}`,
-                        { count: parseInt(recurringEventCount.toString()) }
-                      )}`}
+                      {getEveryFreqFor({
+                        t,
+                        recurringEvent: eventType.recurringEvent,
+                        recurringCount: recurringEventCount,
+                      })}
                     </p>
                   </div>
                 )}