Reformat /booking attendees, add guests to success page, fix i18n (#5532)

apps/web/components/booking/BookingListItem.tsx

@@ -471,8 +471,9 @@ const FirstAttendee = ({
   user: UserProps;
   currentEmail: string | null | undefined;
 }) => {
+  const { t } = useLocale();
   return user.email === currentEmail ? (
-    <div className="inline-block">You</div>
+    <div className="inline-block">{t("you")}</div>
   ) : (
     <a
       key={user.email}
@@ -484,19 +485,19 @@ const FirstAttendee = ({
   );
 };
 
-const Attendee: React.FC<{ email: string; children: React.ReactNode }> = ({ email, children }) => {
+type AttendeeProps = {
+  name?: string;
+  email: string;
+};
+
+const Attendee = ({ email, name }: AttendeeProps) => {
   return (
-    <a className=" hover:text-blue-500" href={"mailto:" + email} onClick={(e) => e.stopPropagation()}>
-      {children}
+    <a className="hover:text-blue-500" href={"mailto:" + email} onClick={(e) => e.stopPropagation()}>
+      {name || email}
     </a>
   );
 };
 
-interface AttendeeProps {
-  name: string;
-  email: string;
-}
-
 const DisplayAttendees = ({
   attendees,
   user,
@@ -504,42 +505,33 @@ const DisplayAttendees = ({
 }: {
   attendees: AttendeeProps[];
   user: UserProps | null;
-  currentEmail: string | null | undefined;
+  currentEmail?: string | null;
 }) => {
-  if (attendees.length === 1) {
-    return (
-      <div className="text-sm text-gray-900">
-        {user && <FirstAttendee user={user} currentEmail={currentEmail} />}
-        <span>&nbsp;and&nbsp;</span>
-        <Attendee email={attendees[0].email}>{attendees[0].name}</Attendee>
-      </div>
-    );
-  } else if (attendees.length === 2) {
-    return (
-      <div className="text-sm text-gray-900">
-        {user && <FirstAttendee user={user} currentEmail={currentEmail} />}
-        <span>,&nbsp;</span>
-        <Attendee email={attendees[0].email}>{attendees[0].name}</Attendee>
-        <div className="inline-block text-sm text-gray-900">&nbsp;and&nbsp;</div>
-        <Attendee email={attendees[1].email}>{attendees[1].name}</Attendee>
-      </div>
-    );
-  } else {
-    return (
-      <div className="text-sm text-gray-900">
-        {user && <FirstAttendee user={user} currentEmail={currentEmail} />}
-        <span>,&nbsp;</span>
-        <Attendee email={attendees[0].email}>{attendees[0].name}</Attendee>
-        <span>&nbsp;&&nbsp;</span>
-        <Tooltip
-          content={attendees.slice(1).map((attendee, key) => (
-            <p key={key}>{attendee.name}</p>
-          ))}>
-          <div className="inline-block">{attendees.length - 1} more</div>
-        </Tooltip>
-      </div>
-    );
-  }
+  const { t } = useLocale();
+  return (
+    <div className="text-sm text-gray-900">
+      {user && <FirstAttendee user={user} currentEmail={currentEmail} />}
+      {attendees.length > 1 ? <span>,&nbsp;</span> : <span>&nbsp;{t("and")}&nbsp;</span>}
+      <Attendee {...attendees[0]} />
+      {attendees.length > 1 && (
+        <>
+          <div className="inline-block text-sm text-gray-900">&nbsp;{t("and")}&nbsp;</div>
+          {attendees.length > 2 ? (
+            <Tooltip
+              content={attendees.slice(1).map((attendee) => (
+                <p key={attendee.email}>
+                  <Attendee {...attendee} />
+                </p>
+              ))}>
+              <div className="inline-block">{t("plus_more", { count: attendees.length - 1 })}</div>
+            </Tooltip>
+          ) : (
+            <Attendee {...attendees[1]} />
+          )}
+        </>
+      )}
+    </div>
+  );
 };
 
 const Tag = ({ children, className = "" }: React.PropsWithChildren<{ className?: string }>) => {

apps/web/components/booking/pages/BookingPage.tsx

@@ -515,7 +515,7 @@ const BookingPage = ({
                             <p key={key}>{timeFormatted}</p>
                           ))}>
                           <p className="dark:text-darkgray-600 text-sm">
-                            {t("plus_more", { count: recurringStrings.length - 5 })}
+                            + {t("plus_more", { count: recurringStrings.length - 5 })}
                           </p>
                         </Tooltip>
                       </div>

apps/web/pages/cancel/[uid].tsx

@@ -110,7 +110,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
                                           "-ml-4 block w-full text-center",
                                           moreEventsVisible ? "hidden" : ""
                                         )}>
-                                        {t("plus_more", { count: props.recurringInstances.length - 1 })}
+                                        + {t("plus_more", { count: props.recurringInstances.length - 1 })}
                                       </CollapsibleTrigger>
                                       <CollapsibleContent>
                                         {props.booking?.eventType.recurringEvent?.count &&

apps/web/pages/success.tsx

@@ -369,9 +369,9 @@ export default function Success(props: SuccessProps) {
                                 <p className="text-bookinglight">{bookingInfo.user.email}</p>
                               </div>
                             )}
-                            {bookingInfo?.attendees.map((attendee, index) => (
+                            {bookingInfo?.attendees.map((attendee) => (
                               <div key={attendee.name} className="mb-3 last:mb-0">
-                                <p>{attendee.name}</p>
+                                {attendee.name && <p>{attendee.name}</p>}
                                 <p className="text-bookinglight">{attendee.email}</p>
                               </div>
                             ))}
@@ -667,7 +667,7 @@ export function RecurringBookings({
             <CollapsibleTrigger
               type="button"
               className={classNames("flex w-full", moreEventsVisible ? "hidden" : "")}>
-              {t("plus_more", { count: recurringBookingsSorted.length - 4 })}
+              + {t("plus_more", { count: recurringBookingsSorted.length - 4 })}
             </CollapsibleTrigger>
             <CollapsibleContent>
               {eventType.recurringEvent?.count &&
@@ -738,6 +738,7 @@ const getEventTypesFromDB = async (id: number) => {
         },
       },
       metadata: true,
+      seatsPerTimeSlot: true,
       seatsShowAttendees: true,
     },
   });
@@ -777,7 +778,7 @@ const schema = z.object({
 
 const handleSeatsEventTypeOnBooking = (
   eventType: {
-    seatsPerTimeSlot?: boolean | null;
+    seatsPerTimeSlot?: number | null;
     seatsShowAttendees: boolean | null;
     [x: string | number | symbol]: unknown;
   },
@@ -789,6 +790,8 @@ const handleSeatsEventTypeOnBooking = (
   if (eventType?.seatsPerTimeSlot !== null) {
     // @TODO: right now bookings with seats doesn't save every description that its entered by every user
     delete booking.description;
+  } else {
+    return;
   }
   if (!eventType.seatsShowAttendees) {
     const attendee = booking?.attendees?.find((a) => a.email === email);
@@ -895,6 +898,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       },
     },
   });
+
   if (bookingInfo !== null && email) {
     handleSeatsEventTypeOnBooking(eventType, bookingInfo, email);
   }

apps/web/public/static/locales/ar/common.json

@@ -597,7 +597,7 @@
   "monthly_other": "أشهر",
   "yearly_one": "سنة",
   "yearly_other": "سنوات",
-  "plus_more": "+ {{count}} أكثر",
+  "plus_more": "{{count}} أكثر",
   "max": "الحد الأقصى",
   "single_theme": "سمة واحدة",
   "brand_color": "لون العلامة التجارية",

apps/web/public/static/locales/cs/common.json

@@ -597,7 +597,7 @@
   "monthly_other": "měs.",
   "yearly_one": "rok",
   "yearly_other": "roky/let",
-  "plus_more": "+ ještě {{count}}",
+  "plus_more": "ještě {{count}}",
   "max": "Max.",
   "single_theme": "Jednotná šablona",
   "brand_color": "Barva značky",

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

@@ -599,7 +599,7 @@
   "monthly_other": "months",
   "yearly_one": "year",
   "yearly_other": "years",
-  "plus_more": "+ {{count}} more",
+  "plus_more": "{{count}} more",
   "max": "Max",
   "single_theme": "Single Theme",
   "brand_color": "Brand Color",

apps/web/public/static/locales/es/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "meses",
   "yearly_one": "año",
   "yearly_other": "años",
-  "plus_more": "+ {{count}} más",
+  "plus_more": "{{count}} más",
   "max": "Máx.",
   "single_theme": "Tema",
   "brand_color": "Color de marca",

apps/web/public/static/locales/fr/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "mois",
   "yearly_one": "année",
   "yearly_other": "années",
-  "plus_more": "+ {{count}} de plus",
+  "plus_more": "{{count}} de plus",
   "max": "Max.",
   "single_theme": "Thème unique",
   "brand_color": "Couleur de la marque",

apps/web/public/static/locales/it/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "mesi",
   "yearly_one": "anno",
   "yearly_other": "anni",
-  "plus_more": "+ altri {{count}}",
+  "plus_more": "altri {{count}}",
   "max": "Max",
   "single_theme": "Tema Singolo",
   "brand_color": "Colore del Marchio",

apps/web/public/static/locales/ja/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "月",
   "yearly_one": "年",
   "yearly_other": "年",
-  "plus_more": "+ {{count}} 回以上",
+  "plus_more": "{{count}} 回以上",
   "max": "最大",
   "single_theme": "シングルテーマ",
   "brand_color": "ブランドカラー",

apps/web/public/static/locales/ko/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "개월",
   "yearly_one": "년",
   "yearly_other": "년",
-  "plus_more": "+ {{count}} 이상",
+  "plus_more": "{{count}} 이상",
   "max": "최대",
   "single_theme": "단일 테마",
   "brand_color": "브랜드 색상",

apps/web/public/static/locales/nl/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "maanden",
   "yearly_one": "jaar",
   "yearly_other": "jaar",
-  "plus_more": "Nog {{count}}",
+  "plus_more": "{{count}} meer",
   "max": "Max.",
   "single_theme": "Enkel Thema",
   "brand_color": "Merkkleur",

apps/web/public/static/locales/pl/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "miesiące",
   "yearly_one": "rok",
   "yearly_other": "lata",
-  "plus_more": "+ {{count}} więcej",
+  "plus_more": "{{count}} więcej",
   "max": "Maks.",
   "single_theme": "Pojedynczy motyw",
   "brand_color": "Kolor Marki",

apps/web/public/static/locales/pt-BR/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "meses",
   "yearly_one": "ano",
   "yearly_other": "anos",
-  "plus_more": "+ {{count}} mais",
+  "plus_more": "{{count}} mais",
   "max": "Máx",
   "single_theme": "Tema",
   "brand_color": "Cor da Marca",

apps/web/public/static/locales/pt/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "meses",
   "yearly_one": "ano",
   "yearly_other": "anos",
-  "plus_more": "+ {{count}} mais",
+  "plus_more": "{{count}} mais",
   "max": "Máximo",
   "single_theme": "Tema",
   "brand_color": "Cor da marca",

apps/web/public/static/locales/ro/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "luni",
   "yearly_one": "an",
   "yearly_other": "ani",
-  "plus_more": "+ încă {{count}}",
+  "plus_more": "încă {{count}}",
   "max": "Max.",
   "single_theme": "Temă unică",
   "brand_color": "Culoare marcă",

apps/web/public/static/locales/ru/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "мес.",
   "yearly_one": "год",
   "yearly_other": "г.",
-  "plus_more": "+ еще {{count}}",
+  "plus_more": "еще {{count}}",
   "max": "Макс.",
   "single_theme": "Тема оформления",
   "brand_color": "Цвет бренда",

apps/web/public/static/locales/sr/common.json

@@ -597,7 +597,7 @@
   "monthly_other": "meseci",
   "yearly_one": "godinu",
   "yearly_other": "godina",
-  "plus_more": "+ još {{count}}",
+  "plus_more": "još {{count}}",
   "max": "Maks.",
   "single_theme": "Tema",
   "brand_color": "Boja brenda",

apps/web/public/static/locales/sv/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "månader",
   "yearly_one": "år",
   "yearly_other": "år",
-  "plus_more": "+ {{count}} till",
+  "plus_more": "{{count}} till",
   "max": "Max",
   "single_theme": "Ett tema",
   "brand_color": "Primär färg",

apps/web/public/static/locales/tr/common.json

@@ -597,7 +597,7 @@
   "monthly_other": "ay",
   "yearly_one": "yıl",
   "yearly_other": "yıl",
-  "plus_more": "+ {{count}} tane daha",
+  "plus_more": "{{count}} tane daha",
   "max": "Maks.",
   "single_theme": "Tek Tema",
   "brand_color": "Marka Rengi",

apps/web/public/static/locales/vi/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "tháng",
   "yearly_one": "năm",
   "yearly_other": "năm",
-  "plus_more": "+ {{count}} nữa",
+  "plus_more": "{{count}} nữa",
   "max": "Tối đa",
   "single_theme": "Chủ đề đơn",
   "brand_color": "Màu thương hiệu",

apps/web/public/static/locales/zh-CN/common.json

@@ -596,7 +596,7 @@
   "monthly_other": "月",
   "yearly_one": "年",
   "yearly_other": "年",
-  "plus_more": "+ 另外 {{count}}",
+  "plus_more": "另外 {{count}}",
   "max": "最大",
   "single_theme": "主题",
   "brand_color": "品牌颜色",