docuseal/app/views/webhook_settings/show.html.erb

<div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0 md:space-x-10">
  <%= render 'shared/settings_nav' %>
  <div class="flex-grow">
    <div class="flex flex-col gap-2 md:flex-row md:justify-between md:items-end mb-4">
      <h1 class="text-4xl font-bold">Webhooks</h1>
      <%= render 'shared/test_mode_toggle' %>
    </div>
    <div class="card bg-base-200">
      <div class="card-body p-6">
        <%= form_for @webhook_url, url: settings_webhooks_path, method: :post, html: { autocomplete: 'off' } do |f| %>
          <%= f.label :url, 'Webhook URL', class: 'text-sm font-semibold' %>
          <div class="flex flex-row flex-wrap space-y-2 md:space-y-0 md:flex-nowrap md:space-x-2 mt-2">
            <%= f.url_field :url, class: 'input font-mono input-bordered w-full', placeholder: 'https://example.com/hook' %>
            <%= f.button button_title(title: t('save'), disabled_with: t('saving')), class: 'base-button w-full md:w-32' %>
           <% if @webhook_url.persisted? %>
              <a href="<%= webhook_secret_path(@webhook_url) %>" data-turbo-frame="modal" class="white-button w-full md:w-auto">
                <%= @webhook_url.secret.present? ? t('edit_secret') : t('add_secret') %>
              </a>
            <% end %>
          </div>
          <% WebhookUrl::EVENTS.group_by { |e| e.include?('form') }.each do |_, events| %>
            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 mt-4 gap-y-2">
              <%= f.collection_check_boxes(:events, events, :to_s, :to_s, include_hidden: false) do |b| %>
                <div class="flex">
                  <label class="flex items-center space-x-2">
                    <%= b.check_box class: 'base-checkbox', checked: @webhook_url.events.include?(b.value), onchange: 'this.form.requestSubmit()', disabled: @webhook_url.url.blank? %>
                    <span>
                      <%= b.label %>
                    </span>
                  </label>
                </div>
              <% end %>
            </div>
          <% end %>
        <% end %>
      </div>
    </div>
    <% submitter = current_account.submitters.where.not(completed_at: nil).order(:id).last %>
    <% if submitter %>
      <div class="space-y-4 mt-4">
        <div class="collapse collapse-open bg-base-200 px-1">
          <div class="p-4 text-xl font-medium">
            <div class="flex items-center justify-between gap-2">
              <span>
                <%= t('submission_example_payload') %>
              </span>
              <% if @webhook_url.url.present? && @webhook_url.events.include?('form.completed') %>
                <%= button_to button_title(title: 'Test Webhook', disabled_with: t('sending'), icon_disabled: svg_icon('loader', class: 'w-4 h-4 animate-spin')), settings_webhooks_path, class: 'btn btn-neutral btn-outline btn-sm', method: :put %>
              <% end %>
            </div>
          </div>
          <div class="collapse-content" style="display: inherit">
            <div class="mockup-code overflow-hidden relative">
              <span class="top-0 right-0 absolute">
                <%= render 'shared/clipboard_copy', icon: 'copy', text: code = JSON.pretty_generate({ event_type: 'form.completed', timestamp: Time.current.iso8601, data: Submitters::SerializeForWebhook.call(submitter) }).gsub(/^/, '  ').sub(/^\s+/, ''), class: 'btn btn-ghost text-white', icon_class: 'w-6 h-6 text-white', copy_title: t('copy'), copied_title: t('copied') %>
              </span>
              <pre><code class="overflow-hidden w-full"><%= code %></code></pre>
            </div>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>