@woosmap/ui 4.162.2 → 4.162.4

package/package.json

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

package/src/components/PricingSlider/PricingSimulator.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import PricingSlider from './PricingSlider';
 import PricingData from './PricingData';
+import pricingData from './PricingData';
 
 class PricingSimulator extends Component {
     constructor(props) {
@@ -9,23 +10,52 @@ class PricingSimulator extends Component {
         const sliders = {};
         Object.keys(PricingData).forEach((category) => {
             Object.keys(PricingData[category].pricings).forEach((pricingKey) => {
-                sliders[category + pricingKey] = { queries: PricingData[category].pricings[pricingKey].defaultQueries };
+                if (!sliders[category]) {
+                    sliders[category] = {};
+                }
+                sliders[category][pricingKey] = { queries: PricingData[category].pricings[pricingKey].defaultQueries };
             });
         });
-        this.state = { total: 0, sliders };
+        this.state = { sliders };
     }
 
-    onChange = (pricingKey) => (data) => {
+    onChange = (category, pricingKey) => (data) => {
         console.log(pricingKey, data);
         const { sliders } = this.state;
         const newSliders = { ...sliders };
-        newSliders[pricingKey] = data;
+        newSliders[category][pricingKey] = data;
         this.setState({ sliders: newSliders });
     };
 
+    computeTotal = () => {
+        let freeQueriesTotal = 0;
+        let eligibleTotal = 0;
+        let notEligibleTotal = 0;
+
+        const { sliders } = this.state;
+        Object.keys(sliders).forEach((category) => {
+            Object.keys(sliders[category]).forEach((pricingKey) => {
+                const { discountEligible } = PricingData[category].pricings[pricingKey];
+                if (discountEligible) {
+                    if (!Number.isNaN(freeQueriesTotal)) {
+                        freeQueriesTotal += sliders[category].queries;
+                    }
+                    eligibleTotal += sliders[category].amount;
+                } else if (sliders[category].queries > 0) {
+                    freeQueriesTotal = false;
+                    notEligibleTotal += sliders[category].amount;
+                }
+            });
+        });
+        const total = notEligibleTotal + eligibleTotal;
+        console.log(total, freeQueriesTotal, notEligibleTotal, eligibleTotal);
+        return { total, freeQueriesTotal, notEligibleTotal, eligibleTotal };
+    };
+
     render() {
-        const { total, sliders } = this.state;
+        const { sliders } = this.state;
         const { publicMode, currency } = this.props;
+        const { total } = this.computeTotal();
         return (
             <>
                 <div className="pricing-nav">
@@ -69,7 +99,7 @@ class PricingSimulator extends Component {
                                         publicMode={publicMode}
                                         currency={currency}
                                         values={sliders[category + pricingKey]}
-                                        onChange={this.onChange(category + pricingKey)}
+                                        onChange={this.onChange(category, pricingKey)}
                                     />
                                 );
                             })}

package/src/components/PricingSlider/PricingSlider.js

@@ -11,7 +11,7 @@ class PricingSlider extends Component {
         let q = queries;
         let previousPricingTier;
         if (queries === '∞') {
-            return this.contactSalesButton();
+            return queries;
         }
         return parseInt(
             pricing.reduce((amount, tier, index) => {
@@ -137,12 +137,12 @@ class PricingSlider extends Component {
         const { name, productPricing, currency, values } = this.props;
         const { queries } = values;
         const { displayedPricing, amount, formatedQueries, marks, computedQueries } = this.getDisplayedData(queries);
-        const displayedAmount =
-            amount === 0 ? (
-                <span className="free-label">FREE</span>
-            ) : (
-                <span className="amount">{`${amount} ${currency}`}</span>
-            );
+        let displayedAmount = <span className="free-label">FREE</span>;
+        if (amount === '∞') {
+            displayedAmount = this.contactSalesButton();
+        } else if (amount > 0) {
+            displayedAmount = <span className="amount">{`${amount} ${currency}`}</span>;
+        }
         return (
             <div className="pricing-slider__wrapper" id={name}>
                 <div className="pricing-slider__info">