fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

checkout: adjust layout

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-11-16 15:38:44 +03:00
parent b19b5b6ee2
commit 6e49a89045
3 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/address/address.module.css
View File

@@ -111,8 +111,6 @@
.checkoutContainer { .checkoutContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 80vh;
min-height: 80vh;
padding: 16px; padding: 16px;
gap: 16px; gap: 16px;
overflow: auto; overflow: auto;
@@ -161,7 +159,7 @@
.checkoutButtonContainer { .checkoutButtonContainer {
width: 100%; width: 100%;
padding: 16px 16px 0; padding: 16px 16px 0;
position: fixed; position: sticky;
bottom: 0; bottom: 0;
left: 0; left: 0;
height: 80px; height: 80px;

6
src/pages/checkout/components/CheckoutButton.tsx
View File

@@ -1,4 +1,4 @@
import { Button, FormInstance } from "antd"; import { Button, FormInstance, Layout } from "antd";
import { selectCart } from "features/order/orderSlice"; import { selectCart } from "features/order/orderSlice";
import { OrderType } from "pages/checkout/hooks/types.ts"; import { OrderType } from "pages/checkout/hooks/types.ts";
import { useCallback, useMemo } from "react"; import { useCallback, useMemo } from "react";
@@ -34,7 +34,7 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
); );
return ( return (
<div className={styles.checkoutButtonContainer}> <Layout.Footer className={styles.checkoutButtonContainer}>
{shouldShowSplitBill && ( {shouldShowSplitBill && (
<Button <Button
className={styles.splitBillButton} className={styles.splitBillButton}
@@ -52,6 +52,6 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
> >
{t("checkout.placeOrder")} {t("checkout.placeOrder")}
</Button> </Button>
</div> </Layout.Footer>
); );
} }

28
src/pages/checkout/page.tsx
View File

@@ -1,4 +1,4 @@
import { Form } from "antd"; import { Form, Layout } from "antd";
import OrderSummary from "components/OrderSummary/OrderSummary"; import OrderSummary from "components/OrderSummary/OrderSummary";
import PaymentMethods from "components/PaymentMethods/PaymentMethods"; import PaymentMethods from "components/PaymentMethods/PaymentMethods";
import ProHeader from "components/ProHeader/ProHeader"; import ProHeader from "components/ProHeader/ProHeader";
@@ -27,19 +27,21 @@ export default function CheckoutPage() {
}} }}
layout="vertical" layout="vertical"
> >
<ProHeader>{t("checkout.title")}</ProHeader> <Layout>
<div className={styles.checkoutContainer}> <ProHeader>{t("checkout.title")}</ProHeader>
<AddressSummary /> <Layout.Content className={styles.checkoutContainer}>
<RoomDetails /> <AddressSummary />
<OfficeDetails /> <RoomDetails />
<GiftDetails /> <OfficeDetails />
<BriefMenu /> <GiftDetails />
<PhoneCard /> <BriefMenu />
<PaymentMethods /> <PhoneCard />
<OrderSummary /> <PaymentMethods />
</div> <OrderSummary />
</Layout.Content>
<CheckoutButton form={form} /> <CheckoutButton form={form} />
</Layout>
</Form> </Form>
</> </>
); );