contract playground

4 files changed, 129 insertions, 20 deletions

diff --git a/lib/i18n.ts b/lib/i18n.ts
index c78e8dbbf..c91b385a7 100644
--- a/lib/i18n.ts
+++ b/lib/i18n.ts
@@ -19,7 +19,11 @@
 document.addEventListener(
   "DOMContentLoaded",
   function () {
-    document.body.lang = chrome.i18n.getUILanguage();
+    try {
+      document.body.lang = chrome.i18n.getUILanguage();
+    } catch (e) {
+      // chrome.* not available?
+    }
   });
 
 declare var i18n: any;
@@ -134,7 +138,11 @@ var i18n = <any>function i18n(strings: string[], ...values: any[]) {
   return tr;
 };
 
-i18n.lang = chrome.i18n.getUILanguage();
+try {
+  i18n.lang = chrome.i18n.getUILanguage();
+} catch (e) {
+  console.warn("i18n default language not available");
+}
 i18n.strings = {};
 
 
diff --git a/lib/wallet/renderHtml.ts b/lib/wallet/renderHtml.ts
new file mode 100644
index 000000000..6d9823d71
--- /dev/null
+++ b/lib/wallet/renderHtml.ts
@@ -0,0 +1,49 @@
+/*
+ This file is part of TALER
+ (C) 2016 INRIA
+
+ TALER is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ * Helpers functions to render Taler-related data structures to HTML.
+ *
+ * @author Florian Dold
+ */
+
+
+import {AmountJson, Contract} from "./types";
+
+
+export function prettyAmount(amount: AmountJson) {
+  let v = amount.value + amount.fraction / 1e6;
+  return `${v.toFixed(2)} ${amount.currency}`;
+}
+
+export function renderContract(contract: Contract): any {
+  let merchantName = m("strong", contract.merchant.name);
+  let amount = m("strong", prettyAmount(contract.amount));
+
+  return m("div", {}, [
+    m("p",
+      i18n.parts`${merchantName}
+               wants to enter a contract over ${amount}
+               with you.`),
+    m("p",
+      i18n`You are about to purchase:`),
+    m('ul',
+
+      contract.products.map(
+            (p: any) => m("li",
+                          `${p.description}: ${prettyAmount(p.price)}`)))
+  ]);
+}
\ No newline at end of file
diff --git a/pages/confirm-contract.tsx b/pages/confirm-contract.tsx
index 19b049eb5..52e4cb79a 100644
--- a/pages/confirm-contract.tsx
+++ b/pages/confirm-contract.tsx
@@ -27,15 +27,9 @@ import MithrilComponent = _mithril.MithrilComponent;
 import {substituteFulfillmentUrl} from "../lib/wallet/helpers";
 import m from "mithril";
 import {Contract, AmountJson} from "../lib/wallet/types";
+import {renderContract, prettyAmount} from "../lib/wallet/renderHtml";
 "use strict";
 
-
-function prettyAmount(amount: AmountJson) {
-  let v = amount.value + amount.fraction / 1e6;
-  return `${v.toFixed(2)} ${amount.currency}`;
-}
-
-
 const Details = {
   controller() {
     return {collapsed: m.prop(true)};
@@ -77,17 +71,7 @@ export function main() {
   var Contract = {
     view(ctrl: any) {
       return [
-        m("p",
-          i18n.parts`${m("strong", contract.merchant.name)}
-               wants to enter a contract over ${m("strong",
-                                                  prettyAmount(contract.amount))}
-               with you.`),
-        m("p",
-          i18n`You are about to purchase:`),
-        m('ul',
-          _.map(contract.products,
-                (p: any) => m("li",
-                              `${p.description}: ${prettyAmount(p.price)}`))),
+        renderContract(contract),
         m("button.accept", {onclick: doPayment, disabled: payDisabled}, i18n`Confirm Payment`),
         (error ? m("p.errorbox", error) : []),
         m(Details, contract)
diff --git a/playground/contract.html b/playground/contract.html
new file mode 100644
index 000000000..3bc7d3480
--- /dev/null
+++ b/playground/contract.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+<head>
+  <title>Contract playground</title>
+  <meta charset="UTF-8">
+  <script src="../lib/vendor/mithril.js"></script>
+  <script src="../lib/i18n.js"></script>
+  <script src="../lib/vendor/system-csp-production.src.js"></script>
+  <script type="application/javascript">
+    var contract = {
+      "H_wire": "ADVPV6Q9P0GF74CD5H5ENYCC862AM34ZS93JDQR2G09SR8868YMPYCVQP8WGGVVYZDY2ZMG703TQESN837VBAEDCGMS2D2RADKFKW08",
+      "amount": {
+        "currency": "KUDOS", "fraction": 100000, "value": 0
+      }
+      ,
+      "auditors": [],
+      "exchanges": [{
+        "master_pub": "CQQZ9DY3MZ1ARMN5K1VKDETS04Y2QCKMMCFHZSWJWWVN82BTTH00",
+        "url": "https://exchange.demo.taler.net/"
+      }],
+      "expiry": "/Date(1483798537)/",
+      "fulfillment_url": "https://blog.demo.taler.net/essay/7._Why_Schools_Should_Exclusively_Use_Free%C2%A0Software?uuid=${H_contract}&timestamp=1475158537&tid=501210171398673",
+      "locations": {}
+      ,
+      "max_fee": {
+        "currency": "KUDOS", "fraction": 0, "value": 3
+      }
+      ,
+      "merchant": {
+        "address": "nowhere", "jurisdiction": "none", "name": "Kudos Inc."
+      }
+      ,
+      "merchant_pub": "9K5V0G537N2RPKGQVYV2Q9WBS8R7QB93RTC7BJF1YE6XQQQ6BS2G",
+      "products": [{
+        "description": "Essay: 7. Why Schools Should Exclusively Use Free Software",
+        "price": {"currency": "KUDOS", "fraction": 100000, "value": 0},
+        "product_id": 0,
+        "quantity": 1
+      }],
+      "refund_deadline": "/Date(1475158537)/",
+      "timestamp": "/Date(1475158537)/",
+      "transaction_id": 501210171398673
+    };
+  </script>
+</head>
+<body>
+  <div id="container"></div>
+<script>
+  "use strict";
+  System.config({
+    defaultJSExtensions: true,
+  });
+
+  document.addEventListener("DOMContentLoaded", () => {
+    System.import("../lib/wallet/renderHtml")
+      .then((render) => {
+        let r = render.renderContract(contract);
+        let component = {view: function () {return r;}}
+        m.mount(document.getElementById("container"), component);
+      }
+    )
+    .catch((e) => {
+      console.error(e.stack);
+    });
+  });
+</script>
+</body>
+</html>