order: enhance UI & styles

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,136 +231,182 @@ export default function OrderPage() {
 
   return (
     <>
-      <ProHeader customRoute={`/${restaurant?.subdomain}`}>{t("order.title")}</ProHeader>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          height: "92vh",
-          padding: 16,
-          gap: 16,
-          overflow: "auto",
-          scrollbarWidth: "none",
-        }}
-      >
-        <Card className={styles.orderCard}>
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              gap: "1rem",
-              backgroundColor: "rgba(255, 183, 0, 0.08)",
-              borderRadius: "12px",
-              padding: 16,
-            }}
-          >
-            <Button
-              type="text"
-              shape="circle"
+      <Layout>
+        <ProHeader customRoute={`/${restaurant?.subdomain}`}>
+          {t("order.title")}
+        </ProHeader>
+        <Layout.Content className={styles.orderContent}>
+          <Card className={styles.orderCard}>
+            <div
               style={{
+                display: "flex",
+                flexDirection: "row",
+                gap: "1rem",
                 backgroundColor: "rgba(255, 183, 0, 0.08)",
+                borderRadius: "12px",
+                padding: 16,
               }}
             >
-              <Image
-                src={orderDetails?.restaurant_iimage}
-                className={styles.profileImage}
-                width={50}
-                height={50}
-                preview={false}
-              />
-            </Button>
-            <div>
-              <ProText style={{ fontSize: "1rem" }}>
-                {t("order.yourOrderFromFascanoRestaurant")}
-              </ProText>
-              <br />
-              <ProText type="secondary">
-                <LocationIcon className={styles.locationIcon} />{" "}
-                {isRTL ? orderDetails?.restaurantAR : orderDetails?.restaurant}
-              </ProText>
+              <Button
+                type="text"
+                shape="circle"
+                style={{
+                  backgroundColor: "rgba(255, 183, 0, 0.08)",
+                }}
+              >
+                <Image
+                  src={orderDetails?.restaurant_iimage}
+                  className={styles.profileImage}
+                  width={50}
+                  height={50}
+                  preview={false}
+                />
+              </Button>
+              <div>
+                <ProText style={{ fontSize: "1rem" }}>
+                  {t("order.yourOrderFromFascanoRestaurant")}
+                </ProText>
+                <br />
+                <ProText type="secondary">
+                  <LocationIcon className={styles.locationIcon} />{" "}
+                  {isRTL
+                    ? orderDetails?.restaurantAR
+                    : orderDetails?.restaurant}
+                </ProText>
+              </div>
             </div>
-          </div>
 
-          {isInProgress ? (
-            <Flex gap="small" wrap justify="center">
-              <Tooltip title="3 done / 3 in progress / 4 to do">
-                <div
-                  style={{
-                    transform: "scaleX(-1)",
-                  }}
-                >
-                  <Progress
-                    percent={progressPercent}
-                    format={() => (
-                      <div
-                        style={{
-                          display: "flex",
-                          flexDirection: "column",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          gap: 4,
-                          transform: "scaleX(-1)",
-                        }}
-                      >
-                        <ProText
+            {isInProgress ? (
+              <Flex gap="small" wrap justify="center">
+                <Tooltip title="3 done / 3 in progress / 4 to do">
+                  <div
+                    style={{
+                      transform: "scaleX(-1)",
+                    }}
+                  >
+                    <Progress
+                      percent={progressPercent}
+                      format={() => (
+                        <div
                           style={{
-                            fontWeight: 400,
-                            fontStyle: "Regular",
-                            fontSize: 18,
-                            lineHeight: "140%",
-                            letterSpacing: "0%",
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: 4,
+                            transform: "scaleX(-1)",
                           }}
                         >
-                          {t("order.remainingTime")}
-                        </ProText>
-                        {formatTimer(remainingSeconds)}
-                      </div>
-                    )}
-                    strokeColor="#FFB700"
-                    size={200}
-                    type="dashboard"
-                  />
-                </div>
-              </Tooltip>
-            </Flex>
-          ) : (
-            <OrderDishIcon className={styles.orderDishIcon} />
-          )}
+                          <ProText
+                            style={{
+                              fontWeight: 400,
+                              fontStyle: "Regular",
+                              fontSize: 18,
+                              lineHeight: "140%",
+                              letterSpacing: "0%",
+                            }}
+                          >
+                            {t("order.remainingTime")}
+                          </ProText>
+                          {formatTimer(remainingSeconds)}
+                        </div>
+                      )}
+                      strokeColor="#FFB700"
+                      size={200}
+                      type="dashboard"
+                    />
+                  </div>
+                </Tooltip>
+              </Flex>
+            ) : (
+              <OrderDishIcon className={styles.orderDishIcon} />
+            )}
 
-          <div>
-            <ProTitle
-              level={5}
-              style={{
-                fontWeight: 600,
-                fontSize: "18px",
-                marginBottom: "0.75rem",
-              }}
-            >
-              {t("order.inProgressOrder")} (1)
-            </ProTitle>
-            <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
-              <InvoiceIcon className={styles.invoiceIcon} />
-              <ProText type="secondary" style={{ fontSize: "14px" }}>
-                #{orderDetails?.order.id}
-              </ProText>
-              <TimeIcon className={styles.timeIcon} />
-              <ProText type="secondary" style={{ fontSize: "14px" }}>
-                ordered :- Today -{" "}
-                {dayjs(orderDetails?.status[0]?.pivot?.created_at).format(
-                  "h:mm A",
-                )}
-              </ProText>
+            <div>
+              <ProTitle
+                level={5}
+                style={{
+                  fontWeight: 600,
+                  fontSize: "18px",
+                  marginBottom: "0.75rem",
+                }}
+              >
+                {t("order.inProgressOrder")} (1)
+              </ProTitle>
+              <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
+                <InvoiceIcon className={styles.invoiceIcon} />
+                <ProText type="secondary" style={{ fontSize: "14px" }}>
+                  #{orderDetails?.order.id}
+                </ProText>
+                <TimeIcon className={styles.timeIcon} />
+                <ProText type="secondary" style={{ fontSize: "14px" }}>
+                  ordered :- Today -{" "}
+                  {dayjs(orderDetails?.status[0]?.pivot?.created_at).format(
+                    "h:mm A",
+                  )}
+                </ProText>
+              </div>
+
+              <Divider style={{ margin: "12px 0" }} />
+
+              <Stepper statuses={orderDetails?.status} />
             </div>
 
-            <Divider style={{ margin: "12px 0" }} />
+            {!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>
 
-            <Stepper statuses={orderDetails?.status} />
-          </div>
-        </Card>
+          <Ads2 />
 
-        <Ads2 />
-
-        {/* <ProInputCard
+          {/* <ProInputCard
           title={
             <div style={{ marginBottom: 7 }}>
               <ProText style={{ fontSize: "1rem" }}>
@@ -398,113 +455,98 @@ export default function OrderPage() {
           </div>
         </ProInputCard> */}
 
-        <BriefMenuCard />
+          <BriefMenuCard />
 
-        <PaymentDetails order={orderDetails?.order} />
+          <PaymentDetails order={orderDetails?.order} />
 
-        <Card
-          className={styles.backToHomePage}
-          onClick={() => navigate(`/${restaurant?.subdomain}`)}
-        >
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-between",
-              marginTop: 1,
-            }}
+          <Card
+            className={styles.inviteToBillCard}
+            onClick={() => setIsOpen(true)}
           >
-            <Image
-              src={restaurant?.restautantImage}
-              width={30}
-              height={30}
-              preview={false}
+            <div
               style={{
-                borderRadius: "50%",
-                objectFit: "cover",
-                position: "relative",
-                top: -4,
-              }}
-            />
-
-            <ProTitle
-              level={5}
-              style={{
-                fontSize: 14,
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "center",
+                marginTop: 1,
               }}
             >
-              {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
-            </ProTitle>
+              <div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
+                <ProTitle
+                  level={5}
+                  style={{
+                    marginTop: 1,
+                    fontSize: 14,
+                  }}
+                >
+                  {t("order.inviteToBill")}
+                </ProTitle>
+              </div>
+            </div>
+          </Card>
 
-            {isRTL ? (
-              <BackIcon className={styles.serviceIcon} />
-            ) : (
-              <NextIcon className={styles.serviceIcon} />
-            )}
-          </div>
-        </Card>
+          <QRBottomSheet isOpen={isOpen} onClose={() => setIsOpen(false)} />
 
-        <Card
-          className={styles.inviteToBillCard}
-          onClick={() => setIsOpen(true)}
-        >
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "center",
-              marginTop: 1,
-            }}
-          >
-            <div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
-              <ProTitle
-                level={5}
+          {hasClosedStatus && (
+            <Card
+              className={styles.backToHomePage}
+              onClick={() => setIsRateOrderOpen(true)}
+            >
+              <div
                 style={{
-                  marginTop: 1,
-                  fontSize: 14,
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
                 }}
               >
-                {t("order.inviteToBill")}
-              </ProTitle>
-            </div>
-          </div>
-        </Card>
+                <div>
+                  <NewRateIcon className={styles.newRateIcon} />
+                  <ProText
+                    style={{
+                      fontWeight: 500,
+                      fontStyle: "Medium",
+                      fontSize: 14,
+                      lineHeight: "140%",
+                      letterSpacing: "0%",
+                      color: "#595764",
+                      position: "relative",
+                      margin: "0 8px",
+                      top: -12,
+                    }}
+                  >
+                    {t("order.rateOrder")}
+                  </ProText>
+                </div>
 
-        <QRBottomSheet isOpen={isOpen} onClose={() => setIsOpen(false)} />
+                {isRTL ? (
+                  <BackIcon className={styles.serviceIcon} />
+                ) : (
+                  <NextIcon className={styles.serviceIcon} />
+                )}
+              </div>
+            </Card>
+          )}
 
-        <Card
-          className={styles.rateServiceCard}
-          onClick={() => setIsRateOrderOpen(true)}
-        >
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "center",
-              marginTop: 1,
+          <RateBottomSheet
+            isOpen={isRateOrderOpen}
+            onClose={() => setIsRateOrderOpen(false)}
+          />
+
+          <CancelOrderBottomSheet />
+        </Layout.Content>
+        <Layout.Footer className={styles.checkoutButtonContainer}>
+          <Button
+            type="primary"
+            shape="round"
+            className={styles.checkoutButton}
+            onClick={() => {
+              navigate(`/${restaurant?.subdomain}/menu`);
             }}
           >
-            <div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
-              <ProTitle
-                level={5}
-                style={{
-                  marginTop: 1,
-                  fontSize: 14,
-                }}
-              >
-                {t("order.rateOrder")}
-              </ProTitle>
-            </div>
-          </div>
-        </Card>
-
-        <RateBottomSheet
-          isOpen={isRateOrderOpen}
-          onClose={() => setIsRateOrderOpen(false)}
-        />
-
-        <CancelOrderBottomSheet />
-      </div>
+            {t("order.newOrder")}
+          </Button>
+        </Layout.Footer>
+      </Layout>
     </>
   );
 }