/*
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,
ExtendedStatus,
Location,
MerchantInfo,
NotificationType,
OrderShortInfo,
parsePaytoUri,
PaytoUri,
stringifyPaytoUri,
TalerProtocolTimestamp,
Transaction,
TransactionType,
TranslatedString,
WithdrawalType,
} from "@gnu-taler/taler-util";
import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
import { styled } from "@linaria/react";
import { differenceInSeconds, isPast } 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 { CopyButton } from "../components/CopyButton.js";
import { AlertView, ErrorAlertView } from "../components/CurrentAlerts.js";
import { JustInDevMode } from "../components/JustInDevMode.js";
import { Loading } from "../components/Loading.js";
import { Kind, Part, PartCollapsible, PartPayto } from "../components/Part.js";
import { QR } from "../components/QR.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 { alertFromError, useAlertContext } from "../context/alert.js";
import { useBackendContext } from "../context/backend.js";
import { useTranslationContext } from "../context/translation.js";
import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
import { Button } from "../mui/Button.js";
import { SafeHandler } from "../mui/handlers.js";
import { Pages } from "../NavigationBar.js";
import { assertUnreachable } from "../utils/index.js";
interface Props {
tid: string;
goToWalletHistory: (currency?: string) => Promise;
}
export function TransactionPage({
tid: transactionId,
goToWalletHistory,
}: Props): VNode {
const { i18n } = useTranslationContext();
const api = useBackendContext();
const state = useAsyncAsHook(
() =>
api.wallet.call(WalletApiOperation.GetTransactionById, {
transactionId,
}),
[transactionId],
);
useEffect(() =>
api.listener.onUpdateNotification(
[NotificationType.WithdrawGroupFinished],
state?.retry,
),
);
if (!state) {
return ;
}
if (state.hasError) {
return (
);
}
const currency = Amounts.parse(state.response.amountRaw)?.currency;
return (
{
null;
}}
onCancel={async () => {
await api.wallet.call(WalletApiOperation.AbortTransaction, {
transactionId,
});
goToWalletHistory(currency);
}}
onDelete={async () => {
await api.wallet.call(WalletApiOperation.DeleteTransaction, {
transactionId,
});
goToWalletHistory(currency);
}}
onRetry={async () => {
await api.wallet.call(WalletApiOperation.RetryTransaction, {
transactionId,
});
goToWalletHistory(currency);
}}
onRefund={async (purchaseId) => {
await api.wallet.call(WalletApiOperation.ApplyRefundFromPurchaseId, {
purchaseId,
});
}}
onBack={() => goToWalletHistory(currency)}
/>
);
}
export interface WalletTransactionProps {
transaction: Transaction;
onSend: () => Promise;
onCancel: () => Promise;
onDelete: () => Promise;
onRetry: () => Promise;
onRefund: (id: string) => Promise;
onBack: () => Promise;
}
const PurchaseDetailsTable = styled.table`
width: 100%;
& > tr > td:nth-child(2n) {
text-align: right;
}
`;
type TransactionTemplateProps = Omit<
Omit,
"onBack"
> & {
children: ComponentChildren;
};
function TransactionTemplate({
transaction,
onDelete,
onRetry,
onSend,
onCancel,
children,
}: TransactionTemplateProps): VNode {
const { i18n } = useTranslationContext();
const [confirmBeforeForget, setConfirmBeforeForget] = useState(false);
const [confirmBeforeCancel, setConfirmBeforeCancel] = useState(false);
const { safely } = useAlertContext();
async function doCheckBeforeForget(): Promise {
if (
transaction.extendedStatus === ExtendedStatus.Pending &&
transaction.type === TransactionType.Withdrawal
) {
setConfirmBeforeForget(true);
} else {
onDelete();
}
}
async function doCheckBeforeCancel(): Promise {
setConfirmBeforeCancel(true);
}
const SHOWING_RETRY_THRESHOLD_SECS = 30;
const showSend = false;
const hasCancelTransactionImplemented =
transaction.type === TransactionType.Payment;
const transactionStillActive =
transaction.extendedStatus !== ExtendedStatus.Aborted &&
transaction.extendedStatus !== ExtendedStatus.Done &&
transaction.extendedStatus !== ExtendedStatus.Failed;
// show retry if there is an error in an active state, or after some time
// if it is not aborting
const showRetry =
transactionStillActive &&
(transaction.error !== undefined ||
(transaction.extendedStatus !== ExtendedStatus.Aborting &&
(transaction.timestamp.t_s === "never" ||
differenceInSeconds(new Date(), transaction.timestamp.t_s * 1000) >
SHOWING_RETRY_THRESHOLD_SECS)));
return (
{transaction?.error ? (
transaction.error.code === 7025 ? (
Follow this link to the{` `}
KYC verifier
) : (
i18n.str`No more information has been provided`
),
}}
/>
) : (
)
) : undefined}
{transaction.extendedStatus === ExtendedStatus.Pending && (
This transaction is not completed
)}
{confirmBeforeForget ? (
Caution!
If you have already wired money to the exchange you will loose
the chance to get the coins form it.
) : undefined}
{confirmBeforeCancel ? (
Caution!
Doing a cancellation while the transaction still active might
result in lost coins. Do you still want to cancel the
transaction?
) : undefined}
{children}
);
}
export function TransactionView({
transaction,
onDelete,
onRetry,
onSend,
onRefund,
onCancel,
}: WalletTransactionProps): VNode {
const { i18n } = useTranslationContext();
const { safely } = useAlertContext();
const raw = Amounts.parseOrThrow(transaction.amountRaw);
const effective = Amounts.parseOrThrow(transaction.amountEffective);
if (transaction.type === TransactionType.Withdrawal) {
return (
{transaction.exchangeBaseUrl}
{transaction.extendedStatus !==
ExtendedStatus.Pending ? undefined : transaction.withdrawalDetails
.type === WithdrawalType.ManualTransfer ? (
//manual withdrawal
Make sure to use the correct subject, otherwise the money will
not arrive in this wallet.
) : (
//integrated bank withdrawal
{!transaction.withdrawalDetails.confirmed &&
transaction.withdrawalDetails.bankConfirmationUrl ? (
Wire transfer need a confirmation. Go to the
bank site{" "}
and check wire transfer operation to exchange account is
complete.
) : undefined}
{transaction.withdrawalDetails.confirmed &&
!transaction.withdrawalDetails.reserveIsReady && (
Bank has confirmed the wire transfer. Waiting for the
exchange to send the coins
)}
{transaction.withdrawalDetails.confirmed &&
transaction.withdrawalDetails.reserveIsReady && (
Exchange is ready to send the coins, withdrawal in progress.
)}
)}
}
/>
);
}
if (transaction.type === TransactionType.Payment) {
const pendingRefund =
transaction.refundPending === undefined
? undefined
: Amounts.parseOrThrow(transaction.refundPending);
const effectiveRefund = Amounts.parseOrThrow(
transaction.totalRefundEffective,
);
return (
{transaction.info.fulfillmentUrl ? (
{transaction.info.summary}
) : (
transaction.info.summary
)}
{transaction.refunds.length > 0 ? (
{transaction.refunds.map((r, i) => {
return (
);
})}
}
kind="neutral"
/>
) : undefined}
{pendingRefund !== undefined && Amounts.isNonZero(pendingRefund) && (
Merchant created a refund for this order but was not automatically
picked up.
}
kind="positive"
/>