add order details & enhance the checkout page

2025-12-31 00:57:05 +03:00
parent 7119ead8c2
commit 38c83d5143
15 changed files with 623 additions and 22 deletions
--- a/src/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -370,6 +370,8 @@
  },
  "order": {
    "title": "الطلب",
+    "yourOrder": "طلبك",
+    "done": "تم",
    "yourOrderFromFascanoRestaurant": "طلبك من مطعم فاسكانو",
    "muscat": "مسقط",
    "reserved": "محجوز",
--- a/src/assets/locals/en.json
+++ b/src/assets/locals/en.json
@@ -381,6 +381,8 @@
  },
  "order": {
    "title": "Order",
+    "yourOrder": "Your Order",
+    "done": "Done",
    "yourOrderFromFascanoRestaurant": "Your order from Fascano restaurant",
    "muscat": "Muscat",
    "reserved": "Reserved",
--- a/src/components/ProRatioGroups/ProRatioGroups.module.css
+++ b/src/components/ProRatioGroups/ProRatioGroups.module.css
@@ -17,3 +17,92 @@
  width: 24px !important;
  height: 24px !important;
 }
+
+/* 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;
+  background: transparent;
+}
+
+.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner) {
+  border-radius: 50% !important;
+  background: transparent;
+  border-color: #ffb700;
+}
+
+/* Replace AntD checkmark with a filled inner circle when checked (match SVG) */
+.circleCheckbox :global(.ant-checkbox-inner::after) {
+  content: "";
+  border: 0 !important;
+  transform: none !important;
+  width: 0;
+  height: 0;
+  left: 50%;
+  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;
+  margin-left: -9px;
+  margin-top: -9px;
+  border-radius: 50%;
+  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;
+  background: transparent;
+}
+
+.circleCheckbox :global(.ant-radio-checked .ant-radio-inner) {
+  border-radius: 50% !important;
+  background: transparent;
+  border-color: #ffb700;
+}
+
+.circleCheckbox :global(.ant-radio-inner::after) {
+  content: "";
+  border: 0 !important;
+  transform: none !important;
+  width: 0;
+  height: 0;
+  left: 50%;
+  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;
+  margin-left: -9px;
+  margin-top: -9px;
+  border-radius: 50%;
+  background: #ffb700;
+}
+
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}
--- a/src/components/ProRatioGroups/ProRatioGroups.tsx
+++ b/src/components/ProRatioGroups/ProRatioGroups.tsx
@@ -42,9 +42,7 @@ const ProRatioGroups = ({
            <Radio
              key={option.value}
              value={option.value}
-              // style={{
-              //   height: 48,
-              // }}
+              className={styles.circleCheckbox}
            >
              <div
                style={{
--- a/src/pages/cart/components/CarPlateCard.tsx
+++ b/src/pages/cart/components/CarPlateCard.tsx
@@ -11,20 +11,22 @@ export default function CarPlateCard() {
  const plateCar = useAppSelector((state) => state.order.plateCar);
  return (
    <>
-      <ProInputCard
-        title={t("cart.plateNumber")}
-        dividerStyle={{ margin: "5px 0 0 0" }}
-      >
-        <Form.Item
-          label={t("cart.plateNumber")}
-          name="plateNumber"
-          style={{ position: "relative", top: -5 }}
-        >
+      <ProInputCard title={t("cart.plateNumber")}>
+        <Form.Item name="plateNumber">
          <Input
            placeholder={t("cart.plateNumber")}
            size="large"
            autoFocus={false}
-            style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+            style={{
+              padding: "7px 11px",
+              height: 48,
+              borderRadius: 888,
+              fontWeight: 500,
+              fontStyle: "Medium",
+              fontSize: 12,
+              lineHeight: "140%",
+              letterSpacing: 0,
+            }}
            value={plateCar}
            onChange={(e) => {
              dispatch(updatePlateCar(e.target.value));
--- a/src/pages/cart/components/CartMobileTabletLayout.tsx
+++ b/src/pages/cart/components/CartMobileTabletLayout.tsx
@@ -257,8 +257,8 @@ export default function CartMobileTabletLayout({
            orderType === OrderType.ScheduledOrder) && <CarPlateCard />}

          {/* Estimate Time */}
-          {(orderType === OrderType.Pickup ||
-            orderType === OrderType.ScheduledOrder) && <TimeEstimateCard />}
+          {/* {(orderType === OrderType.Pickup ||
+            orderType === OrderType.ScheduledOrder) && <TimeEstimateCard />} */}

          {/* Collection Method */}
          {/* {orderType === OrderType.Pickup && (
--- a/src/pages/cart/components/specialRequest/SpecialRequestCard.module.css
+++ b/src/pages/cart/components/specialRequest/SpecialRequestCard.module.css
@@ -7,6 +7,11 @@
  padding-left: 16px;
  opacity: 1;
  border-width: 1px;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 12px;
+  line-height: 140%;
+  letter-spacing: 0;
 }

 .editButton {
--- a/src/pages/checkout/components/BriefMenuCard.tsx
+++ b/src/pages/checkout/components/BriefMenuCard.tsx
@@ -5,7 +5,7 @@ import ProText from "components/ProText";
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
 import { selectCart } from "features/order/orderSlice";
-import { useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useGetOrderDetailsQuery } from "redux/api/others";
 import BackIcon from "components/Icons/BackIcon";

@@ -14,6 +14,7 @@ export default function BriefMenuCard() {
  const { items } = useAppSelector(selectCart);
  const { subdomain, orderId } = useParams();
  const navigate = useNavigate();
+  const location = useLocation();
  const { data: orderDetails } = useGetOrderDetailsQuery(
    {
      orderID: orderId || "",
@@ -41,7 +42,11 @@ export default function BriefMenuCard() {
            padding: "16px 0",
          }}
          onClick={() => {
-            navigate(`/${subdomain}/cart`);
+            if (orderId && location.pathname.includes("/order/")) {
+              navigate(`/${subdomain}/order/details/${orderId}`);
+            } else {
+              navigate(`/${subdomain}/cart`);
+            }
          }}
        >
          <ProText
--- a/src/pages/checkout/page.tsx
+++ b/src/pages/checkout/page.tsx
@@ -17,6 +17,8 @@ import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups";
 import CouponCard from "pages/cart/components/CouponCard";
 import BriefMenuCard from "./components/BriefMenuCard";
 import CustomerInformationCard from "./components/CustomerInformationCard";
+import Ads1 from "components/Ads/Ads1";
+import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard";

 export default function CheckoutPage() {
  const { t } = useTranslation();
@@ -37,6 +39,9 @@ export default function CheckoutPage() {
        <Layout>
          <ProHeader>{t("checkout.title")}</ProHeader>
          <Layout.Content className={styles.checkoutContainer}>
+            {(orderType === OrderType.Pickup ||
+              orderType === OrderType.ScheduledOrder) && <TimeEstimateCard />}
+
            <PaymentMethods />
            {!token && <CustomerInformationCard />}
            <AddressSummary />
@@ -101,6 +106,7 @@ export default function CheckoutPage() {
            {/* Reward Your Waiter */}
            <RewardWaiterCard />
            <BriefMenuCard />
+            <Ads1 />
            <OrderSummary />
          </Layout.Content>

--- a/src/pages/login/page.tsx
+++ b/src/pages/login/page.tsx
@@ -135,7 +135,11 @@ export default function LoginPage() {
              />
            </Form.Item>

-            <ProPhoneInput label={t("login.phone")} propName="phone" />
+            <ProPhoneInput
+              label={t("login.phone")}
+              propName="phone"
+              hiddenLabel={false}
+            />

            <Form.Item label={null}>
              <Button
--- a/src/pages/order/components/OrderDetails.module.css
+++ b/src/pages/order/components/OrderDetails.module.css
@@ -0,0 +1,316 @@
+.orderSummary :global(.ant-card-body) {
+  padding: 16px !important;
+}
+
+.profileImage {
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+}
+
+/* Enhanced responsive order summary */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .orderSummary {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.fascanoIcon {
+  position: relative;
+  top: 3px;
+}
+
+.locationIcon {
+  position: relative;
+  top: 3px;
+}
+
+.orderDishIcon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.orderCard :global(.ant-card-body) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.orderCard :global(.ant-card-body) > *:not(:last-child) {
+  margin-bottom: 3.5rem;
+}
+
+.orderSummary {
+  transition: all 0.3s ease;
+}
+
+.invoiceIcon {
+  position: relative;
+  top: 3px;
+}
+
+.timeIcon {
+  position: relative;
+  top: 3px;
+}
+
+/* Enhanced responsive order summary */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .orderSummary {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.summaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+}
+
+/* Enhanced responsive summary rows */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .summaryRow {
+    padding: 12px 0;
+    font-size: 16px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .summaryRow {
+    padding: 16px 0;
+    font-size: 18px;
+  }
+}
+
+.summaryDivider {
+  margin: 8px 0 !important;
+}
+
+/* Enhanced responsive summary divider */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .summaryDivider {
+    margin: 20px 0 !important;
+  }
+}
+
+@media (min-width: 1025px) {
+  .summaryDivider {
+    margin: 24px 0 !important;
+  }
+}
+
+.totalRow {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+/* Enhanced responsive total row */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .totalRow {
+    font-size: 18px;
+    padding-top: 20px;
+    margin-top: 12px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .totalRow {
+    font-size: 20px;
+    padding-top: 24px;
+    margin-top: 16px;
+  }
+}
+
+.desktopOrderSummary {
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.desktopSummaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  font-size: 16px;
+}
+
+.desktopTotalRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  margin-top: 16px;
+}
+
+[data-theme="dark"] .orderSummary {
+  background-color: #181818 !important;
+  border-color: #363636 !important;
+}
+
+[data-theme="dark"] .orderSummary:hover {
+  background-color: #363636 !important;
+  border-color: #424242 !important;
+}
+
+[data-theme="dark"] .summaryRow {
+  color: #b0b0b0;
+}
+
+[data-theme="dark"] .totalRow {
+  color: #ffffff;
+  border-top-color: #424242;
+}
+
+/* Enhanced responsive animations */
+@media (prefers-reduced-motion: no-preference) {
+  .orderSummary {
+    animation: fadeInUp 0.8s ease-out;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Enhanced responsive focus states */
+.orderSummary:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+@media (min-width: 768px) {
+  .orderSummary:focus {
+    outline-offset: 4px;
+  }
+}
+
+/* Enhanced responsive print styles */
+@media print {
+  .orderSummary {
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+  }
+}
+
+/* Enhanced responsive hover effects */
+@media (hover: hover) {
+  .orderSummary:hover {
+    transform: translateY(-2px);
+  }
+
+  .menuItemImage:hover {
+    transform: scale(1.05);
+  }
+
+  [data-theme="dark"] .orderSummary:hover {
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+  }
+}
+
+.backToHomePage {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: flex-start;
+  padding: 12px 18px !important;
+  row-gap: 10px;
+  transition: all 0.3s ease;
+  border-radius: 50px;
+}
+
+.backToHomePage :global(.ant-card-body) {
+  padding: 0px !important;
+  text-align: start;
+  width: 100%;
+}
+
+.nextIcon {
+  width: 24px;
+  height: 24px;
+}
+
+.backIcon {
+  width: 24px;
+  height: 24px;
+}
+
+.inviteToBillCard {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: flex-start;
+  padding: 12px 18px !important;
+  row-gap: 10px;
+  transition: all 0.3s ease;
+  border-radius: 50px;
+}
+
+.inviteToBillCard :global(.ant-card-body) {
+  padding: 0px !important;
+  text-align: start;
+  width: 100%;
+}
+
+.orderDetailsContainer {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 16px;
+  overflow: auto;
+  scrollbar-width: none;
+  height: calc(92vh - 80px);
+}
+
+/* CheckoutButton Styles */
+.orderDetailsButtonContainer {
+  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) .orderDetailsButtonContainer {
+  background-color: #000000 !important;
+}
+
+.button {
+  width: 100%;
+  height: 48px;
+  margin-bottom: 16px;
+  box-shadow: none;
+}
+
+.profileImage {
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+}
+
+
+.menuItemImage {
+  object-fit: cover;
+  border-radius: 8px;
+  transition: transform 0.3s ease;
+  width: 90px;
+  height: 80px;
+  margin-bottom: 6px;
+}
--- a/src/pages/order/components/OrderDetails.tsx
+++ b/src/pages/order/components/OrderDetails.tsx
@@ -0,0 +1,166 @@
+import { Button, Card, Divider, Form, Layout, Space } from "antd";
+import { useGetOrderDetailsQuery } from "redux/api/others";
+import { useAppSelector } from "redux/hooks";
+import styles from "./OrderDetails.module.css";
+import ProHeader from "components/ProHeader/ProHeader";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import ProText from "components/ProText";
+import useBreakPoint from "hooks/useBreakPoint";
+import ArabicPrice from "components/ArabicPrice";
+import ImageWithFallback from "components/ImageWithFallback";
+import { useParams } from "react-router-dom";
+
+export default function OrderDetails() {
+  const { orderId } = useParams();
+  const { t } = useTranslation();
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { isMobile, isTablet } = useBreakPoint();
+  const { data: orderDetails } = useGetOrderDetailsQuery(
+    {
+      orderID: orderId || "",
+      restaurantID: localStorage.getItem("restaurantID") || "",
+    },
+    {
+      skip: !orderId,
+    },
+  );
+  const getMenuItemImageStyle = () => {
+    if (isMobile) {
+      return {
+        width: 115,
+        height: 96,
+      };
+    }
+    return {
+      width: 120,
+      height: 120,
+    };
+  };
+
+  return (
+    <Form layout="vertical">
+      <Layout>
+        <ProHeader>{t("order.yourOrder")}</ProHeader>
+        <Layout.Content className={styles.orderDetailsContainer}>
+          <Card className={styles.cartItem}>
+            {orderDetails?.orderItems.map((item: any, index: number) => (
+              <div key={index} style={{ position: "relative" }}>
+                <Space
+                  size="middle"
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    height: "100%",
+                    padding: 8
+                  }}
+                >
+                  <Space orientation="vertical" size="small">
+                    <div
+                      style={{
+                        position: "absolute",
+                        top: 8,
+                        [isRTL ? "right" : "left"]: 8,
+                      }}
+                    >
+                      <ProText
+                        style={{
+                          margin: 0,
+                          lineClamp: 1,
+                          fontSize: isMobile ? 14 : isTablet ? 16 : 18,
+                          fontWeight: 600,
+                        }}
+                      >
+                        {item.name}
+                        <span
+                          style={{
+                            fontWeight: 400,
+                          }}
+                        >
+                          {/* {isRTL
+                          ? (item.variant as Variant)?.optionsAR?.[0]?.value
+                          : (item.variant as Variant)?.options?.[0]?.value} */}
+                        </span>
+                      </ProText>
+                      <br />
+                      <ProText
+                        type="secondary"
+                        className={`${styles.itemDescription} responsive-text`}
+                        style={{
+                          margin: 0,
+                          lineClamp: 1,
+                          padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
+                          fontSize: isMobile ? 14 : isTablet ? 18 : 20,
+                          display: "-webkit-box",
+                          WebkitBoxOrient: "vertical",
+                          WebkitLineClamp: 1,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          wordWrap: "break-word",
+                          overflowWrap: "break-word",
+                          lineHeight: "1.4",
+                          maxHeight: isMobile
+                            ? "3em"
+                            : isTablet
+                              ? "5em"
+                              : "7em",
+                          fontWeight: 500,
+                          letterSpacing: "0.01em",
+                          width: "55%",
+                        }}
+                      >
+                        {item.description}
+                      </ProText>
+                    </div>
+                    <div
+                      style={{
+                        position: "absolute",
+                        bottom:
+                          index !== orderDetails?.orderItems?.length - 1
+                            ? 20
+                            : 7,
+                        [isRTL ? "right" : "left"]: 8,
+                      }}
+                    >
+                      <ArabicPrice
+                        price={item.price}
+                        style={{ fontStyle: "bold" }}
+                      />
+                    </div>
+                  </Space>
+                  <div style={{ position: "relative" }}>
+                    <ImageWithFallback
+                      src={item.image}
+                      alt={item.name}
+                      className={`${styles.menuItemImage} responsive-image`}
+                      {...getMenuItemImageStyle()}
+                      fallbackSrc={
+                        "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
+                      }
+                    />
+                  </div>
+                </Space>
+
+                {index !== orderDetails?.orderItems?.length - 1 && (
+                  <Divider style={{ margin: "16px 0" }} />
+                )}
+              </div>
+            ))}
+          </Card>
+        </Layout.Content>
+
+        <Layout.Footer className={styles.orderDetailsButtonContainer}>
+          <Button
+            type="primary"
+            shape="round"
+            className={styles.button}
+            onClick={() => {}}
+          >
+            {t("order.done")}
+          </Button>
+        </Layout.Footer>
+      </Layout>
+    </Form>
+  );
+}
--- a/src/pages/order/page.tsx
+++ b/src/pages/order/page.tsx
@@ -220,7 +220,7 @@ export default function OrderPage() {

  return (
    <>
-      <ProHeader>{t("order.title")}</ProHeader>
+      <ProHeader customRoute={`/${restaurant?.subdomain}`}>{t("order.title")}</ProHeader>
      <div
        style={{
          display: "flex",
--- a/src/pages/pay/components/splitBill/SplitBillChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/SplitBillChoiceBottomSheet.tsx
@@ -90,7 +90,7 @@ export function SplitBillChoiceBottomSheet({
                  fontSize: 14,
                }}
              >
-                {t("splitBill.payAsCustomAmount")}
+                {t("splitBill.customAmount")}
              </ProTitle>

              {isRTL ? (
@@ -116,7 +116,7 @@ export function SplitBillChoiceBottomSheet({
                  fontSize: 14,
                }}
              >
-                {t("splitBill.divideTheBillEqually")}
+                {t("splitBill.divideEqually")}
              </ProTitle>

              {isRTL ? (
@@ -145,7 +145,7 @@ export function SplitBillChoiceBottomSheet({
                  fontSize: 14,
                }}
              >
-                {t("splitBill.payForYourItems")}
+                {t("splitBill.payForItems")}
              </ProTitle>

              {isRTL ? (
--- a/src/routes/routes.tsx
+++ b/src/routes/routes.tsx
@@ -9,6 +9,7 @@ import CheckoutPage from "pages/checkout/page";
 import { Error400Page, ErrorPage } from "pages/errors";
 import LoginPage from "pages/login/page";
 import MenuPage from "pages/menu/page";
+import OrderDetails from "pages/order/components/OrderDetails";
 import OrderPage from "pages/order/page";
 import OrdersPage from "pages/orders/page";
 import OtpPage from "pages/otp/page";
@@ -143,6 +144,11 @@ export const router = createHashRouter([
        element: <PageWrapper children={<OrderPage />} />,
        errorElement: <ErrorPage />,
      },
+      {
+        path: "order/details/:orderId",
+        element: <PageWrapper children={<OrderDetails />} />,
+        errorElement: <ErrorPage />,
+      },
      {
        path: "pay",
        element: <PageWrapper children={<PayPage />} />,