@woosmap/ui 4.236.14 → 4.237.0

package/.claude/settings.local.json

@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(yarn add:*)",
+      "Bash(CI=true yarn test:*)"
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "4.236.14",
+  "version": "4.237.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"
@@ -74,12 +74,12 @@
     ]
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.8",
-    "@babel/core": "^7.25.2",
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@emotion/is-prop-valid": "^1.3.0",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@emotion/is-prop-valid": "^1.4.0",
     "@storybook/addon-actions": "^8.3.1",
     "@storybook/addon-essentials": "^8.3.1",
     "@storybook/addon-jest": "^8.3.1",
@@ -90,23 +90,23 @@
     "@storybook/react": "^8.3.1",
     "@storybook/react-webpack5": "^8.3.1",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.2",
     "babel-plugin-i18next-extract": "^0.10.0",
     "babel-plugin-transform-dynamic-import": "^2.1.0",
-    "concurrently": "^8.2.2",
+    "concurrently": "^9.2.1",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-sonarjs": "^1.0.4",
+    "eslint-plugin-sonarjs": "^3.0.5",
     "jest-google-maps-mock": "^1.0.7",
-    "prettier": "^3.3.3",
+    "prettier": "^3.7.4",
     "react-scripts": "5.0.1",
-    "rimraf": "^6.0.1",
+    "rimraf": "^6.1.2",
     "storybook": "^8.3.1",
-    "stylus": "^0.63.0",
-    "stylus-loader": "^8.1.0",
+    "stylus": "^0.64.0",
+    "stylus-loader": "^8.1.2",
     "svgo": "^3.3.2"
   },
   "resolutions": {

package/src/components/Button/Button.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Button from './Button';
 

package/src/components/Button/ButtonWithDropdown.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import 'resize-observer-polyfill/dist/ResizeObserver.global';
 
 import ButtonWithDropdown from './ButtonWithDropdown';

package/src/components/Card/Card.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Card from './Card';
 

package/src/components/Card/SimpleCard.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import SimpleCard from './SimpleCard';
 

package/src/components/CodeSnippet/CodeSnippet.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import CodeSnippet from './CodeSnippet';
 

package/src/components/CopyClipboardButton/CopyToClipboard.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import CopyClipboardButton from './CopyClipboardButton';
 

package/src/components/DateTime/DateTime.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import DateTime from './DateTime';
 

package/src/components/Demo/DistanceDemo.test.js

@@ -1,6 +1,6 @@
-import React, { act } from 'react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import DistanceDemo from './DistanceDemo';
 

package/src/components/Demo/GeolocationDemo.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import GeolocationDemo from './GeolocationDemo';
 

package/src/components/Demo/SearchDemo.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-destructuring */
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import SearchDemo from './SearchDemo';
 

package/src/components/Demo/SkeletonDemo.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import SkeletonDemo from './SkeletonDemo';
 import Constants from '../../Constants';

package/src/components/Dropdown/Dropdown.test.js

@@ -1,6 +1,6 @@
-import React, { act } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import 'resize-observer-polyfill/dist/ResizeObserver.global';
 
 import Dropdown from './Dropdown';

package/src/components/DynamicTag/DynamicTag.test.js

@@ -1,6 +1,6 @@
-import React, { act } from 'react';
-import { render, screen, getByRole, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { act, render, screen, getByRole, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import DynamicTag from './DynamicTag';
 

package/src/components/Flash/Flash.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Flash from './Flash';
 

package/src/components/Icon/Icon.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Icon from './Icon';
 

package/src/components/InfoMessage/InfoMessage.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import InfoMessage from './InfoMessage';
 

package/src/components/Input/Input.password.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Input from './Input';
 

package/src/components/Input/Input.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Input from './Input';
 

package/src/components/Label/Label.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Label from './Label';
 

package/src/components/Map/InfoWindow.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import InfoWindow from './InfoWindow';
 

package/src/components/Map/Marker.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Marker from './Marker';
 

package/src/components/Modal/ConfirmationModal.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, act } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import 'resize-observer-polyfill/dist/ResizeObserver.global';
 
 import ConfirmationModal from './ConfirmationModal';

package/src/components/Modal/Modal.test.js

@@ -1,6 +1,6 @@
-import React, { act } from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { act, render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import Modal from './Modal';
 

package/src/components/Panel/Panel.test.js

@@ -1,6 +1,6 @@
-import React, { act } from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 
 import Panel from './Panel';

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

@@ -1,6 +1,6 @@
-import React, { act } from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import PasswordStrengthBar from './PasswordStrengthBar';
 
@@ -23,32 +23,37 @@ const barColors = [grey, red, orange, blue, green];
 describe('PasswordStrengthBar', () => {
     describe('Color changing / complexity', () => {
         it('renders all bars in grey when password is too short', async () => {
-            act(() => {
-                render(<PasswordStrengthBar password={password.tooShort} barColors={barColors} />);
+            const { container } = render(<PasswordStrengthBar password={password.tooShort} barColors={barColors} />);
+            await waitFor(() => {
+                expect(container.querySelector('.password-strength')).toBeInTheDocument();
             });
         });
 
         it('renders the first bar in red and the others in grey when password is weak', async () => {
-            act(() => {
-                render(<PasswordStrengthBar password={password.weak} barColors={barColors} />);
+            const { container } = render(<PasswordStrengthBar password={password.weak} barColors={barColors} />);
+            await waitFor(() => {
+                expect(container.querySelector('.password-strength')).toBeInTheDocument();
             });
         });
 
         it('renders the two first bars in orange and others in grey when password is okay', async () => {
-            act(() => {
-                render(<PasswordStrengthBar password={password.okay} barColors={barColors} />);
+            const { container } = render(<PasswordStrengthBar password={password.okay} barColors={barColors} />);
+            await waitFor(() => {
+                expect(container.querySelector('.password-strength')).toBeInTheDocument();
             });
         });
 
         it('renders the three first bars in blue and the last in grey when password is good', async () => {
-            act(() => {
-                render(<PasswordStrengthBar password={password.good} barColors={barColors} />);
+            const { container } = render(<PasswordStrengthBar password={password.good} barColors={barColors} />);
+            await waitFor(() => {
+                expect(container.querySelector('.password-strength')).toBeInTheDocument();
             });
         });
 
         it('renders all bars in green when password is strong', async () => {
-            act(() => {
-                render(<PasswordStrengthBar password={password.strong} barColors={barColors} />);
+            const { container } = render(<PasswordStrengthBar password={password.strong} barColors={barColors} />);
+            await waitFor(() => {
+                expect(container.querySelector('.password-strength')).toBeInTheDocument();
             });
         });
     });

package/src/components/Popover/ConfirmationPopover.test.js

@@ -1,33 +1,44 @@
 import React from 'react';
-import { act, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import 'resize-observer-polyfill/dist/ResizeObserver.global';
 
 import ConfirmationPopover from './ConfirmationPopover';
 
-it('renders a ConfirmationPopover', () => {
-    const { container } = render(
-        <ConfirmationPopover text="Do you confirm?" confirmCb={() => {}}>
-            <span>Child 1</span>
-        </ConfirmationPopover>,
-    );
-    expect(container.firstChild).toHaveClass('popover__child');
+it('renders a ConfirmationPopover', async () => {
+    let container;
+    await act(async () => {
+        const result = render(
+            <ConfirmationPopover text="Do you confirm?" confirmCb={() => {}}>
+                <span>Child 1</span>
+            </ConfirmationPopover>,
+        );
+        container = result.container;
+    });
+    await waitFor(() => {
+        expect(container.firstChild).toHaveClass('popover__child');
+    });
 });
 
-it('renders a confirm', () => {
+it('renders a confirm', async () => {
     const ref = React.createRef();
     let confirmed = false;
-    render(
-        <ConfirmationPopover
-            ref={ref}
-            text="Do you confirm?"
-            confirmCb={() => {
-                confirmed = true;
-            }}
-        >
-            <span>Child 1</span>
-        </ConfirmationPopover>,
-    );
+    await act(async () => {
+        render(
+            <ConfirmationPopover
+                ref={ref}
+                text="Do you confirm?"
+                confirmCb={() => {
+                    confirmed = true;
+                }}
+            >
+                <span>Child 1</span>
+            </ConfirmationPopover>,
+        );
+    });
+    await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+    });
     act(() => {
         ref.current.toggle();
     });

package/src/components/Popover/Popover.test.js

@@ -1,6 +1,6 @@
-import React, { act } from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import Button from '../Button/Button';
 import Popover from './Popover';

package/src/components/PricingSlider/PricingSlider.js

@@ -259,15 +259,8 @@ export default class PricingSlider extends Component {
         const { name, productPricing, values, id, displayCompetitors, displayCompetitorsCallback } = this.props;
         const { displayDetailed } = this.state;
         const { queries } = values;
-        const {
-            displayedPricing,
-            amount,
-            formatedQueries,
-            marks,
-            computedQueries,
-            aboveLastTier,
-            amountGmp,
-        } = this.getDisplayedData(queries);
+        const { displayedPricing, amount, formatedQueries, marks, computedQueries, aboveLastTier, amountGmp } =
+            this.getDisplayedData(queries);
 
         let displayedAmount = <span className="amount">{this.displayAmount(0)}</span>;
         if (amount === '∞') {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import ProgressBar from './ProgressBar';
 
 describe('<ProgressBar />', () => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import ScrollBar from './ScrollBar';
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import TagSelect from './TagSelect';
 

package/src/components/ServiceMessage/ServiceMessage.test.js

@@ -1,6 +1,6 @@
-import React, { act } from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { act, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import ServiceMessage from './ServiceMessage';
 
 describe('<ServiceMessage />', () => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import fireEvent from '@testing-library/user-event';
 import SnackBar from './SnackBar';
 import withSnackBar from './withSnackBar';

package/src/components/Stepper/Stepper.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Stepper from './Stepper';
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Switch from './Switch';
 

package/src/components/Tab/Tab.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Tab from './Tab';
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Tooltip from './Tooltip';
 

package/src/components/withClickOutside/withClickOutside.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import withClickOutside from './withClickOutside';
 

package/src/components/withFormValidation/withFormValidation.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import Input from '../Input/Input';
 import Button from '../Button/Button';
 import withFormValidation, { validationStrategy } from './withFormValidation';

package/src/locales/en/translation.json

@@ -53,6 +53,7 @@
   "Distance API": "Distance API",
   "Documentation": "Documentation",
   "Enter an address": "Enter an address",
+  "Estimated cost": "Estimated cost",
   "Estimated usage:": "Estimated usage:",
   "FREE": "FREE",
   "Favorite Project": "Favorite Project",
@@ -106,6 +107,7 @@
   "Results": "Results",
   "Schedule a Demo": "Schedule a Demo",
   "Search among your own Points of Interest. Find stores by geography, by attributes or by autocomplete on store names.": "Search among your own Points of Interest. Find stores by geography, by attributes or by autocomplete on store names.",
+  "See how we compare": "See how we compare",
   "Shopping centers": "Shopping centers",
   "Should be at least {{count}} char long": "Should be at least {{count}} char long",
   "Should be at least {{count}} char long__plural": "Should be at least {{count}} char long__plural",

package/src/locales/fr/translation.json

@@ -53,6 +53,7 @@
   "Distance API": "",
   "Documentation": "",
   "Enter an address": "",
+  "Estimated cost": "",
   "Estimated usage:": "",
   "FREE": "",
   "Favorite Project": "Projet favori",
@@ -106,6 +107,7 @@
   "Results": "",
   "Schedule a Demo": "",
   "Search among your own Points of Interest. Find stores by geography, by attributes or by autocomplete on store names.": "",
+  "See how we compare": "",
   "Shopping centers": "",
   "Should be at least {{count}} char long": "",
   "Should be at least {{count}} char long__plural": "",

package/src/setupTests.js

@@ -0,0 +1,27 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
+
+// Suppress known warnings from third-party libraries
+const originalError = console.error;
+beforeAll(() => {
+    console.error = (...args) => {
+        // Suppress react-laag act warning - this is a known issue with the library
+        // The warning comes from useLayer hook's async state updates during mount
+        const errorString = String(args[0] || '');
+
+        if (
+            errorString.includes('An update to %s inside a test was not wrapped in act') ||
+            (errorString.includes('An update to') && errorString.includes('WrappedComponent'))
+        ) {
+            return;
+        }
+        originalError.call(console, ...args);
+    };
+});
+
+afterAll(() => {
+    console.error = originalError;
+});

package/src/components/Map/Map.stories.js

@@ -1,84 +0,0 @@
-// import React from 'react';
-// import GoogleMapReact from 'google-map-react';
-// import Marker from './Marker';
-// import { viewpoint, circle } from './drawOnMap';
-// import Constants from '../../Constants';
-//
-// const Story = {
-//     title: 'map/Marker',
-//     component: Marker,
-// };
-//
-// export default Story;
-//
-// function Template(args) {
-//     return (
-//         <div style={{ position: 'relative', marginTop: '50px' }}>
-//             <Marker {...args} />
-//         </div>
-//     );
-// }
-// export const Default = Template.bind({});
-// Default.args = {
-//     text: '',
-// };
-// Default.parameters = {
-//     jest: ['Marker.test.js'],
-// };
-//
-// function TemplateMap() {
-//     return (
-//         <div style={{ height: '500px', width: '500px' }}>
-//             <GoogleMapReact
-//                 defaultZoom={10}
-//                 center={[48.86559784502703, 2.3384846666317585]}
-//                 bootstrapURLKeys={{ key: Constants.gmapKey }}
-//                 yesIWantToUseGoogleMapApiInternals
-//             >
-//                 <Marker lat={48.86559784502703} lng={48.86559784502703} />
-//             </GoogleMapReact>
-//         </div>
-//     );
-// }
-// export const MarkerOnMap = TemplateMap.bind({});
-//
-// function TemplateDrawViewpointMap() {
-//     return (
-//         <div style={{ height: '500px', width: '500px' }}>
-//             <GoogleMapReact
-//                 defaultZoom={10}
-//                 center={[48.86559784502703, 2.3384846666317585]}
-//                 bootstrapURLKeys={{ key: Constants.gmapKey }}
-//                 yesIWantToUseGoogleMapApiInternals
-//                 onGoogleApiLoaded={({ map }) => {
-//                     viewpoint(map, {
-//                         bounds: {
-//                             east: 2.249876823200777,
-//                             north: 48.82055026600023,
-//                             west: 2.4362195043577772,
-//                             south: 48.89723441452986,
-//                         },
-//                     });
-//                 }}
-//             />
-//         </div>
-//     );
-// }
-// export const ViewpointOnMap = TemplateDrawViewpointMap.bind({});
-//
-// function TemplateDrawCircleMap() {
-//     return (
-//         <div style={{ height: '500px', width: '500px' }}>
-//             <GoogleMapReact
-//                 defaultZoom={10}
-//                 center={[48.86559784502703, 2.3384846666317585]}
-//                 bootstrapURLKeys={{ key: Constants.gmapKey }}
-//                 yesIWantToUseGoogleMapApiInternals
-//                 onGoogleApiLoaded={({ map }) => {
-//                     circle(map, { lat: 48.86559784502703, lng: 2.3384846666317585 }, 5000);
-//                 }}
-//             />
-//         </div>
-//     );
-// }
-// export const AccuracyOnMap = TemplateDrawCircleMap.bind({});