1 files changed, 31 insertions, 24 deletions

diff --git a/packages/backend/src/pages/OfferRefund.tsx b/packages/backend/src/pages/OfferRefund.tsx
index 6c6b77e..7b35a54 100644
--- a/packages/backend/src/pages/OfferRefund.tsx
+++ b/packages/backend/src/pages/OfferRefund.tsx
@@ -18,8 +18,11 @@
 *
 * @author Sebastian Javier Marchano (sebasjm)
 */
-import { render, h, VNode } from 'preact';
+import { render, h, Fragment, VNode } from 'preact';
 import { useEffect } from 'preact/hooks';
+import { Footer } from '../components/Footer';
+import { ShowOrderDetails } from './ShowOrderDetails';
+import { render as renderToString } from 'preact-render-to-string';
 
 export function OfferRefund(): VNode {
   useEffect(() => {
@@ -59,39 +62,40 @@ export function OfferRefund(): VNode {
 
     setTimeout(check, delayMs);
   })
-  return <section id="main" class="content">
-    <h1 >Collect Taler refund</h1>
-    <div class="taler-installed-hide">
-      <p>
-        Scan this QR code with your Taler mobile wallet:
-      </p>
-      <div class="qr">
-        {/* {{{taler_refund_qrcode_svg}}} */}
+  return <Fragment>
+    <section id="main" class="content">
+      <h1 style={{ textAlign: 'center' }}>Collect Taler refund</h1>
+      <div style={{ textAlign: 'center' }} class="taler-installed-hide">
+        <p>
+          Scan this QR code with your Taler mobile wallet:
+        </p>
+        <div class="qr">
+          {/* {{{taler_refund_qrcode_svg}}} */}
+        </div>
+        <p>
+          <a class="pure-button pure-button-active success" href='{{taler_refund_uri}}'>
+            Or open your Taller wallet
+          </a>
+        </p>
+        <p>
+          <a href="https://wallet.taler.net/">Don't have a Taler wallet yet? Install it!</a>
+        </p>
       </div>
-      <p>
-        <button onClick={() => {
-          window.location.href = '{{taler_refund_uri}}'
-        }}>
-          Or open your Taller wallet
-        </button>
-      </p>
-      <p>
-        <a href="https://wallet.taler.net/">Don't have a Taler wallet yet? Install it!</a>
-      </p>
-    </div>
-    <hr />
-  </section>
+      <hr />
+    </section>
+    <Footer />
+  </Fragment>
 }
 
 export function Title(): VNode {
   return <title>Refund available for {`{order_summary}`}</title>
 }
 
-export function mountIntoBody(): void {
+export function mount(): void {
   try {
     const params = new URL(window.location.href).searchParams
     render(<OfferRefund
-      // taler_refund_uri={params.get('taler_refund_uri') || undefined} 
+    // taler_refund_uri={params.get('taler_refund_uri') || undefined} 
     />, document.body);
   } catch (e) {
     console.error("got error", e);
@@ -99,5 +103,8 @@ export function mountIntoBody(): void {
   }
 }
 
+export function buildTimeRendering(): string {
+  return renderToString(<ShowOrderDetails />)
+}