diff options
Diffstat (limited to 'src/webex/pages')
-rw-r--r-- | src/webex/pages/confirm-contract.html | 1 | ||||
-rw-r--r-- | src/webex/pages/confirm-contract.tsx | 43 | ||||
-rw-r--r-- | src/webex/pages/refund.tsx | 17 |
3 files changed, 42 insertions, 19 deletions
diff --git a/src/webex/pages/confirm-contract.html b/src/webex/pages/confirm-contract.html index 394de582a..223d413d8 100644 --- a/src/webex/pages/confirm-contract.html +++ b/src/webex/pages/confirm-contract.html @@ -5,6 +5,7 @@ <meta charset="UTF-8"> <title>Taler Wallet: Confirm Reserve Creation</title> + <link rel="stylesheet" type="text/css" href="../style/pure.css"> <link rel="stylesheet" type="text/css" href="../style/wallet.css"> <link rel="icon" href="/img/icon.png"> diff --git a/src/webex/pages/confirm-contract.tsx b/src/webex/pages/confirm-contract.tsx index fa71b1028..5436cb5a6 100644 --- a/src/webex/pages/confirm-contract.tsx +++ b/src/webex/pages/confirm-contract.tsx @@ -25,12 +25,13 @@ */ import * as i18n from "../../i18n"; import { + CheckPayResult, ContractTerms, ExchangeRecord, ProposalRecord, } from "../../types"; -import { renderContractTerms } from "../renderHtml"; +import { renderAmount } from "../renderHtml"; import * as wxApi from "../wxApi"; import * as React from "react"; @@ -113,6 +114,7 @@ interface ContractPromptState { * when pressing pay. */ holdCheck: boolean; + payStatus?: CheckPayResult; } class ContractPrompt extends React.Component<ContractPromptProps, ContractPromptState> { @@ -150,7 +152,7 @@ class ContractPrompt extends React.Component<ContractPromptProps, ContractPrompt return; } const payStatus = await wxApi.checkPay(this.props.proposalId); - if (payStatus === "insufficient-balance") { + if (payStatus.status === "insufficient-balance") { const msgInsufficient = i18n.str`You have insufficient funds of the requested currency in your wallet.`; // tslint:disable-next-line:max-line-length const msgNoMatch = i18n.str`You do not have any funds from an exchange that is accepted by this merchant. None of the exchanges accepted by the merchant is known to your wallet.`; @@ -166,10 +168,10 @@ class ContractPrompt extends React.Component<ContractPromptProps, ContractPrompt this.setState({error: msgInsufficient}); } this.setState({payDisabled: true}); - } else if (payStatus === "paid") { - this.setState({alreadyPaid: true, payDisabled: false, error: null}); + } else if (payStatus.status === "paid") { + this.setState({alreadyPaid: true, payDisabled: false, error: null, payStatus}); } else { - this.setState({payDisabled: false, error: null}); + this.setState({payDisabled: false, error: null, payStatus}); } } @@ -189,7 +191,7 @@ class ContractPrompt extends React.Component<ContractPromptProps, ContractPrompt document.location.href = proposal.contractTerms.fulfillment_url; break; } - this.setState({holdCheck: false}); + this.setState({holdCheck: true}); } @@ -198,15 +200,36 @@ class ContractPrompt extends React.Component<ContractPromptProps, ContractPrompt return <span>...</span>; } const c = this.state.proposal.contractTerms; + let merchantName; + if (c.merchant && c.merchant.name) { + merchantName = <strong>{c.merchant.name}</strong>; + } else { + merchantName = <strong>(pub: {c.merchant_pub})</strong>; + } + const amount = <strong>{renderAmount(c.amount)}</strong>; + console.log("payStatus", this.state.payStatus); return ( <div> <div> - {renderContractTerms(c)} + <i18n.Translate wrap="p"> + The merchant <span>{merchantName}</span> {" "} + offers you to purchase: + </i18n.Translate> + <ul> + {c.products.map( + (p: any, i: number) => (<li key={i}>{p.description}: {renderAmount(p.price)}</li>)) + } + </ul> + {(this.state.payStatus && this.state.payStatus.coinSelection) ? + <p>The total price is <span>{amount}</span> (plus <span>{renderAmount(this.state.payStatus.coinSelection.totalFees)}</span> fees).</p> + : + <p>The total price is <span>{amount}</span>.</p> + } </div> - <button onClick={() => this.doPayment()} + <button className="pure-button button-success" disabled={this.state.payDisabled} - className="accept"> - Confirm payment + onClick={() => this.doPayment()}> + {i18n.str`Confirm payment`} </button> <div> {(this.state.alreadyPaid ? <p className="okaybox">You already paid for this, clicking "Confirm payment" will not cost money again.</p> : <p />)} diff --git a/src/webex/pages/refund.tsx b/src/webex/pages/refund.tsx index b9506bf29..d2c21c2f4 100644 --- a/src/webex/pages/refund.tsx +++ b/src/webex/pages/refund.tsx @@ -37,11 +37,12 @@ interface RefundStatusViewProps { interface RefundStatusViewState { purchase?: types.PurchaseRecord; + refundFees?: types.AmountJson; gotResult: boolean; } -const RefundDetail = ({purchase}: {purchase: types.PurchaseRecord}) => { +const RefundDetail = ({purchase, fullRefundFees}: {purchase: types.PurchaseRecord, fullRefundFees: types.AmountJson}) => { const pendingKeys = Object.keys(purchase.refundsPending); const doneKeys = Object.keys(purchase.refundsDone); if (pendingKeys.length == 0 && doneKeys.length == 0) { @@ -54,22 +55,18 @@ const RefundDetail = ({purchase}: {purchase: types.PurchaseRecord}) => { } let amountPending = types.Amounts.getZero(currency); - let feesPending = types.Amounts.getZero(currency) for (let k of pendingKeys) { amountPending = types.Amounts.add(amountPending, purchase.refundsPending[k].refund_amount).amount; - feesPending = types.Amounts.add(feesPending, purchase.refundsPending[k].refund_fee).amount; } let amountDone = types.Amounts.getZero(currency); - let feesDone = types.Amounts.getZero(currency); for (let k of doneKeys) { amountDone = types.Amounts.add(amountDone, purchase.refundsDone[k].refund_amount).amount; - feesDone = types.Amounts.add(feesDone, purchase.refundsDone[k].refund_fee).amount; } return ( <div> - <p>Refund fully received: <AmountDisplay amount={amountDone} /> (refund fees: <AmountDisplay amount={feesDone} />)</p> - <p>Refund incoming: <AmountDisplay amount={amountPending} /> (refund fees: <AmountDisplay amount={feesPending} />)</p> + <p>Refund fully received: <AmountDisplay amount={amountDone} /> (refund fees: <AmountDisplay amount={fullRefundFees} />)</p> + <p>Refund incoming: <AmountDisplay amount={amountPending} /></p> </div> ); }; @@ -108,7 +105,7 @@ class RefundStatusView extends React.Component<RefundStatusViewProps, RefundStat <h1>Refund Status</h1> <p>Status of purchase <strong>{summary}</strong> from merchant <strong>{merchantName}</strong> (order id {purchase.contractTerms.order_id}).</p> <p>Total amount: <AmountDisplay amount={purchase.contractTerms.amount} /></p> - {purchase.finished ? <RefundDetail purchase={purchase} /> : <p>Purchase not completed.</p>} + {purchase.finished ? <RefundDetail purchase={purchase} fullRefundFees={this.state.refundFees!} /> : <p>Purchase not completed.</p>} </div> ); } @@ -116,7 +113,9 @@ class RefundStatusView extends React.Component<RefundStatusViewProps, RefundStat async update() { const purchase = await wxApi.getPurchase(this.props.contractTermsHash); console.log("got purchase", purchase); - this.setState({ purchase, gotResult: true }); + const refundsDone = Object.keys(purchase.refundsDone).map((x) => purchase.refundsDone[x]); + const refundFees = await wxApi.getFullRefundFees( {refundPermissions: refundsDone }); + this.setState({ purchase, gotResult: true, refundFees }); } } |