@stokr/components-library 2.3.58-beta.5 → 2.3.58-beta.7

package/dist/components/ROI/ROIParkingo.js

@@ -18,47 +18,23 @@ var _ROIChart = _interopRequireDefault(require("./ROIChart"));
 var _ROIModal = _interopRequireDefault(require("./ROIModal"));
 var _componentsLibrary = require("@stokr/components-library");
 var _ui = require("components/ui");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var PANEL = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const PANEL = {
   FORECAST_SCENARIO: 'forecast_scenario',
   PROFITPAYMENT_SCENARIO: 'profitpayment_scenario'
 };
 
 // let lastStoredGain, payoutCheck
 // let userCumPayout
-var ROIParkingo = /*#__PURE__*/function (_PureComponent) {
-  _inherits(ROIParkingo, _PureComponent);
-  var _super = _createSuper(ROIParkingo);
-  function ROIParkingo() {
-    var _this;
-    _classCallCheck(this, ROIParkingo);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
+
+class ROIParkingo extends _react.PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
       totalInvestment: 100,
       years: 6,
       // Default selected years
@@ -69,288 +45,276 @@ var ROIParkingo = /*#__PURE__*/function (_PureComponent) {
       gain: null,
       cumulativePayout: 0
     });
-    _defineProperty(_assertThisInitialized(_this), "handleTotalInvestmentChange", function (value) {
-      _this.setState({
+    _defineProperty(this, "handleTotalInvestmentChange", value => {
+      this.setState({
         totalInvestment: value
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "handleYearsChange", function (value) {
-      _this.setState({
+    _defineProperty(this, "handleYearsChange", value => {
+      this.setState({
         years: value
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "handleForecastChange", function (e) {
-      _this.setState({
+    _defineProperty(this, "handleForecastChange", e => {
+      this.setState({
         forecast: e.target.value
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "handleProfitpaymentChange", function (e) {
-      _this.setState({
+    _defineProperty(this, "handleProfitpaymentChange", e => {
+      this.setState({
         profitpayment: e.target.value
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "togglePanel", function (panelId) {
-      var extendedPanel = _this.state.extendedPanel;
-      _this.setState({
+    _defineProperty(this, "togglePanel", panelId => {
+      const {
+        extendedPanel
+      } = this.state;
+      this.setState({
         extendedPanel: extendedPanel !== panelId ? panelId : null
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "toggleModal", function (isModalOpen) {
-      _this.setState({
-        isModalOpen: isModalOpen
+    _defineProperty(this, "toggleModal", isModalOpen => {
+      this.setState({
+        isModalOpen
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "generateChartData", function () {
-      var _this$state = _this.state,
-        years = _this$state.years,
-        totalInvestment = _this$state.totalInvestment;
+    _defineProperty(this, "generateChartData", () => {
+      const {
+        years,
+        totalInvestment
+      } = this.state;
 
       /* calculation variables for company scenario start */
-      var revenueForCompanyScenario = [653069, 3084549, 7796537, 15253860, 25438310, 31511615, 36698241, 42010258, 44110771, 46316309];
-      var payoutForCompanyScenario = [300000, 308455, 779654, 1525386, 2543831, 3151162, 3669824, 2921689, 441108, 463163];
-      var fullNumberOfTokens = 15000000;
+      const revenueForCompanyScenario = [653069, 3084549, 7796537, 15253860, 25438310, 31511615, 36698241, 42010258, 44110771, 46316309];
+      const payoutForCompanyScenario = [300000, 308455, 779654, 1525386, 2543831, 3151162, 3669824, 2921689, 441108, 463163];
+      const fullNumberOfTokens = 15000000;
 
       /* calculation variables for company scenario end */
 
       /* calculation variables for conservative, industry average, positive start */
 
-      var cagr = 0.094;
-      var lastValueConservative, lastValueIndustryAverage, lastValuePositive;
-      var conservativeRevenueArray = [653069, 3084549];
-      var conservativePayoutArray = [300000, 308455];
-      var industryAverageRevenueArray = [653069, 3084549];
-      var industryAveragePayoutArray = [300000, 308455];
-      var positiveRevenueArray = [653069, 3084549];
-      var positivePayoutArray = [300000, 308455];
-      if (_this.state.forecast === 'conservative') {
-        var loopVar = 2;
+      const cagr = 0.094;
+      let lastValueConservative, lastValueIndustryAverage, lastValuePositive;
+      let conservativeRevenueArray = [653069, 3084549];
+      let conservativePayoutArray = [300000, 308455];
+      let industryAverageRevenueArray = [653069, 3084549];
+      let industryAveragePayoutArray = [300000, 308455];
+      let positiveRevenueArray = [653069, 3084549];
+      let positivePayoutArray = [300000, 308455];
+      if (this.state.forecast === 'conservative') {
+        let loopVar = 2;
         while (loopVar < 10) {
           lastValueConservative = conservativeRevenueArray[loopVar - 1];
-          var calculateConservativeRevenue = Math.round(0.67 * cagr * lastValueConservative + lastValueConservative);
-          var calculateConservativePayout = calculateConservativeRevenue * 0.1;
+          let calculateConservativeRevenue = Math.round(0.67 * cagr * lastValueConservative + lastValueConservative);
+          let calculateConservativePayout = calculateConservativeRevenue * 0.1;
           conservativeRevenueArray.push(calculateConservativeRevenue);
           conservativePayoutArray.push(calculateConservativePayout);
           loopVar++;
         }
       }
-      if (_this.state.forecast === 'industryAverage') {
-        var _loopVar = 2;
-        while (_loopVar < 10) {
-          lastValueIndustryAverage = industryAverageRevenueArray[_loopVar - 1];
-          var calculateIndustryAverageRevenue = Math.round(cagr * lastValueIndustryAverage + lastValueIndustryAverage);
-          var calculateIndustryAveragePayout = calculateIndustryAverageRevenue * 0.1;
+      if (this.state.forecast === 'industryAverage') {
+        let loopVar = 2;
+        while (loopVar < 10) {
+          lastValueIndustryAverage = industryAverageRevenueArray[loopVar - 1];
+          let calculateIndustryAverageRevenue = Math.round(cagr * lastValueIndustryAverage + lastValueIndustryAverage);
+          let calculateIndustryAveragePayout = calculateIndustryAverageRevenue * 0.1;
           industryAverageRevenueArray.push(calculateIndustryAverageRevenue);
           industryAveragePayoutArray.push(calculateIndustryAveragePayout);
-          _loopVar++;
+          loopVar++;
         }
       }
-      if (_this.state.forecast === 'positive') {
-        var _loopVar2 = 2;
-        while (_loopVar2 < 10) {
-          lastValuePositive = positiveRevenueArray[_loopVar2 - 1];
-          var calculatePositiveRevenue = Math.round(1.5 * cagr * lastValuePositive + lastValuePositive);
-          var calculatePositivePayout = calculatePositiveRevenue * 0.1;
+      if (this.state.forecast === 'positive') {
+        let loopVar = 2;
+        while (loopVar < 10) {
+          lastValuePositive = positiveRevenueArray[loopVar - 1];
+          let calculatePositiveRevenue = Math.round(1.5 * cagr * lastValuePositive + lastValuePositive);
+          let calculatePositivePayout = calculatePositiveRevenue * 0.1;
           positiveRevenueArray.push(calculatePositiveRevenue);
           positivePayoutArray.push(calculatePositivePayout);
-          _loopVar2++;
+          loopVar++;
         }
       }
-      var cumulativePayout = 0;
-      var arrayResult = _toConsumableArray(Array(years).fill({})).map(function (_, index) {
+      let cumulativePayout = 0;
+      const arrayResult = [...Array(years).fill({})].map((_, index) => {
         // const factor = index >= 0 ? index : index - 1
-        var profit, gain, formattedRevenue, formattedPayout;
-        if (_this.state.forecast === 'companyScenario') {
+        let profit, gain, formattedRevenue, formattedPayout;
+        if (this.state.forecast === 'companyScenario') {
           formattedRevenue = (0, _componentsLibrary.km_ify)(revenueForCompanyScenario[index]);
           formattedPayout = (0, _componentsLibrary.km_ify)(payoutForCompanyScenario[index]);
           profit = revenueForCompanyScenario[index];
           gain = payoutForCompanyScenario[index];
-        } else if (_this.state.forecast === 'conservative') {
+        } else if (this.state.forecast === 'conservative') {
           formattedRevenue = (0, _componentsLibrary.km_ify)(conservativeRevenueArray[index]);
           formattedPayout = (0, _componentsLibrary.km_ify)(conservativePayoutArray[index]);
           profit = conservativeRevenueArray[index];
           gain = conservativePayoutArray[index];
-        } else if (_this.state.forecast === 'industryAverage') {
+        } else if (this.state.forecast === 'industryAverage') {
           formattedRevenue = (0, _componentsLibrary.km_ify)(industryAverageRevenueArray[index]);
           formattedPayout = (0, _componentsLibrary.km_ify)(industryAveragePayoutArray[index]);
           profit = industryAverageRevenueArray[index];
           gain = industryAveragePayoutArray[index];
-        } else if (_this.state.forecast === 'positive') {
+        } else if (this.state.forecast === 'positive') {
           formattedRevenue = (0, _componentsLibrary.km_ify)(positiveRevenueArray[index]);
           formattedPayout = (0, _componentsLibrary.km_ify)(positivePayoutArray[index]);
           profit = positiveRevenueArray[index];
           gain = positivePayoutArray[index];
         }
-        var payoutForUser = gain / fullNumberOfTokens * totalInvestment;
+        let payoutForUser = gain / fullNumberOfTokens * totalInvestment;
         payoutForUser = payoutForUser.toFixed(2);
         cumulativePayout += parseFloat(payoutForUser);
         return {
           year: "".concat(index + 1, "y"),
-          profit: profit,
-          gain: gain,
+          profit,
+          gain,
           tooltip: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ROI.TooltipTitle, null, "YEAR ".concat(index + 1)), /*#__PURE__*/_react.default.createElement(_ROI.TooltipContent, null, "ESTIMATED PAYOUTS: \u20AC ".concat(formattedPayout), /*#__PURE__*/_react.default.createElement("br", null), "ESTIMATED REVENUE: \u20AC ".concat(formattedRevenue), /*#__PURE__*/_react.default.createElement("br", null), "PAYOUT FOR YOU: \u20AC ".concat(payoutForUser)))
         };
       });
       return {
-        arrayResult: arrayResult,
+        arrayResult,
         cumulativePayout: cumulativePayout.toFixed(2)
       };
     });
-    return _this;
   }
-  _createClass(ROIParkingo, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var chartData = this.generateChartData();
+  componentDidMount() {
+    const chartData = this.generateChartData();
+    this.setState({
+      chartData: chartData.arrayResult,
+      cumulativePayout: chartData.cumulativePayout
+    });
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      years,
+      totalInvestment,
+      forecast
+    } = this.state;
+    if (prevState.years !== years || prevState.totalInvestment !== totalInvestment || prevState.forecast !== forecast) {
+      const chartData = this.generateChartData();
       this.setState({
         chartData: chartData.arrayResult,
         cumulativePayout: chartData.cumulativePayout
       });
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var _this$state2 = this.state,
-        years = _this$state2.years,
-        totalInvestment = _this$state2.totalInvestment,
-        forecast = _this$state2.forecast;
-      if (prevState.years !== years || prevState.totalInvestment !== totalInvestment || prevState.forecast !== forecast) {
-        var chartData = this.generateChartData();
-        this.setState({
-          chartData: chartData.arrayResult,
-          cumulativePayout: chartData.cumulativePayout
-        });
-      }
+  }
+  render() {
+    const {
+      totalInvestment,
+      years,
+      extendedPanel,
+      forecast,
+      isModalOpen,
+      chartData,
+      cumulativePayout
+    } = this.state;
+    const companyScenarioCumPayout = [300000, 608455, 1388109, 2913495, 5457326, 8608488, 12278312, 15200001, 15641109, 16104272];
+    const conservativeCumPayout = [300000, 608455, 936336, 1284868, 1655350, 2049164, 2467782, 2912763, 3385770, 3888567];
+    const industryAverageCumPayout = [300000, 608455, 945905, 1315074, 1718946, 2160782, 2644151, 3172956, 3751468, 4384361];
+    const positiveCumPayout = [300000, 608455, 960402, 1361974, 1820167, 2342965, 2939478, 3620099, 4396688, 5282776];
+    let cumTotalPayout;
+    if (this.state.forecast === 'companyScenario') {
+      cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(companyScenarioCumPayout[years - 1]));
+    } else if (this.state.forecast === 'conservative') {
+      cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(conservativeCumPayout[years - 1]));
+    } else if (this.state.forecast === 'industryAverage') {
+      cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(industryAverageCumPayout[years - 1]));
+    } else if (this.state.forecast === 'positive') {
+      cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(positiveCumPayout[years - 1]));
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$state3 = this.state,
-        totalInvestment = _this$state3.totalInvestment,
-        years = _this$state3.years,
-        extendedPanel = _this$state3.extendedPanel,
-        forecast = _this$state3.forecast,
-        isModalOpen = _this$state3.isModalOpen,
-        chartData = _this$state3.chartData,
-        cumulativePayout = _this$state3.cumulativePayout;
-      var companyScenarioCumPayout = [300000, 608455, 1388109, 2913495, 5457326, 8608488, 12278312, 15200001, 15641109, 16104272];
-      var conservativeCumPayout = [300000, 608455, 936336, 1284868, 1655350, 2049164, 2467782, 2912763, 3385770, 3888567];
-      var industryAverageCumPayout = [300000, 608455, 945905, 1315074, 1718946, 2160782, 2644151, 3172956, 3751468, 4384361];
-      var positiveCumPayout = [300000, 608455, 960402, 1361974, 1820167, 2342965, 2939478, 3620099, 4396688, 5282776];
-      var cumTotalPayout;
-      if (this.state.forecast === 'companyScenario') {
-        cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(companyScenarioCumPayout[years - 1]));
-      } else if (this.state.forecast === 'conservative') {
-        cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(conservativeCumPayout[years - 1]));
-      } else if (this.state.forecast === 'industryAverage') {
-        cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(industryAverageCumPayout[years - 1]));
-      } else if (this.state.forecast === 'positive') {
-        cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(positiveCumPayout[years - 1]));
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, {
+      style: {
+        width: '100%'
       }
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, {
-        style: {
-          width: '100%'
-        }
-      }, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
-        part: 7,
-        style: {
-          width: '50%'
-        },
-        roiColumn: true
-      }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-        noPaddingHorizontal: true
-      }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-        noPaddingTop: true,
-        noPaddingHorizontal: true
-      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement(_ROI.Title, null, "Return on investment tool"), /*#__PURE__*/_react.default.createElement(_ui.RichText, {
-        style: {
-          paddingLeft: '56px'
-        }
-      }, "Gain a basic understanding of how an investment could possibly develop. This data and estimations are provided by ParkinGO. For your safety\u2019s sake, always make your own calculations."))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-        noPaddingHorizontal: true
-      }, /*#__PURE__*/_react.default.createElement(_ROI.Label, null, "YOUR INVESTMENT"), /*#__PURE__*/_react.default.createElement(_ROI.Value, null, "\u20AC ".concat(totalInvestment)), /*#__PURE__*/_react.default.createElement(_RangeInput.default, {
-        id: "totalInvestmentRange",
-        name: "totalInvestmentRange",
-        value: totalInvestment,
-        min: 100,
-        max: 100000,
-        step: 100,
-        onChange: this.handleTotalInvestmentChange
-      })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-        noPaddingTop: true,
-        noPaddingHorizontal: true
-      }, /*#__PURE__*/_react.default.createElement(_ROI.Label, null, "Years"), /*#__PURE__*/_react.default.createElement(_ROI.Value, null, years), /*#__PURE__*/_react.default.createElement(_RangeInput.default, {
-        id: "yearsRange",
-        name: "yearsRange",
-        value: years,
-        min: 1,
-        max: 10,
-        onChange: this.handleYearsChange
-      })))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-        noPadding: true,
-        borderTop: true
-      }, /*#__PURE__*/_react.default.createElement(_ExpandButton.default, {
-        title: "FORECAST SCENARIO",
-        textLeft: true,
-        isOpened: extendedPanel === PANEL.FORECAST_SCENARIO,
-        onClick: function onClick() {
-          return _this2.togglePanel(PANEL.FORECAST_SCENARIO);
-        }
-      }), /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
-        isOpened: extendedPanel === PANEL.FORECAST_SCENARIO
-      }, /*#__PURE__*/_react.default.createElement(_ROI.TabContainer, {
-        borderTop: true
-      }, /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.default, {
-        title: "Company Scenario",
-        subtitle: "Earnings forecast",
-        tooltip: "Revenues that ParkinGO forecasts",
-        radio: {
-          id: 'companyScenario',
-          value: 'companyScenario',
-          name: 'roiForecast',
-          checked: forecast === 'companyScenario',
-          onChange: this.handleForecastChange
-        }
-      }))))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
-        part: 9,
-        withBorder: true,
-        style: {
-          width: '50%'
-        },
-        roiColumn: true
-      }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-        style: {
-          paddingBottom: '5rem'
-        }
-      }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-        noPaddingHorizontal: true
-      }, chartData && /*#__PURE__*/_react.default.createElement(_ROIChart.default, {
-        id: "roichart",
-        data: chartData
-      })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-        noPaddingHorizontal: true,
-        noPaddingTop: true
-      }, /*#__PURE__*/_react.default.createElement(_ROI.Label, null, "INVESTMENT RESULTS"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemsRow, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
-        part: 1,
-        full: 3
-      }, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemTitle, null, "CUMULATIVE PAYOUT FOR YOU"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContent, null, cumulativePayout ? '€ ' + cumulativePayout : '-'))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
-        part: 1,
-        full: 3
-      }, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemTitle, null, "CUMULATIVE TOTAL PAYOUT"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContent, null, "\u20AC ", cumTotalPayout))))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-        noPadding: true
-      }, /*#__PURE__*/_react.default.createElement(_TextLink.TextButton, {
-        onClick: function onClick() {
-          return _this2.toggleModal(true);
-        }
-      }, "CHECK HOW WE CALCULATE THIS"))))), /*#__PURE__*/_react.default.createElement(_ROIModal.default, {
-        isModalOpen: isModalOpen,
-        onModalClose: function onModalClose() {
-          return _this2.toggleModal(false);
-        }
-      }));
-    }
-  }]);
-  return ROIParkingo;
-}(_react.PureComponent);
-var _default = ROIParkingo;
-exports.default = _default;
+    }, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+      part: 7,
+      style: {
+        width: '50%'
+      },
+      roiColumn: true
+    }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      noPaddingTop: true,
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement(_ROI.Title, null, "Return on investment tool"), /*#__PURE__*/_react.default.createElement(_ui.RichText, {
+      style: {
+        paddingLeft: '56px'
+      }
+    }, "Gain a basic understanding of how an investment could possibly develop. This data and estimations are provided by ParkinGO. For your safety\u2019s sake, always make your own calculations."))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/_react.default.createElement(_ROI.Label, null, "YOUR INVESTMENT"), /*#__PURE__*/_react.default.createElement(_ROI.Value, null, "\u20AC ".concat(totalInvestment)), /*#__PURE__*/_react.default.createElement(_RangeInput.default, {
+      id: "totalInvestmentRange",
+      name: "totalInvestmentRange",
+      value: totalInvestment,
+      min: 100,
+      max: 100000,
+      step: 100,
+      onChange: this.handleTotalInvestmentChange
+    })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      noPaddingTop: true,
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/_react.default.createElement(_ROI.Label, null, "Years"), /*#__PURE__*/_react.default.createElement(_ROI.Value, null, years), /*#__PURE__*/_react.default.createElement(_RangeInput.default, {
+      id: "yearsRange",
+      name: "yearsRange",
+      value: years,
+      min: 1,
+      max: 10,
+      onChange: this.handleYearsChange
+    })))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      noPadding: true,
+      borderTop: true
+    }, /*#__PURE__*/_react.default.createElement(_ExpandButton.default, {
+      title: "FORECAST SCENARIO",
+      textLeft: true,
+      isOpened: extendedPanel === PANEL.FORECAST_SCENARIO,
+      onClick: () => this.togglePanel(PANEL.FORECAST_SCENARIO)
+    }), /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
+      isOpened: extendedPanel === PANEL.FORECAST_SCENARIO
+    }, /*#__PURE__*/_react.default.createElement(_ROI.TabContainer, {
+      borderTop: true
+    }, /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.default, {
+      title: "Company Scenario",
+      subtitle: "Earnings forecast",
+      tooltip: "Revenues that ParkinGO forecasts",
+      radio: {
+        id: 'companyScenario',
+        value: 'companyScenario',
+        name: 'roiForecast',
+        checked: forecast === 'companyScenario',
+        onChange: this.handleForecastChange
+      }
+    }))))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+      part: 9,
+      withBorder: true,
+      style: {
+        width: '50%'
+      },
+      roiColumn: true
+    }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      style: {
+        paddingBottom: '5rem'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      noPaddingHorizontal: true
+    }, chartData && /*#__PURE__*/_react.default.createElement(_ROIChart.default, {
+      id: "roichart",
+      data: chartData
+    })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      noPaddingHorizontal: true,
+      noPaddingTop: true
+    }, /*#__PURE__*/_react.default.createElement(_ROI.Label, null, "INVESTMENT RESULTS"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemsRow, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+      part: 1,
+      full: 3
+    }, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemTitle, null, "CUMULATIVE PAYOUT FOR YOU"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContent, null, cumulativePayout ? '€ ' + cumulativePayout : '-'))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+      part: 1,
+      full: 3
+    }, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemTitle, null, "CUMULATIVE TOTAL PAYOUT"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContent, null, "\u20AC ", cumTotalPayout))))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      noPadding: true
+    }, /*#__PURE__*/_react.default.createElement(_TextLink.TextButton, {
+      onClick: () => this.toggleModal(true)
+    }, "CHECK HOW WE CALCULATE THIS"))))), /*#__PURE__*/_react.default.createElement(_ROIModal.default, {
+      isModalOpen: isModalOpen,
+      onModalClose: () => this.toggleModal(false)
+    }));
+  }
+}
+var _default = exports.default = ROIParkingo;