taler-typescript-core

commit 90104f824d81882e0e427a4b161401b0fb9800cc
parent 19fa693dd2f98f140eb1630bee34febc19aa0619
Author: Sebastian <sebasjm@taler-systems.com>
Date:   Fri,  6 Feb 2026 08:22:43 -0300

renderamount for backoffice

Diffstat:
M
packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx
 | 
1
-
M
packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx
 | 
18
+++++++++++++++---
M
packages/web-util/src/components/RenderAmount.tsx
 | 
65
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----

3 files changed, 75 insertions(+), 9 deletions(-)
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx
@@ -544,7 +544,6 @@ export function CreatePage({
                 <InputGroup
                   name="shipping"
                   label={i18n.str`Shipping and fulfillment`}
-                  initialActive
                 >
                   <InputDate
                     name="shipping.delivery_date"
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
@@ -32,6 +32,8 @@ import {
 import {
   ButtonBetterBulma,
   LocalNotificationBannerBulma,
+  RenderAmount,
+  RenderAmountBulma,
   useLocalNotificationBetter,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
@@ -161,7 +163,7 @@ function Table({
 }: TableProps): VNode {
   const { i18n } = useTranslationContext();
   const [preferences] = usePreference();
-  const { state: session, lib } = useSessionContext();
+  const { state: session, lib, config } = useSessionContext();
   const [notification, safeFunctionHandler] = useLocalNotificationBetter();
   const copyUrl = safeFunctionHandler((token: AccessToken, id: string) =>
     lib.instance.getOrderDetails(token, id),
@@ -231,14 +233,24 @@ function Table({
                     onClick={(): void => onSelect(i)}
                     style={{ cursor: "pointer" }}
                   >
-                    {i.amount}
+                    <RenderAmountBulma
+                      value={Amounts.parseOrThrow(i.amount)}
+                      specMap={config.currencies}
+                    />
                   </td>
                   {section === OrderListSection.REFUNDED ? (
                     <td
                       onClick={(): void => onSelect(i)}
                       style={{ cursor: "pointer" }}
                     >
-                      {i.refund_amount}
+                      {!i.refund_amount ? (
+                        ""
+                      ) : (
+                        <RenderAmountBulma
+                          value={Amounts.parseOrThrow(i.refund_amount)}
+                          specMap={config.currencies}
+                        />
+                      )}
                     </td>
                   ) : undefined}
                   <td
diff --git a/packages/web-util/src/components/RenderAmount.tsx b/packages/web-util/src/components/RenderAmount.tsx
@@ -1,26 +1,33 @@
-import { AmountJson, Amounts, CurrencySpecification } from "@gnu-taler/taler-util";
+import {
+  AmountJson,
+  Amounts,
+  CurrencySpecification,
+} from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 
 /**
  * Common way to render amount
- * 
+ *
  * @param value the amount to be rendered
  * @param spec currency specification
+ * @param specMap currency specification by currency name
  * @param hideSmall don't show very tiny value
  * @param negative if the value specified by amount is negative
  * @param withColor show negative as red and positive as green
  * @param withSign include a minus for negatives
- * @returns 
+ * @returns
  */
 export function RenderAmount({
   value,
   spec,
+  specMap,
   negative,
   withColor,
   withSign,
   hideSmall,
 }: {
-  spec: CurrencySpecification;
+  spec?: CurrencySpecification;
+  specMap?: Record<string, CurrencySpecification>;
   value: AmountJson;
   hideSmall?: boolean;
   negative?: boolean;
@@ -29,9 +36,13 @@ export function RenderAmount({
 }): VNode {
   const neg = !!negative; // convert to true or false
 
+  const currentSpec = spec ?? !specMap ? undefined : specMap[value.currency];
+  if (!currentSpec) {
+    throw Error("missing currency spec");
+  }
   const { currency, normal, small } = Amounts.stringifyValueWithSpec(
     value,
-    spec,
+    currentSpec,
   );
 
   return (
@@ -45,3 +56,47 @@ export function RenderAmount({
     </span>
   );
 }
+
+export function RenderAmountBulma({
+  value,
+  spec,
+  specMap,
+  negative,
+  withColor,
+  withSign,
+  hideSmall,
+}: {
+  spec?: CurrencySpecification;
+  specMap?: Record<string, CurrencySpecification>;
+  value: AmountJson;
+  hideSmall?: boolean;
+  negative?: boolean;
+  withColor?: boolean;
+  withSign?: boolean;
+}): VNode {
+  const neg = !!negative;
+
+  const currentSpec = spec ?? !specMap ? undefined : specMap[value.currency];
+  if (!currentSpec) {
+    throw Error("missing currency spec");
+  }
+
+  const { currency, normal, small } = Amounts.stringifyValueWithSpec(
+    value,
+    currentSpec,
+  );
+
+  return (
+    <span
+      data-negative={withColor ? neg : undefined}
+      style={{
+        whiteSpace: "nowrap",
+        color: withColor ? (negative ? "red" : "green") : undefined,
+      }}
+    >
+      {withSign && negative ? "- " : undefined}
+      {currency} {normal}{" "}
+      {!hideSmall && small && <sup style={{ marginLeft: -4 }}>{small}</sup>}
+    </span>
+  );
+}