feat: add message in ordersummary

frontend/src/components/OrderDetailsCard.tsx

@@ -11,32 +11,43 @@ interface OrderDetailsCardProps {
 export default function OrderDetailsCard({ data }: { data: OrderDetailsCardProps[] }) {
     const orderdetails = data.map(({ orderid, code, tableid, time, orderstatus, paymentstatus }) => {
         const date = moment(time).format("DD/MM/YYYY hh:mm:ss")
+        const isPaymentPending = paymentstatus === "Waiting for Confirmation"
         return (
-            <div className="font-nunito flex bg-white justify-start py-10 md:flex-row mx-16">
-                <div className="flex flex-col w-40 leading-normal">
-                    <p className="mb-3 font-semibold text-lg text-gray-900 w-11/12">Order ID</p>
-                    <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">Unique Code</p>
-                    <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">Table ID</p>
-                    <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">Order Time</p>
-                    <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">Order Status</p>
-                    <p className="mt-3 font-semibold text-lg text-gray-900 w-11/12">Payment Status</p>
+            <div>
+                <div className="grid-grid rows-2 font-nunito flex bg-white justify-start py-10 md:flex-row mx-16">
+                    <div className="flex flex-col w-40 leading-normal">
+                        <p className="mb-3 font-semibold text-lg text-gray-900 w-11/12">Order ID</p>
+                        <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">Unique Code</p>
+                        <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">Table ID</p>
+                        <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">Order Time</p>
+                        <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">Order Status</p>
+                        <p className="mt-3 font-semibold text-lg text-gray-900 w-11/12">Payment Status</p>
+                    </div>
+                    <div className="flex flex-col w-2 leading-normal">
+                        <p className="mb-3 font-semibold text-lg text-gray-900 w-11/12">:</p>
+                        <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">:</p>
+                        <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">:</p>
+                        <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">:</p>
+                        <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">:</p>
+                        <p className="mt-3 font-semibold text-lg text-gray-900 w-11/12">:</p>
+                    </div>
+                    <div className="flex flex-col w-5/6 leading-normal ms-2">
+                        <p className="mb-3 font-normal text-lg text-gray-900 w-11/12">{orderid}</p>
+                        <p className="my-3 font-normal text-lg text-gray-900 w-11/12">{code}</p>
+                        <p className="my-3 font-normal text-lg text-gray-900 w-11/12">{tableid}</p>
+                        <p className="my-3 font-normal text-lg text-gray-900 w-11/12">{date}</p>
+                        <p className="my-3 font-normal text-lg text-gray-900 w-11/12">{orderstatus}</p>
+                        <p className="mt-3 font-normal text-lg text-gray-900 w-11/12">{paymentstatus}</p>
+                    </div>
                 </div>
-                <div className="flex flex-col w-2 leading-normal">
-                    <p className="mb-3 font-semibold text-lg text-gray-900 w-11/12">:</p>
-                    <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">:</p>
-                    <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">:</p>
-                    <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">:</p>
-                    <p className="my-3 font-semibold text-lg text-gray-900 w-11/12">:</p>
-                    <p className="mt-3 font-semibold text-lg text-gray-900 w-11/12">:</p>
-                </div>
-                <div className="flex flex-col w-5/6 leading-normal ms-2">
-                    <p className="mb-3 font-normal text-lg text-gray-900 w-11/12">{orderid}</p>
-                    <p className="my-3 font-normal text-lg text-gray-900 w-11/12">{code}</p>
-                    <p className="my-3 font-normal text-lg text-gray-900 w-11/12">{tableid}</p>
-                    <p className="my-3 font-normal text-lg text-gray-900 w-11/12">{date}</p>
-                    <p className="my-3 font-normal text-lg text-gray-900 w-11/12">{orderstatus}</p>
-                    <p className="mt-3 font-normal text-lg text-gray-900 w-11/12">{paymentstatus}</p>
+                <div className="ms-16 my-3 font-normal text-lg text-gray-900">
+                    {isPaymentPending && (
+                        <span className="text-mealshub-red font-semibold font-italic">
+                            Your payment is not confirmed yet. Don’t forget to show your Unique Code and pay order to the central cashier!
+                        </span>
+                    )}
                 </div>
+
             </div>
         )
     });