150 lines
3.9 KiB
TypeScript
150 lines
3.9 KiB
TypeScript
// import { useGlobals } from "../../hooks/useGlobals";
|
|
import { Button, Card, message } from "antd";
|
|
import BackIcon from "components/Icons/BackIcon";
|
|
import CancelIcon from "components/Icons/CancelIcon";
|
|
import CancelPopupIcon from "components/Icons/CancelPopupIcon";
|
|
import NextIcon from "components/Icons/NextIcon";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useParams } from "react-router-dom";
|
|
import { useCancelOrderMutation } from "redux/api/others";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
|
|
import ProText from "../ProText";
|
|
import ProTitle from "../ProTitle";
|
|
import styles from "./CustomBottomSheet.module.css";
|
|
|
|
export function CancelOrderBottomSheet() {
|
|
const { t } = useTranslation();
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
const { orderId } = useParams();
|
|
|
|
const [cancelOrder] = useCancelOrderMutation();
|
|
|
|
const handleCancelOrder = () => {
|
|
setIsOpen(false);
|
|
cancelOrder({
|
|
orderID: orderId || "",
|
|
}).then((res: any) => {
|
|
if (res.error) {
|
|
message.error(res.error.data.message);
|
|
} else {
|
|
message.success(res.data.message);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleKeepOrder = () => {
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Card className={styles.homeServiceCard} onClick={() => setIsOpen(true)}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
marginTop: 1,
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
|
|
<CancelIcon />
|
|
|
|
<ProTitle
|
|
level={5}
|
|
style={{
|
|
marginTop: 1,
|
|
fontSize: 14,
|
|
color: "#ea1f22",
|
|
}}
|
|
>
|
|
{t("order.cancelOrder")}
|
|
</ProTitle>
|
|
</div>
|
|
|
|
{isRTL ? (
|
|
<BackIcon className={styles.serviceIcon} />
|
|
) : (
|
|
<NextIcon className={styles.serviceIcon} />
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
<ProBottomSheet
|
|
isOpen={isOpen}
|
|
onClose={() => setIsOpen(false)}
|
|
title={t("order.cancelOrder")}
|
|
showCloseButton={false}
|
|
initialSnap={1}
|
|
height={350}
|
|
snapPoints={[350]}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 10,
|
|
marginTop: 15,
|
|
}}
|
|
>
|
|
<CancelPopupIcon />
|
|
|
|
<ProText
|
|
style={{
|
|
fontSize: "1rem",
|
|
}}
|
|
>
|
|
{t("order.areYouSureYouWantToCancelThisOrder?")}
|
|
</ProText>
|
|
|
|
<ProText
|
|
type="secondary"
|
|
style={{
|
|
fontSize: 14,
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
{t("order.thisActionCannotBeUndone")}
|
|
</ProText>
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: 10,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Button
|
|
type="primary"
|
|
style={{ width: "100%", height: 48, color: "#FFF" }}
|
|
onClick={handleKeepOrder}
|
|
>
|
|
{t("order.keepOrder")}
|
|
</Button>
|
|
|
|
<Button
|
|
type="primary"
|
|
style={{
|
|
width: "100%",
|
|
height: 48,
|
|
color: "#ea1f22",
|
|
borderColor: "#ea1f22",
|
|
backgroundColor: "#fff",
|
|
}}
|
|
onClick={handleCancelOrder}
|
|
>
|
|
{t("order.cancelOrder")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</ProBottomSheet>
|
|
</>
|
|
);
|
|
}
|