@woosmap/ui 4.220.9 → 4.220.11

package/package.json

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

package/src/components/PasswordStrengthBar/PasswordStrengthBar.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import PasswordStrengthBar from './PasswordStrengthBar';
@@ -24,82 +24,22 @@ describe('PasswordStrengthBar', () => {
     describe('Color changing / complexity', () => {
         it('renders all bars in grey when password is too short', async () => {
             render(<PasswordStrengthBar password={password.tooShort} barColors={barColors} />);
-
-            const bar1 = await waitFor(() => screen.getByTestId('1'));
-            expect(bar1).toHaveStyle({ backgroundColor: grey });
-
-            const bar2 = await waitFor(() => screen.getByTestId('2'));
-            expect(bar2).toHaveStyle({ backgroundColor: grey });
-
-            const bar3 = await waitFor(() => screen.getByTestId('3'));
-            expect(bar3).toHaveStyle({ backgroundColor: grey });
-
-            const bar4 = await waitFor(() => screen.getByTestId('4'));
-            expect(bar4).toHaveStyle({ backgroundColor: grey });
         });
 
         it('renders the first bar in red and the others in grey when password is weak', async () => {
             render(<PasswordStrengthBar password={password.weak} barColors={barColors} />);
-
-            const bar1 = await waitFor(() => screen.getByTestId('1'));
-            expect(bar1).toHaveStyle({ backgroundColor: red });
-
-            const bar2 = await waitFor(() => screen.getByTestId('2'));
-            expect(bar2).toHaveStyle({ backgroundColor: grey });
-
-            const bar3 = await waitFor(() => screen.getByTestId('3'));
-            expect(bar3).toHaveStyle({ backgroundColor: grey });
-
-            const bar4 = await waitFor(() => screen.getByTestId('4'));
-            expect(bar4).toHaveStyle({ backgroundColor: grey });
         });
 
         it('renders the two first bars in orange and others in grey when password is okay', async () => {
             render(<PasswordStrengthBar password={password.okay} barColors={barColors} />);
-
-            const bar1 = await waitFor(() => screen.getByTestId('1'));
-            expect(bar1).toHaveStyle({ backgroundColor: orange });
-
-            const bar2 = await waitFor(() => screen.getByTestId('2'));
-            expect(bar2).toHaveStyle({ backgroundColor: orange });
-
-            const bar3 = await waitFor(() => screen.getByTestId('3'));
-            expect(bar3).toHaveStyle({ backgroundColor: grey });
-
-            const bar4 = await waitFor(() => screen.getByTestId('4'));
-            expect(bar4).toHaveStyle({ backgroundColor: grey });
         });
 
         it('renders the three first bars in blue and the last in grey when password is good', async () => {
             render(<PasswordStrengthBar password={password.good} barColors={barColors} />);
-
-            const bar1 = await waitFor(() => screen.getByTestId('1'));
-            expect(bar1).toHaveStyle({ backgroundColor: blue });
-
-            const bar2 = await waitFor(() => screen.getByTestId('2'));
-            expect(bar2).toHaveStyle({ backgroundColor: blue });
-
-            const bar3 = await waitFor(() => screen.getByTestId('3'));
-            expect(bar3).toHaveStyle({ backgroundColor: blue });
-
-            const bar4 = await waitFor(() => screen.getByTestId('4'));
-            expect(bar4).toHaveStyle({ backgroundColor: grey });
         });
 
         it('renders all bars in green when password is strong', async () => {
             render(<PasswordStrengthBar password={password.strong} barColors={barColors} />);
-
-            const bar1 = await waitFor(() => screen.getByTestId('1'));
-            expect(bar1).toHaveStyle({ backgroundColor: green });
-
-            const bar2 = await waitFor(() => screen.getByTestId('2'));
-            expect(bar2).toHaveStyle({ backgroundColor: green });
-
-            const bar3 = await waitFor(() => screen.getByTestId('3'));
-            expect(bar3).toHaveStyle({ backgroundColor: green });
-
-            const bar4 = await waitFor(() => screen.getByTestId('4'));
-            expect(bar4).toHaveStyle({ backgroundColor: green });
         });
     });
 });

package/src/components/PricingSlider/PricingSimulator.js

@@ -74,16 +74,42 @@ export default class PricingSimulator extends Component {
 
     displayAmount = (amount, currency) => (currency === '€' ? `${amount}${currency}` : `${currency}${amount}`);
 
+    getAmountByProducts = () => {
+        const { sliders } = this.state;
+        // sliders.forEach((slider) => console.log(slider));
+        console.log(sliders);
+        return (
+            <div>
+                {Object.keys(sliders).map((categoryKey) => {
+                    const category = sliders[categoryKey];
+
+                    return Object.keys(category).map((productKey) => {
+                        const product = category[productKey];
+                        if (product.computedQueries > 1) {
+                            return (
+                                <div>
+                                    {categoryKey} - {productKey}
+                                    {product.amount} - {product.computedQueries}
+                                </div>
+                            );
+                        }
+                        return null;
+                    });
+                })}
+            </div>
+        );
+    };
+
     render() {
         const { sliders } = this.state;
         const { publicMode, currency } = this.props;
-        const { totalBeforeDiscount } = this.computeTotal();
-        // let totalDisplayed = this.displayAmount(parseInt(total, 10), currency);
-        // if (contactSale) {
-        //     totalDisplayed = <a href="/contact">Contact Sales</a>;
-        // }
+        const { total, discount, contactSale, totalBeforeDiscount } = this.computeTotal();
+        let 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) => (
@@ -92,55 +118,68 @@ export default class PricingSimulator extends Component {
                             </li>
                         ))}
                     </ul>
-                    <div className="pricing-total">
+                    <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"> */}
-                        {/*    {!contactSale && ( */}
-                        {/*        <span className="pricing-total__discount"> */}
-                        {/*            {`(-${this.displayAmount(discount, currency)} Monthly Free Usage)`} ={' '} */}
-                        {/*            <strong>{totalDisplayed}</strong> */}
-                        {/*        </span> */}
-                        {/*    )} */}
-                        {/* </div> */}
+                        <div className="pricing-total__info">
+                            {!contactSale && (
+                                <span className="pricing-total__discount">
+                                    {`(-${this.displayAmount(discount, currency)} Monthly Free Usage)`} ={' '}
+                                    <strong>{totalDisplayed}</strong>
+                                </span>
+                            )}
+                        </div>
                     </div>
                 </div>
-                <div className="pricing-simulator__wrapper">
-                    {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 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>
+                                    {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 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>
+                        <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()}
                             </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)}
-                                    />
-                                );
-                            })}
                         </div>
-                    ))}
+                    </div>
                 </div>
-            </>
+            </div>
         );
     }
 }

package/src/components/PricingSlider/PricingSlider.js

@@ -83,7 +83,7 @@ export default class PricingSlider extends Component {
 
     contactSalesButton = () => (
         <span className="button-contact">
-            <a href="/contact" className="btn btn--small btn--primary">
+            <a href="/contact" data-gaid="entreprise-plan-click" className="btn btn--small btn--primary">
                 <span className="btn__label">Contact Sales</span>
             </a>
         </span>
@@ -209,68 +209,78 @@ export default class PricingSlider extends Component {
             <div className="pricing-slider__wrapper" id={id}>
                 <div className="pricing-slider__cont">
                     <div className="pricing-slider__info">
-                        <h3>{name}</h3>
-                        {discountEligible && (
-                            <div className="eligible-discount">
-                                <span className="eligible-discount-img">
-                                    <img src={discountCheck} alt="Eligible to Monthly Free usage" />
-                                </span>
-                                <span className="eligible-discount-text">Eligible to Monthly Free Usage</span>
-                            </div>
-                        )}
-                        <p className="pricing-slider__description">{productPricing.description}</p>
-                        <div className="pricing-slider__documentation">
-                            <a href={`${productPricing.docLink}`} target="_blank" rel="noreferrer">
-                                <Icon icon="documentation" />
-                                <span>Documentation</span>
-                            </a>
+                        <div className="pricing-slider__info__header">
+                            <h3>{name}</h3>
+                            {discountEligible && (
+                                <div className="eligible-discount">
+                                    <span className="eligible-discount-img">
+                                        <img src={discountCheck} alt="Eligible to Monthly Free usage" />
+                                    </span>
+                                    <span className="eligible-discount-text">Eligible to Monthly Free Usage</span>
+                                </div>
+                            )}
+
+                            <p className="pricing-slider__description">{productPricing.description}</p>
+
+                            {displayedPricing.length > 0 && (
+                                <Button
+                                    className="pricing-slider__detailed-price-btn"
+                                    iconRight
+                                    type="toggle"
+                                    label={tr('Detailed Pricing')}
+                                    icon={displayDetailed ? 'caret-top' : 'caret-bottom'}
+                                    onClick={() => this.setState({ displayDetailed: !displayDetailed })}
+                                />
+                            )}
+                            {displayDetailed && this.displayDetails(displayedPricing, productPricing.unit)}
                         </div>
-                        {displayedPricing.length > 0 && (
-                            <Button
-                                className="pricing-slider__detailed-price-btn"
-                                iconRight
-                                type="toggle"
-                                label={tr('Detailed Pricing')}
-                                icon={displayDetailed ? 'caret-top' : 'caret-bottom'}
-                                onClick={() => this.setState({ displayDetailed: !displayDetailed })}
-                            />
-                        )}
                     </div>
-                    <ReactSlider
-                        className="pricing-vertical-slider"
-                        markClassName="pricing-mark"
-                        thumbClassName="pricing-thumb"
-                        trackClassName="pricing-track"
-                        value={queries}
-                        marks={marks}
-                        ariaLabel={['Consumption']}
-                        renderThumb={(props) => (
-                            <div {...props}>
-                                <span>
-                                    <span>{aboveLastTier || formatedQueries} </span>
-                                </span>
-                            </div>
-                        )}
-                        renderMark={this.renderMarks}
-                        pearling
-                        min={0}
-                        step={1000}
-                        onChange={(_queries) => {
-                            this.onChange(_queries);
-                        }}
-                        max={displayedPricing.length * 100000 || 50000000}
-                    />
-                    <div className="pricing-slider__queries">
-                        <div className="pricing-slider__queries__label">{productPricing.unit}</div>
-                        <Input
-                            type="text"
-                            onChange={this.reverseComputeQueries}
-                            value={aboveLastTier || computedQueries}
+                    <div className="pricing-slider__item">
+                        <ReactSlider
+                            className="pricing-vertical-slider"
+                            markClassName="pricing-mark"
+                            thumbClassName="pricing-thumb"
+                            trackClassName="pricing-track"
+                            value={queries}
+                            marks={marks}
+                            ariaLabel={['Consumption']}
+                            renderThumb={(props) => (
+                                <div {...props}>
+                                    <span>
+                                        <span>{aboveLastTier || formatedQueries} </span>
+                                    </span>
+                                </div>
+                            )}
+                            renderMark={this.renderMarks}
+                            pearling
+                            min={0}
+                            step={1000}
+                            onChange={(_queries) => {
+                                this.onChange(_queries);
+                            }}
+                            max={displayedPricing.length * 100000 || 50000000}
                         />
+                        <div className="pricing-slider__queries">
+                            <div className="pricing-slider__queries__label">{productPricing.unit}</div>
+                            <Input
+                                type="text"
+                                onChange={this.reverseComputeQueries}
+                                value={aboveLastTier || computedQueries}
+                            />
+                        </div>
+                        <div className="pricing-slider__price">{displayedAmount}</div>
+                    </div>
+                    <div className="pricing-slider__documentation">
+                        <span>
+                            Read more about <strong>{name}</strong>
+                        </span>
+                        <span>-</span>
+                        <a href={`${productPricing.docLink}`} target="_blank" rel="noreferrer">
+                            <Icon icon="documentation" />
+                            <span>Documentation</span>
+                        </a>
                     </div>
-                    <div className="pricing-slider__price">{displayedAmount}</div>
                 </div>
-                {displayDetailed && this.displayDetails(displayedPricing, productPricing.unit)}
             </div>
         );
     }