dd53: Valid until” is likely confusing

4 files changed, 55 insertions, 35 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
index 547d5ac9a..0d8035136 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
@@ -24,12 +24,21 @@ import {
   InvoicePaymentDetails,
 } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
+import { AbsoluteTime, Duration } from "@gnu-taler/taler-util";
 
 export function ReadyView(
   state: State.Ready | State.NoBalanceForCurrency | State.NoEnoughBalance,
 ): VNode {
   const { i18n } = useTranslationContext();
   const { summary, effective, raw, expiration, uri, status, payStatus } = state;
+
+  const inFiveMinutes = AbsoluteTime.addDuration(
+    AbsoluteTime.now(),
+    Duration.fromSpec({ minutes: 5 }),
+  );
+  const willExpireSoon =
+    expiration && AbsoluteTime.cmp(expiration, inFiveMinutes) === -1;
+
   return (
     <Fragment>
       <section style={{ textAlign: "left" }}>
@@ -42,11 +51,13 @@ export function ReadyView(
             />
           }
         />
-        <Part
-          title={i18n.str`Valid until`}
-          text={<Time timestamp={expiration} format="dd MMMM yyyy, HH:mm" />}
-          kind="neutral"
-        />
+        {willExpireSoon && (
+          <Part
+            title={i18n.str`Expires at`}
+            text={<Time timestamp={expiration} format="HH:mm" />}
+            kind="neutral"
+          />
+        )}
       </section>
       <PaymentButtons
         amount={effective}
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
index 68d161ab2..b1eee85ec 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
@@ -18,6 +18,7 @@ import {
   AbsoluteTime,
   Amounts,
   MerchantContractTerms as ContractTerms,
+  Duration,
   PreparePayResultType,
   TranslatedString,
 } from "@gnu-taler/taler-util";
@@ -54,6 +55,17 @@ export function BaseView(state: SupportedStates): VNode {
         : Amounts.zeroOfCurrency(state.amount.currency)
       : state.amount;
 
+  const expiration = !contractTerms.pay_deadline
+    ? undefined
+    : AbsoluteTime.fromProtocolTimestamp(contractTerms.pay_deadline);
+  const inFiveMinutes = AbsoluteTime.addDuration(
+    AbsoluteTime.now(),
+    Duration.fromSpec({ minutes: 5 }),
+  );
+  const willExpireSoon =
+    !expiration || expiration.t_ms === "never"
+      ? undefined
+      : AbsoluteTime.cmp(expiration, inFiveMinutes) === -1;
   return (
     <Fragment>
       <ShowImportantMessage state={state} />
@@ -65,7 +77,12 @@ export function BaseView(state: SupportedStates): VNode {
               <Fragment>
                 <i18n.Translate>Purchase</i18n.Translate>
                 &nbsp;
-                <AgeSign size={20} title={i18n.str`This purchase is age restricted.`}>{contractTerms.minimum_age}+</AgeSign>
+                <AgeSign
+                  size={20}
+                  title={i18n.str`This purchase is age restricted.`}
+                >
+                  {contractTerms.minimum_age}+
+                </AgeSign>
               </Fragment>
             ) : (
               <i18n.Translate>Purchase</i18n.Translate>
@@ -79,17 +96,10 @@ export function BaseView(state: SupportedStates): VNode {
           text={<MerchantDetails merchant={contractTerms.merchant} />}
           kind="neutral"
         />
-        {contractTerms.pay_deadline && (
+        {willExpireSoon && (
           <Part
-            title={i18n.str`Valid until`}
-            text={
-              <Time
-                timestamp={AbsoluteTime.fromProtocolTimestamp(
-                  contractTerms.pay_deadline,
-                )}
-                format="dd MMMM yyyy, HH:mm"
-              />
-            }
+            title={i18n.str`Expires at`}
+            text={<Time timestamp={expiration} format="HH:mm" />}
             kind="neutral"
           />
         )}
diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx b/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
index caa1b485a..e82c4fbd2 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
@@ -26,6 +26,7 @@ import {
 } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
 import { TermsOfService } from "../../components/TermsOfService/index.js";
+import { AbsoluteTime, Duration } from "@gnu-taler/taler-util";
 
 export function ReadyView({
   accept,
@@ -36,6 +37,12 @@ export function ReadyView({
   raw,
 }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
+  const inFiveMinutes = AbsoluteTime.addDuration(
+    AbsoluteTime.now(),
+    Duration.fromSpec({ minutes: 5 }),
+  );
+  const willExpireSoon =
+    expiration && AbsoluteTime.cmp(expiration, inFiveMinutes) === -1;
   return (
     <Fragment>
       <section style={{ textAlign: "left" }}>
@@ -49,15 +56,16 @@ export function ReadyView({
             />
           }
         />
-
-        <Part
-          title={i18n.str`Valid until`}
-          text={<Time timestamp={expiration} format="dd MMMM yyyy, HH:mm" />}
-          kind="neutral"
-        />
+        {willExpireSoon && (
+          <Part
+            title={i18n.str`Expires at`}
+            text={<Time timestamp={expiration} format="HH:mm" />}
+            kind="neutral"
+          />
+        )}
       </section>
       <section>
-        <TermsOfService key="terms" exchangeUrl={exchangeBaseUrl} >
+        <TermsOfService key="terms" exchangeUrl={exchangeBaseUrl}>
           <Button variant="contained" color="success" onClick={accept.onClick}>
             <i18n.Translate>
               Receive &nbsp; {<Amount value={effective} />}
diff --git a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
index 7b6ac8895..8f23c0685 100644
--- a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
@@ -17,13 +17,12 @@
 import {
   AbsoluteTime,
   Amounts,
-  CoinDumpJson,
   CoinStatus,
   ExchangeTosStatus,
   LogLevel,
   NotificationType,
   ScopeType,
-  stringifyWithdrawExchange,
+  stringifyWithdrawExchange
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
@@ -52,7 +51,6 @@ import { Grid } from "../mui/Grid.js";
 import { Paper } from "../mui/Paper.js";
 import { TextField } from "../mui/TextField.js";
 
-type CoinsInfo = CoinDumpJson["coins"];
 type CalculatedCoinfInfo = {
   // ageKeysCount: number | undefined;
   denom_value: number;
@@ -68,15 +66,7 @@ type SplitedCoinInfo = {
   usable: CalculatedCoinfInfo[];
 };
 
-export interface Props {
-  // FIXME: Pending operations don't exist anymore.
-}
-
-function hashObjectId(o: any): string {
-  return JSON.stringify(o);
-}
-
-export function DeveloperPage({}: Props): VNode {
+export function DeveloperPage(): VNode {
   const { i18n } = useTranslationContext();
   const [downloadedDatabase, setDownloadedDatabase] = useState<
     { time: Date; content: string } | undefined
@@ -361,6 +351,7 @@ export function DeveloperPage({}: Props): VNode {
                       <a
                         href={new URL(`/keys`, e.exchangeBaseUrl).href}
                         target="_blank"
+                        rel="noreferrer" 
                       >
                         {e.exchangeBaseUrl}
                       </a>