diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/TransferCreate')
4 files changed, 147 insertions, 30 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts b/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts index 83293438f..8d51ff3e0 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts +++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts @@ -48,11 +48,11 @@ export namespace State { } export interface Ready extends BaseInfo { status: "ready"; - invalid: boolean; create: ButtonHandler; toBeReceived: AmountJson; - chosenAmount: AmountJson; + debitAmount: AmountJson; subject: TextFieldHandler; + expiration: TextFieldHandler; error: undefined; operationError?: TalerErrorDetail; } diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts b/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts index b229924b2..089f46047 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts +++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts @@ -14,9 +14,11 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { Amounts, TalerErrorDetail } from "@gnu-taler/taler-util"; +import { Amounts, TalerErrorDetail, TalerProtocolTimestamp } from "@gnu-taler/taler-util"; import { TalerError, WalletApiOperation } from "@gnu-taler/taler-wallet-core"; +import { format, isFuture, parse } from "date-fns"; import { useState } from "preact/hooks"; +import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import { wxApi } from "../../wxApi.js"; import { Props, State } from "./index.js"; @@ -26,17 +28,65 @@ export function useComponentState( ): State { const amount = Amounts.parseOrThrow(amountStr); - const [subject, setSubject] = useState(""); + const [subject, setSubject] = useState<string | undefined>(); + const [timestamp, setTimestamp] = useState<string | undefined>() + const [operationError, setOperationError] = useState< TalerErrorDetail | undefined >(undefined); + + const hook = useAsyncAsHook(async () => { + const resp = await api.wallet.call(WalletApiOperation.PreparePeerPushPayment, { + amount: amountStr + }) + return resp + }) + + if (!hook) { + return { + status: "loading", + error: undefined + } + } + if (hook.hasError) { + return { + status: "loading-uri", + error: hook + } + } + + const { amountEffective, amountRaw } = hook.response + const debitAmount = Amounts.parseOrThrow(amountRaw) + const toBeReceived = Amounts.parseOrThrow(amountEffective) + + let purse_expiration: TalerProtocolTimestamp | undefined = undefined + let timestampError: string | undefined = undefined; + + const t = timestamp === undefined ? undefined : parse(timestamp, "dd/MM/yyyy", new Date()) + + if (t !== undefined) { + if (Number.isNaN(t.getTime())) { + timestampError = 'Should have the format "dd/MM/yyyy"' + } else { + if (!isFuture(t)) { + timestampError = 'Should be in the future' + } else { + purse_expiration = { + t_s: t.getTime() / 1000 + } + } + } + } + async function accept(): Promise<void> { + if (!subject || !purse_expiration) return; try { const resp = await api.wallet.call(WalletApiOperation.InitiatePeerPushPayment, { - amount: Amounts.stringify(amount), partialContractTerms: { summary: subject, + amount: amountStr, + purse_expiration }, }); onSuccess(resp.transactionId); @@ -48,22 +98,31 @@ export function useComponentState( throw Error("error trying to accept"); } } + + const unableToCreate = !subject || Amounts.isZero(amount) || !purse_expiration + return { status: "ready", - invalid: !subject || Amounts.isZero(amount), cancel: { onClick: onClose, }, subject: { - error: !subject ? "cant be empty" : undefined, - value: subject, + error: subject === undefined ? undefined : !subject ? "Can't be empty" : undefined, + value: subject ?? "", onInput: async (e) => setSubject(e), }, + expiration: { + error: timestampError, + value: timestamp === undefined ? "" : timestamp, + onInput: async (e) => { + setTimestamp(e) + } + }, create: { - onClick: accept, + onClick: unableToCreate ? undefined : accept, }, - chosenAmount: amount, - toBeReceived: amount, + debitAmount, + toBeReceived, error: undefined, operationError, }; diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx b/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx index 2746cc153..de781f008 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx @@ -27,11 +27,14 @@ export default { }; export const Ready = createExample(ReadyView, { - chosenAmount: { + debitAmount: { currency: "ARS", value: 1, fraction: 0, }, + expiration: { + value: "20/1/2022", + }, create: {}, cancel: {}, toBeReceived: { diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx index bca806c5d..7b1c208b9 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx @@ -14,6 +14,7 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import { format } from "date-fns"; import { h, VNode } from "preact"; import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js"; import { LoadingError } from "../../components/LoadingError.js"; @@ -40,14 +41,37 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode { export function ReadyView({ subject, + expiration, toBeReceived, - chosenAmount, + debitAmount, create, operationError, cancel, - invalid, }: State.Ready): VNode { const { i18n } = useTranslationContext(); + + async function oneDayExpiration() { + if (expiration.onInput) { + expiration.onInput( + format(new Date().getTime() + 1000 * 60 * 60 * 24, "dd/MM/yyyy"), + ); + } + } + + async function oneWeekExpiration() { + if (expiration.onInput) { + expiration.onInput( + format(new Date().getTime() + 1000 * 60 * 60 * 24 * 7, "dd/MM/yyyy"), + ); + } + } + async function _20DaysExpiration() { + if (expiration.onInput) { + expiration.onInput( + format(new Date().getTime() + 1000 * 60 * 60 * 24 * 20, "dd/MM/yyyy"), + ); + } + } return ( <WalletAction> <LogoHeader /> @@ -65,34 +89,65 @@ export function ReadyView({ /> )} <section style={{ textAlign: "left" }}> - <TextField - label="Subject" - variant="filled" - error={subject.error} - required - fullWidth - value={subject.value} - onChange={subject.onInput} - /> + <p> + <TextField + label="Subject" + variant="filled" + error={subject.error} + required + fullWidth + value={subject.value} + onChange={subject.onInput} + /> + </p> + <p> + <TextField + label="Expiration" + variant="filled" + error={expiration.error} + required + fullWidth + value={expiration.value} + onChange={expiration.onInput} + /> + <p> + <Button + variant="outlined" + disabled={!expiration.onInput} + onClick={oneDayExpiration} + > + 1 day + </Button> + <Button + variant="outlined" + disabled={!expiration.onInput} + onClick={oneWeekExpiration} + > + 1 week + </Button> + <Button + variant="outlined" + disabled={!expiration.onInput} + onClick={_20DaysExpiration} + > + 20 days + </Button> + </p> + </p> <Part title={<i18n.Translate>Details</i18n.Translate>} text={ <TransferDetails amount={{ effective: toBeReceived, - raw: chosenAmount, + raw: debitAmount, }} /> } /> </section> <section> - <Button - disabled={invalid} - onClick={create.onClick} - variant="contained" - color="success" - > + <Button onClick={create.onClick} variant="contained" color="success"> <i18n.Translate>Create</i18n.Translate> </Button> </section> |