diff options
Diffstat (limited to 'packages/demobank-ui')
| -rw-r--r-- | packages/demobank-ui/src/components/Loading.tsx | 8 | ||||
| -rw-r--r-- | packages/demobank-ui/src/i18n/it.po | 14 | ||||
| -rw-r--r-- | packages/demobank-ui/src/pages/HomePage.tsx | 15 | ||||
| -rw-r--r-- | packages/demobank-ui/src/pages/Routing.tsx | 2 | ||||
| -rw-r--r-- | packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx | 3 | ||||
| -rw-r--r-- | packages/demobank-ui/src/pages/WithdrawalQRCode.tsx | 95 | ||||
| -rw-r--r-- | packages/demobank-ui/src/scss/bank.scss | 38 | ||||
| -rw-r--r-- | packages/demobank-ui/src/utils.ts | 6 |
8 files changed, 129 insertions, 52 deletions
diff --git a/packages/demobank-ui/src/components/Loading.tsx b/packages/demobank-ui/src/components/Loading.tsx index 7cbdad681..b567e9056 100644 --- a/packages/demobank-ui/src/components/Loading.tsx +++ b/packages/demobank-ui/src/components/Loading.tsx @@ -21,9 +21,11 @@ export function Loading(): VNode { <div class="columns is-centered is-vcentered" style={{ - height: "calc(100% - 3rem)", - position: "absolute", width: "100%", + height: "200px", + display: "flex", + margin: "auto", + justifyContent: "center", }} > <Spinner /> @@ -33,7 +35,7 @@ export function Loading(): VNode { export function Spinner(): VNode { return ( - <div class="lds-ring"> + <div class="lds-ring" style={{margin:"auto"}}> <div /> <div /> <div /> diff --git a/packages/demobank-ui/src/i18n/it.po b/packages/demobank-ui/src/i18n/it.po index a3a599376..5dfebedae 100644 --- a/packages/demobank-ui/src/i18n/it.po +++ b/packages/demobank-ui/src/i18n/it.po @@ -14,8 +14,8 @@ msgstr "" "Project-Id-Version: Taler Wallet\n" "Report-Msgid-Bugs-To: taler@gnu.org\n" "POT-Creation-Date: 2016-11-23 00:00+0100\n" -"PO-Revision-Date: 2022-12-26 23:30+0000\n" -"Last-Translator: Stefan Kügel <skuegel@web.de>\n" +"PO-Revision-Date: 2023-08-15 07:28+0000\n" +"Last-Translator: Krystian Baran <kiszkot@murena.io>\n" "Language-Team: Italian <https://weblate.taler.net/projects/gnu-taler/" "taler-bank-spa/it/>\n" "Language: it\n" @@ -199,9 +199,9 @@ msgid "Amount to withdraw:" msgstr "Somma da ritirare" #: src/pages/home/WalletWithdrawForm.tsx:84 -#, fuzzy, c-format +#, c-format msgid "Withdraw" -msgstr "Conferma il ritiro" +msgstr "Prelevare" #: src/pages/home/WalletWithdrawForm.tsx:128 #, fuzzy, c-format @@ -231,12 +231,12 @@ msgstr "Trasferisci fondi a un altro conto di questa banca:" #: src/pages/home/Transactions.tsx:69 #, c-format msgid "Date" -msgstr "" +msgstr "Data" #: src/pages/home/Transactions.tsx:70 #, c-format msgid "Amount" -msgstr "Somma" +msgstr "Importo" #: src/pages/home/Transactions.tsx:71 #, c-format @@ -246,7 +246,7 @@ msgstr "Controparte" #: src/pages/home/Transactions.tsx:72 #, c-format msgid "Subject" -msgstr "Causale" +msgstr "Soggetto" #: src/pages/home/QrCodeSection.tsx:41 #, fuzzy, c-format diff --git a/packages/demobank-ui/src/pages/HomePage.tsx b/packages/demobank-ui/src/pages/HomePage.tsx index 20fcef39a..93a9bdfae 100644 --- a/packages/demobank-ui/src/pages/HomePage.tsx +++ b/packages/demobank-ui/src/pages/HomePage.tsx @@ -84,11 +84,11 @@ export function HomePage({ export function WithdrawalOperationPage({ operationId, onLoadNotOk, - onAbort, + onContinue, }: { operationId: string; onLoadNotOk: () => void; - onAbort: () => void; + onContinue: () => void; }): VNode { //FIXME: libeufin sandbox should return show to create the integration api endpoint //or return withdrawal uri from response @@ -99,12 +99,6 @@ export function WithdrawalOperationPage({ const parsedUri = parseWithdrawUri(uri); const { i18n } = useTranslationContext(); - const [settings, updateSettings] = useSettings(); - function clearCurrentWithdrawal(): void { - updateSettings("currentWithdrawalOperationId", undefined); - onAbort(); - } - if (!parsedUri) { notifyError({ title: i18n.str`The Withdrawal URI is not valid: "${uri}"`, @@ -115,10 +109,7 @@ export function WithdrawalOperationPage({ return ( <WithdrawalQRCode withdrawUri={parsedUri} - onConfirmed={() => { - notifyInfo(i18n.str`Withdrawal confirmed!`); - }} - onAborted={clearCurrentWithdrawal} + onContinue={onContinue} onLoadNotOk={onLoadNotOk} /> ); diff --git a/packages/demobank-ui/src/pages/Routing.tsx b/packages/demobank-ui/src/pages/Routing.tsx index 64f9b1208..f176c73db 100644 --- a/packages/demobank-ui/src/pages/Routing.tsx +++ b/packages/demobank-ui/src/pages/Routing.tsx @@ -40,7 +40,7 @@ export function Routing(): VNode { component={({ wopid }: { wopid: string }) => ( <WithdrawalOperationPage operationId={wopid} - onAbort={() => { + onContinue={() => { route("/account"); }} onLoadNotOk={() => { diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx index da245b75d..cdb612155 100644 --- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx @@ -33,7 +33,6 @@ import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js"; const logger = new Logger("WithdrawalConfirmationQuestion"); interface Props { - onConfirmed: () => void; onAborted: () => void; withdrawUri: WithdrawUriResult; } @@ -42,7 +41,6 @@ interface Props { * Not providing a back button, only abort. */ export function WithdrawalConfirmationQuestion({ - onConfirmed, onAborted, withdrawUri, }: Props): VNode { @@ -119,7 +117,6 @@ export function WithdrawalConfirmationQuestion({ await confirmWithdrawal( withdrawUri.withdrawalOperationId, ); - onConfirmed(); } catch (error) { if (error instanceof RequestError) { notifyError( diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx index 9f9c9925e..80fdac3c8 100644 --- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx @@ -24,6 +24,7 @@ import { Fragment, VNode, h } from "preact"; import { Loading } from "../components/Loading.js"; import { useWithdrawalDetails } from "../hooks/access.js"; import { notifyInfo } from "../hooks/notification.js"; +import { useSettings } from "../hooks/settings.js"; import { handleNotOkResult } from "./HomePage.js"; import { QrCodeSection } from "./QrCodeSection.js"; import { WithdrawalConfirmationQuestion } from "./WithdrawalConfirmationQuestion.js"; @@ -32,8 +33,7 @@ const logger = new Logger("WithdrawalQRCode"); interface Props { withdrawUri: WithdrawUriResult; - onAborted: () => void; - onConfirmed: () => void; + onContinue: () => void; onLoadNotOk: () => void; } /** @@ -43,10 +43,14 @@ interface Props { */ export function WithdrawalQRCode({ withdrawUri, - onConfirmed, - onAborted, + onContinue, onLoadNotOk, }: Props): VNode { + const [settings, updateSettings] = useSettings(); + function clearCurrentWithdrawal(): void { + updateSettings("currentWithdrawalOperationId", undefined); + onContinue(); + } const { i18n } = useTranslationContext(); const result = useWithdrawalDetails(withdrawUri.withdrawalOperationId); if (!result.ok) { @@ -64,13 +68,64 @@ export function WithdrawalQRCode({ } const { data } = result; - logger.trace("withdrawal status", data); - if (data.aborted || data.confirmation_done) { - // signal that this withdrawal is aborted - // will redirect to account info - notifyInfo(i18n.str`Operation completed`); - onAborted(); - return <Loading />; + if (data.aborted) { + return <section id="main" class="content"> + <h1 class="nav">{i18n.str`Operation aborted`}</h1> + <section> + <p> + <i18n.Translate> + The wire transfer to the GNU Taler Exchange bank's account was aborted, your balance + was not affected. + </i18n.Translate> + </p> + <p> + <i18n.Translate> + You can close this page now or continue to the account page. + </i18n.Translate> + </p> + <a class="pure-button pure-button-primary" + style={{float:"right"}} + onClick={async (e) => { + e.preventDefault(); + clearCurrentWithdrawal() + onContinue() + }}> + {i18n.str`Continue`} + </a> + + </section> + </section> + } + + if (data.confirmation_done) { + return <section id="main" class="content"> + <h1 class="nav">{i18n.str`Operation completed`}</h1> + + <section id="assets" style={{maxWidth: 400, marginLeft: "auto", marginRight:"auto"}}> + <p> + <i18n.Translate> + The wire transfer to the GNU Taler Exchange bank's account is completed, now the + exchange will send the requested amount into your GNU Taler wallet. + </i18n.Translate> + </p> + <p> + <i18n.Translate> + You can close this page now or continue to the account page. + </i18n.Translate> + </p> + <div style={{textAlign:"center"}}> + + <a class="pure-button pure-button-primary" + onClick={async (e) => { + e.preventDefault(); + clearCurrentWithdrawal() + onContinue() + }}> + {i18n.str`Continue`} + </a> + </div> + </section> + </section> } if (!data.selection_done) { @@ -79,25 +134,21 @@ export function WithdrawalQRCode({ withdrawUri={withdrawUri} onAborted={() => { notifyInfo(i18n.str`Operation canceled`); - onAborted(); - }} + clearCurrentWithdrawal() + onContinue() + }} /> ); } - // Wallet POSTed the withdrawal details! Ask the - // user to authorize the operation (here CAPTCHA). return ( <WithdrawalConfirmationQuestion withdrawUri={withdrawUri} - onConfirmed={() => { - notifyInfo(i18n.str`Operation confirmed`); - onConfirmed(); - }} onAborted={() => { notifyInfo(i18n.str`Operation canceled`); - onAborted(); - }} + clearCurrentWithdrawal() + onContinue() + }} /> ); -} +}
\ No newline at end of file diff --git a/packages/demobank-ui/src/scss/bank.scss b/packages/demobank-ui/src/scss/bank.scss index 0089b9734..f8de0a984 100644 --- a/packages/demobank-ui/src/scss/bank.scss +++ b/packages/demobank-ui/src/scss/bank.scss @@ -314,4 +314,40 @@ h1.nav { [name=wire-transfer-form] > input { margin-bottom: 1em; -}
\ No newline at end of file +} + +.lds-ring { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-ring div { + box-sizing: border-box; + display: block; + position: absolute; + width: 64px; + height: 64px; + margin: 8px; + border: 8px solid black; + border-radius: 50%; + animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: black transparent transparent transparent; +} +.lds-ring div:nth-child(1) { + animation-delay: -0.45s; +} +.lds-ring div:nth-child(2) { + animation-delay: -0.3s; +} +.lds-ring div:nth-child(3) { + animation-delay: -0.15s; +} +@keyframes lds-ring { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/packages/demobank-ui/src/utils.ts b/packages/demobank-ui/src/utils.ts index e60ba7f3b..4ce0f140e 100644 --- a/packages/demobank-ui/src/utils.ts +++ b/packages/demobank-ui/src/utils.ts @@ -134,7 +134,7 @@ export function buildRequestErrorMessage( specialCases.onClientError && specialCases.onClientError(cause.status); result = { title: title ? title : i18n.str`The server didn't accept the request`, - description: cause.payload.error.description, + description: cause?.payload?.error?.description, debug: JSON.stringify(cause), }; break; @@ -146,7 +146,7 @@ export function buildRequestErrorMessage( title: title ? title : i18n.str`The server had problems processing the request`, - description: cause.payload.error.description, + description: cause?.payload?.error?.description, debug: JSON.stringify(cause), }; break; @@ -154,7 +154,7 @@ export function buildRequestErrorMessage( case ErrorType.UNREADABLE: { result = { title: i18n.str`Unexpected error`, - description: `Response from ${cause.info?.url} is unreadable, status: ${cause.status}`, + description: `Response from ${cause?.info?.url} is unreadable, status: ${cause?.status}`, debug: JSON.stringify(cause), }; break; |