kaui 4.0.24 → 4.0.26

data/app/views/kaui/account_timelines/show.html.erb

@@ -29,19 +29,25 @@
           <div class="form-group p-0 w-100 max-width-148">
             <label for="payment_filter" class="control-label">Payment</label>
             <div class="d-flex">
-              <%= select_tag 'payment_filter', options_for_select('<option value="all">ALL</option><option value="authorize">AUTHORIZE</option><option value="purchase">PURCHASE</option><option value="capture">CAPTURE</option><option value="credit">CREDIT</option><option value="refund">REFUND</option><option value="void">VOID</option><option value="chargeback">CHARGEBACK</option>'.html_safe), :class => 'form-control' %>
+              <%= select_tag 'payment_filter', options_for_select('<option value="all">ALL</option><option value="none">NONE</option><option value="authorize">AUTHORIZE</option><option value="purchase">PURCHASE</option><option value="capture">CAPTURE</option><option value="credit">CREDIT</option><option value="refund">REFUND</option><option value="void">VOID</option><option value="chargeback">CHARGEBACK</option>'.html_safe), :class => 'form-control' %>
             </div>
           </div>
           <div class="form-group p-0 w-100 max-width-148">
             <label for="subscription_filter" class="control-label">Subscription</label>
             <div class="d-flex">
-              <%= select_tag 'subscription_filter', options_for_select('<option value="all">ALL</option><option value="start_entitlement">START_ENTITLEMENT</option><option value="pause_entitlement">PAUSE_ENTITLEMENT</option><option value="resume_entitlement">RESUME_ENTITLEMENT</option><option value="stop_entitlement">STOP_ENTITLEMENT</option><option value="phase">PHASE</option><option value="change">CHANGE</option>'.html_safe), :class => 'form-control' %>
+              <%= select_tag 'subscription_filter', options_for_select('<option value="all">ALL</option><option value="none">NONE</option><option value="start_entitlement">START_ENTITLEMENT</option><option value="pause_entitlement">PAUSE_ENTITLEMENT</option><option value="resume_entitlement">RESUME_ENTITLEMENT</option><option value="stop_entitlement">STOP_ENTITLEMENT</option><option value="phase">PHASE</option><option value="change">CHANGE</option>'.html_safe), :class => 'form-control' %>
             </div>
           </div>
           <div class="form-group p-0 w-100 max-width-148">
             <label for="billing_filter" class="control-label">Billing</label>
             <div class="d-flex">
-              <%= select_tag 'billing_filter', options_for_select('<option value="all">ALL</option><option value="invoice">INVOICE</option><option value="start_billing">START_BILLING</option><option value="pause_billing">PAUSE_BILLING</option><option value="resume_billing">RESUME_BILLING</option><option value="stop_billing">STOP_BILLING</option>'.html_safe), :class => 'form-control' %>
+              <%= select_tag 'billing_filter', options_for_select('<option value="all">ALL</option><option value="none">NONE</option><option value="invoice">INVOICE</option><option value="start_billing">START_BILLING</option><option value="pause_billing">PAUSE_BILLING</option><option value="resume_billing">RESUME_BILLING</option><option value="stop_billing">STOP_BILLING</option>'.html_safe), :class => 'form-control' %>
+            </div>
+          </div>
+          <div class="form-group p-0 w-100 max-width-148">
+            <label for="blocking_state_filter" class="control-label">Blocking State</label>
+            <div class="d-flex">
+              <%= select_tag 'blocking_state_filter', options_for_select('<option value="all">ALL</option><option value="start_entitlement">START_ENTITLEMENT</option><option value="start_billing">START_BILLING</option><option value="service_state_change">SERVICE_STATE_CHANGE</option><option value="none">NONE</option>'.html_safe), :class => 'form-control' %>
             </div>
           </div>
           <div class="form-group p-0 d-flex align-self-end justify-content-end w-100">
@@ -49,7 +55,7 @@
           </div>
         </form>
 
-        <div>
+        <div id="timeline-entries">
           <% if @account.present? %>
             <% @invoices.each do |invoice_stub| %>
             <% if invoice_stub.bundle_keys.present? %>
@@ -60,7 +66,7 @@
             <% else %>
                 <% invoice = invoice_stub %>
             <% end %>
-            <div title="<%= bundles %>" data-event-type="INVOICE">
+            <div title="<%= bundles %>" data-event-type="INVOICE" data-event-category="invoice" data-timestamp="<%= timeline_sort_timestamp(invoice.target_date) %>">
               <div class="datetime-container">
                 <% if invoice.target_date.present? %>
                     <%= invoice.target_date %>
@@ -148,7 +154,7 @@
                 <% invoice = nil %>
             <% end %>
             <% payment.transactions.each do |transaction| %>
-              <div title="<%= bundles %>" data-event-type="<%= transaction.transaction_type %>">
+              <div title="<%= bundles %>" data-event-type="<%= transaction.transaction_type %>" data-event-category="payment" data-timestamp="<%= timeline_sort_timestamp(transaction.effective_date) %>">
                 <div class="datetime-container">
                   <% if transaction.effective_date.present? %>
                     <%= format_date(transaction.effective_date, @account.time_zone).html_safe %>
@@ -228,61 +234,179 @@
           <% @bundles.each do |bundle| %>
             <% bundle.subscriptions.each do |sub| %>
               <% sub.events.each do |event| %>
-                <% next if event.event_type == 'SERVICE_STATE_CHANGE' %>
-                <div title="<%= @bundle_names[bundle.external_key] %>" data-event-type="<%= event.event_type %>">
-                  <div class="datetime-container">
-                    <% if event.effective_date.present? %>
-                        <%= format_date(event.effective_date, @account.time_zone).html_safe %>
-                    <% else %>
-                        [unknown]
-                    <% end %>
-                  </div>
-                  <div class="account-timeline-card d-flex gap-3">
-                    <span class="icon-container">
-                      <%= image_tag("kaui/timeline/invoice.svg", width: 20, height: 20) %>
-                    </span>
-                    
-                    <div class="d-flex justify-content-start flex-column gap-3 w-100 row">
-                      <h3><%= event.event_type %></h3>
-                      <div class="w-100">
-                        <div class="row account-timeline-card-detail">
-                          <div class="col-sm-4">
-                            <div>
-                              <b>Details</b>
-                              <p>
-                                <%= event.phase %><span class="hide" title="<%= sub.product_category %>"></span>
-                              </p>
+                <% if event.event_type == 'SERVICE_STATE_CHANGE' %>
+                  <div title="<%= @bundle_names[bundle.external_key] %>" data-event-type="SERVICE_STATE_CHANGE" data-event-category="blocking_state" data-timestamp="<%= timeline_sort_timestamp(event.effective_date) %>">
+                    <div class="datetime-container">
+                      <% if event.effective_date.present? %>
+                          <%= format_date(event.effective_date, @account.time_zone).html_safe %>
+                      <% else %>
+                          [unknown]
+                      <% end %>
+                    </div>
+                    <div class="account-timeline-card d-flex gap-3">
+                      <span class="icon-container">
+                        <%= image_tag("kaui/timeline/block.svg", width: 20, height: 20) %>
+                      </span>
+
+                      <div class="d-flex justify-content-start flex-column gap-3 w-100 row">
+                        <h3>BLOCKING STATE</h3>
+                        <div class="w-100">
+                          <div class="row account-timeline-card-detail">
+                            <div class="col-sm-4">
+                              <div>
+                                <b>Service / State</b>
+                                <p>
+                                  <%= event.service_name %> / <%= event.service_state_name %>
+                                </p>
+                              </div>
                             </div>
-                            
-                          </div>
-                          <div class="col-sm-4">
-                            <div>
-                              <b>Bundle</b>
-                              <p>
-                                <%= truncate_uuid(@bundle_names[bundle.external_key]) %>
-                              </p>
+                            <div class="col-sm-4">
+                              <div>
+                                <b>Blocked</b>
+                                <p>
+                                  <%= 'Billing' if event.is_blocked_billing %>
+                                  <%= 'Entitlement' if event.is_blocked_entitlement %>
+                                </p>
+                              </div>
+                              <div>
+                                <b>Bundle</b>
+                                <p>
+                                  <%= truncate_uuid(@bundle_names[bundle.external_key]) %>
+                                </p>
+                              </div>
+                            </div>
+                            <div class="col-sm-4">
+                              <div>
+                                <b>Reason Code / Comments</b>
+                                <p>
+                                  <% if event.audit_logs.present? %>
+                                    <% event.audit_logs.each do |entry| %>
+                                      <%= Kaui::AuditLog.description(entry) %>
+                                    <% end %>
+                                  <% end %>
+                                </p>
+                              </div>
                             </div>
                           </div>
-                          <div class="col-sm-4">
-                           <div>
-                              <b>Reason Code / Comments</b>
-                              <p>
-                                <% if event.audit_logs.present? %>
-                                  <% event.audit_logs.each do |entry| %>
-                                    <%= Kaui::AuditLog.description(entry) %>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                <% else %>
+                  <% event_category = %w[START_BILLING PAUSE_BILLING RESUME_BILLING STOP_BILLING].include?(event.event_type) ? 'billing' : 'subscription' %>
+                  <div title="<%= @bundle_names[bundle.external_key] %>" data-event-type="<%= event.event_type %>" data-event-category="<%= event_category %>" data-timestamp="<%= timeline_sort_timestamp(event.effective_date) %>">
+                    <div class="datetime-container">
+                      <% if event.effective_date.present? %>
+                          <%= format_date(event.effective_date, @account.time_zone).html_safe %>
+                      <% else %>
+                          [unknown]
+                      <% end %>
+                    </div>
+                    <div class="account-timeline-card d-flex gap-3">
+                      <span class="icon-container">
+                        <%= image_tag("kaui/timeline/invoice.svg", width: 20, height: 20) %>
+                      </span>
+
+                      <div class="d-flex justify-content-start flex-column gap-3 w-100 row">
+                        <h3><%= event.event_type %></h3>
+                        <div class="w-100">
+                          <div class="row account-timeline-card-detail">
+                            <div class="col-sm-4">
+                              <div>
+                                <b>Details</b>
+                                <p>
+                                  <% if event.is_blocked_billing || event.is_blocked_entitlement %>
+                                    <%= event.service_name %> / <%= event.service_state_name %><br/>
                                   <% end %>
-                                <% end %> 
-                              </p>
+                                  <%= event.phase %><span class="hide" title="<%= sub.product_category %>"></span>
+                                </p>
+                              </div>
+
+                            </div>
+                            <div class="col-sm-4">
+                              <div>
+                                <b>Bundle</b>
+                                <p>
+                                  <%= truncate_uuid(@bundle_names[bundle.external_key]) %>
+                                </p>
+                              </div>
+                            </div>
+                            <div class="col-sm-4">
+                             <div>
+                                <b>Reason Code / Comments</b>
+                                <p>
+                                  <% if event.audit_logs.present? %>
+                                    <% event.audit_logs.each do |entry| %>
+                                      <%= Kaui::AuditLog.description(entry) %>
+                                    <% end %>
+                                  <% end %>
+                                </p>
+                              </div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
+                <% end %>
               <% end %>
             <% end %>
           <% end %>
+
+          <% (@account_blocking_states || []).each do |blocking_state| %>
+            <div data-event-type="SERVICE_STATE_CHANGE" data-event-category="blocking_state" data-timestamp="<%= timeline_sort_timestamp(blocking_state.effective_date) %>">
+              <div class="datetime-container">
+                <% if blocking_state.effective_date.present? %>
+                    <%= format_date(blocking_state.effective_date, @account.time_zone).html_safe %>
+                <% else %>
+                    [unknown]
+                <% end %>
+              </div>
+              <div class="account-timeline-card d-flex gap-3">
+                <span class="icon-container">
+                  <%= image_tag("kaui/timeline/block.svg", width: 20, height: 20) %>
+                </span>
+
+                <div class="d-flex justify-content-start flex-column gap-3 w-100 row">
+                  <h3>BLOCKING STATE</h3>
+                  <div class="w-100">
+                    <div class="row account-timeline-card-detail">
+                      <div class="col-sm-4">
+                        <div>
+                          <b>Service / State</b>
+                          <p>
+                            <%= blocking_state.service %> / <%= blocking_state.state_name %>
+                          </p>
+                        </div>
+                      </div>
+                      <div class="col-sm-4">
+                        <div>
+                          <b>Blocked</b>
+                          <p>
+                            <%= 'Change' if blocking_state.is_block_change %>
+                            <%= 'Billing' if blocking_state.is_block_billing %>
+                            <%= 'Entitlement' if blocking_state.is_block_entitlement %>
+                          </p>
+                        </div>
+                      </div>
+                      <div class="col-sm-4">
+                        <div>
+                          <b>Reason Code / Comments</b>
+                          <p>
+                            <% if blocking_state.audit_logs.present? %>
+                              <% blocking_state.audit_logs.each do |entry| %>
+                                <%= Kaui::AuditLog.description(entry) %>
+                              <% end %>
+                            <% end %>
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          <% end %>
         <% end %>
         </div>
       </div>
@@ -298,7 +422,7 @@
     }
 
     var eventsOrder = ["START_ENTITLEMENT", "START_BILLING", "PAUSE_ENTITLEMENT", "PAUSE_BILLING", "RESUME_ENTITLEMENT",
-    "RESUME_BILLING", "PHASE", "CHANGE", "STOP_ENTITLEMENT", "STOP_BILLING", "INVOICE", "AUTHORIZE", "PURCHASE", "CAPTURE",
+    "RESUME_BILLING", "PHASE", "CHANGE", "STOP_ENTITLEMENT", "STOP_BILLING", "SERVICE_STATE_CHANGE", "INVOICE", "AUTHORIZE", "PURCHASE", "CAPTURE",
     "CREDIT", "REFUND", "VOID", "CHARGEBACK"];
 
     jQuery.fn.dataTableExt.oSort['timeline-event-asc'] = function(e1,e2) {
@@ -352,59 +476,95 @@
       });
     }
 
+    function sortTimelineEntries() {
+      var $container = $('#timeline-entries');
+      var $entries = $container.children('[data-event-type]');
+
+      var orderedEntries = $entries.get().sort(function (a, b) {
+        var x = parseInt($(a).attr('data-timestamp'), 10);
+        var y = parseInt($(b).attr('data-timestamp'), 10);
+        x = isNaN(x) ? -Infinity : x;
+        y = isNaN(y) ? -Infinity : y;
+        if (y !== x) {
+          return y - x;
+        }
+        var typeX = eventsOrder.indexOf($(a).attr('data-event-type'));
+        var typeY = eventsOrder.indexOf($(b).attr('data-event-type'));
+        typeX = typeX === -1 ? Infinity : typeX;
+        typeY = typeY === -1 ? Infinity : typeY;
+        return typeX - typeY;
+      });
+
+      $.each(orderedEntries, function (_, entry) {
+        $container.append(entry);
+      });
+
+      filterTimeline();
+    }
+
     function filterTimeline() {
       var selectedBundle = $("#bundles").val();
-      var selectedPayment = $('#payment_filter').val().toUpperCase();
-      var selectedSubscription = $('#subscription_filter').val().toUpperCase();
-      var selectedBilling = $('#billing_filter').val().toUpperCase();
       var searchQuery = $('#search').val().toLowerCase();
-      
-      // Show all cards initially
-      $('.account-timeline-card').parent().show();
-      
-      // Apply all filters to each card
+      var blockingStateFilter = $('#blocking_state_filter').val().toUpperCase();
+
+      var categoryFilters = {
+        payment:      { value: $('#payment_filter').val().toUpperCase(),      categories: ['payment'] },
+        subscription: { value: $('#subscription_filter').val().toUpperCase(), categories: ['subscription'] },
+        billing:      { value: $('#billing_filter').val().toUpperCase(),      categories: ['billing', 'invoice'] }
+      };
+
       $('.account-timeline-card').parent().each(function() {
         var $card = $(this);
-        var eventType = $card.data('event-type');
+        var eventType = ($card.attr('data-event-type') || '').toUpperCase();
+        var eventCategory = $card.attr('data-event-category') || '';
         var bundleTitle = $card.attr('title');
         var cardText = $card.text().toLowerCase();
-        
+
         var shouldShow = true;
-        
+
         if (selectedBundle && selectedBundle !== '' && selectedBundle !== 'All') {
           if (!bundleTitle || bundleTitle.indexOf(selectedBundle) === -1) {
             shouldShow = false;
           }
         }
-        
-        // Filter by payment events if not "ALL"
-        if (selectedPayment !== "ALL" && shouldShow) {
-          if (!eventType || eventType !== selectedPayment) {
-            shouldShow = false;
-          }
-        }
-        
-        // Filter by subscription events if not "ALL"
-        if (selectedSubscription !== "ALL" && shouldShow) {
-          if (!eventType || eventType !== selectedSubscription) {
-            shouldShow = false;
-          }
-        }
-        
-        // Filter by billing events if not "ALL"
-        if (selectedBilling !== "ALL" && shouldShow) {
-          if (!eventType || eventType !== selectedBilling) {
-            shouldShow = false;
+
+        if (shouldShow) {
+          if (blockingStateFilter === 'NONE') {
+            if (eventCategory === 'blocking_state') {
+              shouldShow = false;
+            }
+          } else if (blockingStateFilter !== 'ALL') {
+            // Specific type selected: show only events matching that exact type
+            if (eventType !== blockingStateFilter) {
+              shouldShow = false;
+            }
+          } else {
+            // Blocking state filter is ALL — apply per-category filters
+            var governingFilter = null;
+            $.each(categoryFilters, function(_, f) {
+              if (f.categories.indexOf(eventCategory) !== -1) {
+                governingFilter = f;
+              }
+            });
+            if (governingFilter) {
+              if (governingFilter.value === 'NONE') {
+                shouldShow = false;
+              } else if (governingFilter.value !== 'ALL') {
+                if (eventType !== governingFilter.value) {
+                  shouldShow = false;
+                }
+              }
+            }
           }
         }
-        
+
         // Apply search filter if query exists
         if (searchQuery && shouldShow) {
           if (cardText.indexOf(searchQuery) === -1) {
             shouldShow = false;
           }
         }
-        
+
         // Show or hide the card based on all filters
         if (shouldShow) {
           $card.show();
@@ -416,17 +576,15 @@
 
     $(document).ready(function() {
       disableLinks();
-      
+
       // Initialize filters with debounce for search
       var searchTimeout;
-      $("#bundles, #payment_filter, #subscription_filter, #billing_filter").on('change', filterTimeline);
+      $("#bundles, #payment_filter, #subscription_filter, #billing_filter, #blocking_state_filter").on('change', filterTimeline);
       $('#search').on('keyup', function() {
         clearTimeout(searchTimeout);
         searchTimeout = setTimeout(filterTimeline, 300);
       });
-      
 
-      
       // Clear all filters button
       $('#clear-all-filters').click(function() {
         $('#search').val('');
@@ -434,10 +592,11 @@
         $('#payment_filter').val('all');
         $('#subscription_filter').val('all');
         $('#billing_filter').val('all');
+        $('#blocking_state_filter').val('all');
         filterTimeline();
       });
-      
-      // Apply initial filters if any are selected
-      filterTimeline();
+
+      // Sort by date first, event type second, then apply filters
+      sortTimelineEntries();
     });
 <% end %>

data/app/views/kaui/accounts/_billing_details.html.erb

@@ -3,7 +3,7 @@
     <div class="billing-details-header">
       <h2>Billing Information</h2>
       <span>
-        <% if can?(:trigger, Kaui::Payment) || can?(:credit, Kaui::Account) || can?(:charge, Kaui::Account) %>
+        <% if can?(:trigger, Kaui::Payment) || can?(:credit, Kaui::Account) || can?(:charge, Kaui::Account) || can?(:update, Kaui::Account) %>
           <div class="tag-bar tag-bar-breathe">
             <div class="toggler">
               <div class="toggle">
@@ -59,6 +59,18 @@
                     <% end %>
                   <% end %>
 
+                  <% if can? :update, Kaui::Account %>
+                    <%= link_to kaui_engine.block_account_path(@account.account_id) do %>
+                      <%= render "kaui/components/button/button", {
+                            label: "Create Blocking State",
+                            icon: "kaui/plus.svg",
+                            variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                            type: "button",
+                            html_class: "kaui-dropdown custom-hover",
+                          } %>
+                    <% end %>
+                  <% end %>
+
                 </div>
               </div>
             </div>

data/app/views/kaui/accounts/_billing_info.html.erb

@@ -6,7 +6,7 @@
 
     <div class="info-wrapper">
 
-      <% if can?(:trigger, Kaui::Payment) || can?(:credit, Kaui::Account) || can?(:charge, Kaui::Account) %>
+      <% if can?(:trigger, Kaui::Payment) || can?(:credit, Kaui::Account) || can?(:charge, Kaui::Account) || can?(:update, Kaui::Account) %>
           <div class="tag-bar tag-bar-breathe">
             <div class="toggler">
               <div class="toggle">
@@ -29,6 +29,10 @@
                       <%= link_to '<i class="fa fa-plus-square"></i>&nbsp;Create deposit'.html_safe,
                                   deposit_engine.collection_index_path(:account_id => @account.account_id, :currency => @account.currency) %>
                   <% end %>
+                  <% if can? :update, Kaui::Account %>
+                      <%= link_to '<i class="fa fa-plus-square"></i>&nbsp;Create blocking state'.html_safe,
+                                  kaui_engine.block_account_path(@account.account_id) %>
+                  <% end %>
                 </div>
               </div>
             </div>

data/app/views/kaui/accounts/block.html.erb

@@ -0,0 +1,16 @@
+<div class="register kaui-subscription-new">
+  <div class="d-flex justify-content-center flex-wrap" style="gap: 2rem; max-width: 60.5rem; margin: 0 auto;">
+    <h5 class="add-account-title border-bottom pb-3 mb-3" style="flex: 0 0 100%;">
+        <span class="icon-container">
+            <%= image_tag "kaui/timeline/block.svg", width: 20, height: 20 %>
+        </span>
+        Create blocking state
+    </h5>
+    <div style="max-width: 37.5rem; width: 100%;">
+        <%= form_tag do_block_account_path(:account_id => @account.account_id), :class => 'form-horizontal', :method => :put do %>
+          <%= render "kaui/components/blocking_state_form/fields", :applies_to_type => 'Account', :applies_to_id => @account.account_id %>
+        <% end %>
+    </div>
+    <%= render "kaui/components/blocking_state_form/about_panel" %>
+  </div>
+</div>

data/app/views/kaui/admin_allowed_users/_form.html.erb

@@ -1,7 +1,11 @@
 <%= form_for @allowed_user, :url => @allowed_user.persisted? ? admin_allowed_user_path(@allowed_user.id) : admin_allowed_users_path, :method => @allowed_user.persisted? ? :put : :post, :html => {:class => 'form-horizontal'} do |f| %>
     <input type="hidden" id="killbillManaged" value="<%= @is_killbill_managed %>" />
     <div class='form-group d-flex pb-3'>
-      <%= f.label ' ', :class => 'col-sm-3 control-label' %>
+      <%# Not associated with a real attribute - use label_tag instead of f.label, which under
+          Rails 7.2 raises NoMethodError (undefined method `humanize' for nil) for a blank name,
+          since ActiveModel::Translation#human_attribute_name only handles a blank *namespaced*
+          attribute (e.g. "foo."), not a plain blank string. %>
+      <%= label_tag nil, ' ', :class => 'col-sm-3 control-label' %>
       <div class="col-sm-9">
         <div class="checkbox">
           <label for="external" class="d-flex align-items-center gap-2 control-label">

data/app/views/kaui/bundles/block.html.erb

@@ -0,0 +1,16 @@
+<div class="register kaui-subscription-new">
+  <div class="d-flex justify-content-center flex-wrap" style="gap: 2rem; max-width: 60.5rem; margin: 0 auto;">
+    <h5 class="add-account-title border-bottom pb-3 mb-3" style="flex: 0 0 100%;">
+        <span class="icon-container">
+            <%= image_tag "kaui/timeline/block.svg", width: 20, height: 20 %>
+        </span>
+        Create blocking state
+    </h5>
+    <div style="max-width: 37.5rem; width: 100%;">
+        <%= form_tag do_block_bundle_path(:id => @bundle.bundle_id, :account_id => @bundle.account_id), :class => 'form-horizontal', :method => :put do %>
+          <%= render "kaui/components/blocking_state_form/fields", :applies_to_type => 'Bundle', :applies_to_id => @bundle.bundle_id %>
+        <% end %>
+    </div>
+    <%= render "kaui/components/blocking_state_form/about_panel" %>
+  </div>
+</div>

data/app/views/kaui/components/blocking_state_form/_about_panel.html.erb

@@ -0,0 +1,9 @@
+<div class="blocking-state-about-panel">
+  <div class="d-flex align-items-center gap-2 mb-2">
+    <div class="icon-container">
+      <%= image_tag "kaui/blocking-states/shield-white.svg", width: 20, height: 20 %>
+    </div>
+    <h6 class="mb-0"><%= t('blocking_state_about_panel.title') %></h6>
+  </div>
+  <p><%= t('blocking_state_about_panel.description') %></p>
+</div>

data/app/views/kaui/components/blocking_state_form/_fields.html.erb

@@ -0,0 +1,79 @@
+<div class="form-group d-flex pb-3">
+  <label class="col-sm-3 control-label">Applies to</label>
+  <div class="col-sm-9">
+    <p class="form-control-plaintext mb-0"><%= applies_to_type %> &mdash; <%= applies_to_id %></p>
+  </div>
+</div>
+<div class="form-group d-flex pb-3">
+  <%= label_tag :state_name, 'State', :class => 'col-sm-3 control-label' %>
+  <div class="col-sm-9">
+    <%= text_field_tag :state_name, nil, :class => 'form-control', :placeholder => 'e.g., OVERDUE_ENFORCEMENT' %>
+    <small class="form-text text-muted">The name of the state being applied, e.g. a step in an overdue enforcement process.</small>
+  </div>
+</div>
+<div class="form-group d-flex pb-3">
+  <%= label_tag :service, 'Service', :class => 'col-sm-3 control-label' %>
+  <div class="col-sm-9">
+    <%= text_field_tag :service, nil, :class => 'form-control' %>
+    <small class="form-text text-muted">The service responsible for setting and enforcing this blocking state.</small>
+  </div>
+</div>
+<div class="form-group d-flex pb-3">
+  <label class="col-sm-3 control-label">Block</label>
+  <div class="col-sm-9">
+    <div class="d-flex gap-3">
+      <div class="form-check">
+        <%= check_box_tag :is_block_change, '1', false, :class => 'form-check-input' %>
+        <%= label_tag :is_block_change, 'Change', :class => 'form-check-label' %>
+      </div>
+      <div class="form-check">
+        <%= check_box_tag :is_block_entitlement, '1', false, :class => 'form-check-input' %>
+        <%= label_tag :is_block_entitlement, 'Entitlement', :class => 'form-check-label' %>
+      </div>
+      <div class="form-check">
+        <%= check_box_tag :is_block_billing, '1', false, :class => 'form-check-input' %>
+        <%= label_tag :is_block_billing, 'Billing', :class => 'form-check-label' %>
+      </div>
+    </div>
+    <small class="form-text text-muted">Change blocks plan/subscription changes, Entitlement blocks usage of the service, and Billing blocks invoicing.</small>
+  </div>
+</div>
+<div class="form-group d-flex pb-3" id="form_effective_from_date">
+  <%= label_tag :requested_date, 'Effective date', :class => 'col-sm-3 control-label' %>
+  <div class="col-sm-9">
+    <div class="custom-date-input-wrapper kaui-button custom-hover" onclick="$(this).find('input').focus();">
+      <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14.9167 12.5V18.3333M17.8333 15.4167H12" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M14.0833 1.66675V5.00008M6.58325 1.66675V5.00008" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M17.8333 10.8333V4.99992C17.8333 4.07944 17.0871 3.33325 16.1666 3.33325H4.49992C3.57944 3.33325 2.83325 4.07944 2.83325 4.99992V16.6666C2.83325 17.5871 3.57944 18.3333 4.49992 18.3333H10.3333" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M2.83325 8.33325H17.8333" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <input class="form-control" name="requested_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true">
+    </div>
+    <small class="form-text text-muted">Defaults to now if left blank.</small>
+  </div>
+</div>
+<div class="form-group d-flex pb-3 border-bottom mb-3">
+  <%= label_tag :comment, 'Comment', :class => 'col-sm-3 control-label' %>
+  <div class="col-sm-9">
+    <%= text_area_tag :comment, nil, :rows => 3, :class => 'form-control' %>
+  </div>
+</div>
+<div class="form-group d-flex justify-content-end pb-3">
+  <%= render "kaui/components/button/button", {
+      label: 'Close',
+      variant: "outline-secondary d-inline-flex align-items-center gap-1",
+      type: "button",
+      html_class: "kaui-button custom-hover mx-2",
+      html_options: {
+      id: "closeButton",
+      onclick: "window.history.back();"
+      }
+  } %>
+  <%= render "kaui/components/button/button", {
+      label: 'Submit',
+      variant: "outline-secondary d-inline-flex align-items-center gap-1",
+      type: "submit",
+      html_class: "kaui-dropdown custom-hover"
+  } %>
+</div>