kaui 3.0.9 → 4.0.0

data/app/views/kaui/payment_methods/_new_creditcard_payment_method.html.erb

@@ -1,64 +1,65 @@
-<div class="form-group">
-  <%= label_tag :card_type, 'Card type', :class => 'col-sm-3 control-label' %>
-  <div class="col-sm-9">
-    <%= text_field_tag :card_type, @card_type ||= nil, :class => 'form-control' %>
-  </div>
-</div>
-<div class="form-group">
-  <%= label_tag :card_holder_name, 'Card holder name', :class => 'col-sm-3 control-label' %>
-  <div class="col-sm-9">
-    <%= text_field_tag :card_holder_name, @card_holder_name ||= nil, :class => 'form-control' %>
-  </div>
-</div>
-<div class="form-group">
-  <%= label_tag :expiration_month, 'Expiration month', :class => 'col-sm-3 control-label' %>
-  <div class="col-sm-9">
-    <%= text_field_tag :expiration_month, @expiration_month ||= nil, :class => 'form-control' %>
-  </div>
-</div>
-<div class="form-group">
-  <%= label_tag :expiration_year, 'Expiration year', :class => 'col-sm-3 control-label' %>
-  <div class="col-sm-9">
-    <%= text_field_tag :expiration_year, @expiration_year ||= nil, :class => 'form-control' %>
-  </div>
-</div>
-<div class="form-group">
-  <%= label_tag :credit_card_number, 'Credit card number', :class => 'col-sm-3 control-label' %>
-  <div class="col-sm-9">
-    <%= text_field_tag :credit_card_number, @credit_card_number ||= nil, :class => 'form-control' %>
+<div class="form-group d-flex border-bottom mb-3">
+  <%= label_tag :card_type, 'Card details', :class => 'col-sm-3 control-label' %>
+  <div class="form-group pb-3 col-sm-9">
+    <div class="d-flex mb-3">
+      <div class="form-group col-sm-9">
+        <%= label_tag :card_holder_name, 'Cardholder Name', :class => 'control-label' %>
+        <div>
+          <%= text_field_tag :card_holder_name, @card_holder_name ||= nil, :class => 'form-control' %>
+        </div>
+      </div>
+      <div class="form-group col-sm-3">
+        <%= label_tag :expiration_month, 'Expiry Date', :class => 'control-label' %>
+        <div class="d-flex expiry-date">
+          <div class="col-sm-4">
+            <%= text_field_tag :expiration_month, @expiration_month ||= nil, class: 'form-control', maxlength: 2 %>
+          </div>
+          <div class="col-sm-1 form-control">/</div>
+          <div class="col-sm-7">
+            <%= text_field_tag :expiration_year, @expiration_year ||= nil, :class => 'form-control', maxlength: 4 %>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="form-group col-sm-12">
+      <%= label_tag :credit_card_number, 'Card number', :class => 'control-label' %>
+      <div>
+        <%= text_field_tag :credit_card_number, @credit_card_number ||= nil, :class => 'form-control' %>
+      </div>
+    </div>
   </div>
 </div>
-<div class="form-group">
+<div class="form-group d-flex pb-3">
   <%= label_tag :address1, 'Address 1', :class => 'col-sm-3 control-label' %>
   <div class="col-sm-9">
     <%= text_field_tag :address1, @address1 ||= nil, :class => 'form-control' %>
   </div>
 </div>
-<div class="form-group">
+<div class="form-group d-flex pb-3">
   <%= label_tag :address2, 'Address 2', :class => 'col-sm-3 control-label' %>
   <div class="col-sm-9">
     <%= text_field_tag :address2, @address2 ||= nil, :class => 'form-control' %>
   </div>
 </div>
-<div class="form-group">
+<div class="form-group d-flex pb-3">
   <%= label_tag :city, 'City', :class => 'col-sm-3 control-label' %>
   <div class="col-sm-9">
     <%= text_field_tag :city, @city ||= nil, :class => 'form-control' %>
   </div>
 </div>
-<div class="form-group">
+<div class="form-group d-flex pb-3">
   <%= label_tag :postal_code, 'ZIP code', :class => 'col-sm-3 control-label' %>
   <div class="col-sm-9">
     <%= text_field_tag :postal_code, @postal_code ||= nil, :class => 'form-control' %>
   </div>
 </div>
-<div class="form-group">
+<div class="form-group d-flex pb-3">
   <%= label_tag :state, 'State', :class => 'col-sm-3 control-label' %>
   <div class="col-sm-9">
     <%= text_field_tag :state, @state ||= nil, :class => 'form-control' %>
   </div>
 </div>
-<div class="form-group">
+<div class="form-group d-flex pb-3 border-bottom mb-3">
   <%= label_tag :country, 'Country', :class => 'col-sm-3 control-label' %>
   <div class="col-sm-9">
     <%= text_field_tag :country, @country ||= nil, :class => 'form-control' %>

data/app/views/kaui/payment_methods/_payment_methods_details_table.html.erb

@@ -1,34 +1,32 @@
-<table class="transparent">
-
-  <tr>
-    <th><%= I18n.translate('name_with_colon') %></th>
-    <td><%= payment_method.plugin_name %></td>
-  </tr>
-
+<div class="payment-method-details row">
   <% if payment_method.external_key.present? %>
-  <tr>
-    <th><%= I18n.translate('external_key_with_colon') %></th>
-    <td><%= payment_method.external_key %></td>
-  </tr>
+    <div class="detail-item col-4">
+      <b><%= I18n.translate('external_key_with_colon') %></b>
+      <span><%= payment_method.external_key %></span>
+    </div>
   <% end %>
 
-  <tr>
-    <th><%= I18n.translate('payment_method_id') %></th>
-    <td><%= payment_method.payment_method_id %></td>
-  </tr>
   <% unless payment_method.plugin_info.blank? %>
-      <% unless payment_method.plugin_info.external_payment_method_id.blank? %>
-          <tr>
-            <th><%= I18n.translate('external_id_with_colon') %></th>
-            <td><%= payment_method.plugin_info.external_payment_method_id %></td>
-          </tr>
-      <% end %>
-      <% (payment_method.plugin_info.properties || []).sort_by { |p| [p.key, p.value] }.each do |property| %>
-          <% next if property.value.blank? %>
-          <tr>
-            <th><%= property.key %></th>
-            <td><%= json?(property.value) ? "<pre>#{JSON.pretty_generate(JSON.parse(property.value))}</pre>".html_safe : property.value %></td>
-          </tr>
-      <% end %>
+    <% unless payment_method.plugin_info.external_payment_method_id.blank? %>
+      <div class="detail-item col-4">
+        <b><%= I18n.translate('external_id_with_colon') %></b>
+        <span><%= payment_method.plugin_info.external_payment_method_id %></span>
+      </div>
+    <% end %>
+
+    <% (payment_method.plugin_info.properties || []).sort_by { |p| [p.key, p.value] }.each do |property| %>
+      <% next if property.value.blank? %>
+      <div class="detail-item col-4">
+        <b><%= property.key %></b>
+        <span>
+          <% if json?(property.value) %>
+            <pre><%= JSON.pretty_generate(JSON.parse(property.value)) %></pre>
+          <% else %>
+            <%= property.value %>
+          <% end %>
+        </span>
+      </div>
+    <% end %>
   <% end %>
-</table>
+
+</div>

data/app/views/kaui/payment_methods/_payment_methods_table.html.erb

@@ -1,54 +1,132 @@
-<% payment_methods.each do |payment_method| %>
-    <div class="toggler">
+<% payment_methods.each_with_index do |payment_method, index| %>
+  <div class="payment-method">
+    <input type="checkbox" id="toggle-<%= index %>" class="toggle-checkbox" hidden>
 
-      <div class="first-line">
-        <% if payment_method.is_default %>
-            <a href="#" class="default-payment-method"><i class="fa fa-star"></i></a>
-        <% else %>
-            <% if can? :create, Kaui::PaymentMethod %>
-                <%= link_to '<i class="fa fa-star-o"></i>'.html_safe, kaui_engine.set_default_payment_method_account_path(payment_method.account_id, :params => {:payment_method_id => payment_method.payment_method_id}),
-                            :method => :put,
-                            :class => 'non-default-payment-method' %>
-            <% else %>
-                <a href="#" class="non-default-payment-method"><i class="fa fa-star-o"></i></a>
-            <% end %>
-        <% end %>
+    <!-- Summary row -->
+    <label for="toggle-<%= index %>" class="payment-summary">
+      <div class="column name">
+        <strong>Name</strong>
+        <div><%= payment_method.plugin_name %></div>
+      </div>
+
+      <div class="column last-used">
+        <strong>Last used</strong>
+        <div>
+          <% if last_transaction_by_payment_method_id[payment_method.payment_method_id] %>
+            <%= format_date(last_transaction_by_payment_method_id[payment_method.payment_method_id].effective_date, account.time_zone) %>
+          <% else %>
+            N/A
+          <% end %>
+        </div>
+      </div>
 
-        <%= payment_method.plugin_name %>
+      <div class="column method-id">
+        <strong>Payment Method ID</strong>
+        <div class="d-flex align-items-center">
+          <span class="payment-method-id"><%= payment_method.payment_method_id %></span>
+          <%= render "kaui/components/button/button", {
+            label: '',
+            icon: "kaui/copy.svg",
+            variant: "outline-secondary d-inline-flex align-items-center gap-1",
+            type: "button",
+            html_class: "dots-menu kaui-button",
+            html_options: {
+              onclick: "navigator.clipboard.writeText('#{payment_method.payment_method_id}')"
+            }
+          } %>
+        </div>
+      </div>
 
+      <div class="column actions">
         <% if can? :delete, Kaui::PaymentMethod %>
-            <% if payment_method.is_default %>
-                <%= link_to '<i class="fa fa-times"></i>'.html_safe, kaui_engine.payment_method_path(payment_method.payment_method_id, :params => {:set_auto_pay_off => 'true'}), :method => :delete %>
-            <% else %>
-                <%= link_to '<i class="fa fa-times"></i>'.html_safe, kaui_engine.payment_method_path(payment_method.payment_method_id), :method => :delete %>
-            <% end %>
+          <%= link_to 'Delete', kaui_engine.payment_method_path(payment_method.payment_method_id, params: { set_auto_pay_off: 'true' }), method: :delete, class: 'delete-link' %>
         <% end %>
 
-        <i class="fa fa-caret-down"></i>
-        <i class="fa fa-caret-up"></i>
-        <% unless last_transaction_by_payment_method_id[payment_method.payment_method_id].nil? %>
-            <span class="expires">Last used: <%= format_date(last_transaction_by_payment_method_id[payment_method.payment_method_id].effective_date, account.time_zone) %></span>
+        <% if payment_method.is_default %>
+          <span class="primary">Primary</span>
+        <% else %>
+          <% if can? :create, Kaui::PaymentMethod %>
+            <%= link_to 'Make Primary', kaui_engine.set_default_payment_method_account_path(payment_method.account_id, :params => {:payment_method_id => payment_method.payment_method_id}),
+                        :method => :put,
+                        :class => 'make-primary' %>
+          <% else %>
+            <span class="make-primary">Make Primary</span>
+          <% end %>
         <% end %>
-      </div>
 
-      <div class="toggle">
+        
 
-        <% if can? :trigger, Kaui::Payment %>
-            <div class="actions">
-              <% %w(AUTHORIZE PURCHASE CREDIT).each do |transaction_type| %>
-                  <%= link_to "<i class='fa fa-plus-square'></i>&nbsp;#{transaction_type.downcase.camelize}".html_safe, kaui_engine.new_account_transaction_path(payment_method.account_id,
-                                                                                                                                                                 :currency => account.currency,
-                                                                                                                                                                 :payment_method_id => payment_method.payment_method_id,
-                                                                                                                                                                 :transaction_type => transaction_type) %>
+        <!-- Three dot dropdown -->
+        <%
+=begin%>
+ <div class="action-menu-wrapper">
+          <input type="checkbox" id="menu-toggle-<%= index %>" class="menu-toggle" hidden>
+
+          <label for="menu-toggle-<%= index %>" class="menu-trigger">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M10.0001 10.8335C10.4603 10.8335 10.8334 10.4604 10.8334 10.0002C10.8334 9.53993 10.4603 9.16683 10.0001 9.16683C9.53984 9.16683 9.16675 9.53993 9.16675 10.0002C9.16675 10.4604 9.53984 10.8335 10.0001 10.8335Z" stroke="#A4A7AE" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M10.0001 5.00016C10.4603 5.00016 10.8334 4.62707 10.8334 4.16683C10.8334 3.70659 10.4603 3.3335 10.0001 3.3335C9.53984 3.3335 9.16675 3.70659 9.16675 4.16683C9.16675 4.62707 9.53984 5.00016 10.0001 5.00016Z" stroke="#A4A7AE" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M10.0001 16.6668C10.4603 16.6668 10.8334 16.2937 10.8334 15.8335C10.8334 15.3733 10.4603 15.0002 10.0001 15.0002C9.53984 15.0002 9.16675 15.3733 9.16675 15.8335C9.16675 16.2937 9.53984 16.6668 10.0001 16.6668Z" stroke="#A4A7AE" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </label>
+
+          <!-- Overlay that "cancels" the dropdown when clicked -->
+          <label for="menu-toggle-<%= index %>" class="dropdown-overlay"></label>
+
+          <div class="action-dropdown">
+            <ul>
+              <% [["Authorize", "fa-clipboard-check"], ["Purchase", "fa-basket-shopping"], ["Credit", "fa-credit-card"]].each do |label, icon| %>
+                <li>
+                  <a href="#">
+                    <i class="fa <%= icon %>"></i>
+                    <span><%= label %></span>
+                  </a>
+                </li>
               <% end %>
-            </div>
-        <% end %>
+            </ul>
+          </div>
+        </div> 
+<%
+=end%>
 
-        <div class="payment-method-details">
-          <%= render :partial => 'kaui/payment_methods/payment_methods_details_table', :locals => {:payment_method => payment_method} %>
-        </div>
+        <% if can? :trigger, Kaui::Payment %>
+          <% menu_items = %w(AUTHORIZE PURCHASE CREDIT).map do |transaction_type| 
+            {
+              label: transaction_type.downcase.camelize,
+              path: kaui_engine.new_account_transaction_path(
+                      payment_method.account_id,
+                      currency: account.currency,
+                      payment_method_id: payment_method.payment_method_id,
+                      transaction_type: transaction_type
+                    ),
+              icon: case transaction_type
+                    when "AUTHORIZE" then "kaui/account/authorize.svg"
+                    when "PURCHASE" then "kaui/account/purchase.svg"
+                    when "CREDIT" then "kaui/account/credit.svg"
+                    end
+            }
+          end %>
+
+          <%= render partial: "kaui/components/menu_dropdown/menu_dropdown", locals: {
+              variant: "btn-light",
+              label: "",
+              icon: "kaui/dots.svg",
+              dropdown_id: "actionDropdown",
+              html_class: "dots-menu",
+              menu_items: menu_items
+            } %>
+        <% end %>
 
       </div>
+    </label>
 
+    <!-- Toggle details -->
+    <div class="payment-detail">
+      <div class="details-content">
+        <%= render partial: 'kaui/payment_methods/payment_methods_details_table', locals: { payment_method: payment_method } %>
+      </div>
     </div>
+  </div>
 <% end %>
+
+

data/app/views/kaui/payment_methods/_plugin_properties.html.erb

@@ -1,6 +1,8 @@
-<div id="plugin_properties" class="row">
-  <a class='btn btn-xs' href="javascript:void(0);" onclick="payment_new_property();" id="new_property"><%= '<i class="fa fa-plus-square"></i>'.html_safe + " add property" %></a>
-  <table id="plugin_properties_table" class="table table-condensed">
+<div id="plugin_properties" class="">
+  <a class='dots-menu kaui-button' href="javascript:void(0);" onclick="payment_new_property();" id="new_property"><%= '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99992 3.3335V16.6668M16.6666 10.0002H3.33325" stroke="#1570EF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>'.html_safe + " Add Property" %></a>
+  <table id="plugin_properties_table" class="">
     <thead>
     <tr>
       <th>Name</th>
@@ -16,7 +18,17 @@
             <td><%= key_value.text_field :key, class: 'form-control' %></td>
             <td><%= key_value.text_field :value, class: 'form-control' %></td>
             <td>
-              <a class='btn btn-xs' href="javascript:void(0);" onclick="delete_property(this);" id="delete_plugin_property_<%= index %>"><%= '<i class="fa fa-times"></i>'.html_safe %></a>
+              <a href="javascript:void(0);" onclick="delete_property(this);" id="delete_plugin_property_<%= index %>"><%= '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_394_21877)">
+                <path d="M12.6671 3.3335L3.33374 12.6668M3.33374 3.3335L12.6671 12.6668" stroke="#D92D20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </g>
+                <defs>
+                <clipPath id="clip0_394_21877">
+                <rect width="16" height="16" fill="white"/>
+                </clipPath>
+                </defs>
+                </svg>'.html_safe %>
+              </a>
             </td>
           </tr>
         <% end %>
@@ -61,15 +73,13 @@
 
     function delete_property(obj) {
       var idx = obj.id.split("delete_plugin_property_")[1];
-      var rowCount = $('#plugin_properties_table tr').size();
+      var rowCount = $('#plugin_properties_table tbody tr').length;
 
-      if ( rowCount > 2 ){
+      if (rowCount > 1) {
         $("#plugin_property_" + idx).remove();
       } else {
         $("#plugin_property_" + idx).find('td').each(function(){
-          $(this).contents().each(function(){
-            $(this).val('');
-          });
+          $(this).find('input').val('');
         });
       }
     }

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

@@ -1,10 +1,16 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Add new payment method</h1>
-      <%= render 'form' %>
+<div class="register add-new-payment-method-modal">
+  <div class="">
+        <div class="mx-auto" style="max-width:  37.5rem;">
+            <h5 class="add-account-title">
+                <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.3333 5.83333C13.3333 7.67428 11.8409 9.16667 9.99996 9.16667C8.15901 9.16667 6.66663 7.67428 6.66663 5.83333C6.66663 3.99238 8.15901 2.5 9.99996 2.5C11.8409 2.5 13.3333 3.99238 13.3333 5.83333Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M15.8333 15.8332C15.8333 13.532 13.9678 11.6665 11.6666 11.6665H8.33329C6.03211 11.6665 4.16663 13.532 4.16663 15.8332V17.4998H15.8333V15.8332Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                </span>
+                Add new payment method
+            </h5>
+            <%= render 'form' %>
+        </div>
     </div>
-
-  </div>
 </div>

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

@@ -2,44 +2,61 @@
     <%= f.hidden_field :account_id %>
     <%= f.hidden_field :target_invoice_id %>
 
-    <div class='form-group'>
-      <div class="col-sm-offset-3 col-sm-9">
+    <div class='form-group d-flex pb-3'>
+     <%= f.label '', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-9">
         <div class="checkbox">
           <%= label_tag :external do %>
-              <%= check_box_tag :external %>External?
+              <%= check_box_tag :external %>External
           <% end %>
         </div>
       </div>
     </div>
-    <div class="form-group">
+    <div class="form-group d-flex pb-3">
       <%= f.label :purchased_amount, 'Amount', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
+      <div class="col-sm-9 d-flex currency-group">
         <%= f.number_field :purchased_amount, :step => :any, :id => 'payment_amount', :class => 'form-control' %>
-        <p class="help-block">Currency: <%= @invoice.present? ? @invoice.currency : @account.currency %></p>
+        <div class="currency"><%= @invoice.present? ? @invoice.currency : @account.currency %></div>
       </div>
     </div>
-    <div class="form-group">
+    <div class="form-group d-flex pb-3">
       <%= f.label :payment_method_id, 'Payment Method', :class => 'col-sm-3 control-label' %>
       <div class="col-sm-9">
         <%= f.collection_select :payment_method_id, @payment_methods, :payment_method_id, Proc.new { |pm| "#{pm.plugin_name} (#{pm.payment_method_id})" }, {:include_blank => true}, :class => 'form-control' %>
         <p class="help-block">Leave blank to use account's default</p>
       </div>
     </div>
-    <div class="form-group">
+    <div class="form-group d-flex pb-3">
       <%= label_tag :reason, 'Reason', :class => 'col-sm-3 control-label' %>
       <div class="col-sm-9">
         <%= select_tag :reason, options_for_select(Kaui.payment_reason_codes), :class => 'form-control' %>
       </div>
     </div>
-    <div class="form-group">
+    <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">
-      <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 Payment',
+        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 %>