first upload all files

Modules/Tax/Resources/assets/admin/js/TaxRate.js

@@ -0,0 +1,80 @@
+export default class {
+    constructor(rateId, rate = {}) {
+        this.rateId = rateId;
+        this.rate = rate;
+    }
+
+    html() {
+        this.html = this.template({ rateId: this.rateId, rate: this.rate });
+
+        this.eventListeners();
+
+        return this.html;
+    }
+
+    updateState() {
+        this.html.find('.country select').trigger('change');
+    }
+
+    template(data) {
+        let template = _.template($('#tax-rate-template').html());
+
+        return $(template(data));
+    }
+
+    eventListeners(html) {
+        this.html.find('.country select').on('change', (e) => {
+            if (e.currentTarget.value) {
+                this.changeState(e.currentTarget.value);
+            }
+        });
+
+        this.html.on('click', '.delete-row', this.delete);
+    }
+
+    changeState(countryCode) {
+        this.getStateField().prop('disabled', true);
+
+        let oldState = this.getStateField().val();
+
+        $.getJSON(route('countries.states.index', countryCode), (states) => {
+            this.getStateField()
+                .replaceWith(this.getStateTemplate(states))
+                .prop('disabled', false);
+
+            if (oldState) {
+                this.getStateField().val(oldState);
+            }
+        });
+    }
+
+    getStateField() {
+        let id = $.escapeSelector(`rates.${this.rateId}.state`);
+
+        return $(`#${id}`);
+    }
+
+    getStateTemplate(states) {
+        if ($.isEmptyObject(states)) {
+            return this.getInputStateTemplate();
+        }
+
+        return this.getSelectStateTemplate(states);
+    }
+
+    getInputStateTemplate() {
+        let template = _.template($('#state-input-template').html());
+
+        return template({ rateId: this.rateId });
+    }
+
+    getSelectStateTemplate(states) {
+        let template = _.template($('#state-select-template').html());
+
+        return template({ rateId: this.rateId, states });
+    }
+
+    delete(e) {
+        $(e.currentTarget).closest('.tax-rate').remove();
+    }
+}

Modules/Tax/Resources/assets/admin/js/TaxRates.js

@@ -0,0 +1,55 @@
+import TaxRate from "./TaxRate";
+
+export default class {
+    constructor() {
+        this.rateCount = 0;
+
+        this.addTaxRates(FleetCart.data['tax_rates']);
+
+        if (this.rateCount === 0) {
+            this.addTaxRate();
+        }
+
+        this.addTaxRatesErrors(FleetCart.errors['tax_rates']);
+
+        this.eventListeners();
+        this.sortable();
+    }
+
+    addTaxRates(rates) {
+        for (let rate of rates) {
+            this.addTaxRate(rate)
+        }
+    }
+
+    addTaxRate(rate = {}) {
+        let textRate = new TaxRate(this.rateCount++, rate);
+
+        $('#tax-rates').append(textRate.html());
+
+        textRate.updateState();
+
+        window.admin.tooltip();
+    }
+
+    addTaxRatesErrors(errors) {
+        for (let key in errors) {
+            let id = $.escapeSelector(key);
+            let parent = $(`#${id}`).parent();
+
+            parent.addClass('has-error');
+            parent.append(`<span class="help-block">${errors[key][0]}</span>`);
+        }
+    }
+
+    eventListeners() {
+        $('#add-new-rate').on('click', () => this.addTaxRate());
+    }
+
+    sortable() {
+        Sortable.create(document.getElementById('tax-rates'), {
+            handle: '.drag-icon',
+            animation: 150,
+        });
+    }
+}

Modules/Tax/Resources/assets/admin/js/main.js

@@ -0,0 +1,5 @@
+import TaxRates from './TaxRates';
+
+window.admin.removeSubmitButtonOffsetOn('#rates');
+
+new TaxRates();

Modules/Tax/Resources/assets/admin/sass/main.scss

@@ -0,0 +1,29 @@
+.tax-class {
+    margin-bottom: 40px;
+}
+
+.tax-rates {
+    .form-group {
+        margin-bottom: 0;
+    }
+
+    .tax-name {
+        min-width: 180px;
+    }
+
+    .country,
+    .state {
+        min-width: 150px;
+    }
+
+    .country select,
+    .state select {
+        width: 100%;
+    }
+
+    .city,
+    .zip,
+    .rate {
+        min-width: 120px;
+    }
+}