diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx | 71 |
1 files changed, 43 insertions, 28 deletions
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> + ); +} |