kaui 3.0.9 → 4.0.0

data/app/views/kaui/subscriptions/_subscriptions_table.html.erb

@@ -1,86 +1,193 @@
-<table id="subscriptions_<%= bundle.bundle_id %>" class="table table-condensed mobile-data">
+<table id="subscriptions_<%= bundle.bundle_id %>" class="subscriptions-table">
   <thead>
   <tr>
     <% unless @available_subscription_tags.blank? && @custom_fields_per_subscription.blank? %>
       <th></th>
-    <% end %>
-    <th>Category</th>
-    <th>Name</th>
-    <th>Phase type</th>
-    <th>Start date</th>
-    <th>Charged through date</th>
-    <th>Cancel information</th>
-    <th>Actions</th>
+    <% end %> 
+    <th class="sortable-header" data-column="<%= (@available_subscription_tags.blank? && @custom_fields_per_subscription.blank?) ? 0 : 1 %>">
+      <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="<%= (@available_subscription_tags.blank? && @custom_fields_per_subscription.blank?) ? 1 : 2 %>">
+      <div class="header-content">
+        <span class="header-text">Category</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="<%= (@available_subscription_tags.blank? && @custom_fields_per_subscription.blank?) ? 2 : 3 %>">
+      <div class="header-content">
+        <span class="header-text">Phase 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="<%= (@available_subscription_tags.blank? && @custom_fields_per_subscription.blank?) ? 3 : 4 %>">
+      <div class="header-content">
+        <span class="header-text">Start date</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="<%= (@available_subscription_tags.blank? && @custom_fields_per_subscription.blank?) ? 4 : 5 %>">
+      <div class="header-content">
+        <span class="header-text">Cancel information</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="<%= (@available_subscription_tags.blank? && @custom_fields_per_subscription.blank?) ? 5 : 6 %>">
+      <div class="header-content">
+        <span class="header-text">Charged Upto Date</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></th>
   </tr>
   </thead>
   <tbody>
-  <% (bundle.subscriptions || []).each do |sub| %>
-      <tr class="<%= subscription_cancelled?(sub) ? 'expired' : 'non-expired' %>">
-        <% unless @available_subscription_tags.blank? && @custom_fields_per_subscription.blank? %>
-          <td class="inline-row-tag-bar">
-            <div class="tag-bar tag-bar-no-border">
-              <% unless @available_subscription_tags.blank? %>
-                <div class="tag-select" onclick="void(0)">
-                  <span><i class="fa fa-tag"></i><i class="fa fa-caret-down"></i></span>
+    <% (bundle.subscriptions || []).each do |sub| %>
+      <% dropdown_id = "cancelDropdown-#{sub.subscription_id}" %>
+      <tr class="<%= subscription_cancelled?(sub) ? 'expired expired-row' : 'non-expired' %>">
+        <% unless @available_subscription_tags.blank? && @custom_fields_per_subscription.blank? %> 
+          <td class="full-visible">
+            <div class="tag-bar tag-bar-no-border children-tag-bar">
+              <% unless @available_subscription_tags.blank? %> 
 
-                  <div class="tag-select-box">
-                    <strong>Tag as:</strong>
+                <div class="tag-select" onclick="void(0)">
+                  <%= render "kaui/components/button/button", {
+                    label: "",
+                    trailing_icon: "kaui/sidebar/tags.svg", 
+                    variant: "",
+                    type: "button",
+                    html_class: "kaui-button custom-hover dots-menu me-2",
+                  } %>
 
+                  <div class="tag-select-box tag-as-select-box d-flex flex-column align-items-start children-tag-select-box" style="opacity: 1;">
+                    <strong>Tag As:</strong>
                     <%= render :partial => 'kaui/bundle_tags/form_bar',
-                               :locals => {:params => { :bundle_id => bundle.bundle_id},
-                                           :tag_names => (@tags_per_subscription[sub.subscription_id] || []).map { |tag| tag.tag_definition_name },
-                                           :available_tags => @available_subscription_tags,
-                                           :update_tags_path => update_subscriptions_tags_path(sub.subscription_id)
-                               } %>
+                                :locals => {:params => { :bundle_id => bundle.bundle_id},
+                                  :tag_names => (@tags_per_subscription[sub.subscription_id] || []).map { |tag| tag.tag_definition_name },
+                                  :available_tags => @available_subscription_tags,
+                                  :update_tags_path => update_subscriptions_tags_path(sub.subscription_id)
+                                } %> 
                   </div>
                 </div>
-              <% end %>
+              <% end %> 
 
-              <%= render :partial => 'kaui/custom_fields/list_bar',
-                         :locals => {:custom_fields => @custom_fields_per_subscription[sub.subscription_id] || []} %>
+              <%= render :partial => 'kaui/custom_fields/list_bar', :locals => {:custom_fields => @custom_fields_per_subscription[sub.subscription_id] || []} %>
             </div>
-
           </td>
         <% end %>
+        <td><%= humanized_subscription_plan_or_product_name(sub, catalog) %></td>
         <td>
-          <span id="<%= sub.subscription_id %>-popover" class="object-id-popover" title="Subscription ID" data-id="<%= sub.subscription_id %>">
+          <span id="<%= sub.subscription_id %>-popover" class="object-id-popover category-bedge" data-id="<%= sub.subscription_id %>">
             <%= humanized_subscription_product_category(sub) %>
           </span>
         </td>
-        <td><%= humanized_subscription_plan_or_product_name(sub, catalog) %></td>
-        <td><%= humanized_subscription_phase_type(sub) %></td>
+        <td><span class="phase-type"><%= humanized_subscription_phase_type(sub).downcase %></span></td>
         <td><%= humanized_subscription_start_date(sub, account) %></td>
-        <td><%= humanized_subscription_charged_through_date(sub, account) %></td>
         <td><%= humanized_subscription_cancelled_information(sub, account) %></td>
+        <td><%= humanized_subscription_charged_through_date(sub, account) %></td>
         <td class="text-center">
-            <% if subscription_future_cancelled?(sub, account) %>
-                <%= link_to 'Reinstate', kaui_engine.reinstate_path(:id => sub.subscription_id), :method => :put, :class => 'btn btn-xs' %>
-            <% elsif !subscription_cancelled?(sub) %>
-                <% if can? :change_plan, Kaui::Subscription %>
-                    <%= link_to 'Change', kaui_engine.edit_subscription_path(sub.subscription_id), :class => 'btn btn-xs' %>
+          <% if subscription_future_cancelled?(sub, account) %>
+            <%= link_to 'Reinstate', kaui_engine.reinstate_path(:id => sub.subscription_id), :method => :put, :class => 'btn btn-xs' %>
+          <% elsif !subscription_cancelled?(sub) %>
+            <div class="d-flex justify-content-end align-items-center">
+              <% if can? :cancel, Kaui::Subscription %>
+                <div class="btn-group cancel-menu position-relative" id="<%= dropdown_id %>Wrapper">
+                  <button id="<%= dropdown_id %>Btn" class="cancel-button">
+                    Cancel
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M4 6.00003L8.00002 10L12 6" stroke="#D92D20" stroke-width="1.5" stroke-miterlimit="16" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </button>
+
+                  <ul class="dropdown-menu"
+                      id="<%= dropdown_id %>Menu"
+                      style="display: none;">
+                    <li><%= link_to 'Cancel (default policy)', kaui_engine.subscription_path(id: sub.subscription_id), method: :delete %></li>
+                    <li><%= link_to 'Cancel start of term (full credit)', kaui_engine.subscription_path(id: sub.subscription_id, policy: 'START_OF_TERM'), method: :delete %></li>
+                    <li><%= link_to 'Cancel immediately (partial credit)', kaui_engine.subscription_path(id: sub.subscription_id, policy: 'IMMEDIATE'), method: :delete %></li>
+                    <li><%= link_to 'Cancel end of term (no credit)', kaui_engine.subscription_path(id: sub.subscription_id, policy: 'END_OF_TERM'), method: :delete %></li>
+                    <li><%= link_to 'Cancel a subscription given a date', '#cancel_subscription_by_date_modal', data: { bs_toggle: 'modal', id: sub.subscription_id } %></li>
+                  </ul>
+                </div>
+              <% end %>
+
+              <% if can?(:create, Kaui::Subscription) || can?(:pause_resume, Kaui::Subscription) || can?(:change_plan, Kaui::Subscription) %>
+                <% menu_items = [] %>
+
+                <% if can?(:change_plan, Kaui::Subscription) %>
+                  <% menu_items << {
+                    label: "Change Plan",
+                    path: kaui_engine.edit_subscription_path(sub.subscription_id),
+                    icon: "kaui/subscription/change.svg"
+                  } %>
                 <% end %>
-                <% if can? :cancel, Kaui::Subscription %>
-                    <div class="btn-group">
-                        <a class="btn btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
-                            Cancel
-                            <span class="caret"></span>
-                        </a>
-                        <ul class="dropdown-menu">
-                            <li><%= link_to 'Cancel (default policy)', kaui_engine.subscription_path(:id => sub.subscription_id), :method => :delete %></li>
-                            <li><%= link_to 'Cancel start of term (full credit)', kaui_engine.subscription_path(:id => sub.subscription_id, :policy => 'START_OF_TERM'), :method => :delete %></li>
-                            <li><%= link_to 'Cancel immediately (partial credit)', kaui_engine.subscription_path(:id => sub.subscription_id, :policy => 'IMMEDIATE'), :method => :delete %></li>
-                            <li><%= link_to 'Cancel end of term (no credit)', kaui_engine.subscription_path(:id => sub.subscription_id, :policy => 'END_OF_TERM'), :method => :delete %></li>
-                            <li><%= link_to 'Cancel a subscription given a date', '#cancel_subscription_by_date_modal', data: {toggle: 'modal', id: sub.subscription_id} %></li>
-                        </ul>
-                    </div>
+
+                <% if can?(:create, Kaui::Subscription) && @subscription[bundle.bundle_id].present? %>
+                  <% menu_items << {
+                    label: @subscription[bundle.bundle_id].product_category == 'BASE' ? 'Add add-on' : 'Add standalone subscription',
+                    path: kaui_engine.new_subscription_path(
+                      params: {
+                        account_id: bundle.account_id,
+                        bundle_id: bundle.bundle_id,
+                        base_product_name: @subscription[bundle.bundle_id].product_name,
+                        product_category: @subscription[bundle.bundle_id].product_category == 'BASE' ? 'ADD_ON' : 'STANDALONE'
+                      }
+                    ),
+                    icon: "kaui/subscription/add-on.svg"
+                  } %>
                 <% end %>
-                <% if can? :create, Kaui::Subscription %>
-                    <%= link_to 'Update BCD', kaui_engine.edit_bcd_path(:id => sub.subscription_id),  :class => 'btn btn-xs' %>
+
+                <% if can?(:pause_resume, Kaui::Subscription) %>
+                  <% menu_items << {
+                    label: "Pause / resume",
+                    path: kaui_engine.pause_resume_bundle_path(account_id: bundle.account_id, id: bundle.bundle_id),
+                    icon: "kaui/subscription/pause.svg"
+                  } %>
                 <% end %>
-            <% end %>
+
+                <% if can?(:create, Kaui::Subscription) %>
+                  <% menu_items << {
+                    label: "Update BCD",
+                    path: kaui_engine.edit_bcd_path(id: sub.subscription_id),
+                    icon: "kaui/subscription/date.svg"
+                  } %>
+                <% end %>
+
+                <%= render partial: "kaui/components/menu_dropdown/menu_dropdown", locals: {
+                    variant: "btn-light",
+                    label: "",
+                    icon: "kaui/dots.svg",
+                    html_class: "dots-menu",
+                    menu_items: menu_items,
+                    dropdown_id: "dotsDropdown-#{sub.subscription_id}",
+                } %>
+              <% end %>
+            </div>
+          <% end %>
+
         </td>
       </tr>
-  <% end %>
+    <% end %>
   </tbody>
 </table>
 
@@ -90,7 +197,7 @@
   $(document).ready(function() {
     $('.subscription-id-popover').popover();
 
-    $('#subscriptions_<%= bundle.bundle_id %>').dataTable({
+    var table = $('#subscriptions_<%= bundle.bundle_id %>').DataTable({
       "dom": "t",
       "paging": false,
       "order": [[ <%= @available_subscription_tags.blank? && @custom_fields_per_subscription.blank? ? 3 : 4 %>, "asc" ]],
@@ -103,12 +210,63 @@
         null,
         null,
         { "orderable": false }
-      ]
+      ],
+      "drawCallback": function() {
+        setObjectIdTooltip();
+      }
     });
 
+    // Custom sorting functionality for this table
+    (function() {
+      var currentSortColumn = <%= @available_subscription_tags.blank? && @custom_fields_per_subscription.blank? ? 3 : 4 %>;
+      var currentSortDirection = 'asc';
+      updateSortIndicators($('#subscriptions_<%= bundle.bundle_id %>'), currentSortColumn, currentSortDirection);
+
+      $('#subscriptions_<%= bundle.bundle_id %> 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($('#subscriptions_<%= bundle.bundle_id %>'), columnIndex, newDirection);
+        table.order([columnIndex, newDirection]).draw();
+      });
+    })();
+
     $(".price-override-popover").popover({
       container: 'body',
       trigger: 'hover'
     });
+
+    document.querySelectorAll('.cancel-button').forEach(function(button) {
+      const idPrefix = button.id.replace('Btn', '');
+      const menu = document.getElementById(idPrefix + 'Menu');
+      const wrapper = document.getElementById(idPrefix + 'Wrapper');
+
+      button.addEventListener('click', function (e) {
+        e.stopPropagation();
+
+        // Close all open dropdowns first
+        document.querySelectorAll('.dropdown-menu').forEach(m => m.style.display = 'none');
+
+        // Toggle this one
+        const isOpen = menu.style.display === 'block';
+        menu.style.display = isOpen ? 'none' : 'block';
+      });
+
+      // Close dropdown on outside click
+      document.addEventListener('click', function (e) {
+        if (!wrapper.contains(e.target)) {
+          menu.style.display = 'none';
+        }
+      });
+    });
   });
+  
+  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/subscriptions/edit.html.erb

@@ -1,10 +1,21 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Change subscription</h1>
-      <%= render 'edit_form' %>
+<div class="register kaui-subscription-new">
+  <div class="">
+        <div class="mx-auto" style="max-width:  37.5rem;">
+            <h5 class="add-account-title border-bottom pb-3 mb-3">
+                <span class="icon-container">
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M9.16675 11.6665H13.3334M6.66675 11.6665H6.67423M10.8334 14.9998H6.66675M13.3334 14.9998H13.3259" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M13.75 1.6665V4.99984M6.25 1.6665V4.99984" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M15.8333 3.3335H4.16667C3.24619 3.3335 2.5 4.07969 2.5 5.00016V16.6668C2.5 17.5873 3.24619 18.3335 4.16667 18.3335H15.8333C16.7538 18.3335 17.5 17.5873 17.5 16.6668V5.00016C17.5 4.07969 16.7538 3.3335 15.8333 3.3335Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M2.5 8.3335H17.5" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                Change subscription
+            </h5>
+            <%= render 'edit_form' %>
+        </div>
     </div>
-
-  </div>
 </div>
+
+
+

data/app/views/kaui/subscriptions/edit_bcd.erb

@@ -1,27 +1,57 @@
-<div class="register">
-    <div class="col-md-8 col-md-offset-2">
-
-        <div class="column-block">
-            <h1>Update Subscription BCD</h1>
+<div class="register kaui-subscription-new">
+  <div class="">
+        <div class="mx-auto" style="max-width:  37.5rem;">
+            <h5 class="add-account-title border-bottom pb-3 mb-3">
+                <span class="icon-container">
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M9.16675 11.6665H13.3334M6.66675 11.6665H6.67423M10.8334 14.9998H6.66675M13.3334 14.9998H13.3259" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M13.75 1.6665V4.99984M6.25 1.6665V4.99984" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M15.8333 3.3335H4.16667C3.24619 3.3335 2.5 4.07969 2.5 5.00016V16.6668C2.5 17.5873 3.24619 18.3335 4.16667 18.3335H15.8333C16.7538 18.3335 17.5 17.5873 17.5 16.6668V5.00016C17.5 4.07969 16.7538 3.3335 15.8333 3.3335Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M2.5 8.3335H17.5" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                Update Subscription BCD
+            </h5>
             <%= form_for @subscription, :as => :subscription, :url => update_bcd_path(@subscription.subscription_id), :html => {:method => :put, :class => 'form-horizontal'} do |f| %>
                 <%= f.hidden_field :account_id %>
 
-                <div class="form-group">
-                    <%= f.label :bill_cycle_day_local, 'Bill Cycle Day', :class => 'col-sm-2 control-label' %>
-                    <div class="col-sm-10">
+                <div class="form-group d-flex pb-3">
+                    <%= f.label :bill_cycle_day_local, 'Bill Cycle Day', :class => 'col-sm-3 control-label' %>
+                    <div class="col-sm-9">
                         <%= f.number_field :bill_cycle_day_local, { :min => 1, :max => 31, :class => 'form-control'} %>
                     </div>
                 </div>
-                <div class="form-group" , id="form_effective_from_date">
-                    <%= label_tag :effective_from_date, 'Effective Date', :class => 'col-sm-2 control-label' %>
-                    <div class="col-sm-10">
-                        <input class="form-control" value="<%=Date.parse(Time.now.to_s).to_s%>" id="effective_from_date" name="effective_from_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true">
+                <div class="form-group d-flex pb-3 border-bottom mb-3" id="form_effective_from_date">
+                    <%= label_tag :effective_from_date, 'Effective Date', :class => 'col-sm-3 control-label' %>
+                    <div class="col-sm-9">
+                        <div class="custom-date-input-wrapper kaui-button custom-hover">
+                            <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" value="<%=Date.parse(Time.now.to_s).to_s%>" id="effective_from_date" name="effective_from_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true">
+                        </div>
                     </div>
                 </div>
-                <div class="form-group">
-                    <div class="col-sm-offset-2 col-sm-10">
-                        <%= f.submit 'Save', :class => 'btn btn-default' %>
-                    </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: 'Save Subscription',
+                        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                        type: "submit",
+                        html_class: "kaui-dropdown custom-hover"
+                    } %>
                 </div>
         <% end %>
         </div>

data/app/views/kaui/subscriptions/new.html.erb

@@ -1,17 +1,24 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <% if @subscription.product_category == 'ADD_ON' %>
-          <h1>Add new add-on</h1>
-      <% elsif @subscription.product_category == 'STANDALONE' %>
-          <h1>Add new standalone subscription</h1>
-      <% else %>
-          <h1>Add new subscription</h1>
-      <% end %>
-
-      <%= render 'form' %>
+<div class="register kaui-subscription-new">
+  <div class="">
+        <div class="mx-auto" style="max-width:  37.5rem;">
+            <h5 class="add-account-title border-bottom pb-3 mb-3">
+                <span class="icon-container">
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M9.16675 11.6665H13.3334M6.66675 11.6665H6.67423M10.8334 14.9998H6.66675M13.3334 14.9998H13.3259" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M13.75 1.6665V4.99984M6.25 1.6665V4.99984" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M15.8333 3.3335H4.16667C3.24619 3.3335 2.5 4.07969 2.5 5.00016V16.6668C2.5 17.5873 3.24619 18.3335 4.16667 18.3335H15.8333C16.7538 18.3335 17.5 17.5873 17.5 16.6668V5.00016C17.5 4.07969 16.7538 3.3335 15.8333 3.3335Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M2.5 8.3335H17.5" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                <% if @subscription.product_category == 'ADD_ON' %>
+                    Add new add-on
+                <% elsif @subscription.product_category == 'STANDALONE' %>
+                    Add new standalone subscription
+                <% else %>
+                    Add new subscription
+                <% end %>
+            </h5>
+            <%= render 'form' %>
+        </div>
     </div>
-
-  </div>
 </div>

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

@@ -1,40 +1,61 @@
 <%= form_for @tag_definition, :html => {:class => 'form-horizontal'} do |f| %>
-    <%= f.hidden_field :id %>
-
-    <div class="form-group">
-      <%= f.label :object_type, :class => 'col-sm-2 control-label'  do %>
-          Object type<a class='btn btn-xs tag-definition-add-link' href="javascript:void(0);" onclick="new_object_type();" id="new_object_type">
-            <%= '<i class="fa fa-plus-square"></i>'.html_safe %>
-          </a>
-      <% end %>
-      <div class="col-sm-10" id="object_types">
+  <%= f.hidden_field :id %>
+
+  <div class="form-group d-flex">
+    <%= f.label :object_type, :class => 'col-sm-3 control-label'  do %>
+      Object Type
+    <% end %>
+    <div class="col-sm-9 d-flex" >
+      <div class="w-100 col-sm-6" id="object_types">
         <% (@tag_definition.applicable_object_types || [:account]).each_with_index do |object_type, index| %>
-        <div id="object_type_line_<%= index %>">
-        <%= select_tag "tag_definition[applicable_object_types][#{index}]", options_for_select(object_types),  {:selected => object_type, :id => "object_type_#{index}", :class => 'form-control tag-definition-select'} %>
-          <a class='btn btn-xs' href="javascript:void(0);" onclick="delete_object_type(this);" id="delete_object_type_<%= index %>" <%= "style='display: none;'".html_safe if index == 0 %>>
-            <%= '<i class="fa fa-times"></i>'.html_safe %>
-          </a>
-        </div>
+          <div class="d-flex" id="object_type_line_<%= index %>">
+            <%= select_tag "tag_definition[applicable_object_types][#{index}]", options_for_select(object_types),  {:selected => object_type, :id => "object_type_#{index}", :class => 'form-control tag-definition-select'} %>
+              <a class='' href="javascript:void(0);" onclick="delete_object_type(this);" id="delete_object_type_<%= index %>" <%= "style='display: none;'".html_safe if index == 0 %>>
+                <button type="button" class="button custom-hover">
+                  <%= image_tag("kaui/modal/red-close.svg", width: 16, height: 16) %>
+                </button>
+              </a>
+              <a class='d-none' href="javascript:void(0);" onclick="new_object_type();" id="new_object_type" <%= "style='display: block !important;'".html_safe if index == 0 %>>
+              <button type="button" class="border-button custom-hover">
+                <%= image_tag("kaui/modal/plus.svg", width: 16, height: 16) %>
+              </button>
+              </a>
+
+          </div>
         <% end %>
       </div>
+      
     </div>
-    <div class='form-group'>
-      <%= f.label :name, 'Name', :class => 'col-sm-2 control-label' %>
-      <div class='col-sm-10'>
-        <%= f.text_field :name, :class => 'form-control' %>
-      </div>
+  </div>
+  <div class='form-group d-flex pb-3'>
+    <%= f.label :name, 'Name', :class => 'col-sm-3 control-label' %>
+    <div class='col-sm-9'>
+      <%= f.text_field :name, :class => 'form-control' %>
     </div>
-    <div class='form-group'>
-      <%= f.label :description, 'Description', :class => 'col-sm-2 control-label' %>
-      <div class='col-sm-10'>
-        <%= f.text_field :description, :class => 'form-control' %>
-      </div>
-    </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
-        <%= submit_tag 'Save', :class => 'btn btn-default' %>
-      </div>
+  </div>
+  <div class='form-group d-flex pb-3'>
+    <%= f.label :description, 'Description', :class => 'col-sm-3 control-label' %>
+    <div class='col-sm-9'>
+      <%= f.text_field :description, :class => 'form-control' %>
     </div>
+  </div>
+  <div class="form-group d-flex justify-content-end pt-3 border-top">
+    <%= 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: {
+        onclick: "window.history.back();"
+      }
+    } %>
+    <%= render "kaui/components/button/button", {
+      label: 'Save Definition',
+      variant: "outline-secondary d-inline-flex align-items-center gap-1",
+      type: "submit",
+      html_class: "kaui-dropdown custom-hover"
+    } %>
+  </div>
 <% end %>
 
 <%= javascript_tag do %>