diff options
-rw-r--r-- | packages/bank-ui/src/pages/OperationState/index.ts | 2 | ||||
-rw-r--r-- | packages/bank-ui/src/pages/OperationState/state.ts | 2 | ||||
-rw-r--r-- | packages/bank-ui/src/pages/OperationState/views.tsx | 104 | ||||
-rw-r--r-- | packages/bank-ui/src/pages/QrCodeSection.tsx | 15 | ||||
-rw-r--r-- | packages/bank-ui/src/pages/WalletWithdrawForm.tsx | 3 |
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 "{payto}"</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} |