show kyc requirement

10 files changed, 131 insertions, 39 deletions

diff --git a/Makefile b/Makefile
index 7b4003b74..e4a7abb54 100644
--- a/Makefile
+++ b/Makefile
@@ -51,12 +51,18 @@ backoffice-prebuilt:
 .PHONY: backend-prebuilt
 backend-prebuilt:
 	pnpm install --frozen-lockfile --filter @gnu-taler/merchant-backend-ui...
-	pnpm run --filter @gnu-taler/merchant-backend... build
+	pnpm run --filter @gnu-taler/merchant-backend-ui... build
 	./contrib/copy-backend-into-prebuilt.sh
 
+.PHONY: aml-backoffice-prebuilt
+aml-backoffice-prebuilt:
+	pnpm install --frozen-lockfile --filter @gnu-taler/aml-backoffice-ui...
+	pnpm run --filter @gnu-taler/aml-backoffice-ui... build
+	./contrib/copy-aml-backoffice-into-prebuilt.sh
+
 .PHONY: demobank-prebuilt
 demobank-prebuilt:
-	pnpm install --frozen-lockfile --filter @gnu-taler/merchant-ba...
+	pnpm install --frozen-lockfile --filter @gnu-taler/demobank-ui...
 	pnpm run --filter @gnu-taler/demobank-ui... build
 	./contrib/copy-demobank-into-prebuilt.sh
 
diff --git a/contrib/copy-aml-backoffice-into-prebuilt.sh b/contrib/copy-aml-backoffice-into-prebuilt.sh
new file mode 100755
index 000000000..2b94327e6
--- /dev/null
+++ b/contrib/copy-aml-backoffice-into-prebuilt.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+[ ! -d prebuilt ] && git worktree add -f prebuilt prebuilt && exit 1
+
+find packages/aml-backoffice-ui/dist/prod/ -type f -printf '%P\n' | sort > prebuilt/aml-backoffice/bof
+
+while IFS= read -r file; do
+  cp packages/aml-backoffice-ui/dist/prod/$file prebuilt/aml-backoffice/$file
+done < prebuilt/aml-backoffice/bof
+
diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
index cde74dffe..372ca7cb7 100644
--- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
+++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
@@ -33,7 +33,8 @@ import Banner from "./Banner.js";
 import { Time } from "./Time.js";
 
 interface Props extends JSX.HTMLAttributes {
-  goToTransaction: (id: string) => Promise<void>;
+  goToTransaction?: (id: string) => Promise<void>;
+  goToURL: (url: string) => void;
 }
 
 /**
@@ -41,7 +42,7 @@ interface Props extends JSX.HTMLAttributes {
  */
 const cache = { tx: [] as Transaction[] };
 
-export function PendingTransactions({ goToTransaction }: Props): VNode {
+export function PendingTransactions({ goToTransaction, goToURL }: Props): VNode {
   const api = useBackendContext();
   const state = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.GetTransactions, {}),
@@ -58,8 +59,8 @@ export function PendingTransactions({ goToTransaction }: Props): VNode {
     !state || state.hasError
       ? cache.tx
       : state.response.transactions.filter(
-          (t) => t.txState.major === TransactionMajorState.Pending,
-        );
+        (t) => t.txState.major === TransactionMajorState.Pending,
+      );
 
   if (state && !state.hasError) {
     cache.tx = transactions;
@@ -70,6 +71,7 @@ export function PendingTransactions({ goToTransaction }: Props): VNode {
   return (
     <PendingTransactionsView
       goToTransaction={goToTransaction}
+      goToURL={goToURL}
       transactions={transactions}
     />
   );
@@ -78,11 +80,58 @@ export function PendingTransactions({ goToTransaction }: Props): VNode {
 export function PendingTransactionsView({
   transactions,
   goToTransaction,
+  goToURL,
 }: {
-  goToTransaction: (id: string) => Promise<void>;
+  goToTransaction?: (id: string) => Promise<void>;
+  goToURL: (id: string) => void;
   transactions: Transaction[];
 }): VNode {
   const { i18n } = useTranslationContext();
+  const kycTransaction = transactions.find(tx => tx.kycUrl)
+  if (kycTransaction) {
+    return <div
+      style={{
+        backgroundColor: "lightcyan",
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
+      <Banner
+        titleHead={i18n.str`KYC requirement`}
+        style={{
+          backgroundColor: "lightred",
+          maxHeight: 150,
+          padding: 8,
+          flexGrow: 1,
+          maxWidth: 500,
+          overflowY: transactions.length > 3 ? "scroll" : "hidden",
+        }}
+      >
+        <Grid
+          container
+          item
+          xs={1}
+          wrap="nowrap"
+          role="button"
+          spacing={1}
+          alignItems="center"
+          onClick={() => {
+            goToURL(kycTransaction.kycUrl ?? "#")
+          }}
+        >
+          <Grid item>
+            <Typography inline bold>
+              One or more transaction require a KYC step to complete
+            </Typography>
+          </Grid>
+
+        </Grid>
+      </Banner>
+    </div>
+  }
+
+  if (!goToTransaction) return <Fragment />
+
   return (
     <div
       style={{
diff --git a/packages/taler-wallet-webextension/src/platform/api.ts b/packages/taler-wallet-webextension/src/platform/api.ts
index 76add93d1..d425a9992 100644
--- a/packages/taler-wallet-webextension/src/platform/api.ts
+++ b/packages/taler-wallet-webextension/src/platform/api.ts
@@ -234,12 +234,17 @@ export interface ForegroundPlatformAPI {
   /**
    * Popup API
    *
-   * Open a page into the wallet UI and closed the popup
+   * Open a page into the wallet UI and close the popup
    * @param page
    */
   openWalletPageFromPopup(page: string): void;
 
   /**
+   * Open a page and close the popup
+   * @param url 
+   */
+  openNewURLFromPopup(url: URL): void;
+  /**
    * Get the wallet version from manifest
    */
   getWalletWebExVersion(): WalletWebExVersion;
diff --git a/packages/taler-wallet-webextension/src/platform/chrome.ts b/packages/taler-wallet-webextension/src/platform/chrome.ts
index 4fb4bddfd..a4394be2c 100644
--- a/packages/taler-wallet-webextension/src/platform/chrome.ts
+++ b/packages/taler-wallet-webextension/src/platform/chrome.ts
@@ -55,6 +55,7 @@ const api: BackgroundPlatformAPI & ForegroundPlatformAPI = {
   listenToAllChannels: listenToAllChannels as any,
   registerReloadOnNewVersion,
   sendMessageToAllChannels,
+  openNewURLFromPopup,
   sendMessageToBackground,
   useServiceWorkerAsBackgroundProcess,
   keepAlive,
@@ -266,6 +267,13 @@ function openWalletPageFromPopup(page: string): void {
   chrome.tabs.create({ active: true, url }, () => {
     window.close();
   });
+
+}
+function openNewURLFromPopup(url: URL): void {
+  // const url = chrome.runtime.getURL(`/static/wallet.html#${page}`);
+  chrome.tabs.create({ active: true, url: url.href }, () => {
+    window.close();
+  });
 }
 
 let nextMessageIndex = 0;
diff --git a/packages/taler-wallet-webextension/src/platform/dev.ts b/packages/taler-wallet-webextension/src/platform/dev.ts
index 02d11566a..8d37930fa 100644
--- a/packages/taler-wallet-webextension/src/platform/dev.ts
+++ b/packages/taler-wallet-webextension/src/platform/dev.ts
@@ -35,6 +35,7 @@ const api: BackgroundPlatformAPI & ForegroundPlatformAPI = {
   findTalerUriInActiveTab: async () => undefined,
   findTalerUriInClipboard: async () => undefined,
   listenNetworkConnectionState,
+  openNewURLFromPopup: () => undefined,
   getPermissionsApi: () => ({
     addPermissionsListener: () => undefined,
     containsHostPermissions: async () => true,
diff --git a/packages/taler-wallet-webextension/src/popup/Application.tsx b/packages/taler-wallet-webextension/src/popup/Application.tsx
index 234e73eed..cbb9b50b2 100644
--- a/packages/taler-wallet-webextension/src/popup/Application.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Application.tsx
@@ -67,12 +67,16 @@ function ApplicationView(): VNode {
     redirectTo(Pages.balanceTransaction({ tid }));
   }
 
+  function redirectToURL(str: string): void {
+    platform.openNewURLFromPopup(new URL(str))
+  }
+
   return (
     <Router history={hash_history}>
       <Route
         path={Pages.balance}
         component={() => (
-          <PopupTemplate path="balance" goToTransaction={redirectToTxInfo}>
+          <PopupTemplate path="balance" goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
             <BalancePage
               goToWalletManualWithdraw={() => redirectTo(Pages.receiveCash({}))}
               goToWalletDeposit={(currency: string) =>
@@ -92,7 +96,7 @@ function ApplicationView(): VNode {
           // const [, setDismissed] = useTalerActionURL();
 
           return (
-            <PopupTemplate>
+            <PopupTemplate goToURL={redirectToURL}>
               <TalerActionFound
                 url={decodeURIComponent(action)}
                 onDismiss={() => {
@@ -108,7 +112,7 @@ function ApplicationView(): VNode {
       <Route
         path={Pages.backup}
         component={() => (
-          <PopupTemplate path="backup" goToTransaction={redirectToTxInfo}>
+          <PopupTemplate path="backup" goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
             <BackupPage
               onAddProvider={() => redirectTo(Pages.backupProviderAdd)}
             />
@@ -118,7 +122,7 @@ function ApplicationView(): VNode {
       <Route
         path={Pages.backupProviderDetail.pattern}
         component={({ pid }: { pid: string }) => (
-          <PopupTemplate path="backup">
+          <PopupTemplate path="backup" goToURL={redirectToURL}>
             <ProviderDetailPage
               onPayProvider={(uri: string) =>
                 redirectTo(`${Pages.ctaPay}?talerPayUri=${uri}`)
@@ -206,17 +210,16 @@ function PopupTemplate({
   path,
   children,
   goToTransaction,
+  goToURL,
 }: {
   path?: PopupNavBarOptions;
   children: ComponentChildren;
   goToTransaction?: (id: string) => Promise<void>;
+  goToURL: (s: string) => void;
 }): VNode {
   return (
     <Fragment>
-      {/* <CheckTalerActionComponent /> */}
-      {goToTransaction ? (
-        <PendingTransactions goToTransaction={goToTransaction} />
-      ) : undefined}
+      <PendingTransactions goToTransaction={goToTransaction} goToURL={goToURL} />
       <PopupNavBar path={path} />
       <PopupBox>
         <AlertProvider>{children}</AlertProvider>
diff --git a/packages/taler-wallet-webextension/src/taler-wallet-interaction-support.ts b/packages/taler-wallet-webextension/src/taler-wallet-interaction-support.ts
index 33c2bc249..04f68e4fa 100644
--- a/packages/taler-wallet-webextension/src/taler-wallet-interaction-support.ts
+++ b/packages/taler-wallet-webextension/src/taler-wallet-interaction-support.ts
@@ -138,13 +138,17 @@ function buildApi(config: Readonly<Info>): API {
    */
   function registerProtocolHandler() {
     const observer = new MutationObserver(checkForNewAnchors);
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-      attributes: false,
+    document.addEventListener("DOMContentLoaded", function (event) {
+      //do work
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: false,
+      });
+
+      overrideAllAnchor(document.body);
     });
 
-    overrideAllAnchor(document.body);
   }
 
   return {
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index 4c4ba1855..7bd4195ee 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -90,6 +90,10 @@ export function Application(): VNode {
   async function redirectToTxInfo(tid: string): Promise<void> {
     redirectTo(Pages.balanceTransaction({ tid }));
   }
+  function redirectToURL(str: string): void {
+    window.location.href = new URL(str).href
+  }
+
   return (
     <TranslationProvider source={strings}>
       <IoCProviderForRuntime>
@@ -97,7 +101,7 @@ export function Application(): VNode {
           <Route
             path={Pages.welcome}
             component={() => (
-              <WalletTemplate>
+              <WalletTemplate goToURL={redirectToURL}>
                 <WelcomePage />
               </WalletTemplate>
             )}
@@ -106,7 +110,7 @@ export function Application(): VNode {
           <Route
             path={Pages.qr}
             component={() => (
-              <WalletTemplate goToTransaction={redirectToTxInfo}>
+              <WalletTemplate goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
                 <QrReaderPage
                   onDetected={(talerActionUrl: TalerUri) => {
                     redirectTo(
@@ -123,7 +127,7 @@ export function Application(): VNode {
           <Route
             path={Pages.settings}
             component={() => (
-              <WalletTemplate goToTransaction={redirectToTxInfo}>
+              <WalletTemplate goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
                 <SettingsPage />
               </WalletTemplate>
             )}
@@ -131,7 +135,7 @@ export function Application(): VNode {
           <Route
             path={Pages.notifications}
             component={() => (
-              <WalletTemplate>
+              <WalletTemplate goToURL={redirectToURL}>
                 <NotificationsPage />
               </WalletTemplate>
             )}
@@ -142,7 +146,7 @@ export function Application(): VNode {
           <Route
             path={Pages.settingsExchangeAdd.pattern}
             component={() => (
-              <WalletTemplate>
+              <WalletTemplate goToURL={redirectToURL}>
                 <AddExchange onBack={() => redirectTo(Pages.balance)} />
               </WalletTemplate>
             )}
@@ -151,7 +155,7 @@ export function Application(): VNode {
           <Route
             path={Pages.balanceHistory.pattern}
             component={({ currency }: { currency?: string }) => (
-              <WalletTemplate path="balance" goToTransaction={redirectToTxInfo}>
+              <WalletTemplate path="balance" goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
                 <HistoryPage
                   currency={currency}
                   goToWalletDeposit={(currency: string) =>
@@ -171,7 +175,7 @@ export function Application(): VNode {
           <Route
             path={Pages.sendCash.pattern}
             component={({ amount }: { amount?: string }) => (
-              <WalletTemplate path="balance">
+              <WalletTemplate path="balance" goToURL={redirectToURL}>
                 <DestinationSelectionPage
                   type="send"
                   amount={amount}
@@ -188,7 +192,7 @@ export function Application(): VNode {
           <Route
             path={Pages.receiveCash.pattern}
             component={({ amount }: { amount?: string }) => (
-              <WalletTemplate path="balance">
+              <WalletTemplate path="balance" goToURL={redirectToURL}>
                 <DestinationSelectionPage
                   type="get"
                   amount={amount}
@@ -206,7 +210,7 @@ export function Application(): VNode {
           <Route
             path={Pages.balanceTransaction.pattern}
             component={({ tid }: { tid: string }) => (
-              <WalletTemplate path="balance">
+              <WalletTemplate path="balance" goToURL={redirectToURL}>
                 <TransactionPage
                   tid={tid}
                   goToWalletHistory={(currency?: string) =>
@@ -220,7 +224,7 @@ export function Application(): VNode {
           <Route
             path={Pages.balanceDeposit.pattern}
             component={({ amount }: { amount: string }) => (
-              <WalletTemplate path="balance">
+              <WalletTemplate path="balance" goToURL={redirectToURL}>
                 <DepositPage
                   amount={amount}
                   onCancel={(currency: string) => {
@@ -237,7 +241,7 @@ export function Application(): VNode {
           <Route
             path={Pages.backup}
             component={() => (
-              <WalletTemplate path="backup" goToTransaction={redirectToTxInfo}>
+              <WalletTemplate path="backup" goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
                 <BackupPage
                   onAddProvider={() => redirectTo(Pages.backupProviderAdd)}
                 />
@@ -247,7 +251,7 @@ export function Application(): VNode {
           <Route
             path={Pages.backupProviderDetail.pattern}
             component={({ pid }: { pid: string }) => (
-              <WalletTemplate>
+              <WalletTemplate goToURL={redirectToURL}>
                 <ProviderDetailPage
                   pid={pid}
                   onPayProvider={(uri: string) =>
@@ -264,7 +268,7 @@ export function Application(): VNode {
           <Route
             path={Pages.backupProviderAdd}
             component={() => (
-              <WalletTemplate>
+              <WalletTemplate goToURL={redirectToURL}>
                 <AddBackupProviderPage
                   onPaymentRequired={(uri: string) =>
                     redirectTo(`${Pages.ctaPay}?talerPayUri=${uri}`)
@@ -284,7 +288,7 @@ export function Application(): VNode {
           <Route
             path={Pages.dev}
             component={() => (
-              <WalletTemplate path="dev" goToTransaction={redirectToTxInfo}>
+              <WalletTemplate path="dev" goToTransaction={redirectToTxInfo} goToURL={redirectToURL}>
                 <DeveloperPage />
               </WalletTemplate>
             )}
@@ -595,10 +599,12 @@ function WalletTemplate({
   path,
   children,
   goToTransaction,
+  goToURL,
 }: {
   path?: WalletNavBarOptions;
   children: ComponentChildren;
   goToTransaction?: (id: string) => Promise<void>;
+  goToURL: (url: string) => void;
 }): VNode {
   const online = useIsOnline();
   const { i18n } = useTranslationContext();
@@ -611,9 +617,9 @@ function WalletTemplate({
       )}
       <LogoHeader />
       <WalletNavBar path={path} />
-      {goToTransaction ? (
-        <PendingTransactions goToTransaction={goToTransaction} />
-      ) : undefined}
+      <PendingTransactions
+        goToTransaction={goToTransaction}
+        goToURL={goToURL} />
       <WalletBox>
         <AlertProvider>
           <CurrentAlerts />
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 076110522..fcedc12f0 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -258,7 +258,7 @@ function TransactionTemplate({
                   <div>
                     <i18n.Translate>
                       Follow this link to the{` `}
-                      <a href={transaction.kycUrl}>KYC verifier</a>
+                      <a rel="noreferrer" target="_bank" href={transaction.kycUrl}>KYC verifier</a>
                     </i18n.Translate>
                   </div>
                 ) : (