diff options
author | Sebastian <sebasjm@gmail.com> | 2021-09-17 15:48:33 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-09-17 15:49:07 -0300 |
commit | 315b167bee240e625beea731df6472a971b46cb2 (patch) | |
tree | 098557be6106622844ad5d59dce7e0c64bb22bcc /packages/taler-wallet-webextension/src/cta | |
parent | 490620ad04a677fa220cbe77dc0bea29b6e80c12 (diff) | |
download | wallet-core-315b167bee240e625beea731df6472a971b46cb2.tar.xz |
issue #5860
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta')
3 files changed, 141 insertions, 135 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx index 38e3d0f35..9a997687f 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx @@ -33,6 +33,7 @@ export default { export const InsufficientBalance = createExample(TestedComponent, { payStatus: { status: PreparePayResultType.InsufficientBalance, + noncePriv: '', proposalId: "proposal1234", contractTerms: { merchant: { @@ -45,15 +46,19 @@ export const InsufficientBalance = createExample(TestedComponent, { }); export const PaymentPossible = createExample(TestedComponent, { + uri: 'taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0', payStatus: { status: PreparePayResultType.PaymentPossible, amountEffective: 'USD:10', amountRaw: 'USD:10', + noncePriv: '', contractTerms: { + nonce: '123213123', merchant: { name: 'someone' }, amount: 'USD:10', + summary: 'some beers', } as Partial<ContractTerms> as any, contractTermsHash: '123456', proposalId: 'proposal1234' @@ -65,6 +70,7 @@ export const AlreadyConfirmedWithFullfilment = createExample(TestedComponent, { status: PreparePayResultType.AlreadyConfirmed, amountEffective: 'USD:10', amountRaw: 'USD:10', + noncePriv: '', contractTerms: { merchant: { name: 'someone' @@ -82,6 +88,7 @@ export const AlreadyConfirmedWithoutFullfilment = createExample(TestedComponent, payStatus: { status: PreparePayResultType.AlreadyConfirmed, amountEffective: 'USD:10', + noncePriv: '', amountRaw: 'USD:10', contractTerms: { merchant: { diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx index 758bc4b54..e85cd60a1 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx @@ -29,7 +29,7 @@ import * as wxApi from "../wxApi"; import { useState, useEffect } from "preact/hooks"; -import { ConfirmPayResultDone, getJsonI18n, i18n } from "@gnu-taler/taler-util"; +import { AmountLike, ConfirmPayResultDone, getJsonI18n, i18n } from "@gnu-taler/taler-util"; import { PreparePayResult, ConfirmPayResult, @@ -39,7 +39,11 @@ import { ContractTerms, ConfirmPayResultType, } from "@gnu-taler/taler-util"; -import { JSX, VNode, h } from "preact"; +import { JSX, VNode, h, Fragment } from "preact"; +import { ButtonSuccess, LinkSuccess, WalletAction } from "../components/styled"; +import { LogoHeader } from "../components/LogoHeader"; +import { Part } from "../components/Part"; +import { QR } from "../components/QR"; interface Props { talerPayUri?: string @@ -143,17 +147,17 @@ export function PayPage({ talerPayUri }: Props): JSX.Element { } - return <PaymentRequestView payStatus={payStatus} onClick={onClick} payErrMsg={payErrMsg} />; + return <PaymentRequestView uri={talerPayUri} payStatus={payStatus} onClick={onClick} payErrMsg={payErrMsg} />; } export interface PaymentRequestViewProps { payStatus: PreparePayResult; onClick: () => void; payErrMsg?: string; - + uri: string; } -export function PaymentRequestView({ payStatus, onClick, payErrMsg }: PaymentRequestViewProps) { - let totalFees: AmountJson | undefined = undefined; +export function PaymentRequestView({ uri, payStatus, onClick, payErrMsg }: PaymentRequestViewProps) { + let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw); let insufficientBalance = false; const [loading, setLoading] = useState(false); const contractTerms: ContractTerms = payStatus.contractTerms; @@ -174,6 +178,7 @@ export function PaymentRequestView({ payStatus, onClick, payErrMsg }: PaymentReq if (payStatus.status == PreparePayResultType.InsufficientBalance) { insufficientBalance = true; + return <div>no te alcanza</div> } if (payStatus.status === PreparePayResultType.PaymentPossible) { @@ -191,65 +196,62 @@ export function PaymentRequestView({ payStatus, onClick, payErrMsg }: PaymentReq merchantName = <strong>(pub: {contractTerms.merchant_pub})</strong>; } - const amount = ( - <strong>{renderAmount(Amounts.parseOrThrow(contractTerms.amount))}</strong> - ); - - return <section class="main"> - <h1>GNU Taler Wallet</h1> - <article class="fade"> - <div> - <p> - <i18n.Translate> - The merchant <span>{merchantName}</span> offers you to purchase: - </i18n.Translate> - <div style={{ textAlign: "center" }}> - <strong>{contractTerms.summary}</strong> - </div> - {totalFees ? ( - <i18n.Translate> - The total price is <span>{amount} </span> - (plus <span>{renderAmount(totalFees)}</span> fees). - </i18n.Translate> - ) : ( - <i18n.Translate> - 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 - class="pure-button button-success" - onClick={onClick} - > - {i18n.str`Retry`} - </button> - </div> - ) : ( - <div> - <ProgressButton - isLoading={loading} - disabled={insufficientBalance} - onClick={onClick} - > - {i18n.str`Confirm payment`} - </ProgressButton> - </div> - )} - </div> - </article> - </section> - + const [showQR, setShowQR] = useState<boolean>(false) + const privateUri = `${uri}&n=${payStatus.noncePriv}` + return <WalletAction> + <LogoHeader /> + <h2> + {i18n.str`Digital cash payment`} + </h2> + <section> + <Part big title="Total paid" text={amountToString(payStatus.amountEffective)} kind='negative' /> + <Part big title="Purchase amount" text={amountToString(payStatus.amountRaw)} kind='neutral' /> + {Amounts.isNonZero(totalFees) && <Part big title="Fee" text={amountToString(totalFees)} kind='negative' />} + <Part title="Merchant" text={contractTerms.merchant.name} kind='neutral' /> + <Part title="Purchase" text={contractTerms.summary} kind='neutral' /> + {contractTerms.order_id && <Part title="Receipt" text={`#${contractTerms.order_id}`} kind='neutral' />} + </section> + {showQR && <section> + <QR text={privateUri} /> + <a href={privateUri}>or click here to pay with a installed wallet</a> + </section>} + <section> + {payErrMsg ? ( + <div> + <p>Payment failed: {payErrMsg}</p> + <button + class="pure-button button-success" + onClick={onClick} + > + {i18n.str`Retry`} + </button> + </div> + ) : ( + <Fragment> + + <LinkSuccess + upperCased + // disabled={!details.exchangeInfo.baseUrl} + onClick={() => setShowQR(qr => !qr)} + > + {!showQR ? i18n.str`Complete with mobile wallet` : i18n.str`Hide QR`} + </LinkSuccess> + <ButtonSuccess + upperCased + // disabled={!details.exchangeInfo.baseUrl} + // onClick={() => onReview(true)} + > + {i18n.str`Confirm payment`} + </ButtonSuccess> + </Fragment> + )} + + </section> + </WalletAction> +} -}
\ No newline at end of file +function amountToString(text: AmountLike) { + const aj = Amounts.jsonifyAmount(text) + const amount = Amounts.stringifyValue(aj) + return `${amount} ${aj.currency}` +} diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx index ac25bcd15..304313a9e 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx @@ -80,20 +80,18 @@ export function View({ details, amount, onWithdraw, terms, reviewing, onReview, const needsReview = terms.status === 'changed' || terms.status === 'new' return ( - <WalletAction style={{ textAlign: 'center' }}> + <WalletAction> <LogoHeader /> <h2> {i18n.str`Digital cash withdrawal`} </h2> <section> - <div> - <Part title="Total to withdraw" text={amountToString(Amounts.sub(Amounts.parseOrThrow(amount), details.withdrawFee).amount)} kind='positive' /> - <Part title="Chosen amount" text={amountToString(amount)} kind='neutral' /> - {Amounts.isNonZero(details.withdrawFee) && - <Part title="Exchange fee" text={amountToString(details.withdrawFee)} kind='negative' /> - } - <Part title="Exchange" text={details.exchangeInfo.baseUrl} kind='neutral' big /> - </div> + <Part title="Total to withdraw" text={amountToString(Amounts.sub(Amounts.parseOrThrow(amount), details.withdrawFee).amount)} kind='positive' /> + <Part title="Chosen amount" text={amountToString(amount)} kind='neutral' /> + {Amounts.isNonZero(details.withdrawFee) && + <Part title="Exchange fee" text={amountToString(details.withdrawFee)} kind='negative' /> + } + <Part title="Exchange" text={details.exchangeInfo.baseUrl} kind='neutral' big /> </section> {!reviewing && <section> @@ -132,63 +130,50 @@ export function View({ details, amount, onWithdraw, terms, reviewing, onReview, } {(reviewing || accepted) && <section> - <div> - <CheckboxOutlined - name="terms" - enabled={accepted} - label={i18n.str`I accept the exchange terms of service`} - onToggle={() => { - onAccept(!accepted) - onReview(false) - }} - /> - </div> + <CheckboxOutlined + name="terms" + enabled={accepted} + label={i18n.str`I accept the exchange terms of service`} + onToggle={() => { + onAccept(!accepted) + onReview(false) + }} + /> </section> } <section> {terms.status === 'new' && !accepted && - <div> - <ButtonSuccess - upperCased - disabled={!details.exchangeInfo.baseUrl} - onClick={() => onReview(true)} - > - {i18n.str`Review exchange terms of service`} - </ButtonSuccess> - </div> + <ButtonSuccess + upperCased + disabled={!details.exchangeInfo.baseUrl} + onClick={() => onReview(true)} + > + {i18n.str`Review exchange terms of service`} + </ButtonSuccess> } {terms.status === 'changed' && !accepted && - <div> - <ButtonWarning - upperCased - disabled={!details.exchangeInfo.baseUrl} - onClick={() => onReview(true)} - > - {i18n.str`Review new version of terms of service`} - </ButtonWarning> - </div> + <ButtonWarning + upperCased + disabled={!details.exchangeInfo.baseUrl} + onClick={() => onReview(true)} + > + {i18n.str`Review new version of terms of service`} + </ButtonWarning> } {(terms.status === 'accepted' || (needsReview && accepted)) && - <div> - <ButtonSuccess - upperCased - disabled={!details.exchangeInfo.baseUrl || confirmed} - onClick={onWithdraw} - > - {i18n.str`Confirm withdrawal`} - </ButtonSuccess> - </div> + <ButtonSuccess + upperCased + disabled={!details.exchangeInfo.baseUrl || confirmed} + onClick={onWithdraw} + > + {i18n.str`Confirm withdrawal`} + </ButtonSuccess> } {terms.status === 'notfound' && - <div> - <ButtonDestructive - upperCased - disabled={true} - > - {i18n.str`Exchange doesn't have terms of service`} - </ButtonDestructive> - </div> + <ButtonDestructive upperCased disabled> + {i18n.str`Exchange doesn't have terms of service`} + </ButtonDestructive> } </section> </WalletAction> @@ -231,12 +216,16 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element useEffect(() => { async function fetchData() { if (!uriInfo || !uriInfo.defaultExchangeBaseUrl) return - const res = await getExchangeWithdrawalInfo({ - exchangeBaseUrl: uriInfo.defaultExchangeBaseUrl, - amount: Amounts.parseOrThrow(uriInfo.amount), - tosAcceptedFormat: ['text/json', 'text/xml', 'text/pdf'] - }) - setDetails(res) + try { + const res = await getExchangeWithdrawalInfo({ + exchangeBaseUrl: uriInfo.defaultExchangeBaseUrl, + amount: Amounts.parseOrThrow(uriInfo.amount), + tosAcceptedFormat: ['text/json', 'text/xml', 'text/pdf'] + }) + setDetails(res) + } catch (e) { + setError(true) + } } fetchData() }, [uriInfo]) @@ -249,8 +238,12 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element if (!details) { throw Error("can't accept, no exchange selected"); } - await setExchangeTosAccepted(details.exchangeDetails.exchangeBaseUrl, details.tosRequested?.tosEtag) - setAccepted(true) + try { + await setExchangeTosAccepted(details.exchangeDetails.exchangeBaseUrl, details.tosRequested?.tosEtag) + setAccepted(true) + } catch (e) { + setError(true) + } } const onWithdraw = async (): Promise<void> => { @@ -259,10 +252,14 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element } setConfirmed(true) console.log("accepting exchange", details.exchangeInfo.baseUrl); - const res = await acceptWithdrawal(talerWithdrawUri, details.exchangeInfo.baseUrl); - console.log("accept withdrawal response", res); - if (res.confirmTransferUrl) { - document.location.href = res.confirmTransferUrl; + try { + const res = await acceptWithdrawal(talerWithdrawUri, details.exchangeInfo.baseUrl); + console.log("accept withdrawal response", res); + if (res.confirmTransferUrl) { + document.location.href = res.confirmTransferUrl; + } + } catch (e) { + setConfirmed(false) } }; @@ -288,7 +285,7 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element } catch (e) { console.log(e) debugger; - } + } } } |