@stokr/components-library
Version:
STOKR - Components Library
276 lines (275 loc) • 13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ROI = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactCollapse = require("react-collapse");
var _Grid = require("../Grid/Grid.styles");
var _Text = _interopRequireDefault(require("../Text/Text.styles"));
var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
var _RangeInput = _interopRequireDefault(require("../Input/RangeInput"));
var _ExpandButton = _interopRequireDefault(require("../ExpandButton/ExpandButton"));
var _TextLink = require("../TextLink/TextLink.styles");
var _ROI2 = require("./ROI.styles");
var _ROIScenarioBox = _interopRequireDefault(require("./ROIScenarioBox"));
var _ROIChart = _interopRequireDefault(require("./ROIChart"));
var _ROIModal = _interopRequireDefault(require("./ROIModal"));
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'
};
class ROI extends _react.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "state", {
totalInvestment: 1000,
years: 1,
extendedPanel: null,
forecast: 'roiForecast01',
profitpayment: 'profitpayment01',
isModalOpen: false
});
_defineProperty(this, "handleTotalInvestmentChange", value => {
this.setState({
totalInvestment: value
});
});
_defineProperty(this, "handleYearsChange", value => {
this.setState({
years: value
});
});
_defineProperty(this, "handleForecastChange", e => {
this.setState({
forecast: e.target.value
});
});
_defineProperty(this, "handleProfitpaymentChange", e => {
this.setState({
profitpayment: e.target.value
});
});
_defineProperty(this, "togglePanel", panelId => {
const {
extendedPanel
} = this.state;
this.setState({
extendedPanel: extendedPanel !== panelId ? panelId : null
});
});
_defineProperty(this, "toggleModal", isModalOpen => {
this.setState({
isModalOpen
});
});
_defineProperty(this, "generateChartData", () => {
const {
years,
totalInvestment
} = this.state;
return [...Array(years).fill({})].map((_, index) => {
const factor = index >= 2 ? index : index - 2;
const profit = totalInvestment * 0.4 * factor;
const gain = profit * 0.5;
return {
year: "".concat(index + 1),
profit,
gain,
tooltip: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ROI2.TooltipTitle, null, "YEAR ".concat(index + 1)), /*#__PURE__*/_react.default.createElement(_ROI2.TooltipContent, null, "TOTAL GAIN ON INVESTMENT: \u20AC ".concat(profit), /*#__PURE__*/_react.default.createElement("br", null), "CUMULATIVE PROFIT PAYOUTS: \u20AC ".concat(gain)))
};
});
});
}
render() {
const {
totalInvestment,
years,
extendedPanel,
forecast,
profitpayment,
isModalOpen
} = this.state;
const chartData = this.generateChartData();
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
part: 7
}, /*#__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(_ROI2.Title, null, "Return on investment tool"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
noPaddingHorizontal: true
}, /*#__PURE__*/_react.default.createElement(_ROI2.Label, null, "TOTAL INVESTMENT"), /*#__PURE__*/_react.default.createElement(_ROI2.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(_ROI2.Label, null, "Years"), /*#__PURE__*/_react.default.createElement(_ROI2.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(_ROI2.TabContainer, {
borderTop: true
}, /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.default, {
title: "Company Scenario",
subtitle: "Earnings forecast",
tooltip: "Hello",
radio: {
id: 'roiForecast01',
value: 'roiForecast01',
name: 'roiForecast',
checked: forecast === 'roiForecast01',
onChange: this.handleForecastChange
}
}), /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.default, {
title: "Conservative",
subtitle: "ROE-based earnings forecast",
tooltip: "Hello",
radio: {
id: 'roiForecast02',
value: 'roiForecast02',
name: 'roiForecast',
checked: forecast === 'roiForecast02',
onChange: this.handleForecastChange
}
}), /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.default, {
title: "Industry average",
subtitle: "ROE-based earnings forecast",
tooltip: "Hello",
radio: {
id: 'roiForecast03',
value: 'roiForecast03',
name: 'roiForecast',
checked: forecast === 'roiForecast03',
onChange: this.handleForecastChange
}
}), /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.default, {
title: "Positive",
subtitle: "ROE-based earnings forecast",
tooltip: "Hello",
radio: {
id: 'roiForecast04',
value: 'roiForecast04',
name: 'roiForecast',
checked: forecast === 'roiForecast04',
onChange: this.handleForecastChange
}
})))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
noPadding: true,
borderTop: true
}, /*#__PURE__*/_react.default.createElement(_ExpandButton.default, {
title: "PROFITPAYMENT SCENARIO",
textLeft: true,
isOpened: extendedPanel === PANEL.PROFITPAYMENT_SCENARIO,
onClick: () => this.togglePanel(PANEL.PROFITPAYMENT_SCENARIO)
}), /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
isOpened: extendedPanel === PANEL.PROFITPAYMENT_SCENARIO
}, /*#__PURE__*/_react.default.createElement(_ROI2.TabContainer, {
borderTop: true
}, /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.default, {
title: "Company Scenario",
tooltip: "Hello",
radio: {
id: 'profitpayment01',
value: 'profitpayment01',
name: 'profitpayment',
checked: profitpayment === 'profitpayment01',
onChange: this.handleProfitpaymentChange
}
}), /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.default, {
title: "Increasing Payouts",
tooltip: "Hello",
radio: {
id: 'profitpayment02',
value: 'profitpayment02',
name: 'profitpayment',
checked: profitpayment === 'profitpayment02',
onChange: this.handleProfitpaymentChange
}
}), /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.default, {
title: "No Payouts",
tooltip: "Hello",
radio: {
id: 'profitpayment03',
value: 'profitpayment03',
name: 'profitpayment',
checked: profitpayment === 'profitpayment03',
onChange: this.handleProfitpaymentChange
}
}), /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.default, {
title: "100% Payouts",
tooltip: "Hello",
radio: {
id: 'profitpayment04',
value: 'profitpayment04',
name: 'profitpayment',
checked: profitpayment === 'profitpayment04',
onChange: this.handleProfitpaymentChange
}
}), /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.default, {
title: "50/50 Payouts",
tooltip: "Hello",
radio: {
id: 'profitpayment05',
value: 'profitpayment05',
name: 'profitpayment',
checked: profitpayment === 'profitpayment05',
onChange: this.handleProfitpaymentChange
}
}))))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
part: 9,
withBorder: true
}, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
noPaddingHorizontal: true
}, /*#__PURE__*/_react.default.createElement(_ROIChart.default, {
id: "roichart",
data: chartData
})), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
noPaddingHorizontal: true,
noPaddingTop: true
}, /*#__PURE__*/_react.default.createElement(_ROI2.Label, null, "INVESTMENT RESULTS"), /*#__PURE__*/_react.default.createElement(_ROI2.ROIItemsRow, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
part: 1,
full: 3
}, /*#__PURE__*/_react.default.createElement(_ROI2.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI2.ROIItemTitle, null, "TOTAL GAIN ON INVESTMENT (ROI)"), /*#__PURE__*/_react.default.createElement(_ROI2.ROIItemContent, null, "\u20AC 641 (68%)"))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
part: 1,
full: 3
}, /*#__PURE__*/_react.default.createElement(_ROI2.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI2.ROIItemTitle, null, "GAIN ON PAYOUTS (ROI)"), /*#__PURE__*/_react.default.createElement(_ROI2.ROIItemContent, null, "\u20AC 166 (18%)"))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
part: 1,
full: 3
}, /*#__PURE__*/_react.default.createElement(_ROI2.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI2.ROIItemTitle, null, "GAIN ON PRICE (ROI)"), /*#__PURE__*/_react.default.createElement(_ROI2.ROIItemContent, null, "\u20AC 475 (50%)"))))), /*#__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)
}));
}
}
exports.ROI = ROI;
var _default = exports.default = ROI;