diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx')
| -rw-r--r-- | packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx | 221 |
1 files changed, 134 insertions, 87 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx index 5c35151c8..aade67835 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx @@ -14,77 +14,60 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { Fragment, h, VNode } from "preact"; +import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { Amount } from "../../components/Amount.js"; -import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js"; -import { LoadingError } from "../../components/LoadingError.js"; -import { LogoHeader } from "../../components/LogoHeader.js"; +import { AmountField } from "../../components/AmountField.js"; import { Part } from "../../components/Part.js"; import { QR } from "../../components/QR.js"; import { SelectList } from "../../components/SelectList.js"; -import { - Input, - Link, - LinkSuccess, - SubTitle, - SvgIcon, - WalletAction, -} from "../../components/styled/index.js"; -import { useTranslationContext } from "../../context/translation.js"; -import { Button } from "../../mui/Button.js"; -import editIcon from "../../svg/edit_24px.svg"; -import { ExchangeDetails, WithdrawDetails } from "../../wallet/Transaction.js"; import { TermsOfService } from "../../components/TermsOfService/index.js"; +import { Input, LinkSuccess, SvgIcon, WarningBox } from "../../components/styled/index.js"; +import { Button } from "../../mui/Button.js"; +import { Grid } from "../../mui/Grid.js"; +import editIcon from "../../svg/edit_24px.inline.svg"; +import { + ExchangeDetails, + WithdrawDetails, + getAmountWithFee, +} from "../../wallet/Transaction.js"; import { State } from "./index.js"; -import { ExchangeTosStatus } from "@gnu-taler/taler-util"; - -export function LoadingUriView({ error }: State.LoadingUriError): VNode { - const { i18n } = useTranslationContext(); - - return ( - <LoadingError - title={ - <i18n.Translate>Could not get the info from the URI</i18n.Translate> - } - error={error} - /> - ); -} +import { EnabledBySettings } from "../../components/EnabledBySettings.js"; -export function LoadingInfoView({ error }: State.LoadingInfoError): VNode { +export function FinalStateOperation(state: State.AlreadyCompleted): VNode { const { i18n } = useTranslationContext(); - return ( - <LoadingError - title={<i18n.Translate>Could not get info of withdrawal</i18n.Translate>} - error={error} - /> - ); + switch (state.operationState) { + case "confirmed": return <WarningBox> + <div style={{ justifyContent: "center", lineHeight: "25px" }}> + <i18n.Translate>This operation has already been completed by another wallet.</i18n.Translate> + </div> + </WarningBox> + case "aborted": return <WarningBox> + <div style={{ justifyContent: "center", lineHeight: "25px" }}> + <i18n.Translate>This operation has already been aborted</i18n.Translate> + </div> + </WarningBox> + case "selected": return <WarningBox> + <div style={{ justifyContent: "center", lineHeight: "25px" }}> + <i18n.Translate>This operation has already been used by another wallet.</i18n.Translate> + </div> + <div style={{ justifyContent: "center", lineHeight: "25px" }}> + <i18n.Translate>It can be confirmed in</i18n.Translate> <a target="_bank" rel="noreferrer" href={state.confirmTransferUrl}> + <i18n.Translate>this page</i18n.Translate> + </a> + </div> + </WarningBox> + } } export function SuccessView(state: State.Success): VNode { const { i18n } = useTranslationContext(); - const currentTosVersionIsAccepted = - state.currentExchange.tosStatus === ExchangeTosStatus.Accepted; + // const currentTosVersionIsAccepted = + // state.currentExchange.tosStatus === ExchangeTosStatus.Accepted; return ( - <WalletAction> - <LogoHeader /> - <SubTitle> - <i18n.Translate>Digital cash withdrawal</i18n.Translate> - </SubTitle> - - {state.doWithdrawal.error && ( - <ErrorTalerOperation - title={ - <i18n.Translate> - Could not finish the withdrawal operation - </i18n.Translate> - } - error={state.doWithdrawal.error.errorDetail} - /> - )} - + <Fragment> <section style={{ textAlign: "left" }}> <Part title={ @@ -95,13 +78,15 @@ export function SuccessView(state: State.Success): VNode { }} > <i18n.Translate>Exchange</i18n.Translate> - <Button onClick={state.doSelectExchange.onClick} variant="text"> - <SvgIcon - title="Edit" - dangerouslySetInnerHTML={{ __html: editIcon }} - color="black" - /> - </Button> + <EnabledBySettings name="showExchangeManagement"> + <Button onClick={state.doSelectExchange.onClick} variant="text"> + <SvgIcon + title="Edit" + dangerouslySetInnerHTML={{ __html: editIcon }} + color="black" + /> + </Button> + </EnabledBySettings> </div> } text={ @@ -110,21 +95,39 @@ export function SuccessView(state: State.Success): VNode { kind="neutral" big /> + {state.chooseCurrencies.length > 0 ? + <Fragment> + <p> + {state.chooseCurrencies.map(currency => { + return <Button variant={currency === state.selectedCurrency ? "contained" : "outlined"} + onClick={async () => { + state.changeCurrency(currency) + }} + > + {currency} + </Button> + })} + </p> + </Fragment> + : <Fragment />} + <Part - title={<i18n.Translate>Details</i18n.Translate>} + title={i18n.str`Details`} text={ <WithdrawDetails - amount={{ - effective: state.toBeReceived, - raw: state.chosenAmount, - }} + conversion={state.conversionInfo?.amount} + amount={getAmountWithFee( + state.toBeReceived, + state.chosenAmount, + "credit", + )} /> } /> {state.ageRestriction && ( <Input> <SelectList - label={<i18n.Translate>Age restriction</i18n.Translate>} + label={i18n.str`Age restriction`} list={state.ageRestriction.list} name="age" value={state.ageRestriction.value} @@ -135,7 +138,8 @@ export function SuccessView(state: State.Success): VNode { </section> <section> - {currentTosVersionIsAccepted ? ( + {/* <div> */} + <TermsOfService exchangeUrl={state.currentExchange.exchangeBaseUrl}> <Button variant="contained" color="success" @@ -146,22 +150,26 @@ export function SuccessView(state: State.Success): VNode { Withdraw <Amount value={state.toBeReceived} /> </i18n.Translate> </Button> - ) : ( - <TermsOfService - exchangeUrl={state.currentExchange.exchangeBaseUrl} - onChange={state.onTosUpdate} - /> - )} + </TermsOfService> + {/* </div> + <div style={{ marginTop: 20 }}> + <Button + variant="text" + color="success" + + disabled={!state.doAbort.onClick} + onClick={state.doAbort.onClick} + > + <i18n.Translate> + Cancel + </i18n.Translate> + </Button> + </div> */} </section> {state.talerWithdrawUri ? ( <WithdrawWithMobile talerWithdrawUri={state.talerWithdrawUri} /> ) : undefined} - <section> - <Link upperCased onClick={state.cancel}> - <i18n.Translate>Cancel</i18n.Translate> - </Link> - </section> - </WalletAction> + </Fragment> ); } @@ -176,11 +184,7 @@ function WithdrawWithMobile({ return ( <section> <LinkSuccess upperCased onClick={() => setShowQR((qr) => !qr)}> - {!showQR ? ( - <i18n.Translate>Withdraw to a mobile phone</i18n.Translate> - ) : ( - <i18n.Translate>Hide QR</i18n.Translate> - )} + {!showQR ? i18n.str`Withdraw to a mobile phone` : i18n.str`Hide QR`} </LinkSuccess> {showQR && ( <div> @@ -196,3 +200,46 @@ function WithdrawWithMobile({ </section> ); } + +export function SelectAmountView({ + currency, + amount, + exchangeBaseUrl, + confirm, +}: State.SelectAmount): VNode { + const { i18n } = useTranslationContext(); + return ( + <Fragment> + <section style={{ textAlign: "left" }}> + <Part + title={ + <div + style={{ + display: "flex", + alignItems: "center", + }} + > + <i18n.Translate>Exchange</i18n.Translate> + </div> + } + text={<ExchangeDetails exchange={exchangeBaseUrl} />} + kind="neutral" + big + /> + <Grid container columns={2} justifyContent="space-between"> + <AmountField label={i18n.str`Amount`} required handler={amount} /> + </Grid> + </section> + <section> + <Button + variant="contained" + color="info" + disabled={!confirm.onClick} + onClick={confirm.onClick} + > + <i18n.Translate>See details</i18n.Translate> + </Button> + </section> + </Fragment> + ); +} |