fix #7830

1 files changed, 20 insertions, 3 deletions

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`}