Add UI to manage payment staus webhook endpoint

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

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)
+

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")

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