addressing marc comments

5 files changed, 78 insertions, 48 deletions

diff --git a/packages/bank-ui/src/pages/OperationState/index.ts b/packages/bank-ui/src/pages/OperationState/index.ts
index 38f698a04..2dce76a62 100644
--- a/packages/bank-ui/src/pages/OperationState/index.ts
+++ b/packages/bank-ui/src/pages/OperationState/index.ts
@@ -41,6 +41,7 @@ export interface Props {
   onAuthorizationRequired: () => void;
   routeClose: RouteDefinition;
   onAbort: () => void;
+  focus?: boolean;
   routeHere: RouteDefinition<{ wopid: string }>;
 }
 
@@ -79,6 +80,7 @@ export namespace State {
     status: "ready";
     error: undefined;
     uri: WithdrawUriResult;
+    focus?: boolean;
     onAbort: () => Promise<
       TalerCoreBankErrorsByMethod<"abortWithdrawalById"> | undefined
     >;
diff --git a/packages/bank-ui/src/pages/OperationState/state.ts b/packages/bank-ui/src/pages/OperationState/state.ts
index 540856ec8..6856f5f59 100644
--- a/packages/bank-ui/src/pages/OperationState/state.ts
+++ b/packages/bank-ui/src/pages/OperationState/state.ts
@@ -40,6 +40,7 @@ export function useComponentState({
   currency,
   routeClose,
   onAbort,
+  focus,
   routeHere,
   onAuthorizationRequired,
 }: Props): utils.RecursiveState<State> {
@@ -201,6 +202,7 @@ export function useComponentState({
         error: undefined,
         uri: parsedUri,
         routeClose,
+        focus,
         onAbort: !creds
           ? async () => {
               onAbort();
diff --git a/packages/bank-ui/src/pages/OperationState/views.tsx b/packages/bank-ui/src/pages/OperationState/views.tsx
index 62308eca6..88f34ae26 100644
--- a/packages/bank-ui/src/pages/OperationState/views.tsx
+++ b/packages/bank-ui/src/pages/OperationState/views.tsx
@@ -37,6 +37,7 @@ import { useBankState } from "../../hooks/bank-state.js";
 import { usePreferences } from "../../hooks/preferences.js";
 import { ShouldBeSameUser } from "../WithdrawalConfirmationQuestion.js";
 import { State } from "./index.js";
+import { doAutoFocus } from "../PaytoWireTransferForm.js";
 
 export function InvalidPaytoView({ payto }: State.InvalidPayto) {
   return <div>Payto from server is not valid &quot;{payto}&quot;</div>;
@@ -338,7 +339,11 @@ export function ConfirmedView({ routeClose }: State.Confirmed) {
   );
 }
 
-export function ReadyView({ uri, onAbort: doAbort }: State.Ready): VNode {
+export function ReadyView({
+  uri,
+  focus,
+  onAbort: doAbort,
+}: State.Ready): VNode {
   const { i18n } = useTranslationContext();
   const walletInegrationApi = useTalerWalletIntegrationAPI();
   const [notification, notify, errorHandler] = useLocalNotification();
@@ -387,60 +392,79 @@ export function ReadyView({ uri, onAbort: doAbort }: State.Ready): VNode {
     <Fragment>
       <LocalNotificationBanner notification={notification} />
 
-      <div class="flex justify-end mt-4">
-        <button
-          type="button"
-          name="cancel"
-          class="inline-flex items-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
-          onClick={onAbort}
-        >
-          <i18n.Translate>Cancel</i18n.Translate>
-        </button>
-      </div>
-
-      <div class="bg-white shadow sm:rounded-lg mt-4">
-        <div class="p-4">
+      <div class="bg-white shadow-xl sm:rounded-lg">
+        <div class="px-4 py-5 sm:p-6">
           <h3 class="text-base font-semibold leading-6 text-gray-900">
-            <i18n.Translate>On this device</i18n.Translate>
+            <i18n.Translate>
+              If you have a Taler wallet installed on this device
+            </i18n.Translate>
           </h3>
-          <div class="mt-2 sm:flex sm:items-start sm:justify-between">
-            <div class="max-w-xl text-sm text-gray-500">
-              <p>
-                <i18n.Translate>
-                  If you are using a web browser on desktop you can also
-                </i18n.Translate>
-              </p>
-            </div>
-            <div class="mt-5 sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center">
+          <div class="mt-4 mb-4 text-sm text-gray-500">
+            <p>
+              <i18n.Translate>
+                Your wallet will display the details of the transaction
+                including the fees (if applicable). If you do not yet have a
+                wallet, please follow the instructions
+              </i18n.Translate>{" "}
               <a
-                href={talerWithdrawUri}
-                name="start"
-                class="inline-flex items-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"
+                class="font-semibold text-indigo-600 hover:text-indigo-900"
+                name="wallet page"
+                href="https://taler.net/en/wallet.html"
               >
-                <i18n.Translate>Start</i18n.Translate>
+                <i18n.Translate>on this page</i18n.Translate>
               </a>
-            </div>
+              .
+            </p>
+          </div>
+          <div class="flex items-center justify-between gap-x-6  pt-2 mt-2 ">
+            <button
+              type="button"
+              name="cancel"
+              class="text-sm font-semibold leading-6 text-gray-900"
+              // class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-black shadow-sm "
+              onClick={onAbort}
+            >
+              <i18n.Translate>Cancel</i18n.Translate>
+            </button>
+
+            <a
+              href={talerWithdrawUri}
+              name="withdraw"
+              class="inline-flex items-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>Withdraw</i18n.Translate>
+            </a>
           </div>
         </div>
       </div>
-      <div class="bg-white shadow sm:rounded-lg mt-2">
-        <div class="p-4">
+
+      <div class="bg-white shadow-xl sm:rounded-lg mt-8">
+        <div class="px-4 py-5 sm:p-6">
           <h3 class="text-base font-semibold leading-6 text-gray-900">
-            <i18n.Translate>On a mobile phone</i18n.Translate>
+            <i18n.Translate>
+              Or if you have the Taler wallet on another device
+            </i18n.Translate>
           </h3>
-          <div class="mt-2 sm:flex sm:items-start sm:justify-between">
-            <div class="max-w-xl text-sm text-gray-500">
-              <p>
-                <i18n.Translate>
-                  Scan the QR code with your mobile device.
-                </i18n.Translate>
-              </p>
-            </div>
+          <div class="mt-4 max-w-xl text-sm text-gray-500">
+            <i18n.Translate>
+              Scan the QR below to start the withdrawal.
+            </i18n.Translate>
           </div>
           <div class="mt-2 max-w-md ml-auto mr-auto">
             <QR text={talerWithdrawUri} />
           </div>
         </div>
+        <div class="flex items-center justify-center gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
+          <button
+            type="button"
+            // class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md  px-3 py-2 text-sm font-semibold text-black shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+            class="text-sm font-semibold leading-6 text-gray-900"
+            // handler={onAbortHandler}
+            onClick={onAbort}
+          >
+            <i18n.Translate>Cancel</i18n.Translate>
+          </button>
+        </div>
       </div>
     </Fragment>
   );
diff --git a/packages/bank-ui/src/pages/QrCodeSection.tsx b/packages/bank-ui/src/pages/QrCodeSection.tsx
index 2a21295c7..0d14f52d8 100644
--- a/packages/bank-ui/src/pages/QrCodeSection.tsx
+++ b/packages/bank-ui/src/pages/QrCodeSection.tsx
@@ -76,11 +76,12 @@ export function QrCodeSection({
   return (
     <Fragment>
       <LocalNotificationBanner notification={notification} />
+
       <div class="bg-white shadow-xl sm:rounded-lg">
         <div class="px-4 py-5 sm:p-6">
           <h3 class="text-base font-semibold leading-6 text-gray-900">
             <i18n.Translate>
-              If you have a Taler wallet installed in this device
+              If you have a Taler wallet installed on this device
             </i18n.Translate>
           </h3>
           <div class="mt-4 mb-4 text-sm text-gray-500">
@@ -88,19 +89,19 @@ export function QrCodeSection({
               <i18n.Translate>
                 Your wallet will display the details of the transaction
                 including the fees (if applicable). If you do not yet have a
-                wallet, please follow the instructions on
-              </i18n.Translate>
+                wallet, please follow the instructions
+              </i18n.Translate>{" "}
               <a
-                class="font-semibold text-gray-500 hover:text-gray-400"
+                class="font-semibold text-indigo-600 hover:text-indigo-900"
                 name="wallet page"
                 href="https://taler.net/en/wallet.html"
               >
-                <i18n.Translate>this page</i18n.Translate>
+                <i18n.Translate>on this page</i18n.Translate>
               </a>
               .
             </p>
           </div>
-          <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 pt-2 mt-2 ">
+          <div class="flex items-center justify-between gap-x-6  pt-2 mt-2 ">
             <Button
               type="button"
               name="cancel"
@@ -124,7 +125,7 @@ export function QrCodeSection({
         <div class="px-4 py-5 sm:p-6">
           <h3 class="text-base font-semibold leading-6 text-gray-900">
             <i18n.Translate>
-              Or if you have the Taler wallet in another device
+              Or if you have the Taler wallet on another device
             </i18n.Translate>
           </h3>
           <div class="mt-4 max-w-xl text-sm text-gray-500">
diff --git a/packages/bank-ui/src/pages/WalletWithdrawForm.tsx b/packages/bank-ui/src/pages/WalletWithdrawForm.tsx
index 953b29d76..0afd28bfc 100644
--- a/packages/bank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/bank-ui/src/pages/WalletWithdrawForm.tsx
@@ -245,7 +245,7 @@ function OldWithdrawalForm({
         {Amounts.cmp(limit, balance) > 0 ? (
           <p class="mt-2 text-sm text-gray-900">
             <i18n.Translate>
-              You can withdraw{" "}
+              You can withdraw up to{" "}
               <RenderAmount
                 value={limit}
                 spec={config.currency_specification}
@@ -399,6 +399,7 @@ export function WalletWithdrawForm({
           />
         ) : (
           <OperationState
+            focus={focus}
             currency={limit.currency}
             onAuthorizationRequired={onAuthorizationRequired}
             routeClose={routeCancel}