fix #8460

1 files changed, 222 insertions, 2 deletions

diff --git a/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx b/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx
index e81d46d77..13685c2c8 100644
--- a/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx
+++ b/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx
@@ -19,10 +19,13 @@ import {
   TalerCorebankApi,
   TalerError,
   TalerErrorCode,
+  TalerRevenueHttpClient,
   TranslatedString,
   assertUnreachable,
+  parsePaytoUri,
 } from "@gnu-taler/taler-util";
 import {
+  CopyButton,
   Loading,
   LocalNotificationBanner,
   notifyInfo,
@@ -67,7 +70,7 @@ export function ShowAccountDetails({
   const { i18n } = useTranslationContext();
   const { state: credentials } = useSessionState();
   const creds = credentials.status !== "loggedIn" ? undefined : credentials;
-  const { bank: api } = useBankCoreApiContext();
+  const { bank } = useBankCoreApiContext();
   const accountIsTheCurrentUser =
     credentials.status === "loggedIn"
       ? credentials.username === account
@@ -99,7 +102,7 @@ export function ShowAccountDetails({
   async function doUpdate() {
     if (!submitAccount || !creds) return;
     await handleError(async () => {
-      const resp = await api.updateAccount(
+      const resp = await bank.updateAccount(
         {
           token: creds.token,
           username: account,
@@ -186,6 +189,31 @@ export function ShowAccountDetails({
     });
   }
 
+
+  const url = bank.getRevenueAPI(account)
+  url.username = account;
+  const baseURL = url.href;
+
+  const ac = parsePaytoUri(result.body.payto_uri);
+  const payto = !ac?.isKnown ? undefined : ac;
+  let accountLetter: string | undefined = undefined;
+  if (payto) {
+    switch (payto.targetType) {
+      case "iban": {
+        accountLetter = `account-info-url=${url.href}\naccount-type=${payto.targetType}\niban=${payto.iban}\nreceiver-name=${result.body.name}\n`;
+        break;
+      }
+      case "x-taler-bank": {
+        accountLetter = `account-info-url=${url.href}\naccount-type=${payto.targetType}\naccount=${payto.account}\nhost=${payto.host}\nreceiver-name=${result.body.name}\n`;
+        break;
+      }
+      case "bitcoin": {
+        accountLetter = `account-info-url=${url.href}\naccount-type=${payto.targetType}\naddress=${payto.address}\nreceiver-name=${result.body.name}\n`;
+        break;
+      }
+    }
+  }
+
   return (
     <Fragment>
       <LocalNotificationBanner notification={notification} showDebug={true} />
@@ -247,6 +275,198 @@ export function ShowAccountDetails({
           </div>
         </AccountForm>
       </div>
+      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-6 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
+        <div class="px-4 sm:px-0">
+          <h2 class="text-base font-semibold leading-7 text-gray-900">
+            <div class="flex items-center justify-between">
+              <span class="flex flex-grow flex-col">
+                <span
+                  class="text-sm text-black font-semibold leading-6 "
+                  id="availability-label"
+                >
+                  <i18n.Translate>Merchant integration</i18n.Translate>
+                </span>
+              </span>
+            </div>
+          </h2>
+          <p class="mt-2 text-sm text-gray-500">
+            <i18n.Translate>
+              Use this information to link your Taler Merchant Backoffice account
+              with the current bank account. You can start by copying the values,
+              then go to your merchant backoffice service provider, login into
+              your account and look for the "import" button in the "bank account" section.
+            </i18n.Translate>
+          </p>
+        </div>
+
+        {payto !== undefined &&
+          <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
+            <div class="px-4 py-6 sm:p-8">
+              <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+                <div class="sm:col-span-5">
+                  <label
+                    class="block text-sm font-medium leading-6 text-gray-900"
+                    for="account-type"
+                  >
+                    {i18n.str`Account type`}
+                  </label>
+                  <div class="mt-2">
+                    <input
+                      type="text"
+                      class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      name="account-type"
+                      id="account-type"
+                      disabled={true}
+                      value={account}
+                      autocomplete="off"
+                    />
+                  </div>
+                  <p class="mt-2 text-sm text-gray-500">
+                    <i18n.Translate>Method to use for wire transfer.</i18n.Translate>
+                  </p>
+                </div>
+                {((payto) => {
+                  switch (payto.targetType) {
+                    case "iban": {
+                      return <div class="sm:col-span-5">
+                        <label
+                          class="block text-sm font-medium leading-6 text-gray-900"
+                          for="iban"
+                        >
+                          {i18n.str`IBAN`}
+                        </label>
+                        <div class="mt-2">
+                          <input
+                            type="text"
+                            class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                            name="iban"
+                            id="iban"
+                            disabled={true}
+                            value={payto.iban}
+                            autocomplete="off"
+                          />
+                        </div>
+                        <p class="mt-2 text-sm text-gray-500">
+                          <i18n.Translate>International Bank Account Number.</i18n.Translate>
+                        </p>
+                      </div>
+                    }
+                    case "x-taler-bank": {
+                      return <div class="sm:col-span-5">
+                        <label
+                          class="block text-sm font-medium leading-6 text-gray-900"
+                          for="iban"
+                        >
+                          {i18n.str`IBAN`}
+                        </label>
+                        <div class="mt-2">
+                          <input
+                            type="text"
+                            class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                            name="iban"
+                            id="iban"
+                            disabled={true}
+                            value={payto.account}
+                            autocomplete="off"
+                          />
+                        </div>
+                        <p class="mt-2 text-sm text-gray-500">
+                          <i18n.Translate>International Bank Account Number.</i18n.Translate>
+                        </p>
+                      </div>
+                    }
+                    case "bitcoin": {
+                      return <div class="sm:col-span-5">
+                        <label
+                          class="block text-sm font-medium leading-6 text-gray-900"
+                          for="iban"
+                        >
+                          {i18n.str`Address`}
+                        </label>
+                        <div class="mt-2">
+                          <input
+                            type="text"
+                            class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                            name="iban"
+                            id="iban"
+                            disabled={true}
+                            value={"DE1231231231"}
+                            autocomplete="off"
+                          />
+                        </div>
+                        <p class="mt-2 text-sm text-gray-500">
+                          <i18n.Translate>International Bank Account Number.</i18n.Translate>
+                        </p>
+                      </div>
+                    }
+                  }
+                })(payto)}
+
+                <div class="sm:col-span-5">
+                  <label
+                    class="block text-sm font-medium leading-6 text-gray-900"
+                    for="iban"
+                  >
+                    {i18n.str`Owner's name`}
+                  </label>
+                  <div class="mt-2">
+                    <input
+                      type="text"
+                      class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      name="iban"
+                      id="iban"
+                      disabled={true}
+                      value={result.body.name}
+                      autocomplete="off"
+                    />
+                  </div>
+                  <p class="mt-2 text-sm text-gray-500">
+                    <i18n.Translate>Legal name of the person holding the account.</i18n.Translate>
+                  </p>
+                </div>
+                <div class="sm:col-span-5">
+                  <label
+                    class="block text-sm font-medium leading-6 text-gray-900"
+                    for="iban"
+                  >
+                    {i18n.str`Account info URL`}
+                  </label>
+                  <div class="mt-2">
+                    <input
+                      type="text"
+                      class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      name="iban"
+                      id="iban"
+                      disabled={true}
+                      value={baseURL}
+                      autocomplete="off"
+                    />
+                  </div>
+                  <p class="mt-2 text-sm text-gray-500">
+                    <i18n.Translate>From where the merchant can download information about incoming wire transfers to this account.</i18n.Translate>
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
+              <a
+                href={routeClose.url({})}
+                name="cancel"
+                class="text-sm font-semibold leading-6 text-gray-900"
+              >
+                <i18n.Translate>Cancel</i18n.Translate>
+              </a>
+              <CopyButton
+                getContent={() => accountLetter ?? ""}
+                class="flex text-center disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                <i18n.Translate>Copy</i18n.Translate>
+              </CopyButton>
+            </div>
+          </div>
+        }
+
+      </div>
+
     </Fragment>
   );
 }