#122: change order status page

SwiftParcel.Web/frontend/src/components/modals/orders/orderStatusModal.tsx

@@ -0,0 +1,84 @@
+import {
+    Button,
+    Label,
+    Modal,
+    TextInput,
+  } from "flowbite-react";
+  import React from "react";
+  import formatOfferStatus from "../../parsing/formatOfferStatus";
+
+  interface OrderStatusModalProps {
+    show: boolean;
+    setShow: (show: boolean) => void;
+    orderStatus: any;
+  }
+
+  const LabelsWithBorder = ({ idA, valueA, idB, valueB }) => (
+    <div className="mb-4 border-b border-gray-200 pb-1 grid grid-cols-1 md:grid-cols-2 gap-4">
+      <Label
+          id={idA}
+          value={valueA}
+      />
+      <Label
+          id={idB}
+          value={valueB}
+      />
+    </div>
+  );
+
+  const InfoSection = ({ detailsData }) => (
+    <div>
+        <LabelsWithBorder
+            idA="id"
+            valueA="Order id:"
+            idB="id-value"
+            valueB={detailsData.orderStatus.orderId}
+        />
+        <LabelsWithBorder
+            idA="status"
+            valueA="Status:"
+            idB="status-value"
+            valueB={formatOfferStatus(detailsData.orderStatus.status)}
+        />
+    </div>
+  );
+
+  export function OrderStatusModal(props: OrderStatusModalProps) {
+    const close = () => {
+      props.setShow(false);
+    };
+
+    const submit = async (e: any) => {
+      e.preventDefault();
+      close();
+    };
+
+    return (
+      <React.Fragment>
+        <Modal show={props.show} size="4xl" popup={true} onClose={close}>
+          <Modal.Header />
+          <Modal.Body style={{ overflowY: 'scroll' }}>
+            <form onSubmit={submit}>
+              <div className="space-y-6 px-6 pb-4 sm:pb-6 lg:px-8 xl:pb-8">
+                <h1 className="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
+                  Status of your order:
+                </h1>
+                <div className="space-y-6 gap-6" style={{ maxHeight: '70vh', paddingBottom: '20px' }}>
+                  <div className="space-y-6 gap-6">
+
+                    <div style={{ marginBottom: '40px' }}></div>
+
+                    <InfoSection
+                        detailsData={props}
+                    />
+
+                  </div>
+                </div>
+              </div>
+            </form>
+          </Modal.Body>
+        </Modal>
+      </React.Fragment>
+    );
+  }
+

SwiftParcel.Web/frontend/src/pages/home.tsx

@@ -5,9 +5,9 @@ import { HiExclamation } from "react-icons/hi";
 import { Footer } from "../components/footer";
 import { Header } from "../components/header";
 import { Loader } from "../components/loader";
-import { getOrder } from "../utils/api";
+import { getOrderStatus } from "../utils/api";
 import { Link } from "react-router-dom";
-import { OrderDetailsModal } from "../components/modals/orders/orderDetailsModal";
+import { OrderStatusModal } from "../components/modals/orders/orderStatusModal";
 
 export default function Home() {
   const [loading, setLoading] = React.useState(true);
@@ -16,9 +16,9 @@ export default function Home() {
   const [error, setError] = React.useState(false);
   const [errorText, setErrorText] = React.useState("");
 
-  const [order, setOrder] = React.useState<any>(null);
-  const [loadingOrder, setLoadingOrder] = React.useState(false);
-  const [showOrderDetailsModal, setShowOrderDetailsModal] = React.useState(false);
+  const [orderStatus, setOrder] = React.useState<any>(null);
+  const [loadingOrderStatus, setLoadingOrderStatus] = React.useState(false);
+  const [showOrderStatusModal, setShowOrderStatusModal] = React.useState(false);
 
   const handleAnonymousInquirySubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -27,8 +27,8 @@ export default function Home() {
   const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setError(false);
-    setLoadingOrder(true);
-    getOrder(orderId)
+    setLoadingOrderStatus(true);
+    getOrderStatus(orderId)
         .then((res) => {
           if (res?.data) {
             setOrder(res?.data);
@@ -44,8 +44,8 @@ export default function Home() {
           setErrorText("Order not found");
         })
         .finally(() => {
-          setLoadingOrder(false);
-          setShowOrderDetailsModal(true);
+          setLoadingOrderStatus(false);
+          setShowOrderStatusModal(true);
         });
   };
 
@@ -80,7 +80,7 @@ export default function Home() {
               Check Your Order
             </h1>
             <p className="mb-4 text-gray-600 dark:text-gray-400">
-              Give id of your order to see its details.
+              Give id of your order to see its status.
             </p>
 
             <div
@@ -112,25 +112,25 @@ export default function Home() {
               className="mt-4 w-full md:w-1/2"
               type="submit"
             >
-              {loadingOrder ? (
+              {loadingOrderStatus ? (
                 <>
                   <div className="mr-3">
                     <Spinner size="sm" light={true} />
                   </div>
                   Loading ...
                 </>
               ) : (
-                "Check Order"
+                "Check Order Status"
               )}
             </Button>
           </div>
         </form>
 
-        { order ?
-          <OrderDetailsModal
-            show={showOrderDetailsModal}
-            setShow={setShowOrderDetailsModal}
-            order={order}
+        { orderStatus ?
+          <OrderStatusModal
+            show={showOrderStatusModal}
+            setShow={setShowOrderStatusModal}
+            orderStatus={orderStatus}
           />
         : null }
 

SwiftParcel.Web/frontend/src/utils/api.tsx

@@ -392,7 +392,17 @@ export const getInquiriesOfficeWorker = async () => {
 
 export const getOrder = async (orderId: string) => {
   try {
-    const response = await api.get(`/orders/${orderId}`);
+    const response = await api.get(`/orders/${orderId}`, { headers: getAuthHeader() });
+    return response;
+  } catch (error) {
+    console.error('Error during getting orders:', error);
+    throw error;
+  }
+};
+
+export const getOrderStatus = async (orderId: string) => {
+  try {
+    const response = await api.get(`/orders/${orderId}/status`);
     return response;
   } catch (error) {
     console.error('Error during getting orders:', error);