diff options
author | Sebastian <sebasjm@gmail.com> | 2022-12-19 12:23:39 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-12-19 12:23:39 -0300 |
commit | 72b429321553841ac1ff48cf974bfc65da01bb06 (patch) | |
tree | 7db9a4462f02de6cb86de695a1e64772b00ead5f /packages/merchant-backoffice-ui/src/paths/instance/products | |
parent | 770ab6f01dc81a16f384f314982bd761540f8e65 (diff) | |
download | wallet-core-72b429321553841ac1ff48cf974bfc65da01bb06.tar.xz |
pretty
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/products')
10 files changed, 363 insertions, 276 deletions
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<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r +function createExample<Props>( + Component: FunctionalComponent<Props>, + props: Partial<Props>, +) { + const r = (args: any) => <Component {...args} />; + 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<void>; onBack?: () => void; } - export function CreatePage({ onCreate, onBack }: Props): VNode { + const [submitForm, addFormSubmitter] = useListener<Entity | undefined>( + (result) => { + if (result) return onCreate(result); + return Promise.reject(); + }, + ); - const [submitForm, addFormSubmitter] = useListener<Entity | undefined>((result) => { - if (result) return onCreate(result) - return Promise.reject() - }) - - const i18n = useTranslator() + const i18n = useTranslator(); - return <div> - <section class="section is-main-section"> - <div class="columns"> - <div class="column" /> - <div class="column is-four-fifths"> - <ProductForm onSubscribe={addFormSubmitter} /> + return ( + <div> + <section class="section is-main-section"> + <div class="columns"> + <div class="column" /> + <div class="column is-four-fifths"> + <ProductForm onSubscribe={addFormSubmitter} /> - <div class="buttons is-right mt-5"> - {onBack && <button class="button" onClick={onBack} ><Translate>Cancel</Translate></button>} - <AsyncButton onClick={submitForm} data-tooltip={ - !submitForm ? i18n`Need to complete marked fields` : 'confirm operation' - } disabled={!submitForm}><Translate>Confirm</Translate></AsyncButton> + <div class="buttons is-right mt-5"> + {onBack && ( + <button class="button" onClick={onBack}> + <Translate>Cancel</Translate> + </button> + )} + <AsyncButton + onClick={submitForm} + data-tooltip={ + !submitForm + ? i18n`Need to complete marked fields` + : "confirm operation" + } + disabled={!submitForm} + > + <Translate>Confirm</Translate> + </AsyncButton> + </div> </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/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 <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label">Image</label> - </div> - <div class="field-body is-flex-grow-3"> - <div class="field"> - <p class="control"> - <img src={entity.image} style={{ width: 200, height: 200 }} /> - </p> +export function CreatedSuccessfully({ + entity, + onConfirm, + onCreateAnother, +}: Props): VNode { + return ( + <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}> + <div class="field is-horizontal"> + <div class="field-label is-normal"> + <label class="label">Image</label> </div> - </div> - </div> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label">Description</label> - </div> - <div class="field-body is-flex-grow-3"> - <div class="field"> - <p class="control"> - <textarea class="input" readonly value={entity.description} /> - </p> + <div class="field-body is-flex-grow-3"> + <div class="field"> + <p class="control"> + <img src={entity.image} style={{ width: 200, height: 200 }} /> + </p> + </div> </div> </div> - </div> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label">Price</label> + <div class="field is-horizontal"> + <div class="field-label is-normal"> + <label class="label">Description</label> + </div> + <div class="field-body is-flex-grow-3"> + <div class="field"> + <p class="control"> + <textarea class="input" readonly value={entity.description} /> + </p> + </div> + </div> </div> - <div class="field-body is-flex-grow-3"> - <div class="field"> - <p class="control"> - <input class="input" readonly value={entity.price} /> - </p> + <div class="field is-horizontal"> + <div class="field-label is-normal"> + <label class="label">Price</label> + </div> + <div class="field-body is-flex-grow-3"> + <div class="field"> + <p class="control"> + <input class="input" readonly value={entity.price} /> + </p> + </div> </div> </div> - </div> - </Template>; + </Template> + ); } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx index 90b4d01a6..62ecaf512 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx @@ -15,41 +15,46 @@ */ /** -* -* @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 { useProductAPI } from "../../../../hooks/product.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.Products.ProductAddDetail +export type Entity = MerchantBackend.Products.ProductAddDetail; interface Props { onBack?: () => void; onConfirm: () => void; } export default function CreateProduct({ onConfirm, onBack }: Props): VNode { - const { createProduct } = useProductAPI() - const [notif, setNotif] = useState<Notification | undefined>(undefined) - const i18n = useTranslator() - - return <Fragment> - <NotificationCard notification={notif} /> - <CreatePage - onBack={onBack} - onCreate={(request: MerchantBackend.Products.ProductAddDetail) => { - return createProduct(request).then(() => onConfirm()).catch((error) => { - setNotif({ - message: i18n`could not create product`, - type: "ERROR", - description: error.message - }) - }) - }} /> - </Fragment> -}
\ No newline at end of file + const { createProduct } = useProductAPI(); + const [notif, setNotif] = useState<Notification | undefined>(undefined); + const i18n = useTranslator(); + + return ( + <Fragment> + <NotificationCard notification={notif} /> + <CreatePage + onBack={onBack} + onCreate={(request: MerchantBackend.Products.ProductAddDetail) => { + return createProduct(request) + .then(() => onConfirm()) + .catch((error) => { + setNotif({ + message: i18n`could not create product`, + type: "ERROR", + description: error.message, + }); + }); + }} + /> + </Fragment> + ); +} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx index ac22960b2..c2c4d548c 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx @@ -15,44 +15,47 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h, VNode, FunctionalComponent } from 'preact'; +import { h, VNode, FunctionalComponent } from "preact"; import { CardTable as TestedComponent } from "./Table.js"; - export default { - title: 'Pages/Product/List', + title: "Pages/Product/List", component: TestedComponent, argTypes: { - onCreate: { action: 'onCreate' }, - onSelect: { action: 'onSelect' }, - onDelete: { action: 'onDelete' }, - onUpdate: { action: 'onUpdate' }, + onCreate: { action: "onCreate" }, + onSelect: { action: "onSelect" }, + onDelete: { action: "onDelete" }, + onUpdate: { action: "onUpdate" }, }, }; -function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r +function createExample<Props>( + Component: FunctionalComponent<Props>, + props: Partial<Props>, +) { + const r = (args: any) => <Component {...args} />; + r.args = props; + return r; } - export const Example = createExample(TestedComponent, { - instances: [{ - id: 'orderid', - description: 'description1', - description_i18n: {} as any, - image: '', - price: 'TESTKUDOS:10', - taxes: [], - total_lost: 10, - total_sold: 5, - total_stock: 15, - unit: 'bar', - address: {} - }] + instances: [ + { + id: "orderid", + description: "description1", + description_i18n: {} as any, + image: "", + price: "TESTKUDOS:10", + taxes: [], + total_lost: 10, + total_sold: 5, + total_stock: 15, + unit: "bar", + address: {}, + }, + ], }); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx index dfa66fcf4..515b36895 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx @@ -41,7 +41,7 @@ interface Props { onSelect: (product: Entity) => void; onUpdate: ( id: string, - data: MerchantBackend.Products.ProductPatchDetail + data: MerchantBackend.Products.ProductPatchDetail, ) => Promise<void>; onCreate: () => void; selected?: boolean; @@ -55,7 +55,7 @@ export function CardTable({ onDelete, }: Props): VNode { const [rowSelection, rowSelectionHandler] = useState<string | undefined>( - undefined + undefined, ); const i18n = useTranslator(); return ( @@ -107,7 +107,7 @@ interface TableProps { onSelect: (id: Entity) => void; onUpdate: ( id: string, - data: MerchantBackend.Products.ProductPatchDetail + data: MerchantBackend.Products.ProductPatchDetail, ) => Promise<void>; onDelete: (id: Entity) => void; rowSelectionHandler: StateUpdater<string | undefined>; @@ -159,7 +159,7 @@ function Table({ ? "never" : `restock at ${format( new Date(i.next_restock.t_s * 1000), - "yyyy/MM/dd" + "yyyy/MM/dd", )}`; let stockInfo: ComponentChildren = ""; if (i.total_stock < 0) { @@ -277,7 +277,7 @@ function Table({ product={i} onUpdate={(prod) => onUpdate(i.id, prod).then((r) => - rowSelectionHandler(undefined) + rowSelectionHandler(undefined), ) } onCancel={() => rowSelectionHandler(undefined)} @@ -297,7 +297,7 @@ function Table({ interface FastProductUpdateFormProps { product: Entity; onUpdate: ( - data: MerchantBackend.Products.ProductPatchDetail + data: MerchantBackend.Products.ProductPatchDetail, ) => Promise<void>; onCancel: () => void; } @@ -381,7 +381,7 @@ function FastProductWithManagedStockUpdateForm({ }; const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined + (k) => (errors as any)[k] !== undefined, ); const i18n = useTranslator(); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx index 9f1d077ac..7e9118d24 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx @@ -15,18 +15,21 @@ */ /** -* -* @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 { NotificationCard } from "../../../../components/menu/index.js"; import { MerchantBackend, WithId } from "../../../../declaration.js"; import { HttpError } from "../../../../hooks/backend.js"; -import { useInstanceProducts, useProductAPI } from "../../../../hooks/product.js"; -import { useTranslator } from '../../../../i18n/index.js'; +import { + useInstanceProducts, + useProductAPI, +} from "../../../../hooks/product.js"; +import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; import { CardTable } from "./Table.js"; @@ -37,44 +40,65 @@ interface Props { onSelect: (id: string) => void; onLoadError: (e: HttpError) => VNode; } -export default function ProductList({ onUnauthorized, onLoadError, onCreate, onSelect, onNotFound }: Props): VNode { - const result = useInstanceProducts() - const { deleteProduct, updateProduct } = useProductAPI() - const [notif, setNotif] = useState<Notification | undefined>(undefined) +export default function ProductList({ + onUnauthorized, + onLoadError, + onCreate, + onSelect, + onNotFound, +}: Props): VNode { + const result = useInstanceProducts(); + const { deleteProduct, updateProduct } = useProductAPI(); + const [notif, setNotif] = useState<Notification | undefined>(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 <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 <section class="section is-main-section"> - <NotificationCard notification={notif} /> + return ( + <section class="section is-main-section"> + <NotificationCard notification={notif} /> - <CardTable instances={result.data} - onCreate={onCreate} - onUpdate={(id, prod) => updateProduct(id, prod) - .then(() => setNotif({ - message: i18n`product updated successfully`, - type: "SUCCESS" - })).catch((error) => setNotif({ - message: i18n`could not update the product`, - type: "ERROR", - description: error.message - })) - } - onSelect={(product) => onSelect(product.id)} - onDelete={(prod: (MerchantBackend.Products.ProductDetail & WithId)) => deleteProduct(prod.id) - .then(() => setNotif({ - message: i18n`product delete successfully`, - type: "SUCCESS" - })).catch((error) => setNotif({ - message: i18n`could not delete the product`, - type: "ERROR", - description: error.message - })) - } - /> - </section> -}
\ No newline at end of file + <CardTable + instances={result.data} + onCreate={onCreate} + onUpdate={(id, prod) => + updateProduct(id, prod) + .then(() => + setNotif({ + message: i18n`product updated successfully`, + type: "SUCCESS", + }), + ) + .catch((error) => + setNotif({ + message: i18n`could not update the product`, + type: "ERROR", + description: error.message, + }), + ) + } + onSelect={(product) => onSelect(product.id)} + onDelete={(prod: MerchantBackend.Products.ProductDetail & WithId) => + deleteProduct(prod.id) + .then(() => + setNotif({ + message: i18n`product delete successfully`, + type: "SUCCESS", + }), + ) + .catch((error) => + setNotif({ + message: i18n`could not delete the product`, + type: "ERROR", + description: error.message, + }), + ) + } + /> + </section> + ); +} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx index 95dd1f5cc..a85b13b8b 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx @@ -15,57 +15,59 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h, VNode, FunctionalComponent } from 'preact'; +import { h, VNode, FunctionalComponent } from "preact"; import { UpdatePage as TestedComponent } from "./UpdatePage.js"; - export default { - title: 'Pages/Product/Update', + title: "Pages/Product/Update", component: TestedComponent, argTypes: { - onUpdate: { action: 'onUpdate' }, - onBack: { action: 'onBack' }, + onUpdate: { action: "onUpdate" }, + onBack: { action: "onBack" }, }, }; -function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r +function createExample<Props>( + Component: FunctionalComponent<Props>, + props: Partial<Props>, +) { + const r = (args: any) => <Component {...args} />; + r.args = props; + return r; } export const WithManagedStock = createExample(TestedComponent, { product: { - product_id: '20102-ASDAS-QWE', - description: 'description1', + product_id: "20102-ASDAS-QWE", + description: "description1", description_i18n: {} as any, - image: '', - price: 'TESTKUDOS:10', + image: "", + price: "TESTKUDOS:10", taxes: [], total_lost: 10, total_sold: 5, total_stock: 15, - unit: 'bar', - address: {} - } + unit: "bar", + address: {}, + }, }); export const WithInfiniteStock = createExample(TestedComponent, { product: { - product_id: '20102-ASDAS-QWE', - description: 'description1', + product_id: "20102-ASDAS-QWE", + description: "description1", description_i18n: {} as any, - image: '', - price: 'TESTKUDOS:10', + image: "", + price: "TESTKUDOS:10", taxes: [], total_lost: 10, total_sold: 5, total_stock: -1, - unit: 'bar', - address: {} - } + unit: "bar", + address: {}, + }, }); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx index 54fef6003..841c0222f 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.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,7 +26,7 @@ import { MerchantBackend, WithId } from "../../../../declaration.js"; import { useListener } from "../../../../hooks/listener.js"; import { Translate, useTranslator } from "../../../../i18n/index.js"; -type Entity = MerchantBackend.Products.ProductDetail & { product_id: string } +type Entity = MerchantBackend.Products.ProductDetail & { product_id: string }; interface Props { onUpdate: (d: Entity) => Promise<void>; @@ -35,43 +35,65 @@ interface Props { } export function UpdatePage({ product, onUpdate, onBack }: Props): VNode { - const [submitForm, addFormSubmitter] = useListener<Entity | undefined>((result) => { - if (result) return onUpdate(result) - return Promise.resolve() - }) - - const i18n = useTranslator() + const [submitForm, addFormSubmitter] = useListener<Entity | undefined>( + (result) => { + if (result) return onUpdate(result); + return Promise.resolve(); + }, + ); - return <div> - <section class="section"> - <section class="hero is-hero-bar"> - <div class="hero-body"> + const i18n = useTranslator(); - <div class="level"> - <div class="level-left"> - <div class="level-item"> - <span class="is-size-4"><Translate>Product id:</Translate><b>{product.product_id}</b></span> + return ( + <div> + <section class="section"> + <section class="hero is-hero-bar"> + <div class="hero-body"> + <div class="level"> + <div class="level-left"> + <div class="level-item"> + <span class="is-size-4"> + <Translate>Product id:</Translate> + <b>{product.product_id}</b> + </span> + </div> </div> </div> </div> - </div> - </section> - <hr /> + </section> + <hr /> - <div class="columns"> - <div class="column" /> - <div class="column is-four-fifths"> - <ProductForm initial={product} onSubscribe={addFormSubmitter} alreadyExist /> + <div class="columns"> + <div class="column" /> + <div class="column is-four-fifths"> + <ProductForm + initial={product} + onSubscribe={addFormSubmitter} + alreadyExist + /> - <div class="buttons is-right mt-5"> - {onBack && <button class="button" onClick={onBack} ><Translate>Cancel</Translate></button>} - <AsyncButton onClick={submitForm} data-tooltip={ - !submitForm ? i18n`Need to complete marked fields` : 'confirm operation' - } disabled={!submitForm}><Translate>Confirm</Translate></AsyncButton> + <div class="buttons is-right mt-5"> + {onBack && ( + <button class="button" onClick={onBack}> + <Translate>Cancel</Translate> + </button> + )} + <AsyncButton + onClick={submitForm} + data-tooltip={ + !submitForm + ? i18n`Need to complete marked fields` + : "confirm operation" + } + disabled={!submitForm} + > + <Translate>Confirm</Translate> + </AsyncButton> + </div> </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/products/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx index c32424348..3988fc9f0 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx @@ -15,22 +15,22 @@ */ /** -* -* @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"; import { HttpError } from "../../../../hooks/backend.js"; import { useProductAPI, useProductDetails } from "../../../../hooks/product.js"; -import { useTranslator } from '../../../../i18n/index.js'; +import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; import { UpdatePage } from "./UpdatePage.js"; -export type Entity = MerchantBackend.Products.ProductAddDetail +export type Entity = MerchantBackend.Products.ProductAddDetail; interface Props { onBack?: () => void; onConfirm: () => void; @@ -39,33 +39,43 @@ interface Props { onLoadError: (e: HttpError) => VNode; pid: string; } -export default function UpdateProduct({ pid, onConfirm, onBack, onUnauthorized, onNotFound, onLoadError }: Props): VNode { - const { updateProduct } = useProductAPI() - const result = useProductDetails(pid) - const [notif, setNotif] = useState<Notification | undefined>(undefined) +export default function UpdateProduct({ + pid, + onConfirm, + onBack, + onUnauthorized, + onNotFound, + onLoadError, +}: Props): VNode { + const { updateProduct } = useProductAPI(); + const result = useProductDetails(pid); + const [notif, setNotif] = useState<Notification | undefined>(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 <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> - <NotificationCard notification={notif} /> - <UpdatePage - product={{ ...result.data, product_id: pid }} - onBack={onBack} - onUpdate={(data) => { - return updateProduct(pid, data) - .then(onConfirm) - .catch((error) => { - setNotif({ - message: i18n`could not create product`, - type: "ERROR", - description: error.message - }) - }) - }} /> - </Fragment> -}
\ No newline at end of file + return ( + <Fragment> + <NotificationCard notification={notif} /> + <UpdatePage + product={{ ...result.data, product_id: pid }} + onBack={onBack} + onUpdate={(data) => { + return updateProduct(pid, data) + .then(onConfirm) + .catch((error) => { + setNotif({ + message: i18n`could not create product`, + type: "ERROR", + description: error.message, + }); + }); + }} + /> + </Fragment> + ); +} |