fuik 0.11.0 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b15633f53ffe1c5c7dad94fb1d5151a8c2bce010318854cc50a4e3afbe48c828
-  data.tar.gz: 0ba925e04a5271e77a8a8ed4c80bbda7a4a00a5d9d87c6b3b304104519988a29
+  metadata.gz: 4a653582dac2c822bb4496a89d0dbd12cd9b96a082bdeed11c209793df27de21
+  data.tar.gz: 44070a1620d3d867cc5a400e7f61bbd58bebec6e713407d6da6a65d8d2d2037b
 SHA512:
-  metadata.gz: 5c7c0c9ee432bd0702969c6238c0ceea4200da1370350a4d88337f14252bc6f4bce0990a0c80e49dd862de9f25459c4cd1a1f5b914e41de1b021e0ba3b21c255
-  data.tar.gz: 93e200fcc81563e5f6a9699067c6543c4e4b26af42f1504dff84aa0a2e59ce89efe2fb2a571dde5fd2bc298bded45b2c9b332d44c1deb79fea22ce4f0130248b
+  metadata.gz: c870f47e09396993506e96851c491d0e715ddf87d964554aba212e83927a2e9370c75b601cce24f8b4a0653b1b8cfe16f3825fb916048fa9828c05e95ab8d49a
+  data.tar.gz: 9ce68f8cb2d9aa7af1aa3cfb6a394a1a26cc165ed6dc58320fbfc0b266d219e839d0a29a352164fadce614ff75579dcb8041077d553cdbd45cfe6424d709125e

data/README.md

@@ -6,7 +6,6 @@ Fuik (Dutch for fish trap) is a Rails engine that catches and stores webhooks fr
 
 <img alt="Fuik admin interface" src="https://raw.githubusercontent.com/Rails-Designer/fuik/HEAD/.github/docs/webhooks-index.jpg" style="max-width: 100%;">
 
-
 **Sponsored By [Rails Designer](https://railsdesigner.com/)**
 
 <a href="https://railsdesigner.com/" target="_blank">
@@ -60,6 +59,13 @@ Visit `/webhooks` to see all received webhooks. Click any event to view all the
 
 ⚠️ The `/webhooks` path is by default not protected. Easiest is to set `Fuik::Engine.config.events_controller_parent` to a controller that requires authentication.
 
+### Dashboard features
+
+* **Copy payload as JSON**: click a button, payload is in your clipboard
+* **Download payload as JSON file**: keep it for testing, debugging or throw it at your LLM agent, bot or colleague
+* **Add `.json` to any URL**: get the raw payload without the UI
+* **Click any key to get the Ruby accessor path**: click `product_id` (as seen in the screenshot above) and get `payload["line_items"][0]["product_id"]` (say what? 🤯)
+
 
 ### Add business logic
 

data/app/assets/javascript/attractivejs-0.12.0.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Attractive=e()}(this,(function(){"use strict";class t{static enabled=!1;static prefix="🧲 ";static log(...t){this.enabled&&console.log(this.prefix,...t)}static warn(...t){this.enabled&&console.warn(this.prefix,...t)}static error(...t){this.enabled&&console.error(this.prefix,...t)}static throw(t){throw new Error(`${this.prefix}${t}`)}}class e{#t;constructor(e){t.log("Events with actions:",Object.keys(e)),this.#t=e}process(t,{on:e,using:s}){e&&this.#e(e.dataset.action).some((r=>!1===this.#s(r,{for:t,on:e,using:s})))}#e(t){return t.split(" ").filter((t=>t))}#s(e,{for:s,on:r,using:i}){if(t.log("Process action for",s.type,"on",r,"…"),e.includes(":")){const[t,r]=e.split(":");if(s.type!==r)return;e=t}else if(e.includes("->")){const[t,r]=e.split("->");if((t.includes("@")?t.split("@")[1]:t)!==s.type)return;e=r}else if(s.type!==i)return;return t.log("…","processed action for",s.type,"on",r),this.#r(e,{on:r,for:s})}#r(e,{on:s,for:r}){t.log("Execute action",e,"on",s,"…");const i=e.split("#"),[n,a,o]=i,c=this.#t[n]?n:a??e;if("function"!=typeof this.#t[c])return;const l=this.#t[n]?i.slice(1).join("#"):o??null,u=this.#t[c](s,{value:l,target:s.dataset.target,targets:s.dataset.targets});return!1===u&&r&&r.preventDefault(),t.log("…","executed action",e,"on",s),u}}var s=new class{identify({by:t}){return t.split(" ").filter((t=>t.includes("->"))).map((t=>t.split("->")[0]))}getDefault({from:t}){const e=t.tagName.toLowerCase(),s="input"===e,r=s?t.type||"text":null;return s?this.#i.input[r]||this.#i.input.default:this.#i[e]||this.#i.default}#i={a:"click",button:"click",input:{checkbox:"change",radio:"change",submit:"click",button:"click",reset:"click",default:"input"},select:"change",textarea:"input",form:"submit",default:"click"}};class r{#n;#a;#o;constructor(t,e=null){this.#n=t,this.#a=e}start(t){if(window.MutationObserver)return this.#o=new MutationObserver((e=>{const s=new Set,r=new Set;e.forEach((e=>this.#c(e,{for:t,elements:{added:s,removed:r}}))),s.forEach((t=>this.#n(t))),this.#a&&r.forEach((t=>this.#a(t)))})),this.#o.observe(document.documentElement,{childList:!0,subtree:!0}),this}stop(){return this.#o&&this.#o.disconnect(),this}#c(t,{for:e,elements:{added:s,removed:r}}){"childList"===t.type&&(t.addedNodes.forEach((t=>{this.#l(t,{for:e,and:s})})),t.removedNodes.forEach((t=>{this.#l(t,{for:e,and:r})})))}#l(t,{for:e,and:s}){t.nodeType===Node.ELEMENT_NODE&&(t.matches&&t.matches(e)&&s.add(t),t.querySelectorAll&&t.querySelectorAll(e).forEach((t=>s.add(t))))}}var i=new class{#u={mounted:(t,e)=>{e()},now:(t,e)=>{e()},whenVisible:(t,e)=>{const s=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&(e(),s.disconnect())}))}));s.observe(t)}};setup({for:t,on:e,trigger:s}){const r=this.#u[t];return!!r&&(r(e,s),!0)}};class n{constructor(t,e={}){if(!t)throw new Error("Current element is required");this.currentElement=t,this.target=e.target,this.targetsSelector=e.targets,this.options=e}get targets(){if(this.targetsSelector)return Array.from(document.querySelectorAll(this.targetsSelector));if(this.target){const t=document.getElementById(this.target);return t?[t]:[]}return[this.currentElement]}cycledValue(t,e){const s=Array.isArray(e)?e:e.split(",").map((t=>t.trim())),r=s.indexOf(t);return s[(r+1)%s.length]}}class a extends n{constructor(t,e={}){super(t,e);const[s,r]=e.value.split("=");this.attribute=s,this.value=r}toggle(){this.attribute&&this.targets.forEach((t=>t.hasAttribute(this.attribute)?t.removeAttribute(this.attribute):t.setAttribute(this.attribute,this.value||"")))}cycle(){this.value&&this.targets.forEach((t=>this.#h(t)))}add(){this.attribute&&this.targets.forEach((t=>t.setAttribute(this.attribute,this.value||"")))}remove(){this.attribute&&this.targets.forEach((t=>t.removeAttribute(this.attribute)))}#h(t){const e=this.cycledValue(t.getAttribute(this.attribute),this.value);t.setAttribute(this.attribute,e)}}const o=t=>(e,s={})=>new a(e,s)[t]();var c={toggleAttribute:o("toggle"),cycleAttribute:o("cycle"),addAttribute:o("add"),removeAttribute:o("remove")};const l=t=>t?.split(",").map((t=>t.trim())).filter(Boolean)??[];class u extends n{constructor(t,e={}){super(t,e),this.value=l(e.value)}toggle(){this.value&&this.targets.forEach((t=>this.#d({forEach:t})))}cycle(){this.value&&0!==this.value.length&&this.targets.forEach((t=>this.#f(t)))}add(){this.value&&this.targets.forEach((t=>t.classList.add(...this.value)))}remove(){this.value&&this.targets.forEach((t=>t.classList.remove(...this.value)))}#d({forEach:t}){this.value.forEach((e=>t.classList.toggle(e)))}#f(t){const e=this.value.find((e=>t.classList.contains(e)))||"",s=this.cycledValue(e,this.value);t.classList.remove(...this.value),t.classList.add(s)}}const h=t=>(e,s={})=>new u(e,s)[t]();var d={toggleClass:h("toggle"),cycleClass:h("cycle"),addClass:h("add"),removeClass:h("remove")};let f;const g=(t,e)=>{clearTimeout(f),f=setTimeout(t,e)};class v extends n{constructor(t,e={}){super(t,e),this.value=e.value}async copy(){const t=this.value||(this.targets[0]?.value??this.targets[0]?.textContent);if(void 0!==t)try{await navigator.clipboard.writeText(t),this.#g(!0)}catch(t){this.#g(!1)}}#g(t){const e=parseInt(this.currentElement.dataset.copyDelay);this.targets.forEach((e=>e.setAttribute(this.#v,t))),e&&g((()=>this.targets.forEach((t=>t.removeAttribute(this.#v)))),e)}get#v(){return"data-copy-success"}}var m,p={copy:(m="copy",(t,e={})=>new v(t,e)[m]())};class b extends n{confirm(){const t=this.currentElement.dataset.confirmMessage||"Are you sure?",e=window.confirm(t);return this.#g(e),e}#g(t){this.currentElement.setAttribute("data-confirm-success",t);const e=this.currentElement.dataset.confirmDuration;e&&g((()=>this.currentElement.removeAttribute("data-confirm-success")),parseInt(e))}}var E={confirm:(t=>(e,s={})=>new b(e,s)[t]())("confirm")};class w extends n{constructor(t,e={}){super(t,e);const[s,r]=e.value.split("=");this.attribute=s,this.value=r}toggle(){this.attribute&&this.targets.forEach((t=>{this.attribute in t.dataset?delete t.dataset[this.attribute]:t.dataset[this.attribute]=this.value||""}))}cycle(){this.value&&this.targets.forEach((t=>this.#m(t)))}add(){this.attribute&&this.targets.forEach((t=>{t.dataset[this.attribute]=this.value||""}))}remove(){this.attribute&&this.targets.forEach((t=>delete t.dataset[this.attribute]))}#m(t){const e=this.cycledValue(t.dataset[this.attribute],this.value);t.dataset[this.attribute]=e}}const y=t=>(e,s={})=>new w(e,s)[t]();var A={toggleDataAttribute:y("toggle"),cycleDataAttribute:y("cycle"),addDataAttribute:y("add"),removeDataAttribute:y("remove")};class L extends n{open(){this.targets.forEach((t=>t instanceof HTMLDialogElement&&t.show()))}openModal(){this.targets.forEach((t=>t instanceof HTMLDialogElement&&t.showModal()))}close(){this.targets.forEach((t=>t instanceof HTMLDialogElement&&t.close()))}}const T=t=>(e,s={})=>{new L(e,s)[t]()};var x={open:T("open"),openModal:T("openModal"),close:T("close")};class M extends n{add(){const t=this.targets[0];if(!t)return;const e=this.currentElement.dataset.addSource;if(!e)return;const s=document.querySelector(e);if(!s)return;const r=this.#p(s),i=this.currentElement.dataset.addAt||"beforeend";t.insertAdjacentElement(i,r)}remove(){const t=parseInt(this.currentElement.dataset.removeDelay),e=()=>{this.targets.forEach((t=>t.remove()))};t?setTimeout(e,t):e()}#p(t){return"TEMPLATE"===t.tagName?t.content.cloneNode(!0).firstElementChild:t.cloneNode(!0)}}const S=t=>(e,s={})=>new M(e,s)[t]();var k={add:S("add"),remove:S("remove")};class N extends n{requestSubmit(){const t=parseInt(this.currentElement.dataset.submitDelay)||0,e=()=>this.targets.forEach((t=>t instanceof HTMLFormElement&&t.requestSubmit()));t?g(e,t):e()}reset(){this.targets.forEach((t=>t instanceof HTMLFormElement&&t.reset()))}}const F=t=>(e,s={})=>{new N(e,s)[t]()};var D={submit:F("requestSubmit"),reset:F("reset")};class q extends n{constructor(t,e={}){super(t,e),this.classNames=l(e.value),this.justOnce="intersect-once"===e.actionName}start(){if(0===this.classNames.length)return;const t=new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting?this.#b(t,e.target):this.#E()}))}));t.observe(this.currentElement)}#b(t,e){this.targets.forEach((t=>t.classList.add(...this.classNames))),this.justOnce&&t.unobserve(e)}#E(){this.justOnce||this.targets.forEach((t=>t.classList.remove(...this.classNames)))}}const C=t=>(e,s={})=>new q(e,{...s,actionName:t}).start();var O={"intersect-once":C("intersect-once"),"intersect-toggle":C("intersect-toggle")};class I extends n{reload(){this.targets.forEach((t=>{this.#w(t)?t.reload():window.location.reload()}))}#w(t){return"TURBO-FRAME"===t.tagName&&"function"==typeof t.reload}}const H=t=>(e,s={})=>new I(e,s)[t]();var V={reload:H("reload"),refresh:H("reload")};class j{static get(){const t=document.querySelector('meta[name="csrf-token"]')?.content;return t||null}}class $ extends n{constructor(t,e={}){super(t,e),this.value=e.value}async get(){if(this.value){this.#y({with:this.value})&&console.warn(`Cross-origin request to: ${this.value}. Missing the correct CORS headers.`),this.#g("busy");try{const t=await fetch(this.value,{method:"GET"});if(!t.ok)throw new Error(`HTTP error! status: ${t.status}`);const e=await t.text();return this.targets.forEach((t=>{t.innerHTML=e})),this.#g("success"),t}catch(t){throw console.error("GET request failed:",t),this.#g("error"),t}}else console.warn("No URL provided in the action value")}post(){return this.#A("POST")}patch(){return this.#A("PATCH")}put(){return this.#A("PUT")}#y({with:t}){try{return new URL(t,window.location.href).origin!==window.location.origin}catch{return console.error("Invalid URL:",t),!1}}#g(t){const e=this.currentElement.dataset.requestDuration;this.targets.forEach((e=>{"busy"===t?(e.setAttribute("data-request-busy","true"),e.removeAttribute("data-request-success")):(e.removeAttribute("data-request-busy"),e.setAttribute("data-request-success","success"===t))})),e&&"busy"!==t&&g((()=>{this.targets.forEach((t=>t.removeAttribute("data-request-success")))}),parseInt(e))}#A(t){if(this.value)return this.#g("busy"),fetch(this.value,{method:t,headers:{"Content-Type":"application/json","X-CSRF-Token":j.get()},body:JSON.stringify(this.#L)}).then((t=>{if(!t.ok)throw new Error(`HTTP error! status: ${t.status}`);return this.#g("success"),t})).catch((e=>{throw console.error(`${t} request failed:`,e),this.#g("error"),e}));console.warn("No URL provided in the action value")}get#L(){const t={},e=this.targets[0];if(e instanceof HTMLFormElement){const s=new FormData(e);for(const[e,r]of s.entries())t[e]=r;return t}if(this.#T){const e=this.currentElement.name,s=this.currentElement.value;t[e]=s}return t}get#T(){return this.currentElement instanceof HTMLInputElement||this.currentElement instanceof HTMLSelectElement||this.currentElement instanceof HTMLTextAreaElement&&this.currentElement.name}}const R=t=>(e,s={})=>new $(e,s)[t]();var P={get:R("get"),post:R("post"),patch:R("patch"),put:R("put")};class U extends n{constructor(t,e={}){super(t,e);const s=e.value;this.behavior=["auto","instant","smooth"].includes(s)?s:"auto"}scroll(){this.targets[0]?.scrollIntoView({behavior:this.behavior})}}var z={scrollTo:(t=>(e,s={})=>new U(e,s)[t]())("scroll")};const B={attribute:c,class:d,clipboard:p,confirm:E,dataAttribute:A,dialog:x,element:k,form:D,intersection:O,reload:V,request:P,scrollTo:z},G=(t=[])=>0===t.length?Object.values(B).reduce(((t,e)=>({...t,...e})),{}):B.reduce(((e,s)=>t[s]?{...e,...t[s]}:(console.warn(`Action “${s}” not found`),e)),{});var _=G([]);var J=new class{#x={};#M=new WeakMap;#S=new Map;#k;#N=new Map;#F;static get debug(){return t.enabled}static set debug(e){t.enabled=e}constructor(){this.#k=new e(_),this.#F=new r((t=>this.#n(t)),(t=>this.#a(t)))}activate(e={}){const{on:s=document,debug:r=!1}=e;return t.enabled=r,t.log("Initializing…"),this.element=s,this.#F.start("[data-action]"),this.element.querySelectorAll("[data-action]").forEach((t=>this.#n(t))),t.log("…initialized"),this}withActions(s=[]){return t.log("Initializing with actions",s),this.#k=new e(G(s)),this}#n(t){const e=t.dataset.action;if(!e)return;const r=e.split(" ");new Set(e.includes("->")?s.identify({by:e}):[s.getDefault({from:t})]).forEach((t=>this.#D({for:t}))),r.filter((t=>t.includes("@"))).forEach((e=>{const[s]=e.split("->"),[r,i]=s.split("@"),n="window"===r?window:document;this.#q(i,n,t)}));const n=r.filter((t=>t.includes(":"))).map((t=>t.split(":")[1]));n.forEach((e=>{i.setup({for:e,on:t,trigger:()=>this.#k.process({type:e},{on:t,using:e})})}))}#a(t){const e=this.#M.get(t);e&&(e.forEach((e=>{const s=this.#N.get(e);if(s&&(s.delete(t),0===s.size)){const[t,s]=e.split(":"),r=this.#S.get(e);("window"===t?window:document).removeEventListener(s,r),this.#S.delete(e),this.#N.delete(e)}})),this.#M.delete(t))}#D({for:e}){this.#x[e]||(this.element.addEventListener(e,(t=>this.#C(t))),t.log("Added event listener for",e,"to",this.element),this.#x[e]=!0)}#q(t,e,s){const r=`${e===window?"window":"document"}:${t}`;if(this.#M.has(s)||this.#M.set(s,new Set),this.#M.get(s).add(r),this.#N.has(r)||this.#N.set(r,new Set),this.#N.get(r).add(s),!this.#S.has(r)){const s=e=>{const s=this.#N.get(r);s&&s.forEach((s=>{this.#k.process(e,{on:s,using:t})}))};e.addEventListener(t,s),this.#S.set(r,s)}}#C(t){const e=t.target.closest("[data-action]");if(!e)return;const r=s.getDefault({from:e});this.#k.process(t,{on:e,using:r})}};const W=(t=document)=>{window.Attractive&&window.Attractive._initialized||J.activate({element:t})};return"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>W())):W(),document.addEventListener("turbo:load",(()=>W()))),"undefined"!=typeof window&&(window.Attractive=J),J}));

data/app/assets/stylesheets/fuik/application.css

@@ -101,6 +101,7 @@
 @layer components {
   .events {
     list-style: none;
+    margin-block-start: 1rem;
 
     li {
       --icon-width: 1.125rem;
@@ -163,6 +164,64 @@
     &[data-status="failed"]::before { color: oklch(60% .2 25); }
   }
 
+  .filters {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+
+    fieldset {
+      border: 0;
+
+      legend {
+        font-size: .875rem;
+        font-weight: 400;
+        color: var(--color-text-muted);
+      }
+
+      input[type="radio"] {
+        position: absolute;
+        clip: rect(0, 0, 0, 0);
+      }
+
+      .pills {
+        display: inline-flex;
+        background: var(--color-bg);
+        border: 1px solid var(--color-border);
+        border-radius: .3rem;
+        overflow: clip;
+
+        .pill {
+          display: inline-flex;
+          align-items: center;
+          padding: .25rem .75rem;
+          font-size: .875rem;
+          font-weight: 400;
+          border-inline-start: 1px solid var(--color-border);
+          cursor: pointer;
+          transition: all ease-in-out 100ms;
+
+          &:first-child { border-inline-start: 0; }
+
+          &:has(input:checked),
+          &:hover:not(:has(input:checked)) {
+            background-color: var(--color-bg-hover);
+          }
+        }
+      }
+    }
+
+    select {
+      padding: .4rem .75rem;
+      font-size: .875rem;
+      background: var(--color-bg);
+      border: 1px solid var(--color-border);
+      border-radius: .25rem;
+      cursor: pointer;
+    }
+
+    [type=submit] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
+  }
+
   button,
   .copy-button {
     padding: .125rem;

data/app/controllers/fuik/events_controller.rb

@@ -5,7 +5,7 @@ module Fuik
     layout "fuik/application"
 
     def index
-      @webhook_events = WebhookEvent.order(created_at: :desc)
+      @webhook_events = WebhookEvent.filtered(params).order(created_at: :desc)
     end
 
     def show

data/app/controllers/fuik/webhooks_controller.rb

@@ -13,11 +13,11 @@ module Fuik
         provider: params[:provider],
         event_id: event_id,
         event_type: event_type,
-        body: request.raw_post,
+        body: json_body,
         headers: headers
       )
 
-      process!(webhook_event)
+      process_later!(webhook_event)
 
       head :ok
     rescue Fuik::InvalidSignature
@@ -30,6 +30,12 @@ module Fuik
 
     private
 
+    def json_body
+      return request.raw_post unless url_encoded_body?
+
+      Rack::Utils.parse_nested_query(request.raw_post).to_json
+    end
+
     def verify_signature!
       return unless should_verify?
 
@@ -47,7 +53,7 @@ module Fuik
       @payload ||= begin
         return {} if request.raw_post.blank?
 
-        JSON.parse(request.raw_post)
+        JSON.parse(json_body)
       rescue JSON::ParserError
         {}
       end
@@ -60,6 +66,17 @@ module Fuik
       event_class.new(webhook_event).process!
     end
 
+    def process_later!(webhook_event)
+      event_class = event_class_for(webhook_event.provider, webhook_event.event_type)
+      return unless event_class
+
+      WebhookProcessingJob.perform_later(event_class.name, webhook_event)
+    end
+
+    def url_encoded_body?
+      request.media_type == "application/x-www-form-urlencoded"
+    end
+
     def event_class_for(provider, event_type)
       "#{provider.camelize}::#{event_type.tr("./:-[]", "_").camelize}".safe_constantize
     end

data/app/jobs/fuik/webhook_processing_job.rb

@@ -0,0 +1,7 @@
+module Fuik
+  class WebhookProcessingJob < ApplicationJob
+    def perform(event_class_name, webhook_event)
+      Object.const_get(event_class_name).new(webhook_event).process!
+    end
+  end
+end

data/app/models/fuik/webhook_event/filterable.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Fuik
+  class WebhookEvent
+    module Filterable
+      extend ActiveSupport::Concern
+
+      class_methods do
+        def filtered(params)
+          events = all
+          events = events.where(status: params[:status]) if params[:status].present?
+          events = events.where(provider: params[:provider]) if params[:provider].present?
+          events
+        end
+
+        def options_for_select
+          by_provider_name.pluck(:provider).map { [it.humanize, it] }
+        end
+      end
+
+      included do
+        scope :by_provider_name, -> { distinct.order(:provider) }
+      end
+    end
+  end
+end

data/app/models/fuik/webhook_event.rb

@@ -4,6 +4,8 @@ module Fuik
   class WebhookEvent < ApplicationRecord
     self.table_name = "fuik_webhook_events"
 
+    include Filterable
+
     enum :status, %w[pending processed failed].index_by(&:itself), default: "pending"
 
     validates :provider, presence: true

data/app/views/fuik/events/_filters.html.erb

@@ -0,0 +1,29 @@
+<%= form_tag root_path, method: :get, id: :filters do %>
+  <div class="filters">
+    <fieldset>
+      <legend>Provider</legend>
+
+      <%= select_tag :provider, options_for_select(Fuik::WebhookEvent.options_for_select, params[:provider]), prompt: "All", data: {action: "form#submit", target: "filters"} %>
+    </fieldset>
+
+    <fieldset>
+      <legend>Status</legend>
+
+      <span class="pills">
+        <%= label_tag nil, class: "pill" do %>
+          <%= radio_button_tag :status, "", params[:status].blank? || params[:status].empty?, data: {action: "form#submit", target: "filters"} %>
+          All
+        <% end %>
+
+        <% Fuik::WebhookEvent.statuses.keys.each do |status| %>
+          <%= label_tag nil, class: "pill" do %>
+            <%= radio_button_tag :status, status, params[:status] == status, data: {action: "form#submit", target: "filters"} %>
+            <%= status.capitalize %>
+          <% end %>
+        <% end %>
+      </span>
+    </fieldset>
+
+    <%= submit_tag "Filter" %>
+  </div>
+<% end %>

data/app/views/fuik/events/index.html.erb

@@ -1,5 +1,7 @@
 <h1>Webhooks</h1>
 
+<%= render "filters" %>
+
 <ul class="events">
   <% @webhook_events.each do |event| %>
     <li>

data/app/views/layouts/fuik/application.html.erb

@@ -8,7 +8,7 @@
   <%= yield :head %>
 
   <%= stylesheet_link_tag "fuik/application", media: "all" %>
-  <script defer src="https://cdn.jsdelivr.net/npm/attractivejs@0.12.0"></script>
+  <script src="<%= asset_path("attractivejs-0.12.0.min.js") %>"></script>
 </head>
 <body>
   <main>

data/lib/fuik/version.rb

@@ -1,3 +1,3 @@
 module Fuik
-  VERSION = "0.11.0"
+  VERSION = "0.12.0"
 end

data/lib/generators/fuik/provider/templates/lettermint/base.rb.tt

@@ -0,0 +1,32 @@
+module <%= provider_module_name %>
+  class Base < Fuik::Event
+    def self.verify!(request)
+      secret = Rails.application.credentials.dig(:lettermint, :signing_secret)
+      signature_header = request.headers["X-Lettermint-Signature"] || ""
+
+      elements = {}
+      signature_header.split(",").each do |element|
+        key, value = element.split("=", 2)
+
+        elements[key] = value if key && value
+      end
+
+      timestamp = elements["t"]
+      signature = elements["v1"]
+
+      raise Fuik::InvalidSignature if timestamp.blank? || signature.blank?
+
+      now = Time.current.to_i
+      raise Fuik::InvalidSignature if (now - timestamp.to_i).abs > TOLERANCE
+
+      signed_payload = "#{timestamp}.#{request.raw_post}"
+      expected = OpenSSL::HMAC.hexdigest("SHA256", secret, signed_payload)
+
+      raise Fuik::InvalidSignature unless ActiveSupport::SecurityUtils.secure_compare(expected, signature)
+    end
+
+    private
+
+    TOLERANCE = 5.minutes
+  end
+end

data/lib/generators/fuik/provider/templates/lettermint/message_failed.rb.tt

@@ -0,0 +1,16 @@
+module <%= provider_module_name %>
+  class MessageFailed < Base
+    def process!
+      # payload.data.recipient  # email address that failed
+      # payload.data.reason  # failure reason (e.g., "A network error occurred.")
+      # payload.data.response.status_code  # SMTP status code
+      # payload.data.subject  # email subject
+      # payload.data.message_id  # message UUID
+      # payload.data.tag  # message tag (or nil)
+
+      # TODO: Add business logic
+
+      @webhook_event.processed!
+    end
+  end
+end

data/lib/generators/fuik/provider/templates/lettermint/message_hard_bounced.rb.tt

@@ -0,0 +1,16 @@
+module <%= provider_module_name %>
+  class MessageHardBounced < Base
+    def process!
+      # payload.data.recipient  # email address that hard bounced
+      # payload.data.response.enhanced_status_code  # SMTP enhanced status code (e.g., "5.1.1")
+      # payload.data.response.content  # SMTP response text (e.g., "User unknown")
+      # payload.data.subject  # email subject
+      # payload.data.message_id  # message UUID
+      # payload.data.tag  # message tag (or nil)
+
+      # TODO: Add business logic
+
+      @webhook_event.processed!
+    end
+  end
+end

data/lib/generators/fuik/provider/templates/lettermint/message_soft_bounced.rb.tt

@@ -0,0 +1,16 @@
+module <%= provider_module_name %>
+  class MessageSoftBounced < Base
+    def process!
+      # payload.data.recipient  # email address that soft bounced
+      # payload.data.response.enhanced_status_code  # SMTP enhanced status code (e.g., "4.2.2")
+      # payload.data.response.content  # SMTP response text (e.g., "Mailbox full")
+      # payload.data.subject  # email subject
+      # payload.data.message_id  # message UUID
+      # payload.data.tag  # message tag (or nil)
+
+      # TODO: Add business logic
+
+      @webhook_event.processed!
+    end
+  end
+end

data/lib/generators/fuik/provider/templates/lettermint/message_suppressed.rb.tt

@@ -0,0 +1,15 @@
+module <%= provider_module_name %>
+  class MessageSuppressed < Base
+    def process!
+      # payload.data.recipient  # email address that was suppressed
+      # payload.data.reason  # suppression reason (e.g., "hard_bounce", "spam_complaint")
+      # payload.data.subject  # email subject
+      # payload.data.message_id  # message UUID
+      # payload.data.tag  # message tag (or nil)
+
+      # TODO: Add business logic
+
+      @webhook_event.processed!
+    end
+  end
+end

data/lib/generators/fuik/provider/templates/smtp2go/base.rb.tt

@@ -0,0 +1,4 @@
+module <%= provider_module_name %>
+  class Base < Fuik::Event
+  end
+end

data/lib/generators/fuik/provider/templates/smtp2go/bounce.rb.tt

@@ -0,0 +1,16 @@
+module <%= provider_module_name %>
+  class Bounce < Base
+    def process!
+      # payload.rcpt  # email address that bounced
+      # payload.bounce  # "hard" or "soft"
+      # payload.host  # recipient server
+      # payload.message  # SMTP error message
+      # payload.subject  # email subject
+      # payload.email_id  # email identifier
+
+      # TODO: Add business logic
+
+      @webhook_event.processed!
+    end
+  end
+end

data/lib/generators/fuik/provider/templates/smtp2go/reject.rb.tt

@@ -0,0 +1,14 @@
+module <%= provider_module_name %>
+  class Reject < Base
+    def process!
+      # payload.rcpt  # email address that was rejected
+      # payload.message  # rejection reason
+      # payload.subject  # email subject
+      # payload.email_id  # email identifier
+
+      # TODO: Add business logic
+
+      @webhook_event.processed!
+    end
+  end
+end

data/lib/generators/fuik/provider/templates/smtp2go/spam.rb.tt

@@ -0,0 +1,13 @@
+module <%= provider_module_name %>
+  class Spam < Base
+    def process!
+      # payload.rcpt  # email address that complained
+      # payload.subject  # email subject
+      # payload.email_id  # email identifier
+
+      # TODO: Add business logic
+
+      @webhook_event.processed!
+    end
+  end
+end

data/lib/generators/fuik/provider/templates/smtp2go/unsubscribe.rb.tt

@@ -0,0 +1,13 @@
+module <%= provider_module_name %>
+  class Unsubscribe < Base
+    def process!
+      # payload.rcpt  # email address that unsubscribed
+      # payload.subject  # email subject
+      # payload.email_id  # email identifier
+
+      # TODO: Add business logic
+
+      @webhook_event.processed!
+    end
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: fuik
 version: !ruby/object:Gem::Version
-  version: 0.11.0
+  version: 0.12.0
 platform: ruby
 authors:
 - Rails Designer
@@ -35,6 +35,7 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/images/fuik/icons/46elks.jpg
 - app/assets/images/fuik/icons/adyen.jpg
 - app/assets/images/fuik/icons/anthropic.jpg
 - app/assets/images/fuik/icons/apple.jpg
@@ -47,6 +48,7 @@ files:
 - app/assets/images/fuik/icons/gitlab.jpg
 - app/assets/images/fuik/icons/google.jpg
 - app/assets/images/fuik/icons/gumroad.jpg
+- app/assets/images/fuik/icons/lettermint.jpg
 - app/assets/images/fuik/icons/linkedin.jpg
 - app/assets/images/fuik/icons/loops.jpg
 - app/assets/images/fuik/icons/mailgun.jpg
@@ -58,12 +60,14 @@ files:
 - app/assets/images/fuik/icons/resend.jpg
 - app/assets/images/fuik/icons/shopify.jpg
 - app/assets/images/fuik/icons/slack.jpg
+- app/assets/images/fuik/icons/smtp2go.jpg
 - app/assets/images/fuik/icons/stripe.jpg
 - app/assets/images/fuik/icons/telegram.jpg
 - app/assets/images/fuik/icons/twitter.jpg
 - app/assets/images/fuik/icons/userlist.jpg
 - app/assets/images/fuik/icons/webhook.svg
 - app/assets/images/fuik/icons/zoom.jpg
+- app/assets/javascript/attractivejs-0.12.0.min.js
 - app/assets/stylesheets/fuik/application.css
 - app/controllers/concerns/fuik/event_type.rb
 - app/controllers/fuik/application_controller.rb
@@ -73,10 +77,13 @@ files:
 - app/helpers/fuik/highlight_helper.rb
 - app/helpers/fuik/icon_helper.rb
 - app/jobs/fuik/application_job.rb
+- app/jobs/fuik/webhook_processing_job.rb
 - app/models/fuik/application_record.rb
 - app/models/fuik/event.rb
 - app/models/fuik/webhook_event.rb
+- app/models/fuik/webhook_event/filterable.rb
 - app/views/fuik/events/_copy_button.html.erb
+- app/views/fuik/events/_filters.html.erb
 - app/views/fuik/events/index.html.erb
 - app/views/fuik/events/show.html.erb
 - app/views/layouts/fuik/application.html.erb
@@ -96,6 +103,11 @@ files:
 - lib/generators/fuik/provider/templates/github/installation_created.rb.tt
 - lib/generators/fuik/provider/templates/github/push.rb.tt
 - lib/generators/fuik/provider/templates/github/star_created.rb.tt
+- lib/generators/fuik/provider/templates/lettermint/base.rb.tt
+- lib/generators/fuik/provider/templates/lettermint/message_failed.rb.tt
+- lib/generators/fuik/provider/templates/lettermint/message_hard_bounced.rb.tt
+- lib/generators/fuik/provider/templates/lettermint/message_soft_bounced.rb.tt
+- lib/generators/fuik/provider/templates/lettermint/message_suppressed.rb.tt
 - lib/generators/fuik/provider/templates/loops/base.rb.tt
 - lib/generators/fuik/provider/templates/loops/contact_unsubscribed.rb.tt
 - lib/generators/fuik/provider/templates/loops/email_hard_bounced.rb.tt
@@ -110,6 +122,11 @@ files:
 - lib/generators/fuik/provider/templates/resend/base.rb.tt
 - lib/generators/fuik/provider/templates/resend/email_bounced.rb.tt
 - lib/generators/fuik/provider/templates/resend/email_complained.rb.tt
+- lib/generators/fuik/provider/templates/smtp2go/base.rb.tt
+- lib/generators/fuik/provider/templates/smtp2go/bounce.rb.tt
+- lib/generators/fuik/provider/templates/smtp2go/reject.rb.tt
+- lib/generators/fuik/provider/templates/smtp2go/spam.rb.tt
+- lib/generators/fuik/provider/templates/smtp2go/unsubscribe.rb.tt
 - lib/generators/fuik/provider/templates/stripe/base.rb.tt
 - lib/generators/fuik/provider/templates/stripe/checkout_session_completed.rb.tt
 - lib/generators/fuik/provider/templates/stripe/customer_subscription_deleted.rb.tt
@@ -137,7 +154,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.9
+rubygems_version: 4.0.14
 specification_version: 4
 summary: A fish trap for webhooks
 test_files: []