From f27b133fd230eb027e27493f6ce2a4812b839ee3 Mon Sep 17 00:00:00 2001
From: Jose Lima <jalimag0206@gmail.com>
Date: Mon, 30 Oct 2023 17:59:33 -0300
Subject: [PATCH] feat: add toast when adding a product to cart

---
 package-lock.json                             | 21 +++++++++++++++++++
 package.json                                  |  1 +
 src/app/layout.tsx                            |  9 +++++---
 .../[slug]/components/product-info.tsx        |  8 +++++++
 src/providers/toast.tsx                       | 15 +++++++++++++
 5 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 src/providers/toast.tsx

diff --git a/package-lock.json b/package-lock.json
index 8d75e88..e2cbab2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "next-auth": "^4.23.2",
         "react": "^18",
         "react-dom": "^18",
+        "react-toastify": "^9.1.3",
         "stripe": "^14.1.0",
         "tailwind-merge": "^1.14.0",
         "tailwindcss-animate": "^1.0.7"
@@ -4341,6 +4342,26 @@
         }
       }
     },
+    "node_modules/react-toastify": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
+      "integrity": "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==",
+      "dependencies": {
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
+    "node_modules/react-toastify/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 13ef5cf..9b480a8 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "next-auth": "^4.23.2",
     "react": "^18",
     "react-dom": "^18",
+    "react-toastify": "^9.1.3",
     "stripe": "^14.1.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7"
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index da515e1..a610594 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import Header from "@/components/ui/header";
 import { AuthProvider } from "@/providers/auth";
 import Footer from "@/components/ui/footer";
 import CartProvider from "@/providers/cart";
+import ToastProvider from "@/providers/toast";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -24,9 +25,11 @@ export default function RootLayout({
         <div className="flex h-full flex-col">
           <AuthProvider>
             <CartProvider>
-              <Header />
-              <div className="flex-1">{children}</div>
-              <Footer />
+              <ToastProvider>
+                <Header />
+                <div className="flex-1">{children}</div>
+                <Footer />
+              </ToastProvider>
             </CartProvider>
           </AuthProvider>
         </div>
diff --git a/src/app/product/[slug]/components/product-info.tsx b/src/app/product/[slug]/components/product-info.tsx
index 79af74b..8c5ed76 100644
--- a/src/app/product/[slug]/components/product-info.tsx
+++ b/src/app/product/[slug]/components/product-info.tsx
@@ -6,6 +6,7 @@ import { ProductWithTotalPrice } from "@/helpers/product";
 import { CartContext } from "@/providers/cart";
 import { ArrowLeftIcon, ArrowRightIcon, TruckIcon } from "lucide-react";
 import { useContext, useState } from "react";
+import { toast } from "react-toastify";
 
 interface ProductInfoProps {
   product: ProductWithTotalPrice;
@@ -26,6 +27,13 @@ const ProductInfo = ({ product }: ProductInfoProps) => {
 
   const handleAddToCartClick = () => {
     addProductToCart({ ...product, quantity });
+
+    toast.success("Adicionado ao carrinho com sucesso!", {
+      position: "top-right",
+      autoClose: 1500,
+      theme: "dark",
+      pauseOnHover: false,
+    });
   };
 
   return (
diff --git a/src/providers/toast.tsx b/src/providers/toast.tsx
new file mode 100644
index 0000000..9ae168b
--- /dev/null
+++ b/src/providers/toast.tsx
@@ -0,0 +1,15 @@
+"use client";
+import { ReactNode } from "react";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+const ToastProvider = ({ children }: { children: ReactNode }) => {
+  return (
+    <>
+      {children}
+      <ToastContainer />
+    </>
+  );
+};
+
+export default ToastProvider;