summaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/Withdraw.tsx')
-rw-r--r--packages/taler-wallet-webextension/src/cta/Withdraw.tsx152
1 files changed, 133 insertions, 19 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index 9719b8f5..6263285f 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -24,10 +24,11 @@
import { AmountLike, Amounts, i18n, WithdrawUriInfoResponse } from '@gnu-taler/taler-util';
import { ExchangeWithdrawDetails } from '@gnu-taler/taler-wallet-core/src/operations/withdraw';
import { useEffect, useState } from "preact/hooks";
-import { JSX } from "preact/jsx-runtime";
+import { CheckboxOutlined } from '../components/CheckboxOutlined';
+import { ExchangeXmlTos } from '../components/ExchangeToS';
import { LogoHeader } from '../components/LogoHeader';
import { Part } from '../components/Part';
-import { ButtonSuccess, WalletAction } from '../components/styled';
+import { ButtonDestructive, ButtonSuccess, ButtonWarning, LinkSuccess, TermsOfService, WalletAction } from '../components/styled';
import {
acceptWithdrawal, getExchangeWithdrawalInfo, getWithdrawalDetailsForUri, onUpdateNotification
} from "../wxApi";
@@ -40,19 +41,42 @@ interface Props {
export interface ViewProps {
details: ExchangeWithdrawDetails;
amount: string;
- accept: () => Promise<void>;
- setCancelled: (b: boolean) => void;
- setSelecting: (b: boolean) => void;
+ onWithdraw: () => Promise<void>;
+ // setCancelled: (b: boolean) => void;
+ // setSelecting: (b: boolean) => void;
+ onReview: (b: boolean) => void;
+ onAccept: (b: boolean) => void;
+ reviewing: boolean;
+ accepted: boolean;
+ terms: {
+ value?: TermsDocument;
+ status: TermsStatus;
+ }
+
};
+type TermsStatus = 'new' | 'accepted' | 'changed' | 'notfound';
+
+type TermsDocument = TermsDocumentXml | TermsDocumentHtml;
+
+interface TermsDocumentXml {
+ type: 'xml',
+ document: Document,
+}
+
+interface TermsDocumentHtml {
+ type: 'html',
+ href: string,
+}
+
function amountToString(text: AmountLike) {
const aj = Amounts.jsonifyAmount(text)
const amount = Amounts.stringifyValue(aj)
return `${amount} ${aj.currency}`
}
-
-export function View({ details, amount, accept, setCancelled, setSelecting }: ViewProps) {
+export function View({ details, amount, onWithdraw, terms, reviewing, onReview, onAccept, accepted }: ViewProps) {
+ const needsReview = terms.status === 'changed' || terms.status === 'new'
return (
<WalletAction style={{ textAlign: 'center' }}>
@@ -70,17 +94,101 @@ export function View({ details, amount, accept, setCancelled, setSelecting }: Vi
<Part title="Exchange" text={details.exchangeInfo.baseUrl} kind='neutral' big />
</div>
</section>
- <section>
-
- <div>
- <ButtonSuccess
+ {!reviewing &&
+ <section>
+ <LinkSuccess
upperCased
- disabled={!details.exchangeInfo.baseUrl}
- onClick={accept}
>
- {i18n.str`Accept fees and withdraw`}
- </ButtonSuccess>
- </div>
+ {i18n.str`Edit exchange`}
+ </LinkSuccess>
+ </section>
+ }
+ {!reviewing && accepted &&
+ <section>
+ <LinkSuccess
+ upperCased
+ onClick={() => onReview(true)}
+ >
+ {i18n.str`Show terms of service`}
+ </LinkSuccess>
+ </section>
+ }
+ {reviewing &&
+ <section>
+ <TermsOfService>
+ {terms.status !== 'accepted' && terms.value && terms.value.type === 'xml' && <ExchangeXmlTos doc={terms.value.document} />}
+ </TermsOfService>
+ </section>}
+ {reviewing && accepted &&
+ <section>
+ <LinkSuccess
+ upperCased
+ onClick={() => onReview(false)}
+ >
+ {i18n.str`Hide terms of service`}
+ </LinkSuccess>
+ </section>
+ }
+ {(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>
+ </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>
+ }
+ {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>
+ }
+ {(terms.status === 'accepted' || (needsReview && accepted)) &&
+ <div>
+ <ButtonSuccess
+ upperCased
+ disabled={!details.exchangeInfo.baseUrl}
+ onClick={onWithdraw}
+ >
+ {i18n.str`Confirm withdrawal`}
+ </ButtonSuccess>
+ </div>
+ }
+ {terms.status === 'notfound' &&
+ <div>
+ <ButtonDestructive
+ upperCased
+ disabled={true}
+ >
+ {i18n.str`Exchange doesn't have terms of service`}
+ </ButtonDestructive>
+ </div>
+ }
</section>
</WalletAction>
)
@@ -93,6 +201,8 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element
const [selecting, setSelecting] = useState(false);
const [error, setError] = useState<boolean>(false);
const [updateCounter, setUpdateCounter] = useState(1);
+ const [reviewing, setReviewing] = useState<boolean>(false)
+ const [accepted, setAccepted] = useState<boolean>(false)
useEffect(() => {
return onUpdateNotification(() => {
@@ -132,7 +242,7 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element
return <span><i18n.Translate>missing withdraw uri</i18n.Translate></span>;
}
- const accept = async (): Promise<void> => {
+ const onWithdraw = async (): Promise<void> => {
if (!details) {
throw Error("can't accept, no exchange selected");
}
@@ -157,9 +267,13 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element
return <span><i18n.Translate>Getting withdrawal details.</i18n.Translate></span>;
}
- return <View accept={accept}
- setCancelled={setCancelled} setSelecting={setSelecting}
+ return <View onWithdraw={onWithdraw}
+ // setCancelled={setCancelled} setSelecting={setSelecting}
details={details} amount={uriInfo.amount}
+ terms={{} as any}
+ accepted={accepted} onAccept={setAccepted}
+ reviewing={reviewing} onReview={setReviewing}
+ // terms={[]}
/>
}