diff options
Diffstat (limited to 'packages/demobank-ui/src/pages')
4 files changed, 134 insertions, 282 deletions
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index e682085ae..80a8224d4 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -14,7 +14,7 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; +import { Amounts, Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; import { useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser"; import { ComponentChildren, Fragment, h, VNode } from "preact"; import { StateUpdater, useEffect, useState } from "preact/hooks"; @@ -25,6 +25,7 @@ import { bankUiSettings } from "../settings.js"; import { useSettings } from "../hooks/settings.js"; import { CopyButton, CopyIcon } from "../components/CopyButton.js"; import logo from "../assets/logo-2021.svg"; +import { useAccountDetails } from "../hooks/access.js"; const IS_PUBLIC_ACCOUNT_ENABLED = false; const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; @@ -63,7 +64,9 @@ function MaybeBusinessButton({ export function BankFrame({ children, goToBusinessAccount, + account, }: { + account: string | undefined, children: ComponentChildren; goToBusinessAccount?: () => void; }): VNode { @@ -122,123 +125,118 @@ export function BankFrame({ </div> {open && - <Fragment> - <div class="relative z-10" aria-labelledby="slide-over-title" role="dialog" aria-modal="true" - onClick={() => { - setOpen(false) - }}> - <div class="fixed inset-0"></div> - - <div class="fixed inset-0 overflow-hidden"> - <div class="absolute inset-0 overflow-hidden"> - <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10"> - <div class="pointer-events-auto w-screen max-w-md" > - <div class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl" onClick={(e) => { - //do not trigger close if clicking inside the sidebar - e.stopPropagation(); - }}> - <div class="px-4 sm:px-6" > - <div class="flex items-start justify-between" > - <h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title"> - <i18n.Translate>Settings</i18n.Translate> - </h2> - <div class="ml-3 flex h-7 items-center"> - <button type="button" class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" - onClick={(e) => { - setOpen(false) - }} - - > - <span class="absolute -inset-2.5"></span> - <span class="sr-only"> - <i18n.Translate>Close panel</i18n.Translate> - </span> - <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> - <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> - </svg> - </button> - </div> + <div class="relative z-10" aria-labelledby="slide-over-title" role="dialog" aria-modal="true" + onClick={() => { + setOpen(false) + }}> + <div class="fixed inset-0"></div> + + <div class="fixed inset-0 overflow-hidden"> + <div class="absolute inset-0 overflow-hidden"> + <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10"> + <div class="pointer-events-auto w-screen max-w-md" > + <div class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl" onClick={(e) => { + //do not trigger close if clicking inside the sidebar + e.stopPropagation(); + }}> + <div class="px-4 sm:px-6" > + <div class="flex items-start justify-between" > + <h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title"> + <i18n.Translate>Preferences</i18n.Translate> + </h2> + <div class="ml-3 flex h-7 items-center"> + <button type="button" class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" + onClick={(e) => { + setOpen(false) + }} + + > + <span class="absolute -inset-2.5"></span> + <span class="sr-only"> + <i18n.Translate>Close panel</i18n.Translate> + </span> + <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> + <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> + </svg> + </button> </div> </div> - <div class="relative mt-6 flex-1 px-4 sm:px-6"> - {/* <!-- Your content --> */} - - <nav class="flex flex-1 flex-col" aria-label="Sidebar"> - <ul role="list" class="flex flex-1 flex-col gap-y-7"> - <li> - <ul role="list" class="-mx-2 space-y-1"> - <li> - <a href="#" - class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold" - onClick={() => { - backend.logOut(); - setOpen(false) - updateSettings("currentWithdrawalOperationId", undefined); - }} - > - <svg class="h-6 w-6 shrink-0 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> - <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /> - </svg> - Log out - {/* <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-gray-50 px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">5</span> */} - </a> - </li> - <li> - <div class="flex items-center justify-between"> - <span class="flex flex-grow flex-col"> - <span class="text-sm text-black font-medium leading-6 " id="availability-label"> - <i18n.Translate>Show withdrawal confirmation</i18n.Translate> - </span> + </div> + <div class="relative mt-6 flex-1 px-4 sm:px-6"> + <nav class="flex flex-1 flex-col" aria-label="Sidebar"> + <ul role="list" class="flex flex-1 flex-col gap-y-7"> + <li> + <ul role="list" class="-mx-2 space-y-1"> + <li> + <a href="#" + class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold" + onClick={() => { + backend.logOut(); + setOpen(false) + updateSettings("currentWithdrawalOperationId", undefined); + }} + > + <svg class="h-6 w-6 shrink-0 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> + <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /> + </svg> + Log out + {/* <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-gray-50 px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">5</span> */} + </a> + </li> + <li> + <div class="flex items-center justify-between"> + <span class="flex flex-grow flex-col"> + <span class="text-sm text-black font-medium leading-6 " id="availability-label"> + <i18n.Translate>Show withdrawal confirmation</i18n.Translate> </span> - <button type="button" data-enabled={settings.showWithdrawalSuccess} class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description" - - onClick={() => { - console.log(settings.showWithdrawalSuccess) - updateSettings("showWithdrawalSuccess", !settings.showWithdrawalSuccess); - }}> - <span aria-hidden="true" data-enabled={settings.showWithdrawalSuccess} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span> - </button> - </div> - </li> - </ul> - </li> - - - - <li class="sm:hidden"> - <div class="text-xs font-semibold leading-6 text-gray-400"> - <i18n.Translate>Sites</i18n.Translate> - </div> - <ul role="list" class="-mx-2 mt-2 space-y-1"> - {bankUiSettings.demoSites.map(([name, url]) => { - return <a href={url} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"> - <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">></span> - <span class="truncate">{name}</span> - </a> - })} - </ul> - </li> - </ul> - </nav> - </div> + </span> + <button type="button" data-enabled={settings.showWithdrawalSuccess} class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description" + + onClick={() => { + console.log(settings.showWithdrawalSuccess) + updateSettings("showWithdrawalSuccess", !settings.showWithdrawalSuccess); + }}> + <span aria-hidden="true" data-enabled={settings.showWithdrawalSuccess} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span> + </button> + </div> + </li> + </ul> + </li> + + + + <li class="sm:hidden"> + <div class="text-xs font-semibold leading-6 text-gray-400"> + <i18n.Translate>Sites</i18n.Translate> + </div> + <ul role="list" class="-mx-2 mt-2 space-y-1"> + {bankUiSettings.demoSites.map(([name, url]) => { + return <a href={url} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"> + <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">></span> + <span class="truncate">{name}</span> + </a> + })} + </ul> + </li> + </ul> + </nav> </div> </div> </div> </div> </div> </div> - - </Fragment> + </div> } </nav > - {true && + {account && <header class="py-5 border-t border-indigo-300 border-opacity-25 bg-indigo-600 lg:border-t lg:border-indigo-400 lg:border-opacity-25"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <div class=" flex flex-wrap items-center justify-between sm:flex-nowrap"> - <h3 class="text-2xl font-bold tracking-tight text-white"><WelcomeAccount /></h3> + <h3 class="text-2xl font-bold tracking-tight text-white"><WelcomeAccount account={account} /></h3> <div> - <h3 class="text-2xl font-bold tracking-tight text-white"><AccountBalance /></h3> + <h3 class="text-2xl font-bold tracking-tight text-white"><AccountBalance account={account} /></h3> </div> </div> </div> @@ -466,17 +464,30 @@ function Footer() { ); } -function WelcomeAccount(): VNode { +function WelcomeAccount({ account }: { account: string }): VNode { const { i18n } = useTranslationContext(); - const account = "Sebastian" - const payto: PaytoUriIBAN = parsePaytoUri("payto://iban/bank.localhost/DE955922") as PaytoUriIBAN + + const result = useAccountDetails(account); + if (!result.ok) return <div /> + + // const account = "Sebastian" + const payto = parsePaytoUri(result.data.paytoUri) + if (!payto) return <div /> + + const accountNumber = !payto.isKnown ? undefined : payto.targetType === "iban" ? payto.iban : payto.targetType === "x-taler-bank" ? payto.account : undefined; return <i18n.Translate> - Welcome, {account} (<a href={stringifyPaytoUri(payto)}>{payto.iban}</a>)! <CopyButton getContent={() => stringifyPaytoUri(payto)} /> + Welcome, {account} {accountNumber !== undefined ? + <span> + (<a href={result.data.paytoUri}>{accountNumber}</a> <CopyButton getContent={() => result.data.paytoUri} />) + </span> + : <Fragment />}! </i18n.Translate> } -function AccountBalance(): VNode { +function AccountBalance({ account }: { account: string }): VNode { + const result = useAccountDetails(account); + if (!result.ok) return <div /> - return <div>KUDOS 100.00</div> + return <div>{result.data.balance.credit_debit_indicator === "debit" ? "-" : ""} {Amounts.currencyOf(result.data.balance.amount)} {Amounts.stringifyValue(result.data.balance.amount)}</div> } diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 5e0624cbf..cdaf363e3 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -151,7 +151,7 @@ export function PaytoWireTransferForm({ ? error.message : JSON.stringify(error)) as TranslatedString ) -} + } } } @@ -160,8 +160,7 @@ export function PaytoWireTransferForm({ <div class="px-4 sm:px-0"> <h2 class="text-base font-semibold leading-7 text-gray-900"><i18n.Translate>Transfer details</i18n.Translate></h2> <div> - <div class="px-4 mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-4"> - {/* <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" --> */} + <div class="px-4 mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-1 sm:gap-x-4"> <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (!isRawPayto ? "border-indigo-600 ring-2 ring-indigo-600" : "border-gray-300")}> <input type="radio" name="project-type" value="Newsletter" class="sr-only" aria-labelledby="project-type-0-label" aria-describedby="project-type-0-description-0 project-type-0-description-1" onChange={() => { setIsRawPayto(false) @@ -169,14 +168,12 @@ export function PaytoWireTransferForm({ <span class="flex flex-1"> <span class="flex flex-col"> <span class="block text-sm font-medium text-gray-900"> - <i18n.Translate>form</i18n.Translate> + <i18n.Translate>using a form</i18n.Translate> </span> </span> </span> </label> - - {/* <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" --> */} <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (isRawPayto ? "border-indigo-600 ring-2 ring-indigo-600" : "border-gray-300")}> <input type="radio" name="project-type" value="Existing Customers" class="sr-only" aria-labelledby="project-type-1-label" aria-describedby="project-type-1-description-0 project-type-1-description-1" onChange={() => { setIsRawPayto(true) @@ -184,7 +181,7 @@ export function PaytoWireTransferForm({ <span class="flex flex-1"> <span class="flex flex-col"> <span class="block text-sm font-medium text-gray-900"> - <i18n.Translate>payto://</i18n.Translate> + <i18n.Translate>using the payto:// format</i18n.Translate> </span> </span> </span> @@ -325,107 +322,7 @@ export function PaytoWireTransferForm({ </form> </div > ) - // } - // return ( - // <div> - // <form - // class="pure-form" - // name="wire-transfer-form" - // onSubmit={(e) => { - // e.preventDefault(); - // }} - // > - // <label for="iban">{i18n.str`Receiver IBAN:`}</label> - - // <label for="subject">{i18n.str`Transfer subject:`}</label> - - // <label for="amount">{i18n.str`Amount:`}</label> - // <div style={{ width: "max-content", display: "flex" }}> - // <input - // type="text" - // readonly - // class="currency-indicator" - // size={limit.currency.length} - // maxLength={limit.currency.length} - // tabIndex={-1} - // style={{ - // borderTopRightRadius: 0, - // borderBottomRightRadius: 0, - // borderRight: 0, - // }} - // value={limit.currency} - // /> - // <input - // type="number" - // name="amount" - // id="amount" - // placeholder="amount" - // required - // style={{ - // borderTopLeftRadius: 0, - // borderBottomLeftRadius: 0, - // borderLeft: 0, - // width: 150, - // }} - // value={amount ?? ""} - // onInput={(e): void => { - // setAmount(e.currentTarget.value); - // }} - // /> - // </div> - // <ShowInputErrorLabel - // message={errorsWire?.amount} - // isDirty={amount !== undefined} - // /> - // <p style={{ display: "flex", justifyContent: "space-between" }}> - // <input - // type="submit" - // class="pure-button pure-button-primary" - // disabled={!!errorsWire} - // value="Send" - // onClick={async (e) => { - // e.preventDefault(); - // if (!(iban && subject && amount)) { - // return; - // } - - // }} - // /> - // <input - // type="button" - // class="pure-button" - // value="Clear" - // onClick={async (e) => { - // e.preventDefault(); - // setAmount(undefined); - // setIban(undefined); - // setSubject(undefined); - // }} - // /> - // </p> - // </form> - // <p> - // <a - // href="#" - // onClick={(e) => { - // setIsRawPayto(true); - // e.preventDefault(); - // }} - // > - // {i18n.str`Want to try the raw payto://-format?`} - // </a> - // </p> - // </div> - // ); - - - - // return ( - // <div> - // <p>{i18n.str`Transfer money to account identified by payto:// URI:`}</p> - // </div> - // ); } export function Amount( { diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx index 6574ec934..8c41f7576 100644 --- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx +++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx @@ -78,6 +78,7 @@ export function WalletWithdrawForm({ async function doStart() { if (!parsedAmount) return; try { + console.log("ASDASD") const result = await createWithdrawal({ amount: Amounts.stringify(parsedAmount), }); @@ -106,7 +107,7 @@ export function WalletWithdrawForm({ ? error.message : JSON.stringify(error)) as TranslatedString ) -} + } } } @@ -115,7 +116,7 @@ export function WalletWithdrawForm({ <div class="px-4 sm:px-0"> <h2 class="text-base font-semibold leading-7 text-gray-900"><i18n.Translate>Prepare your wallet</i18n.Translate></h2> <p class="mt-1 text-sm text-gray-500"> - <i18n.Translate>Upon starting you will receive the money in your digital wallet, if you don't have one please <a class="font-semibold text-gray-500 hover:text-gray-400" href="https://taler.net/en/wallet.html">install one from here</a></i18n.Translate>. + <i18n.Translate>Upon starting you will receive the money in your digital wallet, if you don't have one please <a target="_blank" rel="noreferrer noopener" class="font-semibold text-gray-500 hover:text-gray-400" href="https://taler.net/en/wallet.html">install one from here</a></i18n.Translate>. </p> <p class="mt-1 text-sm text-gray-500"> <i18n.Translate>After using your wallet you will be redirected here to confirm or cancel the operation.</i18n.Translate> @@ -147,7 +148,7 @@ export function WalletWithdrawForm({ <div class="sm:col-span-5"> <span class="isolate inline-flex rounded-md shadow-sm"> <button type="button" - class="relative inline-flex px-3 py-2 text-sm items-center rounded-l-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" + class="relative inline-flex px-6 py-4 text-sm items-center rounded-l-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" onClick={(e) => { e.preventDefault(); setAmountStr("50.00") @@ -156,7 +157,7 @@ export function WalletWithdrawForm({ 50.00 </button> <button type="button" - class="relative -ml-px -mr-px inline-flex px-3 py-2 text-sm items-center bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" + class="relative -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" onClick={(e) => { e.preventDefault(); setAmountStr("25.00") @@ -166,7 +167,7 @@ export function WalletWithdrawForm({ 25.00 </button> <button type="button" - class="relative -ml-px -mr-px inline-flex px-3 py-2 text-sm items-center bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" + class="relative -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" onClick={(e) => { e.preventDefault(); setAmountStr("10.00") @@ -175,7 +176,7 @@ export function WalletWithdrawForm({ 10.00 </button> <button type="button" - class="relative inline-flex px-3 py-2 text-sm items-center rounded-r-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" + class="relative inline-flex px-6 py-4 text-sm items-center rounded-r-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" onClick={(e) => { e.preventDefault(); setAmountStr("5.00") @@ -210,60 +211,3 @@ export function WalletWithdrawForm({ ); } -// export function Amount( -// { -// currency, -// value, -// error, -// onChange, -// }: { -// error?: string; -// currency: string; -// value: string | undefined; -// onChange?: (s: string) => void; -// }, -// ref: Ref<HTMLInputElement>, -// ): VNode { -// return ( -// <div style={{ width: "max-content" }}> -// <div> -// <input -// type="text" -// readonly -// class="currency-indicator" -// size={currency.length} -// maxLength={currency.length} -// tabIndex={-1} -// style={{ -// borderTopRightRadius: 0, -// borderBottomRightRadius: 0, -// borderRight: 0, -// }} -// value={currency} -// /> -// <input -// type="number" -// ref={ref} -// name="amount" -// id="amount" -// placeholder="0" -// style={{ -// borderTopLeftRadius: 0, -// borderBottomLeftRadius: 0, -// borderLeft: 0, -// width: 150, -// color: "black", -// }} -// value={value ?? ""} -// disabled={!onChange} -// onInput={(e): void => { -// if (onChange) { -// onChange(e.currentTarget.value); -// } -// }} -// /> -// </div> -// <ShowInputErrorLabel message={error} isDirty={value !== undefined} /> -// </div> -// ); -// } diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx index 80e7a78ac..ced152feb 100644 --- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx @@ -143,7 +143,7 @@ export function WithdrawalConfirmationQuestion({ <Fragment> <div class="bg-white shadow sm:rounded-lg"> <div class="px-4 py-5 sm:p-6"> - <h3 class="text-base font-semibold leading-6 text-gray-900"> + <h3 class="text-base font-semibold text-gray-900"> <i18n.Translate>Confirm the withdrawal operation</i18n.Translate> </h3> <div class="mt-2 max-w-xl text-sm text-gray-500"> @@ -203,7 +203,7 @@ export function WithdrawalConfirmationQuestion({ <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 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"><i18n.Translate>Answer the next question to authorize the wire transfer</i18n.Translate></h2> + <h2 class="text-base font-semibold text-gray-900"><i18n.Translate>Answer the next question to authorize the wire transfer</i18n.Translate></h2> </div> <form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2" @@ -264,7 +264,7 @@ export function WithdrawalConfirmationQuestion({ </div> <div class="px-4 mt-4 "> <div class="w-full"> - <div class="px-4 sm:px-0"> + <div class="px-4 sm:px-0 text-sm"> <p><i18n.Translate>Wire transfer details</i18n.Translate></p> </div> <div class="mt-6 border-t border-gray-100"> @@ -313,7 +313,7 @@ export function WithdrawalConfirmationQuestion({ })()} <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900">Withdrawal identification</dt> - <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{details.reserve}</dd> + <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0 break-words">{details.reserve}</dd> </div> <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900">Amount</dt> |