@stokr/components-library
Version:
STOKR - Components Library
320 lines (313 loc) • 16.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactCollapse = require("react-collapse");
var _Grid = require("components/ui/Grid/Grid.styles");
var _Text = _interopRequireDefault(require("components/ui/Text/Text.styles"));
var _ComponentWrapper = _interopRequireDefault(require("components/ui/ComponentWrapper/ComponentWrapper.styles"));
var _RangeInput = _interopRequireDefault(require("components/ui/Input/RangeInput"));
var _ExpandButton = _interopRequireDefault(require("components/ui/ExpandButton/ExpandButton"));
var _ROI = require("./ROI.styles");
var _ROIScenarioBox = _interopRequireDefault(require("./ROIScenarioBox"));
var _ROIChart = _interopRequireDefault(require("./ROIChart"));
var _ROIModal = _interopRequireDefault(require("./ROIModal"));
var _componentsLibrary = require("@stokr/components-library");
var _ui = require("components/ui");
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); } // import { TextButton } from 'components/ui/TextLink/TextLink.styles'
const PANEL = {
FORECAST_SCENARIO: 'forecast_scenario',
PROFITPAYMENT_SCENARIO: 'profitpayment_scenario'
};
// let lastStoredGain, payoutCheck
// let userCumPayout
class ROIPixelmatic extends _react.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "state", {
totalInvestment: 100,
years: 6,
// Default selected years
extendedPanel: null,
forecast: 'companyScenario',
profitpayment: 'profitpayment01',
isModalOpen: false,
gain: null,
cumulativePayout: 0
});
_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;
/* calculation variables for company scenario start */
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 */
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];
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') {
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++;
}
}
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);
loopVar++;
}
}
let cumulativePayout = 0;
const arrayResult = [...Array(years).fill({})].map((_, index) => {
// const factor = index >= 0 ? index : index - 1
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') {
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') {
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') {
formattedRevenue = (0, _componentsLibrary.km_ify)(positiveRevenueArray[index]);
formattedPayout = (0, _componentsLibrary.km_ify)(positivePayoutArray[index]);
profit = positiveRevenueArray[index];
gain = positivePayoutArray[index];
}
let payoutForUser = gain / fullNumberOfTokens * totalInvestment;
payoutForUser = payoutForUser.toFixed(2);
cumulativePayout += parseFloat(payoutForUser);
return {
year: "".concat(index + 1, "y"),
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,
cumulativePayout: cumulativePayout.toFixed(2)
};
});
}
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
});
}
}
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]));
}
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 Infinite Fleet. 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 Infinite Fleet 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(_ui.OutUrl, {
url: "/roi",
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 = ROIPixelmatic;