Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 32x 32x 32x 32x 1x 1x 1x 12x | import { ModalHolder, useModal } from "@ebay/nice-modal-react";
import GiveButton from "@shared/Button/GiveButton";
import { useAppTheme } from "@theme/v2/Provider";
import { CART_PREVIEW_MODAL } from "modals/modal_names";
import { useCart } from "@sections/PayBuilder/provider/CartContext";
import GiveText from "@shared/Text/GiveText";
import { Stack, Container } from "@mui/material";
import { styled } from "@theme/v2/Provider";
import { CheckoutNavButton } from "./CheckoutNavButton";
import { CURRENCY } from "@constants/constants";
export function CartCheckoutFooter({
onClick,
isLightBackground,
}: {
onClick?: () => void;
isLightBackground?: boolean;
}) {
const { palette } = useAppTheme();
const {
subTotal,
totalItemsInCart,
addToCart,
removeFromCart,
cartItems,
setCartModalProps,
} = useCart();
const cartModalHandler = useModal(CART_PREVIEW_MODAL);
return (
<Wrapper>
<GiveText
sx={{
color: isLightBackground ? palette.text.primary : palette.text.invert,
}}
>
{`${totalItemsInCart} item${
totalItemsInCart !== 1 ? "s" : ""
} - ${subTotal} ${CURRENCY}`}
</GiveText>
<Stack direction="row" gap="12px">
<GiveButton
size="large"
color="light"
label={"View Cart"}
onClick={() => {
Iif (onClick) return onClick();
cartModalHandler.show({
saveOnClose: (open: boolean, onClose: () => void) => {
setCartModalProps({ open, onClose });
},
});
}}
sx={{
borderColor: palette.primitive?.transparent["darken-5"],
color: isLightBackground ? palette.text.primary : palette.text.invert,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
/>
<CheckoutNavButton />
<ModalHolder
modal={CART_PREVIEW_MODAL}
handler={cartModalHandler}
cartItems={cartItems}
totalAmount={subTotal}
addToCart={addToCart}
removeFromCart={removeFromCart}
/>
</Stack>
</Wrapper>
);
}
const Wrapper = styled(Container)({
display: "flex",
justifyContent: "space-between",
alignItems: "center",
});
|