From 029340469ac661bab1450b1ff4dcc6e717780e5b Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sun, 29 May 2022 01:23:15 -0300 Subject: show refund info in purchase notify refund pending with accept button on the purchase details better payto box --- .../src/wallet/History.stories.tsx | 1 + .../src/wallet/History.tsx | 2 +- .../src/wallet/ReserveCreated.stories.tsx | 2 +- .../src/wallet/Transaction.stories.tsx | 30 ++++++++- .../src/wallet/Transaction.tsx | 78 ++++++++++++++++++++-- 5 files changed, 104 insertions(+), 9 deletions(-) (limited to 'packages/taler-wallet-webextension/src/wallet') diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx index 3080a866e..004327c94 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx @@ -78,6 +78,7 @@ const exampleData = { summary: "the summary", fulfillmentMessage: "", }, + refunds: [], refundPending: undefined, totalRefundEffective: "USD:0", totalRefundRaw: "USD:0", diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index 4a435d0cf..59f245522 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -193,7 +193,7 @@ export function HistoryView({ margin: 8, }} > - {Amounts.stringifyValue(currencyAmount)} + {Amounts.stringifyValue(currencyAmount, 2)} )} diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx index 587e24e98..895c301c2 100644 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx @@ -45,7 +45,7 @@ export const TalerBank = createExample(TestedComponent, { export const IBAN = createExample(TestedComponent, { reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", paytoURI: parsePaytoUri( - "payto://iban/ASDQWEASDZXCASDQWE?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", + "payto://iban/ES8877998399652238?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", ), amount: { currency: "USD", diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx index 493cdd1d7..83848d005 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx @@ -93,6 +93,7 @@ const exampleData = { // address_lines: [""], // }, }, + refunds: [], refundPending: undefined, totalRefundEffective: "KUDOS:0", totalRefundRaw: "KUDOS:0", @@ -199,7 +200,7 @@ export const WithdrawPendingManual = createExample(TestedComponent, () => ({ ...exampleData.withdraw, withdrawalDetails: { type: WithdrawalType.ManualTransfer, - exchangePaytoUris: ["payto://iban/asdasdasd"], + exchangePaytoUris: ["payto://iban/ES8877998399652238"], reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", } as WithdrawalDetails, pending: true, @@ -254,6 +255,14 @@ export const PaymentWithRefund = createExample(TestedComponent, { amountRaw: "KUDOS:12", totalRefundEffective: "KUDOS:1", totalRefundRaw: "KUDOS:1", + refunds: [ + { + transactionId: "1123123", + amountRaw: "KUDOS:1", + amountEffective: "KUDOS:1", + timestamp: TalerProtocolTimestamp.fromSeconds(1546546544), + }, + ], }, }); @@ -410,6 +419,25 @@ export const PaymentWithLongSummary = createExample(TestedComponent, { export const Deposit = createExample(TestedComponent, { transaction: exampleData.deposit, }); +export const DepositTalerBank = createExample(TestedComponent, { + transaction: { + ...exampleData.deposit, + targetPaytoUri: "payto://x-taler-bank/bank.demo.taler.net/Exchange", + }, +}); +export const DepositBitcoin = createExample(TestedComponent, { + transaction: { + ...exampleData.deposit, + targetPaytoUri: + "payto://bitcoin/bcrt1q6ps8qs6v8tkqrnru4xqqqa6rfwcx5ufpdfqht4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", + }, +}); +export const DepositIBAN = createExample(TestedComponent, { + transaction: { + ...exampleData.deposit, + targetPaytoUri: "payto://iban/ES8877998399652238", + }, +}); export const DepositError = createExample(TestedComponent, { transaction: { diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 9ccb353a9..8165953ab 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -22,6 +22,8 @@ import { NotificationType, parsePaytoUri, parsePayUri, + PaytoUri, + stringifyPaytoUri, TalerProtocolTimestamp, Transaction, TransactionDeposit, @@ -50,6 +52,7 @@ import { ButtonDestructive, ButtonPrimary, CenteredDialog, + HistoryRow, InfoBox, ListOfProducts, Overlay, @@ -83,7 +86,7 @@ async function getTransaction(tid: string): Promise { export function TransactionPage({ tid, goToWalletHistory }: Props): VNode { const { i18n } = useTranslationContext(); - const state = useAsyncAsHook(() => getTransaction(tid)); + const state = useAsyncAsHook(() => getTransaction(tid), [tid]); useEffect(() => { wxApi.onUpdateNotification([NotificationType.WithdrawGroupFinished], () => { @@ -119,6 +122,7 @@ export function TransactionPage({ tid, goToWalletHistory }: Props): VNode { onRetry={() => wxApi.retryTransaction(tid).then(() => goToWalletHistory(currency)) } + onRefund={(id) => wxApi.applyRefundFromPurchaseId(id)} onBack={() => goToWalletHistory(currency)} /> ); @@ -128,6 +132,7 @@ export interface WalletTransactionProps { transaction: Transaction; onDelete: () => void; onRetry: () => void; + onRefund: (id: string) => void; onBack: () => void; } @@ -143,7 +148,7 @@ export function TransactionView({ transaction, onDelete, onRetry, - onBack, + onRefund, }: WalletTransactionProps): VNode { const [confirmBeforeForget, setConfirmBeforeForget] = useState(false); @@ -334,6 +339,40 @@ export function TransactionView({ )}
+ {transaction.refunds.length > 0 ? ( + Refunds} + text={ + + {transaction.refunds.map((r, i) => { + return ( + + + + ); + })} +
+ {}{" "} + + was refunded + {" "} + on{" "} + { +
+ } + kind="neutral" + /> + ) : undefined} {pendingRefund !== undefined && Amounts.isNonZero(pendingRefund) && ( @@ -348,7 +387,7 @@ export function TransactionView({
- + onRefund(transaction.proposalId)}> Accept
@@ -385,9 +424,9 @@ export function TransactionView({ total={total} kind="negative" > - {transaction.targetPaytoUri} + {!payto ? transaction.targetPaytoUri : } - {payto && } + {payto && } Details} text={} @@ -669,7 +708,7 @@ function PurchaseDetails({ Refunded - + )} @@ -988,3 +1027,30 @@ function Header({
); } + +function NicePayto({ payto }: { payto: PaytoUri }): VNode { + if (payto.isKnown) { + switch (payto.targetType) { + case "bitcoin": { + return
{payto.targetPath.substring(0, 20)}...
; + } + case "x-taler-bank": { + const url = new URL("/", `https://${payto.host}`); + return ( + +
{payto.account}
+ + + {url.toString()} + + + + ); + } + case "iban": { + return
{payto.targetPath.substring(0, 20)}
; + } + } + } + return {stringifyPaytoUri(payto)}; +} -- cgit v1.2.3