/* This file is part of GNU Taler (C) 2022 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 */ /** * * @author Sebastian Javier Marchano (sebasjm) */ import { AmountJson, Amounts } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { ErrorMessage } from "../components/ErrorMessage.js"; import { SelectList } from "../components/SelectList.js"; import { BoldLight, Centered, Input, InputWithLabel, LightText, LinkPrimary, SubTitle, } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; import { Button } from "../mui/Button.js"; import { SelectFieldHandler, TextFieldHandler } from "../mui/handlers.js"; import { Pages } from "../NavigationBar.js"; export interface Props { error: string | undefined; initialAmount?: string; exchangeUrlWithCurrency: Record; onCreate: (exchangeBaseUrl: string, amount: AmountJson) => Promise; initialCurrency?: string; } export interface State { noExchangeFound: boolean; parsedAmount: AmountJson | undefined; amount: TextFieldHandler; currency: SelectFieldHandler; exchange: SelectFieldHandler; } export function useComponentState( exchangeUrlWithCurrency: Record, initialAmount: string | undefined, initialCurrency: string | undefined, ): State { const exchangeSelectList = Object.keys(exchangeUrlWithCurrency); const currencySelectList = Object.values(exchangeUrlWithCurrency); const exchangeMap = exchangeSelectList.reduce( (p, c) => ({ ...p, [c]: `${c} (${exchangeUrlWithCurrency[c]})` }), {} as Record, ); const currencyMap = currencySelectList.reduce( (p, c) => ({ ...p, [c]: c }), {} as Record, ); const foundExchangeForCurrency = exchangeSelectList.findIndex( (e) => exchangeUrlWithCurrency[e] === initialCurrency, ); const initialExchange = foundExchangeForCurrency !== -1 ? exchangeSelectList[foundExchangeForCurrency] : !initialCurrency && exchangeSelectList.length > 0 ? exchangeSelectList[0] : undefined; const [exchange, setExchange] = useState(initialExchange || ""); const [currency, setCurrency] = useState( initialExchange ? exchangeUrlWithCurrency[initialExchange] : "", ); const [amount, setAmount] = useState(initialAmount || ""); const parsedAmount = Amounts.parse(`${currency}:${amount}`); async function changeExchange(exchange: string): Promise { setExchange(exchange); setCurrency(exchangeUrlWithCurrency[exchange]); } async function changeCurrency(currency: string): Promise { setCurrency(currency); const found = Object.entries(exchangeUrlWithCurrency).find( (e) => e[1] === currency, ); if (found) { setExchange(found[0]); } else { setExchange(""); } } return { noExchangeFound: initialExchange === undefined, currency: { list: currencyMap, value: currency, onChange: changeCurrency, }, exchange: { list: exchangeMap, value: exchange, onChange: changeExchange, }, amount: { value: amount, onInput: async (e: string) => setAmount(e), }, parsedAmount, }; } export function CreateManualWithdraw({ initialAmount, exchangeUrlWithCurrency, error, initialCurrency, onCreate, }: Props): VNode { const { i18n } = useTranslationContext(); const state = useComponentState( exchangeUrlWithCurrency, initialAmount, initialCurrency, ); if (state.noExchangeFound) { if (initialCurrency) { return (
Manual Withdrawal for {initialCurrency} Choose a exchange from where the coins will be withdrawn. The exchange will send the coins to this wallet after receiving a wire transfer with the correct subject. No exchange found for {initialCurrency} Add Exchange
); } return (
Manual Withdrawal for {state.currency.value} Choose a exchange from where the coins will be withdrawn. The exchange will send the coins to this wallet after receiving a wire transfer with the correct subject. No exchange configured Add Exchange
); } return (
{error && ( Can't create the reserve } description={error} /> )} Manual Withdrawal for {state.currency.value} Choose a exchange from where the coins will be withdrawn. The exchange will send the coins to this wallet after receiving a wire transfer with the correct subject.

Currency} name="currency" {...state.currency} /> Exchange} name="exchange" {...state.exchange} />

Add Exchange
{state.currency.value && (
{state.currency.value} state.amount.onInput(e.currentTarget.value)} />
)}

); }