fix #8855

6 files changed, 44 insertions, 13 deletions

diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx
index b95bbf3b7..2fb03308b 100644
--- a/packages/taler-wallet-webextension/src/components/Part.tsx
+++ b/packages/taler-wallet-webextension/src/components/Part.tsx
@@ -19,14 +19,15 @@ import {
   stringifyPaytoUri,
   TranslatedString,
 } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { styled } from "@linaria/react";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
+import arrowDown from "../svg/chevron-down.inline.svg";
 import {
   ExtraLargeText,
   LargeText,
-  SmallBoldText,
-  SmallLightText,
+  SmallBoldText
 } from "./styled/index.js";
 
 export type Kind = "positive" | "negative" | "neutral";
@@ -96,11 +97,8 @@ const CollasibleBox = styled.div`
     }
   }
 `;
-import arrowDown from "../svg/chevron-down.inline.svg";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
 
-export function PartCollapsible({ text, title, big, showSign }: Props): VNode {
-  const Text = big ? ExtraLargeText : LargeText;
+export function PartCollapsible({ text, title }: Props): VNode {
   const [collapsed, setCollapsed] = useState(true);
 
   return (
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 89678c74a..739b71064 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -690,6 +690,16 @@ export const SmallBoldText = styled.div`
   font-weight: bold;
 `;
 
+export const AgeSign = styled.div<{size:number}>`
+  display: inline-block;
+  border: red solid 1px;
+  border-radius: 100%;
+  width: ${({ size }: {size:number}) => (`${size}px`)};
+  height: ${({ size }: {size:number}) => (`${size}px`)};
+  line-height: ${({ size }: {size:number}) => (`${size}px`)};
+  padding: 3px;
+`;
+
 export const LargeText = styled.div`
   font-size: large;
 `;
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
index 8bbb8dac2..68d161ab2 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
@@ -27,7 +27,11 @@ import { Part } from "../../components/Part.js";
 import { PaymentButtons } from "../../components/PaymentButtons.js";
 import { ShowFullContractTermPopup } from "../../components/ShowFullContractTermPopup.js";
 import { Time } from "../../components/Time.js";
-import { SuccessBox, WarningBox } from "../../components/styled/index.js";
+import {
+  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";
@@ -56,7 +60,17 @@ export function BaseView(state: SupportedStates): VNode {
 
       <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"
         />
diff --git a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/index.ts b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/index.ts
index 80d952217..1e903fe46 100644
--- a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/index.ts
@@ -55,6 +55,7 @@ export namespace State {
     error: undefined;
     amount?: AmountFieldHandler;
     summary?: TextFieldHandler;
+    minAge: number;
     onCreate: ButtonHandler;
   }
 
diff --git a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts
index 4881f6e91..20edb98eb 100644
--- a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts
@@ -14,16 +14,16 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AmountJson, Amounts, PreparePayResult } from "@gnu-taler/taler-util";
+import { Amounts, PreparePayResult } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { AmountFieldHandler, TextFieldHandler } from "../../mui/handlers.js";
-import { Props, State } from "./index.js";
 import { RecursiveState } from "../../utils/index.js";
+import { Props, State } from "./index.js";
 
 export function useComponentState({
   talerTemplateUri,
@@ -146,6 +146,7 @@ export function useComponentState({
     return {
       status: "fill-template",
       error: undefined,
+      minAge: cfg.minimum_age ?? 0,
       amount:
         fixedAmount === undefined
           ? ({
diff --git a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/views.tsx b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/views.tsx
index 7efbb32e9..ce53c3cf9 100644
--- a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/views.tsx
@@ -14,16 +14,17 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
 import { AmountField } from "../../components/AmountField.js";
-import { Part } from "../../components/Part.js";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Button } from "../../mui/Button.js";
 import { TextField } from "../../mui/TextField.js";
 import { State } from "./index.js";
+import { AgeSign } from "../../components/styled/index.js";
 
 export function ReadyView({
   amount,
+  minAge,
   summary,
   onCreate,
 }: State.FillTemplate): VNode {
@@ -66,6 +67,12 @@ export function ReadyView({
           </p>
         )}
       </section>
+      {minAge && (
+        <section>
+          <AgeSign size={25}>{minAge}+</AgeSign>
+          <i18n.Translate>This purchase is age restricted.</i18n.Translate>
+        </section>
+      )}
       <section>
         <Button onClick={onCreate.onClick} variant="contained" color="success">
           <i18n.Translate>Review order</i18n.Translate>