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

working on tip card and BS

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2026-01-05 20:00:54 +03:00
parent ab265bf09a
commit c8bf8ff621
5 changed files with 59 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/CustomBottomSheet/TipBottomSheet.tsx
View File

@@ -3,21 +3,22 @@ import WaiterRewardingIcon from "components/Icons/waiter/WaiterRewardingIcon";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import { updateTip } from "features/order/orderSlice";
import { useAppDispatch } from "redux/hooks";
interface TipBottomSheetProps {
isOpen: boolean;
onClose: () => void;
initialValue: string;
onSave: (value: string) => void;
}
export function TipBottomSheet({
isOpen,
onClose,
initialValue,
onSave,
}: TipBottomSheetProps) {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const [value, setValue] = useState(initialValue);
useEffect(() => {
@@ -25,7 +26,8 @@ export function TipBottomSheet({
}, [initialValue]);
const handleSave = () => {
onSave(value);
const numAmount = parseFloat(value) || 0;
dispatch(updateTip(numAmount.toString()));
onClose();
};
@@ -39,7 +41,6 @@ export function TipBottomSheet({
isOpen={isOpen}
onClose={handleCancel}
title={t("cart.tip")}
showCloseButton={false}
initialSnap={1}
height={370}
snapPoints={[370]}
@@ -64,6 +65,7 @@ export function TipBottomSheet({
placeholder={t("cart.amount")}
autoFocus={false}
size="large"
style={{ height: 48 }}
/>
<br />

14
src/components/CustomBottomSheet/TipDialog.tsx
View File

@@ -2,29 +2,27 @@ import { Button, Input, Modal } from "antd";
import WaiterRewardingIcon from "components/Icons/waiter/WaiterRewardingIcon";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch } from "redux/hooks";
import { updateTip } from "features/order/orderSlice";
interface TipDialogProps {
isOpen: boolean;
onClose: () => void;
initialValue: string;
onSave: (value: string) => void;
}
export function TipDialog({
isOpen,
onClose,
initialValue,
onSave,
}: TipDialogProps) {
export function TipDialog({ isOpen, onClose, initialValue }: TipDialogProps) {
const { t } = useTranslation();
const [value, setValue] = useState(initialValue);
const dispatch = useAppDispatch();
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
const handleSave = () => {
onSave(value);
const numAmount = parseFloat(value) || 0;
dispatch(updateTip(numAmount.toString()));
onClose();
};

9
src/pages/CardDetails/components/GiftAmountBottomSheet.tsx
View File

@@ -1,14 +1,9 @@
import { Button, Form } from "antd";
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
import { useState, useEffect } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import {
selectCart,
selectGrandTotal,
updateGiftDetails,
updateSplitBillAmount,
} from "features/order/orderSlice";
import { selectCart, updateGiftDetails } from "features/order/orderSlice";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import ProText from "components/ProText";
import { ProInputNumber } from "components/Inputs/ProInputNumber";

6
src/pages/cart/cart.module.css
View File

@@ -602,12 +602,16 @@
top: 1px;
}
.editIcon {
.editIconOnSide {
position: absolute;
top: -7px;
right: 5px;
}
.editIconMiddle {
position: relative;
}
:global(.ant-app-rtl) .editIcon {
right: auto;
left: 5px;

63
src/pages/cart/components/RewardWaiterCard.tsx
View File

@@ -5,11 +5,10 @@ import { TipDialog } from "components/CustomBottomSheet/TipDialog.tsx";
import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
import EditIcon from "components/Icons/EditIcon.tsx";
import ProText from "components/ProText.tsx";
import ProTitle from "components/ProTitle.tsx";
import { selectCart, updateTip } from "features/order/orderSlice.ts";
import useBreakPoint from "hooks/useBreakPoint.ts";
import styles from "pages/cart/cart.module.css";
import { useState } from "react";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
@@ -18,12 +17,18 @@ export default function RewardWaiterCard() {
const dispatch = useAppDispatch();
const { tip } = useAppSelector(selectCart);
const { isDesktop } = useBreakPoint();
const [selectedTip, setSelectedTip] = useState<number | null>(null);
const [isTipOpen, setIsTipOpen] = useState(false);
const handleTipSave = (value: string) => {
dispatch(updateTip(value));
message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
const isDefaultTip = useMemo(() => {
const amount = parseFloat(tip);
return amount === 0.5 || amount === 1.0 || amount === 3.0;
}, [tip]);
const handleTipClick = (value: number) => {
setSelectedTip(value);
dispatch(updateTip(value.toString()));
};
const handleTipClose = () => {
@@ -86,9 +91,9 @@ export default function RewardWaiterCard() {
<Divider style={{ margin: "15px 0 15px 0" }} />
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
display: "grid",
gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
gap: 16,
}}
>
<Button
@@ -96,8 +101,11 @@ export default function RewardWaiterCard() {
borderRadius: 100,
height: 32,
border: "none",
backgroundColor: "#5F6C7B0D",
backgroundColor:
selectedTip === 0.5 && isDefaultTip ? "#FFB7001F" : "#5F6C7B0D",
}}
iconPlacement="end"
onClick={() => handleTipClick(0.5)}
>
<ArabicPrice
price={0.5}
@@ -108,7 +116,8 @@ export default function RewardWaiterCard() {
lineHeight: "140%",
letterSpacing: "0%",
textAlign: "center",
color: "#5F6C7B",
color:
selectedTip === 0.5 && isDefaultTip ? "#CC9300" : "#5F6C7B",
}}
/>
</Button>
@@ -117,8 +126,10 @@ export default function RewardWaiterCard() {
borderRadius: 100,
height: 32,
border: "none",
backgroundColor: "#5F6C7B0D",
backgroundColor:
selectedTip === 1 && isDefaultTip ? "#FFB7001F" : "#5F6C7B0D",
}}
onClick={() => handleTipClick(1)}
>
<ArabicPrice
price={1.0}
@@ -129,7 +140,8 @@ export default function RewardWaiterCard() {
lineHeight: "140%",
letterSpacing: "0%",
textAlign: "center",
color: "#5F6C7B",
color:
selectedTip === 1 && isDefaultTip ? "#CC9300" : "#5F6C7B",
}}
/>
</Button>
@@ -137,24 +149,31 @@ export default function RewardWaiterCard() {
style={{
borderRadius: 100,
height: 32,
border: "none",
backgroundColor: "#FFB7001F",
backgroundColor: tip && !isDefaultTip ? "#FFB7001F" : "inherit",
border: tip && !isDefaultTip ? "none" : "1px solid #C0BFC4",
}}
icon={<EditIcon className={styles.editIcon} />}
iconPlacement="end"
icon={
<EditIcon
className={styles.editIcon}
color={tip && !isDefaultTip ? "#CC9300" : "#3D3B4A"}
/>
}
iconPlacement="start"
onClick={() => setIsTipOpen(true)}
>
<ArabicPrice
price={3.0}
textStyle={{
<ProText
style={{
color: tip && !isDefaultTip ? "#CC9300" : "#FFB700",
fontWeight: 500,
fontStyle: "Medium",
fontSize: 14,
lineHeight: "140%",
letterSpacing: "0%",
textAlign: "center",
color: "#CC9300",
}}
/>
>
{tip && !isDefaultTip ? tip : t("cart.other")}
</ProText>
</Button>
</div>
</Card>
@@ -163,14 +182,12 @@ export default function RewardWaiterCard() {
isOpen={isTipOpen}
onClose={handleTipClose}
initialValue={tip}
onSave={handleTipSave}
/>
) : (
<TipBottomSheet
isOpen={isTipOpen}
onClose={handleTipClose}
initialValue={tip}
onSave={handleTipSave}
/>
)}
</>