1 files changed, 12 insertions, 7 deletions
diff --git a/packages/frontend/src/components/product/ProductList.tsx b/packages/frontend/src/components/product/ProductList.tsx
index 104d8e2..b1486d6 100644
--- a/packages/frontend/src/components/product/ProductList.tsx
+++ b/packages/frontend/src/components/product/ProductList.tsx
@@ -17,24 +17,27 @@ import { h, VNode } from "preact"
 import { MerchantBackend } from "../../declaration"
 import { multiplyPrice } from "../../utils/amount"
 import emptyImage from "../../assets/empty.png";
+import { Translate, useTranslator } from "../../i18n";
 
 interface Props {
   list: MerchantBackend.Product[],
   actions?: {
     name: string;
+    tooltip: string;
     handler: (d: MerchantBackend.Product, index: number) => void;
   }[]
 }
 export function ProductList({ list, actions = [] }: Props): VNode {
+  const i18n = useTranslator()
   return <div class="table-container">
     <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
       <thead>
         <tr>
-          <th>image</th>
-          <th>description</th>
-          <th>quantity</th>
-          <th>unit price</th>
-          <th>total price</th>
+          <th><Translate>image</Translate></th>
+          <th><Translate>description</Translate></th>
+          <th><Translate>quantity</Translate></th>
+          <th><Translate>unit price</Translate></th>
+          <th><Translate>total price</Translate></th>
           <th />
         </tr>
       </thead>
@@ -51,9 +54,11 @@ export function ProductList({ list, actions = [] }: Props): VNode {
             <td >{entry.price}</td>
             <td >{multiplyPrice(entry.price, entry.quantity)}</td>
             <td class="is-actions-cell right-sticky">
-              {actions.map((a,i) => {
+              {actions.map((a, i) => {
                 return <div key={i} class="buttons is-right">
-                  <button class="button is-small is-danger jb-modal" type="button" onClick={() => a.handler(entry, index)}>
+                  <button class="button is-small is-danger has-tooltip-left"
+                    data-tooltip={a.tooltip}
+                    type="button" onClick={() => a.handler(entry, index)}>
                     {a.name}
                   </button>
                 </div>