Feat: Carrinho de Doações (#340)

.env.example

@@ -1,2 +1,3 @@
 VITE_API_URL=http://localhost:4000
-VITE_HMAC_SECRET_KEY=
+VITE_HMAC_SECRET_KEY=
+VITE_REQUEST_CACHE=false

src/App.tsx

@@ -2,18 +2,20 @@ import { Fragment } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
 import { Routes } from './routes/Routes';
-import { SessionProvider } from './contexts';
+import { DonationCartProvider, SessionProvider } from './contexts';
 import { Toaster } from './components/ui/toaster';
-import { BackToTop } from '@/components/BackToTop';
+import { BackToTop } from '@/components';
 
 const App = () => {
   return (
     <Fragment>
       <Toaster />
       <BrowserRouter>
         <SessionProvider>
-          <BackToTop/>
-          <Routes />
+          <DonationCartProvider>
+            <BackToTop />
+            <Routes />
+          </DonationCartProvider>
         </SessionProvider>
       </BrowserRouter>
     </Fragment>

src/components/BackToTop/BackToTop.tsx

@@ -1,41 +1,45 @@
-import { useState } from "react"
-import { ArrowUp } from "lucide-react"
+import { useState } from 'react';
+import { ArrowUp } from 'lucide-react';
 
+const BackToTop = () => {
+  const [isVisible, setVisibility] = useState(false);
 
-const BackToTop =() => {
-
-    const [isVisible, setVisibility] = useState(false)
-
-    const scrollToTop = () => {
-        let root = document.getElementById('root')
-        if (!root) {return}
-
-        root.scrollTo({top:0, behavior:"smooth"})
-
+  const scrollToTop = () => {
+    const root = document.getElementById('root');
+    if (!root) {
+      return;
     }
 
-    document.getElementById("root")?.addEventListener('scroll', (e) => {
-        if (e.target === null) {return}
-        let CurrentScrollHeight = (e.target as HTMLElement).scrollTop 
-        let WindowHeight = window.innerHeight
+    root.scrollTo({ top: 0, behavior: 'smooth' });
+  };
 
-        if ( CurrentScrollHeight > WindowHeight / 2) {
-            setVisibility(true)
-        } else {
-            setVisibility(false)
-        }
-    })
+  document.getElementById('root')?.addEventListener('scroll', (e) => {
+    if (e.target === null) {
+      return;
+    }
+    const CurrentScrollHeight = (e.target as HTMLElement).scrollTop;
+    const WindowHeight = window.innerHeight;
 
+    if (CurrentScrollHeight > WindowHeight / 2) {
+      setVisibility(true);
+    } else {
+      setVisibility(false);
+    }
+  });
 
-return (isVisible && (
-    <button 
-    className=" fixed ease-in-out hidden sm:flex justify-center items-center duration-300 
+  return (
+    isVisible && (
+      <button
+        className=" fixed ease-in-out hidden sm:flex justify-center items-center duration-300 
     bg-red-600/75 focus:bg-red-700 hover:bg-red-700 z-[100] shadow-slate-600/75
     right-6 bottom-6 rounded-full shadow-md
     w-12 h-12 "
-    onClick={scrollToTop}
-    ><ArrowUp color="white" /></button>
-));
-}
+        onClick={scrollToTop}
+      >
+        <ArrowUp color="white" />
+      </button>
+    )
+  );
+};
 
 export { BackToTop };

src/components/BurgerMenu/BurgerMenu.tsx

@@ -8,6 +8,7 @@ import {
   LinkIcon,
   Menu,
   ShieldAlert,
+  X,
 } from 'lucide-react';
 
 import { SessionServices } from '@/service';
@@ -16,6 +17,9 @@ import { BurguerMenuItem } from './components';
 import { Separator } from '../ui/separator';
 import { SessionContext } from '@/contexts';
 import { usePartners } from '@/hooks';
+import { DialogClose } from '@radix-ui/react-dialog';
+import { Button } from '../ui/button';
+import { DialogFooter } from '../ui/dialog';
 
 const BurgerMenu = () => {
   const { session } = useContext(SessionContext);
@@ -37,7 +41,14 @@ const BurgerMenu = () => {
       <SheetTrigger>
         <Menu color="white" className="ml-2 mr-2" />
       </SheetTrigger>
-      <SheetContent side="left" className="pt-[96px] flex flex-col">
+      <SheetContent side="left" className="pt-[96px] flex flex-col z-[90]">
+        <DialogFooter className="absolute top-16 right-4">
+          <DialogClose asChild>
+            <Button type="button" variant="ghost">
+              <X className="stroke-muted-foreground" />
+            </Button>
+          </DialogClose>
+        </DialogFooter>
         <div className="flex flex-col gap-4">
           {session && (
             <Fragment>

src/components/DonationCart/DonationCart.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+
+import { IDonationCart } from './types';
+import { Sheet, SheetContent } from '../ui/sheet';
+import { DonationCartForm, DonationSuccess } from './components';
+
+const DonationCart = (props: IDonationCart) => {
+  const { onClose, opened, shelterId } = props;
+  const [donationOrderId, setDonationOrderId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const el = document.querySelector('header');
+    if (el) {
+      if (opened) {
+        el?.classList.remove('z-[100]');
+        el?.classList.add('z-0');
+      } else {
+        el?.classList.remove('z-0');
+        el?.classList.add('z-[100]');
+      }
+    }
+  }, [opened]);
+
+  useEffect(() => {
+    if (!opened) setDonationOrderId(null);
+  }, [opened]);
+
+  return (
+    <Sheet open={opened} onOpenChange={onClose}>
+      <SheetContent side="right" className="z-[120] flex flex-col pb-0 px-0">
+        {donationOrderId ? (
+          <DonationSuccess donationOrderId={donationOrderId} />
+        ) : (
+          <DonationCartForm
+            onCancel={onClose}
+            shelterId={shelterId}
+            onSuccess={(orderId) => setDonationOrderId(orderId)}
+          />
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export { DonationCart };