@stokr/components-library 2.3.6-beta.2 → 2.3.6-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,230 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.Button = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
10
+ var _ui = require("components/ui");
11
+ var sc = _interopRequireWildcard(require("constants/style"));
12
+ var _utils = require("utils");
13
+ var _excluded = ["children", "text", "onClick", "size", "isShare"];
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+ 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); }
16
+ 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; }
17
+ 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); }
18
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
19
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
20
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
21
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
22
+ 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); } }
23
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
24
+ 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); }
25
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
26
+ 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); }; }
27
+ 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); }
28
+ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
29
+ 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; } }
30
+ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
31
+ 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; }
32
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
33
+ 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); } /* */
34
+ var buttonTextLoadingCss = (0, _styledComponents.css)(["visibility:hidden;"]);
35
+ var buttonTextHelper = function buttonTextHelper(_ref) {
36
+ var loading = _ref.loading;
37
+ return loading && buttonTextLoadingCss;
38
+ };
39
+ var ButtonText = _styledComponents.default.span.withConfig({
40
+ displayName: "Button-stoDetails__ButtonText",
41
+ componentId: "sc-1pstwqz-0"
42
+ })(["line-height:", ";margin:0 auto;", ";svg,path{fill:", ";&:hover{fill:", ";}}"], function (_ref2) {
43
+ var isShare = _ref2.isShare;
44
+ return isShare ? '0px' : '1em';
45
+ }, buttonTextHelper, function (_ref3) {
46
+ var isShare = _ref3.isShare;
47
+ return isShare && '#cacaca';
48
+ }, function (_ref4) {
49
+ var isShare = _ref4.isShare;
50
+ return isShare && sc.RED_BASE_HEX;
51
+ });
52
+ var StyledLoading = _styledComponents.default.div.withConfig({
53
+ displayName: "Button-stoDetails__StyledLoading",
54
+ componentId: "sc-1pstwqz-1"
55
+ })(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);
56
+
57
+ // const ButtonComponent = ({ as, ...rest }) =>
58
+ // React.createElement(as, { ...rest })
59
+
60
+ var ButtonComponent = _styledComponents.default.button.withConfig({
61
+ displayName: "Button-stoDetails__ButtonComponent",
62
+ componentId: "sc-1pstwqz-2"
63
+ })([""]);
64
+ var ButtonClass = /*#__PURE__*/function (_PureComponent) {
65
+ _inherits(ButtonClass, _PureComponent);
66
+ var _super = _createSuper(ButtonClass);
67
+ function ButtonClass() {
68
+ var _this;
69
+ _classCallCheck(this, ButtonClass);
70
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
71
+ args[_key] = arguments[_key];
72
+ }
73
+ _this = _super.call.apply(_super, [this].concat(args));
74
+ _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
75
+ var _this$props = _this.props,
76
+ disabled = _this$props.disabled,
77
+ onClick = _this$props.onClick;
78
+ return !disabled && onClick && onClick(e);
79
+ });
80
+ return _this;
81
+ }
82
+ _createClass(ButtonClass, [{
83
+ key: "render",
84
+ value: function render() {
85
+ var _this$props2 = this.props,
86
+ children = _this$props2.children,
87
+ text = _this$props2.text,
88
+ onClick = _this$props2.onClick,
89
+ size = _this$props2.size,
90
+ isShare = _this$props2.isShare,
91
+ rest = _objectWithoutProperties(_this$props2, _excluded);
92
+ var loading = this.props.loading;
93
+ return /*#__PURE__*/_react.default.createElement(ButtonComponent, _extends({}, rest, {
94
+ onClick: this.handleClick
95
+ }), /*#__PURE__*/_react.default.createElement(ButtonText, {
96
+ isShare: isShare,
97
+ loading: loading
98
+ }, children || text), loading && /*#__PURE__*/_react.default.createElement(StyledLoading, null, /*#__PURE__*/_react.default.createElement(_ui.Loading, {
99
+ size: size === 'xl' && 40
100
+ })));
101
+ }
102
+ }]);
103
+ return ButtonClass;
104
+ }(_react.PureComponent);
105
+ _defineProperty(ButtonClass, "propTypes", {
106
+ children: _propTypes.default.node,
107
+ as: _propTypes.default.node,
108
+ transparent: _propTypes.default.bool,
109
+ noborder: _propTypes.default.bool,
110
+ icononly: _propTypes.default.bool,
111
+ inverted: _propTypes.default.bool,
112
+ isShare: _propTypes.default.bool,
113
+ inactive: _propTypes.default.bool
114
+ });
115
+ _defineProperty(ButtonClass, "defaultProps", {
116
+ as: 'button',
117
+ transparent: false
118
+ });
119
+ var baseButtonCss = (0, _styledComponents.css)(["transition:all 0.3s;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:25px;font-size:11px;font-weight:bold;letter-spacing:2px;text-transform:uppercase;outline:none;cursor:pointer;white-space:nowrap;border:0;&:hover,&:active{opacity:1;}"]);
120
+ var blockButtonCss = (0, _styledComponents.css)([""]);
121
+ var importantButtonCss = (0, _styledComponents.css)([""]);
122
+ var beautyButtonCss = (0, _styledComponents.css)(["&&,&&:hover{width:auto !important;height:40px !important;padding-left:", "px;padding-right:", "px;box-shadow:0 6px 15px 2px #00000027,0px -5px 30px 2px rgba(255,255,255,0.2);background-color:", ";color:", ";margin:5px;z-index:100;transition:all 0.4s ease-out;", "{padding-left:", "px;padding-right:", "px;}}"], sc.BASE_MARGIN * 4, sc.BASE_MARGIN * 4, sc.WHITE_HEX, sc.BASE_COLOR_HEX, _utils.breakpoint.below('mobile'), sc.BASE_MARGIN * 2, sc.BASE_MARGIN * 2);
123
+ var disabledBeautyButtonCss = (0, _styledComponents.css)(["&&,&&:hover{padding-left:", "px;padding-right:", "px;background-color:", ";color:#4a90e2;margin:5px;z-index:100;border:none;cursor:not-allowed;transition:all 0.4s ease-out;&&:before{content:'';position:absolute;height:calc(100% + 10px);width:calc(100% + 10px);left:-5px;top:-5px;z-index:-2;border-radius:25px;border:1px solid #4a90e2;}", "{padding-left:", "px;padding-right:", "px;}}"], sc.BASE_MARGIN * 4, sc.BASE_MARGIN * 4, sc.BLUE_BASE_HEX, _utils.breakpoint.below('mobile'), sc.BASE_MARGIN * 2, sc.BASE_MARGIN * 2);
124
+ var disabledButtonCss = (0, _styledComponents.css)(["&&&&{background:transparent;color:#e1e1e1;border:1px solid #e1e1e1;cursor:not-allowed;}"]);
125
+ var transparentButtonCss = (0, _styledComponents.css)(["&&&&{background:transparent;border:1px solid ", ";color:", ";&:hover{background:", ";color:#fff;}}"], sc.BLUE_BASE_HEX, sc.BLUE_BASE_HEX, sc.BLUE_BASE_HEX);
126
+ var textOnlyButtonCss = (0, _styledComponents.css)(["&&&&{background:transparent;border:none;color:", ";}"], sc.BASE_COLOR_HEX);
127
+ var invertedButtonCss = (0, _styledComponents.css)([""]);
128
+ var xlSize = (0, _styledComponents.css)(["height:40px;padding-left:", "px;padding-right:", "px;width:100%;font-size:11px;"], sc.BASE_MARGIN * 2, sc.BASE_MARGIN * 2);
129
+ var mdSize = (0, _styledComponents.css)(["height:40px;padding-left:", "px;padding-right:", "px;width:192px;font-size:11px;"], sc.BASE_MARGIN * 2, sc.BASE_MARGIN * 2);
130
+ var smSize = (0, _styledComponents.css)(["height:32px;width:32px;"]);
131
+ var noborderCss = (0, _styledComponents.css)(["&&&&{border:0;}"]);
132
+ var inactiveCss = (0, _styledComponents.css)(["opacity:0.3;cursor:initial;&:hover{opacity:0.3;}"]);
133
+ var isHeroCss = (0, _styledComponents.css)(["width:222px;"]);
134
+ var isLoginMobileCss = (0, _styledComponents.css)(["margin-bottom:20px;width:163.94px;"]);
135
+ var isInvisibleCss = (0, _styledComponents.css)(["opacity:0;cursor:unset;&:hover{opacity:0;}"]);
136
+ var activeTransparentCss = (0, _styledComponents.css)(["background:", ";color:white;"], sc.RED_BASE_HEX);
137
+ var activeHelper = function activeHelper(_ref5) {
138
+ var active = _ref5.active;
139
+ return active && activeTransparentCss;
140
+ };
141
+ var buttonColor = function buttonColor(_ref6) {
142
+ var color = _ref6.color,
143
+ inverted = _ref6.inverted;
144
+ switch (color) {
145
+ case 'transparent':
146
+ return (0, _styledComponents.css)(["background:transparent;border:1px solid ", ";", ";&:hover{", ";}", ";"], sc.GRAY_BASE_HEX, activeHelper, activeTransparentCss, inverted && (0, _styledComponents.css)(["border:1px solid ", ";"], sc.WHITE_HEX));
147
+ case 'white':
148
+ return (0, _styledComponents.css)(["background:white;color:", ";"], sc.BLUE_BASE_HEX);
149
+ case 'blue':
150
+ default:
151
+ return (0, _styledComponents.css)(["background:", ";color:white;&:hover{background:", ";}"], sc.BLUE_BASE_HEX, sc.BLUE_BASE_RELEASED_HEX);
152
+ }
153
+ };
154
+ var nobordersButtonHelper = function nobordersButtonHelper(_ref7) {
155
+ var noborder = _ref7.noborder;
156
+ return noborder && noborderCss;
157
+ };
158
+ var buttonSize = function buttonSize(_ref8) {
159
+ var size = _ref8.size,
160
+ icononly = _ref8.icononly;
161
+ switch (size) {
162
+ case 'xl':
163
+ return xlSize;
164
+ case 'sm':
165
+ return smSize;
166
+ case 'md':
167
+ return mdSize;
168
+ default:
169
+ return (0, _styledComponents.css)(["height:40px;padding-left:", "px;padding-right:", "px;", ";"], sc.BASE_MARGIN * 2, sc.BASE_MARGIN * 2, icononly && (0, _styledComponents.css)(["margin:0 auto;width:40px;line-height:0;text-align:center;padding:0;"]));
170
+ }
171
+ };
172
+ var buttonBlock = function buttonBlock(_ref9) {
173
+ var block = _ref9.block;
174
+ return block && blockButtonCss;
175
+ };
176
+ var importantButton = function importantButton(_ref10) {
177
+ var important = _ref10.important;
178
+ return important && importantButtonCss;
179
+ };
180
+ var beautyButton = function beautyButton(_ref11) {
181
+ var beauty = _ref11.beauty;
182
+ return beauty && beautyButtonCss;
183
+ };
184
+ var disabledBeautyButton = function disabledBeautyButton(_ref12) {
185
+ var disabledBeauty = _ref12.disabledBeauty;
186
+ return disabledBeauty && disabledBeautyButtonCss;
187
+ };
188
+ var disabledButton = function disabledButton(_ref13) {
189
+ var disabled = _ref13.disabled;
190
+ return disabled && disabledButtonCss;
191
+ };
192
+ var transparentButton = function transparentButton(_ref14) {
193
+ var transparent = _ref14.transparent;
194
+ return transparent && transparentButtonCss;
195
+ };
196
+ var textOnlyButton = function textOnlyButton(_ref15) {
197
+ var textOnly = _ref15.textOnly;
198
+ return textOnly && textOnlyButtonCss;
199
+ };
200
+ var invertedButton = function invertedButton(_ref16) {
201
+ var inverted = _ref16.inverted;
202
+ return inverted && invertedButtonCss;
203
+ };
204
+ var inativeButton = function inativeButton(_ref17) {
205
+ var inactive = _ref17.inactive;
206
+ return inactive && inactiveCss;
207
+ };
208
+ var isHeroButton = function isHeroButton(_ref18) {
209
+ var isHero = _ref18.isHero;
210
+ return isHero && isHeroCss;
211
+ };
212
+ var isLoginMobileButton = function isLoginMobileButton(_ref19) {
213
+ var isLoginMobile = _ref19.isLoginMobile;
214
+ return isLoginMobile && isLoginMobileCss;
215
+ };
216
+ var isInvisibleButton = function isInvisibleButton(_ref20) {
217
+ var isInvisible = _ref20.isInvisible;
218
+ return isInvisible && isInvisibleCss;
219
+ };
220
+ var Button = (0, _styledComponents.default)(ButtonClass).withConfig({
221
+ displayName: "Button-stoDetails__Button",
222
+ componentId: "sc-1pstwqz-3"
223
+ })(["", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], baseButtonCss, buttonColor, buttonSize, buttonBlock, importantButton, disabledButton, transparentButton, textOnlyButton, invertedButton, nobordersButtonHelper, inativeButton, isHeroButton, isLoginMobileButton, isInvisibleButton, beautyButton, disabledBeautyButton, function (_ref21) {
224
+ var fillRed = _ref21.fillRed;
225
+ return fillRed && (0, _styledComponents.css)(["svg{fill:", ";}&:hover{svg{fill:", ";}}"], sc.RED_BASE_HEX, sc.WHITE_HEX);
226
+ });
227
+ exports.Button = Button;
228
+ Button.propTypes = {};
229
+ var _default = Button;
230
+ exports.default = _default;
@@ -22,7 +22,7 @@ exports.Wrapper = Wrapper;
22
22
  var Row = _styledComponents.default.div.withConfig({
23
23
  displayName: "Gridstyles__Row",
24
24
  componentId: "sc-1jreazl-1"
25
- })(["display:flex;flex-wrap:wrap;text-align:left;", " ", " ", " ", " ", " ", " ", ""], function (props) {
25
+ })(["display:flex;flex-wrap:wrap;text-align:left;", " ", " ", " ", " ", " ", " ", " ", " height:", ";"], function (props) {
26
26
  return props.center && "\n justify-content: center;\n ";
27
27
  }, function (props) {
28
28
  return props.right && "\n justify-content: right;\n ";
@@ -34,23 +34,36 @@ var Row = _styledComponents.default.div.withConfig({
34
34
  return props.dashboard && "\n margin: -16px;\n ";
35
35
  }, function (props) {
36
36
  return props.nowrap && "\n flex-wrap: nowrap;\n ";
37
+ }, function (props) {
38
+ return props.fullWidth && "\n width: 100%;\n ";
37
39
  }, _rwd.default.MLarge(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n "])), function (props) {
38
40
  return props.main && "\n z-index: 0;\n min-height: calc(100vh - ".concat(_spacing.default.footerHeight, "px);\n padding-top: ").concat(_spacing.default.headerHeight, "px;\n ");
39
- })); // ID has padding-top as 85px instead of headerHeight (which is set to 96px)
41
+ }), function (_ref) {
42
+ var isConfirmModal = _ref.isConfirmModal;
43
+ return isConfirmModal && '400px';
44
+ }); // ID has padding-top as 85px instead of headerHeight (which is set to 96px)
40
45
  exports.Row = Row;
41
46
  var Column = _styledComponents.default.div.withConfig({
42
47
  displayName: "Gridstyles__Column",
43
48
  componentId: "sc-1jreazl-2"
44
- })(["display:flex;flex-direction:column;width:100%;", " ", " ", " ", " ", " ", ""], function (props) {
49
+ })(["display:flex;flex-direction:column;width:100%;", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
50
+ return props.halfWidth && "\n width: 50%;\n\n @media screen and (max-width: 500px) {\n width: 100%;\n }\n\n ";
51
+ }, function (props) {
52
+ return props.textAlignHopper && "\n > div:last-child {\n text-align:right;\n }\n\n @media screen and (max-width: 767px) {\n > div:last-child {\n text-align:left;\n }\n }\n\n @media screen and (max-width: 500px) {\n > div > div {\n justify-content: left;\n margin-top: 1rem;\n }\n }\n\n ";
53
+ }, function (props) {
45
54
  return props.center && "\n justify-content: center;\n ";
46
55
  }, function (props) {
47
56
  return props.alignCenter && "\n align-items: center;\n ";
57
+ }, function (props) {
58
+ return props.alignRight && "\n text-align: right;\n align-items: center;\n ";
48
59
  }, function (props) {
49
60
  return props.spaceBetween && "\n justify-content: space-between;\n ";
50
61
  }, function (props) {
51
62
  return props.flexEnd && "\n justify-content: flex-end;\n ";
52
63
  }, function (props) {
53
64
  return props.mainRelative && "\n padding: 18px 0 28px;\n ";
65
+ }, function (props) {
66
+ return props.isConfirmModal && "\n justify-content: center;\n overflow: hidden;\n\n @media screen and (max-width: 767px) {\n height: 100vh;\n }\n ";
54
67
  }, _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n ", "\n\n ", "\n\n ", "\n "])), function (props) {
55
68
  return props.part && "\n width: ".concat((0, _grid.default)(props.part, props.full), ";\n ");
56
69
  }, function (props) {
@@ -0,0 +1,356 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _reactCollapse = require("react-collapse");
9
+ var _Grid = require("components/ui/Grid/Grid.styles");
10
+ var _Text = _interopRequireDefault(require("components/ui/Text/Text.styles"));
11
+ var _ComponentWrapper = _interopRequireDefault(require("components/ui/ComponentWrapper/ComponentWrapper.styles"));
12
+ var _RangeInput = _interopRequireDefault(require("components/ui/Input/RangeInput"));
13
+ var _ExpandButton = _interopRequireDefault(require("components/ui/ExpandButton/ExpandButton"));
14
+ var _TextLink = require("components/ui/TextLink/TextLink.styles");
15
+ var _ROI = require("./ROI.styles");
16
+ var _ROIScenarioBox = _interopRequireDefault(require("./ROIScenarioBox"));
17
+ var _ROIChart = _interopRequireDefault(require("./ROIChart"));
18
+ var _ROIModal = _interopRequireDefault(require("./ROIModal"));
19
+ var _componentsLibrary = require("@stokr/components-library");
20
+ var _ui = require("components/ui");
21
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
22
+ 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); }
23
+ 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; }
24
+ 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); }
25
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
26
+ 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."); }
27
+ 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); }
28
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
29
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
30
+ 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; }
31
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
32
+ 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); } }
33
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
34
+ 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); }
35
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
36
+ 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); }; }
37
+ 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); }
38
+ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
39
+ 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; } }
40
+ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
41
+ 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; }
42
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
43
+ 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); }
44
+ var PANEL = {
45
+ FORECAST_SCENARIO: 'forecast_scenario',
46
+ PROFITPAYMENT_SCENARIO: 'profitpayment_scenario'
47
+ };
48
+
49
+ // let lastStoredGain, payoutCheck
50
+ // let userCumPayout
51
+ var ROIParkingo = /*#__PURE__*/function (_PureComponent) {
52
+ _inherits(ROIParkingo, _PureComponent);
53
+ var _super = _createSuper(ROIParkingo);
54
+ function ROIParkingo() {
55
+ var _this;
56
+ _classCallCheck(this, ROIParkingo);
57
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
58
+ args[_key] = arguments[_key];
59
+ }
60
+ _this = _super.call.apply(_super, [this].concat(args));
61
+ _defineProperty(_assertThisInitialized(_this), "state", {
62
+ totalInvestment: 100,
63
+ years: 6,
64
+ // Default selected years
65
+ extendedPanel: null,
66
+ forecast: 'companyScenario',
67
+ profitpayment: 'profitpayment01',
68
+ isModalOpen: false,
69
+ gain: null,
70
+ cumulativePayout: 0
71
+ });
72
+ _defineProperty(_assertThisInitialized(_this), "handleTotalInvestmentChange", function (value) {
73
+ _this.setState({
74
+ totalInvestment: value
75
+ });
76
+ });
77
+ _defineProperty(_assertThisInitialized(_this), "handleYearsChange", function (value) {
78
+ _this.setState({
79
+ years: value
80
+ });
81
+ });
82
+ _defineProperty(_assertThisInitialized(_this), "handleForecastChange", function (e) {
83
+ _this.setState({
84
+ forecast: e.target.value
85
+ });
86
+ });
87
+ _defineProperty(_assertThisInitialized(_this), "handleProfitpaymentChange", function (e) {
88
+ _this.setState({
89
+ profitpayment: e.target.value
90
+ });
91
+ });
92
+ _defineProperty(_assertThisInitialized(_this), "togglePanel", function (panelId) {
93
+ var extendedPanel = _this.state.extendedPanel;
94
+ _this.setState({
95
+ extendedPanel: extendedPanel !== panelId ? panelId : null
96
+ });
97
+ });
98
+ _defineProperty(_assertThisInitialized(_this), "toggleModal", function (isModalOpen) {
99
+ _this.setState({
100
+ isModalOpen: isModalOpen
101
+ });
102
+ });
103
+ _defineProperty(_assertThisInitialized(_this), "generateChartData", function () {
104
+ var _this$state = _this.state,
105
+ years = _this$state.years,
106
+ totalInvestment = _this$state.totalInvestment;
107
+
108
+ /* calculation variables for company scenario start */
109
+ var revenueForCompanyScenario = [653069, 3084549, 7796537, 15253860, 25438310, 31511615, 36698241, 42010258, 44110771, 46316309];
110
+ var payoutForCompanyScenario = [300000, 308455, 779654, 1525386, 2543831, 3151162, 3669824, 2921689, 441108, 463163];
111
+ var fullNumberOfTokens = 15000000;
112
+
113
+ /* calculation variables for company scenario end */
114
+
115
+ /* calculation variables for conservative, industry average, positive start */
116
+
117
+ var cagr = 0.094;
118
+ var lastValueConservative, lastValueIndustryAverage, lastValuePositive;
119
+ var conservativeRevenueArray = [653069, 3084549];
120
+ var conservativePayoutArray = [300000, 308455];
121
+ var industryAverageRevenueArray = [653069, 3084549];
122
+ var industryAveragePayoutArray = [300000, 308455];
123
+ var positiveRevenueArray = [653069, 3084549];
124
+ var positivePayoutArray = [300000, 308455];
125
+ if (_this.state.forecast === 'conservative') {
126
+ var loopVar = 2;
127
+ while (loopVar < 10) {
128
+ lastValueConservative = conservativeRevenueArray[loopVar - 1];
129
+ var calculateConservativeRevenue = Math.round(0.67 * cagr * lastValueConservative + lastValueConservative);
130
+ var calculateConservativePayout = calculateConservativeRevenue * 0.1;
131
+ conservativeRevenueArray.push(calculateConservativeRevenue);
132
+ conservativePayoutArray.push(calculateConservativePayout);
133
+ loopVar++;
134
+ }
135
+ }
136
+ if (_this.state.forecast === 'industryAverage') {
137
+ var _loopVar = 2;
138
+ while (_loopVar < 10) {
139
+ lastValueIndustryAverage = industryAverageRevenueArray[_loopVar - 1];
140
+ var calculateIndustryAverageRevenue = Math.round(cagr * lastValueIndustryAverage + lastValueIndustryAverage);
141
+ var calculateIndustryAveragePayout = calculateIndustryAverageRevenue * 0.1;
142
+ industryAverageRevenueArray.push(calculateIndustryAverageRevenue);
143
+ industryAveragePayoutArray.push(calculateIndustryAveragePayout);
144
+ _loopVar++;
145
+ }
146
+ }
147
+ if (_this.state.forecast === 'positive') {
148
+ var _loopVar2 = 2;
149
+ while (_loopVar2 < 10) {
150
+ lastValuePositive = positiveRevenueArray[_loopVar2 - 1];
151
+ var calculatePositiveRevenue = Math.round(1.5 * cagr * lastValuePositive + lastValuePositive);
152
+ var calculatePositivePayout = calculatePositiveRevenue * 0.1;
153
+ positiveRevenueArray.push(calculatePositiveRevenue);
154
+ positivePayoutArray.push(calculatePositivePayout);
155
+ _loopVar2++;
156
+ }
157
+ }
158
+ var cumulativePayout = 0;
159
+ var arrayResult = _toConsumableArray(Array(years).fill({})).map(function (_, index) {
160
+ // const factor = index >= 0 ? index : index - 1
161
+ var profit, gain, formattedRevenue, formattedPayout;
162
+ if (_this.state.forecast === 'companyScenario') {
163
+ formattedRevenue = (0, _componentsLibrary.km_ify)(revenueForCompanyScenario[index]);
164
+ formattedPayout = (0, _componentsLibrary.km_ify)(payoutForCompanyScenario[index]);
165
+ profit = revenueForCompanyScenario[index];
166
+ gain = payoutForCompanyScenario[index];
167
+ } else if (_this.state.forecast === 'conservative') {
168
+ formattedRevenue = (0, _componentsLibrary.km_ify)(conservativeRevenueArray[index]);
169
+ formattedPayout = (0, _componentsLibrary.km_ify)(conservativePayoutArray[index]);
170
+ profit = conservativeRevenueArray[index];
171
+ gain = conservativePayoutArray[index];
172
+ } else if (_this.state.forecast === 'industryAverage') {
173
+ formattedRevenue = (0, _componentsLibrary.km_ify)(industryAverageRevenueArray[index]);
174
+ formattedPayout = (0, _componentsLibrary.km_ify)(industryAveragePayoutArray[index]);
175
+ profit = industryAverageRevenueArray[index];
176
+ gain = industryAveragePayoutArray[index];
177
+ } else if (_this.state.forecast === 'positive') {
178
+ formattedRevenue = (0, _componentsLibrary.km_ify)(positiveRevenueArray[index]);
179
+ formattedPayout = (0, _componentsLibrary.km_ify)(positivePayoutArray[index]);
180
+ profit = positiveRevenueArray[index];
181
+ gain = positivePayoutArray[index];
182
+ }
183
+ var payoutForUser = gain / fullNumberOfTokens * totalInvestment;
184
+ payoutForUser = payoutForUser.toFixed(2);
185
+ cumulativePayout += parseFloat(payoutForUser);
186
+ return {
187
+ year: "".concat(index + 1, "y"),
188
+ profit: profit,
189
+ gain: gain,
190
+ 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)))
191
+ };
192
+ });
193
+ return {
194
+ arrayResult: arrayResult,
195
+ cumulativePayout: cumulativePayout.toFixed(2)
196
+ };
197
+ });
198
+ return _this;
199
+ }
200
+ _createClass(ROIParkingo, [{
201
+ key: "componentDidMount",
202
+ value: function componentDidMount() {
203
+ var chartData = this.generateChartData();
204
+ this.setState({
205
+ chartData: chartData.arrayResult,
206
+ cumulativePayout: chartData.cumulativePayout
207
+ });
208
+ }
209
+ }, {
210
+ key: "componentDidUpdate",
211
+ value: function componentDidUpdate(prevProps, prevState) {
212
+ var _this$state2 = this.state,
213
+ years = _this$state2.years,
214
+ totalInvestment = _this$state2.totalInvestment,
215
+ forecast = _this$state2.forecast;
216
+ if (prevState.years !== years || prevState.totalInvestment !== totalInvestment || prevState.forecast !== forecast) {
217
+ var chartData = this.generateChartData();
218
+ this.setState({
219
+ chartData: chartData.arrayResult,
220
+ cumulativePayout: chartData.cumulativePayout
221
+ });
222
+ }
223
+ }
224
+ }, {
225
+ key: "render",
226
+ value: function render() {
227
+ var _this2 = this;
228
+ var _this$state3 = this.state,
229
+ totalInvestment = _this$state3.totalInvestment,
230
+ years = _this$state3.years,
231
+ extendedPanel = _this$state3.extendedPanel,
232
+ forecast = _this$state3.forecast,
233
+ isModalOpen = _this$state3.isModalOpen,
234
+ chartData = _this$state3.chartData,
235
+ cumulativePayout = _this$state3.cumulativePayout;
236
+ var companyScenarioCumPayout = [300000, 608455, 1388109, 2913495, 5457326, 8608488, 12278312, 15200001, 15641109, 16104272];
237
+ var conservativeCumPayout = [300000, 608455, 936336, 1284868, 1655350, 2049164, 2467782, 2912763, 3385770, 3888567];
238
+ var industryAverageCumPayout = [300000, 608455, 945905, 1315074, 1718946, 2160782, 2644151, 3172956, 3751468, 4384361];
239
+ var positiveCumPayout = [300000, 608455, 960402, 1361974, 1820167, 2342965, 2939478, 3620099, 4396688, 5282776];
240
+ var cumTotalPayout;
241
+ if (this.state.forecast === 'companyScenario') {
242
+ cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(companyScenarioCumPayout[years - 1]));
243
+ } else if (this.state.forecast === 'conservative') {
244
+ cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(conservativeCumPayout[years - 1]));
245
+ } else if (this.state.forecast === 'industryAverage') {
246
+ cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(industryAverageCumPayout[years - 1]));
247
+ } else if (this.state.forecast === 'positive') {
248
+ cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(positiveCumPayout[years - 1]));
249
+ }
250
+ return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, {
251
+ style: {
252
+ width: '100%'
253
+ }
254
+ }, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
255
+ part: 7,
256
+ style: {
257
+ width: '50%'
258
+ },
259
+ roiColumn: true
260
+ }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
261
+ noPaddingHorizontal: true
262
+ }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
263
+ noPaddingTop: true,
264
+ noPaddingHorizontal: true
265
+ }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement(_ROI.Title, null, "Return on investment tool"), /*#__PURE__*/_react.default.createElement(_ui.RichText, {
266
+ style: {
267
+ paddingLeft: '56px'
268
+ }
269
+ }, "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, {
270
+ noPaddingHorizontal: true
271
+ }, /*#__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, {
272
+ id: "totalInvestmentRange",
273
+ name: "totalInvestmentRange",
274
+ value: totalInvestment,
275
+ min: 100,
276
+ max: 100000,
277
+ step: 100,
278
+ onChange: this.handleTotalInvestmentChange
279
+ })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
280
+ noPaddingTop: true,
281
+ noPaddingHorizontal: true
282
+ }, /*#__PURE__*/_react.default.createElement(_ROI.Label, null, "Years"), /*#__PURE__*/_react.default.createElement(_ROI.Value, null, years), /*#__PURE__*/_react.default.createElement(_RangeInput.default, {
283
+ id: "yearsRange",
284
+ name: "yearsRange",
285
+ value: years,
286
+ min: 1,
287
+ max: 10,
288
+ onChange: this.handleYearsChange
289
+ })))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
290
+ noPadding: true,
291
+ borderTop: true
292
+ }, /*#__PURE__*/_react.default.createElement(_ExpandButton.default, {
293
+ title: "FORECAST SCENARIO",
294
+ textLeft: true,
295
+ isOpened: extendedPanel === PANEL.FORECAST_SCENARIO,
296
+ onClick: function onClick() {
297
+ return _this2.togglePanel(PANEL.FORECAST_SCENARIO);
298
+ }
299
+ }), /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
300
+ isOpened: extendedPanel === PANEL.FORECAST_SCENARIO
301
+ }, /*#__PURE__*/_react.default.createElement(_ROI.TabContainer, {
302
+ borderTop: true
303
+ }, /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.default, {
304
+ title: "Company Scenario",
305
+ subtitle: "Earnings forecast",
306
+ tooltip: "Revenues that ParkinGO forecasts",
307
+ radio: {
308
+ id: 'companyScenario',
309
+ value: 'companyScenario',
310
+ name: 'roiForecast',
311
+ checked: forecast === 'companyScenario',
312
+ onChange: this.handleForecastChange
313
+ }
314
+ }))))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
315
+ part: 9,
316
+ withBorder: true,
317
+ style: {
318
+ width: '50%'
319
+ },
320
+ roiColumn: true
321
+ }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
322
+ style: {
323
+ paddingBottom: '5rem'
324
+ }
325
+ }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
326
+ noPaddingHorizontal: true
327
+ }, chartData && /*#__PURE__*/_react.default.createElement(_ROIChart.default, {
328
+ id: "roichart",
329
+ data: chartData
330
+ })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
331
+ noPaddingHorizontal: true,
332
+ noPaddingTop: true
333
+ }, /*#__PURE__*/_react.default.createElement(_ROI.Label, null, "INVESTMENT RESULTS"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemsRow, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
334
+ part: 1,
335
+ full: 3
336
+ }, /*#__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, {
337
+ part: 1,
338
+ full: 3
339
+ }, /*#__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, {
340
+ noPadding: true
341
+ }, /*#__PURE__*/_react.default.createElement(_TextLink.TextButton, {
342
+ onClick: function onClick() {
343
+ return _this2.toggleModal(true);
344
+ }
345
+ }, "CHECK HOW WE CALCULATE THIS"))))), /*#__PURE__*/_react.default.createElement(_ROIModal.default, {
346
+ isModalOpen: isModalOpen,
347
+ onModalClose: function onModalClose() {
348
+ return _this2.toggleModal(false);
349
+ }
350
+ }));
351
+ }
352
+ }]);
353
+ return ROIParkingo;
354
+ }(_react.PureComponent);
355
+ var _default = ROIParkingo;
356
+ exports.default = _default;
@@ -0,0 +1,356 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _reactCollapse = require("react-collapse");
9
+ var _Grid = require("components/ui/Grid/Grid.styles");
10
+ var _Text = _interopRequireDefault(require("components/ui/Text/Text.styles"));
11
+ var _ComponentWrapper = _interopRequireDefault(require("components/ui/ComponentWrapper/ComponentWrapper.styles"));
12
+ var _RangeInput = _interopRequireDefault(require("components/ui/Input/RangeInput"));
13
+ var _ExpandButton = _interopRequireDefault(require("components/ui/ExpandButton/ExpandButton"));
14
+ var _ROI = require("./ROI.styles");
15
+ var _ROIScenarioBox = _interopRequireDefault(require("./ROIScenarioBox"));
16
+ var _ROIChart = _interopRequireDefault(require("./ROIChart"));
17
+ var _ROIModal = _interopRequireDefault(require("./ROIModal"));
18
+ var _componentsLibrary = require("@stokr/components-library");
19
+ var _ui = require("components/ui");
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
+ 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); }
22
+ 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; }
23
+ 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); }
24
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
25
+ 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."); }
26
+ 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); }
27
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
28
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
29
+ 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; }
30
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
31
+ 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); } }
32
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
33
+ 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); }
34
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
35
+ 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); }; }
36
+ 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); }
37
+ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
38
+ 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; } }
39
+ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
40
+ 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; }
41
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
42
+ 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); } // import { TextButton } from 'components/ui/TextLink/TextLink.styles'
43
+ var PANEL = {
44
+ FORECAST_SCENARIO: 'forecast_scenario',
45
+ PROFITPAYMENT_SCENARIO: 'profitpayment_scenario'
46
+ };
47
+
48
+ // let lastStoredGain, payoutCheck
49
+ // let userCumPayout
50
+ var ROIPixelmatic = /*#__PURE__*/function (_PureComponent) {
51
+ _inherits(ROIPixelmatic, _PureComponent);
52
+ var _super = _createSuper(ROIPixelmatic);
53
+ function ROIPixelmatic() {
54
+ var _this;
55
+ _classCallCheck(this, ROIPixelmatic);
56
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
57
+ args[_key] = arguments[_key];
58
+ }
59
+ _this = _super.call.apply(_super, [this].concat(args));
60
+ _defineProperty(_assertThisInitialized(_this), "state", {
61
+ totalInvestment: 100,
62
+ years: 6,
63
+ // Default selected years
64
+ extendedPanel: null,
65
+ forecast: 'companyScenario',
66
+ profitpayment: 'profitpayment01',
67
+ isModalOpen: false,
68
+ gain: null,
69
+ cumulativePayout: 0
70
+ });
71
+ _defineProperty(_assertThisInitialized(_this), "handleTotalInvestmentChange", function (value) {
72
+ _this.setState({
73
+ totalInvestment: value
74
+ });
75
+ });
76
+ _defineProperty(_assertThisInitialized(_this), "handleYearsChange", function (value) {
77
+ _this.setState({
78
+ years: value
79
+ });
80
+ });
81
+ _defineProperty(_assertThisInitialized(_this), "handleForecastChange", function (e) {
82
+ _this.setState({
83
+ forecast: e.target.value
84
+ });
85
+ });
86
+ _defineProperty(_assertThisInitialized(_this), "handleProfitpaymentChange", function (e) {
87
+ _this.setState({
88
+ profitpayment: e.target.value
89
+ });
90
+ });
91
+ _defineProperty(_assertThisInitialized(_this), "togglePanel", function (panelId) {
92
+ var extendedPanel = _this.state.extendedPanel;
93
+ _this.setState({
94
+ extendedPanel: extendedPanel !== panelId ? panelId : null
95
+ });
96
+ });
97
+ _defineProperty(_assertThisInitialized(_this), "toggleModal", function (isModalOpen) {
98
+ _this.setState({
99
+ isModalOpen: isModalOpen
100
+ });
101
+ });
102
+ _defineProperty(_assertThisInitialized(_this), "generateChartData", function () {
103
+ var _this$state = _this.state,
104
+ years = _this$state.years,
105
+ totalInvestment = _this$state.totalInvestment;
106
+
107
+ /* calculation variables for company scenario start */
108
+ var revenueForCompanyScenario = [653069, 3084549, 7796537, 15253860, 25438310, 31511615, 36698241, 42010258, 44110771, 46316309];
109
+ var payoutForCompanyScenario = [300000, 308455, 779654, 1525386, 2543831, 3151162, 3669824, 2921689, 441108, 463163];
110
+ var fullNumberOfTokens = 15000000;
111
+
112
+ /* calculation variables for company scenario end */
113
+
114
+ /* calculation variables for conservative, industry average, positive start */
115
+
116
+ var cagr = 0.094;
117
+ var lastValueConservative, lastValueIndustryAverage, lastValuePositive;
118
+ var conservativeRevenueArray = [653069, 3084549];
119
+ var conservativePayoutArray = [300000, 308455];
120
+ var industryAverageRevenueArray = [653069, 3084549];
121
+ var industryAveragePayoutArray = [300000, 308455];
122
+ var positiveRevenueArray = [653069, 3084549];
123
+ var positivePayoutArray = [300000, 308455];
124
+ if (_this.state.forecast === 'conservative') {
125
+ var loopVar = 2;
126
+ while (loopVar < 10) {
127
+ lastValueConservative = conservativeRevenueArray[loopVar - 1];
128
+ var calculateConservativeRevenue = Math.round(0.67 * cagr * lastValueConservative + lastValueConservative);
129
+ var calculateConservativePayout = calculateConservativeRevenue * 0.1;
130
+ conservativeRevenueArray.push(calculateConservativeRevenue);
131
+ conservativePayoutArray.push(calculateConservativePayout);
132
+ loopVar++;
133
+ }
134
+ }
135
+ if (_this.state.forecast === 'industryAverage') {
136
+ var _loopVar = 2;
137
+ while (_loopVar < 10) {
138
+ lastValueIndustryAverage = industryAverageRevenueArray[_loopVar - 1];
139
+ var calculateIndustryAverageRevenue = Math.round(cagr * lastValueIndustryAverage + lastValueIndustryAverage);
140
+ var calculateIndustryAveragePayout = calculateIndustryAverageRevenue * 0.1;
141
+ industryAverageRevenueArray.push(calculateIndustryAverageRevenue);
142
+ industryAveragePayoutArray.push(calculateIndustryAveragePayout);
143
+ _loopVar++;
144
+ }
145
+ }
146
+ if (_this.state.forecast === 'positive') {
147
+ var _loopVar2 = 2;
148
+ while (_loopVar2 < 10) {
149
+ lastValuePositive = positiveRevenueArray[_loopVar2 - 1];
150
+ var calculatePositiveRevenue = Math.round(1.5 * cagr * lastValuePositive + lastValuePositive);
151
+ var calculatePositivePayout = calculatePositiveRevenue * 0.1;
152
+ positiveRevenueArray.push(calculatePositiveRevenue);
153
+ positivePayoutArray.push(calculatePositivePayout);
154
+ _loopVar2++;
155
+ }
156
+ }
157
+ var cumulativePayout = 0;
158
+ var arrayResult = _toConsumableArray(Array(years).fill({})).map(function (_, index) {
159
+ // const factor = index >= 0 ? index : index - 1
160
+ var profit, gain, formattedRevenue, formattedPayout;
161
+ if (_this.state.forecast === 'companyScenario') {
162
+ formattedRevenue = (0, _componentsLibrary.km_ify)(revenueForCompanyScenario[index]);
163
+ formattedPayout = (0, _componentsLibrary.km_ify)(payoutForCompanyScenario[index]);
164
+ profit = revenueForCompanyScenario[index];
165
+ gain = payoutForCompanyScenario[index];
166
+ } else if (_this.state.forecast === 'conservative') {
167
+ formattedRevenue = (0, _componentsLibrary.km_ify)(conservativeRevenueArray[index]);
168
+ formattedPayout = (0, _componentsLibrary.km_ify)(conservativePayoutArray[index]);
169
+ profit = conservativeRevenueArray[index];
170
+ gain = conservativePayoutArray[index];
171
+ } else if (_this.state.forecast === 'industryAverage') {
172
+ formattedRevenue = (0, _componentsLibrary.km_ify)(industryAverageRevenueArray[index]);
173
+ formattedPayout = (0, _componentsLibrary.km_ify)(industryAveragePayoutArray[index]);
174
+ profit = industryAverageRevenueArray[index];
175
+ gain = industryAveragePayoutArray[index];
176
+ } else if (_this.state.forecast === 'positive') {
177
+ formattedRevenue = (0, _componentsLibrary.km_ify)(positiveRevenueArray[index]);
178
+ formattedPayout = (0, _componentsLibrary.km_ify)(positivePayoutArray[index]);
179
+ profit = positiveRevenueArray[index];
180
+ gain = positivePayoutArray[index];
181
+ }
182
+ var payoutForUser = gain / fullNumberOfTokens * totalInvestment;
183
+ payoutForUser = payoutForUser.toFixed(2);
184
+ cumulativePayout += parseFloat(payoutForUser);
185
+ return {
186
+ year: "".concat(index + 1, "y"),
187
+ profit: profit,
188
+ gain: gain,
189
+ 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)))
190
+ };
191
+ });
192
+ return {
193
+ arrayResult: arrayResult,
194
+ cumulativePayout: cumulativePayout.toFixed(2)
195
+ };
196
+ });
197
+ return _this;
198
+ }
199
+ _createClass(ROIPixelmatic, [{
200
+ key: "componentDidMount",
201
+ value: function componentDidMount() {
202
+ var chartData = this.generateChartData();
203
+ this.setState({
204
+ chartData: chartData.arrayResult,
205
+ cumulativePayout: chartData.cumulativePayout
206
+ });
207
+ }
208
+ }, {
209
+ key: "componentDidUpdate",
210
+ value: function componentDidUpdate(prevProps, prevState) {
211
+ var _this$state2 = this.state,
212
+ years = _this$state2.years,
213
+ totalInvestment = _this$state2.totalInvestment,
214
+ forecast = _this$state2.forecast;
215
+ if (prevState.years !== years || prevState.totalInvestment !== totalInvestment || prevState.forecast !== forecast) {
216
+ var chartData = this.generateChartData();
217
+ this.setState({
218
+ chartData: chartData.arrayResult,
219
+ cumulativePayout: chartData.cumulativePayout
220
+ });
221
+ }
222
+ }
223
+ }, {
224
+ key: "render",
225
+ value: function render() {
226
+ var _this2 = this;
227
+ var _this$state3 = this.state,
228
+ totalInvestment = _this$state3.totalInvestment,
229
+ years = _this$state3.years,
230
+ extendedPanel = _this$state3.extendedPanel,
231
+ forecast = _this$state3.forecast,
232
+ isModalOpen = _this$state3.isModalOpen,
233
+ chartData = _this$state3.chartData,
234
+ cumulativePayout = _this$state3.cumulativePayout;
235
+ var companyScenarioCumPayout = [300000, 608455, 1388109, 2913495, 5457326, 8608488, 12278312, 15200001, 15641109, 16104272];
236
+ var conservativeCumPayout = [300000, 608455, 936336, 1284868, 1655350, 2049164, 2467782, 2912763, 3385770, 3888567];
237
+ var industryAverageCumPayout = [300000, 608455, 945905, 1315074, 1718946, 2160782, 2644151, 3172956, 3751468, 4384361];
238
+ var positiveCumPayout = [300000, 608455, 960402, 1361974, 1820167, 2342965, 2939478, 3620099, 4396688, 5282776];
239
+ var cumTotalPayout;
240
+ if (this.state.forecast === 'companyScenario') {
241
+ cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(companyScenarioCumPayout[years - 1]));
242
+ } else if (this.state.forecast === 'conservative') {
243
+ cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(conservativeCumPayout[years - 1]));
244
+ } else if (this.state.forecast === 'industryAverage') {
245
+ cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(industryAverageCumPayout[years - 1]));
246
+ } else if (this.state.forecast === 'positive') {
247
+ cumTotalPayout = (0, _componentsLibrary.km_ify)(Math.round(positiveCumPayout[years - 1]));
248
+ }
249
+ return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, {
250
+ style: {
251
+ width: '100%'
252
+ }
253
+ }, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
254
+ part: 7,
255
+ style: {
256
+ width: '50%'
257
+ },
258
+ roiColumn: true
259
+ }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
260
+ noPaddingHorizontal: true
261
+ }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
262
+ noPaddingTop: true,
263
+ noPaddingHorizontal: true
264
+ }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement(_ROI.Title, null, "Return on investment tool"), /*#__PURE__*/_react.default.createElement(_ui.RichText, {
265
+ style: {
266
+ paddingLeft: '56px'
267
+ }
268
+ }, "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, {
269
+ noPaddingHorizontal: true
270
+ }, /*#__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, {
271
+ id: "totalInvestmentRange",
272
+ name: "totalInvestmentRange",
273
+ value: totalInvestment,
274
+ min: 100,
275
+ max: 100000,
276
+ step: 100,
277
+ onChange: this.handleTotalInvestmentChange
278
+ })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
279
+ noPaddingTop: true,
280
+ noPaddingHorizontal: true
281
+ }, /*#__PURE__*/_react.default.createElement(_ROI.Label, null, "Years"), /*#__PURE__*/_react.default.createElement(_ROI.Value, null, years), /*#__PURE__*/_react.default.createElement(_RangeInput.default, {
282
+ id: "yearsRange",
283
+ name: "yearsRange",
284
+ value: years,
285
+ min: 1,
286
+ max: 10,
287
+ onChange: this.handleYearsChange
288
+ })))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
289
+ noPadding: true,
290
+ borderTop: true
291
+ }, /*#__PURE__*/_react.default.createElement(_ExpandButton.default, {
292
+ title: "FORECAST SCENARIO",
293
+ textLeft: true,
294
+ isOpened: extendedPanel === PANEL.FORECAST_SCENARIO,
295
+ onClick: function onClick() {
296
+ return _this2.togglePanel(PANEL.FORECAST_SCENARIO);
297
+ }
298
+ }), /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
299
+ isOpened: extendedPanel === PANEL.FORECAST_SCENARIO
300
+ }, /*#__PURE__*/_react.default.createElement(_ROI.TabContainer, {
301
+ borderTop: true
302
+ }, /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.default, {
303
+ title: "Company Scenario",
304
+ subtitle: "Earnings forecast",
305
+ tooltip: "Revenues that Infinite Fleet forecasts",
306
+ radio: {
307
+ id: 'companyScenario',
308
+ value: 'companyScenario',
309
+ name: 'roiForecast',
310
+ checked: forecast === 'companyScenario',
311
+ onChange: this.handleForecastChange
312
+ }
313
+ }))))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
314
+ part: 9,
315
+ withBorder: true,
316
+ style: {
317
+ width: '50%'
318
+ },
319
+ roiColumn: true
320
+ }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
321
+ style: {
322
+ paddingBottom: '5rem'
323
+ }
324
+ }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
325
+ noPaddingHorizontal: true
326
+ }, chartData && /*#__PURE__*/_react.default.createElement(_ROIChart.default, {
327
+ id: "roichart",
328
+ data: chartData
329
+ })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
330
+ noPaddingHorizontal: true,
331
+ noPaddingTop: true
332
+ }, /*#__PURE__*/_react.default.createElement(_ROI.Label, null, "INVESTMENT RESULTS"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemsRow, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
333
+ part: 1,
334
+ full: 3
335
+ }, /*#__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, {
336
+ part: 1,
337
+ full: 3
338
+ }, /*#__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, {
339
+ noPadding: true
340
+ }, /*#__PURE__*/_react.default.createElement(_ui.OutUrl, {
341
+ url: "/roi",
342
+ onClick: function onClick() {
343
+ return _this2.toggleModal(true);
344
+ }
345
+ }, "CHECK HOW WE CALCULATE THIS"))))), /*#__PURE__*/_react.default.createElement(_ROIModal.default, {
346
+ isModalOpen: isModalOpen,
347
+ onModalClose: function onModalClose() {
348
+ return _this2.toggleModal(false);
349
+ }
350
+ }));
351
+ }
352
+ }]);
353
+ return ROIPixelmatic;
354
+ }(_react.PureComponent);
355
+ var _default = ROIPixelmatic;
356
+ exports.default = _default;
@@ -20,7 +20,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
20
20
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
21
21
  var TransactionDetails = function TransactionDetails(props) {
22
22
  var data = props.data;
23
- var _useState = (0, _react.useState)(true),
23
+ var _useState = (0, _react.useState)(false),
24
24
  _useState2 = _slicedToArray(_useState, 2),
25
25
  showDetails = _useState2[0],
26
26
  setShowDetails = _useState2[1];
@@ -0,0 +1,89 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.Logo = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
+ 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); }
11
+ 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; }
12
+ 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); }
13
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
14
+ 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); } }
15
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
16
+ 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); }
17
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
18
+ 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); }; }
19
+ 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); }
20
+ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
21
+ 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; } }
22
+ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
23
+ 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; }
24
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
25
+ 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); }
26
+ var Logo = /*#__PURE__*/function (_PureComponent) {
27
+ _inherits(Logo, _PureComponent);
28
+ var _super = _createSuper(Logo);
29
+ function Logo() {
30
+ _classCallCheck(this, Logo);
31
+ return _super.apply(this, arguments);
32
+ }
33
+ _createClass(Logo, [{
34
+ key: "render",
35
+ value: function render() {
36
+ var _this$props = this.props,
37
+ width = _this$props.width,
38
+ height = _this$props.height;
39
+ return /*#__PURE__*/_react.default.createElement("svg", {
40
+ width: width,
41
+ height: height,
42
+ viewBox: "0 0 70 17",
43
+ xmlns: "http://www.w3.org/2000/svg"
44
+ }, /*#__PURE__*/_react.default.createElement("g", {
45
+ id: "Symbols",
46
+ fill: "none",
47
+ fillRule: "evenodd"
48
+ }, /*#__PURE__*/_react.default.createElement("g", {
49
+ id: "Top-Nav-1024",
50
+ transform: "translate(-32 -39)",
51
+ fill: "#000"
52
+ }, /*#__PURE__*/_react.default.createElement("g", {
53
+ id: "Top-Nav"
54
+ }, /*#__PURE__*/_react.default.createElement("g", {
55
+ id: "Logo",
56
+ transform: "translate(32 39)"
57
+ }, /*#__PURE__*/_react.default.createElement("g", {
58
+ id: "Group"
59
+ }, /*#__PURE__*/_react.default.createElement("path", {
60
+ d: "M66.555242,6.16782412 L66.555103,6.16782412 C66.5514882,8.76665019 63.0238681,8.50517947 62.2490512,8.50617204 L62.2490512,6.16782412 L62.2490512,6.16399565 L62.2490512,3.82564773 C63.0238681,3.8264985 66.5514882,3.56516958 66.555103,6.16399565 L66.555242,6.16399565 L66.555242,6.16583899 L66.555242,6.16782412 Z M66.8324688,10.6725221 C68.2988232,9.97857546 69.4256651,8.66257236 69.4256651,6.16640617 C69.4256651,1.35231059 65.2390406,0.921110786 62.4986109,0.896296591 C62.4767832,0.896013001 62.4546773,0.89572941 62.4329886,0.895587614 C62.3800179,0.895162228 62.3284376,0.895020433 62.2765793,0.895020433 C62.2468268,0.894878638 62.2162401,0.894736842 62.1867656,0.894736842 C62.1767554,0.894736842 62.1674404,0.894736842 62.1575692,0.894736842 C62.0823537,0.894736842 62.0092237,0.895162228 61.9367888,0.895445819 C61.9152391,0.895587614 61.8922991,0.895587614 61.8708884,0.89572941 C61.7910849,0.895162228 61.7125327,0.895020433 61.6353707,0.895020433 L61.6291144,0.895020433 C61.6168797,0.895020433 61.6054792,0.895162228 61.5933835,0.895162228 C61.5101043,0.895162228 61.4289105,0.895445819 61.349246,0.895871205 C61.2239796,0.896438387 61.1020499,0.897289159 60.9870717,0.897856341 L59.3784891,0.897856341 L59.3670886,0.897856341 L59.3670886,6.16640617 L59.3670886,11.434956 L59.3784891,11.434956 L59.3784891,17 L62.2490512,17 L62.2490512,11.4379337 C62.3834937,11.4377919 62.52169,11.4366575 62.6637791,11.4343888 C62.667533,11.4343888 62.6711478,11.4343888 62.6749016,11.434247 C62.8087879,11.4321201 62.9457329,11.4285752 63.0850415,11.4237542 C63.1061741,11.4229034 63.1273067,11.4220526 63.1485784,11.4212018 C63.420522,11.4109926 63.7008074,11.3941189 63.9856809,11.3681704 C64.0075086,11.366327 64.0287803,11.3653345 64.0506081,11.3632075 L66.8618042,17 L70,17 L66.8324688,10.6725221 Z",
61
+ id: "Fill-1"
62
+ }), /*#__PURE__*/_react.default.createElement("path", {
63
+ d: "M33.2278481,0 L33.2278481,3.25720306 C36.0908776,3.25720306 38.4199231,5.60917812 38.4199231,8.50007222 C38.4199231,11.3908219 36.0908776,13.7429414 33.2278481,13.7429414 C30.3649617,13.7429414 28.0357731,11.3908219 28.0357731,8.50007222 C28.0357731,8.49935 28.0359161,8.49877223 28.0359161,8.49805001 L24.8102696,8.49805001 C24.8102696,8.49877223 24.8101266,8.49935 24.8101266,8.50007222 C24.8101266,13.1944891 28.5789119,17 33.2278481,17 C37.8767843,17 41.6455696,13.1944891 41.6455696,8.50007222 C41.6455696,3.80551095 37.8767843,0 33.2278481,0",
64
+ id: "Fill-3"
65
+ }), /*#__PURE__*/_react.default.createElement("path", {
66
+ d: "M7.9484999,4.62134099 C7.11165312,3.50634299 6.25994933,2.94877176 5.39265303,2.94877176 C4.97033151,2.94877176 4.62494282,3.05710814 4.35633987,3.27334755 C4.08773691,3.48987586 3.95343543,3.73384938 3.95343543,4.00512367 C3.95343543,4.27668686 4.04919694,4.53337185 4.24130837,4.7753231 C4.50211507,5.09830995 5.28880107,5.79151832 6.60121924,6.85494821 C7.82905543,7.83806473 8.57352398,8.45789326 8.83462489,8.71457825 C9.4868623,9.34552932 9.94919477,9.94860182 10.2217694,10.5246625 C10.4941969,11.1004342 10.6305578,11.729363 10.6305578,12.4115933 C10.6305578,13.7395084 10.1510147,14.836017 9.1923699,15.7016968 C8.23343086,16.5672323 6.9833827,17 5.44193123,17 C4.23763089,17 3.1888143,16.7174587 2.29518727,16.1528095 C1.40170733,15.5878714 0.636497809,14.7003798 0,13.4899014 L2.70485826,11.9275463 C3.51831629,13.3578754 4.45445497,14.07304 5.51342139,14.07304 C6.06563142,14.07304 6.53002328,13.9192023 6.90600858,13.6109492 C7.28214098,13.302985 7.47013363,12.9472083 7.47013363,12.5436192 C7.47013363,12.1770089 7.3280359,11.8102541 7.04413463,11.4433549 C6.76008627,11.0766002 6.13476799,10.5154178 5.16773851,9.75980763 C3.32561647,8.32211167 2.13587894,7.21245826 1.59867303,6.43128075 C1.06146711,5.65010324 0.793011252,4.87065911 0.793011252,4.09323726 C0.793011252,2.97087238 1.23989832,2.00797866 2.13352536,1.20484497 C3.02700529,0.401566841 4.12980725,0 5.44148993,0 C6.28539747,0 7.08885276,0.186916364 7.85200289,0.561182438 C8.61530013,0.935159616 9.44170288,1.61753435 10.3316524,2.60787329 L10.6329114,2.91785978 L8.20930661,4.96541733 L7.9484999,4.62134099 Z",
67
+ id: "Fill-6"
68
+ }), /*#__PURE__*/_react.default.createElement("polygon", {
69
+ id: "Fill-9",
70
+ points: "55.2467797 0.894736842 51.7892146 0.894736842 47.8456016 6.2929407 47.1836838 7.18500654 47.1836838 0.894736842 44.3037975 0.894736842 44.3037975 17 47.1836838 17 47.1836838 8.95835969 47.8456016 9.97083315 52.4080366 17 55.8227848 17 50.0632911 8.21563333"
71
+ }), /*#__PURE__*/_react.default.createElement("polygon", {
72
+ id: "Fill-11",
73
+ points: "13.2911392 3.82295361 16.2447257 3.82295361 16.2447257 17 19.1983122 17 19.1983122 3.82295361 22.1518987 3.82295361 22.1518987 0.894736842 13.2911392 0.894736842"
74
+ })))))));
75
+ }
76
+ }]);
77
+ return Logo;
78
+ }(_react.PureComponent);
79
+ exports.Logo = Logo;
80
+ _defineProperty(Logo, "propTypes", {
81
+ width: _propTypes.default.number,
82
+ height: _propTypes.default.number
83
+ });
84
+ _defineProperty(Logo, "defaultProps", {
85
+ width: 70,
86
+ height: 17
87
+ });
88
+ var _default = Logo;
89
+ exports.default = _default;
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ 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); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ var _exportNames = {};
8
+ Object.defineProperty(exports, "default", {
9
+ enumerable: true,
10
+ get: function get() {
11
+ return _Logo.default;
12
+ }
13
+ });
14
+ var _Logo = _interopRequireWildcard(require("./Logo"));
15
+ Object.keys(_Logo).forEach(function (key) {
16
+ if (key === "default" || key === "__esModule") return;
17
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
18
+ if (key in exports && exports[key] === _Logo[key]) return;
19
+ Object.defineProperty(exports, key, {
20
+ enumerable: true,
21
+ get: function get() {
22
+ return _Logo[key];
23
+ }
24
+ });
25
+ });
26
+ 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); }
27
+ 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; }
package/dist/index.js CHANGED
@@ -1026,6 +1026,17 @@ Object.keys(_Tabs).forEach(function (key) {
1026
1026
  }
1027
1027
  });
1028
1028
  });
1029
+ var _breakdown = require("./components/breakdown");
1030
+ Object.keys(_breakdown).forEach(function (key) {
1031
+ if (key === "default" || key === "__esModule") return;
1032
+ if (key in exports && exports[key] === _breakdown[key]) return;
1033
+ Object.defineProperty(exports, key, {
1034
+ enumerable: true,
1035
+ get: function get() {
1036
+ return _breakdown[key];
1037
+ }
1038
+ });
1039
+ });
1029
1040
  var _TeamOverview = require("./components/TeamOverview/TeamOverview");
1030
1041
  Object.keys(_TeamOverview).forEach(function (key) {
1031
1042
  if (key === "default" || key === "__esModule") return;
@@ -1311,4 +1322,26 @@ Object.keys(_TermsModal).forEach(function (key) {
1311
1322
  return _TermsModal[key];
1312
1323
  }
1313
1324
  });
1325
+ });
1326
+ var _colors = require("./styles/colors");
1327
+ Object.keys(_colors).forEach(function (key) {
1328
+ if (key === "default" || key === "__esModule") return;
1329
+ if (key in exports && exports[key] === _colors[key]) return;
1330
+ Object.defineProperty(exports, key, {
1331
+ enumerable: true,
1332
+ get: function get() {
1333
+ return _colors[key];
1334
+ }
1335
+ });
1336
+ });
1337
+ var _theme = require("./styles/theme");
1338
+ Object.keys(_theme).forEach(function (key) {
1339
+ if (key === "default" || key === "__esModule") return;
1340
+ if (key in exports && exports[key] === _theme[key]) return;
1341
+ Object.defineProperty(exports, key, {
1342
+ enumerable: true,
1343
+ get: function get() {
1344
+ return _theme[key];
1345
+ }
1346
+ });
1314
1347
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stokr/components-library",
3
- "version": "2.3.6-beta.2",
3
+ "version": "2.3.6-beta.4",
4
4
  "description": "STOKR - Components Library",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",