diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/Pay.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/cta/Pay.tsx | 136 |
1 files changed, 69 insertions, 67 deletions
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}` +} |