Merge branch 'main' into fix/phone-number-input

apps/web/components/AdditionalCalendarSelector.tsx

@@ -4,11 +4,11 @@ import { OptionProps } from "react-select";
 
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
 import type { App } from "@calcom/types/App";
 import { Button } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
-import { trpc } from "@lib/trpc";
 
 interface AdditionalCalendarSelectorProps {
   isLoading?: boolean;

apps/web/components/App.tsx

@@ -16,12 +16,11 @@ import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
 import { Button, SkeletonButton } from "@calcom/ui";
 import LicenseRequired from "@ee/components/LicenseRequired";
 
-import { trpc } from "@lib/trpc";
-
 import Shell from "@components/Shell";
 import Badge from "@components/ui/Badge";
 

apps/web/components/DestinationCalendarSelector.tsx

@@ -3,8 +3,7 @@ import React, { useEffect, useState } from "react";
 import Select from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import { trpc } from "@lib/trpc";
+import { trpc } from "@calcom/trpc/react";
 
 interface Props {
   onChange: (value: { externalId: string; integration: string }) => void;

apps/web/components/Embed.tsx

@@ -8,12 +8,12 @@ import { components, ControlProps } from "react-select";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { EventType } from "@calcom/prisma/client";
+import { trpc } from "@calcom/trpc/react";
 import { Button, Switch } from "@calcom/ui";
 import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
 import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
 
 import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
-import { trpc } from "@lib/trpc";
 
 import NavTabs from "@components/NavTabs";
 import ColorPicker from "@components/ui/colorpicker";

apps/web/components/I18nLanguageHandler.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
 
-import { trpc } from "@lib/trpc";
+import { trpc } from "@calcom/trpc/react";
 
 export function useViewerI18n() {
   return trpc.useQuery(["viewer.public.i18n"], {

apps/web/components/Shell.tsx

@@ -24,6 +24,7 @@ import { Toaster } from "react-hot-toast";
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { WEBAPP_URL, JOIN_SLACK, ROADMAP } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import Dropdown, {
   DropdownMenuContent,
@@ -39,7 +40,6 @@ import ErrorBoundary from "@lib/ErrorBoundary";
 import classNames from "@lib/classNames";
 import { shouldShowOnboarding } from "@lib/getting-started";
 import useMeQuery from "@lib/hooks/useMeQuery";
-import { trpc } from "@lib/trpc";
 
 import CustomBranding from "@components/CustomBranding";
 import { KBarRoot, KBarContent, KBarTrigger } from "@components/Kbar";
@@ -494,7 +494,17 @@ function UserDropdown({ small }: { small?: boolean }) {
   const { t } = useLocale();
   const query = useMeQuery();
   const user = query.data;
-
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    const Beacon = window.Beacon;
+    // window.Beacon is defined when user actually opens up HelpScout and username is available here. On every re-render update session info, so that it is always latest.
+    Beacon &&
+      Beacon("session-data", {
+        username: user?.username || "Unknown",
+        screenResolution: `${screen.width}x${screen.height}`,
+      });
+  });
   const mutation = trpc.useMutation("viewer.away", {
     onSettled() {
       utils.invalidateQueries("viewer.me");

apps/web/components/apps/AppCard.tsx

@@ -1,9 +1,8 @@
 import Link from "next/link";
 
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 
-import { trpc } from "@lib/trpc";
-
 import Badge from "@components/ui/Badge";
 
 interface AppCardProps {

apps/web/components/auth/SAMLLogin.tsx

@@ -2,11 +2,11 @@ import { signIn } from "next-auth/react";
 import { Dispatch, SetStateAction } from "react";
 import { useFormContext } from "react-hook-form";
 
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 
 import { useLocale } from "@lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
-import { trpc } from "@lib/trpc";
 
 interface Props {
   email: string;

apps/web/components/availability/NewScheduleButton.tsx

@@ -4,12 +4,12 @@ import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
 import { Form } from "@calcom/ui/form/fields";
 
 import { HttpError } from "@lib/core/http/error";
-import { trpc } from "@lib/trpc";
 
 export function NewScheduleButton({ name = "new-schedule" }: { name?: string }) {
   const router = useRouter();

apps/web/components/availability/ScheduleListItem.tsx

@@ -5,11 +5,10 @@ import { Fragment } from "react";
 import { availabilityAsString } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Availability } from "@calcom/prisma/client";
+import { inferQueryOutput } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
 
-import { inferQueryOutput } from "@lib/trpc";
-
 export function ScheduleListItem({
   schedule,
   deleteFunction,

apps/web/components/booking/AvailableTimes.tsx

@@ -6,13 +6,12 @@ import { FC, useEffect, useState } from "react";
 import dayjs, { Dayjs } from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { nameOfDay } from "@calcom/lib/weekday";
+import type { Slot } from "@calcom/trpc/server/routers/viewer/slots";
 import { SkeletonContainer, SkeletonText } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 import { timeZone } from "@lib/clock";
 
-import type { Slot } from "@server/routers/viewer/slots";
-
 type AvailableTimesProps = {
   timeFormat: string;
   eventTypeId: number;

apps/web/components/booking/BookingListItem.tsx

@@ -18,6 +18,7 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
+import { inferQueryInput, inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { Tooltip } from "@calcom/ui/Tooltip";
@@ -28,7 +29,6 @@ import useMeQuery from "@lib/hooks/useMeQuery";
 import { linkValueToString } from "@lib/linkValueToString";
 import { LocationType } from "@lib/location";
 import { extractRecurringDates } from "@lib/parseDate";
-import { inferQueryInput, inferQueryOutput, trpc } from "@lib/trpc";
 
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";

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

@@ -35,6 +35,7 @@ import { CAL_URL, WEBSITE_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 { trpc } from "@calcom/trpc/react";
 import DatePicker from "@calcom/ui/booker/DatePicker";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
@@ -44,7 +45,6 @@ import useTheme from "@lib/hooks/useTheme";
 import { isBrandingHidden } from "@lib/isBrandingHidden";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 import { detectBrowserTimeFormat } from "@lib/timeFormat";
-import { trpc } from "@lib/trpc";
 
 import CustomBranding from "@components/CustomBranding";
 import AvailableTimes from "@components/booking/AvailableTimes";

apps/web/components/dialog/EditLocationDialog.tsx

@@ -8,6 +8,7 @@ import { z } from "zod";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
 import { Form } from "@calcom/ui/form/fields";
@@ -16,7 +17,6 @@ import { QueryCell } from "@lib/QueryCell";
 import { linkValueToString } from "@lib/linkValueToString";
 import { LocationType } from "@lib/location";
 import { LocationOptionsToString } from "@lib/locationOptions";
-import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import CheckboxField from "@components/ui/form/CheckboxField";
 import type PhoneInputType from "@components/ui/form/PhoneInput";

apps/web/components/dialog/RescheduleDialog.tsx

@@ -5,12 +5,12 @@ import { useMutation } from "react-query";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { TextArea } from "@calcom/ui/form/fields";
 
 import * as fetchWrapper from "@lib/core/http/fetch-wrapper";
-import { trpc } from "@lib/trpc";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;

apps/web/components/eventtype/CreateEventType.tsx

@@ -6,9 +6,11 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import type { z } from "zod";
 
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
+import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import { Button } from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
@@ -23,7 +25,6 @@ import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fi
 
 import { HttpError } from "@lib/core/http/error";
 import { slugify } from "@lib/slugify";
-import { trpc } from "@lib/trpc";
 
 import Avatar from "@components/ui/Avatar";
 import * as RadioArea from "@components/ui/form/radio-area";
@@ -164,7 +165,7 @@ export default function CreateEventTypeButton(props: Props) {
                 onSelect={() => openModal(option)}>
                 <Avatar
                   alt={option.name || ""}
-                  imageSrc={option.image}
+                  imageSrc={option.image || `${WEBAPP_URL}/${option.slug}/avatar.png`} // if no image, use default avatar
                   size={6}
                   className="inline ltr:mr-2 rtl:ml-2"
                 />

apps/web/components/integrations/CalendarListContainer.tsx

@@ -4,12 +4,12 @@ import { useMutation } from "react-query";
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import Switch from "@calcom/ui/Switch";
 
 import { QueryCell } from "@lib/QueryCell";
-import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import AdditionalCalendarSelector from "@components/AdditionalCalendarSelector";
 import DestinationCalendarSelector from "@components/DestinationCalendarSelector";

apps/web/components/integrations/DisconnectIntegration.tsx

@@ -3,11 +3,10 @@ import { useMutation } from "react-query";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import { ButtonBaseProps } from "@calcom/ui/Button";
 import { Dialog } from "@calcom/ui/Dialog";
 
-import { trpc } from "@lib/trpc";
-
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 
 export default function DisconnectIntegration(props: {

apps/web/components/security/DisableUserImpersonation.tsx

@@ -1,9 +1,8 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 
-import { trpc } from "@lib/trpc";
-
 import Badge from "@components/ui/Badge";
 
 const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonation: boolean }) => {

apps/web/components/team/DisableTeamImpersonation.tsx

@@ -1,9 +1,8 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 
-import { trpc } from "@lib/trpc";
-
 import Badge from "@components/ui/Badge";
 
 const DisableTeamImpersonation = ({ teamId, memberId }: { teamId: number; memberId: number }) => {

apps/web/components/team/MemberChangeRoleModal.tsx

@@ -2,10 +2,9 @@ import { MembershipRole } from "@prisma/client";
 import { SyntheticEvent, useMemo, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 
-import { trpc } from "@lib/trpc";
-
 import ModalContainer from "@components/ui/ModalContainer";
 import Select from "@components/ui/form/Select";
 

apps/web/components/team/MemberInvitationModal.tsx

@@ -3,13 +3,13 @@ import { InformationCircleIcon } from "@heroicons/react/solid";
 import { MembershipRole } from "@prisma/client";
 import React, { useState, SyntheticEvent, useMemo } from "react";
 
+import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
 import { TextField } from "@calcom/ui/form/fields";
 
 import { useLocale } from "@lib/hooks/useLocale";
-import { TeamWithMembers } from "@lib/queries/teams";
-import { trpc } from "@lib/trpc";
 
 import Select from "@components/ui/form/Select";
 

apps/web/components/team/MemberList.tsx

@@ -1,4 +1,4 @@
-import { inferQueryOutput } from "@lib/trpc";
+import { inferQueryOutput } from "@calcom/trpc/react";
 
 import MemberListItem from "./MemberListItem";
 

apps/web/components/team/MemberListItem.tsx

@@ -8,6 +8,7 @@ import { useState } from "react";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import Dropdown, {
@@ -20,7 +21,6 @@ import { Tooltip } from "@calcom/ui/Tooltip";
 import TeamAvailabilityModal from "@ee/components/team/availability/TeamAvailabilityModal";
 
 import useCurrentUserId from "@lib/hooks/useCurrentUserId";
-import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Avatar from "@components/ui/Avatar";

apps/web/components/team/TeamCreateModal.tsx

@@ -2,12 +2,11 @@ import { UsersIcon } from "@heroicons/react/outline";
 import { useRef, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import { Alert } from "@calcom/ui/Alert";
 import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
 
-import { trpc } from "@lib/trpc";
-
 interface Props {
   isOpen: boolean;
   onClose: () => void;

apps/web/components/team/TeamList.tsx

@@ -1,6 +1,5 @@
 import showToast from "@calcom/lib/notification";
-
-import { inferQueryOutput, trpc } from "@lib/trpc";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 
 import TeamListItem from "./TeamListItem";
 

apps/web/components/team/TeamListItem.tsx

@@ -13,6 +13,7 @@ import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import Dropdown, {
@@ -25,7 +26,6 @@ import { Tooltip } from "@calcom/ui/Tooltip";
 
 import classNames from "@lib/classNames";
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
-import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Avatar from "@components/ui/Avatar";