/*
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 {
AbsoluteTime,
AmountJson,
Amounts,
Location,
MerchantInfo,
NotificationType,
OrderShortInfo,
parsePaytoUri,
PaytoUri,
stringifyPaytoUri,
TalerProtocolTimestamp,
Transaction,
TransactionDeposit,
TransactionRefresh,
TransactionRefund,
TransactionTip,
TransactionType,
TransactionWithdrawal,
WithdrawalType,
} from "@gnu-taler/taler-util";
import { styled } from "@linaria/react";
import { differenceInSeconds } from "date-fns";
import { ComponentChildren, Fragment, h, VNode } from "preact";
import { useEffect, useState } from "preact/hooks";
import emptyImg from "../../static/img/empty.png";
import { Amount } from "../components/Amount.js";
import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js";
import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js";
import { Loading } from "../components/Loading.js";
import { LoadingError } from "../components/LoadingError.js";
import { Kind, Part, PartCollapsible, PartPayto } from "../components/Part.js";
import { ShowFullContractTermPopup } from "../components/ShowFullContractTermPopup.js";
import {
CenteredDialog,
InfoBox,
ListOfProducts,
Overlay,
Row,
SmallLightText,
SubTitle,
WarningBox,
} from "../components/styled/index.js";
import { Time } from "../components/Time.js";
import { useTranslationContext } from "../context/translation.js";
import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
import { Button } from "../mui/Button.js";
import { Pages } from "../NavigationBar.js";
import * as wxApi from "../wxApi.js";
interface Props {
tid: string;
goToWalletHistory: (currency?: string) => Promise;
}
async function getTransaction(tid: string): Promise {
const res = await wxApi.getTransactions();
const ts = res.transactions.filter((t) => t.transactionId === tid);
if (ts.length > 1) throw Error("more than one transaction with this id");
if (ts.length === 1) {
return ts[0];
}
throw Error("no transaction found");
}
export function TransactionPage({ tid, goToWalletHistory }: Props): VNode {
const { i18n } = useTranslationContext();
const state = useAsyncAsHook(() => getTransaction(tid), [tid]);
useEffect(() => {
return wxApi.onUpdateNotification(
[NotificationType.WithdrawGroupFinished],
() => {
state?.retry();
},
);
});
if (!state) {
return ;
}
if (state.hasError) {
return (
Could not load the transaction information
}
error={state}
/>
);
}
const currency = Amounts.parse(state.response.amountRaw)?.currency;
return (
wxApi.deleteTransaction(tid).then(() => goToWalletHistory(currency))
}
onRetry={() =>
wxApi.retryTransaction(tid).then(() => goToWalletHistory(currency))
}
onRefund={(id) => wxApi.applyRefundFromPurchaseId(id).then()}
onBack={() => goToWalletHistory(currency)}
/>
);
}
export interface WalletTransactionProps {
transaction: Transaction;
onDelete: () => Promise;
onRetry: () => Promise;
onRefund: (id: string) => Promise;
onBack: () => Promise;
}
const PurchaseDetailsTable = styled.table`
width: 100%;
& > tr > td:nth-child(2n) {
text-align: right;
}
`;
export function TransactionView({
transaction,
onDelete,
onRetry,
onRefund,
}: WalletTransactionProps): VNode {
const [confirmBeforeForget, setConfirmBeforeForget] = useState(false);
async function doCheckBeforeForget(): Promise {
if (
transaction.pending &&
transaction.type === TransactionType.Withdrawal
) {
setConfirmBeforeForget(true);
} else {
onDelete();
}
}
const { i18n } = useTranslationContext();
function TransactionTemplate({
children,
}: {
children: ComponentChildren;
}): VNode {
const showRetry =
transaction.error !== undefined ||
transaction.timestamp.t_s === "never" ||
(transaction.pending &&
differenceInSeconds(new Date(), transaction.timestamp.t_s * 1000) > 10);
return (
There was an error trying to complete the transaction
}
error={transaction?.error}
/>
{transaction.pending && (
This transaction is not completed
)}
{children}
);
}
if (transaction.type === TransactionType.Withdrawal) {
const total = Amounts.parseOrThrow(transaction.amountEffective);
const chosen = Amounts.parseOrThrow(transaction.amountRaw);
return (
{confirmBeforeForget ? (
Caution!
If you have already wired money to the exchange you will loose
the chance to get the coins form it.
) : undefined}
{transaction.exchangeBaseUrl}
{!transaction.pending ? undefined : transaction.withdrawalDetails
.type === WithdrawalType.ManualTransfer ? (
Make sure to use the correct subject, otherwise the money will
not arrive in this wallet.
) : (
{!transaction.withdrawalDetails.confirmed &&
transaction.withdrawalDetails.bankConfirmationUrl ? (
The bank did not yet confirmed the wire transfer. Go to the
{` `}
bank site{" "}
and check there is no pending step.
) : undefined}
{transaction.withdrawalDetails.confirmed && (
Bank has confirmed the wire transfer. Waiting for the exchange
to send the coins
)}
)}
Details}
text={}
/>
);
}
if (transaction.type === TransactionType.Payment) {
const pendingRefund =
transaction.refundPending === undefined
? undefined
: Amounts.parseOrThrow(transaction.refundPending);
const price = {
raw: Amounts.parseOrThrow(transaction.amountRaw),
effective: Amounts.parseOrThrow(transaction.amountEffective),
};
const refund = {
raw: Amounts.parseOrThrow(transaction.totalRefundRaw),
effective: Amounts.parseOrThrow(transaction.totalRefundEffective),
};
const total = Amounts.sub(price.effective, refund.effective).amount;
return (
{transaction.info.fulfillmentUrl ? (
{transaction.info.summary}
) : (
transaction.info.summary
)}
{transaction.refunds.length > 0 ? (
Refunds}
text={
}
kind="neutral"
/>
) : undefined}
{pendingRefund !== undefined && Amounts.isNonZero(pendingRefund) && (
Merchant created a refund for this order but was not automatically
picked up.
Offer}
text={}
kind="positive"
/>