From 6787772107034033b274f09482bd8efc37317815 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 27 May 2024 11:28:22 -0300
Subject: =?UTF-8?q?dd53:=20Valid=20until=E2=80=9D=20is=20likely=20confusin?=
 =?UTF-8?q?g?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/cta/InvoicePay/views.tsx                   | 21 ++++++++++----
 .../src/cta/Payment/views.tsx                      | 32 ++++++++++++++--------
 .../src/cta/TransferPickup/views.tsx               | 22 ++++++++++-----
 3 files changed, 52 insertions(+), 23 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/cta')

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} />}
-- 
cgit v1.2.3