shadcn.io is not affiliated with official shadcn/ui
Abandoned Cart Recovered Success Block for React
A confirmation for a recovered order: the order's facts and one primary, then the five touches that ended in it as a vertical list, with a Credit toggle (Last click, First touch, Linear) that re-splits the total across the messages in whole cents.
Installation
Overview
Show how a lost sale came back, and let people see what each way of crediting it means, with this recovered-order confirmation for React with Base UI. It is the Cartlight page after an abandoned cart turned into an order, a whole screen with the page's rails and one band across it. The header has a check in a muted tile, the heading, one sentence, the order's facts (its number, its total and how long the shopper took) and the Shine Button Open the order. Under it a framed panel in bands: Credit, a Toggle Group with Last click, First touch and Linear and a sentence on what the choice means, then the five touches as a vertical list with fixed UTC times and a dot on an axis. The group re-splits the total across the three touches that are messages, to the cent, and moves the word Credited. Nothing was reattributed. For cart recovery, lifecycle email and attribution tools.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was reattributed or reported. The order, its total in cents and the five touches with their times are typed constants (the times are counted back from the day of the order, so the page never reads the clock). The Credit toggle only changes this page and the live line says "Nothing was reattributed". To wire it, load the order and the touches from your event log, and have the toggle choose the model your reports use through your own settings; keep the split in one pure function so the page and the reports agree.
How is the total split, and why does it always add up?
In whole cents, by weights. Last click gives all of it to the last message the shopper acted on (Link clicked), First touch to the first message they were sent (Email 1 sent), and Linear gives each of the three messages one share. When a share is not a whole number of cents, each part is rounded down and the leftover cents go to the parts with the largest remainders, the earlier one first on a tie, so $184.00 becomes $61.34, $61.33 and $61.33 and the parts always add up to the order's total.
Why do Cart abandoned and Order paid get no credit?
They are events, not messages: nothing was sent or clicked, so they cannot earn credit under any of the three models. The list says so in a word ("Event") instead of leaving a gap, and a message that earns nothing under the chosen model says "No credit". A filled dot marks a message with credit and a hollow one a message without or an event.
How do I use the Credit toggle with a keyboard?
The three choices are one group of toggle buttons: Tab enters it, the arrow keys move between them and Space or Enter picks one, and one choice is always on. Picking one changes the list, the sentence above it and the page's live line, which names who gets how much ("Credit by linear: $61.34 to Email 1 sent, $61.33 to Email 2 opened, and $61.33 to Link clicked. Nothing was reattributed in this demo.").
Related
- Pro
A full-height confirmation for a launched email campaign: four sending waves with a bar and a state word each, a Pause sending toggle that holds the running wave, and the email as sent, drawn greyscale in a frame.
- Pro
Payment Receipt Success
Payments and refundsA full-height payment confirmation split in two: what happened and what comes next on one side, an itemised receipt table with the tax worked out in cents, a copyable receipt number and a text download on the other.
- Pro
A start-aligned confirmation for a scheduled newsletter: a select of three send times in one zone and a table of five audience regions with the local weekday and time the issue lands, worked out from each region's offset.
- Pro
A confirmation for a published ad set: three cells on shared hairlines for the daily budget, the placements and the read-only targeting, and an estimated reach per day worked out from typed costs, with a line that says the numbers are typed.
- Pro
A confirmation panel for a new sales lead: the person, company, source and intent meter of five segments, a round-robin list of three reps with their open leads as bars, and a select that reassigns the lead locally.
- Pro
Two-Factor Recovery Codes Success
Security and accessA two-step sign-in confirmation page: what was turned on, eight single-use recovery codes in a framed sheet with copy and download, and a Finish setup button that stays dimmed until you tick that you saved them.