working on tip card and BS

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 }}
         />
 
         <br />

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({
+export function TipDialog({ isOpen, onClose, initialValue }: TipDialogProps) {
-  isOpen,
-  onClose,
-  initialValue,
-  onSave,
-}: 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();
   };
 

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 {
+import { selectCart, updateGiftDetails } from "features/order/orderSlice";
-  selectCart,
-  selectGrandTotal,
-  updateGiftDetails,
-  updateSplitBillAmount,
-} from "features/order/orderSlice";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import ProText from "components/ProText";
 import { ProInputNumber } from "components/Inputs/ProInputNumber";

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;

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<number | null>(null);
 
   const [isTipOpen, setIsTipOpen] = useState(false);
 
-  const handleTipSave = (value: string) => {
+  const isDefaultTip = useMemo(() => {
-    dispatch(updateTip(value));
+    const amount = parseFloat(tip);
-    message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
+    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",
+            display: "grid",
-            flexDirection: "row",
+            gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
-            justifyContent: "space-around",
+            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: tip && !isDefaultTip ? "#FFB7001F" : "inherit",
-              backgroundColor: "#FFB7001F",
+              border: tip && !isDefaultTip ? "none" : "1px solid #C0BFC4",
             }}
-            icon={<EditIcon className={styles.editIcon} />}
+            icon={
-            iconPlacement="end"
+              <EditIcon
+                className={styles.editIcon}
+                color={tip && !isDefaultTip ? "#CC9300" : "#3D3B4A"}
+              />
+            }
+            iconPlacement="start"
+            onClick={() => setIsTipOpen(true)}
           >
-            <ArabicPrice
+            <ProText
-              price={3.0}
+              style={{
-              textStyle={{
+                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}
         />
       )}
     </>