@woosmap/ui 4.99.0 → 4.100.1

package/.idea/encodings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding">
+    <file url="PROJECT" charset="UTF-8" />
+  </component>
+</project>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,18 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ignoredPackages">
+        <value>
+          <list size="4">
+            <item index="0" class="java.lang.String" itemvalue="Fabric" />
+            <item index="1" class="java.lang.String" itemvalue="PyYAML" />
+            <item index="2" class="java.lang.String" itemvalue="Jinja2" />
+            <item index="3" class="java.lang.String" itemvalue="github3.py" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>

package/.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

package/.idea/jsLinters/eslint.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EslintConfiguration">
+    <option name="fix-on-save" value="true" />
+  </component>
+</project>

package/.idea/misc.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.9" project-jdk-type="Python SDK" />
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/ui.iml" filepath="$PROJECT_DIR$/.idea/ui.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/prettier.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myRunOnReformat" value="true" />
+  </component>
+</project>

package/.idea/ui.iml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+  <component name="TemplatesService">
+    <option name="TEMPLATE_FOLDERS">
+      <list>
+        <option value="$MODULE_DIR$/node_modules/@storybook/core/dist/server/templates" />
+      </list>
+    </option>
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/package.json

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

package/src/components/Card/Card.js

@@ -16,6 +16,7 @@ import mapImg from '../../images/products/product-map.png';
 import trafficImg from '../../images/products/product-traffic.png';
 import merchantImg from '../../images/products/product-merchant.png';
 import indoorImg from '../../images/products/product-indoor.png';
+import what3wordsImg from '../../images/products/product-what3words.png';
 
 import localitiesImgSq from '../../images/products/product-localities-sq.png';
 import localitiesUkImgSq from '../../images/products/product-localities-uk-sq.png';
@@ -27,6 +28,7 @@ import mapImgSq from '../../images/products/product-map-sq.png';
 import trafficImgSq from '../../images/products/product-traffic-sq.png';
 import merchantImgSq from '../../images/products/product-merchant-sq.png';
 import indoorImgSq from '../../images/products/product-indoor-sq.png';
+import what3wordsImgSq from '../../images/products/product-what3words-sq.png';
 
 const productImg = {
     LOCALITIES: localitiesImg,
@@ -39,6 +41,7 @@ const productImg = {
     TRAFFIC: trafficImg,
     MERCHANTS: merchantImg,
     INDOOR: indoorImg,
+    W3W: what3wordsImg,
 };
 const productImgSq = {
     LOCALITIES: localitiesImgSq,
@@ -51,6 +54,7 @@ const productImgSq = {
     TRAFFIC: trafficImgSq,
     MERCHANTS: merchantImgSq,
     INDOOR: indoorImgSq,
+    W3W: what3wordsImgSq,
 };
 
 class Header extends Component {

package/src/components/Demo/DistanceDemo.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cl from 'classnames';
 import polyline from '@mapbox/polyline';
+import Datetime from 'react-datetime';
 import Demo from './SkeletonDemo';
 import Input from '../Input/Input';
 import Constants from '../../Constants';
@@ -19,7 +20,7 @@ import { createWoosmapMap } from '../Map/drawOnMap';
 
 const languages = [
     { value: 'fr', label: 'French' },
-    { value: 'gb', label: 'English' },
+    { value: 'en', label: 'English' },
     { value: 'es', label: 'Spanish' },
     { value: 'it', label: 'Italian' },
     { value: 'de', label: 'German' },
@@ -64,6 +65,8 @@ export default class DistanceDemo extends Component {
             error: null,
             originLocation: this.defaultOrigin.location,
             destinationLocation: this.defaultDestination.location,
+            departureTime: null,
+            arrivalTime: null,
             unit: units[0],
             method: methods[0],
             travelMode: travelModes[0],
@@ -96,7 +99,9 @@ export default class DistanceDemo extends Component {
             const { originLocation, destinationLocation, routes } = this.state;
 
             if (!this.directionsRenderer) {
-                this.directionsRenderer = new window.woosmap.map.DirectionsRenderer({ preserveViewport: true });
+                this.directionsRenderer = new window.woosmap.map.DirectionsRenderer({
+                    preserveViewport: true,
+                });
                 this.directionsRenderer.setMap(this.map);
             }
 
@@ -172,9 +177,19 @@ export default class DistanceDemo extends Component {
     };
 
     getRequestparams = () => {
-        const { language, originLocation, destinationLocation, unit, method, travelMode, alternatives } = this.state;
+        const {
+            language,
+            originLocation,
+            destinationLocation,
+            unit,
+            method,
+            travelMode,
+            alternatives,
+            arrivalTime,
+            departureTime,
+        } = this.state;
 
-        return {
+        const params = {
             key: Constants.woosmapKey,
             origin: `${originLocation.lat},${originLocation.lng}`,
             destination: `${destinationLocation.lat},${destinationLocation.lng}`,
@@ -184,6 +199,12 @@ export default class DistanceDemo extends Component {
             mode: travelMode.value,
             alternatives,
         };
+        if (departureTime) {
+            params.departure_time = departureTime.unix();
+        } else if (arrivalTime) {
+            params.arrival_time = arrivalTime.unix();
+        }
+        return params;
     };
 
     renderRoutesSummary = () => {
@@ -269,7 +290,35 @@ export default class DistanceDemo extends Component {
             ),
         };
 
-        return [originInputs, destinationInputs];
+        const departureTimeInput = {
+            label: tr('Departure Time'),
+            component: (
+                <>
+                    <Datetime
+                        key="dt_departure"
+                        className="datetime"
+                        inputProps={{ className: 'input__item' }}
+                        onChange={(dt) => this.setState({ departureTime: dt, arrivalTime: null }, this.requestDistance)}
+                    />
+                </>
+            ),
+        };
+
+        const arrivalTimeInput = {
+            label: tr('Arrival Time'),
+            component: (
+                <>
+                    <Datetime
+                        key="dt_arrival"
+                        className="datetime"
+                        inputProps={{ className: 'input__item' }}
+                        onChange={(dt) => this.setState({ arrivalTime: dt, departureTime: null }, this.requestDistance)}
+                    />
+                </>
+            ),
+        };
+
+        return [originInputs, destinationInputs, departureTimeInput, arrivalTimeInput];
     };
 
     renderFooterFilters = () => {

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

@@ -43,7 +43,7 @@ it('test method button', () => {
 
 it('test language button', () => {
     render(<DistanceDemo />);
-    expect(screen.getByText('language=gb&\\')).toBeVisible();
+    expect(screen.getByText('language=en&\\')).toBeVisible();
     fireEvent.click(screen.getByTitle('Italian'));
     expect(screen.getByText('language=it&\\')).toBeVisible();
 });

package/src/components/Demo/W3WDemo.js

@@ -0,0 +1,317 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import axios from 'axios';
+import cl from 'classnames';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Demo from './SkeletonDemo';
+import Input from '../Input/Input';
+import Button from '../Button/Button';
+import ButtonGroup from '../Button/ButtonGroup';
+import Constants from '../../Constants';
+import { tr } from '../utils/locale';
+import markerIcon from '../../images/marker.png';
+import markerIconAlt from '../../images/marker-alt.png';
+import { createWoosmapMap } from '../Map/drawOnMap';
+
+const languages = [
+    { value: 'fr', label: 'French' },
+    { value: 'en', label: 'English' },
+    { value: 'es', label: 'Spanish' },
+    { value: 'it', label: 'Italian' },
+    { value: 'de', label: 'German' },
+    { value: 'nl', label: 'Dutch' },
+];
+
+export default class W3WDemo extends Component {
+    constructor(props) {
+        super(props);
+        const lang = (typeof window === 'object' && (navigator.language || navigator.userLanguage)) || 'gb';
+        const defaultLang = languages.find((item) => lang.startsWith(item.value));
+        this.state = {
+            w3w: null,
+            selectedAddress: null,
+            error: null,
+            input: '///walnuts.octopus.mount',
+            language: (defaultLang || languages[1]).value,
+            suggestions: null,
+        };
+
+        this.mounted = true;
+        this.map = null;
+        this.markers = [];
+        this.viewport = null;
+        this.baseRequestUrl = 'https://develop-api.woosmap.com/what3words/';
+        this.demoRef = React.createRef();
+        this.overlay = null;
+    }
+
+    componentDidMount() {
+        this.displayMap();
+    }
+
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+
+    requestW3W = (words) => {
+        axios
+            .get(`${this.baseRequestUrl}convert-to-address`, {
+                params: this.getRequestparams({ words }),
+            })
+            .then((response) => {
+                if (this.mounted) {
+                    const selectedAddress = response.data.results.length > 0 ? response.data.results[0] : null;
+                    this.setState(
+                        {
+                            w3w: response.data,
+                            error: null,
+                        },
+                        () => this.selectAddress(selectedAddress)
+                    );
+                }
+            })
+            .catch((error) => {
+                const errorResult = (error && error.response && error.response.data) || 'Unhandled error';
+                this.setState({ error: errorResult });
+            });
+    };
+
+    autosuggestW3W = () => {
+        const { input } = this.state;
+        axios
+            .get(`${this.baseRequestUrl}autosuggest`, {
+                params: this.getRequestparams({ input }),
+            })
+            .then((response) => {
+                if (this.mounted) {
+                    this.setState({
+                        w3w: null,
+                        suggestions: response.data,
+                        error: null,
+                    });
+                }
+            })
+            .catch((error) => {
+                const errorResult = (error && error.response && error.response.data) || 'Unhandled error';
+                this.setState({ error: errorResult });
+            });
+    };
+
+    getRequestparams = (input) => {
+        const { language } = this.state;
+        return {
+            key: 'woos-0efb08b8-9072-3717-8dfb-a9c776c7ada9',
+            language,
+            ...input,
+        };
+    };
+
+    selectAddress = (address) => {
+        this.setState({ selectedAddress: address }, this.displayOnMap);
+    };
+
+    // eslint-disable-next-line sonarjs/cognitive-complexity
+    displayOnMap = () => {
+        const { w3w, selectedAddress } = this.state;
+        if (this.map) {
+            if (this.markers.length > 0) {
+                this.markers.forEach((marker) => marker.setMap(null));
+                this.marker = [];
+            }
+            w3w.results.forEach((address) => {
+                if (address.geometry.location) {
+                    const marker = new window.woosmap.map.Marker({
+                        icon: {
+                            url: address === selectedAddress ? markerIconAlt : markerIcon,
+                            scaledSize: { height: 46, width: 30 },
+                        },
+                        position: address.geometry.location,
+                        map: this.map,
+                    });
+                    this.markers.push(marker);
+                    marker.addListener('click', () => {
+                        this.markers.forEach((_marker) => {
+                            _marker.setIcon({
+                                url: marker === _marker ? markerIconAlt : markerIcon,
+                                scaledSize: { height: 46, width: 30 },
+                            });
+                        });
+                        this.setState({ selectedAddress: address });
+                    });
+
+                    this.map.setCenter(address.geometry.location);
+                    this.map.setZoom(18);
+                }
+            });
+        }
+    };
+
+    renderAutocompleteList = () => {
+        const { w3w, suggestions } = this.state;
+        if (w3w) {
+            const result = w3w.results.map((address) => {
+                const { selectedAddress } = this.state;
+                return (
+                    <li key={address.public_id}>
+                        <Button
+                            type="link-flex"
+                            label={address.formatted_address}
+                            active={selectedAddress === address}
+                            onClick={() => this.selectAddress(address)}
+                        />
+                    </li>
+                );
+            });
+            if (result.length === 0) {
+                return (
+                    <div className="demo__results__content__action">
+                        {suggestions && (
+                            <Button
+                                icon="arrow-left"
+                                type="secondary"
+                                size="mini"
+                                label={tr('Back')}
+                                onClick={() => this.setState({ w3w: null })}
+                            />
+                        )}
+                        <div className="demo__empty">{tr('No address found for this location')}</div>
+                    </div>
+                );
+            }
+            return (
+                <div className="demo__results__content__action">
+                    {suggestions && (
+                        <Button
+                            icon="arrow-left"
+                            type="secondary"
+                            size="mini"
+                            label={tr('Back')}
+                            onClick={() => this.setState({ w3w: null })}
+                        />
+                    )}
+                    <ul>{result}</ul>
+                </div>
+            );
+        }
+        if (suggestions) {
+            const result = suggestions.suggestions.map((suggestion) => (
+                <li key={`sugg_${suggestion.words}`}>
+                    <button
+                        type="button"
+                        className="btn btn--link-flex btn--two-lines"
+                        onClick={() => this.requestW3W(suggestion.words)}
+                    >
+                        <span>{suggestion.nearestPlace}</span>
+                        <strong>{suggestion.words}</strong>
+                    </button>
+                </li>
+            ));
+            if (result.length === 0) {
+                return <div className="demo__empty">{tr('No locality found')}</div>;
+            }
+            return <ul>{result}</ul>;
+        }
+
+        return <div className="demo__empty">{tr('No locality found')}</div>;
+    };
+
+    displayMap = () => {
+        if (this.timeoutMap) {
+            clearTimeout(this.timeoutMap);
+        }
+
+        if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            window.woosmap.map.config.setApiKey(Constants.woosmapKey);
+            this.map = createWoosmapMap(this.demoRef.current.getMap());
+            const { input } = this.state;
+            this.requestW3W(input);
+        } else {
+            this.timeoutMap = setTimeout(this.displayMap, 300);
+        }
+    };
+
+    renderHeaderFilters = () => {
+        const { input } = this.state;
+        const { usecaseFilter } = this.props;
+        const inputFilter = {
+            label: tr('Type in '),
+            component: (
+                <Input
+                    value={input}
+                    autocomplete={false}
+                    placeholder={tr('Type a locality name...')}
+                    onChange={(e) => {
+                        let { value } = e.target;
+                        if (value.indexOf('///') !== 0) {
+                            value = `///${value.replaceAll('/', '')}`;
+                        }
+                        this.setState({ input: value }, this.autosuggestW3W);
+                    }}
+                />
+            ),
+        };
+        return [usecaseFilter, inputFilter];
+    };
+
+    renderFooterFilters = () => {
+        const { language, input } = this.state;
+        const filterCountries = {
+            label: tr('Response language'),
+            component: (
+                <ButtonGroup className="language" isLight>
+                    {languages.map((item) => (
+                        <Button
+                            size="small"
+                            type="group"
+                            key={item.value}
+                            active={language === item.value}
+                            onClick={() => {
+                                this.setState({ language: item.value }, () => this.requestW3W(input));
+                            }}
+                        >
+                            <span className={cl('flag', `flag-${item.value}`)} title={item.label} />
+                        </Button>
+                    ))}
+                </ButtonGroup>
+            ),
+        };
+        return [filterCountries];
+    };
+
+    render() {
+        const { w3w, error } = this.state;
+        const { noheader, headerLabels, subHeader } = this.props;
+        return (
+            <Demo
+                id="w3w-demo"
+                header={headerLabels}
+                subHeader={subHeader}
+                docLink="https://developers.woosmap.com/products/w3w/get-started/"
+                className="demo--w3w"
+                footerFilters={this.renderFooterFilters()}
+                headerFilters={this.renderHeaderFilters()}
+                request={this.requestUrl}
+                noheader={noheader}
+                params={this.getRequestparams()}
+                referer="http://localhost/"
+                response={error || w3w}
+                result={this.renderAutocompleteList()}
+                withMap
+                ref={this.demoRef}
+            />
+        );
+    }
+}
+
+W3WDemo.defaultProps = {
+    noheader: false,
+    headerLabels: {},
+    usecaseFilter: null,
+    subHeader: null,
+};
+W3WDemo.propTypes = {
+    noheader: PropTypes.bool,
+    headerLabels: PropTypes.object,
+    usecaseFilter: PropTypes.object,
+    subHeader: PropTypes.object,
+};

package/src/components/Demo/W3WDemo.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import W3WDemo from './W3WDemo';
+
+const Story = {
+    title: 'demo/W3WDemo',
+    component: W3WDemo,
+};
+
+export default Story;
+
+const TemplateW3W = () => <W3WDemo />;
+export const Localities = TemplateW3W.bind({});

package/src/components/Demo/skeletondemo.styl

@@ -22,7 +22,6 @@
         box-shadow 0 .3rem 1rem rgba($secondary, .15)
         .demo--merchant &
             border .1rem solid $light
-            
     &__showcase
     &__data
         display flex
@@ -90,6 +89,53 @@
             padding $demoPadding
             background-color $light
             overflow-y auto
+            .demo--w3w &
+                mbib(1.6)
+                li
+                    margin-bottom 1.4rem
+                    .btn
+                        color $primary
+                        &.active
+                        &:hover
+                            font-weight bold
+                            color $logo5 !important
+                        &--link-flex
+                            text-decoration none
+                            .btn__label
+                                line-height 1.4
+                        &--two-lines
+                            &.btn
+                                mbib(.6)
+                                color $dark
+                                display flex
+                                flex-direction column
+                                align-items flex-start
+                                strong
+                                    font-weight 600
+                                    color $primary
+                                &.active
+                                &:hover
+                                    font-weight 400
+                                    color $logo5
+                                    strong
+                                        font-weight 600
+                                        color $logo5
+
+            &__action
+                mbib(1.6)
+                display flex
+                justify-content space-between
+                align-items flex-start
+                flex-direction column
+                .btn
+                    .icon
+                        fill none !important
+                        stroke $dark  !important
+                    &:hover
+                        .icon
+                            stroke $light  !important
+    &__empty
+        color $error
     &__code
         inputFont()
         width 100%

package/src/components/Icon/Icon.js

@@ -168,6 +168,7 @@ import { ReactComponent as Manage } from '../../icons/manage.svg';
 import { ReactComponent as Marker } from '../../icons/marker.svg';
 import { ReactComponent as Members } from '../../icons/members.svg';
 import { ReactComponent as Member } from '../../icons/member.svg';
+import { ReactComponent as MenuSandwitch } from '../../icons/menu-sandwitch.svg';
 import { ReactComponent as MenuVertical } from '../../icons/menu-vertical.svg';
 import { ReactComponent as Phone } from '../../icons/phone.svg';
 import { ReactComponent as Play } from '../../icons/play.svg';
@@ -486,6 +487,7 @@ const ConsoleIcons = {
     marker: Marker,
     member: Member,
     members: Members,
+    'menu-sandwitch': MenuSandwitch,
     'menu-vertical': MenuVertical,
     phone: Phone,
     play: Play,