feat: display long durations in hours on booking (#12631)

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

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

@@ -656,6 +656,7 @@
   "default_duration": "المدة الافتراضية",
   "default_duration_no_options": "يرجى اختيار المدد المتاحة أولاً",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "الدقائق",
   "round_robin": "الترتيب الدوري",
   "round_robin_description": "نقل الاجتماعات بشكل دوري بين أعضاء الفريق المتعددين.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Výchozí doba trvání",
   "default_duration_no_options": "Nejprve vyberte dostupné doby trvání",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "min",
   "round_robin": "Plánování Round Robin",
   "round_robin_description": "Schůzky v řadě mezi několika členy týmu.",

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

@@ -553,6 +553,7 @@
   "default_duration": "Standard varighed",
   "default_duration_no_options": "Vælg venligst tilgængelige varigheder først",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Minutter",
   "round_robin": "Round Robin",
   "round_robin_description": "Cyklusmøder mellem flere teammedlemmer.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Standardlaufzeit",
   "default_duration_no_options": "Bitte wählen Sie zuerst die verfügbaren Laufzeiten aus",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Minuten",
   "round_robin": "Round Robin",
   "round_robin_description": "Treffen zwischen mehreren Teammitgliedern durchwechseln.",

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

@@ -673,6 +673,7 @@
   "default_duration": "Default duration",
   "default_duration_no_options": "Please choose available durations first",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Minutes",
   "round_robin": "Round Robin",
   "round_robin_description": "Cycle meetings between multiple team members.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Duración predeterminada",
   "default_duration_no_options": "Seleccione primero las duraciones disponibles",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Minutos",
   "round_robin": "Petición Firmada por Turnos",
   "round_robin_description": "Ciclo de reuniones entre varios miembros del equipo.",

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

@@ -660,6 +660,7 @@
   "default_duration": "Durée par défaut",
   "default_duration_no_options": "Veuillez d'abord choisir les durées disponibles",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "minutes",
   "round_robin": "Round-robin",
   "round_robin_description": "Alternez vos rendez-vous entre plusieurs membres d'équipe.",

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

@@ -656,6 +656,7 @@
   "default_duration": "משך הזמן המוגדר כברירת מחדל",
   "default_duration_no_options": "ראשית, אנא בחר משך זמינות",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "דקות",
   "round_robin": "לפי תורות",
   "round_robin_description": "פגישות מחזוריות בין חברי צוות מרובים.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Durata predefinita",
   "default_duration_no_options": "Scegliere prima delle durate disponibili",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Minuti",
   "round_robin": "Round Robin",
   "round_robin_description": "Ciclo di riunioni tra più membri del team.",

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

@@ -656,6 +656,7 @@
   "default_duration": "デフォルトの時間",
   "default_duration_no_options": "最初に空いている時間を選択してください",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "分",
   "round_robin": "ラウンドロビン",
   "round_robin_description": "複数のチームメンバー間のミーティングを定期化する。",

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

@@ -656,6 +656,7 @@
   "default_duration": "기본 기간",
   "default_duration_no_options": "사용 가능한 기간을 먼저 선택하세요",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "분",
   "round_robin": "라운드 로빈",
   "round_robin_description": "여러 팀 구성원 간의 주기적인 회의",

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

@@ -656,6 +656,7 @@
   "default_duration": "Standaardduur",
   "default_duration_no_options": "Kies eerst de beschikbare duur",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Minuten",
   "round_robin": "Round Robin",
   "round_robin_description": "Afspraken wisselen tussen meerdere teamleden.",

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

@@ -544,6 +544,7 @@
   "default_duration": "Standard varighet",
   "default_duration_no_options": "Vennligst velg tilgjengelige varigheter først",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Minutter",
   "round_robin": "Round Robin",
   "round_robin_description": "Varier møter mellom flere teammedlemmer.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Domyślny czas trwania",
   "default_duration_no_options": "Proszę najpierw wybrać dostępne czasy trwania",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Minuty",
   "round_robin": "Round Robin",
   "round_robin_description": "Cykl spotkań między wieloma członkami zespołu.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Duração padrão",
   "default_duration_no_options": "Escolha as durações disponíveis primeiro",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Minutos",
   "round_robin": "Round Robin",
   "round_robin_description": "Reuniões recorrentes entre vários membros da equipe.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Duração predefinida",
   "default_duration_no_options": "Por favor, selecione primeiro as durações disponíveis",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Minutos",
   "round_robin": "Round Robin",
   "round_robin_description": "Reuniões de ciclo entre vários membros da equipa.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Durată implicită",
   "default_duration_no_options": "Alege mai întâi duratele disponibile",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Minute",
   "round_robin": "Round Robin",
   "round_robin_description": "Întâlniri ciclice între mai mulţi membri ai echipei.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Продолжительность по умолчанию",
   "default_duration_no_options": "Пожалуйста, выберите сначала доступную продолжительность",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "мин.",
   "round_robin": "По кругу",
   "round_robin_description": "Цикл встреч между несколькими членами команды.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Podrazumevano trajanje",
   "default_duration_no_options": "Najpre izaberite dostupna trajanja",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Minuti",
   "round_robin": "Round Robin",
   "round_robin_description": "Ciklusirajte sastanke između više članova tima.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Standardvaraktighet",
   "default_duration_no_options": "Välj först tillgänglig varaktighet",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Minuter",
   "round_robin": "Tur och ordning",
   "round_robin_description": "Variera möten mellan olika teammedlemmar.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Varsayılan süre",
   "default_duration_no_options": "Lütfen önce uygun süreleri seçin",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Dakika",
   "round_robin": "Round Robin",
   "round_robin_description": "Toplantıları birden fazla ekip üyesi arasında döndürün.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Тривалість за замовчуванням",
   "default_duration_no_options": "Спочатку виберіть доступні варіанти тривалості",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Хвилини",
   "round_robin": "Ротація",
   "round_robin_description": "Кілька учасників команди призначаються для нарад циклічно й по черзі.",

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

@@ -656,6 +656,7 @@
   "default_duration": "Khoảng thời gian mặc định",
   "default_duration_no_options": "Vui lòng chọn trước tiên những khoảng thời gian khả dụng",
   "multiple_duration_mins": "{{count}}$t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "Phút",
   "round_robin": "Round Robin",
   "round_robin_description": "Luân phiên những cuộc họp giữa các thành viên trong nhóm.",

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

@@ -656,6 +656,7 @@
   "default_duration": "默认时长",
   "default_duration_no_options": "请先选择可用时长",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "分钟",
   "round_robin": "轮流模式",
   "round_robin_description": "和多个团队成员之间轮流举行会议。",

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

@@ -656,6 +656,7 @@
   "default_duration": "預設時間長度",
   "default_duration_no_options": "請先選擇可預約的時間長度",
   "multiple_duration_mins": "{{count}} $t(minute_timeUnit)",
+  "multiple_duration_timeUnit": "{{count}} $t({{unit}}_timeUnit)",
   "minutes": "分鐘",
   "round_robin": "循環制",
   "round_robin_description": "與多位團隊成員進行週期會議。",

packages/features/bookings/components/event-meta/Duration.tsx

@@ -1,3 +1,4 @@
+import type { TFunction } from "next-i18next";
 import { useEffect } from "react";
 
 import { useBookerStore } from "@calcom/features/bookings/Booker/store";
@@ -7,6 +8,31 @@ import { Badge } from "@calcom/ui";
 
 import type { PublicEvent } from "../../types";
 
+/** Render X mins as X hours or X hours Y mins instead of in minutes once >= 60 minutes */
+const getDurationFormatted = (mins: number, t: TFunction) => {
+  const hours = Math.floor(mins / 60);
+  mins %= 60;
+  // format minutes string
+  let minStr = "";
+  if (mins > 0) {
+    minStr =
+      mins === 1
+        ? t("minute_one", { count: 1 })
+        : t("multiple_duration_timeUnit", { count: mins, unit: "minute" });
+  }
+  // format hours string
+  let hourStr = "";
+  if (hours > 0) {
+    hourStr =
+      hours === 1
+        ? t("hour_one", { count: 1 })
+        : t("multiple_duration_timeUnit", { count: hours, unit: "hour" });
+  }
+
+  if (hourStr && minStr) return `${hourStr} ${minStr}`;
+  return hourStr || minStr;
+};
+
 export const EventDuration = ({ event }: { event: PublicEvent }) => {
   const { t } = useLocale();
   const [selectedDuration, setSelectedDuration, state] = useBookerStore((state) => [
@@ -25,7 +51,7 @@ export const EventDuration = ({ event }: { event: PublicEvent }) => {
   }, [selectedDuration, setSelectedDuration, event.metadata?.multipleDuration, event.length, isDynamicEvent]);
 
   if (!event?.metadata?.multipleDuration && !isDynamicEvent)
-    return <>{t("multiple_duration_mins", { count: event.length })}</>;
+    return <>{getDurationFormatted(event.length, t)}</>;
 
   const durations = event?.metadata?.multipleDuration || [15, 30, 60];
 
@@ -39,7 +65,9 @@ export const EventDuration = ({ event }: { event: PublicEvent }) => {
             className={classNames(selectedDuration === duration && "bg-brand-default text-brand")}
             size="md"
             key={duration}
-            onClick={() => setSelectedDuration(duration)}>{`${duration} ${t("minute_timeUnit")}`}</Badge>
+            onClick={() => setSelectedDuration(duration)}>
+            {getDurationFormatted(duration, t)}
+          </Badge>
         ))}
     </div>
   );