Demobank

{i18n.str`Date`}	{i18n.str`Amount`}	{i18n.str`Counterpart`}	{i18n.str`Subject`}
- {item.when.t_ms === "never" - ? "" - : format(item.when.t_ms, "dd/MM/yyyy HH:mm:ss")} -	- {item.negative ? "-" : ""} - {item.amount ? ( - `${Amounts.stringifyValue(item.amount)} ${ - item.amount.currency - }` - ) : ( - <invalid value> - )} -	{item.counterpart}	{item.subject}

{i18n.str`Date`}	{i18n.str`Amount`}	{i18n.str`Counterpart`}	{i18n.str`Subject`}
+ {item.when.t_ms === "never" + ? "" + : format(item.when.t_ms, "dd/MM/yyyy HH:mm:ss")} +	{item.negative ? "-" : ""} + {item.amount ? ( + `${Amounts.stringifyValue(item.amount)} ${item.amount.currency + }` + ) : ( + <{i18n.str`invalid value`}> + )}	{item.counterpart}	{item.subject}

- {/* */} + {children}

@@ -207,15 +282,15 @@ export function BankFrame({ // /> // ) : undefined} - // + // // { - // backend.logOut(); - // updateSettings("currentWithdrawalOperationId", undefined); - // }} + // onClick={() => { + // backend.logOut(); + // updateSettings("currentWithdrawalOperationId", undefined); + // }} // >{i18n.str`Logout`} // // ) : undefined} @@ -225,149 +300,110 @@ export function BankFrame({ // // {children} // - // // ); } -function maybeDemoContent(content: VNode): VNode { - if (bankUiSettings.showDemoNav) { - return content; - } - return ; -} +// function maybeDemoContent(content: VNode): VNode { +// if (bankUiSettings.showDemoNav) { +// return content; +// } +// return ; +// } -export function ErrorBannerFloat({ - error, - onClear, -}: { - error: ErrorMessage; - onClear?: () => void; -}): VNode { - return ( -

- -

- ); -} +// export function ErrorBannerFloat({ +// error, +// onClear, +// }: { +// error: ErrorMessage; +// onClear?: () => void; +// }): VNode { +// return ( +//

+// +//

+// ); +// } -function ErrorBanner({ - error, - onClear, -}: { - error: ErrorMessage; - onClear?: () => void; -}): VNode { - return ( -

- {error.title} -

- {onClear && ( - { - e.preventDefault(); - onClear(); - }} - /> - )} -

{error.description}

- ); -} - -function StatusBanner(): VNode | null { - const [info, setInfo] = useState(); - const [error, setError] = useState(); - useEffect(() => { - return onNotificationUpdate((newValue) => { - if (newValue === undefined) { - setInfo(undefined); - setError(undefined); - } else { - if (newValue.type === "error") { - setError(newValue.error); - } else { - setInfo(newValue.info); - } - } - }); - }, []); - return ( -

- {!info ? undefined : ( -

- {info} -

- { - setInfo(undefined); - }} - /> +function StatusBanner(): VNode { + const notifs = useNotifications() + return

{ + notifs.map(n => { + const info = n.message.type === "info" ? n.message : undefined + const error = n.message.type === "error" ? n.message : undefined + switch (n.message.type) { + case "error": + return

+ +

{n.message.title}

+ +

+ {n.message.description && +

+ {n.message.description} +

+ }

- )} - {!error ? undefined : ( - { - setError(undefined); - }} - /> - )} -

- ); + case "info": + return

+ +

{n.message.title}

+ +

+ } + })} +

+ } function TestingTag(): VNode { @@ -392,12 +428,12 @@ function TestingTag(): VNode { function Footer() { return ( -

{i18n.str`Date`}	{i18n.str`Amount`}	{i18n.str`Counterpart`}	{i18n.str`Subject`}	{i18n.str`Date`}	{i18n.str`Amount`}	{i18n.str`Counterpart`}	{i18n.str`Subject`}
+	{item.when.t_ms === "never" ? "" : format(item.when.t_ms, "dd/MM/yyyy HH:mm:ss")} @@ -66,7 +66,7 @@ export function ReadyView({ transactions }: State.Ready): VNode { <{i18n.str`invalid value`}> )}	{item.counterpart}	{item.subject}	{item.subject}

{i18n.str`Username`}	{i18n.str`Name`}	{i18n.str`Balance`}	{i18n.str`Actions`}
- { - e.preventDefault(); - setShowDetails(item.username); - }} - > - {item.username} - -	{item.name}	- {!balance ? ( - i18n.str`unknown` - ) : ( - - {balanceIsDebit ? - : null} - {`${Amounts.stringifyValue( - balance, - )}`} - - {`${balance.currency}`} - - )} -	- { - e.preventDefault(); - setUpdatePassword(item.username); - }} - > - change password - - - { - e.preventDefault(); - setShowCashouts(item.username); - }} - > - cashouts - - - { - e.preventDefault(); - setRemoveAccount(item.username); - }} - > - remove - -

{i18n.str`Username`}	{i18n.str`Name`}	{i18n.str`Balance`}	{i18n.str`Actions`}
+ { + e.preventDefault(); + onAction("show-details", item.username) + }} + > + {item.username} + +	{item.name}	+ {!balance ? ( + i18n.str`unknown` + ) : ( + + {balanceIsDebit ? - : null} + {`${Amounts.stringifyValue( + balance, + )}`} + + {`${balance.currency}`} + + )} +	+ { + e.preventDefault(); + onAction("update-password", item.username) + }} + > + change password + + + { + e.preventDefault(); + onAction("show-cashout", item.username) + }} + > + cashouts + + + { + e.preventDefault(); + onAction("remove-account", item.username) + }} + > + remove + +

{i18n.str`Username`}	{i18n.str`Name`}	{i18n.str`Balance`}	+ {i18n.str`Actions`} +
- {item.username} -	- {item.name} -	- {!balance ? ( - i18n.str`unknown` - ) : ( - - {balanceIsDebit ? - : null} - {`${Amounts.stringifyValue( - balance, - )}`} - - {`${balance.currency}`} - - )} -	- { - e.preventDefault(); - onAction("update-password", item.username) - }} - > - change password - - - { - e.preventDefault(); - onAction("show-cashout", item.username) - }} - > - cashouts - - - { - e.preventDefault(); - onAction("remove-account", item.username) - }} - > - remove - -
+ { + e.preventDefault(); + onAction("show-details", item.username) + }} + > + {item.username} + - {/* */} -

- {children}

@@ -301,79 +318,46 @@ export function BankFrame({ ); } +function MaybeShowDebugInfo({ info }: { info: any }): VNode { + const [settings] = useSettings() + if (settings.showDebugInfo) { + return

+    {info}
+

+ } + return +} + function StatusBanner(): VNode { const notifs = useNotifications() - return

{ + if (notifs.length === 0) return + return

{ notifs.map(n => { switch (n.message.type) { case "error": - return

- -

{n.message.title}

- -

+ return { + n.remove() + }}> {n.message.description &&

{n.message.description}

} + + {/* + show debug info + {n.message.debug &&

{n.message.debug}

- } -

+ } */} + case "info": - return

- -

{n.message.title}

- -

+ return { + n.remove(); + }} /> } })}

diff --git a/packages/demobank-ui/src/pages/HomePage.tsx b/packages/demobank-ui/src/pages/HomePage.tsx index d945d80d1..95144f086 100644 --- a/packages/demobank-ui/src/pages/HomePage.tsx +++ b/packages/demobank-ui/src/pages/HomePage.tsx @@ -137,8 +137,8 @@ export function handleNotOkResult( const errorData = result.payload; notify({ type: "error", - title: i18n.str`Could not load due to a client error`, - description: errorData?.error?.description as TranslatedString, + title: i18n.str`Could not load due to a request error`, + description: i18n.str`Request to url "${result.info.url}" returned ${result.info.status}`, debug: JSON.stringify(result), }); break; @@ -174,7 +174,7 @@ export function handleNotOkResult( assertUnreachable(result); } } - route("/") + // route("/") return

error

; } return

; diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx index 14d261622..3ea94b899 100644 --- a/packages/demobank-ui/src/pages/LoginForm.tsx +++ b/packages/demobank-ui/src/pages/LoginForm.tsx @@ -23,6 +23,7 @@ import { useBackendContext } from "../context/backend.js"; import { useCredentialsChecker } from "../hooks/useCredentialsChecker.js"; import { bankUiSettings } from "../settings.js"; import { undefinedIfEmpty } from "../utils.js"; +import { doAutoFocus } from "./PaytoWireTransferForm.js"; /** @@ -98,8 +99,8 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { }); } else { saveError({ - title: i18n.str`Could not load due to a client error`, - // description: cause.payload.error.description, + title: i18n.str`Could not load due to a request error`, + description: i18n.str`Request to url "${cause.info.url}" returned ${cause.info.status}`, debug: JSON.stringify(cause.payload), }); } @@ -159,8 +160,7 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode {

- The wire transfer to the Taler exchange bank's account is completed, now the - exchange will send the requested amount into your GNU Taler wallet. + The wire transfer to the Taler operator has been initiated. You will soon receive the requested amount in your Taler wallet.

diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index 49419d0dc..fef272831 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -30,7 +30,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ const { i18n } = useTranslationContext(); const [settings] = useSettings(); - const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(); + const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>("wire-transfer"); return (

@@ -82,7 +82,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ another bank account - Make a wire transfer to an account which you know the address. + Make a wire transfer to an account which you know the bank account number @@ -108,6 +108,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ limit={limit} onSuccess={() => { notifyInfo(i18n.str`Wire transfer created!`); + setTab(undefined) }} onCancel={() => { setTab(undefined) diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 5f5a6ce3b..785dc4264 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -55,10 +55,11 @@ export function PaytoWireTransferForm({ onCancel: (() => void) | undefined; limit: AmountJson; }): VNode { - const [isRawPayto, setIsRawPayto] = useState(false); - const [iban, setIban] = useState(undefined); - const [subject, setSubject] = useState(undefined); - const [amount, setAmount] = useState(undefined); + const [isRawPayto, setIsRawPayto] = useState(true); + // FIXME: remove this + const [iban, setIban] = useState("DE4745461198061"); + const [subject, setSubject] = useState("ASD"); + const [amount, setAmount] = useState("1.00001"); const [rawPaytoInput, rawPaytoInputSetter] = useState( undefined, @@ -76,17 +77,17 @@ export function PaytoWireTransferForm({ const errorsWire = undefinedIfEmpty({ iban: !iban - ? i18n.str`Missing IBAN` + ? i18n.str`required` : !IBAN_REGEX.test(iban) ? i18n.str`IBAN should have just uppercased letters and numbers` : validateIBAN(iban, i18n), - subject: !subject ? i18n.str`Missing subject` : undefined, + subject: !subject ? i18n.str`required` : undefined, amount: !trimmedAmountStr - ? i18n.str`Missing amount` + ? i18n.str`required` : !parsedAmount - ? i18n.str`Amount is not valid` + ? i18n.str`not valid` : Amounts.isZero(parsedAmount) - ? i18n.str`Should be greater than 0` + ? i18n.str`should be greater than 0` : Amounts.cmp(limit, parsedAmount) === -1 ? i18n.str`balance is not enough` : undefined, @@ -101,14 +102,14 @@ export function PaytoWireTransferForm({ ? i18n.str`required` : !parsed ? i18n.str`does not follow the pattern` - : !parsed.params.amount - ? i18n.str`use the "amount" parameter to specify the amount to be transferred` - : Amounts.parse(parsed.params.amount) === undefined - ? i18n.str`the amount is not valid` - : !parsed.params.message - ? i18n.str`use the "message" parameter to specify a reference text for the transfer` - : !parsed.isKnown || parsed.targetType !== "iban" - ? i18n.str`only "IBAN" target are supported` + : !parsed.isKnown || parsed.targetType !== "iban" + ? i18n.str`only "IBAN" target are supported` + : !parsed.params.amount + ? i18n.str`use the "amount" parameter to specify the amount to be transferred` + : Amounts.parse(parsed.params.amount) === undefined + ? i18n.str`the amount is not valid` + : !parsed.params.message + ? i18n.str`use the "message" parameter to specify a reference text for the transfer` : !IBAN_REGEX.test(parsed.iban) ? i18n.str`IBAN should have just uppercased letters and numbers` : validateIBAN(parsed.iban, i18n), @@ -159,6 +160,9 @@ export function PaytoWireTransferForm({ } return (

+ {/** + * FIXME: Scan a qr code + */}

{title} @@ -167,6 +171,17 @@ export function PaytoWireTransferForm({
{ + if (parsed && parsed.isKnown && parsed.targetType === "iban") { + setIban(parsed.iban) + const amount = Amounts.parse(parsed.params["amount"]) + if (amount) { + setAmount(Amounts.stringifyValue(amount)) + } + const subject = parsed.params["subject"] + if (subject) { + setSubject(subject) + } + } setIsRawPayto(false) }} /> @@ -180,12 +195,22 @@ export function PaytoWireTransferForm({ { + if (iban) { + const payto = buildPayto("iban", iban, undefined) + if (parsedAmount) { + payto.params["amount"] = Amounts.stringify(parsedAmount) + } + if (subject) { + payto.params["message"] = subject + } + rawPaytoInputSetter(stringifyPaytoUri(payto)) + } setIsRawPayto(true) }} /> - using the payto:// format + Import payto:// URI @@ -195,7 +220,7 @@ export function PaytoWireTransferForm({

{ @@ -203,105 +228,106 @@ export function PaytoWireTransferForm({ }} >
-
- {!isRawPayto ? - - -
- {i18n.str`Account number`} -
- { - setIban(e.currentTarget.value); - }} - /> - -
-
the receiver of the money
-
+ {!isRawPayto ? +
-
- {i18n.str`Transfer subject`} -
- { - setSubject(e.currentTarget.value); - }} - /> - -
-
some text to identify the transfer
+
+ {i18n.str`Recipient`} +
+ { + setIban(e.currentTarget.value.toUpperCase()); + }} + /> +
+
+ IBAN of the recipient's account +
+
-
- {i18n.str`Amount`} - { - setAmount(d) +
+ {i18n.str`Transfer subject`} +
+ { + setSubject(e.currentTarget.value); }} /> -
amount to transfer

+
some text to identify the transfer
+
- : - -
- {i18n.str`payto URI:`} -
- { - rawPaytoInputSetter(e.currentTarget.value); - }} - /> - -
-
+
+ {i18n.str`Amount`} + { + setAmount(d) + }} + /> + +
amount to transfer
+
- - } -
+
: +
+
+ {i18n.str`payto URI:`} +
+ { + rawPaytoInputSetter(e.currentTarget.value); + }} + /> + <ShowInputErrorLabel + message={errorsPayto?.rawPaytoInput} + isDirty={rawPaytoInput !== undefined} + /> + </div> + </div> + </div> + } </div> <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8"> {onCancel ? @@ -328,17 +354,37 @@ export function PaytoWireTransferForm({ ) } + +/** + * Show the element when the load ended + * @param element + / +export function doAutoFocus(element: HTMLElement | null) { + if (element) { + window.requestIdleCallback(() => { + element.focus() + element.scrollIntoView({ + behavior: "smooth", + block: "center", + inline: "center" + }) + }) + } +} + export function Amount( { currency, name, value, error, + left, onChange, }: { error?: string; currency: string; name: string; + left?: boolean | undefined, value: string | undefined; onChange?: (s: string) => void; }, @@ -346,13 +392,16 @@ export function Amount( ): VNode { return ( <div class="mt-2"> - <div class="relative rounded-md shadow-sm"> - <div class="pointer-events-none absolute inset-y-0 flex items-center pl-3"> + <div class="flex rounded-md shadow-sm border-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600"> + <div + class="pointer-events-none inset-y-0 flex items-center px-3" + > <span class="text-gray-500 sm:text-sm">{currency}</span> </div> <input type="number" - class="text-right block w-full rounded-md border-0 py-1.5 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + data-left={left} + class="text-right rounded-md rounded-l-none data-[left=true]:text-left w-full py-1.5 pl-3 text-gray-900 placeholder:text-gray-400 sm:text-sm sm:leading-6" placeholder="0.00" aria-describedby="price-currency" ref={ref} name={name} @@ -371,3 +420,4 @@ export function Amount( </div> ); } + diff --git a/packages/demobank-ui/src/pages/QrCodeSection.tsx b/packages/demobank-ui/src/pages/QrCodeSection.tsx index 0a5a386ae..6a50d4ef3 100644 --- a/packages/demobank-ui/src/pages/QrCodeSection.tsx +++ b/packages/demobank-ui/src/pages/QrCodeSection.tsx @@ -86,7 +86,6 @@ export function QrCodeSection({ </h3> <div class="mt-4"> <a href={talerWithdrawUri} - // class="text-sm font-semibold leading-6 text-gray-900 btn " 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>Click here to start</i18n.Translate> diff --git a/packages/demobank-ui/src/pages/UpdateAccountPassword.tsx b/packages/demobank-ui/src/pages/UpdateAccountPassword.tsx index d19c411f3..46f4fe0ef 100644 --- a/packages/demobank-ui/src/pages/UpdateAccountPassword.tsx +++ b/packages/demobank-ui/src/pages/UpdateAccountPassword.tsx @@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from "preact/hooks"; import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js"; import { useAdminAccountAPI, useBusinessAccountDetails } from "../hooks/circuit.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; +import { doAutoFocus } from "./PaytoWireTransferForm.js"; export function UpdateAccountPassword({ account, @@ -27,11 +28,6 @@ export function UpdateAccountPassword({ const [password, setPassword] = useState<string | undefined>(); const [repeat, setRepeat] = useState<string | undefined>(); - const ref = useRef<HTMLInputElement>(null); - useEffect(() => { - if (focus) ref.current?.focus(); - }, [focus]); - if (!result.ok) { if (result.loading || result.type === ErrorType.TIMEOUT) { return onLoadNotOk(result); @@ -96,7 +92,7 @@ export function UpdateAccountPassword({ </label> <div class="mt-2"> <input - ref={ref} + ref={focus ? doAutoFocus : undefined} type="password" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" name="password" diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx index 3c5ee34fd..7357223b7 100644 --- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx +++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx @@ -29,14 +29,15 @@ import { notifyError, useTranslationContext, } from "@gnu-taler/web-util/browser"; -import { VNode, h } from "preact"; +import { Fragment, VNode, h } from "preact"; import { forwardRef } from "preact/compat"; import { useEffect, useRef, useState } from "preact/hooks"; import { useAccessAPI } from "../hooks/access.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; -import { Amount } from "./PaytoWireTransferForm.js"; +import { Amount, doAutoFocus } from "./PaytoWireTransferForm.js"; import { useSettings } from "../hooks/settings.js"; import { OperationState } from "./OperationState/index.js"; +import { Attention } from "../components/Attention.js"; const logger = new Logger("WalletWithdrawForm"); const RefAmount = forwardRef(Amount); @@ -53,47 +54,13 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: { const { createWithdrawal } = useAccessAPI(); const [amountStr, setAmountStr] = useState<string | undefined>(`${settings.maxWithdrawalAmount}`); - const ref = useRef<HTMLInputElement>(null); - useEffect(() => { - if (focus) ref.current?.focus(); - }, [focus]); if (!!settings.currentWithdrawalOperationId) { - return <div> - - <div class="rounded-md bg-yellow-50 ring-yellow-2 p-4"> - <div class="flex"> - <div class="flex-shrink-0"> - <svg class="h-5 w-5 text-yellow-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" /> - </svg> - </div> - <div class="ml-3"> - <h3 class="text-sm font-bold text-yellow-800"> - <i18n.Translate>There is an operation already</i18n.Translate> - </h3> - <div class="mt-2 text-sm text-yellow-700"> - <p> - <i18n.Translate> - To complete or cancel the operation click <a class="font-semibold text-yellow-700 hover:text-yellow-600" href={`#/operation/${settings.currentWithdrawalOperationId}`}>here</a> - </i18n.Translate> - </p> - </div> - - </div> - </div> - </div > - <div class="flex justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8 " > - <button type="button" class="text-sm font-semibold leading-6 text-gray-900 bg-white p-2 rounded-sm" - onClick={() => { - updateSettings("currentWithdrawalOperationId", undefined) - onCancel() - }} - > - <i18n.Translate>Cancel</i18n.Translate> - </button> - </div> - </div> + return <Attention type="warning" title={i18n.str`There is an operation already`}> + <i18n.Translate> + To complete or cancel the operation click <a class="font-semibold text-yellow-700 hover:text-yellow-600" href={`#/operation/${settings.currentWithdrawalOperationId}`}>here</a> + </i18n.Translate> + </Attention> } const trimmedAmountStr = amountStr?.trim(); @@ -157,8 +124,8 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: { e.preventDefault() }} > - <div class="px-4 py-6 sm:p-8"> - <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> + <div class="px-4 py-6 "> + <div class="grid max-w-xs grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> <div class="sm:col-span-5"> <label for="withdraw-amount">{i18n.str`Amount`}</label> <RefAmount @@ -169,51 +136,53 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: { setAmountStr(v); }} error={errors?.amount} - ref={ref} + ref={focus ? doAutoFocus : undefined} /> </div> - <div class="sm:col-span-5"> - <span class="isolate inline-flex rounded-md shadow-sm"> - <button type="button" - 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") - }} - > - 50.00 - </button> - <button type="button" - 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") - }} - > + </div> + <div class="mt-4"> + <div class="sm:inline"> - 25.00 - </button> - <button type="button" - 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") - }} - > - 10.00 - </button> - <button type="button" - 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") - }} - > - 5.00 - </button> - </span> - </div> + <button type="button" + class=" 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") + }} + > + 50.00 + </button> + <button type="button" + class=" -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center rounded-r-md sm:rounded-none 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") + }} + > + 25.00 + </button> + </div> + <div class="mt-4 sm:inline"> + <button type="button" + class=" -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center rounded-l-md sm:rounded-none 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") + }} + > + 10.00 + </button> + <button type="button" + class=" 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") + }} + > + 5.00 + </button> + </div> </div> </div> <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8"> @@ -255,46 +224,20 @@ 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>After using your wallet you will confirm or cancel the operation.</i18n.Translate> + <i18n.Translate>After using your wallet you will need to confirm or cancel the operation on this site.</i18n.Translate> </p> </div> <div class="col-span-2"> - {settings.showInstallWallet && <div class="rounded-md bg-blue-50 ring-blue-2 ring-2 p-4"> - <div class="flex"> - <div class="flex-shrink-0"> - <svg class="h-5 w-5 text-blue-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" /> - </svg> - </div> - <div class="ml-3"> - <h3 class="text-sm font-bold text-blue-800"> - <i18n.Translate>You need a GNU Taler Wallet</i18n.Translate> - </h3> - <div class="mt-2 text-sm text-blue-700"> - <p> - <i18n.Translate> - If you dont have one yet you can follow the instruction <a target="_blank" rel="noreferrer noopener" class="font-semibold text-blue-700 hover:text-blue-600" href="https://taler.net/en/wallet.html">here</a> - </i18n.Translate> - </p> - <p class="mt-3 text-sm flex justify-end"> - <button type="button" class="inline-flex font-semibold items-center rounded bg-white px-2 py-1 text-xs text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" - onClick={(e) => { - e.preventDefault(); - updateSettings("showInstallWallet", false); - }} - > - I know - <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" /> - </svg> - </button> - </p> - - </div> - </div> - </div> - </div>} + {settings.showInstallWallet && + <Attention title={i18n.str`You need a GNU Taler Wallet`} onClose={() => { + updateSettings("showInstallWallet", false); + }}> + <i18n.Translate> + If you don't have one yet you can follow the instruction <a target="_blank" rel="noreferrer noopener" class="font-semibold text-blue-700 hover:text-blue-600" href="https://taler.net/en/wallet.html">here</a> + </i18n.Translate> + </Attention> + } {!settings.fastWithdrawal ? <OldWithdrawalForm diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx index d160a88b3..208d4b859 100644 --- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx @@ -37,6 +37,7 @@ import { useMemo, useState } from "preact/hooks"; import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js"; import { useAccessAnonAPI } from "../hooks/access.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; +import { useSettings } from "../hooks/settings.js"; const logger = new Logger("WithdrawalConfirmationQuestion"); @@ -59,6 +60,7 @@ export function WithdrawalConfirmationQuestion({ withdrawUri, }: Props): VNode { const { i18n } = useTranslationContext(); + const [settings, updateSettings] = useSettings() const captchaNumbers = useMemo(() => { return { @@ -87,7 +89,9 @@ export function WithdrawalConfirmationQuestion({ await confirmWithdrawal( withdrawUri.withdrawalOperationId, ); - notifyInfo(i18n.str`Wire transfer completed!`) + if (!settings.showWithdrawalSuccess) { + notifyInfo(i18n.str`Wire transfer completed!`) + } } catch (error) { if (error instanceof RequestError) { notify( @@ -203,7 +207,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 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" @@ -311,14 +315,10 @@ 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 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> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> - {Amounts.stringifyValue(details.amount)} + {Amounts.currencyOf(details.amount)} {Amounts.stringifyValue(details.amount)} </dd> </div> </dl> diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx index 8f4e175f6..c8efc033b 100644 --- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx @@ -94,20 +94,12 @@ export function WithdrawalQRCode({ </div> <div class="mt-3 text-center sm:mt-5"> <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title"> - <i18n.Translate>Withdrawal OK</i18n.Translate> + <i18n.Translate>Withdrawal confirmed</i18n.Translate> </h3> <div class="mt-2"> <p class="text-sm text-gray-500"> <i18n.Translate> - The wire transfer to the Taler exchange bank's account is completed, now the - exchange will send the requested amount into your GNU Taler wallet. - </i18n.Translate> - </p> - </div> - <div class="mt-2"> - <p > - <i18n.Translate> - You can close this page now or continue to the account page. + The wire transfer to the Taler operator has been initiated. You will soon receive the requested amount in your Taler wallet. </i18n.Translate> </p> </div> diff --git a/packages/demobank-ui/src/pages/admin/AccountForm.tsx b/packages/demobank-ui/src/pages/admin/AccountForm.tsx index 02df824a2..ed8bf610d 100644 --- a/packages/demobank-ui/src/pages/admin/AccountForm.tsx +++ b/packages/demobank-ui/src/pages/admin/AccountForm.tsx @@ -4,6 +4,7 @@ import { PartialButDefined, RecursivePartial, WithIntermediate, undefinedIfEmpty import { useEffect, useRef, useState } from "preact/hooks"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { buildPayto, parsePaytoUri } from "@gnu-taler/taler-util"; +import { doAutoFocus } from "../PaytoWireTransferForm.js"; const IBAN_REGEX = /^[A-Z][A-Z0-9]$/; const EMAIL_REGEX = @@ -37,10 +38,6 @@ export function AccountForm({ RecursivePartial<typeof initial> | undefined >(undefined); const { i18n } = useTranslationContext(); - const ref = useRef<HTMLInputElement>(null); - useEffect(() => { - if (focus) ref.current?.focus(); - }, [focus]); function updateForm(newForm: typeof initial): void { @@ -97,7 +94,6 @@ export function AccountForm({ <div class="px-4 py-6 sm:p-8"> <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> - <div class="sm:col-span-5"> <label class="block text-sm font-medium leading-6 text-gray-900" @@ -108,7 +104,7 @@ export function AccountForm({ </label> <div class="mt-2"> <input - ref={ref} + ref={focus ? doAutoFocus : undefined} type="text" class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" name="username" diff --git a/packages/demobank-ui/src/pages/admin/Home.tsx b/packages/demobank-ui/src/pages/admin/Home.tsx index ffa559097..d50ff14b4 100644 --- a/packages/demobank-ui/src/pages/admin/Home.tsx +++ b/packages/demobank-ui/src/pages/admin/Home.tsx @@ -10,6 +10,7 @@ import { AdminAccount } from "./Account.js"; import { AccountList } from "./AccountList.js"; import { CreateNewAccount } from "./CreateNewAccount.js"; import { RemoveAccount } from "./RemoveAccount.js"; +import { Transactions } from "../../components/Transactions/index.js"; /** * Query account information and show QR code if there is pending withdrawal @@ -141,6 +142,7 @@ export function AdminHome({ onRegister }: Props): VNode { <AdminAccount onRegister={onRegister} /> + <Transactions account="admin"/> </Fragment> ); } \ No newline at end of file diff --git a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx index 1e5370afc..b323b0d01 100644 --- a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx +++ b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx @@ -6,6 +6,8 @@ import { Amounts, HttpStatusCode, TranslatedString } from "@gnu-taler/taler-util import { buildRequestErrorMessage, undefinedIfEmpty } from "../../utils.js"; import { useEffect, useRef, useState } from "preact/hooks"; import { ShowInputErrorLabel } from "../../components/ShowInputErrorLabel.js"; +import { Attention } from "../../components/Attention.js"; +import { doAutoFocus } from "../PaytoWireTransferForm.js"; export function RemoveAccount({ account, @@ -36,47 +38,15 @@ export function RemoveAccount({ } return onLoadNotOk(result); } - const ref = useRef<HTMLInputElement>(null); - useEffect(() => { - if (focus) ref.current?.focus(); - }, [focus]); - const balance = Amounts.parse(result.data.balance.amount); if (!balance) { return <div>there was an error reading the balance</div>; } const isBalanceEmpty = Amounts.isZero(balance); if (!isBalanceEmpty) { - return <div> - <div class="rounded-md bg-yellow-50 p-4"> - <div class="flex"> - <div class="flex-shrink-0"> - <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" /> - </svg> - </div> - <div class="ml-3"> - <h3 class="text-sm font-medium text-yellow-800"> - <i18n.Translate>Can't delete the account</i18n.Translate> - </h3> - <div class="mt-2 text-sm text-yellow-700"> - <p> - <i18n.Translate>The account can't be delete while still holding some balance. First make sure that the owner make a complete cashout.</i18n.Translate> - </p> - </div> - </div> - - </div> - </div> - <div class="mt-2 flex justify-end"> - <button type="button" class="rounded-md ring-1 ring-gray-400 bg-white px-3 py-2 text-sm font-semibold shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 " - onClick={() => { - onCancel() - }}> - <i18n.Translate>Go back</i18n.Translate> - </button> - </div> - </div> + return <Attention type="warning" title={i18n.str`Can't delete the account`} onClose={onCancel}> + <i18n.Translate>The account can't be delete while still holding some balance. First make sure that the owner make a complete cashout.</i18n.Translate> + </Attention> } async function doRemove() { @@ -117,26 +87,9 @@ export function RemoveAccount({ return ( <div> - <div class="rounded-md bg-yellow-50 p-4"> - <div class="flex"> - <div class="flex-shrink-0"> - <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" /> - </svg> - </div> - <div class="ml-3"> - <h3 class="text-sm font-bold text-yellow-800"> - <i18n.Translate>You are going to remove the account</i18n.Translate> - </h3> - <div class="mt-2 text-sm text-yellow-700"> - <p> - <i18n.Translate>This step can't be undone.</i18n.Translate> - </p> - </div> - </div> - - </div> - </div> + <Attention type="warning" title={i18n.str`You are going to remove the account`}> + <i18n.Translate>This step can't be undone.</i18n.Translate> + </Attention> <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"> @@ -164,7 +117,7 @@ export function RemoveAccount({ </label> <div class="mt-2"> <input - ref={ref} + ref={focus ? doAutoFocus : undefined} type="text" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" name="password" -- cgit v1.2.3 From 372ddff91798cf9247eaf045f0d0ce33694fd880 Mon Sep 17 00:00:00 2001 From: Sebastian <sebasjm@gmail.com> Date: Sun, 1 Oct 2023 12:50:43 -0300 Subject: render amount and limit input --- .../demobank-ui/src/components/Cashouts/views.tsx | 5 +- .../src/components/Transactions/views.tsx | 23 +++++---- packages/demobank-ui/src/components/app.tsx | 7 +-- packages/demobank-ui/src/context/config.ts | 52 +++++++++++++++++++ packages/demobank-ui/src/declaration.d.ts | 24 +++++++-- packages/demobank-ui/src/hooks/config.ts | 22 +++++--- packages/demobank-ui/src/pages/BankFrame.tsx | 58 +++++++++++----------- packages/demobank-ui/src/pages/PaymentOptions.tsx | 6 +-- .../src/pages/PaytoWireTransferForm.tsx | 39 ++++++++++++--- .../demobank-ui/src/pages/WalletWithdrawForm.tsx | 4 +- .../src/pages/WithdrawalConfirmationQuestion.tsx | 3 +- .../demobank-ui/src/pages/admin/AccountList.tsx | 8 +-- packages/demobank-ui/src/pages/business/Home.tsx | 16 +++--- .../src/components/HistoryItem.tsx | 30 +++++------ 14 files changed, 201 insertions(+), 96 deletions(-) create mode 100644 packages/demobank-ui/src/context/config.ts (limited to 'packages/demobank-ui') diff --git a/packages/demobank-ui/src/components/Cashouts/views.tsx b/packages/demobank-ui/src/components/Cashouts/views.tsx index 4b7649fb6..a32deb266 100644 --- a/packages/demobank-ui/src/components/Cashouts/views.tsx +++ b/packages/demobank-ui/src/components/Cashouts/views.tsx @@ -19,6 +19,7 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { State } from "./index.js"; import { format } from "date-fns"; import { Amounts } from "@gnu-taler/taler-util"; +import { RenderAmount } from "../../pages/PaytoWireTransferForm.js"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { const { i18n } = useTranslationContext(); @@ -62,8 +63,8 @@ export function ReadyView({ cashouts, onSelected }: State.Ready): VNode { ? format(item.confirmation_time, "dd/MM/yyyy HH:mm:ss") : "-"} </td> - <td>{Amounts.stringifyValue(item.amount_debit)}</td> - <td>{Amounts.stringifyValue(item.amount_credit)}</td> + <td><RenderAmount value={Amounts.parseOrThrow(item.amount_debit)} /></td> + <td><RenderAmount value={Amounts.parseOrThrow(item.amount_credit)} /></td> <td>{item.status}</td> <td> <a diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx index f92c874f3..69f4369a2 100644 --- a/packages/demobank-ui/src/components/Transactions/views.tsx +++ b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -20,6 +20,7 @@ import { State } from "./index.js"; import { format, isToday } from "date-fns"; import { Amounts } from "@gnu-taler/taler-util"; import { useEffect, useRef } from "preact/hooks"; +import { RenderAmount } from "../../pages/PaytoWireTransferForm.js"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { const { i18n } = useTranslationContext(); @@ -72,13 +73,7 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode {txs.map(item => { const time = item.when.t_ms === "never" ? "" : format(item.when.t_ms, "HH:mm:ss") const amount = <Fragment> - {item.negative ? "-" : ""} - {item.amount ? ( - `${Amounts.stringifyValue(item.amount)} ${item.amount.currency - }` - ) : ( - <span style={{ color: "grey" }}><{i18n.str`invalid value`}></span> - )} + { } </Fragment> return (<tr key={idx}> <td class="relative py-2 pl-2 pr-2 text-sm "> @@ -86,20 +81,26 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode <dl class="font-normal sm:hidden"> <dt class="sr-only sm:hidden"><i18n.Translate>Amount</i18n.Translate></dt> <dd class="mt-1 truncate text-gray-700"> - {item.negative ? i18n.str`sent` : i18n.str`received`} {item.amount ? ( - `${Amounts.stringifyValue(item.amount)}` + {item.negative ? i18n.str`sent` : i18n.str`received`} + + {item.amount ? ( + <RenderAmount value={item.amount} /> ) : ( <span style={{ color: "grey" }}><{i18n.str`invalid value`}></span> )}</dd> + <dt class="sr-only sm:hidden"><i18n.Translate>Counterpart</i18n.Translate></dt> <dd class="mt-1 truncate text-gray-500 sm:hidden"> - {item.negative ? i18n.str`to` : i18n.str`from`} {item.counterpart} + {item.negative ? i18n.str`to` : i18n.str`from`} {item.counterpart} </dd> </dl> </td> <td data-negative={item.negative ? "true" : "false"} class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 data-[negative=false]:text-green-600 data-[negative=true]:text-red-600"> - {amount} + {item.amount ? (<RenderAmount value={item.amount} negative={item.negative} /> + ) : ( + <span style={{ color: "grey" }}><{i18n.str`invalid value`}></span> + )} </td> <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500">{item.counterpart}</td> <td class="px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">{item.subject}</td> diff --git a/packages/demobank-ui/src/components/app.tsx b/packages/demobank-ui/src/components/app.tsx index f15a9ee6a..7cf658681 100644 --- a/packages/demobank-ui/src/components/app.tsx +++ b/packages/demobank-ui/src/components/app.tsx @@ -31,6 +31,7 @@ import { getInitialBackendBaseURL } from "../hooks/backend.js"; import { BANK_INTEGRATION_PROTOCOL_VERSION, useConfigState } from "../hooks/config.js"; import { ErrorLoading } from "./ErrorLoading.js"; import { BankFrame } from "../pages/BankFrame.js"; +import { ConfigStateProvider } from "../context/config.js"; const WITH_LOCAL_STORAGE_CACHE = false; /** @@ -84,11 +85,11 @@ function VersionCheck({ children }: { children: ComponentChildren }): VNode { </BankFrame> } if (checked.type === "ok") { - return <Fragment>{children}</Fragment> + return <ConfigStateProvider value={checked.result}>{children}</ConfigStateProvider> } - + return <BankFrame> - <ErrorLoading error={checked.result}/> + <ErrorLoading error={checked.result} /> </BankFrame> } diff --git a/packages/demobank-ui/src/context/config.ts b/packages/demobank-ui/src/context/config.ts new file mode 100644 index 000000000..a2cde18eb --- /dev/null +++ b/packages/demobank-ui/src/context/config.ts @@ -0,0 +1,52 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +import { ComponentChildren, createContext, h, VNode } from "preact"; +import { useContext } from "preact/hooks"; + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + / + +export type Type = Required<SandboxBackend.Config>; + +const initial: Type = { + name: "", + version: "0:0:0", + currency_fraction_digits: 2, + currency_fraction_limit: 2, + fiat_currency: "", + have_cashout: false, +}; +const Context = createContext<Type>(initial); + +export const useConfigContext = (): Type => useContext(Context); + +export const ConfigStateProvider = ({ + value, + children, +}: { + value: Type, + children: ComponentChildren; +}): VNode => { + + return h(Context.Provider, { + value, + children, + }); +}; + diff --git a/packages/demobank-ui/src/declaration.d.ts b/packages/demobank-ui/src/declaration.d.ts index bd7edf033..5c55cfade 100644 --- a/packages/demobank-ui/src/declaration.d.ts +++ b/packages/demobank-ui/src/declaration.d.ts @@ -107,9 +107,27 @@ namespace SandboxBackend { name: string; // API version in the form $n:$n:$n version: string; - // Contains ratios and fees related to buying - // and selling the circuit currency. - ratios_and_fees: RatiosAndFees; + // If 'true', the server provides local currency + // conversion support. + // If missing or false, some parts of the API + // are not supported and return 404. + have_cashout?: boolean; + + // Fiat currency. That is the currency in which + // cash-out operations ultimately wire money. + // Only applicable if have_cashout=true. + fiat_currency?: string; + + // How many digits should the amounts be rendered + // with by default. Small capitals should + // be used to render fractions beyond the number + // given here (like on gas stations). + currency_fraction_digits?: number; + + // How many decimal digits an operation can + // have. Wire transfers with more decimal + // digits will not be accepted. + currency_fraction_limit?: number; } interface RatiosAndFees { // Exchange rate to buy the circuit currency from fiat. diff --git a/packages/demobank-ui/src/hooks/config.ts b/packages/demobank-ui/src/hooks/config.ts index bb5134510..a3bd294db 100644 --- a/packages/demobank-ui/src/hooks/config.ts +++ b/packages/demobank-ui/src/hooks/config.ts @@ -18,13 +18,13 @@ async function getConfigState( return result.data; } -type Result = undefined - | { type: "ok", result: SandboxBackend.Config } +export type ConfigResult = undefined + | { type: "ok", result: Required<SandboxBackend.Config> } | { type: "wrong", result: SandboxBackend.Config } | { type: "error", result: HttpError<SandboxBackend.SandboxError> } -export function useConfigState(): Result { - const [checked, setChecked] = useState<Result>() +export function useConfigState(): ConfigResult { + const [checked, setChecked] = useState<ConfigResult>() const { request } = useApiContext(); useEffect(() => { @@ -32,15 +32,23 @@ export function useConfigState(): Result { .then((result) => { const r = LibtoolVersion.compare(BANK_INTEGRATION_PROTOCOL_VERSION, result.version) if (r?.compatible) { - setChecked({ type: "ok",result }); + const complete: Required<SandboxBackend.Config> = { + currency_fraction_digits: result.currency_fraction_digits ?? 2, + currency_fraction_limit: result.currency_fraction_limit ?? 2, + fiat_currency: "", + have_cashout: result.have_cashout ?? false, + name: result.name, + version: result.version, + } + setChecked({ type: "ok", result: complete }); } else { - setChecked({ type: "wrong",result }) + setChecked({ type: "wrong", result }) } }) .catch((error: unknown) => { if (error instanceof RequestError) { const result = error.cause - setChecked({ type:"error", result }); + setChecked({ type: "error", result }); } }); }, []); diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index 29334cae4..fc8dfd599 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -27,6 +27,7 @@ import { CopyButton, CopyIcon } from "../components/CopyButton.js"; import logo from "../assets/logo-2021.svg"; import { useAccountDetails } from "../hooks/access.js"; import { Attention } from "../components/Attention.js"; +import { RenderAmount } from "./PaytoWireTransferForm.js"; const GIT_HASH = typeof __GIT_HASH !== "undefined" ? GIT_HASH : undefined; const VERSION = typeof VERSION !== "undefined" ? VERSION__ : undefined; @@ -87,7 +88,7 @@ export function BankFrame({ class="h-8 w-auto" src={logo} alt="Taler" - style={{ height: 35, margin: 10 }} + style={{ height: "1.5rem", margin: ".5rem" }} /> </a> </div> @@ -322,10 +323,10 @@ function MaybeShowDebugInfo({ info }: { info: any }): VNode { const [settings] = useSettings() if (settings.showDebugInfo) { return <pre class="whitespace-break-spaces "> - {info} - </pre> + {info} + </pre> } - return <Fragment /> + return <Fragment /> } @@ -333,19 +334,19 @@ function StatusBanner(): VNode { const notifs = useNotifications() if (notifs.length === 0) return <Fragment /> return <div class="fixed z-20 w-full p-4"> { - notifs.map(n => { - switch (n.message.type) { - case "error": - return <Attention type="danger" title={n.message.title} onClose={() => { - n.remove() - }}> - {n.message.description && - <div class="mt-2 text-sm text-red-700"> - {n.message.description} - </div> - } - <MaybeShowDebugInfo info={n.message.debug} /> - {/ <a href="#" class="text-gray-500"> + notifs.map(n => { + switch (n.message.type) { + case "error": + return <Attention type="danger" title={n.message.title} onClose={() => { + n.remove() + }}> + {n.message.description && + <div class="mt-2 text-sm text-red-700"> + {n.message.description} + </div> + } + <MaybeShowDebugInfo info={n.message.debug} /> + {/* <a href="#" class="text-gray-500"> show debug info </a> {n.message.debug && @@ -353,13 +354,13 @@ function StatusBanner(): VNode { {n.message.debug} </div> } /} - </Attention> - case "info": - return <Attention type="success" title={n.message.title} onClose={() => { - n.remove(); - }} /> - } - })} + </Attention> + case "info": + return <Attention type="success" title={n.message.title} onClose={() => { + n.remove(); + }} /> + } + })} </div> } @@ -430,9 +431,8 @@ function AccountBalance({ account }: { account: string }): VNode { const result = useAccountDetails(account); if (!result.ok) return <div /> - return <div> - {Amounts.currencyOf(result.data.balance.amount)} - {result.data.balance.credit_debit_indicator === "debit" ? "-" : ""} - {Amounts.stringifyValue(result.data.balance.amount)} - </div> + return <RenderAmount + value={Amounts.parseOrThrow(result.data.balance.amount)} + negative={result.data.balance.credit_debit_indicator === "debit"} + /> } diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index fef272831..f60ba3270 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -30,7 +30,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ const { i18n } = useTranslationContext(); const [settings] = useSettings(); - const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>("wire-transfer"); + const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(); return ( <div class="mt-2"> @@ -47,7 +47,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ setTab("charge-wallet") }} /> <span class="flex flex-1"> - <div class="text-lg mr-2">💵</div> + <div class="text-4xl mr-4 my-auto">💵</div> <span class="flex flex-col"> <span id="project-type-0-label" class="block text-sm font-medium text-gray-900"> <i18n.Translate>a <b>Taler</b> wallet</i18n.Translate> @@ -76,7 +76,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ setTab("wire-transfer") }} /> <span class="flex flex-1"> - <div class="text-lg mr-2">↔</div> + <div class="text-4xl mr-4 my-auto">↔</div> <span class="flex flex-col"> <span id="project-type-1-label" class="block text-sm font-medium text-gray-900"> <i18n.Translate>another bank account</i18n.Translate> diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 785dc4264..b3fd51670 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -39,6 +39,8 @@ import { undefinedIfEmpty, validateIBAN, } from "../utils.js"; +import { useConfigState } from "../hooks/config.js"; +import { useConfigContext } from "../context/config.js"; const logger = new Logger("PaytoWireTransferForm"); @@ -55,7 +57,7 @@ export function PaytoWireTransferForm({ onCancel: (() => void) | undefined; limit: AmountJson; }): VNode { - const [isRawPayto, setIsRawPayto] = useState(true); + const [isRawPayto, setIsRawPayto] = useState(false); // FIXME: remove this const [iban, setIban] = useState<string | undefined>("DE4745461198061"); const [subject, setSubject] = useState<string | undefined>("ASD"); @@ -285,7 +287,7 @@ export function PaytoWireTransferForm({ <div class="sm:col-span-5"> <label for="amount" class="block text-sm font-medium leading-6 text-gray-900">{i18n.str`Amount`}</label> - <Amount + <InputAmount name="amount" left currency={limit.currency} @@ -372,7 +374,9 @@ export function doAutoFocus(element: HTMLElement | null) { } } -export function Amount( +const FRAC_SEPARATOR = "." + +export function InputAmount( { currency, name, @@ -390,6 +394,7 @@ export function Amount( }, ref: Ref<HTMLInputElement>, ): VNode { + const cfg = useConfigContext() return ( <div class="mt-2"> <div class="flex rounded-md shadow-sm border-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600"> @@ -409,10 +414,14 @@ export function Amount( autocomplete="off" value={value ?? ""} disabled={!onChange} - onInput={(e): void => { - if (onChange) { - onChange(e.currentTarget.value); + onInput={(e) => { + if (!onChange) return; + const l = e.currentTarget.value.length + const sep_pos = e.currentTarget.value.indexOf(FRAC_SEPARATOR) + if (sep_pos !== -1 && l - sep_pos - 1 > cfg.currency_fraction_limit) { + e.currentTarget.value = e.currentTarget.value.substring(0, sep_pos + cfg.currency_fraction_limit + 1) } + onChange(e.currentTarget.value); }} /> </div> @@ -421,3 +430,21 @@ export function Amount( ); } +export function RenderAmount({ value, negative }: { value: AmountJson, negative?: boolean }): VNode { + const cfg = useConfigContext() + const str = Amounts.stringifyValue(value) + const sep_pos = str.indexOf(FRAC_SEPARATOR) + if (sep_pos !== -1 && str.length - sep_pos - 1 > cfg.currency_fraction_digits) { + const limit = sep_pos + cfg.currency_fraction_digits + 1 + const normal = str.substring(0, limit) + const small = str.substring(limit) + return <span class="whitespace-nowrap"> + {negative ? "-" : undefined} + {value.currency} {normal} <sup class="-ml-2">{small}</sup> + </span> + } + return <span class="whitespace-nowrap"> + {negative ? "-" : undefined} + {value.currency} {str} + </span> +} \ No newline at end of file diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx index 7357223b7..da299b1c8 100644 --- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx +++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx @@ -34,13 +34,13 @@ import { forwardRef } from "preact/compat"; import { useEffect, useRef, useState } from "preact/hooks"; import { useAccessAPI } from "../hooks/access.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; -import { Amount, doAutoFocus } from "./PaytoWireTransferForm.js"; +import { InputAmount, doAutoFocus } from "./PaytoWireTransferForm.js"; import { useSettings } from "../hooks/settings.js"; import { OperationState } from "./OperationState/index.js"; import { Attention } from "../components/Attention.js"; const logger = new Logger("WalletWithdrawForm"); -const RefAmount = forwardRef(Amount); +const RefAmount = forwardRef(InputAmount); function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: { diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx index 208d4b859..ddcd2492d 100644 --- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx @@ -38,6 +38,7 @@ import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js"; import { useAccessAnonAPI } from "../hooks/access.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; import { useSettings } from "../hooks/settings.js"; +import { RenderAmount } from "./PaytoWireTransferForm.js"; const logger = new Logger("WithdrawalConfirmationQuestion"); @@ -318,7 +319,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">Amount</dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> - {Amounts.currencyOf(details.amount)} {Amounts.stringifyValue(details.amount)} + <RenderAmount value={details.amount} /> </dd> </div> </dl> diff --git a/packages/demobank-ui/src/pages/admin/AccountList.tsx b/packages/demobank-ui/src/pages/admin/AccountList.tsx index f99b320a4..a6899e679 100644 --- a/packages/demobank-ui/src/pages/admin/AccountList.tsx +++ b/packages/demobank-ui/src/pages/admin/AccountList.tsx @@ -4,6 +4,7 @@ import { handleNotOkResult } from "../HomePage.js"; import { AccountAction } from "./Home.js"; import { Amounts } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { RenderAmount } from "../PaytoWireTransferForm.js"; interface Props { onAction: (type: AccountAction, account: string) => void; @@ -88,12 +89,7 @@ export function AccountList({ account, onAction, onCreateAccount }: Props): VNod i18n.str`unknown` ) : ( <span class="amount"> - {balanceIsDebit ? <b>-</b> : null} - <span class="value">{`${Amounts.stringifyValue( - balance, - )}`}</span> - - <span class="currency">{`${balance.currency}`}</span> + <RenderAmount value={balance} negative={balanceIsDebit} /> </span> )} </td> diff --git a/packages/demobank-ui/src/pages/business/Home.tsx b/packages/demobank-ui/src/pages/business/Home.tsx index 2945cb65a..1a84effcd 100644 --- a/packages/demobank-ui/src/pages/business/Home.tsx +++ b/packages/demobank-ui/src/pages/business/Home.tsx @@ -45,7 +45,7 @@ import { undefinedIfEmpty, } from "../../utils.js"; import { handleNotOkResult } from "../HomePage.js"; -import { Amount } from "../PaytoWireTransferForm.js"; +import { InputAmount } from "../PaytoWireTransferForm.js"; import { ShowAccountDetails } from "../ShowAccountDetails.js"; import { UpdateAccountPassword } from "../UpdateAccountPassword.js"; @@ -342,7 +342,7 @@ function CreateCashout({ </label> <div style={{ display: "flex" }}> - <Amount + <InputAmount name="amount" currency={amount.currency} value={form.amount} @@ -372,7 +372,7 @@ function CreateCashout({ </fieldset> <fieldset> <label for="balance-now">{i18n.str`Balance now`}</label> - <Amount + <InputAmount name="banace-now" currency={balance.currency} value={Amounts.stringifyValue(balance)} @@ -382,7 +382,7 @@ function CreateCashout({ <label for="total-cost" style={{ fontWeight: "bold", color: "red" }} >{i18n.str`Total cost`}</label> - <Amount + <InputAmount name="total-cost" currency={balance.currency} value={Amounts.stringifyValue(calc.debit)} @@ -390,7 +390,7 @@ function CreateCashout({ </fieldset> <fieldset> <label for="balance-after">{i18n.str`Balance after`}</label> - <Amount + <InputAmount name="balance-after" currency={balance.currency} value={balanceAfter ? Amounts.stringifyValue(balanceAfter) : ""} @@ -400,7 +400,7 @@ function CreateCashout({ <Fragment> <fieldset> <label for="amount-conversiojn">{i18n.str`Amount after conversion`}</label> - <Amount + <InputAmount name="amount-conversion" currency={fiatCurrency} value={Amounts.stringifyValue(calc.beforeFee)} @@ -409,7 +409,7 @@ function CreateCashout({ <fieldset> <label form="cashout-fee">{i18n.str`Cashout fee`}</label> - <Amount + <InputAmount name="cashout-fee" currency={fiatCurrency} value={Amounts.stringifyValue(sellFee)} @@ -421,7 +421,7 @@ function CreateCashout({ <label for="total" style={{ fontWeight: "bold", color: "green" }} >{i18n.str`Total cashout transfer`}</label> - <Amount + <InputAmount name="total" currency={fiatCurrency} value={Amounts.stringifyValue(calc.credit)} diff --git a/packages/taler-wallet-webextension/src/components/HistoryItem.tsx b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx index e072d2581..72881c746 100644 --- a/packages/taler-wallet-webextension/src/components/HistoryItem.tsx +++ b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx @@ -62,10 +62,10 @@ export function HistoryItem(props: { tx: Transaction }): VNode { WithdrawalType.TalerBankIntegrationApi ? !tx.withdrawalDetails.confirmed ? i18n.str`Need approval in the Bank` - : i18n.str`Exchange is waiting the wire transfer` + : i18n.str`Waiting for wire transfer to complete` : tx.withdrawalDetails.type === WithdrawalType.ManualTransfer - ? i18n.str`Exchange is waiting the wire transfer` - : "" //pending but no message + ? i18n.str`Waiting for wire transfer to complete` + : "" //pending but no message : undefined } /> @@ -88,8 +88,8 @@ export function HistoryItem(props: { tx: Transaction }): VNode { ? i18n.str`Need approval in the Bank` : i18n.str`Exchange is waiting the wire transfer` : tx.withdrawalDetails.type === WithdrawalType.ManualTransfer - ? i18n.str`Exchange is waiting the wire transfer` - : "" //pending but no message + ? i18n.str`Exchange is waiting the wire transfer` + : "" //pending but no message : undefined } /> @@ -267,14 +267,14 @@ function Layout(props: LayoutProps): VNode { style={{ backgroundColor: props.currentState === TransactionMajorState.Pending || - props.currentState === TransactionMajorState.Dialog + props.currentState === TransactionMajorState.Dialog ? "lightcyan" : props.currentState === TransactionMajorState.Failed - ? "#ff000040" - : props.currentState === TransactionMajorState.Aborted || - props.currentState === TransactionMajorState.Aborting - ? "#00000010" - : "inherit", + ? "#ff000040" + : props.currentState === TransactionMajorState.Aborted || + props.currentState === TransactionMajorState.Aborting + ? "#00000010" + : "inherit", alignItems: "center", }} > @@ -353,10 +353,10 @@ function TransactionAmount(props: TransactionAmountProps): VNode { props.currentState !== TransactionMajorState.Done ? "gray" : sign === "+" - ? "darkgreen" - : sign === "-" - ? "darkred" - : undefined, + ? "darkgreen" + : sign === "-" + ? "darkred" + : undefined, }} > <ExtraLargeText> -- cgit v1.2.3 From e84d2b6175da8c308835f1a7f27e177dcecd248a Mon Sep 17 00:00:00 2001 From: Sebastian <sebasjm@gmail.com> Date: Tue, 3 Oct 2023 10:11:21 -0300 Subject: more ui, removed some testing values --- .../src/components/Transactions/views.tsx | 4 +-- .../src/pages/PaytoWireTransferForm.tsx | 8 ++--- packages/demobank-ui/src/pages/QrCodeSection.tsx | 35 +++++++++++----------- .../demobank-ui/src/pages/WithdrawalQRCode.tsx | 2 +- 4 files changed, 23 insertions(+), 26 deletions(-) (limited to 'packages/demobank-ui') diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx index 69f4369a2..696fb59f3 100644 --- a/packages/demobank-ui/src/components/Transactions/views.tsx +++ b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -81,9 +81,7 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode <dl class="font-normal sm:hidden"> <dt class="sr-only sm:hidden"><i18n.Translate>Amount</i18n.Translate></dt> <dd class="mt-1 truncate text-gray-700"> - {item.negative ? i18n.str`sent` : i18n.str`received`} - - {item.amount ? ( + {item.negative ? i18n.str`sent` : i18n.str`received`} {item.amount ? ( <RenderAmount value={item.amount} /> ) : ( <span style={{ color: "grey" }}><{i18n.str`invalid value`}></span> diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index b3fd51670..69a9a07b2 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -59,9 +59,9 @@ export function PaytoWireTransferForm({ }): VNode { const [isRawPayto, setIsRawPayto] = useState(false); // FIXME: remove this - const [iban, setIban] = useState<string | undefined>("DE4745461198061"); - const [subject, setSubject] = useState<string | undefined>("ASD"); - const [amount, setAmount] = useState<string | undefined>("1.00001"); + const [iban, setIban] = useState<string | undefined>(); + const [subject, setSubject] = useState<string | undefined>(); + const [amount, setAmount] = useState<string | undefined>(); const [rawPaytoInput, rawPaytoInputSetter] = useState<string | undefined>( undefined, @@ -189,7 +189,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>using a form</i18n.Translate> + <i18n.Translate>Using a form</i18n.Translate> </span> </span> </span> diff --git a/packages/demobank-ui/src/pages/QrCodeSection.tsx b/packages/demobank-ui/src/pages/QrCodeSection.tsx index 6a50d4ef3..e07525ab4 100644 --- a/packages/demobank-ui/src/pages/QrCodeSection.tsx +++ b/packages/demobank-ui/src/pages/QrCodeSection.tsx @@ -84,27 +84,25 @@ export function QrCodeSection({ <h3 class="text-base font-semibold leading-6 text-gray-900"> <i18n.Translate>If you have a Taler wallet installed in this device</i18n.Translate> </h3> - <div class="mt-4"> - <a href={talerWithdrawUri} - 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>Click here to start</i18n.Translate> - </a> - </div> - <div class="mt-4 max-w-xl text-sm text-gray-500"> + <div class="mt-4 mb-4 text-sm text-gray-500"> <p><i18n.Translate> You will see the details of the operation in your wallet including the fees (if applies). - If you still one you can install it from <a class="font-semibold text-gray-500 hover:text-gray-400" href="https://taler.net/en/wallet.html">here</a>. + If you still don't have one you can install it from <a class="font-semibold text-gray-500 hover:text-gray-400" href="https://taler.net/en/wallet.html">here</a>. </i18n.Translate></p> </div> <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 pt-2 mt-2 "> - <div /> <button type="button" - class="disabled:opacity-50 disabled:cursor-default cursor-pointer 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-600" + // 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" onClick={doAbort} > - Cancel withdrawal + Cancel </button> + <a href={talerWithdrawUri} + 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> @@ -122,12 +120,13 @@ export function QrCodeSection({ </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 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-600" - onClick={doAbort} - > - Cancel withdrawal - </button> + <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" + onClick={doAbort} + > + Cancel + </button> </div> </div> diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx index c8efc033b..2d90b410c 100644 --- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx @@ -112,7 +112,7 @@ export function WithdrawalQRCode({ e.preventDefault(); onClose() }}> - <i18n.Translate>Continue</i18n.Translate> + <i18n.Translate>Done</i18n.Translate> </button> </div> </div> -- cgit v1.2.3 From 26e77181d8c1d44a27849679d35ac6ac871c1dcd Mon Sep 17 00:00:00 2001 From: Sebastian <sebasjm@gmail.com> Date: Tue, 3 Oct 2023 13:28:44 -0300 Subject: icon link --- packages/demobank-ui/README.md | 9 ++++++++- packages/demobank-ui/package.json | 2 +- packages/demobank-ui/src/pages/BankFrame.tsx | 26 +++++++++++++------------- packages/demobank-ui/src/settings.ts | 2 ++ 4 files changed, 24 insertions(+), 15 deletions(-) (limited to 'packages/demobank-ui') diff --git a/packages/demobank-ui/README.md b/packages/demobank-ui/README.md index 1732b5f38..877799748 100644 --- a/packages/demobank-ui/README.md +++ b/packages/demobank-ui/README.md @@ -36,11 +36,18 @@ to the default settings: ``` globalThis.talerDemobankSettings = { - backendBaseURL: "https://bank.demo.taler.net/demobanks/default/", + // location of libeufin server + backendBaseURL: "https://bank.demo.taler.net/", allowRegistrations: true, bankName: "Taler Bank", // Show explainer text and navbar to other demo sites showDemoNav: true, + // href value of the icon in the top left + iconLinkURL: "https://demo.taler.net/", + // show the button "create random user" in registration form + allowRandomAccountCreation: true, + // do not create random password for random users + simplePasswordForRandomAccounts: true, // Names and links for other demo sites to show in the navbar demoSites: [ ["Landing", "https://demo.taler.net/"], diff --git a/packages/demobank-ui/package.json b/packages/demobank-ui/package.json index b430ebc24..17059afeb 100644 --- a/packages/demobank-ui/package.json +++ b/packages/demobank-ui/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@gnu-taler/demobank-ui", - "version": "0.9.3-dev.17", + "version": "0.9.3-dev.27", "license": "AGPL-3.0-OR-LATER", "type": "module", "scripts": { diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index fc8dfd599..6ab6ba3e4 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -14,19 +14,18 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> / -import { Amounts, Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; -import { NotificationMessage, notifyError, notifyException, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser"; -import { ComponentChildren, Fragment, h, VNode } from "preact"; -import { StateUpdater, useEffect, useErrorBoundary, useState } from "preact/hooks"; +import { Amounts, Logger, TranslatedString, parsePaytoUri } from "@gnu-taler/taler-util"; +import { notifyError, notifyException, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser"; +import { ComponentChildren, Fragment, VNode, h } from "preact"; +import { useEffect, useErrorBoundary, useState } from "preact/hooks"; +import logo from "../assets/logo-2021.svg"; +import { Attention } from "../components/Attention.js"; +import { CopyButton } from "../components/CopyButton.js"; import { LangSelector } from "../components/LangSelector.js"; import { useBackendContext } from "../context/backend.js"; -import { useBusinessAccountDetails } from "../hooks/circuit.js"; -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"; -import { Attention } from "../components/Attention.js"; +import { useSettings } from "../hooks/settings.js"; +import { bankUiSettings } from "../settings.js"; import { RenderAmount } from "./PaytoWireTransferForm.js"; const GIT_HASH = typeof __GIT_HASH !== "undefined" ? GIT_HASH : undefined; @@ -34,11 +33,12 @@ const VERSION = typeof VERSION !== "undefined" ? VERSION__ : undefined; const versionText = VERSION ? GIT_HASH - ? `Version ${VERSION} (${GIT_HASH.substring(0, 8)})` + ? <a href={`https://git.taler.net/wallet-core.git/tree/?id=${GIT_HASH}`} target="_blank" rel="noreferrer noopener"> + Version {VERSION} ({GIT_HASH.substring(0, 8)}) + </a> : VERSION : ""; -const logger = new Logger("BankFrame"); export function BankFrame({ children, @@ -83,7 +83,7 @@ export function BankFrame({ <div class="relative flex h-16 items-center justify-between "> <div class="flex items-center px-2 lg:px-0"> <div class="flex-shrink-0 bg-white rounded-lg"> - <a href="http://test.taler.net/" target="_blank" rel="noreferrer noopener"> + <a href={bankUiSettings.iconLinkURL ?? "#"}> <img class="h-8 w-auto" src={logo} diff --git a/packages/demobank-ui/src/settings.ts b/packages/demobank-ui/src/settings.ts index c4b510b30..44a016de6 100644 --- a/packages/demobank-ui/src/settings.ts +++ b/packages/demobank-ui/src/settings.ts @@ -17,6 +17,7 @@ export interface BankUiSettings { backendBaseURL?: string; allowRegistrations?: boolean; + iconLinkURL?: string; showDemoNav?: boolean; simplePasswordForRandomAccounts?: boolean; allowRandomAccountCreation?: boolean; @@ -29,6 +30,7 @@ export interface BankUiSettings { / const defaultSettings: BankUiSettings = { backendBaseURL: "https://bank.demo.taler.net/demobanks/default/", + iconLinkURL: "https://demo.taler.net/", allowRegistrations: true, bankName: "Taler Bank", showDemoNav: true, -- cgit v1.2.3 From 851b2da39c3297ede3d267f3d2534cac213261c1 Mon Sep 17 00:00:00 2001 From: Sebastian <sebasjm@gmail.com> Date: Wed, 4 Oct 2023 14:36:03 -0300 Subject: fixing issues reported by Christian, wip --- .../src/pages/PaytoWireTransferForm.tsx | 4 +- .../demobank-ui/src/pages/WithdrawalQRCode.tsx | 2 +- .../merchant-backoffice-ui/src/Application.tsx | 4 +- .../merchant-backoffice-ui/src/InstanceRoutes.tsx | 30 ++++++------- .../src/components/form/InputStock.tsx | 5 +-- .../src/components/menu/SideBar.tsx | 29 ++++++++---- .../src/components/menu/index.tsx | 8 ++-- .../src/components/product/ProductForm.tsx | 6 +-- .../merchant-backoffice-ui/src/context/backend.ts | 26 +++++++++-- .../merchant-backoffice-ui/src/declaration.d.ts | 4 +- packages/merchant-backoffice-ui/src/hooks/index.ts | 3 +- packages/merchant-backoffice-ui/src/hooks/otp.ts | 4 +- .../merchant-backoffice-ui/src/hooks/product.ts | 17 ++++++- .../src/paths/instance/products/list/Table.tsx | 13 +++--- .../src/paths/instance/products/list/index.tsx | 52 +++++++++++++++++++++- .../paths/instance/reserves/create/CreatePage.tsx | 27 +++++++---- .../instance/validators/create/CreatePage.tsx | 6 +-- .../validators/create/CreatedSuccessfully.tsx | 2 +- .../instance/validators/update/UpdatePage.tsx | 2 +- .../src/paths/instance/validators/update/index.tsx | 2 +- .../src/paths/login/index.tsx | 17 +++---- .../merchant-backoffice-ui/src/schemas/index.ts | 3 +- .../merchant-backoffice-ui/src/utils/constants.ts | 2 +- packages/web-util/src/index.build.ts | 2 +- 24 files changed, 185 insertions(+), 85 deletions(-) (limited to 'packages/demobank-ui') diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 69a9a07b2..52dbd4ff6 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -363,14 +363,14 @@ export function PaytoWireTransferForm({ / export function doAutoFocus(element: HTMLElement | null) { if (element) { - window.requestIdleCallback(() => { + setTimeout(() => { element.focus() element.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" }) - }) + }, 100) } } diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx index 2d90b410c..91c5da718 100644 --- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx @@ -150,7 +150,7 @@ export function WithdrawalQRCode({ details={{ account, reserve: data.selected_reserve_pub, - amount: Amounts.parseOrThrow("usd:10.00") + amount: Amounts.parseOrThrow(data.amount) }} onAborted={() => { notifyInfo(i18n.str`Operation canceled`); diff --git a/packages/merchant-backoffice-ui/src/Application.tsx b/packages/merchant-backoffice-ui/src/Application.tsx index 1a7617643..f0a7de53b 100644 --- a/packages/merchant-backoffice-ui/src/Application.tsx +++ b/packages/merchant-backoffice-ui/src/Application.tsx @@ -60,7 +60,7 @@ export function Application(): VNode { * @returns */ function ApplicationStatusRoutes(): VNode { - const { url: backendURL, updateToken, changeBackend } = useBackendContext(); + const { changeBackend, selected: backendSelected } = useBackendContext(); const result = useBackendConfig(); const { i18n } = useTranslationContext(); @@ -69,7 +69,7 @@ function ApplicationStatusRoutes(): VNode { : { currency: "unknown", version: "unknown" }; const ctx = useMemo(() => ({ currency, version }), [currency, version]); - if (!backendURL) { + if (!backendSelected) { return ( <Fragment> <NotConnectedAppMenu title="Welcome!" /> diff --git a/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx index c2a9d3b18..f5372db8d 100644 --- a/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx +++ b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx @@ -87,9 +87,9 @@ export enum InstancePaths { bank_update = "/bank/:bid/update", bank_new = "/bank/new", - product_list = "/products", - product_update = "/product/:pid/update", - product_new = "/product/new", + inventory_list = "/inventory", + inventory_update = "/inventory/:pid/update", + inventory_new = "/inventory/new", order_list = "/orders", order_new = "/order/new", @@ -347,42 +347,42 @@ export function InstanceRoutes({ onLoadError={ServerErrorRedirectTo(InstancePaths.error)} /> {/** - * Product pages + * Inventory pages */} <Route - path={InstancePaths.product_list} + path={InstancePaths.inventory_list} component={ProductListPage} onUnauthorized={LoginPageAccessDenied} onLoadError={ServerErrorRedirectTo(InstancePaths.server)} onCreate={() => { - route(InstancePaths.product_new); + route(InstancePaths.inventory_new); }} onSelect={(id: string) => { - route(InstancePaths.product_update.replace(":pid", id)); + route(InstancePaths.inventory_update.replace(":pid", id)); }} onNotFound={IfAdminCreateDefaultOr(NotFoundPage)} /> <Route - path={InstancePaths.product_update} + path={InstancePaths.inventory_update} component={ProductUpdatePage} onUnauthorized={LoginPageAccessDenied} - onLoadError={ServerErrorRedirectTo(InstancePaths.product_list)} + onLoadError={ServerErrorRedirectTo(InstancePaths.inventory_list)} onConfirm={() => { - route(InstancePaths.product_list); + route(InstancePaths.inventory_list); }} onBack={() => { - route(InstancePaths.product_list); + route(InstancePaths.inventory_list); }} onNotFound={IfAdminCreateDefaultOr(NotFoundPage)} /> <Route - path={InstancePaths.product_new} + path={InstancePaths.inventory_new} component={ProductCreatePage} onConfirm={() => { - route(InstancePaths.product_list); + route(InstancePaths.inventory_list); }} onBack={() => { - route(InstancePaths.product_list); + route(InstancePaths.inventory_list); }} /> {/** @@ -405,7 +405,7 @@ export function InstanceRoutes({ path={InstancePaths.bank_update} component={BankAccountUpdatePage} onUnauthorized={LoginPageAccessDenied} - onLoadError={ServerErrorRedirectTo(InstancePaths.product_list)} + onLoadError={ServerErrorRedirectTo(InstancePaths.inventory_list)} onConfirm={() => { route(InstancePaths.bank_list); }} diff --git a/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx b/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx index 012d14977..1d18685c5 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx @@ -212,10 +212,7 @@ export function InputStock<T>({ withTimestampSupport /> - <InputGroup<Entity> - name="address" - label={i18n.str`Delivery address`} - > + <InputGroup<Entity> name="address" label={i18n.str`Warehouse address`}> <InputLocation name="address" /> </InputGroup> </FormProvider> diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx index 3d5f20c85..402134096 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx @@ -49,7 +49,7 @@ export function Sidebar({ isPasswordOk }: Props): VNode { const config = useConfigContext(); - const { url: backendURL } = useBackendContext() + const { url: backendURL, resetBackend } = useBackendContext() const { i18n } = useTranslationContext(); const kycStatus = useInstanceKYCDetails(); const needKYC = kycStatus.ok && kycStatus.data.type === "redirect"; @@ -80,7 +80,7 @@ export function Sidebar({ </div> </div> <div class="menu is-menu-main"> - {isPasswordOk && instance ? ( + {instance ? ( <Fragment> <ul class="menu-list"> <li> @@ -94,12 +94,12 @@ export function Sidebar({ </a> </li> <li> - <a href={"/products"} class="has-icon"> + <a href={"/inventory"} class="has-icon"> <span class="icon"> <i class="mdi mdi-shopping" /> </span> <span class="menu-item-label"> - <i18n.Translate>Products</i18n.Translate> + <i18n.Translate>Inventory</i18n.Translate> </span> </a> </li> @@ -243,7 +243,7 @@ export function Sidebar({ </span> </div> </li> - {isPasswordOk && admin && !mimic && ( + {admin && !mimic && ( <Fragment> <p class="menu-label"> <i18n.Translate>Instances</i18n.Translate> @@ -270,7 +270,7 @@ export function Sidebar({ </li> </Fragment> )} - {isPasswordOk && + {isPasswordOk ? <li> <a class="has-icon is-state-info is-hoverable" @@ -283,8 +283,21 @@ export function Sidebar({ <i18n.Translate>Log out</i18n.Translate> </span> </a> - </li> - } + </li> : + <li> + <a + class="has-icon is-state-info is-hoverable" + onClick={(): void => resetBackend()} + > + <span class="icon"> + <i class="mdi mdi-logout default" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>Change server</i18n.Translate> + </span> + </a> + </li> + } </ul> </div> </aside> diff --git a/packages/merchant-backoffice-ui/src/components/menu/index.tsx b/packages/merchant-backoffice-ui/src/components/menu/index.tsx index cb318906f..b8ac2c9ab 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/index.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/index.tsx @@ -30,11 +30,11 @@ function getInstanceTitle(path: string, id: string): string { return `${id}: Orders`; case InstancePaths.order_new: return `${id}: New order`; - case InstancePaths.product_list: - return `${id}: Products`; - case InstancePaths.product_new: + case InstancePaths.inventory_list: + return `${id}: Inventory`; + case InstancePaths.inventory_new: return `${id}: New product`; - case InstancePaths.product_update: + case InstancePaths.inventory_update: return `${id}: Update product`; case InstancePaths.reserves_new: return `${id}: New reserve`; diff --git a/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx b/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx index 8bebbd298..e91e8c876 100644 --- a/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx +++ b/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx @@ -146,9 +146,9 @@ export function ProductForm({ onSubscribe, initial, alreadyExist }: Props) { /> <InputNumber<Entity> name="minimum_age" - label={i18n.str`Age restricted`} + label={i18n.str`Age restriction`} tooltip={i18n.str`is this product restricted for customer below certain age?`} - help={i18n.str`can be overridden by the order configuration`} + help={i18n.str`minimum age of the buyer`} /> <Input<Entity> name="unit" @@ -165,7 +165,7 @@ export function ProductForm({ onSubscribe, initial, alreadyExist }: Props) { name="stock" label={i18n.str`Stock`} alreadyExist={alreadyExist} - tooltip={i18n.str`product inventory for products with finite supply (for internal use only)`} + tooltip={i18n.str`inventory for products with finite supply (for internal use only)`} /> <InputTaxes<Entity> name="taxes" diff --git a/packages/merchant-backoffice-ui/src/context/backend.ts b/packages/merchant-backoffice-ui/src/context/backend.ts index 056f9a192..d4a9abd5f 100644 --- a/packages/merchant-backoffice-ui/src/context/backend.ts +++ b/packages/merchant-backoffice-ui/src/context/backend.ts @@ -20,35 +20,55 @@ / import { createContext, h, VNode } from "preact"; -import { useContext } from "preact/hooks"; +import { useContext, useState } from "preact/hooks"; import { LoginToken } from "../declaration.js"; import { useBackendDefaultToken, useBackendURL } from "../hooks/index.js"; +import { buildStorageKey, useLocalStorage } from "@gnu-taler/web-util/browser"; +import { codecForBoolean } from "@gnu-taler/taler-util"; interface BackendContextType { url: string, + selected: boolean; token?: LoginToken; updateToken: (token: LoginToken | undefined) => void; changeBackend: (url: string) => void; + resetBackend: () => void; } const BackendContext = createContext<BackendContextType>({ url: "", + selected: false, token: undefined, updateToken: () => null, changeBackend: () => null, + resetBackend: () => null, }); +const BACKEND_SELECTED = buildStorageKey("backend-selected", codecForBoolean()); + function useBackendContextState( defaultUrl?: string, ): BackendContextType { - const [url, changeBackend] = useBackendURL(defaultUrl); + const [url, changeBackend2] = useBackendURL(defaultUrl); const [token, updateToken] = useBackendDefaultToken(); + const {value, update} = useLocalStorage(BACKEND_SELECTED) + + function changeBackend(s:string) { + changeBackend2(s) + update(true) + } + + function resetBackend() { + update(false) + } return { url, token, + selected: value ?? false, updateToken, - changeBackend + changeBackend, + resetBackend }; } diff --git a/packages/merchant-backoffice-ui/src/declaration.d.ts b/packages/merchant-backoffice-ui/src/declaration.d.ts index c3e6ea3da..dc53e3e83 100644 --- a/packages/merchant-backoffice-ui/src/declaration.d.ts +++ b/packages/merchant-backoffice-ui/src/declaration.d.ts @@ -1327,7 +1327,7 @@ export namespace MerchantBackend { otp_device_id: string; // Human-readable description for the device. - otp_description: string; + otp_device_description: string; // A base64-encoded key otp_key: string; @@ -1341,7 +1341,7 @@ export namespace MerchantBackend { interface OtpDevicePatchDetails { // Human-readable description for the device. - otp_description: string; + otp_device_description: string; // A base64-encoded key otp_key: string | undefined; diff --git a/packages/merchant-backoffice-ui/src/hooks/index.ts b/packages/merchant-backoffice-ui/src/hooks/index.ts index ee696779f..498e4eb78 100644 --- a/packages/merchant-backoffice-ui/src/hooks/index.ts +++ b/packages/merchant-backoffice-ui/src/hooks/index.ts @@ -31,7 +31,8 @@ const calculateRootPath = () => { typeof window !== undefined ? window.location.origin + window.location.pathname : "/"; - return rootPath; + + return rootPath.replace("webui/",""); }; const loginTokenCodec = buildCodecForObject<LoginToken>() diff --git a/packages/merchant-backoffice-ui/src/hooks/otp.ts b/packages/merchant-backoffice-ui/src/hooks/otp.ts index 3544b4881..93eefeea5 100644 --- a/packages/merchant-backoffice-ui/src/hooks/otp.ts +++ b/packages/merchant-backoffice-ui/src/hooks/otp.ts @@ -30,13 +30,13 @@ const useSWR = _useSWR as unknown as SWRHook; const MOCKED_DEVICES: Record<string, MerchantBackend.OTP.OtpDeviceAddDetails> = { "1": { - otp_description: "first device", + otp_device_description: "first device", otp_algorithm: 1, otp_device_id: "1", otp_key: "123", }, "2": { - otp_description: "second device", + otp_device_description: "second device", otp_algorithm: 0, otp_device_id: "2", otp_key: "456", diff --git a/packages/merchant-backoffice-ui/src/hooks/product.ts b/packages/merchant-backoffice-ui/src/hooks/product.ts index 8ecaefaa6..e06ea8ed8 100644 --- a/packages/merchant-backoffice-ui/src/hooks/product.ts +++ b/packages/merchant-backoffice-ui/src/hooks/product.ts @@ -26,6 +26,9 @@ import _useSWR, { SWRHook, useSWRConfig } from "swr"; const useSWR = _useSWR as unknown as SWRHook; export interface ProductAPI { + getProduct: ( + id: string, + ) => Promise<void>; createProduct: ( data: MerchantBackend.Products.ProductAddDetail, ) => Promise<void>; @@ -66,7 +69,7 @@ export function useProductAPI(): ProductAPI { data, }); - return await mutateAll(/."\/private\/products./); + return await mutateAll(/.\/private\/products./); }; const deleteProduct = async (productId: string): Promise<void> => { @@ -88,7 +91,17 @@ export function useProductAPI(): ProductAPI { return await mutateAll(/."\/private\/products./); }; - return { createProduct, updateProduct, deleteProduct, lockProduct }; + const getProduct = async ( + productId: string, + ): Promise<void> => { + await request(`/private/products/${productId}`, { + method: "GET", + }); + + return + }; + + return { createProduct, updateProduct, deleteProduct, lockProduct, getProduct }; } export function useInstanceProducts(): HttpResponse< diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx index cbfe1d573..db73217ed 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx @@ -66,7 +66,7 @@ export function CardTable({ <span class="icon"> <i class="mdi mdi-shopping" /> </span> - <i18n.Translate>Products</i18n.Translate> + <i18n.Translate>Inventory</i18n.Translate> </p> <div class="card-header-icon" aria-label="more options"> <span @@ -142,7 +142,7 @@ function Table({ <i18n.Translate>Taxes</i18n.Translate> </th> <th> - <i18n.Translate>Profit</i18n.Translate> + <i18n.Translate>Sales</i18n.Translate> </th> <th> <i18n.Translate>Stock</i18n.Translate> @@ -190,18 +190,21 @@ function Table({ src={i.image ? i.image : emptyImage} style={{ border: "solid black 1px", - width: 100, - height: 100, + maxHeight: "2em", + width: "auto", + height: "auto", }} /> </td> <td + class="has-tooltip-right" + data-tooltip={i.description} onClick={() => rowSelection !== i.id && rowSelectionHandler(i.id) } style={{ cursor: "pointer" }} > - {i.description} + {i.description.length > 30 ? i.description.substring(0, 30) + "..." : i.description} </td> <td onClick={() => diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx index 85c50e5ed..274a7c2ea 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx @@ -53,7 +53,7 @@ export default function ProductList({ onNotFound, }: Props): VNode { const result = useInstanceProducts(); - const { deleteProduct, updateProduct } = useProductAPI(); + const { deleteProduct, updateProduct, getProduct } = useProductAPI(); const [deleting, setDeleting] = useState<MerchantBackend.Products.ProductDetail & WithId | null>(null); const [notif, setNotif] = useState<Notification | undefined>(undefined); @@ -74,11 +74,61 @@ export default function ProductList({ return onNotFound(); return onLoadError(result); } + const [errorId, setErrorId] = useState<string | undefined>( + undefined, + ); + + const [productId, setProductId] = useState<string>() + async function testIfProductExistAndSelect(orderId: string | undefined): Promise<void> { + if (!orderId) { + setErrorId(i18n.str`Enter a product id`); + return; + } + try { + await getProduct(orderId); + onSelect(orderId); + setErrorId(undefined); + } catch { + setErrorId(i18n.str`product not found`); + } + } return ( <section class="section is-main-section"> <NotificationCard notification={notif} /> + <div class="level"> + <div class="level-left"> + <div class="level-item"> + <div class="field has-addons"> + <div class="control"> + <input + class={errorId ? "input is-danger" : "input"} + type="text" + value={productId ?? ""} + onChange={(e) => setProductId(e.currentTarget.value)} + placeholder={i18n.str`product id`} + /> + {errorId && <p class="help is-danger">{errorId}</p>} + </div> + <span + class="has-tooltip-bottom" + data-tooltip={i18n.str`jump to product with the given product ID`} + > + <button + class="button" + onClick={(e) => testIfProductExistAndSelect(productId)} + > + <span class="icon"> + <i class="mdi mdi-arrow-right" /> + </span> + </button> + </span> + </div> + </div> + </div> + </div> + <CardTable instances={result.data} onCreate={onCreate} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx index 2201e75a5..0d2bb2c30 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx @@ -19,7 +19,7 @@ @author Sebastian Javier Marchano (sebasjm) / -import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { HttpError, RequestError, useApiContext, useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, h, VNode } from "preact"; import { StateUpdater, useEffect, useState } from "preact/hooks"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; @@ -35,6 +35,7 @@ import { PAYTO_WIRE_METHOD_LOOKUP, URL_REGEX, } from "../../../../utils/constants.js"; +import { useBackendBaseRequest } from "../../../../hooks/backend.js"; type Entity = MerchantBackend.Rewards.ReserveCreateRequest; @@ -65,6 +66,7 @@ function ViewStep({ setReserve, }: ViewProps): VNode { const { i18n } = useTranslationContext(); + const {request} = useApiContext() const [wireMethods, setWireMethods] = useState<Array<string>>([]); const [exchangeQueryError, setExchangeQueryError] = useState< string | undefined @@ -123,19 +125,26 @@ function ViewStep({ <AsyncButton class="has-tooltip-left" onClick={() => { - return fetch(`${reserve.exchange_url}wire`) - .then((r) => r.json()) + if (!reserve.exchange_url) { + return Promise.resolve(); + } + + return request<any>(reserve.exchange_url, "keys") //</div>fetch(`${reserve.exchange_url}wire`) .then((r) => { - const wireMethods = r.accounts.map((a: any) => { - const match = PAYTO_WIRE_METHOD_LOOKUP.exec(a.payto_uri); - return (match && match[1]) || ""; - }); + if (r.loading) return; + if (r.ok) { + const wireMethods = r.data.accounts.map((a: any) => { + const match = PAYTO_WIRE_METHOD_LOOKUP.exec(a.payto_uri); + return (match && match[1]) || ""; + }); + } setWireMethods(wireMethods); setCurrentStep(Steps.WIRE_METHOD); return; }) - .catch((r: any) => { - setExchangeQueryError(r.message); + .catch((r: RequestError<{}>) => { + console.log(r.cause) + setExchangeQueryError(r.cause.message); }); }} data-tooltip={ diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx index bdc86d226..cebc1ade6 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx @@ -70,8 +70,8 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { : state.otp_key.length !== 32 ? i18n.str`size of the key should be 32` : undefined, - otp_description: !state.otp_description ? i18n.str`required` - : !/[a-zA-Z0-9]/.test(state.otp_description) + otp_device_description: !state.otp_device_description ? i18n.str`required` + : !/[a-zA-Z0-9]/.test(state.otp_device_description) ? i18n.str`no valid. only characters and numbers` : undefined, @@ -103,7 +103,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { tooltip={i18n.str`Internal id on the system`} /> <Input<Entity> - name="otp_description" + name="otp_device_description" label={i18n.str`Descripiton`} tooltip={i18n.str`Useful to identify the device physically`} /> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatedSuccessfully.tsx index 22ae55677..db3842711 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatedSuccessfully.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatedSuccessfully.tsx @@ -77,7 +77,7 @@ export function CreatedSuccessfully({ <input class="input" readonly - value={entity.otp_description} + value={entity.otp_device_description} /> </p> </div> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/validators/update/UpdatePage.tsx index 585c12e11..79be9802f 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/UpdatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/validators/update/UpdatePage.tsx @@ -87,7 +87,7 @@ export function UpdatePage({ device, onUpdate, onBack }: Props): VNode { errors={errors} > <Input<Entity> - name="otp_description" + name="otp_device_description" label={i18n.str`Description`} tooltip={i18n.str`dddd`} /> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/validators/update/index.tsx index 9a27ccfee..52f6c6c29 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/validators/update/index.tsx @@ -80,7 +80,7 @@ export default function UpdateValidator({ device={{ id: vid, otp_algorithm: result.data.otp_algorithm, - otp_description: result.data.device_description, + otp_device_description: result.data.device_description, otp_key: undefined, otp_ctr: result.data.otp_ctr }} diff --git a/packages/merchant-backoffice-ui/src/paths/login/index.tsx b/packages/merchant-backoffice-ui/src/paths/login/index.tsx index 9948307e4..a9e3c3a1b 100644 --- a/packages/merchant-backoffice-ui/src/paths/login/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/login/index.tsx @@ -52,7 +52,7 @@ function cleanUp(s: string): string { } export function LoginPage({ onConfirm }: Props): VNode { - const { url: backendURL, changeBackend } = useBackendContext(); + const { url: backendURL, changeBackend, resetBackend } = useBackendContext(); const { admin, id } = useInstanceContext(); const { requestNewLoginToken } = useCredentialsChecker(); const [token, setToken] = useState(""); @@ -73,10 +73,9 @@ export function LoginPage({ onConfirm }: Props): VNode { }, [backendURL, id, token]) async function changeServer() { - changeBackend("") + resetBackend() } - console.log(admin, id) if (admin && id !== "default") { //admin trying to access another instance return (<div class="columns is-centered" style={{ margin: "auto" }}> @@ -211,10 +210,7 @@ export function LoginPage({ onConfirm }: Props): VNode { borderTop: 0, }} > - <AsyncButton - - onClick={changeServer} - > + <AsyncButton onClick={changeServer}> <i18n.Translate>Change server</i18n.Translate> </AsyncButton> @@ -304,11 +300,8 @@ export function ConnectionPage({ onConfirm }: { onConfirm: (s: string) => void } borderTop: 0, }} > - <AsyncButton - disabled={backendURL === url} - onClick={doConnect} - > - <i18n.Translate>Try again</i18n.Translate> + <AsyncButton onClick={doConnect}> + <i18n.Translate>Connect</i18n.Translate> </AsyncButton> </footer> </div> diff --git a/packages/merchant-backoffice-ui/src/schemas/index.ts b/packages/merchant-backoffice-ui/src/schemas/index.ts index 4be77595b..c97d41204 100644 --- a/packages/merchant-backoffice-ui/src/schemas/index.ts +++ b/packages/merchant-backoffice-ui/src/schemas/index.ts @@ -22,6 +22,7 @@ import { isAfter, isFuture } from "date-fns"; import as yup from "yup"; import { AMOUNT_REGEX, PAYTO_REGEX } from "../utils/constants.js"; +import { Amounts } from "@gnu-taler/taler-util"; yup.setLocale({ mixed: { @@ -38,7 +39,7 @@ function listOfPayToUrisAreValid(values?: (string | undefined)[]): boolean { } function currencyWithAmountIsValid(value?: string): boolean { - return !!value && AMOUNT_REGEX.test(value); + return !!value && Amounts.parse(value) !== undefined; } function currencyGreaterThan0(value?: string) { if (value) { diff --git a/packages/merchant-backoffice-ui/src/utils/constants.ts b/packages/merchant-backoffice-ui/src/utils/constants.ts index fea9cb7e2..7c4e288b3 100644 --- a/packages/merchant-backoffice-ui/src/utils/constants.ts +++ b/packages/merchant-backoffice-ui/src/utils/constants.ts @@ -25,7 +25,7 @@ export const PAYTO_REGEX = export const PAYTO_WIRE_METHOD_LOOKUP = /payto:\/\/([a-zA-Z][a-zA-Z0-9-.]+)\/./; -export const AMOUNT_REGEX = /^[a-zA-Z][a-zA-Z]:[0-9][0-9,]\.?[0-9,]$/; +export const AMOUNT_REGEX = /^[a-zA-Z][a-zA-Z]{1,11}:[0-9][0-9,]\.?[0-9,]$/; export const INSTANCE_ID_LOOKUP = /\/instances\/([^/]*)\/?$/; diff --git a/packages/web-util/src/index.build.ts b/packages/web-util/src/index.build.ts index 6ee1be20a..0e8e7cec3 100644 --- a/packages/web-util/src/index.build.ts +++ b/packages/web-util/src/index.build.ts @@ -54,7 +54,7 @@ if (GIT_ROOT === "/") { // eslint-disable-next-line no-undef process.exit(1); } -const GIT_HASH = GIT_ROOT === "/" ? undefined : git_hash(); +const GIT_HASH = git_hash(); const buf = fs.readFileSync(path.join(BASE, "package.json")); let _package = JSON.parse(buf.toString("utf-8")); -- cgit v1.2.3

- - Welcome, {account} ({payto.iban})! stringifyPaytoUri(payto)} /> - -

{i18n.str`Bank account balance`}

{i18n.str`Payments`}

{i18n.str`Latest transactions`}

+ + Welcome, {account} ({payto.iban})! stringifyPaytoUri(payto)} /> + +

{i18n.str`Bank account balance`}

{i18n.str`Payments`}

{i18n.str`Latest transactions`}

Latest transactions

- - Welcome, {account} ({payto.iban})! stringifyPaytoUri(payto)} /> - -

{i18n.str`Bank account balance`}

{i18n.str`Payments`}

{i18n.str`Latest transactions`}

{i18n.str`Obtain digital cash`}

{i18n.str`Transfer to bank account`}

Transfer details

{n.message.title}

Cashout details {id}

{i18n.str`Welcome to ${bankUiSettings.bankName}!`}

{i18n.str`Please login!`}

{i18n.str`Welcome to ${bankUiSettings.bankName}!`}

Transfer details

{i18n.str`Charge your GNU Taler wallet`}

+ If you have a Taler wallet installed in this device +

+ Or if you have the wallet in another device +

{i18n.str`Welcome to ${bankUiSettings.bankName}!`}

{i18n.str`Sign up!`}

{i18n.str`Please register!`}

Prepare your wallet

{i18n.str`Confirm Withdrawal`}

{i18n.str`Authorize withdrawal by solving challenge`}

+ Confirm the withdrawal operation +

Answer the next question to authorize the wire transfer

{i18n.str`Operation completed`}

+ Withdrawal OK +

+

Confirm the withdrawal operation

Answer the next question to authorize the wire transfer

Answer the next question to authorize the wire transfer

- Cashout for account {showCashouts} -

- Admin panel -

{i18n.str`Accounts:`}

{i18n.str`Bank account balance`}

- Update password for {account} -

- New account -

- Business account details -

- Remove account: {account} -

{i18n.str`Latest cashouts`}

New cashout

Cashout details {id}

+ Business account details +

+ Update password for {account} +

{i18n.str`Bank account balance`}

{i18n.str`Accounts:`}

+ New account +

+ Cashout for account {action.account} +

+ Admin panel +

+ Remove account: {account} +

{i18n.str`Latest cashouts`}

New cashout

Cashout details {id}

Transfer details

+ {title} +

- Business account details -

+ {update ? + Update account + : + Account details + } +

- Update password for {account} -

+ Update password for account "{account}" +

{i18n.str`Bank account balance`}

{i18n.str`Accounts:`}

+ Accounts +

{i18n.str`Accounts:`}

- New account -

+ New business account +

- Admin panel -

- Remove account: {account} -

+ Can't delete the account +

+ You are going to remove the account +

+ Deleting account "{account}" +

+ This is a demo bank! +

+ If you have a Taler wallet installed in this device +