@woosmap/ui 4.226.3 → 4.226.5

package/src/components/PricingSlider/PricingSimulator.js

@@ -163,7 +163,7 @@ export default class PricingSimulator extends Component {
 
     render() {
         const { sliders } = this.state;
-        const { publicMode, currency } = this.props;
+        const { currency, hlPricings } = this.props;
         const { total, contactSale, totalBeforeDiscount } = this.computeTotal();
         const totalDisplayed = this.displayAmount(parseInt(total, 10), currency);
         // if (contactSale) {
@@ -221,10 +221,10 @@ export default class PricingSimulator extends Component {
                                             productPricing={productPricing}
                                             name={pricingKey}
                                             key={`pricing_${pricingKey.replace(' ', '')}`}
-                                            publicMode={publicMode}
                                             currency={currency}
                                             values={sliders[category][pricingKey]}
                                             onChange={this.onChange(category, pricingKey)}
+                                            hlPricings={hlPricings}
                                         />
                                     );
                                 })}
@@ -261,9 +261,9 @@ export default class PricingSimulator extends Component {
     }
 }
 
-PricingSimulator.defaultProps = { currency: '€', publicMode: true };
+PricingSimulator.defaultProps = { currency: '€' };
 
 PricingSimulator.propTypes = {
     currency: PropTypes.string,
-    publicMode: PropTypes.bool,
+    hlPricings: PropTypes.object.isRequired,
 };

package/src/components/PricingSlider/PricingSimulator.stories.js

@@ -6,10 +6,12 @@ const Story = {
     component: PricingSimulator,
 };
 
+const hlPricings = require('./hl-pricings.json');
+
 export default Story;
 
 function Template() {
-    return <PricingSimulator />;
+    return <PricingSimulator hlPricings={hlPricings} />;
 }
 export const Default = Template.bind({
     type: 'normal',

package/src/components/PricingSlider/PricingSlider.js

@@ -7,6 +7,12 @@ import Button from '../Button/Button';
 import { tr } from '../utils/locale';
 import Icon from '../Icon/Icon';
 
+const currencyMap = {
+    $: 'USD',
+    '€': 'EUR',
+    '£': 'GBP',
+};
+
 export default class PricingSlider extends Component {
     constructor(props) {
         super(props);
@@ -15,7 +21,7 @@ export default class PricingSlider extends Component {
 
     displayAmount = (amount) => {
         const { currency } = this.props;
-        return currency === '€' ? `${amount.toFixed(2)}${currency}` : `${currency}${amount.toFixed(2)}`;
+        return currency === '€' ? `${amount}${currency}` : `${currency}${amount}`;
     };
 
     computeAmount = (pricing, queries) => {
@@ -88,9 +94,8 @@ export default class PricingSlider extends Component {
     );
 
     renderMarks = (props) => {
-        const { productPricing, publicMode } = this.props;
-        const { pricing, publicTierCount } = productPricing;
-        const displayedPricing = publicMode ? pricing.slice(0, publicTierCount + 1) : pricing;
+        const { publicMode } = this.props;
+        const displayedPricing = this.getDisplayedPricing();
 
         let value;
         if (props.key === 0) {
@@ -114,10 +119,18 @@ export default class PricingSlider extends Component {
 
     getMarks = (displayedPricing) => [-1, ...displayedPricing.keys()].map((key) => (key + 1) * 100000);
 
+    findProduct = (productId) => {
+        const { hlPricings } = this.props;
+        return hlPricings.find((product) => product.id === productId);
+    };
+
     getDisplayedPricing = () => {
-        const { productPricing, publicMode } = this.props;
-        const { pricing, publicTierCount } = productPricing;
-        return publicMode ? pricing.slice(0, publicTierCount + 1) : pricing;
+        const { productPricing, currency, planId } = this.props;
+        const product = this.findProduct(productPricing.productId);
+
+        return product && product.pricings[planId] && product.pricings[planId][currencyMap[currency]]
+            ? product.pricings[planId][currencyMap[currency]]
+            : [];
     };
 
     getDisplayedData = (queries) => {
@@ -172,26 +185,19 @@ export default class PricingSlider extends Component {
                             return (
                                 <tr>
                                     <td>{`${numeral(lower).format('0.[0]a')}+`}</td>
-                                    <td>{tr('Contact us for discount')}</td>
-                                </tr>
-                            );
-                        }
-                        if (index === displayedPricing.length - 2) {
-                            return (
-                                <tr>
-                                    <td>{`${numeral(lower).format('0.[0]a')}+`}</td>
-                                    <td>{this.displayAmount(tier[1] / coef)}</td>
+                                    <td>{this.displayAmount((tier[1] / coef).toFixed(2))}</td>
                                 </tr>
                             );
                         }
                         return (
                             <tr>
                                 <td>{`${numeral(lower).format('0.[0]a')} to ${numeral(tier[0]).format('0.[0]a')}`}</td>
-                                <td>{this.displayAmount(tier[1] / coef)}</td>
+                                <td>{this.displayAmount((tier[1] / coef).toFixed(2))}</td>
                             </tr>
                         );
                     })}
                 </table>
+                {displayedPricing.length === 1 && displayedPricing[0][1] === 0 ? null : tr('For more, contact us')}
             </div>
         );
     };
@@ -287,7 +293,11 @@ export default class PricingSlider extends Component {
     }
 }
 
-PricingSlider.defaultProps = { defaultQueries: 1500, onChange: null };
+PricingSlider.defaultProps = {
+    defaultQueries: 1500,
+    onChange: null,
+    planId: 'plan_ohNpgeVMtJ3veT',
+};
 
 PricingSlider.propTypes = {
     productPricing: PropTypes.object.isRequired,
@@ -298,4 +308,6 @@ PricingSlider.propTypes = {
     onChange: PropTypes.func,
     values: PropTypes.object.isRequired,
     id: PropTypes.string.isRequired,
+    planId: PropTypes.string,
+    hlPricings: PropTypes.object.isRequired,
 };