@woosmap/ui 4.169.2 → 4.169.3

package/package.json

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

package/src/components/PricingSlider/PricingData.js

@@ -12,10 +12,11 @@ import indoorImgSq from '../../images/products/product-indoor-sq.png';
 
 const Pricing = {
     Stores: {
-        image : storesImgSq,
-        description : "A dedicated search engine for your own data",
+        image: storesImgSq,
+        description: "A dedicated search engine for your own data",
         pricings: {
             'Search': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -33,6 +34,7 @@ const Pricing = {
                 discountEligible: true,
             },
             'Mapping': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -50,6 +52,7 @@ const Pricing = {
                 discountEligible: true,
             },
             'Data Management': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -67,6 +70,7 @@ const Pricing = {
                 discountEligible: true,
             },
             'Mobile Search': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -86,19 +90,21 @@ const Pricing = {
         },
     },
     Localities: {
-        image : localitiesImgSq,
-        description : "Find the right address and speed up the customer journey with autocompletion and geocode features",
+        image: localitiesImgSq,
+        description: "Find the right address and speed up the customer journey with autocompletion and geocode features",
         pricings: {
             'Autocomplete': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 1,
                 publicTierCount: 1,
                 unit: "Monthly Requests",
                 description:
-                    "Get suggestions on addresses, localities, postcodes and more. Search on full words as well as substrings, with high flexibility on typos",
+                    "Get suggestions for addresses, localities, postcodes and more with typo tolerance. Per terms, 'autocomplete' cannot be used alone, the 'details' endpoint is mandatory for detailed information.",
                 pricing: [],
                 discountEligible: true,
             },
             'Details': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -116,6 +122,7 @@ const Pricing = {
                 discountEligible: true,
             },
             'Details UK Addresses': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 4, unit: "Monthly Requests",
                 description:
@@ -134,6 +141,7 @@ const Pricing = {
                 discountEligible: false,
             },
             'Geocode/Reverse Geocode': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -151,6 +159,7 @@ const Pricing = {
                 discountEligible: true,
             },
             'Geocode/Reverse Geocode UK addresses': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 4, unit: "Monthly Requests",
                 description:
@@ -169,6 +178,7 @@ const Pricing = {
                 discountEligible: false,
             },
             'Nearby': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -186,6 +196,7 @@ const Pricing = {
                 discountEligible: true,
             },
             'what3words': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 1,
                 unit: "Monthly Requests",
@@ -197,10 +208,11 @@ const Pricing = {
         },
     },
     'Map': {
-        image : mapImgSq,
-        description : "Display your data without compromising readability",
+        image: mapImgSq,
+        description: "Display your data without compromising readability",
         pricings: {
             'Mapload': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -220,10 +232,11 @@ const Pricing = {
         },
     },
     Distance: {
-        image : distanceImgSq,
-        description : "Get distance or time for your routes worldwide with or without traffic",
+        image: distanceImgSq,
+        description: "Get distance or time for your routes worldwide with or without traffic",
         pricings: {
             'Route (/q)': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -241,6 +254,7 @@ const Pricing = {
                 discountEligible: true,
             },
             'Route with Traffic (/q)': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -258,9 +272,10 @@ const Pricing = {
                 discountEligible: false,
             },
             'Distance Matrix (/elt)': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
-                unit: "Monthly Elements", 
+                unit: "Monthly Elements",
                 description:
                     "Get driving, cycling or walking route distance and duration for multiple Origins and Destinations",
                 pricing: [
@@ -275,9 +290,10 @@ const Pricing = {
                 discountEligible: true,
             },
             'Distance Matrix with Traffic (/elt)': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
-                unit: "Monthly Elements", 
+                unit: "Monthly Elements",
                 description:
                     "Get driving, cycling or walking route distance and duration for multiple Origins and Destinations, including historical or real time traffic paterns",
                 pricing: [
@@ -292,9 +308,10 @@ const Pricing = {
                 discountEligible: false,
             },
             'Isochrone (/q)': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
-                unit: "Monthly Requests", 
+                unit: "Monthly Requests",
                 description:
                     "Get isochrone computations to display on a map",
                 pricing: [
@@ -309,9 +326,10 @@ const Pricing = {
                 discountEligible: true,
             },
             'Distance Matrix on Mobile (/elt)': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
-                unit: "Monthly Elements", 
+                unit: "Monthly Elements",
                 description:
                     "Get driving, cycling or walking route distance and duration for multiple Origins and Destinations on Mobile integrations",
                 pricing: [
@@ -326,9 +344,10 @@ const Pricing = {
                 discountEligible: true,
             },
             'Distance Matrix with Traffic on Mobile (/elt)': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
-                unit: "Monthly Elements", 
+                unit: "Monthly Elements",
                 description:
                     "Get driving, cycling or walking route distance and duration for multiple Origins and Destinations, including historical or real time traffic paterns on Mobile integrations",
                 pricing: [
@@ -343,9 +362,10 @@ const Pricing = {
                 discountEligible: false,
             },
             'Transit': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
-                unit: "Monthly Requests", 
+                unit: "Monthly Requests",
                 description:
                     "Get distance, duration, path and public transport details between an origin and a destination, based on public transportation",
                 pricing: [
@@ -362,10 +382,11 @@ const Pricing = {
         },
     },
     Geolocation: {
-        image : geolocationImgSq,
-        description : "Automatic Geolocation based on IP addresses",
+        image: geolocationImgSq,
+        description: "Automatic Geolocation based on IP addresses",
         pricings: {
             'Position': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -383,6 +404,7 @@ const Pricing = {
                 discountEligible: false,
             },
             'Stores': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -400,6 +422,7 @@ const Pricing = {
                 discountEligible: false,
             },
             'Timezone': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -419,10 +442,11 @@ const Pricing = {
         },
     },
     Indoor: {
-        image : indoorImgSq,
-        description : "Map private venues and propose indoor search and wayfinding",
+        image: indoorImgSq,
+        description: "Map private venues and propose indoor search and wayfinding",
         pricings: {
             'Search': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -440,6 +464,7 @@ const Pricing = {
                 discountEligible: true,
             },
             'Distance': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -457,6 +482,7 @@ const Pricing = {
                 discountEligible: true,
             },
             'Data Management': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",
@@ -474,6 +500,7 @@ const Pricing = {
                 discountEligible: true,
             },
             'Mapping': {
+                docLink: 'https://developers.woosmap.com',
                 defaultQueries: 0,
                 publicTierCount: 2,
                 unit: "Monthly Requests",

package/src/components/PricingSlider/PricingSimulator.js

@@ -56,16 +56,19 @@ class PricingSimulator extends Component {
         const { currency } = this.props;
         const discount = currency === '£' ? 170 : 200;
         const total = notEligibleTotal + Math.max(eligibleTotal - discount, 0);
-        return { total, notEligibleTotal, eligibleTotal, contactSale, discount };
+        const totalBeforeDiscount = notEligibleTotal + eligibleTotal;
+        return { total, notEligibleTotal, eligibleTotal, contactSale, discount, totalBeforeDiscount };
     };
 
-    getAnchor = (string) => string.replaceAll(' ', '_').replaceAll('/', '_').toUpperCase();
+    getAnchor = (string) => string.replaceAll(' ', '_').replaceAll('/', '_').replaceAll("(", "").replaceAll(")", "").toUpperCase();
+
+    displayAmount = (amount, currency) => (currency === '€' ? `${amount}${currency}` : `${currency}${amount}`);
 
     render() {
         const { sliders } = this.state;
         const { publicMode, currency } = this.props;
-        const { total, discount, contactSale } = this.computeTotal();
-        let totalDisplayed = `${parseInt(total, 10)}${currency}`;
+        const { total, discount, contactSale, totalBeforeDiscount } = this.computeTotal();
+        let totalDisplayed = this.displayAmount(parseInt(total, 10), currency);
         if (contactSale) {
             totalDisplayed = <a href="/en/contact">Contact Sales</a>;
         }
@@ -81,10 +84,10 @@ class PricingSimulator extends Component {
                     </ul>
                     <div className="pricing-total">
                         <div className="pricing-total__label">Monthly price</div>
-                        <div className="pricing-total__amount">{totalDisplayed}</div>
+                        <div className="pricing-total__amount">{totalBeforeDiscount}</div>
                         <div className="pricing-total__info">
                             {!contactSale && (
-                                <span className="pricing-total__discount">{`(-${discount}${currency} Monthly Free Usage)`}</span>
+                                <span className="pricing-total__discount">{`(-${discount}${currency} Monthly Free Usage)`} = {totalDisplayed}</span>
                             )}
                         </div>
                     </div>
@@ -111,7 +114,7 @@ class PricingSimulator extends Component {
                                 const productPricing = PricingData[category].pricings[pricingKey];
                                 return (
                                     <PricingSlider
-                                        id={this.getAnchor(`${category}_${pricingKey}`)}
+                                        id={this.getAnchor(`${category}-${pricingKey}`)}
                                         productPricing={productPricing}
                                         name={pricingKey}
                                         key={`pricing_${pricingKey.replace(' ', '')}`}

package/src/components/PricingSlider/PricingSlider.js

@@ -6,6 +6,8 @@ import { Input } from '@woosmap/ui';
 import discountCheck from '../../images/discount-check.png';
 
 class PricingSlider extends Component {
+    displayAmount = (amount, currency) => (currency === '€' ? `${amount}${currency}` : `${currency}${amount}`);
+
     computeAmount = (pricing, queries) => {
         const { currency } = this.props;
         const coef = currency === '$' ? 1.1 : 1;
@@ -146,11 +148,11 @@ class PricingSlider extends Component {
         const { displayedPricing, amount, formatedQueries, marks, computedQueries, aboveLastTier, discountEligible } =
             this.getDisplayedData(queries);
 
-        let displayedAmount = <span className="amount">{`0${currency}`}</span>;
+        let displayedAmount = <span className="amount">{this.displayAmount(0, currency)}</span>;
         if (amount === '∞') {
             displayedAmount = this.contactSalesButton();
         } else if (amount > 0) {
-            displayedAmount = <span className="amount">{`${parseInt(amount, 10)}${currency}`}</span>;
+            displayedAmount = <span className="amount">{this.displayAmount(parseInt(amount, 10), currency)}</span>;
         } else if (displayedPricing.length === 0) {
             displayedAmount = <span className="free-label">FREE</span>;
         }
@@ -167,6 +169,7 @@ class PricingSlider extends Component {
                         </div>
                     )}
                     <p>{productPricing.description}</p>
+                    <span><a href="{productPricing.docLink}">Doc</a></span>
                 </div>
                 <ReactSlider
                     className="pricing-vertical-slider"