@woosmap/ui 2.7.0 → 2.11.0

package/package.json

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

package/src/components/Demo/AddressDemo.js

@@ -186,7 +186,7 @@ export default class AddressDemo extends Component {
 
         const useCaseChoice = {
             key: 'usecase',
-            label: tr('Usecase'),
+            label: tr('Use case'),
             component: (
                 <ButtonGroup isLight key="usecase">
                     <Button

package/src/components/Demo/LocalitiesAddressDemo.js

@@ -0,0 +1,370 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { Component } from 'react';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import GoogleMapReact from 'google-map-react';
+import Demo from './SkeletonDemo';
+import AddressAutocomplete from '../Woosmap/AddressAutocomplete';
+import Marker from '../Map/Marker';
+import Constants from '../../Constants';
+import { viewpoint } from '../Map/drawOnMap';
+import CountrySelect from '../Select/CountrySelect';
+import { tr } from '../utils/locale';
+import Input from '../Input/Input';
+
+export default class LocalitiesAddressDemo extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            response: null,
+            error: null,
+            input: '',
+            countries: [],
+            geometry: false,
+            showDetails: false,
+        };
+        this.map = null;
+        this.marker = null;
+        this.mounted = true;
+        this.viewport = null;
+        this.requestUrl = 'https://api.woosmap.com/localities/autocomplete';
+        this.requestDetailsUrl = 'https://api.woosmap.com/localities/details';
+        this.inputRef = React.createRef();
+        this.addressAutocompleteRef = React.createRef();
+    }
+
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+
+    onAutocompleteInputChangeCb = (input) => {
+        this.setState(
+            {
+                error: null,
+                input,
+            },
+            this.requestAddress
+        );
+    };
+
+    requestAddress = () => {
+        axios
+            .get(this.requestUrl, {
+                params: this.getRequestparams(),
+            })
+            .then((response) => {
+                if (this.mounted) {
+                    const state = {
+                        showDetails: false,
+                        response: response.data,
+                        error: null,
+                    };
+                    this.setState(state);
+                }
+            })
+            .catch((error) => {
+                const errorResult = (error && error.response && error.response.data) || 'Unhandled error';
+                this.setState({ error: errorResult });
+            });
+    };
+
+    requestAddressDetails = (result) => {
+        const { geometry } = this.state;
+        const params = {
+            public_id: result.id,
+            key: Constants.woosmapKey,
+        };
+        if (geometry) {
+            params.fields = 'geometry';
+        }
+        axios
+            .get(this.requestDetailsUrl, {
+                params,
+            })
+            .then((response) => {
+                if (this.mounted) {
+                    this.setState({
+                        error: null,
+                        showDetails: true,
+                        response: response.data.result,
+                        selectedLocality: response.data.result,
+                    });
+                }
+            })
+            .catch((error) => {
+                const errorResult = (error && error.response && error.response.data) || 'Unhandled error';
+                this.setState({ error: errorResult });
+            });
+    };
+
+    getRequestparams = () => {
+        const { input, selectedLocality, countries, showDetails, geometry } = this.state;
+        if (showDetails) {
+            const detailsParam = {
+                key: Constants.woosmapKey,
+                public_id: selectedLocality.public_id,
+            };
+            if (geometry) {
+                detailsParam.fields = 'geometry';
+            }
+            return detailsParam;
+        }
+        const params = {
+            key: Constants.woosmapKey,
+        };
+        if (countries && countries.length > 0) {
+            params.components = countries.map((item) => `country:${item.value}`).join('|');
+        }
+
+        params.input = input;
+        if (geometry) {
+            params.fields = 'geometry';
+        }
+        return params;
+    };
+
+    displayOnMap = () => {
+        const { selectedAddress } = this.state;
+        if (this.viewport) {
+            this.viewport.setMap(null);
+        }
+        if (this.map && selectedAddress) {
+            if (selectedAddress.viewpoint) {
+                this.viewport = viewpoint(this.map, selectedAddress.viewpoint);
+                this.map.fitBounds(selectedAddress.viewpoint.bounds, 10);
+            } else {
+                this.map.setZoom(10);
+            }
+        }
+    };
+
+    selectAddress = (address) => {
+        this.setState(
+            {
+                error: null,
+                selectedLocality: address,
+            },
+            this.requestAddress
+        );
+    };
+
+    renderHeaderFilters = () => {
+        const { countries } = this.state;
+        const { usecaseFilter } = this.props;
+        let components = null;
+        if (countries && countries.length > 0) {
+            components = countries.map((item) => `country:${item.value}`).join('|');
+        }
+        const inputFilter = {
+            label: tr('Type in an address '),
+            component: (
+                <AddressAutocomplete
+                    inputRef={this.inputRef}
+                    key="addressAutocomplete"
+                    ref={this.addressAutocompleteRef}
+                    apiOrder={['localities']}
+                    woosmapKey={Constants.woosmapKey}
+                    placeholder="Start to type in an address"
+                    defaultLocality={this.defaultOrigin}
+                    componentsLocalities={components}
+                    callback={this.requestAddressDetails}
+                    inputChangeCb={this.onAutocompleteInputChangeCb}
+                />
+            ),
+        };
+        return [usecaseFilter, inputFilter];
+    };
+
+    renderFooterFilters = () => {
+        const { geometry } = this.state;
+        const filterTypes = {
+            label: tr('Filter by'),
+            component: (
+                <div className="demo__input-container--inline" key="country">
+                    <CountrySelect
+                        isMulti
+                        placeholder={tr('Country')}
+                        filter={['fr', 'gb']}
+                        onChange={(items) => this.setState({ countries: items }, this.requestAddress)}
+                    />
+                </div>
+            ),
+        };
+        const filterGeometry = {
+            label: tr('Geometry only'),
+            component: (
+                <Input
+                    type="checkbox"
+                    key="geometry"
+                    checked={geometry}
+                    onChange={(e) => {
+                        this.setState({ geometry: e.target.checked });
+                    }}
+                />
+            ),
+        };
+        return [filterGeometry, filterTypes];
+    };
+
+    renderAddress = () => {
+        const { selectedLocality, geometry } = this.state;
+        if (geometry) {
+            return null;
+        }
+        let addressComponents = [];
+        const hasComponents = selectedLocality && selectedLocality.address_components;
+        if (hasComponents) {
+            addressComponents = selectedLocality.address_components;
+        }
+        let shippingAddress = '';
+        let shippingAddress2 = '';
+        let postcode = '';
+        let locality = '';
+        let state = '';
+        let country = '';
+        addressComponents.forEach((component) => {
+            const [componentType] = component.types;
+            switch (componentType) {
+                case 'street_number': {
+                    shippingAddress = `${component.long_name} ${shippingAddress}`;
+                    break;
+                }
+                case 'route': {
+                    shippingAddress += component.short_name;
+                    break;
+                }
+                case 'postal_codes': {
+                    postcode = `${component.long_name}${postcode}`;
+                    break;
+                }
+                case 'postal_code_suffix': {
+                    postcode = `${postcode}-${component.long_name}`;
+                    break;
+                }
+                case 'locality':
+                    locality = component.long_name;
+                    break;
+
+                case 'state': {
+                    state = component.long_name;
+                    break;
+                }
+                case 'administrative_area_level_1': {
+                    state = component.long_name;
+                    break;
+                }
+                case 'country': {
+                    country = component.long_name;
+                    break;
+                }
+                case 'premise': {
+                    shippingAddress2 = component.long_name;
+                    break;
+                }
+                default:
+                    break;
+            }
+        });
+
+        return (
+            <div className="demo--localitiesaddress__formcontainer">
+                {!hasComponents && (
+                    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+                    <div role="button" className="overlay" />
+                )}
+                <Input
+                    label="Apartment, unit, suite, or floor #"
+                    placeholder="Apartment, unit, suite, or floor #"
+                    value={shippingAddress2}
+                    onChange={() => {}}
+                />
+                <Input
+                    label="Street number, street name"
+                    placeholder="Street number, street name"
+                    value={shippingAddress}
+                    onChange={() => {}}
+                />
+                <Input label="City" value={locality} placeholder="City" onChange={() => {}} />
+                <Input
+                    className="fullw"
+                    label="State/Province"
+                    placeholder="State/Province"
+                    value={state}
+                    onChange={() => {}}
+                />
+                <Input
+                    className="fullw"
+                    label="Postal code"
+                    placeholder="Postal code"
+                    value={postcode}
+                    onChange={() => {}}
+                />
+                <Input label="Country/Region" placeholder="Country/Region" value={country} onChange={() => {}} />
+            </div>
+        );
+    };
+
+    renderMap = () => {
+        const { selectedLocality } = this.state;
+
+        const location =
+            selectedLocality && selectedLocality.geometry
+                ? selectedLocality.geometry.location
+                : { lat: 48.863350992156306, lng: 2.3484066674237796 };
+        const marker =
+            selectedLocality && selectedLocality.geometry ? <Marker lat={location.lat} lng={location.lng} /> : null;
+        return (
+            <GoogleMapReact
+                defaultZoom={10}
+                center={[location.lat, location.lng]}
+                bootstrapURLKeys={{ key: Constants.gmapKey, libraries: ['geometry', 'places'] }}
+                yesIWantToUseGoogleMapApiInternals
+                onGoogleApiLoaded={({ map }) => {
+                    this.map = map;
+                    this.displayOnMap();
+                }}
+            >
+                {marker}
+            </GoogleMapReact>
+        );
+    };
+
+    render() {
+        const { response, error, showDetails } = this.state;
+        const { noheader, headerLabels, subHeader } = this.props;
+        let request = this.requestUrl;
+        if (showDetails) {
+            request = this.requestDetailsUrl;
+        }
+        return (
+            <Demo
+                noheader={noheader}
+                header={headerLabels}
+                subHeader={subHeader}
+                id="localities-demo"
+                className="demo--localitiesaddress"
+                footerFilters={this.renderFooterFilters()}
+                headerFilters={this.renderHeaderFilters()}
+                request={request}
+                params={this.getRequestparams()}
+                referer="http://localhost/"
+                response={error || response}
+                result={this.renderAddress()}
+                map={this.renderMap()}
+            />
+        );
+    }
+}
+
+LocalitiesAddressDemo.defaultProps = {
+    noheader: false,
+    headerLabels: null,
+    usecaseFilter: null,
+    subHeader: null,
+};
+LocalitiesAddressDemo.propTypes = {
+    noheader: PropTypes.bool,
+    headerLabels: PropTypes.object,
+    usecaseFilter: PropTypes.object,
+    subHeader: PropTypes.object,
+};

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

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

package/src/components/Demo/LocalitiesAllDemo.js

@@ -0,0 +1,83 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { Component } from 'react';
+import LocalitiesDemo from './LocalitiesDemo';
+import Button from '../Button/Button';
+import ButtonGroup from '../Button/ButtonGroup';
+import LocalitiesAddressDemo from './LocalitiesAddressDemo';
+import { tr } from '../utils/locale';
+
+export default class LocalitiesAllDemo extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { usecase: 'localities' };
+    }
+
+    renderSubHeader = () => (
+        <p>
+            {tr('You can select bewteen 2 use cases:')}
+            <ul className="demo__desc__list">
+                <li>{tr('Store Locator integration: autocomplete on city names, suburb names, postcodes...')}</li>
+                <li>
+                    {tr(
+                        'Checkout integration: on full addresses, renders the right part of the address in the right form fields'
+                    )}
+                </li>
+            </ul>
+        </p>
+    );
+
+    renderUsecaseFilter = () => {
+        const { usecase } = this.state;
+        return {
+            key: 'usecase',
+            label: tr('Use case'),
+            component: (
+                <ButtonGroup isLight key="usecase">
+                    <Button
+                        type="group"
+                        key="localities"
+                        active={usecase === 'localities'}
+                        onClick={() => {
+                            this.setState({ usecase: 'localities' });
+                        }}
+                        label={tr('Store Locator')}
+                    />
+                    <Button
+                        type="group"
+                        key="addresses"
+                        active={usecase === 'addresses'}
+                        onClick={() => {
+                            this.setState({ usecase: 'addresses' });
+                        }}
+                        label={tr('Checkout')}
+                    />
+                </ButtonGroup>
+            ),
+        };
+    };
+
+    render() {
+        const { usecase } = this.state;
+        const headerLabels = {
+            title: tr('Localities API'),
+            desc: tr(
+                'Woosmap Localities sorts and displays the 5 most relevant results, with priority to the most likely results, recognises common abbreviations and apostrophes, with high tolerance for typos.'
+            ),
+        };
+        return usecase === 'localities' ? (
+            <LocalitiesDemo
+                noheader={false}
+                headerLabels={headerLabels}
+                usecaseFilter={this.renderUsecaseFilter()}
+                subHeader={this.renderSubHeader()}
+            />
+        ) : (
+            <LocalitiesAddressDemo
+                noheader={false}
+                headerLabels={headerLabels}
+                usecaseFilter={this.renderUsecaseFilter()}
+                subHeader={this.renderSubHeader()}
+            />
+        );
+    }
+}

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

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

package/src/components/Demo/LocalitiesDemo.js

@@ -194,6 +194,7 @@ export default class LocalitiesDemo extends Component {
 
     renderHeaderFilters = () => {
         const { input } = this.state;
+        const { usecaseFilter } = this.props;
         const inputFilter = {
             label: tr('Type in '),
             component: (
@@ -205,7 +206,7 @@ export default class LocalitiesDemo extends Component {
                 />
             ),
         };
-        return [inputFilter];
+        return [usecaseFilter, inputFilter];
     };
 
     renderFooterFilters = () => {
@@ -256,17 +257,12 @@ export default class LocalitiesDemo extends Component {
 
     render() {
         const { localities, error } = this.state;
-        const { noheader } = this.props;
-        const headerLabels = {
-            title: tr('Localities API'),
-            desc: tr(
-                'Offer autocomplete on city names, suburb names, postcodes and full addresses in some countries. Accelerate customer journey by searching on full words as well as substrings, with high flexibility on typos.'
-            ),
-        };
+        const { noheader, headerLabels, subHeader } = this.props;
         return (
             <Demo
                 id="localities-demo"
                 header={headerLabels}
+                subHeader={subHeader}
                 docLink="https://developers.woosmap.com/products/localities/get-started/"
                 className="demo--localities"
                 footerFilters={this.renderFooterFilters()}
@@ -285,7 +281,13 @@ export default class LocalitiesDemo extends Component {
 
 LocalitiesDemo.defaultProps = {
     noheader: false,
+    headerLabels: {},
+    usecaseFilter: null,
+    subHeader: null,
 };
 LocalitiesDemo.propTypes = {
     noheader: PropTypes.bool,
+    headerLabels: PropTypes.object,
+    usecaseFilter: PropTypes.object,
+    subHeader: PropTypes.object,
 };

package/src/components/Demo/MapDemo.js

@@ -42,7 +42,7 @@ export default class MapDemo extends Component {
             styleColor = `
         {featureType: "all", stylers:[{"saturation": -100, "lightness": -30}]},`;
         }
-        if (style === 'lighgrey') {
+        if (style === 'lightgrey') {
             styleColor = `
         {featureType: "all", stylers:[{"saturation": -100}]},`;
         }
@@ -145,7 +145,7 @@ storesOverlay.setMap(map);
     renderFooterFilters = () => {
         const { hasStores, hasPois } = this.state;
         const filterPois = {
-            label: tr('Display Map Pois'),
+            label: tr('Display Map POIs'),
             component: (
                 <Input
                     type="checkbox"

package/src/components/Demo/MerchantDemo.js

@@ -234,12 +234,10 @@ export default class MerchantDemo extends Component {
         if (!transaction) {
             return JSON.stringify(
                 {
-                    merchants: [
-                        request.merchants.map((item) => ({
-                            dirty_name: item.dirty_name,
-                            country: item.country,
-                        })),
-                    ],
+                    merchants: request.merchants.map((item) => ({
+                        dirty_name: item.dirty_name,
+                        country: item.country,
+                    })),
                 },
                 null,
                 2

package/src/components/Demo/SearchDemo.js

@@ -314,7 +314,7 @@ export default class SearchDemo extends Component {
         const { data, error } = this.state;
         const { noheader } = this.props;
         const headerLabels = {
-            title: tr('Search API'),
+            title: tr('Store Search API'),
             desc: tr(
                 'Search among your own Points of Interest. Find stores by geography, by attributes or by autocomplete on store names.'
             ),

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

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import DistanceDemo from './DistanceDemo';
 import GeolocationDemo from './GeolocationDemo';
-import LocalitiesDemo from './LocalitiesDemo';
+import LocalitiesDemo from './LocalitiesAllDemo';
 import MerchantDemo from './MerchantDemo';
+import MapDemo from './MapDemo';
 import SearchDemo from './SearchDemo';
 import { changeLanguage } from '../utils/locale';
 import TrackEventContext from '../utils/TrackEventContext';
@@ -35,6 +36,7 @@ class IframeCommunication extends Component {
                         'geolocation-demo': document.getElementById('geolocation-demo').offsetTop,
                         'search-demo': document.getElementById('search-demo').offsetTop,
                         'distance-demo': document.getElementById('distance-demo').offsetTop,
+                        'map-demo': document.getElementById('map-demo').offsetTop,
                     },
                     '*'
                 );
@@ -62,9 +64,10 @@ const Template = () => {
         <div>
             <TrackEventContext.Provider value={trackEvent}>
                 <LocalitiesDemo />
+                <SearchDemo />
                 <MerchantDemo />
+                <MapDemo />
                 <DistanceDemo />
-                <SearchDemo />
                 <GeolocationDemo />
                 <IframeCommunication />
             </TrackEventContext.Provider>
@@ -79,9 +82,10 @@ const TemplateEn = () => {
         <div>
             <TrackEventContext.Provider value={trackEvent}>
                 <LocalitiesDemo />
+                <SearchDemo />
                 <MerchantDemo />
+                <MapDemo />
                 <DistanceDemo />
-                <SearchDemo />
                 <GeolocationDemo />
                 <IframeCommunication />
             </TrackEventContext.Provider>