@monimesl/dot-cli 0.1.0-alpha.8 → 1.0.0-beta.0

package/dist/templates/showcase/pages/dash/payments/cases.ts

@@ -0,0 +1,445 @@
+import type { OrderLineItem, PaymentMethod, PaymentOptions } from '@monimesl/dot-runtime';
+
+// What the tester sets above the cases.
+export interface CaseInput {
+  tickets: number;
+  phoneNumber: string;
+  financialAccountId: string;
+}
+
+export interface PaymentCase {
+  id: string;
+  title: string;
+  // What should happen, so the tester can tell a pass from a fail.
+  expect: string;
+  options: (input: CaseInput, reference: string) => PaymentOptions;
+  // Asks again with the last order's reference, as the same reference never pays twice.
+  reusesReference?: boolean;
+  // Calls cancel() this long after asking.
+  cancelAfterMilliseconds?: number;
+}
+
+export interface CaseGroup {
+  id: string;
+  title: string;
+  subtitle: string;
+  cases: PaymentCase[];
+}
+
+// SLE 0.50 a ticket, in minor units as Monime counts money, so trying a case with real money costs
+// little: the two tickets the page starts with come to SLE 1.00.
+const TICKET_PRICE = 50;
+const SAMPLE_PHONE_NUMBER = '+23276123456';
+const SAMPLE_ACCOUNT_ID = 'fac-k6VgVTfSmLruHpiQgMg4DUeySZx';
+// httpbin.org is in network.hosts in dot.json, so Dash may download its pictures.
+const PROGRAMME_PICTURE = 'https://httpbin.org/image/png';
+
+function tickets(input: CaseInput, currency: 'SLE' | 'USD' = 'SLE'): OrderLineItem {
+  return {
+    name: 'Standing ticket',
+    unitPrice: { currency, value: TICKET_PRICE },
+    quantity: input.tickets,
+  };
+}
+
+function jazzNight(reference: string, lineItems: OrderLineItem[]): PaymentOptions {
+  return {
+    order: {
+      name: 'Jazz Night tickets',
+      reference,
+      description: 'Saturday 8 pm at the Bo Town Hall',
+      lineItems,
+      metadata: { show: 'jazz-night' },
+    },
+  };
+}
+
+function paying(methods: PaymentMethod[]) {
+  return (input: CaseInput, reference: string): PaymentOptions => ({
+    ...jazzNight(reference, [tickets(input)]),
+    methods,
+  });
+}
+
+function withItems(lineItems: OrderLineItem[]) {
+  return (_input: CaseInput, reference: string): PaymentOptions => jazzNight(reference, lineItems);
+}
+
+function changed(change: (options: PaymentOptions) => void) {
+  return (input: CaseInput, reference: string): PaymentOptions => {
+    const options = jazzNight(reference, [tickets(input)]);
+    change(options);
+    return options;
+  };
+}
+
+export const GROUPS: CaseGroup[] = [
+  {
+    id: 'methods',
+    title: 'Ways to pay',
+    subtitle: 'Which methods the sheet offers, in what order, and with which limits',
+    cases: [
+      {
+        id: 'any',
+        title: 'Any way',
+        expect: 'The sheet offers a linked account, a card and mobile money, in that order.',
+        options: (input, reference) => jazzNight(reference, [tickets(input)]),
+      },
+      {
+        id: 'card',
+        title: 'Card only',
+        expect: 'Only card. The result has a checkoutSessionId.',
+        options: paying([{ type: 'card' }]),
+      },
+      {
+        id: 'momo',
+        title: 'Mobile money only',
+        expect:
+          'Only mobile money, with Orange Money and Africell Money. The result has a paymentCodeId.',
+        options: paying([{ type: 'momo' }]),
+      },
+      {
+        id: 'link',
+        title: 'Linked account only',
+        expect:
+          'Only a linked account, greyed out if the person has none. The result has a paymentId.',
+        options: paying([{ type: 'link' }]),
+      },
+      {
+        id: 'reordered',
+        title: 'Mobile money, then card, then account',
+        expect: 'All three, in this order.',
+        options: paying([{ type: 'momo' }, { type: 'card' }, { type: 'link' }]),
+      },
+      {
+        id: 'orange',
+        title: 'Orange Money only',
+        expect: 'Mobile money with only Orange Money (m17).',
+        options: paying([{ type: 'momo', providers: { include: ['m17'] } }]),
+      },
+      {
+        id: 'africell',
+        title: 'Africell Money only',
+        expect: 'Mobile money with only Africell Money (m18).',
+        options: paying([{ type: 'momo', providers: { include: ['m18'] } }]),
+      },
+      {
+        id: 'one-number',
+        title: 'Mobile money from one number',
+        expect: 'Only the phone number above can pay. Monime refuses the code from any other.',
+        options: (input, reference) =>
+          paying([{ type: 'momo', phoneNumber: input.phoneNumber || SAMPLE_PHONE_NUMBER }])(
+            input,
+            reference,
+          ),
+      },
+      {
+        id: 'not-a-bank',
+        title: 'Account at any provider but one bank',
+        expect: 'Linked accounts, leaving out slb004.',
+        options: paying([{ type: 'link', providers: { exclude: ['slb004'] } }]),
+      },
+      {
+        id: 'banks',
+        title: 'Bank accounts only',
+        expect: 'Linked accounts at slb001, slb004 and slb007 only, so no mobile money wallets.',
+        options: paying([{ type: 'link', providers: { include: ['slb001', 'slb004', 'slb007'] } }]),
+      },
+      {
+        id: 'orange-or-account',
+        title: 'Orange Money from one number, or an account',
+        expect:
+          'Mobile money limited to Orange Money and the number above, then linked accounts but slb004.',
+        options: (input, reference) =>
+          paying([
+            {
+              type: 'momo',
+              providers: { include: ['m17'] },
+              phoneNumber: input.phoneNumber || SAMPLE_PHONE_NUMBER,
+            },
+            { type: 'link', providers: { exclude: ['slb004'] } },
+          ])(input, reference),
+      },
+    ],
+  },
+  {
+    id: 'order',
+    title: 'The order',
+    subtitle: 'What the sheet shows and where the money goes',
+    cases: [
+      {
+        id: 'items',
+        title: 'Several items with a picture',
+        expect: 'Tickets, plus a SLE 0.10 programme with its picture. Dash adds up the total.',
+        options: (input, reference) =>
+          jazzNight(reference, [
+            tickets(input),
+            {
+              name: 'Programme',
+              unitPrice: { currency: 'SLE', value: 10 },
+              imageUrl: PROGRAMME_PICTURE,
+            },
+          ]),
+      },
+      {
+        id: 'plain',
+        title: 'No description or metadata',
+        expect: 'The sheet shows only the name, the items and the total.',
+        options: (input, reference) => ({
+          order: { name: 'Jazz Night tickets', reference, lineItems: [tickets(input)] },
+        }),
+      },
+      {
+        id: 'metadata',
+        title: 'Lots of metadata',
+        expect: "Pays as usual. The metadata stays with Monime's payment and its webhooks.",
+        options: changed((options) => {
+          options.order.metadata = {
+            show: 'jazz-night',
+            seats: 'A12,A13',
+            buyer: 'Fatmata Sesay',
+            town: 'Bo',
+            channel: 'showcase',
+          };
+        }),
+      },
+      {
+        id: 'usd',
+        title: 'In US dollars',
+        expect: 'USD 0.50 a ticket. Methods that only take SLE may be greyed out.',
+        options: (input, reference) => jazzNight(reference, [tickets(input, 'USD')]),
+      },
+      {
+        id: 'sixteen',
+        title: '16 items, the most an order takes',
+        expect: 'Sixteen songs at SLE 0.05 each, SLE 0.80 in all.',
+        options: withItems(
+          Array.from({ length: 16 }, (_, index) => ({
+            name: `Song ${index + 1}`,
+            unitPrice: { currency: 'SLE' as const, value: 5 },
+          })),
+        ),
+      },
+      {
+        id: 'account',
+        title: 'To a named account',
+        expect:
+          "The money goes to the financial account above. Dash refuses one that isn't the Space's, as invalid.",
+        options: (input, reference) => ({
+          ...jazzNight(reference, [tickets(input)]),
+          financialAccountId: input.financialAccountId || SAMPLE_ACCOUNT_ID,
+        }),
+      },
+    ],
+  },
+  {
+    id: 'endings',
+    title: 'References and endings',
+    subtitle: 'Paying twice, cancelling, and reading a payment back',
+    cases: [
+      {
+        id: 'same-reference',
+        title: 'The last order again',
+        expect:
+          'Asks again with the last reference: the first payment comes back, and nobody pays twice.',
+        options: (input, reference) => jazzNight(reference, [tickets(input)]),
+        reusesReference: true,
+      },
+      {
+        id: 'cancel-soon',
+        title: 'Cancel after 5 seconds',
+        expect:
+          'If no method is picked within 5 seconds, the sheet closes and request rejects as cancelled.',
+        options: (input, reference) => jazzNight(reference, [tickets(input)]),
+        cancelAfterMilliseconds: 5_000,
+      },
+      {
+        id: 'cancel-late',
+        title: 'Stop waiting after 20 seconds',
+        expect:
+          'Pick a method in time: the payment carries on after the dot stops waiting. Check it with get.',
+        options: (input, reference) => jazzNight(reference, [tickets(input)]),
+        cancelAfterMilliseconds: 20_000,
+      },
+    ],
+  },
+  {
+    id: 'monime',
+    title: "Refused by Monime's rules",
+    subtitle:
+      'Dash checks these with Monime before the sheet opens. The simulator only checks the shape.',
+    cases: [
+      {
+        id: 'below-smallest',
+        title: 'SLE 0.01',
+        expect:
+          "In Dash, rejects as invalid, naming Monime's smallest amount. The simulator opens the sheet.",
+        options: withItems([{ name: 'Sticker', unitPrice: { currency: 'SLE', value: 1 } }]),
+      },
+      {
+        id: 'above-largest',
+        title: 'SLE 100,000,000',
+        expect:
+          "In Dash, rejects as invalid, naming Monime's largest amount. The simulator opens the sheet.",
+        options: withItems([
+          { name: 'Stadium', unitPrice: { currency: 'SLE', value: 10_000_000_000 } },
+        ]),
+      },
+      {
+        id: 'other-account',
+        title: "An account that isn't the Space's",
+        expect: 'In Dash, rejects as invalid. The simulator takes any account shaped like fac-….',
+        options: changed((options) => {
+          options.financialAccountId = 'fac-NotThisSpacesAccount';
+        }),
+      },
+    ],
+  },
+  {
+    id: 'invalid',
+    title: 'Refused before Dash',
+    subtitle:
+      'Every host checks these the same way, so each rejects as invalid with the same message.',
+    cases: [
+      {
+        id: 'no-items',
+        title: 'No line items',
+        expect: 'invalid: Give the order at least one line item',
+        options: withItems([]),
+      },
+      {
+        id: 'mixed-currencies',
+        title: 'Items in two currencies',
+        expect: "invalid: All of an order's line items must be in one currency",
+        options: (input, reference) =>
+          jazzNight(reference, [tickets(input), tickets(input, 'USD')]),
+      },
+      {
+        id: 'seventeen',
+        title: '17 items',
+        expect: 'invalid: An order can have at most 16 line items',
+        options: withItems(
+          Array.from({ length: 17 }, (_, index) => ({
+            name: `Song ${index + 1}`,
+            unitPrice: { currency: 'SLE' as const, value: 5 },
+          })),
+        ),
+      },
+      {
+        id: 'short-name',
+        title: 'A two-letter name',
+        expect: "invalid: An order's name needs 3 to 64 characters",
+        options: changed((options) => {
+          options.order.name = 'Jo';
+        }),
+      },
+      {
+        id: 'long-reference',
+        title: 'A 65-character reference',
+        expect: "invalid: An order's reference can be at most 64 characters",
+        options: (input) => jazzNight('r'.repeat(65), [tickets(input)]),
+      },
+      {
+        id: 'no-quantity',
+        title: 'A quantity of 0',
+        expect: "invalid: Line item 1's quantity must be a whole number from 1 to 100,000",
+        options: withItems([
+          {
+            name: 'Standing ticket',
+            unitPrice: { currency: 'SLE', value: TICKET_PRICE },
+            quantity: 0,
+          },
+        ]),
+      },
+      {
+        id: 'part-cent',
+        title: 'A price of 75.5 minor units',
+        expect: "invalid: Line item 1's price must be a whole number of minor units",
+        options: withItems([
+          { name: 'Standing ticket', unitPrice: { currency: 'SLE', value: 75.5 } },
+        ]),
+      },
+      {
+        id: 'other-host',
+        title: 'A picture from a host the dot never named',
+        expect:
+          "invalid: Line item 1's picture is on pictures.bo.sl, which isn't in network.hosts in dot.json",
+        options: withItems([
+          {
+            name: 'Standing ticket',
+            unitPrice: { currency: 'SLE', value: TICKET_PRICE },
+            imageUrl: 'https://pictures.bo.sl/ticket.png',
+          },
+        ]),
+      },
+      {
+        id: 'http-picture',
+        title: 'A picture over http',
+        expect: "invalid: Line item 1's picture must be an https link",
+        options: withItems([
+          {
+            name: 'Standing ticket',
+            unitPrice: { currency: 'SLE', value: TICKET_PRICE },
+            imageUrl: 'http://httpbin.org/image/png',
+          },
+        ]),
+      },
+      {
+        id: 'monime-key',
+        title: 'A metadata key starting with "monime"',
+        expect: 'invalid: The metadata key "monimeOrder" can\'t start with "@", "_" or "monime"',
+        options: changed((options) => {
+          options.order.metadata = { monimeOrder: '1042' };
+        }),
+      },
+      {
+        id: 'twice',
+        title: 'Card listed twice',
+        expect: 'invalid: The method "card" is listed twice',
+        options: paying([{ type: 'card' }, { type: 'card' }]),
+      },
+      {
+        id: 'both-filters',
+        title: 'Include and exclude together',
+        expect: "invalid: Give include or exclude for link's providers, not both",
+        options: paying([{ type: 'link', providers: { include: ['m17'], exclude: ['m18'] } }]),
+      },
+      {
+        id: 'unknown-provider',
+        title: "A provider Monime doesn't know",
+        expect: 'invalid: "m99" isn\'t a provider Monime knows for momo',
+        options: paying([{ type: 'momo', providers: { include: ['m99'] } }]),
+      },
+      {
+        id: 'local-number',
+        title: 'A number without +232',
+        expect: 'invalid: phoneNumber must be a full number starting with +',
+        options: paying([{ type: 'momo', phoneNumber: '076123456' }]),
+      },
+      {
+        id: 'bad-account',
+        title: "An account ID that isn't one",
+        expect: 'invalid: financialAccountId must be a Monime financial account ID',
+        options: changed((options) => {
+          options.financialAccountId = 'acc-1';
+        }),
+      },
+      {
+        id: 'no-methods',
+        title: 'An empty list of methods',
+        expect: 'invalid: Give at least one method, or leave methods out to offer all three',
+        options: paying([]),
+      },
+    ],
+  },
+];
+
+export function findCase(id: string): PaymentCase | undefined {
+  for (const group of GROUPS) {
+    const found = group.cases.find((paymentCase) => paymentCase.id === id);
+    if (found !== undefined) {
+      return found;
+    }
+  }
+  return undefined;
+}

package/dist/templates/showcase/pages/dash/payments/controller.ts

@@ -0,0 +1,149 @@
+import type { PaymentResult } from '@monimesl/dot-runtime';
+import { errorMessage, isDashError } from '@monimesl/dot-runtime';
+
+import { findCase } from './cases';
+import type { Run } from './state';
+import state from './state';
+
+const MAX_RUNS = 20;
+const NO_RESULT = {
+  method: '',
+  status: '',
+  amount: '',
+  resource: '',
+  requestId: '',
+  orderNumber: '',
+};
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Payments' } },
+  mutations: {
+    setTickets: (_state, event: ValueEvent) => ({ tickets: Number(event.detail.value) }),
+    setPhoneNumber: (_state, event: ValueEvent) => ({ phoneNumber: event.detail.value.trim() }),
+    setFinancialAccountId: (_state, event: ValueEvent) => ({
+      financialAccountId: event.detail.value.trim(),
+    }),
+  },
+  actions: {
+    // data-case names the case to run, from cases.ts.
+    async run(state, event: DataEvent<{ case?: string }>) {
+      const paymentCase = findCase(event.data.case ?? '');
+      if (paymentCase === undefined) {
+        return;
+      }
+      // A new reference for each order, as the same reference never pays twice.
+      let reference = `tickets-${Date.now().toString(36)}`;
+      if (paymentCase.reusesReference && state.reference !== '') {
+        reference = state.reference;
+      }
+      this.setState({
+        ...NO_RESULT,
+        reference,
+        last: {
+          title: paymentCase.title,
+          expect: paymentCase.expect,
+          outcome: 'Waiting for the payment sheet',
+        },
+      });
+      const input = {
+        tickets: state.tickets,
+        phoneNumber: state.phoneNumber,
+        financialAccountId: state.financialAccountId,
+      };
+      const request = this.dash.payments.request(paymentCase.options(input, reference));
+      const cancelAfter = paymentCase.cancelAfterMilliseconds;
+      if (cancelAfter !== undefined) {
+        // Runs beside the payment. Cancelling one that already ended does nothing.
+        this.dash.system.delay(cancelAfter).then(
+          () => request.cancel(),
+          () => undefined,
+        );
+      }
+      let outcome: string;
+      try {
+        const result = await request;
+        outcome = resultOutcome(result);
+        this.setState(shownResult(result));
+      } catch (error) {
+        outcome = errorOutcome(error);
+      }
+      // Another run may have started meanwhile, so this one names itself again.
+      this.setState((current) => ({
+        last: { title: paymentCase.title, expect: paymentCase.expect, outcome },
+        runs: added(current.runs, paymentCase.title, outcome),
+      }));
+    },
+    async checkPayment(state) {
+      const title = 'Check the last payment';
+      const found = await lookedUp(this.dash.payments.get(state.reference));
+      this.setState((current) => ({
+        ...found.shown,
+        last: { title, expect: '', outcome: found.outcome },
+        runs: added(current.runs, title, found.outcome),
+      }));
+    },
+    async lookUpUnknown() {
+      const title = 'Look up an order that never was';
+      const found = await lookedUp(this.dash.payments.get('order-that-never-was'));
+      this.setState((current) => ({
+        last: {
+          title,
+          expect: 'undefined: there is no payment for this reference',
+          outcome: found.outcome,
+        },
+        runs: added(current.runs, title, found.outcome),
+      }));
+    },
+  },
+});
+
+async function lookedUp(lookup: Promise<PaymentResult | undefined>) {
+  try {
+    const result = await lookup;
+    if (result === undefined) {
+      return { outcome: 'undefined: there is no payment for this reference', shown: {} };
+    }
+    return { outcome: resultOutcome(result), shown: shownResult(result) };
+  } catch (error) {
+    return { outcome: errorOutcome(error), shown: {} };
+  }
+}
+
+function resultOutcome(result: PaymentResult): string {
+  return `${result.status} by ${result.method}, ${moneyText(result.amount)}`;
+}
+
+function errorOutcome(error: unknown): string {
+  if (isDashError(error)) {
+    return `${error.code}: ${error.message}`;
+  }
+  return errorMessage(error);
+}
+
+function moneyText(money: PaymentResult['amount']): string {
+  return `${money.currency} ${(money.value / 100).toFixed(2)}`;
+}
+
+// The Monime resource behind the payment differs by method.
+function shownResult(result: PaymentResult) {
+  let resource = result.paymentId ?? '';
+  if (result.method === 'card') {
+    resource = result.checkoutSessionId;
+  } else if (result.method === 'momo') {
+    resource = result.paymentCodeId;
+  }
+  return {
+    method: result.method,
+    status: result.status,
+    amount: moneyText(result.amount),
+    resource,
+    requestId: result.requestId,
+    orderNumber: result.orderNumber ?? '',
+  };
+}
+
+function added(runs: readonly Run[], title: string, outcome: string): Run[] {
+  const run = { key: `${Date.now()}-${runs.length}`, title, outcome };
+  return [run, ...runs].slice(0, MAX_RUNS);
+}

package/dist/templates/showcase/pages/dash/payments/state.ts

@@ -0,0 +1,33 @@
+import { GROUPS } from './cases';
+
+export interface Run {
+  key: string;
+  title: string;
+  outcome: string;
+}
+
+export default {
+  // The cases as the view lists them, without the functions that build their requests.
+  groups: GROUPS.map((group) => ({
+    id: group.id,
+    title: group.title,
+    subtitle: group.subtitle,
+    cases: group.cases.map((paymentCase) => ({
+      id: paymentCase.id,
+      title: paymentCase.title,
+      expect: paymentCase.expect,
+    })),
+  })),
+  tickets: 2,
+  phoneNumber: '',
+  financialAccountId: '',
+  reference: '',
+  last: { title: '', expect: '', outcome: '' },
+  method: '',
+  status: '',
+  amount: '',
+  resource: '',
+  requestId: '',
+  orderNumber: '',
+  runs: [] as Run[],
+};

package/dist/templates/showcase/pages/dash/payments/view.dml

@@ -0,0 +1,71 @@
+<View>
+  <Text variant="title">dash.payments</Text>
+  <Text>Takes a payment for an order through Dash's own payment sheet. The person picks a linked account, a card or mobile money, and the money goes to the Space that owns the dot. It needs the payments permission in dot.json. Each case below says what should happen. In Dash the money is real, so the orders cost a few cents.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">The order</Text>
+    <Text variant="caption" tone="muted">The cases use these. Leave a field empty for a sample.</Text>
+    <View variant="card" gap="medium">
+      <Stepper label="Tickets" min="1" max="10" hint="SLE 0.50 each" value="{{ tickets }}" onChange="setTickets" />
+      <Input label="Phone number that may pay" placeholder="+23276123456" value="{{ phoneNumber }}" maxLength="16" onChange="setPhoneNumber" />
+      <Input label="Financial account" placeholder="fac-k6VgVTfSmLruHpiQgMg4DUeySZx" value="{{ financialAccountId }}" maxLength="64" onChange="setFinancialAccountId" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">request</Text>
+    <Text variant="caption" tone="muted">Tap a case to ask Dash for that payment. Each case gets a new reference, except The last order again.</Text>
+    <For each="{{ groups }}" item="group" key="id">
+      <Disclosure title="{{ group.title }}" subtitle="{{ group.subtitle }}" open="{{ group.id === 'methods' }}">
+        <List>
+          <For each="{{ group.cases }}" item="paymentCase" key="id">
+            <ListItem title="{{ paymentCase.title }}" subtitle="{{ paymentCase.expect }}" data-case="{{ paymentCase.id }}" onTap="run" />
+          </For>
+        </List>
+      </Disclosure>
+    </For>
+  </View>
+
+  <If condition="{{ last.title }}">
+    <View gap="small">
+      <Text variant="subtitle">{{ last.title }}</Text>
+      <If condition="{{ last.expect }}">
+        <Text variant="caption" tone="muted">Expected: {{ last.expect }}</Text>
+      </If>
+      <Notice>{{ last.outcome }}</Notice>
+      <If condition="{{ status }}">
+        <View variant="card" gap="none">
+          <DetailRow label="reference" value="{{ reference }}" />
+          <DetailRow label="method" value="{{ method }}" />
+          <DetailRow label="status" value="{{ status }}" />
+          <DetailRow label="amount" value="{{ amount }}" />
+          <DetailRow label="resource" value="{{ resource }}" />
+          <DetailRow label="requestId" value="{{ requestId }}" />
+          <If condition="{{ orderNumber }}">
+            <DetailRow label="orderNumber" value="{{ orderNumber }}" />
+          </If>
+        </View>
+      </If>
+    </View>
+  </If>
+
+  <View gap="small">
+    <Text variant="subtitle">get</Text>
+    <Text variant="caption" tone="muted">Reads a payment back by the order's reference, such as one still pending, or after the dot opens again. The resource is the Monime resource behind the payment: a checkout session for a card, a payment code for mobile money, or the payment itself for a linked account.</Text>
+    <View direction="row" wrap gap="small">
+      <Button variant="secondary" onClick="checkPayment" disabled="{{ !reference }}">Check the last payment</Button>
+      <Button variant="secondary" onClick="lookUpUnknown">Look up an order that never was</Button>
+    </View>
+  </View>
+
+  <If condition="{{ runs.length }}">
+    <View gap="small">
+      <Text variant="subtitle">Runs</Text>
+      <List>
+        <For each="{{ runs }}" item="run" key="key">
+          <ListItem title="{{ run.title }}" subtitle="{{ run.outcome }}" />
+        </For>
+      </List>
+    </View>
+  </If>
+</View>