@woosmap/ui 4.226.4 → 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);
@@ -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) => {
@@ -169,14 +182,6 @@ export default class PricingSlider extends Component {
                     {displayedPricing.map((tier, index) => {
                         const lower = index > 0 ? displayedPricing[index - 1][0] : 0;
                         if (index === displayedPricing.length - 1) {
-                            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>
@@ -192,6 +197,7 @@ export default class PricingSlider extends Component {
                         );
                     })}
                 </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,
 };