shadcn.io is not affiliated with official shadcn/ui
Support Ticket Response Time Success Block for React
A split confirmation for a sent support ticket: a stub with a copyable ticket number, subject, category, priority and time, a bar with three response-time marks worked out from the sent minute, and three articles to read meanwhile.
Installation
Overview
Say when to expect an answer, and give people something to read until then, with this confirmation page for React with Base UI. It is the Medlar Help page after a customer sends a ticket, a whole screen with the page's rails and one band across it, split by a divider. The first half holds a check in a muted tile, the heading, a stub with the ticket number and a Copy Button, the subject, category, priority and sent time, and the one primary, the Shine Button View my tickets, pinned to the foot of a phone's screen. The second is a bar over four hours with three marks, Received, Assigned within 30 minutes and First reply within 4 hours, each with the time it falls due, and three help articles. The corners and rules are Guides. For help desks, order tools and any form that promises an answer.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was sent: no ticket exists. The number, subject and times are typed constants, and Copy really copies the number. To wire it, take the number and the times from the created ticket, show the service level for the customer's plan, and list articles chosen from the subject.
Where do the times come from?
From one typed minute, 14:05 UTC, plus the offsets of each mark (0, 30 and 240 minutes). Nothing reads the visitor's clock, so the page reads the same everywhere. The bar is drawn from the same offsets, so the marks and the list cannot disagree.
Is the bar only a picture?
It is hidden from assistive technology, because the list under it carries the same three marks as text with their times. The bar uses weights of the foreground colour: a filled node for what has happened, hollow nodes for what is promised.
How does Copy announce itself?
The button has the name "Copy ticket number" and the number. After a press the page's live line says the number was copied, and if the clipboard refuses, the button announces that it could not copy.
Related
- Pro
A confirmation that a help-desk ticket is resolved: the ticket and its status, the agent's closing message in a bubble, a five-star rating you can press or move with the arrow keys, and a Reopen ticket button that flips the status.
- Pro
A bug-report confirmation inside an app panel: the issue number with a copy button, a triage badge, a five-item completeness list with a progress bar, and an Add button that opens a textarea and ticks the missing item locally.
- Pro
A confirmation after sending a feature request: the request with a four-word pipeline from Triage to Shipped, and four similar requests, each with a status and a Vote toggle that counts once and can be taken back.
- Pro
Support Channels Contact
Support and feedbackA support desk for a help desk tool: a band of four channels with their response times above a form with a subject, a normal or urgent priority and a message, which checks itself and confirms in place.
- Pro
Order Lookup Contact
Support and feedbackAn order desk that looks the order up first: a number and email, a read-only timeline with dates counted from today, then a help form that wakes once an order is found.
- Pro
A full-height confirmation centred on a ticket: the title, host and time in UTC and in a chosen zone, a QR code of the join link, a time zone select that works the local time from typed offsets, and a real calendar file download.