1 files changed, 26 insertions, 9 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx
index 265146c01..39e2fd0c7 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx
@@ -45,6 +45,8 @@ interface Props {
   ) => Promise<void>;
   onCreate: () => void;
   selected?: boolean;
+  onLoadMoreBefore?: () => void;
+  onLoadMoreAfter?: () => void;
 }
 
 export function CardTable({
@@ -53,6 +55,8 @@ export function CardTable({
   onSelect,
   onUpdate,
   onDelete,
+  onLoadMoreAfter,
+  onLoadMoreBefore
 }: Props): VNode {
   const [rowSelection, rowSelectionHandler] = useState<string | undefined>(
     undefined,
@@ -89,6 +93,8 @@ export function CardTable({
                 onSelect={onSelect}
                 onDelete={onDelete}
                 onUpdate={onUpdate}
+                onLoadMoreAfter={onLoadMoreAfter}
+                onLoadMoreBefore={onLoadMoreBefore}
                 rowSelection={rowSelection}
                 rowSelectionHandler={rowSelectionHandler}
               />
@@ -111,6 +117,8 @@ interface TableProps {
   ) => Promise<void>;
   onDelete: (id: Entity) => void;
   rowSelectionHandler: StateUpdater<string | undefined>;
+  onLoadMoreBefore?: () => void;
+  onLoadMoreAfter?: () => void;
 }
 
 function Table({
@@ -120,11 +128,18 @@ function Table({
   onSelect,
   onUpdate,
   onDelete,
+  onLoadMoreAfter,
+  onLoadMoreBefore
 }: TableProps): VNode {
   const { i18n } = useTranslationContext();
   const [settings] = usePreference();
   return (
     <div class="table-container">
+      {onLoadMoreBefore && (
+        <button class="button is-fullwidth" onClick={onLoadMoreBefore}>
+          <i18n.Translate>load first page</i18n.Translate>
+        </button>
+      )}
       <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
         <thead>
           <tr>
@@ -283,7 +298,7 @@ function Table({
                       <FastProductUpdateForm
                         product={i}
                         onUpdate={(prod) =>
-                          onUpdate(i.id, prod).then((r) =>
+                          onUpdate(i.id, prod).then(() =>
                             rowSelectionHandler(undefined),
                           )
                         }
@@ -297,6 +312,13 @@ function Table({
           })}
         </tbody>
       </table>
+      {onLoadMoreAfter && (
+        <button class="button is-fullwidth" 
+        data-tooltip={i18n.str`load more products after the last one`}
+        onClick={onLoadMoreAfter}>
+          <i18n.Translate>load next page</i18n.Translate>
+        </button>
+      )}
     </div>
   );
 }
@@ -341,12 +363,6 @@ function FastProductWithInfiniteStockUpdateForm({
 
       <div class="buttons is-expanded">
 
-        <div class="buttons mt-5">
-
-          <button class="button mt-5" onClick={onCancel}>
-            <i18n.Translate>Clone</i18n.Translate>
-          </button>
-        </div>
         <div class="buttons is-right mt-5">
           <button class="button" onClick={onCancel}>
             <i18n.Translate>Cancel</i18n.Translate>
@@ -396,7 +412,7 @@ function FastProductWithManagedStockUpdateForm({
   };
 
   const hasErrors = Object.keys(errors).some(
-    (k) => (errors as any)[k] !== undefined,
+    (k) => (errors as Record<string,unknown>)[k] !== undefined,
   );
   const { i18n } = useTranslationContext();
 
@@ -490,6 +506,7 @@ function difference(price: string, tax: number) {
   ps[1] = `${p - tax}`;
   return ps.join(":");
 }
-function sum(taxes: TalerMerchantApi.Tax[]) {
+function sum(taxes: TalerMerchantApi.Tax[] | undefined) {
+  if (taxes === undefined) return 0;
   return taxes.reduce((p, c) => p + parseInt(c.tax.split(":")[1], 10), 0);
 }