diff options
author | Sebastian <sebasjm@gmail.com> | 2022-08-08 14:09:28 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-08-08 14:09:36 -0300 |
commit | 7a600514c6d43bbaeba6b962533415e59fc46057 (patch) | |
tree | d96c02537cda29f1637787a8fb8e659a37ea8c1f /packages/taler-wallet-webextension/src/popup | |
parent | 4409d8384b77401489c2a92d3de20f79959ae34a (diff) | |
download | wallet-core-7a600514c6d43bbaeba6b962533415e59fc46057.tar.xz |
fixing #6096
merchant details and contract terms details factored out, to be used by other components
tests and stories updated
payment completed != confirmed (confirmed if paid by someone else)
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup')
3 files changed, 116 insertions, 50 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx index 89a7cace8..87cc98ea0 100644 --- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx @@ -30,6 +30,7 @@ export default { export const EmptyBalance = createExample(TestedComponent, { balances: [], + goToWalletManualWithdraw: {}, }); export const SomeCoins = createExample(TestedComponent, { @@ -42,6 +43,8 @@ export const SomeCoins = createExample(TestedComponent, { requiresUserInput: false, }, ], + addAction: {}, + goToWalletManualWithdraw: {}, }); export const SomeCoinsInTreeCurrencies = createExample(TestedComponent, { @@ -68,6 +71,8 @@ export const SomeCoinsInTreeCurrencies = createExample(TestedComponent, { requiresUserInput: false, }, ], + goToWalletManualWithdraw: {}, + addAction: {}, }); export const NoCoinsInTreeCurrencies = createExample(TestedComponent, { @@ -94,6 +99,8 @@ export const NoCoinsInTreeCurrencies = createExample(TestedComponent, { requiresUserInput: false, }, ], + goToWalletManualWithdraw: {}, + addAction: {}, }); export const SomeCoinsInFiveCurrencies = createExample(TestedComponent, { @@ -148,4 +155,6 @@ export const SomeCoinsInFiveCurrencies = createExample(TestedComponent, { requiresUserInput: false, }, ], + goToWalletManualWithdraw: {}, + addAction: {}, }); diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index cdf507cb5..3275a0a07 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -23,8 +23,10 @@ import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { MultiActionButton } from "../components/MultiActionButton.js"; import { useTranslationContext } from "../context/translation.js"; -import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { Button } from "../mui/Button.js"; +import { ButtonHandler } from "../mui/handlers.js"; +import { compose, StateViewMap } from "../utils/index.js"; import { AddNewActionView } from "../wallet/AddNewActionView.js"; import * as wxApi from "../wxApi.js"; import { NoBalanceHelp } from "./NoBalanceHelp.js"; @@ -34,17 +36,46 @@ export interface Props { goToWalletHistory: (currency: string) => Promise<void>; goToWalletManualWithdraw: () => Promise<void>; } -export function BalancePage({ - goToWalletManualWithdraw, - goToWalletDeposit, - goToWalletHistory, -}: Props): VNode { - const { i18n } = useTranslationContext(); + +export type State = State.Loading | State.Error | State.Action | State.Balances; + +export namespace State { + export interface Loading { + status: "loading"; + error: undefined; + } + + export interface Error { + status: "error"; + error: HookError; + } + + export interface Action { + status: "action"; + error: undefined; + cancel: ButtonHandler; + } + + export interface Balances { + status: "balance"; + error: undefined; + balances: Balance[]; + addAction: ButtonHandler; + goToWalletDeposit: (currency: string) => Promise<void>; + goToWalletHistory: (currency: string) => Promise<void>; + goToWalletManualWithdraw: ButtonHandler; + } +} + +function useComponentState( + { goToWalletDeposit, goToWalletHistory, goToWalletManualWithdraw }: Props, + api: typeof wxApi, +): State { const [addingAction, setAddingAction] = useState(false); - const state = useAsyncAsHook(wxApi.getBalance); + const state = useAsyncAsHook(api.getBalance); useEffect(() => { - return wxApi.onUpdateNotification( + return api.onUpdateNotification( [NotificationType.WithdrawGroupFinished], () => { state?.retry(); @@ -52,58 +83,80 @@ export function BalancePage({ ); }); - const balances = !state || state.hasError ? [] : state.response.balances; - if (!state) { - return <Loading />; + return { + status: "loading", + error: undefined, + }; } - if (state.hasError) { - return ( - <LoadingError - title={<i18n.Translate>Could not load balance page</i18n.Translate>} - error={state} - /> - ); + return { + status: "error", + error: state, + }; } - if (addingAction) { - return <AddNewActionView onCancel={async () => setAddingAction(false)} />; + return { + status: "action", + error: undefined, + cancel: { + onClick: async () => setAddingAction(false), + }, + }; } + return { + status: "balance", + error: undefined, + balances: state.response.balances, + addAction: { + onClick: async () => setAddingAction(true), + }, + goToWalletManualWithdraw: { + onClick: goToWalletManualWithdraw, + }, + goToWalletDeposit, + goToWalletHistory, + }; +} + +const viewMapping: StateViewMap<State> = { + loading: Loading, + error: ErrorView, + action: ActionView, + balance: BalanceView, +}; +export const BalancePage = compose( + "BalancePage", + (p: Props) => useComponentState(p, wxApi), + viewMapping, +); + +function ErrorView({ error }: State.Error): VNode { + const { i18n } = useTranslationContext(); return ( - <BalanceView - balances={balances} - goToWalletManualWithdraw={goToWalletManualWithdraw} - goToWalletDeposit={goToWalletDeposit} - goToWalletHistory={goToWalletHistory} - goToAddAction={async () => setAddingAction(true)} + <LoadingError + title={<i18n.Translate>Could not load balance page</i18n.Translate>} + error={error} /> ); } -export interface BalanceViewProps { - balances: Balance[]; - goToWalletManualWithdraw: () => Promise<void>; - goToAddAction: () => Promise<void>; - goToWalletDeposit: (currency: string) => Promise<void>; - goToWalletHistory: (currency: string) => Promise<void>; + +function ActionView({ cancel }: State.Action): VNode { + return <AddNewActionView onCancel={cancel.onClick!} />; } -export function BalanceView({ - balances, - goToWalletManualWithdraw, - goToWalletDeposit, - goToWalletHistory, - goToAddAction, -}: BalanceViewProps): VNode { +export function BalanceView(state: State.Balances): VNode { const { i18n } = useTranslationContext(); - const currencyWithNonZeroAmount = balances + const currencyWithNonZeroAmount = state.balances .filter((b) => !Amounts.isZero(b.available)) .map((b) => b.available.split(":")[0]); - if (balances.length === 0) { + if (state.balances.length === 0) { return ( - <NoBalanceHelp goToWalletManualWithdraw={goToWalletManualWithdraw} /> + <NoBalanceHelp + goToWalletManualWithdraw={state.goToWalletManualWithdraw} + /> ); } @@ -111,23 +164,26 @@ export function BalanceView({ <Fragment> <section> <BalanceTable - balances={balances} - goToWalletHistory={goToWalletHistory} + balances={state.balances} + goToWalletHistory={state.goToWalletHistory} /> </section> <footer style={{ justifyContent: "space-between" }}> - <Button variant="contained" onClick={goToWalletManualWithdraw}> + <Button + variant="contained" + onClick={state.goToWalletManualWithdraw.onClick} + > <i18n.Translate>Withdraw</i18n.Translate> </Button> {currencyWithNonZeroAmount.length > 0 && ( <MultiActionButton label={(s) => <i18n.Translate>Deposit {s}</i18n.Translate>} actions={currencyWithNonZeroAmount} - onClick={(c) => goToWalletDeposit(c)} + onClick={(c) => state.goToWalletDeposit(c)} /> )} <JustInDevMode> - <Button onClick={goToAddAction}> + <Button onClick={state.addAction.onClick}> <i18n.Translate>Enter URI</i18n.Translate> </Button> </JustInDevMode> diff --git a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx index 2fe1f4ff7..d9b960748 100644 --- a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx +++ b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx @@ -17,13 +17,14 @@ import { css } from "@linaria/core"; import { Fragment, h, VNode } from "preact"; import { Alert } from "../mui/Alert.js"; import { Button } from "../mui/Button.js"; +import { ButtonHandler } from "../mui/handlers.js"; import { Paper } from "../mui/Paper.js"; import { Typography } from "../mui/Typography.js"; export function NoBalanceHelp({ goToWalletManualWithdraw, }: { - goToWalletManualWithdraw: () => Promise<void>; + goToWalletManualWithdraw: ButtonHandler; }): VNode { return ( <Paper @@ -37,7 +38,7 @@ export function NoBalanceHelp({ fullWidth color="warning" variant="outlined" - onClick={goToWalletManualWithdraw} + onClick={goToWalletManualWithdraw.onClick} > <Typography>Withdraw</Typography> </Button> |