v2.3.2

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.env.appStore.example

@@ -11,6 +11,10 @@
 #   - ZOOM
 #   - GIPHY
 #   - VITAL
+#   - ZAPIER
+#   - LARK
+#   - WEB3
+#   - SALESFORCE
 
 # - APP STORE **********************************************************************************************
 # ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
@@ -88,7 +92,7 @@ VITAL_REGION="us"
 # @see https://github.com/calcom/cal.com/blob/main/packages/app-store/zapier/README.md
 ZAPIER_INVITE_LINK=""
 
-# - LARK
+#   - LARK
 # Needed to enable Lark Calendar integration and Login with Lark
 # @see <https://open.larksuite.com/document/ukTMukTMukTM/ukDNz4SO0MjL5QzM/g>
 LARK_OPEN_APP_ID=""
@@ -100,4 +104,9 @@ LARK_OPEN_VERIFICATION_TOKEN=""
 # @see https://github.com/calcom/cal.com/blob/main/packages/app-store/rainbow/README.md
 ALCHEMY_API_KEY=""
 INFURA_API_KEY=""
+
+#   - SALESFORCE
+# Used for the Salesforce (Sales Cloud) app
+SALESFORCE_CONSUMER_KEY=""
+SALESFORCE_CONSUMER_SECRET=""
 # *********************************************************************************************************

.env.example

@@ -96,11 +96,10 @@ NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE=
 NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN=0
 NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE=
-NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE=
+STRIPE_TEAM_MONTHLY_PRICE_ID=
 STRIPE_WEBHOOK_SECRET=
-STRIPE_PRO_PLAN_PRODUCT_ID=
-STRIPE_PREMIUM_PLAN_PRODUCT_ID=
-STRIPE_FREE_PLAN_PRODUCT_ID=
+STRIPE_PRIVATE_KEY=
+STRIPE_CLIENT_ID=
 
 # Use for internal Public API Keys and optional
 API_KEY_PREFIX=cal_
@@ -138,5 +137,6 @@ CLOSECOM_API_KEY=
 # Sendgrid internal sync service
 SENDGRID_SYNC_API_KEY=
 
-# Sendgrid internal email sender
-SENDGRID_API_KEY=
+# Sentry
+NEXT_PUBLIC_SENTRY_DSN=
+SENTRY_IGNORE_API_RESOLUTION_ERROR=

.github/workflows/release.yml

@@ -1,4 +1,5 @@
 on:
+  workflow_dispatch:
   push:
     # Pattern matched against refs/tags
     tags:
@@ -8,4 +9,8 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - run: curl -X POST -d {} ${{ secrets.VERCEL_VERSIONED_DEPLOY_HOOK }}
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          token: ${{ secrets.GH_ACCESS_TOKEN }}
+      - run: git push origin +main:production

.github/workflows/test.yml

@@ -1,7 +1,7 @@
 name: Unit tests
 on:
   push:
-    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
+    branches: [ feat/routing-forms/reporting ] # TODO: Remove this after merged in main
   pull_request_target: # So we can test on forks
     branches:
       - main
@@ -21,7 +21,8 @@ jobs:
         with:
           ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
           fetch-depth: 2
-      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
+      # Should be an 8GB machine as per https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
+      - run: echo 'NODE_OPTIONS="--max_old_space_size=6144"' >> $GITHUB_ENV
       - name: Use Node 16.x
         uses: actions/setup-node@v3
         with:

.snaplet/config.json

@@ -1,4 +1,4 @@
 {
   "projectId": "cl4u26bwz7962859ply7ibuo43t",
-  "databaseUrl": "postgresql://postgres@localhost:5450/calendso"
+  "targetDatabaseUrl": "postgresql://postgres@localhost:5450/calendso"
 }

.snaplet/manifest.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.3.0"
+  "version": "0.22.3"
 }

.vscode/settings.json

@@ -6,5 +6,6 @@
   },
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "spellright.language": ["en"],
-  "spellright.documentTypes": ["markdown", "typescript"]
+  "spellright.documentTypes": ["markdown", "typescript"],
+  "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]]
 }

README.md

@@ -354,56 +354,6 @@ following
 5. Use **Application (client) ID** as the **MS_GRAPH_CLIENT_ID** attribute value in .env
 6. Click **Certificates & secrets** create a new client secret and use the value as the **MS_GRAPH_CLIENT_SECRET** attribute
 
-### Obtaining Slack Client ID and Secret and Signing Secret
-
-To test this you will need to create a Slack app for yourself on [their apps website](https://api.slack.com/apps).
-
-Copy and paste the app manifest below into the setting on your slack app. Be sure to replace `YOUR_DOMAIN` with your own domain or your proxy host if you're testing locally.
-
-<details>
-  <summary>App Manifest</summary>
-  
- ```yaml
- display_information:
-  name: Cal.com Slack
-features:
-  bot_user:
-    display_name: Cal.com Slack
-    always_online: false
-  slash_commands:
-    - command: /create-event
-      url: https://YOUR_DOMAIN/api/integrations/slackmessaging/commandHandler
-      description: Create an event within Cal!
-      should_escape: false
-    - command: /today
-      url: https://YOUR_DOMAIN/api/integrations/slackmessaging/commandHandler
-      description: View all your bookings for today
-      should_escape: false
-oauth_config:
-  redirect_urls:
-    - https://YOUR_DOMAIN/api/integrations/slackmessaging/callback
-  scopes:
-    bot:
-      - chat:write
-      - commands
-      - chat:write.public 
-settings:
-  interactivity:
-    is_enabled: true
-    request_url: https://YOUR_DOMAIN/api/integrations/slackmessaging/interactiveHandler
-    message_menu_options_url: https://YOUR_DOMAIN/api/integrations/slackmessaging/interactiveHandler
-  org_deploy_enabled: false
-  socket_mode_enabled: false
-  token_rotation_enabled: false
-```
-
-</details>
-
-Add the integration as normal - slack app - add. Follow the oauth flow to add it to a server.
-
-Next make sure you have your app running `yarn dx`. Then in the slack chat type one of these commands: `/create-event` or `/today`
-
-> NOTE: Next you will need to setup a proxy server like [ngrok](https://ngrok.com/) to allow your local host machine to be hosted on a public https server.
 
 ### Obtaining Zoom Client ID and Secret
 
@@ -437,7 +387,7 @@ Next make sure you have your app running `yarn dx`. Then in the slack chat type
 4. Fill in any information you want in the "App info" tab
 5. Go to tab "Auth"
 6. Now copy the Client ID and Client Secret to your .env file into the `HUBSPOT_CLIENT_ID` and `HUBSPOT_CLIENT_SECRET` fields.
-7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/hubspotothercalendar/callback` replacing Cal.com URL with the URI at which your application runs.
+7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/hubspot/callback` replacing Cal.com URL with the URI at which your application runs.
 8. In the "Scopes" section at the bottom of the page, make sure you select "Read" and "Write" for scope called `crm.objects.contacts`
 9. Click the "Save" button at the bottom footer.
 10. You're good to go. Now you can see any booking in Cal.com created as a meeting in HubSpot for your contacts.

apps/storybook/components/Examples.tsx

@@ -3,11 +3,12 @@ import { classNames } from "@calcom/lib";
 interface ExampleProps {
   children: React.ReactNode;
   title: string;
+  isFullWidth?: boolean;
 }
-export const Example = ({ children, title }: ExampleProps) => {
+export const Example = ({ children, title, isFullWidth = false }: ExampleProps) => {
   return (
-    <div className="examples-item">
-      <span className="examples-item-title">{title}</span>
+    <div className={classNames("examples-item", isFullWidth && "w-full")}>
+      <span className={classNames("examples-item-title", isFullWidth && "mb-0 mt-2")}>{title}</span>
       <div className="examples-item-content">{children}</div>
     </div>
   );

apps/storybook/components/VariantsTable.tsx

@@ -19,7 +19,7 @@ export function VariantsTable({
     <div
       className={classNames(
         isDark &&
-          "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#22252A]"
+          "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#1C1C1C]"
       )}>
       <div className="z-1 relative mx-auto w-full max-w-[1200px] overflow-auto pr-8 pt-6">
         <table>

apps/storybook/package.json

@@ -49,6 +49,6 @@
     "storybook-react-i18next": "^1.1.2",
     "tailwindcss": "^3.2.1",
     "typescript": "^4.7.4",
-    "vite": "^3.1.0"
+    "vite": "^2.9.15"
   }
 }

apps/web/.gitignore

@@ -67,4 +67,6 @@ tsconfig.tsbuildinfo
 public/embed
 
 # Copied app-store images
-public/app-store
+public/app-store
+# Sentry
+.sentryclirc

apps/web/@types/@wojtekmaj__react-daterange-picker.d.ts

@@ -1,15 +0,0 @@
-declare module "@wojtekmaj/react-daterange-picker/dist/entry.nostyle" {
-  import { CalendarProps } from "react-calendar";
-  export type DateRangePickerCalendarProps = Omit<
-    CalendarProps,
-    "calendarClassName" | "onChange" | "value"
-  > & {
-    calendarClassName?: string;
-    onChange: (value: [Date, Date]) => void;
-    value: [Date, Date];
-    clearIcon: JSX.Element | null;
-    calendarIcon: JSX.Element | null;
-    rangeDivider: JSX.Element | null;
-  };
-  export default function DateRangePicker(props: DateRangePickerCalendarProps): JSX.Element;
-}

apps/web/calendso.yaml

@@ -598,60 +598,6 @@ paths:
       summary: Gets and stores the OAuth token
       tags:
         - Integrations
-  /api/user/profile:
-    patch:
-      description: Updates a user's profile.
-      summary: Updates a user's profile
-      tags:
-        - User
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                name:
-                  type: string
-                description:
-                  type: string
-                avatar:
-                  type: string
-                timeZone:
-                  type: string
-                weekStart:
-                  type: string
-                hideBranding:
-                  type: string
-                theme:
-                  type: string
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
-        "401":
-          description: Unauthorized
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
-        "500":
-          description: Internal Server Error
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
   /api/me:
     get:
       description: Gets current user's profile.
@@ -686,71 +632,6 @@ paths:
                 properties:
                   message:
                     type: string
-  /api/user/membership:
-    get:
-      description: Get a list of the teams the user has joined.
-      summary: Get the teams a user is joined to
-      tags:
-        - User
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
-        "401":
-          description: Unauthorized
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
-        "500":
-          description: Internal Server Error
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
-    patch:
-      description: Accept team invitation
-      summary: Accept team invitation.
-      tags:
-        - User
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                teamId:
-                  type: string
-    delete:
-      description: Leave team or decline membership invite of current user
-      summary: Leave team or decline team invite.
-      tags:
-        - User
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                teamId:
-                  type: string
   "/api/{team}":
     delete:
       description: Deletes a team

apps/web/components/AddToHomescreen.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 export default function AddToHomescreen() {
   const { t } = useLocale();

apps/web/components/AdditionalCalendarSelector.tsx

@@ -36,7 +36,7 @@ const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App
 
 const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
   const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: true }]);
+  const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
 
   return (
     <QueryCell

apps/web/components/App.tsx

@@ -1,306 +0,0 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import React, { useState } from "react";
-
-import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
-import { InstallAppButton } from "@calcom/app-store/components";
-import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import { App as AppType } from "@calcom/types/App";
-import { Button, SkeletonButton } from "@calcom/ui";
-import { Icon } from "@calcom/ui/Icon";
-import Shell from "@calcom/ui/Shell";
-import { Badge } from "@calcom/ui/components/badge";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-import DisconnectIntegration from "@components/integrations/DisconnectIntegration";
-
-const Component = ({
-  name,
-  type,
-  logo,
-  body,
-  categories,
-  author,
-  price = 0,
-  commission,
-  isGlobal = false,
-  feeType,
-  docs,
-  website,
-  email,
-  tos,
-  privacy,
-  isProOnly,
-}: Parameters<typeof App>[0]) => {
-  const { t } = useLocale();
-  const router = useRouter();
-  const { data: user } = trpc.useQuery(["viewer.me"]);
-
-  const utils = trpc.useContext();
-  const handleOpenChange = () => {
-    utils.invalidateQueries(["viewer.integrations"]);
-    router.replace("/apps/installed");
-  };
-
-  const mutation = useAddAppMutation(null, {
-    onSuccess: () => {
-      showToast("App successfully installed", "success");
-    },
-    onError: (error) => {
-      if (error instanceof Error) showToast(error.message || "App could not be installed", "error");
-    },
-  });
-
-  const priceInDollar = Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    useGrouping: false,
-  }).format(price);
-
-  const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
-  const appCredentials = trpc.useQuery(["viewer.appCredentialsByType", { appType: type }], {
-    onSuccess(data) {
-      setExistingCredentials(data);
-    },
-  });
-
-  const allowedMultipleInstalls = categories.indexOf("calendar") > -1;
-
-  return (
-    <div className="-mx-4 md:-mx-8">
-      <div className="px-8">
-        <Link href="/apps">
-          <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
-            <Icon.FiChevronLeft className="h-5 w-5" /> {t("browse_apps")}
-          </a>
-        </Link>
-        <div className="items-center justify-between py-4 sm:flex sm:py-8">
-          <div className="flex">
-            <img className="h-16 w-16 rounded-sm" src={logo} alt={name} />
-            <header className="px-4 py-2">
-              <div className="flex items-center">
-                <h1 className="font-cal text-xl text-gray-900">{name}</h1>
-              </div>
-              <h2 className="text-sm text-gray-500">
-                <span className="capitalize">{categories[0]}</span> • {t("published_by", { author })}
-              </h2>
-            </header>
-          </div>
-
-          <div className="mt-4 sm:mt-0 sm:text-right">
-            {!appCredentials.isLoading ? (
-              isGlobal ||
-              (existingCredentials.length > 0 && allowedMultipleInstalls ? (
-                <div className="flex space-x-3">
-                  <Button StartIcon={Icon.FiCheck} color="secondary" disabled>
-                    {existingCredentials.length > 0
-                      ? t("active_install", { count: existingCredentials.length })
-                      : t("globally_install")}
-                  </Button>
-                  {!isGlobal && (
-                    <InstallAppButton
-                      type={type}
-                      isProOnly={isProOnly}
-                      render={({ useDefaultComponent, ...props }) => {
-                        if (useDefaultComponent) {
-                          props = {
-                            onClick: () => {
-                              mutation.mutate({ type });
-                            },
-                            loading: mutation.isLoading,
-                          };
-                        }
-                        return (
-                          <Button StartIcon={Icon.FiPlus} {...props} data-testid="install-app-button">
-                            {t("add_another")}
-                          </Button>
-                        );
-                      }}
-                    />
-                  )}
-                </div>
-              ) : existingCredentials.length > 0 ? (
-                <DisconnectIntegration
-                  id={existingCredentials[0]}
-                  render={(btnProps) => (
-                    <Button {...btnProps} color="warn" data-testid={type + "-integration-disconnect-button"}>
-                      {t("disconnect")}
-                    </Button>
-                  )}
-                  onOpenChange={handleOpenChange}
-                />
-              ) : (
-                <InstallAppButton
-                  type={type}
-                  isProOnly={isProOnly}
-                  render={({ useDefaultComponent, ...props }) => {
-                    if (useDefaultComponent) {
-                      props = {
-                        onClick: () => {
-                          mutation.mutate({ type });
-                        },
-                        loading: mutation.isLoading,
-                      };
-                    }
-                    return (
-                      <Button data-testid="install-app-button" {...props}>
-                        {t("install_app")}
-                      </Button>
-                    );
-                  }}
-                />
-              ))
-            ) : (
-              <SkeletonButton width="24" height="10" />
-            )}
-            {price !== 0 && (
-              <small className="block text-right">
-                {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
-                {feeType === "monthly" && "/" + t("month")}
-              </small>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div className="justify-between px-8 py-10 md:flex">
-        <div className="prose-sm prose mb-6">{body}</div>
-        <div className="md:max-w-80 flex-1 md:ml-8">
-          <h4 className="font-medium text-gray-900 ">{t("categories")}</h4>
-          <div className="space-x-2">
-            {categories.map((category) => (
-              <Link href={"/apps/categories/" + category} key={category}>
-                <a>
-                  <Badge variant="success">{category}</Badge>
-                </a>
-              </Link>
-            ))}
-          </div>
-          <h4 className="mt-8 font-medium text-gray-900 ">{t("pricing")}</h4>
-          <small>
-            {price === 0 ? (
-              "Free"
-            ) : (
-              <>
-                {Intl.NumberFormat("en-US", {
-                  style: "currency",
-                  currency: "USD",
-                  useGrouping: false,
-                }).format(price)}
-                {feeType === "monthly" && "/" + t("month")}
-              </>
-            )}
-          </small>
-          <h4 className="mt-8 mb-2 font-medium text-gray-900 ">{t("learn_more")}</h4>
-          <ul className="prose -ml-1 -mr-1 text-xs leading-5">
-            {docs && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-blue-500 no-underline hover:underline"
-                  href={docs}>
-                  <Icon.FiBookOpen className="mr-1 -mt-1 inline h-4 w-4" />
-                  {t("documentation")}
-                </a>
-              </li>
-            )}
-            {website && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-blue-500 no-underline hover:underline"
-                  href={website}>
-                  <Icon.FiExternalLink className="mr-1 -mt-px inline h-4 w-4" />
-                  {website.replace("https://", "")}
-                </a>
-              </li>
-            )}
-            {email && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-blue-500 no-underline hover:underline"
-                  href={"mailto:" + email}>
-                  <Icon.FiMail className="mr-1 -mt-px inline h-4 w-4" />
-
-                  {email}
-                </a>
-              </li>
-            )}
-            {tos && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-blue-500 no-underline hover:underline"
-                  href={tos}>
-                  <Icon.FiFile className="mr-1 -mt-px inline h-4 w-4" />
-                  {t("terms_of_service")}
-                </a>
-              </li>
-            )}
-            {privacy && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-blue-500 no-underline hover:underline"
-                  href={privacy}>
-                  <Icon.FiShield className="mr-1 -mt-px inline h-4 w-4" />
-                  {t("privacy_policy")}
-                </a>
-              </li>
-            )}
-          </ul>
-          <hr className="my-6" />
-          <small className="leading-1 block text-gray-500">
-            Every app published on the Cal.com App Store is open source and thoroughly tested via peer
-            reviews. Nevertheless, Cal.com, Inc. does not endorse or certify these apps unless they are
-            published by Cal.com. If you encounter inappropriate content or behaviour please report it.
-          </small>
-          <a className="mt-2 block text-xs text-red-500" href="mailto:help@cal.com">
-            <Icon.FiFlag className="inline h-3 w-3" /> Report App
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default function App(props: {
-  name: string;
-  type: AppType["type"];
-  isGlobal?: AppType["isGlobal"];
-  logo: string;
-  body: React.ReactNode;
-  categories: string[];
-  author: string;
-  pro?: boolean;
-  price?: number;
-  commission?: number;
-  feeType?: AppType["feeType"];
-  docs?: string;
-  website?: string;
-  email: string; // required
-  tos?: string;
-  privacy?: string;
-  licenseRequired: AppType["licenseRequired"];
-  isProOnly: AppType["isProOnly"];
-}) {
-  return (
-    <Shell large isPublic>
-      {props.licenseRequired ? (
-        <LicenseRequired>
-          <Component {...props} />
-        </LicenseRequired>
-      ) : (
-        <Component {...props} />
-      )}
-    </Shell>
-  );
-}

apps/web/components/DestinationCalendarSelector.tsx

@@ -23,7 +23,7 @@ const DestinationCalendarSelector = ({
   destinationCalendar,
 }: Props): JSX.Element | null => {
   const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.connectedCalendars"]);
+  const query = trpc.viewer.connectedCalendars.useQuery();
   const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null);
 
   // Extra styles to show prefixed text in react-select

apps/web/components/Embed.tsx

@@ -5,11 +5,20 @@ import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState }
 import { components, ControlProps } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
-import { HorizontalTabs, showToast, Switch } from "@calcom/ui/v2";
-import { Dialog, DialogClose, DialogContent } from "@calcom/ui/v2/core/Dialog";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  HorizontalTabs,
+  Icon,
+  InputLeading,
+  Label,
+  showToast,
+  Switch,
+  TextArea,
+  TextField,
+} from "@calcom/ui";
 
 import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
 
@@ -801,245 +810,247 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
             {embed.title}
           </h3>
           <hr className={classNames("mt-4", embedType === "element-click" ? "hidden" : "")} />
-          <div className={classNames("mt-4 font-medium", embedType === "element-click" ? "hidden" : "")}>
-            <Collapsible
-              open={isEmbedCustomizationOpen}
-              onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
-              <CollapsibleTrigger
-                type="button"
-                className="flex w-full items-center text-base font-medium text-neutral-900">
-                <div>
-                  {embedType === "inline"
-                    ? "Inline Embed Customization"
-                    : embedType === "floating-popup"
-                    ? "Floating Popup Customization"
-                    : "Element Click Customization"}
-                </div>
-                <Icon.FiChevronRight
-                  className={`${
-                    isEmbedCustomizationOpen ? "rotate-90 transform" : ""
-                  } ml-auto h-5 w-5 text-neutral-500`}
-                />
-              </CollapsibleTrigger>
-              <CollapsibleContent className="text-sm">
-                <div className={classNames("mt-6", embedType === "inline" ? "block" : "hidden")}>
-                  {/*TODO: Add Auto/Fixed toggle from Figma */}
-                  <div className="text-sm">Embed Window Sizing</div>
-                  <div className="justify-left flex items-center">
-                    <TextField
-                      name="width"
-                      labelProps={{ className: "hidden" }}
-                      required
-                      value={previewState.inline.width}
-                      onChange={(e) => {
-                        setPreviewState((previewState) => {
-                          const width = e.target.value || "100%";
-
-                          return {
-                            ...previewState,
-                            inline: {
-                              ...previewState.inline,
-                              width,
-                            },
-                          };
-                        });
-                      }}
-                      addOnLeading={<InputLeading>W</InputLeading>}
-                    />
-                    <span className="p-2">×</span>
-                    <TextField
-                      labelProps={{ className: "hidden" }}
-                      name="height"
-                      value={previewState.inline.height}
-                      required
-                      onChange={(e) => {
-                        const height = e.target.value || "100%";
-
-                        setPreviewState((previewState) => {
-                          return {
-                            ...previewState,
-                            inline: {
-                              ...previewState.inline,
-                              height,
-                            },
-                          };
-                        });
-                      }}
-                      addOnLeading={<InputLeading>H</InputLeading>}
-                    />
+          <div className="max-h-97 flex flex-col overflow-y-auto">
+            <div className={classNames("mt-4 font-medium", embedType === "element-click" ? "hidden" : "")}>
+              <Collapsible
+                open={isEmbedCustomizationOpen}
+                onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
+                <CollapsibleTrigger
+                  type="button"
+                  className="flex w-full items-center text-base font-medium text-neutral-900">
+                  <div>
+                    {embedType === "inline"
+                      ? "Inline Embed Customization"
+                      : embedType === "floating-popup"
+                      ? "Floating Popup Customization"
+                      : "Element Click Customization"}
                   </div>
-                </div>
-                <div
-                  className={classNames(
-                    "mt-4 items-center justify-between",
-                    embedType === "floating-popup" ? "" : "hidden"
-                  )}>
-                  <div className="mb-2 text-sm">Button Text</div>
-                  {/* Default Values should come from preview iframe */}
-                  <TextField
-                    name="buttonText"
-                    labelProps={{ className: "hidden" }}
-                    onChange={(e) => {
-                      setPreviewState((previewState) => {
-                        return {
-                          ...previewState,
-                          floatingPopup: {
-                            ...previewState.floatingPopup,
-                            buttonText: e.target.value,
-                          },
-                        };
-                      });
-                    }}
-                    defaultValue="Book my Cal"
-                    required
+                  <Icon.FiChevronRight
+                    className={`${
+                      isEmbedCustomizationOpen ? "rotate-90 transform" : ""
+                    } ml-auto h-5 w-5 text-neutral-500`}
                   />
-                </div>
-                <div
-                  className={classNames(
-                    "mt-4 flex items-center justify-start",
-                    embedType === "floating-popup" ? "space-x-2" : "hidden"
-                  )}>
-                  <Switch
-                    defaultChecked={true}
-                    onCheckedChange={(checked) => {
-                      setPreviewState((previewState) => {
-                        return {
-                          ...previewState,
-                          floatingPopup: {
-                            ...previewState.floatingPopup,
-                            hideButtonIcon: !checked,
-                          },
-                        };
-                      });
-                    }}
-                  />
-                  <div className="text-sm">Display Calendar Icon Button</div>
-                </div>
-                <div
-                  className={classNames(
-                    "mt-4 items-center justify-between",
-                    embedType === "floating-popup" ? "" : "hidden"
-                  )}>
-                  <div className="mb-2">Position of Button</div>
-                  <Select
-                    onChange={(position) => {
-                      setPreviewState((previewState) => {
-                        return {
-                          ...previewState,
-                          floatingPopup: {
-                            ...previewState.floatingPopup,
-                            buttonPosition: position?.value,
-                          },
-                        };
-                      });
-                    }}
-                    defaultValue={FloatingPopupPositionOptions[0]}
-                    options={FloatingPopupPositionOptions}
-                  />
-                </div>
-                <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
-                  <div>Button Color</div>
-                  <div className="w-full">
-                    <ColorPicker
-                      defaultValue="#000000"
-                      onChange={(color) => {
+                </CollapsibleTrigger>
+                <CollapsibleContent className="text-sm">
+                  <div className={classNames("mt-6", embedType === "inline" ? "block" : "hidden")}>
+                    {/*TODO: Add Auto/Fixed toggle from Figma */}
+                    <div className="text-sm">Embed Window Sizing</div>
+                    <div className="justify-left flex items-center">
+                      <TextField
+                        name="width"
+                        labelProps={{ className: "hidden" }}
+                        required
+                        value={previewState.inline.width}
+                        onChange={(e) => {
+                          setPreviewState((previewState) => {
+                            const width = e.target.value || "100%";
+
+                            return {
+                              ...previewState,
+                              inline: {
+                                ...previewState.inline,
+                                width,
+                              },
+                            };
+                          });
+                        }}
+                        addOnLeading={<InputLeading>W</InputLeading>}
+                      />
+                      <span className="p-2">×</span>
+                      <TextField
+                        labelProps={{ className: "hidden" }}
+                        name="height"
+                        value={previewState.inline.height}
+                        required
+                        onChange={(e) => {
+                          const height = e.target.value || "100%";
+
+                          setPreviewState((previewState) => {
+                            return {
+                              ...previewState,
+                              inline: {
+                                ...previewState.inline,
+                                height,
+                              },
+                            };
+                          });
+                        }}
+                        addOnLeading={<InputLeading>H</InputLeading>}
+                      />
+                    </div>
+                  </div>
+                  <div
+                    className={classNames(
+                      "mt-4 items-center justify-between",
+                      embedType === "floating-popup" ? "" : "hidden"
+                    )}>
+                    <div className="mb-2 text-sm">Button Text</div>
+                    {/* Default Values should come from preview iframe */}
+                    <TextField
+                      name="buttonText"
+                      labelProps={{ className: "hidden" }}
+                      onChange={(e) => {
                         setPreviewState((previewState) => {
                           return {
                             ...previewState,
                             floatingPopup: {
                               ...previewState.floatingPopup,
-                              buttonColor: color,
+                              buttonText: e.target.value,
                             },
                           };
                         });
                       }}
+                      defaultValue="Book my Cal"
+                      required
                     />
                   </div>
-                </div>
-                <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
-                  <div>Text Color</div>
-                  <div className="w-full">
-                    <ColorPicker
-                      defaultValue="#000000"
-                      onChange={(color) => {
+                  <div
+                    className={classNames(
+                      "mt-4 flex items-center justify-start",
+                      embedType === "floating-popup" ? "space-x-2" : "hidden"
+                    )}>
+                    <Switch
+                      defaultChecked={true}
+                      onCheckedChange={(checked) => {
                         setPreviewState((previewState) => {
                           return {
                             ...previewState,
                             floatingPopup: {
                               ...previewState.floatingPopup,
-                              buttonTextColor: color,
+                              hideButtonIcon: !checked,
                             },
                           };
                         });
                       }}
                     />
+                    <div className="text-sm">Display Calendar Icon Button</div>
                   </div>
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
-          </div>
-          <hr className="mt-4" />
-          <div className="mt-4 font-medium">
-            <Collapsible
-              open={isBookingCustomizationOpen}
-              onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
-              <CollapsibleTrigger className="flex w-full" type="button">
-                <div className="text-base  font-medium text-neutral-900">Cal Booking Customization</div>
-                <Icon.FiChevronRight
-                  className={`${
-                    isBookingCustomizationOpen ? "rotate-90 transform" : ""
-                  } ml-auto h-5 w-5 text-neutral-500`}
-                />
-              </CollapsibleTrigger>
-              <CollapsibleContent>
-                <div className="mt-6 text-sm">
-                  <Label className="">
-                    <div className="mb-2">Theme</div>
+                  <div
+                    className={classNames(
+                      "mt-4 items-center justify-between",
+                      embedType === "floating-popup" ? "" : "hidden"
+                    )}>
+                    <div className="mb-2">Position of Button</div>
                     <Select
-                      className="w-full"
-                      defaultValue={ThemeOptions[0]}
-                      components={{
-                        Control: ThemeSelectControl,
-                      }}
-                      onChange={(option) => {
-                        if (!option) {
-                          return;
-                        }
+                      onChange={(position) => {
                         setPreviewState((previewState) => {
                           return {
                             ...previewState,
-                            theme: option.value,
+                            floatingPopup: {
+                              ...previewState.floatingPopup,
+                              buttonPosition: position?.value,
+                            },
                           };
                         });
                       }}
-                      options={ThemeOptions}
+                      defaultValue={FloatingPopupPositionOptions[0]}
+                      options={FloatingPopupPositionOptions}
                     />
-                  </Label>
-                  {[
-                    { name: "brandColor", title: "Brand Color" },
-                    // { name: "lightColor", title: "Light Color" },
-                    // { name: "lighterColor", title: "Lighter Color" },
-                    // { name: "lightestColor", title: "Lightest Color" },
-                    // { name: "highlightColor", title: "Highlight Color" },
-                    // { name: "medianColor", title: "Median Color" },
-                  ].map((palette) => (
-                    <Label key={palette.name} className="pb-4">
-                      <div className="mb-2 pt-2">{palette.title}</div>
-                      <div className="w-full">
-                        <ColorPicker
-                          defaultValue="#000000"
-                          onChange={(color) => {
-                            addToPalette({
-                              [palette.name as keyof typeof previewState["palette"]]: color,
-                            });
-                          }}
-                        />
-                      </div>
+                  </div>
+                  <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
+                    <div>Button Color</div>
+                    <div className="w-full">
+                      <ColorPicker
+                        defaultValue="#000000"
+                        onChange={(color) => {
+                          setPreviewState((previewState) => {
+                            return {
+                              ...previewState,
+                              floatingPopup: {
+                                ...previewState.floatingPopup,
+                                buttonColor: color,
+                              },
+                            };
+                          });
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
+                    <div>Text Color</div>
+                    <div className="w-full">
+                      <ColorPicker
+                        defaultValue="#000000"
+                        onChange={(color) => {
+                          setPreviewState((previewState) => {
+                            return {
+                              ...previewState,
+                              floatingPopup: {
+                                ...previewState.floatingPopup,
+                                buttonTextColor: color,
+                              },
+                            };
+                          });
+                        }}
+                      />
+                    </div>
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            </div>
+            <hr className="mt-4" />
+            <div className="mt-4 font-medium">
+              <Collapsible
+                open={isBookingCustomizationOpen}
+                onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
+                <CollapsibleTrigger className="flex w-full" type="button">
+                  <div className="text-base  font-medium text-neutral-900">Cal Booking Customization</div>
+                  <Icon.FiChevronRight
+                    className={`${
+                      isBookingCustomizationOpen ? "rotate-90 transform" : ""
+                    } ml-auto h-5 w-5 text-neutral-500`}
+                  />
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <div className="mt-6 text-sm">
+                    <Label className="">
+                      <div className="mb-2">Theme</div>
+                      <Select
+                        className="w-full"
+                        defaultValue={ThemeOptions[0]}
+                        components={{
+                          Control: ThemeSelectControl,
+                        }}
+                        onChange={(option) => {
+                          if (!option) {
+                            return;
+                          }
+                          setPreviewState((previewState) => {
+                            return {
+                              ...previewState,
+                              theme: option.value,
+                            };
+                          });
+                        }}
+                        options={ThemeOptions}
+                      />
                     </Label>
-                  ))}
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
+                    {[
+                      { name: "brandColor", title: "Brand Color" },
+                      // { name: "lightColor", title: "Light Color" },
+                      // { name: "lighterColor", title: "Lighter Color" },
+                      // { name: "lightestColor", title: "Lightest Color" },
+                      // { name: "highlightColor", title: "Highlight Color" },
+                      // { name: "medianColor", title: "Median Color" },
+                    ].map((palette) => (
+                      <Label key={palette.name} className="pb-4">
+                        <div className="mb-2 pt-2">{palette.title}</div>
+                        <div className="w-full">
+                          <ColorPicker
+                            defaultValue="#000000"
+                            onChange={(color) => {
+                              addToPalette({
+                                [palette.name as keyof typeof previewState["palette"]]: color,
+                              });
+                            }}
+                          />
+                        </div>
+                      </Label>
+                    ))}
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            </div>
           </div>
         </div>
         <div className="flex w-2/3 flex-col p-8">

apps/web/components/I18nLanguageHandler.tsx

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import { trpc } from "@calcom/trpc/react";
 
 export function useViewerI18n() {
-  return trpc.useQuery(["viewer.public.i18n"], {
+  return trpc.viewer.public.i18n.useQuery(undefined, {
     staleTime: Infinity,
     /**
      * i18n should never be clubbed with other queries, so that it's caching can be managed independently.

apps/web/components/ImageUploader.tsx

@@ -1,8 +1,7 @@
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import Cropper from "react-easy-crop";
 
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
+import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui";
 
 import { Area, getCroppedImg } from "@lib/cropImage";
 import { useFileReader } from "@lib/hooks/useFileReader";

apps/web/components/Loader.tsx

@@ -1,4 +1,4 @@
 /**
  * @deprecated Use custom Skeletons instead
  **/
-export { default } from "@calcom/ui/Loader";
+export { Loader as default } from "@calcom/ui";

apps/web/components/SettingsShell.tsx

@@ -1,8 +1,6 @@
 import React, { ComponentProps } from "react";
 
-import ErrorBoundary from "@calcom/ui/ErrorBoundary";
-import { Icon } from "@calcom/ui/Icon";
-import Shell from "@calcom/ui/Shell";
+import { ErrorBoundary, Icon, Shell } from "@calcom/ui";
 
 import NavTabs from "./NavTabs";
 

apps/web/components/apps/AdditionalCalendarSelector.tsx

@@ -1,13 +1,10 @@
-import React from "react";
 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 { Icon } from "@calcom/ui/Icon";
-import { Select } from "@calcom/ui/v2";
+import { Button, Icon, Select } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -42,7 +39,7 @@ const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App
 
 const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
   const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: true }]);
+  const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
 
   return (
     <QueryCell

apps/web/components/apps/App.tsx

@@ -9,11 +9,15 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { showToast, SkeletonText } from "@calcom/ui/v2";
-import { SkeletonButton, Shell } from "@calcom/ui/v2";
-import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
+import {
+  Button,
+  DisconnectIntegration,
+  Icon,
+  Shell,
+  showToast,
+  SkeletonButton,
+  SkeletonText,
+} from "@calcom/ui";
 
 import HeadSeo from "@components/seo/head-seo";
 
@@ -43,7 +47,8 @@ const Component = ({
   const router = useRouter();
 
   const mutation = useAddAppMutation(null, {
-    onSuccess: () => {
+    onSuccess: (data) => {
+      if (data.setupPending) return;
       showToast(t("app_successfully_installed"), "success");
     },
     onError: (error) => {
@@ -58,11 +63,14 @@ const Component = ({
   }).format(price);
 
   const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
-  const appCredentials = trpc.useQuery(["viewer.appCredentialsByType", { appType: type }], {
-    onSuccess(data) {
-      setExistingCredentials(data);
-    },
-  });
+  const appCredentials = trpc.viewer.appCredentialsByType.useQuery(
+    { appType: type },
+    {
+      onSuccess(data) {
+        setExistingCredentials(data);
+      },
+    }
+  );
 
   const allowedMultipleInstalls = categories.indexOf("calendar") > -1;
 
@@ -119,6 +127,7 @@ const Component = ({
                   render={({ useDefaultComponent, ...props }) => {
                     if (useDefaultComponent) {
                       props = {
+                        ...props,
                         onClick: () => {
                           mutation.mutate({ type, variant, slug });
                         },
@@ -143,6 +152,7 @@ const Component = ({
             </div>
           ) : existingCredentials.length > 0 ? (
             <DisconnectIntegration
+              buttonProps={{ color: "secondary" }}
               label={t("disconnect")}
               credentialId={existingCredentials[0]}
               onSuccess={() => {
@@ -156,6 +166,7 @@ const Component = ({
               render={({ useDefaultComponent, ...props }) => {
                 if (useDefaultComponent) {
                   props = {
+                    ...props,
                     onClick: () => {
                       mutation.mutate({ type, variant, slug });
                     },

apps/web/components/apps/CalendarListContainer.tsx

@@ -6,15 +6,18 @@ import { InstallAppButton } from "@calcom/app-store/components";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
-import { Button } from "@calcom/ui/components";
-import { Alert, EmptyScreen } from "@calcom/ui/v2";
-import { List } from "@calcom/ui/v2/core/List";
-import { ShellSubHeading } from "@calcom/ui/v2/core/Shell";
-import Switch from "@calcom/ui/v2/core/Switch";
-import showToast from "@calcom/ui/v2/core/notifications";
-import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
+import {
+  Alert,
+  Button,
+  DisconnectIntegration,
+  EmptyScreen,
+  Icon,
+  List,
+  ShellSubHeading,
+  showToast,
+  SkeletonLoader,
+  Switch,
+} from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -77,7 +80,7 @@ function CalendarSwitch(props: {
     },
     {
       async onSettled() {
-        await utils.invalidateQueries(["viewer.integrations"]);
+        await utils.viewer.integrations.invalidate();
       },
       onError() {
         showToast(`Something went wrong when toggling "${props.title}""`, "error");
@@ -107,7 +110,7 @@ function CalendarSwitch(props: {
 
 function CalendarList(props: Props) {
   const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: false }]);
+  const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: false });
 
   return (
     <QueryCell
@@ -144,7 +147,9 @@ function CalendarList(props: Props) {
 // todo: @hariom extract this into packages/apps-store as "GeneralAppSettings"
 function ConnectedCalendarsList(props: Props) {
   const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.connectedCalendars"], { suspense: true });
+  const query = trpc.viewer.connectedCalendars.useQuery(undefined, {
+    suspense: true,
+  });
   const { fromOnboarding } = props;
   return (
     <QueryCell
@@ -235,19 +240,19 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
   const utils = trpc.useContext();
   const onChanged = () =>
     Promise.allSettled([
-      utils.invalidateQueries(["viewer.integrations", { variant: "calendar", onlyInstalled: true }], {
-        exact: true,
-      }),
-      utils.invalidateQueries(["viewer.connectedCalendars"]),
+      utils.viewer.integrations.invalidate(
+        { variant: "calendar", onlyInstalled: true },
+        {
+          exact: true,
+        }
+      ),
+      utils.viewer.connectedCalendars.invalidate(),
     ]);
-  const query = trpc.useQuery(["viewer.connectedCalendars"]);
-  const installedCalendars = trpc.useQuery([
-    "viewer.integrations",
-    { variant: "calendar", onlyInstalled: true },
-  ]);
-  const mutation = trpc.useMutation("viewer.setDestinationCalendar", {
+  const query = trpc.viewer.connectedCalendars.useQuery();
+  const installedCalendars = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
+  const mutation = trpc.viewer.setDestinationCalendar.useMutation({
     onSuccess: () => {
-      utils.invalidateQueries(["viewer.connectedCalendars"]);
+      utils.viewer.connectedCalendars.invalidate();
     },
   });
   return (

apps/web/components/apps/DestinationCalendarSelector.tsx

@@ -23,7 +23,7 @@ const DestinationCalendarSelector = ({
   destinationCalendar,
 }: Props): JSX.Element | null => {
   const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.connectedCalendars"]);
+  const query = trpc.viewer.connectedCalendars.useQuery();
   const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null);
 
   // Extra styles to show prefixed text in react-select

apps/web/components/apps/IntegrationListItem.tsx

@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 import { ReactNode, useEffect, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
-import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/core/List";
+import { Icon, ListItem, ListItemText, ListItemTitle, showToast } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 
@@ -27,6 +26,13 @@ function IntegrationListItem(props: {
   const [highlight, setHighlight] = useState(hl === props.slug);
   const title = props.name || props.title;
 
+  // The highlight is to show a newly installed app, coming from the app's
+  // redirection after installation, so we proceed to show the corresponding
+  // message
+  if (highlight) {
+    showToast(t("app_successfully_installed"), "success");
+  }
+
   useEffect(() => {
     const timer = setTimeout(() => setHighlight(false), 3000);
     return () => {

apps/web/components/auth/TwoFactor.tsx

@@ -3,7 +3,7 @@ import useDigitInput from "react-digit-input";
 import { useFormContext } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Label, Input } from "@calcom/ui/form/fields";
+import { Label, Input } from "@calcom/ui";
 
 export default function TwoFactor({ center = true }) {
   const [value, onChange] = useState("");

apps/web/components/availability/SkeletonLoader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { SkeletonText } from "@calcom/ui/v2";
+import { SkeletonText } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 

apps/web/components/booking/AvailableEventLocations.tsx

@@ -1,6 +1,6 @@
 import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
-import Tooltip from "@calcom/ui/v2/core/Tooltip";
+import { Icon, Tooltip } from "@calcom/ui";
 
 import { Props } from "./pages/AvailabilityPage";
 
@@ -15,14 +15,18 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
         }
         return (
           <div key={location.type} className="flex flex-row items-center text-sm font-medium">
-            <img
-              src={eventLocationType.iconUrl}
-              className={classNames(
-                "mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 ",
-                !eventLocationType.iconUrl?.includes("api") ? "dark:invert" : ""
-              )}
-              alt={`${eventLocationType.label} icon`}
-            />
+            {eventLocationType.iconUrl === "/link.svg" ? (
+              <Icon.FiLink className="dark:text-darkgray-600 mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 " />
+            ) : (
+              <img
+                src={eventLocationType.iconUrl}
+                className={classNames(
+                  "mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 ",
+                  !eventLocationType.iconUrl?.includes("api") ? "dark:invert" : ""
+                )}
+                alt={`${eventLocationType.label} icon`}
+              />
+            )}
             <Tooltip content={locationKeyToString(location)}>
               <p className="truncate">{locationKeyToString(location)}</p>
             </Tooltip>

apps/web/components/booking/AvailableTimes.tsx

@@ -7,8 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TimeFormat } from "@calcom/lib/timeFormat";
 import { nameOfDay } from "@calcom/lib/weekday";
 import type { Slot } from "@calcom/trpc/server/routers/viewer/slots";
-import { SkeletonContainer, SkeletonText } from "@calcom/ui";
-import { ToggleGroup } from "@calcom/ui/v2/core/form/ToggleGroup";
+import { SkeletonContainer, SkeletonText, ToggleGroup } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 import { timeZone } from "@lib/clock";
@@ -152,13 +151,13 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
         {isLoading && !slots.length && (
           <>
             <SkeletonContainer className="mb-2">
-              <SkeletonText width="full" height="20" />
+              <SkeletonText className="h-5 w-full" />
             </SkeletonContainer>
             <SkeletonContainer className="mb-2">
-              <SkeletonText width="full" height="20" />
+              <SkeletonText className="h-5 w-full" />
             </SkeletonContainer>
             <SkeletonContainer className="mb-2">
-              <SkeletonText width="full" height="20" />
+              <SkeletonText className="h-5 w-full" />
             </SkeletonContainer>
           </>
         )}

apps/web/components/booking/BookingDescription.tsx

@@ -3,7 +3,7 @@ import { FC, ReactNode } from "react";
 
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 import { UserAvatars } from "@components/booking/UserAvatars";
 import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
@@ -55,7 +55,7 @@ const BookingDescription: FC<Props> = (props) => {
       <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold text-gray-900">
         {eventType.title}
       </h1>
-      <div className="dark:text-darkgray-600 flex flex-col space-y-3 text-sm font-medium text-gray-600">
+      <div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
         {eventType?.description && (
           <div
             className={classNames(

apps/web/components/booking/BookingListItem.tsx

@@ -1,6 +1,6 @@
 import { BookingStatus } from "@prisma/client";
 import { useRouter } from "next/router";
-import { useState, useMemo } from "react";
+import { useState } from "react";
 
 import { EventLocationType, getEventLocationType } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
@@ -8,15 +8,21 @@ import classNames from "@calcom/lib/classNames";
 import { formatTime } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
-import { inferQueryInput, inferQueryOutput, trpc } from "@calcom/trpc/react";
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { Badge } from "@calcom/ui/components/badge";
-import { Button } from "@calcom/ui/components/button";
-import { TextArea } from "@calcom/ui/form/fields";
-import MeetingTimeInTimezones from "@calcom/ui/v2/core/MeetingTimeInTimezones";
-import Tooltip from "@calcom/ui/v2/core/Tooltip";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { RouterInputs, RouterOutputs, trpc } from "@calcom/trpc/react";
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  Icon,
+  MeetingTimeInTimezones,
+  showToast,
+  TextArea,
+  Tooltip,
+} from "@calcom/ui";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
@@ -24,13 +30,13 @@ import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
 import TableActions, { ActionType } from "@components/ui/TableActions";
 
-type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"];
+type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["status"];
 
-type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
+type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number];
 
 type BookingItemProps = BookingItem & {
   listingStatus: BookingListingStatus;
-  recurringInfo: inferQueryOutput<"viewer.bookings">["recurringInfo"][number] | undefined;
+  recurringInfo: RouterOutputs["viewer"]["bookings"]["get"]["recurringInfo"][number] | undefined;
 };
 
 function BookingListItem(booking: BookingItemProps) {
@@ -42,15 +48,19 @@ function BookingListItem(booking: BookingItemProps) {
   const router = useRouter();
   const [rejectionReason, setRejectionReason] = useState<string>("");
   const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
-  const mutation = trpc.useMutation(["viewer.bookings.confirm"], {
-    onSuccess: () => {
-      setRejectionDialogIsOpen(false);
-      showToast(t("booking_confirmation_success"), "success");
-      utils.invalidateQueries("viewer.bookings");
+  const mutation = trpc.viewer.bookings.confirm.useMutation({
+    onSuccess: (data) => {
+      if (data.status === BookingStatus.REJECTED) {
+        setRejectionDialogIsOpen(false);
+        showToast(t("booking_rejection_success"), "success");
+      } else {
+        showToast(t("booking_confirmation_success"), "success");
+      }
+      utils.viewer.bookings.invalidate();
     },
     onError: () => {
       showToast(t("booking_confirmation_failed"), "error");
-      utils.invalidateQueries("viewer.bookings");
+      utils.viewer.bookings.invalidate();
     },
   });
 
@@ -108,7 +118,9 @@ function BookingListItem(booking: BookingItemProps) {
       label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel"),
       /* When cancelling we need to let the UI and the API know if the intention is to
          cancel all remaining bookings or just that booking instance. */
-      href: `/cancel/${booking.uid}${isTabRecurring && isRecurring ? "?allRemainingBookings=true" : ""}`,
+      href: `/success?uid=${booking.uid}&cancel=true${
+        isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
+      }`,
       icon: Icon.FiX,
     },
     {
@@ -158,11 +170,11 @@ function BookingListItem(booking: BookingItemProps) {
   const startTime = dayjs(booking.startTime).format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
   const [isOpenRescheduleDialog, setIsOpenRescheduleDialog] = useState(false);
   const [isOpenSetLocationDialog, setIsOpenLocationDialog] = useState(false);
-  const setLocationMutation = trpc.useMutation("viewer.bookings.editLocation", {
+  const setLocationMutation = trpc.viewer.bookings.editLocation.useMutation({
     onSuccess: () => {
       showToast(t("location_updated"), "success");
       setIsOpenLocationDialog(false);
-      utils.invalidateQueries("viewer.bookings");
+      utils.viewer.bookings.invalidate();
     },
   });
 
@@ -181,26 +193,14 @@ function BookingListItem(booking: BookingItemProps) {
     .concat(booking.recurringInfo?.bookings[BookingStatus.PENDING])
     .sort((date1: Date, date2: Date) => date1.getTime() - date2.getTime());
 
-  const location = booking.location || "";
-
   const onClickTableData = () => {
     router.push({
       pathname: "/success",
       query: {
-        date: booking.startTime,
-        // TODO: Booking when fetched should have id 0 already(for Dynamic Events).
-        type: booking.eventType.id || 0,
-        eventSlug: booking.eventType.slug,
-        username: user?.username || "",
-        name: booking.attendees[0] ? booking.attendees[0].name : undefined,
-        email: booking.attendees[0] ? booking.attendees[0].email : undefined,
-        location: location,
-        eventName: booking.eventType.eventName || "",
-        bookingId: booking.id,
-        recur: booking.recurringEventId,
-        reschedule: isConfirmed,
+        uid: booking.uid,
+        allRemainingBookings: isTabRecurring,
         listingStatus: booking.listingStatus,
-        status: booking.status,
+        email: booking.attendees[0] ? booking.attendees[0].email : undefined,
       },
     });
   };
@@ -467,8 +467,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}
@@ -480,19 +481,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,
@@ -500,42 +501,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/CancelBooking.tsx

@@ -5,8 +5,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Button } from "@calcom/ui/Button";
-import { Icon } from "@calcom/ui/Icon";
+import { Button, Icon, TextArea } from "@calcom/ui";
 
 type Props = {
   booking: {
@@ -22,13 +21,14 @@ type Props = {
   team?: string | null;
   setIsCancellationMode: (value: boolean) => void;
   theme: string | null;
+  allRemainingBookings: boolean;
 };
 
 export default function CancelBooking(props: Props) {
   const [cancellationReason, setCancellationReason] = useState<string>("");
   const { t } = useLocale();
   const router = useRouter();
-  const { booking, profile, team } = props;
+  const { booking, profile, team, allRemainingBookings } = props;
   const [loading, setLoading] = useState(false);
   const telemetry = useTelemetry();
   const [error, setError] = useState<string | null>(booking ? null : t("booking_already_cancelled"));
@@ -37,7 +37,7 @@ export default function CancelBooking(props: Props) {
   return (
     <>
       {error && (
-        <div>
+        <div className="mt-8">
           <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
             <Icon.FiX className="h-6 w-6 text-red-600" />
           </div>
@@ -51,30 +51,23 @@ export default function CancelBooking(props: Props) {
       {!error && (
         <div className="mt-5 sm:mt-6">
           <label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
-          <textarea
+          <TextArea
             placeholder={t("cancellation_reason_placeholder")}
             value={cancellationReason}
             onChange={(e) => setCancellationReason(e.target.value)}
-            className="mt-2 mb-3 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:mb-3 "
+            className="mt-2 mb-4 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white "
             rows={3}
           />
-          <div className="flex flex-col-reverse rtl:space-x-reverse sm:flex-row">
-            {!props.recurringEvent && (
-              <div className="border-bookinglightest mt-5 flex w-full justify-center border-t pt-3 sm:mt-0 sm:justify-start sm:border-0 sm:pt-0">
-                <Button
-                  color="secondary"
-                  className="border-0 sm:border"
-                  onClick={() => router.push(`/reschedule/${booking?.uid}`)}>
-                  {t("reschedule_this")}
-                </Button>
-              </div>
-            )}
-            <div className="mb-2 flex w-full space-x-2 text-right sm:mb-0 ">
-              <Button color="secondary" onClick={() => props.setIsCancellationMode(false)}>
+          <div className="flex flex-col-reverse rtl:space-x-reverse ">
+            <div className="ml-auto flex w-full space-x-4 ">
+              <Button
+                className="ml-auto"
+                color="secondary"
+                onClick={() => props.setIsCancellationMode(false)}>
                 {t("nevermind")}
               </Button>
               <Button
-                className="flex grow justify-center"
+                className="flex justify-center"
                 data-testid="cancel"
                 onClick={async () => {
                   setLoading(true);
@@ -82,6 +75,7 @@ export default function CancelBooking(props: Props) {
                   const payload = {
                     id: booking?.id,
                     cancellationReason: cancellationReason,
+                    allRemainingBookings,
                   };
 
                   telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
@@ -95,11 +89,7 @@ export default function CancelBooking(props: Props) {
                   });
 
                   if (res.status >= 200 && res.status < 300) {
-                    await router.push(
-                      `/cancel/success?name=${props.profile.name}&title=${booking?.title}&eventPage=${
-                        profile.slug
-                      }&team=${team ? 1 : 0}&recurring=${!!props.recurringEvent}`
-                    );
+                    await router.replace(router.asPath);
                   } else {
                     setLoading(false);
                     setError(
@@ -110,7 +100,7 @@ export default function CancelBooking(props: Props) {
                   }
                 }}
                 loading={loading}>
-                {t("cancel_event")}
+                {props.allRemainingBookings ? t("cancel_all_remaining") : t("cancel_event")}
               </Button>
             </div>
           </div>

apps/web/components/booking/SkeletonLoader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { SkeletonText } from "@calcom/ui/v2";
+import { SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (

apps/web/components/booking/TimeOptions.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import TimezoneSelect, { ITimezoneOption } from "@calcom/ui/v2/core/TimezoneSelect";
+import { ITimezoneOption, TimezoneSelect } from "@calcom/ui";
 
 import { timeZone } from "../../lib/clock";
 

apps/web/components/booking/UserAvatars.tsx

@@ -7,7 +7,7 @@ export const UserAvatars = ({
   users,
   ...props
 }: {
-  profile: { image: string | null; name?: string | null };
+  profile: { image: string | null; name?: string | null; username?: string | null };
   showMembers: boolean;
   users: { username: string | null; name?: string | null }[];
 } & Pick<AvatarGroupProps, "size" | "truncateAfter">) => {
@@ -17,15 +17,26 @@ export const UserAvatars = ({
       border="border-2 dark:border-darkgray-100 border-white"
       items={
         [
-          { image: profile.image, alt: profile.name, title: profile.name },
+          {
+            image: profile.image,
+            alt: profile.name,
+            title: profile.name,
+            href: profile.username ? `${CAL_URL}/${profile.username}` : undefined,
+          },
           ...(showMembers
             ? users.map((user) => ({
                 title: user.name,
                 image: `${CAL_URL}/${user.username}/avatar.png`,
                 alt: user.name || undefined,
+                href: user.username ? `${CAL_URL}/${user.username}` : undefined,
               }))
             : []),
-        ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
+        ].filter((item) => !!item.image) as {
+          image: string;
+          alt?: string;
+          title?: string;
+          href?: string;
+        }[]
       }
       size={props.size}
       truncateAfter={props.truncateAfter}

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

@@ -28,8 +28,7 @@ import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
+import { Icon, DatePicker } from "@calcom/ui";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 // import { timeZone } from "@lib/clock";
@@ -79,19 +78,18 @@ const useSlots = ({
   usernameList: string[];
   timeZone?: string;
 }) => {
-  const { data, isLoading, isPaused } = trpc.useQuery(
-    [
-      "viewer.public.slots.getSchedule",
-      {
-        eventTypeId,
-        eventTypeSlug,
-        usernameList,
-        startTime: startTime?.toISOString() || "",
-        endTime: endTime?.toISOString() || "",
-        timeZone,
-      },
-    ],
-    { enabled: !!startTime && !!endTime }
+  const { data, isLoading, isPaused } = trpc.viewer.public.slots.getSchedule.useQuery(
+    {
+      eventTypeId,
+      eventTypeSlug,
+      usernameList,
+      startTime: startTime?.toISOString() || "",
+      endTime: endTime?.toISOString() || "",
+      timeZone,
+    },
+    {
+      enabled: !!startTime && !!endTime,
+    }
   );
   const [cachedSlots, setCachedSlots] = useState<NonNullable<typeof data>["slots"]>({});
 

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

@@ -5,7 +5,7 @@ import { isValidPhoneNumber } from "libphonenumber-js";
 import { useSession } from "next-auth/react";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useState, useReducer } from "react";
+import { useEffect, useMemo, useReducer, useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { ReactMultiEmail } from "react-multi-email";
@@ -14,11 +14,11 @@ import { z } from "zod";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import {
-  locationKeyToString,
-  getEventLocationValue,
-  getEventLocationType,
   EventLocationType,
+  getEventLocationType,
+  getEventLocationValue,
   getHumanReadableLocationValue,
+  locationKeyToString,
 } from "@calcom/app-store/locations";
 import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
 import { getEventTypeAppData } from "@calcom/app-store/utils";
@@ -37,12 +37,7 @@ import useTheme from "@calcom/lib/hooks/useTheme";
 import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { Icon } from "@calcom/ui/Icon";
-import { Tooltip } from "@calcom/ui/Tooltip";
-import { Button } from "@calcom/ui/components";
-import AddressInput from "@calcom/ui/form/AddressInputLazy";
-import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import { EmailInput, Form } from "@calcom/ui/form/fields";
+import { AddressInput, Button, EmailInput, Form, Icon, PhoneInput, Tooltip } from "@calcom/ui";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
@@ -122,7 +117,7 @@ const BookingPage = ({
 
   const mutation = useMutation(createBooking, {
     onSuccess: async (responseData) => {
-      const { id, paymentUid } = responseData;
+      const { uid, paymentUid } = responseData;
       if (paymentUid) {
         return await router.push(
           createPaymentLink({
@@ -138,17 +133,10 @@ const BookingPage = ({
       return router.push({
         pathname: "/success",
         query: {
-          date,
-          type: eventType.id,
-          eventSlug: eventType.slug,
-          username: profile.slug,
-          reschedule: !!rescheduleUid,
-          name: bookingForm.getValues("name"),
-          email: bookingForm.getValues("email"),
-          location: responseData.location,
-          eventName: profile.eventName || "",
-          bookingId: id,
+          uid,
           isSuccessBookingPage: true,
+          email: bookingForm.getValues("email"),
+          eventTypeSlug: eventType.slug,
         },
       });
     },
@@ -156,31 +144,15 @@ const BookingPage = ({
 
   const recurringMutation = useMutation(createRecurringBooking, {
     onSuccess: async (responseData = []) => {
-      const { attendees = [], id, recurringEventId } = responseData[0] || {};
-      const location = (function humanReadableLocation(location) {
-        if (!location) {
-          return;
-        }
-        if (location.includes("integration")) {
-          return t("web_conferencing_details_to_follow");
-        }
-        return location;
-      })(responseData[0].location);
+      const { uid } = responseData[0] || {};
 
       return router.push({
         pathname: "/success",
         query: {
-          date,
-          type: eventType.id,
-          eventSlug: eventType.slug,
-          recur: recurringEventId,
-          username: profile.slug,
-          reschedule: !!rescheduleUid,
-          name: attendees[0].name,
-          email: attendees[0].email,
-          location,
-          eventName: profile.eventName || "",
-          bookingId: id,
+          uid,
+          allRemainingBookings: true,
+          email: bookingForm.getValues("email"),
+          eventTypeSlug: eventType.slug,
         },
       });
     },
@@ -515,7 +487,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>
@@ -650,7 +622,7 @@ const BookingPage = ({
                   )}
                 </>
                 {/* TODO: Change name and id ="phone" to something generic */}
-                {AttendeeInput && (
+                {AttendeeInput && !disableInput && (
                   <div className="mb-4">
                     <label
                       htmlFor={
@@ -687,7 +659,6 @@ const BookingPage = ({
                             : ""
                         }
                         required
-                        disabled={disableInput}
                       />
                     </div>
                     {bookingForm.formState.errors.phone && (
@@ -883,7 +854,7 @@ const BookingPage = ({
                   {!eventType.disableGuests && !guestToggle && (
                     <Button
                       type="button"
-                      color="minimalSecondary"
+                      color="minimal"
                       size="icon"
                       tooltip={t("additional_guests")}
                       StartIcon={Icon.FiUserPlus}
@@ -901,7 +872,6 @@ const BookingPage = ({
                   </Button>
                   <Button
                     type="submit"
-                    className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast dark:hover:border-darkmodebrandcontrast mr-auto dark:border-transparent"
                     data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
                     loading={mutation.isLoading || recurringMutation.isLoading}>
                     {rescheduleUid ? t("reschedule") : t("confirm")}
@@ -934,7 +904,7 @@ function ErrorMessage({ error }: { error: unknown }) {
         <div className="ltr:ml-3 rtl:mr-3">
           <p className="text-sm text-yellow-700">
             {rescheduleUid ? t("reschedule_fail") : t("booking_fail")}{" "}
-            {error instanceof HttpError || error instanceof Error ? error.message : "Unknown error"}
+            {error instanceof HttpError || error instanceof Error ? t(error.message) : "Unknown error"}
           </p>
         </div>
       </div>

apps/web/components/dialog/DeleteStripeDialogContent.tsx

@@ -1,74 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React, { PropsWithChildren } from "react";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui/Button";
-import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-
-export type DeleteStripeDialogContentProps = {
-  cancelAllBookingsBtnText?: string;
-  removeBtnText?: string;
-  cancelBtnText?: string;
-  onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  onRemove?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  title: string;
-  variety?: "danger" | "warning" | "success";
-};
-
-export default function DeleteStripeDialogContent(props: PropsWithChildren<DeleteStripeDialogContentProps>) {
-  const { t } = useLocale();
-  const {
-    title,
-    variety,
-    cancelAllBookingsBtnText,
-    removeBtnText,
-    cancelBtnText = t("cancel"),
-    onConfirm,
-    onRemove,
-    children,
-  } = props;
-
-  return (
-    <DialogContent>
-      <div className="flex">
-        {variety && (
-          <div className="mt-0.5 ltr:mr-3">
-            {variety === "danger" && (
-              <div className="mx-auto rounded-full bg-red-100 p-2 text-center">
-                <Icon.FiAlertTriangle className="h-5 w-5 text-red-600" />
-              </div>
-            )}
-            {variety === "warning" && (
-              <div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
-                <Icon.FiAlertTriangle className="h-5 w-5 text-orange-600" />
-              </div>
-            )}
-            {variety === "success" && (
-              <div className="mx-auto rounded-full bg-green-100 p-2 text-center">
-                <Icon.FiCheck className="h-5 w-5 text-green-600" />
-              </div>
-            )}
-          </div>
-        )}
-        <div>
-          <DialogPrimitive.Title className="font-cal text-xl text-gray-900">{title}</DialogPrimitive.Title>
-          <DialogPrimitive.Description className="text-sm text-neutral-500">
-            {children}
-          </DialogPrimitive.Description>
-        </div>
-      </div>
-      <div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-8">
-        <DialogClose onClick={onConfirm} asChild>
-          <Button color="alert">{cancelAllBookingsBtnText}</Button>
-        </DialogClose>
-        <DialogClose onClick={onRemove} asChild>
-          <Button color="alert2">{removeBtnText}</Button>
-        </DialogClose>
-        <DialogClose asChild>
-          <Button color="secondary">{cancelBtnText}</Button>
-        </DialogClose>
-      </div>
-    </DialogContent>
-  );
-}

apps/web/components/dialog/EditLocationDialog.tsx

@@ -3,30 +3,28 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { isValidPhoneNumber } from "libphonenumber-js";
 import { useEffect } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
+import { components } from "react-select";
 import { z } from "zod";
 
 import {
-  LocationType,
-  getEventLocationType,
   EventLocationType,
+  getEventLocationType,
+  getHumanReadableLocationValue,
+  getMessageForOrganizer,
   LocationObject,
+  LocationType,
 } from "@calcom/app-store/locations";
-import { getMessageForOrganizer } from "@calcom/app-store/locations";
-import { getHumanReadableLocationValue } from "@calcom/app-store/locations";
+import { classNames } from "@calcom/lib";
 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 { Icon } from "@calcom/ui/Icon";
-import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import { Form } from "@calcom/ui/form/fields";
+import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import { Button, Dialog, DialogClose, DialogContent, DialogFooter, Form, Icon, PhoneInput } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 
 import CheckboxField from "@components/ui/form/CheckboxField";
 import Select from "@components/ui/form/Select";
 
-type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
+type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number];
 
 type OptionTypeBase = {
   label: string;
@@ -42,6 +40,7 @@ interface ISetLocationDialog {
   setShowLocationModal: React.Dispatch<React.SetStateAction<boolean>>;
   isOpenDialog: boolean;
   setSelectedLocation?: (param: OptionTypeBase | undefined) => void;
+  setEditingLocationType?: (param: string) => void;
 }
 
 const LocationInput = (props: {
@@ -79,9 +78,10 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     isOpenDialog,
     defaultValues,
     setSelectedLocation,
+    setEditingLocationType,
   } = props;
   const { t } = useLocale();
-  const locationsQuery = trpc.useQuery(["viewer.locationOptions"]);
+  const locationsQuery = trpc.viewer.locationOptions.useQuery();
 
   useEffect(() => {
     if (selection) {
@@ -212,13 +212,13 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
   return (
     <Dialog open={isOpenDialog}>
-      <DialogContent asChild>
-        <div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
-          <div className="mb-4 sm:flex sm:items-start">
-            <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
-              <Icon.FiMapPin className="text-primary-600 h-6 w-6" />
-            </div>
-            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+      <DialogContent useOwnActionButtons>
+        <div className="flex flex-row space-x-3">
+          <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
+            <Icon.FiMapPin className="text-primary-600 h-6 w-6" />
+          </div>
+          <div className="w-full">
+            <div className="mt-3 text-center sm:mt-0 sm:text-left">
               <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
                 {t("edit_location")}
               </h3>
@@ -226,118 +226,152 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 <p className="text-sm text-gray-400">{t("this_input_will_shown_booking_this_event")}</p>
               )}
             </div>
-            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left" />
-          </div>
-          {booking && (
-            <>
-              <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
-              <p className="mb-2 ml-1 text-sm text-black">
-                {getHumanReadableLocationValue(booking.location, t)}
-              </p>
-            </>
-          )}
-          <Form
-            form={locationFormMethods}
-            handleSubmit={async (values) => {
-              const { locationType: newLocation, displayLocationPublicly } = values;
+            <div className="mt-3 text-center sm:mt-0 sm:text-left" />
 
-              let details = {};
-              if (newLocation === LocationType.InPerson) {
-                details = {
-                  address: values.locationAddress,
-                };
-              }
-              const eventLocationType = getEventLocationType(newLocation);
+            {booking && (
+              <>
+                <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
+                <p className="mb-2 ml-1 text-sm text-black">
+                  {getHumanReadableLocationValue(booking.location, t)}
+                </p>
+              </>
+            )}
+            <Form
+              form={locationFormMethods}
+              handleSubmit={async (values) => {
+                const { locationType: newLocation, displayLocationPublicly } = values;
 
-              // TODO: There can be a property that tells if it is to be saved in `link`
-              if (
-                newLocation === LocationType.Link ||
-                (!eventLocationType?.default && eventLocationType?.linkType === "static")
-              ) {
-                details = { link: values.locationLink };
-              }
+                let details = {};
+                if (newLocation === LocationType.InPerson) {
+                  details = {
+                    address: values.locationAddress,
+                  };
+                }
+                const eventLocationType = getEventLocationType(newLocation);
 
-              if (newLocation === LocationType.UserPhone) {
-                details = { hostPhoneNumber: values.locationPhoneNumber };
-              }
+                // TODO: There can be a property that tells if it is to be saved in `link`
+                if (
+                  newLocation === LocationType.Link ||
+                  (!eventLocationType?.default && eventLocationType?.linkType === "static")
+                ) {
+                  details = { link: values.locationLink };
+                }
 
-              if (eventLocationType?.organizerInputType) {
-                details = {
-                  ...details,
-                  displayLocationPublicly,
-                };
-              }
+                if (newLocation === LocationType.UserPhone) {
+                  details = { hostPhoneNumber: values.locationPhoneNumber };
+                }
 
-              saveLocation(newLocation, details);
-              setShowLocationModal(false);
-              setSelectedLocation?.(undefined);
-              locationFormMethods.unregister([
-                "locationType",
-                "locationLink",
-                "locationAddress",
-                "locationPhoneNumber",
-              ]);
-            }}>
-            <QueryCell
-              query={locationsQuery}
-              success={({ data: locationOptions }) => {
-                if (!locationOptions.length) return null;
-                return (
-                  <Controller
-                    name="locationType"
-                    control={locationFormMethods.control}
-                    render={() => (
-                      <Select
-                        maxMenuHeight={150}
-                        name="location"
-                        defaultValue={selection}
-                        options={
-                          booking
-                            ? locationOptions.filter(
-                                (location) =>
-                                  location.value !== "phone" && location.value !== "attendeeInPerson"
-                              )
-                            : locationOptions
-                        }
-                        isSearchable
-                        className="my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
-                        onChange={(val) => {
-                          if (val) {
-                            locationFormMethods.setValue("locationType", val.value);
-                            locationFormMethods.unregister([
-                              "locationLink",
-                              "locationAddress",
-                              "locationPhoneNumber",
-                            ]);
-                            locationFormMethods.clearErrors([
-                              "locationLink",
-                              "locationPhoneNumber",
-                              "locationAddress",
-                            ]);
-                            setSelectedLocation?.(val);
-                          }
-                        }}
-                      />
-                    )}
-                  />
-                );
-              }}
-            />
-            {selectedLocation && LocationOptions}
-            <div className="mt-4 flex justify-end space-x-2">
-              <Button
-                onClick={() => {
-                  setShowLocationModal(false);
-                  setSelectedLocation?.(undefined);
-                  locationFormMethods.unregister("locationType");
+                if (eventLocationType?.organizerInputType) {
+                  details = {
+                    ...details,
+                    displayLocationPublicly,
+                  };
+                }
+
+                saveLocation(newLocation, details);
+                setShowLocationModal(false);
+                setSelectedLocation?.(undefined);
+                locationFormMethods.unregister([
+                  "locationType",
+                  "locationLink",
+                  "locationAddress",
+                  "locationPhoneNumber",
+                ]);
+              }}>
+              <QueryCell
+                query={locationsQuery}
+                success={({ data: locationOptions }) => {
+                  if (!locationOptions.length) return null;
+                  if (booking) {
+                    locationOptions.forEach((location) => {
+                      if (location.label === "phone") {
+                        location.options.filter((l) => l.value !== "phone");
+                      } else if (location.label === "in person") {
+                        location.options.filter((l) => l.value !== "attendeeInPerson");
+                      }
+                    });
+                  }
+                  return (
+                    <Controller
+                      name="locationType"
+                      control={locationFormMethods.control}
+                      render={() => (
+                        <Select<{ label: string; value: string; icon?: string }>
+                          maxMenuHeight={150}
+                          name="location"
+                          defaultValue={selection}
+                          options={locationOptions}
+                          components={{
+                            Option: (props) => (
+                              <components.Option {...props}>
+                                <div className="flex items-center gap-3">
+                                  {props.data.icon && (
+                                    <img src={props.data.icon} alt="cover" className="h-3.5 w-3.5" />
+                                  )}
+                                  <span
+                                    className={classNames(
+                                      "text-sm font-medium",
+                                      props.isSelected ? "text-white" : "text-gray-900"
+                                    )}>
+                                    {props.data.label}
+                                  </span>
+                                </div>
+                              </components.Option>
+                            ),
+                          }}
+                          formatOptionLabel={(e) => (
+                            <div className="flex items-center gap-3">
+                              {e.icon && <img src={e.icon} alt="app-icon" className="h-5 w-5" />}
+                              <span>{e.label}</span>
+                            </div>
+                          )}
+                          formatGroupLabel={(e) => (
+                            <p className="text-xs font-medium text-gray-600">{e.label}</p>
+                          )}
+                          isSearchable
+                          className="my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
+                          onChange={(val) => {
+                            if (val) {
+                              locationFormMethods.setValue("locationType", val.value);
+                              locationFormMethods.unregister([
+                                "locationLink",
+                                "locationAddress",
+                                "locationPhoneNumber",
+                              ]);
+                              locationFormMethods.clearErrors([
+                                "locationLink",
+                                "locationPhoneNumber",
+                                "locationAddress",
+                              ]);
+                              setSelectedLocation?.(val);
+                            }
+                          }}
+                        />
+                      )}
+                    />
+                  );
                 }}
-                type="button"
-                color="secondary">
-                {t("cancel")}
-              </Button>
-              <Button type="submit">{t("update")}</Button>
-            </div>
-          </Form>
+              />
+              {selectedLocation && LocationOptions}
+              <DialogFooter>
+                <div className="mt-4 flex justify-end space-x-2">
+                  <Button
+                    onClick={() => {
+                      setShowLocationModal(false);
+                      setSelectedLocation?.(undefined);
+                      setEditingLocationType?.("");
+                      locationFormMethods.unregister("locationType");
+                    }}
+                    type="button"
+                    color="secondary">
+                    {t("cancel")}
+                  </Button>
+
+                  <Button type="submit">{t("update")}</Button>
+                </div>
+              </DialogFooter>
+            </Form>
+          </div>
         </div>
       </DialogContent>
     </Dialog>

apps/web/components/dialog/RescheduleDialog.tsx

@@ -1,12 +1,8 @@
-import React, { useState, Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
-import { TextArea } from "@calcom/ui/form/fields";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Button, Dialog, DialogContent, Icon, showToast, TextArea } from "@calcom/ui";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;
@@ -20,11 +16,11 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
   const { isOpenDialog, setIsOpenDialog, bookingUId: bookingId } = props;
   const [rescheduleReason, setRescheduleReason] = useState("");
 
-  const { mutate: rescheduleApi, isLoading } = trpc.useMutation("viewer.bookings.requestReschedule", {
+  const { mutate: rescheduleApi, isLoading } = trpc.viewer.bookings.requestReschedule.useMutation({
     async onSuccess() {
       showToast(t("reschedule_request_sent"), "success");
       setIsOpenDialog(false);
-      await utils.invalidateQueries(["viewer.bookings"]);
+      await utils.viewer.bookings.invalidate();
     },
     onError() {
       showToast(t("unexpected_error_try_again"), "error");
@@ -34,44 +30,44 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
 
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
-      <DialogContent>
-        <div className="flex flex-row space-x-3">
-          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-            <Icon.FiClock className="m-auto h-6 w-6" />
-          </div>
-          <div className="pt-1">
-            <DialogHeader title={t("send_reschedule_request")} />
-
-            <p className="-mt-8 text-sm text-gray-500">{t("reschedule_modal_description")}</p>
-            <p className="mt-6 mb-2 text-sm font-bold text-black">
-              {t("reason_for_reschedule_request")}
-              <span className="font-normal text-gray-500"> (Optional)</span>
-            </p>
-            <TextArea
-              data-testid="reschedule_reason"
-              name={t("reschedule_reason")}
-              value={rescheduleReason}
-              onChange={(e) => setRescheduleReason(e.target.value)}
-              className="mb-5 sm:mb-6"
-            />
-
-            <DialogFooter>
-              <DialogClose asChild>
-                <Button color="secondary">{t("cancel")}</Button>
-              </DialogClose>
-              <Button
-                data-testid="send_request"
-                disabled={isLoading}
-                onClick={() => {
-                  rescheduleApi({
-                    bookingId,
-                    rescheduleReason,
-                  });
-                }}>
-                {t("send_reschedule_request")}
-              </Button>
-            </DialogFooter>
-          </div>
+      <DialogContent
+        Icon={Icon.FiClock}
+        useOwnActionButtons
+        title={t("send_reschedule_request")}
+        description={t("reschedule_modal_description")}>
+        <div>
+          <p className="text-sm font-medium text-black">
+            {t("reason_for_reschedule_request")}
+            <span className="font-normal text-gray-500"> (Optional)</span>
+          </p>
+          <TextArea
+            data-testid="reschedule_reason"
+            name={t("reschedule_reason")}
+            value={rescheduleReason}
+            onChange={(e) => setRescheduleReason(e.target.value)}
+            className="mt-2"
+          />
+        </div>
+        <div className="flex justify-end space-x-2">
+          <Button
+            onClick={() => {
+              setRescheduleReason("");
+              setIsOpenDialog(false);
+            }}
+            color="secondary">
+            {t("cancel")}
+          </Button>
+          <Button
+            data-testid="send_request"
+            disabled={isLoading}
+            onClick={() => {
+              rescheduleApi({
+                bookingId,
+                rescheduleReason,
+              });
+            }}>
+            {t("send_reschedule_request")}
+          </Button>
         </div>
       </DialogContent>
     </Dialog>

apps/web/components/eventtype/AvailabilityTab.tsx

@@ -1,6 +1,6 @@
 import { FormValues } from "pages/event-types/[type]";
 import { Controller, useFormContext } from "react-hook-form";
-import { SingleValueProps, OptionProps, components } from "react-select";
+import { components, OptionProps, SingleValueProps } from "react-select";
 
 import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
@@ -8,12 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Icon } from "@calcom/ui";
-import { Badge } from "@calcom/ui/components/badge";
-import { Button } from "@calcom/ui/components/button";
-import { SettingsToggle } from "@calcom/ui/v2";
-import Select from "@calcom/ui/v2/core/form/select";
-import { SkeletonText } from "@calcom/ui/v2/core/skeleton";
+import { Badge, Button, Icon, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
 
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 
@@ -61,7 +56,7 @@ const AvailabilitySelect = ({
   onBlur: () => void;
   onChange: (value: AvailabilityOption | null) => void;
 }) => {
-  const { data, isLoading } = trpc.useQuery(["viewer.availability.list"]);
+  const { data, isLoading } = trpc.viewer.availability.list.useQuery();
   if (isLoading) {
     return <SelectSkeletonLoader />;
   }
@@ -183,7 +178,7 @@ export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
   };
 
   const scheduleId = watch("schedule");
-  const { isLoading, data: schedule } = trpc.useQuery(["viewer.availability.schedule", { scheduleId }]);
+  const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery({ scheduleId });
 
   const filterDays = (dayNum: number) =>
     schedule?.schedule.availability.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];

apps/web/components/eventtype/CreateEventType.tsx

@@ -11,19 +11,25 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 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";
-import Dropdown, {
+import {
+  Alert,
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fields";
-import showToast from "@calcom/ui/v2/core/notifications";
+  Form,
+  Icon,
+  InputLeading,
+  showToast,
+  TextAreaField,
+  TextField,
+} from "@calcom/ui";
 
 import { HttpError } from "@lib/core/http/error";
 import { slugify } from "@lib/slugify";
@@ -95,7 +101,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
     return () => subscription.unsubscribe();
   }, [watch, setValue]);
 
-  const createMutation = trpc.useMutation("viewer.eventTypes.create", {
+  const createMutation = trpc.viewer.eventTypes.create.useMutation({
     onSuccess: async ({ eventType }) => {
       await router.replace("/event-types/" + eventType.id);
       showToast(t("event_type_created_successfully", { eventTypeTitle: eventType.title }), "success");
@@ -318,13 +324,10 @@ function CreateEventTeamsItem(props: {
   option: EventTypeParent;
 }) {
   const session = useSession();
-  const membershipQuery = trpc.useQuery([
-    "viewer.teams.getMembershipbyUser",
-    {
-      memberId: session.data?.user.id as number,
-      teamId: props.option.teamId as number,
-    },
-  ]);
+  const membershipQuery = trpc.viewer.teams.getMembershipbyUser.useQuery({
+    memberId: session.data?.user.id as number,
+    teamId: props.option.teamId as number,
+  });
 
   const isDisabled = membershipQuery.data?.role === "MEMBER";
 

apps/web/components/eventtype/CustomInputTypeForm.tsx

@@ -1,10 +1,8 @@
 import { EventTypeCustomInput, EventTypeCustomInputType } from "@prisma/client";
-import React, { FC } from "react";
+import { FC } from "react";
 import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
 
-import { Button } from "@calcom/ui/components";
-import { TextField } from "@calcom/ui/components/form";
-import { Select } from "@calcom/ui/v2";
+import { Button, Select, TextField } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 

apps/web/components/eventtype/EditLocationDialog.tsx

@@ -4,31 +4,28 @@ import { isValidPhoneNumber } from "libphonenumber-js";
 import { Trans } from "next-i18next";
 import { useEffect } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
+import { components } from "react-select";
 import { z } from "zod";
 
 import {
-  LocationType,
-  getEventLocationType,
   EventLocationType,
+  getEventLocationType,
   getHumanReadableLocationValue,
   getMessageForOrganizer,
   LocationObject,
+  LocationType,
 } from "@calcom/app-store/locations";
+import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { inferQueryOutput, trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { Label, Form } from "@calcom/ui/components/form";
-import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import { Dialog, DialogContent } from "@calcom/ui/v2";
-import { Select } from "@calcom/ui/v2/";
+import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import { Button, Dialog, DialogContent, Form, Icon, Label, PhoneInput, Select } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 
 import { LinkText } from "@components/ui/LinkText";
 import CheckboxField from "@components/ui/form/CheckboxField";
 
-type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
+type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number];
 
 type OptionTypeBase = {
   label: string;
@@ -83,7 +80,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     setSelectedLocation,
   } = props;
   const { t } = useLocale();
-  const locationsQuery = trpc.useQuery(["viewer.locationOptions"]);
+  const locationsQuery = trpc.viewer.locationOptions.useQuery();
 
   useEffect(() => {
     if (selection) {
@@ -278,20 +275,48 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
             query={locationsQuery}
             success={({ data: locationOptions }) => {
               if (!locationOptions.length) return null;
+              if (booking) {
+                locationOptions.forEach((location) => {
+                  if (location.label === "phone") {
+                    location.options.filter((l) => l.value !== "phone");
+                  }
+                });
+              }
               return (
                 <Controller
                   name="locationType"
                   control={locationFormMethods.control}
                   render={() => (
-                    <Select
+                    <Select<{ label: string; value: string; icon?: string }>
                       maxMenuHeight={150}
                       name="location"
                       defaultValue={selection}
-                      options={
-                        booking
-                          ? locationOptions.filter((location) => location.value !== "phone")
-                          : locationOptions
-                      }
+                      options={locationOptions}
+                      components={{
+                        Option: (props) => (
+                          <components.Option {...props}>
+                            <div className="flex items-center gap-3">
+                              {props.data.icon && (
+                                <img src={props.data.icon} alt="cover" className="h-3.5 w-3.5" />
+                              )}
+                              <span
+                                className={classNames(
+                                  "text-sm font-medium",
+                                  props.isSelected ? "text-white" : "text-gray-900"
+                                )}>
+                                {props.data.label}
+                              </span>
+                            </div>
+                          </components.Option>
+                        ),
+                      }}
+                      formatOptionLabel={(e) => (
+                        <div className="flex items-center gap-2.5">
+                          {e.icon && <img src={e.icon} alt="app-icon" className="h-5 w-5" />}
+                          <span>{e.label}</span>
+                        </div>
+                      )}
+                      formatGroupLabel={(e) => <p className="text-xs font-medium text-gray-600">{e.label}</p>}
                       isSearchable={false}
                       onChange={(val) => {
                         if (val) {

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -10,11 +10,21 @@ import DestinationCalendarSelector from "@calcom/features/calendars/DestinationC
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Checkbox, Button, TextField, Label } from "@calcom/ui/components";
-import { CustomInputItem, Dialog, DialogContent, SettingsToggle, showToast, Tooltip } from "@calcom/ui/v2";
+import {
+  Button,
+  Checkbox,
+  CustomInputItem,
+  Dialog,
+  DialogContent,
+  Icon,
+  Label,
+  SettingsToggle,
+  showToast,
+  TextField,
+  Tooltip,
+} from "@calcom/ui";
 
-import CustomInputTypeForm from "@components/v2/eventtype/CustomInputTypeForm";
+import CustomInputTypeForm from "@components/eventtype/CustomInputTypeForm";
 
 const generateHashedLink = (id: number) => {
   const translator = short();
@@ -24,7 +34,7 @@ const generateHashedLink = (id: number) => {
 };
 
 export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered, "eventType" | "team">) => {
-  const connectedCalendarsQuery = trpc.useQuery(["viewer.connectedCalendars"]);
+  const connectedCalendarsQuery = trpc.viewer.connectedCalendars.useQuery();
   const formMethods = useFormContext<FormValues>();
   const { t } = useLocale();
   const [showEventNameTip, setShowEventNameTip] = useState(false);
@@ -74,6 +84,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               defaultValue={eventType.destinationCalendar || undefined}
               render={({ field: { onChange, value } }) => (
                 <DestinationCalendarSelector
+                  destinationCalendar={eventType.destinationCalendar}
                   value={value ? value.externalId : undefined}
                   onChange={onChange}
                   hidePlaceholder
@@ -97,7 +108,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               StartIcon={Icon.FiEdit}
               size="icon"
               color="minimal"
-              className="hover:stroke-3 hover:bg-transparent hover:text-black"
+              className="hover:stroke-3 min-w-fit px-0 hover:bg-transparent hover:text-black"
               onClick={() => setShowEventNameTip((old) => !old)}
             />
           }

apps/web/components/eventtype/EventAppsTab.tsx

@@ -1,5 +1,4 @@
 import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
-import React from "react";
 import { useFormContext } from "react-hook-form";
 
 import EventTypeAppContext, { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
@@ -7,11 +6,8 @@ import { EventTypeAddonMap } from "@calcom/app-store/apps.browser.generated";
 import { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
 import { EventTypeAppsList } from "@calcom/app-store/utils";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { inferQueryOutput, trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import ErrorBoundary from "@calcom/ui/ErrorBoundary";
-import { Button } from "@calcom/ui/components";
-import { EmptyScreen } from "@calcom/ui/v2";
+import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import { Button, EmptyScreen, ErrorBoundary, Icon } from "@calcom/ui";
 
 type EventType = Pick<EventTypeSetupInfered, "eventType">["eventType"] &
   EventTypeAppCardComponentProps["eventType"];
@@ -22,7 +18,7 @@ function AppCardWrapper({
   getAppData,
   setAppData,
 }: {
-  app: inferQueryOutput<"viewer.apps">[number];
+  app: RouterOutputs["viewer"]["apps"][number];
   eventType: EventType;
   getAppData: GetAppData;
   setAppData: SetAppData;
@@ -44,12 +40,9 @@ function AppCardWrapper({
 
 export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
   const { t } = useLocale();
-  const { data: eventTypeApps, isLoading } = trpc.useQuery([
-    "viewer.apps",
-    {
-      extendsFeature: "EventType",
-    },
-  ]);
+  const { data: eventTypeApps, isLoading } = trpc.viewer.apps.useQuery({
+    extendsFeature: "EventType",
+  });
   const methods = useFormContext<FormValues>();
   const installedApps = eventTypeApps?.filter((app) => app.credentials.length);
   const notInstalledApps = eventTypeApps?.filter((app) => !app.credentials.length);

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -1,23 +1,25 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
-import { useState } from "react";
-import { useFormContext, Controller, useWatch } from "react-hook-form";
+import { useMemo, useRef, useState } from "react";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
 
 import { classNames } from "@calcom/lib";
+import convertToNewDurationType, { DurationType } from "@calcom/lib/convertToNewDurationType";
+import findDurationType from "@calcom/lib/findDurationType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PeriodType } from "@calcom/prisma/client";
 import type { BookingLimit } from "@calcom/types/Calendar";
-import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui/components";
-import { Label, Input, MinutesField } from "@calcom/ui/components/form";
-import { Select, SettingsToggle } from "@calcom/ui/v2";
-import DateRangePicker from "@calcom/ui/v2/core/form/date-range-picker/DateRangePicker";
+import { Button, DateRangePicker, Icon, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui";
 
-export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">) => {
+export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupInfered, "eventType">) => {
   const { t } = useLocale();
   const formMethods = useFormContext<FormValues>();
-  const { eventType } = props;
+  const minimumBookingNoticeType = useRef<DurationType>(findDurationType(eventType.minimumBookingNotice));
+  const prevBookingNoticeType = useRef<DurationType>(minimumBookingNoticeType.current);
+
+  const minimumBookingNoticeInDurationTypeFormValue = formMethods.watch("minimumBookingNoticeInDurationType");
+
   const PERIOD_TYPES = [
     {
       type: "ROLLING" as const,
@@ -47,6 +49,57 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
     defaultValue: periodType?.type,
   });
 
+  const onMinimumNoticeDurationTypeChange = useMemo(
+    () => (durationType?: DurationType) => {
+      if (typeof durationType === "undefined") return;
+
+      // Store current selected type in ref to use in previous run for comparrison.
+      minimumBookingNoticeType.current = durationType;
+
+      // Uses the previous selected type and converts the value to the new type.
+      // Eg day was selected before, user selects hours now, so we multiple * 24 and round up.
+      const minimumBookingNoticeInDurationType = convertToNewDurationType(
+        prevBookingNoticeType.current,
+        durationType,
+        Number(minimumBookingNoticeInDurationTypeFormValue)
+      );
+
+      // Uses the round up value in the new type to calculate the value in minutes.
+      // We should NOT use minimumBookingNoticeInDurationTypeFormValue here, since that
+      // would break in the case that the user enters 90 minutes, changes the type to
+      // hours (that will show 2 hours), but the value in minutes would then remain 90,
+      // which is something else than the user things they save.
+      const minimumBookingNoticeInMinutes = convertToNewDurationType(
+        durationType,
+        "minutes",
+        Number(minimumBookingNoticeInDurationType)
+      );
+
+      // Updates both form values as well as stores the current type as previous type in ref.
+      formMethods.setValue("minimumBookingNotice", minimumBookingNoticeInMinutes);
+      formMethods.setValue("minimumBookingNoticeInDurationType", minimumBookingNoticeInDurationType);
+      prevBookingNoticeType.current = durationType;
+    },
+    [formMethods, minimumBookingNoticeInDurationTypeFormValue]
+  );
+
+  /**
+   * When the user inputs a new value for minimumBookingNoticeInDurationType,
+   * we calculate the value in minutes, and update this hidden field as well.
+   */
+  const onMinimumNoticeChange = useMemo(
+    () => (duration: string) => {
+      const minimumBookingNoticeInMinutes = convertToNewDurationType(
+        minimumBookingNoticeType.current,
+        "minutes",
+        Number(duration)
+      );
+
+      formMethods.setValue("minimumBookingNotice", minimumBookingNoticeInMinutes);
+    },
+    [formMethods]
+  );
+
   return (
     <div>
       <div className="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
@@ -116,13 +169,54 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
         </div>
       </div>
       <div className="flex flex-col space-y-4 pt-4 lg:flex-row lg:space-y-0 lg:space-x-4">
-        <div className="w-full">
-          <MinutesField
-            required
-            label={t("minimum_booking_notice")}
-            type="number"
-            placeholder="120"
-            {...formMethods.register("minimumBookingNotice", { valueAsNumber: true })}
+        <div className="flex w-full items-end justify-end">
+          <Controller
+            name="minimumBookingNotice"
+            control={formMethods.control}
+            render={() => {
+              const durationTypeOptions = [
+                {
+                  label: t("minutes"),
+                  value: "minutes",
+                },
+                {
+                  label: t("hours"),
+                  value: "hours",
+                },
+                {
+                  label: t("days"),
+                  value: "days",
+                },
+              ];
+
+              return (
+                <>
+                  <div className="w-1/2 md:w-3/4">
+                    <InputField
+                      required
+                      label={t("minimum_booking_notice")}
+                      type="number"
+                      placeholder="120"
+                      className="mr-2 mb-0 h-[38px] rounded-[4px]"
+                      {...formMethods.register("minimumBookingNoticeInDurationType", {
+                        onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
+                          onMinimumNoticeChange(event.target.value),
+                      })}
+                    />
+                    <input type="hidden" {...formMethods.register("minimumBookingNotice")} />
+                  </div>
+                  <Select
+                    isSearchable={false}
+                    className="mb-0 ml-2 h-[38px] w-full capitalize md:min-w-[150px] md:max-w-[200px]"
+                    defaultValue={durationTypeOptions.find(
+                      (option) => option.value === minimumBookingNoticeType.current
+                    )}
+                    onChange={(input) => onMinimumNoticeDurationTypeChange(input?.value as DurationType)}
+                    options={durationTypeOptions}
+                  />
+                </>
+              );
+            }}
           />
         </div>
         <div className="w-full">
@@ -136,7 +230,7 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
                   label: t("slot_interval_default"),
                   value: -1,
                 },
-                ...[5, 10, 15, 20, 30, 45, 60].map((minutes) => ({
+                ...[5, 10, 15, 20, 30, 45, 60, 75, 90, 105, 120].map((minutes) => ({
                   label: minutes + " " + t("minutes"),
                   value: minutes,
                 })),
@@ -191,7 +285,7 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
           <SettingsToggle
             title={t("limit_future_bookings")}
             description={t("limit_future_bookings_description")}
-            checked={value !== "UNLIMITED"}
+            checked={value && value !== "UNLIMITED"}
             onCheckedChange={(bool) => formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")}>
             <RadioGroup.Root
               defaultValue={watchPeriodType}

apps/web/components/eventtype/EventSetupTab.tsx

@@ -6,17 +6,14 @@ import { useState } from "react";
 import { Controller, useForm, useFormContext } from "react-hook-form";
 import { z } from "zod";
 
-import { getEventLocationType, EventLocationType } from "@calcom/app-store/locations";
+import { EventLocationType, getEventLocationType } from "@calcom/app-store/locations";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { Label, TextField } from "@calcom/ui/components/form";
-import { Select, Skeleton } from "@calcom/ui/v2";
+import { Button, Icon, Label, Select, Skeleton, TextField } from "@calcom/ui";
 
 import { slugify } from "@lib/slugify";
 
-import { EditLocationDialog } from "@components/v2/eventtype/EditLocationDialog";
+import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 
 type OptionTypeBase = {
   label: string;
@@ -31,6 +28,7 @@ export const EventSetupTab = (
   const formMethods = useFormContext<FormValues>();
   const { eventType, locationOptions, team } = props;
   const [showLocationModal, setShowLocationModal] = useState(false);
+  const [editingLocationType, setEditingLocationType] = useState<string>("");
   const [selectedLocation, setSelectedLocation] = useState<OptionTypeBase | undefined>(undefined);
 
   const openLocationModal = (type: EventLocationType["type"]) => {
@@ -46,14 +44,23 @@ export const EventSetupTab = (
     );
   };
 
-  const addLocation = (newLocationType: EventLocationType["type"], details = {}) => {
-    const existingIdx = formMethods.getValues("locations").findIndex((loc) => newLocationType === loc.type);
+  const saveLocation = (newLocationType: EventLocationType["type"], details = {}) => {
+    const locationType = editingLocationType !== "" ? editingLocationType : newLocationType;
+    const existingIdx = formMethods.getValues("locations").findIndex((loc) => locationType === loc.type);
     if (existingIdx !== -1) {
       const copy = formMethods.getValues("locations");
-      copy[existingIdx] = {
-        ...formMethods.getValues("locations")[existingIdx],
-        ...details,
-      };
+      if (editingLocationType !== "") {
+        copy[existingIdx] = {
+          ...details,
+          type: newLocationType,
+        };
+      } else {
+        copy[existingIdx] = {
+          ...formMethods.getValues("locations")[existingIdx],
+          ...details,
+        };
+      }
+
       formMethods.setValue("locations", copy);
     } else {
       formMethods.setValue(
@@ -61,6 +68,8 @@ export const EventSetupTab = (
         formMethods.getValues("locations").concat({ type: newLocationType, ...details })
       );
     }
+
+    setEditingLocationType("");
     setShowLocationModal(false);
   };
 
@@ -118,7 +127,7 @@ export const EventSetupTab = (
                   if (eventLocationType.organizerInputType) {
                     openLocationModal(newLocationType);
                   } else {
-                    addLocation(newLocationType);
+                    saveLocation(newLocationType);
                   }
                 }
               }}
@@ -138,10 +147,10 @@ export const EventSetupTab = (
                     <div key={index} className="flex flex-grow items-center">
                       <img
                         src={eventLocationType.iconUrl}
-                        className="h-6 w-6"
+                        className="h-4 w-4"
                         alt={`${eventLocationType.label} logo`}
                       />
-                      <span className="truncate text-sm ltr:ml-2 rtl:mr-2">
+                      <span className="truncate text-sm ltr:ml-1 rtl:mr-1">
                         {location[eventLocationType.defaultValueVariable] || eventLocationType.label}
                       </span>
                     </div>
@@ -153,6 +162,7 @@ export const EventSetupTab = (
                           locationFormMethods.unregister("locationLink");
                           locationFormMethods.unregister("locationAddress");
                           locationFormMethods.unregister("locationPhoneNumber");
+                          setEditingLocationType(location.type);
                           openLocationModal(location.type);
                         }}
                         aria-label={t("edit")}
@@ -237,12 +247,13 @@ export const EventSetupTab = (
       <EditLocationDialog
         isOpenDialog={showLocationModal}
         setShowLocationModal={setShowLocationModal}
-        saveLocation={addLocation}
+        saveLocation={saveLocation}
         defaultValues={formMethods.getValues("locations")}
         selection={
           selectedLocation ? { value: selectedLocation.value, label: selectedLocation.label } : undefined
         }
         setSelectedLocation={setSelectedLocation}
+        setEditingLocationType={setEditingLocationType}
       />
     </div>
   );

apps/web/components/eventtype/EventTeamTab.tsx

@@ -5,10 +5,7 @@ import { Controller, useFormContext } from "react-hook-form";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
-import { Button, Avatar } from "@calcom/ui/components";
-import { Label } from "@calcom/ui/components/form";
-import { Select, CheckedTeamSelect } from "@calcom/ui/v2";
+import { Avatar, Button, CheckedTeamSelect, Icon, Label, Select } from "@calcom/ui";
 
 interface IMemberToValue {
   id: number | null;

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -10,20 +10,27 @@ import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc, TRPCClientError } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Button, ButtonGroup, Label } from "@calcom/ui/components";
-import { HorizontalTabs, showToast, Switch, Tooltip, VerticalTabs } from "@calcom/ui/v2";
-import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
-import { Dialog } from "@calcom/ui/v2/core/Dialog";
-import Divider from "@calcom/ui/v2/core/Divider";
-import Dropdown, {
+import {
+  Button,
+  ButtonGroup,
+  ConfirmationDialogContent,
+  Dialog,
+  Divider,
+  Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@calcom/ui/v2/core/Dropdown";
-import Shell from "@calcom/ui/v2/core/Shell";
-import VerticalDivider from "@calcom/ui/v2/core/VerticalDivider";
-import { Skeleton } from "@calcom/ui/v2/core/skeleton";
+  HorizontalTabs,
+  Icon,
+  Label,
+  Shell,
+  showToast,
+  Skeleton,
+  Switch,
+  Tooltip,
+  VerticalDivider,
+  VerticalTabs,
+} from "@calcom/ui";
 
 import { ClientSuspense } from "@components/ClientSuspense";
 import { EmbedButton, EmbedDialog } from "@components/Embed";
@@ -115,9 +122,9 @@ function EventTypeSingleLayout({
 
   const hasPermsToDelete = currentUserMembership?.role !== "MEMBER" || !currentUserMembership;
 
-  const deleteMutation = trpc.useMutation("viewer.eventTypes.delete", {
+  const deleteMutation = trpc.viewer.eventTypes.delete.useMutation({
     onSuccess: async () => {
-      await utils.invalidateQueries(["viewer.eventTypes"]);
+      await utils.viewer.eventTypes.invalidate();
       showToast(t("event_type_deleted_successfully"), "success");
       await router.push("/event-types");
       setDeleteDialogOpen(false);
@@ -202,7 +209,6 @@ function EventTypeSingleLayout({
               color="secondary"
               size="icon"
               StartIcon={Icon.FiLink}
-              combined
               tooltip={t("copy_link")}
               onClick={() => {
                 navigator.clipboard.writeText(permalink);

apps/web/components/eventtype/EventWorkfowsTab.tsx

@@ -1 +1 @@
-export { default } from "@calcom/features/ee/workflows/components/v2/EventWorkflowsTab";
+export { default } from "@calcom/features/ee/workflows/components/EventWorkflowsTab";

apps/web/components/eventtype/RecurringEventController.tsx

@@ -5,8 +5,7 @@ import { useFormContext } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Frequency } from "@calcom/prisma/zod-utils";
 import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Alert } from "@calcom/ui/Alert";
-import { Select, SettingsToggle } from "@calcom/ui/v2";
+import { Alert, Select, SettingsToggle } from "@calcom/ui";
 
 type RecurringEventControllerProps = {
   recurringEvent: RecurringEvent | null;

apps/web/components/eventtype/SkeletonLoader.tsx

@@ -1,13 +1,11 @@
-import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
-import { Icon } from "@calcom/ui/Icon";
+import { Icon, SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
 
-/** @deprecated Use `apps/web/components/v2/eventtype/SkeletonLoader.tsx` */
 function SkeletonLoader() {
   return (
     <SkeletonContainer>
       <div className="mb-4 flex items-center">
-        <SkeletonAvatar width="8" height="8" />
-        <div className="space-y-1">
+        <SkeletonAvatar className="h-8 w-8" />
+        <div className="flex flex-col space-y-1">
           <SkeletonText className="h-4 w-16" />
           <SkeletonText className="h-4 w-24" />
         </div>
@@ -28,17 +26,17 @@ function SkeletonItem() {
     <li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6">
       <div className="flex-grow truncate text-sm">
         <div>
-          <SkeletonText width="32" height="5" />
+          <SkeletonText className="h-5 w-32" />
         </div>
         <div className="">
           <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
             <li className="flex items-center whitespace-nowrap">
               <Icon.FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
-              <SkeletonText width="12" height="4" />
+              <SkeletonText className="h-4 w-12" />
             </li>
             <li className="flex items-center whitespace-nowrap">
               <Icon.FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
-              <SkeletonText width="16" height="4" />
+              <SkeletonText className="h-4 w-12" />
             </li>
           </ul>
         </div>

apps/web/components/getting-started/components/CalendarItem.tsx

@@ -1,7 +1,7 @@
 import { InstallAppButtonWithoutPlanCheck } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { App } from "@calcom/types/App";
-import { Button } from "@calcom/ui/components/button";
+import { Button } from "@calcom/ui";
 
 interface ICalendarItem {
   title: string;

apps/web/components/getting-started/components/CalendarSwitch.tsx

@@ -1,8 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
 
 import { trpc } from "@calcom/trpc/react";
-import { Switch } from "@calcom/ui/v2";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { showToast, Switch } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 
@@ -58,7 +57,7 @@ const CalendarSwitch = (props: ICalendarSwitchProps) => {
     },
     {
       async onSettled() {
-        await utils.invalidateQueries(["viewer.integrations"]);
+        await utils.viewer.integrations.invalidate();
       },
       onError() {
         showToast(`Something went wrong when toggling "${title}""`, "error");

apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx

@@ -1,16 +1,16 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { inferMutationInput, trpc } from "@calcom/trpc/react";
+import { RouterInputs, trpc } from "@calcom/trpc/react";
 
 import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
 
 interface ICreateEventsOnCalendarSelectProps {
-  calendar?: inferMutationInput<"viewer.setDestinationCalendar"> | null;
+  calendar?: RouterInputs["viewer"]["setDestinationCalendar"] | null;
 }
 
 const CreateEventsOnCalendarSelect = (props: ICreateEventsOnCalendarSelectProps) => {
   const { calendar } = props;
   const { t } = useLocale();
-  const mutation = trpc.useMutation(["viewer.setDestinationCalendar"]);
+  const mutation = trpc.viewer.setDestinationCalendar.useMutation();
 
   return (
     <>

apps/web/components/getting-started/steps-views/ConnectCalendars.tsx

@@ -3,8 +3,7 @@ import { ArrowRightIcon } from "@heroicons/react/solid";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { List } from "@calcom/ui/List";
-import { SkeletonAvatar, SkeletonText, SkeletonButton } from "@calcom/ui/v2";
+import { SkeletonAvatar, SkeletonText, SkeletonButton, List } from "@calcom/ui";
 
 import { CalendarItem } from "../components/CalendarItem";
 import { ConnectedCalendarItem } from "../components/ConnectedCalendarItem";
@@ -16,12 +15,9 @@ interface IConnectCalendarsProps {
 
 const ConnectedCalendars = (props: IConnectCalendarsProps) => {
   const { nextStep } = props;
-  const queryConnectedCalendars = trpc.useQuery(["viewer.connectedCalendars"]);
+  const queryConnectedCalendars = trpc.viewer.connectedCalendars.useQuery();
   const { t } = useLocale();
-  const queryIntegrations = trpc.useQuery([
-    "viewer.integrations",
-    { variant: "calendar", onlyInstalled: false },
-  ]);
+  const queryIntegrations = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: false });
 
   const firstCalendar = queryConnectedCalendars.data?.connectedCalendars.find(
     (item) => item.calendars && item.calendars?.length > 0

apps/web/components/getting-started/steps-views/SetupAvailability.tsx

@@ -7,8 +7,7 @@ import { DEFAULT_SCHEDULE } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc, TRPCClientErrorLike } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Button } from "@calcom/ui/components/button";
-import { Form } from "@calcom/ui/form/fields";
+import { Button, Form } from "@calcom/ui";
 
 interface ISetupAvailabilityProps {
   nextStep: () => void;
@@ -24,9 +23,12 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
   const router = useRouter();
   let queryAvailability;
   if (defaultScheduleId) {
-    queryAvailability = trpc.useQuery(["viewer.availability.schedule", { scheduleId: defaultScheduleId }], {
-      enabled: router.isReady,
-    });
+    queryAvailability = trpc.viewer.availability.schedule.get.useQuery(
+      { scheduleId: defaultScheduleId },
+      {
+        enabled: router.isReady,
+      }
+    );
   }
 
   const availabilityForm = useForm({
@@ -43,8 +45,8 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
       nextStep();
     },
   };
-  const createSchedule = trpc.useMutation("viewer.availability.schedule.create", mutationOptions);
-  const updateSchedule = trpc.useMutation("viewer.availability.schedule.update", mutationOptions);
+  const createSchedule = trpc.viewer.availability.schedule.create.useMutation(mutationOptions);
+  const updateSchedule = trpc.viewer.availability.schedule.update.useMutation(mutationOptions);
   return (
     <Form
       className="w-full bg-white text-black dark:bg-opacity-5 dark:text-white"

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -6,10 +6,7 @@ import { useForm } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components";
-import { TextArea } from "@calcom/ui/components/form";
-import { showToast } from "@calcom/ui/v2";
-import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
+import { Button, ImageUploader, showToast, TextArea } from "@calcom/ui";
 
 import { AvatarSSR } from "@components/ui/AvatarSSR";
 
@@ -32,17 +29,17 @@ const UserProfile = (props: IUserProfile) => {
     handleSubmit,
     formState: { errors },
   } = useForm<FormData>({ defaultValues: { bio: user?.bio || "" } });
-  const { data: eventTypes } = trpc.useQuery(["viewer.eventTypes.list"]);
+  const { data: eventTypes } = trpc.viewer.eventTypes.list.useQuery();
   const [imageSrc, setImageSrc] = useState<string>(user?.avatar || "");
   const utils = trpc.useContext();
   const router = useRouter();
-  const createEventType = trpc.useMutation("viewer.eventTypes.create");
+  const createEventType = trpc.viewer.eventTypes.create.useMutation();
 
-  const mutation = trpc.useMutation("viewer.updateProfile", {
+  const mutation = trpc.viewer.updateProfile.useMutation({
     onSuccess: async (_data, context) => {
       if (context.avatar) {
         showToast(t("your_user_profile_updated_successfully"), "success");
-        await utils.refetchQueries(["viewer.me"]);
+        await utils.viewer.me.refetch();
       } else {
         try {
           if (eventTypes?.length === 0) {
@@ -56,7 +53,7 @@ const UserProfile = (props: IUserProfile) => {
           console.error(error);
         }
 
-        await utils.refetchQueries(["viewer.me"]);
+        await utils.viewer.me.refetch();
         router.push("/");
       }
     },

apps/web/components/getting-started/steps-views/UserSettings.tsx

@@ -1,13 +1,12 @@
 import { ArrowRightIcon } from "@heroicons/react/outline";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components/button";
-import TimezoneSelect from "@calcom/ui/form/TimezoneSelect";
+import { Button, TimezoneSelect } from "@calcom/ui";
 
 import { UsernameAvailability } from "@components/ui/UsernameAvailability";
 
@@ -36,13 +35,13 @@ const UserSettings = (props: IUserSettingsProps) => {
 
   const utils = trpc.useContext();
   const onSuccess = async () => {
-    await utils.invalidateQueries(["viewer.me"]);
+    await utils.viewer.me.invalidate();
     nextStep();
   };
-  const mutation = trpc.useMutation("viewer.updateProfile", {
+  const mutation = trpc.viewer.updateProfile.useMutation({
     onSuccess: onSuccess,
   });
-  const { data: stripeCustomer } = trpc.useQuery(["viewer.stripeCustomer"]);
+  const { data: stripeCustomer } = trpc.viewer.stripeCustomer.useQuery();
   const paymentRequired = stripeCustomer?.isPremium ? !stripeCustomer?.paidForPremium : false;
   const onSubmit = handleSubmit((data) => {
     if (paymentRequired) {

apps/web/components/integrations/CalendarListContainer.tsx

@@ -1,290 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import { Fragment } from "react";
-
-import { InstallAppButton } from "@calcom/app-store/components";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { inferQueryOutput, trpc } from "@calcom/trpc/react";
-import { Alert } from "@calcom/ui/Alert";
-import Button from "@calcom/ui/Button";
-import { List } from "@calcom/ui/List";
-import { ShellSubHeading } from "@calcom/ui/Shell";
-import Switch from "@calcom/ui/Switch";
-import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-import { QueryCell } from "@lib/QueryCell";
-
-import AdditionalCalendarSelector from "@components/AdditionalCalendarSelector";
-import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
-
-import DisconnectIntegration from "./DisconnectIntegration";
-import IntegrationListItem from "./IntegrationListItem";
-import SubHeadingTitleWithConnections from "./SubHeadingTitleWithConnections";
-
-type Props = {
-  onChanged: () => unknown | Promise<unknown>;
-  fromOnboarding?: boolean;
-};
-
-function CalendarSwitch(props: {
-  type: string;
-  externalId: string;
-  title: string;
-  defaultSelected: boolean;
-}) {
-  const utils = trpc.useContext();
-
-  const mutation = useMutation<
-    unknown,
-    unknown,
-    {
-      isOn: boolean;
-    }
-  >(
-    async ({ isOn }) => {
-      const body = {
-        integration: props.type,
-        externalId: props.externalId,
-      };
-      if (isOn) {
-        const res = await fetch("/api/availability/calendar", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(body),
-        });
-        if (!res.ok) {
-          throw new Error("Something went wrong");
-        }
-      } else {
-        const res = await fetch("/api/availability/calendar", {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(body),
-        });
-
-        if (!res.ok) {
-          throw new Error("Something went wrong");
-        }
-      }
-    },
-    {
-      async onSettled() {
-        await utils.invalidateQueries(["viewer.integrations"]);
-      },
-      onError() {
-        showToast(`Something went wrong when toggling "${props.title}""`, "error");
-      },
-    }
-  );
-  return (
-    <div className="py-1">
-      <Switch
-        key={props.externalId}
-        name="enabled"
-        label={props.title}
-        defaultChecked={props.defaultSelected}
-        onCheckedChange={(isOn: boolean) => {
-          mutation.mutate({ isOn });
-        }}
-      />
-    </div>
-  );
-}
-
-function CalendarList(props: Props) {
-  const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: false }]);
-
-  return (
-    <QueryCell
-      query={query}
-      success={({ data }) => (
-        <List>
-          {data.items.map((item) => (
-            <IntegrationListItem
-              name={item.name}
-              slug={item.slug}
-              key={item.title}
-              title={item.title}
-              logo={item.logo}
-              description={item.description}
-              actions={
-                <InstallAppButton
-                  type={item.type}
-                  render={(buttonProps) => (
-                    <Button color="secondary" {...buttonProps}>
-                      {t("connect")}
-                    </Button>
-                  )}
-                  onChanged={() => props.onChanged()}
-                />
-              }
-            />
-          ))}
-        </List>
-      )}
-    />
-  );
-}
-
-function ConnectedCalendarsList(props: Props) {
-  const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.connectedCalendars"], { suspense: true });
-  const { fromOnboarding } = props;
-  return (
-    <QueryCell
-      query={query}
-      empty={() => null}
-      success={({ data }) => {
-        if (!data.connectedCalendars.length) {
-          return null;
-        }
-        return (
-          <List>
-            {data.connectedCalendars.map((item) => (
-              <Fragment key={item.credentialId}>
-                {item.calendars ? (
-                  <IntegrationListItem
-                    slug={item.integration.slug}
-                    title={item.integration.title}
-                    logo={item.integration.logo}
-                    description={item.primary?.externalId || "No external Id"}
-                    actions={
-                      <DisconnectIntegration
-                        id={item.credentialId}
-                        externalId={item.primary?.externalId}
-                        render={(btnProps) => (
-                          <Button {...btnProps} color="warn" data-testid="integration-connection-button">
-                            {t("disconnect")}
-                          </Button>
-                        )}
-                        onOpenChange={props.onChanged}
-                      />
-                    }>
-                    {!fromOnboarding && (
-                      <>
-                        <p className="px-4 pt-4 text-sm text-neutral-500">{t("toggle_calendars_conflict")}</p>
-                        <ul className="space-y-2 p-4">
-                          {item.calendars.map((cal) => (
-                            <CalendarSwitch
-                              key={cal.externalId}
-                              externalId={cal.externalId}
-                              title={cal.name || "Nameless calendar"}
-                              type={item.integration.type}
-                              defaultSelected={cal.isSelected}
-                            />
-                          ))}
-                        </ul>
-                      </>
-                    )}
-                  </IntegrationListItem>
-                ) : (
-                  <Alert
-                    severity="warning"
-                    title={t("something_went_wrong")}
-                    message={t("calendar_error")}
-                    actions={
-                      <DisconnectIntegration
-                        id={item.credentialId}
-                        render={(btnProps) => (
-                          <Button {...btnProps} color="warn" data-testid="integration-connection-button">
-                            Disconnect
-                          </Button>
-                        )}
-                        onOpenChange={() => props.onChanged()}
-                      />
-                    }
-                  />
-                )}
-              </Fragment>
-            ))}
-          </List>
-        );
-      }}
-    />
-  );
-}
-
-export function CalendarListContainer(props: {
-  heading?: boolean;
-  items?: inferQueryOutput<"viewer.integrations">["items"];
-  fromOnboarding?: boolean;
-}) {
-  const { t } = useLocale();
-  const { heading = true, fromOnboarding } = props;
-  const utils = trpc.useContext();
-  const onChanged = () =>
-    Promise.allSettled([
-      utils.invalidateQueries(["viewer.integrations", { variant: "calendar", onlyInstalled: true }], {
-        exact: true,
-      }),
-      utils.invalidateQueries(["viewer.connectedCalendars"]),
-    ]);
-  const query = trpc.useQuery(["viewer.connectedCalendars"]);
-  const installedCalendars = trpc.useQuery([
-    "viewer.integrations",
-    { variant: "calendar", onlyInstalled: true },
-  ]);
-  const mutation = trpc.useMutation("viewer.setDestinationCalendar");
-  return (
-    <QueryCell
-      query={query}
-      customLoader={<SkeletonLoader className="mt-10" />}
-      success={({ data }) => {
-        return (
-          <>
-            {(!!data.connectedCalendars.length || !!installedCalendars.data?.items.length) && (
-              <>
-                {heading && (
-                  <ShellSubHeading
-                    className="mt-10 mb-0"
-                    title={
-                      <SubHeadingTitleWithConnections
-                        title="Calendars"
-                        numConnections={data.connectedCalendars.length}
-                      />
-                    }
-                    subtitle={t("configure_how_your_event_types_interact")}
-                    actions={
-                      <div className="flex flex-col xl:flex-row xl:space-x-5">
-                        <div className="sm:min-w-80 block max-w-full">
-                          <DestinationCalendarSelector
-                            onChange={mutation.mutate}
-                            isLoading={mutation.isLoading}
-                            value={data.destinationCalendar?.externalId}
-                          />
-                        </div>
-
-                        {!!data.connectedCalendars.length && (
-                          <div className="sm:min-w-80 inline max-w-full">
-                            <AdditionalCalendarSelector isLoading={mutation.isLoading} />
-                          </div>
-                        )}
-                      </div>
-                    }
-                  />
-                )}
-                <ConnectedCalendarsList onChanged={onChanged} fromOnboarding={fromOnboarding} />
-              </>
-            )}
-            {fromOnboarding && (
-              <>
-                {!!query.data?.connectedCalendars.length && (
-                  <ShellSubHeading
-                    className="mt-4"
-                    title={<SubHeadingTitleWithConnections title={t("connect_additional_calendar")} />}
-                  />
-                )}
-                <CalendarList onChanged={onChanged} />
-              </>
-            )}
-          </>
-        );
-      }}
-    />
-  );
-}

apps/web/components/integrations/DisconnectIntegration.tsx

@@ -1,57 +0,0 @@
-import { useState } from "react";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import { ButtonBaseProps } from "@calcom/ui/Button";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog } from "@calcom/ui/Dialog";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-export default function DisconnectIntegration(props: {
-  /** Integration credential id */
-  id: number;
-  externalId?: string;
-  render: (renderProps: ButtonBaseProps) => JSX.Element;
-  onOpenChange: (isOpen: boolean) => unknown | Promise<unknown>;
-}) {
-  const { id, externalId = "" } = props;
-  const { t } = useLocale();
-  const [modalOpen, setModalOpen] = useState(false);
-
-  const mutation = trpc.useMutation("viewer.deleteCredential", {
-    onSettled: async () => {
-      await props.onOpenChange(modalOpen);
-    },
-    onSuccess: () => {
-      showToast("Integration deleted successfully", "success");
-      setModalOpen(false);
-    },
-    onError: () => {
-      throw new Error("Something went wrong");
-    },
-  });
-
-  return (
-    <>
-      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <ConfirmationDialogContent
-          variety="danger"
-          title={t("remove_app")}
-          confirmBtnText={t("yes_remove_app")}
-          cancelBtnText="Cancel"
-          onConfirm={() => {
-            mutation.mutate({ id, externalId });
-          }}>
-          {t("are_you_sure_you_want_to_remove_this_app")}
-        </ConfirmationDialogContent>
-      </Dialog>
-      {props.render({
-        onClick() {
-          setModalOpen(true);
-        },
-        disabled: modalOpen,
-        loading: mutation.isLoading,
-      })}
-    </>
-  );
-}

apps/web/components/integrations/DisconnectStripeIntegration.tsx

@@ -1,69 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import { useState } from "react";
-
-import { ButtonBaseProps } from "@calcom/ui/Button";
-import { Dialog } from "@calcom/ui/Dialog";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-import DeleteStripeDialogContent from "@components/dialog/DeleteStripeDialogContent";
-
-export default function DisconnectStripeIntegration(props: {
-  /** Integration credential id */
-  id: number;
-  render: (renderProps: ButtonBaseProps) => JSX.Element;
-  onOpenChange: (isOpen: boolean) => unknown | Promise<unknown>;
-}) {
-  const [modalOpen, setModalOpen] = useState(false);
-  const mutation = useMutation(
-    async (action: string) => {
-      const res = await fetch("/api/integrations", {
-        method: "DELETE",
-        body: JSON.stringify({ id: props.id, action }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-      if (!res.ok) {
-        throw new Error("Something went wrong");
-      }
-      return res.json();
-    },
-    {
-      async onSettled() {
-        await props.onOpenChange(modalOpen);
-      },
-      onSuccess(data) {
-        showToast(data.message, "success");
-        setModalOpen(false);
-      },
-    }
-  );
-  return (
-    <>
-      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <DeleteStripeDialogContent
-          variety="warning"
-          title="Disconnect Stripe Integration"
-          cancelAllBookingsBtnText="Cancel all bookings"
-          removeBtnText="Remove payment"
-          cancelBtnText="Cancel"
-          onConfirm={() => {
-            mutation.mutate("cancel");
-          }}
-          onRemove={() => {
-            mutation.mutate("remove");
-          }}>
-          If you have unpaid and unconfirmed bookings, you must choose to cancel them or remove the required
-          payment field.
-        </DeleteStripeDialogContent>
-      </Dialog>
-      {props.render({
-        onClick() {
-          setModalOpen(true);
-        },
-        disabled: modalOpen,
-        loading: mutation.isLoading,
-      })}
-    </>
-  );
-}

apps/web/components/integrations/IntegrationListItem.tsx

@@ -1,39 +0,0 @@
-import Link from "next/link";
-import { ReactNode } from "react";
-
-import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/List";
-
-import classNames from "@lib/classNames";
-
-function IntegrationListItem(props: {
-  imageSrc?: string;
-  slug: string;
-  name?: string;
-  title?: string;
-  description: string;
-  actions?: ReactNode;
-  children?: ReactNode;
-  logo: string;
-}): JSX.Element {
-  const title = props.name || props.title;
-  return (
-    <ListItem expanded={!!props.children} className={classNames("flex-col")}>
-      <div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
-        {
-          // eslint-disable-next-line @next/next/no-img-element
-          props.logo && <img className="h-10 w-10" src={props.logo} alt={title} />
-        }
-        <div className="flex-grow truncate pl-2">
-          <ListItemTitle component="h3">
-            <Link href={"/apps/" + props.slug}>{props.name || title}</Link>
-          </ListItemTitle>
-          <ListItemText component="p">{props.description}</ListItemText>
-        </div>
-        <div>{props.actions}</div>
-      </div>
-      {props.children && <div className="w-full border-t border-gray-200">{props.children}</div>}
-    </ListItem>
-  );
-}
-
-export default IntegrationListItem;

apps/web/components/integrations/SubHeadingTitleWithConnections.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-import { Badge } from "@calcom/ui/components/badge";
+import { Badge } from "@calcom/ui";
 
 function pluralize(opts: { num: number; plural: string; singular: string }) {
   if (opts.num === 0) {

apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx

@@ -2,7 +2,7 @@ import { EventTypeCustomInput, EventTypeCustomInputType } from "@prisma/client";
 import React, { FC } from "react";
 import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
 
-import Button from "@calcom/ui/Button";
+import { Button } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 

apps/web/components/security/ChangePasswordSection.tsx

@@ -1,9 +1,8 @@
-import React, { SyntheticEvent, useState } from "react";
+import { SyntheticEvent, useState } from "react";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Button, showToast } from "@calcom/ui";
 
 const ChangePasswordSection = () => {
   const [oldPassword, setOldPassword] = useState("");

apps/web/components/security/DisableTwoFactorModal.tsx

@@ -3,10 +3,7 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogContent } from "@calcom/ui/Dialog";
-import { PasswordField } from "@calcom/ui/components/form";
-import { Form, Label } from "@calcom/ui/form/fields";
+import { Button, Dialog, DialogContent, Form, Label, PasswordField } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
 

apps/web/components/security/DisableUserImpersonation.tsx

@@ -1,21 +1,19 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import { Badge } from "@calcom/ui/components/badge";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Badge, Button, showToast } from "@calcom/ui";
 
 const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonation: boolean }) => {
   const utils = trpc.useContext();
 
   const { t } = useLocale();
 
-  const mutation = trpc.useMutation("viewer.updateProfile", {
+  const mutation = trpc.viewer.updateProfile.useMutation({
     onSuccess: async () => {
       showToast(t("your_user_profile_updated_successfully"), "success");
-      await utils.invalidateQueries(["viewer.me"]);
+      await utils.viewer.me.invalidate();
     },
     async onSettled() {
-      await utils.invalidateQueries(["viewer.public.i18n"]);
+      await utils.viewer.public.i18n.invalidate();
     },
   });
 

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -3,9 +3,7 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogContent } from "@calcom/ui/Dialog";
-import { Form } from "@calcom/ui/components/form";
+import { Button, Dialog, DialogContent, Form } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
 

apps/web/components/security/TwoFactorAuthSection.tsx

@@ -1,7 +1,6 @@
 import { useState } from "react";
 
-import Button from "@calcom/ui/Button";
-import { Badge } from "@calcom/ui/components/badge";
+import { Badge, Button } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 

apps/web/components/security/TwoFactorModalHeader.tsx

@@ -1,6 +1,4 @@
-import React from "react";
-
-import { ShieldCheckIcon } from "@calcom/ui/Icon";
+import { ShieldCheckIcon } from "@calcom/ui";
 
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   return (

apps/web/components/settings/CalendarSwitch.tsx

@@ -2,10 +2,7 @@ import { useMutation } from "@tanstack/react-query";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Badge } from "@calcom/ui/components/badge";
-import Switch from "@calcom/ui/v2/core/Switch";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Badge, Icon, showToast, Switch } from "@calcom/ui";
 
 export function CalendarSwitch(props: {
   type: string;
@@ -57,7 +54,7 @@ export function CalendarSwitch(props: {
     },
     {
       async onSettled() {
-        await utils.invalidateQueries(["viewer.integrations"]);
+        await utils.viewer.integrations.invalidate();
       },
       onError() {
         showToast(`Something went wrong when toggling "${props.title}""`, "error");

apps/web/components/settings/DisableTwoFactorModal.tsx

@@ -3,10 +3,7 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui/components/button";
-import { Form, Label } from "@calcom/ui/components/form";
-import { PasswordField } from "@calcom/ui/components/form";
-import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
+import { Button, Dialog, DialogContent, Form, Label, PasswordField } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
 

apps/web/components/settings/EnableTwoFactorModal.tsx

@@ -3,9 +3,7 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui/components/button";
-import { Form, TextField } from "@calcom/ui/components/form";
-import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
+import { Button, Dialog, DialogContent, Form, TextField } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
 

apps/web/components/team/DisableTeamImpersonation.tsx

@@ -1,62 +0,0 @@
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import { Badge } from "@calcom/ui/components/badge";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-/** @deprecated Use `packages/features/ee/teams/components/DisableTeamImpersonation.tsx` */
-const DisableTeamImpersonation = ({ teamId, memberId }: { teamId: number; memberId: number }) => {
-  const { t } = useLocale();
-
-  const utils = trpc.useContext();
-
-  const query = trpc.useQuery(["viewer.teams.getMembershipbyUser", { teamId, memberId }]);
-
-  const mutation = trpc.useMutation("viewer.teams.updateMembership", {
-    onSuccess: async () => {
-      showToast(t("your_user_profile_updated_successfully"), "success");
-      await utils.invalidateQueries(["viewer.teams.getMembershipbyUser"]);
-    },
-    async onSettled() {
-      await utils.invalidateQueries(["viewer.public.i18n"]);
-    },
-  });
-  if (query.isLoading) return <></>;
-
-  return (
-    <>
-      <h3 className="font-cal mt-7 pb-4 text-xl leading-6 text-gray-900">{t("settings")}</h3>
-      <div className="-mx-0 rounded-sm border border-neutral-200 bg-white px-4 pb-4 sm:px-6">
-        <div className="flex flex-col justify-between pt-4 sm:flex-row">
-          <div>
-            <div className="flex flex-row items-center">
-              <h2 className="font-cal font-bold leading-6 text-gray-900">
-                {t("user_impersonation_heading")}
-              </h2>
-              <Badge
-                className="ml-2 text-xs"
-                variant={!query.data?.disableImpersonation ? "success" : "gray"}>
-                {!query.data?.disableImpersonation ? t("enabled") : t("disabled")}
-              </Badge>
-            </div>
-            <p className="text-sm text-gray-700">{t("team_impersonation_description")}</p>
-          </div>
-          <div className="mt-5 sm:mt-0 sm:self-center">
-            <Button
-              type="submit"
-              color="secondary"
-              onClick={() =>
-                !query.data?.disableImpersonation
-                  ? mutation.mutate({ teamId, memberId, disableImpersonation: true })
-                  : mutation.mutate({ teamId, memberId, disableImpersonation: false })
-              }>
-              {!query.data?.disableImpersonation ? t("disable") : t("enable")}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default DisableTeamImpersonation;

apps/web/components/team/MemberChangeRoleModal.tsx

@@ -1,115 +0,0 @@
-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 ModalContainer from "@components/ui/ModalContainer";
-import Select from "@components/ui/form/Select";
-
-type MembershipRoleOption = {
-  label: string;
-  value: MembershipRole;
-};
-
-/** @deprecated Use `packages/features/ee/teams/components/MemberChangeRoleModal.tsx` */
-export default function MemberChangeRoleModal(props: {
-  isOpen: boolean;
-  currentMember: MembershipRole;
-  memberId: number;
-  teamId: number;
-  initialRole: MembershipRole;
-  onExit: () => void;
-}) {
-  const { t } = useLocale();
-
-  const options = useMemo(() => {
-    return [
-      {
-        label: t("member"),
-        value: MembershipRole.MEMBER,
-      },
-      {
-        label: t("admin"),
-        value: MembershipRole.ADMIN,
-      },
-      {
-        label: t("owner"),
-        value: MembershipRole.OWNER,
-      },
-    ].filter(({ value }) => value !== MembershipRole.OWNER || props.currentMember === MembershipRole.OWNER);
-  }, [t, props.currentMember]);
-
-  const [role, setRole] = useState<MembershipRoleOption>(
-    options.find((option) => option.value === props.initialRole) || {
-      label: t("member"),
-      value: MembershipRole.MEMBER,
-    }
-  );
-  const [errorMessage, setErrorMessage] = useState("");
-  const utils = trpc.useContext();
-
-  const changeRoleMutation = trpc.useMutation("viewer.teams.changeMemberRole", {
-    async onSuccess() {
-      await utils.invalidateQueries(["viewer.teams.get"]);
-      props.onExit();
-    },
-    async onError(err) {
-      setErrorMessage(err.message);
-    },
-  });
-
-  function changeRole(e: SyntheticEvent) {
-    e.preventDefault();
-
-    changeRoleMutation.mutate({
-      teamId: props.teamId,
-      memberId: props.memberId,
-      role: role.value,
-    });
-  }
-  return (
-    <ModalContainer isOpen={props.isOpen} onExit={props.onExit}>
-      <>
-        <div className="mb-4 sm:flex sm:items-start">
-          <div className="text-center sm:text-left">
-            <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
-              {t("change_member_role")}
-            </h3>
-          </div>
-        </div>
-        <form onSubmit={changeRole}>
-          <div className="mb-4">
-            <label className="mb-2 block text-sm font-medium tracking-wide text-gray-700" htmlFor="role">
-              {t("role")}
-            </label>
-            {/*<option value="OWNER">{t("owner")}</option> - needs dialog to confirm change of ownership */}
-            <Select
-              isSearchable={false}
-              options={options}
-              value={role}
-              onChange={(option) => option && setRole(option)}
-              id="role"
-              className="mt-1 block w-full rounded-md border-gray-300 text-sm"
-            />
-          </div>
-          {errorMessage && (
-            <p className="text-sm text-red-700">
-              <span className="font-bold">Error: </span>
-              {errorMessage}
-            </p>
-          )}
-          <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <Button type="submit" color="primary" className="ltr:ml-2 rtl:mr-2">
-              {t("save")}
-            </Button>
-            <Button type="button" color="secondary" onClick={props.onExit}>
-              {t("cancel")}
-            </Button>
-          </div>
-        </form>
-      </>
-    </ModalContainer>
-  );
-}

apps/web/components/team/MemberInvitationModal.tsx

@@ -1,159 +0,0 @@
-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 { Icon } from "@calcom/ui/Icon";
-import { TextField } from "@calcom/ui/form/fields";
-
-import { useLocale } from "@lib/hooks/useLocale";
-
-import Select from "@components/ui/form/Select";
-
-type MemberInvitationModalProps = {
-  isOpen: boolean;
-  team: TeamWithMembers | null;
-  currentMember: MembershipRole;
-  onExit: () => void;
-};
-
-type MembershipRoleOption = {
-  value: MembershipRole;
-  label?: string;
-};
-
-const _options: MembershipRoleOption[] = [{ value: "MEMBER" }, { value: "ADMIN" }, { value: "OWNER" }];
-
-/** @deprecated Use `packages/features/ee/teams/components/MemberInvitationModal.tsx` */
-export default function MemberInvitationModal(props: MemberInvitationModalProps) {
-  const [errorMessage, setErrorMessage] = useState("");
-  const { t, i18n } = useLocale();
-  const utils = trpc.useContext();
-
-  const options = useMemo(() => {
-    _options.forEach((option, i) => {
-      _options[i].label = t(option.value.toLowerCase());
-    });
-    return _options;
-  }, [t]);
-
-  const inviteMemberMutation = trpc.useMutation("viewer.teams.inviteMember", {
-    async onSuccess() {
-      await utils.invalidateQueries(["viewer.teams.get"]);
-      props.onExit();
-    },
-    async onError(err) {
-      setErrorMessage(err.message);
-    },
-  });
-
-  function inviteMember(e: SyntheticEvent) {
-    e.preventDefault();
-    if (!props.team) return;
-
-    const target = e.target as typeof e.target & {
-      elements: {
-        role: { value: MembershipRole };
-        inviteUser: { value: string };
-        sendInviteEmail: { checked: boolean };
-      };
-    };
-
-    inviteMemberMutation.mutate({
-      teamId: props.team.id,
-      language: i18n.language,
-      role: target.elements["role"].value,
-      usernameOrEmail: target.elements["inviteUser"].value,
-      sendEmailInvitation: target.elements["sendInviteEmail"].checked,
-    });
-  }
-
-  return (
-    <Dialog open={props.isOpen} onOpenChange={props.onExit}>
-      <DialogContent>
-        <div className="mb-4 sm:flex sm:items-start">
-          <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-            <Icon.FiUser className="text-brandcontrast h-6 w-6" />
-          </div>
-          <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-            <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
-              {t("invite_new_member")}
-            </h3>
-            <div>
-              <p className="text-sm text-gray-400">{t("invite_new_team_member")}</p>
-            </div>
-          </div>
-        </div>
-        <form onSubmit={inviteMember}>
-          <div className="space-y-4">
-            <TextField
-              label={t("email_or_username")}
-              id="inviteUser"
-              name="inviteUser"
-              placeholder="email@example.com"
-              required
-            />
-            <div>
-              <label className="mb-1 block text-sm font-medium tracking-wide text-gray-700" htmlFor="role">
-                {t("role")}
-              </label>
-              <Select
-                defaultValue={options[0]}
-                options={props.currentMember !== MembershipRole.OWNER ? options.slice(0, 2) : options}
-                id="role"
-                name="role"
-                className="mt-1 block w-full rounded-sm border-gray-300 text-sm"
-              />
-            </div>
-            <div className="relative flex items-start">
-              <div className="flex h-5 items-center">
-                <input
-                  type="checkbox"
-                  name="sendInviteEmail"
-                  defaultChecked
-                  id="sendInviteEmail"
-                  className="rounded-sm border-gray-300 text-sm text-black"
-                />
-              </div>
-              <div className="text-sm ltr:ml-2 rtl:mr-2">
-                <label htmlFor="sendInviteEmail" className="font-medium text-gray-700">
-                  {t("send_invite_email")}
-                </label>
-              </div>
-            </div>
-            <div className="flex flex-row rounded-sm bg-gray-50 px-3 py-2">
-              <Icon.FiInfo className="h-5 w-5 flex-shrink-0 fill-gray-400" aria-hidden="true" />
-              <span className="ml-2 text-sm leading-tight text-gray-500">
-                Note: This will cost an extra seat ($12/m) on your subscription if this invitee does not have
-                a pro account.{" "}
-                <a href="#" className="underline">
-                  Learn More
-                </a>
-              </span>
-            </div>
-          </div>
-          {errorMessage && (
-            <p className="text-sm text-red-700">
-              <span className="font-bold">Error: </span>
-              {errorMessage}
-            </p>
-          )}
-          <DialogFooter>
-            <Button type="button" color="secondary" onClick={props.onExit}>
-              {t("cancel")}
-            </Button>
-            <Button
-              type="submit"
-              color="primary"
-              className="ltr:ml-2 rtl:mr-2"
-              data-testid="invite-new-member-button">
-              {t("invite")}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/web/components/team/MemberList.tsx

@@ -1,22 +0,0 @@
-import { inferQueryOutput } from "@calcom/trpc/react";
-
-import MemberListItem from "./MemberListItem";
-
-interface Props {
-  team: inferQueryOutput<"viewer.teams.get">;
-  members: inferQueryOutput<"viewer.teams.get">["members"];
-}
-
-export default function MemberList(props: Props) {
-  if (!props.members.length) return <></>;
-
-  return (
-    <div>
-      <ul className="-mx-4 mb-2 divide-y divide-gray-200 rounded border bg-white px-4 sm:mx-0 sm:px-4">
-        {props.members?.map((member) => (
-          <MemberListItem key={member.id} member={member} team={props.team} />
-        ))}
-      </ul>
-    </div>
-  );
-}

apps/web/components/team/MemberListItem.tsx

@@ -1,260 +0,0 @@
-import { MembershipRole } from "@prisma/client";
-import { signIn } from "next-auth/react";
-import Link from "next/link";
-import { useState } from "react";
-
-import TeamAvailabilityModal from "@calcom/features/ee/teams/components/TeamAvailabilityModal";
-import { WEBAPP_URL } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { inferQueryOutput, trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
-import Dropdown, {
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-import { Tooltip } from "@calcom/ui/Tooltip";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-import useCurrentUserId from "@lib/hooks/useCurrentUserId";
-
-import Avatar from "@components/ui/Avatar";
-import ModalContainer from "@components/ui/ModalContainer";
-
-import MemberChangeRoleModal from "./MemberChangeRoleModal";
-import TeamPill, { TeamRole } from "./TeamPill";
-
-interface Props {
-  team: inferQueryOutput<"viewer.teams.get">;
-  member: inferQueryOutput<"viewer.teams.get">["members"][number];
-}
-
-/** @deprecated Use `packages/features/ee/teams/components/MemberListItem.tsx` */
-export default function MemberListItem(props: Props) {
-  const { t } = useLocale();
-
-  const utils = trpc.useContext();
-  const [showChangeMemberRoleModal, setShowChangeMemberRoleModal] = useState(false);
-  const [showTeamAvailabilityModal, setShowTeamAvailabilityModal] = useState(false);
-  const [showImpersonateModal, setShowImpersonateModal] = useState(false);
-
-  const removeMemberMutation = trpc.useMutation("viewer.teams.removeMember", {
-    async onSuccess() {
-      await utils.invalidateQueries(["viewer.teams.get"]);
-      showToast(t("success"), "success");
-    },
-    async onError(err) {
-      showToast(err.message, "error");
-    },
-  });
-
-  const ownersInTeam = () => {
-    const { members } = props.team;
-    const owners = members.filter((member) => member["role"] === MembershipRole.OWNER && member["accepted"]);
-    return owners.length;
-  };
-
-  const currentUserId = useCurrentUserId();
-
-  const name =
-    props.member.name ||
-    (() => {
-      const emailName = props.member.email.split("@")[0];
-      return emailName.charAt(0).toUpperCase() + emailName.slice(1);
-    })();
-
-  const removeMember = () =>
-    removeMemberMutation.mutate({ teamId: props.team?.id, memberId: props.member.id });
-
-  return (
-    <li className="divide-y">
-      <div className="my-4 flex justify-between">
-        <div className="flex w-full flex-col justify-between sm:flex-row">
-          <div className="flex">
-            <Avatar
-              imageSrc={WEBAPP_URL + "/" + props.member.username + "/avatar.png"}
-              alt={name || ""}
-              className="h-9 w-9 rounded-full"
-            />
-            <div className="ml-3 inline-block">
-              <span className="text-sm font-bold text-neutral-700">{name}</span>
-              <span
-                className="-mt-1 block text-xs text-gray-400"
-                data-testid="member-email"
-                data-email={props.member.email}>
-                {props.member.email}
-              </span>
-            </div>
-          </div>
-          <div className="mt-2 flex ltr:mr-2 rtl:ml-2 sm:mt-0 sm:justify-center">
-            {/* Tooltip doesn't show... WHY????? */}
-            {props.member.isMissingSeat && (
-              <Tooltip side="top" content={t("hidden_team_member_message")}>
-                <TeamPill color="red" text={t("hidden")} />
-              </Tooltip>
-            )}
-            {!props.member.accepted && <TeamPill color="yellow" text={t("invitee")} />}
-            {props.member.role && <TeamRole role={props.member.role} />}
-          </div>
-        </div>
-        <div className="flex space-x-2">
-          <Tooltip side="top" content={t("team_view_user_availability")}>
-            <Button
-              // Disabled buttons don't trigger Tooltips
-              title={
-                props.member.accepted
-                  ? t("team_view_user_availability")
-                  : t("team_view_user_availability_disabled")
-              }
-              disabled={!props.member.accepted}
-              onClick={() => (props.member.accepted ? setShowTeamAvailabilityModal(true) : null)}
-              color="minimal"
-              size="icon">
-              <Icon.FiClock className="h-5 w-5 group-hover:text-gray-800" />
-            </Button>
-          </Tooltip>
-          <Dropdown>
-            <DropdownMenuTrigger asChild>
-              <Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem>
-                <Link href={"/" + props.member.username}>
-                  <a target="_blank">
-                    <Button color="minimal" StartIcon={Icon.FiExternalLink} className="w-full font-normal">
-                      {t("view_public_page")}
-                    </Button>
-                  </a>
-                </Link>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator className="h-px bg-gray-200" />
-              {((props.team.membership.role === MembershipRole.OWNER &&
-                (props.member.role !== MembershipRole.OWNER ||
-                  ownersInTeam() > 1 ||
-                  props.member.id !== currentUserId)) ||
-                (props.team.membership.role === MembershipRole.ADMIN &&
-                  props.member.role !== MembershipRole.OWNER)) && (
-                <>
-                  <DropdownMenuItem>
-                    <Button
-                      onClick={() => setShowChangeMemberRoleModal(true)}
-                      color="minimal"
-                      StartIcon={Icon.FiEdit2}
-                      className="w-full flex-shrink-0 font-normal">
-                      {t("edit_role")}
-                    </Button>
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator className="h-px bg-gray-200" />
-                  {/* Only show impersonate box if - The user has impersonation enabled,
-                        They have accepted the team invite, and it is enabled for this instance */}
-                  {!props.member.disableImpersonation &&
-                    props.member.accepted &&
-                    process.env.NEXT_PUBLIC_TEAM_IMPERSONATION === "true" && (
-                      <>
-                        <DropdownMenuItem>
-                          <Button
-                            onClick={() => setShowImpersonateModal(true)}
-                            color="minimal"
-                            StartIcon={Icon.FiLock}
-                            className="w-full flex-shrink-0 font-normal">
-                            {t("impersonate")}
-                          </Button>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator className="h-px bg-gray-200" />
-                      </>
-                    )}
-                  <DropdownMenuItem>
-                    <Dialog>
-                      <DialogTrigger asChild>
-                        <Button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                          }}
-                          color="warn"
-                          StartIcon={Icon.FiUserMinus}
-                          className="w-full font-normal">
-                          {t("remove_member")}
-                        </Button>
-                      </DialogTrigger>
-                      <ConfirmationDialogContent
-                        variety="danger"
-                        title={t("remove_member")}
-                        confirmBtnText={t("confirm_remove_member")}
-                        onConfirm={removeMember}>
-                        {t("remove_member_confirmation_message")}
-                      </ConfirmationDialogContent>
-                    </Dialog>
-                  </DropdownMenuItem>
-                </>
-              )}
-            </DropdownMenuContent>
-          </Dropdown>
-        </div>
-      </div>
-      {showChangeMemberRoleModal && (
-        <MemberChangeRoleModal
-          isOpen={showChangeMemberRoleModal}
-          currentMember={props.team.membership.role}
-          teamId={props.team?.id}
-          memberId={props.member.id}
-          initialRole={props.member.role as MembershipRole}
-          onExit={() => setShowChangeMemberRoleModal(false)}
-        />
-      )}
-      {showImpersonateModal && props.member.username && (
-        <ModalContainer isOpen={showImpersonateModal} onExit={() => setShowImpersonateModal(false)}>
-          <>
-            <div className="mb-4 sm:flex sm:items-start">
-              <div className="text-center sm:text-left">
-                <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
-                  {t("impersonate")}
-                </h3>
-              </div>
-            </div>
-            <form
-              onSubmit={async (e) => {
-                e.preventDefault();
-                await signIn("impersonation-auth", {
-                  username: props.member.username,
-                  teamId: props.team.id,
-                });
-              }}>
-              <p className="mt-2 text-sm text-gray-500" id="email-description">
-                {t("impersonate_user_tip")}
-              </p>
-              <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                <Button type="submit" color="primary" className="ltr:ml-2 rtl:mr-2">
-                  {t("impersonate")}
-                </Button>
-                <Button type="button" color="secondary" onClick={() => setShowImpersonateModal(false)}>
-                  {t("cancel")}
-                </Button>
-              </div>
-            </form>
-          </>
-        </ModalContainer>
-      )}
-      {showTeamAvailabilityModal && (
-        <ModalContainer
-          wide
-          noPadding
-          isOpen={showTeamAvailabilityModal}
-          onExit={() => setShowTeamAvailabilityModal(false)}>
-          <TeamAvailabilityModal team={props.team} member={props.member} />
-          <div className="space-x-2 border-t py-5 rtl:space-x-reverse">
-            <Button onClick={() => setShowTeamAvailabilityModal(false)}>{t("done")}</Button>
-            {props.team.membership.role !== MembershipRole.MEMBER && (
-              <Link href={`/settings/teams/${props.team.id}/availability`} passHref>
-                <Button color="secondary">{t("Open Team Availability")}</Button>
-              </Link>
-            )}
-          </div>
-        </ModalContainer>
-      )}
-    </li>
-  );
-}

apps/web/components/team/TeamCreateModal.tsx

@@ -1,73 +0,0 @@
-import { useRef, useState } from "react";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui";
-import { Icon } from "@calcom/ui/Icon";
-import { Alert } from "@calcom/ui/v2/core/Alert";
-import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/v2/core/Dialog";
-
-interface Props {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export default function TeamCreate(props: Props) {
-  const { t } = useLocale();
-  const utils = trpc.useContext();
-  const [errorMessage, setErrorMessage] = useState<null | string>(null);
-  const nameRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
-
-  const createTeamMutation = trpc.useMutation("viewer.teams.create", {
-    onSuccess: () => {
-      utils.invalidateQueries(["viewer.teams.list"]);
-      props.onClose();
-    },
-    onError: (e) => {
-      setErrorMessage(e?.message || t("something_went_wrong"));
-    },
-  });
-
-  const createTeam = () => {
-    createTeamMutation.mutate({ name: nameRef?.current?.value });
-  };
-
-  return (
-    <>
-      <Dialog open={props.isOpen} onOpenChange={props.onClose}>
-        <DialogContent type="creation" actionText={t("create_new_team")} actionOnClick={createTeam}>
-          <div className="mb-4 sm:flex sm:items-start">
-            <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-              <Icon.FiUsers className="text-brandcontrast h-6 w-6" />
-            </div>
-            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
-                {t("create_new_team")}
-              </h3>
-              <div>
-                <p className="text-sm text-gray-400">{t("create_new_team_description")}</p>
-              </div>
-            </div>
-          </div>
-          <form>
-            <div className="mb-4">
-              <label htmlFor="name" className="block text-sm font-medium text-gray-700">
-                {t("name")}
-              </label>
-              <input
-                ref={nameRef}
-                type="text"
-                name="name"
-                id="name"
-                placeholder="Acme Inc."
-                required
-                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm"
-              />
-            </div>
-            {errorMessage && <Alert severity="error" title={errorMessage} />}
-          </form>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}

apps/web/components/team/TeamPill.tsx

@@ -1,37 +0,0 @@
-import { MembershipRole } from "@prisma/client";
-import classNames from "classnames";
-
-import { useLocale } from "@lib/hooks/useLocale";
-
-type PillColor = "blue" | "green" | "red" | "yellow";
-
-interface Props {
-  text: string;
-  color?: PillColor;
-}
-
-/** @deprecated Use `packages/features/ee/teams/components/TeamPill.tsx` */
-export default function TeamPill(props: Props) {
-  return (
-    <div
-      className={classNames("self-center rounded-md border px-3 py-1 text-xs capitalize ltr:mr-2 rtl:ml-2", {
-        "border-gray-200 bg-gray-50 text-gray-700": !props.color,
-        "border-blue-200 bg-blue-50 text-blue-700": props.color === "blue",
-        "border-red-200 bg-red-50 text-red-700": props.color === "red",
-        "border-yellow-200 bg-yellow-50 text-yellow-700": props.color === "yellow",
-        "border-green-200 bg-green-50 text-green-600": props.color === "green",
-      })}>
-      {props.text}
-    </div>
-  );
-}
-
-export function TeamRole(props: { role: MembershipRole }) {
-  const { t } = useLocale();
-  const keys: Record<MembershipRole, PillColor | undefined> = {
-    [MembershipRole.OWNER]: undefined,
-    [MembershipRole.ADMIN]: "red",
-    [MembershipRole.MEMBER]: "blue",
-  };
-  return <TeamPill text={t(props.role.toLowerCase())} color={keys[props.role]} />;
-}

apps/web/components/team/TeamSettings.tsx

@@ -4,11 +4,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { objectKeys } from "@calcom/lib/objectKeys";
 import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { trpc } from "@calcom/trpc/react";
-import { Alert } from "@calcom/ui/Alert";
-import Button from "@calcom/ui/Button";
-import { Icon } from "@calcom/ui/Icon";
-import { TextField } from "@calcom/ui/form/fields";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Alert, Button, Icon, showToast, TextField } from "@calcom/ui";
 
 import ImageUploader from "@components/ImageUploader";
 import SettingInputContainer from "@components/ui/SettingInputContainer";
@@ -27,13 +23,13 @@ export default function TeamSettings(props: Props) {
   const hasLogo = !!team?.logo;
 
   const utils = trpc.useContext();
-  const mutation = trpc.useMutation("viewer.teams.update", {
+  const mutation = trpc.viewer.teams.update.useMutation({
     onError: (err) => {
       setHasErrors(true);
       setErrorMessage(err.message);
     },
     async onSuccess() {
-      await utils.invalidateQueries(["viewer.teams.get"]);
+      await utils.viewer.teams.get.invalidate();
       showToast(t("your_team_updated_successfully"), "success");
       setHasErrors(false);
     },

apps/web/components/team/TeamSettingsRightSidebar.tsx

@@ -1,14 +1,10 @@
 import { MembershipRole } from "@prisma/client";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React from "react";
 
 import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { trpc } from "@calcom/trpc/react";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { ConfirmationDialogContent, Dialog, DialogTrigger, Icon, showToast } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
@@ -22,16 +18,16 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
 
   const permalink = `${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${props.team?.slug}`;
 
-  const deleteTeamMutation = trpc.useMutation("viewer.teams.delete", {
+  const deleteTeamMutation = trpc.viewer.teams.delete.useMutation({
     async onSuccess() {
-      await utils.invalidateQueries(["viewer.teams.get"]);
+      await utils.viewer.teams.get.invalidate();
       router.push(`/settings/teams`);
       showToast(t("your_team_updated_successfully"), "success");
     },
   });
-  const acceptOrLeaveMutation = trpc.useMutation("viewer.teams.acceptOrLeave", {
+  const acceptOrLeaveMutation = trpc.viewer.teams.acceptOrLeave.useMutation({
     onSuccess: () => {
-      utils.invalidateQueries(["viewer.teams.list"]);
+      utils.viewer.teams.list.invalidate();
       router.push(`/settings/teams`);
     },
   });

apps/web/components/team/UpgradeToFlexibleProModal.tsx

@@ -1,91 +0,0 @@
-import { useState } from "react";
-
-import { trpc } from "@calcom/trpc/react";
-import { Alert } from "@calcom/ui/Alert";
-import Button from "@calcom/ui/Button";
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogClose,
-  DialogFooter,
-  DialogHeader,
-} from "@calcom/ui/Dialog";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-import { useLocale } from "@lib/hooks/useLocale";
-
-interface Props {
-  teamId: number;
-}
-
-/** @deprecated Use `packages/features/ee/teams/components/UpgradeToFlexibleProModal.tsx` */
-export function UpgradeToFlexibleProModal(props: Props) {
-  const { t } = useLocale();
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const utils = trpc.useContext();
-  const { data } = trpc.useQuery(["viewer.teams.getTeamSeats", { teamId: props.teamId }], {
-    onError: (err) => {
-      setErrorMessage(err.message);
-    },
-  });
-  const mutation = trpc.useMutation(["viewer.teams.upgradeTeam"], {
-    onSuccess: (data) => {
-      // if the user does not already have a Stripe subscription, this wi
-      if (data?.url) {
-        window.location.href = data.url;
-      }
-      if (data?.success) {
-        utils.invalidateQueries(["viewer.teams.get"]);
-        showToast(t("team_upgraded_successfully"), "success");
-      }
-    },
-    onError: (err) => {
-      setErrorMessage(err.message);
-    },
-  });
-
-  return (
-    <Dialog
-      onOpenChange={() => {
-        setErrorMessage(null);
-      }}>
-      <DialogTrigger asChild>
-        <a className="cursor-pointer underline">Upgrade Now</a>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader title={t("Purchase missing seats")} />
-
-        <p className="-mt-4 text-sm text-gray-600">{t("changed_team_billing_info")}</p>
-        {data && (
-          <p className="mt-2 text-sm italic text-gray-700">
-            {t("team_upgrade_seats_details", {
-              memberCount: data.totalMembers,
-              unpaidCount: data.missingSeats,
-              seatPrice: 12,
-              totalCost: (data.totalMembers - data.freeSeats) * 12 + 12,
-            })}
-          </p>
-        )}
-
-        {errorMessage && (
-          <Alert severity="error" title={errorMessage} message={t("further_billing_help")} className="my-4" />
-        )}
-        <DialogFooter>
-          <DialogClose>
-            <Button color="secondary">{t("close")}</Button>
-          </DialogClose>
-
-          <Button
-            disabled={mutation.isLoading}
-            onClick={() => {
-              setErrorMessage(null);
-              mutation.mutate({ teamId: props.teamId });
-            }}>
-            {t("upgrade_to_per_seat")}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/web/components/team/screens/Team.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
-import { Avatar } from "@calcom/ui/components";
+import { Avatar } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 

apps/web/components/ui/AvatarGroup.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import React from "react";
 
 import classNames from "@lib/classNames";
@@ -12,6 +13,7 @@ export type AvatarGroupProps = {
     image: string;
     title?: string;
     alt?: string;
+    href?: string;
   }[];
   className?: string;
 };
@@ -21,15 +23,25 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
     <ul className={classNames(props.className)}>
       {props.items.slice(0, props.truncateAfter).map((item, idx) => {
         if (item.image != null) {
+          const avatar = (
+            <AvatarSSR
+              className={props.border}
+              imageSrc={item.image}
+              title={item.title}
+              alt={item.alt || ""}
+              size={props.size}
+            />
+          );
+
           return (
             <li key={idx} className="-mr-2 inline-block">
-              <AvatarSSR
-                className={props.border}
-                imageSrc={item.image}
-                title={item.title}
-                alt={item.alt || ""}
-                size={props.size}
-              />
+              {item.href ? (
+                <Link href={item.href}>
+                  <a>{avatar}</a>
+                </Link>
+              ) : (
+                avatar
+              )}
             </li>
           );
         }

apps/web/components/ui/AvatarSSR.tsx

@@ -15,6 +15,7 @@ export type AvatarProps = (
   className?: string;
   size?: number;
   title?: string;
+  href?: string;
   alt: string;
 };
 
@@ -49,7 +50,7 @@ export function AvatarSSR(props: AvatarProps) {
   const avatar = imgSrc ? <img alt={alt} className={className} src={imgSrc} /> : null;
   return title ? (
     <Tooltip.Tooltip delayDuration={300}>
-      <Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
+      <Tooltip.TooltipTrigger asChild>{avatar}</Tooltip.TooltipTrigger>
       <Tooltip.Content className="rounded-sm bg-black p-2 text-sm text-white">
         <Tooltip.Arrow />
         {title}

apps/web/components/ui/EditableHeading.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import React, { useState } from "react";
 import { ControllerRenderProps } from "react-hook-form";
 
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 const EditableHeading = function EditableHeading({
   value,

apps/web/components/ui/InfoBadge.tsx

@@ -1,5 +1,4 @@
-import { Icon } from "@calcom/ui/Icon";
-import { Tooltip } from "@calcom/ui/Tooltip";
+import { Icon, Tooltip } from "@calcom/ui";
 
 export default function InfoBadge({ content }: { content: string }) {
   return (

apps/web/components/ui/ModalContainer.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import React, { PropsWithChildren } from "react";
 
-import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Dialog, DialogContent } from "@calcom/ui";
 
 export default function ModalContainer(
   props: PropsWithChildren<{

apps/web/components/ui/NoCalendarConnectedAlert/__tests__/NoCalendarConnectedAlert.test.tsx

@@ -1,40 +0,0 @@
-import { cleanup, screen, render } from "@testing-library/react";
-
-import { trpc } from "@calcom/trpc/react";
-
-import NoCalendarConnectedAlert from "..";
-
-describe("Testing NoCalendarConnectedAlert", () => {
-  describe("Render test", () => {
-    it("should render without crashing", () => {
-      // Disabled as its asking for full trpc useQuery response
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      jest.spyOn(trpc, "useQuery").mockReturnValue({
-        isSuccess: true,
-        isFetched: true,
-        data: { connectedCalendars: [], destinationCalendar: undefined },
-      });
-      render(<NoCalendarConnectedAlert />);
-
-      const testProp = screen.getByText("missing_connected_calendar");
-      expect(testProp).toBeTruthy();
-    });
-
-    it("should not render", () => {
-      // Disabled as its asking for full trpc useQuery response
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      jest.spyOn(trpc, "useQuery").mockReturnValue({
-        isSuccess: true,
-        isFetched: true,
-        data: { connectedCalendars: [1, 2], destinationCalendar: { a: "test" } },
-      });
-      render(<NoCalendarConnectedAlert />);
-
-      expect(screen.queryByText("missing_connected_calendar")).toBeNull();
-    });
-
-    afterEach(cleanup);
-  });
-});

apps/web/components/ui/NoCalendarConnectedAlert/index.tsx

@@ -1,44 +0,0 @@
-import { useTranslation } from "next-i18next";
-import { Trans } from "next-i18next";
-
-import { trpc } from "@calcom/trpc/react";
-// @TODO: alert v2
-import { Alert } from "@calcom/ui/Alert";
-
-import { LinkText } from "../LinkText";
-
-const NoCalendarConnectedAlert = () => {
-  const { t } = useTranslation();
-
-  const query = trpc.useQuery(["viewer.connectedCalendars"]);
-  // We are not gonna show this alert till we fetch data from DB
-  let defaultCalendarConnected = true;
-  if (query.isSuccess && query.isFetched && query.data) {
-    defaultCalendarConnected =
-      query.data.connectedCalendars.length > 0 && query.data.destinationCalendar !== undefined;
-  }
-  return (
-    <>
-      {!defaultCalendarConnected && (
-        <Alert
-          severity="warning"
-          className="mb-4"
-          title={<>{t("missing_connected_calendar") as string}</>}
-          message={
-            <Trans i18nKey="connect_your_calendar_and_link">
-              You can connect your calendar from
-              <LinkText
-                data-testid="no-calendar-connected-alert"
-                href="/apps/categories/calendar"
-                classNameChildren="underline">
-                here
-              </LinkText>
-              .
-            </Trans>
-          }
-        />
-      )}
-    </>
-  );
-};
-export default NoCalendarConnectedAlert;

apps/web/components/ui/TableActions.tsx

@@ -1,13 +1,14 @@
 import React, { FC } from "react";
 
-import Dropdown, {
+import {
+  Button,
+  Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger,
   DropdownMenuPortal,
-} from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
+  DropdownMenuTrigger,
+  Icon,
+} from "@calcom/ui";
 
 import { SVGComponent } from "@lib/types/SVGComponent";