132 lines
3.8 KiB
TypeScript
132 lines
3.8 KiB
TypeScript
import { Button, Form, Input, message } from "antd";
|
|
import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
|
|
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
|
|
import ProText from "components/ProText";
|
|
import {
|
|
selectCart,
|
|
updateCoupon,
|
|
updateDiscount,
|
|
} from "features/order/orderSlice.ts";
|
|
import styles from "pages/cart/cart.module.css";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useGetDiscountMutation } from "redux/api/others";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
|
|
|
|
export default function CouponCard() {
|
|
const { t } = useTranslation();
|
|
const dispatch = useAppDispatch();
|
|
const { restaurant } = useAppSelector((state) => state.order);
|
|
const { coupon } = useAppSelector(selectCart);
|
|
// const { isDesktop } = useBreakPoint();
|
|
const [getDiscount] = useGetDiscountMutation();
|
|
|
|
// const [isCouponOpen, setIsCouponOpen] = useState(false);
|
|
|
|
const handleCouponSave = (value: string) => {
|
|
getDiscount({
|
|
discountCode: value,
|
|
restaurantID: restaurant.restautantId || "",
|
|
})
|
|
.unwrap()
|
|
.then((response) => {
|
|
dispatch(
|
|
updateDiscount({
|
|
value: response.value,
|
|
isGift: response.isGift,
|
|
isDiscount: response.isDiscount,
|
|
}),
|
|
);
|
|
message.success(t("cart.couponApplied"));
|
|
})
|
|
.catch((error) => {
|
|
message.error(error.data.message || t("cart.couponInvalid"));
|
|
});
|
|
};
|
|
|
|
// const handleCouponClose = () => {
|
|
// setIsCouponOpen(false);
|
|
// };
|
|
|
|
return (
|
|
<>
|
|
<ProInputCard
|
|
title={t("cart.couponCode")}
|
|
// titleRight={
|
|
// <div
|
|
// style={{
|
|
// display: "flex",
|
|
// flexDirection: "row",
|
|
// alignItems: "center",
|
|
// gap: 10,
|
|
// }}
|
|
// onClick={() => setIsCouponOpen(true)}
|
|
// >
|
|
// <ProText
|
|
// style={{
|
|
// color: colors.primary,
|
|
// fontSize: 14,
|
|
// cursor: "pointer",
|
|
// }}
|
|
// >
|
|
// {t("cart.viewOffers")}
|
|
// </ProText>
|
|
// <DonateIcon />
|
|
// </div>
|
|
// }
|
|
>
|
|
<Form.Item name="coupon">
|
|
<Input
|
|
placeholder={t("cart.couponCode")}
|
|
size="large"
|
|
autoFocus={false}
|
|
style={{ padding: "7px 11px", height: 48 }}
|
|
onChange={(e) => {
|
|
dispatch(updateCoupon(e.target.value));
|
|
}}
|
|
suffix={
|
|
<Button
|
|
style={{
|
|
width: 100,
|
|
height: 32,
|
|
borderRadius: 100,
|
|
backgroundColor: "#333333",
|
|
color: "white",
|
|
fontWeight: 500,
|
|
fontStyle: "Medium",
|
|
fontSize: 14,
|
|
lineHeight: "140%",
|
|
letterSpacing: "0%"
|
|
}}
|
|
onClick={() => handleCouponSave(coupon)}
|
|
icon={<CouponHeartIcon className={styles.couponApplyIcon} />}
|
|
iconPlacement="end"
|
|
>
|
|
<ProText
|
|
style={{ position: "relative", top: -1, color: "white" }}
|
|
>
|
|
{t("cart.apply")}
|
|
</ProText>
|
|
</Button>
|
|
}
|
|
/>
|
|
</Form.Item>
|
|
</ProInputCard>
|
|
{/* {isDesktop ? (
|
|
<CouponDialog
|
|
isOpen={isCouponOpen}
|
|
onClose={handleCouponClose}
|
|
initialValue={coupon}
|
|
onSave={handleCouponSave}
|
|
/>
|
|
) : (
|
|
<CouponBottomSheet
|
|
isOpen={isCouponOpen}
|
|
onClose={handleCouponClose}
|
|
initialValue={coupon}
|
|
onSave={handleCouponSave}
|
|
/>
|
|
)} */}
|
|
</>
|
|
);
|
|
}
|