@woosmap/ui 4.170.0 → 4.172.0
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
|
@@ -155,7 +155,7 @@ export default class PricingSlider extends Component {
|
|
|
155
155
|
};
|
|
156
156
|
|
|
157
157
|
displayDetails = (displayedPricing) => (
|
|
158
|
-
<div>
|
|
158
|
+
<div className='pricing-slider__detailed-price'>
|
|
159
159
|
<table>
|
|
160
160
|
<tr>
|
|
161
161
|
<td>{tr('Monthly Requests')}</td>
|
|
@@ -192,57 +192,66 @@ export default class PricingSlider extends Component {
|
|
|
192
192
|
}
|
|
193
193
|
return (
|
|
194
194
|
<div className="pricing-slider__wrapper" id={id}>
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
195
|
+
<div className="pricing-slider__cont">
|
|
196
|
+
<div className="pricing-slider__info">
|
|
197
|
+
<h3>{name}</h3>
|
|
198
|
+
{discountEligible && (
|
|
199
|
+
<div className="eligible-discount">
|
|
200
|
+
<span className="eligible-discount-img">
|
|
201
|
+
<img src={discountCheck} alt="Eligible to Monthly Free usage" />
|
|
202
|
+
</span>
|
|
203
|
+
<span className="eligible-discount-text">Eligible to Monthly Free Usage</span>
|
|
204
|
+
</div>
|
|
205
|
+
)}
|
|
206
|
+
<p className="pricing-slider__description">{productPricing.description}</p>
|
|
207
|
+
<div className="pricing-slider__documentation">
|
|
208
|
+
<a href={`${productPricing.docLink}`} target="_blank" rel="noreferrer">
|
|
209
|
+
<Icon icon="documentation" />
|
|
210
|
+
<span>Documentation</span>
|
|
211
|
+
</a>
|
|
204
212
|
</div>
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
</a>
|
|
213
|
+
<Button
|
|
214
|
+
className="pricing-slider__detailed-price-btn"
|
|
215
|
+
icon="caret-bottom"
|
|
216
|
+
label={tr('Detailed Pricing')}
|
|
217
|
+
onClick={() => this.setState({ displayDetailed: true })}
|
|
218
|
+
/>
|
|
212
219
|
</div>
|
|
220
|
+
<ReactSlider
|
|
221
|
+
className="pricing-vertical-slider"
|
|
222
|
+
markClassName="pricing-mark"
|
|
223
|
+
thumbClassName="pricing-thumb"
|
|
224
|
+
trackClassName="pricing-track"
|
|
225
|
+
value={queries}
|
|
226
|
+
marks={marks}
|
|
227
|
+
ariaLabel={['Consumption']}
|
|
228
|
+
renderThumb={(props) => (
|
|
229
|
+
<div {...props}>
|
|
230
|
+
<span>
|
|
231
|
+
<span>{aboveLastTier || formatedQueries} </span>
|
|
232
|
+
</span>
|
|
233
|
+
</div>
|
|
234
|
+
)}
|
|
235
|
+
renderMark={this.renderMarks}
|
|
236
|
+
pearling
|
|
237
|
+
min={0}
|
|
238
|
+
step={1000}
|
|
239
|
+
onChange={(_queries) => {
|
|
240
|
+
this.onChange(_queries);
|
|
241
|
+
}}
|
|
242
|
+
max={displayedPricing.length * 100000 || 50000000}
|
|
243
|
+
/>
|
|
244
|
+
<div className="pricing-slider__queries">
|
|
245
|
+
<div className="pricing-slider__queries__label">{productPricing.unit}</div>
|
|
246
|
+
<Input
|
|
247
|
+
type="text"
|
|
248
|
+
onChange={this.reverseComputeQueries}
|
|
249
|
+
value={aboveLastTier || computedQueries}
|
|
250
|
+
/>
|
|
251
|
+
</div>
|
|
252
|
+
<div className="pricing-slider__price">{displayedAmount}</div>
|
|
213
253
|
</div>
|
|
214
|
-
<
|
|
215
|
-
className="pricing-vertical-slider"
|
|
216
|
-
markClassName="pricing-mark"
|
|
217
|
-
thumbClassName="pricing-thumb"
|
|
218
|
-
trackClassName="pricing-track"
|
|
219
|
-
value={queries}
|
|
220
|
-
marks={marks}
|
|
221
|
-
ariaLabel={['Consumption']}
|
|
222
|
-
renderThumb={(props) => (
|
|
223
|
-
<div {...props}>
|
|
224
|
-
<span>
|
|
225
|
-
<span>{aboveLastTier || formatedQueries} </span>
|
|
226
|
-
</span>
|
|
227
|
-
</div>
|
|
228
|
-
)}
|
|
229
|
-
renderMark={this.renderMarks}
|
|
230
|
-
pearling
|
|
231
|
-
min={0}
|
|
232
|
-
step={1000}
|
|
233
|
-
onChange={(_queries) => {
|
|
234
|
-
this.onChange(_queries);
|
|
235
|
-
}}
|
|
236
|
-
max={displayedPricing.length * 100000 || 50000000}
|
|
237
|
-
/>
|
|
238
|
-
<div className="pricing-slider__queries">
|
|
239
|
-
<div className="pricing-slider__queries__label">{productPricing.unit}</div>
|
|
240
|
-
<Input type="text" onChange={this.reverseComputeQueries} value={aboveLastTier || computedQueries} />
|
|
241
|
-
</div>
|
|
242
|
-
<div className="pricing-slider__price">{displayedAmount}</div>
|
|
243
|
-
<div className="pricing-slider__price__detail-link">
|
|
244
|
-
<Button label={tr('Detailed Pricing')} onClick={() => this.setState({ displayDetailed: true })} />
|
|
245
|
-
</div>
|
|
254
|
+
{displayDetailed && this.displayDetails(displayedPricing)}<
|
|
246
255
|
</div>
|
|
247
256
|
);
|
|
248
257
|
}
|