EqualltyChoiceBottomSheet: enhance styles

src/features/order/orderSlice.ts

@@ -44,7 +44,7 @@ interface DiscountData {
 interface CartState {
   restaurant: Partial<RestaurantDetails>;
   items: CartItem[];
-  tmp: unknown;
+  tmp: any;
   specialRequest: string;
   location: LocationData | null;
   roomDetails: RoomDetailsType | null;

src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx

@@ -1,12 +1,10 @@
 import { Button } from "antd";
 import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import PeopleIcon from "components/Icons/PeopleIcon";
-import ProInputCard from "components/ProInputCard/ProInputCard";
 import ProText from "components/ProText";
-import ProTitle from "components/ProTitle";
 import {
   selectCart,
   selectGrandTotal,
@@ -40,7 +38,7 @@ export function EqualltyChoiceBottomSheet({
   const grandTotal = useAppSelector(selectGrandTotal);
 
   const splitBillTmp = tmp as SplitBillTmp;
-  const totalPeople = splitBillTmp?.totalPeople || 1;
+  const totalPeople = splitBillTmp?.totalPeople || 2;
   const payFor = splitBillTmp?.payFor || 1;
 
   // Calculate split amount
@@ -62,8 +60,6 @@ export function EqualltyChoiceBottomSheet({
     onClose();
   };
 
-  console.log(grandTotal);
-
   return (
     <ProBottomSheet
       isOpen={isOpen}
@@ -71,108 +67,105 @@ export function EqualltyChoiceBottomSheet({
       title={t("splitBill.divideTheBillEqually")}
       showCloseButton={true}
       initialSnap={1}
-      height={810}
+      height={610}
-      snapPoints={[810]}
+      snapPoints={[610]}
     >
       <div
         style={{
-          padding: "20px 0",
           display: "flex",
           flexDirection: "column",
-          gap: 20,
+          marginTop: 20,
         }}
       >
-        <ProInputCard title={t("checkout.splitBill")}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+          }}
+        >
           <div
             style={{
               display: "flex",
-              flexDirection: "column",
+              flexDirection: "row",
+              justifyContent: "space-between",
               gap: "1rem",
+              padding: 8,
             }}
           >
             <div
               style={{
                 display: "flex",
                 flexDirection: "row",
-                justifyContent: "space-between",
                 gap: "1rem",
-                padding: 8,
               }}
             >
-              <div
+              <Button
+                type="text"
+                shape="circle"
                 style={{
-                  display: "flex",
+                  backgroundColor: "rgba(95, 108, 123, 0.05)",
-                  flexDirection: "row",
+                  position: "relative",
-                  gap: "1rem",
+                  top: -10,
                 }}
               >
-                <Button
+                <PeopleIcon />
-                  type="text"
+              </Button>
-                  shape="circle"
+              <ProText
-                  style={{
+                style={{
-                    backgroundColor: "rgba(95, 108, 123, 0.05)",
+                  fontSize: "1rem",
-                    position: "relative",
+                  marginTop: 3,
-                    top: -10,
+                  color: ProGray1,
-                  }}
+                }}
-                >
+              >
-                  <PeopleIcon />
+                {t("checkout.totalPeople")}
-                </Button>
+              </ProText>
-                <ProText
-                  style={{
-                    fontSize: "1rem",
-                    marginTop: 3,
-                    color: ProGray1,
-                  }}
-                >
-                  {t("checkout.totalPeople")}
-                </ProText>
-              </div>
-
-              <TotalPeopleActions />
             </div>
 
+            <TotalPeopleActions />
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              gap: "1rem",
+              padding: 8,
+            }}
+          >
             <div
               style={{
                 display: "flex",
                 flexDirection: "row",
-                justifyContent: "space-between",
                 gap: "1rem",
-                padding: 8,
               }}
             >
-              <div
+              <Button
+                type="text"
+                shape="circle"
                 style={{
-                  display: "flex",
+                  backgroundColor: "rgba(95, 108, 123, 0.05)",
-                  flexDirection: "row",
+                  position: "relative",
-                  gap: "1rem",
+                  top: -10,
                 }}
               >
-                <Button
+                <PeopleIcon />
-                  type="text"
+              </Button>
-                  shape="circle"
+              <ProText
-                  style={{
+                style={{
-                    backgroundColor: "rgba(95, 108, 123, 0.05)",
+                  fontSize: "1rem",
-                    position: "relative",
+                  marginTop: 2,
-                    top: -10,
+                  color: ProGray1,
-                  }}
+                }}
-                >
+              >
-                  <PeopleIcon />
+                {t("checkout.payFor")}
-                </Button>
+              </ProText>
-                <ProText
-                  style={{
-                    fontSize: "1rem",
-                    marginTop: 2,
-                    color: ProGray1,
-                  }}
-                >
-                  {t("checkout.payFor")}
-                </ProText>
-              </div>
-
-              <PayForActions />
             </div>
+
+            <PayForActions />
           </div>
-        </ProInputCard>
+        </div>
 
         {/* Spinner Visualization - Blank Spin Wheel */}
         {totalPeople > 0 && (
@@ -181,13 +174,9 @@ export function EqualltyChoiceBottomSheet({
               display: "flex",
               flexDirection: "column",
               gap: 12,
-              padding: 16,
               alignItems: "center",
             }}
           >
-            <ProTitle level={5} style={{ marginBottom: 8 }}>
-              {t("splitBill.divisionPreview")}
-            </ProTitle>
             <div
               style={{
                 position: "relative",
@@ -237,7 +226,9 @@ export function EqualltyChoiceBottomSheet({
                     <path
                       key={index}
                       d={pathData}
-                      fill={isSelected ? "var(--primary)" : "rgba(0, 0, 0, 0.1)"}
+                      fill={
+                        isSelected ? "var(--primary)" : "rgba(0, 0, 0, 0.1)"
+                      }
                       stroke="#fff"
                       strokeWidth="2"
                     />

src/pages/split-bill/components/TotalPeopleActions.tsx

@@ -8,10 +8,10 @@ export default function TotalPeopleActions() {
 
   return (
     <ActionsButtons
-      quantity={tmp?.totalPeople || 1}
+      quantity={tmp?.totalPeople || 2}
       setQuantity={(value) => dispatch(setTmp({ ...tmp, totalPeople: value }))}
       max={10}
-      min={1}
+      min={2}
     />
   );
 }