From 72b429321553841ac1ff48cf974bfc65da01bb06 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 19 Dec 2022 12:23:39 -0300 Subject: pretty --- .../src/paths/admin/create/Create.stories.tsx | 31 +-- .../src/paths/admin/create/CreatePage.tsx | 4 +- .../admin/create/InstanceCreatedSuccessfully.tsx | 85 +++--- .../src/paths/admin/create/index.tsx | 2 +- .../src/paths/admin/list/TableActive.tsx | 278 ++++++++++++------- .../src/paths/admin/list/View.stories.tsx | 104 ++++---- .../src/paths/admin/list/View.tsx | 114 +++++--- .../src/paths/index.stories.ts | 2 +- .../src/paths/instance/details/DetailPage.tsx | 84 +++--- .../src/paths/instance/details/Details.stories.tsx | 2 +- .../src/paths/instance/details/index.tsx | 68 ++--- .../instance/orders/create/Create.stories.tsx | 2 +- .../paths/instance/orders/create/CreatePage.tsx | 20 +- .../orders/create/OrderCreatedSuccessfully.tsx | 123 +++++---- .../src/paths/instance/orders/create/index.tsx | 89 ++++--- .../instance/orders/details/Detail.stories.tsx | 2 +- .../paths/instance/orders/details/DetailPage.tsx | 6 +- .../src/paths/instance/orders/details/index.tsx | 69 +++-- .../paths/instance/orders/list/List.stories.tsx | 2 +- .../src/paths/instance/orders/list/ListPage.tsx | 256 +++++++++++------- .../src/paths/instance/orders/list/Table.tsx | 10 +- .../src/paths/instance/orders/list/index.tsx | 258 ++++++++++-------- .../instance/products/create/Create.stories.tsx | 29 +- .../paths/instance/products/create/CreatePage.tsx | 71 +++-- .../products/create/CreatedSuccessfully.tsx | 73 ++--- .../src/paths/instance/products/create/index.tsx | 57 ++-- .../paths/instance/products/list/List.stories.tsx | 59 ++-- .../src/paths/instance/products/list/Table.tsx | 14 +- .../src/paths/instance/products/list/index.tsx | 112 +++++--- .../instance/products/update/Update.stories.tsx | 54 ++-- .../paths/instance/products/update/UpdatePage.tsx | 92 ++++--- .../src/paths/instance/products/update/index.tsx | 78 +++--- .../instance/reserves/create/Create.stories.tsx | 29 +- .../paths/instance/reserves/create/CreatePage.tsx | 296 ++++++++++++++------- .../create/CreatedSuccessfully.stories.tsx | 40 +-- .../reserves/create/CreatedSuccessfully.tsx | 112 +++++--- .../paths/instance/reserves/details/DetailPage.tsx | 7 +- .../instance/reserves/details/Details.stories.tsx | 2 +- .../paths/instance/reserves/details/TipInfo.tsx | 2 +- .../instance/reserves/list/AutorizeTipModal.tsx | 107 +++++--- .../instance/reserves/list/CreatedSuccessfully.tsx | 2 +- .../paths/instance/reserves/list/List.stories.tsx | 2 +- .../src/paths/instance/reserves/list/Table.tsx | 4 +- .../src/paths/instance/reserves/list/index.tsx | 4 +- .../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 +- .../src/paths/instance/update/Update.stories.tsx | 2 +- .../src/paths/instance/update/UpdatePage.tsx | 8 +- .../src/paths/instance/update/index.tsx | 10 +- .../src/paths/login/index.tsx | 12 +- .../src/paths/notfound/index.tsx | 25 +- 57 files changed, 2052 insertions(+), 1358 deletions(-) (limited to 'packages/merchant-backoffice-ui/src/paths') diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx index cb62b0224..052d61544 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx @@ -15,31 +15,32 @@ */ /** -* -* @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/Instance/Create', + title: "Pages/Instance/Create", component: TestedComponent, argTypes: { - onCreate: { action: 'onCreate' }, - goBack: { action: 'goBack' }, - } + onCreate: { action: "onCreate" }, + goBack: { action: "goBack" }, + }, }; -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, { -}); +export const Example = createExample(TestedComponent, {}); // export const Example = (a: any): VNode => ; // Example.args = { // isLoading: false diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx index 089d4ea80..6fcabb18b 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx @@ -76,7 +76,7 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode { : undefinedIfEmpty( value.payto_uris.map((p) => { return !PAYTO_REGEX.test(p) ? i18n`is not valid` : undefined; - }) + }), ), default_max_deposit_fee: !value.default_max_deposit_fee ? i18n`required` @@ -115,7 +115,7 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode { }; const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined + (k) => (errors as any)[k] !== undefined, ); const submit = (): Promise => { diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/InstanceCreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/InstanceCreatedSuccessfully.tsx index fde2410e9..c620c6482 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/create/InstanceCreatedSuccessfully.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/create/InstanceCreatedSuccessfully.tsx @@ -14,52 +14,61 @@ GNU Taler; see the file COPYING. If not, see */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ import { h, VNode } from "preact"; import { CreatedSuccessfully } from "../../../components/notifications/CreatedSuccessfully.js"; import { Entity } from "./index.js"; -export function InstanceCreatedSuccessfully({ entity, onConfirm }: { entity: Entity; onConfirm: () => void; }): VNode { - return -
-
- -
-
-
-

- -

+export function InstanceCreatedSuccessfully({ + entity, + onConfirm, +}: { + entity: Entity; + onConfirm: () => void; +}): VNode { + return ( + +
+
+
-
-
-
-
- -
-
-
-

- -

+
+
+

+ +

+
-
-
-
- +
+
+ +
+
+
+

+ +

+
+
-
-
-

- {entity.auth.method === 'external' && 'external'} - {entity.auth.method === 'token' && - } -

+
+
+ +
+
+
+

+ {entity.auth.method === "external" && "external"} + {entity.auth.method === "token" && ( + + )} +

+
-
- ; + + ); } diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx index 8e83b75ff..ed2f3f068 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx @@ -54,7 +54,7 @@ export default function Create({ onBack, onConfirm, forceId }: Props): VNode { onBack={onBack} forceId={forceId} onCreate={( - d: MerchantBackend.Instances.InstanceConfigurationMessage + d: MerchantBackend.Instances.InstanceConfigurationMessage, ) => { return createInstance(d) .then(() => { diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx index 8f2829112..546f34f3a 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx @@ -15,9 +15,9 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ import { h, VNode } from "preact"; import { StateUpdater, useEffect, useState } from "preact/hooks"; @@ -34,57 +34,96 @@ interface Props { setInstanceName: (s: string) => void; } -export function CardTable({ instances, onCreate, onUpdate, onPurge, setInstanceName, onDelete, selected }: Props): VNode { +export function CardTable({ + instances, + onCreate, + onUpdate, + onPurge, + setInstanceName, + onDelete, + selected, +}: Props): VNode { const [actionQueue, actionQueueHandler] = useState([]); - const [rowSelection, rowSelectionHandler] = useState([]) + const [rowSelection, rowSelectionHandler] = useState([]); useEffect(() => { - if (actionQueue.length > 0 && !selected && actionQueue[0].type == 'DELETE') { - onDelete(actionQueue[0].element) - actionQueueHandler(actionQueue.slice(1)) + if ( + actionQueue.length > 0 && + !selected && + actionQueue[0].type == "DELETE" + ) { + onDelete(actionQueue[0].element); + actionQueueHandler(actionQueue.slice(1)); } - }, [actionQueue, selected, onDelete]) + }, [actionQueue, selected, onDelete]); useEffect(() => { - if (actionQueue.length > 0 && !selected && actionQueue[0].type == 'UPDATE') { - onUpdate(actionQueue[0].element.id) - actionQueueHandler(actionQueue.slice(1)) + if ( + actionQueue.length > 0 && + !selected && + actionQueue[0].type == "UPDATE" + ) { + onUpdate(actionQueue[0].element.id); + actionQueueHandler(actionQueue.slice(1)); } - }, [actionQueue, selected, onUpdate]) - - const i18n = useTranslator() + }, [actionQueue, selected, onUpdate]); - return
-
-

Instances

+ const i18n = useTranslator(); -
+ return ( +
+
+

+ + + + Instances +

- -
-
- - - -
- -
-
-
-
- {instances.length > 0 ? - : - - } + +
+ + + +
+ +
+
+
+ {instances.length > 0 ? ( +
+ ) : ( + + )} + - + ); } interface TableProps { rowSelection: string[]; @@ -93,14 +132,23 @@ interface TableProps { onDelete: (id: MerchantBackend.Instances.Instance) => void; onPurge: (id: MerchantBackend.Instances.Instance) => void; rowSelectionHandler: StateUpdater; - setInstanceName: (s:string) => void; + setInstanceName: (s: string) => void; } function toggleSelected(id: T): (prev: T[]) => T[] { - return (prev: T[]): T[] => prev.indexOf(id) == -1 ? [...prev, id] : prev.filter(e => e != id) + return (prev: T[]): T[] => + prev.indexOf(id) == -1 ? [...prev, id] : prev.filter((e) => e != id); } -function Table({ rowSelection, rowSelectionHandler, setInstanceName, instances, onUpdate, onDelete, onPurge }: TableProps): VNode { +function Table({ + rowSelection, + rowSelectionHandler, + setInstanceName, + instances, + onUpdate, + onDelete, + onPurge, +}: TableProps): VNode { return (
@@ -108,75 +156,127 @@ function Table({ rowSelection, rowSelectionHandler, setInstanceName, instances, - - + + - {instances.map(i => { - return - - - - - + {instances.map((i) => { + return ( + + + + + + + ); })} -
IDName + ID + + Name +
- - { - setInstanceName(i.id); - }}>{i.id}{i.name} -
- - {!i.deleted && - - } - {i.deleted && - - } -
-
+ + + { + setInstanceName(i.id); + }} + > + {i.id} + + {i.name} +
+ + {!i.deleted && ( + + )} + {i.deleted && ( + + )} +
+
- ) + ); } function EmptyTable(): VNode { - return
-

- -

-

There is no instances yet, add more pressing the + sign

-
+ return ( +
+

+ + + +

+

+ + There is no instances yet, add more pressing the + sign + +

+
+ ); } - interface Actions { element: MerchantBackend.Instances.Instance; - type: 'DELETE' | 'UPDATE'; + type: "DELETE" | "UPDATE"; } function notEmpty(value: TValue | null | undefined): value is TValue { return value !== null && value !== undefined; } -function buildActions(instances: MerchantBackend.Instances.Instance[], selected: string[], action: 'DELETE'): Actions[] { - return selected.map(id => instances.find(i => i.id === id)) +function buildActions( + instances: MerchantBackend.Instances.Instance[], + selected: string[], + action: "DELETE", +): Actions[] { + return selected + .map((id) => instances.find((i) => i.id === id)) .filter(notEmpty) - .map(id => ({ element: id, type: action })) + .map((id) => ({ element: id, type: action })); } diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/View.stories.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/View.stories.tsx index 87d68232a..e0f5d5430 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/list/View.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/list/View.stories.tsx @@ -15,68 +15,76 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h } from 'preact'; +import { h } from "preact"; import { View } from "./View.js"; - export default { - title: 'Pages/Instance/List', + title: "Pages/Instance/List", component: View, argTypes: { - onSelect: { action: 'onSelect' }, + onSelect: { action: "onSelect" }, }, }; export const Empty = (a: any) => ; Empty.args = { - instances: [] -} + instances: [], +}; export const WithDefaultInstance = (a: any) => ; WithDefaultInstance.args = { - instances: [{ - id: 'default', - name: 'the default instance', - merchant_pub: 'abcdef', - payment_targets: [] - }] -} + instances: [ + { + id: "default", + name: "the default instance", + merchant_pub: "abcdef", + payment_targets: [], + }, + ], +}; export const WithFiveInstance = (a: any) => ; WithFiveInstance.args = { - instances: [{ - id: 'first', - name: 'the first instance', - merchant_pub: 'abcdefgh', - payment_targets: ['asd'] - }, { - id: 'second', - name: 'the second instance', - merchant_pub: 'zxczxcz', - payment_targets: ['asd'] - }, { - id: 'third', - name: 'the third instance', - merchant_pub: 'QWEQWEWQE', - payment_targets: ['asd'] - }, { - id: 'other', - name: 'the other instance', - merchant_pub: 'FHJHGJGHJ', - payment_targets: ['asd'] - }, { - id: 'another', - name: 'the another instance', - merchant_pub: 'abcd3423423efgh', - payment_targets: ['asd'] - }, { - id: 'last', - name: 'last instance', - merchant_pub: 'zxcvvbnm', - payment_targets: ['pay-to', 'asd'] - }] -} + instances: [ + { + id: "first", + name: "the first instance", + merchant_pub: "abcdefgh", + payment_targets: ["asd"], + }, + { + id: "second", + name: "the second instance", + merchant_pub: "zxczxcz", + payment_targets: ["asd"], + }, + { + id: "third", + name: "the third instance", + merchant_pub: "QWEQWEWQE", + payment_targets: ["asd"], + }, + { + id: "other", + name: "the other instance", + merchant_pub: "FHJHGJGHJ", + payment_targets: ["asd"], + }, + { + id: "another", + name: "the another instance", + merchant_pub: "abcd3423423efgh", + payment_targets: ["asd"], + }, + { + id: "last", + name: "last instance", + merchant_pub: "zxcvvbnm", + payment_targets: ["pay-to", "asd"], + }, + ], +}; diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx index 2af9dea71..5180c671c 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx @@ -15,14 +15,14 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ import { h, VNode } from "preact"; import { MerchantBackend } from "../../../declaration.js"; import { CardTable as CardTableActive } from "./TableActive.js"; -import { useState } from 'preact/hooks'; +import { useState } from "preact/hooks"; import { Translate, useTranslator } from "../../../i18n/index.js"; interface Props { @@ -35,46 +35,78 @@ interface Props { setInstanceName: (s: string) => void; } -export function View({ instances, onCreate, onDelete, onPurge, onUpdate, setInstanceName, selected }: Props): VNode { +export function View({ + instances, + onCreate, + onDelete, + onPurge, + onUpdate, + setInstanceName, + selected, +}: Props): VNode { const [show, setShow] = useState<"active" | "deleted" | null>("active"); - const showIsActive = show === 'active' ? "is-active" : '' - const showIsDeleted = show === 'deleted' ? "is-active" : '' - const showAll = show === null ? "is-active" : '' - const i18n = useTranslator() + const showIsActive = show === "active" ? "is-active" : ""; + const showIsDeleted = show === "deleted" ? "is-active" : ""; + const showAll = show === null ? "is-active" : ""; + const i18n = useTranslator(); - const showingInstances = showIsDeleted ? - instances.filter(i => i.deleted) : (showIsActive ? - instances.filter(i => !i.deleted) : - instances) - - return
+ const showingInstances = showIsDeleted + ? instances.filter((i) => i.deleted) + : showIsActive + ? instances.filter((i) => !i.deleted) + : instances; -
-
-
-
- + return ( + - -
- -
+ + +
+ ); } diff --git a/packages/merchant-backoffice-ui/src/paths/index.stories.ts b/packages/merchant-backoffice-ui/src/paths/index.stories.ts index b3811fd4f..ecf28445b 100644 --- a/packages/merchant-backoffice-ui/src/paths/index.stories.ts +++ b/packages/merchant-backoffice-ui/src/paths/index.stories.ts @@ -1,2 +1,2 @@ export * as a1 from "./admin/create/Create.stories.js"; -export * as a2 from "./instance/details/Details.stories.js"; \ No newline at end of file +export * as a2 from "./instance/details/Details.stories.js"; 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>(convert(selected)) + const [value, valueHandler] = useState>(convert(selected)); + + const i18n = useTranslator(); - const i18n = useTranslator() - - return
-
-
-
-
-
-

- Here goes the instance description -

+ return ( +
+
+
+
+
+
+

Here goes the instance description

+
+
+ - -
-
- -
-
-
-
- object={value} valueHandler={valueHandler} > +
- name="name" readonly label={i18n`Name`} /> - name="payto_uris" readonly label={i18n`Account address`} /> - - +
+
+
+
+ object={value} valueHandler={valueHandler}> + name="name" readonly label={i18n`Name`} /> + + name="payto_uris" + readonly + label={i18n`Account address`} + /> + +
+
-
-
-
- -
- -} \ No newline at end of file +
+
+ ); +} 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( Component: FunctionalComponent, - props: Partial + props: Partial, ) { const r = (args: any) => ; 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(false) +export default function Detail({ + onUpdate, + onLoadError, + onUnauthorized, + onDelete, + onNotFound, +}: Props): VNode { + const { id } = useInstanceContext(); + const result = useInstanceDetails(); + const [deleting, setDeleting] = useState(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 - if (!result.ok) return onLoadError(result) + 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 - setDeleting(true)} - /> - {deleting && setDeleting(false)} - onConfirm={async (): Promise => { - try { - await deleteInstance() - onDelete() - } catch (error) { - } - setDeleting(false) - }} - />} - - -} \ No newline at end of file + return ( + + setDeleting(true)} + /> + {deleting && ( + setDeleting(false)} + onConfirm={async (): Promise => { + try { + await deleteInstance(); + onDelete(); + } catch (error) {} + setDeleting(false); + }} + /> + )} + + ); +} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx index 4ce2eb43d..5f8dbbdd9 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx @@ -33,7 +33,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/orders/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx index 379c5eab5..145df717d 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx @@ -166,7 +166,7 @@ export function CreatePage({ : value.payments.wire_transfer_deadline && isBefore( value.payments.wire_transfer_deadline, - value.payments.refund_deadline + value.payments.refund_deadline, ) ? i18n`wire transfer deadline cannot be before refund deadline` : undefined, @@ -177,7 +177,7 @@ export function CreatePage({ : value.payments.wire_transfer_deadline && isBefore( value.payments.wire_transfer_deadline, - value.payments.pay_deadline + value.payments.pay_deadline, ) ? i18n`wire transfer deadline cannot be before pay deadline` : undefined, @@ -189,7 +189,7 @@ export function CreatePage({ ? i18n`should have a refund deadline` : !isAfter( value.payments.refund_deadline, - value.payments.auto_refund_deadline + value.payments.auto_refund_deadline, ) ? i18n`auto refund cannot be after refund deadline` : undefined, @@ -203,7 +203,7 @@ export function CreatePage({ }), }; const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined + (k) => (errors as any)[k] !== undefined, ); const submit = (): void => { @@ -225,7 +225,7 @@ export function CreatePage({ wire_transfer_deadline: value.payments.wire_transfer_deadline ? { t_s: Math.floor( - value.payments.wire_transfer_deadline.getTime() / 1000 + value.payments.wire_transfer_deadline.getTime() / 1000, ), } : undefined, @@ -237,7 +237,7 @@ export function CreatePage({ auto_refund: value.payments.auto_refund_deadline ? { d_us: Math.floor( - value.payments.auto_refund_deadline.getTime() * 1000 + value.payments.auto_refund_deadline.getTime() * 1000, ), } : undefined, @@ -264,7 +264,7 @@ export function CreatePage({ const addProductToTheInventoryList = ( product: MerchantBackend.Products.ProductDetail & WithId, - quantity: number + quantity: number, ) => { valueHandler((v) => { const inventoryProducts = { ...v.inventoryProducts }; @@ -332,13 +332,13 @@ export function CreatePage({ const discountOrRise = rate( value.pricing?.order_price || `${config.currency}:0`, - totalAsString + totalAsString, ); const minAgeByProducts = allProducts.reduce( (cur, prev) => !prev.minimum_age || cur > prev.minimum_age ? cur : prev.minimum_age, - 0 + 0, ); return (
@@ -415,7 +415,7 @@ export function CreatePage({ discountOrRise > 0 && (discountOrRise < 1 ? `discount of %${Math.round( - (1 - discountOrRise) * 100 + (1 - discountOrRise) * 100, )}` : `rise of %${Math.round((discountOrRise - 1) * 100)}`) } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx index bd63ca371..6d3ac311a 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx @@ -26,64 +26,89 @@ interface Props { onCreateAnother?: () => void; } -export function OrderCreatedSuccessfully({ entity, onConfirm, onCreateAnother }: Props): VNode { - const { getPaymentURL } = useOrderAPI() - const [url, setURL] = useState(undefined) +export function OrderCreatedSuccessfully({ + entity, + onConfirm, + onCreateAnother, +}: Props): VNode { + const { getPaymentURL } = useOrderAPI(); + const [url, setURL] = useState(undefined); useEffect(() => { - getPaymentURL(entity.response.order_id).then(response => { - setURL(response.data) - }) - }, [getPaymentURL, entity.response.order_id]) + getPaymentURL(entity.response.order_id).then((response) => { + setURL(response.data); + }); + }, [getPaymentURL, entity.response.order_id]); - return -
-
- -
-
-
-

- -

+ return ( + +
+
+
-
-
-
-
- -
-
-
-

- -

+
+
+

+ +

+
-
-
-
- -
-
-
-

- -

+
+
+ +
+
+
+

+ +

+
-
-
-
- +
+
+ +
+
+
+

+ +

+
+
-
-
-

- -

+
+
+ +
+
+
+

+ +

+
-
- ; + + ); } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx index feb75aa25..95232da92 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx @@ -15,12 +15,12 @@ */ /** -* -* @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 { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; import { MerchantBackend } from "../../../../declaration.js"; @@ -33,9 +33,9 @@ import { CreatePage } from "./CreatePage.js"; import { OrderCreatedSuccessfully } from "./OrderCreatedSuccessfully.js"; export type Entity = { - request: MerchantBackend.Orders.PostOrderRequest, - response: MerchantBackend.Orders.PostOrderResponse -} + request: MerchantBackend.Orders.PostOrderRequest; + response: MerchantBackend.Orders.PostOrderResponse; +}; interface Props { onBack?: () => void; onConfirm: () => void; @@ -43,40 +43,53 @@ interface Props { onNotFound: () => VNode; onLoadError: (error: HttpError) => VNode; } -export default function OrderCreate({ onConfirm, onBack, onLoadError, onNotFound, onUnauthorized }: Props): VNode { - const { createOrder } = useOrderAPI() - const [notif, setNotif] = useState(undefined) +export default function OrderCreate({ + onConfirm, + onBack, + onLoadError, + onNotFound, + onUnauthorized, +}: Props): VNode { + const { createOrder } = useOrderAPI(); + const [notif, setNotif] = useState(undefined); - const detailsResult = useInstanceDetails() - const inventoryResult = useInstanceProducts() + const detailsResult = useInstanceDetails(); + const inventoryResult = useInstanceProducts(); - if (detailsResult.clientError && detailsResult.isUnauthorized) return onUnauthorized() - if (detailsResult.clientError && detailsResult.isNotfound) return onNotFound() - if (detailsResult.loading) return - if (!detailsResult.ok) return onLoadError(detailsResult) + if (detailsResult.clientError && detailsResult.isUnauthorized) + return onUnauthorized(); + if (detailsResult.clientError && detailsResult.isNotfound) + return onNotFound(); + if (detailsResult.loading) return ; + if (!detailsResult.ok) return onLoadError(detailsResult); - if (inventoryResult.clientError && inventoryResult.isUnauthorized) return onUnauthorized() - if (inventoryResult.clientError && inventoryResult.isNotfound) return onNotFound() - if (inventoryResult.loading) return - if (!inventoryResult.ok) return onLoadError(inventoryResult) + if (inventoryResult.clientError && inventoryResult.isUnauthorized) + return onUnauthorized(); + if (inventoryResult.clientError && inventoryResult.isNotfound) + return onNotFound(); + if (inventoryResult.loading) return ; + if (!inventoryResult.ok) return onLoadError(inventoryResult); - return - - + return ( + + - { - createOrder(request).then(onConfirm).catch((error) => { - setNotif({ - message: 'could not create order', - type: "ERROR", - description: error.message - }) - }) - }} - instanceConfig={detailsResult.data} - instanceInventory={inventoryResult.data} + { + createOrder(request) + .then(onConfirm) + .catch((error) => { + setNotif({ + message: "could not create order", + type: "ERROR", + description: error.message, + }); + }); + }} + instanceConfig={detailsResult.data} + instanceInventory={inventoryResult.data} /> - + + ); } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx index 878ee7bde..e430ede56 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx @@ -35,7 +35,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/orders/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx index 2074eeb32..e8927dd70 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx @@ -248,7 +248,7 @@ function ClaimedPage({ {" "} {format( new Date(order.contract_terms.timestamp.t_s * 1000), - "yyyy-MM-dd HH:mm:ss" + "yyyy-MM-dd HH:mm:ss", )}

@@ -519,7 +519,7 @@ function PaidPage({

{format( new Date(order.contract_terms.timestamp.t_s * 1000), - "yyyy/MM/dd HH:mm:ss" + "yyyy/MM/dd HH:mm:ss", )}

@@ -669,7 +669,7 @@ function UnpaidPage({ ? "never" : format( new Date(order.creation_time.t_s * 1000), - "yyyy-MM-dd HH:mm:ss" + "yyyy-MM-dd HH:mm:ss", )}

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx index dbf1b685a..4633688ba 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx @@ -32,36 +32,49 @@ export interface Props { onLoadError: (error: HttpError) => VNode; } -export default function Update({ oid, onBack, onLoadError, onNotFound, onUnauthorized }: Props): VNode { +export default function Update({ + oid, + onBack, + onLoadError, + onNotFound, + onUnauthorized, +}: Props): VNode { const { refundOrder } = useOrderAPI(); - const result = useOrderDetails(oid) - const [notif, setNotif] = useState(undefined) + const result = useOrderDetails(oid); + const [notif, setNotif] = useState(undefined); - const i18n = useTranslator() + const i18n = useTranslator(); - if (result.clientError && result.isUnauthorized) return onUnauthorized() - if (result.clientError && result.isNotfound) return onNotFound() - if (result.loading) return - if (!result.ok) return onLoadError(result) + 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 + return ( + + - - - refundOrder(id, value) - .then(() => setNotif({ - message: i18n`refund created successfully`, - type: "SUCCESS" - })).catch((error) => setNotif({ - message: i18n`could not create the refund`, - type: "ERROR", - description: error.message - })) - } - selected={result.data} - /> - -} \ No newline at end of file + + refundOrder(id, value) + .then(() => + setNotif({ + message: i18n`refund created successfully`, + type: "SUCCESS", + }), + ) + .catch((error) => + setNotif({ + message: i18n`could not create the refund`, + type: "ERROR", + description: error.message, + }), + ) + } + selected={result.data} + /> + + ); +} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx index 8cddd7fd6..156c577f4 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx @@ -43,7 +43,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/orders/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx index 60be23c21..bca90e352 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx @@ -15,33 +15,33 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { format } from 'date-fns'; -import { h, VNode } from 'preact'; -import { useState } from 'preact/hooks'; +import { format } from "date-fns"; +import { h, VNode } from "preact"; +import { useState } from "preact/hooks"; import { DatePicker } from "../../../../components/picker/DatePicker.js"; import { MerchantBackend, WithId } from "../../../../declaration.js"; -import { Translate, useTranslator } from '../../../../i18n/index.js'; +import { Translate, useTranslator } from "../../../../i18n/index.js"; import { CardTable } from "./Table.js"; export interface ListPageProps { - errorOrderId: string | undefined, + errorOrderId: string | undefined; - onShowAll: () => void, - onShowPaid: () => void, - onShowRefunded: () => void, - onShowNotWired: () => void, + onShowAll: () => void; + onShowPaid: () => void; + onShowRefunded: () => void; + onShowNotWired: () => void; onCopyURL: (id: string) => void; - isAllActive: string, - isPaidActive: string, - isRefundedActive: string, - isNotWiredActive: string, + isAllActive: string; + isPaidActive: string; + isRefundedActive: string; + isNotWiredActive: string; - jumpToDate?: Date, - onSelectDate: (date?: Date) => void, + jumpToDate?: Date; + onSelectDate: (date?: Date) => void; orders: (MerchantBackend.Orders.OrderHistoryEntry & WithId)[]; onLoadMoreBefore?: () => void; @@ -55,92 +55,168 @@ export interface ListPageProps { onCreate: () => void; } -export function ListPage({ orders, errorOrderId, isAllActive, onSelectOrder, onRefundOrder, onSearchOrderById, jumpToDate, onCopyURL, onShowAll, onShowPaid, onShowRefunded, onShowNotWired, onSelectDate, isPaidActive, isRefundedActive, isNotWiredActive, onCreate }: ListPageProps): VNode { +export function ListPage({ + orders, + errorOrderId, + isAllActive, + onSelectOrder, + onRefundOrder, + onSearchOrderById, + jumpToDate, + onCopyURL, + onShowAll, + onShowPaid, + onShowRefunded, + onShowNotWired, + onSelectDate, + isPaidActive, + isRefundedActive, + isNotWiredActive, + onCreate, +}: ListPageProps): VNode { const i18n = useTranslator(); const dateTooltip = i18n`select date to show nearby orders`; const [pickDate, setPickDate] = useState(false); - const [orderId, setOrderId] = useState(''); - - return
+ const [orderId, setOrderId] = useState(""); -
-
-
-
-
- setOrderId(e.currentTarget.value)} placeholder={i18n`order id`} /> - {errorOrderId &&

{errorOrderId}

} + return ( +
+
+
+
+
+
+ setOrderId(e.currentTarget.value)} + placeholder={i18n`order id`} + /> + {errorOrderId &&

{errorOrderId}

} +
+ + +
- - -
-
-
-
-
- -
-
-
-
-
- {jumpToDate &&
- onSelectDate(undefined)}> - - -
} -
- - { setPickDate(true); }} /> - -
-
- - { setPickDate(true); }}> - - -
-
- setPickDate(false)} - dateReceiver={onSelectDate} /> + setPickDate(false)} + dateReceiver={onSelectDate} + /> - -
; + + + ); } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx index 924d09682..a1ec8d291 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx @@ -173,7 +173,7 @@ function Table({ ? "never" : format( new Date(i.timestamp.t_s * 1000), - "yyyy/MM/dd HH:mm:ss" + "yyyy/MM/dd HH:mm:ss", )} r.amount) .reduce( (p, c) => Amounts.add(p, Amounts.parseOrThrow(c)).amount, - Amounts.zeroOfCurrency(config.currency) + Amounts.zeroOfCurrency(config.currency), ); const orderPrice = order.order_status === "paid" @@ -298,7 +298,7 @@ export function RefundModal({ : undefined, }; const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined + (k) => (errors as any)[k] !== undefined, ); const validateAndConfirm = () => { @@ -306,7 +306,7 @@ export function RefundModal({ if (!form.refund) return; onConfirm({ refund: Amounts.stringify( - Amounts.add(Amounts.parse(form.refund)!, totalRefunded).amount + Amounts.add(Amounts.parse(form.refund)!, totalRefunded).amount, ), reason: form.description === undefined @@ -358,7 +358,7 @@ export function RefundModal({ ? "never" : format( new Date(r.timestamp.t_s * 1000), - "yyyy-MM-dd HH:mm:ss" + "yyyy-MM-dd HH:mm:ss", )} {r.amount} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx index a033e7b3a..b5fe7611c 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx @@ -15,18 +15,23 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h, VNode, Fragment } from 'preact'; -import { useState } from 'preact/hooks'; +import { h, VNode, Fragment } from "preact"; +import { useState } from "preact/hooks"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; import { MerchantBackend, WithId } from "../../../../declaration.js"; import { HttpError } from "../../../../hooks/backend.js"; -import { InstanceOrderFilter, useInstanceOrders, useOrderAPI, useOrderDetails } from "../../../../hooks/order.js"; -import { useTranslator } from '../../../../i18n/index.js'; +import { + InstanceOrderFilter, + useInstanceOrders, + useOrderAPI, + useOrderDetails, +} from "../../../../hooks/order.js"; +import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; import { RefundModal } from "./Table.js"; import { ListPage } from "./ListPage.js"; @@ -39,107 +44,133 @@ interface Props { onCreate: () => void; } -export default function ({ onUnauthorized, onLoadError, onCreate, onSelect, onNotFound }: Props): VNode { - const [filter, setFilter] = useState({}) - const [orderToBeRefunded, setOrderToBeRefunded] = useState(undefined) - - const setNewDate = (date?: Date) => setFilter(prev => ({ ...prev, date })) - - const result = useInstanceOrders(filter, setNewDate) - const { refundOrder, getPaymentURL } = useOrderAPI() - - const [notif, setNotif] = useState(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 isPaidActive = filter.paid === 'yes' ? "is-active" : '' - const isRefundedActive = filter.refunded === 'yes' ? "is-active" : '' - const isNotWiredActive = filter.wired === 'no' ? "is-active" : '' - const isAllActive = filter.paid === undefined && filter.refunded === undefined && filter.wired === undefined ? 'is-active' : '' - - const i18n = useTranslator() - const [errorOrderId, setErrorOrderId] = useState(undefined) +export default function ({ + onUnauthorized, + onLoadError, + onCreate, + onSelect, + onNotFound, +}: Props): VNode { + const [filter, setFilter] = useState({}); + const [orderToBeRefunded, setOrderToBeRefunded] = useState< + MerchantBackend.Orders.OrderHistoryEntry | undefined + >(undefined); + + const setNewDate = (date?: Date) => setFilter((prev) => ({ ...prev, date })); + + const result = useInstanceOrders(filter, setNewDate); + const { refundOrder, getPaymentURL } = useOrderAPI(); + + const [notif, setNotif] = useState(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 isPaidActive = filter.paid === "yes" ? "is-active" : ""; + const isRefundedActive = filter.refunded === "yes" ? "is-active" : ""; + const isNotWiredActive = filter.wired === "no" ? "is-active" : ""; + const isAllActive = + filter.paid === undefined && + filter.refunded === undefined && + filter.wired === undefined + ? "is-active" + : ""; + + const i18n = useTranslator(); + const [errorOrderId, setErrorOrderId] = useState( + undefined, + ); async function testIfOrderExistAndSelect(orderId: string) { if (!orderId) { - setErrorOrderId(i18n`Enter an order id`) + setErrorOrderId(i18n`Enter an order id`); return; } try { - await getPaymentURL(orderId) - onSelect(orderId) - setErrorOrderId(undefined) + await getPaymentURL(orderId); + onSelect(orderId); + setErrorOrderId(undefined); } catch { - setErrorOrderId(i18n`order not found`) + setErrorOrderId(i18n`order not found`); } } - return - - - ({ ...o, id: o.order_id }))} - onLoadMoreBefore={result.loadMorePrev} hasMoreBefore={!result.isReachingStart} - onLoadMoreAfter={result.loadMore} hasMoreAfter={!result.isReachingEnd} - - onSelectOrder={(order) => onSelect(order.id)} - onRefundOrder={(value) => setOrderToBeRefunded(value)} - - errorOrderId={errorOrderId} - isAllActive={isAllActive} - isNotWiredActive={isNotWiredActive} - isPaidActive={isPaidActive} - isRefundedActive={isRefundedActive} - jumpToDate={filter.date} - onCopyURL={(id) => getPaymentURL(id).then((resp) => copyToClipboard(resp.data))} - - onCreate={onCreate} - onSearchOrderById={testIfOrderExistAndSelect} - onSelectDate={setNewDate} - onShowAll={() => setFilter({})} - onShowPaid={() => setFilter({ paid: 'yes' })} - onShowRefunded={() => setFilter({ refunded: 'yes' })} - onShowNotWired={() => setFilter({ wired: 'no' })} - - /> - - {orderToBeRefunded && setOrderToBeRefunded(undefined)} - onConfirm={(value) => refundOrder(orderToBeRefunded.order_id, value) - .then(() => setNotif({ - message: i18n`refund created successfully`, - type: "SUCCESS" - })) - .catch((error) => setNotif({ - message: i18n`could not create the refund`, - type: "ERROR", - description: error.message - })) - .then(() => setOrderToBeRefunded(undefined))} - onLoadError={(error) => { - setNotif({ - message: i18n`could not create the refund`, - type: "ERROR", - description: error.message - }); - setOrderToBeRefunded(undefined); - return
; - }} - onUnauthorized={onUnauthorized} - onNotFound={() => { - setNotif({ - message: i18n`could not get the order to refund`, - type: "ERROR", - // description: error.message - }); - setOrderToBeRefunded(undefined); - return
; - }} />} - + return ( + + + + ({ ...o, id: o.order_id }))} + onLoadMoreBefore={result.loadMorePrev} + hasMoreBefore={!result.isReachingStart} + onLoadMoreAfter={result.loadMore} + hasMoreAfter={!result.isReachingEnd} + onSelectOrder={(order) => onSelect(order.id)} + onRefundOrder={(value) => setOrderToBeRefunded(value)} + errorOrderId={errorOrderId} + isAllActive={isAllActive} + isNotWiredActive={isNotWiredActive} + isPaidActive={isPaidActive} + isRefundedActive={isRefundedActive} + jumpToDate={filter.date} + onCopyURL={(id) => + getPaymentURL(id).then((resp) => copyToClipboard(resp.data)) + } + onCreate={onCreate} + onSearchOrderById={testIfOrderExistAndSelect} + onSelectDate={setNewDate} + onShowAll={() => setFilter({})} + onShowPaid={() => setFilter({ paid: "yes" })} + onShowRefunded={() => setFilter({ refunded: "yes" })} + onShowNotWired={() => setFilter({ wired: "no" })} + /> + + {orderToBeRefunded && ( + setOrderToBeRefunded(undefined)} + onConfirm={(value) => + refundOrder(orderToBeRefunded.order_id, value) + .then(() => + setNotif({ + message: i18n`refund created successfully`, + type: "SUCCESS", + }), + ) + .catch((error) => + setNotif({ + message: i18n`could not create the refund`, + type: "ERROR", + description: error.message, + }), + ) + .then(() => setOrderToBeRefunded(undefined)) + } + onLoadError={(error) => { + setNotif({ + message: i18n`could not create the refund`, + type: "ERROR", + description: error.message, + }); + setOrderToBeRefunded(undefined); + return
; + }} + onUnauthorized={onUnauthorized} + onNotFound={() => { + setNotif({ + message: i18n`could not get the order to refund`, + type: "ERROR", + // description: error.message + }); + setOrderToBeRefunded(undefined); + return
; + }} + /> + )} + + ); } interface RefundProps { @@ -151,21 +182,30 @@ interface RefundProps { onConfirm: (m: MerchantBackend.Orders.RefundRequest) => void; } -function RefundModalForTable({ id, onUnauthorized, onLoadError, onNotFound, onConfirm, onCancel }: RefundProps) { +function RefundModalForTable({ + id, + onUnauthorized, + onLoadError, + onNotFound, + onConfirm, + onCancel, +}: RefundProps) { const result = useOrderDetails(id); - if (result.clientError && result.isUnauthorized) return onUnauthorized() - if (result.clientError && result.isNotfound) return onNotFound() - if (result.loading) return - if (!result.ok) return onLoadError(result) + 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 + return ( + + ); } async function copyToClipboard(text: string) { - return navigator.clipboard.writeText(text) + return navigator.clipboard.writeText(text); } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx index b5e0ff9c7..2fc0819bb 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx @@ -15,28 +15,29 @@ */ /** -* -* @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/Product/Create', + title: "Pages/Product/Create", component: TestedComponent, argTypes: { - onCreate: { action: 'onCreate' }, - onBack: { action: 'onBack' }, + onCreate: { action: "onCreate" }, + 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, { -}); +export const Example = createExample(TestedComponent, {}); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx index 3b475cb82..f6d7000ef 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx @@ -15,9 +15,9 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ import { h, VNode } from "preact"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; @@ -26,40 +26,55 @@ import { MerchantBackend } from "../../../../declaration.js"; import { useListener } from "../../../../hooks/listener.js"; import { Translate, useTranslator } from "../../../../i18n/index.js"; -type Entity = MerchantBackend.Products.ProductAddDetail & { product_id: string} +type Entity = MerchantBackend.Products.ProductAddDetail & { + product_id: string; +}; interface Props { onCreate: (d: Entity) => Promise; onBack?: () => void; } - export function CreatePage({ onCreate, onBack }: Props): VNode { + const [submitForm, addFormSubmitter] = useListener( + (result) => { + if (result) return onCreate(result); + return Promise.reject(); + }, + ); - const [submitForm, addFormSubmitter] = useListener((result) => { - if (result) return onCreate(result) - return Promise.reject() - }) - - const i18n = useTranslator() + const i18n = useTranslator(); - return
-
-
-
-
- + return ( +
+
+
+
+
+ -
- {onBack && } - Confirm +
+ {onBack && ( + + )} + + Confirm + +
- +
-
-
-
-
-} \ No newline at end of file +
+
+ ); +} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx index e9880b73a..6b02430cc 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx @@ -24,44 +24,49 @@ interface Props { onCreateAnother?: () => void; } -export function CreatedSuccessfully({ entity, onConfirm, onCreateAnother }: Props): VNode { - - return