130 lines
3.9 KiB
TypeScript
130 lines
3.9 KiB
TypeScript
import { Badge, Button } from "antd";
|
|
import ArabicPrice from "components/ArabicPrice";
|
|
import BackIcon from "components/Icons/BackIcon";
|
|
import CartIcon from "components/Icons/cart/CartIcon";
|
|
import NextIcon from "components/Icons/NextIcon";
|
|
import ProText from "components/ProText";
|
|
import { selectCartItems, selectGrandTotal } from "features/order/orderSlice";
|
|
import useBreakPoint from "hooks/useBreakPoint";
|
|
import { OrderType } from "pages/checkout/hooks/types";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import { colors, ProBlack2 } from "ThemeConstants";
|
|
|
|
export function MenuFooter() {
|
|
const items = useAppSelector(selectCartItems);
|
|
const { themeName } = useAppSelector((state) => state.theme);
|
|
const { isMobile, isTablet } = useBreakPoint();
|
|
const { t } = useTranslation();
|
|
const { subdomain } = useParams();
|
|
const { orderType } = useAppSelector((s) => s.order);
|
|
const totalItems = items.length;
|
|
const grandTotal = useAppSelector(selectGrandTotal);
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
|
|
console.log(orderType);
|
|
|
|
return (
|
|
<>
|
|
{(isMobile || isTablet) && (
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
padding: "16px 16px 0",
|
|
position: "fixed",
|
|
bottom: 0,
|
|
left: 0,
|
|
height: "80px",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-around",
|
|
gap: "1rem",
|
|
zIndex: 999,
|
|
backgroundColor: themeName === "light" ? "white" : ProBlack2,
|
|
}}
|
|
>
|
|
<Link
|
|
to={
|
|
orderType === OrderType.Pay
|
|
? `/${subdomain}/pay`
|
|
: `/${subdomain}/cart`
|
|
}
|
|
style={{
|
|
width: "100%",
|
|
padding: "0 16px",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
backgroundColor: colors.primary,
|
|
height: 48,
|
|
borderRadius: "999px",
|
|
}}
|
|
>
|
|
<Button
|
|
type="primary"
|
|
shape="round"
|
|
style={{
|
|
height: 48,
|
|
boxShadow: "none",
|
|
}}
|
|
>
|
|
<Badge
|
|
count={totalItems}
|
|
size="default"
|
|
offset={ isRTL ? [-2, 18] : [2, 18]}
|
|
style={{
|
|
borderColor: colors.primary,
|
|
color: "white",
|
|
fontSize: isMobile ? 10 : 12,
|
|
width: isMobile ? 10 : 12,
|
|
}}
|
|
|
|
>
|
|
<span
|
|
style={{
|
|
position: "relative",
|
|
top: 1,
|
|
}}
|
|
>
|
|
<CartIcon />
|
|
</span>
|
|
</Badge>
|
|
<ProText
|
|
style={{
|
|
color: "white",
|
|
margin: "0 10px",
|
|
}}
|
|
>
|
|
{orderType === OrderType.Pay
|
|
? t("menu.pay")
|
|
: t("menu.viewCart")}
|
|
</ProText>
|
|
</Button>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
}}
|
|
>
|
|
<ArabicPrice
|
|
price={grandTotal}
|
|
style={{
|
|
color: "var(--secondary-background)",
|
|
}}
|
|
/>
|
|
{!isRTL ? (
|
|
<NextIcon iconColor="var(--secondary-background)" />
|
|
) : (
|
|
<BackIcon iconColor="var(--secondary-background)" />
|
|
)}
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|