Merge branch 'master' into age-withdraw

14 files changed, 66 insertions, 141 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx
index c29a6fa6e..9f80719a1 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx
@@ -21,7 +21,7 @@
 
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { format } from "date-fns";
-import { h, VNode } from "preact";
+import { h, VNode, Fragment } from "preact";
 import { useState } from "preact/hooks";
 import { DatePicker } from "../../../../components/picker/DatePicker.js";
 import { MerchantBackend, WithId } from "../../../../declaration.js";
@@ -29,8 +29,6 @@ import { CardTable } from "./Table.js";
 import { dateFormatForSettings, useSettings } from "../../../../hooks/useSettings.js";
 
 export interface ListPageProps {
-  errorOrderId: string | undefined;
-
   onShowAll: () => void;
   onShowNotPaid: () => void;
   onShowPaid: () => void;
@@ -56,17 +54,18 @@ export interface ListPageProps {
 
   onSelectOrder: (o: MerchantBackend.Orders.OrderHistoryEntry & WithId) => void;
   onRefundOrder: (o: MerchantBackend.Orders.OrderHistoryEntry & WithId) => void;
-  onSearchOrderById: (id: string) => void;
   onCreate: () => void;
 }
 
 export function ListPage({
+  hasMoreAfter,
+  hasMoreBefore,
+  onLoadMoreAfter,
+  onLoadMoreBefore,
   orders,
-  errorOrderId,
   isAllActive,
   onSelectOrder,
   onRefundOrder,
-  onSearchOrderById,
   jumpToDate,
   onCopyURL,
   onShowAll,
@@ -86,42 +85,10 @@ export function ListPage({
   const { i18n } = useTranslationContext();
   const dateTooltip = i18n.str`select date to show nearby orders`;
   const [pickDate, setPickDate] = useState(false);
-  const [orderId, setOrderId] = useState<string>("");
   const [settings] = useSettings();
 
   return (
-    <section class="section is-main-section">
-      <div class="level">
-        <div class="level-left">
-          <div class="level-item">
-            <div class="field has-addons">
-              <div class="control">
-                <input
-                  class={errorOrderId ? "input is-danger" : "input"}
-                  type="text"
-                  value={orderId}
-                  onChange={(e) => setOrderId(e.currentTarget.value)}
-                  placeholder={i18n.str`order id`}
-                />
-                {errorOrderId && <p class="help is-danger">{errorOrderId}</p>}
-              </div>
-              <span
-                class="has-tooltip-bottom"
-                data-tooltip={i18n.str`jump to order with the given order ID`}
-              >
-                <button
-                  class="button"
-                  onClick={(e) => onSearchOrderById(orderId)}
-                >
-                  <span class="icon">
-                    <i class="mdi mdi-arrow-right" />
-                  </span>
-                </button>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
+    <Fragment>
       <div class="columns">
         <div class="column is-two-thirds">
           <div class="tabs" style={{ overflow: "inherit" }}>
@@ -249,7 +216,11 @@ export function ListPage({
         onCopyURL={onCopyURL}
         onSelect={onSelectOrder}
         onRefund={onRefundOrder}
+        hasMoreAfter={hasMoreAfter}
+        hasMoreBefore={hasMoreBefore}
+        onLoadMoreAfter={onLoadMoreAfter}
+        onLoadMoreBefore={onLoadMoreBefore}
       />
-    </section>
+    </Fragment>
   );
 }
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx
index 608c9b20d..b2806bb79 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx
@@ -140,10 +140,9 @@ function Table({
   const [settings] = useSettings();
   return (
     <div class="table-container">
-      {onLoadMoreBefore && (
+      {hasMoreBefore && (
         <button
           class="button is-fullwidth"
-          disabled={!hasMoreBefore}
           onClick={onLoadMoreBefore}
         >
           <i18n.Translate>load newer orders</i18n.Translate>
@@ -218,10 +217,9 @@ function Table({
           })}
         </tbody>
       </table>
-      {onLoadMoreAfter && (
+      {hasMoreAfter && (
         <button
           class="button is-fullwidth"
-          disabled={!hasMoreAfter}
           onClick={onLoadMoreAfter}
         >
           <i18n.Translate>load older orders</i18n.Translate>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx
index 48f77e3d3..34c7d348a 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx
@@ -39,6 +39,7 @@ import { Notification } from "../../../../utils/types.js";
 import { ListPage } from "./ListPage.js";
 import { RefundModal } from "./Table.js";
 import { HttpStatusCode } from "@gnu-taler/taler-util";
+import { JumpToElementById } from "../../../../components/form/JumpToElementById.js";
 
 interface Props {
   onUnauthorized: () => VNode;
@@ -69,9 +70,6 @@ export default function OrderList({
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
 
   const { i18n } = useTranslationContext();
-  const [errorOrderId, setErrorOrderId] = useState<string | undefined>(
-    undefined,
-  );
 
   if (result.loading) return <Loading />;
   if (!result.ok) {
@@ -100,24 +98,17 @@ export default function OrderList({
       ? "is-active"
       : "";
 
-  async function testIfOrderExistAndSelect(orderId: string): Promise<void> {
-    if (!orderId) {
-      setErrorOrderId(i18n.str`Enter an order id`);
-      return;
-    }
-    try {
-      await getPaymentURL(orderId);
-      onSelect(orderId);
-      setErrorOrderId(undefined);
-    } catch {
-      setErrorOrderId(i18n.str`order not found`);
-    }
-  }
-
   return (
-    <Fragment>
+    <section class="section is-main-section">
       <NotificationCard notification={notif} />
 
+      <JumpToElementById
+        testIfExist={getPaymentURL} 
+        onSelect={onSelect}
+        description={i18n.str`jump to order with the given product ID`}
+        palceholder={i18n.str`order id`}
+      />
+
       <ListPage
         orders={result.data.orders.map((o) => ({ ...o, id: o.order_id }))}
         onLoadMoreBefore={result.loadMorePrev}
@@ -126,7 +117,6 @@ export default function OrderList({
         hasMoreAfter={!result.isReachingEnd}
         onSelectOrder={(order) => onSelect(order.id)}
         onRefundOrder={(value) => setOrderToBeRefunded(value)}
-        errorOrderId={errorOrderId}
         isAllActive={isAllActive}
         isNotWiredActive={isNotWiredActive}
         isWiredActive={isWiredActive}
@@ -138,7 +128,6 @@ export default function OrderList({
           getPaymentURL(id).then((resp) => copyToClipboard(resp.data))
         }
         onCreate={onCreate}
-        onSearchOrderById={testIfOrderExistAndSelect}
         onSelectDate={setNewDate}
         onShowAll={() => setFilter({})}
         onShowNotPaid={() => setFilter({ paid: "no" })}
@@ -190,7 +179,7 @@ export default function OrderList({
           }}
         />
       )}
-    </Fragment>
+    </section>
   );
 }
 
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 db73217ed..275f855cb 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
@@ -244,7 +244,10 @@ function Table({
                     }
                     style={{ cursor: "pointer" }}
                   >
+                    <span style={{"whiteSpace":"nowrap"}}>
+
                     {i.total_sold} {i.unit}
+                    </span>
                   </td>
                   <td class="is-actions-cell right-sticky">
                     <div class="buttons is-right">
@@ -341,7 +344,7 @@ function FastProductWithInfiniteStockUpdateForm({
 
         <div class="buttons mt-5">
 
-          <button class="button " onClick={onCancel}>
+          <button class="button mt-5" onClick={onCancel}>
             <i18n.Translate>Clone</i18n.Translate>
           </button>
         </div>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
index 274a7c2ea..942b5d0ac 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
@@ -37,6 +37,7 @@ import { Notification } from "../../../../utils/types.js";
 import { CardTable } from "./Table.js";
 import { HttpStatusCode } from "@gnu-taler/taler-util";
 import { ConfirmModal, DeleteModal } from "../../../../components/modal/index.js";
+import { JumpToElementById } from "../../../../components/form/JumpToElementById.js";
 
 interface Props {
   onUnauthorized: () => VNode;
@@ -74,60 +75,17 @@ export default function ProductList({
       return onNotFound();
     return onLoadError(result);
   }
-  const [errorId, setErrorId] = useState<string | undefined>(
-    undefined,
-  );
-
-  const [productId, setProductId] = useState<string>()
-  async function testIfProductExistAndSelect(orderId: string | undefined): Promise<void> {
-    if (!orderId) {
-      setErrorId(i18n.str`Enter a product id`);
-      return;
-    }
-    try {
-      await getProduct(orderId);
-      onSelect(orderId);
-      setErrorId(undefined);
-    } catch {
-      setErrorId(i18n.str`product not found`);
-    }
-  }
 
   return (
     <section class="section is-main-section">
       <NotificationCard notification={notif} />
 
-      <div class="level">
-        <div class="level-left">
-          <div class="level-item">
-            <div class="field has-addons">
-              <div class="control">
-                <input
-                  class={errorId ? "input is-danger" : "input"}
-                  type="text"
-                  value={productId ?? ""}
-                  onChange={(e) => setProductId(e.currentTarget.value)}
-                  placeholder={i18n.str`product id`}
-                />
-                {errorId && <p class="help is-danger">{errorId}</p>}
-              </div>
-              <span
-                class="has-tooltip-bottom"
-                data-tooltip={i18n.str`jump to product with the given product ID`}
-              >
-                <button
-                  class="button"
-                  onClick={(e) => testIfProductExistAndSelect(productId)}
-                >
-                  <span class="icon">
-                    <i class="mdi mdi-arrow-right" />
-                  </span>
-                </button>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
+      <JumpToElementById
+        testIfExist={getProduct} 
+        onSelect={onSelect}
+        description={i18n.str`jump to product with the given product ID`}
+        palceholder={i18n.str`product id`}
+      />
 
       <CardTable
         instances={result.data}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/ListPage.tsx
index ab1d5ef91..bf6062c34 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/ListPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/ListPage.tsx
@@ -49,7 +49,6 @@ export function ListPage({
 
   const { i18n } = useTranslationContext();
   return (
-    <section class="section is-main-section">
       <CardTable
         templates={templates.map((o) => ({
           ...o,
@@ -65,6 +64,5 @@ export function ListPage({
         onLoadMoreAfter={onLoadMoreAfter}
         hasMoreAfter={!onLoadMoreAfter}
       />
-    </section>
   );
 }
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.tsx
index 3bea9abe8..9fdf4ead9 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.tsx
@@ -136,11 +136,10 @@ function Table({
   const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
-      {onLoadMoreBefore && (
+      {hasMoreBefore && (
         <button
           class="button is-fullwidth"
           data-tooltip={i18n.str`load more templates before the first one`}
-          disabled={!hasMoreBefore}
           onClick={onLoadMoreBefore}
         >
           <i18n.Translate>load newer templates</i18n.Translate>
@@ -188,7 +187,7 @@ function Table({
                       data-tooltip={i18n.str`use template to create new order`}
                       onClick={() => onNewOrder(i)}
                     >
-                      New order
+                      Use template
                     </button>
                     <button
                       class="button is-info is-small has-tooltip-left"
@@ -204,11 +203,10 @@ function Table({
           })}
         </tbody>
       </table>
-      {onLoadMoreAfter && (
+      {hasMoreAfter && (
         <button
           class="button is-fullwidth"
           data-tooltip={i18n.str`load more templates after the last one`}
-          disabled={!hasMoreAfter}
           onClick={onLoadMoreAfter}
         >
           <i18n.Translate>load older templates</i18n.Translate>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx
index 3c9bb231c..b9767442f 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx
@@ -35,8 +35,9 @@ import {
 } from "../../../../hooks/templates.js";
 import { Notification } from "../../../../utils/types.js";
 import { ListPage } from "./ListPage.js";
-import { HttpStatusCode } from "@gnu-taler/taler-util";
+import { HttpStatusCode, TranslatedString } from "@gnu-taler/taler-util";
 import { ConfirmModal } from "../../../../components/modal/index.js";
+import { JumpToElementById } from "../../../../components/form/JumpToElementById.js";
 
 interface Props {
   onUnauthorized: () => VNode;
@@ -60,7 +61,7 @@ export default function ListTemplates({
   const [position, setPosition] = useState<string | undefined>(undefined);
   const { i18n } = useTranslationContext();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
-  const { deleteTemplate } = useTemplateAPI();
+  const { deleteTemplate, testTemplateExist } = useTemplateAPI();
   const result = useInstanceTemplates({ position }, (id) => setPosition(id));
   const [deleting, setDeleting] =
     useState<MerchantBackend.Template.TemplateEntry | null>(null);
@@ -81,9 +82,16 @@ export default function ListTemplates({
   }
 
   return (
-    <Fragment>
+    <section class="section is-main-section">
       <NotificationCard notification={notif} />
 
+      <JumpToElementById
+        testIfExist={testTemplateExist} 
+        onSelect={onSelect}
+        description={i18n.str`jump to template with the given template ID`}
+        palceholder={i18n.str`template id`}
+      />
+
       <ListPage
         templates={result.data.templates}
         onLoadMoreBefore={
@@ -139,6 +147,6 @@ export default function ListTemplates({
           </p>
         </ConfirmModal>
       )}
-    </Fragment>
+    </section>
   );
 }
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx
index db2533ecc..02b12c4c2 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx
@@ -73,7 +73,7 @@ export function ListPage({
           >
             <InputSelector
               name="payto_uri"
-              label={i18n.str`Address`}
+              label={i18n.str`Account URI`}
               values={accounts}
               placeholder={i18n.str`Select one account`}
               tooltip={i18n.str`filter by account address`}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx
index 1c464cbc7..b6b1cf328 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx
@@ -125,11 +125,10 @@ function Table({
   const [settings] = useSettings();
   return (
     <div class="table-container">
-      {onLoadMoreBefore && (
+      {hasMoreBefore && (
         <button
           class="button is-fullwidth"
           data-tooltip={i18n.str`load more transfers before the first one`}
-          disabled={!hasMoreBefore}
           onClick={onLoadMoreBefore}
         >
           <i18n.Translate>load newer transfers</i18n.Translate>
@@ -198,11 +197,10 @@ function Table({
           })}
         </tbody>
       </table>
-      {onLoadMoreAfter && (
+      {hasMoreAfter && (
         <button
           class="button is-fullwidth"
           data-tooltip={i18n.str`load more transfer after the last one`}
-          disabled={!hasMoreAfter}
           onClick={onLoadMoreAfter}
         >
           <i18n.Translate>load older transfers</i18n.Translate>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx
index 1bc1673ba..0fdbb9bc3 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx
@@ -21,7 +21,7 @@
 
 import { ErrorType, HttpError } from "@gnu-taler/web-util/browser";
 import { h, VNode } from "preact";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { Loading } from "../../../../components/exception/loading.js";
 import { MerchantBackend } from "../../../../declaration.js";
 import { useInstanceDetails } from "../../../../hooks/instance.js";
@@ -47,7 +47,6 @@ export default function ListTransfer({
   onCreate,
   onNotFound,
 }: Props): VNode {
-  const [form, setForm] = useState<Form>({ payto_uri: "" });
   const setFilter = (s?: "yes" | "no") => setForm({ ...form, verified: s });
 
   const [position, setPosition] = useState<string | undefined>(undefined);
@@ -56,6 +55,14 @@ export default function ListTransfer({
   const accounts = !instance.ok
     ? []
     : instance.data.accounts.map((a) => a.payto_uri);
+  const [form, setForm] = useState<Form>({ payto_uri: "" });
+
+  const shoulUseDefaultAccount = accounts.length === 1
+  useEffect(() => {
+    if (shoulUseDefaultAccount) {
+      setForm({...form, payto_uri: accounts[0]})
+    }
+  }, [shoulUseDefaultAccount])
 
   const isVerifiedTransfers = form.verified === "yes";
   const isNonVerifiedTransfers = form.verified === "no";
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx
index cebc1ade6..4e813d777 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx
@@ -118,6 +118,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
               {state.otp_algorithm && state.otp_algorithm > 0 ? (
                 <Fragment>
                   <InputWithAddon<Entity>
+                    expand
                     name="otp_key"
                     label={i18n.str`Device key`}
                     inputType={showKey ? "text" : "password"}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/validators/list/Table.tsx
index b639a6134..0c28027fe 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/validators/list/Table.tsx
@@ -126,11 +126,10 @@ function Table({
   const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
-      {onLoadMoreBefore && (
+      {hasMoreBefore && (
         <button
           class="button is-fullwidth"
           data-tooltip={i18n.str`load more devices before the first one`}
-          disabled={!hasMoreBefore}
           onClick={onLoadMoreBefore}
         >
           <i18n.Translate>load newer devices</i18n.Translate>
@@ -180,11 +179,10 @@ function Table({
           })}
         </tbody>
       </table>
-      {onLoadMoreAfter && (
+      {hasMoreAfter && (
         <button
           class="button is-fullwidth"
           data-tooltip={i18n.str`load more devices after the last one`}
-          disabled={!hasMoreAfter}
           onClick={onLoadMoreAfter}
         >
           <i18n.Translate>load older devices</i18n.Translate>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/Table.tsx
index 124ced1f1..42a179d2c 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/Table.tsx
@@ -126,11 +126,10 @@ function Table({
   const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
-      {onLoadMoreBefore && (
+      {hasMoreBefore && (
         <button
           class="button is-fullwidth"
           data-tooltip={i18n.str`load more webhooks before the first one`}
-          disabled={!hasMoreBefore}
           onClick={onLoadMoreBefore}
         >
           <i18n.Translate>load newer webhooks</i18n.Translate>
@@ -187,11 +186,10 @@ function Table({
           })}
         </tbody>
       </table>
-      {onLoadMoreAfter && (
+      {hasMoreAfter && (
         <button
           class="button is-fullwidth"
           data-tooltip={i18n.str`load more webhooks after the last one`}
-          disabled={!hasMoreAfter}
           onClick={onLoadMoreAfter}
         >
           <i18n.Translate>load older webhooks</i18n.Translate>