kaui 3.0.9 → 4.0.0

data/app/assets/stylesheets/kaui/tooltip.css

@@ -1,16 +1,20 @@
 .tooltip-arrow,
 .kb-tooltip + .tooltip > .tooltip-inner {
-  background-color: #C0E0E3; }
+  background-color: #c0e0e3;
+}
 
 .kb-tooltip + .tooltip.top > .tooltip-arrow {
   background-color: #fff;
-  border-top: #C0E0E3; }
+  border-top: #c0e0e3;
+}
 
-.kb-tooltip + .bs-tooltip-auto[x-placement^=top] .arrow::before,
+.kb-tooltip + .bs-tooltip-auto[x-placement^="top"] .arrow::before,
 .kb-tooltip + .bs-tooltip-top .arrow::before {
-  border-bottom-color: #C0E0E3; }
+  border-bottom-color: #c0e0e3;
+}
 
 .tooltip .tooltip-arrow {
-  border-top: 5px solid #C0E0E3 !important; }
+  border-top: 0.3125rem solid #c0e0e3 !important;
+}
 
 /*# sourceMappingURL=tooltip.css.map */

data/app/assets/stylesheets/kaui/wallets.css

@@ -0,0 +1,121 @@
+.wallets-index .wallets {
+  max-width: 80rem;
+  width: 100%;
+}
+
+.wallets-index .wallets .wallets-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  padding: 0;
+  border-bottom: 0.0625rem solid #e9eaeb;
+}
+
+.wallets-index .wallets-table th,
+.wallets-index .wallets-table td {
+  white-space: nowrap;
+  text-align: left;
+}
+
+.wallets-index .wallets .wallets-header h2 {
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: #414651;
+  margin-bottom: 1.25rem;
+}
+
+.wallets-index .wallets .wallets-table {
+  overflow-x: auto;
+  min-width: 100%;
+}
+
+.wallets-index .wallets .wallets-table th {
+  padding: 0.375rem 0.75rem !important;
+  font-weight: 500 !important;
+  font-size: 0.75rem !important;
+  line-height: 1.125rem !important;
+  letter-spacing: 0 !important;
+  color: #717680 !important;
+  text-transform: capitalize !important;
+  position: relative !important;
+}
+
+.wallets-index .wallets .wallets-table .header-content {
+  display: flex;
+  align-items: center;
+}
+
+.wallets-index .wallets .wallets-table td {
+  font-weight: 500 !important;
+  font-size: 0.875rem !important;
+  line-height: 1.125rem !important;
+  text-align: start;
+  color: #535862 !important;
+}
+
+.wallets-index .wallets .wallets-table table.dataTable {
+  overflow: auto !important;
+}
+
+#wallets-table_wrapper .dataTables_empty {
+  text-align: center;
+}
+
+.add-new-wallet-details .add-new-wallet-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: 0;
+  color: #1b1c1e;
+  padding: 1.5rem 0;
+}
+
+.add-new-wallet-details .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #d5d7da;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.add-new-wallet-details .icon-container img {
+  width: 1rem;
+  height: 1rem;
+}
+
+.add-new-wallet-details .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.add-new-wallet-details .form-group select.form-control {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L8 10L12 6" stroke="%23A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 1rem 1rem;
+  padding-right: 1.875rem;
+}
+
+.add-new-wallet-details select.form-control:focus {
+  box-shadow: none;
+  outline: none;
+  border-color: #1570ef;
+}
+
+.add-new-wallet-details .form-group .form-control {
+  margin-right: 0.25rem;
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}

data/app/controllers/kaui/accounts_controller.rb

@@ -5,8 +5,8 @@ module Kaui
   class AccountsController < Kaui::EngineController
     def index
       @search_query = params[:q]
-      @advance_search_query = request.query_string
-      if params[:fast] == '1' && !@search_query.blank?
+      @advance_search_query = @search_query || request.query_string
+      if @search_query.present?
         account = Kaui::Account.list_or_search(@search_query, -1, 1, options_for_klient).first
         if account.nil?
           flash[:error] = "No account matches \"#{@search_query}\""
@@ -18,6 +18,7 @@ module Kaui
       end
       @search_fields = Kaui::Account::ADVANCED_SEARCH_COLUMNS.map { |attr| [attr, attr.split('_').join(' ').capitalize] }
       @dropdown_default = default_columns(Kaui.account_search_columns.call[2], Kaui::Account::SENSIVITE_DATA_FIELDS)
+      @visible_columns = @dropdown_default
 
       @ordering = params[:ordering] || (@search_query.blank? ? 'desc' : 'asc')
       @offset = params[:offset] || 0

data/app/controllers/kaui/admin_tenants_controller.rb

@@ -78,6 +78,13 @@ module Kaui
 
       configure_tenant_if_nil(@tenant)
 
+      # Fetch clock data for the clock component
+      begin
+        @clock = Kaui::Admin.get_clock(nil, options_for_klient)
+      rescue KillBillClient::API::NotFound
+        flash[:error] = 'Failed to get current KB clock: Kill Bill server must be started with system property org.killbill.server.test.mode=true'
+      end
+
       options = tenant_options_for_client
       options[:api_key] = @tenant.api_key
       options[:api_secret] = @tenant.api_secret
@@ -122,6 +129,11 @@ module Kaui
 
       # When reloading page from the view, it sends the last tab that was active
       @active_tab = params[:active_tab] || 'CatalogShow'
+
+      respond_to do |format|
+        format.html
+        format.js
+      end
     end
 
     def upload_catalog
@@ -472,6 +484,27 @@ module Kaui
       end
     end
 
+    def set_clock
+      @tenant = safely_find_tenant_by_id(params[:id])
+
+      if params[:commit] == 'Submit'
+        date = Date.parse(params[:new_date]).strftime('%Y-%m-%d')
+        msg = I18n.translate('flashes.notices.clock_updated_successfully', new_date: date)
+      else
+        date = nil
+        msg = I18n.translate('flashes.notices.clock_reset_successfully')
+      end
+
+      begin
+        Kaui::Admin.set_clock(date, nil, options_for_klient)
+      rescue KillBillClient::API::NotFound
+        flash[:error] = 'Failed to set current KB clock: Kill Bill server must be started with system property org.killbill.server.test.mode=true'
+        redirect_to admin_tenant_path(@tenant.id) and return
+      end
+
+      redirect_to admin_tenant_path(@tenant.id), notice: msg
+    end
+
     def switch_tenant
       tenant = Kaui::Tenant.find_by_kb_tenant_id(params.require(:kb_tenant_id))
 

data/app/controllers/kaui/custom_fields_controller.rb

@@ -4,7 +4,7 @@ module Kaui
   class CustomFieldsController < Kaui::EngineController
     def index
       @search_query = params[:q]
-
+      @advance_search_query = params[:q] || request.query_string
       @ordering = params[:ordering] || (@search_query.blank? ? 'desc' : 'asc')
       @offset = params[:offset] || 0
       @limit = params[:limit] || 50

data/app/controllers/kaui/engine_controller.rb

@@ -12,11 +12,10 @@ class Kaui::EngineController < ApplicationController
   # Common options for the Kill Bill client
   def options_for_klient(options = {})
     user_tenant_options = Kaui.current_tenant_user_options(current_user, session)
-    user_tenant_options.merge(options)
+    user_tenant_options.merge!(options)
     # Pass the X-Request-Id seen by Rails to Kill Bill
     # Note that this means that subsequent requests issued by a single action will share the same X-Request-Id in Kill Bill
     user_tenant_options[:request_id] ||= request.request_id
-    user_tenant_options[:jwt_token] ||= session[:jwt_token]
     user_tenant_options
   end
 

data/app/controllers/kaui/engine_controller_util.rb

@@ -69,13 +69,11 @@ module Kaui
       ordering_column = (ordering[:column] || 0).to_i
       ordering_column = params[:colum_order][ordering_column].to_i if params[:colum_order].present?
       ordering_dir = ordering[:dir] || 'asc'
-      unless search_key.nil?
-        pages.sort! do |a, b|
-          a = data_extractor.call(a, ordering_column)
-          b = data_extractor.call(b, ordering_column)
-          sort = a <=> b
-          sort.nil? ? -1 : sort
-        end
+      pages.sort! do |a, b|
+        a = data_extractor.call(a, ordering_column)
+        b = data_extractor.call(b, ordering_column)
+        sort = a <=> b
+        sort.nil? ? -1 : sort
       end
       pages.reverse! if (ordering_dir == 'desc' && limit >= 0) || (ordering_dir == 'asc' && limit.negative?)
 

data/app/controllers/kaui/home_controller.rb

@@ -11,19 +11,26 @@ module Kaui
 
     def index
       @search_query = params[:q]
+      @max_records = {}
+      %w[account payment invoice].each do |type|
+        model = "Kaui::#{type.capitalize}".constantize
+        @max_records[type.to_sym] = model.list_or_search(nil, 0, 0, options_for_klient).pagination_max_nb_records || 0
+      end
     end
 
     def search
-      object_type, search_query, search_by, fast = parse_query(params[:q])
-
-      return if object_type.nil?
-
+      object_type, search_query = splitting_new_search(params[:q])
+      object_type = object_type.tr(' ', '_').downcase
       cached_options_for_klient = options_for_klient
-      send("#{object_type}_search", search_query, search_by, fast, cached_options_for_klient)
+      send("#{object_type}_search", search_query, nil, 0, cached_options_for_klient)
     end
 
     private
 
+    def splitting_new_search(search_query)
+      (search_query || '').split(':').map(&:strip)
+    end
+
     def account_search(search_query, search_by = nil, fast = 0, options = {})
       if search_by == 'ID'
         begin
@@ -46,7 +53,7 @@ module Kaui
         elsif true?(fast)
           redirect_to account_path(account.account_id) and return
         else
-          redirect_to accounts_path(q: search_query, fast:) and return
+          redirect_to accounts_path(q: search_query) and return
         end
       end
     end
@@ -74,14 +81,14 @@ module Kaui
         if invoice.blank?
           begin
             invoice = Kaui::Invoice.find_by_invoice_item_id(search_query, false, 'NONE', options)
-            redirect_to account_invoice_path(invoice.account_id, invoice.invoice_id) and return
+            redirect_to account_invoices_path(invoice.account_id, q: search_query) and return
           rescue KillBillClient::API::NotFound => _e
             search_error("No invoice matches \"#{search_query}\"")
           end
         elsif true?(fast)
           redirect_to account_invoice_path(invoice.account_id, invoice.invoice_id) and return
         else
-          redirect_to account_invoices_path(account_id: invoice.account_id, q: search_query, fast:) and return
+          redirect_to account_invoices_path(account_id: invoice.account_id, q: search_query) and return
         end
       end
     end
@@ -108,7 +115,7 @@ module Kaui
         elsif true?(fast)
           redirect_to account_payment_path(payment.account_id, payment.payment_id) and return
         else
-          redirect_to account_payments_path(account_id: payment.account_id, q: search_query, fast:) and return
+          redirect_to account_payments_path(account_id: payment.account_id, q: search_query) and return
         end
       end
     end
@@ -169,13 +176,13 @@ module Kaui
       end
     end
 
-    def custom_field_search(search_query, search_by = nil, fast = 0, options = {})
+    def custom_field_search(search_query, search_by = nil, _fast = 0, options = {})
       if search_by.blank? || search_by == 'ID'
         custom_field = Kaui::CustomField.list_or_search(search_query, 0, 1, options)
         if custom_field.blank?
           search_error("No custom field matches \"#{search_query}\"")
         else
-          redirect_to custom_fields_path(q: search_query, fast:)
+          redirect_to custom_fields_path(q: search_query)
         end
       else
         unsupported_search_field('CUSTOM FIELD', search_by)
@@ -208,24 +215,24 @@ module Kaui
       end
     end
 
-    def tag_search(search_query, search_by = nil, fast = 0, options = {})
+    def tag_search(search_query, search_by = nil, _fast = 0, options = {})
       if search_by.blank? || search_by == 'ID'
         tag = Kaui::Tag.list_or_search(search_query, 0, 1, options)
         if tag.blank?
           search_error("No tag matches \"#{search_query}\"")
         else
-          redirect_to tags_path(q: search_query, fast:)
+          redirect_to tags_path(q: search_query)
         end
       else
         unsupported_search_field('TAG', search_by)
       end
     end
 
-    def tag_definition_search(search_query, search_by = nil, fast = 0, options = {})
+    def tag_definition_search(search_query, search_by = nil, _fast = 0, options = {})
       if search_by == 'ID'
         begin
           Kaui::TagDefinition.find_by_id(search_query, 'NONE', options)
-          redirect_to tag_definitions_path(q: search_query, fast:)
+          redirect_to tag_definitions_path(q: search_query)
         rescue KillBillClient::API::NotFound => _e
           search_error("No tag definition matches \"#{search_query}\"")
         end
@@ -236,12 +243,12 @@ module Kaui
         if tag_definition.blank?
           begin
             Kaui::TagDefinition.find_by_id(search_query, 'NONE', options)
-            redirect_to tag_definitions_path(q: search_query, fast:) and return
+            redirect_to tag_definitions_path(q: search_query) and return
           rescue KillBillClient::API::NotFound => _e
             search_error("No tag definition matches \"#{search_query}\"")
           end
         else
-          redirect_to tag_definitions_path(q: search_query, fast:)
+          redirect_to tag_definitions_path(q: search_query)
         end
       end
     end

data/app/controllers/kaui/invoices_controller.rb

@@ -5,7 +5,7 @@ module Kaui
   class InvoicesController < Kaui::EngineController
     def index
       @search_query = params[:account_id]
-      @advance_search_query = request.query_string
+      @advance_search_query = params[:q] || request.query_string
       @ordering = params[:ordering] || (@search_query.blank? ? 'desc' : 'asc')
       @offset = params[:offset] || 0
       @limit = params[:limit] || 50
@@ -63,20 +63,9 @@ module Kaui
         end
       end
 
-      account_id = (params[:search] || {})[:value]
-      data_extractor = if account_id.blank?
-                         lambda do |invoice, column|
-                           [
-                             invoice.invoice_number.to_i,
-                             invoice.invoice_date
-                           ][column]
-                         end
-                       else
-                         lambda do |invoice, column|
-                           Kaui.account_invoices_columns.call(invoice, view_context)[2][column]
-                         end
-                       end
-
+      data_extractor = lambda do |invoice, column|
+        Kaui.account_invoices_columns.call(invoice, view_context)[2][column]
+      end
       formatter = lambda do |invoice|
         Kaui.account_invoices_columns.call(invoice, view_context)[1]
       end

data/app/controllers/kaui/payments_controller.rb

@@ -6,7 +6,7 @@ module Kaui
   class PaymentsController < Kaui::EngineController
     def index
       @search_query = params[:q] || params[:account_id]
-      @advance_search_query = request.query_string
+      @advance_search_query = params[:q] || request.query_string
       @ordering = params[:ordering] || (@search_query.blank? ? 'desc' : 'asc')
       @offset = params[:offset] || 0
       @limit = params[:limit] || 50

data/app/controllers/kaui/sessions_controller.rb

@@ -28,6 +28,7 @@ module Kaui
     end
 
     def after_sign_out_path_for(_resource)
+      cookies.delete(:jwt_token)
       kaui_path
     end
 

data/app/controllers/kaui/tag_definitions_controller.rb

@@ -34,6 +34,7 @@ module Kaui
         redirect_to kaui_engine.tag_definitions_path, notice: 'Tag definition successfully deleted'
       rescue StandardError => e
         flash.now[:error] = "Error while deleting tag definition: #{as_string(e)}"
+        @tag_definitions = Kaui::TagDefinition.all('NONE', options_for_klient)
         render action: :index
       end
     end

data/app/helpers/kaui/account_helper.rb

@@ -26,6 +26,19 @@ module Kaui
       false
     end
 
+    def kpm_plugin_installed
+      nodes_info = KillBillClient::Model::NodesInfo.nodes_info(Kaui.current_tenant_user_options(current_user, session)) || []
+      return false if nodes_info.empty?
+
+      nodes_info.each do |node_info|
+        next if (node_info.plugins_info || []).empty?
+
+        node_info.plugins_info.each do |plugin_info|
+          return true if plugin_info.plugin_name == 'org.kill-bill.billing.killbill-platform-osgi-bundles-kpm'
+        end
+      end
+    end
+
     def account_closed?
       return false if @account.nil?
 

data/app/helpers/kaui/plugin_helper.rb

@@ -2,10 +2,37 @@
 
 module Kaui
   module PluginHelper
+    CONFIGABLE_PLUGINS = %w[analytics avatax email-notifications deposit payment-test aviate].freeze
+
     def plugin_repository
       installed_plugins
     end
 
+    def installed_plugin_names
+      plugins = []
+      nodes_info = KillBillClient::Model::NodesInfo.nodes_info(Kaui.current_tenant_user_options(current_user, session)) || []
+      plugins_info = nodes_info.empty? ? [] : (nodes_info.first.plugins_info || [])
+      plugins_info.each do |plugin|
+        next unless plugin.state == 'RUNNING'
+
+        plugin_name = plugin.plugin_name
+        plugin_key = plugin_name.gsub('-plugin', '')
+
+        # Handle special cases
+        plugin_path = case plugin_name
+                      when /email-notifications/
+                        '/kenui'
+                      when /payment-test/
+                        '/payment_test'
+                      else
+                        "/#{plugin_key}"
+                      end
+        plugin_path = nil unless CONFIGABLE_PLUGINS.include?(plugin_key)
+        plugins << { name: plugin_name, path: plugin_path } if plugin_path
+      end
+      plugins
+    end
+
     private
 
     def installed_plugins

data/app/views/kaui/account_custom_fields/index.html.erb

@@ -1,35 +1,101 @@
-<div class="search">
-
-  <div class="column-block">
-
-    <h1>Custom Fields</h1>
-    <input type="hidden" id="custom-fields" value="<%= @custom_fields_json %>">
-    <table id="custom_fields-table" class="table table-condensed mobile-data">
-      <thead>
-      <tr>
-        <th>Object ID</th>
-        <th>Object type</th>
-        <th>Name</th>
-        <th>Value</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td colspan="1" class="dataTables_empty">Loading data from server</td>
-      </tr>
-      </tbody>
-    </table>
-
+<div class="kaui-container kaui-account-custom-fields-index">
+  <%= render "kaui/components/breadcrumb/breadcrumb" %>
+  <div class="d-flex " style="gap: 4rem;">
+    <%= render :template => 'kaui/layouts/kaui_account_sidebar' %>
+    <div class="custom-fields">
+      <div class="d-flex flex-column ">
+        <div class="custom-fields-header mb-4">
+          <div class="d-flex align-items-center">
+            <h2>Custom Fields</h2>
+          </div>
+          <input type="hidden" id="custom-fields" value="<%= @custom_fields_json %>">
+        </div>
+        <table id="custom_fields-table" class="custom-fields-table">
+          <thead>
+            <tr>
+              <th class="sortable-header" data-column="0">
+                <div class="header-content">
+                  <span class="header-text">Object ID</span>
+                  <div class="sort-icons">
+                    <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                    <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                  </div>
+                </div>
+              </th>
+              <th class="sortable-header" data-column="1">
+                <div class="header-content">
+                  <span class="header-text">Object type</span>
+                  <div class="sort-icons">
+                    <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                    <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                  </div>
+                </div>
+              </th>
+              <th class="sortable-header" data-column="2">
+                <div class="header-content">
+                  <span class="header-text">Name</span>
+                  <div class="sort-icons">
+                    <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                    <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                  </div>
+                </div>
+              </th>
+              <th class="sortable-header" data-column="3">
+                <div class="header-content">
+                  <span class="header-text">Value</span>
+                  <div class="sort-icons">
+                    <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                    <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                  </div>
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
-
 </div>
 
+
 <%= javascript_tag do %>
-    $(document).ready(function() {
-        var customFields = JSON.parse($("#custom-fields").val());
-        $('#custom_fields-table').DataTable({
-            "dom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
-            data: customFields
-        });
+  $(document).ready(function() {
+    var customFields = JSON.parse($("#custom-fields").val());
+    var table = $('#custom_fields-table').DataTable({
+      "dom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
+      data: customFields
     });
+
+    setTimeout(() => {
+      $('#custom_fields-table tbody tr').each(function () {
+        const $td = $(this).find('td:nth-of-type(2)');
+        const content = $td.text().trim();
+        $td.html(`<span>${content}</span>`);
+      });
+    }, 50);
+
+    // Custom sorting functionality
+    (function() {
+      var currentSortColumn = -1;
+      var currentSortDirection = 'asc';
+      $('#custom_fields-table thead .sortable-header').on('click', function() {
+        var columnIndex = parseInt($(this).data('column'));
+        var newDirection = (currentSortColumn === columnIndex && currentSortDirection === 'asc') ? 'desc' : 'asc';
+        currentSortColumn = columnIndex;
+        currentSortDirection = newDirection;
+        updateSortIndicators($('#custom_fields-table'), columnIndex, newDirection);
+        table.order([columnIndex, newDirection]).draw();
+      });
+    })();
+
+    function updateSortIndicators($table, columnIndex, direction) {
+      $table.find('.sortable-header').removeClass('sort-asc-active sort-desc-active');
+      $table.find('.sort-icon').removeClass('active');
+      var $header = $table.find('.sortable-header[data-column="' + columnIndex + '"]');
+      $header.addClass(direction + '-active');
+      $header.find('.sort-' + direction).addClass('active');
+    }
+  });
 <% end %>

data/app/views/kaui/account_emails/_account_emails_table.html.erb

@@ -1,13 +1,23 @@
 <tr>
-  <th>Contact emails</th>
   <td>
     <% if account_emails.present? %>
+      <div class="account-emails-list">
         <% account_emails.each_with_index do |account_email, idx| %>
-            <%= account_email.email %><% if can? :delete_emails, Kaui::Account -%><%= link_to '&nbsp;<i class="fa fa-times"></i>'.html_safe, kaui_engine.account_account_email_path(account_email.account_id, account_email.email), :method => :delete -%><% end -%>&nbsp;
+          <div>
+            <%= account_email.email %><% if can? :delete_emails, Kaui::Account -%><%= link_to '<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;">
+                <path d="M9.8335 2.5L2.8335 9.50001M2.8335 2.5L9.8335 9.50001" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>'.html_safe, kaui_engine.account_account_email_path(account_email.account_id, account_email.email), :method => :delete -%><% end -%>
+          </div>
         <% end %>
+      </div>
     <% end %>
     <% if can? :add_emails, Kaui::Account %>
-        <%= link_to '&nbsp<i class="fa fa-plus"></i>'.html_safe, kaui_engine.new_account_account_email_path(@account.account_id) %>
+      <%= link_to kaui_engine.new_account_account_email_path(@account.account_id), class: 'add-link' do %>
+        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8.33333 2.66675V13.3334M13.6667 8.00008H3" stroke="#1570EF" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        Add
+      <% end %>
     <% end %>
   </td>
 </tr>