@monimesl/dot-cli 0.1.0-alpha.8 → 0.1.0-alpha.9

package/dist/templates/showcase/pages/files/controller.ts

@@ -1,7 +1,7 @@
-import type { Note } from './state';
+import type { Archive, Song } from './state';
 import state from './state';
 
-const PICTURE = 'pictures/octocat.png';
+const PICTURE = 'pictures/artwork.jpg';
 
 export default definePage({
   initialState: state,
@@ -15,32 +15,51 @@ export default definePage({
   },
   actions: {
     async refresh() {
-      const entries = await this.dash.file.list('', { recursive: true });
-      const notes: Note[] = [];
+      const entries = await this.dash.storage.file.list('', { recursive: true });
+      const songs: Song[] = [];
       for (const entry of entries) {
-        if (entry.kind === 'file' && entry.path.startsWith('notes/')) {
-          notes.push({ path: entry.path, text: await this.dash.file.read(entry.path) });
+        if (entry.kind === 'file' && entry.path.startsWith('setlist/')) {
+          songs.push({ path: entry.path, text: await this.dash.storage.file.read(entry.path) });
         }
       }
-      const { used, quota } = await this.dash.file.usage();
-      const kept = await this.dash.file.stat(PICTURE);
+      const archives: Archive[] = entries
+        .filter((entry) => entry.kind === 'folder' && /^archive\/[^/]+$/.test(entry.path))
+        .map((entry) => ({
+          path: entry.path,
+          time: new Date(Number(entry.name)).toLocaleTimeString('en-GB'),
+        }))
+        .reverse();
+      const { used, quota } = await this.dash.storage.file.usage();
+      const kept = await this.dash.storage.file.stat(PICTURE);
       this.setState({
-        notes,
+        songs,
+        archives,
         usage: `${used} bytes used of ${quota / 1024 / 1024} MB`,
-        picture: kept ? (await this.dash.file.open(PICTURE)).url : '',
+        picture: kept ? (await this.dash.storage.file.open(PICTURE)).url : '',
       });
     },
     async save(state) {
-      await this.dash.file.write(`notes/${Date.now()}.txt`, state.draft);
+      await this.dash.storage.file.write(`setlist/${Date.now()}.txt`, state.draft);
       this.setState({ draft: '' });
       await this.actions.refresh();
     },
-    async clearNotes() {
-      await this.dash.file.remove('notes', { recursive: true });
+    // Moves the whole setlist folder into the archive, under the time it was archived.
+    async archive() {
+      await this.dash.storage.file.createFolder('archive');
+      await this.dash.storage.file.move('setlist', `archive/${Date.now()}`);
+      await this.actions.refresh();
+    },
+    // Copies an archived setlist back, in place of the current one.
+    async copyBack(_state, event: DotEvent<unknown, { path: string }>) {
+      await this.dash.storage.file.copy(event.data.path, 'setlist', { overwrite: true });
+      await this.actions.refresh();
+    },
+    async clearSetlist() {
+      await this.dash.storage.file.remove('setlist', { recursive: true });
       await this.actions.refresh();
     },
     async forgetPicture() {
-      await this.dash.file.remove(PICTURE);
+      await this.dash.storage.file.remove(PICTURE);
       await this.actions.refresh();
     },
   },

package/dist/templates/showcase/pages/files/state.ts

@@ -1,11 +1,19 @@
-export interface Note {
+export interface Archive {
+  path: string;
+  // When it was archived, from its folder's name.
+  time: string;
+}
+
+export interface Song {
   path: string;
   text: string;
 }
 
 export default {
   draft: '',
-  notes: [] as Note[],
+  songs: [] as Song[],
+  // The setlists archived in folders of their own, newest first.
+  archives: [] as Archive[],
   usage: '',
   picture: '',
 };

package/dist/templates/showcase/pages/files/view.dml

@@ -1,33 +1,48 @@
 <View>
   <Text variant="title">Files</Text>
-  <Text>A dot has a folder of its own that no other dot sees. What it keeps there lasts between runs.</Text>
+  <Text>Each dot has its own folder. Other dots can't see it. Files stay after the dot closes.</Text>
 
-  <Text variant="caption" tone="muted">Notes, written as text files</Text>
+  <Text variant="caption" tone="muted">A setlist. Each song is a text file.</Text>
   <View variant="card" gap="small">
-    <Input label="Note" placeholder="Buy rice" value="{{ draft }}" maxLength="80" onChange="setDraft" onSubmit="save" />
-    <View direction="row" gap="small">
-      <Button onClick="save" disabled="{{ !draft }}">Save</Button>
-      <Button variant="secondary" onClick="clearNotes" disabled="{{ notes.length === 0 }}">Delete all</Button>
+    <Input label="Song" placeholder="Exodus, by Drizilik" value="{{ draft }}" maxLength="80" onChange="setDraft" onSubmit="save" />
+    <View direction="row" gap="small" wrap>
+      <Button onClick="save" disabled="{{ !draft }}">Add to the setlist</Button>
+      <Button variant="secondary" onClick="archive" disabled="{{ songs.length === 0 }}">Archive it</Button>
+      <Button variant="secondary" onClick="clearSetlist" disabled="{{ songs.length === 0 }}">Clear it</Button>
     </View>
-    <For each="{{ notes }}" item="note" key="path">
+    <For each="{{ songs }}" item="song" key="path">
       <View gap="none">
-        <Text>{{ note.text }}</Text>
-        <Text variant="caption" tone="muted">{{ note.path }}</Text>
+        <Text>{{ song.text }}</Text>
+        <Text variant="caption" tone="muted">{{ song.path }}</Text>
       </View>
     </For>
-    <If condition="{{ notes.length === 0 }}">
-      <Text variant="caption" tone="muted">No notes yet</Text>
+    <If condition="{{ songs.length === 0 }}">
+      <Text variant="caption" tone="muted">No songs yet. Add some, then close and reopen the dot. They are still here.</Text>
     </If>
   </View>
 
-  <Text variant="caption" tone="muted">A picture kept from the Network page</Text>
+  <Text variant="caption" tone="muted">Archived setlists. Each one is a folder you can copy back.</Text>
+  <View variant="card" gap="small">
+    <If condition="{{ archives.length > 0 }}">
+      <List>
+        <For each="{{ archives }}" item="archive" key="path">
+          <ListItem icon="playlist" title="Archived at {{ archive.time }}" subtitle="{{ archive.path }}" value="Copy back" data-path="{{ archive.path }}" onTap="copyBack" />
+        </For>
+      </List>
+    </If>
+    <Else>
+      <Text variant="caption" tone="muted">None yet. Add songs, then archive the setlist.</Text>
+    </Else>
+  </View>
+
+  <Text variant="caption" tone="muted">Artwork saved from the Network page</Text>
   <View variant="card" gap="small">
     <If condition="{{ picture }}">
-      <Image src="{{ picture }}" alt="Kept picture" width="64" height="64" />
+      <Image src="{{ picture }}" alt="Kept artwork" width="64" height="64" />
       <Button variant="secondary" onClick="forgetPicture">Forget it</Button>
     </If>
     <Else>
-      <Text variant="caption" tone="muted">None yet: download one on the Network page and tap Keep.</Text>
+      <Text variant="caption" tone="muted">None yet. On the Network page, search, download the artwork and tap Keep.</Text>
     </Else>
   </View>
 

package/dist/templates/showcase/pages/filters/controller.ts

@@ -1,4 +1,4 @@
-import type { Payment } from './state';
+import type { Release } from './state';
 import state from './state';
 
 type Chosen = DotEvent<{ value: string }>;
@@ -8,21 +8,20 @@ export default definePage({
   mutations: {
     chooseTab: (state, event: Chosen) => {
       const tab = event.detail.value;
-      return { tab, shown: filter(state.payments, tab, state.status) };
+      return { tab, shown: filter(state.releases, tab, state.genre) };
     },
-    chooseStatus: (state, event: DotEvent<unknown, { status: string }>) => {
-      const { status } = event.data;
-      return { status, shown: filter(state.payments, state.tab, status) };
+    chooseGenre: (state, event: DotEvent<unknown, { genre: string }>) => {
+      const { genre } = event.data;
+      return { genre, shown: filter(state.releases, state.tab, genre) };
     },
-    clearFilters: (state) => ({ tab: 'all', status: 'All', shown: state.payments }),
-    choosePeriod: (_state, event: Chosen) => ({ period: event.detail.value }),
+    clearFilters: (state) => ({ tab: 'all', genre: 'All', shown: state.releases }),
+    chooseWhere: (_state, event: Chosen) => ({ where: event.detail.value }),
   },
 });
 
-function filter(payments: readonly Payment[], tab: string, status: string): Payment[] {
-  return payments.filter(
-    (payment) =>
-      (tab === 'all' || payment.direction === tab) &&
-      (status === 'All' || payment.status === status),
+function filter(releases: readonly Release[], tab: string, genre: string): Release[] {
+  return releases.filter(
+    (release) =>
+      (tab === 'all' || release.kind === tab) && (genre === 'All' || release.genre === genre),
   );
 }

package/dist/templates/showcase/pages/filters/state.ts

@@ -1,72 +1,118 @@
-export type Direction = 'in' | 'out';
-export type Status = 'Paid' | 'Pending' | 'Failed';
+export type Kind = 'album' | 'song';
+export type Genre = 'Kriofusion' | 'Afropop' | 'Hip hop' | 'R&B' | 'Palm-wine' | 'Gospel' | 'Bubu';
 
-export interface Payment {
+export interface Release {
   id: string;
   title: string;
+  artist: string;
+  year: number;
+  kind: Kind;
+  genre: Genre;
+}
+
+export interface Show {
+  id: string;
+  title: string;
+  place: string;
   date: string;
-  amount: string;
-  direction: Direction;
-  status: Status;
-  tone: string;
+  city: string;
+}
+
+function release(
+  id: string,
+  title: string,
+  artist: string,
+  year: number,
+  kind: Kind,
+  genre: Genre,
+): Release {
+  return { id, title, artist, year, kind, genre };
 }
 
-const payments: Payment[] = [
-  {
-    id: 'p1',
-    title: 'Salary',
-    date: 'Today',
-    amount: 'Le 2,400,000',
-    direction: 'in',
-    status: 'Paid',
-    tone: 'success',
-  },
-  {
-    id: 'p2',
-    title: 'Electricity',
-    date: 'Today',
-    amount: 'Le 50,000',
-    direction: 'out',
-    status: 'Paid',
-    tone: 'success',
-  },
-  {
-    id: 'p3',
-    title: 'From Aminata',
-    date: 'Yesterday',
-    amount: 'Le 75,000',
-    direction: 'in',
-    status: 'Pending',
-    tone: 'warning',
-  },
-  {
-    id: 'p4',
-    title: 'Airtime',
-    date: 'Yesterday',
-    amount: 'Le 10,000',
-    direction: 'out',
-    status: 'Pending',
-    tone: 'warning',
-  },
-  {
-    id: 'p5',
-    title: 'Water',
-    date: '12 September',
-    amount: 'Le 35,000',
-    direction: 'out',
-    status: 'Failed',
-    tone: 'danger',
-  },
+// Newest first.
+const releases: Release[] = [
+  release('audacity', 'AUDACITY', 'Drizilik', 2026, 'album', 'Kriofusion'),
+  release('money-or-honey', 'Money or Honey', 'Boii', 2025, 'album', 'R&B'),
+  release('control', 'Control', 'ApreeL', 2025, 'song', 'Afropop'),
+  release('wait-and-see', 'Wait and See', 'Drizilik', 2025, 'album', 'Kriofusion'),
+  release('blunt', 'Blunt', 'Donii Major', 2023, 'song', 'R&B'),
+  release('ashobi', 'Ashobi', 'Drizilik', 2022, 'album', 'Kriofusion'),
+  release('nack', 'Nack', 'The Therapist', 2022, 'song', 'Afropop'),
+  release('hannah', 'Hannah', 'Donii Major', 2021, 'song', 'R&B'),
+  release('shukubly', 'Shukubly', 'Drizilik', 2018, 'album', 'Kriofusion'),
+  release('en-yay-sah', 'En Yay Sah', 'Janka Nabay and the Bubu Gang', 2012, 'album', 'Bubu'),
+  release('red-album', 'Red Album', 'LAJ', 2013, 'album', 'Hip hop'),
+  release(
+    'ghetto-struggle',
+    'Ghetto Struggle',
+    'Kao Denero, with Busy Signal',
+    2013,
+    'song',
+    'Hip hop',
+  ),
+  release('borbor-bele', 'Borbor Bele', 'Emmerson', 2004, 'album', 'Afropop'),
+  release('corruption', 'Corruption', 'Daddy Saj', 2003, 'album', 'Hip hop'),
+  release('cry-africa', 'Cry Africa', 'Vicky Fornah', 1999, 'song', 'Gospel'),
+  release('kormot-bi-en-me', 'Kormot Bi En Me', 'Steady Bongo', 1996, 'album', 'Afropop'),
+  release('dead-men', "Dead Men Don't Smoke Marijuana", 'S. E. Rogie', 1994, 'album', 'Palm-wine'),
+  release('let-me-love-you', 'Let Me Love You', 'Bunny Mack', 1981, 'song', 'Afropop'),
 ];
 
 export default {
-  payments,
-  // The payments the tab and the chosen status leave.
-  shown: payments,
+  releases,
+  // The releases the tab and the chosen genre leave.
+  shown: releases,
   tab: 'all',
-  incoming: payments.filter((payment) => payment.direction === 'in').length,
-  outgoing: payments.filter((payment) => payment.direction === 'out').length,
-  statuses: ['All', 'Paid', 'Pending', 'Failed'],
-  status: 'All',
-  period: 'week',
+  albums: releases.filter((item) => item.kind === 'album').length,
+  songs: releases.filter((item) => item.kind === 'song').length,
+  genres: ['All', 'Kriofusion', 'Afropop', 'Hip hop', 'R&B', 'Palm-wine', 'Gospel', 'Bubu'],
+  genre: 'All',
+  // Gen Z's shows, at home in Sierra Leone and abroad.
+  where: 'home',
+  home: [
+    {
+      id: 'sledu-2026',
+      title: 'SLeDU National Music Awards',
+      place: 'Bintumani Conference Centre',
+      date: '27 March 2026',
+      city: 'Freetown',
+    },
+    {
+      id: 'special-guests-4',
+      title: 'Drizilik & Special Guests',
+      place: 'Fourah Bay College Amphitheatre',
+      date: '28 November 2025',
+      city: 'Freetown',
+    },
+  ] as Show[],
+  abroad: [
+    {
+      id: 'detty-rave',
+      title: 'Detty Rave, with Mr Eazi',
+      place: 'Drizilik joins him for "Sabi Road"',
+      date: 'December 2025',
+      city: 'Accra',
+    },
+    {
+      id: 'steel-yard',
+      title: 'Drizilik Live In London',
+      place: 'The Steel Yard',
+      date: '16 November 2025',
+      city: 'London',
+    },
+    {
+      id: 'howard-theatre',
+      title: 'Drizilik live',
+      place: 'Howard Theatre',
+      date: '6 July 2024',
+      city: 'Washington',
+    },
+    {
+      id: 'freedom-festival',
+      title: 'Freedom Festival',
+      place: "In Hull, Freetown's twin city",
+      date: '2–3 September 2022',
+      city: 'Hull',
+    },
+  ] as Show[],
 };

package/dist/templates/showcase/pages/filters/view.dml

@@ -1,43 +1,44 @@
 <View>
   <Text variant="title">Tabs and filters</Text>
-  <Text>Tabs switch what a page shows, chips narrow it down, and an empty state says when nothing is left.</Text>
+  <Text>Tabs change what the page shows. Chips narrow it down. An empty state shows when nothing matches. Try Songs with Palm-wine.</Text>
 
   <Tabs value="{{ tab }}" onChange="chooseTab">
     <Tab value="all" label="All" />
-    <Tab value="in" label="Incoming" badge="{{ incoming }}" />
-    <Tab value="out" label="Outgoing" badge="{{ outgoing }}" />
+    <Tab value="album" label="Albums" badge="{{ albums }}" />
+    <Tab value="song" label="Songs" badge="{{ songs }}" />
   </Tabs>
 
   <View direction="row" gap="small" wrap>
-    <For each="{{ statuses }}" item="option" key="*this">
-      <Chip label="{{ option }}" selected="{{ option === status }}" data-status="{{ option }}" onTap="chooseStatus" />
+    <For each="{{ genres }}" item="option" key="*this">
+      <Chip label="{{ option }}" selected="{{ option === genre }}" data-genre="{{ option }}" onTap="chooseGenre" />
     </For>
   </View>
 
   <If condition="{{ shown.length > 0 }}">
     <List>
-      <For each="{{ shown }}" item="payment" key="id">
-        <ListItem icon="{{ payment.direction === 'in' ? 'arrow-down' : 'arrow-up' }}" title="{{ payment.title }}" subtitle="{{ payment.date }} · {{ payment.amount }}">
-          <Badge tone="{{ payment.tone }}">{{ payment.status }}</Badge>
+      <For each="{{ shown }}" item="release" key="id">
+        <ListItem icon="{{ release.kind === 'album' ? 'playlist' : 'music' }}" title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.genre }}">
+          <Badge>{{ release.year }}</Badge>
         </ListItem>
       </For>
     </List>
   </If>
   <Else>
-    <EmptyState icon="search" title="No payments here" text="Nothing matches this tab and status.">
+    <EmptyState icon="search" title="Nothing here" text="No release matches this tab and genre.">
       <Button variant="secondary" onClick="clearFilters">Clear filters</Button>
     </EmptyState>
   </Else>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Segmented tabs, for a few short choices</Text>
-    <Tabs variant="segmented" value="{{ period }}" onChange="choosePeriod">
-      <Tab value="week" label="Week" />
-      <Tab value="month" label="Month" />
-      <Tab value="year" label="Year" />
+    <Text variant="caption" tone="muted">Segmented tabs, for a few short choices. Gen Z shows at home and abroad.</Text>
+    <Tabs variant="segmented" value="{{ where }}" onChange="chooseWhere">
+      <Tab value="home" label="Sierra Leone" />
+      <Tab value="abroad" label="Abroad" />
     </Tabs>
-    <View variant="card">
-      <Text>Spent this {{ period }}: {{ period === 'week' ? 'Le 95,000' : period === 'month' ? 'Le 410,000' : 'Le 4,870,000' }}</Text>
-    </View>
+    <List>
+      <For each="{{ where === 'home' ? home : abroad }}" item="show" key="id">
+        <ListItem icon="ticket" title="{{ show.title }}" subtitle="{{ show.place }} · {{ show.date }}" value="{{ show.city }}" />
+      </For>
+    </List>
   </View>
 </View>

package/dist/templates/showcase/pages/forms/controller.ts

@@ -1,40 +1,64 @@
-import state from './state';
+import type { TicketType } from './state';
+import state, { SHOWS, TICKETS } from './state';
 
 type Typed = DotEvent<{ value: string }>;
+
+// "2" tickets of a Le 1,200 type -> "Le 2,400"
+function total(tickets: string, ticket: TicketType): string {
+  const leones = (Number(tickets) || 0) * TICKETS[ticket].price;
+  return `Le ${leones.toLocaleString('en-US')}`;
+}
 type Toggled = DotEvent<{ checked: boolean }>;
 
 export default definePage({
   initialState: state,
   mutations: {
-    setAccount: (_state, event: Typed) => ({ account: event.detail.value }),
+    setShow: (_state, event: Typed) => ({
+      show: event.detail.value,
+      showName: SHOWS[event.detail.value] ?? 'Not chosen yet',
+    }),
     setName: (_state, event: Typed) => ({ name: event.detail.value }),
     setEmail: (_state, event: Typed) => ({ email: event.detail.value }),
     setPhone: (_state, event: Typed) => ({ phone: event.detail.value }),
-    setAmount: (_state, event: Typed) => ({ amount: event.detail.value }),
-    setNote: (_state, event: Typed) => ({ note: event.detail.value }),
-    setPlan: (_state, event: Typed) => ({ plan: event.detail.value }),
-    setReceipts: (_state, event: Toggled) => ({ receipts: event.detail.checked }),
+    setTickets: (state, event: Typed) => ({
+      tickets: event.detail.value,
+      total: total(event.detail.value, state.ticket),
+    }),
+    setShoutOut: (_state, event: Typed) => ({ shoutOut: event.detail.value }),
+    setTicket: (state, event: DotEvent<{ value: TicketType }>) => ({
+      ticket: event.detail.value,
+      ticketName: TICKETS[event.detail.value].name,
+      total: total(state.tickets, event.detail.value),
+    }),
+    setETickets: (_state, event: Toggled) => ({ eTickets: event.detail.checked }),
     setAgreed: (_state, event: Toggled) => ({ agreed: event.detail.checked }),
   },
   actions: {
     async send(state) {
+      const count = Number(state.tickets);
       const errors = {
-        phone: state.phone.length < 8 ? 'Enter a phone number, such as 076 123456' : '',
-        amount: Number(state.amount) >= 1000 ? '' : 'Send at least Le 1,000',
+        show: state.show ? '' : 'Choose a show',
+        phone: state.phone.length < 8 ? 'Enter a phone number, such as 76 123456' : '',
+        tickets: count >= 1 && count <= 10 ? '' : 'Buy from 1 to 10 tickets',
+        shoutOut: state.shoutOut.includes('http')
+          ? 'Links are not read out. Write words only.'
+          : '',
       };
       this.setState({ errors, sent: '', failure: '' });
-      if (errors.phone || errors.amount) {
+      if (Object.values(errors).some(Boolean)) {
         return;
       }
       this.setState({ sending: true });
       try {
-        const { account, name, email, phone, amount, note, plan, receipts } = state;
+        const { show, name, email, phone, shoutOut, ticket, eTickets } = state;
         await this.dash.network.http.request({
           url: 'https://httpbin.org/post',
           method: 'POST',
-          body: { account, name, email, phone, amount: Number(amount), note, plan, receipts },
+          body: { show, name, email, phone, tickets: count, shoutOut, ticket, eTickets },
+        });
+        this.setState({
+          sent: `${count} ${count === 1 ? 'ticket' : 'tickets'}, sent to +232 ${phone}`,
         });
-        this.setState({ sent: `Le ${amount} to ${phone}` });
       } catch (error) {
         this.setState({ failure: (error as Error).message });
       }

package/dist/templates/showcase/pages/forms/state.ts

@@ -1,14 +1,33 @@
+export type TicketType = 'regular' | 'vip' | 'table';
+
+// The made-up shows on sale, and the price of each ticket, in leones.
+export const SHOWS: Record<string, string> = {
+  freetown: 'Salone Sounds Live · Freetown',
+  bo: 'Palm-wine evening · Bo',
+  kenema: 'Gospel night · Kenema',
+};
+
+export const TICKETS: Record<TicketType, { name: string; price: number }> = {
+  regular: { name: 'Regular', price: 150 },
+  vip: { name: 'VIP, near the stage', price: 400 },
+  table: { name: 'Table for four', price: 1200 },
+};
+
 export default {
-  account: '',
+  show: '',
+  // The order, as the summary shows it.
+  showName: 'Not chosen yet',
+  ticketName: TICKETS.regular.name,
+  total: 'Le 0',
   name: '',
   email: '',
   phone: '',
-  amount: '',
-  note: '',
-  plan: 'monthly',
-  receipts: true,
+  tickets: '',
+  shoutOut: '',
+  ticket: 'regular' as TicketType,
+  eTickets: true,
   agreed: false,
-  errors: { phone: '', amount: '' },
+  errors: { show: '', phone: '', tickets: '', shoutOut: '' },
   sending: false,
   sent: '',
   failure: '',

package/dist/templates/showcase/pages/forms/view.dml

@@ -1,39 +1,49 @@
 <View>
   <Text variant="title">Forms</Text>
-  <Text>Each change reaches the controller, which keeps the value in state and checks it when the form is sent.</Text>
+  <Text>Buy tickets for a show. The page checks the form when you send it. Some fields turn off based on your choices.</Text>
 
   <View variant="card">
-    <Select label="Pay from" placeholder="Choose an account" value="{{ account }}" onChange="setAccount">
-      <Option value="savings" label="Savings · Le 1,250,000" />
-      <Option value="wallet" label="Mobile wallet · Le 84,500" />
-      <Option value="card" label="Debit card · Le 310,000" />
+    <Select label="Show" placeholder="Choose a show" hint="Every show has the same prices" value="{{ show }}" error="{{ errors.show }}" disabled="{{ sending }}" onChange="setShow">
+      <Option value="freetown" label="Salone Sounds Live · Freetown" />
+      <Option value="bo" label="Palm-wine evening · Bo" />
+      <Option value="kenema" label="Gospel night · Kenema" />
     </Select>
-    <Input label="Name" placeholder="Ada Lovelace" value="{{ name }}" maxLength="40" onChange="setName" />
-    <Input label="Email" type="email" placeholder="ada@example.com" hint="For the receipt" value="{{ email }}" onChange="setEmail" />
-    <Input label="Phone" type="phone" placeholder="076 123456" value="{{ phone }}" error="{{ errors.phone }}" onChange="setPhone" />
-    <Input label="Amount" type="number" prefix="Le" placeholder="0" value="{{ amount }}" error="{{ errors.amount }}" onChange="setAmount" />
-    <TextArea label="Note" placeholder="What it's for" rows="3" maxLength="140" hint="{{ note.length }} of 140" value="{{ note }}" onChange="setNote" />
+    <Input label="Name" placeholder="Mariama Kamara" value="{{ name }}" maxLength="40" onChange="setName" />
+    <Input label="Email" type="email" placeholder="mariama@example.com" hint="{{ eTickets ? 'For the e-tickets' : 'Turn on e-tickets below to use it' }}" value="{{ email }}" disabled="{{ !eTickets }}" onChange="setEmail" />
+    <Input label="Phone" type="phone" prefix="+232" placeholder="76 123456" value="{{ phone }}" error="{{ errors.phone }}" onChange="setPhone" />
+    <Input label="Tickets" type="number" placeholder="2" suffix="at most 10" value="{{ tickets }}" error="{{ errors.tickets }}" onChange="setTickets" />
+    <TextArea label="Shout-out" placeholder="A message for the band, read out on the night" rows="3" maxLength="140" hint="{{ ticket === 'regular' ? 'Shout-outs come with VIP and table tickets' : shoutOut.length + ' of 140' }}" value="{{ shoutOut }}" error="{{ errors.shoutOut }}" disabled="{{ ticket === 'regular' }}" onChange="setShoutOut" />
   </View>
 
   <View variant="card">
-    <RadioGroup label="How often" value="{{ plan }}" onChange="setPlan">
-      <Radio value="once" label="Just once" />
-      <Radio value="monthly" label="Every month" />
-      <Radio value="yearly" label="Every year" />
+    <RadioGroup label="Ticket" value="{{ ticket }}" onChange="setTicket">
+      <Radio value="regular" label="Regular · Le 150" />
+      <Radio value="vip" label="VIP, near the stage · Le 400" />
+      <Radio value="table" label="Table for four · Le 1,200" />
     </RadioGroup>
     <Divider />
-    <Switch label="Send me receipts" checked="{{ receipts }}" onChange="setReceipts" />
+    <Switch label="Email me the e-tickets" checked="{{ eTickets }}" onChange="setETickets" />
     <Checkbox label="I agree to the terms" checked="{{ agreed }}" onChange="setAgreed" />
   </View>
 
+  <Text variant="caption" tone="muted">Your order</Text>
+  <View variant="card" gap="none">
+    <DetailRow label="Show" value="{{ showName }}" />
+    <DetailRow label="Ticket" value="{{ ticketName }}" />
+    <DetailRow label="How many" value="{{ tickets || '0' }}" />
+    <Divider />
+    <DetailRow label="Total" value="{{ total }}" weight="bold" paddingTop="medium" />
+    <DetailRow label="Paid" value="{{ sent ? 'Yes' : 'Not yet' }}" tone="{{ sent ? 'success' : 'warning' }}" />
+  </View>
+
   <If condition="{{ sent }}">
-    <Notice tone="success" title="Sent">{{ sent }}</Notice>
+    <Notice tone="success" title="Booked">{{ sent }}</Notice>
   </If>
   <If condition="{{ failure }}">
-    <Notice tone="danger" title="Not sent">{{ failure }}</Notice>
+    <Notice tone="danger" title="Not booked">{{ failure }}</Notice>
   </If>
 
   <Footer>
-    <Button onClick="send" loading="{{ sending }}" disabled="{{ !agreed }}">Send</Button>
+    <Button onClick="send" loading="{{ sending }}" disabled="{{ !agreed }}">Buy tickets</Button>
   </Footer>
 </View>