From c8bf8ff621c10eae9e0792a7c9964c8a39de87dd Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Mon, 5 Jan 2026 20:00:54 +0300 Subject: [PATCH] working on tip card and BS --- .../CustomBottomSheet/TipBottomSheet.tsx | 10 +-- .../CustomBottomSheet/TipDialog.tsx | 14 ++--- .../components/GiftAmountBottomSheet.tsx | 9 +-- src/pages/cart/cart.module.css | 6 +- .../cart/components/RewardWaiterCard.tsx | 63 ++++++++++++------- 5 files changed, 59 insertions(+), 43 deletions(-) diff --git a/src/components/CustomBottomSheet/TipBottomSheet.tsx b/src/components/CustomBottomSheet/TipBottomSheet.tsx index f9075db..57ce385 100644 --- a/src/components/CustomBottomSheet/TipBottomSheet.tsx +++ b/src/components/CustomBottomSheet/TipBottomSheet.tsx @@ -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 }} />
diff --git a/src/components/CustomBottomSheet/TipDialog.tsx b/src/components/CustomBottomSheet/TipDialog.tsx index 7f6ae24..74f601c 100644 --- a/src/components/CustomBottomSheet/TipDialog.tsx +++ b/src/components/CustomBottomSheet/TipDialog.tsx @@ -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(); }; diff --git a/src/pages/CardDetails/components/GiftAmountBottomSheet.tsx b/src/pages/CardDetails/components/GiftAmountBottomSheet.tsx index 9881f71..2fbfc30 100644 --- a/src/pages/CardDetails/components/GiftAmountBottomSheet.tsx +++ b/src/pages/CardDetails/components/GiftAmountBottomSheet.tsx @@ -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"; diff --git a/src/pages/cart/cart.module.css b/src/pages/cart/cart.module.css index 72281f2..042d903 100644 --- a/src/pages/cart/cart.module.css +++ b/src/pages/cart/cart.module.css @@ -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; diff --git a/src/pages/cart/components/RewardWaiterCard.tsx b/src/pages/cart/components/RewardWaiterCard.tsx index 4febdc4..2cb6160 100644 --- a/src/pages/cart/components/RewardWaiterCard.tsx +++ b/src/pages/cart/components/RewardWaiterCard.tsx @@ -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(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() {
@@ -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)} > @@ -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={} - iconPlacement="end" + icon={ + + } + iconPlacement="start" + onClick={() => setIsTipOpen(true)} > - + > + {tip && !isDefaultTip ? tip : t("cart.other")} +
@@ -163,14 +182,12 @@ export default function RewardWaiterCard() { isOpen={isTipOpen} onClose={handleTipClose} initialValue={tip} - onSave={handleTipSave} /> ) : ( )}