chore: replace toaster with sonner (calcom#19342)

* fix: replace react-hot-toast with sonner for toast notifications

* feat: add country code (calcom#19264)

* perf: Move PlainChat up the hierarchy to remove rerenders (calcom#19255)

* perf: Move PlainChat up the hierarchy to remove rerenders

* rmeove yarn lock

---------

Co-authored-by: Nizzy <[email protected]>
Co-authored-by: nizzy <[email protected]>

* hotfix (calcom#19266)

* chore: release v4.9.11

* Handle cancelled status (calcom#19272)

* feat: Use new /routing URL for routing forms (calcom#19235)

* feat: Use new /routing URL for routing forms

* Fixes

* Fix bug

* precent crash

---------

Co-authored-by: Hariom Balhara <[email protected]>

* fix: remove section on /bookings if no data exists (calcom#19261)

* feat: v2 slots new version (calcom#18758)

* refactor: version old slots

* feat: init new slots endpoints

* chore: range format

* fix: duratin

* fix: duratin

* test: slot releaseAt

* refactor: reserve slot response

* refactor variable name

* docs: have new slots controller in docs

* feat: crud for slots reservations

* refactor: use exclude all for response

* docs

* chore: slots input service

* refactor mini

* refactor: remove unused imports

* docs

* handle orgSlug for dynamic events

* refactor: correct name

* docs

* add optional organizationSlug to BySlug search

* refactor: slot output format

* refactor: return seated slot info

* docs

* rename functions

* refactor: slots seated response

* fix: handle same username in org and non org

* refactor: test format

* fix: allow reservationDuration only for authed requests

* chore: check if auth user has permissions to define custom reservation duration

* refactor: split e2e test files

* refactor: invalid request exception codes

* chore: old slots controller uses all old versions

* refactor: remove depreceated fields (calcom#19279)

* refactor: remove depreceated fields

* chore: use v2 endpoint

* chore: update V2 Api type

* chore

* chore: Refactor to remove `getServerSideProps` for /teams route (calcom#19286)

* remove getServerSideProps

* refactor teams route

* chore: release v4.9.12

* fix: Salesforce - if no contact throw Error (calcom#19271)

* Throw error if no contact is passed to createEvent

* chore: update error message

* chore

---------

Co-authored-by: Udit Takkar <[email protected]>
Co-authored-by: Udit Takkar <[email protected]>

* fix: missing await router controller (calcom#19276)

* fix: Default people filter in bookings list for admin (calcom#18035)

* default people filter for admin

* chore

* type check

* added test case

* made test concise to reduce flakiness

* add timeout to wait for second get response before counting

* update timeout

---------

Co-authored-by: Peer Richelsen <[email protected]>

* feat: add CSAT to V2 bookings return (calcom#19278)

* init

* test: v2 bookings returns rating

---------

Co-authored-by: supalarry <[email protected]>
Co-authored-by: Lauris Skraucis <[email protected]>

* chore: disable v2 booking seats safe parse error logs (calcom#19292)

* revert: Reapply "fix: Multiple rr-hosts combine to create erroneous availabil… (calcom#19263)

* Reapply "fix: Multiple rr-hosts combine to create erroneous availability (calcom#18772)"

This reverts commit 5dbc6d9.

* Only thing left is a diff to show which slots are removed

* Add logging around time slot results

* Setup logging through axiom

* .... forgot

* fix: type errors

* Only log when there are differences

* Updated from old which had a failing test to new logic

* chore: release v4.9.13

* fix: flaky test (calcom#19294)

* fix: flaky test

* fix another test

* update

---------

Co-authored-by: Eunjae Lee <[email protected]>
Co-authored-by: unknown <[email protected]>

* chore: calendars controller v2 docs (calcom#19291)

Co-authored-by: Bailey Pumfleet <[email protected]>

* Merge branch 'main' into replace-toaster-with-sonner

* add ireland country code (calcom#19117)

Co-authored-by: CarinaWolli <[email protected]>

* perf: separate client vs server code from insights layout (calcom#19285)

* add UpgradeTipWrapper

* refactor insights/layout.tsx

---------

Co-authored-by: Anik Dhabal Babu <[email protected]>

* feat: Use Folders to organize SMS links on Dub (calcom#19248)

* feat: Use Folders to organize SMS links on Dub

* Update yarn.lock

---------

Co-authored-by: sean-brydon <[email protected]>
Co-authored-by: Bailey Pumfleet <[email protected]>

* fix: removing-all-members-toggle-for-fh (calcom#19277)

* fix : removing all members toggle for fh

* ux enhancements

* adding placeholder

* chore: release v5.0.0

* fix flake (calcom#19306)

* chore: migrate `/apps/routing-forms/[...pages]` to App Router (calcom#18956)

* wip

* fix

* fix

* refactor

* rename to routingServerSidePropsConfig

* refactor

* refactor

* add routing-link to useIsBookingPage hook

* remove Head component

* fix

* redirect user to apps/routing-forms/forms if user goes to apps/routing-forms

* refactor

* remove log

* remove client component not needed

* clean up code

* remove unneeded metadata

* clean up further

* clean up further 2

* fix type check

* routing-link does not need shell

* Fix title for Routing Form public link and also remove any

* Remove ; in HTML

* Remove unnecessary page reload

---------

Co-authored-by: Hariom Balhara <[email protected]>

* chore: migrate api for team upgrade to App Router (calcom#19100)

* remove old pages router api

* add new app router api

* fix

* fix redirect

* refactor

* fix: cut off and alignment bug (calcom#19317)

* fix: assignment label cut-off

* fix: add all team members label is vertically aligned

* fix: nested scrolls on /bookings (calcom#19284)

* fix: Can't change availability for managed event type (calcom#19006)

* fix: flaky test organization.spec

* fix

* fix: bulk-update-in-scheduleId-in-detailed-view (calcom#19295)

* fix: bulk-update-in-scheduleId-in-detailed-view

* minor-change

---------

Co-authored-by: Anik Dhabal Babu <[email protected]>

* feat: prevent automatic query parameters when opening booking page (calcom#18132)

- Resolve the user hindrance where the event's booking page should not have search parameters such as date and month in the initial page load
- Contains changes for the fix of issue calcom#18094 as well as it is needed

Co-authored-by: Tushar Bhatt <[email protected]>

* feat: atoms adjustments with ui v3 styles (calcom#19320)

* refactor: Clean out old code, no longer needed (calcom#19323)

* refactor: Clean out old code, no longer needed

* Removed a sneaky one keen to stay behind

* chore: release v5.0.1

* feat: Create `UserCreationService` and use in API V1 create user endpoint (calcom#19150)

* Create `createUser` method in `userCreationService`

* Refactor `UserRepository` create method to accept prisma input and remove business logic

* API use `UserCreationService`

* Move slugify to service

* Use hashPassword instead

* Type fixes in `UserCreationService`

* Add `userCreationService` tests

* API accept data object

* Type fixes

* Add user _post test

* Add test for locked user

* Add locked param to log

* Add user repository tests

* Do not return locked status

* Explicitly pass `locked` prop

* Fix tests when locked isn't returned

* Fix tests

* Pass locked prop

* Edit test name

* Use logger

* Fix passing hashed password

* fix (calcom#19298)

* fix: timezone input text is now visible in dark mode (calcom#19325)

* feat: make first tab active by default (calcom#19315)

* feat: make first tab active by default

* perf: optimize event types tabs rendering with useMemo

---------

Co-authored-by: Tushar Bhatt <[email protected]>

* perf: Use one PageWrapper instance for all settings pages (calcom#18752)

* add a layoutfile to use-page-wrapper route group

* refactor and move bookings status page to route group

* improve logic in pagesAndRewritePaths

* fix

* add use client directive

* move /403 and /500

* move /auth/error

* move /connect-and-join

* move /enterprise

* move /maintenance

* move /more

* move /upgrade

* chore: remove WithLayout from 8 low-risk single pages (calcom#18745)

* move /403 and /500

* move /auth/error

* move /connect-and-join

* move /enterprise

* move /maintenance

* move /more

* move /upgrade

* move /availability pages

* move /event-types pages

* move /insights pages

* move /apps to use-page-wrapper group

* move /getting-started to use-page-wrapper group

* move /signup to use-page-wrapper group

* move /workflows to use-page-wrapper group

* move /video pages to use-page-wrapper group

* pass dehydratedState in layout

* pass dehydratedState in layout

* move settings/(settings-layout) to use-page-wrapper

* move settings/(admin-layout) to use-page-wrapper

* move remaining settings pages to (use-page-wrapper)

* fix test

* remove unused code

* remove unused files

* fix type check

* remove test tag

* remove page

* RSC should not default export client components

* fix: Can't use unsaved booking question as variable in event name (calcom#18604)

Co-authored-by: Tushar Bhatt <[email protected]>

* chore: remove WithLayout from not-found.tsx (calcom#19331)

* fix: redirect logic in /settings/admin/apps (calcom#19332)

* chore: v3 fixed filters, new profile view (calcom#19312)

* fixed filters with badge

* aligned recurrence in bookings

* removed new badge

* new profile view

* fixed try for free button

* fixed form input

* fix: Issues with date changes in column view (calcom#19258)

* fix: coulmn view date change

* Update store.ts

---------

Co-authored-by: Udit Takkar <[email protected]>

* chore: fixed tooltip position for routing form (calcom#19267)

* fixed tooltip position for routing form

* fixed offset

* fix: Fairness when routing (calcom#18550)

* Partial push of new filters

* Let's always return the passed host array when a filter doesn't need to be applied

* fix: isFixed typing in same round robin host check

* Add main bulk of rewritten logic for routed fairness support

* Remove console.log

* Add getAttributeWithEnabledWeights to AttributeRepository

* Add OOO entry repository

* Use getOrderedListOfLuckyUsers in lead threshold filtering

* Shortfall already includes weight

* test against minShortfall

* first attempt to fix fallbacks

* Added testcase updates

* Partially fix filterHosts test

* Some test updates

* Removed email field from normalization

* fix no available users found error

* fix unit test

* remove fallback from same host reschedule return

* fixes and improvements for findQualifiedHosts

* include fallback logic in handleNewBooking

* use fallback in handleNewBooking

* fix for contact owner in handleNewBooking

* WIP - comment

* pass routingFormResponseId

* fix type error

* pass routingFormResponse

* fixes in treshold logic

* remove reason

* merge qualified and fallback availabilities

* fix type error

* add and fix tests

* clean up test file

* fix filterHostsBySameRoundRobinHost tests

* fix findQualifiedHosts.test.ts

* fix getRoutedUsers.test.ts

* fix tests

* fix isRerouting check

* fix start time for two weeks check

* fix fallback hosts

* fix test

* fallback hosts should also include qualified hosts

* fix type error

* fix typos

* add contact owner to fallbacks

* fix typo

* fix qualifiedRRUsers

* set fixed users when no hosts

* add tets + code clean up

* add test for reschedule with same host

* fix typo

* add more tests for findQualifiedHosts

* remove skip from test

* add comment

* remove unused code

* fix fallback users in loadAndValidateUsers

* improve naming for fallback

* rename missed fallback variable

* fix reschedule with same rr host in handleNewBooking

* fixes for fallback slots

* add more tests + small fixes for contact owner

* fix tests and type errors

* add logs for fallback

* add type:json to logger

* Fix small merge issue

* fix end time if two weeks are cut off

* add more tests for contact owner availability check

* add new logic for two weeks fallback

* fix reschedule same RR host test

---------

Co-authored-by: CarinaWolli <[email protected]>
Co-authored-by: Peer Richelsen <[email protected]>
Co-authored-by: Carina Wollendorfer <[email protected]>

* fix: EditLocationDialog footer positioning and structure (calcom#19335)

* fix: EditLocationDialog footer positioning and structure

* fix: make RescheduleDialog footer layout and button structure right

* fix: input dialogue glitch now works great

* made tests happy

---------

Co-authored-by: Peer Richelsen <[email protected]>

* Merge branch 'main' into replace-toaster-with-sonner

* chore: remove DefaultToast from toast.stories.mdx

---------

Co-authored-by: Peer Richelsen <[email protected]>
Co-authored-by: Udit Takkar <[email protected]>
Co-authored-by: Benny Joo <[email protected]>
Co-authored-by: Nizzy <[email protected]>
Co-authored-by: nizzy <[email protected]>
Co-authored-by: Syed Ali Shahbaz <[email protected]>
Co-authored-by: GitHub Actions <[email protected]>
Co-authored-by: Joe Au-Yeung <[email protected]>
Co-authored-by: Hariom Balhara <[email protected]>
Co-authored-by: Hariom Balhara <[email protected]>
Co-authored-by: Eunjae Lee <[email protected]>
Co-authored-by: Lauris Skraucis <[email protected]>
Co-authored-by: Udit Takkar <[email protected]>
Co-authored-by: Morgan <[email protected]>
Co-authored-by: Vijay <[email protected]>
Co-authored-by: supalarry <[email protected]>
Co-authored-by: Alex van Andel <[email protected]>
Co-authored-by: unknown <[email protected]>
Co-authored-by: Bailey Pumfleet <[email protected]>
Co-authored-by: Carina Wollendorfer <[email protected]>
Co-authored-by: CarinaWolli <[email protected]>
Co-authored-by: Anik Dhabal Babu <[email protected]>
Co-authored-by: Steven Tey <[email protected]>
Co-authored-by: sean-brydon <[email protected]>
Co-authored-by: Tushar Bhatt <[email protected]>
Co-authored-by: amrit <[email protected]>
Co-authored-by: Sanchit Tewari <[email protected]>
Co-authored-by: Rajiv Sahal <[email protected]>
Co-authored-by: Amit Sharma <[email protected]>

apps/web/modules/apps/installation/[[...step]]/step-view.tsx

@@ -3,7 +3,7 @@
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import type { z } from "zod";
 
 import checkForMultiplePaymentApps from "@calcom/app-store/_utils/payments/checkForMultiplePaymentApps";

apps/web/modules/auth/verify-email-change-view.tsx

@@ -4,7 +4,7 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import React from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";

apps/web/modules/bookings/views/bookings-single-view.tsx

@@ -7,8 +7,8 @@ import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { Fragment, useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
 import { RRule } from "rrule";
+import { Toaster } from "sonner";
 import { z } from "zod";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";

apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx

@@ -4,7 +4,7 @@ import { signOut } from "next-auth/react";
 import type { TFunction } from "next-i18next";
 import { usePathname, useRouter } from "next/navigation";
 import { Suspense } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import { z } from "zod";
 
 import { classNames } from "@calcom/lib";

apps/web/modules/signup-view.tsx

@@ -11,7 +11,7 @@ import Script from "next/script";
 import { useState, useEffect } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm, useFormContext } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import { z } from "zod";
 
 import getStripe from "@calcom/app-store/stripepayment/lib/client";

apps/web/modules/users/views/users-public-view.tsx

@@ -3,7 +3,7 @@
 import classNames from "classnames";
 import type { InferGetServerSidePropsType } from "next";
 import Link from "next/link";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import {
   sdkActionManager,

apps/web/package.json

@@ -122,7 +122,6 @@
     "react-dom": "^18.2.0",
     "react-easy-crop": "^3.5.2",
     "react-hook-form": "^7.43.3",
-    "react-hot-toast": "^2.3.0",
     "react-intl": "^5.25.1",
     "react-live-chat-loader": "^2.8.1",
     "react-multi-email": "^0.5.3",
@@ -139,6 +138,7 @@
     "sanitize-html": "^2.10.0",
     "schema-dts": "^1.1.0",
     "short-uuid": "^4.2.0",
+    "sonner": "^1.7.4",
     "stripe": "^9.16.0",
     "superjson": "1.9.1",
     "tailwindcss-radix": "^2.6.0",

apps/web/playwright/organization/organization-creation.e2e.ts

@@ -177,7 +177,7 @@ test.describe("Organization", () => {
       await page.getByTestId("new-member-button").click();
       await page.locator('[placeholder="email\\@example\\.com"]').fill(adminEmail);
       await page.getByTestId("invite-new-member-button").click();
-      await expect(page.locator(`li:has-text("${adminEmail}")`)).toBeVisible();
+      await expect(page.getByTestId("pending-member-item").filter({ hasText: adminEmail })).toBeVisible();
       // TODO: Check if invited admin received the invitation email
       // await expectInvitationEmailToBeReceived(
       //   page,
@@ -344,7 +344,7 @@ test.describe("Organization", () => {
       await page.getByTestId("new-member-button").click();
       await page.locator('[placeholder="email\\@example\\.com"]').fill(adminEmail);
       await page.getByTestId("invite-new-member-button").click();
-      await expect(page.locator(`li:has-text("${adminEmail}")`)).toBeVisible();
+      await expect(page.getByTestId("pending-member-item").filter({ hasText: adminEmail })).toBeVisible();
       // TODO: Check if invited admin received the invitation email
       // await expectInvitationEmailToBeReceived(
       //   page,
@@ -476,7 +476,7 @@ test.describe("Organization", () => {
       await page.getByTestId("new-member-button").click();
       await page.locator('[placeholder="email\\@example\\.com"]').fill(adminEmail);
       await page.getByTestId("invite-new-member-button").click();
-      await expect(page.locator(`li:has-text("${adminEmail}")`)).toBeVisible();
+      await expect(page.getByTestId("pending-member-item").filter({ hasText: adminEmail })).toBeVisible();
       // TODO: Check if invited admin received the invitation email
       // await expectInvitationEmailToBeReceived(
       //   page,

apps/web/playwright/organization/team-management.e2e.ts

@@ -45,7 +45,7 @@ test.describe("Teams", () => {
       await page.getByTestId("new-member-button").click();
       await page.locator('[placeholder="email\\@example\\.com"]').fill(inviteeEmail);
       await page.getByTestId("invite-new-member-button").click();
-      await expect(page.locator(`li:has-text("${inviteeEmail}")`)).toBeVisible();
+      await expect(page.getByTestId("pending-member-item").filter({ hasText: inviteeEmail })).toBeVisible();
 
       // locator.count() does not await for the expected number of elements
       // https://github.com/microsoft/playwright/issues/14278

packages/app-store/alby/pages/setup/index.tsx

@@ -2,7 +2,7 @@ import { auth, Client, webln } from "@getalby/sdk";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useCallback, useEffect } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";

packages/app-store/applecalendar/pages/setup/index.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

packages/app-store/caldavcalendar/pages/setup/index.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Alert, Button, Form, TextField } from "@calcom/ui";

packages/app-store/exchange2013calendar/pages/setup/index.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Alert, Button, Form, TextField } from "@calcom/ui";

packages/app-store/exchange2016calendar/pages/setup/index.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Alert, Button, Form, TextField } from "@calcom/ui";

packages/app-store/exchangecalendar/pages/setup/index.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import z from "zod";
 
 import { emailSchema } from "@calcom/lib/emailSchema";

packages/app-store/hitpay/pages/setup/index.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import { z } from "zod";
 
 import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage";

packages/app-store/ics-feedcalendar/pages/setup/index.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Alert, Button, Form, TextField, CheckboxField } from "@calcom/ui";

packages/app-store/make/pages/setup/index.tsx

@@ -2,7 +2,7 @@ import type { InferGetServerSidePropsType } from "next";
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import { useState } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

packages/app-store/paypal/pages/setup/index.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import type { FormEvent } from "react";
 import { useEffect, useRef, useState } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import { v4 as uuidv4 } from "uuid";
 
 import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";

packages/app-store/sendgrid/pages/setup/index.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";

packages/app-store/zapier/pages/setup/index.tsx

@@ -1,7 +1,7 @@
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import { useState } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

packages/features/bookings/Booker/Booker.tsx

@@ -1,8 +1,8 @@
 import { AnimatePresence, LazyMotion, m } from "framer-motion";
 import dynamic from "next/dynamic";
 import { useEffect, useMemo, useRef } from "react";
-import { Toaster } from "react-hot-toast";
 import StickyBox from "react-sticky-box";
+import { Toaster } from "sonner";
 import { shallow } from "zustand/shallow";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";

packages/features/shell/Shell.tsx

@@ -4,7 +4,7 @@ import { useSession } from "next-auth/react";
 import { usePathname, useRouter } from "next/navigation";
 import type { Dispatch, ReactElement, ReactNode, SetStateAction } from "react";
 import React, { cloneElement } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { useRedirectToLoginIfUnauthenticated } from "@calcom/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated";
 import { useRedirectToOnboardingIfNeeded } from "@calcom/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded";

packages/lib/package.json

@@ -26,8 +26,8 @@
     "jimp": "^0.16.1",
     "next-collect": "^0.2.1",
     "next-i18next": "^13.2.2",
-    "react-hot-toast": "^2.3.0",
     "rrule": "^2.7.1",
+    "sonner": "^1.7.4",
     "tailwind-merge": "^1.13.2",
     "tsdav": "2.0.3",
     "tslog": "^4.9.2",

packages/ui/components/toast/showToast.tsx

@@ -1,21 +1,19 @@
 import classNames from "classnames";
-import type { ToastOptions, Toast } from "react-hot-toast";
-import toast from "react-hot-toast";
+import type { ToastT } from "sonner";
+import { toast } from "sonner";
 
 import { Icon } from "../icon";
 
 type IToast = {
   message: string;
-  toastVisible: boolean;
-  toastId: string;
-  onClose: (toastId: string) => void;
+  toastId: string | number;
+  onClose: (toastId: string | number) => void;
 };
 
-export const SuccessToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
+export const SuccessToast = ({ message, onClose, toastId }: IToast) => (
   <button
     className={classNames(
-      "data-testid-toast-success bg-default dark:bg-inverted text-emphasis dark:text-inverted shadow-elevation-low border-subtle mb-2 flex h-auto space-x-2 rounded-lg border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up cursor-pointer"
+      "data-testid-toast-success bg-default dark:bg-inverted text-emphasis dark:text-inverted shadow-elevation-low border-subtle mb-2 flex h-auto space-x-2 rounded-lg border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
     )}
     onClick={() => onClose(toastId)}>
     <span className="mt-0.5">
@@ -30,11 +28,10 @@ export const SuccessToast = ({ message, toastVisible, onClose, toastId }: IToast
   </button>
 );
 
-export const ErrorToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
+export const ErrorToast = ({ message, onClose, toastId }: IToast) => (
   <button
     className={classNames(
-      "animate-fade-in-up bg-semantic-error-subtle text-semantic-error shadow-elevation-low border-semantic-error-subtle mb-2 flex h-auto space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up cursor-pointer"
+      "animate-fade-in-up bg-semantic-error-subtle text-semantic-error shadow-elevation-low border-semantic-error-subtle mb-2 flex h-auto space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
     )}
     onClick={() => onClose(toastId)}>
     <span className="mt-0.5">
@@ -49,11 +46,10 @@ export const ErrorToast = ({ message, toastVisible, onClose, toastId }: IToast)
   </button>
 );
 
-export const WarningToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
+export const WarningToast = ({ message, onClose, toastId }: IToast) => (
   <button
     className={classNames(
-      "animate-fade-in-up bg-semantic-attention-subtle text-semantic-attention shadow-elevation-low border-semantic-attention-subtle mb-2 flex h-auto space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up cursor-pointer"
+      "animate-fade-in-up bg-semantic-attention-subtle text-semantic-attention shadow-elevation-low border-semantic-attention-subtle mb-2 flex h-auto space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
     )}
     onClick={() => onClose(toastId)}>
     <span className="mt-0.5">
@@ -76,28 +72,25 @@ export function showToast(
   message: string,
   variant: ToastVariants,
   // Options or duration (duration for backwards compatibility reasons)
-  options: number | ToastOptions = TOAST_VISIBLE_DURATION
+  options: number | ToastT = TOAST_VISIBLE_DURATION
 ) {
-  //
-  const _options: ToastOptions = typeof options === "number" ? { duration: options } : options;
+  const _options: ToastT = typeof options === "number" ? { duration: options, id: "" } : options;
   if (!_options.duration) _options.duration = TOAST_VISIBLE_DURATION;
   if (!_options.position) _options.position = "bottom-center";
 
-  const onClose = (toastId: string) => {
-    toast.remove(toastId);
+  const onClose = (toastId: string | number) => {
+    toast.dismiss(toastId);
   };
-  const toastElements: { [x in ToastVariants]: (t: Toast) => JSX.Element } = {
-    success: (t) => (
-      <SuccessToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />
-    ),
-    error: (t) => <ErrorToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />,
-    warning: (t) => (
-      <WarningToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />
-    ),
+
+  const toastElements: { [x in ToastVariants]: (t: number | string) => JSX.Element } = {
+    success: (toastId) => <SuccessToast message={message} onClose={onClose} toastId={toastId} />,
+    error: (toastId) => <ErrorToast message={message} onClose={onClose} toastId={toastId} />,
+    warning: (toastId) => <WarningToast message={message} onClose={onClose} toastId={toastId} />,
   };
+
   return toast.custom(
     toastElements[variant] ||
-      ((t) => <SuccessToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />),
+      ((toastId) => <SuccessToast message={message} onClose={onClose} toastId={toastId} />),
     _options
   );
 }