2049 lines
54 KiB
TypeScript
2049 lines
54 KiB
TypeScript
/*
|
|
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 <http://www.gnu.org/licenses/>
|
|
*/
|
|
|
|
import {
|
|
AbsoluteTime,
|
|
AmountJson,
|
|
Amounts,
|
|
Location,
|
|
MerchantInfo,
|
|
NotificationType,
|
|
OrderShortInfo,
|
|
parsePaytoUri,
|
|
PaytoUri,
|
|
stringifyPaytoUri,
|
|
TalerErrorCode,
|
|
TalerPreciseTimestamp,
|
|
TalerProtocolTimestamp,
|
|
Transaction,
|
|
TransactionAction,
|
|
TransactionDeposit,
|
|
TransactionIdStr,
|
|
TransactionInternalWithdrawal,
|
|
TransactionMajorState,
|
|
TransactionMinorState,
|
|
TransactionType,
|
|
TransactionWithdrawal,
|
|
TranslatedString,
|
|
WithdrawalType,
|
|
} from "@gnu-taler/taler-util";
|
|
import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
|
|
import { useTranslationContext } from "@gnu-taler/web-util/browser";
|
|
import { styled } from "@linaria/react";
|
|
import { 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 { AlertView, ErrorAlertView } from "../components/CurrentAlerts.js";
|
|
import { EnabledBySettings } from "../components/EnabledBySettings.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,
|
|
ErrorBox,
|
|
InfoBox,
|
|
Link,
|
|
ListOfProducts,
|
|
Overlay,
|
|
Row,
|
|
SmallLightText,
|
|
SubTitle,
|
|
SvgIcon,
|
|
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 { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
|
|
import { useSettings } from "../hooks/useSettings.js";
|
|
import { Button } from "../mui/Button.js";
|
|
import { SafeHandler } from "../mui/handlers.js";
|
|
import { Pages } from "../NavigationBar.js";
|
|
import { assertUnreachable } from "../utils/index.js";
|
|
import refreshIcon from "../svg/refresh_24px.inline.svg";
|
|
import refreshIcon1 from "../svg/refresh_outlined_24px.inline.svg";
|
|
import refreshIcon2 from "../svg/refresh_rounded_24px.inline.svg";
|
|
import refreshIcon3 from "../svg/refresh_sharp_24px.inline.svg";
|
|
import refreshIcon4 from "../svg/refresh_two_tone_24px.inline.svg";
|
|
|
|
interface Props {
|
|
tid: string;
|
|
goToWalletHistory: (currency?: string) => Promise<void>;
|
|
}
|
|
|
|
export function TransactionPage({ tid, goToWalletHistory }: Props): VNode {
|
|
const transactionId = tid as TransactionIdStr; //FIXME: validate
|
|
const { i18n } = useTranslationContext();
|
|
const api = useBackendContext();
|
|
const state = useAsyncAsHook(
|
|
() =>
|
|
api.wallet.call(WalletApiOperation.GetTransactionById, {
|
|
transactionId,
|
|
}),
|
|
[transactionId],
|
|
);
|
|
|
|
useEffect(() =>
|
|
api.listener.onUpdateNotification(
|
|
[NotificationType.TransactionStateTransition],
|
|
state?.retry,
|
|
),
|
|
);
|
|
|
|
if (!state) {
|
|
return <Loading />;
|
|
}
|
|
|
|
if (state.hasError) {
|
|
return (
|
|
<ErrorAlertView
|
|
error={alertFromError(
|
|
i18n.str`Could not load transaction information`,
|
|
state,
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const currency = Amounts.parse(state.response.amountRaw)?.currency;
|
|
|
|
return (
|
|
<TransactionView
|
|
transaction={state.response}
|
|
onCancel={async () => {
|
|
await api.wallet.call(WalletApiOperation.FailTransaction, {
|
|
transactionId,
|
|
});
|
|
goToWalletHistory(currency);
|
|
}}
|
|
onSuspend={async () => {
|
|
await api.wallet.call(WalletApiOperation.SuspendTransaction, {
|
|
transactionId,
|
|
});
|
|
goToWalletHistory(currency);
|
|
}}
|
|
onResume={async () => {
|
|
await api.wallet.call(WalletApiOperation.ResumeTransaction, {
|
|
transactionId,
|
|
});
|
|
goToWalletHistory(currency);
|
|
}}
|
|
onAbort={async () => {
|
|
await api.wallet.call(WalletApiOperation.AbortTransaction, {
|
|
transactionId,
|
|
});
|
|
goToWalletHistory(currency);
|
|
}}
|
|
onRetry={async () => {
|
|
await api.wallet.call(WalletApiOperation.RetryTransaction, {
|
|
transactionId,
|
|
});
|
|
goToWalletHistory(currency);
|
|
}}
|
|
onDelete={async () => {
|
|
await api.wallet.call(WalletApiOperation.DeleteTransaction, {
|
|
transactionId,
|
|
});
|
|
goToWalletHistory(currency);
|
|
}}
|
|
onRefund={async (transactionId) => {
|
|
await api.wallet.call(WalletApiOperation.StartRefundQuery, {
|
|
transactionId,
|
|
});
|
|
}}
|
|
onBack={() => goToWalletHistory(currency)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export interface WalletTransactionProps {
|
|
transaction: Transaction;
|
|
onCancel: () => Promise<void>;
|
|
onSuspend: () => Promise<void>;
|
|
onResume: () => Promise<void>;
|
|
onAbort: () => Promise<void>;
|
|
onDelete: () => Promise<void>;
|
|
onRetry: () => Promise<void>;
|
|
onRefund: (id: TransactionIdStr) => Promise<void>;
|
|
onBack: () => Promise<void>;
|
|
}
|
|
|
|
const PurchaseDetailsTable = styled.table`
|
|
width: 100%;
|
|
|
|
& > tr > td:nth-child(2n) {
|
|
text-align: right;
|
|
}
|
|
`;
|
|
|
|
type TransactionTemplateProps = Omit<
|
|
Omit<WalletTransactionProps, "onRefund">,
|
|
"onBack"
|
|
> & {
|
|
children: ComponentChildren;
|
|
};
|
|
|
|
function TransactionTemplate({
|
|
transaction,
|
|
onDelete,
|
|
onRetry,
|
|
onAbort,
|
|
onResume,
|
|
onSuspend,
|
|
onCancel,
|
|
children,
|
|
}: TransactionTemplateProps): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
const [confirmBeforeForget, setConfirmBeforeForget] = useState(false);
|
|
const [confirmBeforeCancel, setConfirmBeforeCancel] = useState(false);
|
|
const { safely } = useAlertContext();
|
|
const [settings] = useSettings();
|
|
|
|
async function doCheckBeforeForget(): Promise<void> {
|
|
if (
|
|
transaction.txState.major === TransactionMajorState.Pending &&
|
|
transaction.type === TransactionType.Withdrawal
|
|
) {
|
|
setConfirmBeforeForget(true);
|
|
} else {
|
|
onDelete();
|
|
}
|
|
}
|
|
|
|
async function doCheckBeforeCancel(): Promise<void> {
|
|
setConfirmBeforeCancel(true);
|
|
}
|
|
|
|
const showButton = getShowButtonStates(transaction);
|
|
|
|
return (
|
|
<Fragment>
|
|
<section style={{ padding: 8, textAlign: "center" }}>
|
|
{transaction?.error &&
|
|
// FIXME: wallet core should stop sending this error on KYC
|
|
transaction.error.code !==
|
|
TalerErrorCode.WALLET_WITHDRAWAL_KYC_REQUIRED ? (
|
|
<ErrorAlertView
|
|
error={alertFromError(
|
|
i18n.str`There was an error trying to complete the transaction`,
|
|
transaction.error,
|
|
)}
|
|
/>
|
|
) : undefined}
|
|
{transaction.txState.minor === TransactionMinorState.KycRequired && (
|
|
<AlertView
|
|
alert={{
|
|
type: "warning",
|
|
message: i18n.str`KYC check required for the transaction to complete`,
|
|
description:
|
|
transaction.kycUrl && typeof transaction.kycUrl === "string" ? (
|
|
<div>
|
|
<i18n.Translate>
|
|
Follow this link to the{` `}
|
|
<a href={transaction.kycUrl}>KYC verifier</a>
|
|
</i18n.Translate>
|
|
</div>
|
|
) : (
|
|
i18n.str`No more information has been provided`
|
|
),
|
|
}}
|
|
/>
|
|
)}
|
|
{transaction.txState.minor === TransactionMinorState.AmlRequired && (
|
|
<WarningBox>
|
|
<i18n.Translate>
|
|
The transaction has been blocked since the account required an AML
|
|
check
|
|
</i18n.Translate>
|
|
</WarningBox>
|
|
)}
|
|
{transaction.txState.major === TransactionMajorState.Pending && (
|
|
<WarningBox>
|
|
<div style={{ justifyContent: "center", lineHeight: "25px" }}>
|
|
<i18n.Translate>This transaction is not completed</i18n.Translate>
|
|
<Link onClick={onRetry}>
|
|
<SvgIcon
|
|
title={i18n.str`Retry`}
|
|
dangerouslySetInnerHTML={{ __html: refreshIcon }}
|
|
color="black"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
</WarningBox>
|
|
)}
|
|
{transaction.txState.major === TransactionMajorState.Aborted && (
|
|
<InfoBox>
|
|
<i18n.Translate>This transaction was aborted</i18n.Translate>
|
|
</InfoBox>
|
|
)}
|
|
{transaction.txState.major === TransactionMajorState.Failed && (
|
|
<ErrorBox>
|
|
<i18n.Translate>This transaction failed</i18n.Translate>
|
|
</ErrorBox>
|
|
)}
|
|
{confirmBeforeForget ? (
|
|
<Overlay>
|
|
<CenteredDialog>
|
|
<header>
|
|
<i18n.Translate>Caution!</i18n.Translate>
|
|
</header>
|
|
<section>
|
|
<i18n.Translate>
|
|
If you have already wired money to the exchange you will loose
|
|
the chance to get the coins form it.
|
|
</i18n.Translate>
|
|
</section>
|
|
<footer>
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
onClick={
|
|
(async () =>
|
|
setConfirmBeforeForget(false)) as SafeHandler<void>
|
|
}
|
|
>
|
|
<i18n.Translate>Cancel</i18n.Translate>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
color="error"
|
|
onClick={safely("delete transaction", onDelete)}
|
|
>
|
|
<i18n.Translate>Confirm</i18n.Translate>
|
|
</Button>
|
|
</footer>
|
|
</CenteredDialog>
|
|
</Overlay>
|
|
) : undefined}
|
|
{confirmBeforeCancel ? (
|
|
<Overlay>
|
|
<CenteredDialog>
|
|
<header>
|
|
<i18n.Translate>Caution!</i18n.Translate>
|
|
</header>
|
|
<section>
|
|
<i18n.Translate>
|
|
Doing a cancellation while the transaction still active might
|
|
result in lost coins. Do you still want to cancel the
|
|
transaction?
|
|
</i18n.Translate>
|
|
</section>
|
|
<footer>
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
onClick={
|
|
(async () =>
|
|
setConfirmBeforeCancel(false)) as SafeHandler<void>
|
|
}
|
|
>
|
|
<i18n.Translate>No</i18n.Translate>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
color="error"
|
|
onClick={safely("cancel active transaction", onCancel)}
|
|
>
|
|
<i18n.Translate>Yes</i18n.Translate>
|
|
</Button>
|
|
</footer>
|
|
</CenteredDialog>
|
|
</Overlay>
|
|
) : undefined}
|
|
</section>
|
|
<section>{children}</section>
|
|
<footer>
|
|
<div />
|
|
<div>
|
|
{showButton.abort && (
|
|
<Button
|
|
variant="contained"
|
|
onClick={safely("abort transaction", onAbort)}
|
|
>
|
|
<i18n.Translate>Abort</i18n.Translate>
|
|
</Button>
|
|
)}
|
|
{showButton.resume && settings.suspendIndividualTransaction && (
|
|
<Button
|
|
variant="contained"
|
|
onClick={safely("resume transaction", onResume)}
|
|
>
|
|
<i18n.Translate>Resume</i18n.Translate>
|
|
</Button>
|
|
)}
|
|
{showButton.suspend && settings.suspendIndividualTransaction && (
|
|
<Button
|
|
variant="contained"
|
|
onClick={safely("suspend transaction", onSuspend)}
|
|
>
|
|
<i18n.Translate>Suspend</i18n.Translate>
|
|
</Button>
|
|
)}
|
|
{showButton.fail && (
|
|
<Button
|
|
variant="contained"
|
|
color="error"
|
|
onClick={doCheckBeforeCancel as SafeHandler<void>}
|
|
>
|
|
<i18n.Translate>Cancel</i18n.Translate>
|
|
</Button>
|
|
)}
|
|
{showButton.remove && (
|
|
<Button
|
|
variant="contained"
|
|
color="error"
|
|
onClick={doCheckBeforeForget as SafeHandler<void>}
|
|
>
|
|
<i18n.Translate>Delete</i18n.Translate>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</footer>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
export function TransactionView({
|
|
transaction,
|
|
onDelete,
|
|
onAbort,
|
|
onBack,
|
|
onResume,
|
|
onSuspend,
|
|
onRetry,
|
|
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 ||
|
|
transaction.type === TransactionType.InternalWithdrawal
|
|
) {
|
|
return (
|
|
<TransactionTemplate
|
|
transaction={transaction}
|
|
onDelete={onDelete}
|
|
onRetry={onRetry}
|
|
onAbort={onAbort}
|
|
onResume={onResume}
|
|
onSuspend={onSuspend}
|
|
onCancel={onCancel}
|
|
>
|
|
<Header
|
|
timestamp={transaction.timestamp}
|
|
type={i18n.str`Withdrawal`}
|
|
total={effective}
|
|
kind="positive"
|
|
>
|
|
{transaction.exchangeBaseUrl}
|
|
</Header>
|
|
|
|
{/**FIXME: DD37 check if this holds */}
|
|
{transaction.txState.major !==
|
|
TransactionMajorState.Pending ? undefined : transaction
|
|
.withdrawalDetails.type === WithdrawalType.ManualTransfer ? (
|
|
//manual withdrawal
|
|
<BankDetailsByPaytoType
|
|
amount={raw}
|
|
exchangeBaseUrl={transaction.exchangeBaseUrl}
|
|
subject={transaction.withdrawalDetails.reservePub}
|
|
/>
|
|
) : (
|
|
//integrated bank withdrawal
|
|
<ShowWithdrawalDetailForBankIntegrated transaction={transaction} />
|
|
)}
|
|
<Part
|
|
title={i18n.str`Details`}
|
|
text={
|
|
<WithdrawDetails
|
|
amount={getAmountWithFee(effective, raw, "credit")}
|
|
/>
|
|
}
|
|
/>
|
|
</TransactionTemplate>
|
|
);
|
|
}
|
|
|
|
if (transaction.type === TransactionType.Payment) {
|
|
const pendingRefund =
|
|
transaction.refundPending === undefined
|
|
? undefined
|
|
: Amounts.parseOrThrow(transaction.refundPending);
|
|
|
|
const effectiveRefund = Amounts.parseOrThrow(
|
|
transaction.totalRefundEffective,
|
|
);
|
|
|
|
return (
|
|
<TransactionTemplate
|
|
transaction={transaction}
|
|
onDelete={onDelete}
|
|
onAbort={onAbort}
|
|
onResume={onResume}
|
|
onSuspend={onSuspend}
|
|
onRetry={onRetry}
|
|
onCancel={onCancel}
|
|
>
|
|
<Header
|
|
timestamp={transaction.timestamp}
|
|
total={effective}
|
|
type={i18n.str`Payment`}
|
|
kind="negative"
|
|
>
|
|
{transaction.info.fulfillmentUrl ? (
|
|
<a
|
|
href={transaction.info.fulfillmentUrl}
|
|
target="_bank"
|
|
rel="noreferrer"
|
|
>
|
|
{transaction.info.summary}
|
|
</a>
|
|
) : (
|
|
transaction.info.summary
|
|
)}
|
|
</Header>
|
|
<br />
|
|
{transaction.refunds.length > 0 ? (
|
|
<Part
|
|
title={i18n.str`Refunds`}
|
|
text={
|
|
<table>
|
|
{transaction.refunds.map((r, i) => {
|
|
return (
|
|
<tr key={i}>
|
|
<td>
|
|
<i18n.Translate>
|
|
{<Amount value={r.amountEffective} />}{" "}
|
|
<a
|
|
href={Pages.balanceTransaction({
|
|
tid: r.transactionId,
|
|
})}
|
|
>
|
|
was refunded
|
|
</a>{" "}
|
|
on{" "}
|
|
{
|
|
<Time
|
|
timestamp={AbsoluteTime.fromProtocolTimestamp(
|
|
r.timestamp,
|
|
)}
|
|
format="dd MMMM yyyy"
|
|
/>
|
|
}
|
|
</i18n.Translate>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</table>
|
|
}
|
|
kind="neutral"
|
|
/>
|
|
) : undefined}
|
|
{pendingRefund !== undefined && Amounts.isNonZero(pendingRefund) && (
|
|
<InfoBox>
|
|
{transaction.refundQueryActive ? (
|
|
<i18n.Translate>Refund is in progress.</i18n.Translate>
|
|
) : (
|
|
<i18n.Translate>
|
|
Merchant created a refund for this order but was not
|
|
automatically picked up.
|
|
</i18n.Translate>
|
|
)}
|
|
<Part
|
|
title={i18n.str`Offer`}
|
|
text={<Amount value={pendingRefund} />}
|
|
kind="positive"
|
|
/>
|
|
{transaction.refundQueryActive ? undefined : (
|
|
<div>
|
|
<div />
|
|
<div>
|
|
<Button
|
|
variant="contained"
|
|
onClick={safely("refund transaction", () =>
|
|
onRefund(transaction.transactionId),
|
|
)}
|
|
>
|
|
<i18n.Translate>Accept</i18n.Translate>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</InfoBox>
|
|
)}
|
|
{transaction.posConfirmation ? (
|
|
<AlertView
|
|
alert={{
|
|
type: "info",
|
|
message: i18n.str`Confirmation code`,
|
|
description: <pre>{transaction.posConfirmation}</pre>,
|
|
}}
|
|
/>
|
|
) : undefined}
|
|
<Part
|
|
title={i18n.str`Merchant`}
|
|
text={<MerchantDetails merchant={transaction.info.merchant} />}
|
|
kind="neutral"
|
|
/>
|
|
<Part
|
|
title={i18n.str`Invoice ID`}
|
|
text={transaction.info.orderId as TranslatedString}
|
|
kind="neutral"
|
|
/>
|
|
<Part
|
|
title={i18n.str`Details`}
|
|
text={
|
|
<PurchaseDetails
|
|
price={getAmountWithFee(effective, raw, "debit")}
|
|
effectiveRefund={effectiveRefund}
|
|
info={transaction.info}
|
|
proposalId={transaction.proposalId}
|
|
/>
|
|
}
|
|
kind="neutral"
|
|
/>
|
|
</TransactionTemplate>
|
|
);
|
|
}
|
|
|
|
if (transaction.type === TransactionType.Deposit) {
|
|
const payto = parsePaytoUri(transaction.targetPaytoUri);
|
|
|
|
const wireTime = AbsoluteTime.fromProtocolTimestamp(
|
|
transaction.wireTransferDeadline,
|
|
);
|
|
const shouldBeWired = wireTime.t_ms !== "never" && isPast(wireTime.t_ms);
|
|
return (
|
|
<TransactionTemplate
|
|
transaction={transaction}
|
|
onDelete={onDelete}
|
|
onRetry={onRetry}
|
|
onAbort={onAbort}
|
|
onResume={onResume}
|
|
onSuspend={onSuspend}
|
|
onCancel={onCancel}
|
|
>
|
|
<Header
|
|
timestamp={transaction.timestamp}
|
|
type={i18n.str`Deposit`}
|
|
total={effective}
|
|
kind="negative"
|
|
>
|
|
{!payto ? transaction.targetPaytoUri : <NicePayto payto={payto} />}
|
|
</Header>
|
|
{payto && <PartPayto payto={payto} kind="neutral" />}
|
|
<Part
|
|
title={i18n.str`Details`}
|
|
text={
|
|
<DepositDetails
|
|
amount={getAmountWithFee(effective, raw, "debit")}
|
|
/>
|
|
}
|
|
kind="neutral"
|
|
/>
|
|
{!shouldBeWired ? (
|
|
<Part
|
|
title={i18n.str`Wire transfer deadline`}
|
|
text={
|
|
<Time timestamp={wireTime} format="dd MMMM yyyy 'at' HH:mm" />
|
|
}
|
|
kind="neutral"
|
|
/>
|
|
) : transaction.wireTransferProgress === 0 ? (
|
|
<AlertView
|
|
alert={{
|
|
type: "warning",
|
|
message: i18n.str`Wire transfer is not initiated`,
|
|
description: i18n.str` `,
|
|
}}
|
|
/>
|
|
) : transaction.wireTransferProgress === 100 ? (
|
|
<Fragment>
|
|
<AlertView
|
|
alert={{
|
|
type: "success",
|
|
message: i18n.str`Wire transfer completed`,
|
|
description: i18n.str` `,
|
|
}}
|
|
/>
|
|
<Part
|
|
title={i18n.str`Transfer details`}
|
|
text={
|
|
<TrackingDepositDetails
|
|
trackingState={transaction.trackingState}
|
|
/>
|
|
}
|
|
kind="neutral"
|
|
/>
|
|
</Fragment>
|
|
) : (
|
|
<AlertView
|
|
alert={{
|
|
type: "info",
|
|
message: i18n.str`Wire transfer in progress`,
|
|
description: i18n.str` `,
|
|
}}
|
|
/>
|
|
)}
|
|
</TransactionTemplate>
|
|
);
|
|
}
|
|
|
|
if (transaction.type === TransactionType.Refresh) {
|
|
return (
|
|
<TransactionTemplate
|
|
transaction={transaction}
|
|
onDelete={onDelete}
|
|
onRetry={onRetry}
|
|
onAbort={onAbort}
|
|
onResume={onResume}
|
|
onSuspend={onSuspend}
|
|
onCancel={onCancel}
|
|
>
|
|
<Header
|
|
timestamp={transaction.timestamp}
|
|
type={i18n.str`Refresh`}
|
|
total={effective}
|
|
kind="negative"
|
|
>
|
|
{"Refresh"}
|
|
</Header>
|
|
<Part
|
|
title={i18n.str`Details`}
|
|
text={
|
|
<RefreshDetails
|
|
amount={getAmountWithFee(effective, raw, "debit")}
|
|
/>
|
|
}
|
|
/>
|
|
</TransactionTemplate>
|
|
);
|
|
}
|
|
|
|
if (transaction.type === TransactionType.Reward) {
|
|
return (
|
|
<TransactionTemplate
|
|
transaction={transaction}
|
|
onDelete={onDelete}
|
|
onRetry={onRetry}
|
|
onAbort={onAbort}
|
|
onResume={onResume}
|
|
onSuspend={onSuspend}
|
|
onCancel={onCancel}
|
|
>
|
|
<Header
|
|
timestamp={transaction.timestamp}
|
|
type={i18n.str`Tip`}
|
|
total={effective}
|
|
kind="positive"
|
|
>
|
|
{transaction.merchantBaseUrl}
|
|
</Header>
|
|
{/* <Part
|
|
title={i18n.str`Merchant`}
|
|
text={<MerchantDetails merchant={transaction.merchant} />}
|
|
kind="neutral"
|
|
/> */}
|
|
<Part
|
|
title={i18n.str`Details`}
|
|
text={
|
|
<TipDetails amount={getAmountWithFee(effective, raw, "credit")} />
|
|
}
|
|
/>
|
|
</TransactionTemplate>
|
|
);
|
|
}
|
|
|
|
if (transaction.type === TransactionType.Refund) {
|
|
return (
|
|
<TransactionTemplate
|
|
transaction={transaction}
|
|
onDelete={onDelete}
|
|
onRetry={onRetry}
|
|
onAbort={onAbort}
|
|
onResume={onResume}
|
|
onSuspend={onSuspend}
|
|
onCancel={onCancel}
|
|
>
|
|
<Header
|
|
timestamp={transaction.timestamp}
|
|
type={i18n.str`Refund`}
|
|
total={effective}
|
|
kind="positive"
|
|
>
|
|
{transaction.paymentInfo ? (
|
|
<a
|
|
href={Pages.balanceTransaction({
|
|
tid: transaction.refundedTransactionId,
|
|
})}
|
|
>
|
|
{transaction.paymentInfo.summary}
|
|
</a>
|
|
) : (
|
|
<span style={{ color: "gray" }}>-- deleted --</span>
|
|
)}
|
|
</Header>
|
|
|
|
<Part
|
|
title={i18n.str`Merchant`}
|
|
text={
|
|
(transaction.paymentInfo
|
|
? transaction.paymentInfo.merchant.name
|
|
: "-- deleted --") as TranslatedString
|
|
}
|
|
kind="neutral"
|
|
/>
|
|
<Part
|
|
title={i18n.str`Purchase summary`}
|
|
text={
|
|
(transaction.paymentInfo
|
|
? transaction.paymentInfo.summary
|
|
: "-- deleted --") as TranslatedString
|
|
}
|
|
kind="neutral"
|
|
/>
|
|
<Part
|
|
title={i18n.str`Details`}
|
|
text={
|
|
<RefundDetails
|
|
amount={getAmountWithFee(effective, raw, "credit")}
|
|
/>
|
|
}
|
|
/>
|
|
</TransactionTemplate>
|
|
);
|
|
}
|
|
|
|
if (transaction.type === TransactionType.PeerPullCredit) {
|
|
return (
|
|
<TransactionTemplate
|
|
transaction={transaction}
|
|
onDelete={onDelete}
|
|
onRetry={onRetry}
|
|
onAbort={onAbort}
|
|
onResume={onResume}
|
|
onSuspend={onSuspend}
|
|
onCancel={onCancel}
|
|
>
|
|
<Header
|
|
timestamp={transaction.timestamp}
|
|
type={i18n.str`Credit`}
|
|
total={effective}
|
|
kind="positive"
|
|
>
|
|
<i18n.Translate>Invoice</i18n.Translate>
|
|
</Header>
|
|
|
|
{transaction.info.summary ? (
|
|
<Part
|
|
title={i18n.str`Subject`}
|
|
text={transaction.info.summary as TranslatedString}
|
|
kind="neutral"
|
|
/>
|
|
) : undefined}
|
|
<Part
|
|
title={i18n.str`Exchange`}
|
|
text={transaction.exchangeBaseUrl as TranslatedString}
|
|
kind="neutral"
|
|
/>
|
|
{transaction.txState.major === TransactionMajorState.Pending &&
|
|
!transaction.error && (
|
|
<Part
|
|
title={i18n.str`URI`}
|
|
text={<ShowQrWithCopy text={transaction.talerUri} />}
|
|
kind="neutral"
|
|
/>
|
|
)}
|
|
<Part
|
|
title={i18n.str`Details`}
|
|
text={
|
|
<InvoiceCreationDetails
|
|
amount={getAmountWithFee(effective, raw, "credit")}
|
|
/>
|
|
}
|
|
/>
|
|
</TransactionTemplate>
|
|
);
|
|
}
|
|
|
|
if (transaction.type === TransactionType.PeerPullDebit) {
|
|
return (
|
|
<TransactionTemplate
|
|
transaction={transaction}
|
|
onDelete={onDelete}
|
|
onRetry={onRetry}
|
|
onAbort={onAbort}
|
|
onResume={onResume}
|
|
onSuspend={onSuspend}
|
|
onCancel={onCancel}
|
|
>
|
|
<Header
|
|
timestamp={transaction.timestamp}
|
|
type={i18n.str`Debit`}
|
|
total={effective}
|
|
kind="negative"
|
|
>
|
|
<i18n.Translate>Invoice</i18n.Translate>
|
|
</Header>
|
|
|
|
{transaction.info.summary ? (
|
|
<Part
|
|
title={i18n.str`Subject`}
|
|
text={transaction.info.summary as TranslatedString}
|
|
kind="neutral"
|
|
/>
|
|
) : undefined}
|
|
<Part
|
|
title={i18n.str`Exchange`}
|
|
text={transaction.exchangeBaseUrl as TranslatedString}
|
|
kind="neutral"
|
|
/>
|
|
<Part
|
|
title={i18n.str`Details`}
|
|
text={
|
|
<InvoicePaymentDetails
|
|
amount={getAmountWithFee(effective, raw, "debit")}
|
|
/>
|
|
}
|
|
/>
|
|
</TransactionTemplate>
|
|
);
|
|
}
|
|
|
|
if (transaction.type === TransactionType.PeerPushDebit) {
|
|
const total = Amounts.parseOrThrow(transaction.amountEffective);
|
|
return (
|
|
<TransactionTemplate
|
|
transaction={transaction}
|
|
onDelete={onDelete}
|
|
onRetry={onRetry}
|
|
onAbort={onAbort}
|
|
onResume={onResume}
|
|
onSuspend={onSuspend}
|
|
onCancel={onCancel}
|
|
>
|
|
<Header
|
|
timestamp={transaction.timestamp}
|
|
type={i18n.str`Debit`}
|
|
total={total}
|
|
kind="negative"
|
|
>
|
|
<i18n.Translate>Transfer</i18n.Translate>
|
|
</Header>
|
|
|
|
{transaction.info.summary ? (
|
|
<Part
|
|
title={i18n.str`Subject`}
|
|
text={transaction.info.summary as TranslatedString}
|
|
kind="neutral"
|
|
/>
|
|
) : undefined}
|
|
<Part
|
|
title={i18n.str`Exchange`}
|
|
text={transaction.exchangeBaseUrl as TranslatedString}
|
|
kind="neutral"
|
|
/>
|
|
{/* {transaction.pending && ( //pending is not-received
|
|
)} */}
|
|
<Part
|
|
title={i18n.str`URI`}
|
|
text={<ShowQrWithCopy text={transaction.talerUri} />}
|
|
kind="neutral"
|
|
/>
|
|
<Part
|
|
title={i18n.str`Details`}
|
|
text={
|
|
<TransferCreationDetails
|
|
amount={getAmountWithFee(effective, raw, "debit")}
|
|
/>
|
|
}
|
|
/>
|
|
</TransactionTemplate>
|
|
);
|
|
}
|
|
|
|
if (transaction.type === TransactionType.PeerPushCredit) {
|
|
return (
|
|
<TransactionTemplate
|
|
transaction={transaction}
|
|
onDelete={onDelete}
|
|
onRetry={onRetry}
|
|
onAbort={onAbort}
|
|
onResume={onResume}
|
|
onSuspend={onSuspend}
|
|
onCancel={onCancel}
|
|
>
|
|
<Header
|
|
timestamp={transaction.timestamp}
|
|
type={i18n.str`Credit`}
|
|
total={effective}
|
|
kind="positive"
|
|
>
|
|
<i18n.Translate>Transfer</i18n.Translate>
|
|
</Header>
|
|
|
|
{transaction.info.summary ? (
|
|
<Part
|
|
title={i18n.str`Subject`}
|
|
text={transaction.info.summary as TranslatedString}
|
|
kind="neutral"
|
|
/>
|
|
) : undefined}
|
|
<Part
|
|
title={i18n.str`Exchange`}
|
|
text={transaction.exchangeBaseUrl as TranslatedString}
|
|
kind="neutral"
|
|
/>
|
|
<Part
|
|
title={i18n.str`Details`}
|
|
text={
|
|
<TransferPickupDetails
|
|
amount={getAmountWithFee(effective, raw, "credit")}
|
|
/>
|
|
}
|
|
/>
|
|
</TransactionTemplate>
|
|
);
|
|
}
|
|
assertUnreachable(transaction);
|
|
}
|
|
|
|
export function MerchantDetails({
|
|
merchant,
|
|
}: {
|
|
merchant: MerchantInfo;
|
|
}): VNode {
|
|
return (
|
|
<div style={{ display: "flex", flexDirection: "row" }}>
|
|
{merchant.logo && (
|
|
<div>
|
|
<img
|
|
src={merchant.logo}
|
|
style={{ width: 64, height: 64, margin: 4 }}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p style={{ marginTop: 0 }}>{merchant.name}</p>
|
|
{merchant.website && (
|
|
<a
|
|
href={merchant.website}
|
|
target="_blank"
|
|
style={{ textDecorationColor: "gray" }}
|
|
rel="noreferrer"
|
|
>
|
|
<SmallLightText>{merchant.website}</SmallLightText>
|
|
</a>
|
|
)}
|
|
{merchant.email && (
|
|
<a
|
|
href={`mailto:${merchant.email}`}
|
|
style={{ textDecorationColor: "gray" }}
|
|
>
|
|
<SmallLightText>{merchant.email}</SmallLightText>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DeliveryDetails({
|
|
date,
|
|
location,
|
|
}: {
|
|
date: TalerProtocolTimestamp | undefined;
|
|
location: Location | undefined;
|
|
}): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
return (
|
|
<PurchaseDetailsTable>
|
|
{location && (
|
|
<Fragment>
|
|
{location.country && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Country</i18n.Translate>
|
|
</td>
|
|
<td>{location.country}</td>
|
|
</tr>
|
|
)}
|
|
{location.address_lines && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Address lines</i18n.Translate>
|
|
</td>
|
|
<td>{location.address_lines}</td>
|
|
</tr>
|
|
)}
|
|
{location.building_number && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Building number</i18n.Translate>
|
|
</td>
|
|
<td>{location.building_number}</td>
|
|
</tr>
|
|
)}
|
|
{location.building_name && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Building name</i18n.Translate>
|
|
</td>
|
|
<td>{location.building_name}</td>
|
|
</tr>
|
|
)}
|
|
{location.street && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Street</i18n.Translate>
|
|
</td>
|
|
<td>{location.street}</td>
|
|
</tr>
|
|
)}
|
|
{location.post_code && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Post code</i18n.Translate>
|
|
</td>
|
|
<td>{location.post_code}</td>
|
|
</tr>
|
|
)}
|
|
{location.town_location && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Town location</i18n.Translate>
|
|
</td>
|
|
<td>{location.town_location}</td>
|
|
</tr>
|
|
)}
|
|
{location.town && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Town</i18n.Translate>
|
|
</td>
|
|
<td>{location.town}</td>
|
|
</tr>
|
|
)}
|
|
{location.district && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>District</i18n.Translate>
|
|
</td>
|
|
<td>{location.district}</td>
|
|
</tr>
|
|
)}
|
|
{location.country_subdivision && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Country subdivision</i18n.Translate>
|
|
</td>
|
|
<td>{location.country_subdivision}</td>
|
|
</tr>
|
|
)}
|
|
</Fragment>
|
|
)}
|
|
|
|
{!location || !date ? undefined : (
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
)}
|
|
{date && (
|
|
<Fragment>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Date</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Time
|
|
timestamp={AbsoluteTime.fromProtocolTimestamp(date)}
|
|
format="dd MMMM yyyy, HH:mm"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</Fragment>
|
|
)}
|
|
</PurchaseDetailsTable>
|
|
);
|
|
}
|
|
|
|
export function ExchangeDetails({ exchange }: { exchange: string }): VNode {
|
|
return (
|
|
<div>
|
|
<p style={{ marginTop: 0 }}>
|
|
<a rel="noreferrer" target="_blank" href={exchange}>
|
|
{exchange}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export interface AmountWithFee {
|
|
value: AmountJson;
|
|
fee: AmountJson;
|
|
total: AmountJson;
|
|
maxFrac: number;
|
|
}
|
|
|
|
export function getAmountWithFee(
|
|
effective: AmountJson,
|
|
raw: AmountJson,
|
|
direction: "credit" | "debit",
|
|
): AmountWithFee {
|
|
const total = direction === "credit" ? effective : raw;
|
|
const value = direction === "debit" ? effective : raw;
|
|
const fee = Amounts.sub(value, total).amount;
|
|
|
|
const maxFrac = [effective, raw, fee]
|
|
.map((a) => Amounts.maxFractionalDigits(a))
|
|
.reduce((c, p) => Math.max(c, p), 0);
|
|
|
|
return {
|
|
total,
|
|
value,
|
|
fee,
|
|
maxFrac,
|
|
};
|
|
}
|
|
|
|
export function InvoiceCreationDetails({
|
|
amount,
|
|
}: {
|
|
amount: AmountWithFee;
|
|
}): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
|
|
return (
|
|
<PurchaseDetailsTable>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Invoice</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.value} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
|
|
{Amounts.isNonZero(amount.fee) && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Fees</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.fee} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
)}
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Total</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.total} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
</PurchaseDetailsTable>
|
|
);
|
|
}
|
|
|
|
export function InvoicePaymentDetails({
|
|
amount,
|
|
}: {
|
|
amount: AmountWithFee;
|
|
}): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
|
|
return (
|
|
<PurchaseDetailsTable>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Invoice</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.total} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
|
|
{Amounts.isNonZero(amount.fee) && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Fees</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.fee} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
)}
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Total</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.value} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
</PurchaseDetailsTable>
|
|
);
|
|
}
|
|
|
|
export function TransferCreationDetails({
|
|
amount,
|
|
}: {
|
|
amount: AmountWithFee;
|
|
}): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
|
|
return (
|
|
<PurchaseDetailsTable>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Sent</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.value} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
|
|
{Amounts.isNonZero(amount.fee) && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Fees</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.fee} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
)}
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Transfer</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.total} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
</PurchaseDetailsTable>
|
|
);
|
|
}
|
|
|
|
export function TransferPickupDetails({
|
|
amount,
|
|
}: {
|
|
amount: AmountWithFee;
|
|
}): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
|
|
return (
|
|
<PurchaseDetailsTable>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Transfer</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.value} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
|
|
{Amounts.isNonZero(amount.fee) && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Fees</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.fee} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
)}
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Total</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.total} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
</PurchaseDetailsTable>
|
|
);
|
|
}
|
|
export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
|
|
const maxFrac = [amount.fee, amount.fee]
|
|
.map((a) => Amounts.maxFractionalDigits(a))
|
|
.reduce((c, p) => Math.max(c, p), 0);
|
|
|
|
const total = Amounts.add(amount.value, amount.fee).amount;
|
|
|
|
return (
|
|
<PurchaseDetailsTable>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Transfer</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.value} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
|
|
{Amounts.isNonZero(amount.fee) && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Fees</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.fee} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
)}
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Total</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.total} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
</PurchaseDetailsTable>
|
|
);
|
|
}
|
|
|
|
export function PurchaseDetails({
|
|
price,
|
|
effectiveRefund,
|
|
info,
|
|
proposalId,
|
|
}: {
|
|
price: AmountWithFee;
|
|
effectiveRefund?: AmountJson;
|
|
info: OrderShortInfo;
|
|
proposalId: string;
|
|
}): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
|
|
const total = Amounts.add(price.value, price.fee).amount;
|
|
|
|
const hasProducts = info.products && info.products.length > 0;
|
|
|
|
const hasShipping =
|
|
info.delivery_date !== undefined || info.delivery_location !== undefined;
|
|
|
|
const showLargePic = (): void => {
|
|
return;
|
|
};
|
|
|
|
return (
|
|
<PurchaseDetailsTable>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Price</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={price.total} />
|
|
</td>
|
|
</tr>
|
|
{Amounts.isNonZero(price.fee) && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Fees</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={price.fee} />
|
|
</td>
|
|
</tr>
|
|
)}
|
|
{effectiveRefund && Amounts.isNonZero(effectiveRefund) ? (
|
|
<Fragment>
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Subtotal</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={price.total} />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Refunded</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={effectiveRefund} negative />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Total</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={Amounts.sub(total, effectiveRefund).amount} />
|
|
</td>
|
|
</tr>
|
|
</Fragment>
|
|
) : (
|
|
<Fragment>
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Total</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={price.value} />
|
|
</td>
|
|
</tr>
|
|
</Fragment>
|
|
)}
|
|
{hasProducts && (
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<PartCollapsible
|
|
big
|
|
title={i18n.str`Products`}
|
|
text={
|
|
<ListOfProducts>
|
|
{info.products?.map((p, k) => (
|
|
<Row key={k}>
|
|
<a href="#" onClick={showLargePic}>
|
|
<img src={p.image ? p.image : emptyImg} />
|
|
</a>
|
|
<div>
|
|
{p.quantity && p.quantity > 0 && (
|
|
<SmallLightText>
|
|
x {p.quantity} {p.unit}
|
|
</SmallLightText>
|
|
)}
|
|
<div>{p.description}</div>
|
|
</div>
|
|
</Row>
|
|
))}
|
|
</ListOfProducts>
|
|
}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
{hasShipping && (
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<PartCollapsible
|
|
big
|
|
title={i18n.str`Delivery`}
|
|
text={
|
|
<DeliveryDetails
|
|
date={info.delivery_date}
|
|
location={info.delivery_location}
|
|
/>
|
|
}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
<tr>
|
|
<td>
|
|
<ShowFullContractTermPopup proposalId={proposalId} />
|
|
</td>
|
|
</tr>
|
|
</PurchaseDetailsTable>
|
|
);
|
|
}
|
|
|
|
function RefundDetails({ amount }: { amount: AmountWithFee }): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
|
|
return (
|
|
<PurchaseDetailsTable>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Refund</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.value} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
|
|
{Amounts.isNonZero(amount.fee) && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Fees</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.fee} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
)}
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Total</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.total} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
</PurchaseDetailsTable>
|
|
);
|
|
}
|
|
|
|
type AmountAmountByWireTransferByWire = {
|
|
id: string;
|
|
amount: string;
|
|
}[];
|
|
|
|
function calculateAmountByWireTransfer(
|
|
state: TransactionDeposit["trackingState"],
|
|
): AmountAmountByWireTransferByWire {
|
|
const allTracking = Object.values(state ?? {});
|
|
|
|
//group tracking by wtid, sum amounts
|
|
const trackByWtid = allTracking.reduce((prev, cur) => {
|
|
const fee = Amounts.parseOrThrow(cur.wireFee);
|
|
const raw = Amounts.parseOrThrow(cur.amountRaw);
|
|
const total = !prev[cur.wireTransferId]
|
|
? raw
|
|
: Amounts.add(prev[cur.wireTransferId].total, raw).amount;
|
|
|
|
prev[cur.wireTransferId] = {
|
|
total,
|
|
fee,
|
|
};
|
|
return prev;
|
|
}, {} as Record<string, { total: AmountJson; fee: AmountJson }>);
|
|
|
|
//remove wire fee from total amount
|
|
return Object.entries(trackByWtid).map(([id, info]) => ({
|
|
id,
|
|
amount: Amounts.stringify(Amounts.sub(info.total, info.fee).amount),
|
|
}));
|
|
}
|
|
|
|
function TrackingDepositDetails({
|
|
trackingState,
|
|
}: {
|
|
trackingState: TransactionDeposit["trackingState"];
|
|
}): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
|
|
const wireTransfers = calculateAmountByWireTransfer(trackingState);
|
|
|
|
return (
|
|
<PurchaseDetailsTable>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Transfer identification</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<i18n.Translate>Amount</i18n.Translate>
|
|
</td>
|
|
</tr>
|
|
|
|
{wireTransfers.map((wire) => (
|
|
<tr>
|
|
<td>{wire.id}</td>
|
|
<td>
|
|
<Amount value={wire.amount} />
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</PurchaseDetailsTable>
|
|
);
|
|
}
|
|
function DepositDetails({ amount }: { amount: AmountWithFee }): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
|
|
return (
|
|
<PurchaseDetailsTable>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Sent</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.value} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
|
|
{Amounts.isNonZero(amount.fee) && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Fees</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.fee} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
)}
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Total</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.total} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
</PurchaseDetailsTable>
|
|
);
|
|
}
|
|
|
|
function RefreshDetails({ amount }: { amount: AmountWithFee }): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
|
|
return (
|
|
<PurchaseDetailsTable>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Refresh</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.value} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Fees</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.fee} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Total</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.total} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
</PurchaseDetailsTable>
|
|
);
|
|
}
|
|
|
|
function TipDetails({ amount }: { amount: AmountWithFee }): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
|
|
return (
|
|
<PurchaseDetailsTable>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Tip</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.value} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
|
|
{Amounts.isNonZero(amount.fee) && (
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Fees</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.fee} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
)}
|
|
<tr>
|
|
<td colSpan={2}>
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i18n.Translate>Total</i18n.Translate>
|
|
</td>
|
|
<td>
|
|
<Amount value={amount.total} maxFracSize={amount.maxFrac} />
|
|
</td>
|
|
</tr>
|
|
</PurchaseDetailsTable>
|
|
);
|
|
}
|
|
|
|
function Header({
|
|
timestamp,
|
|
total,
|
|
children,
|
|
kind,
|
|
type,
|
|
}: {
|
|
timestamp: TalerPreciseTimestamp;
|
|
total: AmountJson;
|
|
children: ComponentChildren;
|
|
kind: Kind;
|
|
type: TranslatedString;
|
|
}): VNode {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
flexDirection: "row",
|
|
}}
|
|
>
|
|
<div>
|
|
<SubTitle>{children}</SubTitle>
|
|
<Time
|
|
timestamp={AbsoluteTime.fromPreciseTimestamp(timestamp)}
|
|
format="dd MMMM yyyy, HH:mm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<SubTitle>
|
|
<Part
|
|
title={type}
|
|
text={<Amount value={total} negative={kind === "negative"} />}
|
|
kind={kind}
|
|
/>
|
|
</SubTitle>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NicePayto({ payto }: { payto: PaytoUri }): VNode {
|
|
if (payto.isKnown) {
|
|
switch (payto.targetType) {
|
|
case "bitcoin": {
|
|
return <div>{payto.targetPath.substring(0, 20)}...</div>;
|
|
}
|
|
case "x-taler-bank": {
|
|
const url = new URL("/", `https://${payto.host}`);
|
|
return (
|
|
<Fragment>
|
|
<div>{"payto.account"}</div>
|
|
<SmallLightText>
|
|
<a href={url.href} target="_bank" rel="noreferrer">
|
|
{url.href}
|
|
</a>
|
|
</SmallLightText>
|
|
</Fragment>
|
|
);
|
|
}
|
|
case "iban": {
|
|
return <div>{payto.targetPath.substring(0, 20)}</div>;
|
|
}
|
|
}
|
|
}
|
|
return <Fragment>{stringifyPaytoUri(payto)}</Fragment>;
|
|
}
|
|
|
|
function ShowQrWithCopy({ text }: { text: string }): VNode {
|
|
const [showing, setShowing] = useState(false);
|
|
const { i18n } = useTranslationContext();
|
|
async function copy(): Promise<void> {
|
|
navigator.clipboard.writeText(text);
|
|
}
|
|
async function toggle(): Promise<void> {
|
|
setShowing((s) => !s);
|
|
}
|
|
if (showing) {
|
|
return (
|
|
<div>
|
|
<QR text={text} />
|
|
<Button onClick={copy as SafeHandler<void>}>
|
|
<i18n.Translate>copy</i18n.Translate>
|
|
</Button>
|
|
<Button onClick={toggle as SafeHandler<void>}>
|
|
<i18n.Translate>hide qr</i18n.Translate>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div>
|
|
<div>{text.substring(0, 64)}...</div>
|
|
<Button onClick={copy as SafeHandler<void>}>
|
|
<i18n.Translate>copy</i18n.Translate>
|
|
</Button>
|
|
<Button onClick={toggle as SafeHandler<void>}>
|
|
<i18n.Translate>show qr</i18n.Translate>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function getShowButtonStates(transaction: Transaction) {
|
|
let abort = false;
|
|
let fail = false;
|
|
let resume = false;
|
|
let remove = false;
|
|
let suspend = false;
|
|
|
|
transaction.txActions.forEach((a) => {
|
|
switch (a) {
|
|
case TransactionAction.Delete:
|
|
remove = true;
|
|
break;
|
|
case TransactionAction.Suspend:
|
|
suspend = true;
|
|
break;
|
|
case TransactionAction.Resume:
|
|
resume = true;
|
|
break;
|
|
case TransactionAction.Abort:
|
|
abort = true;
|
|
break;
|
|
case TransactionAction.Fail:
|
|
fail = true;
|
|
break;
|
|
case TransactionAction.Retry:
|
|
break;
|
|
default:
|
|
assertUnreachable(a);
|
|
break;
|
|
}
|
|
});
|
|
return { abort, fail, resume, remove, suspend };
|
|
}
|
|
|
|
function ShowWithdrawalDetailForBankIntegrated({
|
|
transaction,
|
|
}: {
|
|
transaction: TransactionWithdrawal | TransactionInternalWithdrawal;
|
|
}): VNode {
|
|
const { i18n } = useTranslationContext();
|
|
const [showDetails, setShowDetails] = useState(false);
|
|
if (
|
|
transaction.txState.major !== TransactionMajorState.Pending ||
|
|
transaction.withdrawalDetails.type === WithdrawalType.ManualTransfer
|
|
)
|
|
return <Fragment />;
|
|
const raw = Amounts.parseOrThrow(transaction.amountRaw);
|
|
return (
|
|
<Fragment>
|
|
<EnabledBySettings name="advanceMode">
|
|
<a
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
setShowDetails(!showDetails);
|
|
}}
|
|
>
|
|
show details
|
|
</a>
|
|
</EnabledBySettings>
|
|
|
|
{showDetails && (
|
|
<BankDetailsByPaytoType
|
|
amount={raw}
|
|
exchangeBaseUrl={transaction.exchangeBaseUrl}
|
|
subject={transaction.withdrawalDetails.reservePub}
|
|
/>
|
|
)}
|
|
{!transaction.withdrawalDetails.confirmed &&
|
|
transaction.withdrawalDetails.bankConfirmationUrl ? (
|
|
<InfoBox>
|
|
<div style={{ display: "block" }}>
|
|
<i18n.Translate>
|
|
Wire transfer need a confirmation. Go to the{" "}
|
|
<a
|
|
href={transaction.withdrawalDetails.bankConfirmationUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
style={{ display: "inline" }}
|
|
>
|
|
<i18n.Translate>bank site</i18n.Translate>
|
|
</a>{" "}
|
|
and check wire transfer operation to exchange account is complete.
|
|
</i18n.Translate>
|
|
</div>
|
|
</InfoBox>
|
|
) : undefined}
|
|
{transaction.withdrawalDetails.confirmed &&
|
|
!transaction.withdrawalDetails.reserveIsReady && (
|
|
<InfoBox>
|
|
<i18n.Translate>
|
|
Bank has confirmed the wire transfer. Waiting for the exchange to
|
|
send the coins
|
|
</i18n.Translate>
|
|
</InfoBox>
|
|
)}
|
|
{transaction.withdrawalDetails.confirmed &&
|
|
transaction.withdrawalDetails.reserveIsReady && (
|
|
<InfoBox>
|
|
<i18n.Translate>
|
|
Exchange is ready to send the coins, withdrawal in progress.
|
|
</i18n.Translate>
|
|
</InfoBox>
|
|
)}
|
|
</Fragment>
|
|
);
|
|
}
|