Merged staging into main

.env.example

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

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "axios": "^1.6.8",
@@ -35,6 +36,7 @@
     "react-input-mask": "^2.0.4",
     "react-router-dom": "^6.23.0",
     "react-select": "^5.8.0",
+    "react-to-print": "^2.15.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "yup": "^1.4.0"

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,14 +8,18 @@ import {
   LinkIcon,
   Menu,
   ShieldAlert,
+  X,
 } from 'lucide-react';
+import clsx from 'clsx';
 
 import { SessionServices } from '@/service';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { BurguerMenuItem } from './components';
 import { Separator } from '../ui/separator';
 import { SessionContext } from '@/contexts';
 import { usePartners } from '@/hooks';
+import { Button } from '../ui/button';
+import { DialogClose, 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>
@@ -52,6 +63,12 @@ const BurgerMenu = () => {
             link="/sobre-nos"
             icon={<Info className="w-5 h-5" />}
           />
+          <BurguerMenuItem
+            label="Minhas Doações"
+            link="/doacoes"
+            icon={<HeartHandshake className="w-5 h-5" />}
+            className={clsx({ hidden: !session })}
+          />
           <BurguerMenuItem
             label="Cadastrar abrigo"
             link="https://forms.gle/2S7L2gR529Dc8P3T9"

src/components/CardAboutShelter/CardAboutShelter.tsx

@@ -7,23 +7,40 @@ import {
   Smartphone,
   Building,
   MapPinned,
+  Link,
 } from 'lucide-react';
 
 import { Card } from '../ui/card';
 import { ICardAboutShelter } from './types';
 import { InfoRow } from './components';
-import { checkAndFormatAddress } from './utils';
+import { checkAndFormatAddress, getShelterNameBeforeSeparator } from './utils';
 import { ShelterCategory } from '@/hooks/useShelter/types';
 import { Fragment } from 'react/jsx-runtime';
+import { PetsRsShelterServices } from '@/service/petsRsShelter/petsRsShelter.service';
+import { useEffect, useState } from 'react';
 
 const CardAboutShelter = (props: ICardAboutShelter) => {
   const { shelter } = props;
+  const [ petsRsShelterUrl, setPetsRsShelterUrl ] = useState('');
 
   const check = (v?: string | number | boolean | null) => {
     return v !== undefined && v !== null;
   };
-  const formatAddress = checkAndFormatAddress(shelter, false);
 
+  const getPetsRsShelterUrl = async (name: string) => {
+    const cleanShelterName = getShelterNameBeforeSeparator(name);
+    const data  = await PetsRsShelterServices.getByName(cleanShelterName);
+    const petsRsShelterUrl = data?.id ? `https://petsrs.com.br/abrigo/${data.id}` : 'https://petsrs.com.br/abrigos';
+    return petsRsShelterUrl;
+  };
+
+  useEffect(() => {
+      if(shelter.petFriendly) {
+        getPetsRsShelterUrl(shelter.name).then((url) => setPetsRsShelterUrl(url) );
+      }
+  },[shelter.petFriendly, shelter.name]);
+
+  const formatAddress = checkAndFormatAddress(shelter, false);
   return (
     <Card className="flex flex-col gap-2 p-4 bg-[#E8F0F8] text-sm">
       <div className="text-[#646870] font-medium">Sobre o abrigo</div>
@@ -89,6 +106,16 @@ const CardAboutShelter = (props: ICardAboutShelter) => {
           value={check(shelter.pix) ? `${shelter.pix}` : 'Não informado'}
           clipboardButton={check(shelter.pix)}
         />
+      {(petsRsShelterUrl != '') ? (
+          <InfoRow
+            icon={<Link />}
+            label={
+              <a target="_blank" href={petsRsShelterUrl} className="font-semibold text-blue-600">
+                Confira o abrigo em petsrs.com.br
+              </a>
+            }
+          />
+        ) : ''}
       </div>
     </Card>
   );

src/components/CardAboutShelter/utils.ts

@@ -25,4 +25,8 @@ const checkAndFormatAddress = (
   );
 };
 
-export { checkAndFormatAddress };
+function getShelterNameBeforeSeparator(input: string): string {
+  return input.replace(/[(\-[{].*$/, '');
+}
+
+export { checkAndFormatAddress, getShelterNameBeforeSeparator };

src/components/DonationCart/DonationCart.tsx

@@ -0,0 +1,48 @@
+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 overflow-y-auto"
+      >
+        {donationOrderId ? (
+          <DonationSuccess donationOrderId={donationOrderId} />
+        ) : (
+          <DonationCartForm
+            onCancel={onClose}
+            shelterId={shelterId}
+            onSuccess={(orderId) => setDonationOrderId(orderId)}
+          />
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export { DonationCart };