From 0ed8cf973d372c3b765e59ff7603485bbbdb7f41 Mon Sep 17 00:00:00 2001 From: Rob Harrington Date: Thu, 19 Nov 2015 08:37:51 +1100 Subject: [PATCH] Adding an example bill calculator to business model config edit page To allow super admin to see the effects of any changes they make to BMC settings --- .../accounts_and_billing_settings.js.coffee | 2 +- app/assets/javascripts/admin/all.js | 1 + .../business_model_configuration.js.coffee | 1 + ...s_model_configuration_controller.js.coffee | 21 ++++ .../directives/watchValueAs.js.coffee | 2 +- app/assets/stylesheets/admin/orders.css.scss | 18 +++ .../edit.html.haml | 107 ++++++++++++------ config/locales/en.yml | 1 + 8 files changed, 119 insertions(+), 34 deletions(-) create mode 100644 app/assets/javascripts/admin/business_model_configuration/business_model_configuration.js.coffee create mode 100644 app/assets/javascripts/admin/business_model_configuration/controllers/business_model_configuration_controller.js.coffee rename app/assets/javascripts/admin/{accounts_and_billing_settings => utils}/directives/watchValueAs.js.coffee (72%) diff --git a/app/assets/javascripts/admin/accounts_and_billing_settings/accounts_and_billing_settings.js.coffee b/app/assets/javascripts/admin/accounts_and_billing_settings/accounts_and_billing_settings.js.coffee index d4f544e300..06ee4fa4ef 100644 --- a/app/assets/javascripts/admin/accounts_and_billing_settings/accounts_and_billing_settings.js.coffee +++ b/app/assets/javascripts/admin/accounts_and_billing_settings/accounts_and_billing_settings.js.coffee @@ -1 +1 @@ -angular.module("admin.accounts_and_billing_settings", []) +angular.module("admin.accounts_and_billing_settings", ["admin.utils"]) diff --git a/app/assets/javascripts/admin/all.js b/app/assets/javascripts/admin/all.js index 30c8e1a7b9..c0fa530626 100644 --- a/app/assets/javascripts/admin/all.js +++ b/app/assets/javascripts/admin/all.js @@ -23,6 +23,7 @@ //= require_tree ../templates/admin //= require ./admin //= require ./accounts_and_billing_settings/accounts_and_billing_settings +//= require ./business_model_configuration/business_model_configuration //= require ./customers/customers //= require ./dropdown/dropdown //= require ./enterprises/enterprises diff --git a/app/assets/javascripts/admin/business_model_configuration/business_model_configuration.js.coffee b/app/assets/javascripts/admin/business_model_configuration/business_model_configuration.js.coffee new file mode 100644 index 0000000000..cecb7c397e --- /dev/null +++ b/app/assets/javascripts/admin/business_model_configuration/business_model_configuration.js.coffee @@ -0,0 +1 @@ +angular.module("admin.businessModelConfiguration", ["admin.utils"]) diff --git a/app/assets/javascripts/admin/business_model_configuration/controllers/business_model_configuration_controller.js.coffee b/app/assets/javascripts/admin/business_model_configuration/controllers/business_model_configuration_controller.js.coffee new file mode 100644 index 0000000000..ca757c673d --- /dev/null +++ b/app/assets/javascripts/admin/business_model_configuration/controllers/business_model_configuration_controller.js.coffee @@ -0,0 +1,21 @@ +angular.module("admin.businessModelConfiguration").controller "BusinessModelConfigCtrl", ($scope, $filter) -> + $scope.turnover = 1000 + + $scope.bill = -> + return $filter('currency')(0) unless $scope.fixed || $scope.rate + Number($scope.fixed) + Number($scope.turnover) * Number($scope.rate) + + $scope.cappedBill = -> + return $scope.bill() if !$scope.cap? || Number($scope.cap) == 0 + Math.min($scope.bill(), Number($scope.cap)) + + $scope.capReached = -> + return "No" if !$scope.cap? || Number($scope.cap) == 0 + if $scope.bill() >= Number($scope.cap) then "Yes" else "No" + + $scope.includedTax = -> + return 0 if !$scope.taxRate? || Number($scope.taxRate) == 0 + ($scope.cappedBill() * Number($scope.taxRate)) + + $scope.total = -> + $scope.cappedBill() + $scope.includedTax() diff --git a/app/assets/javascripts/admin/accounts_and_billing_settings/directives/watchValueAs.js.coffee b/app/assets/javascripts/admin/utils/directives/watchValueAs.js.coffee similarity index 72% rename from app/assets/javascripts/admin/accounts_and_billing_settings/directives/watchValueAs.js.coffee rename to app/assets/javascripts/admin/utils/directives/watchValueAs.js.coffee index a14288db55..701858cd56 100644 --- a/app/assets/javascripts/admin/accounts_and_billing_settings/directives/watchValueAs.js.coffee +++ b/app/assets/javascripts/admin/utils/directives/watchValueAs.js.coffee @@ -1,4 +1,4 @@ -angular.module("admin.accounts_and_billing_settings").directive "watchValueAs", -> +angular.module("admin.utils").directive "watchValueAs", -> restrict: 'A' scope: { value: "=watchValueAs" diff --git a/app/assets/stylesheets/admin/orders.css.scss b/app/assets/stylesheets/admin/orders.css.scss index d91bb28934..4676d93b1a 100644 --- a/app/assets/stylesheets/admin/orders.css.scss +++ b/app/assets/stylesheets/admin/orders.css.scss @@ -56,3 +56,21 @@ div#group_buy_calculation { text-align: center; } } + +.input-symbol { + position: relative; + &.before { + + span { + position: absolute; + transform: translate(0,-50%); + top:50%; + pointer-events:none; + margin-left: 1em; + } + + input { + text-indent:1em; + } + } +} diff --git a/app/views/admin/business_model_configuration/edit.html.haml b/app/views/admin/business_model_configuration/edit.html.haml index 1eb42623ed..09a5949456 100644 --- a/app/views/admin/business_model_configuration/edit.html.haml +++ b/app/views/admin/business_model_configuration/edit.html.haml @@ -6,36 +6,79 @@ = render 'spree/shared/error_messages', target: @settings -%fieldset.no-border-bottom - %legend=t(:monthly_bill_calculation_settings) - = form_for @settings, as: :settings, url: main_app.admin_business_model_configuration_path, :method => :put do |f| - .row - .three.columns.alpha - = f.label :account_invoices_monthly_fixed, t(:fixed_charge) - %span.with-tip.icon-question-sign{'data-powertip' => "A fixed monthly charge for ALL enterprises who are set up as a shop, regardless of how much produce they sell."} - .two.columns - = f.number_field :account_invoices_monthly_fixed, min: 0.0, class: "fullwidth" - .two.columns -   - .three.columns - = f.label :account_invoices_monthly_rate, t(:percentage_of_turnover) - %span.with-tip.icon-question-sign{'data-powertip' => "When greater than zero, this rate (0.0 - 1.0) will be applied to the total turnover of each shop and added to any fixed charges (to the left) to calculate the monthly bill."} - .two.columns.omega - = f.number_field :account_invoices_monthly_rate, min: 0.0, max: 1.0, step: 0.01, class: "fullwidth" - .row - .three.columns.alpha - = f.label :account_invoices_monthly_cap, t(:monthly_cap_excl_tax) - %span.with-tip.icon-question-sign{'data-powertip' => "When greater than zero, this value will be used as a cap on the amount that shops will be charged each month."} - .two.columns - = f.number_field :account_invoices_monthly_cap, min: 0.0, class: "fullwidth" - .two.columns -   - .three.columns - = f.label :account_invoices_tax_rate, t(:tax_rate) - %span.with-tip.icon-question-sign{'data-powertip' => "Tax rate that applies to the the monthly bill that enterprises are charged for using the system."} - .two.columns.omega - = f.number_field :account_invoices_tax_rate, min: 0.0, max: 1.0, step: 0.01, class: "fullwidth" +.row{ ng: { app: 'admin.businessModelConfiguration', controller: "BusinessModelConfigCtrl" } } + .five.columns.omega + %fieldset.no-border-bottom + %legend=t(:bill_calculation_settings) + %p + Adjust the amount that enterprises will be billed each month for use of the OFN. + %br + = form_for @settings, as: :settings, url: main_app.admin_business_model_configuration_path, :method => :put do |f| + .row + .three.columns.alpha + = f.label :account_invoices_monthly_fixed, t(:fixed_monthly_charge) + %span.with-tip.icon-question-sign{'data-powertip' => "A fixed monthly charge for ALL enterprises who are set up as a shop, regardless of how much produce they sell."} + .two.columns.omega + .input-symbol.before + %span= Spree::Money.currency_symbol + = f.number_field :account_invoices_monthly_fixed, min: 0.0, class: "fullwidth", 'watch-value-as' => 'fixed' + .row + .three.columns.alpha + = f.label :account_invoices_monthly_rate, t(:percentage_of_turnover) + %span.with-tip.icon-question-sign{'data-powertip' => "When greater than zero, this rate (0.0 - 1.0) will be applied to the total turnover of each shop and added to any fixed charges (to the left) to calculate the monthly bill."} + .two.columns.omega + = f.number_field :account_invoices_monthly_rate, min: 0.0, max: 1.0, step: 0.01, class: "fullwidth", 'watch-value-as' => 'rate' + .row + .three.columns.alpha + = f.label :account_invoices_monthly_cap, t(:monthly_cap_excl_tax) + %span.with-tip.icon-question-sign{'data-powertip' => "When greater than zero, this value will be used as a cap on the amount that shops will be charged each month."} + .two.columns.omega + .input-symbol.before + %span= Spree::Money.currency_symbol + = f.number_field :account_invoices_monthly_cap, min: 0.0, class: "fullwidth", 'watch-value-as' => 'cap' + .row + .three.columns.alpha + = f.label :account_invoices_tax_rate, t(:tax_rate) + %span.with-tip.icon-question-sign{'data-powertip' => "Tax rate that applies to the the monthly bill that enterprises are charged for using the system."} + .two.columns.omega + = f.number_field :account_invoices_tax_rate, min: 0.0, max: 1.0, step: 0.01, class: "fullwidth", 'watch-value-as' => 'taxRate' - .row - .twelve.columns.alpha.omega.form-buttons{"data-hook" => "buttons"} - = button t(:update), 'icon-refresh', value: "update" + .row + .five.columns.alpha.omega.form-buttons{"data-hook" => "buttons"} + = button t(:update), 'icon-refresh', value: "update" + + .two.columns +   + + .five.columns.alpha + %fieldset.no-border-bottom + %legend=t(:example_bill_calculator) + %p + Alter the example turnover to visualise the effect of the settings to the left. + %br + .row + .three.columns.alpha + = label_tag :turnover, t(:example_monthly_turnover) + %span.with-tip.icon-question-sign{'data-powertip' => "An example monthly turnover for an enterprise which will be used to generate calculate an example monthly bill below."} + .two.columns.omega + .input-symbol.before + %span= Spree::Money.currency_symbol + %input.fullwidth{ id: 'turnover', type: "number", ng: { model: 'turnover' } } + .row + .three.columns.alpha + = label_tag :cap_reached, t(:cap_reached?) + %span.with-tip.icon-question-sign{'data-powertip' => "Whether the cap (specified to the left) has been reached, given the settings and the turnover provided."} + .two.columns.omega + %input.fullwidth{ id: 'cap_reached', type: "text", readonly: true, ng: { value: 'capReached()' } } + .row + .three.columns.alpha + = label_tag :included_tax, t(:included_tax) + %span.with-tip.icon-question-sign{'data-powertip' => "The total tax included in the example monthly bill, given the settings and the turnover provided."} + .two.columns.omega + %input.fullwidth{ id: 'included_tax', type: "text", readonly: true, ng: { value: 'includedTax() | currency' } } + .row + .three.columns.alpha + = label_tag :total_incl_tax, t(:total_monthly_bill_incl_tax) + %span.with-tip.icon-question-sign{'data-powertip' => "The example total monthly bill with tax included, given the settings and the turnover provided."} + .two.columns.omega + %input.fullwidth{ id: 'total_incl_tax', type: "text", readonly: true, ng: { value: 'total() | currency' } } diff --git a/config/locales/en.yml b/config/locales/en.yml index 913a9c7657..c9df13af92 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -38,6 +38,7 @@ en: per_month: "per month" free: "free" plus_tax: "plus GST" + total_monthly_bill_incl_tax: "Total Monthly Bill (Incl. Tax)" sort_order_cycles_on_shopfront_by: "Sort Order Cycles On Shopfront By"