add qr

3 files changed, 78 insertions, 4 deletions

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index b0bc05f..d800e9a 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -50,6 +50,7 @@
     "jed": "^1.1.1",
     "preact": "^10.5.13",
     "preact-router": "^3.2.1",
+    "qrcode-generator": "^1.4.4",
     "swr": "^0.5.5",
     "yup": "^0.32.9"
   },
@@ -109,7 +110,7 @@
     "preset": "jest-preset-preact",
     "transformIgnorePatterns": [
       "node_modules/.pnpm/(?!(@gnu-taler\\+taler-util))",
-      "\\.pnp\\.[^\\\/]+$"
+      "\\.pnp\\.[^\\/]+$"
     ],
     "setupFiles": [
       "<rootDir>/tests/__mocks__/browserMocks.ts",
diff --git a/packages/frontend/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx b/packages/frontend/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx
new file mode 100644
index 0000000..f013040
--- /dev/null
+++ b/packages/frontend/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx
@@ -0,0 +1,53 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, FunctionalComponent } from 'preact';
+import { CreatedSuccessfully as TestedComponent } from './CreatedSuccessfully';
+
+
+export default {
+  title: 'Pages/Reserve/CreatedSuccessfully',
+  component: TestedComponent,
+  argTypes: {
+    onCreate: { action: 'onCreate' },
+    onBack: { action: 'onBack' },
+  },
+};
+
+function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+  const r = (args: any) => <Component {...args} />
+  r.args = props
+  return r
+}
+
+export const Example = createExample(TestedComponent, {
+  entity: {
+    request: {
+      exchange_url: 'http://exchange.taler/',
+      initial_balance: 'TESTKUDOS:1',
+      wire_method: 'x-taler-bank',
+    },
+    response: {
+      payto_uri: 'payto://x-taler-bank/bank.taler:8080/exchange_account',
+      reserve_pub: 'WEQWDASDQWEASDADASDQWEQWEASDAS'
+    }
+  }
+});
diff --git a/packages/frontend/src/paths/instance/reserves/create/CreatedSuccessfully.tsx b/packages/frontend/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
index d9b5e3a..3712bd7 100644
--- a/packages/frontend/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
+++ b/packages/frontend/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
@@ -14,9 +14,11 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 import { h, VNode } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully";
 import { MerchantBackend } from "../../../../declaration";
 import { Translate } from "../../../../i18n";
+import qrcode from "qrcode-generator"
 
 type Entity = { request: MerchantBackend.Tips.ReserveCreateRequest, response: MerchantBackend.Tips.ReserveCreateConfirmation };
 
@@ -27,6 +29,7 @@ interface Props {
 }
 
 export function CreatedSuccessfully({ entity, onConfirm, onCreateAnother }: Props): VNode {
+  const link = `${entity.response.payto_uri}?message=${entity.response.reserve_pub}&amount=${entity.request.initial_balance}`
 
   return <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}>
     <div class="field is-horizontal">
@@ -66,11 +69,28 @@ export function CreatedSuccessfully({ entity, onConfirm, onCreateAnother }: Prop
       </div>
     </div>
     <p class="is-size-5"><Translate>To complete the setup of the reserve, you must now initiate a wire transfer using the given wire transfer subject and crediting the specified amount to the indicated account of the exchange.</Translate></p>
-
+    
     <p class="is-size-5"><Translate>If your system supports RFC 8905, you can do this by opening this URI:</Translate></p>
     <pre>
-      {entity.response.payto_uri}?message={entity.response.reserve_pub}&amount={entity.request.initial_balance}
+      <a target="_blank" rel="noreferrer" href={link}>{link}</a>
     </pre>
-  </Template>; // FIXME: turn the payto_uri into a clickable link, and maybe also generate a QR code (maybe on the client-side --- we do this using qrious in the auditor.git already, easy, but not sure how to best include large JS dependency in the SPA for that ...)
+    <QR text={link} />
+  </Template>;
+}
 
+const QR = ({ text }: { text: string }) => {
+  const divRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const qr = qrcode(0, 'L')
+    qr.addData(text)
+    qr.make()
+    divRef.current.innerHTML = qr.createSvgTag({
+      scalable: true,
+    })
+  })
+
+  return <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+    <div style={{ width: '50%', minWidth: 200, maxWidth: 300 }} ref={divRef} />
+  </div>
 }
+