fix #4153 and #0004154

1 files changed, 40 insertions, 39 deletions

diff --git a/extension/pages/confirm-contract.tsx b/extension/pages/confirm-contract.tsx
index d1a64a6ba..fc5dfdece 100644
--- a/extension/pages/confirm-contract.tsx
+++ b/extension/pages/confirm-contract.tsx
@@ -17,55 +17,56 @@
 /// <reference path="../lib/decl/handlebars/handlebars.d.ts" />
 "use strict";
 
-let url = URI(document.location.href);
-let query: any = URI.parseQuery(url.query());
+import {substituteFulfillmentUrl} from "../lib/web-common";
 
-let $_ = (x) => document.getElementById(x);
+declare var m: any;
 
-function renderContract(contract) {
-  let showAmount = document.getElementById("show-amount");
-  $_('merchant-name').innerText = contract.merchant.name;
+function prettyAmount(amount) {
+  let v = amount.value + amount.fraction / 1e6;
+  return `${v.toFixed(2)} ${amount.currency}`;
 }
 
-function clone(obj) {
-  // This is faster than it looks ...
-  return JSON.parse(JSON.stringify(obj));
-}
-
-
-Handlebars.registerHelper('prettyAmount', function(amount) {
-  let v = amount.value + amount.fraction / 10e6;
-  return v.toFixed(2) + " " + amount.currency;
-});
 
-
-document.addEventListener("DOMContentLoaded", (e) => {
+export function main() {
+  let url = URI(document.location.href);
+  let query: any = URI.parseQuery(url.query());
   let offer = JSON.parse(query.offer);
   console.dir(offer);
-
-  let source = $_("contract-template").innerHTML;
-  let template = Handlebars.compile(source);
-  $_("render-contract").innerHTML = template(offer.contract);
-
-  document.getElementById("confirm-pay").addEventListener("click", (e) => {
-    console.log("Query:", JSON.stringify(query));
+  let contract = offer.contract;
+
+  var Contract = {
+    view(ctrl) {
+      return [
+        m("p",
+          i18n`Hello, this is the wallet.  The merchant "${contract.merchant.name}"
+               wants to enter a contract over ${prettyAmount(contract.amount)}
+               with you.`),
+        m("p",
+          i18n`The contract contains the following products:`),
+        m('ul',
+          _.map(contract.products,
+                (p: any) => m("li",
+                              `${p.description}: ${prettyAmount(p.price)}`))),
+        m("button", {onclick: doPayment}, i18n`Confirm Payment`)
+      ];
+    }
+  };
+
+  m.mount(document.getElementById("contract"), Contract);
+
+
+  function doPayment() {
     let d = {
-      offer: JSON.parse(query.offer),
-      merchantPageUrl: query.merchantPageUrl
+      offer
     };
-    chrome.runtime.sendMessage({type:'confirm-pay', detail: d}, (resp) => {
+    chrome.runtime.sendMessage({type: 'confirm-pay', detail: d}, (resp) => {
       if (!resp.success) {
-        let source = $_("error-template").innerHTML;
-        let template = Handlebars.compile(source);
-        $_("status").innerHTML = template(resp);
+        console.log("confirm-pay error", JSON.stringify(resp));
         return;
       }
-      document.location.href = URI(d.offer.exec_url)
-        .absoluteTo(query.merchantPageUrl)
-        .addQuery({H_contract: d.offer.H_contract})
-        .href();
+      let c = d.offer.contract;
+      console.log("contract", c);
+      document.location.href = substituteFulfillmentUrl(c.fulfillment_url, offer);
     });
-  });
-});
-
-
+  }
+}