@woosmap/ui 4.159.2 → 4.160.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "4.159.2",
+  "version": "4.160.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/PricingSlider/PricingData.js

@@ -30,8 +30,9 @@ const Pricing = {
                     [20000000, 0.01],
                     [50000000, 0.01],
                 ],
+                discountEligible: true,
             },
-            'Mappinp': {
+            'Mapping': {
                 defaultQueries: 1500,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -46,6 +47,7 @@ const Pricing = {
                     [20000000, 0.14],
                     [50000000, 0.06],
                 ],
+                discountEligible: true,
             },
             'Data Management': {
                 defaultQueries: 1500,
@@ -62,6 +64,7 @@ const Pricing = {
                     [20000000, 0.28],
                     [50000000, 0.12],
                 ],
+                discountEligible: true,
             },
             'Mobile Search': {
                 defaultQueries: 1500,
@@ -78,6 +81,7 @@ const Pricing = {
                     [20000000, 0.14],
                     [50000000, 0.06],
                 ],
+                discountEligible: true,
             },
         },
     },
@@ -94,6 +98,7 @@ const Pricing = {
                 pricing: [
                     [50000000, 0],
                 ],
+                discountEligible: true,
             },
             'Details': {
                 defaultQueries: 1500,
@@ -110,6 +115,7 @@ const Pricing = {
                     [20000000, 0.46],
                     [50000000, 0.46],
                 ],
+                discountEligible: true,
             },
             'Details UK Addresses': {
                 defaultQueries: 1500,
@@ -127,6 +133,7 @@ const Pricing = {
                     [20000000, 0.94],
                     [50000000, 0.94],
                 ],
+                discountEligible: false,
             },
             'Geocode/Reverse Geocode': {
                 defaultQueries: 1500,
@@ -143,6 +150,7 @@ const Pricing = {
                     [20000000, 0.05],
                     [50000000, 0.02],
                 ],
+                discountEligible: true,
             },
             'Geocode/Reverse Geocode UK addresses': {
                 defaultQueries: 1500,
@@ -160,6 +168,7 @@ const Pricing = {
                     [20000000, 0.1],
                     [50000000, 0.04],
                 ],
+                discountEligible: false,
             },
             'Nearby': {
                 defaultQueries: 1500,
@@ -176,6 +185,7 @@ const Pricing = {
                     [20000000, 0.46],
                     [50000000, 0.46],
                 ],
+                discountEligible: true,
             },
             'what3words': {
                 defaultQueries: 0,
@@ -186,6 +196,7 @@ const Pricing = {
                 pricing: [
                     [50000000, 0],
                 ],
+                discountEligible: true,
             },
         },
     },
@@ -208,6 +219,7 @@ const Pricing = {
                     [20000000, 0.07],
                     [50000000, 0.03],
                 ],
+                discountEligible: true,
             },
         },
     },
@@ -230,6 +242,7 @@ const Pricing = {
                     [20000000, 0.05],
                     [50000000, 0.02],
                 ],
+                discountEligible: true,
             },
             'Route with Traffic (/q)': {
                 defaultQueries: 1500,
@@ -246,6 +259,7 @@ const Pricing = {
                     [20000000, 0.11],
                     [50000000, 0.04],
                 ],
+                discountEligible: false,
             },
             'Distance Matrix (/elt)': {
                 defaultQueries: 1500,
@@ -262,6 +276,7 @@ const Pricing = {
                     [20000000, 0.05],
                     [50000000, 0.02],
                 ],
+                discountEligible: true,
             },
             'Distance Matrix with Traffic (/elt)': {
                 defaultQueries: 1500,
@@ -278,6 +293,7 @@ const Pricing = {
                     [20000000, 0.11],
                     [50000000, 0.04],
                 ],
+                discountEligible: false,
             },
             'Isochrone (/q)': {
                 defaultQueries: 1500,
@@ -294,6 +310,7 @@ const Pricing = {
                     [20000000, 0.05],
                     [50000000, 0.02],
                 ],
+                discountEligible: true,
             },
             'Distance Matrix on Mobile (/elt)': {
                 defaultQueries: 1500,
@@ -310,6 +327,7 @@ const Pricing = {
                     [20000000, 0.28],
                     [50000000, 0.12],
                 ],
+                discountEligible: true,
             },
             'Distance Matrix with Traffic on Mobile (/elt)': {
                 defaultQueries: 1500,
@@ -326,6 +344,7 @@ const Pricing = {
                     [20000000, 0.56],
                     [50000000, 0.24],
                 ],
+                discountEligible: false,
             },
         },
     },
@@ -348,6 +367,7 @@ const Pricing = {
                     [20000000, 0.06],
                     [50000000, 0.02],
                 ],
+                discountEligible: false,
             },
             'Stores': {
                 defaultQueries: 1500,
@@ -364,6 +384,7 @@ const Pricing = {
                     [20000000, 0.07],
                     [50000000, 0.05],
                 ],
+                discountEligible: true,
             },
             'Timezone': {
                 defaultQueries: 1500,
@@ -380,6 +401,7 @@ const Pricing = {
                     [20000000, 0.07],
                     [50000000, 0.05],
                 ],
+                discountEligible: true,
             },
         },
     },
@@ -402,6 +424,7 @@ const Pricing = {
                     [20000000, 0.07],
                     [50000000, 0.03],
                 ],
+                discountEligible: false,
             },
         },
     },
@@ -424,6 +447,7 @@ const Pricing = {
                     [20000000, 0.06],
                     [50000000, 0.02],
                 ],
+                discountEligible: true,
             },
             'Distance': {
                 defaultQueries: 1500,
@@ -440,6 +464,7 @@ const Pricing = {
                     [20000000, 0.56],
                     [50000000, 0.24],
                 ],
+                discountEligible: true,
             },
             'Data Management': {
                 defaultQueries: 1500,
@@ -456,6 +481,7 @@ const Pricing = {
                     [20000000, 0.56],
                     [50000000, 0.24],
                 ],
+                discountEligible: true,
             },
             'Mapping': {
                 defaultQueries: 1500,
@@ -472,6 +498,7 @@ const Pricing = {
                     [20000000, 0.56],
                     [50000000, 0.24],
                 ],
+                discountEligible: true,
             },
         },
     },

package/src/components/PricingSlider/PricingSimulator.js

@@ -4,23 +4,31 @@ import PricingSlider from './PricingSlider';
 import PricingData from './PricingData';
 
 class PricingSimulator extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { total: 0 };
+    }
+
     onChange = (pricingKey) => (data) => {
         console.log(pricingKey, data);
     };
 
     render() {
+        const { total } = this.state;
         const { publicMode, currency } = this.props;
         return (
             <>
-                <ul className="pricing-menu">
-                    {Object.keys(PricingData).map((category) => (
+                <div className="pricing-nav">
+                    <ul className="pricing-menu">
+                        {Object.keys(PricingData).map((category) => (
+                            <li className="pricing-menu__item">
+                                <a href={`#${category}`}>{category}</a>
+                            </li>
+                        ))}
                         <li className="pricing-menu__item">
-                            <a href={`#${category}`}>{category}</a>
+                            <div className="pricing-total">{total + currency}</div>
                         </li>
-                    ))}
-                </ul>
-                <div className="pricing-total">
-                    <div className="pricing-total__label">120€</div>
+                    </ul>
                 </div>
                 <div className="pricing-simulator__wrapper">
                     {Object.keys(PricingData).map((category) => (

package/src/components/PricingSlider/PricingSlider.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import ReactSlider from 'react-slider';
 import PropTypes from 'prop-types';
 import numeral from 'numeral';
-import { Button, Input, tr } from '@woosmap/ui';
+import { Input } from '@woosmap/ui';
 
 class PricingSlider extends Component {
     constructor(props) {
@@ -94,7 +94,7 @@ class PricingSlider extends Component {
 
         let value;
         if (props.key === 0) {
-            value = props.key;
+            value = 0;
         } else {
             const index = props.key / 1000 - 1;
             if (index === displayedPricing.length - 1 && publicMode) {
@@ -120,6 +120,27 @@ class PricingSlider extends Component {
         return publicMode ? pricing.slice(0, publicTierCount + 1) : pricing;
     };
 
+    getDisplayedData = () => {
+        const { queries } = this.state;
+        const { name, productPricing } = this.props;
+        const displayedPricing = this.getDisplayedPricing();
+        const marks = this.getMarks(displayedPricing);
+        const computedQueries = this.computeQueries(queries);
+        const formatedQueries = computedQueries === '∞' ? computedQueries : numeral(computedQueries).format('0.[0]a');
+        const amount = this.computeAmount(displayedPricing, computedQueries);
+
+        return {
+            queries,
+            amount,
+            formatedQueries,
+            marks,
+            computedQueries,
+            name,
+            discountEligible: productPricing.discountEligible,
+            displayedPricing,
+        };
+    };
+
     onChange = () => {
         const { onChange } = this.props;
         if (onChange) {
@@ -128,13 +149,9 @@ class PricingSlider extends Component {
     };
 
     render() {
-        const { queries } = this.state;
         const { name, productPricing } = this.props;
-        const displayedPricing = this.getDisplayedPricing();
-        const marks = this.getMarks(displayedPricing);
-        const computedQueries = this.computeQueries(queries);
-        const formatedQueries = computedQueries === '∞' ? computedQueries : numeral(computedQueries).format('0.[0]a');
-        const amount = this.computeAmount(displayedPricing, computedQueries);
+        const { queries, displayedPricing, amount, formatedQueries, marks, computedQueries } = this.getDisplayedData();
+
         return (
             <div className="pricing-slider__wrapper" id={name}>
                 <div className="pricing-slider__info">
@@ -158,7 +175,7 @@ class PricingSlider extends Component {
                     )}
                     renderMark={this.renderMarks}
                     pearling
-                    min={1}
+                    min={0}
                     onChange={(a) => {
                         this.setState({ queries: a }, this.onChange);
                     }}