@woosmap/ui 4.220.10 → 4.220.13

package/src/components/PricingSlider/PricingSimulator.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import numeral from 'numeral';
 /* eslint-disable import/no-named-as-default */
 /* eslint-disable import/no-named-as-default-member */
-import PricingSlider from '@/components/PricingSlider/PricingSlider';
-import PricingData from '@/components/PricingSlider/PricingData';
-import tr from '@/components/utils/locale';
+import PricingSlider from './PricingSlider';
+import PricingData from './PricingData';
+import { tr } from '../utils/locale';
 
 export default class PricingSimulator extends Component {
     constructor(props) {
@@ -79,48 +79,83 @@ export default class PricingSimulator extends Component {
             ? `${numeral(amount).format('0,0').replace(',', ' ')}${currency}`
             : `${currency}${numeral(amount).format('0,0')}`;
 
+    formatNumber = (number, currency) => {
+        if (currency === '€') {
+            // Format européen : espaces comme séparateurs, pas de décimales
+            return Math.floor(number).toLocaleString('fr-FR').replace(/\s/g, ' ');
+        }
+        // Format US/UK : virgules comme séparateurs, pas de décimales
+        return Math.floor(number).toLocaleString('en-US');
+    };
+
     getAmountByProducts = () => {
         const { sliders } = this.state;
         const { currency } = this.props;
+        const { total, contactSale } = this.computeTotal();
+
+        // Vérifier s'il y a au moins deux produits à afficher
+        let productCount = 0;
+        const productElements = Object.keys(sliders).map((categoryKey) => {
+            const category = sliders[categoryKey];
+
+            return Object.keys(category).map((productKey) => {
+                const product = category[productKey];
+                if (product.computedQueries > 1 || product.computedQueries === '∞') {
+                    productCount += 1;
+                    return (
+                        <div className="pricing-summary">
+                            <div className="pricing-summary-info">
+                                <div className="pricing-summary-product">
+                                    {categoryKey} - {productKey}
+                                </div>
+                                <div className="pricing-summary-queries">
+                                    {tr('Estimated usage:')}{' '}
+                                    {product.computedQueries === '∞'
+                                        ? product.aboveLastTier
+                                        : `${this.formatNumber(product.computedQueries, currency)} 
+                                    ${tr('/ mo')}`}
+                                </div>
+                            </div>
+                            <div className="pricing-summary-amount">
+                                {product.computedQueries === '∞' ? (
+                                    <span className="highlight-info">{tr('Contact sales')}</span>
+                                ) : (
+                                    `${this.displayAmount(product.amount, currency)} ${tr('/ mo')}`
+                                )}
+                            </div>
+                        </div>
+                    );
+                }
+                if (product.computedQueries === '∞') {
+                    productCount += 1;
+                    return 'contact sales';
+                }
+                return null;
+            });
+        });
 
         return (
             <div className="pricing-summary-wrapper">
                 <div className="pricing-summary-header">{tr('Cost estimation per product')}</div>
                 <div className="pricing-summary-content">
-                    {Object.keys(sliders).map((categoryKey) => {
-                        const category = sliders[categoryKey];
-
-                        return Object.keys(category).map((productKey) => {
-                            const product = category[productKey];
-                            if (product.computedQueries > 1 || product.computedQueries === '∞') {
-                                return (
-                                    <div className="pricing-summary">
-                                        <div className="pricing-summary-info">
-                                            <div className="pricing-summary-product">
-                                                {categoryKey} - {productKey}
-                                            </div>
-                                            <div className="pricing-summary-queries">
-                                                {tr('Estimated usage:')}{' '}
-                                                {product.computedQueries === '∞'
-                                                    ? product.aboveLastTier
-                                                    : `${numeral(product.computedQueries).format('0,0').replace(',', ' ')} 
-                                                ${tr('/ mo')}`}
-                                            </div>
-                                        </div>
-                                        <div className="pricing-summary-amount">
-                                            {product.computedQueries === '∞'
-                                                ? 'contact sales'
-                                                : `${this.displayAmount(product.amount, currency)} ${tr('/ mo')}`}
-                                        </div>
-                                    </div>
-                                );
-                            }
-                            if (product.computedQueries === '∞') {
-                                return 'contact sales';
-                            }
-                            return null;
-                        });
-                    })}
+                    {productElements}
+                    {/* Ligne de total - affichée seulement s'il y a au moins deux produits */}
+                    {productCount >= 2 && (
+                        <div className="pricing-summary">
+                            <div className="pricing-summary-info">
+                                <div className="pricing-summary-product">
+                                    {tr('Total')}
+                                    {contactSale && <span className="pricing-summary-product-asterisk">*</span>}
+                                    <span className="pricing-summary-product-estimated">{tr('(Estimated)')}</span>
+                                </div>
+                            </div>
+                            <div className="pricing-summary-amount">
+                                {currency === '€'
+                                    ? `${this.formatNumber(parseInt(total, 10), currency)}€ ${tr('/ month')}`
+                                    : `${currency}${this.formatNumber(parseInt(total, 10), currency)} ${tr('/ month')}`}
+                            </div>
+                        </div>
+                    )}
                 </div>
             </div>
         );
@@ -129,13 +164,13 @@ export default class PricingSimulator extends Component {
     render() {
         const { sliders } = this.state;
         const { publicMode, currency } = this.props;
-        const { total, discount, contactSale, totalBeforeDiscount } = this.computeTotal();
+        const { total, contactSale, totalBeforeDiscount } = this.computeTotal();
         const totalDisplayed = this.displayAmount(parseInt(total, 10), currency);
         // if (contactSale) {
         //     totalDisplayed = <a href="/contact">Contact Sales</a>;
         // }
         return (
-            <div className="section--light">
+            <>
                 <div className="pricing-nav">
                     <ul className="pricing-menu">
                         {Object.keys(PricingData).map((category) => (
@@ -145,68 +180,75 @@ export default class PricingSimulator extends Component {
                         ))}
                     </ul>
                     <div className="pricing-total mobile">
-                        <div className="pricing-total__label">Monthly price</div>
-                        <div className="pricing-total__amount">{this.displayAmount(totalBeforeDiscount, currency)}</div>
-                        <div className="pricing-total__info">
-                            <strong>{totalDisplayed}</strong>
-                            {!contactSale && (
-                                <span className="pricing-total__discount">
-                                    {`(-${this.displayAmount(discount, currency)} Monthly Free Usage)`} ={' '}
-                                    <strong>{totalDisplayed}</strong>
+                        <div className="pricing-total__label">
+                            <span className="pricing-total__label__title">{tr('Monthly price (Estimated)')}</span>
+                            {contactSale && (
+                                <span className="pricing-total__label__info">
+                                    {tr('* Some products require contact sales for pricing')}
                                 </span>
                             )}
                         </div>
+                        <div className="pricing-total__amount">
+                            {this.displayAmount(totalBeforeDiscount, currency)}
+                            {contactSale && <span className="pricing-total__amount__asterisk">*</span>}
+                        </div>
                     </div>
                 </div>
-                <div className="section--light">
-                    <div className="pricing-simulator__wrapper">
-                        <div className="pricing-simulator__wrapper__data">
-                            {Object.keys(PricingData).map((category) => (
-                                <div className="pricing-simulator__item">
-                                    <div className="pricing-simulator__header" id={this.getAnchor(category)}>
-                                        <div>
-                                            <img
-                                                className="pricing-simulator__prod-img"
-                                                src={PricingData[category].image}
-                                                alt={category}
-                                            />
-                                        </div>
-                                        <div className="pricing-simulator__prod-info">
-                                            <h2 className="pricing-simulator__prod-name">{category}</h2>
-                                            <p className="pricing-simulator__prod-desc">
-                                                {PricingData[category].description}
-                                            </p>
-                                        </div>
-                                        <span className="pricing-simulator__prod-price-label">Monthly price</span>
+                <div className="pricing-simulator__wrapper">
+                    <div className="pricing-simulator__wrapper__data">
+                        {Object.keys(PricingData).map((category) => (
+                            <div className="pricing-simulator__item">
+                                <div className="pricing-simulator__header" id={this.getAnchor(category)}>
+                                    <div>
+                                        <img
+                                            className="pricing-simulator__prod-img"
+                                            src={PricingData[category].image}
+                                            alt={category}
+                                        />
+                                    </div>
+                                    <div className="pricing-simulator__prod-info">
+                                        <h2 className="pricing-simulator__prod-name">{category}</h2>
+                                        <p className="pricing-simulator__prod-desc">
+                                            {PricingData[category].description}
+                                        </p>
                                     </div>
-                                    {Object.keys(PricingData[category].pricings).map((pricingKey) => {
-                                        const productPricing = PricingData[category].pricings[pricingKey];
-                                        return (
-                                            <PricingSlider
-                                                id={this.getAnchor(`${category}-${pricingKey}`)}
-                                                productPricing={productPricing}
-                                                name={pricingKey}
-                                                key={`pricing_${pricingKey.replace(' ', '')}`}
-                                                publicMode={publicMode}
-                                                currency={currency}
-                                                values={sliders[category][pricingKey]}
-                                                onChange={this.onChange(category, pricingKey)}
-                                            />
-                                        );
-                                    })}
+                                    <span className="pricing-simulator__prod-price-label">{tr('Monthly price')}</span>
                                 </div>
-                            ))}
-                        </div>
-                        <div className="pricing-simulator__wrapper__pricebox">
-                            <div className="pricing-total desktop">
-                                <div className="pricing-total__label">Monthly price</div>
-                                <div className="pricing-total__amount">{totalDisplayed}</div>
-                                {this.getAmountByProducts()}
+                                {Object.keys(PricingData[category].pricings).map((pricingKey) => {
+                                    const productPricing = PricingData[category].pricings[pricingKey];
+                                    return (
+                                        <PricingSlider
+                                            id={this.getAnchor(`${category}-${pricingKey}`)}
+                                            productPricing={productPricing}
+                                            name={pricingKey}
+                                            key={`pricing_${pricingKey.replace(' ', '')}`}
+                                            publicMode={publicMode}
+                                            currency={currency}
+                                            values={sliders[category][pricingKey]}
+                                            onChange={this.onChange(category, pricingKey)}
+                                        />
+                                    );
+                                })}
+                            </div>
+                        ))}
+                    </div>
+                    <div className="pricing-simulator__wrapper__pricebox">
+                        <div className="pricing-total desktop">
+                            <div className="pricing-total__label">{tr('Monthly price')}</div>
+                            <div className="pricing-total__amount">
+                                {totalDisplayed}
+                                {contactSale && <span className="pricing-total__amount__asterisk">*</span>}
                             </div>
+                            {contactSale && (
+                                <div className="pricing-total__amount__info">
+                                    {tr('* Some products require contact sales for pricing')}
+                                </div>
+                            )}
+                            {this.getAmountByProducts()}
                         </div>
                     </div>
                 </div>
-            </div>
+            </>
         );
     }
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import PricingSimulator from '@/components/PricingSlider/PricingSimulator';
+import PricingSimulator from './PricingSimulator';
 
 const Story = {
     title: 'base/PricingSimulator',

package/src/components/PricingSlider/PricingSlider.js

@@ -2,11 +2,10 @@ import React, { Component } from 'react';
 import ReactSlider from 'react-slider';
 import PropTypes from 'prop-types';
 import numeral from 'numeral';
-import Input from '@/components/Input/Input';
-import Button from '@/components/Button/Button';
-// eslint-disable-next-line import/no-named-as-default
-import tr from '@/components/utils/locale';
-import Icon from '@/components/Icon/Icon';
+import Input from '../Input/Input';
+import Button from '../Button/Button';
+import { tr } from '../utils/locale';
+import Icon from '../Icon/Icon';
 
 export default class PricingSlider extends Component {
     constructor(props) {
@@ -83,7 +82,7 @@ export default class PricingSlider extends Component {
     contactSalesButton = () => (
         <span className="button-contact">
             <a href="/contact" data-gaid="entreprise-plan-click" className="btn btn--small btn--primary">
-                <span className="btn__label">Contact Sales</span>
+                <span className="btn__label">{tr('Contact Sales')}</span>
             </a>
         </span>
     );
@@ -170,7 +169,7 @@ export default class PricingSlider extends Component {
                         return (
                             <tr>
                                 <td>{`${numeral(lower).format('0.[0]a')}+`}</td>
-                                <td>Contact us for discount</td>
+                                <td>{tr('Contact us for discount')}</td>
                             </tr>
                         );
                     }
@@ -206,7 +205,7 @@ export default class PricingSlider extends Component {
         } else if (amount > 0) {
             displayedAmount = <span className="amount">{this.displayAmount(parseInt(amount, 10))}</span>;
         } else if (displayedPricing.length === 0) {
-            displayedAmount = <span className="free-label">FREE</span>;
+            displayedAmount = <span className="free-label">{tr('FREE')}</span>;
         }
         return (
             <div className="pricing-slider__wrapper" id={id}>
@@ -267,12 +266,12 @@ export default class PricingSlider extends Component {
                     )}
                     <div className="pricing-slider__documentation">
                         <span>
-                            Read more about <strong>{name}</strong>
+                            {tr('Read more about')} <strong>{name}</strong>
                         </span>
                         <span>-</span>
                         <a href={`${productPricing.docLink}`} target="_blank" rel="noreferrer">
                             <Icon icon="documentation" />
-                            <span>Documentation</span>
+                            <span>{tr('Documentation')}</span>
                         </a>
                     </div>
                 </div>

package/src/components/ProgressBar/ProgressBar.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import '@/components/ProgressBar/ProgressBar.styl';
+import './ProgressBar.styl';
 
 class ProgressBar extends Component {
     getColor = (percentage) => {

package/src/components/ProgressBar/ProgressBar.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ProgressBar from '@/components/ProgressBar/ProgressBar';
+import ProgressBar from './ProgressBar';
 
 const Story = {
     title: 'base/ProgressBar',

package/src/components/ProgressBar/ProgressBar.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import ProgressBar from '@/components/ProgressBar/ProgressBar';
+import ProgressBar from './ProgressBar';
 
 describe('<ProgressBar />', () => {
     it.each([['description'], ['leftText'], ['rightText']])('renders %s if provided via props', (prop) => {

package/src/components/ScrollBar/ScrollBar.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ScrollBar from '@/components/ScrollBar/ScrollBar';
+import ScrollBar from './ScrollBar';
 
 const Story = {
     title: 'base/ScrollBar',

package/src/components/ScrollBar/ScrollBar.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import ScrollBar from '@/components/ScrollBar/ScrollBar';
+import ScrollBar from './ScrollBar';
 
 it('renders a ScrollBar component ', () => {
     const { getByTestId } = render(<ScrollBar>content</ScrollBar>);

package/src/components/Select/Select.stories.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import Select from '@/components/Select/Select';
-import AsyncSelect from '@/components/Select/AsyncSelect';
-import CountrySelect from '@/components/Select/CountrySelect';
-import LanguageSelect from '@/components/Select/LanguageSelect';
+import Select from './Select';
+import AsyncSelect from './AsyncSelect';
+import CountrySelect from './CountrySelect';
+import LanguageSelect from './LanguageSelect';
 
 const Story = {
     title: 'base/Select',

package/src/components/Select/TagSelect.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import TagSelect from '@/components/Select/TagSelect';
+import TagSelect from './TagSelect';
 
 it('renders a ConfirmationPopover', () => {
     const { container } = render(<TagSelect />);

package/src/components/ServiceMessage/ServiceMessage.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import cl from 'classnames';
 import PropTypes from 'prop-types';
-import Button from '@/components/Button/Button';
+import Button from '../Button/Button';
 
 export default class ServiceMessage extends Component {
     constructor(props) {

package/src/components/ServiceMessage/ServiceMessage.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import ServiceMessage from '@/components/ServiceMessage/ServiceMessage';
-import Button from '@/components/Button/Button';
+import ServiceMessage from './ServiceMessage';
+import Button from '../Button/Button';
 
 const Story = {
     title: 'base/ServiceMessage',

package/src/components/SnackBar/SnackBar.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import cl from 'classnames';
 import PropTypes from 'prop-types';
-import Animate, { AnimatePresence } from '@/components/Animate/Animate';
-import Button from '@/components/Button/Button';
+import Animate, { AnimatePresence } from '../Animate/Animate';
+import Button from '../Button/Button';
 
 const SnackBarContext = React.createContext();
 

package/src/components/SnackBar/SnackBar.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import SnackBar from '@/components/SnackBar/SnackBar';
-import withSnackBar from '@/components/SnackBar/withSnackBar';
-import Button from '@/components/Button/Button';
+import SnackBar from './SnackBar';
+import withSnackBar from './withSnackBar';
+import Button from '../Button/Button';
 
 class SomeChildComponent extends React.Component {
     render() {

package/src/components/SnackBar/SnackBar.test.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import fireEvent from '@testing-library/user-event';
-import SnackBar from '@/components/SnackBar/SnackBar';
-import withSnackBar from '@/components/SnackBar/withSnackBar';
-import Button from '@/components/Button/Button';
+import SnackBar from './SnackBar';
+import withSnackBar from './withSnackBar';
+import Button from '../Button/Button';
 
 class SomeChildComponent extends React.Component {
     render() {

package/src/components/SnackBar/withSnackBar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { SnackBarContext } from '@/components/SnackBar/SnackBar';
+import { SnackBarContext } from './SnackBar';
 
 export default function withSnackbar(WrappedComponent) {
     class WithSnackBar extends React.Component {

package/src/components/Stepper/Stepper.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import cl from 'classnames';
 import PropTypes from 'prop-types';
-import { tr } from '@/components/utils/locale';
-import Icon from '@/components/Icon/Icon';
+import { tr } from '../utils/locale';
+import Icon from '../Icon/Icon';
 
 export default class Stepper extends Component {
     render() {

package/src/components/Stepper/Stepper.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Stepper from '@/components/Stepper/Stepper';
+import Stepper from './Stepper';
 
 const Story = {
     title: 'base/Stepper',

package/src/components/Switch/Switch.stories.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Switch from '@/components/Switch/Switch';
+import Switch from './Switch';
 
 const Story = {
     title: 'base/Switch',

package/src/components/Switch/Switch.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import Switch from '@/components/Switch/Switch';
+import Switch from './Switch';
 
 it('renders a switch component ', () => {
     const { container } = render(<Switch checked onChange={() => {}} id="myswitch" />);

package/src/components/Tab/Tab.js

@@ -1,7 +1,7 @@
 import React, { Component, Children } from 'react';
 import PropTypes from 'prop-types';
 import cl from 'classnames';
-import Button from '@/components/Button/Button';
+import Button from '../Button/Button';
 
 // eslint-disable-next-line react/prop-types
 function VisuallyHidden({ active, children }) {

package/src/components/Tab/Tab.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React from "react";
-import Tab from "@/components/Tab/Tab";
+import Tab from "../Tab/Tab";
 
 const Story = {
   title: "base/Tab",

package/src/components/Tooltip/Tooltip.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Tooltip from '@/components/Tooltip/Tooltip';
+import Tooltip from './Tooltip';
 
 const Story = {
     title: 'base/Tooltip',

package/src/components/Tooltip/Tooltip.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import Tooltip from '@/components/Tooltip/Tooltip';
+import Tooltip from './Tooltip';
 
 it('renders a Tooltip', () => {
     const { getByTestId } = render(<Tooltip>my tip</Tooltip>);

package/src/components/UseCase/UseCase.js

@@ -3,15 +3,15 @@ import React, { Component } from 'react';
 import cl from 'classnames';
 import PropTypes from 'prop-types';
 
-import localitiesImgSq from '@/images/products/product-localities-sq.png';
-import localitiesUkImgSq from '@/images/products/product-localities-uk-sq.png';
-import geolocationImgSq from '@/images/products/product-geolocation-sq.png';
-import storesImgSq from '@/images/products/product-stores-sq.png';
-import distanceImgSq from '@/images/products/product-distance-sq.png';
-import addressImgSq from '@/images/products/product-address-sq.png';
-import mapImgSq from '@/images/products/product-map-sq.png';
-import trafficImgSq from '@/images/products/product-traffic-sq.png';
-import indoorImgSq from '@/images/products/product-indoor-sq.png';
+import localitiesImgSq from '../../images/products/product-localities-sq.png';
+import localitiesUkImgSq from '../../images/products/product-localities-uk-sq.png';
+import geolocationImgSq from '../../images/products/product-geolocation-sq.png';
+import storesImgSq from '../../images/products/product-stores-sq.png';
+import distanceImgSq from '../../images/products/product-distance-sq.png';
+import addressImgSq from '../../images/products/product-address-sq.png';
+import mapImgSq from '../../images/products/product-map-sq.png';
+import trafficImgSq from '../../images/products/product-traffic-sq.png';
+import indoorImgSq from '../../images/products/product-indoor-sq.png';
 
 const productImg = {
     LOCALITIES: localitiesImgSq,

package/src/components/UseCase/UseCase.stories.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { tr } from '@/components/utils/locale';
-import Icon from '@/components/Icon/Icon';
-import Button from '@/components/Button/Button';
-import UseCase from '@/components/UseCase/UseCase';
+import { tr } from '../utils/locale';
+import Icon from '../Icon/Icon';
+import Button from '../Button/Button';
+import UseCase from './UseCase';
 
 const Story = {
     title: 'base/UseCase',