Skip to content

Commit c1a46b2

Browse files
tungleduyxyztungleduyxyz
authored
Merge pull request #19 from killbill/avatax-new-ui-implementation
UI updates configuration forms and tables for improved layout and consistency
2 parents 4dc617a + ed41a68 commit c1a46b2

File tree

14 files changed

+220
-86
lines changed

14 files changed

+220
-86
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ env:
1515

1616
jobs:
1717
test:
18-
runs-on: ubuntu-latest
18+
runs-on: ubuntu-22.04
1919
strategy:
2020
matrix:
2121
include:

‎Gemfile‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ group :development do
2424
gem 'sprockets-rails'
2525
end
2626

27+
# Temporary fix for JRuby 9.4.10.0 here: https://github.com/jruby/jruby/issues/7262
28+
gem 'jar-dependencies', '~> 0.4.1' if defined?(JRUBY_VERSION)
29+
2730
# gem 'killbill-assets-ui', github: 'killbill/killbill-assets-ui', ref: 'main'
2831
# gem 'killbill-assets-ui', path: '../killbill-assets-ui'
2932
gem 'killbill-assets-ui'

‎app/views/avatax/configuration/_exemptions_form.html.erb‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,36 @@
11
<%= form_tag do_set_exemption_configuration_path, :class => 'form-horizontal' do %>
2-
<div class="form-group">
3-
<%= label_tag :account_id, 'Account ID', :class => 'col-sm-2 control-label' %>
2+
<div class="form-group d-flex pb-3">
3+
<%= label_tag :account_id, 'Account ID', :class => 'col-sm-3 control-label' %>
44

5-
<div class="col-sm-10">
5+
<div class="col-sm-9">
66
<%= text_field_tag :account_id, nil, :class => 'form-control' %>
77
</div>
88
</div>
9-
<div class="form-group">
10-
<%= label_tag :customer_usage_type, 'Customer Usage Type', :class => 'col-sm-2 control-label' %>
11-
<div class="col-sm-10">
9+
<div class="form-group d-flex pb-3 border-bottom mb-3">
10+
<%= label_tag :customer_usage_type, 'Customer Usage Type', :class => 'col-sm-3 control-label' %>
11+
<div class="col-sm-9">
1212
<%= text_field_tag :customer_usage_type, nil, :class => 'form-control' %>
1313
</div>
1414
</div>
15-
<div class="form-group">
16-
<div class="col-sm-offset-2 col-sm-10">
17-
<%= submit_tag 'Save', :class => 'btn btn-default' %>
18-
</div>
15+
<div class="form-group d-flex justify-content-end pb-3">
16+
<%= render "kaui/components/button/button", {
17+
label: 'Close',
18+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
19+
type: "button",
20+
html_class: "kaui-button custom-hover mx-2",
21+
html_options: {
22+
id: "closeButton",
23+
onclick: "window.history.back();"
24+
}
25+
} %>
26+
<%= render "kaui/components/button/button", {
27+
label: 'Save',
28+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
29+
type: "submit",
30+
html_class: "kaui-dropdown custom-hover",
31+
html_options: {
32+
id: "saveButton"
33+
}
34+
} %>
1935
</div>
2036
<% end %>

‎app/views/avatax/configuration/_exemptions_table.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<table id="exemptions-table" class="table table-condensed table-striped mobile-data">
1+
<table id="exemptions-table" class="configuration-table">
22
<thead>
33
<tr>
44
<th>Account ID</th>
@@ -12,7 +12,7 @@
1212
<td><%= exemption[:account_id] %></td>
1313
<td><%= exemption[:customer_usage_type] %></td>
1414
<td>
15-
<%= link_to '<i class="fa fa-times"></i>'.html_safe, remove_exemption_configuration_path(:account_id => exemption[:account_id]), :method => :delete %>
15+
<%= link_to 'Remove'.html_safe, remove_exemption_configuration_path(:account_id => exemption[:account_id]), :method => :delete %>
1616
</td>
1717
</tr>
1818
<% end %>

‎app/views/avatax/configuration/_plugin_form.html.erb‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,48 @@
11
<%= form_tag update_plugin_configuration_path, :class => 'form-horizontal' do %>
2-
<div class="form-group">
3-
<%= label_tag :account_id, 'Account ID', :class => 'col-sm-2 control-label', :data => {:toggle=>"popover", :trigger=> "hover", :content=> "Your AvaTax account number"} %>
4-
<div class="col-sm-10">
2+
<div class="form-group d-flex pb-3">
3+
<%= label_tag :account_id, 'Account ID', :class => 'col-sm-3 control-label', :data => {:toggle=>"popover", :trigger=> "hover", :content=> "Your AvaTax account number"} %>
4+
<div class="col-sm-9">
55
<%= text_field_tag :account_id, @configuration[:account_id], :class => 'form-control', :required => true %>
66
</div>
77
</div>
8-
<div class="form-group">
9-
<%= label_tag :license_key, 'License key', :class => 'col-sm-2 control-label', :data => {:toggle=>"popover", :trigger=> "hover", :content=> "Your AvaTax license key"} %>
10-
<div class="col-sm-10">
8+
<div class="form-group d-flex pb-3">
9+
<%= label_tag :license_key, 'License key', :class => 'col-sm-3 control-label', :data => {:toggle=>"popover", :trigger=> "hover", :content=> "Your AvaTax license key"} %>
10+
<div class="col-sm-9">
1111
<%= text_field_tag :license_key, @configuration[:license_key], :class => 'form-control', :required => true %>
1212
</div>
1313
</div>
14-
<div class="form-group">
15-
<%= label_tag :company_code, 'Company code', :class => 'col-sm-2 control-label', :data => {:toggle=>"popover", :trigger=> "hover", :content=> "Your company code"} %>
16-
<div class="col-sm-10">
14+
<div class="form-group d-flex pb-3">
15+
<%= label_tag :company_code, 'Company code', :class => 'col-sm-3 control-label', :data => {:toggle=>"popover", :trigger=> "hover", :content=> "Your company code"} %>
16+
<div class="col-sm-9">
1717
<%= text_field_tag :company_code, @configuration[:company_code], :class => 'form-control', :required => true %>
1818
</div>
1919
</div>
20-
<div class="form-group">
21-
<div class="col-sm-offset-2 col-sm-10">
20+
<div class="form-group d-flex justify-content-end pb-3 border-bottom mb-3">
21+
<div class="col-sm-9">
2222
<div class="checkbox">
2323
<%= label_tag :commit_documents, 'Commit documents', :class => 'control-label' do %>
2424
<%= check_box_tag :commit_documents, '1', @configuration[:commit_documents] %>Commit documents?
2525
<% end %>
2626
</div>
2727
</div>
2828
</div>
29-
<div class="form-group">
30-
<div class="col-sm-offset-2 col-sm-10">
31-
<%= submit_tag 'Save', :class => 'btn btn-default' %>
32-
</div>
29+
<div class="form-group d-flex justify-content-end pb-3">
30+
<%= render "kaui/components/button/button", {
31+
label: 'Close',
32+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
33+
type: "button",
34+
html_class: "kaui-button custom-hover mx-2",
35+
html_options: {
36+
id: "closeButton",
37+
onclick: "window.history.back();"
38+
}
39+
} %>
40+
<%= render "kaui/components/button/button", {
41+
label: 'Save',
42+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
43+
type: "submit",
44+
html_class: "kaui-dropdown custom-hover",
45+
} %>
3346
</div>
3447
<% end %>
3548

‎app/views/avatax/configuration/_products_form.html.erb‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,36 @@
11
<%= form_tag do_set_tax_code_configuration_path, :class => 'form-horizontal' do %>
2-
<div class="form-group">
3-
<%= label_tag :product_name, 'Product name', :class => 'col-sm-2 control-label' %>
2+
<div class="form-group d-flex pb-3">
3+
<%= label_tag :product_name, 'Product name', :class => 'col-sm-3 control-label' %>
44

5-
<div class="col-sm-10">
5+
<div class="col-sm-9">
66
<%= select_tag :product_name, options_for_select(@products), :class => 'form-control' %>
77
</div>
88
</div>
9-
<div class="form-group">
10-
<%= label_tag :tax_code, 'Tax code', :class => 'col-sm-2 control-label' %>
11-
<div class="col-sm-10">
9+
<div class="form-group d-flex pb-3 border-bottom mb-3">
10+
<%= label_tag :tax_code, 'Tax code', :class => 'col-sm-3 control-label' %>
11+
<div class="col-sm-9">
1212
<%= text_field_tag :tax_code, nil, :class => 'form-control' %>
1313
</div>
1414
</div>
15-
<div class="form-group">
16-
<div class="col-sm-offset-2 col-sm-10">
17-
<%= submit_tag 'Save', :class => 'btn btn-default' %>
18-
</div>
15+
<div class="form-group d-flex justify-content-end pb-3">
16+
<%= render "kaui/components/button/button", {
17+
label: 'Close',
18+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
19+
type: "button",
20+
html_class: "kaui-button custom-hover mx-2",
21+
html_options: {
22+
id: "closeButton",
23+
onclick: "window.history.back();"
24+
}
25+
} %>
26+
<%= render "kaui/components/button/button", {
27+
label: 'Save',
28+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
29+
type: "submit",
30+
html_class: "kaui-dropdown custom-hover",
31+
html_options: {
32+
id: "saveButton"
33+
}
34+
} %>
1935
</div>
2036
<% end %>

‎app/views/avatax/configuration/_products_table.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<table id="products-table" class="table table-condensed table-striped mobile-data">
1+
<table id="products-table" class="configuration-table">
22
<thead>
33
<tr>
44
<th>Product name</th>
@@ -12,7 +12,7 @@
1212
<td><%= tax_code[:productName] %></td>
1313
<td><%= tax_code[:taxCode] %></td>
1414
<td>
15-
<%= link_to '<i class="fa fa-times"></i>'.html_safe, remove_tax_code_configuration_path(:product_name => tax_code[:productName]), :method => :delete %>
15+
<%= link_to 'Remove'.html_safe, remove_tax_code_configuration_path(:product_name => tax_code[:productName]), :method => :delete %>
1616
</td>
1717
</tr>
1818
<% end %>

‎app/views/avatax/configuration/index.html.erb‎

Lines changed: 72 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,77 @@
1-
<div class="search">
2-
3-
<div class="column-block">
4-
5-
<h1>Configured products
6-
<%= link_to '&nbsp;<i class="fa fa-plus-square"></i>'.html_safe, set_tax_code_configuration_path %>
7-
</h1>
8-
9-
<%= render :partial => 'avatax/configuration/products_table', :locals => {:tax_codes => @tax_codes} %>
10-
1+
<div class="kaui-container configuration-index">
2+
<%= render "kaui/components/breadcrumb/breadcrumb" %>
3+
<div class="d-flex " style="gap: 4rem;">
4+
<div class="configuration" style="max-width: '80rem';">
5+
<div class="d-flex flex-column ">
6+
<div class="configuration-header mb-4">
7+
<div class="d-flex align-items-center">
8+
<h2>Configured products</h2>
9+
</div>
10+
<span>
11+
<%= link_to set_tax_code_configuration_path do %>
12+
<%= render "kaui/components/button/button", {
13+
label: "Add Product",
14+
icon: "kaui/plus.svg",
15+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
16+
type: "button",
17+
html_class: "kaui-dropdown custom-hover",
18+
} %>
19+
<% end %>
20+
</span>
21+
</div>
22+
<%= render :partial => 'avatax/configuration/products_table', :locals => {:tax_codes => @tax_codes} %>
23+
</div>
24+
</div>
1125
</div>
26+
</div>
1227

13-
<hr/>
14-
15-
<div class="column-block">
16-
17-
<h1>Exempt accounts
18-
<%= link_to '&nbsp;<i class="fa fa-plus-square"></i>'.html_safe, set_exemption_configuration_path %>
19-
</h1>
20-
21-
<%= render :partial => 'avatax/configuration/exemptions_table', :locals => {:exemptions => @exemptions} %>
22-
28+
<div class="kaui-container configuration-index">
29+
<div class="d-flex " style="gap: 4rem;">
30+
<div class="configuration" style="max-width: '80rem';">
31+
<div class="d-flex flex-column ">
32+
<div class="configuration-header mb-4">
33+
<div class="d-flex align-items-center">
34+
<h2>Exempt accounts</h2>
35+
</div>
36+
<span>
37+
<%= link_to set_exemption_configuration_path do %>
38+
<%= render "kaui/components/button/button", {
39+
label: "Add Exemption",
40+
icon: "kaui/plus.svg",
41+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
42+
type: "button",
43+
html_class: "kaui-dropdown custom-hover",
44+
} %>
45+
<% end %>
46+
</span>
47+
</div>
48+
<%= render :partial => 'avatax/configuration/exemptions_table', :locals => {:exemptions => @exemptions} %>
49+
</div>
50+
</div>
2351
</div>
52+
</div>
2453

25-
26-
<hr/>
27-
28-
<h1><%= link_to 'Plugin configuration', plugin_configuration_path %></h1>
29-
54+
<div class="kaui-container configuration-index">
55+
<div class="d-flex " style="gap: 4rem;">
56+
<div class="configuration" style="max-width: '80rem';">
57+
<div class="d-flex flex-column ">
58+
<div class="configuration-header mb-4">
59+
<div class="d-flex align-items-center">
60+
<h2>Plugin configuration</h2>
61+
</div>
62+
<span>
63+
<%= link_to plugin_configuration_path do %>
64+
<%= render "kaui/components/button/button", {
65+
label: "Update Plugin Configuration",
66+
icon: "kaui/plus.svg",
67+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
68+
type: "button",
69+
html_class: "kaui-dropdown custom-hover",
70+
} %>
71+
<% end %>
72+
</span>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
3077
</div>

‎app/views/avatax/configuration/plugin_configuration.html.erb‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1-
<div class="column-block">
2-
3-
<h1>Plugin configuration</h1>
4-
5-
<%= render :partial => 'avatax/configuration/plugin_form' %>
6-
7-
</div>
1+
<div class="register configure-plugin-configuration-form">
2+
<div class="mx-auto" style="max-width: 37.5rem;">
3+
<h5 class="add-account-title">
4+
<span class="icon-container">
5+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
6+
<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" />
7+
<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" />
8+
</svg>
9+
</span>
10+
Plugin configuration
11+
</h5>
12+
<%= render :partial => 'avatax/configuration/plugin_form' %>
13+
</div>
14+
</div>

‎app/views/avatax/configuration/set_exemption.html.erb‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
<div class="register">
2-
<div class="col-md-8 col-md-offset-2">
3-
4-
<div class="column-block">
5-
<h1>Set exemption</h1>
1+
<div class="register configure-exemption-form">
2+
<div class="mx-auto" style="max-width: 37.5rem;">
3+
<h5 class="add-account-title">
4+
<span class="icon-container">
5+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
6+
<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" />
7+
<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" />
8+
</svg>
9+
</span>
10+
Set exemption
11+
</h5>
612
<%= render 'exemptions_form' %>
7-
</div>
8-
913
</div>
1014
</div>

0 commit comments

Comments
 (0)