diff options
author | Sebastian <sebasjm@gmail.com> | 2023-06-01 14:26:28 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-06-01 14:26:28 -0300 |
commit | 4f726b73e66535a69a961da30cf3dcddbbbd9efc (patch) | |
tree | 97ae4e120a2724a851a780da9714c448080a373b /packages/taler-wallet-webextension/src/components | |
parent | 699a7b453b90a117776dbb64a09f4c8b312acd04 (diff) | |
download | wallet-core-4f726b73e66535a69a961da30cf3dcddbbbd9efc.tar.xz |
tx state ui
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/HistoryItem.tsx (renamed from packages/taler-wallet-webextension/src/components/TransactionItem.tsx) | 124 |
1 files changed, 82 insertions, 42 deletions
diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx index 15669e63d..a0ce04460 100644 --- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx +++ b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx @@ -39,7 +39,7 @@ import { } from "./styled/index.js"; import { Time } from "./Time.js"; -export function TransactionItem(props: { tx: Transaction }): VNode { +export function HistoryItem(props: { tx: Transaction }): VNode { const tx = props.tx; const { i18n } = useTranslationContext(); /** @@ -48,14 +48,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode { switch (tx.type) { case TransactionType.Withdrawal: return ( - <TransactionLayout + <Layout id={tx.transactionId} amount={tx.amountEffective} debitCreditIndicator={"credit"} title={new URL(tx.exchangeBaseUrl).hostname} timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)} iconPath={"W"} - pending={ + currentState={tx.txState.major} + description={ tx.txState.major === TransactionMajorState.Pending ? tx.withdrawalDetails.type === WithdrawalType.TalerBankIntegrationApi @@ -71,14 +72,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode { ); case TransactionType.InternalWithdrawal: return ( - <TransactionLayout + <Layout id={tx.transactionId} amount={tx.amountEffective} debitCreditIndicator={"credit"} title={new URL(tx.exchangeBaseUrl).hostname} timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)} iconPath={"I"} - pending={ + currentState={tx.txState.major} + description={ tx.txState.major === TransactionMajorState.Pending ? tx.withdrawalDetails.type === WithdrawalType.TalerBankIntegrationApi @@ -94,7 +96,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode { ); case TransactionType.Payment: return ( - <TransactionLayout + <Layout id={tx.transactionId} amount={tx.amountEffective} debitCreditIndicator={"debit"} @@ -102,7 +104,8 @@ export function TransactionItem(props: { tx: Transaction }): VNode { subtitle={tx.info.summary} timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)} iconPath={"P"} - pending={ + currentState={tx.txState.major} + description={ tx.txState.major === TransactionMajorState.Pending ? i18n.str`Payment in progress` : undefined @@ -111,7 +114,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode { ); case TransactionType.Refund: return ( - <TransactionLayout + <Layout id={tx.transactionId} amount={tx.amountEffective} debitCreditIndicator={"credit"} @@ -123,7 +126,8 @@ export function TransactionItem(props: { tx: Transaction }): VNode { } //FIXME: DD37 wallet-core is not returning this value timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)} iconPath={"R"} - pending={ + currentState={tx.txState.major} + description={ tx.txState.major === TransactionMajorState.Pending ? i18n.str`Executing refund...` : undefined @@ -132,14 +136,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode { ); case TransactionType.Tip: return ( - <TransactionLayout + <Layout id={tx.transactionId} amount={tx.amountEffective} debitCreditIndicator={"credit"} title={new URL(tx.merchantBaseUrl).hostname} timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)} iconPath={"T"} - pending={ + currentState={tx.txState.major} + description={ tx.txState.major === TransactionMajorState.Pending ? i18n.str`Grabbing the tipping...` : undefined @@ -148,14 +153,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode { ); case TransactionType.Refresh: return ( - <TransactionLayout + <Layout id={tx.transactionId} amount={tx.amountEffective} debitCreditIndicator={"credit"} title={"Refresh"} timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)} iconPath={"R"} - pending={ + currentState={tx.txState.major} + description={ tx.txState.major === TransactionMajorState.Pending ? i18n.str`Refreshing coins...` : undefined @@ -164,14 +170,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode { ); case TransactionType.Deposit: return ( - <TransactionLayout + <Layout id={tx.transactionId} amount={tx.amountEffective} debitCreditIndicator={"debit"} title={tx.targetPaytoUri} timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)} iconPath={"D"} - pending={ + currentState={tx.txState.major} + description={ tx.txState.major === TransactionMajorState.Pending ? i18n.str`Deposit in progress` : undefined @@ -180,14 +187,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode { ); case TransactionType.PeerPullCredit: return ( - <TransactionLayout + <Layout id={tx.transactionId} amount={tx.amountEffective} debitCreditIndicator={"credit"} title={tx.info.summary || "Invoice"} timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)} iconPath={"I"} - pending={ + currentState={tx.txState.major} + description={ tx.txState.major === TransactionMajorState.Pending ? i18n.str`Waiting to be paid` : undefined @@ -196,14 +204,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode { ); case TransactionType.PeerPullDebit: return ( - <TransactionLayout + <Layout id={tx.transactionId} amount={tx.amountEffective} debitCreditIndicator={"debit"} title={tx.info.summary || "Invoice"} timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)} iconPath={"I"} - pending={ + currentState={tx.txState.major} + description={ tx.txState.major === TransactionMajorState.Pending ? i18n.str`Payment in progress` : undefined @@ -212,14 +221,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode { ); case TransactionType.PeerPushCredit: return ( - <TransactionLayout + <Layout id={tx.transactionId} amount={tx.amountEffective} debitCreditIndicator={"credit"} title={tx.info.summary || "Transfer"} timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)} iconPath={"T"} - pending={ + currentState={tx.txState.major} + description={ tx.txState.major === TransactionMajorState.Pending ? i18n.str`Receiving the transfer` : undefined @@ -228,14 +238,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode { ); case TransactionType.PeerPushDebit: return ( - <TransactionLayout + <Layout id={tx.transactionId} amount={tx.amountEffective} debitCreditIndicator={"debit"} title={tx.info.summary || "Transfer"} timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)} iconPath={"T"} - pending={ + currentState={tx.txState.major} + description={ tx.txState.major === TransactionMajorState.Pending ? i18n.str`Waiting to be received` : undefined @@ -248,13 +259,22 @@ export function TransactionItem(props: { tx: Transaction }): VNode { } } -function TransactionLayout(props: TransactionLayoutProps): VNode { +function Layout(props: LayoutProps): VNode { const { i18n } = useTranslationContext(); return ( <HistoryRow href={Pages.balanceTransaction({ tid: props.id })} style={{ - backgroundColor: props.pending ? "lightcyan" : "inherit", + backgroundColor: + props.currentState === TransactionMajorState.Pending || + props.currentState === TransactionMajorState.Dialog + ? "lightcyan" + : props.currentState === TransactionMajorState.Failed + ? "#ff000040" + : props.currentState === TransactionMajorState.Aborted || + props.currentState === TransactionMajorState.Aborting + ? "#00000010" + : "inherit", alignItems: "center", }} > @@ -276,9 +296,9 @@ function TransactionLayout(props: TransactionLayoutProps): VNode { </div> )} </LargeText> - {props.pending && ( + {props.description && ( <LightText style={{ marginTop: 5, marginBottom: 5 }}> - <i18n.Translate>{props.pending}</i18n.Translate> + <i18n.Translate>{props.description}</i18n.Translate> </LightText> )} <SmallLightText style={{ marginTop: 5 }}> @@ -286,7 +306,7 @@ function TransactionLayout(props: TransactionLayoutProps): VNode { </SmallLightText> </Column> <TransactionAmount - pending={props.pending !== undefined} + currentState={props.currentState} amount={Amounts.parseOrThrow(props.amount)} debitCreditIndicator={props.debitCreditIndicator} /> @@ -294,7 +314,7 @@ function TransactionLayout(props: TransactionLayoutProps): VNode { ); } -interface TransactionLayoutProps { +interface LayoutProps { debitCreditIndicator: "debit" | "credit" | "unknown"; amount: AmountString | "unknown"; timestamp: AbsoluteTime; @@ -302,13 +322,14 @@ interface TransactionLayoutProps { subtitle?: string; id: string; iconPath: string; - pending?: string; + currentState: TransactionMajorState; + description?: string; } interface TransactionAmountProps { debitCreditIndicator: "debit" | "credit" | "unknown"; amount: AmountJson; - pending: boolean; + currentState: TransactionMajorState; } function TransactionAmount(props: TransactionAmountProps): VNode { @@ -328,24 +349,43 @@ function TransactionAmount(props: TransactionAmountProps): VNode { <Column style={{ textAlign: "center", - color: props.pending - ? "gray" - : sign === "+" - ? "darkgreen" - : sign === "-" - ? "darkred" - : undefined, + color: + props.currentState !== TransactionMajorState.Done + ? "gray" + : sign === "+" + ? "darkgreen" + : sign === "-" + ? "darkred" + : undefined, }} > <ExtraLargeText> {sign} {Amounts.stringifyValue(props.amount, 2)} </ExtraLargeText> - {props.pending && ( - <div> - <i18n.Translate>PENDING</i18n.Translate> + {props.currentState === TransactionMajorState.Aborted ? ( + <div + style={{ + color: "black", + border: "1px black solid", + borderRadius: 8, + padding: 4, + }} + > + <i18n.Translate>ABORTED</i18n.Translate> </div> - )} + ) : props.currentState === TransactionMajorState.Failed ? ( + <div + style={{ + color: "red", + border: "1px darkred solid", + borderRadius: 8, + padding: 4, + }} + > + <i18n.Translate>FAILED</i18n.Translate> + </div> + ) : undefined} </Column> ); } |