cart: enhance actions buttons and enhance go to cart btn UI

src/pages/menu/components/MenuFooter/MenuFooter.tsx

@@ -1,7 +1,10 @@
 import { Badge, Button } from "antd";
+import ArabicPrice from "components/ArabicPrice";
+import BackIcon from "components/Icons/BackIcon";
 import CartIcon from "components/Icons/cart/CartIcon";
+import NextIcon from "components/Icons/NextIcon";
 import ProText from "components/ProText";
-import { selectCartItems } from "features/order/orderSlice";
+import { selectCartItems, selectGrandTotal } from "features/order/orderSlice";
 import useBreakPoint from "hooks/useBreakPoint";
 import { OrderType } from "pages/checkout/hooks/types";
 import { useTranslation } from "react-i18next";
@@ -17,6 +20,8 @@ export function MenuFooter() {
   const { subdomain } = useParams();
   const { orderType } = useAppSelector((s) => s.order);
   const totalItems = items.length;
+  const grandTotal = useAppSelector(selectGrandTotal);
+  const { isRTL } = useAppSelector((state) => state.locale);
 
   console.log(orderType);
 
@@ -48,45 +53,74 @@ export function MenuFooter() {
             style={{
               width: "100%",
               padding: "0 16px",
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              backgroundColor: colors.primary,
+              height: 48,
+              borderRadius: "999px",
             }}
           >
             <Button
               type="primary"
               shape="round"
               style={{
-                width: "100%",
-                height: 50,
+                height: 48,
                 boxShadow: "none",
               }}
             >
               <Badge
                 count={totalItems}
                 size="default"
+                offset={ isRTL ? [-2, 18] : [2, 18]}
                 style={{
                   borderColor: colors.primary,
                   color: "white",
                   fontSize: isMobile ? 10 : 12,
                   width: isMobile ? 10 : 12,
                 }}
+  
               >
-                <ProText
-                  style={{
-                    color: "white",
-                    margin: "0 10px",
-                  }}
-                >
-                  { orderType === OrderType.Pay ? t("menu.pay") : t("menu.viewCart")}
-                </ProText>
                 <span
                   style={{
                     position: "relative",
-                    top: 4,
+                    top: 1,
                   }}
                 >
                   <CartIcon />
                 </span>
               </Badge>
+              <ProText
+                style={{
+                  color: "white",
+                  margin: "0 10px",
+                }}
+              >
+                {orderType === OrderType.Pay
+                  ? t("menu.pay")
+                  : t("menu.viewCart")}
+              </ProText>
             </Button>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 10,
+              }}
+            >
+              <ArabicPrice
+                price={grandTotal}
+                style={{
+                  color: "var(--secondary-background)",
+                }}
+              />
+              {!isRTL ? (
+                <NextIcon iconColor="var(--secondary-background)" />
+              ) : (
+                <BackIcon iconColor="var(--secondary-background)" />
+              )}
+            </div>
           </Link>
         </div>
       )}