commit a28df73419162d8b5af13b789318704f80f10d63 parent ba158c9c1671e07dd521a86abb58195fcb414cc6 Author: Sebastian <sebasjm@gmail.com> Date: Mon, 10 May 2021 11:26:43 -0300 add tooltip to fields Diffstat:
15 files changed, 79 insertions(+), 67 deletions(-)
diff --git a/DESIGN.md b/DESIGN.md @@ -98,6 +98,15 @@ Inputs should handle UI rendering and use `useField(name)` to get: * value: the current value of the object * onChange: function to update the current field +Also, every input must be ready to receive this properties + + * name: property of the form object being manipulated + * label: how the name of the property will be shown in the UI + * placeholder: optional, inplace text when there is no value yet + * readonly: default to false, will prevent change the value + * help: optional, example text below the input text to help the user + * tooltip: optional, will add a (i) with a popup to describe the field + # Custom Hooks diff --git a/packages/frontend/src/components/form/InputGroup.tsx b/packages/frontend/src/components/form/InputGroup.tsx @@ -26,10 +26,11 @@ export interface Props<T> { name: T; children: ComponentChildren; label: string; + tooltip?: string; alternative?: ComponentChildren; } -export function InputGroup<T>({ name, label, children, alternative }: Props<keyof T>): VNode { +export function InputGroup<T>({ name, label, children, tooltip, alternative }: Props<keyof T>): VNode { const [active, setActive] = useState(false); const group = useGroupField<T>(name); @@ -37,6 +38,9 @@ export function InputGroup<T>({ name, label, children, alternative }: Props<keyo <header class="card-header"> <p class={!group?.hasError ? "card-header-title" : "card-header-title has-text-danger"}> {label} + {tooltip && <span class="icon" data-tooltip={tooltip}> + <i class="mdi mdi-information" /> + </span>} </p> <button class="card-header-icon" aria-label="more options" onClick={(): void => setActive(!active)}> <span class="icon"> diff --git a/packages/frontend/src/components/form/InputSearchProduct.tsx b/packages/frontend/src/components/form/InputSearchProduct.tsx @@ -71,6 +71,7 @@ export function InputSearchProduct({ selected, onChange }: Props): VNode { <InputWithAddon<ProductSearch> name="name" label={i18n`Name`} + tooltip={i18n`search products using description or id`} addonBefore={<span class="icon" ><i class="mdi mdi-magnify" /></span>} > <div> diff --git a/packages/frontend/src/components/modal/index.tsx b/packages/frontend/src/components/modal/index.tsx @@ -121,8 +121,8 @@ export function UpdateTokenModal({ element, onCancel, onClear, onConfirm, oldTok > <p>{text}</p> <FormProvider errors={errors} object={form} valueHandler={setValue}> - <Input name="old_token" label={i18n`Old token`} /> - <Input name="new_token" label={i18n`New token`} /> + <Input name="old_token" label={i18n`Old token`} tooltip={i18n`token in currently use`} /> + <Input name="new_token" label={i18n`New token`} tooltip={i18n`next token to be used`} /> </FormProvider> <p><Translate>Clearing the auth token will mean public access to the instance</Translate></p> </ClearConfirmModal> diff --git a/packages/frontend/src/components/product/ProductForm.tsx b/packages/frontend/src/components/product/ProductForm.tsx @@ -93,16 +93,16 @@ export function ProductForm({ onSubscribe, initial, alreadyExist, }: Props) { return <div> <FormProvider<Entity> name="product" errors={errors} object={value} valueHandler={valueHandler} > - {alreadyExist ? undefined : <InputWithAddon<Entity> name="product_id" addonBefore={`${backend.url}/product/`} label={i18n`ID`} />} + {alreadyExist ? undefined : <InputWithAddon<Entity> name="product_id" addonBefore={`${backend.url}/product/`} label={i18n`ID`} tooltip={i18n`unique name identification`} />} - <InputImage<Entity> name="image" label={i18n`Image`} /> - <Input<Entity> name="description" inputType="multiline" label={i18n`Description`} /> - <Input<Entity> name="unit" label={i18n`Unit`} /> - <InputCurrency<Entity> name="price" label={i18n`Price`} /> + <InputImage<Entity> name="image" label={i18n`Image`} tooltip={i18n`photo of the product`} /> + <Input<Entity> name="description" inputType="multiline" label={i18n`Description`} tooltip={i18n`full length description`} /> + <Input<Entity> name="unit" label={i18n`Unit`} tooltip={i18n`name of the product unit`} /> + <InputCurrency<Entity> name="price" label={i18n`Price`} tooltip={i18n`amount in the current currency`} /> - <InputStock name="stock" label={i18n`Stock`} alreadyExist={alreadyExist} /> + <InputStock name="stock" label={i18n`Stock`} alreadyExist={alreadyExist} tooltip={i18n`the stock of the product can be managed or infinite`} /> - <InputTaxes<Entity> name="taxes" label={i18n`Taxes`} /> + <InputTaxes<Entity> name="taxes" label={i18n`Taxes`} tooltip={i18n`taxes for this product`} /> </FormProvider> </div> diff --git a/packages/frontend/src/i18n/index.tsx b/packages/frontend/src/i18n/index.tsx @@ -30,6 +30,7 @@ export function useTranslator() { const jed = ctx.handler return function str(stringSeq: TemplateStringsArray, ...values: any[]): string { const s = toI18nString(stringSeq); + if (!s) return s const tr = jed .translate(s) .ifPlural(1, s) diff --git a/packages/frontend/src/paths/admin/create/CreatePage.tsx b/packages/frontend/src/paths/admin/create/CreatePage.tsx @@ -82,31 +82,31 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode { <div class="column is-two-thirds"> <FormProvider<Entity> errors={errors} object={value} valueHandler={valueHandler} > - <InputWithAddon<Entity> name="id" label={i18n`ID`} addonBefore={`${backend.url}/private/instances/`} readonly={!!forceId} /> + <InputWithAddon<Entity> name="id" label={i18n`ID`} addonBefore={`${backend.url}/private/instances/`} readonly={!!forceId} tooltip={i18n`unique name identification`} /> - <Input<Entity> name="name" label={i18n`Name`} /> + <Input<Entity> name="name" label={i18n`Name`} tooltip={i18n`descriptive name`} /> - <InputSecured<Entity> name="auth_token" label={i18n`Auth token`} /> + <InputSecured<Entity> name="auth_token" label={i18n`Auth token`} tooltip={i18n`useful to prevent other to change the instance configuration`}/> - <InputPayto<Entity> name="payto_uris" label={i18n`Account address`} help="payto://x-taler-bank/bank.taler:5882/blogger" /> + <InputPayto<Entity> name="payto_uris" label={i18n`Account address`} help="x-taler-bank/bank.taler:5882/blogger" tooltip={i18n`where the money will be sent`}/> - <InputCurrency<Entity> name="default_max_deposit_fee" label={i18n`Default max deposit fee`} /> + <InputCurrency<Entity> name="default_max_deposit_fee" label={i18n`Default max deposit fee`} tooltip={i18n`max deposit fee when an order has not override it`} /> - <InputCurrency<Entity> name="default_max_wire_fee" label={i18n`Default max wire fee`} /> + <InputCurrency<Entity> name="default_max_wire_fee" label={i18n`Default max wire fee`} tooltip={i18n`max wire fee when the order has not override it`}/> - <Input<Entity> name="default_wire_fee_amortization" label={i18n`Default wire fee amortization`} /> + <Input<Entity> name="default_wire_fee_amortization" label={i18n`Default wire fee amortization`} tooltip={i18n`max wire fee amortization when the order has not override it`}/> - <InputGroup name="address" label={i18n`Address`}> + <InputGroup name="address" label={i18n`Address`} tooltip={i18n`where is the merchant physical located`}> <InputLocation name="address" /> </InputGroup> - <InputGroup name="jurisdiction" label={i18n`Jurisdiction`}> + <InputGroup name="jurisdiction" label={i18n`Jurisdiction`} tooltip={i18n`where is the merchant legal located`}> <InputLocation name="jurisdiction" /> </InputGroup> - <InputDuration<Entity> name="default_pay_delay" label={i18n`Default pay delay`} /> + <InputDuration<Entity> name="default_pay_delay" label={i18n`Default pay delay`} tooltip={i18n`max time to pay if the order doest not override it`}/> - <InputDuration<Entity> name="default_wire_transfer_delay" label={i18n`Default wire transfer delay`} /> + <InputDuration<Entity> name="default_wire_transfer_delay" label={i18n`Default wire transfer delay`} tooltip={i18n`min time to wait the transfer if the merchant doest not override it`}/> </FormProvider> diff --git a/packages/frontend/src/paths/instance/orders/create/CreatePage.tsx b/packages/frontend/src/paths/instance/orders/create/CreatePage.tsx @@ -64,8 +64,6 @@ export interface ProductMap { interface Pricing { products_price: string; - products_taxes: string; - net: string; order_price: string; summary: string; } @@ -166,12 +164,8 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { const totalPriceInventory = inventoryList.reduce((prev, cur) => sumPrices(prev, multiplyPrice(cur.product.price, cur.quantity)), `${config.currency}:0`) const totalPriceProducts = productList.reduce((prev, cur) => sumPrices(prev, multiplyPrice(cur.price, cur.quantity)), `${config.currency}:0`) - const totalTaxInventory = inventoryList.reduce((prev, cur) => sumPrices(prev, multiplyPrice(cur.product.taxes.reduce((prev, cur) => sumPrices(prev, cur.tax), `${config.currency}:0`), cur.quantity)), `${config.currency}:0`) - const totalTaxProducts = productList.reduce((prev, cur) => sumPrices(prev, multiplyPrice(cur.taxes.reduce((prev, cur) => sumPrices(prev, cur.tax), `${config.currency}:0`), cur.quantity)), `${config.currency}:0`) - const hasProducts = inventoryList.length > 0 || productList.length > 0 const totalPrice = sumPrices(totalPriceInventory, totalPriceProducts) - const totalTax = sumPrices(totalTaxInventory, totalTaxProducts) useEffect(() => { valueHandler(v => { @@ -179,13 +173,11 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { ...v, pricing: { ...v.pricing, products_price: totalPrice, - products_taxes: totalTax, order_price: totalPrice, - net: subtractPrices(totalPrice, totalTax), } }) }) - }, [hasProducts, totalPrice, totalTax]) + }, [hasProducts, totalPrice]) const discountOrRise = rate(value.pricing.order_price, totalPrice) @@ -195,11 +187,10 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { return ({ ...v, pricing: { ...v.pricing, - net: subtractPrices(v.pricing.order_price, totalTax), } }) }) - }, [value.pricing.order_price, totalTax]) + }, [value.pricing.order_price]) const details_response = useInstanceDetails() @@ -240,7 +231,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { in {inventoryList.reduce((prev, cur) => cur.quantity + prev, 0)} units, with a total price of {totalPriceInventory} </p> - }> + } tooltip={i18n`add products to the order that already exists in the inventory`}> <InventoryProductForm currentProducts={value.inventoryProducts} onAddProduct={addProductToTheInventoryList} @@ -261,7 +252,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { in {productList.reduce((prev, cur) => cur.quantity + prev, 0)} units, with a total price of {totalPriceProducts} </p> - }> + } tooltip={i18n`add products to the order`}> <NonInventoryProductFrom value={editingProduct} onAddProduct={(p) => { setEditingProduct(undefined) addNewProduct(p) @@ -283,39 +274,38 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { <FormProvider<Entity> errors={errors} object={value} valueHandler={valueHandler as any}> {hasProducts ? <Fragment> - <InputCurrency name="pricing.products_price" label={i18n`Total price`} readonly /> - <InputCurrency name="pricing.products_taxes" label={i18n`Total tax`} readonly /> + <InputCurrency name="pricing.products_price" label={i18n`Total price`} readonly tooltip={i18n`total product price added up`} /> <InputCurrency name="pricing.order_price" label={i18n`Order price`} addonAfter={value.pricing.order_price !== totalPrice && (discountOrRise < 1 ? `discount of %${Math.round((1 - discountOrRise) * 100)}` : `rise of %${Math.round((discountOrRise - 1) * 100)}`) } + tooltip={i18n`final order price`} /> - <InputCurrency name="pricing.net" label={i18n`Net`} readonly /> </Fragment> : - <InputCurrency name="pricing.order_price" label={i18n`Order price`} /> + <InputCurrency name="pricing.order_price" label={i18n`Order price`} tooltip={i18n`final order price`} /> } - <Input name="pricing.summary" inputType="multiline" label={i18n`Summary`} /> + <Input name="pricing.summary" inputType="multiline" label={i18n`Summary`} tooltip={i18n`description of what is being sell`} /> - <InputGroup name="payments" label={i18n`Payments options`}> - <InputDate name="payments.auto_refund_deadline" label={i18n`Auto refund deadline`} /> - <InputDate name="payments.refund_deadline" label={i18n`Refund deadline`} /> - <InputDate name="payments.pay_deadline" label={i18n`Pay deadline`} /> + <InputGroup name="payments" label={i18n`Payments options`} tooltip={i18n`override default payment configuration for this order`}> + <InputDate name="payments.auto_refund_deadline" label={i18n`Auto refund deadline`} tooltip={i18n`time until the order will be refunded automatically`} /> + <InputDate name="payments.refund_deadline" label={i18n`Refund deadline`} tooltip={i18n`time until the order can be refunded`} /> + <InputDate name="payments.pay_deadline" label={i18n`Pay deadline`} tooltip={i18n`time until the order can be payed`} /> - <InputDate name="payments.delivery_date" label={i18n`Delivery date`} /> - {value.payments.delivery_date && <InputGroup name="payments.delivery_location" label={i18n`Location`} > + <InputDate name="payments.delivery_date" label={i18n`Delivery date`} tooltip={i18n`when the order will be delivered, if is going to be delivered`} /> + {value.payments.delivery_date && <InputGroup name="payments.delivery_location" label={i18n`Location`} tooltip={i18n`where the order will be delivered`} > <InputLocation name="payments.delivery_location" /> </InputGroup>} <InputCurrency name="payments.max_fee" label={i18n`Max fee`} /> <InputCurrency name="payments.max_wire_fee" label={i18n`Max wire fee`} /> <Input name="payments.wire_fee_amortization" label={i18n`Wire fee amortization`} /> - <Input name="payments.fullfilment_url" label={i18n`Fullfilment url`} /> + <Input name="payments.fullfilment_url" label={i18n`Fullfilment url`} tooltip={i18n`where the user will be redirected after payed`} /> </InputGroup> - <InputGroup name="extra" label={i18n`Extra information`}> + <InputGroup name="extra" label={i18n`Extra information`} tooltip={i18n`more information for this order`}> <Input name="extra" inputType="multiline" label={`JSON value`} /> </InputGroup> </FormProvider> diff --git a/packages/frontend/src/paths/instance/orders/create/InventoryProductForm.tsx b/packages/frontend/src/paths/instance/orders/create/InventoryProductForm.tsx @@ -72,8 +72,8 @@ export function InventoryProductForm({ currentProducts, onAddProduct }: Props): } return <FormProvider<Form> errors={errors} object={state} valueHandler={setState}> - <InputSearchProduct selected={state.product} onChange={(p) => setState(v => ({ ...v, product: p }))} /> - <InputNumber<Form> name="quantity" label={i18n`Quantity`} /> + <InputSearchProduct selected={state.product} onChange={(p) => setState(v => ({ ...v, product: p }))} /> + <InputNumber<Form> name="quantity" label={i18n`Quantity`} tooltip={i18n`how many product will be added`} /> <div class="buttons is-right mt-5"> <button class="button is-success" onClick={submit}><Translate>Add</Translate></button> </div> diff --git a/packages/frontend/src/paths/instance/orders/create/NonInventoryProductForm.tsx b/packages/frontend/src/paths/instance/orders/create/NonInventoryProductForm.tsx @@ -118,12 +118,12 @@ export function ProductForm({ onSubscribe, initial }: ProductProps) { return <div> <FormProvider<NonInventoryProduct> name="product" errors={errors} object={value} valueHandler={valueHandler} > - <InputImage<NonInventoryProduct> name="image" label={i18n`Image`} /> - <Input<NonInventoryProduct> name="description" inputType="multiline" label={i18n`Description`} /> - <Input<NonInventoryProduct> name="unit" label={i18n`Unit`} /> - <InputCurrency<NonInventoryProduct> name="price" label={i18n`Price`} /> + <InputImage<NonInventoryProduct> name="image" label={i18n`Image`} tooltip={i18n`photo of the product`} /> + <Input<NonInventoryProduct> name="description" inputType="multiline" label={i18n`Description`} tooltip={i18n`full product description`}/> + <Input<NonInventoryProduct> name="unit" label={i18n`Unit`} tooltip={i18n`name of the product unit`}/> + <InputCurrency<NonInventoryProduct> name="price" label={i18n`Price`} tooltip={i18n`the amount in the current currency`}/> - <InputNumber<NonInventoryProduct> name="quantity" label={i18n`Quantity`} /> + <InputNumber<NonInventoryProduct> name="quantity" label={i18n`Quantity`} tooltip={i18n`how many products will be added`}/> <InputTaxes<NonInventoryProduct> name="taxes" label={i18n`Taxes`} /> diff --git a/packages/frontend/src/paths/instance/orders/list/Table.tsx b/packages/frontend/src/paths/instance/orders/list/Table.tsx @@ -220,11 +220,11 @@ export function RefundModal({ id, onCancel, onConfirm }: RefundModalProps): VNod </div>} {isRefundable && <FormProvider<State> errors={errors} object={form} valueHandler={(d) => setValue(d as any)}> - <InputCurrency<State> name="refund" label={i18n`Refund`}> + <InputCurrency<State> name="refund" label={i18n`Refund`} tooltip={i18n`amount to be refunded`}> <Translate>Max refundable:</Translate> {totalRefundable} </InputCurrency> - <InputSelector name="mainReason" label={i18n`Reason`} values={[i18n`duplicated`, i18n`requested by the customer`, i18n`other`]} /> - {form.mainReason && <Input<State> label={i18n`Description`} name="description" />} + <InputSelector name="mainReason" label={i18n`Reason`} values={[i18n`duplicated`, i18n`requested by the customer`, i18n`other`]} tooltip={i18n`why this order is being refunded`} /> + {form.mainReason && <Input<State> label={i18n`Description`} name="description" tooltip={i18n`more information to give context`} />} </FormProvider>} </ConfirmModal> diff --git a/packages/frontend/src/paths/instance/products/list/Table.tsx b/packages/frontend/src/paths/instance/products/list/Table.tsx @@ -159,7 +159,7 @@ function FastProductWithInfiniteStockUpdateForm({ product, onUpdate, onCancel }: return <Fragment> <FormProvider<FastProductUpdate> name="added" object={value} valueHandler={valueHandler as any} > - <InputCurrency<FastProductUpdate> name="price" label={i18n`Price`} /> + <InputCurrency<FastProductUpdate> name="price" label={i18n`Price`} tooltip={i18n`update the product with new price`} /> </FormProvider> <div class="buttons is-right mt-5"> @@ -201,8 +201,8 @@ function FastProductWithManagedStockUpdateForm({ product, onUpdate, onCancel }: return <Fragment> <FormProvider<FastProductUpdate> name="added" errors={errors} object={value} valueHandler={valueHandler as any} > - <InputNumber<FastProductUpdate> name="incoming" label={i18n`Incoming`} /> - <InputNumber<FastProductUpdate> name="lost" label={i18n`Lost`} /> + <InputNumber<FastProductUpdate> name="incoming" label={i18n`Incoming`} tooltip={i18n`add more elements into the inventory`}/> + <InputNumber<FastProductUpdate> name="lost" label={i18n`Lost`} tooltip={i18n`report elements lost in the inventory`}/> <div class="field is-horizontal"> <div class="field-label is-normal" /> <div class="field-body is-flex-grow-3"> @@ -211,7 +211,7 @@ function FastProductWithManagedStockUpdateForm({ product, onUpdate, onCancel }: </div> </div> </div> - <InputCurrency<FastProductUpdate> name="price" label={i18n`Price`} /> + <InputCurrency<FastProductUpdate> name="price" label={i18n`Price`} tooltip={i18n`new price for the product`}/> </FormProvider> <div class="buttons is-right mt-5"> diff --git a/packages/frontend/src/paths/instance/transfers/create/CreatePage.tsx b/packages/frontend/src/paths/instance/transfers/create/CreatePage.tsx @@ -61,7 +61,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { const submitForm = () => { if (hasErrors) return - onCreate({ ...state, payto_uri: 'payto://x-taler-bank/bank.taler:5882/blogger' } as any) + onCreate(state as any) } return <div> @@ -71,17 +71,19 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { <div class="column is-two-thirds"> <FormProvider object={state} valueHandler={setState} errors={errors}> - <Input<Entity> name="wtid" label={i18n`Transfer ID`} help="" /> + <Input<Entity> name="wtid" label={i18n`Transfer ID`} help="" tooltip={i18n`unique identifier of the wire transfer, usually 52 random characters long`} /> <InputWithAddon<Entity> name="payto_uri" label={i18n`Account Address`} addonBefore="payto://" toStr={(v?: string) => v ? v.substring("payto://".length) : ''} fromStr={(v: string) => !v ? '' : `payto://${v}`} + tooltip={i18n`account address where the transfer has being received`} help="x-taler-bank/bank.taler:5882/blogger" /> <Input<Entity> name="exchange_url" label={i18n`Exchange URL`} + tooltip={i18n`exchange that made the transfer`} help="http://exchange.taler:8081/" /> - <InputCurrency<Entity> name="credit_amount" label={i18n`Amount`} /> + <InputCurrency<Entity> name="credit_amount" label={i18n`Amount`} tooltip={i18n`how much money transferred into the account`}/> </FormProvider> <div class="buttons is-right mt-5"> diff --git a/packages/frontend/src/paths/instance/transfers/list/index.tsx b/packages/frontend/src/paths/instance/transfers/list/index.tsx @@ -60,10 +60,15 @@ export default function ListTransfer({ onUnauthorized, onLoadError, onCreate, on <div class="column is-6"> <FormProvider object={form} valueHandler={setForm as any}> <InputBoolean name="verified" label={i18n`Verified`} threeState + tooltip={i18n`checked will query for verified transfer, unchecked will query for unverified transfer and (-) sign will query for both`} fromBoolean={(b?: boolean) => b === undefined ? undefined : (b ? 'yes' : 'no')} toBoolean={(b?: string) => b === undefined ? undefined : (b === 'yes')} /> - <InputSelector name="payto_uri" label={i18n`Address`} values={accounts} placeholder={i18n`Select one account`} /> + <InputSelector name="payto_uri" label={i18n`Address`} + values={accounts} + placeholder={i18n`Select one account`} + tooltip={i18n`filter by account address`} + /> </FormProvider> </div> <div class="column" /> diff --git a/packages/frontend/src/paths/instance/update/UpdatePage.tsx b/packages/frontend/src/paths/instance/update/UpdatePage.tsx @@ -103,11 +103,11 @@ export function UpdatePage({ onUpdate, selected, onBack }: Props): VNode { <div class="column is-four-fifths"> <FormProvider<Entity> errors={errors} object={value} valueHandler={valueHandler} > - <Input<Entity> name="name" label={i18n`Name`} /> + <Input<Entity> name="name" label={i18n`Name`} tooltip={i18n`unique name of this instance`} /> <InputSecured<Entity> name="auth_token" label={i18n`Auth token`} /> - <InputPayto<Entity> name="payto_uris" label={i18n`Account address`} help="payto://x-taler-bank/bank.taler:5882/blogger" /> + <InputPayto<Entity> name="payto_uris" label={i18n`Account address`} help="x-taler-bank/bank.taler:5882/blogger" /> <InputCurrency<Entity> name="default_max_deposit_fee" label={i18n`Default max deposit fee`} />