133 lines
3.8 KiB
TypeScript
133 lines
3.8 KiB
TypeScript
import { Card, Divider, Button, message } from "antd";
|
|
import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
|
|
import styles from "pages/cart/cart.module.css";
|
|
import ProTitle from "components/ProTitle.tsx";
|
|
import ProText from "components/ProText.tsx";
|
|
import { colors } from "ThemeConstants.ts";
|
|
import ArabicPrice from "components/ArabicPrice";
|
|
import EditIcon from "components/Icons/EditIcon.tsx";
|
|
import { TipBottomSheet } from "components/CustomBottomSheet/TipBottomSheet.tsx";
|
|
import { useState } from "react";
|
|
import { updateTip, selectCart } from "features/order/orderSlice.ts";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
|
|
import { TipDialog } from "components/CustomBottomSheet/TipDialog.tsx";
|
|
import useBreakPoint from "hooks/useBreakPoint.ts";
|
|
|
|
export default function RewardWaiterCard() {
|
|
const { t } = useTranslation();
|
|
const dispatch = useAppDispatch();
|
|
const { tip } = useAppSelector(selectCart);
|
|
const { isDesktop } = useBreakPoint();
|
|
|
|
const [isTipOpen, setIsTipOpen] = useState(false);
|
|
|
|
const handleTipSave = (value: string) => {
|
|
dispatch(updateTip(value));
|
|
message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
|
|
};
|
|
|
|
const handleTipClose = () => {
|
|
setIsTipOpen(false);
|
|
};
|
|
return (
|
|
<>
|
|
<Card>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "start",
|
|
gap: 16,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: 48,
|
|
gap: 10,
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
marginTop: 4,
|
|
}}
|
|
>
|
|
<DonateHandIcon className={styles.donateHandIcon} />
|
|
</div>
|
|
<div style={{ marginTop: 7 }}>
|
|
<ProTitle style={{ fontSize: 18, margin: 0 }}>
|
|
{t("cart.rewardYourWaiter")}
|
|
</ProTitle>
|
|
<ProText style={{ color: "rgba(95, 108, 123, 1)", fontSize: 12 }}>
|
|
{t("cart.rewardYourWaiter100")}
|
|
</ProText>
|
|
</div>
|
|
</div>
|
|
<Divider style={{ margin: "15px 0 15px 0" }} />
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-around",
|
|
}}
|
|
>
|
|
<Button
|
|
style={{
|
|
borderRadius: 100,
|
|
height: 32,
|
|
borderColor: "rgba(255, 183, 0, 0.12)",
|
|
backgroundColor: "#FFB7001F",
|
|
color: colors.primary,
|
|
}}
|
|
>
|
|
<ArabicPrice price={0.5} />
|
|
</Button>
|
|
<Button
|
|
style={{
|
|
borderRadius: 100,
|
|
height: 32,
|
|
backgroundColor: "#5F6C7B0D",
|
|
color: "rgba(95, 108, 123, 1)",
|
|
border: "none",
|
|
}}
|
|
>
|
|
<ArabicPrice price={1.0} />
|
|
</Button>
|
|
<Button
|
|
style={{
|
|
borderRadius: 100,
|
|
height: 32,
|
|
color: colors.primary,
|
|
borderColor: "#d9d9d9",
|
|
}}
|
|
onClick={() => setIsTipOpen(true)}
|
|
>
|
|
<EditIcon />
|
|
<ProText
|
|
style={{
|
|
color: colors.primary,
|
|
}}
|
|
>
|
|
{t("cart.other")}
|
|
</ProText>
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
{isDesktop ? (
|
|
<TipDialog
|
|
isOpen={isTipOpen}
|
|
onClose={handleTipClose}
|
|
initialValue={tip}
|
|
onSave={handleTipSave}
|
|
/>
|
|
) : (
|
|
<TipBottomSheet
|
|
isOpen={isTipOpen}
|
|
onClose={handleTipClose}
|
|
initialValue={tip}
|
|
onSave={handleTipSave}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|