diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src')
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> + + <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> |