From c9c04a14be4bf9a70cd1730d2e8b5aa8bd38f032 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 10 Jun 2021 23:51:14 -0300 Subject: lots of fixes in same commit added tooltips in buttons and fix tooltips styles in corner cases added a start for required fields token -> access token fixed query product list refactor instance update/create form some more comments from christian email --- .../src/components/exception/AsyncButton.tsx | 12 +- .../frontend/src/components/exception/login.tsx | 6 +- .../frontend/src/components/form/DatePicker.tsx | 5 - packages/frontend/src/components/form/Input.tsx | 7 +- .../frontend/src/components/form/InputArray.tsx | 13 +- .../frontend/src/components/form/InputDate.tsx | 8 +- .../frontend/src/components/form/InputGroup.tsx | 8 +- .../src/components/form/InputSearchProduct.tsx | 24 +-- .../src/components/form/InputSecured.stories.tsx | 6 +- .../frontend/src/components/form/InputSecured.tsx | 2 +- .../frontend/src/components/form/InputStock.tsx | 27 ++-- .../src/components/form/InputWithAddon.tsx | 7 +- .../frontend/src/components/form/TextField.tsx | 53 +++++++ packages/frontend/src/components/form/useField.tsx | 10 +- .../instance/DefaultInstanceFormFields.tsx | 88 +++++++++++ packages/frontend/src/components/menu/index.tsx | 3 - packages/frontend/src/components/modal/index.tsx | 25 +-- packages/frontend/src/context/backend.ts | 1 - packages/frontend/src/declaration.d.ts | 9 ++ packages/frontend/src/hooks/product.ts | 2 +- packages/frontend/src/i18n/index.tsx | 5 +- .../frontend/src/paths/admin/create/CreatePage.tsx | 72 ++++----- .../admin/create/InstanceCreatedSuccessfully.tsx | 2 +- packages/frontend/src/paths/admin/list/Table.tsx | 85 +++++----- .../paths/instance/orders/create/CreatePage.tsx | 2 +- .../orders/create/InventoryProductForm.tsx | 8 +- .../orders/create/NonInventoryProductForm.tsx | 20 +-- .../orders/create/OrderCreatedSuccessfully.tsx | 9 +- .../paths/instance/orders/details/DetailPage.tsx | 171 +++++++++++---------- .../src/paths/instance/orders/details/Timeline.tsx | 5 +- .../src/paths/instance/orders/list/Table.tsx | 7 +- .../src/paths/instance/orders/list/index.tsx | 51 ++++-- .../paths/instance/products/create/CreatePage.tsx | 2 +- .../products/create/CreatedSuccessfully.tsx | 1 + .../src/paths/instance/products/list/Table.tsx | 82 +++++----- .../paths/instance/products/update/UpdatePage.tsx | 21 ++- .../paths/instance/reserves/create/CreatePage.tsx | 2 +- .../paths/instance/reserves/details/DetailPage.tsx | 107 ++++++------- .../src/paths/instance/reserves/list/Table.tsx | 12 +- .../paths/instance/transfers/create/CreatePage.tsx | 2 +- .../src/paths/instance/transfers/list/Table.tsx | 9 +- .../src/paths/instance/transfers/list/index.tsx | 20 ++- .../src/paths/instance/update/UpdatePage.tsx | 34 +--- packages/frontend/src/scss/main.scss | 71 +++++---- 44 files changed, 661 insertions(+), 455 deletions(-) create mode 100644 packages/frontend/src/components/form/TextField.tsx create mode 100644 packages/frontend/src/components/instance/DefaultInstanceFormFields.tsx diff --git a/packages/frontend/src/components/exception/AsyncButton.tsx b/packages/frontend/src/components/exception/AsyncButton.tsx index 95e4e72..3dad3e0 100644 --- a/packages/frontend/src/components/exception/AsyncButton.tsx +++ b/packages/frontend/src/components/exception/AsyncButton.tsx @@ -25,12 +25,12 @@ import { useAsync } from "../../hooks/async"; import { Translate } from "../../i18n"; type Props = { - children: ComponentChildren, + children: ComponentChildren, disabled: boolean; onClick?: () => Promise; }; -export function AsyncButton({ onClick, disabled, children }: Props) { +export function AsyncButton({ onClick, disabled, children, ...rest }: Props) { const { isSlow, isLoading, request, cancel } = useAsync(onClick); if (isSlow) { @@ -40,7 +40,9 @@ export function AsyncButton({ onClick, disabled, children }: Props) { return ; } - return ; + return + + ; } diff --git a/packages/frontend/src/components/exception/login.tsx b/packages/frontend/src/components/exception/login.tsx index e7c9802..fca81ae 100644 --- a/packages/frontend/src/components/exception/login.tsx +++ b/packages/frontend/src/components/exception/login.tsx @@ -55,7 +55,7 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode {

{i18n`Login required`}

- {i18n`Please enter your auth token.`} + Please enter your access token.
@@ -74,12 +74,12 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode {
- +

- e.keyCode === 13 ? onConfirm(url, token ? `secret-token:${token}` : undefined) : null} value={token} onInput={(e): void => setToken(e?.currentTarget.value)} diff --git a/packages/frontend/src/components/form/DatePicker.tsx b/packages/frontend/src/components/form/DatePicker.tsx index 89d302b..084b7b0 100644 --- a/packages/frontend/src/components/form/DatePicker.tsx +++ b/packages/frontend/src/components/form/DatePicker.tsx @@ -261,11 +261,6 @@ export class DatePicker extends Component {

} - {/* {!selectYearMode &&
- - -
} */} -
diff --git a/packages/frontend/src/components/form/Input.tsx b/packages/frontend/src/components/form/Input.tsx index 200bf54..ab5554c 100644 --- a/packages/frontend/src/components/form/Input.tsx +++ b/packages/frontend/src/components/form/Input.tsx @@ -39,7 +39,7 @@ const TextInput = ({ inputType, error, ...rest }: any) => inputType === 'multili ; export function Input({ name, readonly, placeholder, tooltip, label, expand, help, children, inputType, inputExtra, side, fromStr = defaultFromString, toStr = defaultToString }: Props): VNode { - const { error, value, onChange } = useField(name); + const { error, value, onChange, required } = useField(name); return
-

+

({ name, readonly, placeholder, tooltip, label, expand, onChange={(e: h.JSX.TargetedEvent): void => onChange(fromStr(e.currentTarget.value))} /> {help} {children} + { required && + + }

{error &&

{error}

}
diff --git a/packages/frontend/src/components/form/InputArray.tsx b/packages/frontend/src/components/form/InputArray.tsx index cbe5c50..5314eba 100644 --- a/packages/frontend/src/components/form/InputArray.tsx +++ b/packages/frontend/src/components/form/InputArray.tsx @@ -20,7 +20,7 @@ */ import { h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { useTranslator } from "../../i18n"; +import { Translate, useTranslator } from "../../i18n"; import { InputProps, useField } from "./useField"; export interface Props extends InputProps { @@ -63,24 +63,23 @@ export function InputArray({ name, readonly, placeholder, tooltip, label, hel placeholder={placeholder} readonly={readonly} disabled={readonly} name={String(name)} value={currentValue} onChange={(e): void => setCurrentValue(e.currentTarget.value)} /> - {help}

- + }}>add

- {error &&

{help}

} - {array.map((v,i) =>
+ {help} + {error &&

{error}

} + {array.map((v, i) =>
{v} { onChange(array.filter(f => f !== v) as any); diff --git a/packages/frontend/src/components/form/InputDate.tsx b/packages/frontend/src/components/form/InputDate.tsx index 3986433..654d608 100644 --- a/packages/frontend/src/components/form/InputDate.tsx +++ b/packages/frontend/src/components/form/InputDate.tsx @@ -78,10 +78,12 @@ export function InputDate({ name, readonly, label, placeholder, help, tooltip {error &&

{error}

}
- { !readonly && } - {withTimestampSupport && + {!readonly && + + } + {withTimestampSupport && - } + }
{ name: T; children: ComponentChildren; - label: string; - tooltip?: string; + label: ComponentChildren; + tooltip?: ComponentChildren; alternative?: ComponentChildren; } @@ -51,14 +51,10 @@ export function InputGroup({ name, label, children, tooltip, alternative }: P {active ?
-
{children} -
: ( alternative ?
-
{alternative} -
: undefined )}
; diff --git a/packages/frontend/src/components/form/InputSearchProduct.tsx b/packages/frontend/src/components/form/InputSearchProduct.tsx index 87ae722..43f79c9 100644 --- a/packages/frontend/src/components/form/InputSearchProduct.tsx +++ b/packages/frontend/src/components/form/InputSearchProduct.tsx @@ -114,18 +114,24 @@ function ProductList({ name, onSelect }: ProductListProps) { products =
{!filtered.length ?
- no results + no products found with that description
: filtered.map(p => (
onSelect(p)} style={{ cursor: 'pointer' }}> - - - - - -
-
- 		{p.id}: {p.description}
+
+
+
+
+
+
+

+ {p.id} {p.price} +
+ {p.description} +

+
+
+
)) } diff --git a/packages/frontend/src/components/form/InputSecured.stories.tsx b/packages/frontend/src/components/form/InputSecured.stories.tsx index 136d412..7314add 100644 --- a/packages/frontend/src/components/form/InputSecured.stories.tsx +++ b/packages/frontend/src/components/form/InputSecured.stories.tsx @@ -35,14 +35,14 @@ export const InitialValueEmpty = (): VNode => { const [state, setState] = useState>({ auth_token: '' }) return object={state} errors={{}} valueHandler={setState}> Initial value: '' - name="auth_token" label="Token" /> + name="auth_token" label="Access token" /> } export const InitialValueToken = (): VNode => { const [state, setState] = useState>({ auth_token: 'token' }) return object={state} errors={{}} valueHandler={setState}> - name="auth_token" label="Token" /> + name="auth_token" label="Access token" /> } @@ -50,6 +50,6 @@ export const InitialValueNull = (): VNode => { const [state, setState] = useState>({ auth_token: null }) return object={state} errors={{}} valueHandler={setState}> Initial value: '' - name="auth_token" label="Token" /> + name="auth_token" label="Access token" /> } diff --git a/packages/frontend/src/components/form/InputSecured.tsx b/packages/frontend/src/components/form/InputSecured.tsx index 64737e3..7d8d655 100644 --- a/packages/frontend/src/components/form/InputSecured.tsx +++ b/packages/frontend/src/components/form/InputSecured.tsx @@ -57,7 +57,7 @@ export function InputSecured({ name, readonly, placeholder, tooltip, label, h
diff --git a/packages/frontend/src/components/form/InputStock.tsx b/packages/frontend/src/components/form/InputStock.tsx index ce3add8..b323012 100644 --- a/packages/frontend/src/components/form/InputStock.tsx +++ b/packages/frontend/src/components/form/InputStock.tsx @@ -103,23 +103,25 @@ export function InputStock({ name, readonly, placeholder, tooltip, label, hel const stockAddedErrors: FormErrors = { lost: currentStock + addedStock.incoming < addedStock.lost ? - i18n`lost cannot be greater that current + incoming (max ${currentStock + addedStock.incoming})` + i18n`lost cannot be greater than current and incoming (max ${currentStock + addedStock.incoming})` : undefined } - const stockUpdateDescription = stockAddedErrors.lost ? '' : ( - !!addedStock.incoming || !!addedStock.lost ? - i18n`current stock will change from ${currentStock} to ${currentStock + addedStock.incoming - addedStock.lost}` : - i18n`current stock will stay at ${currentStock}` - ) + // const stockUpdateDescription = stockAddedErrors.lost ? '' : ( + // !!addedStock.incoming || !!addedStock.lost ? + // i18n`current stock will change from ${currentStock} to ${currentStock + addedStock.incoming - addedStock.lost}` : + // i18n`current stock will stay at ${currentStock}` + // ) return
- {label} - {tooltip && - - } +

+ {label} + {tooltip && + + } +

name="stock" errors={errors} object={formValue} valueHandler={valueHandler}> @@ -130,14 +132,15 @@ export function InputStock({ name, readonly, placeholder, tooltip, label, hel -
+ {/*
{stockUpdateDescription}
-
+
*/} + : name="current" label={i18n`Current`} side={ diff --git a/packages/frontend/src/components/form/InputWithAddon.tsx b/packages/frontend/src/components/form/InputWithAddon.tsx index 83b6c2e..22a4960 100644 --- a/packages/frontend/src/components/form/InputWithAddon.tsx +++ b/packages/frontend/src/components/form/InputWithAddon.tsx @@ -38,7 +38,7 @@ const defaultToString = (f?: any): string => f || '' const defaultFromString = (v: string): any => v as any export function InputWithAddon({ name, readonly, addonBefore, children, expand, label, placeholder, help, tooltip, inputType, inputExtra, side, addonAfter, toStr = defaultToString, fromStr = defaultFromString }: Props): VNode { - const { error, value, onChange } = useField(name); + const { error, value, onChange, required } = useField(name); return
@@ -55,11 +55,14 @@ export function InputWithAddon({ name, readonly, addonBefore, children, expan {addonBefore &&
{addonBefore}
} -

+

onChange(fromStr(e.currentTarget.value))} /> + {required && + + } {help} {children}

diff --git a/packages/frontend/src/components/form/TextField.tsx b/packages/frontend/src/components/form/TextField.tsx new file mode 100644 index 0000000..50ea26a --- /dev/null +++ b/packages/frontend/src/components/form/TextField.tsx @@ -0,0 +1,53 @@ +/* + This file is part of GNU Taler + (C) 2021 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 + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ +import { ComponentChildren, h, VNode } from "preact"; +import { useField, InputProps } from "./useField"; + +interface Props extends InputProps { + inputType?: 'text' | 'number' | 'multiline' | 'password'; + expand?: boolean; + side?: ComponentChildren; + children: ComponentChildren; +} + +export function TextField({ name, tooltip, label, expand, help, children, side}: Props): VNode { + const { error } = useField(name); + return
+
+ +
+
+
+

+ {children} + {help} +

+ {error &&

{error}

} +
+ {side} +
+
; +} diff --git a/packages/frontend/src/components/form/useField.tsx b/packages/frontend/src/components/form/useField.tsx index 969291c..c552711 100644 --- a/packages/frontend/src/components/form/useField.tsx +++ b/packages/frontend/src/components/form/useField.tsx @@ -24,6 +24,7 @@ import { useFormContext } from "./FormProvider"; interface Use { error?: string; + required: boolean; value: any; initial: any; onChange: (v: V) => void; @@ -47,9 +48,10 @@ export function useField(name: keyof T): Use { const value = readField(object, String(name)) const initial = readField(initialObject, String(name)) const isDirty = value !== initial - + const hasError = readField(errors, String(name)) return { - error: isDirty ? readField(errors, String(name)) : undefined, + error: isDirty ? hasError : undefined, + required: !isDirty && hasError, value, initial, onChange: updateField(name) as any, @@ -76,9 +78,9 @@ const setValueDeeper = (object: any, names: string[], value: any): any => { export interface InputProps { name: T; - label: string; + label: ComponentChildren; placeholder?: string; - tooltip?: string; + tooltip?: ComponentChildren; readonly?: boolean; help?: ComponentChildren; } \ No newline at end of file diff --git a/packages/frontend/src/components/instance/DefaultInstanceFormFields.tsx b/packages/frontend/src/components/instance/DefaultInstanceFormFields.tsx new file mode 100644 index 0000000..2b98383 --- /dev/null +++ b/packages/frontend/src/components/instance/DefaultInstanceFormFields.tsx @@ -0,0 +1,88 @@ +/* + This file is part of GNU Taler + (C) 2021 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 + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ + +import { Fragment, h } from "preact"; +import { Input } from "../form/Input"; +import { InputCurrency } from "../form/InputCurrency"; +import { InputDuration } from "../form/InputDuration"; +import { InputGroup } from "../form/InputGroup"; +import { InputLocation } from "../form/InputLocation"; +import { InputPayto } from "../form/InputPayto"; +import { InputWithAddon } from "../form/InputWithAddon"; +import { useBackendContext } from "../../context/backend"; +import { useTranslator } from "../../i18n"; +import { Entity } from "../../paths/admin/create/CreatePage"; + +export function DefaultInstanceFormFields({ readonlyId, showId }: { readonlyId?: boolean; showId: boolean }) { + const i18n = useTranslator(); + const backend = useBackendContext(); + return + { showId && name="id" label={i18n`ID`} addonBefore={`${backend.url}/private/instances/`} readonly={readonlyId} tooltip={i18n`display name identification`} /> } + + name="name" label={i18n`Name`} tooltip={i18n`descriptive name`} /> + + name="payto_uris" label={i18n`Account address`} help="x-taler-bank/bank.taler:5882/blogger" tooltip={i18n`where the money will be sent`} /> + + name="default_max_deposit_fee" label={i18n`Default max deposit fee`} tooltip={i18n`max deposit fee when an order has not overridden it`} /> + + name="default_max_wire_fee" label={i18n`Default max wire fee`} tooltip={i18n`max wire fee when the order has not overridden it`} /> + + name="default_wire_fee_amortization" label={i18n`Default wire fee amortization`} tooltip={i18n`max wire fee amortization when the order has not overridden it`} /> + + + + + + + + + + name="default_pay_delay" label={i18n`Default payment delay`} tooltip={i18n`max time to pay if the order does not override it`} /> + + name="default_wire_transfer_delay" label={i18n`Default wire transfer delay`} tooltip={i18n`min time to wait the transfer if the merchant does not override it`} /> + + ; +} +/* + name="id" label={i18n`Identifier`} addonBefore={`${backend.url}/private/instances/`} readonly={!!forceId} tooltip={i18n`Name of the instance in URLs. The 'default' instance is special in that it is used to administer other instances.`} /> + + name="name" label={i18n`Business name`} tooltip={i18n`Legal name of the business represented by this instance.`} /> + + name="payto_uris" label={i18n`Bank account URI`} help="x-taler-bank/bank.taler:5882/blogger" tooltip={i18n`URI specifying bank account for crediting revenue.`} /> + + name="default_max_deposit_fee" label={i18n`Default max deposit fee`} tooltip={i18n`Maximum deposit fees this merchant is willing to pay per order by default.`} /> + + name="default_max_wire_fee" label={i18n`Default max wire fee`} tooltip={i18n`Maximum wire fees this merchant is willing to pay per wire transfer by default.`} /> + + name="default_wire_fee_amortization" label={i18n`Default wire fee amortization`} tooltip={i18n`Number of orders excess wire transfer fees will be divided by to compute per order surcharge.`} /> + + + + + + + + + + name="default_pay_delay" label={i18n`Default payment delay`} tooltip={i18n`Time customers have to pay an order before the offer expires by default.`} /> + + name="default_wire_transfer_delay" label={i18n`Default wire transfer delay`} tooltip={i18n`Maximum time an exchange is allowed to delay wiring funds to the merchant, enabling it to aggregate smaller payments into larger wire transfers and reducing wire fees.`} /> +*/ \ No newline at end of file diff --git a/packages/frontend/src/components/menu/index.tsx b/packages/frontend/src/components/menu/index.tsx index 31826ed..3a7ccab 100644 --- a/packages/frontend/src/components/menu/index.tsx +++ b/packages/frontend/src/components/menu/index.tsx @@ -27,15 +27,12 @@ import { Sidebar } from "./SideBar"; function getInstanceTitle(path: string, id: string): string { switch (path) { - // case InstancePaths.details: return `${id}` case InstancePaths.update: return `${id}: Settings` case InstancePaths.order_list: return `${id}: Orders` case InstancePaths.order_new: return `${id}: New order` - case InstancePaths.order_details: return `${id}: Detail of the order` case InstancePaths.product_list: return `${id}: Products` case InstancePaths.product_new: return `${id}: New product` case InstancePaths.product_update: return `${id}: Update product` - case InstancePaths.reserves_details: return `${id}: Detail of a reserve` case InstancePaths.reserves_new: return `${id}: New reserve` case InstancePaths.reserves_list: return `${id}: Reserves` case InstancePaths.transfers_list: return `${id}: Transfers` diff --git a/packages/frontend/src/components/modal/index.tsx b/packages/frontend/src/components/modal/index.tsx index 8f6b722..9874a19 100644 --- a/packages/frontend/src/components/modal/index.tsx +++ b/packages/frontend/src/components/modal/index.tsx @@ -44,7 +44,7 @@ export function ConfirmModal({ active, description, onCancel, onConfirm, childre
- {!description ? null :

{description}

} + {!description ? null :

{description}

}
@@ -125,6 +125,7 @@ interface UpdateTokenModalProps { onClear: () => void; } +//FIXME: merge UpdateTokenModal with SetTokenNewInstanceModal export function UpdateTokenModal({ onCancel, onClear, onConfirm, oldToken }: UpdateTokenModalProps): VNode { type State = { old_token: string, new_token: string, repeat_token: string } const [form, setValue] = useState>({ @@ -134,7 +135,7 @@ export function UpdateTokenModal({ onCancel, onClear, onConfirm, oldToken }: Upd const hasInputTheCorrectOldToken = oldToken && oldToken !== form.old_token const errors = { - old_token: hasInputTheCorrectOldToken ? i18n`is not the same as the current token` : undefined, + old_token: hasInputTheCorrectOldToken ? i18n`is not the same as the current access token` : undefined, new_token: !form.new_token ? i18n`cannot be empty` : (form.new_token === form.old_token ? i18n`cannot be the same as the old token` : undefined), repeat_token: form.new_token !== form.repeat_token ? i18n`is not the same` : undefined } @@ -143,7 +144,7 @@ export function UpdateTokenModal({ onCancel, onClear, onConfirm, oldToken }: Upd const instance = useInstanceContext() - const text = i18n`You are updating the authorization token from instance with id ${instance.id}` + const text = i18n`You are updating the access token from instance with id ${instance.id}` return
- {oldToken && name="old_token" label={i18n`Old token`} tooltip={i18n`token currently in use`} inputType="password" />} - name="new_token" label={i18n`New token`} tooltip={i18n`next token to be used`} inputType="password" /> - name="repeat_token" label={i18n`Repeat token`} tooltip={i18n`confirm the same token`} inputType="password" /> + {oldToken && name="old_token" label={i18n`Old access token`} tooltip={i18n`access token currently in use`} inputType="password" />} + name="new_token" label={i18n`New access token`} tooltip={i18n`next access token to be used`} inputType="password" /> + name="repeat_token" label={i18n`Repeat access token`} tooltip={i18n`confirm the same access token`} inputType="password" /> -

Clearing the auth token will mean public access to the instance

+

Clearing the access token will mean public access to the instance

@@ -173,13 +174,13 @@ export function SetTokenNewInstanceModal({ onCancel, onClear, onConfirm }: Updat const i18n = useTranslator() const errors = { - new_token: !form.new_token ? i18n`cannot be empty` : (form.new_token === form.old_token ? i18n`cannot be the same as the old token` : undefined), + new_token: !form.new_token ? i18n`cannot be empty` : (form.new_token === form.old_token ? i18n`cannot be the same as the old access token` : undefined), repeat_token: form.new_token !== form.repeat_token ? i18n`is not the same` : undefined } const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined) - const text = i18n`You are setting the authorization token for the new instance` + const text = i18n`You are setting the access token for the new instance` return
- name="new_token" label={i18n`New token`} tooltip={i18n`next token to be used`} inputType="password" /> - name="repeat_token" label={i18n`Repeat token`} tooltip={i18n`confirm the same token`} inputType="password" /> + name="new_token" label={i18n`New access token`} tooltip={i18n`next access token to be used`} inputType="password" /> + name="repeat_token" label={i18n`Repeat access token`} tooltip={i18n`confirm the same access token`} inputType="password" /> -

Clearing the auth token will mean public access to the instance

+

Clearing the access token will mean public access to the instance

diff --git a/packages/frontend/src/context/backend.ts b/packages/frontend/src/context/backend.ts index c1b2c14..9355859 100644 --- a/packages/frontend/src/context/backend.ts +++ b/packages/frontend/src/context/backend.ts @@ -49,7 +49,6 @@ export function useBackendContextState(): BackendContextType { const [url, triedToLog, changeBackend, resetBackend] = useBackendURL(); const [token, _updateToken] = useBackendDefaultToken(); const updateToken = (t?:string) => { - // console.log("update token", t) _updateToken(t) } diff --git a/packages/frontend/src/declaration.d.ts b/packages/frontend/src/declaration.d.ts index 21199f4..82bc694 100644 --- a/packages/frontend/src/declaration.d.ts +++ b/packages/frontend/src/declaration.d.ts @@ -685,6 +685,15 @@ export namespace MerchantBackend { // The order was neither claimed nor paid. order_status: "unpaid"; + // when was the order created + creation_time: Timestamp; + + // Order summary text. + summary: string; + + // Total amount of the order (to be paid by the customer). + total_amount: Amount; + // URI that the wallet must process to complete the payment. taler_pay_uri: string; diff --git a/packages/frontend/src/hooks/product.ts b/packages/frontend/src/hooks/product.ts index 6dd2d13..cdb1c4e 100644 --- a/packages/frontend/src/hooks/product.ts +++ b/packages/frontend/src/hooks/product.ts @@ -138,7 +138,7 @@ export function useInstanceProducts(): HttpResponse<(MerchantBackend.Products.Pr if (!list?.data || !list.data.products.length || listError || listLoading) return null return [`/private/products/${list.data.products[pageIndex].product_id}`, token, url] }, fetcher, { - + revalidateAll: true, }) useEffect(() => { diff --git a/packages/frontend/src/i18n/index.tsx b/packages/frontend/src/i18n/index.tsx index 5be1a3b..63c8e19 100644 --- a/packages/frontend/src/i18n/index.tsx +++ b/packages/frontend/src/i18n/index.tsx @@ -21,7 +21,7 @@ /** * Imports */ -import { Component, ComponentChild, ComponentChildren, h, Fragment, VNode } from "preact"; +import { ComponentChild, ComponentChildren, h, Fragment, VNode } from "preact"; import { useTranslationContext } from "../context/translation"; @@ -40,11 +40,10 @@ export function useTranslator() { } - /** * Convert template strings to a msgid */ -function toI18nString(stringSeq: ReadonlyArray): string { + function toI18nString(stringSeq: ReadonlyArray): string { let s = ""; for (let i = 0; i < stringSeq.length; i++) { s += stringSeq[i]; diff --git a/packages/frontend/src/paths/admin/create/CreatePage.tsx b/packages/frontend/src/paths/admin/create/CreatePage.tsx index 488d137..82286de 100644 --- a/packages/frontend/src/paths/admin/create/CreatePage.tsx +++ b/packages/frontend/src/paths/admin/create/CreatePage.tsx @@ -24,22 +24,13 @@ import { useState } from "preact/hooks"; import * as yup from 'yup'; import { AsyncButton } from "../../../components/exception/AsyncButton"; import { FormErrors, FormProvider } from "../../../components/form/FormProvider"; -import { Input } from "../../../components/form/Input"; -import { InputCurrency } from "../../../components/form/InputCurrency"; -import { InputDuration } from "../../../components/form/InputDuration"; -import { InputGroup } from "../../../components/form/InputGroup"; -import { InputLocation } from "../../../components/form/InputLocation"; -import { InputPayto } from "../../../components/form/InputPayto"; -import { InputSecured } from "../../../components/form/InputSecured"; -import { InputWithAddon } from "../../../components/form/InputWithAddon"; -import { SetTokenNewInstanceModal, UpdateTokenModal } from "../../../components/modal"; -import { useBackendContext } from "../../../context/backend"; -import { useInstanceContext } from "../../../context/instance"; +import { SetTokenNewInstanceModal } from "../../../components/modal"; import { MerchantBackend } from "../../../declaration"; import { Translate, useTranslator } from "../../../i18n"; import { InstanceCreateSchema as schema } from '../../../schemas'; +import { DefaultInstanceFormFields } from "../../../components/instance/DefaultInstanceFormFields"; -type Entity = MerchantBackend.Instances.InstanceConfigurationMessage & { auth_token?: string } +export type Entity = MerchantBackend.Instances.InstanceConfigurationMessage & { auth_token?: string } interface Props { onCreate: (d: Entity) => Promise; @@ -50,9 +41,9 @@ interface Props { function with_defaults(id?: string): Partial { return { id, - default_pay_delay: { d_ms: 1000 * 60 * 5 }, + default_pay_delay: { d_ms: 1000 * 60 * 60 }, // one hour default_wire_fee_amortization: 1, - default_wire_transfer_delay: { d_ms: 2000 * 60 * 5 }, + default_wire_transfer_delay: { d_ms: 1000 * 2 * 60 * 60 * 24 }, // one day }; } export function CreatePage({ onCreate, onBack, forceId }: Props): VNode { @@ -78,13 +69,13 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode { // schema.validateSync(value, { abortEarly: false }) return onCreate(schema.cast(value) as Entity); } - const backend = useBackendContext() function updateToken(token: string | null) { valueHandler(old => ({ ...old, auth_token: token === null ? undefined : token })) } const i18n = useTranslator() + return
@@ -108,44 +99,37 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
+
+
+
+
+

+ +

+
+
+
+ +
-
- errors={errors} object={value} valueHandler={valueHandler} > - - name="id" label={i18n`Identifier`} addonBefore={`${backend.url}/private/instances/`} readonly={!!forceId} tooltip={i18n`Name of the instance in URLs. The 'default' instance is special in that it is used to administer other instances.`} /> - - name="name" label={i18n`Business name`} tooltip={i18n`Legal name of the business represented by this instance.`} /> +
- name="payto_uris" label={i18n`Bank account URI`} help="x-taler-bank/bank.taler:5882/blogger" tooltip={i18n`URI specifying bank account for crediting revenue.`} /> - - name="default_max_deposit_fee" label={i18n`Default max deposit fee`} tooltip={i18n`Maximum deposit fees this merchant is willing to pay per order by default.`} /> - - name="default_max_wire_fee" label={i18n`Default max wire fee`} tooltip={i18n`Maximum wire fees this merchant is willing to pay per wire transfer by default.`} /> - - name="default_wire_fee_amortization" label={i18n`Default wire fee amortization`} tooltip={i18n`Number of orders excess wire transfer fees will be divided by to compute per order surcharge.`} /> - - - - - - - - - - name="default_pay_delay" label={i18n`Default payment delay`} tooltip={i18n`Time customers have to pay an order before the offer expires by default.`} /> + errors={errors} object={value} valueHandler={valueHandler} > - name="default_wire_transfer_delay" label={i18n`Default wire transfer delay`} tooltip={i18n`Maximum time an exchange is allowed to delay wiring funds to the merchant, enabling it to aggregate smaller payments into larger wire transfers and reducing wire fees.`} /> +
- {onBack && } - {isTokenSet ? - Confirm : - - } + {onBack && } + Confirm
diff --git a/packages/frontend/src/paths/admin/create/InstanceCreatedSuccessfully.tsx b/packages/frontend/src/paths/admin/create/InstanceCreatedSuccessfully.tsx index 45aec1c..00b3f20 100644 --- a/packages/frontend/src/paths/admin/create/InstanceCreatedSuccessfully.tsx +++ b/packages/frontend/src/paths/admin/create/InstanceCreatedSuccessfully.tsx @@ -49,7 +49,7 @@ export function InstanceCreatedSuccessfully({ entity, onConfirm }: { entity: Ent
- +
diff --git a/packages/frontend/src/paths/admin/list/Table.tsx b/packages/frontend/src/paths/admin/list/Table.tsx index 1f512c0..4210a92 100644 --- a/packages/frontend/src/paths/admin/list/Table.tsx +++ b/packages/frontend/src/paths/admin/list/Table.tsx @@ -22,7 +22,7 @@ import { h, VNode } from "preact"; import { StateUpdater, useEffect, useState } from "preact/hooks"; import { MerchantBackend } from "../../../declaration"; -import { Translate } from "../../../i18n"; +import { Translate, useTranslator } from "../../../i18n"; interface Props { instances: MerchantBackend.Instances.Instance[]; @@ -50,6 +50,7 @@ export function CardTable({ instances, onCreate, onUpdate, onDelete, selected }: } }, [actionQueue, selected, onUpdate]) + const i18n = useTranslator() return
@@ -63,9 +64,11 @@ export function CardTable({ instances, onCreate, onUpdate, onDelete, selected }:
- + + +
@@ -96,48 +99,48 @@ function toggleSelected(id: T): (prev: T[]) => T[] { function Table({ rowSelection, rowSelectionHandler, instances, onUpdate, onDelete }: TableProps): VNode { return (
- - - - - - - - - - {instances.map(i => { - return - + {instances.map(i => { + return + + + + + + })} + + +
- - IDName -
+ + + + - - + + + + - })} - - -
- - {i.id}{i.name} -
- - -
- 		IDName
+ +
+ + {i.id}{i.name} +
+ + +
+
- ) + ) } function EmptyTable(): VNode { diff --git a/packages/frontend/src/paths/instance/orders/create/CreatePage.tsx b/packages/frontend/src/paths/instance/orders/create/CreatePage.tsx index 1b47564..ae32dac 100644 --- a/packages/frontend/src/paths/instance/orders/create/CreatePage.tsx +++ b/packages/frontend/src/paths/instance/orders/create/CreatePage.tsx @@ -257,7 +257,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { with a total price of {totalPriceProducts}

} tooltip={i18n`Add products without inventory management to the order.`}> - { + { setEditingProduct(undefined) return addNewProduct(p) }} /> diff --git a/packages/frontend/src/paths/instance/orders/create/InventoryProductForm.tsx b/packages/frontend/src/paths/instance/orders/create/InventoryProductForm.tsx index 6cf48f8..b97b39a 100644 --- a/packages/frontend/src/paths/instance/orders/create/InventoryProductForm.tsx +++ b/packages/frontend/src/paths/instance/orders/create/InventoryProductForm.tsx @@ -39,12 +39,14 @@ export function InventoryProductForm({ currentProducts, onAddProduct }: Props): const i18n = useTranslator() + const productWithInfiniteStock = state.product && state.product.total_stock === -1 + const submit = (): void => { if (!state.product) { setErrors({ product: i18n`You must enter a valid product identifier.` }); return; } - if (state.product.total_stock === -1) { + if (productWithInfiniteStock) { onAddProduct(state.product, 1) } else { if (!state.quantity || state.quantity <= 0) { @@ -73,9 +75,9 @@ export function InventoryProductForm({ currentProducts, onAddProduct }: Props): return errors={errors} object={state} valueHandler={setState}> setState(v => ({ ...v, product: p }))} /> - name="quantity" label={i18n`Quantity`} tooltip={i18n`how many products will be added`} /> + { state.product && !productWithInfiniteStock && name="quantity" label={i18n`Quantity`} tooltip={i18n`how many products will be added`} /> }
- +
} diff --git a/packages/frontend/src/paths/instance/orders/create/NonInventoryProductForm.tsx b/packages/frontend/src/paths/instance/orders/create/NonInventoryProductForm.tsx index 967f1cb..756ec23 100644 --- a/packages/frontend/src/paths/instance/orders/create/NonInventoryProductForm.tsx +++ b/packages/frontend/src/paths/instance/orders/create/NonInventoryProductForm.tsx @@ -28,22 +28,22 @@ import { NonInventoryProductSchema as schema } from '../../../../schemas'; import * as yup from 'yup'; -import { useTranslator } from "../../../../i18n"; +import { Translate, useTranslator } from "../../../../i18n"; type Entity = MerchantBackend.Product interface Props { onAddProduct: (p: Entity) => Promise; - value?: Entity; + productToEdit?: Entity; } -export function NonInventoryProductFrom({ value, onAddProduct }: Props): VNode { +export function NonInventoryProductFrom({ productToEdit, onAddProduct }: Props): VNode { const [showCreateProduct, setShowCreateProduct] = useState(false) - const editing = !!value + const isEditing = !!productToEdit useEffect(() => { - setShowCreateProduct(editing) - }, [editing]) + setShowCreateProduct(isEditing) + }, [isEditing]) const [submitForm, addFormSubmitter] = useListener | undefined>((result) => { if (result) { @@ -62,10 +62,12 @@ export function NonInventoryProductFrom({ value, onAddProduct }: Props): VNode { return
- +
- {showCreateProduct && setShowCreateProduct(false)} onConfirm={submitForm}> - + {showCreateProduct && setShowCreateProduct(false)} onConfirm={submitForm}> + } } diff --git a/packages/frontend/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx b/packages/frontend/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx index db0be90..14c5d68 100644 --- a/packages/frontend/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx +++ b/packages/frontend/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx @@ -17,6 +17,7 @@ import { h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { CreatedSuccessfully } from "../../../../components/notifications/CreatedSuccessfully"; import { useOrderAPI } from "../../../../hooks/order"; +import { Translate } from "../../../../i18n"; import { Entity } from "./index"; interface Props { @@ -38,7 +39,7 @@ export function OrderCreatedSuccessfully({ entity, onConfirm, onCreateAnother }: return
- +
@@ -50,7 +51,7 @@ export function OrderCreatedSuccessfully({ entity, onConfirm, onCreateAnother }:
- +
@@ -62,7 +63,7 @@ export function OrderCreatedSuccessfully({ entity, onConfirm, onCreateAnother }:
- +
@@ -74,7 +75,7 @@ export function OrderCreatedSuccessfully({ entity, onConfirm, onCreateAnother }:
- +
diff --git a/packages/frontend/src/paths/instance/orders/details/DetailPage.tsx b/packages/frontend/src/paths/instance/orders/details/DetailPage.tsx index be05b43..9f148b6 100644 --- a/packages/frontend/src/paths/instance/orders/details/DetailPage.tsx +++ b/packages/frontend/src/paths/instance/orders/details/DetailPage.tsx @@ -19,6 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { AmountJson, Amounts } from "@gnu-taler/taler-util"; import { format } from "date-fns"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; @@ -29,7 +30,7 @@ import { InputDate } from "../../../../components/form/InputDate"; import { InputDuration } from "../../../../components/form/InputDuration"; import { InputGroup } from "../../../../components/form/InputGroup"; import { InputLocation } from "../../../../components/form/InputLocation"; -import { NotificationCard } from "../../../../components/menu"; +import { TextField } from "../../../../components/form/TextField"; import { ProductList } from "../../../../components/product/ProductList"; import { MerchantBackend } from "../../../../declaration"; import { Translate, useTranslator } from "../../../../i18n"; @@ -52,6 +53,35 @@ type Unpaid = MerchantBackend.Orders.CheckPaymentUnpaidResponse type Claimed = MerchantBackend.Orders.CheckPaymentClaimedResponse +function ContractTerms({ value }: { value: CT }) { + const i18n = useTranslator() + + return + object={value} valueHandler={null} > + readonly name="summary" label={i18n`Summary`} tooltip={i18n`human-readable description of the whole purchase`} /> + readonly name="amount" label={i18n`Amount`} tooltip={i18n`total price for the transaction`} /> + {value.fulfillment_url && + readonly name="fulfillment_url" label={i18n`Fulfillment URL`} tooltip={i18n`URL for this purchase`} /> + } + readonly name="max_fee" label={i18n`Max fee`} tooltip={i18n`maximum total deposit fee accepted by the merchant for this contract`} /> + readonly name="max_wire_fee" label={i18n`Max wire fee`} tooltip={i18n`maximum wire fee accepted by the merchant`} /> + readonly name="wire_fee_amortization" label={i18n`Wire fee amortization`} tooltip={i18n`over how many customer transactions does the merchant expect to amortize wire fees on average`} /> + readonly name="timestamp" label={i18n`Created at`} tooltip={i18n`time when this contract was generated`} /> + readonly name="refund_deadline" label={i18n`Refund deadline`} tooltip={i18n`after this deadline has passed no refunds will be accepted`} /> + readonly name="pay_deadline" label={i18n`Payment deadline`} tooltip={i18n`after this deadline, the merchant won't accept payments for the contract`} /> + readonly name="wire_transfer_deadline" label={i18n`Wire transfer deadline`} tooltip={i18n`transfer deadline for the exchange`} /> + readonly name="delivery_date" label={i18n`Delivery date`} tooltip={i18n`time indicating when the order should be delivered`} /> + {value.delivery_date && + + + + } + readonly name="auto_refund" label={i18n`Auto-refund delay`} tooltip={i18n`how long the wallet should try to get an automatic refund for the purchase`} /> + readonly name="extra" label={i18n`Extra info`} tooltip={i18n`extra data that is only interpreted by the merchant frontend`} /> + + +} + function ClaimedPage({ id, order }: { id: string; order: MerchantBackend.Orders.CheckPaymentClaimedResponse }) { const events: Event[] = [] events.push({ @@ -126,11 +156,8 @@ function ClaimedPage({ id, order }: { id: string; order: MerchantBackend.Orders. whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', - // maxWidth: '100%', }}> - {/* {order.order_status_url} */} -

pay at: missing value, there is no order_status_url

-

created at: {format(new Date(order.contract_terms.timestamp.t_ms), 'yyyy-MM-dd HH:mm:ss')}

+

claimed at: {format(new Date(order.contract_terms.timestamp.t_ms), 'yyyy-MM-dd HH:mm:ss')}

@@ -155,18 +182,12 @@ function ClaimedPage({ id, order }: { id: string; order: MerchantBackend.Orders.
- {order.contract_terms.products.length > 0 && -
-
-
-
Product list
- -
-
-
-
- } + {order.contract_terms.products.length ? +
Product list
+ + : undefined} + {value.contract_terms && }
@@ -207,19 +228,43 @@ function PaidPage({ id, order, onRefund }: { id: string; order: MerchantBackend. type: 'refund', }) }) - order.wire_details.forEach(e => { - events.push({ - when: new Date(e.execution_time.t_ms), - description: `wired`, - type: 'wired', - }) - }) - if (order.contract_terms.wire_transfer_deadline.t_ms !== 'never' && - order.contract_terms.wire_transfer_deadline.t_ms < new Date().getTime()) events.push({ - when: new Date(order.contract_terms.wire_transfer_deadline.t_ms - 1000 * 10), - description: `wired (faked)`, - type: 'wired', - }) + if (order.wire_details && order.wire_details.length) { + if (order.wire_details.length > 1) { + let last: MerchantBackend.Orders.TransactionWireTransfer | null = null + let first: MerchantBackend.Orders.TransactionWireTransfer | null = null + let total: AmountJson | null = null + + order.wire_details.forEach(w => { + if (last === null || last.execution_time.t_ms < w.execution_time.t_ms) { + last = w + } + if (first === null || first.execution_time.t_ms > w.execution_time.t_ms) { + first = w + } + total = total === null ? Amounts.parseOrThrow(w.amount) : Amounts.add(total, Amounts.parseOrThrow(w.amount)).amount + }) + events.push({ + when: new Date(last!.execution_time.t_ms), + description: `wired ${Amounts.stringify(total!)}`, + type: 'wired-range', + }) + events.push({ + when: new Date(first!.execution_time.t_ms), + description: `wire transfer started...`, + type: 'wired-range', + }) + } else { + order.wire_details.forEach(e => { + events.push({ + when: new Date(e.execution_time.t_ms), + description: `wired ${e.amount}`, + type: 'wired', + }) + }) + + } + + } const [value, valueHandler] = useState>(order) @@ -261,10 +306,9 @@ function PaidPage({ id, order, onRefund }: { id: string; order: MerchantBackend.

- {refundable && } - + + +

@@ -301,53 +345,23 @@ function PaidPage({ id, order, onRefund }: { id: string; order: MerchantBackend. name="deposit_total" readonly label={i18n`Deposit total`} /> {order.refunded && name="refund_amount" readonly label={i18n`Refunded amount`} />} name="order_status" readonly label={i18n`Order status`} /> - {order.order_status_url && name="order_status_url" readonly label={i18n`Status URL`} />} + name="order_status_url" label={i18n`Status URL`} > + + {order.order_status_url} + +
- {value.contract_terms &&
-
-
-
Contract Terms
- object={value.contract_terms} valueHandler={null} > - readonly name="summary" label={i18n`Summary`} tooltip={i18n`human-readable description of the whole purchase`} /> - readonly name="amount" label={i18n`Amount`} tooltip={i18n`total price for the transaction`} /> - {value.contract_terms.fulfillment_url && - readonly name="fulfillment_url" label={i18n`Fulfillment URL`} tooltip={i18n`URL for this purchase`} /> - } - readonly name="max_fee" label={i18n`Max fee`} tooltip={i18n`maximum total deposit fee accepted by the merchant for this contract`} /> - readonly name="max_wire_fee" label={i18n`Max wire fee`} tooltip={i18n`maximum wire fee accepted by the merchant`} /> - readonly name="wire_fee_amortization" label={i18n`Wire fee amortization`} tooltip={i18n`over how many customer transactions does the merchant expect to amortize wire fees on average`} /> - readonly name="timestamp" label={i18n`Created at`} tooltip={i18n`time when this contract was generated`} /> - readonly name="refund_deadline" label={i18n`Refund deadline`} tooltip={i18n`after this deadline has passed no refunds will be accepted`} /> - readonly name="pay_deadline" label={i18n`Payment deadline`} tooltip={i18n`after this deadline, the merchant won't accept payments for the contract`} /> - readonly name="wire_transfer_deadline" label={i18n`Wire transfer deadline`} tooltip={i18n`transfer deadline for the exchange`} /> - readonly name="delivery_date" label={i18n`Delivery date`} tooltip={i18n`time indicating when the order should be delivered`} /> - {value.contract_terms.delivery_date && - - - - } - readonly name="auto_refund" label={i18n`Auto-refund delay`} tooltip={i18n`how long the wallet should try to get an automatic refund for the purchase`} /> - readonly name="extra" label={i18n`Extra info`} tooltip={i18n`extra data that is only interpreted by the merchant frontend`} /> - -
-
-
-
} - {order.contract_terms.products.length ?
-
-
-
Product list
- -
-
-
-
: undefined} + {order.contract_terms.products.length ? +
Product list
+ + : undefined} + {value.contract_terms && }
@@ -380,10 +394,9 @@ function UnpaidPage({ id, order }: { id: string; order: MerchantBackend.Orders.C whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', - // maxWidth: '100%', }}> -

pay at: {order.order_status_url}

-

created at: missing value, there is no contract term yet

+

pay at: {order.order_status_url}

+

created at: {format(new Date(order.creation_time.t_ms), 'yyyy-MM-dd HH:mm:ss')}

@@ -394,8 +407,10 @@ function UnpaidPage({ id, order }: { id: string; order: MerchantBackend.Orders.C
-
+
object={value} valueHandler={valueHandler} > + readonly name="summary" label={i18n`Summary`} tooltip={i18n`human-readable description of the whole purchase`} /> + readonly name="total_amount" label={i18n`Amount`} tooltip={i18n`total price for the transaction`} /> name="order_status" readonly label={i18n`Order status`} /> name="order_status_url" readonly label={i18n`Order status URL`} /> name="taler_pay_uri" readonly label={i18n`Payment URI`} /> @@ -432,7 +447,7 @@ export function DetailPage({ id, selected, onRefund, onBack }: Props): VNode { />}
-
+
diff --git a/packages/frontend/src/paths/instance/orders/details/Timeline.tsx b/packages/frontend/src/paths/instance/orders/details/Timeline.tsx index d4f17c4..16adbcb 100644 --- a/packages/frontend/src/paths/instance/orders/details/Timeline.tsx +++ b/packages/frontend/src/paths/instance/orders/details/Timeline.tsx @@ -47,7 +47,7 @@ export function Timeline({ events:e }: Props) { } }) return
- {events.map((e,i) => { + {state.map((e,i) => { return
{(() => { switch (e.type) { @@ -55,6 +55,7 @@ export function Timeline({ events:e }: Props) { case "delivery": return
case "start": return
case "wired": return
+ case "wired-range": return
case "refund": return
case "now": return
} @@ -71,5 +72,5 @@ export function Timeline({ events:e }: Props) { export interface Event { when: Date; description: string; - type: 'start' | 'refund' | 'wired' | 'deadline' | 'delivery' | 'now' + type: 'start' | 'refund' | 'wired' | 'wired-range' |'deadline' | 'delivery' | 'now' } diff --git a/packages/frontend/src/paths/instance/orders/list/Table.tsx b/packages/frontend/src/paths/instance/orders/list/Table.tsx index 4057ca2..41c7293 100644 --- a/packages/frontend/src/paths/instance/orders/list/Table.tsx +++ b/packages/frontend/src/paths/instance/orders/list/Table.tsx @@ -31,7 +31,7 @@ import { ConfirmModal } from "../../../../components/modal"; import { MerchantBackend, WithId } from "../../../../declaration"; import { useOrderDetails } from "../../../../hooks/order"; import { Translate, useTranslator } from "../../../../i18n"; -import { AuthorizeTipSchema, RefundSchema as RefundSchema } from "../../../../schemas"; +import { RefundSchema as RefundSchema } from "../../../../schemas"; import { mergeRefunds, subtractPrices, sumPrices } from "../../../../utils/amount"; import { AMOUNT_ZERO_REGEX } from "../../../../utils/constants"; @@ -54,6 +54,7 @@ export function CardTable({ instances, onCreate, onRefund, onCopyURL, onSelect, const [showRefund, setShowRefund] = useState(undefined) + const i18n = useTranslator() return
@@ -62,9 +63,11 @@ export function CardTable({ instances, onCreate, onRefund, onCopyURL, onSelect,
+ +
@@ -114,7 +117,7 @@ function Table({ instances, onSelect, onRefund, onCopyURL, onLoadMoreAfter, onLo Date Amount - Summary + Summary diff --git a/packages/frontend/src/paths/instance/orders/list/index.tsx b/packages/frontend/src/paths/instance/orders/list/index.tsx index c85db0b..8bfe23d 100644 --- a/packages/frontend/src/paths/instance/orders/list/index.tsx +++ b/packages/frontend/src/paths/instance/orders/list/index.tsx @@ -41,7 +41,7 @@ interface Props { export default function ({ onUnauthorized, onLoadError, onCreate, onSelect, onNotFound }: Props): VNode { - const [filter, setFilter] = useState({ }) + const [filter, setFilter] = useState({}) const [pickDate, setPickDate] = useState(false) const setNewDate = (date: Date) => setFilter(prev => ({ ...prev, date })) @@ -66,7 +66,7 @@ export default function ({ onUnauthorized, onLoadError, onCreate, onSelect, onNo async function testIfOrderExistAndSelect() { if (!orderId) { - setErrorOrderId('Enter an order id') + setErrorOrderId(i18n`Enter an order id`) return; } try { @@ -74,11 +74,12 @@ export default function ({ onUnauthorized, onLoadError, onCreate, onSelect, onNo onSelect(orderId) setErrorOrderId(undefined) } catch { - setErrorOrderId('order not found') + setErrorOrderId(i18n`order not found`) } } const i18n = useTranslator() + const dateTooltip = i18n`jump to order closer to a given date` return
@@ -91,11 +92,11 @@ export default function ({ onUnauthorized, onLoadError, onCreate, onSelect, onNo setOrderId(e.currentTarget.value)} placeholder={i18n`order id`} /> {errorOrderId &&

{errorOrderId}

}
-
- + +
+ +
@@ -104,10 +105,26 @@ export default function ({ onUnauthorized, onLoadError, onCreate, onSelect, onNo
@@ -120,12 +137,16 @@ export default function ({ onUnauthorized, onLoadError, onCreate, onSelect, onNo
}
- + + { setPickDate(true) }} /> +
- { setPickDate(true) }}> - - + + { setPickDate(true) }}> + + +
diff --git a/packages/frontend/src/paths/instance/products/create/CreatePage.tsx b/packages/frontend/src/paths/instance/products/create/CreatePage.tsx index e6e6f1e..78c0f0d 100644 --- a/packages/frontend/src/paths/instance/products/create/CreatePage.tsx +++ b/packages/frontend/src/paths/instance/products/create/CreatePage.tsx @@ -45,7 +45,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
-
+
diff --git a/packages/frontend/src/paths/instance/products/create/CreatedSuccessfully.tsx b/packages/frontend/src/paths/instance/products/create/CreatedSuccessfully.tsx index dc39d84..b567504 100644 --- a/packages/frontend/src/paths/instance/products/create/CreatedSuccessfully.tsx +++ b/packages/frontend/src/paths/instance/products/create/CreatedSuccessfully.tsx @@ -16,6 +16,7 @@ import { h, VNode } from "preact"; import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully"; import { Entity } from "./index"; +import emptyImage from "../../assets/empty.png"; interface Props { entity: Entity; diff --git a/packages/frontend/src/paths/instance/products/list/Table.tsx b/packages/frontend/src/paths/instance/products/list/Table.tsx index 878506d..1b4a7b3 100644 --- a/packages/frontend/src/paths/instance/products/list/Table.tsx +++ b/packages/frontend/src/paths/instance/products/list/Table.tsx @@ -28,6 +28,7 @@ import { InputNumber } from "../../../../components/form/InputNumber" import { MerchantBackend, WithId } from "../../../../declaration" import emptyImage from "../../../../assets/empty.png"; import { Translate, useTranslator } from "../../../../i18n" +import { Amounts } from "@gnu-taler/taler-util" type Entity = MerchantBackend.Products.ProductDetail & WithId @@ -35,23 +36,23 @@ interface Props { instances: Entity[]; onDelete: (id: Entity) => void; onSelect: (product: Entity) => void; - onUpdate: (id: string, data: MerchantBackend.Products.ProductPatchDetail) => void; + onUpdate: (id: string, data: MerchantBackend.Products.ProductPatchDetail) => Promise; onCreate: () => void; selected?: boolean; } export function CardTable({ instances, onCreate, onSelect, onUpdate, onDelete }: Props): VNode { const [rowSelection, rowSelectionHandler] = useState(undefined) - + const i18n = useTranslator() return

Products

- -
- + + +
@@ -71,12 +72,13 @@ interface TableProps { rowSelection: string | undefined; instances: Entity[]; onSelect: (id: Entity) => void; - onUpdate: (id: string, data: MerchantBackend.Products.ProductPatchDetail) => void; + onUpdate: (id: string, data: MerchantBackend.Products.ProductPatchDetail) => Promise; onDelete: (id: Entity) => void; rowSelectionHandler: StateUpdater; } function Table({ rowSelection, rowSelectionHandler, instances, onSelect, onUpdate, onDelete }: TableProps): VNode { + const i18n = useTranslator() return (
@@ -108,30 +110,38 @@ function Table({ rowSelection, rowSelectionHandler, instances, onSelect, onUpdat stockInfo = } + const isFree = Amounts.parseOrThrow(i.price).value === 0 + return - + {rowSelection === i.id && } @@ -144,7 +154,7 @@ function Table({ rowSelection, rowSelectionHandler, instances, onSelect, onUpdat interface FastProductUpdateFormProps { product: Entity; - onUpdate: (data: MerchantBackend.Products.ProductPatchDetail) => void; + onUpdate: (data: MerchantBackend.Products.ProductPatchDetail) => Promise; onCancel: () => void; } interface FastProductUpdate { @@ -152,9 +162,12 @@ interface FastProductUpdate { lost: number; price: string; } +interface UpdatePrice { + price: string; +} function FastProductWithInfiniteStockUpdateForm({ product, onUpdate, onCancel }: FastProductUpdateFormProps) { - const [value, valueHandler] = useState<{ price: string }>({ price: product.price }) + const [value, valueHandler] = useState({ price: product.price }) const i18n = useTranslator() return @@ -164,14 +177,12 @@ function FastProductWithInfiniteStockUpdateForm({ product, onUpdate, onCancel }:
- + })}>Confirm +
@@ -190,12 +201,6 @@ function FastProductWithManagedStockUpdateForm({ product, onUpdate, onCancel }: : undefined } - const stockUpdateDescription = errors.lost ? '' : ( - !!value.incoming || !!value.lost ? - `current stock will change from ${currentStock} to ${currentStock + value.incoming - value.lost}` : - `current stock will stay at ${currentStock}` - ) - const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined) const i18n = useTranslator() @@ -203,29 +208,20 @@ function FastProductWithManagedStockUpdateForm({ product, onUpdate, onCancel }: name="added" errors={errors} object={value} valueHandler={valueHandler as any} > name="incoming" label={i18n`Incoming`} tooltip={i18n`add more elements to the inventory`} /> name="lost" label={i18n`Lost`} tooltip={i18n`report elements lost in the inventory`} /> -
-
-
-
- {stockUpdateDescription} -
-
-
name="price" label={i18n`Price`} tooltip={i18n`new price for the product`} />
- + }>Confirm +
diff --git a/packages/frontend/src/paths/instance/products/update/UpdatePage.tsx b/packages/frontend/src/paths/instance/products/update/UpdatePage.tsx index e0a2b16..1dfca99 100644 --- a/packages/frontend/src/paths/instance/products/update/UpdatePage.tsx +++ b/packages/frontend/src/paths/instance/products/update/UpdatePage.tsx @@ -26,7 +26,7 @@ import { MerchantBackend, WithId } from "../../../../declaration"; import { useListener } from "../../../../hooks"; import { Translate } from "../../../../i18n"; -type Entity = MerchantBackend.Products.ProductDetail & { product_id: string} +type Entity = MerchantBackend.Products.ProductDetail & { product_id: string } interface Props { onUpdate: (d: Entity) => Promise; @@ -41,17 +41,30 @@ export function UpdatePage({ product, onUpdate, onBack }: Props): VNode { }) return
-
+
+
+
+ +
+
+
+ Product id:{product.product_id} +
+
+
+
+
+
+
-
+
{onBack && } Confirm
-
diff --git a/packages/frontend/src/paths/instance/reserves/create/CreatePage.tsx b/packages/frontend/src/paths/instance/reserves/create/CreatePage.tsx index 8669242..cdaf475 100644 --- a/packages/frontend/src/paths/instance/reserves/create/CreatePage.tsx +++ b/packages/frontend/src/paths/instance/reserves/create/CreatePage.tsx @@ -133,7 +133,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
-
+
    diff --git a/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx b/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx index 08942f6..06fbf20 100644 --- a/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx +++ b/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx @@ -20,22 +20,16 @@ */ import { Amounts } from "@gnu-taler/taler-util"; -import { format, isAfter } from "date-fns"; +import { format } from "date-fns"; import { Fragment, h, VNode } from "preact"; -import { useState } from "preact/hooks"; import { FormProvider } from "../../../../components/form/FormProvider"; import { Input } from "../../../../components/form/Input"; import { InputCurrency } from "../../../../components/form/InputCurrency"; import { InputDate } from "../../../../components/form/InputDate"; -import { InputDuration } from "../../../../components/form/InputDuration"; -import { InputGroup } from "../../../../components/form/InputGroup"; -import { InputLocation } from "../../../../components/form/InputLocation"; -import { NotificationCard } from "../../../../components/menu"; -import { ProductList } from "../../../../components/product/ProductList"; +import { TextField } from "../../../../components/form/TextField"; import { MerchantBackend } from "../../../../declaration"; import { useTipDetails } from "../../../../hooks/tips"; import { Translate, useTranslator } from "../../../../i18n"; -import { mergeRefunds } from "../../../../utils/amount"; type Entity = MerchantBackend.Tips.ReserveDetail; type CT = MerchantBackend.ContractTerms @@ -49,59 +43,60 @@ interface Props { export function DetailPage({ id, selected, onBack }: Props): VNode { const i18n = useTranslator() const didExchangeAckTransfer = Amounts.isNonZero(Amounts.parseOrThrow(selected.exchange_initial_amount)) - return
    - - name="creation_time" label={i18n`Created at`} readonly /> - name="expiration_time" label={i18n`Valid until`} readonly /> - name="merchant_initial_amount" label={i18n`Created balance`} readonly /> - name="exchange_url" label={i18n`Exchange URL`} readonly /> - - {didExchangeAckTransfer && - name="exchange_initial_amount" label={i18n`Exchange balance`} readonly /> - name="pickup_amount" label={i18n`Picked up`} readonly /> - name="committed_amount" label={i18n`Committed`} readonly /> - - } - name="payto_uri" label={i18n`Account address`} readonly /> - - - - {didExchangeAckTransfer ? -
    -
    -

    - - Tips -

    - -
    -
    -
    -
    - {selected.tips && selected.tips.length > 0 ?
rowSelection !== i.id && rowSelectionHandler(i.id)} style={{ cursor: 'pointer' }} > rowSelection !== i.id && rowSelectionHandler(i.id)} style={{ cursor: 'pointer' }} >{i.description} rowSelection !== i.id && rowSelectionHandler(i.id)} style={{ cursor: 'pointer' }} >{i.price} / {i.unit} rowSelection !== i.id && rowSelectionHandler(i.id)} style={{ cursor: 'pointer' }} > + {isFree ? i18n`free` : `${i.price} / ${i.unit}`} + rowSelection !== i.id && rowSelectionHandler(i.id)} style={{ cursor: 'pointer' }} >{sum(i.taxes)} rowSelection !== i.id && rowSelectionHandler(i.id)} style={{ cursor: 'pointer' }} >{difference(i.price, sum(i.taxes))} rowSelection !== i.id && rowSelectionHandler(i.id)} style={{ cursor: 'pointer' }} >{stockInfo} rowSelection !== i.id && rowSelectionHandler(i.id)} style={{ cursor: 'pointer' }} >{i.total_sold} {i.unit}
- - + + + + + +
- onUpdate(i.id, prod)} onCancel={() => rowSelectionHandler(undefined)} /> + onUpdate(i.id, prod).then(r => rowSelectionHandler(undefined))} onCancel={() => rowSelectionHandler(undefined)} />
: } - - - - : -

Now you should transfer to the exchange into the account address indicated above and the transaction must carry the subject message.

- -

For example :

- 
-        {selected.payto_uri}?message={id}&amount={selected.merchant_initial_amount}
-
- - } - -
-
-
+ return
+
+
+
+ + name="creation_time" label={i18n`Created at`} readonly /> + name="expiration_time" label={i18n`Valid until`} readonly /> + name="merchant_initial_amount" label={i18n`Created balance`} readonly /> + name="exchange_url" label={i18n`Exchange URL`} readonly > + {selected.exchange_url} + + + {didExchangeAckTransfer && + name="exchange_initial_amount" label={i18n`Exchange balance`} readonly /> + name="pickup_amount" label={i18n`Picked up`} readonly /> + name="committed_amount" label={i18n`Committed`} readonly /> + + } + name="payto_uri" label={i18n`Account address`} readonly /> + + + + {didExchangeAckTransfer ? +
+
+

+ + Tips +

+ +
+
+
+
+ {selected.tips && selected.tips.length > 0 ?
: } + + + + : +

Now you should transfer to the exchange into the account address indicated above and the transaction must carry the subject message.

+

For example :

+ 
+            {selected.payto_uri}?message={id}&amount={selected.merchant_initial_amount}
+
+ + } +
+ -
- +
} diff --git a/packages/frontend/src/paths/instance/reserves/list/Table.tsx b/packages/frontend/src/paths/instance/reserves/list/Table.tsx index c53dd2a..6bca85b 100644 --- a/packages/frontend/src/paths/instance/reserves/list/Table.tsx +++ b/packages/frontend/src/paths/instance/reserves/list/Table.tsx @@ -22,7 +22,7 @@ import { format } from "date-fns" import { Fragment, h, VNode } from "preact" import { MerchantBackend, WithId } from "../../../../declaration" -import { Translate } from "../../../../i18n" +import { Translate, useTranslator } from "../../../../i18n" type Entity = MerchantBackend.Tips.ReserveStatusEntry & WithId @@ -47,6 +47,7 @@ export function CardTable({ instances, onCreate, onSelect, onNewTip, onDelete }: return prev }, new Array>([], [])) + const i18n = useTranslator() return {withoutFunds.length > 0 &&
@@ -67,9 +68,12 @@ export function CardTable({ instances, onCreate, onSelect, onNewTip, onDelete }:

Reserves ready

- + + + +
diff --git a/packages/frontend/src/paths/instance/transfers/create/CreatePage.tsx b/packages/frontend/src/paths/instance/transfers/create/CreatePage.tsx index 748722f..861268f 100644 --- a/packages/frontend/src/paths/instance/transfers/create/CreatePage.tsx +++ b/packages/frontend/src/paths/instance/transfers/create/CreatePage.tsx @@ -77,7 +77,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
-
+
name="wtid" label={i18n`Transfer ID`} help="" tooltip={i18n`unique identifier of the wire transfer, usually 52 random characters long`} /> diff --git a/packages/frontend/src/paths/instance/transfers/list/Table.tsx b/packages/frontend/src/paths/instance/transfers/list/Table.tsx index ad7248f..3794b01 100644 --- a/packages/frontend/src/paths/instance/transfers/list/Table.tsx +++ b/packages/frontend/src/paths/instance/transfers/list/Table.tsx @@ -59,6 +59,7 @@ export function CardTable({ instances, onCreate, onUpdate, onDelete, selected, o } }, [actionQueue, selected, onUpdate]) + const i18n = useTranslator() return
@@ -72,9 +73,11 @@ export function CardTable({ instances, onCreate, onUpdate, onDelete, selected, o
- + + +
diff --git a/packages/frontend/src/paths/instance/transfers/list/index.tsx b/packages/frontend/src/paths/instance/transfers/list/index.tsx index 5486451..5effb5f 100644 --- a/packages/frontend/src/paths/instance/transfers/list/index.tsx +++ b/packages/frontend/src/paths/instance/transfers/list/index.tsx @@ -74,7 +74,7 @@ export default function ListTransfer({ onUnauthorized, onLoadError, onCreate, on return
-
+
@@ -112,7 +111,7 @@ export function UpdatePage({ onUpdate, onChangeAuth, selected, onBack }: Props):
- Instance id: {id} + Instance id: {id}
@@ -120,7 +119,7 @@ export function UpdatePage({ onUpdate, onChangeAuth, selected, onBack }: Props):

@@ -142,42 +141,25 @@ export function UpdatePage({ onUpdate, onChangeAuth, selected, onBack }: Props):
+
errors={errors} object={value} valueHandler={valueHandler} > - name="name" label={i18n`Name`} tooltip={i18n`display name of this instance`} /> - - name="payto_uris" label={i18n`Account address`} help="x-taler-bank/bank.taler:5882/blogger" /> - - name="default_max_deposit_fee" label={i18n`Default max deposit fee`} /> - - name="default_max_wire_fee" label={i18n`Default max wire fee`} /> - - name="default_wire_fee_amortization" inputType="number" label={i18n`Default wire fee amortization`} /> - - - - - - - - - - name="default_pay_delay" label={i18n`Default payment delay`} /> - - name="default_wire_transfer_delay" label={i18n`Default wire transfer delay`} /> +
- + + Confirm
+
diff --git a/packages/frontend/src/scss/main.scss b/packages/frontend/src/scss/main.scss index 08e2f79..100cadc 100644 --- a/packages/frontend/src/scss/main.scss +++ b/packages/frontend/src/scss/main.scss @@ -13,14 +13,14 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see */ - - /** + +/** * * @author Sebastian Javier Marchano (sebasjm) */ - - /* Theme style (colors & sizes) */ - @import "theme-default"; + +/* Theme style (colors & sizes) */ +@import "theme-default"; /* Core Libs & Lib configs */ @import "libs/all"; @@ -83,28 +83,28 @@ $tooltip-color: red; } .toast > .message { - white-space:pre-wrap; - opacity:80%; + white-space: pre-wrap; + opacity: 80%; } div { &.is-loading { - position: relative; - pointer-events: none; - opacity: 0.5; - &:after { - // @include loader; - position: absolute; - top: calc(50% - 2.5em); - left: calc(50% - 2.5em); - width: 5em; - height: 5em; - border-width: 0.25em; - } + position: relative; + pointer-events: none; + opacity: 0.5; + &:after { + // @include loader; + position: absolute; + top: calc(50% - 2.5em); + left: calc(50% - 2.5em); + width: 5em; + height: 5em; + border-width: 0.25em; + } } } -input[type=checkbox]:indeterminate + .check { +input[type="checkbox"]:indeterminate + .check { background: red !important; } @@ -115,7 +115,7 @@ input[type=checkbox]:indeterminate + .check { } .right-sticky .buttons { - flex-wrap: nowrap + flex-wrap: nowrap; } .table.is-striped tbody tr:not(.is-selected):nth-child(even) .right-sticky { @@ -132,13 +132,12 @@ tr:hover .right-sticky { .content-full-size { height: calc(100% - 3rem); position: absolute; - width: calc(100% - 14rem); - display:flex; + width: calc(100% - 14rem); + display: flex; } .content-full-size .column .card { min-width: 200px; - } @include touch { @@ -146,7 +145,7 @@ tr:hover .right-sticky { height: 100%; position: absolute; width: 100%; - } + } } .column.is-half { @@ -158,9 +157,21 @@ input:read-only { cursor: initial; } -span.icon[data-tooltip]:before { - z-index: 1000; - max-width: 250px; - transform: inherit; - // white-space: normal; +[data-tooltip]:before { + max-width: 15rem; + width: max-content; + text-align: left; + transition: opacity 0.1s linear 1s; + // transform: inherit !important; + white-space: pre-wrap !important; + font-weight: normal; + // position: relative; +} + +.icon[data-tooltip]:before { + transition: none; +} + +span[data-tooltip] { + border-bottom: none; } -- cgit v1.2.3