fix #8930

5 files changed, 32 insertions, 15 deletions

diff --git a/packages/bank-ui/src/hooks/preferences.ts b/packages/bank-ui/src/hooks/preferences.ts
index 4cb5e6a95..fadbbc8c1 100644
--- a/packages/bank-ui/src/hooks/preferences.ts
+++ b/packages/bank-ui/src/hooks/preferences.ts
@@ -19,7 +19,6 @@ import {
   TranslatedString,
   buildCodecForObject,
   codecForBoolean,
-  codecForNumber,
 } from "@gnu-taler/taler-util";
 import {
   buildStorageKey,
@@ -32,6 +31,8 @@ interface Preferences {
   showDemoDescription: boolean;
   showInstallWallet: boolean;
   showDebugInfo: boolean;
+  fastWithdrawalForm: boolean;
+  showCopyAccount: boolean;
 }
 
 export const codecForPreferences = (): Codec<Preferences> =>
@@ -40,6 +41,8 @@ export const codecForPreferences = (): Codec<Preferences> =>
     .property("showDemoDescription", codecForBoolean())
     .property("showInstallWallet", codecForBoolean())
     .property("showDebugInfo", codecForBoolean())
+    .property("fastWithdrawalForm", codecForBoolean())
+    .property("showCopyAccount", codecForBoolean())
     .build("Settings");
 
 const defaultPreferences: Preferences = {
@@ -47,6 +50,8 @@ const defaultPreferences: Preferences = {
   showDemoDescription: true,
   showInstallWallet: true,
   showDebugInfo: false,
+  fastWithdrawalForm: false,
+  showCopyAccount: false,
 };
 
 const BANK_PREFERENCES_KEY = buildStorageKey(
@@ -80,6 +85,8 @@ export function getAllBooleanPreferences(): Array<keyof Preferences> {
     "showDemoDescription",
     "showInstallWallet",
     "showWithdrawalSuccess",
+    "fastWithdrawalForm",
+    "showCopyAccount",
   ];
 }
 
@@ -90,6 +97,10 @@ export function getLabelForPreferences(
   switch (k) {
     case "showWithdrawalSuccess":
       return i18n.str`Show withdrawal confirmation`;
+    case "fastWithdrawalForm":
+      return i18n.str`Withdraw without setting amount`;
+    case "showCopyAccount":
+      return i18n.str`Show copy account letter`;
     case "showDemoDescription":
       return i18n.str`Show demo description`;
     case "showInstallWallet":
diff --git a/packages/bank-ui/src/pages/OperationState/state.ts b/packages/bank-ui/src/pages/OperationState/state.ts
index 5544c4e23..540856ec8 100644
--- a/packages/bank-ui/src/pages/OperationState/state.ts
+++ b/packages/bank-ui/src/pages/OperationState/state.ts
@@ -62,7 +62,7 @@ export function useComponentState({
     const parsedAmount = Amounts.parseOrThrow(`${currency}:${amount}`);
     if (!creds) return;
     const params: TalerCorebankApi.BankAccountCreateWithdrawalRequest =
-      settings.fastWithdrawalForm
+      preference.fastWithdrawalForm
         ? {
             suggested_amount: Amounts.stringify(parsedAmount),
           }
@@ -83,7 +83,7 @@ export function useComponentState({
     if (withdrawalOperationId === undefined) {
       doSilentStart();
     }
-  }, [settings.fastWithdrawalForm, amount]);
+  }, [preference.fastWithdrawalForm, amount]);
 
   if (failure) {
     return {
diff --git a/packages/bank-ui/src/pages/WalletWithdrawForm.tsx b/packages/bank-ui/src/pages/WalletWithdrawForm.tsx
index 7cf2c7881..953b29d76 100644
--- a/packages/bank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/bank-ui/src/pages/WalletWithdrawForm.tsx
@@ -67,6 +67,7 @@ function OldWithdrawalForm({
 }): VNode {
   const { i18n } = useTranslationContext();
   const settings = useSettingsContext();
+  const [preference] = usePreferences();
 
   // const walletInegrationApi = useTalerWalletIntegrationAPI()
   // const { navigateTo } = useNavigationContext();
@@ -144,7 +145,7 @@ function OldWithdrawalForm({
     if (!parsedAmount || !creds) return;
     await handleError(async () => {
       const params: TalerCorebankApi.BankAccountCreateWithdrawalRequest =
-        settings.fastWithdrawalForm
+        preference.fastWithdrawalForm
           ? {
               suggested_amount: Amounts.stringify(parsedAmount),
             }
@@ -349,7 +350,6 @@ export function WalletWithdrawForm({
 }): VNode {
   const { i18n } = useTranslationContext();
   const [pref, updatePref] = usePreferences();
-  const settings = useSettingsContext();
 
   return (
     <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">
@@ -388,7 +388,7 @@ export function WalletWithdrawForm({
           </Attention>
         )}
 
-        {!settings.fastWithdrawalForm ? (
+        {!pref.fastWithdrawalForm ? (
           <OldWithdrawalForm
             focus={focus}
             routeOperationDetails={routeOperationDetails}
diff --git a/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx b/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx
index 2d6b88863..7db81115f 100644
--- a/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx
+++ b/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx
@@ -43,6 +43,7 @@ import { useSessionState } from "../../hooks/session.js";
 import { LoginForm } from "../LoginForm.js";
 import { ProfileNavigation } from "../ProfileNavigation.js";
 import { AccountForm } from "../admin/AccountForm.js";
+import { usePreferences } from "../../hooks/preferences.js";
 
 export function ShowAccountDetails({
   account,
@@ -68,6 +69,7 @@ export function ShowAccountDetails({
   account: string;
 }): VNode {
   const { i18n } = useTranslationContext();
+  const [preferences] = usePreferences();
   const { state: credentials } = useSessionState();
   const creds = credentials.status !== "loggedIn" ? undefined : credentials;
   const {
@@ -540,6 +542,19 @@ export function ShowAccountDetails({
                 <i18n.Translate>Cancel</i18n.Translate>
               </a>
               <span></span>
+
+              {!preferences.showCopyAccount ? (
+                <span />
+              ) : (
+                <CopyButton
+                  getContent={() =>
+                    !accountLetter ? "" : JSON.stringify(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>
         )}
diff --git a/packages/bank-ui/src/settings.ts b/packages/bank-ui/src/settings.ts
index 6d8f7b850..c1e418bc1 100644
--- a/packages/bank-ui/src/settings.ts
+++ b/packages/bank-ui/src/settings.ts
@@ -46,13 +46,6 @@ export interface UiSettings {
   //  - value: link target, where the user is going to be redirected
   // default: empty list
   topNavSites?: Record<string, string>;
-  // Use the withdrawal form which redirect the user to the wallet
-  // without asking the amount to the user.
-  //  - true: on withdrawal creation the spa will use suggested_amount instead
-  //          of fixed amount
-  //  - false: on withdrawal creation the spa will use fixed amount
-  // default: false
-  fastWithdrawalForm?: boolean;
   // When the withdrawal form use the suggested amount the bank
   // will send a default value that the user can change.
   // default: 10
@@ -68,7 +61,6 @@ const defaultSettings: UiSettings = {
   simplePasswordForRandomAccounts: false,
   allowRandomAccountCreation: false,
   topNavSites: {},
-  fastWithdrawalForm: false,
   defaultSuggestedAmount: 10,
 };
 
@@ -76,7 +68,6 @@ const codecForUISettings = (): Codec<UiSettings> =>
   buildCodecForObject<UiSettings>()
     .property("backendBaseURL", codecOptional(codecForString()))
     .property("allowRandomAccountCreation", codecOptional(codecForBoolean()))
-    .property("fastWithdrawalForm", codecOptional(codecForBoolean()))
     .property("defaultSuggestedAmount", codecOptional(codecForNumber()))
     .property(
       "simplePasswordForRandomAccounts",