diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/details')
3 files changed, 82 insertions, 72 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx index 01e7771cf..59aa7a1d2 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx @@ -15,9 +15,9 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ import { h, VNode } from "preact"; import { useState } from "preact/hooks"; @@ -33,55 +33,57 @@ interface Props { selected: MerchantBackend.Instances.QueryInstancesResponse; } -function convert(from: MerchantBackend.Instances.QueryInstancesResponse): Entity { - const { accounts, ...rest } = from - const payto_uris = accounts.filter(a => a.active).map(a => a.payto_uri) +function convert( + from: MerchantBackend.Instances.QueryInstancesResponse, +): Entity { + const { accounts, ...rest } = from; + const payto_uris = accounts.filter((a) => a.active).map((a) => a.payto_uri); const defaults = { default_wire_fee_amortization: 1, default_pay_delay: { d_us: 1000 * 60 * 60 }, //one hour default_wire_transfer_delay: { d_us: 1000 * 60 * 60 * 2 }, //two hours - } + }; return { ...defaults, ...rest, payto_uris }; } export function DetailPage({ selected }: Props): VNode { - const [value, valueHandler] = useState<Partial<Entity>>(convert(selected)) + const [value, valueHandler] = useState<Partial<Entity>>(convert(selected)); + + const i18n = useTranslator(); - const i18n = useTranslator() - - return <div> - <section class="hero is-hero-bar"> - <div class="hero-body"> - <div class="level"> - <div class="level-left"> - <div class="level-item"> - <h1 class="title"> - Here goes the instance description - </h1> + return ( + <div> + <section class="hero is-hero-bar"> + <div class="hero-body"> + <div class="level"> + <div class="level-left"> + <div class="level-item"> + <h1 class="title">Here goes the instance description</h1> + </div> + </div> + <div class="level-right" style="display: none;"> + <div class="level-item" /> </div> - </div> - <div class="level-right" style="display: none;"> - <div class="level-item" /> </div> </div> - </div> - </section> - - <section class="section is-main-section"> - <div class="columns"> - <div class="column" /> - <div class="column is-6"> - <FormProvider<Entity> object={value} valueHandler={valueHandler} > + </section> - <Input<Entity> name="name" readonly label={i18n`Name`} /> - <Input<Entity> name="payto_uris" readonly label={i18n`Account address`} /> - - </FormProvider> + <section class="section is-main-section"> + <div class="columns"> + <div class="column" /> + <div class="column is-6"> + <FormProvider<Entity> object={value} valueHandler={valueHandler}> + <Input<Entity> name="name" readonly label={i18n`Name`} /> + <Input<Entity> + name="payto_uris" + readonly + label={i18n`Account address`} + /> + </FormProvider> + </div> + <div class="column" /> </div> - <div class="column" /> - </div> - </section> - - </div> - -}
\ No newline at end of file + </section> + </div> + ); +} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/Details.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/Details.stories.tsx index f7772895f..9ac1c4381 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/details/Details.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/details/Details.stories.tsx @@ -33,7 +33,7 @@ export default { function createExample<Props>( Component: FunctionalComponent<Props>, - props: Partial<Props> + props: Partial<Props>, ) { const r = (args: any) => <Component {...args} />; r.args = props; diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx index 09b692e00..49b64262b 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx @@ -30,36 +30,44 @@ interface Props { onDelete: () => void; } -export default function Detail({ onUpdate, onLoadError, onUnauthorized, onDelete, onNotFound }: Props): VNode { - const { id } = useInstanceContext() - const result = useInstanceDetails() - const [deleting, setDeleting] = useState<boolean>(false) +export default function Detail({ + onUpdate, + onLoadError, + onUnauthorized, + onDelete, + onNotFound, +}: Props): VNode { + const { id } = useInstanceContext(); + const result = useInstanceDetails(); + const [deleting, setDeleting] = useState<boolean>(false); - const { deleteInstance } = useInstanceAPI() + const { deleteInstance } = useInstanceAPI(); - if (result.clientError && result.isUnauthorized) return onUnauthorized() - if (result.clientError && result.isNotfound) return onNotFound() - if (result.loading) return <Loading /> - if (!result.ok) return onLoadError(result) + if (result.clientError && result.isUnauthorized) return onUnauthorized(); + if (result.clientError && result.isNotfound) return onNotFound(); + if (result.loading) return <Loading />; + if (!result.ok) return onLoadError(result); - return <Fragment> - <DetailPage - selected={result.data} - onUpdate={onUpdate} - onDelete={() => setDeleting(true)} - /> - {deleting && <DeleteModal - element={{ name: result.data.name, id }} - onCancel={() => setDeleting(false)} - onConfirm={async (): Promise<void> => { - try { - await deleteInstance() - onDelete() - } catch (error) { - } - setDeleting(false) - }} - />} - - </Fragment> -}
\ No newline at end of file + return ( + <Fragment> + <DetailPage + selected={result.data} + onUpdate={onUpdate} + onDelete={() => setDeleting(true)} + /> + {deleting && ( + <DeleteModal + element={{ name: result.data.name, id }} + onCancel={() => setDeleting(false)} + onConfirm={async (): Promise<void> => { + try { + await deleteInstance(); + onDelete(); + } catch (error) {} + setDeleting(false); + }} + /> + )} + </Fragment> + ); +} |