[taler-merchant-backoffice] 01/05: add qr

[gnunet]

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a commit to branch master
in repository merchant-backoffice.

commit ba74497459c00a664eef9ccb390e1b917aae08ac
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Tue Jun 22 10:10:17 2021 -0300

    add qr
---
 packages/frontend/package.json                     |  3 +-
 .../create/CreatedSuccessfully.stories.tsx         | 53 ++++++++++++++++++++++
 .../reserves/create/CreatedSuccessfully.tsx        | 26 +++++++++--
 pnpm-lock.yaml                                     |  6 +++
 4 files changed, 84 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>
 }
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 17be104..17ca1ec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,6 +57,7 @@ importers:
       preact-render-to-json: ^3.6.6
       preact-render-to-string: ^5.1.19
       preact-router: ^3.2.1
+      qrcode-generator: ^1.4.4
       rimraf: ^3.0.2
       sass: ^1.32.13
       sass-loader: 10.1.1
@@ -74,6 +75,7 @@ importers:
       jed: 1.1.1
       preact: 10.5.13
       preact-router: 3.2.1_preact@10.5.13
+      qrcode-generator: 1.4.4
       swr: 0.5.5
       yup: 0.32.9
     devDependencies:
@@ -12487,6 +12489,10 @@ packages:
     engines: {node: '>=0.6.0', teleport: '>=0.2.0'}
     dev: true
 
+  /qrcode-generator/1.4.4:
+    resolution: {integrity: 
sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==}
+    dev: false
+
   /qs/6.10.1:
     resolution: {integrity: 
sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==}
     engines: {node: '>=0.6'}

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.