update order details each 10 s and enhance the steppers UI and logic

src/pages/cart/components/CarPlateCard.tsx

@@ -6,16 +6,20 @@ import { useAppDispatch, useAppSelector } from "redux/hooks";
 
 export default function CarPlateCard() {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch()
+  const dispatch = useAppDispatch();
 
-  const {plateCar} = useAppSelector(state => state.order)
+  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}}>
+        <Form.Item
+          label={t("cart.plateNumber")}
+          name="plateNumber"
+          style={{ position: "relative", top: -5 }}
+        >
           <Input
             placeholder={t("cart.plateNumber")}
             size="large"

src/pages/order/components/Stepper.tsx

@@ -1,10 +1,43 @@
 import { Col, Row } from "antd";
 import ProText from "components/ProText";
+import { Status } from "pages/checkout/hooks/types";
+import type { CSSProperties } from "react";
+import { Fragment, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { colors } from "ThemeConstants";
 
-export default function Stepper() {
+interface StepperProps {
+  statuses?: Status[];
+}
+
+export default function Stepper({ statuses = [] }: StepperProps) {
   const { t } = useTranslation();
+
+  const labels = useMemo(
+    () => [t("order.reserved"), t("order.prepare"), t("order.ready")],
+    [t],
+  );
+
+  const activeIndex = useMemo(() => {
+    const reachedStatuses = statuses.length > 0 ? statuses.length - 1 : 0;
+    return Math.min(Math.max(reachedStatuses, 0), 2);
+  }, [statuses.length]);
+
+  const steps = useMemo(
+    () =>
+      Array.from({ length: 3 }, (_, index) => {
+        const status = statuses[index];
+        const label = status?.name || status?.alias || labels[index] || "";
+        const isPending = index > activeIndex;
+        return {
+          key: status ? `status-${status.id}` : `placeholder-${index}`,
+          label,
+          isPending,
+        };
+      }),
+    [activeIndex, labels, statuses],
+  );
+
   return (
     <>
       <div
@@ -18,60 +51,46 @@ export default function Stepper() {
           align={"middle"}
           style={{
             width: 330,
+            maxWidth: "100%",
             position: "relative",
             padding: "12px",
           }}
         >
-          <Col>
-            <div
-              style={{
-                width: 12,
-                height: 12,
-                borderRadius: "50%",
-                backgroundColor: colors.primary,
-              }}
-            ></div>
-          </Col>
-          <Col flex={"auto"}>
-            <div
-              style={{
-                height: 1.5,
-                backgroundColor: colors.primary,
-                margin: "0 8px",
-              }}
-            ></div>
-          </Col>
-          <Col>
-            <div
-              style={{
-                width: 12,
-                height: 12,
-                borderRadius: "50%",
-                backgroundColor: colors.primary,
-              }}
-            ></div>
-          </Col>
-          <Col flex={"auto"}>
-            <div
-              style={{
-                height: 1.5,
-                backgroundColor: colors.primary,
-                margin: "0 8px",
-              }}
-            ></div>
-          </Col>
-          <Col>
-            {" "}
-            <div
-              style={{
+          {steps.map((step, index) => {
+            const circleStyle: CSSProperties = step.isPending
+              ? {
                   width: 12,
                   height: 12,
                   borderRadius: "50%",
                   backgroundColor: "#FFF",
-                border: `2px solid #BDBDBD`,
-              }}
-            ></div>
+                  border: "2px solid #BDBDBD",
+                }
+              : {
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  backgroundColor: colors.primary,
+                };
+
+            const lineStyle: CSSProperties = {
+              height: 1.5,
+              backgroundColor: step.isPending ? "#BDBDBD" : colors.primary,
+              margin: "0 8px",
+            };
+
+            return (
+              <Fragment key={step.key}>
+                <Col>
+                  <div style={circleStyle}></div>
                 </Col>
+                {index < steps.length - 1 && (
+                  <Col flex={"auto"}>
+                    <div style={lineStyle}></div>
+                  </Col>
+                )}
+              </Fragment>
+            );
+          })}
         </Row>
       </div>
       <div
@@ -81,26 +100,25 @@ export default function Stepper() {
           alignItems: "center",
         }}
       >
-        {" "}
         <Row
           align={"middle"}
           style={{
             width: 330,
+            maxWidth: "100%",
             position: "relative",
             padding: "12px",
           }}
         >
+          {steps.map((step, index) => (
+            <Fragment key={`label-${step.key}`}>
               <Col>
-            <ProText>{t("order.reserved")}</ProText>
-          </Col>
-          <Col flex={"auto"}></Col>
-          <Col>
-            <ProText>{t("order.prepare")}</ProText>
-          </Col>
-          <Col flex={"auto"}></Col>
-          <Col>
-            <ProText type="secondary">{t("order.ready")}</ProText>
+                <ProText type={step.isPending ? "secondary" : undefined}>
+                  {step.label}
+                </ProText>
               </Col>
+              {index < steps.length - 1 && <Col flex={"auto"}></Col>}
+            </Fragment>
+          ))}
         </Row>
       </div>
     </>

src/pages/order/page.tsx

@@ -30,6 +30,9 @@ export default function OrderPage() {
     },
     {
       skip: !orderId,
+      // return it t0 60000 after finish testing
+      pollingInterval: 10000,
+      refetchOnMountOrArgChange: true,
     },
   );
 
@@ -114,7 +117,7 @@ export default function OrderPage() {
 
             <Divider style={{ margin: "12px 0" }} />
 
-            <Stepper />
+            <Stepper statuses={orderDetails?.status} />
           </div>
         </Card>