aboutsummaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2021-09-17 15:48:33 -0300
committerSebastian <sebasjm@gmail.com>2021-09-17 15:49:07 -0300
commit315b167bee240e625beea731df6472a971b46cb2 (patch)
tree098557be6106622844ad5d59dce7e0c64bb22bcc /packages/taler-wallet-webextension
parent490620ad04a677fa220cbe77dc0bea29b6e80c12 (diff)
issue #5860
Diffstat (limited to 'packages/taler-wallet-webextension')
-rw-r--r--packages/taler-wallet-webextension/package.json1
-rw-r--r--packages/taler-wallet-webextension/src/components/QR.tsx37
-rw-r--r--packages/taler-wallet-webextension/src/components/styled/index.tsx8
-rw-r--r--packages/taler-wallet-webextension/src/cta/Pay.stories.tsx7
-rw-r--r--packages/taler-wallet-webextension/src/cta/Pay.tsx136
-rw-r--r--packages/taler-wallet-webextension/src/cta/Withdraw.tsx133
6 files changed, 186 insertions, 136 deletions
diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json
index 028a5c660..4023e4ebd 100644
--- a/packages/taler-wallet-webextension/package.json
+++ b/packages/taler-wallet-webextension/package.json
@@ -22,6 +22,7 @@
"history": "4.10.1",
"preact": "^10.5.13",
"preact-router": "^3.2.1",
+ "qrcode-generator": "^1.4.4",
"tslib": "^2.1.0"
},
"devDependencies": {
diff --git a/packages/taler-wallet-webextension/src/components/QR.tsx b/packages/taler-wallet-webextension/src/components/QR.tsx
new file mode 100644
index 000000000..8e3f69295
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/QR.tsx
@@ -0,0 +1,37 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+
+ import { h, VNode } from "preact";
+ import { useEffect, useRef } from "preact/hooks";
+ import qrcode from "qrcode-generator";
+
+ export function QR({ text }: { text: string; }):VNode {
+ const divRef = useRef<HTMLDivElement>(null);
+ useEffect(() => {
+ if (!divRef.current) return
+ const qr = qrcode(0, 'L');
+ qr.addData(text);
+ qr.make();
+ divRef.current.innerHTML = qr.createSvgTag({
+ scalable: true,
+ });
+ });
+
+ return <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+ <div style={{ width: '50%', minWidth: 200, maxWidth: 300 }} ref={divRef} />
+ </div>;
+ }
+ \ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index f7945569e..a46f38ee9 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -29,10 +29,11 @@ export const PaymentStatus = styled.div<{ color: string }>`
export const WalletAction = styled.section`
display: flex;
+ text-align: center;
flex-direction: column;
justify-content: space-between;
align-items: center;
- max-width: 50%;
+ /* max-width: 50%; */
margin: auto;
height: 100%;
@@ -42,6 +43,10 @@ export const WalletAction = styled.section`
}
section {
margin-bottom: 2em;
+ & button {
+ margin-right: 8px;
+ margin-left: 8px;
+ }
}
`
export const WalletActionOld = styled.section`
@@ -628,6 +633,7 @@ export const TermsOfService = styled.div`
display: flex;
flex-direction: column;
text-align: left;
+ max-width: 500px;
& > header {
text-align: center;
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;
- }
+ }
}
}