diff options
Diffstat (limited to 'src/webex/pages/pay.tsx')
-rw-r--r-- | src/webex/pages/pay.tsx | 182 |
1 files changed, 0 insertions, 182 deletions
diff --git a/src/webex/pages/pay.tsx b/src/webex/pages/pay.tsx deleted file mode 100644 index ce44c0040..000000000 --- a/src/webex/pages/pay.tsx +++ /dev/null @@ -1,182 +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 <http://www.gnu.org/licenses/> - */ - -/** - * Page shown to the user to confirm entering - * a contract. - */ - -/** - * Imports. - */ -import * as i18n from "../i18n"; - -import { PreparePayResult, PreparePayResultType } from "../../types/walletTypes"; - -import { renderAmount, ProgressButton } from "../renderHtml"; -import * as wxApi from "../wxApi"; - -import React, { useState, useEffect } from "react"; - -import * as Amounts from "../../util/amounts"; -import { codecForContractTerms, ContractTerms } from "../../types/talerTypes"; - -function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { - const [payStatus, setPayStatus] = useState<PreparePayResult | undefined>(); - const [payErrMsg, setPayErrMsg] = useState<string | undefined>(""); - const [numTries, setNumTries] = useState(0); - const [loading, setLoading] = useState(false); - let amountEffective: Amounts.AmountJson | undefined = undefined; - - useEffect(() => { - const doFetch = async (): Promise<void> => { - const p = await wxApi.preparePay(talerPayUri); - setPayStatus(p); - }; - doFetch(); - }, [numTries, talerPayUri]); - - if (!payStatus) { - return <span>Loading payment information ...</span>; - } - - let insufficientBalance = false; - if (payStatus.status == "insufficient-balance") { - insufficientBalance = true; - } - - if (payStatus.status === "payment-possible") { - amountEffective = Amounts.parseOrThrow(payStatus.amountEffective); - } - - if (payStatus.status === PreparePayResultType.AlreadyConfirmed && numTries === 0) { - return ( - <span> - You have already paid for this article. Click{" "} - <a href={payStatus.nextUrl}>here</a> to view it again. - </span> - ); - } - - let contractTerms: ContractTerms; - - try { - contractTerms = codecForContractTerms().decode(payStatus.contractTerms); - } catch (e) { - // This should never happen, as the wallet is supposed to check the contract terms - // before storing them. - console.error(e); - console.log("raw contract terms were", payStatus.contractTerms); - return <span>Invalid contract terms.</span>; - } - - if (!contractTerms) { - return ( - <span> - Error: did not get contract terms from merchant or wallet backend. - </span> - ); - } - - let merchantName: React.ReactElement; - if (contractTerms.merchant && contractTerms.merchant.name) { - merchantName = <strong>{contractTerms.merchant.name}</strong>; - } else { - merchantName = <strong>(pub: {contractTerms.merchant_pub})</strong>; - } - - const amount = ( - <strong>{renderAmount(Amounts.parseOrThrow(contractTerms.amount))}</strong> - ); - - const doPayment = async (): Promise<void> => { - 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); - document.location.href = res.nextUrl; - } catch (e) { - console.error(e); - setPayErrMsg(e.message); - } - }; - - return ( - <div> - <p> - <i18n.Translate wrap="p"> - The merchant <span>{merchantName}</span> offers you to purchase: - </i18n.Translate> - <div style={{ textAlign: "center" }}> - <strong>{contractTerms.summary}</strong> - </div> - {amountEffective ? ( - <i18n.Translate wrap="p"> - The total price is <span>{amount} </span> - (plus <span>{renderAmount(amountEffective)}</span> fees). - </i18n.Translate> - ) : ( - <i18n.Translate wrap="p"> - The total price is <span>{amount}</span>. - </i18n.Translate> - )} - </p> - - {insufficientBalance ? ( - <div> - <p style={{ color: "red", fontWeight: "bold" }}> - Unable to pay: Your balance is insufficient. - </p> - </div> - ) : null} - - {payErrMsg ? ( - <div> - <p>Payment failed: {payErrMsg}</p> - <button - className="pure-button button-success" - onClick={() => doPayment()} - > - {i18n.str`Retry`} - </button> - </div> - ) : ( - <div> - <ProgressButton - loading={loading} - disabled={insufficientBalance} - onClick={() => doPayment()} - > - {i18n.str`Confirm payment`} - </ProgressButton> - </div> - )} - </div> - ); -} - -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 <TalerPayDialog talerPayUri={talerPayUri} />; -} |