Add floating checkout button when scrolled down on page

1 files changed, 32 insertions, 5 deletions

diff --git a/thallium-frontend/src/components/CartStatus.tsx b/thallium-frontend/src/components/CartStatus.tsx
index 8fd54d9..848e1cc 100644
--- a/thallium-frontend/src/components/CartStatus.tsx
+++ b/thallium-frontend/src/components/CartStatus.tsx
@@ -1,8 +1,10 @@
 import { useSelector } from "react-redux";
 import { RootState } from "../store";
+import { useRef, useEffect } from "react";
 import styled from "styled-components";
 import Button from "./forms/Button";
 import { useNavigate } from "react-router-dom";
+import { useVisible } from "../utils/hooks";
 
 const StatusHolder = styled.span`
     margin-top: 1rem;
@@ -10,20 +12,45 @@ const StatusHolder = styled.span`
 
 `;
 
+const FloatingButton = styled(Button)<{ $visible: boolean }>`
+position: fixed;
+z-index: 10;
+opacity: ${(props) => props.$visible ? "1" : "0"};
+bottom: 0;
+margin-bottom: 30px;
+right: 0;
+margin-right: 30px;
+transition: all 0.25s;
+`
+
 const CartStatus = () => {
     const cart = useSelector((state: RootState) => state.cart);
     const total = cart.cart.reduce((acc, item) => acc + item.quantity, 0);
     const price = cart.cart.reduce((acc, item) => acc + (parseFloat(item.estPrice) * item.quantity), 0);
 
+    const staticButtonRef = useRef<Button>(null);
+    const buttonVisible = useVisible(staticButtonRef);
+
+    useEffect(() => {
+        console.log(buttonVisible)
+    }, [buttonVisible])
+
+    const checkoutMsg = total > 0 ? "Checkout >" : "Add some items to proceed to checkout"
+
     const navigate = useNavigate();
 
+    const buttonCallback = () => {
+        navigate("/checkout");
+    }
+
     return <>
         <StatusHolder>You currently have {total} item{total !== 1 ? "s" : null} in your cart, totalling ${price.toFixed(2)} USD</StatusHolder>
-        {total > 0 ? <Button onClick={() => {
-            navigate("/checkout");
-        }}>
-            Checkout &gt;
-        </Button> : null}
+        <Button ref={staticButtonRef} disabled={total === 0} onClick={buttonCallback}>
+            {checkoutMsg}
+        </Button>
+        <FloatingButton $visible={!buttonVisible && total > 0} onClick={buttonCallback}>
+            {checkoutMsg}
+        </FloatingButton>
     </>;
 };