149 lines
4.3 KiB
TypeScript
149 lines
4.3 KiB
TypeScript
import { Button } from "antd";
|
|
import PeopleIcon from "components/Icons/PeopleIcon";
|
|
import PaymentMethods from "components/PaymentMethods/PaymentMethods";
|
|
import ProHeader from "components/ProHeader/ProHeader";
|
|
import ProInputCard from "components/ProInputCard/ProInputCard";
|
|
import ProText from "components/ProText";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import { ProBlack2 } from "ThemeConstants";
|
|
import PayForActions from "./components/PayForActions";
|
|
import PaymentSummary from "./components/PaymentSummary";
|
|
import TotalPeopleActions from "./components/TotalPeopleActions";
|
|
|
|
export default function SplitBillPage() {
|
|
const { t } = useTranslation();
|
|
const { id } = useParams();
|
|
const { themeName } = useAppSelector((state) => state.theme);
|
|
|
|
return (
|
|
<>
|
|
<ProHeader>{t("checkout.splitBill")}</ProHeader>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
height: "82vh",
|
|
padding: 16,
|
|
gap: 16,
|
|
overflow: "auto",
|
|
scrollbarWidth: "none",
|
|
}}
|
|
>
|
|
<ProInputCard title={t("checkout.splitBill")}>
|
|
<div
|
|
style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
gap: "1rem",
|
|
padding: 8,
|
|
}}
|
|
>
|
|
<div
|
|
style={{ display: "flex", flexDirection: "row", gap: "1rem" }}
|
|
>
|
|
<Button
|
|
type="text"
|
|
shape="circle"
|
|
style={{
|
|
backgroundColor: "rgba(95, 108, 123, 0.05)",
|
|
position: "relative",
|
|
top: -5,
|
|
}}
|
|
>
|
|
<PeopleIcon />
|
|
</Button>
|
|
<ProText
|
|
style={{
|
|
fontSize: "1rem",
|
|
marginTop: 2,
|
|
color: "rgba(67, 78, 92, 1)",
|
|
}}
|
|
>
|
|
{t("checkout.totalPeople")}
|
|
</ProText>
|
|
</div>
|
|
|
|
<TotalPeopleActions />
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
gap: "1rem",
|
|
padding: 8,
|
|
}}
|
|
>
|
|
<div
|
|
style={{ display: "flex", flexDirection: "row", gap: "1rem" }}
|
|
>
|
|
<Button
|
|
type="text"
|
|
shape="circle"
|
|
style={{
|
|
backgroundColor: "rgba(95, 108, 123, 0.05)",
|
|
position: "relative",
|
|
top: -5,
|
|
}}
|
|
>
|
|
<PeopleIcon />
|
|
</Button>
|
|
<ProText
|
|
style={{
|
|
fontSize: "1rem",
|
|
marginTop: 2,
|
|
color: "rgba(67, 78, 92, 1)",
|
|
}}
|
|
>
|
|
{t("checkout.payFor")}
|
|
</ProText>
|
|
</div>
|
|
|
|
<PayForActions />
|
|
</div>
|
|
</div>
|
|
</ProInputCard>
|
|
<PaymentMethods />
|
|
<PaymentSummary />
|
|
</div>
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
padding: "16px 16px 0",
|
|
position: "fixed",
|
|
bottom: 0,
|
|
left: 0,
|
|
height: "10vh",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-around",
|
|
gap: "1rem",
|
|
backgroundColor: themeName === "light" ? "white" : ProBlack2,
|
|
}}
|
|
>
|
|
<Link to={`${id}/order`} style={{ width: "100%" }}>
|
|
<Button
|
|
type="primary"
|
|
shape="round"
|
|
style={{
|
|
width: "100%",
|
|
height: 48,
|
|
marginBottom: 16,
|
|
boxShadow: "none",
|
|
}}
|
|
>
|
|
{t("checkout.placeOrder")}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|