/* This file is part of GNU Taler (C) 2022 Taler Systems S.A. GNU Taler is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3, or (at your option) any later version. GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see */ import { PaytoUri, stringifyPaytoUri, TranslatedString, } from "@gnu-taler/taler-util"; import { styled } from "@linaria/react"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { ExtraLargeText, LargeText, SmallBoldText, SmallLightText, } from "./styled/index.js"; export type Kind = "positive" | "negative" | "neutral"; interface Props { title: VNode | TranslatedString; text: VNode | TranslatedString; kind?: Kind; big?: boolean; showSign?: boolean; } export function Part({ text, title, kind = "neutral", big, showSign, }: Props): VNode { const Text = big ? ExtraLargeText : LargeText; return (
{title} {!showSign || kind === "neutral" ? undefined : kind === "positive" ? "+" : "-"} {text}
); } const CollasibleBox = styled.div` border: 1px solid black; border-radius: 0.25em; display: flex; vertical-align: middle; justify-content: space-between; flex-direction: column; /* margin: 0.5em; */ padding: 0.5em; /* margin: 1em; */ /* width: 100%; */ /* color: #721c24; */ /* background: #f8d7da; */ & > div { display: flex; justify-content: space-between; div { margin-top: auto; margin-bottom: auto; } & > button { align-self: center; font-size: 100%; padding: 0; height: 28px; width: 28px; } } `; 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; const [collapsed, setCollapsed] = useState(true); return (
{title}
{/* */} {!collapsed &&
{text}
}
); } interface PropsPayto { payto: PaytoUri; kind: Kind; big?: boolean; } export function PartPayto({ payto, kind, big }: PropsPayto): VNode { const Text = big ? ExtraLargeText : LargeText; let text: VNode | undefined = undefined; let title = ""; const { i18n } = useTranslationContext(); if (payto.isKnown) { if (payto.targetType === "x-taler-bank") { text = ( {payto.account} ); title = i18n.str`Bank account`; } else if (payto.targetType === "bitcoin") { text = payto.segwitAddrs && payto.segwitAddrs.length > 0 ? ( ) : ( {payto.targetPath} ); title = i18n.str`Bitcoin address`; } else if (payto.targetType === "iban") { if (payto.bic) { text = ( {payto.bic}/{payto.iban} ); title = i18n.str`BIC/IBAN`; } else { text = {payto.iban}; title = i18n.str`IBAN`; } } } if (!text) { text = {stringifyPaytoUri(payto)}; title = "Payto URI"; } return (
{title} {text}
); }