diff options
author | Sebastian <sebasjm@gmail.com> | 2023-08-02 10:41:14 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-08-02 10:41:14 -0300 |
commit | 72b8a70da2b49d767aa0262fe4095adf4523e469 (patch) | |
tree | 5b0a39333ac1cabca3b56cfdde24b08f35428790 /packages/merchant-backoffice-ui/src | |
parent | 60929c34f3e342a4f2b47a7e0172ada3e58d6f07 (diff) | |
download | wallet-core-72b8a70da2b49d767aa0262fe4095adf4523e469.tar.xz |
fix #7830
Diffstat (limited to 'packages/merchant-backoffice-ui/src')
3 files changed, 31 insertions, 7 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx index 8a57a9de8..a8dad5d89 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx @@ -44,7 +44,7 @@ export function InputSelector<T>({ fromStr = defaultFromString, toStr = defaultToString, }: Props<keyof T>): VNode { - const { error, value, onChange } = useField<T>(name); + const { error, value, onChange, required } = useField<T>(name); return ( <div class="field is-horizontal"> <div class="field-label is-normal"> @@ -58,8 +58,8 @@ export function InputSelector<T>({ </label> </div> <div class="field-body is-flex-grow-3"> - <div class="field"> - <p class={expand ? "control is-expanded select" : "control select"}> + <div class="field has-icons-right"> + <p class={expand ? "control is-expanded select" : "control select "}> <select class={error ? "select is-danger" : "select"} name={String(name)} @@ -78,8 +78,14 @@ export function InputSelector<T>({ ); })} </select> + {help} </p> + {required && ( + <span class="icon has-text-danger is-right" style={{height: "2.5em"}}> + <i class="mdi mdi-alert" /> + </span> + )} {error && <p class="help is-danger">{error}</p>} </div> </div> diff --git a/packages/merchant-backoffice-ui/src/declaration.d.ts b/packages/merchant-backoffice-ui/src/declaration.d.ts index 8afa2f781..db3122266 100644 --- a/packages/merchant-backoffice-ui/src/declaration.d.ts +++ b/packages/merchant-backoffice-ui/src/declaration.d.ts @@ -1331,12 +1331,13 @@ export namespace MerchantBackend { } namespace Webhooks { + type MerchantWebhookType = "pay" | "refund"; interface WebhookAddDetails { // Webhook ID to use. webhook_id: string; // The event of the webhook: why the webhook is used. - event_type: string; + event_type: MerchantWebhookType; // URL of the webhook where the customer will be redirected. url: string; diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx index ed11f86a5..7b07e689e 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx @@ -33,6 +33,7 @@ import { InputDuration } from "../../../../components/form/InputDuration.js"; import { InputNumber } from "../../../../components/form/InputNumber.js"; import { useBackendContext } from "../../../../context/backend.js"; import { MerchantBackend } from "../../../../declaration.js"; +import { InputSelector } from "../../../../components/form/InputSelector.js"; type Entity = MerchantBackend.Webhooks.WebhookAddDetails; @@ -50,7 +51,9 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { const errors: FormErrors<Entity> = { webhook_id: !state.webhook_id ? i18n.str`required` : undefined, - event_type: !state.event_type ? i18n.str`required` : undefined, + event_type: !state.event_type ? i18n.str`required` + : state.event_type !== "pay" && state.event_type !== "refund" ? i18n.str`it should be "pay" or "refund"` + : undefined, http_method: !state.http_method ? i18n.str`required` : !validMethod.includes(state.http_method) @@ -84,16 +87,30 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { label={i18n.str`ID`} tooltip={i18n.str`Webhook ID to use`} /> - <Input<Entity> + <InputSelector name="event_type" label={i18n.str`Event`} + values={[ + i18n.str`Choose one...`, + i18n.str`pay`, + i18n.str`refund`, + ]} tooltip={i18n.str`The event of the webhook: why the webhook is used`} /> - <Input<Entity> + <InputSelector name="http_method" label={i18n.str`Method`} + values={[ + i18n.str`Choose one...`, + i18n.str`GET`, + i18n.str`POST`, + i18n.str`PUT`, + i18n.str`PATCH`, + i18n.str`HEAD`, + ]} tooltip={i18n.str`Method used by the webhook`} /> + <Input<Entity> name="url" label={i18n.str`URL`} |