root = Card([header, currentStatus, deliveryInfo, problemSection])
header = CardHeader("Track Delivery", "Order #ORD-847291 · Tracking: 1Z999AA10123456784")
currentStatus = SectionBlock([secLocation, secTimeline], false)
secLocation = SectionItem("location", "Current Location", [locationCard, statusCard])
locationCard = ContextCardBlock([locItem], "grid", true)
locItem = ContextCardItem("current-facility", "Memphis Sort Facility", "Package arrived at facility · Last scan: 2:14 PM CDT", "gray")
statusCard = SnippetCardBlock([status1, status2, status3], "grid", true)
status1 = SnippetCardItem("status", status1lhs, status1rhs)
status1lhs = IconText(status1icon, "info", "m", "Current Status", "In Transit", false, "horizontal")
status1icon = Icon("truck", "transportation")
status1rhs = BoldText("text", "Out for Delivery", "", "text", "md")
status2 = SnippetCardItem("next-stop", status2lhs, status2rhs)
status2lhs = IconText(status2icon, "neutral", "m", "Next Stop", "Local Delivery Hub", false, "horizontal")
status2icon = Icon("map-pin", "navigation")
status2rhs = BoldText("text", "Memphis, TN", "Arriving 4:30 PM", "text", "sm")
status3 = SnippetCardItem("driver", status3lhs, status3rhs)
status3lhs = IconText(status3icon, "neutral", "m", "Driver", "Assigned", false, "horizontal")
status3icon = Icon("user", "people")
status3rhs = BoldText("text", "James R.", "Vehicle #TN-4482", "text", "sm")
secTimeline = SectionItem("timeline", "Delivery Timeline", [timelineList])
timelineList = ListBlock([tl1, tl2, tl3, tl4], "number", "default")
tl1 = ListItem("Order Placed", "May 15, 2025 · 10:23 AM", null, null, null)
tl2 = ListItem("Picked Up by Carrier", "May 16, 2025 · 8:45 AM", null, null, null)
tl3 = ListItem("Arrived at Memphis Facility", "May 18, 2025 · 2:14 PM", null, null, null)
tl4 = ListItem("Out for Delivery", "May 19, 2025 · 7:30 AM", null, null, null)
deliveryInfo = SnippetCardBlock([del1, del2], "grid", true)
del1 = SnippetCardItem("eta", del1lhs, del1rhs)
del1lhs = IconText(del1icon, "success", "m", "Estimated Delivery", "Today by end of day", false, "horizontal")
del1icon = Icon("calendar-check", "time")
del1rhs = BoldText("text", "May 19, 2025", "Before 8:00 PM CDT", "text", "lg")
del2 = SnippetCardItem("address", del2lhs, del2rhs)
del2lhs = IconText(del2icon, "neutral", "m", "Delivery Address", "Residential", false, "horizontal")
del2icon = Icon("home", "home")
del2rhs = BoldText("text", "1245 Oak Street", "Memphis, TN 38111", "text", "sm")
problemSection = SectionBlock([secReport], false)
secReport = SectionItem("report", "Report a Problem", [reportForm])
reportForm = Form("delivery-issue", formButtons, [fcIssueType, fcDescription, fcPhoto, fcContact])
formButtons = Buttons([btnSubmit, btnCancel], "row")
btnSubmit = Button("Submit Report", { type: "continue_conversation", context: "Submit delivery issue report for order ORD-847291" }, "primary")
btnCancel = Button("Cancel", { type: "continue_conversation", context: "Cancel delivery issue report" }, "secondary")
fcIssueType = FormControl("Issue Type", issueSelect, "Select the type of problem you're experiencing")
issueSelect = Select("issue-type", [it1, it2, it3, it4, it5], "Choose issue type", { required: true })
it1 = SelectItem("late", "Delivery is late")
it2 = SelectItem("damaged", "Package appears damaged")
it3 = SelectItem("missing", "Package marked delivered but not received")
it4 = SelectItem("wrong-address", "Delivered to wrong address")
it5 = SelectItem("other", "Other issue")
fcDescription = FormControl("Description", descArea, "Provide details about the issue (required)")
descArea = TextArea("description", "Describe what happened...", 4, { required: true, minLength: 20 })
fcPhoto = FormControl("Photo (Optional)", photoInput, "Upload a photo of the package or delivery location")
photoInput = Input("photo-url", "Paste image URL or upload via app", "url")
fcContact = FormControl("Preferred Contact", contactChips, "How should we reach you about this issue?")
contactChips = Chips("contact-method", "multiple", [cc1, cc2, cc3], { required: true }, ["email"])
cc1 = ChipItem("email", "Email", cc1icon)
cc1icon = Icon("mail", "communication")
cc2 = ChipItem("phone", "Phone", cc2icon)
cc2icon = Icon("phone", "communication")
cc3 = ChipItem("sms", "SMS", cc3icon)
cc3icon = Icon("message-square", "communication")