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

add split bill participants BS

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2026-01-02 06:14:44 +03:00
parent b33bae562d
commit 1c5c212574
5 changed files with 287 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/pages/order/page.tsx
View File

@@ -37,6 +37,8 @@ import { QRBottomSheet } from "pages/pay/components/splitBill/QRBottomSheet";
import NewRateIcon from "components/Icons/order/NewRateIcon";
import NoteIcon from "components/Icons/NoteIcon";
import SuccessIcon from "components/Icons/SuccessIcon";
import ProInputCard from "components/ProInputCard/ProInputCard";
import { SplitBillParticipantsBottomSheet } from "./components/SplitBillParticipantsBottomSheet";
export default function OrderPage() {
const { t } = useTranslation();
@@ -47,7 +49,7 @@ export default function OrderPage() {
const hasRefetchedRef = useRef(false);
const [isOpen, setIsOpen] = useState(false);
const [isRateOrderOpen, setIsRateOrderOpen] = useState(false);
const [isSplitBillParticipantsBottomSheetOpen, setIsSplitBillParticipantsBottomSheetOpen] = useState(false);
const { data: orderDetails } = useGetOrderDetailsQuery(
{
orderID: orderId || "",
@@ -322,9 +324,8 @@ export default function OrderPage() {
</Tooltip>
</Flex>
) : (
<div style={{margin: "56px 0"}}>
<OrderDishIcon className={styles.orderDishIcon} />
<div style={{ margin: "56px 0" }}>
<OrderDishIcon className={styles.orderDishIcon} />
</div>
)}
@@ -497,32 +498,121 @@ export default function OrderPage() {
<PaymentDetails order={orderDetails?.order} />
{hasClosedStatus && (
<Card
className={styles.inviteToBillCard}
onClick={() => setIsOpen(true)}
{/* inviteToBill */}
{!hasClosedStatus && (
<ProInputCard
title={
<>
<div
style={{
display: "flex",
flexDirection: "column",
marginBottom: 9,
gap: 2 ,
}}
>
<ProText
style={{
fontSize: "18px",
fontWeight: 500,
fontStyle: "Medium",
lineHeight: "140%",
letterSpacing: "0%",
color: "#333333",
}}
>
{t("order.whosPaidTheirShareSplitBill")}
</ProText>
<ProText
style={{
fontWeight: 400,
fontStyle: "Regular",
fontSize: 12,
lineHeight: "140%",
letterSpacing: "0%",
color: "#777580",
}}
>
{t("order.seeWhoPaidAndHowMuch")}
</ProText>
</div>
</>
}
>
<div
<div className={styles.inviteToBill}
onClick={() => setIsSplitBillParticipantsBottomSheetOpen(true)}>
<Button
shape="circle"
iconPlacement="start"
size="small"
className={styles.addButton}
style={{
background: "#F9F9FA",
width: 28,
height: 28,
border: "none",
color: "#FFB700",
}}
>
<ProText style={{ color: "#1F1C2E" }}> 1 </ProText>
</Button>
<div
style={{
display: "flex",
flexDirection: "column",
gap: 4,
width: "100%",
}}
>
<ProText
style={{
fontWeight: 500,
fontStyle: "Medium",
fontSize: 14,
lineHeight: "140%",
letterSpacing: "0%",
color: "#777580",
}}
>
{t("order.personHasPaid")}
</ProText>
</div>
{isRTL ? (
<BackIcon iconSize={24} />
) : (
<NextIcon iconSize={24} />
)}
</div>
<Button
type="text"
style={{
height: 48,
width: "100%",
display: "flex",
flexDirection: "row",
justifyContent: "center",
marginTop: 1,
alignItems: "center",
gap: 8,
border: "1px solid #C0BFC4",
borderRadius: 888,
marginTop: 16,
}}
onClick={() => setIsOpen(true)}
>
<div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
<ProTitle
level={5}
style={{
marginTop: 1,
fontSize: 14,
}}
>
{t("order.inviteToBill")}
</ProTitle>
</div>
</div>
</Card>
<ProText
style={{
fontWeight: 400,
fontStyle: "Regular",
fontSize: 16,
lineHeight: "140%",
letterSpacing: "0%",
color: "#333333",
}}
>
{t("order.inviteOthersToBill")}
</ProText>
</Button>
</ProInputCard>
)}
<QRBottomSheet isOpen={isOpen} onClose={() => setIsOpen(false)} />
@@ -589,6 +679,7 @@ export default function OrderPage() {
</Layout.Footer>
)}
</Layout>
<SplitBillParticipantsBottomSheet isOpen={isSplitBillParticipantsBottomSheetOpen} onClose={() => setIsSplitBillParticipantsBottomSheetOpen(false)} />
</>
);
}