diff options
author | Sebastian <sebasjm@gmail.com> | 2022-11-08 13:00:34 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-11-08 13:00:34 -0300 |
commit | 5c742afbdf9aaa767c3e4617c48a98439e400fa2 (patch) | |
tree | 336aa5fc9bc02879e989aef4fe2a82a7b167ef8d /packages/taler-wallet-webextension/src/cta/InvoiceCreate | |
parent | 43c7cff75055f72c7d59a7180ae8da2554456d8d (diff) | |
download | wallet-core-5c742afbdf9aaa767c3e4617c48a98439e400fa2.tar.gz wallet-core-5c742afbdf9aaa767c3e4617c48a98439e400fa2.tar.bz2 wallet-core-5c742afbdf9aaa767c3e4617c48a98439e400fa2.zip |
feature: 7440 add expiration to p2p
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/InvoiceCreate')
4 files changed, 143 insertions, 31 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts index 0389a17fb..01dbb6d6d 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts +++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts @@ -59,10 +59,10 @@ export namespace State { doSelectExchange: ButtonHandler; create: ButtonHandler; subject: TextFieldHandler; + expiration: TextFieldHandler; toBeReceived: AmountJson; - chosenAmount: AmountJson; + requestAmount: AmountJson; exchangeUrl: string; - invalid: boolean; error: undefined; operationError?: TalerErrorDetail; } diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts index d845e121a..27f05ce03 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts +++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts @@ -15,8 +15,9 @@ */ /* eslint-disable react-hooks/rules-of-hooks */ -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 { isFuture, parse } from "date-fns"; import { useState } from "preact/hooks"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import { useSelectedExchange } from "../../hooks/useSelectedExchange.js"; @@ -49,7 +50,8 @@ export function useComponentState( const exchangeList = hook.response.exchanges; return () => { - const [subject, setSubject] = useState(""); + const [subject, setSubject] = useState<string | undefined>(); + const [timestamp, setTimestamp] = useState<string | undefined>() const [operationError, setOperationError] = useState< TalerErrorDetail | undefined @@ -67,13 +69,59 @@ export function useComponentState( const exchange = selectedExchange.selected; + const hook = useAsyncAsHook(async () => { + const resp = await api.wallet.call(WalletApiOperation.PreparePeerPullPayment, { + amount: amountStr, + exchangeBaseUrl: exchange.exchangeBaseUrl, + }) + return resp + }) + + if (!hook) { + return { + status: "loading", + error: undefined + } + } + if (hook.hasError) { + return { + status: "loading-uri", + error: hook + } + } + + const { amountEffective, amountRaw } = hook.response + const requestAmount = 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.InitiatePeerPullPayment, { - amount: Amounts.stringify(amount), exchangeBaseUrl: exchange.exchangeBaseUrl, partialContractTerms: { + amount: Amounts.stringify(amount), summary: subject, + purse_expiration }, }); @@ -86,25 +134,32 @@ export function useComponentState( throw Error("error trying to accept"); } } + const unableToCreate = !subject || Amounts.isZero(amount) || !purse_expiration return { status: "ready", 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) + } + }, doSelectExchange: selectedExchange.doSelect, - invalid: !subject || Amounts.isZero(amount), exchangeUrl: exchange.exchangeBaseUrl, create: { - onClick: accept, + onClick: unableToCreate ? undefined : accept, }, cancel: { onClick: onClose, }, - chosenAmount: amount, - toBeReceived: amount, + requestAmount, + toBeReceived, error: undefined, operationError, }; diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx index 77885b0c1..8d4473d8f 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx @@ -27,11 +27,14 @@ export default { }; export const Ready = createExample(ReadyView, { - chosenAmount: { + requestAmount: { currency: "ARS", value: 1, fraction: 0, }, + expiration: { + value: "2/12/12", + }, cancel: {}, toBeReceived: { currency: "ARS", diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx index 4970f590f..f15482953 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/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"; @@ -46,18 +47,40 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode { } export function ReadyView({ - invalid, exchangeUrl, subject, + expiration, cancel, operationError, create, toBeReceived, - chosenAmount, + requestAmount, doSelectExchange, }: 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 /> @@ -75,16 +98,6 @@ export function ReadyView({ /> )} <section style={{ textAlign: "left" }}> - <TextField - label="Subject" - variant="filled" - error={subject.error} - required - fullWidth - value={subject.value} - onChange={subject.onInput} - /> - <Part title={ <div @@ -107,6 +120,52 @@ export function ReadyView({ kind="neutral" big /> + <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>} @@ -114,19 +173,14 @@ export function ReadyView({ <InvoiceDetails amount={{ effective: toBeReceived, - raw: chosenAmount, + raw: requestAmount, }} /> } /> </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> |