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;
+    }
+}

Modules/Tax/Resources/lang/en/attributes.php

@@ -0,0 +1,16 @@
+<?php
+
+return [
+    'label' => 'Tax Class',
+    'based_on' => 'Based On',
+    'name' => 'Tax Name',
+    'country' => 'Country',
+    'state' => 'State',
+    'city' => 'City',
+    'zip' => 'Zip',
+    'rate' => 'Rate %',
+
+    // Validation
+    'rates.*.name' => 'Tax Name',
+    'rates.*.rate' => 'Rate',
+];

Modules/Tax/Resources/lang/en/permissions.php

@@ -0,0 +1,10 @@
+<?php
+
+return [
+    'taxes' => [
+        'index' => 'Index Tax',
+        'create' => 'Create Tax',
+        'edit' => 'Edit Tax',
+        'destroy' => 'Delete Tax',
+    ],
+];

Modules/Tax/Resources/lang/en/sidebar.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+    'taxes' => 'Taxes',
+];

Modules/Tax/Resources/lang/en/taxes.php

@@ -0,0 +1,27 @@
+<?php
+
+use Modules\Tax\Entities\TaxClass;
+
+return [
+    'tax' => 'Tax',
+    'taxes' => 'Taxes',
+    'table' => [
+        'tax_class' => 'Tax Class',
+    ],
+    'tabs' => [
+        'group' => [
+            'tax_information' => 'Tax Information',
+        ],
+        'general' => 'General',
+        'rates' => 'Rates',
+    ],
+    'form' => [
+        'add_new_rate' => 'Add New Rate',
+        'delete_rate' => 'Delete Rate',
+        'based_on' => [
+            TaxClass::SHIPPING_ADDRESS => 'Shipping Address',
+            TaxClass::BILLING_ADDRESS => 'Billing Address',
+            TaxClass::STORE_ADDRESS => 'Store Address',
+        ],
+    ],
+];

Modules/Tax/Resources/views/admin/taxes/create.blade.php

@@ -0,0 +1,18 @@
+@extends('admin::layout')
+
+@component('admin::components.page.header')
+    @slot('title', trans('admin::resource.create', ['resource' => trans('tax::taxes.tax')]))
+
+    <li><a href="{{ route('admin.taxes.index') }}">{{ trans('tax::taxes.taxes') }}</a></li>
+    <li class="active">{{ trans('admin::resource.create', ['resource' => trans('tax::taxes.tax')]) }}</li>
+@endcomponent
+
+@section('content')
+    <form method="POST" action="{{ route('admin.taxes.store') }}" class="form-horizontal" id="tax-create-form" novalidate>
+        {{ csrf_field() }}
+
+        {!! $tabs->render(compact('taxClass')) !!}
+    </form>
+@endsection
+
+@include('tax::admin.taxes.partials.shortcuts')

Modules/Tax/Resources/views/admin/taxes/edit.blade.php

@@ -0,0 +1,20 @@
+@extends('admin::layout')
+
+@component('admin::components.page.header')
+    @slot('title', trans('admin::resource.edit', ['resource' => trans('tax::taxes.tax')]))
+    @slot('subtitle', $taxClass->title)
+
+    <li><a href="{{ route('admin.taxes.index') }}">{{ trans('tax::taxes.taxes') }}</a></li>
+    <li class="active">{{ trans('admin::resource.edit', ['resource' => trans('tax::taxes.tax')]) }}</li>
+@endcomponent
+
+@section('content')
+    <form method="POST" action="{{ route('admin.taxes.update', $taxClass) }}" class="form-horizontal" id="tax-edit-form" novalidate>
+        {{ csrf_field() }}
+        {{ method_field('put') }}
+
+        {!! $tabs->render(compact('taxClass')) !!}
+    </form>
+@endsection
+
+@include('tax::admin.taxes.partials.shortcuts')

Modules/Tax/Resources/views/admin/taxes/index.blade.php

@@ -0,0 +1,38 @@
+@extends('admin::layout')
+
+@component('admin::components.page.header')
+    @slot('title', trans('tax::taxes.taxes'))
+
+    <li class="active">{{ trans('tax::taxes.taxes') }}</li>
+@endcomponent
+
+@component('admin::components.page.index_table')
+    @slot('buttons', ['create'])
+    @slot('resource', 'taxes')
+    @slot('name', trans('tax::taxes.tax'))
+
+    @component('admin::components.table')
+        @slot('thead')
+            <tr>
+                @include('admin::partials.table.select_all')
+
+                <th>{{ trans('admin::admin.table.id') }}</th>
+                <th>{{ trans('tax::taxes.table.tax_class') }}</th>
+                <th data-sort>{{ trans('admin::admin.table.created') }}</th>
+            </tr>
+        @endslot
+    @endcomponent
+@endcomponent
+
+@push('scripts')
+    <script>
+        new DataTable('#taxes-table .table', {
+            columns: [
+                { data: 'checkbox', orderable: false, searchable: false, width: '3%' },
+                { data: 'id', width: '5%' },
+                { data: 'label', name: 'translations.label', orderable: false, defaultContent: '' },
+                { data: 'created', name: 'created_at' },
+            ],
+        });
+    </script>
+@endpush

Modules/Tax/Resources/views/admin/taxes/partials/shortcuts.blade.php

@@ -0,0 +1,14 @@
+@push('shortcuts')
+    <dl class="dl-horizontal">
+        <dt><code>b</code></dt>
+        <dd>{{ trans('admin::admin.shortcuts.back_to_index', ['name' => trans('tax::taxes.tax')]) }}</dd>
+    </dl>
+@endpush
+
+@push('scripts')
+    <script>
+        keypressAction([
+            { key: 'b', route: "{{ route('admin.taxes.index') }}" }
+        ]);
+    </script>
+@endpush

Modules/Tax/Resources/views/admin/taxes/tabs/general.blade.php

@@ -0,0 +1,6 @@
+<div class="row">
+    <div class="col-md-8">
+        {{ Form::text('label', trans('tax::attributes.label'), $errors, $taxClass, ['required' => true]) }}
+        {{ Form::select('based_on', trans('tax::attributes.based_on'), $errors, trans('tax::taxes.form.based_on'), $taxClass, ['required' => true]) }}
+    </div>
+</div>

Modules/Tax/Resources/views/admin/taxes/tabs/rates.blade.php

@@ -0,0 +1,37 @@
+<div class="tax-rates-wrapper">
+    <div class="table-responsive">
+        <table class="options tax-rates table table-bordered">
+            <thead>
+                <tr>
+                    <th></th>
+                    <th>{{ trans('tax::attributes.name') }}</th>
+                    <th>{{ trans('tax::attributes.country') }}</th>
+                    <th class="state">{{ trans('tax::attributes.state') }}</th>
+                    <th class="city">{{ trans('tax::attributes.city') }}</th>
+                    <th class="zip">{{ trans('tax::attributes.zip') }}</th>
+                    <th class="rate">{{ trans('tax::attributes.rate') }}</th>
+                    <th></th>
+                </tr>
+            </thead>
+
+            <tbody id="tax-rates">
+                {{-- Tax rate row will be added here dynamically using JS --}}
+            </tbody>
+        </table>
+    </div>
+
+    <button type="button" class="btn btn-default m-b-15" id="add-new-rate">
+        {{ trans('tax::taxes.form.add_new_rate') }}
+    </button>
+</div>
+
+@include('tax::admin.taxes.tabs.templates.rate')
+@include('tax::admin.taxes.tabs.templates.state_input')
+@include('tax::admin.taxes.tabs.templates.state_select')
+
+@push('globals')
+    <script>
+        FleetCart.data['tax_rates'] = {!! old_json('rates', $taxClass->taxRates) !!};
+        FleetCart.errors['tax_rates'] = @json($errors->get('rates.*'), JSON_FORCE_OBJECT);
+    </script>
+@endpush

Modules/Tax/Resources/views/admin/taxes/tabs/templates/rate.blade.php

@@ -0,0 +1,50 @@
+<script type="text/html" id="tax-rate-template">
+    <tr class="tax-rate">
+        <td class="text-center">
+            <span class="drag-icon">
+                <i class="fa">&#xf142;</i>
+                <i class="fa">&#xf142;</i>
+            </span>
+        </td>
+
+        <td class="tax-name">
+            <input type="hidden" name="rates[<%- rateId %>][id]" value="<%- rate.id %>">
+
+            <input type="text" name="rates[<%- rateId %>][name]" value="<%- rate.name %>" class="form-control" id="rates.<%- rateId %>.name">
+        </td>
+
+        <td class="country">
+            <select class="custom-select-black" name="rates[<%- rateId %>][country]" id="rates.<%- rateId %>.country">
+                <option value="">{{ trans('admin::admin.form.please_select') }}</option>
+
+                @foreach ($countries as $code => $name)
+                    <option value="{{ $code }}" <%= rate.country === '{{ $code }}' ? 'selected' : '' %>>
+                        {{ $name }}
+                    </option>
+                @endforeach
+            </select>
+        </td>
+
+        <td class="state">
+            <input type="text" name="rates[<%- rateId %>][state]" value="<%- rate.state %>" class="form-control" id="rates.<%- rateId %>.state" placeholder="*">
+        </td>
+
+        <td class="city">
+            <input type="text" name="rates[<%- rateId %>][city]" value="<%- rate.city %>" class="form-control" id="rates.<%- rateId %>.city" placeholder="*">
+        </td>
+
+        <td class="zip">
+            <input type="text" name="rates[<%- rateId %>][zip]" value="<%- rate.zip %>" class="form-control" id="rates.<%- rateId %>.zip" placeholder="*">
+        </td>
+
+        <td class="rate">
+            <input type="number" name="rates[<%- rateId %>][rate]" value="<%- rate.rate %>" step="0.01" min="0" class="form-control" id="rates.<%- rateId %>.rate">
+        </td>
+
+        <td class="text-center">
+            <button type="button" class="btn btn-default delete-row" data-toggle="tooltip" title="{{ trans('tax::taxes.form.delete_rate') }}">
+                <i class="fa fa-trash"></i>
+            </button>
+        </td>
+    </tr>
+</script>

Modules/Tax/Resources/views/admin/taxes/tabs/templates/state_input.blade.php

@@ -0,0 +1,3 @@
+<script type="text/html" id="state-input-template">
+    <input type="text" name="rates[<%- rateId %>][state]" class="form-control" id="rates.<%- rateId %>.state" placeholder="*">
+</script>

Modules/Tax/Resources/views/admin/taxes/tabs/templates/state_select.blade.php

@@ -0,0 +1,9 @@
+<script type="text/html" id="state-select-template">
+    <select name="rates[<%- rateId %>][state]" class="form-control custom-select-black" id="rates.<%- rateId %>.state">
+        <option value="">{{ trans('admin::admin.form.please_select') }}</option>
+
+        <% _.forEach(states, function (state, code) { %>
+            <option value="<%- code %>"><%- state %></option>
+        <% }); %>
+    </select>
+</script>