kaui 3.0.9 → 4.0.0

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

@@ -1,10 +1,17 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Process refund</h1>
-      <%= render 'form' %>
+<div class="register process-refund-modal">
+  <div class="">
+        <div class="mx-auto" style="max-width:  37.5rem;">
+            <h5 class="process-refund-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="M16.6667 3.33301H3.33341C2.41294 3.33301 1.66675 4.0792 1.66675 4.99967V14.9997C1.66675 15.9202 2.41294 16.6663 3.33341 16.6663H16.6667C17.5872 16.6663 18.3334 15.9202 18.3334 14.9997V4.99967C18.3334 4.0792 17.5872 3.33301 16.6667 3.33301Z" stroke="#535862" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M8.33325 13.333H9.58325M12.0833 13.333H14.9999" stroke="#535862" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M1.66675 7.5H18.3334" stroke="#535862" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/>
+                  </svg>
+                </span>
+                Process refund
+            </h5>
+            <%= render 'form' %>
+        </div>
     </div>
-
-  </div>
 </div>

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

@@ -1,20 +1,107 @@
-<%= form_for @role_definition, :html => {:class => 'form-horizontal'} do |f| %>
-    <div class="form-group">
-      <%= f.label :role, 'Role name', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
-        <%= f.text_field :role, :class => 'form-control' %>
-      </div>
+<%= form_for @role_definition, html: { class: 'form-horizontal' } do |f| %>
+  <div class="form-group d-flex pb-3">
+    <%= f.label :role, 'Role name', class: 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= f.text_field :role, class: 'form-control' %>
     </div>
-    <div class="form-group">
-      <%= f.label :permissions, 'Permissions', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
-        <%= f.text_field :permissions, :class => 'form-control' %>
-        <p class="help-block">Comma separated, e.g. account:create,entitlement:change_plan,invoice:credit</p>
-      </div>
-    </div>
-    <div class="form-group">
-      <div class="col-sm-offset-3 col-sm-9">
-        <%= submit_tag 'Save', :class => 'btn btn-default' %>
-      </div>
+  </div>
+<div class="form-group d-flex pb-3 premissions-group">
+  <%= f.label :permissions, 'Permissions', class: 'col-sm-3 control-label' %>
+  <div class="col-sm-9">
+    <%= f.hidden_field :permissions, id: "permissions_hidden" %>
+
+    <div id="chip-wrapper" class="form-control d-flex flex-wrap align-items-center p-2 chip-input-container" style="min-height: 2.625rem; border: 0.0625rem solid #ccc; border-radius: 0.25rem;">
+      <input type="text" id="chip-input" style="border: none; outline: none; flex: 1;" />
     </div>
+
+    <p class="help-block">
+      Comma separated, e.g. account:create, entitlement:change_plan, invoice:credit
+    </p>
+  </div>
+</div>
+
+
+  <div class="form-group d-flex justify-content-end pt-3 border-top mb-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 User',
+      variant: "outline-secondary d-inline-flex align-items-center gap-1",
+      type: "submit",
+      html_class: "kaui-dropdown custom-hover",
+    } %>
+  </div>
 <% end %>
+
+<%= javascript_tag do %>
+  document.addEventListener('DOMContentLoaded', function () {
+    const input = document.getElementById('chip-input');
+    const wrapper = document.getElementById('chip-wrapper');
+    const hidden = document.getElementById('permissions_hidden');
+    let permissions = [];
+
+    function renderChips() {
+      // Remove all chips except the input box
+      [...wrapper.querySelectorAll('.chip')].forEach(chip => chip.remove());
+
+      permissions.forEach((perm) => {
+        const chip = document.createElement('div');
+        chip.className = 'chip badge bg-secondary text-white d-inline-flex align-items-center px-2 py-1 me-1 mb-1';
+        chip.textContent = perm;
+
+        const closeBtn = document.createElement('span');
+        closeBtn.className = 'remove-chip ms-1 d-flex align-items-center';
+        closeBtn.style.cursor = 'pointer';
+        closeBtn.innerHTML = `
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8.50049 1.5L1.50049 8.50001M1.50049 1.5L8.50049 8.50001" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        `;
+        closeBtn.onclick = () => {
+          permissions = permissions.filter(p => p !== perm);
+          renderChips();
+          updateHiddenField();
+        };
+
+        chip.appendChild(closeBtn);
+        wrapper.insertBefore(chip, input);
+      });
+    }
+
+    function updateHiddenField() {
+      hidden.value = permissions.join(',');
+    }
+
+    function addPermission(value) {
+      const cleaned = value.trim().replace(/,$/, '');
+      if (cleaned && !permissions.includes(cleaned)) {
+        permissions.push(cleaned);
+        renderChips();
+        updateHiddenField();
+      }
+      input.value = '';
+    }
+
+    input.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' || e.key === ',') {
+        e.preventDefault();
+        addPermission(input.value);
+      }
+    });
+
+    input.addEventListener('blur', function () {
+      if (input.value.trim() !== '') {
+        addPermission(input.value);
+      }
+    });
+  });
+<% end %>

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

@@ -1,10 +1,17 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Add new role definition</h1>
-      <%= render 'form' %>
+<div class="register kaui-container kaui-role-definitions-new">
+  <div class="">
+        <div class="" style="max-width:  37.5rem; margin: 0 auto;">
+            <h5 class="new-role-definition-title border-bottom">
+                <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="M13.3334 5.83333C13.3334 7.67428 11.841 9.16667 10.0001 9.16667C8.15913 9.16667 6.66675 7.67428 6.66675 5.83333C6.66675 3.99238 8.15913 2.5 10.0001 2.5C11.841 2.5 13.3334 3.99238 13.3334 5.83333Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M15.8334 15.8337C15.8334 13.5325 13.9679 11.667 11.6667 11.667H8.33341C6.03223 11.667 4.16675 13.5325 4.16675 15.8337V17.5003H15.8334V15.8337Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                Add New Role Definition
+            </h5>
+            <%= render 'form' %>
+        </div>
     </div>
-
-  </div>
 </div>
+

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

@@ -1,19 +1,9 @@
-<%= form_for resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => 'form-horizontal'} do |f| %>
-    <div class="form-group">
-      <%= f.label :kb_username, 'Username', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
-        <%= f.text_field :kb_username, :class => 'form-control', :autofocus => true %>
-      </div>
-    </div>
-    <div class="form-group">
-      <%= f.label :password, :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
-        <%= f.password_field :password, :class => 'form-control' %>
-      </div>
-    </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
-        <%= f.submit 'Sign in', :class => 'btn btn-default' %>
-      </div>
-    </div>
-<% end %>
+<%= form_for resource, as: resource_name, url: session_path(resource_name), html: { class: "" } do |f| %>
+
+<%= render "kaui/components/form_input/form_input", f: f, field: :kb_username, label: "Admin Username", placeholder: "Enter your admin username" %>
+<%= render "kaui/components/form_password/form_password", f: f, field: :password, label: "Admin Password", placeholder: "*****" %>
+
+<div class="d-grid mt-4">
+    <%= render "kaui/components/button/button", label: "Sign in", variant: "btn-primary custom-hover", type: "submit", html_class: "w-100" %>
+</div>
+<% end %>

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

@@ -1,10 +1,11 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Login</h1>
-      <%= render 'form' %>
+<div class="auth-form-container">
+    <div class="auth-form-background" style="background-image: url(<%= asset_path('kaui/sign_in_background.svg') %>)"></div>
+    <div class="auth-form-content">
+        <div class="text-center mb-4">
+            <%= render "kaui/components/logo/logo" %>
+            <h2 class="text-black-900 mt-4 mb-0 fs-2 fw-600">Log in to your account</h2>
+            <p class="text-tertiary mt-2 text-center fs-6 fw-normal">Welcome back! Please enter your details.</p>
+        </div>
+        <%= render 'form' %>
     </div>
-
-  </div>
-</div>
+</div>

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

@@ -1,46 +1,76 @@
-<div class="modal fade" id="cancel_subscription_by_date_modal" tabindex="-1" role="dialog">
+<div class="modal fade cancel_subscription_by_date_modal" id="cancel_subscription_by_date_modal" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
-    <div class="modal-content column-block">
-      <div>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h1 class="modal-title">Cancel a subscription given a date</h1>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title d-flex align-items-center gap-3">
+          <span class="icon-container">
+            <%= image_tag("kaui/subscription/cancel.svg" , width: 20, height: 20) %>
+          </span>
+          Cancel a Subscription Given a Date
+        </h5>
+        <button type="button" class="close close-button custom-hover" data-bs-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">
+            <%= image_tag("kaui/modal/close.svg", width: 20, height: 20) %>
+          </span>
+        </button>
       </div>
-      <div class="modal-body">
         <%= form_for :subscription, :url =>  '' , :method => :delete, :html => {:class => 'form-horizontal', :id => 'cancel_subscription_form'} do |f| %>
-          <div class="form-group">
-            <%= label_tag :requested_date, '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%>" name="requested_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true">
-            </div>
-          </div>
-          <div class="form-group">
-            <div class="col-sm-offset-4 col-sm-8">
-              <div class="checkbox">
-                <%= label_tag :use_requested_date_for_billing do %>
-                    <input type="checkbox" id="is_requested_date_for_billing">
-                    Use requested date for billing?
-                    <input type="hidden" id="use_requested_date_for_billing" name="use_requested_date_for_billing" value="0">
-                <% end %>
+          <div class="modal-body">
+              <div class="form-group d-flex pb-3">
+                <%= label_tag :resume_requested_date, 'Date', :class => 'col-sm-3 control-label field-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%>" name="requested_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true">
+                    </div>
+                </div>
+              </div>
+              <div class="form-group d-flex">
+                <div class="col-sm-3"></div>
+                  <div class="checkbox col-sm-9">
+                    <%= label_tag :use_requested_date_for_billing do %>
+                        <input type="checkbox" class="form-check-input" id="is_requested_date_for_billing">
+                        Use requested date for billing
+                        <input type="hidden" id="use_requested_date_for_billing" name="use_requested_date_for_billing" value="0">
+                    <% end %>
+                </div>
               </div>
-            </div>
           </div>
-
-          <div class="form-group">
-            <div class="col-sm-offset-4 col-sm-10">
-              <%= submit_tag 'Save', :class => 'btn btn-default' %>
+          <div class="notice-worning">
+            <%= image_tag("kaui/warning.png", width: 35, height: 35) %>
+            <div>
+              <strong>Notice</strong>
+              <%= raw t('views.subscriptions.requested_date_for_billing_notice') %>
             </div>
           </div>
+          <div class="modal-footer">
+            <%= 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",
+              html_options: {
+                data: {
+                  bs_dismiss: "modal"
+                }
+              }
+            } %>
+            <%= 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>
-      <div class="modal-footer">
-        <div class="alert alert-warning">
-          <strong>Notice</strong>
-          <%= raw t('views.subscriptions.requested_date_for_billing_notice') %>
-        </div>
-      </div>
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
+    </div>
+  </div>
+</div>
 
 <%= javascript_tag do %>
     $(document).ready(function() {

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

@@ -1,56 +1,78 @@
 <%= form_for @subscription, :url => subscription_path(@subscription.subscription_id), :html => {:method => :put, :class => 'form-horizontal'} do |f| %>
-    <div class="form-group">
+    <div class="form-group d-flex pb-3">
       <%= label_tag :plan_name, 'New plan', :class => 'col-sm-3 control-label' %>
       <div class="col-sm-9">
         <%= select_tag :plan_name, options_for_select(@plans, @subscription.plan_name.gsub(/ *-\d+$/, '')), :class => 'form-control' %>
       </div>
     </div>
 
-    <div class="form-group">
+    <div class="form-group d-flex pb-3 border-bottom mb-3">
       <%= label_tag :price_override, 'Price Override', :class => 'col-sm-3 control-label' %>
       <div class="col-sm-9">
         <%= number_field_tag :price_override, nil, min: 0, :step => :any, :class => 'form-control' %>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-3 col-sm-9">
-        <div class="radio">
-          <%= label_tag :type_change do %>
-              <%= radio_button_tag :type_change, 'DEFAULT', :checked => true %>
+    <div class="form-group d-flex pb-3" id="radio_group">
+      <%= label_tag :type_change, 'Type', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-offset-2 col-sm-9">
+        <div class="toggle-segment">
+          <div class="radio">
+            <%= label_tag 'type_change_default' do %>
+              <%= radio_button_tag :type_change, 'DEFAULT', true, id: 'type_change_default' %>
               Default policy
-          <% end %>
-        </div>
-        <div class="radio">
-          <%= label_tag :type_change do %>
-              <%= radio_button_tag :type_change, 'POLICY' %>
+            <% end %>
+          </div>
+
+          <div class="radio">
+            <%= label_tag 'type_change_policy' do %>
+              <%= radio_button_tag :type_change, 'POLICY', false, id: 'type_change_policy' %>
               Specify Policy
-          <% end %>
-        </div>
-        <div class="radio">
-          <%= label_tag :type_change do %>
-              <%= radio_button_tag :type_change, 'DATE' %>
+            <% end %>
+          </div>
+
+          <div class="radio">
+            <%= label_tag 'type_change_date' do %>
+              <%= radio_button_tag :type_change, 'DATE', false, id: 'type_change_date' %>
               Specify a date
-          <% end %>
+            <% end %>
+          </div>
+
         </div>
       </div>
     </div>
-    <div class="form-group", id="form_requested_date" >
+
+    <div class="form-group pb-3 border-bottom mb-3", id="form_requested_date" >
         <%= label_tag :requested_date, 'Change Date', :class => 'col-sm-3 control-label' %>
         <div class="col-sm-9">
           <input class="form-control" value="<%=Date.parse(Time.now.to_s).to_s%>" name="requested_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true">
         </div>
     </div>
-    <div class="form-group", id="form_policy">
+    <div class="form-group pb-3 border-bottom mb-3", id="form_policy">
       <%= label_tag :policy, 'Policy', :class => 'col-sm-3 control-label' %>
       <div class="col-sm-9">
         <%= select_tag :policy, options_for_select(['', 'IMMEDIATE', 'END_OF_TERM']), :class => 'form-control' %>
-        <p class="help-block">Leave blank for default</p>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-3 col-sm-9">
-        <%= submit_tag '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",
+        html_options: {
+          id: "saveButton"
+        }
+      } %>
     </div>
 <% end %>
 
@@ -58,22 +80,31 @@
 
 function onTypeChange() {
     var value = $("input[type=radio]:checked").val();
-        if (value == "DEFAULT") {
-            $("#form_requested_date").hide();
-            $("#form_policy").hide();
-        } else if (value == "POLICY")  {
-            $("#form_requested_date").hide();
-            $("#form_policy").show();
-        } else if (value == "DATE") {
-           $("#form_policy").hide();
-           $("#form_requested_date").show();
+    var radioGroupDiv = $("#radio_group");
+    
+    if (value == "DEFAULT") {
+        radioGroupDiv.addClass("border-bottom mb-3");
+        $("#form_requested_date").hide();
+        $("#form_policy").hide();
+        $("#form_requested_date, #form_policy").removeClass("d-flex");
+    } else if (value == "POLICY")  {
+        radioGroupDiv.removeClass("border-bottom mb-3");
+        $("#form_requested_date").hide();
+        $("#form_policy").show().addClass("d-flex");
+        $("#form_requested_date").removeClass("d-flex");
+    } else if (value == "DATE") {
+        radioGroupDiv.removeClass("border-bottom mb-3");
+        $("#form_policy").hide();
+        $("#form_requested_date").show().addClass("d-flex");
+        $("#form_policy").removeClass("d-flex");
     }
 }
 
+
 $(document).ready(function() {
     onTypeChange();
     $( "input[type=radio]").on("click", function() {
         onTypeChange();
     });
 });
-<% end %>
+<% end %>

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

@@ -6,9 +6,9 @@
     <% if @subscription.product_category == 'ADD_ON' %>
         <%= hidden_field_tag :base_product_name, @base_product_name %>
     <% elsif @subscription.product_category == 'BASE' %>
-        <div class="form-group">
-          <%= f.label :bundle_external_key, 'Bundle Key', :class => 'col-sm-2 control-label' %>
-          <div class="col-sm-10">
+        <div class="form-group d-flex pb-3">
+          <%= f.label :bundle_external_key, 'Bundle Key', :class => 'col-sm-3 control-label' %>
+          <div class="col-sm-9">
             <%= f.text_field :bundle_external_key, :class => 'form-control', :id => 'bundle_external_key' %>
             <div class="subscription_bundle_external_key_invalid_msg text-danger">
               Warning! External key already in use.
@@ -17,9 +17,9 @@
         </div>
     <% end %>
 
-    <div class="form-group">
-      <%= f.label :subscription_external_key, 'Subscription Key', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
+    <div class="form-group d-flex pb-3">
+      <%= f.label :subscription_external_key, 'Subscription Key', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-9">
         <%= f.text_field :external_key, :class => 'form-control', :id => 'subscription_external_key' %>
         <div class="subscription_external_key_invalid_msg text-danger">
           Warning! External key already in use.
@@ -28,44 +28,75 @@
     </div>
 
 
-    <div class="form-group">
-      <%= label_tag :plan_name, 'Plan', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
+    <div class="form-group d-flex pb-3">
+      <%= label_tag :plan_name, 'Plan', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-9">
         <%= select_tag :plan_name, options_for_select(@plans), :class => 'form-control' %>
       </div>
     </div>
-    <div class="form-group">
-      <%= label_tag :price_override, 'Price Override', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
+    <div class="form-group d-flex pb-3 border-bottom mb-3">
+      <%= label_tag :price_override, 'Price Override', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-9">
         <%= number_field_tag :price_override, nil, :step => :any, :min => 0, :class => 'form-control' %>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
-        <div class="radio">
-          <%= label_tag :type_change do %>
-              <%= radio_button_tag :type_change, 'IMM', :checked => true %>
+    <div class="form-group d-flex pb-3">
+      <%= label_tag :type_change, 'Type', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-offset-2 col-sm-9">
+        <div class="toggle-segment">
+          <div class="radio">
+            <%= label_tag 'type_change_imm' do %>
+              <%= radio_button_tag :type_change, 'IMM', true, id: 'type_change_imm' %>
               Immediate Creation
-          <% end %>
-        </div>
-        <div class="radio">
-          <%= label_tag :type_change do %>
-              <%= radio_button_tag :type_change, 'DATE' %>
+            <% end %>
+          </div>
+
+          <div class="radio">
+            <%= label_tag 'type_change_date' do %>
+              <%= radio_button_tag :type_change, 'DATE', false, id: 'type_change_date' %>
               Specify a date
-          <% end %>
+            <% end %>
+          </div>
         </div>
+
       </div>
     </div>
-    <div class="form-group" id="form_requested_date">
-      <%= label_tag :requested_date, '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%>" name="requested_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true">
+    <div id="form_requested_date" style="dispay: none;">
+      <div class="form-group d-flex pb-3">
+        <%= label_tag :requested_date, '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%>" name="requested_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true">
+          </div>
+        </div>        
       </div>
     </div>
-    <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
-            <%= submit_tag 'Save', :class => 'btn btn-default' %>
-        </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: {
+          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",
+        html_options: {
+          id: "saveButton"
+        }
+      } %>
     </div>
 <% end %>
 
@@ -87,4 +118,4 @@ $(document).ready(function() {
         onTypeChange();
     });
 });
-<% end %>
+<% end %>