@woosmap/ui 4.228.0 → 4.228.2

package/src/components/PricingSlider/PricingSimulator.js

@@ -23,7 +23,7 @@ export default class PricingSimulator extends Component {
                 };
             });
         });
-        this.state = { sliders };
+        this.state = { sliders, displayCompetitorsProduct: null };
     }
 
     onChange = (category, pricingKey) => (data) => {
@@ -161,8 +161,14 @@ export default class PricingSimulator extends Component {
         );
     };
 
+    displayCompetitorsCallback = (competitorProductKey) => (force) => {
+        this.setState({
+            displayCompetitorsProduct: force ? competitorProductKey : null,
+        });
+    };
+
     render() {
-        const { sliders } = this.state;
+        const { sliders, displayCompetitorsProduct } = this.state;
         const { currency, hlPricings, planId } = this.props;
         const { total, contactSale, totalBeforeDiscount } = this.computeTotal();
         const totalDisplayed = this.displayAmount(parseInt(total, 10), currency);
@@ -226,6 +232,12 @@ export default class PricingSimulator extends Component {
                                             onChange={this.onChange(category, pricingKey)}
                                             hlPricings={hlPricings}
                                             planId={planId}
+                                            displayCompetitorsCallback={this.displayCompetitorsCallback(
+                                                `${category}-${pricingKey}`,
+                                            )}
+                                            displayCompetitors={
+                                                displayCompetitorsProduct === `${category}-${pricingKey}`
+                                            }
                                         />
                                     );
                                 })}

package/src/components/PricingSlider/PricingSlider.js

@@ -24,7 +24,10 @@ export default class PricingSlider extends Component {
         return currency === '€' ? `${amount}${currency}` : `${currency}${amount}`;
     };
 
-    computeAmount = (pricing, queries) => {
+    computeAmount = (pricing, queries, competitor = false) => {
+        const { currency } = this.props;
+
+        const coef = competitor && currency === '$' ? 0.9 : 1;
         let q = queries;
         let previousPricingTier;
         if (queries === '∞') {
@@ -37,12 +40,12 @@ export default class PricingSlider extends Component {
                 const valueToRemove = Math.min(tier[0] - previousPricingTier[0], q);
                 if (valueToRemove > 0) {
                     q -= valueToRemove;
-                    return amount + (valueToRemove / 1000) * tier[1];
+                    return amount + ((valueToRemove / 1000) * tier[1]) / coef;
                 }
             } else {
                 const valueToRemove = Math.min(tier[0], q);
                 q -= valueToRemove;
-                return amount + (valueToRemove / 1000) * tier[1];
+                return amount + ((valueToRemove / 1000) * tier[1]) / coef;
             }
             return Math.floor(amount);
         }, 0);
@@ -142,6 +145,14 @@ export default class PricingSlider extends Component {
         const computedQueries = this.computeQueries(queries);
         const formatedQueries = computedQueries === '∞' ? computedQueries : numeral(computedQueries).format('0.[0]a');
         const amount = this.computeAmount(displayedPricing, computedQueries);
+        const amountGmp =
+            productPricing.pricing_gmp?.length > 0
+                ? this.computeAmount(productPricing.pricing_gmp, computedQueries, true)
+                : null;
+        const amountMbx = productPricing.pricing_mbx?.length
+            ? this.computeAmount(productPricing.pricing_mbx, computedQueries, true)
+            : null;
+
         const aboveLastTier =
             formatedQueries === '∞'
                 ? `>${numeral(displayedPricing[displayedPricing.length - 2][0]).format('0.[0]a')}`
@@ -157,6 +168,8 @@ export default class PricingSlider extends Component {
             discountEligible: productPricing.discountEligible,
             displayedPricing,
             aboveLastTier,
+            amountMbx,
+            amountGmp,
         };
     };
 
@@ -207,12 +220,55 @@ export default class PricingSlider extends Component {
         </div>
     );
 
+    displayCompetitorAmount = (amount) => {
+        if (amount === '∞') {
+            return 'N/A';
+        }
+        if (amount === null) {
+            return 'No equivalent product';
+        }
+        return this.displayAmount(amount);
+    };
+
+    displayCompetitorDetails = (amountGmp, amountMbx) => (
+        <div className="pricing-slider__detailed-price">
+            <table>
+                <tr>
+                    <td>
+                        <strong>Competitors</strong>
+                    </td>
+                    <td>
+                        <strong>{tr('Estimated cost')}</strong>
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>Google Maps Platform</td>
+                    <td>{this.displayCompetitorAmount(amountGmp)}</td>
+                </tr>
+
+                <tr>
+                    <td>Mapbox</td>
+                    <td>{this.displayCompetitorAmount(amountMbx)}</td>
+                </tr>
+            </table>
+        </div>
+    );
+
     render() {
-        const { name, productPricing, values, id } = this.props;
+        const { name, productPricing, values, id, displayCompetitors, displayCompetitorsCallback } = this.props;
         const { displayDetailed } = this.state;
         const { queries } = values;
-        const { displayedPricing, amount, formatedQueries, marks, computedQueries, aboveLastTier } =
-            this.getDisplayedData(queries);
+        const {
+            displayedPricing,
+            amount,
+            formatedQueries,
+            marks,
+            computedQueries,
+            aboveLastTier,
+            amountGmp,
+            amountMbx,
+        } = this.getDisplayedData(queries);
 
         let displayedAmount = <span className="amount">{this.displayAmount(0)}</span>;
         if (amount === '∞') {
@@ -277,11 +333,38 @@ export default class PricingSlider extends Component {
                                 type="toggle"
                                 label={tr('Detailed Pricing')}
                                 icon={displayDetailed ? 'caret-top' : 'caret-bottom'}
-                                onClick={() => this.setState({ displayDetailed: !displayDetailed })}
+                                onClick={() =>
+                                    this.setState(
+                                        {
+                                            displayDetailed: !displayDetailed,
+                                        },
+                                        displayCompetitorsCallback(false),
+                                    )
+                                }
+                            />
+
+                            <Button
+                                className="pricing-slider__detailed-price-btn"
+                                iconRight
+                                type="toggle"
+                                disabled={queries === 0}
+                                label={tr('Compare with competitors')}
+                                icon={displayCompetitors ? 'caret-top' : 'caret-bottom'}
+                                onClick={() =>
+                                    this.setState(
+                                        {
+                                            displayDetailed: false,
+                                        },
+                                        displayCompetitorsCallback(!displayCompetitors),
+                                    )
+                                }
                             />
+
+                            {displayCompetitors && this.displayCompetitorDetails(amountGmp, amountMbx)}
                             {displayDetailed && this.displayDetails(displayedPricing, productPricing.unit)}
                         </div>
                     )}
+
                     <div className="pricing-slider__documentation">
                         <span>
                             {tr('Read more about')} <strong>{name}</strong>
@@ -314,3 +397,4 @@ PricingSlider.propTypes = {
     planId: PropTypes.string.isRequired,
     hlPricings: PropTypes.object.isRequired,
 };
+

package/storybook.log

@@ -0,0 +1,3 @@
+Usage Error: Package "@storybook/addon-styling-webpack" is already listed as a regular dependency - remove the -D,-P flags or remove it from your dependencies first
+
+$ yarn add [--json] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ...