add kyc warning

3 files changed, 58 insertions, 10 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
index d01ce7ca0..fd5c0cfe3 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
@@ -19,6 +19,7 @@ import { styled } from "@linaria/react";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Amount } from "../../components/Amount.js";
+import { AlertView } from "../../components/CurrentAlerts.js";
 import { ErrorMessage } from "../../components/ErrorMessage.js";
 import { SelectList } from "../../components/SelectList.js";
 import { Input, SvgIcon } from "../../components/styled/index.js";
@@ -144,11 +145,23 @@ export function NoExchangesView({
 }: SelectExchangeState.NoExchange): VNode {
   const { i18n } = useTranslationContext();
   if (!currency) {
-    return <ErrorMessage title={i18n.str`Could not find any exchange`} />;
+    return (
+      <AlertView
+        alert={{
+          type: "warning",
+          message: i18n.str`Could not find any exchange `,
+          description: i18n.str`You are trying to withdraw coins but there is no exchange and the bank didn't suggested one.`,
+        }}
+      />
+    );
   }
   return (
-    <ErrorMessage
-      title={i18n.str`Could not find any exchange for the currency ${currency}`}
+    <AlertView
+      alert={{
+        type: "warning",
+        message: i18n.str`Could not find any exchange `,
+        description: i18n.str`You are trying to withdraw coins for the currency ${currency} but there is no exchange registered in this wallet and the bank didn't suggested one.`,
+      }}
     />
   );
 }
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index cc2ed9013..f2ebb3919 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -221,6 +221,14 @@ const transactionError = {
   message: "Unexpected error code in response",
 };
 
+const kycError = {
+  code: 7025,
+  hint: "KYC check required for withdrawal",
+  kycUrl:
+    "http://localhost:6666/oauth/v2/login?client_id=taler-exchange&redirect_uri=http%3A%2F%2Flocalhost%3A8081%2F%2Fkyc-proof%2F59WFS5VXXY3CEE25BM45XPB7ZCDQZNZ46PJCMNXK05P65T9M1X90%2FKYC-PROVIDER-MYPROV%2F1",
+  when: AbsoluteTime.now(),
+};
+
 export const Withdraw = tests.createExample(TestedComponent, {
   transaction: exampleData.withdraw,
 });
@@ -257,6 +265,12 @@ export const WithdrawError = tests.createExample(TestedComponent, {
   },
 });
 
+export const WithdrawErrorKYC = tests.createExample(TestedComponent, {
+  transaction: {
+    ...exampleData.withdraw,
+    error: kycError,
+  },
+});
 // export const WithdrawErrorInDevMode = tests.createExampleInCustomContext(
 //   TestedComponent,
 //   {
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index f22f3b4ee..c6fa9ec68 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -44,7 +44,7 @@ import emptyImg from "../../static/img/empty.png";
 import { Amount } from "../components/Amount.js";
 import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js";
 import { CopyButton } from "../components/CopyButton.js";
-import { ErrorAlertView } from "../components/CurrentAlerts.js";
+import { AlertView, ErrorAlertView } from "../components/CurrentAlerts.js";
 import { Loading } from "../components/Loading.js";
 import { Kind, Part, PartCollapsible, PartPayto } from "../components/Part.js";
 import { QR } from "../components/QR.js";
@@ -199,12 +199,33 @@ export function TransactionView({
       <Fragment>
         <section style={{ padding: 8, textAlign: "center" }}>
           {transaction?.error ? (
-            <ErrorAlertView
-              error={alertFromError(
-                i18n.str`There was an error trying to complete the transaction`,
-                transaction.error,
-              )}
-            />
+            transaction.error.code === 7025 ? (
+              <AlertView
+                alert={{
+                  type: "warning",
+                  message: i18n.str`KYC check required for the transaction to complete`,
+                  description:
+                    transaction.error.kycUrl &&
+                    typeof transaction.error.kycUrl === "string" ? (
+                      <div>
+                        <i18n.Translate>
+                          Follow this link to the{` `}
+                          <a href={transaction.error.kycUrl}>KYC verifier</a>
+                        </i18n.Translate>
+                      </div>
+                    ) : (
+                      i18n.str`No more information has been provided`
+                    ),
+                }}
+              />
+            ) : (
+              <ErrorAlertView
+                error={alertFromError(
+                  i18n.str`There was an error trying to complete the transaction`,
+                  transaction.error,
+                )}
+              />
+            )
           ) : undefined}
           {transaction.pending && (
             <WarningBox>