merges develop on staging

.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,16 +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';
 
 const App = () => {
   return (
     <Fragment>
       <Toaster />
       <BrowserRouter>
         <SessionProvider>
-          <Routes />
+          <DonationCartProvider>
+            <BackToTop />
+            <Routes />
+          </DonationCartProvider>
         </SessionProvider>
       </BrowserRouter>
     </Fragment>

src/components/BackToTop/BackToTop.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { ArrowUp } from 'lucide-react';
+
+const BackToTop = () => {
+  const [isVisible, setVisibility] = useState(false);
+
+  const scrollToTop = () => {
+    const root = document.getElementById('root');
+    if (!root) {
+      return;
+    }
+
+    root.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  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 
+    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>
+    )
+  );
+};
+
+export { BackToTop };

src/components/BackToTop/index.ts

@@ -0,0 +1,3 @@
+import { BackToTop } from "./BackToTop";
+
+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/Chip/Chip.tsx

@@ -5,23 +5,32 @@ import { cva } from 'class-variance-authority';
 const Chip = React.forwardRef<HTMLDivElement, IChipProps>((props, ref) => {
   const { label, className, variant = 'info', ...rest } = props;
 
-  const variants = cva('px-4 py-1.5 font-medium text-sm md:text-md rounded-2xl', {
-    variants: {
-      variant: {
-        warn: 'bg-light-yellow',
-        success: 'bg-light-green',
-        danger: 'bg-light-red',
-        alert: 'bg-light-orange',
-        info: 'bg-light-blue',
+  const variants = cva(
+    'px-4 py-1.5 font-medium text-sm md:text-md rounded-2xl',
+    {
+      variants: {
+        variant: {
+          warn: 'bg-light-yellow',
+          success: 'bg-light-green',
+          danger: 'bg-light-red',
+          alert: 'bg-light-orange',
+          info: 'bg-light-blue',
+          moreInfo: 'bg-gray-200 text-black-600',
+        },
       },
-    },
-    defaultVariants: {
-      variant: 'info',
-    },
-  });
+      defaultVariants: {
+        variant: 'info',
+      },
+    }
+  );
 
   return (
-    <span tabIndex={0} ref={ref} {...rest} className={variants({ className, variant })}>
+    <span
+      tabIndex={0}
+      ref={ref}
+      {...rest}
+      className={variants({ className, variant })}
+    >
       {label}
     </span>
   );

src/components/Chip/types.ts

@@ -1,4 +1,4 @@
-export type ChipVariant = 'info' | 'success' | 'warn' | 'danger';
+export type ChipVariant = 'info' | 'success' | 'warn' | 'danger' | 'moreInfo';
 
 export interface IChipProps extends React.ComponentPropsWithoutRef<'div'> {
   label: string;

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