@woosmap/ui 4.100.0 → 4.100.2

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.100.0",
+  "version": "4.100.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

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,

package/src/components/Input/Input.js

@@ -9,7 +9,7 @@ export default class Input extends Component {
         super(props);
         this.inputId = uniqueId();
         this.inputRef = React.createRef();
-        this.state = { showPassword: false };
+        this.state = { showPassword: false, value: null };
     }
 
     componentDidMount() {
@@ -27,6 +27,30 @@ export default class Input extends Component {
         }
     };
 
+    increment = () => {
+        const { onChange, value: oldValue, name, step } = this.props;
+        const { value: stateValue } = this.state;
+        const theValue = oldValue || stateValue;
+        const newValue = theValue ? theValue + step : step;
+        if (onChange) {
+            onChange({ target: { name, value: newValue } });
+        } else {
+            this.setState({ value: newValue });
+        }
+    };
+
+    decrement = () => {
+        const { onChange, value: oldValue, name, step } = this.props;
+        const { value: stateValue } = this.state;
+        const theValue = oldValue || stateValue;
+        const newValue = theValue ? theValue - step : 0;
+        if (onChange) {
+            onChange({ target: { name, value: newValue } });
+        } else {
+            this.setState({ value: newValue });
+        }
+    };
+
     renderInput = () => {
         const {
             type,
@@ -47,7 +71,7 @@ export default class Input extends Component {
             enableTogglePassword,
         } = this.props;
 
-        const { showPassword } = this.state;
+        const { showPassword, value: stateValue } = this.state;
 
         let iconSize = size;
 
@@ -82,11 +106,21 @@ export default class Input extends Component {
                     onFocus,
                     onKeyDown: this.onKeyDown,
                     type: type === 'password' && showPassword ? 'text' : type,
-                    value,
+                    value: value || stateValue,
                     size: length,
                     disabled,
                     onChange,
                 })}
+                {type === 'number' && (
+                    <div>
+                        <button onClick={this.increment} type="button">
+                            +
+                        </button>
+                        <button onClick={this.decrement} type="button">
+                            -
+                        </button>
+                    </div>
+                )}
                 {type === 'password' && enableTogglePassword && (
                     <span
                         onKeyDown={() => ({})}
@@ -182,6 +216,7 @@ Input.propTypes = {
     onPressEnter: PropTypes.func,
     enableTogglePassword: PropTypes.bool,
     isInputIconFill: PropTypes.bool,
+    step: PropTypes.number,
 };
 
 Input.defaultProps = {
@@ -208,4 +243,5 @@ Input.defaultProps = {
     onFocus: null,
     enableTogglePassword: false,
     isInputIconFill: false,
+    step: 1,
 };

package/src/components/Input/Input.stories.js

@@ -94,6 +94,7 @@ const Template = (args) => {
                 enableTogglePassword
             />
             <Input placeholder="Type search" type="search" label="Search" />
+            <Input placeholder="Number input" type="number" label="Number" />
         </div>
     );
 };

package/src/components/OfflineChatBot/offlinechatbot.styl

@@ -17,6 +17,8 @@
 		border-radius .8rem .8rem 0 0
 		color $light
 		cursor pointer
+		border .1rem solid $light
+		border-bottom 0
 		&__icon
 			max-width 1.7rem
 		&__label
@@ -71,5 +73,10 @@
 	&__link
 		color $primary
 
-
-
+@media screen and (max-width 767px)
+	.sf-chat
+		&__button
+			br(3)
+			border-bottom .1rem solid $light
+			position: relative
+			bottom 1.2rem

package/src/icons/menu-sandwitch.svg

@@ -0,0 +1 @@
+<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="3.707" y1="5.038" x2="20.293" y2="5.038" /><line x1="3.707" y1="12" x2="20.293" y2="12" /><line x1="20.293" y1="18.962" x2="3.707" y2="18.962" /></svg>

package/src/index.js

@@ -49,6 +49,7 @@ export { default as withClickOutside } from './components/withClickOutside/withC
 export { default as withFormValidation } from './components/withFormValidation/withFormValidation';
 export { default as Marker } from './components/Map/Marker';
 export { default as LocalitiesDemo } from './components/Demo/LocalitiesDemo';
+export { default as W3WDemo } from './components/Demo/W3WDemo';
 export { default as LocalitiesCheckoutUKDemo } from './components/Demo/LocalitiesUKAddressDemo';
 export { default as LocalitiesCheckoutFRDemo } from './components/Demo/LocalitiesFRAddressDemo';
 export { default as LocalitiesAddressDemo } from './components/Demo/LocalitiesAddressDemo';

package/src/styles/commons/sf.styl

@@ -5,6 +5,7 @@ body
 			display block !important
 		.helpButton
 			right 0
+			min-width 17rem
 			.uiButton
 				trans()
 				right 2rem
@@ -14,6 +15,9 @@ body
 				min-width 1rem
 				text-decoration none
 				box-shadow 0 0 .2rem transparent
+				border .1rem solid $light
+				border-bottom 0
+				margin-left auto
 				&.helpButtonDisabled
 					position fixed
 					right 2rem
@@ -328,5 +332,11 @@ body
 				display block
 				&.smoothScroll
 					scroll-behavior smooth
+@media screen and (max-width 767px)
+	body
+		.embeddedServiceHelpButton
+			.helpButton
+				.uiButton
+					border-bottom 1px solid $light
 	// End SF Chat Customization
 

package/src/styles/console/button.styl

@@ -372,7 +372,11 @@
 			trans()
 		.btn__label
 			trans()
-
+	&--link-flex
+		&.active
+			color $primary
+			.icon
+				stroke $primary
 	&--has-icon
 		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link):not(.btn--icon-right)
 			padding 0 $padding 0 $padding - .6
@@ -675,7 +679,7 @@
 			.icon
 				margin-right .4rem
 			&.btn--has-icon
-				padding-left $padding - .6
+				padding-left $padding - .8
 				&.btn--loading
 					padding-left $padding - .3
 					disableHoverEffect()

package/src/styles/website/button.styl

@@ -619,6 +619,21 @@
 					disableHoverEffect()
 					.icon
 						sq(3.2)
+	&--mini
+		buttonMini()
+		&:not(.btn--custom-icon-size)
+			.icon
+				sq(1.6)
+		&:not(.btn--icon)
+			.icon
+				margin-right .4rem
+			&.btn--has-icon
+				padding-left $padding - 1.6
+				&.btn--loading
+					padding-left $padding - .3
+					disableHoverEffect()
+					.icon
+						sq(1.6)
 	&--group
 		btn()
 		color $secondary-medium40

package/src/styles/website/mixins.styl

@@ -137,6 +137,18 @@ buttonLarge()
 		&.btn--link-flex
 			height auto
 			line-height unset
+buttonMini()
+	height $buttonHeightMini
+	font-size $buttonFontSizeMini
+	line-height $buttonLineHeightMini
+	padding $buttonPaddingMini
+	&.btn--no-label
+		&.btn--link
+		&.btn--link-primary
+		&.btn--link-info
+		&.btn--link-flex
+			height auto
+			line-height unset
 
 fullw()
 	width 100%

package/src/styles/website/variables.styl

@@ -86,8 +86,8 @@ $buttonFontSizeSmall = $fontSize - .1
 $buttonLineHeightSmall = $buttonFontSizeSmall * 2
 
 $buttonHeightMini = $buttonHeight - 1
-$buttonPaddingMini = 0 $padding - .4 0 $padding - .4
-$buttonFontSizeMini = $fontSizeSmall
+$buttonPaddingMini = 0 $padding - 1.2 0 $padding - 1.2
+$buttonFontSizeMini = $fontSizeSmall - .4
 $buttonLineHeightMini = $buttonFontSizeMini * 2
 
 $buttonHeightNano = $buttonHeight - 1.4

package/src/website.js

@@ -11,6 +11,7 @@ export { default as Popover } from './components/Popover/Popover';
 export { default as Select } from './components/Select/Select';
 
 export { default as LocalitiesDemo } from './components/Demo/LocalitiesDemo';
+export { default as W3WDemo } from './components/Demo/W3WDemo';
 export { default as LocalitiesCheckoutUKDemo } from './components/Demo/LocalitiesUKAddressDemo';
 export { default as LocalitiesCheckoutFRDemo } from './components/Demo/LocalitiesFRAddressDemo';
 export { default as LocalitiesAddressDemo } from './components/Demo/LocalitiesAddressDemo';