order: enhance UI & styles

src/assets/locals/ar.json

@@ -266,6 +266,7 @@
   },
   "checkout": {
     "customerName": "اسم العميل",
+    "paymentSummary": "ملخص الدفع",
     "customerInformation": "تفاصيل العميل",
     "title": "الدفع",
     "cash": "كاش",
@@ -370,6 +371,12 @@
   },
   "order": {
     "title": "الطلب",
+    "newOrder": "طلب جديد",
+    "paymentSummary": "ملخص الدفع",
+    "aStaffMemberWillCollectTheCashFromYouAtYourTable": "سيجمع موظف المطعم المال منك عند طاولتك",
+    "orderSummary": "ملخص الطلب",
+    "cashPaymentConfirmed": "تم الدفع بالكاش بنجاح",
+    "callWaiter": "اتصل بالخادم",
     "yourOrder": "طلبك",
     "done": "تم",
     "yourOrderFromFascanoRestaurant": "طلبك من مطعم فاسكانو",

src/assets/locals/en.json

@@ -276,6 +276,8 @@
   },
   "checkout": {
     "customerName": "Customer Name",
+    "paymentSummary": "Payment Summary",
+    "orderSummary": "Order Summary",
     "customerInformation": "Customer Information",
     "title": "Checkout",
     "cash": "Cash",
@@ -381,6 +383,10 @@
   },
   "order": {
     "title": "Order",
+    "newOrder": "New Order",
+    "aStaffMemberWillCollectTheCashFromYouAtYourTable": "A staff member will collect the cash from you at your table",
+    "cashPaymentConfirmed": "Cash payment confirmed",
+    "callWaiter": "Call Waiter",
     "yourOrder": "Your Order",
     "done": "Done",
     "yourOrderFromFascanoRestaurant": "Your order from Fascano restaurant",

src/components/Ads/Ads1.tsx

@@ -27,8 +27,12 @@ export default function Ads1({ className }: { className?: string }) {
       >
         <ProTitle
           style={{
-            marginTop: 5,
+            fontFamily: "Roboto",
-            fontSize: 14,
+            fontWeight: 600,
+            fontStyle: "SemiBold",
+            fontSize: 16,
+            lineHeight: "100%",
+            letterSpacing: "2%",
           }}
         >
           {t("home.promotion.description")}
@@ -38,6 +42,7 @@ export default function Ads1({ className }: { className?: string }) {
           style={{
             marginTop: 5,
             fontSize: 14,
+            color:"#00AC17"
           }}
         >
           {t("home.promotion.title")}

src/components/Ads/Ads2.module.css

@@ -63,7 +63,7 @@
 }
 
 .adsCard :global(.ant-card-body) {
-  padding: 8px !important;
+  padding: 10px !important;
 }
 
 :global(.darkApp) .adsCard {

src/components/Ads/Ads2.tsx

@@ -8,11 +8,7 @@ import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
 import styles from "./Ads2.module.css";
 
-export default function Ads2({
+export default function Ads2({ className }: { className?: string }) {
-  className,
-}: {
-  className?: string;
-}) {
   const { t } = useTranslation();
   const { isRTL } = useAppSelector((state) => state.locale);
 
@@ -26,8 +22,12 @@ export default function Ads2({
       <Card className={styles.adsCard}>
         <ProTitle
           style={{
-            marginTop: 5,
+            fontFamily: "Roboto",
-            fontSize: 14,
+            fontWeight: 600,
+            fontStyle: "SemiBold",
+            fontSize: 16,
+            lineHeight: "100%",
+            letterSpacing: "2%",
           }}
         >
           {t("home.promotion.description")}
@@ -37,9 +37,10 @@ export default function Ads2({
           style={{
             marginTop: 5,
             fontSize: 14,
+            color: "#00AC17",
           }}
         >
-          {t("home.promotion.title")}
+          {t("home.showDetails")}
         </ProText>
 
         <div

src/components/CustomBottomSheet/CustomBottomSheet.module.css

@@ -17,22 +17,7 @@
   width: 100%;
 }
 
-.rateServiceCard{
-  width: 100%;
-  height: 48px;
-  display: flex;
-  justify-content: center;
-  padding: 12px 18px !important;
-  row-gap: 10px;
-  transition: all 0.3s ease;
-  border-radius: 50px;
-}
 
-.rateServiceCard :global(.ant-card-body) {
-  padding: 0px !important;
-  text-align: start;
-  width: 100%;
-}
 
 .serviceIcon path {
   stroke: #ea1f22;

src/components/Icons/NoteIcon.tsx

@@ -0,0 +1,29 @@
+interface NoteIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const NoteIcon = ({ className, onClick }: NoteIconType) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M12 16H12.008M12 8V13M3.23005 7.913L7.91005 3.23C8.06005 3.08 8.26005 3 8.48005 3H15.53C15.74 3 15.95 3.08 16.1 3.23L20.77 7.903C20.92 8.053 21 8.253 21 8.473V15.527C21 15.737 20.92 15.947 20.77 16.097L16.1 20.77C15.95 20.92 15.75 21 15.53 21H8.47005C8.36456 21.0011 8.2599 20.9814 8.16208 20.9419C8.06425 20.9025 7.9752 20.844 7.90005 20.77L3.23005 16.097C3.15602 16.0218 3.09759 15.9328 3.05812 15.835C3.01865 15.7371 2.99891 15.6325 3.00005 15.527V8.473C3.00005 8.263 3.08005 8.053 3.23005 7.903V7.913Z"
+        stroke="#3D3B4A"
+        stroke-width="1.5"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default NoteIcon;

src/components/Icons/SuccessIcon.tsx

@@ -0,0 +1,33 @@
+interface SuccessIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const SuccessIcon = ({ className, onClick }: SuccessIconType) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+        stroke="#32AD6D"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M8.5 12.5L10.5 14.5L15.5 9.5"
+        stroke="#32AD6D"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default SuccessIcon;

src/components/Icons/order/NewRateIcon.tsx

@@ -0,0 +1,26 @@
+interface NewRateIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const NewRateIcon = ({ className, onClick }: NewRateIconType) => {
+  return (
+    <svg
+      width="28"
+      height="28"
+      viewBox="0 0 28 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <circle cx="14" cy="14" r="13.5" fill="black" />
+      <path
+        d="M19.2216 16.509C19.2946 16.436 19.3814 16.3995 19.4819 16.3995C19.5824 16.3995 19.6691 16.436 19.7421 16.509L20.9376 17.709C21.0106 17.782 21.0471 17.8705 21.0471 17.9745C21.0471 18.0785 21.0106 18.167 20.9376 18.24C20.8646 18.313 20.7761 18.3495 20.6721 18.3495C20.5681 18.3495 20.4796 18.313 20.4066 18.24L19.2066 17.0438C19.1336 16.9707 19.0996 16.8817 19.1046 16.7767C19.1096 16.6718 19.1491 16.5825 19.2216 16.509ZM19.7406 7.79775C19.8136 7.87075 19.8501 7.95975 19.8501 8.06475C19.8501 8.16975 19.8136 8.259 19.7406 8.3325L18.5444 9.528C18.4714 9.601 18.3846 9.6375 18.2841 9.6375C18.1836 9.6375 18.0969 9.601 18.0239 9.528C17.9509 9.455 17.9144 9.366 17.9144 9.261C17.9144 9.156 17.9509 9.06675 18.0239 8.99325L19.2096 7.79775C19.2826 7.72425 19.3711 7.6875 19.4751 7.6875C19.5791 7.6875 19.6676 7.72425 19.7406 7.79775ZM8.25963 7.812C8.33263 7.739 8.42188 7.7025 8.52737 7.7025C8.63238 7.7025 8.72162 7.739 8.79512 7.812L9.99062 8.997C10.0636 9.0705 10.1001 9.15925 10.1001 9.26325C10.1001 9.36675 10.0636 9.45525 9.99062 9.52875C9.91762 9.60175 9.82837 9.63825 9.72287 9.63825C9.61787 9.63825 9.52887 9.60175 9.45587 9.52875L8.25963 8.3325C8.18663 8.2595 8.15012 8.17275 8.15012 8.07225C8.15012 7.97175 8.18663 7.885 8.25963 7.812ZM8.77937 16.524C8.85237 16.597 8.88887 16.6838 8.88887 16.7843C8.88887 16.8847 8.85237 16.9715 8.77937 17.0445L7.58312 18.24C7.51012 18.313 7.42337 18.3495 7.32287 18.3495C7.22237 18.3495 7.13562 18.313 7.06262 18.24C6.98962 18.167 6.95312 18.0778 6.95312 17.9723C6.95312 17.8668 6.98962 17.7775 7.06262 17.7045L8.24762 16.509C8.32112 16.436 8.40987 16.4017 8.51387 16.4062C8.61737 16.4113 8.70587 16.451 8.77937 16.524ZM14.0001 17.4945L10.6139 19.527C10.5339 19.5665 10.4599 19.5825 10.3919 19.575C10.3234 19.567 10.2569 19.5435 10.1924 19.5045C10.1279 19.4645 10.0789 19.408 10.0454 19.335C10.0119 19.261 10.0089 19.1813 10.0364 19.0958L10.9341 15.2925L7.94687 12.7095C7.87937 12.6545 7.83737 12.5887 7.82087 12.5122C7.80387 12.4363 7.81087 12.363 7.84187 12.2925C7.87287 12.222 7.91412 12.1647 7.96562 12.1207C8.01712 12.0767 8.08713 12.047 8.17563 12.0315L12.1019 11.6985L13.6379 8.0865C13.6719 8.004 13.7209 7.9445 13.7849 7.908C13.8489 7.8715 13.9206 7.8535 14.0001 7.854C14.0796 7.8545 14.1516 7.87275 14.2161 7.90875C14.2806 7.94475 14.3294 8.00425 14.3624 8.08725L15.9126 11.6992L19.8389 12.0322C19.9274 12.0472 19.9974 12.0772 20.0489 12.1222C20.1009 12.1657 20.1424 12.2228 20.1734 12.2933C20.2044 12.3637 20.2114 12.437 20.1944 12.513C20.1774 12.5895 20.1351 12.6553 20.0676 12.7102L17.0811 15.2933L17.9781 19.1108C18.0061 19.1963 18.0031 19.2735 17.9691 19.3425C17.9351 19.4115 17.8861 19.4657 17.8221 19.5052C17.7576 19.5442 17.6914 19.5675 17.6234 19.575C17.5549 19.583 17.4806 19.5673 17.4006 19.5278L14.0001 17.4945Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default NewRateIcon;

src/components/OrderSummary/OrderSummary.module.css

@@ -14,7 +14,7 @@
 }
 
 .summaryDivider {
-  margin: 8px 0 !important;
+  margin: 0 !important;
 }
 
 .totalRow {

src/components/OrderSummary/OrderSummary.tsx

@@ -111,7 +111,7 @@ export default function OrderSummary() {
               />
             </div>
           )}
-          <Divider className={styles.summaryDivider} style={{ margin: "0" }} />
+          <Divider className={styles.summaryDivider} />
           <div className={`${styles.summaryRow} ${styles.totalRow}`}>
             <ProText
               style={{
@@ -142,13 +142,12 @@ export default function OrderSummary() {
 
         {isHasLoyaltyGift && restaurant?.is_loyalty_enabled === 1 && (
           <>
-            <br />
-            <br />
             <Checkbox
               checked={useLoyaltyPoints}
               onChange={(value) => {
                 dispatch(updateUseLoyaltyPoints(value.target.checked));
               }}
+              style={{ marginTop: 8 }}
             >
               {t("cart.useLoyaltyPoints")}
             </Checkbox>

src/components/PaymentDetails/PaymentDetails.tsx

@@ -12,7 +12,7 @@ export default function PaymentDetails({ order }: { order?: Order }) {
   return (
     <>
       <Card className={`${styles.orderSummary}`}>
-        <ProTitle style={{ fontSize: 18 }}>{t("cart.orderSummary")}</ProTitle>
+        <ProTitle style={{ fontSize: 18 }}>{t("cart.paymentSummary")}</ProTitle>
         <Divider style={{ margin: "15px 0 15px 0" }} />
         <Space orientation="vertical" style={{ width: "100%" }}>
           <div className={`${styles.summaryRow} ${styles.totalRow}`}>

src/pages/checkout/components/BriefMenuCard.tsx

@@ -31,7 +31,7 @@ export default function BriefMenuCard() {
   return (
     <>
       <ProInputCard
-        title={t("checkout.itemsSummary")}
+        title={t("checkout.orderSummary")}
         dividerStyle={{ margin: "5px 0 0 0" }}
       >
         <div

src/pages/checkout/page.tsx

@@ -66,7 +66,7 @@ export default function CheckoutPage() {
                 value={order?.officeNumber}
               />
             )}
-            {orderType === OrderType.Gift && <GiftCard />}
+            {/* {orderType === OrderType.Gift && <GiftCard />} */}
             {/* <RoomDetails />
             <OfficeDetails /> */}
             {/* <GiftDetails /> */}

src/pages/order/order.module.css

@@ -15,7 +15,7 @@
   }
 }
 
-    .fascanoIcon {
+.fascanoIcon {
   position: relative;
   top: 3px;
 }
@@ -39,7 +39,7 @@
 }
 
 .orderCard :global(.ant-card-body) > *:not(:last-child) {
-  margin-bottom: 3.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .orderSummary {
@@ -260,3 +260,91 @@
   text-align: start;
   width: 100%;
 }
+
+.rateServiceCard {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  padding: 12px 18px !important;
+  row-gap: 10px;
+  transition: all 0.3s ease;
+  border-radius: 50px;
+}
+
+.rateServiceCard :global(.ant-card-body) {
+  padding: 0px !important;
+  text-align: start;
+  width: 100%;
+}
+
+.newRateIcon {
+  position: relative;
+  top: -3px;
+}
+
+.serviceIcon {
+  position: relative;
+  top: 2px;
+}
+
+.orderNotes {
+  height: 87px;
+  gap: 16px;
+  opacity: 1;
+  border-radius: 6px;
+  padding: 16px;
+  background-color: #f5f5f6;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.orderNotesClosed {
+  opacity: 1;
+  height: 40px;
+  gap: 16px;
+  border-radius: 6px;
+  padding: 8px 16px;
+  background-color: #edfef5;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.orderContent {
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    gap: 16px;
+    overflow: auto;
+    scrollbar-width: none;
+}
+
+/* CheckoutButton Styles */
+
+.checkoutButton{
+  width: 100%;
+}
+
+.checkoutButtonContainer {
+  width: 100%;
+  padding: 16px 16px 0;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  height: 80px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  gap: 1rem;
+  background-color: var(--secondary-background);
+  box-shadow: none;
+  z-index: 999;
+}
+
+/* Dark theme styles for checkout */
+:global(.darkApp) .checkoutButtonContainer {
+  background-color: #000000 !important;
+}

src/pages/order/page.tsx

@@ -1,4 +1,13 @@
-import { Button, Card, Divider, Flex, Image, Progress, Tooltip } from "antd";
+import {
+  Button,
+  Card,
+  Divider,
+  Flex,
+  Image,
+  Layout,
+  Progress,
+  Tooltip,
+} from "antd";
 import Ads2 from "components/Ads/Ads2";
 import { CancelOrderBottomSheet } from "components/CustomBottomSheet/CancelOrderBottomSheet";
 import LocationIcon from "components/Icons/LocationIcon";
@@ -25,13 +34,16 @@ import NextIcon from "components/Icons/NextIcon";
 import { RateBottomSheet } from "components/CustomBottomSheet/RateBottomSheet";
 import BriefMenuCard from "pages/checkout/components/BriefMenuCard";
 import { QRBottomSheet } from "pages/pay/components/splitBill/QRBottomSheet";
+import NewRateIcon from "components/Icons/order/NewRateIcon";
+import NoteIcon from "components/Icons/NoteIcon";
+import SuccessIcon from "components/Icons/SuccessIcon";
 
 export default function OrderPage() {
   const { t } = useTranslation();
   const { orderId } = useParams();
+  const navigate = useNavigate();
   const { isRTL } = useAppSelector((state) => state.locale);
   const { restaurant } = useAppSelector((state) => state.order);
-  const navigate = useNavigate();
   const hasRefetchedRef = useRef(false);
   const [isOpen, setIsOpen] = useState(false);
   const [isRateOrderOpen, setIsRateOrderOpen] = useState(false);
@@ -57,6 +69,9 @@ export default function OrderPage() {
       skip: !restaurantSubdomain,
     },
   );
+  const hasClosedStatus = orderDetails?.status?.some(
+    (status) => status?.alias === "closed",
+  );
 
   // Reset refetch flag when orderId changes
   useEffect(() => {
@@ -66,10 +81,6 @@ export default function OrderPage() {
   // Refetch restaurant details when order status has alias "closed"
   useEffect(() => {
     if (orderDetails?.status && !hasRefetchedRef.current) {
-      const hasClosedStatus = orderDetails.status.some(
-        (status) => status?.alias === "closed",
-      );
-
       if (hasClosedStatus && restaurantSubdomain) {
         refetchRestaurantDetails();
         hasRefetchedRef.current = true;
@@ -220,18 +231,11 @@ export default function OrderPage() {
 
   return (
     <>
-      <ProHeader customRoute={`/${restaurant?.subdomain}`}>{t("order.title")}</ProHeader>
+      <Layout>
-      <div
+        <ProHeader customRoute={`/${restaurant?.subdomain}`}>
-        style={{
+          {t("order.title")}
-          display: "flex",
+        </ProHeader>
-          flexDirection: "column",
+        <Layout.Content className={styles.orderContent}>
-          height: "92vh",
-          padding: 16,
-          gap: 16,
-          overflow: "auto",
-          scrollbarWidth: "none",
-        }}
-      >
           <Card className={styles.orderCard}>
             <div
               style={{
@@ -265,7 +269,9 @@ export default function OrderPage() {
                 <br />
                 <ProText type="secondary">
                   <LocationIcon className={styles.locationIcon} />{" "}
-                {isRTL ? orderDetails?.restaurantAR : orderDetails?.restaurant}
+                  {isRTL
+                    ? orderDetails?.restaurantAR
+                    : orderDetails?.restaurant}
                 </ProText>
               </div>
             </div>
@@ -345,6 +351,57 @@ export default function OrderPage() {
 
               <Stepper statuses={orderDetails?.status} />
             </div>
+
+            {!hasClosedStatus && (
+              <div className={styles.orderNotes}>
+                <NoteIcon className={styles.noteIcon} />
+                <div
+                  style={{ display: "flex", flexDirection: "column", gap: 4 }}
+                >
+                  <ProText
+                    style={{
+                      fontWeight: 400,
+                      fontStyle: "Regular",
+                      fontSize: 12,
+                      lineHeight: "140%",
+                      letterSpacing: "0%",
+                      color: "#777580",
+                    }}
+                  >
+                    {t(
+                      "order.aStaffMemberWillCollectTheCashFromYouAtYourTable",
+                    )}
+                  </ProText>
+                  <ProText
+                    style={{
+                      fontWeight: 600,
+                      fontStyle: "SemiBold",
+                      fontSize: 12,
+                      lineHeight: "140%",
+                      letterSpacing: "0%",
+                      color: "#3D3B4A",
+                    }}
+                  >
+                    {t("order.callWaiter")}
+                  </ProText>
+                </div>
+              </div>
+            )}
+            {hasClosedStatus && (
+              <div className={styles.orderNotesClosed}>
+                <SuccessIcon className={styles.noteIcon} />
+                <ProText
+                  style={{
+                    fontSize: "12px",
+                    lineHeight: "140%",
+                    letterSpacing: "0%",
+                    color: "#3D3B4A",
+                  }}
+                >
+                  {t("order.cashPaymentConfirmed")}
+                </ProText>
+              </div>
+            )}
           </Card>
 
           <Ads2 />
@@ -402,48 +459,6 @@ export default function OrderPage() {
 
           <PaymentDetails order={orderDetails?.order} />
 
-        <Card
-          className={styles.backToHomePage}
-          onClick={() => navigate(`/${restaurant?.subdomain}`)}
-        >
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-between",
-              marginTop: 1,
-            }}
-          >
-            <Image
-              src={restaurant?.restautantImage}
-              width={30}
-              height={30}
-              preview={false}
-              style={{
-                borderRadius: "50%",
-                objectFit: "cover",
-                position: "relative",
-                top: -4,
-              }}
-            />
-
-            <ProTitle
-              level={5}
-              style={{
-                fontSize: 14,
-              }}
-            >
-              {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
-            </ProTitle>
-
-            {isRTL ? (
-              <BackIcon className={styles.serviceIcon} />
-            ) : (
-              <NextIcon className={styles.serviceIcon} />
-            )}
-          </div>
-        </Card>
-
           <Card
             className={styles.inviteToBillCard}
             onClick={() => setIsOpen(true)}
@@ -472,31 +487,45 @@ export default function OrderPage() {
 
           <QRBottomSheet isOpen={isOpen} onClose={() => setIsOpen(false)} />
 
+          {hasClosedStatus && (
             <Card
-          className={styles.rateServiceCard}
+              className={styles.backToHomePage}
               onClick={() => setIsRateOrderOpen(true)}
             >
               <div
                 style={{
                   display: "flex",
                   flexDirection: "row",
-              justifyContent: "center",
+                  justifyContent: "space-between",
-              marginTop: 1,
                 }}
               >
-            <div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
+                <div>
-              <ProTitle
+                  <NewRateIcon className={styles.newRateIcon} />
-                level={5}
+                  <ProText
                     style={{
-                  marginTop: 1,
+                      fontWeight: 500,
+                      fontStyle: "Medium",
                       fontSize: 14,
+                      lineHeight: "140%",
+                      letterSpacing: "0%",
+                      color: "#595764",
+                      position: "relative",
+                      margin: "0 8px",
+                      top: -12,
                     }}
                   >
                     {t("order.rateOrder")}
-              </ProTitle>
+                  </ProText>
                 </div>
+
+                {isRTL ? (
+                  <BackIcon className={styles.serviceIcon} />
+                ) : (
+                  <NextIcon className={styles.serviceIcon} />
+                )}
               </div>
             </Card>
+          )}
 
           <RateBottomSheet
             isOpen={isRateOrderOpen}
@@ -504,7 +533,20 @@ export default function OrderPage() {
           />
 
           <CancelOrderBottomSheet />
-      </div>
+        </Layout.Content>
+        <Layout.Footer className={styles.checkoutButtonContainer}>
+          <Button
+            type="primary"
+            shape="round"
+            className={styles.checkoutButton}
+            onClick={() => {
+              navigate(`/${restaurant?.subdomain}/menu`);
+            }}
+          >
+            {t("order.newOrder")}
+          </Button>
+        </Layout.Footer>
+      </Layout>
     </>
   );
 }