Update 23_03_2023

.env.appStore.example

@@ -20,12 +20,17 @@
 # - APP STORE **********************************************************************************************
 # ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
 # - DAILY.CO VIDEO
+# Enables Cal Video. to get your key 
+# 1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information
+# 2. From within your dashboard, go to the [developers](https://dashboard.daily.co/developers) tab.
+# @see https://github.com/calcom/cal.com#obtaining-daily-api-credentials
+
 DAILY_API_KEY=
 DAILY_SCALE_PLAN=''
 
 # - GOOGLE CALENDAR/MEET/LOGIN
 # Needed to enable Google Calendar integration and Login with Google
-# @see https://github.com/calendso/calendso#obtaining-the-google-api-credentials
+# @see https://github.com/calcom/cal.com#obtaining-the-google-api-credentials
 GOOGLE_API_CREDENTIALS=
 
 # To enable Login with Google you need to:

README.md

@@ -88,6 +88,7 @@ That's where Cal.com comes in. Self-hosted or hosted by us. White-label by desig
 - [React](https://reactjs.org/?ref=cal.com)
 - [Tailwind](https://tailwindcss.com/?ref=cal.com)
 - [Prisma](https://prisma.io/?ref=cal.com)
+- [Daily.co](https://go.cal.com/daily)
 
 ## Stay Up-to-Date
 
@@ -432,7 +433,7 @@ following
 
 ### Obtaining Daily API Credentials
 
-1. Open [Daily](https://www.daily.co/) and sign into your account.
+1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information
 2. From within your dashboard, go to the [developers](https://dashboard.daily.co/developers) tab.
 3. Copy your API key.
 4. Now paste the API key to your .env file into the `DAILY_API_KEY` field in your .env file.

apps/web/components/apps/App.tsx

@@ -18,6 +18,8 @@ import { FiCheck, FiFlag, FiPlus } from "@calcom/ui/components/icon";
 
 /* These app slugs all require Google Cal to be installed */
 
+/* These app slugs all require Google Cal to be installed */
+
 const Component = ({
  name,
  type,

apps/web/components/booking/AvailableTimes.tsx

@@ -94,7 +94,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
  slots.map((slot) => {
  type BookingURL = {
  pathname: string;
- query: Record<string, string | number | string[] | undefined>;
+ query: Record<string, string | number | string[] | undefined | TimeFormat>;
  };
  const bookingUrl: BookingURL = {
  pathname: router.pathname.endsWith("/embed") ? "../book" : "book",
@@ -103,6 +103,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
  date: dayjs.utc(slot.time).tz(timeZone()).format(),
  type: eventTypeId,
  slug: eventTypeSlug,
+ timeFormat,
  /** Treat as recurring only when a count exist and it's not a rescheduling workflow */
  count: recurringCount && !rescheduleUid ? recurringCount : undefined,
  ...(ethSignature ? { ethSignature } : {}),

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

@@ -4,7 +4,7 @@ import { useSession } from "next-auth/react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useCallback, useEffect, useMemo, useReducer, useState } from "react";
+import { useEffect, useMemo, useReducer, useState } from "react";
 import { useForm, useFormContext } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
@@ -15,7 +15,6 @@ import { getEventLocationType, locationKeyToString } from "@calcom/app-store/loc
 import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
 import { getEventTypeAppData } from "@calcom/app-store/utils";
 import type { LocationObject } from "@calcom/core/location";
-import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
 import {
  useEmbedNonStylesConfig,
@@ -36,19 +35,19 @@ import classNames from "@calcom/lib/classNames";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
+import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import type { RecurringEvent } from "@calcom/types/Calendar";
+import { TimeFormat } from "@calcom/lib/timeFormat";
 import { Button, Form, Tooltip } from "@calcom/ui";
 import { FiAlertTriangle, FiCalendar, FiRefreshCw, FiUser } from "@calcom/ui/components/icon";
 
-import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 import createBooking from "@lib/mutations/bookings/create-booking";
 import createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
-import { parseDate, parseRecurringDates } from "@lib/parseDate";
+import { parseRecurringDates, parseDate } from "@lib/parseDate";
 
 import type { Gate, GateState } from "@components/Gates";
 import Gates from "@components/Gates";
@@ -187,6 +186,22 @@ const BookingFields = ({
  );
 };
 
+const routerQuerySchema = z
+ .object({
+ timeFormat: z.nativeEnum(TimeFormat),
+ rescheduleUid: z.string().optional(),
+ date: z
+ .string()
+ .optional()
+ .transform((date) => {
+ if (date === undefined) {
+ return null;
+ }
+ return date;
+ }),
+ })
+ .passthrough();
+
 const BookingPage = ({
  eventType,
  booking,
@@ -225,20 +240,6 @@ const BookingPage = ({
  duration = Number(queryDuration);
  }
 
- // This is a workaround for forcing the same time format for both server side rendering and client side rendering
- // At initial render, we use the default time format which is 12H
- const [withDefaultTimeFormat, setWithDefaultTimeFormat] = useState(true);
- const parseDateFunc = useCallback(
- (date: string | null | Dayjs) => {
- return parseDate(date, i18n, withDefaultTimeFormat);
- },
- [withDefaultTimeFormat]
- );
- // After intial render on client side, we let parseDateFunc to use the time format from the localStorage
- useEffect(() => {
- setWithDefaultTimeFormat(false);
- }, []);
-
  useEffect(() => {
  if (top !== window) {
  //page_view will be collected automatically by _middleware.ts
@@ -286,6 +287,7 @@ const BookingPage = ({
  return router.push({
  pathname: `/booking/${uid}`,
  query: {
+ isSuccessBookingPage: true,
  allRemainingBookings: true,
  email: bookingForm.getValues("responses.email"),
  eventTypeSlug: eventType.slug,
@@ -295,9 +297,12 @@ const BookingPage = ({
  },
  });
 
- const rescheduleUid = router.query.rescheduleUid as string;
+ const {
+ data: { timeFormat, rescheduleUid, date },
+ } = useTypedQuery(routerQuerySchema);
+
  useTheme(profile.theme);
- const date = asStringOrNull(router.query.date);
+
  const querySchema = getBookingResponsesPartialSchema({
  eventType: {
  bookingFields: getBookingFieldsWithSystemFields(eventType),
@@ -401,26 +406,17 @@ const BookingPage = ({
  // Calculate the booking date(s)
  let recurringStrings: string[] = [],
  recurringDates: Date[] = [];
- const parseRecurringDatesFunc = useCallback(
- (date: string | null | Dayjs, recurringEvent: RecurringEvent, recurringCount: number) => {
- return parseRecurringDates(
- {
- startDate: date,
- timeZone: timeZone(),
- recurringEvent: recurringEvent,
- recurringCount: recurringCount,
- withDefaultTimeFormat: withDefaultTimeFormat,
- },
- i18n
- );
- },
- [withDefaultTimeFormat, date, eventType.recurringEvent, recurringEventCount]
- );
+
  if (eventType.recurringEvent?.freq && recurringEventCount !== null) {
- [recurringStrings, recurringDates] = parseRecurringDatesFunc(
- date,
- eventType.recurringEvent,
- parseInt(recurringEventCount.toString())
+ [recurringStrings, recurringDates] = parseRecurringDates(
+ {
+ startDate: date,
+ timeZone: timeZone(),
+ recurringEvent: eventType.recurringEvent,
+ recurringCount: parseInt(recurringEventCount.toString()),
+ selectedTimeFormat: timeFormat,
+ },
+ i18n
  );
  }
 
@@ -550,7 +546,7 @@ const BookingPage = ({
  <div className="text-sm font-medium">
  {isClientTimezoneAvailable &&
  (rescheduleUid || !eventType.recurringEvent?.freq) &&
- `${parseDateFunc(date)}`}
+ `${parseDate(date, i18n, timeFormat)}`}
  {isClientTimezoneAvailable &&
  !rescheduleUid &&
  eventType.recurringEvent?.freq &&
@@ -580,7 +576,7 @@ const BookingPage = ({
  <FiCalendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
  {isClientTimezoneAvailable &&
  typeof booking.startTime === "string" &&
- parseDateFunc(dayjs(booking.startTime))}
+ parseDate(dayjs(booking.startTime), i18n, timeFormat)}
  </p>
  </div>
  )}

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -424,7 +424,7 @@ const IntervalLimitItem = ({
  <TextField
  required
  type="number"
- containerClassName={`${textFieldSuffix ? "w-36" : "w-16"} -mb-1`}
+ containerClassName={textFieldSuffix ? "w-44 -mb-1" : "w-16 mb-0"}
  placeholder={`${value}`}
  min={step}
  step={step}

apps/web/lib/parseDate.ts

@@ -3,23 +3,22 @@ import { RRule } from "rrule";
 
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
-import { detectBrowserTimeFormat, TimeFormat } from "@calcom/lib/timeFormat";
+import type { TimeFormat } from "@calcom/lib/timeFormat";
+import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 
 import { parseZone } from "./parseZone";
 
-const processDate = (date: string | null | Dayjs, i18n: I18n, withDefaultTimeFormat: boolean) => {
+const processDate = (date: string | null | Dayjs, i18n: I18n, selectedTimeFormat?: TimeFormat) => {
  const parsedZone = parseZone(date);
  if (!parsedZone?.isValid()) return "Invalid date";
- const formattedTime = parsedZone?.format(
- withDefaultTimeFormat ? TimeFormat.TWELVE_HOUR : detectBrowserTimeFormat
- );
+ const formattedTime = parsedZone?.format(selectedTimeFormat || detectBrowserTimeFormat);
  return formattedTime + ", " + dayjs(date).toDate().toLocaleString(i18n.language, { dateStyle: "full" });
 };
 
-export const parseDate = (date: string | null | Dayjs, i18n: I18n, withDefaultTimeFormat: boolean) => {
+export const parseDate = (date: string | null | Dayjs, i18n: I18n, selectedTimeFormat?: TimeFormat) => {
  if (!date) return ["No date"];
- return processDate(date, i18n, withDefaultTimeFormat);
+ return processDate(date, i18n, selectedTimeFormat);
 };
 
 export const parseRecurringDates = (
@@ -28,13 +27,13 @@ export const parseRecurringDates = (
  timeZone,
  recurringEvent,
  recurringCount,
- withDefaultTimeFormat,
+ selectedTimeFormat,
  }: {
  startDate: string | null | Dayjs;
  timeZone?: string;
  recurringEvent: RecurringEvent | null;
  recurringCount: number;
- withDefaultTimeFormat: boolean;
+ selectedTimeFormat?: TimeFormat;
  },
  i18n: I18n
 ): [string[], Date[]] => {
@@ -54,7 +53,7 @@ export const parseRecurringDates = (
  });
  const dateStrings = times.map((t) => {
  // finally; show in local timeZone again
- return processDate(t.tz(timeZone), i18n, withDefaultTimeFormat);
+ return processDate(t.tz(timeZone), i18n, selectedTimeFormat);
  });
 
  return [dateStrings, times.map((t) => t.toDate())];

apps/web/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@calcom/web",
- "version": "2.7.2",
+ "version": "2.7.3",
  "private": true,
  "scripts": {
  "analyze": "ANALYZE=true next build",

apps/web/pages/auth/admin-login.tsx

@@ -6,7 +6,6 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
-import { FaGoogle } from "react-icons/fa";
 
 import { SAMLLogin } from "@calcom/features/auth/SAMLLogin";
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
@@ -40,7 +39,6 @@ interface LoginValues {
 
 export default function Login({
  csrfToken,
- isGoogleLoginEnabled,
  isSAMLLoginEnabled,
  samlTenantID,
  samlProductID,
@@ -123,7 +121,6 @@ export default function Login({
  title={t("login")}
  description={t("login")}
  showLogo
- heading={twoFactorRequired ? t("2fa_code") : t("welcome_back")}
  footerText={twoFactorRequired ? (!totpEmail ? TwoFactorFooter : ExternalTotpFooter) : null}>
  <FormProvider {...methods}>
  <form onSubmit={methods.handleSubmit(onSubmit)} data-testid="login-form">
@@ -173,21 +170,8 @@ export default function Login({
  </form>
  {!twoFactorRequired && (
  <>
- {(isGoogleLoginEnabled || isSAMLLoginEnabled) && <hr className="my-8" />}
+ {isSAMLLoginEnabled && <hr className="my-8" />}
  <div className="space-y-3">
- {isGoogleLoginEnabled && (
- <Button
- color="secondary"
- className="w-full justify-center"
- data-testid="google"
- StartIcon={FaGoogle}
- onClick={async (e) => {
- e.preventDefault();
- await signIn("google");
- }}>
- {t("signin_with_google")}
- </Button>
- )}
  {isSAMLLoginEnabled && (
  <SAMLLogin
  samlTenantID={samlTenantID}
@@ -267,7 +251,7 @@ const _getServerSideProps = async function getServerSideProps(context: GetServer
  }
  return {
  props: {
- csrfToken: await getCsrfToken(context),
+ csrfToken: (await getCsrfToken(context)) || null,
  trpcState: ssr.dehydrate(),
  isGoogleLoginEnabled: IS_GOOGLE_LOGIN_ENABLED,
  isSAMLLoginEnabled,

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

@@ -180,7 +180,7 @@ const querySchema = z.object({
  cancel: stringToBoolean,
  changes: stringToBoolean,
  reschedule: stringToBoolean,
- isSuccessBookingPage: z.string().optional(),
+ isSuccessBookingPage: stringToBoolean,
  formerTime: z.string().optional(),
  email: z.string().optional(),
  seatReferenceUid: z.string().optional(),
@@ -485,7 +485,7 @@ export default function Success(props: SuccessProps) {
  </>
  )}
  <div className="font-medium">{t("what")}</div>
- <div className="col-span-2 mb-6 last:mb-0">{eventName}</div>
+ <div className="col-span-2 mb-6 last:mb-0">{props.bookingInfo.title}</div>
  <div className="font-medium">{t("when")}</div>
  <div className="col-span-2 mb-6 last:mb-0">
  {reschedule && !!formerTime && (
@@ -527,7 +527,7 @@ export default function Success(props: SuccessProps) {
  </div>
  )}
  {bookingInfo?.attendees.map((attendee) => (
- <div key={attendee.name} className="mb-3 last:mb-0">
+ <div key={attendee.name + attendee.email} className="mb-3 last:mb-0">
  {attendee.name && <p>{attendee.name}</p>}
  <p data-testid={`attendee-${attendee.email}`} className="text-bookinglight">
  {attendee.email}