@woosmap/ui 4.145.2 → 4.145.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.
package/package.json
CHANGED
|
@@ -1,47 +1,28 @@
|
|
|
1
1
|
import React, { Component } from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
2
3
|
import PricingSlider from './PricingSlider';
|
|
3
4
|
import PricingData from './PricingData';
|
|
4
|
-
import Switch from '../Switch/Switch';
|
|
5
5
|
|
|
6
6
|
class PricingSimulator extends Component {
|
|
7
|
-
constructor(props) {
|
|
8
|
-
super(props);
|
|
9
|
-
const params = new URLSearchParams(window.location.search);
|
|
10
|
-
this.state = {
|
|
11
|
-
publicMode: params.get('public') !== 'false',
|
|
12
|
-
currency: params.get('currency') || '€',
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
|
|
16
7
|
render() {
|
|
17
|
-
const { publicMode, currency } = this.
|
|
8
|
+
const { publicMode, currency } = this.props;
|
|
18
9
|
return (
|
|
19
|
-
<div
|
|
20
|
-
<Switch
|
|
21
|
-
onChange={(checked) => this.setState({ publicMode: checked })}
|
|
22
|
-
checked={publicMode}
|
|
23
|
-
id="public_mode"
|
|
24
|
-
name="public_mode"
|
|
25
|
-
text="Public Mode"
|
|
26
|
-
/>
|
|
27
|
-
|
|
10
|
+
<div className="pricing-simulator__wrapper">
|
|
28
11
|
{Object.keys(PricingData).map((category) => (
|
|
29
|
-
<div
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
})}
|
|
44
|
-
</div>
|
|
12
|
+
<div className="pricing-simulator__item">
|
|
13
|
+
<h2>{category}</h2>
|
|
14
|
+
{Object.keys(PricingData[category].pricings).map((pricingKey) => {
|
|
15
|
+
const productPricing = PricingData[category].pricings[pricingKey];
|
|
16
|
+
return (
|
|
17
|
+
<PricingSlider
|
|
18
|
+
productPricing={productPricing}
|
|
19
|
+
name={pricingKey}
|
|
20
|
+
key={`pricing_${pricingKey.replace(' ', '')}`}
|
|
21
|
+
publicMode={publicMode}
|
|
22
|
+
currency={currency}
|
|
23
|
+
/>
|
|
24
|
+
);
|
|
25
|
+
})}
|
|
45
26
|
</div>
|
|
46
27
|
))}
|
|
47
28
|
</div>
|
|
@@ -49,8 +30,8 @@ class PricingSimulator extends Component {
|
|
|
49
30
|
}
|
|
50
31
|
}
|
|
51
32
|
|
|
52
|
-
PricingSimulator.defaultProps = {};
|
|
33
|
+
PricingSimulator.defaultProps = { currency: '€', publicMode: true };
|
|
53
34
|
|
|
54
|
-
PricingSimulator.propTypes = {};
|
|
35
|
+
PricingSimulator.propTypes = { currency: PropTypes.string, publicMode: PropTypes.bool };
|
|
55
36
|
|
|
56
37
|
export default PricingSimulator;
|
|
@@ -37,7 +37,7 @@ class PricingSlider extends Component {
|
|
|
37
37
|
}
|
|
38
38
|
return amount;
|
|
39
39
|
}, 0),
|
|
40
|
-
10
|
|
40
|
+
10
|
|
41
41
|
)} ${currency}`;
|
|
42
42
|
};
|
|
43
43
|
|
|
@@ -116,8 +116,8 @@ class PricingSlider extends Component {
|
|
|
116
116
|
const formatedQueries = computedQueries === '∞' ? computedQueries : numeral(computedQueries).format('0.[0]a');
|
|
117
117
|
const amount = this.computeAmount(displayedPricing, computedQueries);
|
|
118
118
|
return (
|
|
119
|
-
<div
|
|
120
|
-
<div
|
|
119
|
+
<div className="pricing-slider__wrapper">
|
|
120
|
+
<div className="pricing-slider__info">
|
|
121
121
|
<h2>{name}</h2>
|
|
122
122
|
<p>{productPricing.description}</p>
|
|
123
123
|
</div>
|
|
@@ -144,7 +144,7 @@ class PricingSlider extends Component {
|
|
|
144
144
|
}}
|
|
145
145
|
max={displayedPricing.length * 1000}
|
|
146
146
|
/>
|
|
147
|
-
<div
|
|
147
|
+
<div className="pricing-slider__cta">
|
|
148
148
|
<Input type="text" onChange={this.reverseComputeQueries} value={computedQueries} />{' '}
|
|
149
149
|
{productPricing.unit}
|
|
150
150
|
{amount}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
$pR = .6rem
|
|
2
|
-
.pricing
|
|
3
|
-
&-vertical-slider
|
|
4
|
-
height 6rem
|
|
5
|
-
width 600px
|
|
6
|
-
display flex
|
|
7
|
-
&-mark
|
|
8
|
-
position relative
|
|
9
|
-
z-index 10
|
|
10
|
-
top $pR
|
|
11
|
-
background-color $dark40
|
|
12
|
-
width .1rem
|
|
13
|
-
height .6rem
|
|
14
|
-
|
|
15
|
-
span
|
|
16
|
-
position absolute
|
|
17
|
-
top 2rem
|
|
18
|
-
left -50%
|
|
19
|
-
transform translateX(-50%)
|
|
20
|
-
&-track
|
|
21
|
-
height $pR
|
|
22
|
-
&-0
|
|
23
|
-
border-radius $borderRadius 0 0 $borderRadius
|
|
24
|
-
background-color $logo2
|
|
25
|
-
&-1
|
|
26
|
-
border-radius 0 $borderRadius $borderRadius 0
|
|
27
|
-
background-color #F1F1F1
|
|
28
|
-
&-thumb
|
|
29
|
-
position relative
|
|
30
|
-
width .1rem
|
|
31
|
-
z-index 15 !important
|
|
32
|
-
> span
|
|
33
|
-
br()
|
|
34
|
-
padding .3rem .6rem
|
|
35
|
-
min-width 3rem
|
|
36
|
-
position absolute
|
|
37
|
-
left 50%
|
|
38
|
-
transform translateX(-50%)
|
|
39
|
-
bottom 2rem
|
|
40
|
-
display flex
|
|
41
|
-
justify-content center
|
|
42
|
-
align-content center
|
|
43
|
-
background-color $logo3
|
|
44
|
-
color $light
|
|
45
|
-
font-weight 600
|
|
46
|
-
&:before
|
|
47
|
-
br(50)
|
|
48
|
-
position absolute
|
|
49
|
-
top 3.8rem
|
|
50
|
-
content ''
|
|
51
|
-
width 1.7rem
|
|
52
|
-
height 1.7rem
|
|
53
|
-
box-shadow 0 0 1rem $dark10
|
|
54
|
-
background-color #F2F2F2
|
|
55
|
-
border .1rem solid $dark10
|