From 72b429321553841ac1ff48cf974bfc65da01bb06 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 19 Dec 2022 12:23:39 -0300 Subject: pretty --- .../instance/transfers/create/Create.stories.tsx | 28 ++-- .../paths/instance/transfers/create/CreatePage.tsx | 148 +++++++++++++-------- .../src/paths/instance/transfers/create/index.tsx | 67 +++++----- .../paths/instance/transfers/list/List.stories.tsx | 2 +- .../src/paths/instance/transfers/list/ListPage.tsx | 135 ++++++++++++------- .../src/paths/instance/transfers/list/Table.tsx | 2 +- .../src/paths/instance/transfers/list/index.tsx | 100 ++++++++------ .../src/paths/instance/transfers/update/index.tsx | 14 +- 8 files changed, 303 insertions(+), 193 deletions(-) (limited to 'packages/merchant-backoffice-ui/src/paths/instance/transfers') diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/Create.stories.tsx index d4fbaa901..64b67335c 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/Create.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/Create.stories.tsx @@ -15,29 +15,31 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h, VNode, FunctionalComponent } from 'preact'; +import { h, VNode, FunctionalComponent } from "preact"; import { CreatePage as TestedComponent } from "./CreatePage.js"; - export default { - title: 'Pages/Transfer/Create', + title: "Pages/Transfer/Create", component: TestedComponent, argTypes: { - onUpdate: { action: 'onUpdate' }, - onBack: { action: 'onBack' }, + onUpdate: { action: "onUpdate" }, + onBack: { action: "onBack" }, }, }; -function createExample(Component: FunctionalComponent, props: Partial) { - const r = (args: any) => - r.args = props - return r +function createExample( + Component: FunctionalComponent, + props: Partial, +) { + const r = (args: any) => ; + r.args = props; + return r; } export const Example = createExample(TestedComponent, { - accounts: ['payto://x-taler-bank/account1','payto://x-taler-bank/account2'] + accounts: ["payto://x-taler-bank/account1", "payto://x-taler-bank/account2"], }); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx index 4b4a079d3..5b041df7c 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx @@ -15,90 +15,132 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; -import { FormErrors, FormProvider } from "../../../../components/form/FormProvider.js"; +import { + FormErrors, + FormProvider, +} from "../../../../components/form/FormProvider.js"; import { Input } from "../../../../components/form/Input.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; import { InputSelector } from "../../../../components/form/InputSelector.js"; import { useConfigContext } from "../../../../context/config.js"; import { MerchantBackend } from "../../../../declaration.js"; import { Translate, useTranslator } from "../../../../i18n/index.js"; -import { CROCKFORD_BASE32_REGEX, URL_REGEX } from "../../../../utils/constants.js"; +import { + CROCKFORD_BASE32_REGEX, + URL_REGEX, +} from "../../../../utils/constants.js"; -type Entity = MerchantBackend.Transfers.TransferInformation +type Entity = MerchantBackend.Transfers.TransferInformation; interface Props { onCreate: (d: Entity) => Promise; onBack?: () => void; - accounts: string[], + accounts: string[]; } export function CreatePage({ accounts, onCreate, onBack }: Props): VNode { - const i18n = useTranslator() - const { currency } = useConfigContext() + const i18n = useTranslator(); + const { currency } = useConfigContext(); const [state, setState] = useState>({ - wtid: '', + wtid: "", // payto_uri: , // exchange_url: 'http://exchange.taler:8081/', credit_amount: ``, }); const errors: FormErrors = { - wtid: !state.wtid ? i18n`cannot be empty` : - (!CROCKFORD_BASE32_REGEX.test(state.wtid) ? i18n`check the id, does not look valid` : - (state.wtid.length !== 52 ? i18n`should have 52 characters, current ${state.wtid.length}` : - undefined)), + wtid: !state.wtid + ? i18n`cannot be empty` + : !CROCKFORD_BASE32_REGEX.test(state.wtid) + ? i18n`check the id, does not look valid` + : state.wtid.length !== 52 + ? i18n`should have 52 characters, current ${state.wtid.length}` + : undefined, payto_uri: !state.payto_uri ? i18n`cannot be empty` : undefined, credit_amount: !state.credit_amount ? i18n`cannot be empty` : undefined, - exchange_url: !state.exchange_url ? i18n`cannot be empty` : - (!URL_REGEX.test(state.exchange_url) ? i18n`URL doesn't have the right format` : undefined), - } + exchange_url: !state.exchange_url + ? i18n`cannot be empty` + : !URL_REGEX.test(state.exchange_url) + ? i18n`URL doesn't have the right format` + : undefined, + }; - const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined) + const hasErrors = Object.keys(errors).some( + (k) => (errors as any)[k] !== undefined, + ); const submitForm = () => { - if (hasErrors) return Promise.reject() - return onCreate(state as any) - } - - return
-
-
-
-
- - - - name="wtid" label={i18n`Wire transfer ID`} help="" tooltip={i18n`unique identifier of the wire transfer used by the exchange, must be 52 characters long`} /> - name="exchange_url" - label={i18n`Exchange URL`} - tooltip={i18n`Base URL of the exchange that made the transfer, should have been in the wire transfer subject`} - help="http://exchange.taler:8081/" /> - name="credit_amount" label={i18n`Amount credited`} tooltip={i18n`Actual amount that was wired to the merchant's bank account`} /> - - - -
- {onBack && } - Confirm + if (hasErrors) return Promise.reject(); + return onCreate(state as any); + }; + + return ( +
+
+
+
+
+ + + + name="wtid" + label={i18n`Wire transfer ID`} + help="" + tooltip={i18n`unique identifier of the wire transfer used by the exchange, must be 52 characters long`} + /> + + name="exchange_url" + label={i18n`Exchange URL`} + tooltip={i18n`Base URL of the exchange that made the transfer, should have been in the wire transfer subject`} + help="http://exchange.taler:8081/" + /> + + name="credit_amount" + label={i18n`Amount credited`} + tooltip={i18n`Actual amount that was wired to the merchant's bank account`} + /> + + +
+ {onBack && ( + + )} + + Confirm + +
- +
-
-
-
-
+
+
+ ); } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx index eb48aaf83..db01a57b6 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx @@ -15,46 +15,53 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { Fragment, h, VNode } from 'preact'; -import { useState } from 'preact/hooks'; +import { Fragment, h, VNode } from "preact"; +import { useState } from "preact/hooks"; import { NotificationCard } from "../../../../components/menu/index.js"; import { MerchantBackend } from "../../../../declaration.js"; import { useInstanceDetails } from "../../../../hooks/instance.js"; import { useTransferAPI } from "../../../../hooks/transfer.js"; -import { useTranslator } from '../../../../i18n/index.js'; +import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; import { CreatePage } from "./CreatePage.js"; -export type Entity = MerchantBackend.Transfers.TransferInformation +export type Entity = MerchantBackend.Transfers.TransferInformation; interface Props { onBack?: () => void; onConfirm: () => void; } -export default function CreateTransfer({onConfirm, onBack}:Props): VNode { - const { informTransfer } = useTransferAPI() - const [notif, setNotif] = useState(undefined) - const i18n = useTranslator() - const instance = useInstanceDetails() - const accounts = !instance.ok ? [] : instance.data.accounts.map(a => a.payto_uri) - - return <> - - { - return informTransfer(request).then(() => onConfirm()).catch((error) => { - setNotif({ - message: i18n`could not inform transfer`, - type: "ERROR", - description: error.message - }) - }) - }} /> - -} \ No newline at end of file +export default function CreateTransfer({ onConfirm, onBack }: Props): VNode { + const { informTransfer } = useTransferAPI(); + const [notif, setNotif] = useState(undefined); + const i18n = useTranslator(); + const instance = useInstanceDetails(); + const accounts = !instance.ok + ? [] + : instance.data.accounts.map((a) => a.payto_uri); + + return ( + <> + + { + return informTransfer(request) + .then(() => onConfirm()) + .catch((error) => { + setNotif({ + message: i18n`could not inform transfer`, + type: "ERROR", + description: error.message, + }); + }); + }} + /> + + ); +} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx index 42fcdd733..92b3f9853 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx @@ -39,7 +39,7 @@ export default { function createExample( Component: FunctionalComponent, - props: Partial + props: Partial, ) { const r = (args: any) => ; r.args = props; diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx index 539f1ae34..cad989980 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx @@ -15,15 +15,15 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h, VNode } from 'preact'; +import { h, VNode } from "preact"; import { FormProvider } from "../../../../components/form/FormProvider.js"; import { InputSelector } from "../../../../components/form/InputSelector.js"; import { MerchantBackend } from "../../../../declaration.js"; -import { Translate, useTranslator } from '../../../../i18n/index.js'; +import { Translate, useTranslator } from "../../../../i18n/index.js"; import { CardTable } from "./Table.js"; export interface Props { @@ -43,47 +43,92 @@ export interface Props { onDelete: () => void; } -export function ListPage({ payTo, onChangePayTo, transfers, onCreate, onDelete, accounts, onLoadMoreBefore, onLoadMoreAfter, isAllTransfers, isNonVerifiedTransfers, isVerifiedTransfers, onShowAll, onShowUnverified, onShowVerified }: Props): VNode { - const form = { payto_uri: payTo } +export function ListPage({ + payTo, + onChangePayTo, + transfers, + onCreate, + onDelete, + accounts, + onLoadMoreBefore, + onLoadMoreAfter, + isAllTransfers, + isNonVerifiedTransfers, + isVerifiedTransfers, + onShowAll, + onShowUnverified, + onShowVerified, +}: Props): VNode { + const form = { payto_uri: payTo }; const i18n = useTranslator(); - return
-
-
-
- onChangePayTo(updater(form).payto_uri)}> - - + return ( +
+
+
+
+ onChangePayTo(updater(form).payto_uri)} + > + + +
+
+
+
+
-
-
-
- -
- ({ ...o, id: String(o.transfer_serial_id) }))} - accounts={accounts} - onCreate={onCreate} - onDelete={onDelete} - onLoadMoreBefore={onLoadMoreBefore} hasMoreBefore={!onLoadMoreBefore} - onLoadMoreAfter={onLoadMoreAfter} hasMoreAfter={!onLoadMoreAfter} /> -
; + ({ + ...o, + id: String(o.transfer_serial_id), + }))} + accounts={accounts} + onCreate={onCreate} + onDelete={onDelete} + onLoadMoreBefore={onLoadMoreBefore} + hasMoreBefore={!onLoadMoreBefore} + onLoadMoreAfter={onLoadMoreAfter} + hasMoreAfter={!onLoadMoreAfter} + /> +
+ ); } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx index 0f9b87732..2341fb80a 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx @@ -173,7 +173,7 @@ function Table({ ? i18n`never` : format( i.execution_time.t_s * 1000, - "yyyy/MM/dd HH:mm:ss" + "yyyy/MM/dd HH:mm:ss", ) : i18n`unknown`} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx index 439e81f9f..242380fbc 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx @@ -15,12 +15,12 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h, VNode } from 'preact'; -import { useState } from 'preact/hooks'; +import { h, VNode } from "preact"; +import { useState } from "preact/hooks"; import { Loading } from "../../../../components/exception/loading.js"; import { MerchantBackend } from "../../../../declaration.js"; import { HttpError } from "../../../../hooks/backend.js"; @@ -35,51 +35,65 @@ interface Props { onCreate: () => void; } interface Form { - verified?: 'yes' | 'no'; + verified?: "yes" | "no"; payto_uri?: string; } -export default function ListTransfer({ onUnauthorized, onLoadError, onCreate, onNotFound }: Props): VNode { - const [form, setForm] = useState
({ payto_uri: '' }) - const setFilter = (s?: 'yes' | 'no') => setForm({ ...form, verified: s }) - - const [position, setPosition] = useState(undefined) +export default function ListTransfer({ + onUnauthorized, + onLoadError, + onCreate, + onNotFound, +}: Props): VNode { + const [form, setForm] = useState({ payto_uri: "" }); + const setFilter = (s?: "yes" | "no") => setForm({ ...form, verified: s }); - const instance = useInstanceDetails() - const accounts = !instance.ok ? [] : instance.data.accounts.map(a => a.payto_uri) + const [position, setPosition] = useState(undefined); - const isVerifiedTransfers = form.verified === 'yes' - const isNonVerifiedTransfers = form.verified === 'no' - const isAllTransfers = form.verified === undefined + const instance = useInstanceDetails(); + const accounts = !instance.ok + ? [] + : instance.data.accounts.map((a) => a.payto_uri); - const result = useInstanceTransfers({ - position, - payto_uri: form.payto_uri === '' ? undefined : form.payto_uri, - verified: form.verified, - }, (id) => setPosition(id)) + const isVerifiedTransfers = form.verified === "yes"; + const isNonVerifiedTransfers = form.verified === "no"; + const isAllTransfers = form.verified === undefined; - if (result.clientError && result.isUnauthorized) return onUnauthorized() - if (result.clientError && result.isNotfound) return onNotFound() - if (result.loading) return - if (!result.ok) return onLoadError(result) + const result = useInstanceTransfers( + { + position, + payto_uri: form.payto_uri === "" ? undefined : form.payto_uri, + verified: form.verified, + }, + (id) => setPosition(id), + ); - return {null}} - // position={position} setPosition={setPosition} - onShowAll={() => setFilter(undefined)} - onShowUnverified={() => setFilter('no')} - onShowVerified={() => setFilter('yes')} - isAllTransfers={isAllTransfers} - isVerifiedTransfers={isVerifiedTransfers} - isNonVerifiedTransfers={isNonVerifiedTransfers} - payTo={form.payto_uri} - onChangePayTo={(p) => setForm(v => ({ ...v, payto_uri: p }))} - /> + if (result.clientError && result.isUnauthorized) return onUnauthorized(); + if (result.clientError && result.isNotfound) return onNotFound(); + if (result.loading) return ; + if (!result.ok) return onLoadError(result); + return ( + { + null; + }} + // position={position} setPosition={setPosition} + onShowAll={() => setFilter(undefined)} + onShowUnverified={() => setFilter("no")} + onShowVerified={() => setFilter("yes")} + isAllTransfers={isAllTransfers} + isVerifiedTransfers={isVerifiedTransfers} + isNonVerifiedTransfers={isNonVerifiedTransfers} + payTo={form.payto_uri} + onChangePayTo={(p) => setForm((v) => ({ ...v, payto_uri: p }))} + /> + ); } - diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/update/index.tsx index cc9cd8afc..84cc95e72 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/update/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/update/index.tsx @@ -15,12 +15,12 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h, VNode } from 'preact'; +import { h, VNode } from "preact"; -export default function UpdateTransfer():VNode { - return
order transfer page
-} \ No newline at end of file +export default function UpdateTransfer(): VNode { + return
order transfer page
; +} -- cgit v1.2.3