91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import { Card, Checkbox, Divider, Space } from "antd";
|
|
import ArabicPrice from "components/ArabicPrice";
|
|
import {
|
|
selectCart,
|
|
selectCartTotal,
|
|
selectGrandTotal,
|
|
} from "features/order/orderSlice";
|
|
import { OrderType } from "pages/checkout/hooks/types";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useParams } from "react-router-dom";
|
|
import { useGetRestaurantDetailsQuery } from "redux/api/others";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import ProText from "components/ProText";
|
|
import ProTitle from "components/ProTitle";
|
|
import styles from "./VoucherSummary.module.css";
|
|
import { CSSProperties } from "react";
|
|
|
|
export default function VoucherSummary() {
|
|
const { t } = useTranslation();
|
|
const { subdomain } = useParams();
|
|
const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
|
|
const subtotal = useAppSelector(selectCartTotal);
|
|
const grandTotal = useAppSelector(selectGrandTotal);
|
|
|
|
const titlesStyle: CSSProperties = {
|
|
fontWeight: 400,
|
|
fontStyle: "Regular",
|
|
fontSize: 12,
|
|
lineHeight: "140%",
|
|
letterSpacing: "0%",
|
|
textAlign: "center",
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Card className={`${styles.voucherSummary}`}>
|
|
<ProTitle
|
|
style={{
|
|
fontWeight: 500,
|
|
fontStyle: "Medium",
|
|
fontSize: 18,
|
|
lineHeight: "140%",
|
|
letterSpacing: "0%",
|
|
color: "#333333",
|
|
}}
|
|
>
|
|
{t("cart.voucherSummary")}
|
|
</ProTitle>
|
|
<Divider style={{ margin: "15px 0 15px 0" }} />
|
|
<Space orientation="vertical" style={{ width: "100%", gap: 16 }}>
|
|
<div className={styles.summaryRow}>
|
|
<ProText type="secondary" style={titlesStyle}>
|
|
{t("cart.voucherBalance")}
|
|
</ProText>
|
|
<ArabicPrice price={subtotal} textStyle={titlesStyle} />
|
|
</div>
|
|
<div className={styles.summaryRow}>
|
|
<ProText type="secondary" style={titlesStyle}>
|
|
{t("cart.voucherApplied")}
|
|
</ProText>
|
|
<ArabicPrice
|
|
price={Number(restaurant?.delivery_fees || 0)}
|
|
textStyle={{ ...titlesStyle, color: "#434E5C" }}
|
|
/>
|
|
</div>
|
|
|
|
<div className={`${styles.summaryRow} ${styles.totalRow}`}>
|
|
<ProText
|
|
style={{
|
|
fontWeight: 600,
|
|
fontStyle: "SemiBold",
|
|
fontSize: 14,
|
|
lineHeight: "140%",
|
|
letterSpacing: "0%",
|
|
textAlign: "center",
|
|
color: "#333333",
|
|
}}
|
|
>
|
|
{t("cart.remainingVoucherAmount")}
|
|
</ProText>
|
|
<ArabicPrice
|
|
price={grandTotal}
|
|
textStyle={{ ...titlesStyle, color: "#434E5C" }}
|
|
/>
|
|
</div>
|
|
</Space>
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|