Restock Alert
Out-of-stock product state: sold-out size pills, a notify-me email field for the chosen size, the expected restock date from a fixed now, a subscribed state, an in-stock shortcut, and a row of similar items in stock.
Preview
Heathline leather boot
Chestnut$158.00Some sizes sold outSimilar, in stock now
Heathline leather boot
Chestnut$158.00Some sizes sold outWe’ll let you knowOne email to ines@example.com when 41 is back, expected Nov 18.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| product | { name; detail?; price; thumb? } | — | The product shown in the header. |
| sizes | { value; label; stock; restock?: "YYYY-MM-DD" }[] | — | Size pills; stock 0 is crossed out and can be subscribed to. |
| now | string | — | UTC date the restock countdown is measured from; the clock is never read. |
| defaultSize | string | first sold-out size | Starting size. |
| defaultEmail | string | "" | Prefilled email. |
| defaultSubscribed | boolean | false | Start subscribed for the default size (previews). |
| onNotify | ({ email, size }) => void | Promise<unknown> | — | Save the alert; a rejection's message is shown. |
| onAddToCart | (size: string) => void | — | Shown when an in-stock size is picked. |
| similar | { id; name; price; thumb?; href }[] | [] | Similar items in stock, shown as a scrolling row. |
| currency / locale | string | "USD" / "en-US" | Price and date formatting. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.