1 files changed, 47 insertions, 41 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
index 1542c8f29..b1eee85ec 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
@@ -18,21 +18,24 @@ import {
   AbsoluteTime,
   Amounts,
   MerchantContractTerms as ContractTerms,
+  Duration,
   PreparePayResultType,
   TranslatedString,
 } from "@gnu-taler/taler-util";
-import { Fragment, h, VNode } from "preact";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Fragment, VNode, h } from "preact";
 import { Part } from "../../components/Part.js";
 import { PaymentButtons } from "../../components/PaymentButtons.js";
-import { SuccessBox, WarningBox } from "../../components/styled/index.js";
+import { ShowFullContractTermPopup } from "../../components/ShowFullContractTermPopup.js";
 import { Time } from "../../components/Time.js";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import {
-  getAmountWithFee,
-  MerchantDetails,
-  PurchaseDetails,
-} from "../../wallet/Transaction.js";
+  AgeSign,
+  SuccessBox,
+  WarningBox,
+} from "../../components/styled/index.js";
+import { MerchantDetails } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
+import { EnabledBySettings } from "../../components/EnabledBySettings.js";
 
 type SupportedStates =
   | State.Ready
@@ -52,13 +55,39 @@ 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} />
 
       <section style={{ textAlign: "left" }}>
         <Part
-          title={i18n.str`Purchase`}
+          title={
+            contractTerms.minimum_age ? (
+              <Fragment>
+                <i18n.Translate>Purchase</i18n.Translate>
+                &nbsp;
+                <AgeSign
+                  size={20}
+                  title={i18n.str`This purchase is age restricted.`}
+                >
+                  {contractTerms.minimum_age}+
+                </AgeSign>
+              </Fragment>
+            ) : (
+              <i18n.Translate>Purchase</i18n.Translate>
+            )
+          }
           text={contractTerms.summary as TranslatedString}
           kind="neutral"
         />
@@ -67,44 +96,21 @@ export function BaseView(state: SupportedStates): VNode {
           text={<MerchantDetails merchant={contractTerms.merchant} />}
           kind="neutral"
         />
-        <Part
-          title={i18n.str`Details`}
-          text={
-            <PurchaseDetails
-              price={getAmountWithFee(effective, state.amount, "debit")}
-              info={{
-                ...contractTerms,
-                orderId: contractTerms.order_id,
-                contractTermsHash: "",
-                // products: contractTerms.products!,
-              }}
-              proposalId={state.payStatus.transactionId}
-            />
-          }
-          kind="neutral"
-        />
-        {contractTerms.order_id && (
-          <Part
-            title={i18n.str`Receipt`}
-            text={`#${contractTerms.order_id}` as TranslatedString}
-            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"
           />
         )}
       </section>
+      <EnabledBySettings name="advancedMode">
+        <section style={{ textAlign: "left" }}>
+          <ShowFullContractTermPopup
+            transactionId={state.payStatus.transactionId}
+          />
+        </section>
+      </EnabledBySettings>
       <PaymentButtons
         amount={effective}
         payStatus={state.payStatus}