From 23c57cb354301af4d7c8a25ae8f1964060e556bb Mon Sep 17 00:00:00 2001
From: Gaetan Craig-Riou <gaetan.riou@gmail.com>
Date: Tue, 25 Nov 2025 16:48:53 +1100
Subject: [PATCH] Add UI to manage payment staus webhook endpoint

---
 .../webhook_endpoint_form_component.rb        | 12 +++++++++
 .../webhook_endpoint_form_component.html.haml | 22 ++++++++++++++++
 .../spree/users/_webhook_endpoints.html.haml  | 25 ++-----------------
 config/locales/en.yml                         |  9 ++++---
 4 files changed, 42 insertions(+), 26 deletions(-)
 create mode 100644 app/components/webhook_endpoint_form_component.rb
 create mode 100644 app/components/webhook_endpoint_form_component/webhook_endpoint_form_component.html.haml

diff --git a/app/components/webhook_endpoint_form_component.rb b/app/components/webhook_endpoint_form_component.rb
new file mode 100644
index 0000000000..914eb22c61
--- /dev/null
+++ b/app/components/webhook_endpoint_form_component.rb
@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class WebhookEndpointFormComponent < ViewComponent::Base
+  def initialize(webhooks:, webhook_type:)
+    @webhooks = webhooks
+    @webhook_type = webhook_type
+  end
+
+  private
+
+  attr_reader :webhooks, :webhook_type
+end
diff --git a/app/components/webhook_endpoint_form_component/webhook_endpoint_form_component.html.haml b/app/components/webhook_endpoint_form_component/webhook_endpoint_form_component.html.haml
new file mode 100644
index 0000000000..4f27faf025
--- /dev/null
+++ b/app/components/webhook_endpoint_form_component/webhook_endpoint_form_component.html.haml
@@ -0,0 +1,22 @@
+-# Existing endpoints
+- if webhooks.empty? # Only one allowed for now.
+  %tr
+    %td= t("components.webhook_endpoint_form.event_types.#{webhook_type}") 
+    %td
+      = form_with(url: helpers.account_webhook_endpoints_path, id: "#{webhook_type}_webhook_endpoint") do |f|
+        = f.url_field :'webhook_endpoint[url]', id: "#{webhook_type}_webhook_endpoint_url", placeholder: t('components.webhook_endpoint_form.url.create_placeholder'), required: true, size: 64
+        = f.hidden_field :'webhook_endpoint[webhook_type]', id: "#{webhook_type}_webhook_endpoint_webhook_type", value: webhook_type
+    %td.actions
+      = button_tag t(:create), class: 'button primary tiny no-margin', form: "#{webhook_type}_webhook_endpoint"
+
+- webhooks.each do |webhook_endpoint|
+  %tr
+    %td= t("components.webhook_endpoint_form.event_types.#{webhook_type}")
+    %td= webhook_endpoint.url
+    %td.actions
+      - if webhook_endpoint.persisted?
+        = button_to helpers.account_webhook_endpoint_path(webhook_endpoint), method: :delete,
+                                                                             class: "tiny alert no-margin",
+                                                                             data: { confirm: I18n.t(:are_you_sure) } do
+          = I18n.t(:delete)
+
diff --git a/app/views/spree/users/_webhook_endpoints.html.haml b/app/views/spree/users/_webhook_endpoints.html.haml
index f9ec7aac60..1ca719a8bb 100644
--- a/app/views/spree/users/_webhook_endpoints.html.haml
+++ b/app/views/spree/users/_webhook_endpoints.html.haml
@@ -10,26 +10,5 @@
         %th= t('.url.header')
         %th.actions
     %tbody
-      -# TODO handle multiple endpoint and type and tooltip
-      -# Existing endpoints
-      - @user.webhook_endpoints.order_cycle_opened.each do |webhook_endpoint|
-        %tr
-          %td= t('.event_types.order_cycle_opened') # For now, we only support one type.
-          %td= webhook_endpoint.url
-          %td.actions
-            - if webhook_endpoint.persisted?
-              = button_to account_webhook_endpoint_path(webhook_endpoint), method: :delete,
-                class: "tiny alert no-margin",
-                data: { confirm: I18n.t(:are_you_sure)} do
-                = I18n.t(:delete)
-
-      -# Create new
-      - if @user.webhook_endpoints.order_cycle_opened.empty? # Only one allowed for now.
-        %tr
-          %td= t('.event_types.order_cycle_opened') # For now, we only support one type.
-          %td
-            = form_for(@user.webhook_endpoints.build, url: account_webhook_endpoints_path, id: 'new_webhook_endpoint') do |f|
-              = f.url_field :url, placeholder: t('.url.create_placeholder'), required: true, size: 64
-              = f.hidden_field :webhook_type, value: "order_cycle_opened"
-          %td.actions
-            = button_tag t(:create), class: 'button primary tiny no-margin', form: 'new_webhook_endpoint'
+      = render WebhookEndpointFormComponent.new(webhooks: @user.webhook_endpoints.order_cycle_opened, webhook_type: "order_cycle_opened")
+      = render WebhookEndpointFormComponent.new(webhooks: @user.webhook_endpoints.payment_status, webhook_type: "payment_status_changed")
diff --git a/config/locales/en.yml b/config/locales/en.yml
index d3fe23123d..7b4e8fab31 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -4938,13 +4938,10 @@ en:
       webhook_endpoints:
         title: Webhook Endpoints
         description: Events in the system may trigger webhooks to external systems.
-        event_types:
-          order_cycle_opened: Order Cycle Opened
         event_type:
           header: Event type
         url:
           header: Endpoint URL
-          create_placeholder: Enter the URL of the remote webhook endpoint
       developer_settings:
         title: Developer Settings
       form:
@@ -5093,6 +5090,12 @@ en:
     add_tag_rule_modal:
       select_rule_type: "Select a rule type:"
       add_rule: "Add Rule"
+    webhook_endpoint_form:
+      url:
+        create_placeholder: Enter the URL of the remote webhook endpoint
+      event_types:
+        order_cycle_opened: Order Cycle Opened
+        payment_status_changed: Post webhook on Payment status change
 
 
   # Gem to prevent bot form submissions