Order status

blocks/order-status/order-status.css

@@ -0,0 +1,68 @@
+/* Modern and polished styling for order status blocks */
+:root {
+	--order-blue: #0172ce;
+	--order-radius: 0.5rem;
+	--order-gray: #8b959a;
+	--order-lightgray: #f4f6fa;
+	--order-shadow: 0 2px 8px rgba(0,0,0,0.08);
+	--order-margin: 2rem;
+}
+
+.order-key {
+	font-weight: bold;
+}
+
+.order-status-container {
+	flex-direction: column;
+	gap: var(--order-margin);
+	margin-top: var(--order-margin);
+}
+
+[id^="order-"] {
+	background: #fff;
+	border-radius: var(--order-radius);
+	box-shadow: var(--order-shadow);
+	padding: 2rem;
+	margin-bottom: 1.5rem;
+	transition: box-shadow 0.2s;
+}
+
+[id^="order-"]:hover {
+	box-shadow: 0 4px 16px rgba(1,114,206,0.12);
+}
+
+[id^="order-"] h2 {
+	color: var(--order-blue);
+	font-size: 1.5rem;
+	margin-bottom: 0.5rem;
+}
+
+[id^="order-"] p {
+	color: #333;
+	margin: 0.25rem 0;
+	font-size: 1rem;
+}
+
+[id^="order-"] p:last-child {
+	margin-bottom: 0;
+}
+
+.order-status-container h1 {
+	font-size: 2.2rem;
+	margin-bottom: 1.5rem;
+}
+
+@media (max-width: 600px) {
+	[id^="order-"] {
+		padding: 1rem;
+	}
+	.order-status-container {
+		gap: 1rem;
+	}
+	.order-status-container h1 {
+		font-size: 1.5rem;
+	}
+	[id^="order-"] h2 {
+		font-size: 1.1rem;
+	}
+}

blocks/order-status/order-status.js

@@ -1,42 +1,76 @@
 export default function decorate(block) {
   let orderStatus = [];
-  const orderStatusApiData = `
-    {
-  "orders": [
-    {
-      "orderId": "ORD-1001",
-      "productName": "Foresight® Carrier Screen",
-      "orderDate": "2025-08-05",
-      "status": "Completed – View Results",
-      "trackingNumber": "TRACK12345",
-      "sampleReceivedDate": "2025-08-10",
-      "resultsAvailableDate": "2025-08-25",
-      "notes": "Returns complete, report available in patient portal"
-    },
-    {
-      "orderId": "ORD-1002",
-      "productName": "Prequel® Prenatal Screen",
-      "orderDate": "2025-08-15",
-      "status": "Processing",
-      "trackingNumber": "TRACK67890",
-      "expectedSampleArrival": "2025-08-20",
-      "expectedResultsDate": "2025-08-29",
-      "notes": "Blood draw scheduled via mobile phlebotomy"
-    },
-    {
-      "orderId": "ORD-1003",
-      "productName": "MyRisk® Hereditary Cancer Test",
-      "orderDate": "2025-08-20",
-      "status": "Pending",
-      "trackingNumber": null,
-      "expectedShipmentDate": "2025-08-22",
-      "notes": "Doctor needs to sign off order"
-    }
-  ]
+  const orderStatusApiData = `{
+    "orders": [
+        {
+        "orderId": "ORD-1001",
+        "productName": "Foresight® Carrier Screen",
+        "orderDate": "2025-08-05",
+        "status": "Completed – View Results",
+        "trackingNumber": "TRACK12345",
+        "sampleReceivedDate": "2025-08-10",
+        "resultsAvailableDate": "2025-08-25",
+        "notes": "Returns complete, report available in patient portal"
+        },
+        {
+        "orderId": "ORD-1002",
+        "productName": "Prequel® Prenatal Screen",
+        "orderDate": "2025-08-15",
+        "status": "Processing",
+        "trackingNumber": "TRACK67890",
+        "expectedSampleArrival": "2025-08-20",
+        "expectedResultsDate": "2025-08-29",
+        "notes": "Blood draw scheduled via mobile phlebotomy"
+        },
+        {
+        "orderId": "ORD-1003",
+        "productName": "MyRisk® Hereditary Cancer Test",
+        "orderDate": "2025-08-20",
+        "status": "Pending",
+        "trackingNumber": null,
+        "expectedShipmentDate": "2025-08-22",
+        "notes": "Doctor needs to sign off order"
+        }
+    ]
 }`;
+  const orderTemplate = `<div id="order-{{orderId}}" class="order">
+      <h2>{{productName}}</h2>
+      <p><span class="order-key">Order Date:</span> <span name="order-date">{{orderDate}}</span></p>
+      <p><span class="order-key">Status:</span> <span name="order-status">{{status}}</span></p>
+      <p><span class="order-key">Tracking Number:</span> <span name="order-tracking">{{trackingNumber}}</span></p>
+      <p><span class="order-key">Sample Received Date:</span> <span name="order-sample-received">{{sampleReceivedDate}}</span></p>
+      <p><span class="order-key">Results Available Date:</span> <span name="order-results-available">{{resultsAvailableDate}}</span></p>
+      <p><span class="order-key">Notes:</span> <span name="order-notes">{{notes}}</span></p>
+    </div>`;
+
+  function renderOrderStatus(order) {
+    const orderHTML = orderTemplate
+      .replace(/{{orderId}}/g, order.orderId)
+      .replace(/{{productName}}/g, order.productName)
+      .replace(/{{orderDate}}/g, order.orderDate)
+      .replace(/{{status}}/g, order.status)
+      .replace(/{{trackingNumber}}/g, order.trackingNumber || "N/A")
+      .replace(/{{sampleReceivedDate}}/g, order.sampleReceivedDate || "N/A")
+      .replace(/{{resultsAvailableDate}}/g, order.resultsAvailableDate || "N/A")
+      .replace(/{{notes}}/g, order.notes || "N/A");
+    return orderHTML;
+  }
+
   const orderStatusJSON = JSON.parse(orderStatusApiData);
-  console.log(orderStatusJSON);
-  const orderStatusMarkup = `<h1>Order Status</h1>`;
+
+  // Function to iterate over orders and create markup for each
+  function renderAllOrders(orders) {
+    return orders.map(renderOrderStatus).join("");
+  }
+
+  const orderStatusMarkup = document.createElement("h1");
+  orderStatusMarkup.textContent = "Order Status";
   block.innerHTML = "";
-  block.appendChild(orderStatusMarkup);
+  block.append(orderStatusMarkup);
+
+  // Create a container for all orders with the correct class for styling
+  const ordersContainer = document.createElement("div");
+  ordersContainer.className = "order-status-container";
+  ordersContainer.innerHTML = renderAllOrders(orderStatusJSON.orders);
+  block.append(ordersContainer);
 }