blob: 02c7661219a8757cb4460f984c89bfa068ef9348 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
import { useSelector } from "react-redux";
import { RootState } from "../store";
import { useRef } from "react";
import styled from "styled-components";
import Button from "./forms/Button";
import { useNavigate } from "react-router-dom";
import { useVisible } from "../utils/hooks";
import Card from "./Card";
const StatusHolder = styled.div`
margin-top: 1rem;
margin-bottom: 1rem;
`;
const FloatingStatusHolder = styled(StatusHolder) <{ $visible: boolean }>`
position: fixed;
z-index: 10;
margin-top: 2rem;
opacity: ${(props) => props.$visible ? "1" : "0"};
transition: all 0.25s;
${Card} {
box-shadow: none;
}
`;
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;
font-size: 1.1em;
`;
const DetailsSpan = styled.span`
color: ${(props) => props.theme.accent};
font-weight: bold;
font-size: 1.1em;
`;
const CartStatusContainer = styled.div`
text-align: center;
`;
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<HTMLButtonElement>(null);
const buttonVisible = useVisible(staticButtonRef, true);
const checkoutMsg = total > 0 ? "Confirm & Checkout >" : "Add some items to proceed to checkout";
const navigate = useNavigate();
const buttonCallback = () => {
navigate("/checkout");
};
const statusDetails = (
<>
You currently have <DetailsSpan>{total}</DetailsSpan> item{ total !== 1 ? "s" : null } in your cart, totalling <DetailsSpan>${ price.toFixed(2) } USD</DetailsSpan>
</>
);
return <>
<Card title="Your Cart">
<CartStatusContainer>
<StatusHolder>{statusDetails}</StatusHolder>
<Button ref={staticButtonRef} disabled={total === 0} onClick={buttonCallback}>
{checkoutMsg}
</Button>
</CartStatusContainer>
</Card>
<FloatingStatusHolder $visible={!buttonVisible}>
<Card title="Your Cart">
{statusDetails}
</Card>
</FloatingStatusHolder>
<FloatingButton $visible={!buttonVisible && total > 0} onClick={buttonCallback}>
{checkoutMsg}
</FloatingButton>
</>;
};
export default CartStatus;
|
