aboutsummaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/Transaction.tsx')
-rw-r--r--packages/taler-wallet-webextension/src/wallet/Transaction.tsx119
1 files changed, 59 insertions, 60 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index b7eb4a947..542694490 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -32,6 +32,7 @@ import {
TransactionRefund,
TransactionTip,
TransactionType,
+ TranslatedString,
WithdrawalType,
} from "@gnu-taler/taler-util";
import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
@@ -43,9 +44,8 @@ import emptyImg from "../../static/img/empty.png";
import { Amount } from "../components/Amount.js";
import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js";
import { CopyButton } from "../components/CopyButton.js";
-import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js";
+import { AlertView, ErrorAlertView } from "../components/CurrentAlerts.js";
import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError.js";
import { Kind, Part, PartCollapsible, PartPayto } from "../components/Part.js";
import { QR } from "../components/QR.js";
import { ShowFullContractTermPopup } from "../components/ShowFullContractTermPopup.js";
@@ -60,6 +60,7 @@ import {
WarningBox,
} from "../components/styled/index.js";
import { Time } from "../components/Time.js";
+import { alertFromError } from "../context/alert.js";
import { useBackendContext } from "../context/backend.js";
import { useTranslationContext } from "../context/translation.js";
import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
@@ -98,13 +99,11 @@ export function TransactionPage({
if (state.hasError) {
return (
- <LoadingError
- title={
- <i18n.Translate>
- Could not load the transaction information
- </i18n.Translate>
- }
- error={state}
+ <AlertView
+ alert={alertFromError(
+ i18n.str`Could not load transaction information`,
+ state,
+ )}
/>
);
}
@@ -199,14 +198,14 @@ export function TransactionView({
return (
<Fragment>
<section style={{ padding: 8, textAlign: "center" }}>
- <ErrorTalerOperation
- title={
- <i18n.Translate>
- There was an error trying to complete the transaction
- </i18n.Translate>
- }
- error={transaction?.error}
- />
+ {transaction?.error ? (
+ <ErrorAlertView
+ error={alertFromError(
+ i18n.str`There was an error trying to complete the transaction`,
+ transaction.error,
+ )}
+ />
+ ) : undefined}
{transaction.pending && (
<WarningBox>
<i18n.Translate>This transaction is not completed</i18n.Translate>
@@ -367,7 +366,7 @@ export function TransactionView({
</Fragment>
)}
<Part
- title={<i18n.Translate>Details</i18n.Translate>}
+ title={i18n.str`Details`}
text={
<WithdrawDetails
amount={{
@@ -420,7 +419,7 @@ export function TransactionView({
<br />
{transaction.refunds.length > 0 ? (
<Part
- title={<i18n.Translate>Refunds</i18n.Translate>}
+ title={i18n.str`Refunds`}
text={
<table>
{transaction.refunds.map((r, i) => {
@@ -462,7 +461,7 @@ export function TransactionView({
picked up.
</i18n.Translate>
<Part
- title={<i18n.Translate>Offer</i18n.Translate>}
+ title={i18n.str`Offer`}
text={<Amount value={pendingRefund} />}
kind="positive"
/>
@@ -480,17 +479,17 @@ export function TransactionView({
</InfoBox>
)}
<Part
- title={<i18n.Translate>Merchant</i18n.Translate>}
+ title={i18n.str`Merchant`}
text={<MerchantDetails merchant={transaction.info.merchant} />}
kind="neutral"
/>
<Part
- title={<i18n.Translate>Invoice ID</i18n.Translate>}
- text={transaction.info.orderId}
+ title={i18n.str`Invoice ID`}
+ text={transaction.info.orderId as TranslatedString}
kind="neutral"
/>
<Part
- title={<i18n.Translate>Details</i18n.Translate>}
+ title={i18n.str`Details`}
text={
<PurchaseDetails
price={price}
@@ -520,12 +519,12 @@ export function TransactionView({
</Header>
{payto && <PartPayto payto={payto} kind="neutral" />}
<Part
- title={<i18n.Translate>Details</i18n.Translate>}
+ title={i18n.str`Details`}
text={<DepositDetails transaction={transaction} />}
kind="neutral"
/>
<Part
- title={<i18n.Translate>Wire transfer deadline</i18n.Translate>}
+ title={i18n.str`Wire transfer deadline`}
text={
<Time
timestamp={AbsoluteTime.fromTimestamp(
@@ -557,7 +556,7 @@ export function TransactionView({
{transaction.exchangeBaseUrl}
</Header>
<Part
- title={<i18n.Translate>Details</i18n.Translate>}
+ title={i18n.str`Details`}
text={<RefreshDetails transaction={transaction} />}
/>
</TransactionTemplate>
@@ -578,12 +577,12 @@ export function TransactionView({
{transaction.merchantBaseUrl}
</Header>
{/* <Part
- title={<i18n.Translate>Merchant</i18n.Translate>}
+ title={i18n.str`Merchant`}
text={<MerchantDetails merchant={transaction.merchant} />}
kind="neutral"
/> */}
<Part
- title={<i18n.Translate>Details</i18n.Translate>}
+ title={i18n.str`Details`}
text={<TipDetails transaction={transaction} />}
/>
</TransactionTemplate>
@@ -604,12 +603,12 @@ export function TransactionView({
</Header>
<Part
- title={<i18n.Translate>Merchant</i18n.Translate>}
- text={transaction.info.merchant.name}
+ title={i18n.str`Merchant`}
+ text={transaction.info.merchant.name as TranslatedString}
kind="neutral"
/>
<Part
- title={<i18n.Translate>Original order ID</i18n.Translate>}
+ title={i18n.str`Original order ID`}
text={
<a
href={Pages.balanceTransaction({
@@ -622,12 +621,12 @@ export function TransactionView({
kind="neutral"
/>
<Part
- title={<i18n.Translate>Purchase summary</i18n.Translate>}
- text={transaction.info.summary}
+ title={i18n.str`Purchase summary`}
+ text={transaction.info.summary as TranslatedString}
kind="neutral"
/>
<Part
- title={<i18n.Translate>Details</i18n.Translate>}
+ title={i18n.str`Details`}
text={<RefundDetails transaction={transaction} />}
/>
</TransactionTemplate>
@@ -683,25 +682,25 @@ export function TransactionView({
{transaction.info.summary ? (
<Part
- title={<i18n.Translate>Subject</i18n.Translate>}
- text={transaction.info.summary}
+ title={i18n.str`Subject`}
+ text={transaction.info.summary as TranslatedString}
kind="neutral"
/>
) : undefined}
<Part
- title={<i18n.Translate>Exchange</i18n.Translate>}
- text={transaction.exchangeBaseUrl}
+ title={i18n.str`Exchange`}
+ text={transaction.exchangeBaseUrl as TranslatedString}
kind="neutral"
/>
{transaction.pending /** pending is not-pay */ && (
<Part
- title={<i18n.Translate>URI</i18n.Translate>}
+ title={i18n.str`URI`}
text={<ShowQrWithCopy text={transaction.talerUri} />}
kind="neutral"
/>
)}
<Part
- title={<i18n.Translate>Details</i18n.Translate>}
+ title={i18n.str`Details`}
text={
<InvoiceDetails
amount={{
@@ -730,18 +729,18 @@ export function TransactionView({
{transaction.info.summary ? (
<Part
- title={<i18n.Translate>Subject</i18n.Translate>}
- text={transaction.info.summary}
+ title={i18n.str`Subject`}
+ text={transaction.info.summary as TranslatedString}
kind="neutral"
/>
) : undefined}
<Part
- title={<i18n.Translate>Exchange</i18n.Translate>}
- text={transaction.exchangeBaseUrl}
+ title={i18n.str`Exchange`}
+ text={transaction.exchangeBaseUrl as TranslatedString}
kind="neutral"
/>
<Part
- title={<i18n.Translate>Details</i18n.Translate>}
+ title={i18n.str`Details`}
text={
<InvoiceDetails
amount={{
@@ -769,25 +768,25 @@ export function TransactionView({
{transaction.info.summary ? (
<Part
- title={<i18n.Translate>Subject</i18n.Translate>}
- text={transaction.info.summary}
+ title={i18n.str`Subject`}
+ text={transaction.info.summary as TranslatedString}
kind="neutral"
/>
) : undefined}
<Part
- title={<i18n.Translate>Exchange</i18n.Translate>}
- text={transaction.exchangeBaseUrl}
+ title={i18n.str`Exchange`}
+ text={transaction.exchangeBaseUrl as TranslatedString}
kind="neutral"
/>
{/* {transaction.pending && ( //pending is not-received
)} */}
<Part
- title={<i18n.Translate>URI</i18n.Translate>}
+ title={i18n.str`URI`}
text={<ShowQrWithCopy text={transaction.talerUri} />}
kind="neutral"
/>
<Part
- title={<i18n.Translate>Details</i18n.Translate>}
+ title={i18n.str`Details`}
text={
<TransferDetails
amount={{
@@ -816,18 +815,18 @@ export function TransactionView({
{transaction.info.summary ? (
<Part
- title={<i18n.Translate>Subject</i18n.Translate>}
- text={transaction.info.summary}
+ title={i18n.str`Subject`}
+ text={transaction.info.summary as TranslatedString}
kind="neutral"
/>
) : undefined}
<Part
- title={<i18n.Translate>Exchange</i18n.Translate>}
- text={transaction.exchangeBaseUrl}
+ title={i18n.str`Exchange`}
+ text={transaction.exchangeBaseUrl as TranslatedString}
kind="neutral"
/>
<Part
- title={<i18n.Translate>Details</i18n.Translate>}
+ title={i18n.str`Details`}
text={
<TransferDetails
amount={{
@@ -1245,7 +1244,7 @@ export function PurchaseDetails({
<td colSpan={2}>
<PartCollapsible
big
- title={<i18n.Translate>Products</i18n.Translate>}
+ title={i18n.str`Products`}
text={
<ListOfProducts>
{info.products?.map((p, k) => (
@@ -1274,7 +1273,7 @@ export function PurchaseDetails({
<td colSpan={2}>
<PartCollapsible
big
- title={<i18n.Translate>Delivery</i18n.Translate>}
+ title={i18n.str`Delivery`}
text={
<DeliveryDetails
date={info.delivery_date}
@@ -1508,7 +1507,7 @@ function Header({
total: AmountJson;
children: ComponentChildren;
kind: Kind;
- type: string;
+ type: TranslatedString;
}): VNode {
return (
<div