143 lines
4.3 KiB
TypeScript
143 lines
4.3 KiB
TypeScript
import { Button, Layout } 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 { ProGray1 } from "ThemeConstants";
|
|
import PayForActions from "./components/PayForActions";
|
|
import PaymentSummary from "./components/PaymentSummary";
|
|
import TotalPeopleActions from "./components/TotalPeopleActions";
|
|
import styles from "./SplitBillPage.module.css";
|
|
|
|
export default function SplitBillPage() {
|
|
const { t } = useTranslation();
|
|
const { subdomain } = useParams();
|
|
|
|
return (
|
|
<>
|
|
<Layout>
|
|
<ProHeader>{t("checkout.splitBill")}</ProHeader>
|
|
<Layout.Content
|
|
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: -10,
|
|
}}
|
|
>
|
|
<PeopleIcon />
|
|
</Button>
|
|
<ProText
|
|
style={{
|
|
fontSize: "1rem",
|
|
marginTop: 3,
|
|
color: ProGray1,
|
|
}}
|
|
>
|
|
{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: -10,
|
|
}}
|
|
>
|
|
<PeopleIcon />
|
|
</Button>
|
|
<ProText
|
|
style={{
|
|
fontSize: "1rem",
|
|
marginTop: 2,
|
|
color: ProGray1,
|
|
}}
|
|
>
|
|
{t("checkout.payFor")}
|
|
</ProText>
|
|
</div>
|
|
|
|
<PayForActions />
|
|
</div>
|
|
</div>
|
|
</ProInputCard>
|
|
<PaymentMethods />
|
|
<PaymentSummary />
|
|
</Layout.Content>
|
|
<Layout.Footer className={styles.checkoutButtonContainer}>
|
|
<Link to={`/${subdomain}/order`} style={{ width: "100%" }}>
|
|
<Button
|
|
type="primary"
|
|
shape="round"
|
|
className={styles.placeOrderButton}
|
|
>
|
|
{t("checkout.placeOrder")}
|
|
</Button>
|
|
</Link>
|
|
</Layout.Footer>
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|