From bb1bb3755d8fd2fca7b3d043765746d93b0a8c32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eike=20Ha=C3=9F?= <eike-hass@web.de>
Date: Fri, 6 Sep 2024 10:36:42 +0200
Subject: [PATCH] improve QR code loading behavior and translation

---
 web/public/locales/en/translation.json  |  5 +++++
 web/src/components/QRCode.tsx           | 13 +++++++------
 web/src/pages/Company/ProveIdentity.tsx |  2 +-
 web/src/styles/pages/scanQRcode.scss    |  4 ++++
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
index 71574ee..0f87a65 100644
--- a/web/public/locales/en/translation.json
+++ b/web/public/locales/en/translation.json
@@ -334,6 +334,11 @@
       "incorporatedOn": "Incorporated on",
       "status": "Status"
     },
+    "QR": {
+      "copySuccess": "Link copied to clipboard",
+      "copyErrorPermission": "Could not get permission to copy text to clipboard",
+      "copyError": "Could not copy text to clipboard"
+    },
     "websocket": {
       "connectionErrorDescription": "Please try again!",
       "verification": "Verification",
diff --git a/web/src/components/QRCode.tsx b/web/src/components/QRCode.tsx
index 13cd2db..9392939 100644
--- a/web/src/components/QRCode.tsx
+++ b/web/src/components/QRCode.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import { App, Input, QRCode } from 'antd';
 import { CopyOutlined, SendOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
 
 const QRCodeComponent = ({ text, size }: { text?: string; size?: number; }) => {
 
     const { message } = App.useApp();
 
+    const { t } = useTranslation();
+
     const copyToClipbloard = (text: string) => {
 
         //@ts-ignore
@@ -15,18 +18,18 @@ const QRCodeComponent = ({ text, size }: { text?: string; size?: number; }) => {
                 navigator.clipboard.writeText(text).then(function () {
                     message.open({
                         type: 'success',
-                        content: 'Link copied to clipboard', // TODO: translate
+                        content: t("components.QR.copySuccess"),
                     });
                 }, function (err) {
                     message.open({
                         type: 'error',
-                        content: 'Could not copy text to clipboard', // TODO: translate
+                        content: t("components.QR.copyError"),
                     });
                 });
             } else {
                 message.open({
                     type: 'error',
-                    content: 'Could not get permission to copy text to clipboard', // TODO: translate
+                    content: t("components.QR.copyErrorPermission"),
                 });
             }
         });
@@ -41,9 +44,7 @@ const QRCodeComponent = ({ text, size }: { text?: string; size?: number; }) => {
     return (
         <>
             <div className='qr-code'>
-                {text && (
-                    <QRCode type="svg" status={text ? 'active' : 'loading'} bordered={false} value={text} errorLevel='H' size={size || 290} />
-                )}
+                <QRCode type="svg" status={text ? 'active' : 'loading'} bordered={false} value={text ?? "loading"} errorLevel='H' size={size || 290} />
             </div>
             <div className='qr-code__link'>
                 <Input addonBefore={<CopyOutlined onClick={() => copyToClipbloard(text ?? "")} />} value={text} onChange={() => undefined} addonAfter={<SendOutlined onClick={() => gotoLink(text ?? "")} />} />
diff --git a/web/src/pages/Company/ProveIdentity.tsx b/web/src/pages/Company/ProveIdentity.tsx
index 6d1b82e..6079d19 100644
--- a/web/src/pages/Company/ProveIdentity.tsx
+++ b/web/src/pages/Company/ProveIdentity.tsx
@@ -55,7 +55,7 @@ const ProveIdentity: React.FC = () => {
                         <Trans i18nKey="pages.company.signIn.subtitle" />
                     </p>
                     <div className='qr-wrapper'>
-                        <QRCode text={state[Scopes.CompanyHouse]?.QRcontent} />
+                        <QRCode text={undefined} />
                     </div>
                     <p className='bold'>{t(status)}</p>
                     {loading && <Loading />}
diff --git a/web/src/styles/pages/scanQRcode.scss b/web/src/styles/pages/scanQRcode.scss
index bd255c2..2076a4d 100644
--- a/web/src/styles/pages/scanQRcode.scss
+++ b/web/src/styles/pages/scanQRcode.scss
@@ -20,6 +20,10 @@
             margin-top: 15px;
             margin-bottom: 10px;
         }
+
+        .ant-qrcode-mask {
+            background: white;
+        }
     }
 
     .cta {