diff options
author | Sebastian <sebasjm@gmail.com> | 2021-09-13 13:32:58 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-09-13 13:32:58 -0300 |
commit | c24db59be8b2eba013cba3f65d14be8e700bc206 (patch) | |
tree | 831b1287eefade05a743a1d5b57d793425dba80e /packages/taler-wallet-webextension/src/cta/Withdraw.tsx | |
parent | 217f34397f95fc988280eee9c376efe0781c69ea (diff) | |
download | wallet-core-c24db59be8b2eba013cba3f65d14be8e700bc206.tar.xz |
withdraw design
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/Withdraw.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/cta/Withdraw.tsx | 152 |
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 9719b8f5e..6263285fd 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={[]} /> } |