chore: replace toaster with sonner

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

@@ -123,7 +123,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",
@@ -140,6 +139,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",

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
   );
 }

packages/ui/components/toast/toast.stories.mdx

@@ -12,9 +12,9 @@ import {
   VariantRow,
 } from "@calcom/storybook/components";
 
-import { SuccessToast, ErrorToast, WarningToast, DefaultToast } from "./";
+import { SuccessToast, ErrorToast, WarningToast } from "./";
 
-<Meta title="UI/Toasts" component={DefaultToast} />
+<Meta title="UI/Toasts" component={SuccessToast} />
 
 <Title title="Toasts" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
 
@@ -24,43 +24,37 @@ Toasts are used to show an action has had a impact. If a user submits a form a t
 
 ## Structure
 
-<CustomArgsTable of={DefaultToast} />
+<CustomArgsTable of={SuccessToast} />
 
 <Examples title="Toasts">
-  <Example title="Default">
-    <DefaultToast message="Default Toast" toastVisible={true} />
-  </Example>
   <Example title="Success">
-    <SuccessToast message="Success Toast" toastVisible={true} />
+    <SuccessToast message="Success Toast" />
   </Example>
   <Example title="Warning">
-    <WarningToast message="Warning Toast" toastVisible={true} />
+    <WarningToast message="Warning Toast" />
   </Example>
   <Example title="Error">
-    <ErrorToast message="Error Toast" toastVisible={true} />
+    <ErrorToast message="Error Toast" />
   </Example>
 </Examples>
 
 ## Toast Story
 
 <Canvas>
   <Story
-    name="Default"
+    name="Toast Variants"
     args={{
-      message: "Default Toast",
-      toastVisible: true,
+      message: "Toast Message",
     }}
     argTypes={{
       message: { control: "text" },
-      toastVisible: { control: "boolean" },
     }}>
     {({ message, toastVisible }) => (
-      <VariantsTable titles={["Default", "Success", "Warning", "Error"]} columnMinWidth={150}>
-        <VariantRow variant="Default">
-          <DefaultToast message={message} toastVisible={toastVisible} />
-          <SuccessToast message={message} toastVisible={toastVisible} />
-          <WarningToast message={message} toastVisible={toastVisible} />
-          <ErrorToast message={message} toastVisible={toastVisible} />
+      <VariantsTable titles={["Success", "Warning", "Error"]} columnMinWidth={150}>
+        <VariantRow variant="Success">
+          <SuccessToast message={message} />
+          <WarningToast message={message} />
+          <ErrorToast message={message} />
         </VariantRow>
       </VariantsTable>
     )}

packages/ui/components/toast/toast.test.tsx

@@ -9,7 +9,7 @@ describe("Tests for Toast Components", () => {
     const toastId = "some-id";
 
     const onCloseMock = vi.fn();
-    render(<Component message={message} toastVisible={true} onClose={onCloseMock} toastId={toastId} />);
+    render(<Component message={message} onClose={onCloseMock} toastId={toastId} />);
 
     const toast = screen.getByTestId(toastTestId);
     expect(toast).toBeInTheDocument();

packages/ui/layouts/WizardLayout.tsx

@@ -4,7 +4,7 @@
 import { noop } from "lodash";
 import { usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";