Fixing rv calculations

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [0.2.2](https://github.com/ErezNagar/lease-calculator-app/compare/v0.2.1...v0.2.2) - 21/4/2020
+
+### Fixed
+
+- RV calculation when switching between absolute and relative values
+
 ## [0.2.1](https://github.com/ErezNagar/lease-calculator-app/compare/v0.2.0...v0.2.1) - 16/4/2020
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lease-calculator-app",
   "description": "A simple car lease calculator web app",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "repository": {
     "type": "git",

src/CalculatorResults.js

@@ -54,10 +54,7 @@ export default class CalculatorResults extends React.Component {
   };
 
   state = {
-    data: {
-      ...this.props.data,
-      leaseTerm: this.props.data.months,
-    },
+    data: { ...this.props.data },
     results: {},
     isLoading: false,
     isShowData: true,
@@ -82,6 +79,7 @@ export default class CalculatorResults extends React.Component {
       msrpPercentage,
       offMsrp,
       RVValue: leaseCalculator.getRVValue(),
+      RVPercent: leaseCalculator.getRVPercentage(),
       apr: leaseCalculator.getAPR(),
       totalCost: leaseCalculator.getTotalLeaseCost(),
       monthlyPaymentPreTax: leaseCalculator.getMonthlyPaymentPreTax(),
@@ -101,6 +99,8 @@ export default class CalculatorResults extends React.Component {
   debounce = _.debounce((value, field) => {
     const state = { ...this.state };
     state.data[field] = value;
+    // Only the RV percent is editable
+    state.data.isRVPercent = true;
     this.setState(state, () => {
       const results = this.calculateLease(this.state.data);
       if (!results) {
@@ -274,8 +274,8 @@ export default class CalculatorResults extends React.Component {
               </Col>
               <Col className="text-align-left">
                 <InputNumber
-                  defaultValue={this.props.data.months}
-                  onChange={(v) => this.handleChange(v, "months")}
+                  defaultValue={this.props.data.leaseTerm}
+                  onChange={(v) => this.handleChange(v, "leaseTerm")}
                   onPressEnter={this.handleClick}
                   size="large"
                 />
@@ -310,7 +310,7 @@ export default class CalculatorResults extends React.Component {
               </Col>
               <Col span={10} className="text-align-left">
                 <InputNumber
-                  defaultValue={this.props.data.rv}
+                  value={this.state.results.RVPercent}
                   formatter={(value) => `${value}%`}
                   parser={(value) => value.replace("%", "")}
                   onChange={(v) => this.handleChange(v, "rv")}

src/components/screens/Months.js

@@ -6,7 +6,7 @@ const Msrp = (props) => (
   <BaseField
     title="Months"
     description="The length of the lease. More than 36 is less than ideal since usually the manufacturer warranty is for 3 years."
-    fieldName="months"
+    fieldName="leaseTerm"
     placeholder={36}
     prefix={""}
     suffix={""}