new translation system

1 files changed, 16 insertions, 15 deletions

diff --git a/packages/frontend/src/components/form/InputTaxes.tsx b/packages/frontend/src/components/form/InputTaxes.tsx
index 4fe2df1..af1dddd 100644
--- a/packages/frontend/src/components/form/InputTaxes.tsx
+++ b/packages/frontend/src/components/form/InputTaxes.tsx
@@ -22,19 +22,19 @@ import { h, VNode } from "preact";
 import { useCallback, useState } from "preact/hooks";
 import * as yup from 'yup';
 import { MerchantBackend } from "../../declaration";
+import { Translate, useTranslator } from "../../i18n";
 import { TaxSchema as schema } from '../../schemas';
 import { FormErrors, FormProvider } from "./FormProvider";
 import { Input } from "./Input";
 import { InputGroup } from "./InputGroup";
-import { useField } from "./useField";
+import { InputProps, useField } from "./useField";
 
-export interface Props<T> {
-  name: keyof T;
-  readonly?: boolean;
+export interface Props<T> extends InputProps<T> {
   isValid?: (e: any) => boolean;
 }
+
 type Entity = MerchantBackend.Tax
-export function InputTaxes<T>({ name, readonly }: Props<T>): VNode {
+export function InputTaxes<T>({ name, readonly, label }: Props<keyof T>): VNode {
   const { value: taxes, onChange, } = useField<T>(name);
 
   const [value, valueHandler] = useState<Partial<Entity>>({})
@@ -47,19 +47,22 @@ export function InputTaxes<T>({ name, readonly }: Props<T>): VNode {
       valueHandler({})
     } catch (err) {
       const errors = err.inner as yup.ValidationError[]
-      const pathMessages = errors.reduce((prev, cur) => !cur.path ? prev : ({ ...prev, [cur.path]: { type: cur.type, params: cur.params, message: cur.message } }), {})
+      const pathMessages = errors.reduce((prev, cur) => !cur.path ? prev : ({ ...prev, [cur.path]: cur.message }), {})
       setErrors(pathMessages)
     }
   }, [value])
 
+  const i18n = useTranslator()
+
+  //FIXME: translating plural singular
   return (
-    <InputGroup name="tax" alternative={taxes.length > 0 && <p>this product has {taxes.length} taxes</p>}>
+    <InputGroup name="tax" label={label} alternative={taxes.length > 0 && <p>this product has {taxes.length} taxes</p>}>
       <FormProvider<Entity> name="tax" errors={errors} object={value} valueHandler={valueHandler} >
 
         <div class="field is-horizontal">
           <div class="field-label is-normal" />
           <div class="field-body" style={{ display: 'block' }}>
-            {taxes.map((v: any, i:number) => <div key={i} class="tags has-addons mt-3 mb-0 mr-3" style={{ flexWrap: 'nowrap' }}>
+            {taxes.map((v: any, i: number) => <div key={i} class="tags has-addons mt-3 mb-0 mr-3" style={{ flexWrap: 'nowrap' }}>
               <span class="tag is-medium is-info mb-0" style={{ maxWidth: '90%' }}><b>{v.tax}</b>: {v.name}</span>
               <a class="tag is-medium is-danger is-delete mb-0" onClick={() => {
                 onChange(taxes.filter((f: any) => f !== v) as any);
@@ -67,21 +70,19 @@ export function InputTaxes<T>({ name, readonly }: Props<T>): VNode {
               }} />
             </div>
             )}
-            {!taxes.length && 'this product has no taxes'}
+            {!taxes.length && i18n`this product has no taxes`}
           </div>
         </div>
 
-        <Input<Entity> name="tax" >
-          currency and value separated with colon <b>USD:2.3</b>
+        <Input<Entity> name="tax" label={i18n`Amount`}>
+          <Translate>currency and value separated with colon</Translate> <b>USD:2.3</b>
         </Input>
 
-        <Input<Entity> name="name" />
+        <Input<Entity> name="name" label={i18n`Name`} />
 
         <div class="buttons is-right mt-5">
-          <button class="button is-info" onClick={submit}>add</button>
+          <button class="button is-info" onClick={submit}><Translate>Add</Translate></button>
         </div>
-
-
       </FormProvider>
     </InputGroup>
   )