fix #7830

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