Skip to content

Commit ba56753

Browse files
rschnurrpuschrschnurrpusch
authored
Merge pull request #51 from connectivedx/order-status
Order status
2 parents f912706 + 28a06cd commit ba56753

2 files changed

Lines changed: 138 additions & 36 deletions

File tree

‎blocks/order-status/order-status.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/* Modern and polished styling for order status blocks */
2+
:root {
3+
--order-blue: #0172ce;
4+
--order-radius: 0.5rem;
5+
--order-gray: #8b959a;
6+
--order-lightgray: #f4f6fa;
7+
--order-shadow: 0 2px 8px rgba(0,0,0,0.08);
8+
--order-margin: 2rem;
9+
}
10+
11+
.order-key {
12+
font-weight: bold;
13+
}
14+
15+
.order-status-container {
16+
flex-direction: column;
17+
gap: var(--order-margin);
18+
margin-top: var(--order-margin);
19+
}
20+
21+
[id^="order-"] {
22+
background: #fff;
23+
border-radius: var(--order-radius);
24+
box-shadow: var(--order-shadow);
25+
padding: 2rem;
26+
margin-bottom: 1.5rem;
27+
transition: box-shadow 0.2s;
28+
}
29+
30+
[id^="order-"]:hover {
31+
box-shadow: 0 4px 16px rgba(1,114,206,0.12);
32+
}
33+
34+
[id^="order-"] h2 {
35+
color: var(--order-blue);
36+
font-size: 1.5rem;
37+
margin-bottom: 0.5rem;
38+
}
39+
40+
[id^="order-"] p {
41+
color: #333;
42+
margin: 0.25rem 0;
43+
font-size: 1rem;
44+
}
45+
46+
[id^="order-"] p:last-child {
47+
margin-bottom: 0;
48+
}
49+
50+
.order-status-container h1 {
51+
font-size: 2.2rem;
52+
margin-bottom: 1.5rem;
53+
}
54+
55+
@media (max-width: 600px) {
56+
[id^="order-"] {
57+
padding: 1rem;
58+
}
59+
.order-status-container {
60+
gap: 1rem;
61+
}
62+
.order-status-container h1 {
63+
font-size: 1.5rem;
64+
}
65+
[id^="order-"] h2 {
66+
font-size: 1.1rem;
67+
}
68+
}

‎blocks/order-status/order-status.js‎

Lines changed: 70 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,76 @@
11
export default function decorate(block) {
22
let orderStatus = [];
3-
const orderStatusApiData = `
4-
{
5-
"orders": [
6-
{
7-
"orderId": "ORD-1001",
8-
"productName": "Foresight® Carrier Screen",
9-
"orderDate": "2025-08-05",
10-
"status": "Completed – View Results",
11-
"trackingNumber": "TRACK12345",
12-
"sampleReceivedDate": "2025-08-10",
13-
"resultsAvailableDate": "2025-08-25",
14-
"notes": "Returns complete, report available in patient portal"
15-
},
16-
{
17-
"orderId": "ORD-1002",
18-
"productName": "Prequel® Prenatal Screen",
19-
"orderDate": "2025-08-15",
20-
"status": "Processing",
21-
"trackingNumber": "TRACK67890",
22-
"expectedSampleArrival": "2025-08-20",
23-
"expectedResultsDate": "2025-08-29",
24-
"notes": "Blood draw scheduled via mobile phlebotomy"
25-
},
26-
{
27-
"orderId": "ORD-1003",
28-
"productName": "MyRisk® Hereditary Cancer Test",
29-
"orderDate": "2025-08-20",
30-
"status": "Pending",
31-
"trackingNumber": null,
32-
"expectedShipmentDate": "2025-08-22",
33-
"notes": "Doctor needs to sign off order"
34-
}
35-
]
3+
const orderStatusApiData = `{
4+
"orders": [
5+
{
6+
"orderId": "ORD-1001",
7+
"productName": "Foresight® Carrier Screen",
8+
"orderDate": "2025-08-05",
9+
"status": "Completed – View Results",
10+
"trackingNumber": "TRACK12345",
11+
"sampleReceivedDate": "2025-08-10",
12+
"resultsAvailableDate": "2025-08-25",
13+
"notes": "Returns complete, report available in patient portal"
14+
},
15+
{
16+
"orderId": "ORD-1002",
17+
"productName": "Prequel® Prenatal Screen",
18+
"orderDate": "2025-08-15",
19+
"status": "Processing",
20+
"trackingNumber": "TRACK67890",
21+
"expectedSampleArrival": "2025-08-20",
22+
"expectedResultsDate": "2025-08-29",
23+
"notes": "Blood draw scheduled via mobile phlebotomy"
24+
},
25+
{
26+
"orderId": "ORD-1003",
27+
"productName": "MyRisk® Hereditary Cancer Test",
28+
"orderDate": "2025-08-20",
29+
"status": "Pending",
30+
"trackingNumber": null,
31+
"expectedShipmentDate": "2025-08-22",
32+
"notes": "Doctor needs to sign off order"
33+
}
34+
]
3635
}`;
36+
const orderTemplate = `<div id="order-{{orderId}}" class="order">
37+
<h2>{{productName}}</h2>
38+
<p><span class="order-key">Order Date:</span> <span name="order-date">{{orderDate}}</span></p>
39+
<p><span class="order-key">Status:</span> <span name="order-status">{{status}}</span></p>
40+
<p><span class="order-key">Tracking Number:</span> <span name="order-tracking">{{trackingNumber}}</span></p>
41+
<p><span class="order-key">Sample Received Date:</span> <span name="order-sample-received">{{sampleReceivedDate}}</span></p>
42+
<p><span class="order-key">Results Available Date:</span> <span name="order-results-available">{{resultsAvailableDate}}</span></p>
43+
<p><span class="order-key">Notes:</span> <span name="order-notes">{{notes}}</span></p>
44+
</div>`;
45+
46+
function renderOrderStatus(order) {
47+
const orderHTML = orderTemplate
48+
.replace(/{{orderId}}/g, order.orderId)
49+
.replace(/{{productName}}/g, order.productName)
50+
.replace(/{{orderDate}}/g, order.orderDate)
51+
.replace(/{{status}}/g, order.status)
52+
.replace(/{{trackingNumber}}/g, order.trackingNumber || "N/A")
53+
.replace(/{{sampleReceivedDate}}/g, order.sampleReceivedDate || "N/A")
54+
.replace(/{{resultsAvailableDate}}/g, order.resultsAvailableDate || "N/A")
55+
.replace(/{{notes}}/g, order.notes || "N/A");
56+
return orderHTML;
57+
}
58+
3759
const orderStatusJSON = JSON.parse(orderStatusApiData);
38-
console.log(orderStatusJSON);
39-
const orderStatusMarkup = `<h1>Order Status</h1>`;
60+
61+
// Function to iterate over orders and create markup for each
62+
function renderAllOrders(orders) {
63+
return orders.map(renderOrderStatus).join("");
64+
}
65+
66+
const orderStatusMarkup = document.createElement("h1");
67+
orderStatusMarkup.textContent = "Order Status";
4068
block.innerHTML = "";
41-
block.appendChild(orderStatusMarkup);
69+
block.append(orderStatusMarkup);
70+
71+
// Create a container for all orders with the correct class for styling
72+
const ordersContainer = document.createElement("div");
73+
ordersContainer.className = "order-status-container";
74+
ordersContainer.innerHTML = renderAllOrders(orderStatusJSON.orders);
75+
block.append(ordersContainer);
4276
}

0 commit comments

Comments
 (0)