cart: enhancements

src/components/ArabicPrice/ArabicPrice.tsx

@@ -56,14 +56,14 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
           >
             {formattedPrice}
           </span>
-          <span style={{ margin: "0 2px" }} />
+          <span style={{ margin: "0 3px" }} />
           <span
             style={{
               fontSize: "14px",
               verticalAlign: "baseline",
               lineHeight: 1,
               position: "relative",
-              top: -3,
+              top: -2,
               ...(decorationStyle ?? {}),
               ...textStyle,
             }}

src/components/PaymentMethods/PaymentMethods.module.css

@@ -24,21 +24,26 @@
 
 .differentCardIcon {
   position: relative;
-  top: 1px
+  top: 1px;
 }
 
 .eCardIcon {
   position: relative;
   top: 3px;
   margin-right: 4px;
+  margin-left: 0;
 }
 
+:global(.ant-app-rtl) .eCardIcon {
+  margin-right: 0;
+  margin-left: 4px;
+}
 /* Make AntD checkbox look like a circular check indicator (scoped via CSS modules) */
 .circleCheckbox :global(.ant-checkbox-inner) {
   width: 24px;
   height: 24px;
   border-radius: 50% !important;
-  border: 1.5px solid #D5D8DA;
+  border: 1.5px solid #d5d8da;
   background: transparent;
 }
 
@@ -59,6 +64,11 @@
   top: 50%;
 }
 
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-checkbox-inner::after) {
+  left: auto;
+  right: 50%;
+}
+
 .circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
   width: 18px;
   height: 18px;
@@ -68,12 +78,17 @@
   background: #ffb700;
 }
 
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}
+
 /* Apply same circular style to Radio buttons */
 .circleCheckbox :global(.ant-radio-inner) {
   width: 24px;
   height: 24px;
   border-radius: 50% !important;
-  border: 1.5px solid #D5D8DA;
+  border: 1.5px solid #d5d8da;
   background: transparent;
 }
 
@@ -93,6 +108,11 @@
   top: 50%;
 }
 
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-radio-inner::after) {
+  left: auto;
+  right: 50%;
+}
+
 .circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
   width: 18px;
   height: 18px;
@@ -102,3 +122,7 @@
   background: #ffb700;
 }
 
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}

src/pages/cart/cart.module.css

@@ -11,7 +11,7 @@
 }
 
 .cartItem {
-  padding: 16px;
+  padding: 0 !important;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
@@ -25,7 +25,7 @@
 .cartItems {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 12px;
 }
 
 .container {
@@ -606,3 +606,8 @@
   top: -7px;
   right: 5px;
 }
+
+:global(.ant-app-rtl) .editIcon {
+  right: auto;
+  left: 5px;
+}

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -5,12 +5,12 @@ import ImageWithFallback from "components/ImageWithFallback";
 import ProHeader from "components/ProHeader/ProHeader.tsx";
 import ProText from "components/ProText.tsx";
 import ProTitle from "components/ProTitle.tsx";
-import { selectCart } from "features/order/orderSlice.ts";
+import { clearCart, selectCart } from "features/order/orderSlice.ts";
 import styles from "pages/cart/cart.module.css";
 import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
-import { useAppSelector } from "redux/hooks.ts";
+import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
 
 import { FormInstance } from "antd";
 import useBreakPoint from "hooks/useBreakPoint.ts";
@@ -40,7 +40,7 @@ export default function CartMobileTabletLayout({
   const { isMobile, isTablet } = useBreakPoint();
   const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
   const navigate = useNavigate();
-
+  const dispatch = useAppDispatch();
   const getMenuItemImageStyle = () => {
     if (isMobile) {
       return {
@@ -63,15 +63,14 @@ export default function CartMobileTabletLayout({
         <Space
           orientation="vertical"
           size={isMobile ? "middle" : isTablet ? "large" : "large"}
-          style={{ width: "100%", gap: 16 }}
+          style={{ width: "100%", gap: 16, padding: 0 }}
         >
           {/* Table Number */}
           {(orderType === OrderType.DineIn ||
             orderType === OrderType.ToOffice) && <TableNumberCard />}
 
           <div className={`${styles.cartContent} ${getResponsiveClass()}`}>
-            <div className={styles.cartItems}>
-              <Card hoverable className={styles.cartItem}>
+            <Card className={styles.cartItem}>
               <div
                 style={{
                   display: "flex",
@@ -100,15 +99,6 @@ export default function CartMobileTabletLayout({
                   </ProTitle>
                 </div>
 
-                  <Link
-                    to={`/${subdomain}/menu?${
-                      orderType ? `orderType=${orderType}` : ""
-                    }`}
-                    style={{
-                      width: "100%",
-                      textAlign: "end",
-                    }}
-                  >
                 <Button
                   shape="circle"
                   iconPlacement="start"
@@ -126,8 +116,10 @@ export default function CartMobileTabletLayout({
                     height: 32,
                     border: "1px solid #DEDEE0",
                   }}
+                  onClick={() => {
+                    dispatch(clearCart());
+                  }}
                 />
-                  </Link>
               </div>
 
               {items.length >= 1 && (
@@ -167,10 +159,8 @@ export default function CartMobileTabletLayout({
                             }}
                           >
                             {isRTL
-                                ? (item.variant as Variant)?.optionsAR?.[0]
-                                    ?.value
-                                : (item.variant as Variant)?.options?.[0]
-                                    ?.value}
+                              ? (item.variant as Variant)?.optionsAR?.[0]?.value
+                              : (item.variant as Variant)?.options?.[0]?.value}
                           </span>
                         </ProText>
                         <br />
@@ -246,16 +236,17 @@ export default function CartMobileTabletLayout({
               <Button
                 style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}
                 onClick={() => {
-                    navigate(`/${subdomain}/menu?${
+                  navigate(
+                    `/${subdomain}/menu?${
                       orderType ? `orderType=${orderType}` : ""
-                    }`);
+                    }`,
+                  );
                 }}
               >
                 <PlusIcon dimesion="18" /> {t("cart.addMore")}
               </Button>
             </Card>
           </div>
-          </div>
 
           <YouMightAlsoLike />
 

src/pages/checkout/components/BriefMenuCard.tsx

@@ -7,6 +7,7 @@ import { useAppSelector } from "redux/hooks";
 import { selectCart } from "features/order/orderSlice";
 import { useNavigate, useParams } from "react-router-dom";
 import { useGetOrderDetailsQuery } from "redux/api/others";
+import BackIcon from "components/Icons/BackIcon";
 
 export default function BriefMenuCard() {
   const { t } = useTranslation();
@@ -24,6 +25,7 @@ export default function BriefMenuCard() {
     },
   );
   const totalItems = items.length || orderDetails?.orderItems.length;
+  const { isRTL } = useAppSelector((state) => state.locale);
 
   return (
     <>
@@ -53,12 +55,18 @@ export default function BriefMenuCard() {
               cursor: "pointer",
             }}
           >
-            <span style={{ marginRight: 5, position: "relative", top: 3.5 }}>
+            <span
+              style={{
+                [isRTL ? "marginLeft" : "marginRight"]: 5,
+                position: "relative",
+                top: 3.5,
+              }}
+            >
               <InvoiceIcon />
             </span>
             {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
           </ProText>
-          <NextIcon />
+          {isRTL ? <BackIcon /> : <NextIcon />}
         </div>
       </ProInputCard>
     </>