Merge branch 'main' into fix/allow-self-event-editing

apps/web/components/booking/TimeOptions.tsx

@@ -1,9 +1,8 @@
-// TODO: replace headlessui with radix-ui
-import { Switch } from "@headlessui/react";
 import { FC, useEffect, useState } from "react";
 import TimezoneSelect, { ITimezoneOption } from "react-timezone-select";
 
-import classNames from "@lib/classNames";
+import Switch from "@calcom/ui/Switch";
+
 import { useLocale } from "@lib/hooks/useLocale";
 
 import { is24h, timeZone } from "../../lib/clock";
@@ -36,34 +35,17 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone }) => {
   return selectedTimeZone !== "" ? (
     <div className="max-w-80 absolute z-10 w-full rounded-sm border border-gray-200 bg-white px-4 py-2 dark:border-0 dark:bg-gray-700">
       <div className="mb-4 flex">
-        <div className="w-1/2 font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
-        <div className="w-1/2">
-          <Switch.Group as="div" className="flex items-center justify-end">
-            <Switch.Label as="span" className="ltr:mr-3">
-              <span className="text-sm text-gray-500 dark:text-white">{t("am_pm")}</span>
-            </Switch.Label>
-            <Switch
-              checked={is24hClock}
-              onChange={handle24hClockToggle}
-              className={classNames(
-                is24hClock
-                  ? "bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast"
-                  : "bg-gray-200 dark:bg-gray-600",
-                "relative inline-flex h-5 w-8 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
-              )}>
-              <span className="sr-only">{t("use_setting")}</span>
-              <span
-                aria-hidden="true"
-                className={classNames(
-                  is24hClock ? "translate-x-3" : "translate-x-0",
-                  "pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-                )}
-              />
-            </Switch>
-            <Switch.Label as="span" className="ltr:ml-3 rtl:mr-3">
-              <span className="text-sm text-gray-500 dark:text-white">{t("24_h")}</span>
-            </Switch.Label>
-          </Switch.Group>
+        <div className="font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
+        <div className="ml-auto flex items-center">
+          <label className="ltl:mr-3 mr-2 align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
+            {t("am_pm")}
+          </label>
+          <Switch
+            name="24hClock"
+            label={t("24_h")}
+            defaultChecked={is24hClock}
+            onCheckedChange={handle24hClockToggle}
+          />
         </div>
       </div>
       <TimezoneSelect

apps/web/components/integrations/CalendarListContainer.tsx

@@ -1,6 +1,8 @@
 import React, { Fragment } from "react";
 import { useMutation } from "react-query";
 
+import Switch from "@calcom/ui/Switch";
+
 import { QueryCell } from "@lib/QueryCell";
 import { useLocale } from "@lib/hooks/useLocale";
 import showToast from "@lib/notification";
@@ -11,7 +13,6 @@ import { List } from "@components/List";
 import { ShellSubHeading } from "@components/Shell";
 import { Alert } from "@components/ui/Alert";
 import Button from "@components/ui/Button";
-import Switch from "@components/ui/Switch";
 
 import ConnectIntegration from "./ConnectIntegrations";
 import DisconnectIntegration from "./DisconnectIntegration";

apps/web/components/webhook/WebhookDialogForm.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
+import Switch from "@calcom/ui/Switch";
+
 import { useLocale } from "@lib/hooks/useLocale";
 import showToast from "@lib/notification";
 import { trpc } from "@lib/trpc";
@@ -10,7 +12,6 @@ import customTemplate, { hasTemplateIntegration } from "@lib/webhooks/integratio
 import { DialogFooter } from "@components/Dialog";
 import { FieldsetLegend, Form, InputGroupBox, TextArea, TextField } from "@components/form/fields";
 import Button from "@components/ui/Button";
-import Switch from "@components/ui/Switch";
 import { TWebhook } from "@components/webhook/WebhookListItem";
 import WebhookTestDisclosure from "@components/webhook/WebhookTestDisclosure";
 

apps/web/lib/integrations/calendar/services/Office365CalendarService.ts

@@ -35,7 +35,7 @@ export default class Office365CalendarService implements Calendar {
         ? `${event.destinationCalendar.externalId}/`
         : "";
 
-      const response = await fetch(`https://graph.microsoft.com/v1.0/me/calendar/${calendarId}events`, {
+      const response = await fetch(`https://graph.microsoft.com/v1.0/me/calendar/events`, {
         method: "POST",
         headers: {
           Authorization: "Bearer " + accessToken,

apps/web/pages/[user].tsx

@@ -58,7 +58,16 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
             <p className="text-neutral-500 dark:text-white">{user.bio}</p>
           </div>
           <div className="space-y-6" data-testid="event-types">
-            {!user.away &&
+            {user.away ? (
+              <div className="overflow-hidden rounded-sm border dark:border-gray-900">
+                <div className="p-8 text-center text-gray-400 dark:text-white">
+                  <h2 className="font-cal mb-2 text-3xl font-semibold text-gray-600 dark:text-white">
+                    😴{" " + t("user_away")}
+                  </h2>
+                  <p className="mx-auto max-w-md">{t("user_away_description")}</p>
+                </div>
+              </div>
+            ) : (
               eventTypes.map((type) => (
                 <div
                   key={type.id}
@@ -101,12 +110,13 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                     />
                   )}
                 </div>
-              ))}
+              ))
+            )}
           </div>
           {eventTypes.length === 0 && (
-            <div className="overflow-hidden rounded-sm shadow">
+            <div className="overflow-hidden rounded-sm border dark:border-gray-900">
               <div className="p-8 text-center text-gray-400 dark:text-white">
-                <h2 className="font-cal text-3xl font-semibold text-gray-600 dark:text-white">
+                <h2 className="font-cal mb-2 text-3xl font-semibold text-gray-600 dark:text-white">
                   {t("uh_oh")}
                 </h2>
                 <p className="mx-auto max-w-md">{t("no_event_types_have_been_setup")}</p>

apps/web/pages/event-types/[type].tsx

@@ -28,6 +28,7 @@ import Select from "react-select";
 import { JSONObject } from "superjson/dist/types";
 
 import { StripeData } from "@calcom/stripe/server";
+import Switch from "@calcom/ui/Switch";
 
 import { asStringOrThrow, asStringOrUndefined } from "@lib/asStringOrNull";
 import { getSession } from "@lib/auth";
@@ -52,7 +53,6 @@ import CustomInputTypeForm from "@components/pages/eventtypes/CustomInputTypeFor
 import Button from "@components/ui/Button";
 import InfoBadge from "@components/ui/InfoBadge";
 import { Scheduler } from "@components/ui/Scheduler";
-import Switch from "@components/ui/Switch";
 import CheckboxField from "@components/ui/form/CheckboxField";
 import CheckedSelect from "@components/ui/form/CheckedSelect";
 import { DateRangePicker } from "@components/ui/form/DateRangePicker";

apps/web/server/routers/viewer.tsx

@@ -640,7 +640,7 @@ const loggedInViewerRouter = createProtectedRouter()
         if (username !== user.username) {
           data.username = username;
           const response = await checkUsername(username);
-          if (!response.available) {
+          if (!response.available || ("premium" in response && response.premium)) {
             throw new TRPCError({ code: "BAD_REQUEST", message: response.message });
           }
         }

packages/config/tailwind-preset.js

@@ -3,6 +3,7 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
     "./ee/components/**/*.{js,ts,jsx,tsx}",
+    "../../packages/ui/**/*.{js,ts,jsx,tsx}",
   ],
   darkMode: "class",
   theme: {

packages/ui/Switch.tsx

@@ -3,7 +3,7 @@ import * as Label from "@radix-ui/react-label";
 import * as PrimitiveSwitch from "@radix-ui/react-switch";
 import React, { useState } from "react";
 
-import classNames from "@lib/classNames";
+import classNames from "@calcom/lib/classNames";
 
 type SwitchProps = React.ComponentProps<typeof PrimitiveSwitch.Root> & {
   label: string;
@@ -37,7 +37,7 @@ export default function Switch(props: SwitchProps) {
       {label && (
         <Label.Root
           htmlFor={id}
-          className="cursor-pointer align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3">
+          className="cursor-pointer align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
           {label}
         </Label.Root>
       )}

packages/ui/index.tsx

@@ -1,3 +1,4 @@
 import * as React from "react";
 
 export * from "./Button";
+export * from "./Switch";