From 0b4976601fe2ecb0462fe72ae188b5cbba06d9cc Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 16 Jun 2021 18:21:03 -0300 Subject: components renaming to follow react pattern --- .../src/components/DebugCheckbox.tsx | 47 ++ .../src/hooks/useExtendedPermissions.ts | 53 ++ .../src/hooks/useExtendedPermissions.tsx | 24 - .../src/hooks/useTalerActionURL.ts | 93 +++ .../src/popup/Balance.tsx | 173 ++++ .../taler-wallet-webextension/src/popup/Debug.tsx | 63 ++ .../src/popup/History.tsx | 227 ++++++ .../src/popup/Settings.tsx | 34 + .../src/popup/Transaction.stories.tsx | 198 +++++ .../src/popup/Transaction.tsx | 327 ++++++++ .../src/popup/popup.stories.tsx | 197 ----- .../taler-wallet-webextension/src/popup/popup.tsx | 899 +-------------------- .../src/popupEntryPoint.tsx | 43 +- .../taler-wallet-webextension/src/wallet/Pay.tsx | 224 +++++ .../src/wallet/Refund.tsx | 89 ++ .../taler-wallet-webextension/src/wallet/Tip.tsx | 97 +++ .../src/wallet/Welcome.tsx | 45 ++ .../src/wallet/Withdraw.stories.tsx | 66 ++ .../src/wallet/Withdraw.tsx | 161 ++++ .../taler-wallet-webextension/src/wallet/pay.tsx | 235 ------ .../src/wallet/refund.tsx | 108 --- .../taler-wallet-webextension/src/wallet/tip.tsx | 109 --- .../src/wallet/welcome.tsx | 83 -- .../src/wallet/withdraw.stories.tsx | 66 -- .../src/wallet/withdraw.tsx | 173 ---- .../src/walletEntryPoint.tsx | 20 +- 26 files changed, 1922 insertions(+), 1932 deletions(-) create mode 100644 packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx create mode 100644 packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts delete mode 100644 packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx create mode 100644 packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts create mode 100644 packages/taler-wallet-webextension/src/popup/Balance.tsx create mode 100644 packages/taler-wallet-webextension/src/popup/Debug.tsx create mode 100644 packages/taler-wallet-webextension/src/popup/History.tsx create mode 100644 packages/taler-wallet-webextension/src/popup/Settings.tsx create mode 100644 packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx create mode 100644 packages/taler-wallet-webextension/src/popup/Transaction.tsx delete mode 100644 packages/taler-wallet-webextension/src/popup/popup.stories.tsx create mode 100644 packages/taler-wallet-webextension/src/wallet/Pay.tsx create mode 100644 packages/taler-wallet-webextension/src/wallet/Refund.tsx create mode 100644 packages/taler-wallet-webextension/src/wallet/Tip.tsx create mode 100644 packages/taler-wallet-webextension/src/wallet/Welcome.tsx create mode 100644 packages/taler-wallet-webextension/src/wallet/Withdraw.stories.tsx create mode 100644 packages/taler-wallet-webextension/src/wallet/Withdraw.tsx delete mode 100644 packages/taler-wallet-webextension/src/wallet/pay.tsx delete mode 100644 packages/taler-wallet-webextension/src/wallet/refund.tsx delete mode 100644 packages/taler-wallet-webextension/src/wallet/tip.tsx delete mode 100644 packages/taler-wallet-webextension/src/wallet/welcome.tsx delete mode 100644 packages/taler-wallet-webextension/src/wallet/withdraw.stories.tsx delete mode 100644 packages/taler-wallet-webextension/src/wallet/withdraw.tsx (limited to 'packages/taler-wallet-webextension/src') diff --git a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx new file mode 100644 index 000000000..7534629fb --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx @@ -0,0 +1,47 @@ +/* + This file is part of TALER + (C) 2016 GNUnet e.V. + + 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. + + 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 + TALER; see the file COPYING. If not, see + */ + + import { JSX } from "preact"; + +export function DebugCheckbox({ enabled, onToggle }: { enabled: boolean; onToggle: () => void; }): JSX.Element { + return ( +
+ + + + (Enabling this option below will make using the wallet faster, but + requires more permissions from your browser.) + +
+ ); +} diff --git a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts new file mode 100644 index 000000000..809863dc5 --- /dev/null +++ b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts @@ -0,0 +1,53 @@ +import { useState, useEffect } from "preact/hooks"; +import * as wxApi from "../wxApi"; +import { getPermissionsApi } from "../compat"; +import { extendedPermissions } from "../permissions"; + + +export function useExtendedPermissions(): [boolean, () => void] { + const [enabled, setEnabled] = useState(false); + + const toggle = () => { + setEnabled(v => !v); + handleExtendedPerm(enabled).then(result => { + setEnabled(result); + }); + }; + + useEffect(() => { + async function getExtendedPermValue(): Promise { + const res = await wxApi.getExtendedPermissions(); + setEnabled(res.newValue); + } + getExtendedPermValue(); + }, []); + return [enabled, toggle]; +} + +async function handleExtendedPerm(isEnabled: boolean): Promise { + let nextVal: boolean | undefined; + + if (!isEnabled) { + const granted = await new Promise((resolve, reject) => { + // We set permissions here, since apparently FF wants this to be done + // as the result of an input event ... + getPermissionsApi().request(extendedPermissions, (granted: boolean) => { + if (chrome.runtime.lastError) { + console.error("error requesting permissions"); + console.error(chrome.runtime.lastError); + reject(chrome.runtime.lastError); + return; + } + console.log("permissions granted:", granted); + resolve(granted); + }); + }); + const res = await wxApi.setExtendedPermissions(granted); + nextVal = res.newValue; + } else { + const res = await wxApi.setExtendedPermissions(false); + nextVal = res.newValue; + } + console.log("new permissions applied:", nextVal ?? false); + return nextVal ?? false +} \ No newline at end of file diff --git a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx deleted file mode 100644 index f5c788cf6..000000000 --- a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useState, useEffect } from "preact/hooks"; -import * as wxApi from "../wxApi"; -import { handleExtendedPerm } from "../wallet/welcome"; - - -export function useExtendedPermissions(): [boolean, () => void] { - const [enabled, setEnabled] = useState(false); - - const toggle = () => { - setEnabled(v => !v); - handleExtendedPerm(enabled).then(result => { - setEnabled(result); - }); - }; - - useEffect(() => { - async function getExtendedPermValue(): Promise { - const res = await wxApi.getExtendedPermissions(); - setEnabled(res.newValue); - } - getExtendedPermValue(); - }, []); - return [enabled, toggle]; -} diff --git a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts new file mode 100644 index 000000000..b884ca943 --- /dev/null +++ b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts @@ -0,0 +1,93 @@ +import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util"; +import { useEffect, useState } from "preact/hooks"; + +export function useTalerActionURL(): [string | undefined, (s: boolean) => void] { + const [talerActionUrl, setTalerActionUrl] = useState( + undefined + ); + const [dismissed, setDismissed] = useState(false); + useEffect(() => { + async function check(): Promise { + const talerUri = await findTalerUriInActiveTab(); + if (talerUri) { + const actionUrl = actionForTalerUri(talerUri); + setTalerActionUrl(actionUrl); + } + } + check(); + }, []); + const url = dismissed ? undefined : talerActionUrl; + return [url, setDismissed]; +} + +function actionForTalerUri(talerUri: string): string | undefined { + const uriType = classifyTalerUri(talerUri); + switch (uriType) { + case TalerUriType.TalerWithdraw: + return makeExtensionUrlWithParams("static/wallet.html#/withdraw", { + talerWithdrawUri: talerUri, + }); + case TalerUriType.TalerPay: + return makeExtensionUrlWithParams("static/wallet.html#/pay", { + talerPayUri: talerUri, + }); + case TalerUriType.TalerTip: + return makeExtensionUrlWithParams("static/wallet.html#/tip", { + talerTipUri: talerUri, + }); + case TalerUriType.TalerRefund: + return makeExtensionUrlWithParams("static/wallet.html#/refund", { + talerRefundUri: talerUri, + }); + case TalerUriType.TalerNotifyReserve: + // FIXME: implement + break; + default: + console.warn( + "Response with HTTP 402 has Taler header, but header value is not a taler:// URI.", + ); + break; + } + return undefined; +} + +function makeExtensionUrlWithParams( + url: string, + params?: { [name: string]: string | undefined }, +): string { + const innerUrl = new URL(chrome.extension.getURL("/" + url)); + if (params) { + for (const key in params) { + const p = params[key]; + if (p) { + innerUrl.searchParams.set(key, p); + } + } + } + return innerUrl.href; +} + +async function findTalerUriInActiveTab(): Promise { + return new Promise((resolve, reject) => { + chrome.tabs.executeScript( + { + code: ` + (() => { + let x = document.querySelector("a[href^='taler://'") || document.querySelector("a[href^='taler+http://'"); + return x ? x.href.toString() : null; + })(); + `, + allFrames: false, + }, + (result) => { + if (chrome.runtime.lastError) { + console.error(chrome.runtime.lastError); + resolve(undefined); + return; + } + console.log("got result", result); + resolve(result[0]); + }, + ); + }); +} diff --git a/packages/taler-wallet-webextension/src/popup/Balance.tsx b/packages/taler-wallet-webextension/src/popup/Balance.tsx new file mode 100644 index 000000000..77d2c4201 --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/Balance.tsx @@ -0,0 +1,173 @@ +/* + This file is part of TALER + (C) 2016 GNUnet e.V. + + 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. + + 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 + TALER; see the file COPYING. If not, see + */ + +import { + Amounts, + BalancesResponse, + Balance, i18n, AmountJson, amountFractionalBase +} from "@gnu-taler/taler-util"; +import { Component, JSX } from "preact"; +import { PageLink, renderAmount } from "../renderHtml"; +import * as wxApi from "../wxApi"; + + +/** + * Render an amount as a large number with a small currency symbol. + */ +function bigAmount(amount: AmountJson): JSX.Element { + const v = amount.value + amount.fraction / amountFractionalBase; + return ( + + {v}{" "} + {amount.currency} + + ); +} + +function EmptyBalanceView(): JSX.Element { + return ( +

+ You have no balance to show. Need some{" "} + help getting started? +

+ ); +} + + +export class BalancePage extends Component { + private balance?: BalancesResponse; + private gotError = false; + private canceler: (() => void) | undefined = undefined; + private unmount = false; + private updateBalanceRunning = false; + + componentWillMount(): void { + this.canceler = wxApi.onUpdateNotification(() => this.updateBalance()); + this.updateBalance(); + } + + componentWillUnmount(): void { + console.log("component WalletBalanceView will unmount"); + if (this.canceler) { + this.canceler(); + } + this.unmount = true; + } + + async updateBalance(): Promise { + if (this.updateBalanceRunning) { + return; + } + this.updateBalanceRunning = true; + let balance: BalancesResponse; + try { + balance = await wxApi.getBalance(); + } catch (e) { + if (this.unmount) { + return; + } + this.gotError = true; + console.error("could not retrieve balances", e); + this.setState({}); + return; + } finally { + this.updateBalanceRunning = false; + } + if (this.unmount) { + return; + } + this.gotError = false; + console.log("got balance", balance); + this.balance = balance; + this.setState({}); + } + + formatPending(entry: Balance): JSX.Element { + let incoming: JSX.Element | undefined; + let payment: JSX.Element | undefined; + + const available = Amounts.parseOrThrow(entry.available); + const pendingIncoming = Amounts.parseOrThrow(entry.pendingIncoming); + const pendingOutgoing = Amounts.parseOrThrow(entry.pendingOutgoing); + + console.log( + "available: ", + entry.pendingIncoming ? renderAmount(entry.available) : null + ); + console.log( + "incoming: ", + entry.pendingIncoming ? renderAmount(entry.pendingIncoming) : null + ); + + if (!Amounts.isZero(pendingIncoming)) { + incoming = ( + + + {"+"} + {renderAmount(entry.pendingIncoming)} + {" "} + incoming + + ); + } + + const l = [incoming, payment].filter((x) => x !== undefined); + if (l.length === 0) { + return ; + } + + if (l.length === 1) { + return ({l}); + } + return ( + + ({l[0]}, {l[1]}) + + ); + } + + render(): JSX.Element { + const wallet = this.balance; + if (this.gotError) { + return ( +
+

{i18n.str`Error: could not retrieve balance information.`}

+

+ Click here for help and + diagnostics. +

+
+ ); + } + if (!wallet) { + return ; + } + + const listing = wallet.balances.map((entry) => { + const av = Amounts.parseOrThrow(entry.available); + return ( +

+ {bigAmount(av)} {this.formatPending(entry)} +

+ ); + }); + return listing.length > 0 ? ( +
{listing}
+ ) : ( + + ); + } +} diff --git a/packages/taler-wallet-webextension/src/popup/Debug.tsx b/packages/taler-wallet-webextension/src/popup/Debug.tsx new file mode 100644 index 000000000..073dac2ca --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/Debug.tsx @@ -0,0 +1,63 @@ +/* + This file is part of TALER + (C) 2016 GNUnet e.V. + + 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. + + 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 + TALER; see the file COPYING. If not, see + */ + +import { JSX } from "preact"; +import { Diagnostics } from "../components/Diagnostics"; +import * as wxApi from "../wxApi"; + + +export function DebugPage(props: any): JSX.Element { + return ( +
+

Debug tools:

+ +
+ + + +
+ ); +} + +export function reload(): void { + try { + chrome.runtime.reload(); + window.close(); + } catch (e) { + // Functionality missing in firefox, ignore! + } +} + +export async function confirmReset(): Promise { + if ( + confirm( + "Do you want to IRREVOCABLY DESTROY everything inside your" + + " wallet and LOSE ALL YOUR COINS?", + ) + ) { + await wxApi.resetDb(); + window.close(); + } +} + +export function openExtensionPage(page: string) { + return () => { + chrome.tabs.create({ + url: chrome.extension.getURL(page), + }); + }; +} + diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx b/packages/taler-wallet-webextension/src/popup/History.tsx new file mode 100644 index 000000000..ffcec5e41 --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/History.tsx @@ -0,0 +1,227 @@ +/* + This file is part of TALER + (C) 2016 GNUnet e.V. + + 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. + + 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 + TALER; see the file COPYING. If not, see + */ + +import { AmountString, Timestamp, Transaction, TransactionsResponse, TransactionType } from "@gnu-taler/taler-util"; +import { JSX } from "preact"; +import { useEffect, useState } from "preact/hooks"; +import * as wxApi from "../wxApi"; +import { Pages } from "./popup"; + + +export function HistoryPage(props: any): JSX.Element { + const [transactions, setTransactions] = useState< + TransactionsResponse | undefined + >(undefined); + + useEffect(() => { + const fetchData = async (): Promise => { + const res = await wxApi.getTransactions(); + setTransactions(res); + }; + fetchData(); + }, []); + + if (!transactions) { + return
Loading ...
; + } + + const txs = [...transactions.transactions].reverse(); + + return ( +
+ {txs.map((tx, i) => ( + + ))} +
+ ); +} + +function TransactionItem(props: { tx: Transaction }): JSX.Element { + const tx = props.tx; + switch (tx.type) { + case TransactionType.Withdrawal: + return ( + + ); + case TransactionType.Payment: + return ( + + ); + case TransactionType.Refund: + return ( + + ); + case TransactionType.Tip: + return ( + + ); + case TransactionType.Refresh: + return ( + + ); + case TransactionType.Deposit: + return ( + + ); + } +} + +function TransactionLayout(props: TransactionLayoutProps): JSX.Element { + const date = new Date(props.timestamp.t_ms); + const dateStr = date.toLocaleString([], { + dateStyle: "medium", + timeStyle: "short", + } as any); + return ( +
+ +
+
{dateStr}
+
+ {props.title} + {props.pending ? ( + (Pending) + ) : null} +
+ +
{props.subtitle}
+
+ +
+ ); +} + +interface TransactionLayoutProps { + debitCreditIndicator: "debit" | "credit" | "unknown"; + amount: AmountString | "unknown"; + timestamp: Timestamp; + title: string; + id: string; + subtitle: string; + iconPath: string; + pending: boolean; +} + +interface TransactionAmountProps { + debitCreditIndicator: "debit" | "credit" | "unknown"; + amount: AmountString | "unknown"; + pending: boolean; +} + +function TransactionAmount(props: TransactionAmountProps): JSX.Element { + const [currency, amount] = props.amount.split(":"); + let sign: string; + switch (props.debitCreditIndicator) { + case "credit": + sign = "+"; + break; + case "debit": + sign = "-"; + break; + case "unknown": + sign = ""; + } + const style: JSX.AllCSSProperties = { + marginLeft: "auto", + display: "flex", + flexDirection: "column", + alignItems: "center", + alignSelf: "center" + }; + if (props.pending) { + style.color = "gray"; + } + return ( +
+
+ {sign} + {amount} +
+
{currency}
+
+ ); +} + diff --git a/packages/taler-wallet-webextension/src/popup/Settings.tsx b/packages/taler-wallet-webextension/src/popup/Settings.tsx new file mode 100644 index 000000000..5028b597c --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/Settings.tsx @@ -0,0 +1,34 @@ +/* + This file is part of TALER + (C) 2016 GNUnet e.V. + + 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. + + 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 + TALER; see the file COPYING. If not, see +*/ + + +import { PermissionsCheckbox } from "../components/PermissionsCheckbox"; +import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; + + +export function SettingsPage() { + const [permissionsEnabled, togglePermissions] = useExtendedPermissions(); + return ( +
+

Permissions

+ + {/* +

Developer mode

+ + */} +
+ ); +} diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx new file mode 100644 index 000000000..3df2687fd --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx @@ -0,0 +1,198 @@ +/* + This file is part of GNU Taler + (C) 2021 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 + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ + +import { + PaymentStatus, + TransactionCommon, TransactionDeposit, TransactionPayment, + TransactionRefresh, TransactionRefund, TransactionTip, TransactionType, + TransactionWithdrawal, + WithdrawalType +} from '@gnu-taler/taler-util'; +import { FunctionalComponent } from 'preact'; +import { TransactionView as TestedComponent } from './Transaction'; + +export default { + title: 'popup/transaction/details', + component: TestedComponent, + decorators: [ + (Story: any) =>
+ + + +
+ +
+
+ ], +}; + +const commonTransaction = { + amountRaw: 'USD:10', + amountEffective: 'USD:9', + pending: false, + timestamp: { + t_ms: new Date().getTime() + }, + transactionId: '12', +} as TransactionCommon + +const exampleData = { + withdraw: { + ...commonTransaction, + type: TransactionType.Withdrawal, + exchangeBaseUrl: 'http://exchange.taler', + withdrawalDetails: { + confirmed: false, + exchangePaytoUris: ['payto://x-taler-bank/bank/account'], + type: WithdrawalType.ManualTransfer, + } + } as TransactionWithdrawal, + payment: { + ...commonTransaction, + amountEffective: 'USD:11', + type: TransactionType.Payment, + info: { + contractTermsHash: 'ASDZXCASD', + merchant: { + name: 'the merchant', + }, + orderId: '#12345', + products: [], + summary: 'the summary', + fulfillmentMessage: '', + }, + proposalId: '1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0', + status: PaymentStatus.Accepted, + } as TransactionPayment, + deposit: { + ...commonTransaction, + type: TransactionType.Deposit, + depositGroupId: '#groupId', + targetPaytoUri: 'payto://x-taler-bank/bank/account', + } as TransactionDeposit, + refresh: { + ...commonTransaction, + type: TransactionType.Refresh, + exchangeBaseUrl: 'http://exchange.taler', + } as TransactionRefresh, + tip: { + ...commonTransaction, + type: TransactionType.Tip, + merchantBaseUrl: 'http://merchant.taler', + } as TransactionTip, + refund: { + ...commonTransaction, + type: TransactionType.Refund, + refundedTransactionId: 'payment:1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0', + info: { + contractTermsHash: 'ASDZXCASD', + merchant: { + name: 'the merchant', + }, + orderId: '#12345', + products: [], + summary: 'the summary', + fulfillmentMessage: '', + }, + } as TransactionRefund, +} + +function createExample(Component: FunctionalComponent, props: Partial) { + const r = (args: any) => + r.args = props + return r +} + +export const NotYetLoaded = createExample(TestedComponent,{}); + +export const Withdraw = createExample(TestedComponent,{ + transaction: exampleData.withdraw +}); + +export const WithdrawPending = createExample(TestedComponent,{ + transaction: { ...exampleData.withdraw, pending: true }, +}); + + +export const Payment = createExample(TestedComponent,{ + transaction: exampleData.payment +}); + +export const PaymentPending = createExample(TestedComponent,{ + transaction: { ...exampleData.payment, pending: true }, +}); + +export const PaymentWithProducts = createExample(TestedComponent,{ + transaction: { + ...exampleData.payment, + info: { + ...exampleData.payment.info, + products: [{ + description: 't-shirt', + }, { + description: 'beer', + }] + } + } as TransactionPayment, +}); + + +export const Deposit = createExample(TestedComponent,{ + transaction: exampleData.deposit +}); + +export const DepositPending = createExample(TestedComponent,{ + transaction: { ...exampleData.deposit, pending: true } +}); + +export const Refresh = createExample(TestedComponent,{ + transaction: exampleData.refresh +}); + +export const Tip = createExample(TestedComponent,{ + transaction: exampleData.tip +}); + +export const TipPending = createExample(TestedComponent,{ + transaction: { ...exampleData.tip, pending: true } +}); + +export const Refund = createExample(TestedComponent,{ + transaction: exampleData.refund +}); + +export const RefundPending = createExample(TestedComponent,{ + transaction: { ...exampleData.refund, pending: true } +}); + +export const RefundWithProducts = createExample(TestedComponent,{ + transaction: { + ...exampleData.refund, + info: { + ...exampleData.refund.info, + products: [{ + description: 't-shirt', + }, { + description: 'beer', + }] + } + } as TransactionRefund, +}); diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.tsx new file mode 100644 index 000000000..b1179228e --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/Transaction.tsx @@ -0,0 +1,327 @@ +/* + This file is part of TALER + (C) 2016 GNUnet e.V. + + 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. + + 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 + TALER; see the file COPYING. If not, see + */ + +import { Amounts, i18n, Transaction, TransactionType } from "@gnu-taler/taler-util"; +import { format } from "date-fns"; +import { JSX } from "preact"; +import { route } from 'preact-router'; +import { useEffect, useState } from "preact/hooks"; +import * as wxApi from "../wxApi"; +import { Pages } from "./popup"; + + +export function TransactionPage({ tid }: { tid: string; }): JSX.Element { + const [transaction, setTransaction] = useState< + Transaction | undefined + >(undefined); + + useEffect(() => { + const fetchData = async (): Promise => { + const res = await wxApi.getTransactions(); + const ts = res.transactions.filter(t => t.transactionId === tid); + if (ts.length === 1) { + setTransaction(ts[0]); + } else { + route(Pages.history); + } + }; + fetchData(); + }, []); + + return wxApi.deleteTransaction(tid).then(_ => history.go(-1))} + onBack={() => { history.go(-1); }} />; +} + +export interface WalletTransactionProps { + transaction?: Transaction, + onDelete: () => void, + onBack: () => void, +} + +export function TransactionView({ transaction, onDelete, onBack }: WalletTransactionProps) { + if (!transaction) { + return
Loading ...
; + } + + function Footer() { + return
+ +
+ + +
+ +
+ } + + function Pending() { + if (!transaction?.pending) return null + return (pending...) + } + + if (transaction.type === TransactionType.Withdrawal) { + return ( +
+
+

Withdrawal

+

+ From {transaction.exchangeBaseUrl} +

+ + + + + + + + + + + + + + + + + +
Amount subtracted{transaction.amountRaw}
Amount received{transaction.amountEffective}
Exchange fee{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountRaw), + Amounts.parseOrThrow(transaction.amountEffective), + ).amount + )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
+
+
+
+ ); + } + + if (transaction.type === TransactionType.Payment) { + return ( +
+
+

Payment ({transaction.proposalId.substring(0, 10)}...)

+

+ To {transaction.info.merchant.name} +

+ + + + + + + + + + {transaction.info.products && transaction.info.products.length > 0 && + + + + + } + + + + + + + + + + + + + + + + +
Order id{transaction.info.orderId}
Summary{transaction.info.summary}
Products
    + {transaction.info.products.map(p => +
  1. {p.description}
    2. + )}
Order amount{transaction.amountRaw}
Order amount and fees{transaction.amountEffective}
Exchange fee{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountEffective), + Amounts.parseOrThrow(transaction.amountRaw), + ).amount + )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
+
+
+
+ ); + } + + if (transaction.type === TransactionType.Deposit) { + return ( +
+
+

Deposit ({transaction.depositGroupId})

+

+ To {transaction.targetPaytoUri} +

+ + + + + + + + + + + + + + + + + +
Amount deposit{transaction.amountRaw}
Amount deposit and fees{transaction.amountEffective}
Exchange fee{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountEffective), + Amounts.parseOrThrow(transaction.amountRaw), + ).amount + )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
+
+
+
+ ); + } + + if (transaction.type === TransactionType.Refresh) { + return ( +
+
+

Refresh

+

+ From {transaction.exchangeBaseUrl} +

+ + + + + + + + + + + + + +
Amount refreshed{transaction.amountRaw}
Fees{transaction.amountEffective}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
+
+
+
+ ); + } + + if (transaction.type === TransactionType.Tip) { + return ( +
+
+

Tip

+

+ From {transaction.merchantBaseUrl} +

+ + + + + + + + + + + + + + + + + +
Amount deduce{transaction.amountRaw}
Amount received{transaction.amountEffective}
Exchange fee{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountRaw), + Amounts.parseOrThrow(transaction.amountEffective), + ).amount + )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
+
+
+
+ ); + } + + const TRANSACTION_FROM_REFUND = /[a-z]*:([\w]{10}).*/ + if (transaction.type === TransactionType.Refund) { + return ( +
+
+

Refund ({TRANSACTION_FROM_REFUND.exec(transaction.refundedTransactionId)![1]}...)

+

+ From {transaction.info.merchant.name} +

+ + + + + + + + + + {transaction.info.products && transaction.info.products.length > 0 && + + + + + } + + + + + + + + + + + + + + + + +
Order id{transaction.info.orderId}
Summary{transaction.info.summary}
Products
    + {transaction.info.products.map(p => +
  1. {p.description}
    2. + )}
Amount deduce{transaction.amountRaw}
Amount received{transaction.amountEffective}
Exchange fee{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountRaw), + Amounts.parseOrThrow(transaction.amountEffective), + ).amount + )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
+
+
+
+ ); + } + + + return
+} diff --git a/packages/taler-wallet-webextension/src/popup/popup.stories.tsx b/packages/taler-wallet-webextension/src/popup/popup.stories.tsx deleted file mode 100644 index 0cb51a336..000000000 --- a/packages/taler-wallet-webextension/src/popup/popup.stories.tsx +++ /dev/null @@ -1,197 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021 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 - */ - -/** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ - -import { - PaymentStatus, - TransactionCommon, TransactionDeposit, TransactionPayment, - TransactionRefresh, TransactionRefund, TransactionTip, TransactionType, - TransactionWithdrawal, - WithdrawalType -} from '@gnu-taler/taler-util'; -import { WalletTransactionView as Component } from './popup'; - -export default { - title: 'popup/transaction details', - component: Component, - decorators: [ - (Story: any) =>
- - - -
- -
-
- ], -}; - -const commonTransaction = { - amountRaw: 'USD:10', - amountEffective: 'USD:9', - pending: false, - timestamp: { - t_ms: new Date().getTime() - }, - transactionId: '12', -} as TransactionCommon - -const exampleData = { - withdraw: { - ...commonTransaction, - type: TransactionType.Withdrawal, - exchangeBaseUrl: 'http://exchange.taler', - withdrawalDetails: { - confirmed: false, - exchangePaytoUris: ['payto://x-taler-bank/bank/account'], - type: WithdrawalType.ManualTransfer, - } - } as TransactionWithdrawal, - payment: { - ...commonTransaction, - amountEffective: 'USD:11', - type: TransactionType.Payment, - info: { - contractTermsHash: 'ASDZXCASD', - merchant: { - name: 'the merchant', - }, - orderId: '#12345', - products: [], - summary: 'the summary', - fulfillmentMessage: '', - }, - proposalId: '1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0', - status: PaymentStatus.Accepted, - } as TransactionPayment, - deposit: { - ...commonTransaction, - type: TransactionType.Deposit, - depositGroupId: '#groupId', - targetPaytoUri: 'payto://x-taler-bank/bank/account', - } as TransactionDeposit, - refresh: { - ...commonTransaction, - type: TransactionType.Refresh, - exchangeBaseUrl: 'http://exchange.taler', - } as TransactionRefresh, - tip: { - ...commonTransaction, - type: TransactionType.Tip, - merchantBaseUrl: 'http://merchant.taler', - } as TransactionTip, - refund: { - ...commonTransaction, - type: TransactionType.Refund, - refundedTransactionId: 'payment:1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0', - info: { - contractTermsHash: 'ASDZXCASD', - merchant: { - name: 'the merchant', - }, - orderId: '#12345', - products: [], - summary: 'the summary', - fulfillmentMessage: '', - }, - } as TransactionRefund, -} - -function dynamic(props: any) { - const r = (args: any) => - r.args = props - return r -} - -export const NotYetLoaded = dynamic({}); - -export const Withdraw = dynamic({ - transaction: exampleData.withdraw -}); - -export const WithdrawPending = dynamic({ - transaction: { ...exampleData.withdraw, pending: true }, -}); - - -export const Payment = dynamic({ - transaction: exampleData.payment -}); - -export const PaymentPending = dynamic({ - transaction: { ...exampleData.payment, pending: true }, -}); - -export const PaymentWithProducts = dynamic({ - transaction: { - ...exampleData.payment, - info: { - ...exampleData.payment.info, - products: [{ - description: 't-shirt', - }, { - description: 'beer', - }] - } - } as TransactionPayment, -}); - - -export const Deposit = dynamic({ - transaction: exampleData.deposit -}); - -export const DepositPending = dynamic({ - transaction: { ...exampleData.deposit, pending: true } -}); - -export const Refresh = dynamic({ - transaction: exampleData.refresh -}); - -export const Tip = dynamic({ - transaction: exampleData.tip -}); - -export const TipPending = dynamic({ - transaction: { ...exampleData.tip, pending: true } -}); - -export const Refund = dynamic({ - transaction: exampleData.refund -}); - -export const RefundPending = dynamic({ - transaction: { ...exampleData.refund, pending: true } -}); - -export const RefundWithProducts = dynamic({ - transaction: { - ...exampleData.refund, - info: { - ...exampleData.refund.info, - products: [{ - description: 't-shirt', - }, { - description: 'beer', - }] - } - } as TransactionRefund, -}); diff --git a/packages/taler-wallet-webextension/src/popup/popup.tsx b/packages/taler-wallet-webextension/src/popup/popup.tsx index 0f76d7728..95b87fad0 100644 --- a/packages/taler-wallet-webextension/src/popup/popup.tsx +++ b/packages/taler-wallet-webextension/src/popup/popup.tsx @@ -25,29 +25,9 @@ * Imports. */ import { - AmountJson, - Amounts, - BalancesResponse, - Balance, - classifyTalerUri, - TalerUriType, - TransactionsResponse, - Transaction, - TransactionType, - AmountString, - Timestamp, - amountFractionalBase, - i18n, + classifyTalerUri, i18n, TalerUriType } from "@gnu-taler/taler-util"; -import { format } from "date-fns"; -import { Component, ComponentChildren, Fragment, JSX } from "preact"; -import { route } from 'preact-router'; -import { useEffect, useState } from "preact/hooks"; -import { Diagnostics } from "../components/Diagnostics"; -import { PermissionsCheckbox } from "../components/PermissionsCheckbox"; -import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; -import { PageLink, renderAmount } from "../renderHtml"; -import * as wxApi from "../wxApi"; +import { ComponentChildren, JSX } from "preact"; export enum Pages { balance = '/balance', @@ -86,878 +66,3 @@ export function WalletNavBar({ current }: { current?: string }) { ); } -/** - * Render an amount as a large number with a small currency symbol. - */ -function bigAmount(amount: AmountJson): JSX.Element { - const v = amount.value + amount.fraction / amountFractionalBase; - return ( - - {v}{" "} - {amount.currency} - - ); -} - -function EmptyBalanceView(): JSX.Element { - return ( -

- You have no balance to show. Need some{" "} - help getting started? -

- ); -} - -export class WalletBalanceView extends Component { - private balance?: BalancesResponse; - private gotError = false; - private canceler: (() => void) | undefined = undefined; - private unmount = false; - private updateBalanceRunning = false; - - componentWillMount(): void { - this.canceler = wxApi.onUpdateNotification(() => this.updateBalance()); - this.updateBalance(); - } - - componentWillUnmount(): void { - console.log("component WalletBalanceView will unmount"); - if (this.canceler) { - this.canceler(); - } - this.unmount = true; - } - - async updateBalance(): Promise { - if (this.updateBalanceRunning) { - return; - } - this.updateBalanceRunning = true; - let balance: BalancesResponse; - try { - balance = await wxApi.getBalance(); - } catch (e) { - if (this.unmount) { - return; - } - this.gotError = true; - console.error("could not retrieve balances", e); - this.setState({}); - return; - } finally { - this.updateBalanceRunning = false; - } - if (this.unmount) { - return; - } - this.gotError = false; - console.log("got balance", balance); - this.balance = balance; - this.setState({}); - } - - formatPending(entry: Balance): JSX.Element { - let incoming: JSX.Element | undefined; - let payment: JSX.Element | undefined; - - const available = Amounts.parseOrThrow(entry.available); - const pendingIncoming = Amounts.parseOrThrow(entry.pendingIncoming); - const pendingOutgoing = Amounts.parseOrThrow(entry.pendingOutgoing); - - console.log( - "available: ", - entry.pendingIncoming ? renderAmount(entry.available) : null, - ); - console.log( - "incoming: ", - entry.pendingIncoming ? renderAmount(entry.pendingIncoming) : null, - ); - - if (!Amounts.isZero(pendingIncoming)) { - incoming = ( - - - {"+"} - {renderAmount(entry.pendingIncoming)} - {" "} - incoming - - ); - } - - const l = [incoming, payment].filter((x) => x !== undefined); - if (l.length === 0) { - return ; - } - - if (l.length === 1) { - return ({l}); - } - return ( - - ({l[0]}, {l[1]}) - - ); - } - - render(): JSX.Element { - const wallet = this.balance; - if (this.gotError) { - return ( -
-

{i18n.str`Error: could not retrieve balance information.`}

-

- Click here for help and - diagnostics. -

-
- ); - } - if (!wallet) { - return ; - } - console.log(wallet); - const listing = wallet.balances.map((entry) => { - const av = Amounts.parseOrThrow(entry.available); - return ( -

- {bigAmount(av)} {this.formatPending(entry)} -

- ); - }); - return listing.length > 0 ? ( -
{listing}
- ) : ( - - ); - } -} - -interface TransactionAmountProps { - debitCreditIndicator: "debit" | "credit" | "unknown"; - amount: AmountString | "unknown"; - pending: boolean; -} - -function TransactionAmount(props: TransactionAmountProps): JSX.Element { - const [currency, amount] = props.amount.split(":"); - let sign: string; - switch (props.debitCreditIndicator) { - case "credit": - sign = "+"; - break; - case "debit": - sign = "-"; - break; - case "unknown": - sign = ""; - } - const style: JSX.AllCSSProperties = { - marginLeft: "auto", - display: "flex", - flexDirection: "column", - alignItems: "center", - alignSelf: "center" - }; - if (props.pending) { - style.color = "gray"; - } - return ( -
-
- {sign} - {amount} -
-
{currency}
-
- ); -} - -interface TransactionLayoutProps { - debitCreditIndicator: "debit" | "credit" | "unknown"; - amount: AmountString | "unknown"; - timestamp: Timestamp; - title: string; - id: string; - subtitle: string; - iconPath: string; - pending: boolean; -} - -function TransactionLayout(props: TransactionLayoutProps): JSX.Element { - const date = new Date(props.timestamp.t_ms); - const dateStr = date.toLocaleString([], { - dateStyle: "medium", - timeStyle: "short", - } as any); - return ( -
- -
-
{dateStr}
-
- {props.title} - {props.pending ? ( - (Pending) - ) : null} -
- -
{props.subtitle}
-
- -
- ); -} - -function TransactionItem(props: { tx: Transaction }): JSX.Element { - const tx = props.tx; - switch (tx.type) { - case TransactionType.Withdrawal: - return ( - - ); - case TransactionType.Payment: - return ( - - ); - case TransactionType.Refund: - return ( - - ); - case TransactionType.Tip: - return ( - - ); - case TransactionType.Refresh: - return ( - - ); - case TransactionType.Deposit: - return ( - - ); - } -} - -export function WalletHistory(props: any): JSX.Element { - const [transactions, setTransactions] = useState< - TransactionsResponse | undefined - >(undefined); - - useEffect(() => { - const fetchData = async (): Promise => { - const res = await wxApi.getTransactions(); - setTransactions(res); - }; - fetchData(); - }, []); - - if (!transactions) { - return
Loading ...
; - } - - const txs = [...transactions.transactions].reverse(); - - return ( -
- {txs.map((tx, i) => ( - - ))} -
- ); -} - -interface WalletTransactionProps { - transaction?: Transaction, - onDelete: () => void, - onBack: () => void, -} - -export function WalletTransactionView({ transaction, onDelete, onBack }: WalletTransactionProps) { - if (!transaction) { - return
Loading ...
; - } - - function Footer() { - return
- -
- - -
- -
- } - - function Pending() { - if (!transaction?.pending) return null - return (pending...) - } - - if (transaction.type === TransactionType.Withdrawal) { - return ( -
-
-

Withdrawal

-

- From {transaction.exchangeBaseUrl} -

- - - - - - - - - - - - - - - - - -
Amount subtracted{transaction.amountRaw}
Amount received{transaction.amountEffective}
Exchange fee{Amounts.stringify( - Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount - )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
-
-
-
- ); - } - - if (transaction.type === TransactionType.Payment) { - return ( -
-
-

Payment ({transaction.proposalId.substring(0, 10)}...)

-

- To {transaction.info.merchant.name} -

- - - - - - - - - - {transaction.info.products && transaction.info.products.length > 0 && - - - - - } - - - - - - - - - - - - - - - - -
Order id{transaction.info.orderId}
Summary{transaction.info.summary}
Products
    - {transaction.info.products.map(p => -
  1. {p.description}
    2. - )}
Order amount{transaction.amountRaw}
Order amount and fees{transaction.amountEffective}
Exchange fee{Amounts.stringify( - Amounts.sub( - Amounts.parseOrThrow(transaction.amountEffective), - Amounts.parseOrThrow(transaction.amountRaw), - ).amount - )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
-
-
-
- ); - } - - if (transaction.type === TransactionType.Deposit) { - return ( -
-
-

Deposit ({transaction.depositGroupId})

-

- To {transaction.targetPaytoUri} -

- - - - - - - - - - - - - - - - - -
Amount deposit{transaction.amountRaw}
Amount deposit and fees{transaction.amountEffective}
Exchange fee{Amounts.stringify( - Amounts.sub( - Amounts.parseOrThrow(transaction.amountEffective), - Amounts.parseOrThrow(transaction.amountRaw), - ).amount - )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
-
-
-
- ); - } - - if (transaction.type === TransactionType.Refresh) { - return ( -
-
-

Refresh

-

- From {transaction.exchangeBaseUrl} -

- - - - - - - - - - - - - -
Amount refreshed{transaction.amountRaw}
Fees{transaction.amountEffective}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
-
-
-
- ); - } - - if (transaction.type === TransactionType.Tip) { - return ( -
-
-

Tip

-

- From {transaction.merchantBaseUrl} -

- - - - - - - - - - - - - - - - - -
Amount deduce{transaction.amountRaw}
Amount received{transaction.amountEffective}
Exchange fee{Amounts.stringify( - Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount - )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
-
-
-
- ); - } - - const TRANSACTION_FROM_REFUND = /[a-z]*:([\w]{10}).*/ - if (transaction.type === TransactionType.Refund) { - return ( -
-
-

Refund ({TRANSACTION_FROM_REFUND.exec(transaction.refundedTransactionId)![1]}...)

-

- From {transaction.info.merchant.name} -

- - - - - - - - - - {transaction.info.products && transaction.info.products.length > 0 && - - - - - } - - - - - - - - - - - - - - - - -
Order id{transaction.info.orderId}
Summary{transaction.info.summary}
Products
    - {transaction.info.products.map(p => -
  1. {p.description}
    2. - )}
Amount deduce{transaction.amountRaw}
Amount received{transaction.amountEffective}
Exchange fee{Amounts.stringify( - Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount - )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
-
-
-
- ); - } - - - return
-} - -export function WalletTransaction({ tid }: { tid: string }): JSX.Element { - const [transaction, setTransaction] = useState< - Transaction | undefined - >(undefined); - - useEffect(() => { - const fetchData = async (): Promise => { - const res = await wxApi.getTransactions(); - const ts = res.transactions.filter(t => t.transactionId === tid) - if (ts.length === 1) { - setTransaction(ts[0]); - } else { - route(Pages.history) - } - }; - fetchData(); - }, []); - - return wxApi.deleteTransaction(tid).then(_ => history.go(-1))} - onBack={() => { history.go(-1) }} - /> -} - -export function WalletSettings() { - const [permissionsEnabled, togglePermissions] = useExtendedPermissions() - return ( -
-

Permissions

- - {/* -

Developer mode

- - */} -
- ); -} - - -export function DebugCheckbox({ enabled, onToggle }: { enabled: boolean, onToggle: () => void }): JSX.Element { - return ( -
- - - - (Enabling this option below will make using the wallet faster, but - requires more permissions from your browser.) - -
- ); -} - -function reload(): void { - try { - chrome.runtime.reload(); - window.close(); - } catch (e) { - // Functionality missing in firefox, ignore! - } -} - -async function confirmReset(): Promise { - if ( - confirm( - "Do you want to IRREVOCABLY DESTROY everything inside your" + - " wallet and LOSE ALL YOUR COINS?", - ) - ) { - await wxApi.resetDb(); - window.close(); - } -} - -export function WalletDebug(props: any): JSX.Element { - return ( -
-

Debug tools:

- -
- - - -
- ); -} - -function openExtensionPage(page: string) { - return () => { - chrome.tabs.create({ - url: chrome.extension.getURL(page), - }); - }; -} - -// function openTab(page: string) { -// return (evt: React.SyntheticEvent) => { -// evt.preventDefault(); -// chrome.tabs.create({ -// url: page, -// }); -// }; -// } - -function makeExtensionUrlWithParams( - url: string, - params?: { [name: string]: string | undefined }, -): string { - const innerUrl = new URL(chrome.extension.getURL("/" + url)); - if (params) { - for (const key in params) { - const p = params[key]; - if (p) { - innerUrl.searchParams.set(key, p); - } - } - } - return innerUrl.href; -} - -export function actionForTalerUri(talerUri: string): string | undefined { - const uriType = classifyTalerUri(talerUri); - switch (uriType) { - case TalerUriType.TalerWithdraw: - return makeExtensionUrlWithParams("static/wallet.html#/withdraw", { - talerWithdrawUri: talerUri, - }); - case TalerUriType.TalerPay: - return makeExtensionUrlWithParams("static/wallet.html#/pay", { - talerPayUri: talerUri, - }); - case TalerUriType.TalerTip: - return makeExtensionUrlWithParams("static/wallet.html#/tip", { - talerTipUri: talerUri, - }); - case TalerUriType.TalerRefund: - return makeExtensionUrlWithParams("static/wallet.html#/refund", { - talerRefundUri: talerUri, - }); - case TalerUriType.TalerNotifyReserve: - // FIXME: implement - break; - default: - console.warn( - "Response with HTTP 402 has Taler header, but header value is not a taler:// URI.", - ); - break; - } - return undefined; -} - -export async function findTalerUriInActiveTab(): Promise { - return new Promise((resolve, reject) => { - chrome.tabs.executeScript( - { - code: ` - (() => { - let x = document.querySelector("a[href^='taler://'") || document.querySelector("a[href^='taler+http://'"); - return x ? x.href.toString() : null; - })(); - `, - allFrames: false, - }, - (result) => { - if (chrome.runtime.lastError) { - console.error(chrome.runtime.lastError); - resolve(undefined); - return; - } - console.log("got result", result); - resolve(result[0]); - }, - ); - }); -} - -// export function WalletPopup(): JSX.Element { -// const [talerActionUrl, setTalerActionUrl] = useState( -// undefined, -// ); -// const [dismissed, setDismissed] = useState(false); -// useEffect(() => { -// async function check(): Promise { -// const talerUri = await findTalerUriInActiveTab(); -// if (talerUri) { -// const actionUrl = actionForTalerUri(talerUri); -// setTalerActionUrl(actionUrl); -// } -// } -// check(); -// }, []); -// if (talerActionUrl && !dismissed) { -// return ( -//
-//

Taler Action

-//

This page has a Taler action.

-//

-// -//

-//

-// -//

-//
-// ); -// } -// return ( -//
-// {({ path }: any) => } -//
-// -// -// -// -// -// -// -//
-//
-// ); -// } - diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx index 926ae7aa7..6cc781aa7 100644 --- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx @@ -23,13 +23,17 @@ import { render } from "preact"; import { setupI18n } from "@gnu-taler/taler-util"; import { strings } from "./i18n/strings"; -import { useEffect, useState } from "preact/hooks"; +import { useEffect } from "preact/hooks"; import { - actionForTalerUri, findTalerUriInActiveTab, Pages, WalletBalanceView, WalletDebug, WalletHistory, - WalletNavBar, WalletSettings, WalletTransaction, WalletTransactionView -} from "./popup/popup"; + Pages, WalletNavBar} from "./popup/popup"; +import { HistoryPage } from "./popup/History"; +import { DebugPage } from "./popup/Debug"; +import { SettingsPage } from "./popup/Settings"; +import { TransactionPage } from "./popup/Transaction"; +import { BalancePage } from "./popup/Balance"; import Match from "preact-router/match"; import Router, { route, Route } from "preact-router"; +import { useTalerActionURL } from "./hooks/useTalerActionURL"; // import { Application } from "./Application"; function main(): void { @@ -53,25 +57,6 @@ if (document.readyState === "loading") { main(); } -function useTalerActionURL(): [string | undefined, (s: boolean) => void] { - const [talerActionUrl, setTalerActionUrl] = useState( - undefined, - ); - const [dismissed, setDismissed] = useState(false); - useEffect(() => { - async function check(): Promise { - const talerUri = await findTalerUriInActiveTab(); - if (talerUri) { - const actionUrl = actionForTalerUri(talerUri); - setTalerActionUrl(actionUrl); - } - } - check(); - }, []); - const url = dismissed ? undefined : talerActionUrl - return [url, setDismissed] -} - interface Props { url: string; onDismiss: (s: boolean) => void; @@ -105,11 +90,11 @@ function Application() { {({ path }: any) => }
- - - - - + + + + +
@@ -118,8 +103,6 @@ function Application() { } - - function Redirect({ to }: { to: string }): null { useEffect(() => { route(to, true) diff --git a/packages/taler-wallet-webextension/src/wallet/Pay.tsx b/packages/taler-wallet-webextension/src/wallet/Pay.tsx new file mode 100644 index 000000000..23b4e6c1a --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/Pay.tsx @@ -0,0 +1,224 @@ +/* + This file is part of TALER + (C) 2015 GNUnet e.V. + + 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. + + 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 + TALER; see the file COPYING. If not, see + */ + +/** + * Page shown to the user to confirm entering + * a contract. + */ + +/** + * Imports. + */ +// import * as i18n from "../i18n"; + +import { renderAmount, ProgressButton } from "../renderHtml"; +import * as wxApi from "../wxApi"; + +import { useState, useEffect } from "preact/hooks"; + +import { getJsonI18n, i18n } from "@gnu-taler/taler-util"; +import { + PreparePayResult, + ConfirmPayResult, + AmountJson, + PreparePayResultType, + Amounts, + ContractTerms, + ConfirmPayResultType, +} from "@gnu-taler/taler-util"; +import { JSX, VNode } from "preact"; + +interface Props { + talerPayUri?: string +} + +export function PayPage({ talerPayUri }: Props): JSX.Element { + const [payStatus, setPayStatus] = useState(undefined); + const [payResult, setPayResult] = useState(undefined); + const [payErrMsg, setPayErrMsg] = useState(""); + const [numTries, setNumTries] = useState(0); + const [loading, setLoading] = useState(false); + let totalFees: AmountJson | undefined = undefined; + + useEffect(() => { + if (!talerPayUri) return; + const doFetch = async (): Promise => { + const p = await wxApi.preparePay(talerPayUri); + setPayStatus(p); + }; + doFetch(); + }, [numTries, talerPayUri]); + + if (!talerPayUri) { + return missing pay uri + } + + if (!payStatus) { + return Loading payment information ...; + } + + let insufficientBalance = false; + if (payStatus.status == PreparePayResultType.InsufficientBalance) { + insufficientBalance = true; + } + + if (payStatus.status === PreparePayResultType.PaymentPossible) { + const amountRaw = Amounts.parseOrThrow(payStatus.amountRaw); + const amountEffective: AmountJson = Amounts.parseOrThrow( + payStatus.amountEffective, + ); + totalFees = Amounts.sub(amountEffective, amountRaw).amount; + } + + if ( + payStatus.status === PreparePayResultType.AlreadyConfirmed && + numTries === 0 + ) { + const fulfillmentUrl = payStatus.contractTerms.fulfillment_url; + if (fulfillmentUrl) { + return ( + + You have already paid for this article. Click{" "} + here to view it again. + + ); + } else { + + You have already paid for this article:{" "} + + {payStatus.contractTerms.fulfillment_message ?? "no message given"} + + ; + } + } + + const contractTerms: ContractTerms = payStatus.contractTerms; + + if (!contractTerms) { + return ( + + Error: did not get contract terms from merchant or wallet backend. + + ); + } + + let merchantName: VNode; + if (contractTerms.merchant && contractTerms.merchant.name) { + merchantName = {contractTerms.merchant.name}; + } else { + merchantName = (pub: {contractTerms.merchant_pub}); + } + + const amount = ( + {renderAmount(Amounts.parseOrThrow(contractTerms.amount))} + ); + + const doPayment = async (): Promise => { + if (payStatus.status !== "payment-possible") { + throw Error(`invalid state: ${payStatus.status}`); + } + const proposalId = payStatus.proposalId; + setNumTries(numTries + 1); + try { + setLoading(true); + const res = await wxApi.confirmPay(proposalId, undefined); + if (res.type !== ConfirmPayResultType.Done) { + throw Error("payment pending"); + } + const fu = res.contractTerms.fulfillment_url; + if (fu) { + document.location.href = fu; + } + setPayResult(res); + } catch (e) { + console.error(e); + setPayErrMsg(e.message); + } + }; + + if (payResult && payResult.type === ConfirmPayResultType.Done) { + if (payResult.contractTerms.fulfillment_message) { + const obj = { + fulfillment_message: payResult.contractTerms.fulfillment_message, + fulfillment_message_i18n: + payResult.contractTerms.fulfillment_message_i18n, + }; + const msg = getJsonI18n(obj, "fulfillment_message"); + return ( +
+

Payment succeeded.

+

{msg}

+
+ ); + } else { + return Redirecting ...; + } + } + + return ( +
+

+ + The merchant {merchantName} offers you to purchase: + +

+ {contractTerms.summary} +
+ {totalFees ? ( + + The total price is {amount} + (plus {renderAmount(totalFees)} fees). + + ) : ( + + The total price is {amount}. + + )} +

+ + {insufficientBalance ? ( +
+

+ Unable to pay: Your balance is insufficient. +

+
+ ) : null} + + {payErrMsg ? ( +
+

Payment failed: {payErrMsg}

+ +
+ ) : ( +
+ doPayment()} + > + {i18n.str`Confirm payment`} + +
+ )} +
+ ); +} + diff --git a/packages/taler-wallet-webextension/src/wallet/Refund.tsx b/packages/taler-wallet-webextension/src/wallet/Refund.tsx new file mode 100644 index 000000000..702217415 --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/Refund.tsx @@ -0,0 +1,89 @@ +/* + This file is part of TALER + (C) 2015-2016 GNUnet e.V. + + 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. + + 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 + TALER; see the file COPYING. If not, see + */ + +/** + * Page that shows refund status for purchases. + * + * @author Florian Dold + */ + +import * as wxApi from "../wxApi"; +import { AmountView } from "../renderHtml"; +import { + ApplyRefundResponse, + Amounts, +} from "@gnu-taler/taler-util"; +import { useEffect, useState } from "preact/hooks"; +import { JSX } from "preact/jsx-runtime"; + +interface Props { + talerRefundUri?: string +} + +export function RefundPage({ talerRefundUri }: Props): JSX.Element { + const [applyResult, setApplyResult] = useState(undefined); + const [errMsg, setErrMsg] = useState(undefined); + + useEffect(() => { + if (!talerRefundUri) return; + const doFetch = async (): Promise => { + try { + const result = await wxApi.applyRefund(talerRefundUri); + setApplyResult(result); + } catch (e) { + console.error(e); + setErrMsg(e.message); + console.log("err message", e.message); + } + }; + doFetch(); + }, [talerRefundUri]); + + console.log("rendering"); + + if (!talerRefundUri) { + return missing taler refund uri; + } + + if (errMsg) { + return Error: {errMsg}; + } + + if (!applyResult) { + return Updating refund status; + } + + return ( + <> +

Refund Status

+

+ The product {applyResult.info.summary} has received a total + effective refund of{" "} + . +

+ {applyResult.pendingAtExchange ? ( +

Refund processing is still in progress.

+ ) : null} + {!Amounts.isZero(applyResult.amountRefundGone) ? ( +

+ The refund amount of{" "} + + could not be applied. +

+ ) : null} + + ); +} diff --git a/packages/taler-wallet-webextension/src/wallet/Tip.tsx b/packages/taler-wallet-webextension/src/wallet/Tip.tsx new file mode 100644 index 000000000..708e8940b --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/Tip.tsx @@ -0,0 +1,97 @@ +/* + This file is part of TALER + (C) 2017 GNUnet e.V. + + 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. + + 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 + TALER; see the file COPYING. If not, see + */ + +/** + * Page shown to the user to accept or ignore a tip from a merchant. + * + * @author Florian Dold + */ + +import { useEffect, useState } from "preact/hooks"; +import { PrepareTipResult } from "@gnu-taler/taler-util"; +import { AmountView } from "../renderHtml"; +import * as wxApi from "../wxApi"; +import { JSX } from "preact/jsx-runtime"; + +interface Props { + talerTipUri?: string +} + +export function TipPage({ talerTipUri }: Props): JSX.Element { + const [updateCounter, setUpdateCounter] = useState(0); + const [prepareTipResult, setPrepareTipResult] = useState< + PrepareTipResult | undefined + >(undefined); + + const [tipIgnored, setTipIgnored] = useState(false); + + useEffect(() => { + if (!talerTipUri) return; + const doFetch = async (): Promise => { + const p = await wxApi.prepareTip({ talerTipUri }); + setPrepareTipResult(p); + }; + doFetch(); + }, [talerTipUri, updateCounter]); + + const doAccept = async () => { + if (!prepareTipResult) { + return; + } + await wxApi.acceptTip({ walletTipId: prepareTipResult?.walletTipId }); + setUpdateCounter(updateCounter + 1); + }; + + const doIgnore = () => { + setTipIgnored(true); + }; + + if (!talerTipUri) { + return missing tip uri; + } + + if (tipIgnored) { + return You've ignored the tip.; + } + + if (!prepareTipResult) { + return Loading ...; + } + + if (prepareTipResult.accepted) { + return ( + + Tip from {prepareTipResult.merchantBaseUrl} accepted. Check + your transactions list for more details. + + ); + } else { + return ( +
+

+ The merchant {prepareTipResult.merchantBaseUrl} is + offering you a tip of{" "} + + + {" "} + via the exchange {prepareTipResult.exchangeBaseUrl} +

+ + +
+ ); + } +} diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx new file mode 100644 index 000000000..0f9cc8677 --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx @@ -0,0 +1,45 @@ +/* + This file is part of GNU Taler + (C) 2019 Taler Systems SA + + 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 + */ + +/** + * Welcome page, shown on first installs. + * + * @author Florian Dold + */ + +import { JSX } from "preact/jsx-runtime"; +import { PermissionsCheckbox } from "../components/PermissionsCheckbox"; +import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; +import { Diagnostics } from "../components/Diagnostics"; + +export function WelcomePage(): JSX.Element { + const [permissionsEnabled, togglePermissions] = useExtendedPermissions() + return ( + <> +

Thank you for installing the wallet.

+ +

Permissions

+ +

Next Steps

+ + Try the demo » + + + Learn how to top up your wallet balance » + + + ); +} diff --git a/packages/taler-wallet-webextension/src/wallet/Withdraw.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Withdraw.stories.tsx new file mode 100644 index 000000000..24fb17dfa --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/Withdraw.stories.tsx @@ -0,0 +1,66 @@ +/* + This file is part of GNU Taler + (C) 2021 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 + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ + +import { h } from 'preact'; +import { View, ViewProps } from './Withdraw'; + + +export default { + title: 'wallet/withdraw', + component: View, + argTypes: { + }, +}; + +export const WithoutURI = (a: any) => ; +WithoutURI.args = { +} as ViewProps + +export const WithoutDetails = (a: any) => ; +WithoutDetails.args = { + talerWithdrawUri: 'http://something' +} as ViewProps + +export const Cancelled = (a: any) => ; +Cancelled.args = { + talerWithdrawUri: 'http://something', + details: { + amount: 'USD:2', + }, + cancelled: true +} as ViewProps + +export const CompleteWithExchange = (a: any) => ; +CompleteWithExchange.args = { + talerWithdrawUri: 'http://something', + details: { + amount: 'USD:2', + }, + selectedExchange: 'Some exchange' +} as ViewProps + +export const CompleteWithoutExchange = (a: any) => ; +CompleteWithoutExchange.args = { + talerWithdrawUri: 'http://something', + details: { + amount: 'USD:2', + }, +} as ViewProps diff --git a/packages/taler-wallet-webextension/src/wallet/Withdraw.tsx b/packages/taler-wallet-webextension/src/wallet/Withdraw.tsx new file mode 100644 index 000000000..5dc12407b --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/Withdraw.tsx @@ -0,0 +1,161 @@ +/* + This file is part of TALER + (C) 2015-2016 GNUnet e.V. + + 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. + + 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 + TALER; see the file COPYING. If not, see + */ + +/** + * Page shown to the user to confirm creation + * of a reserve, usually requested by the bank. + * + * @author Florian Dold + */ + +import { i18n } from '@gnu-taler/taler-util' +import { renderAmount } from "../renderHtml"; + +import { useState, useEffect } from "preact/hooks"; +import { + acceptWithdrawal, + onUpdateNotification, + getWithdrawalDetailsForUri, +} from "../wxApi"; +import { WithdrawUriInfoResponse } from "@gnu-taler/taler-util"; +import { JSX } from "preact/jsx-runtime"; + +interface Props { + talerWithdrawUri?: string; +} + +export interface ViewProps { + talerWithdrawUri?: string; + details?: WithdrawUriInfoResponse; + cancelled?: boolean; + selectedExchange?: string; + accept: () => Promise; + setCancelled: (b: boolean) => void; + setSelecting: (b: boolean) => void; +}; + +export function View({ talerWithdrawUri, details, cancelled, selectedExchange, accept, setCancelled, setSelecting }: ViewProps) { + const [state, setState] = useState(1) + setTimeout(() => { + setState(s => s + 1) + }, 1000); + if (!talerWithdrawUri) { + return missing withdraw uri; + } + + if (!details) { + return Loading...; + } + + if (cancelled) { + return Withdraw operation has been cancelled.{state}; + } + + return ( +
+

Digital Cash Withdrawal

+

+ You are about to withdraw{" "} + {renderAmount(details.amount)} from your bank account + into your wallet. +

+ {selectedExchange ? ( +

+ The exchange {selectedExchange} will be used as the + Taler payment service provider. +

+ ) : null} + +
+ +

+ setSelecting(true)} + > + {i18n.str`Chose different exchange provider`} + +
+ setCancelled(true)} + > + {i18n.str`Cancel withdraw operation`} + +

+
+
+ ) +} + +export function WithdrawPage({ talerWithdrawUri }: Props): JSX.Element { + const [details, setDetails] = useState(undefined); + const [selectedExchange, setSelectedExchange] = useState< + string | undefined + >(undefined); + const [cancelled, setCancelled] = useState(false); + const [selecting, setSelecting] = useState(false); + const [errMsg, setErrMsg] = useState(""); + const [updateCounter, setUpdateCounter] = useState(1); + + useEffect(() => { + return onUpdateNotification(() => { + setUpdateCounter(updateCounter + 1); + }); + }, []); + + useEffect(() => { + if (!talerWithdrawUri) return + const fetchData = async (): Promise => { + const res = await getWithdrawalDetailsForUri({ talerWithdrawUri }); + setDetails(res); + if (res.defaultExchangeBaseUrl) { + setSelectedExchange(res.defaultExchangeBaseUrl); + } + }; + fetchData(); + }, [selectedExchange, errMsg, selecting, talerWithdrawUri, updateCounter]); + + const accept = async (): Promise => { + if (!talerWithdrawUri) return + if (!selectedExchange) { + throw Error("can't accept, no exchange selected"); + } + console.log("accepting exchange", selectedExchange); + const res = await acceptWithdrawal(talerWithdrawUri, selectedExchange); + console.log("accept withdrawal response", res); + if (res.confirmTransferUrl) { + document.location.href = res.confirmTransferUrl; + } + }; + + return +} + diff --git a/packages/taler-wallet-webextension/src/wallet/pay.tsx b/packages/taler-wallet-webextension/src/wallet/pay.tsx deleted file mode 100644 index e958cd484..000000000 --- a/packages/taler-wallet-webextension/src/wallet/pay.tsx +++ /dev/null @@ -1,235 +0,0 @@ -/* - This file is part of TALER - (C) 2015 GNUnet e.V. - - 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. - - 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 - TALER; see the file COPYING. If not, see - */ - -/** - * Page shown to the user to confirm entering - * a contract. - */ - -/** - * Imports. - */ -// import * as i18n from "../i18n"; - -import { renderAmount, ProgressButton } from "../renderHtml"; -import * as wxApi from "../wxApi"; - -import { useState, useEffect } from "preact/hooks"; - -import { getJsonI18n, i18n } from "@gnu-taler/taler-util"; -import { - PreparePayResult, - ConfirmPayResult, - AmountJson, - PreparePayResultType, - Amounts, - ContractTerms, - ConfirmPayResultType, -} from "@gnu-taler/taler-util"; -import { JSX, VNode } from "preact"; - -interface Props { - talerPayUri?: string -} - -export function TalerPayDialog({ talerPayUri }: Props): JSX.Element { - const [payStatus, setPayStatus] = useState(undefined); - const [payResult, setPayResult] = useState(undefined); - const [payErrMsg, setPayErrMsg] = useState(""); - const [numTries, setNumTries] = useState(0); - const [loading, setLoading] = useState(false); - let totalFees: AmountJson | undefined = undefined; - - useEffect(() => { - if (!talerPayUri) return; - const doFetch = async (): Promise => { - const p = await wxApi.preparePay(talerPayUri); - setPayStatus(p); - }; - doFetch(); - }, [numTries, talerPayUri]); - - if (!talerPayUri) { - return missing pay uri - } - - if (!payStatus) { - return Loading payment information ...; - } - - let insufficientBalance = false; - if (payStatus.status == PreparePayResultType.InsufficientBalance) { - insufficientBalance = true; - } - - if (payStatus.status === PreparePayResultType.PaymentPossible) { - const amountRaw = Amounts.parseOrThrow(payStatus.amountRaw); - const amountEffective: AmountJson = Amounts.parseOrThrow( - payStatus.amountEffective, - ); - totalFees = Amounts.sub(amountEffective, amountRaw).amount; - } - - if ( - payStatus.status === PreparePayResultType.AlreadyConfirmed && - numTries === 0 - ) { - const fulfillmentUrl = payStatus.contractTerms.fulfillment_url; - if (fulfillmentUrl) { - return ( - - You have already paid for this article. Click{" "} - here to view it again. - - ); - } else { - - You have already paid for this article:{" "} - - {payStatus.contractTerms.fulfillment_message ?? "no message given"} - - ; - } - } - - const contractTerms: ContractTerms = payStatus.contractTerms; - - if (!contractTerms) { - return ( - - Error: did not get contract terms from merchant or wallet backend. - - ); - } - - let merchantName: VNode; - if (contractTerms.merchant && contractTerms.merchant.name) { - merchantName = {contractTerms.merchant.name}; - } else { - merchantName = (pub: {contractTerms.merchant_pub}); - } - - const amount = ( - {renderAmount(Amounts.parseOrThrow(contractTerms.amount))} - ); - - const doPayment = async (): Promise => { - if (payStatus.status !== "payment-possible") { - throw Error(`invalid state: ${payStatus.status}`); - } - const proposalId = payStatus.proposalId; - setNumTries(numTries + 1); - try { - setLoading(true); - const res = await wxApi.confirmPay(proposalId, undefined); - if (res.type !== ConfirmPayResultType.Done) { - throw Error("payment pending"); - } - const fu = res.contractTerms.fulfillment_url; - if (fu) { - document.location.href = fu; - } - setPayResult(res); - } catch (e) { - console.error(e); - setPayErrMsg(e.message); - } - }; - - if (payResult && payResult.type === ConfirmPayResultType.Done) { - if (payResult.contractTerms.fulfillment_message) { - const obj = { - fulfillment_message: payResult.contractTerms.fulfillment_message, - fulfillment_message_i18n: - payResult.contractTerms.fulfillment_message_i18n, - }; - const msg = getJsonI18n(obj, "fulfillment_message"); - return ( -
-

Payment succeeded.

-

{msg}

-
- ); - } else { - return Redirecting ...; - } - } - - return ( -
-

- - The merchant {merchantName} offers you to purchase: - -

- {contractTerms.summary} -
- {totalFees ? ( - - The total price is {amount} - (plus {renderAmount(totalFees)} fees). - - ) : ( - - The total price is {amount}. - - )} -

- - {insufficientBalance ? ( -
-

- Unable to pay: Your balance is insufficient. -

-
- ) : null} - - {payErrMsg ? ( -
-

Payment failed: {payErrMsg}

- -
- ) : ( -
- doPayment()} - > - {i18n.str`Confirm payment`} - -
- )} -
- ); -} - -/** - * @deprecated to be removed - */ -export function createPayPage(): JSX.Element { - const url = new URL(document.location.href); - const talerPayUri = url.searchParams.get("talerPayUri"); - if (!talerPayUri) { - throw Error("invalid parameter"); - } - return ; -} diff --git a/packages/taler-wallet-webextension/src/wallet/refund.tsx b/packages/taler-wallet-webextension/src/wallet/refund.tsx deleted file mode 100644 index 1991bc9d8..000000000 --- a/packages/taler-wallet-webextension/src/wallet/refund.tsx +++ /dev/null @@ -1,108 +0,0 @@ -/* - This file is part of TALER - (C) 2015-2016 GNUnet e.V. - - 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. - - 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 - TALER; see the file COPYING. If not, see - */ - -/** - * Page that shows refund status for purchases. - * - * @author Florian Dold - */ - -import * as wxApi from "../wxApi"; -import { AmountView } from "../renderHtml"; -import { - ApplyRefundResponse, - Amounts, -} from "@gnu-taler/taler-util"; -import { useEffect, useState } from "preact/hooks"; -import { JSX } from "preact/jsx-runtime"; - -interface Props { - talerRefundUri?: string -} - -export function RefundStatusView({ talerRefundUri }: Props): JSX.Element { - const [applyResult, setApplyResult] = useState(undefined); - const [errMsg, setErrMsg] = useState(undefined); - - useEffect(() => { - if (!talerRefundUri) return; - const doFetch = async (): Promise => { - try { - const result = await wxApi.applyRefund(talerRefundUri); - setApplyResult(result); - } catch (e) { - console.error(e); - setErrMsg(e.message); - console.log("err message", e.message); - } - }; - doFetch(); - }, [talerRefundUri]); - - console.log("rendering"); - - if (!talerRefundUri) { - return missing taler refund uri; - } - - if (errMsg) { - return Error: {errMsg}; - } - - if (!applyResult) { - return Updating refund status; - } - - return ( - <> -

Refund Status

-

- The product {applyResult.info.summary} has received a total - effective refund of{" "} - . -

- {applyResult.pendingAtExchange ? ( -

Refund processing is still in progress.

- ) : null} - {!Amounts.isZero(applyResult.amountRefundGone) ? ( -

- The refund amount of{" "} - - could not be applied. -

- ) : null} - - ); -} - -/** - * @deprecated to be removed - */ -export function createRefundPage(): JSX.Element { - const url = new URL(document.location.href); - - const container = document.getElementById("container"); - if (!container) { - throw Error("fatal: can't mount component, container missing"); - } - - const talerRefundUri = url.searchParams.get("talerRefundUri"); - if (!talerRefundUri) { - throw Error("taler refund URI required"); - } - - return ; -} diff --git a/packages/taler-wallet-webextension/src/wallet/tip.tsx b/packages/taler-wallet-webextension/src/wallet/tip.tsx deleted file mode 100644 index d832976d8..000000000 --- a/packages/taler-wallet-webextension/src/wallet/tip.tsx +++ /dev/null @@ -1,109 +0,0 @@ -/* - This file is part of TALER - (C) 2017 GNUnet e.V. - - 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. - - 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 - TALER; see the file COPYING. If not, see - */ - -/** - * Page shown to the user to accept or ignore a tip from a merchant. - * - * @author Florian Dold - */ - -import { useEffect, useState } from "preact/hooks"; -import { PrepareTipResult } from "@gnu-taler/taler-util"; -import { AmountView } from "../renderHtml"; -import * as wxApi from "../wxApi"; -import { JSX } from "preact/jsx-runtime"; - -interface Props { - talerTipUri?: string -} - -export function TalerTipDialog({ talerTipUri }: Props): JSX.Element { - const [updateCounter, setUpdateCounter] = useState(0); - const [prepareTipResult, setPrepareTipResult] = useState< - PrepareTipResult | undefined - >(undefined); - - const [tipIgnored, setTipIgnored] = useState(false); - - useEffect(() => { - if (!talerTipUri) return; - const doFetch = async (): Promise => { - const p = await wxApi.prepareTip({ talerTipUri }); - setPrepareTipResult(p); - }; - doFetch(); - }, [talerTipUri, updateCounter]); - - const doAccept = async () => { - if (!prepareTipResult) { - return; - } - await wxApi.acceptTip({ walletTipId: prepareTipResult?.walletTipId }); - setUpdateCounter(updateCounter + 1); - }; - - const doIgnore = () => { - setTipIgnored(true); - }; - - if (!talerTipUri) { - return missing tip uri; - } - - if (tipIgnored) { - return You've ignored the tip.; - } - - if (!prepareTipResult) { - return Loading ...; - } - - if (prepareTipResult.accepted) { - return ( - - Tip from {prepareTipResult.merchantBaseUrl} accepted. Check - your transactions list for more details. - - ); - } else { - return ( -
-

- The merchant {prepareTipResult.merchantBaseUrl} is - offering you a tip of{" "} - - - {" "} - via the exchange {prepareTipResult.exchangeBaseUrl} -

- - -
- ); - } -} - -/** - * @deprecated to be removed - */ -export function createTipPage(): JSX.Element { - const url = new URL(document.location.href); - const talerTipUri = url.searchParams.get("talerTipUri"); - if (!talerTipUri) { - throw Error("invalid parameter"); - } - return ; -} diff --git a/packages/taler-wallet-webextension/src/wallet/welcome.tsx b/packages/taler-wallet-webextension/src/wallet/welcome.tsx deleted file mode 100644 index 9be62bf8b..000000000 --- a/packages/taler-wallet-webextension/src/wallet/welcome.tsx +++ /dev/null @@ -1,83 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2019 Taler Systems SA - - 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 - */ - -/** - * Welcome page, shown on first installs. - * - * @author Florian Dold - */ - -import * as wxApi from "../wxApi"; -import { getPermissionsApi } from "../compat"; -import { extendedPermissions } from "../permissions"; -import { Fragment, JSX } from "preact/jsx-runtime"; -import { PermissionsCheckbox } from "../components/PermissionsCheckbox"; -import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; -import { Diagnostics } from "../components/Diagnostics"; - -export async function handleExtendedPerm(isEnabled: boolean): Promise { - let nextVal: boolean | undefined; - - if (!isEnabled) { - const granted = await new Promise((resolve, reject) => { - // We set permissions here, since apparently FF wants this to be done - // as the result of an input event ... - getPermissionsApi().request(extendedPermissions, (granted: boolean) => { - if (chrome.runtime.lastError) { - console.error("error requesting permissions"); - console.error(chrome.runtime.lastError); - reject(chrome.runtime.lastError); - return; - } - console.log("permissions granted:", granted); - resolve(granted); - }); - }); - const res = await wxApi.setExtendedPermissions(granted); - nextVal = res.newValue; - } else { - const res = await wxApi.setExtendedPermissions(false); - nextVal = res.newValue; - } - console.log("new permissions applied:", nextVal ?? false); - return nextVal ?? false -} - -export function Welcome(): JSX.Element { - const [permissionsEnabled, togglePermissions] = useExtendedPermissions() - return ( - <> -

Thank you for installing the wallet.

- -

Permissions

- -

Next Steps

- - Try the demo » - - - Learn how to top up your wallet balance » - - - ); -} - -/** - * @deprecated to be removed - */ -export function createWelcomePage(): JSX.Element { - return ; -} diff --git a/packages/taler-wallet-webextension/src/wallet/withdraw.stories.tsx b/packages/taler-wallet-webextension/src/wallet/withdraw.stories.tsx deleted file mode 100644 index 86f0eec90..000000000 --- a/packages/taler-wallet-webextension/src/wallet/withdraw.stories.tsx +++ /dev/null @@ -1,66 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021 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 - */ - -/** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ - -import { h } from 'preact'; -import { View, ViewProps } from './withdraw'; - - -export default { - title: 'wallet/withdraw', - component: View, - argTypes: { - }, -}; - -export const WithoutURI = (a: any) => ; -WithoutURI.args = { -} as ViewProps - -export const WithoutDetails = (a: any) => ; -WithoutDetails.args = { - talerWithdrawUri: 'http://something' -} as ViewProps - -export const Cancelled = (a: any) => ; -Cancelled.args = { - talerWithdrawUri: 'http://something', - details: { - amount: 'USD:2', - }, - cancelled: true -} as ViewProps - -export const CompleteWithExchange = (a: any) => ; -CompleteWithExchange.args = { - talerWithdrawUri: 'http://something', - details: { - amount: 'USD:2', - }, - selectedExchange: 'Some exchange' -} as ViewProps - -export const CompleteWithoutExchange = (a: any) => ; -CompleteWithoutExchange.args = { - talerWithdrawUri: 'http://something', - details: { - amount: 'USD:2', - }, -} as ViewProps diff --git a/packages/taler-wallet-webextension/src/wallet/withdraw.tsx b/packages/taler-wallet-webextension/src/wallet/withdraw.tsx deleted file mode 100644 index cb96fa4df..000000000 --- a/packages/taler-wallet-webextension/src/wallet/withdraw.tsx +++ /dev/null @@ -1,173 +0,0 @@ -/* - This file is part of TALER - (C) 2015-2016 GNUnet e.V. - - 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. - - 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 - TALER; see the file COPYING. If not, see - */ - -/** - * Page shown to the user to confirm creation - * of a reserve, usually requested by the bank. - * - * @author Florian Dold - */ - -import { i18n } from '@gnu-taler/taler-util' -import { renderAmount } from "../renderHtml"; - -import { useState, useEffect } from "preact/hooks"; -import { - acceptWithdrawal, - onUpdateNotification, - getWithdrawalDetailsForUri, -} from "../wxApi"; -import { WithdrawUriInfoResponse } from "@gnu-taler/taler-util"; -import { JSX } from "preact/jsx-runtime"; - -interface Props { - talerWithdrawUri?: string; -} - -export interface ViewProps { - talerWithdrawUri?: string; - details?: WithdrawUriInfoResponse; - cancelled?: boolean; - selectedExchange?: string; - accept: () => Promise; - setCancelled: (b: boolean) => void; - setSelecting: (b: boolean) => void; -}; - -export function View({ talerWithdrawUri, details, cancelled, selectedExchange, accept, setCancelled, setSelecting }: ViewProps) { - const [state, setState] = useState(1) - setTimeout(() => { - setState(s => s + 1) - }, 1000); - if (!talerWithdrawUri) { - return missing withdraw uri; - } - - if (!details) { - return Loading...; - } - - if (cancelled) { - return Withdraw operation has been cancelled.{state}; - } - - return ( -
-

Digital Cash Withdrawal

-

- You are about to withdraw{" "} - {renderAmount(details.amount)} from your bank account - into your wallet. -

- {selectedExchange ? ( -

- The exchange {selectedExchange} will be used as the - Taler payment service provider. -

- ) : null} - -
- -

- setSelecting(true)} - > - {i18n.str`Chose different exchange provider`} - -
- setCancelled(true)} - > - {i18n.str`Cancel withdraw operation`} - -

-
-
- ) -} - -export function WithdrawalDialog({ talerWithdrawUri }: Props): JSX.Element { - const [details, setDetails] = useState(undefined); - const [selectedExchange, setSelectedExchange] = useState< - string | undefined - >(undefined); - const [cancelled, setCancelled] = useState(false); - const [selecting, setSelecting] = useState(false); - const [errMsg, setErrMsg] = useState(""); - const [updateCounter, setUpdateCounter] = useState(1); - - useEffect(() => { - return onUpdateNotification(() => { - setUpdateCounter(updateCounter + 1); - }); - }, []); - - useEffect(() => { - if (!talerWithdrawUri) return - const fetchData = async (): Promise => { - const res = await getWithdrawalDetailsForUri({ talerWithdrawUri }); - setDetails(res); - if (res.defaultExchangeBaseUrl) { - setSelectedExchange(res.defaultExchangeBaseUrl); - } - }; - fetchData(); - }, [selectedExchange, errMsg, selecting, talerWithdrawUri, updateCounter]); - - const accept = async (): Promise => { - if (!talerWithdrawUri) return - if (!selectedExchange) { - throw Error("can't accept, no exchange selected"); - } - console.log("accepting exchange", selectedExchange); - const res = await acceptWithdrawal(talerWithdrawUri, selectedExchange); - console.log("accept withdrawal response", res); - if (res.confirmTransferUrl) { - document.location.href = res.confirmTransferUrl; - } - }; - - return -} - - -/** - * @deprecated to be removed - */ -export function createWithdrawPage(): JSX.Element { - const url = new URL(document.location.href); - const talerWithdrawUri = url.searchParams.get("talerWithdrawUri"); - if (!talerWithdrawUri) { - throw Error("withdraw URI required"); - } - return ; -} diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx index 2d1671dd4..cb97ffbeb 100644 --- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx @@ -25,11 +25,11 @@ import { setupI18n } from "@gnu-taler/taler-util"; import { strings } from "./i18n/strings"; import { createHashHistory } from 'history'; -import { WithdrawalDialog } from "./wallet/withdraw"; -import { Welcome } from "./wallet/welcome"; -import { TalerPayDialog } from "./wallet/pay"; -import { RefundStatusView } from "./wallet/refund"; -import { TalerTipDialog } from './wallet/tip'; +import { WithdrawPage } from "./wallet/Withdraw"; +import { WelcomePage } from "./wallet/Welcome"; +import { PayPage } from "./wallet/Pay"; +import { RefundPage } from "./wallet/Refund"; +import { TipPage } from './wallet/Tip'; import Router, { route, Route } from "preact-router"; @@ -82,7 +82,7 @@ function Application() {

Browser Extension Installed!

- +
}} /> @@ -91,7 +91,7 @@ function Application() { return

GNU Taler Wallet

- +
}} /> @@ -100,7 +100,7 @@ function Application() { return

GNU Taler Wallet

- +
}} /> @@ -109,7 +109,7 @@ function Application() { return

GNU Taler Wallet

- +
}} /> @@ -121,7 +121,7 @@ function Application() {
- +
}} /> -- cgit v1.2.3