@woosmap/ui 4.220.10 → 4.220.13

package/src/components/Demo/LocalitiesUKAddressDemo.js

@@ -1,317 +1,294 @@
 /* eslint-disable */
 import axios from 'axios';
 import React, { Component } from 'react';
-import Demo from '@/components/Demo/SkeletonDemo';
-import LocalitiesAutocomplete from '@/components/Woosmap/LocalitiesAutocomplete';
-import Constants from '@/Constants';
-import { tr } from '@/components/utils/locale';
-import Input from '@/components/Input/Input'; 
+import { changeLanguage } from '../utils/locale';
+import Demo from './SkeletonDemo';
+import LocalitiesAutocomplete from '../Woosmap/LocalitiesAutocomplete';
+import Constants from '../../Constants';
+import { tr } from '../utils/locale';
+import Input from '../Input/Input';
 
 export default class LocalitiesDemo extends Component {
-  constructor(props) {
-    super(props);
-    const types = [
-      { label: tr("Localities"), value: "locality" },
-      { label: tr("Postal codes"), value: "postal_code" },
-      {
-        label: tr("Administrative areas (States, regions, ...)"),
-        value: "admin_level",
-      },
-      { label: tr("Airports"), value: "airport" },
-      { label: tr("Train stations"), value: "train_station" },
-      { label: tr("Metro stations"), value: "metro_station" },
-      { label: tr("Shopping centers"), value: "shopping" },
-      { label: tr("Museums"), value: "museum" },
-      { label: tr("Tourist attractions"), value: "tourist_attraction" },
-      { label: tr("Amusement parks"), value: "amusement_park" },
-      { label: tr("Art galleries"), value: "art_gallery" },
-      { label: tr("Zoos"), value: "zoo" },
-    ];
-    this.state = {
-      localities: null,
-      selectedLocality: null,
-      error: null,
-      input: "",
-      localitiesTypes: [{ label: "Address", value: "address" }],
-      countries: [
-        { label: "UK", value: "gb" },
-        { label: "JE", value: "je" },
-        { label: "GG", value: "gg" },
-        { label: "IM", value: "im" },
-      ],
-      language: "en",
-    };
-    this.types = types.map((item) => ({
-      label: item.label,
-      value: item.value,
-    }));
-    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();
-  }
-
-  componentDidMount() {
-    this.requestLocalities();
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  requestLocalities = () => {
-    axios
-      .get(this.requestUrl, {
-        params: this.getRequestparams(),
-      })
-      .then((response) => {
-        if (this.mounted) {
-          this.setState({
-            localities: response.data,
+    constructor(props) {
+        super(props);
+        const types = [
+            { label: tr('Localities'), value: 'locality' },
+            { label: tr('Postal codes'), value: 'postal_code' },
+            {
+                label: tr('Administrative areas (States, regions, ...)'),
+                value: 'admin_level',
+            },
+            { label: tr('Airports'), value: 'airport' },
+            { label: tr('Train stations'), value: 'train_station' },
+            { label: tr('Metro stations'), value: 'metro_station' },
+            { label: tr('Shopping centers'), value: 'shopping' },
+            { label: tr('Museums'), value: 'museum' },
+            { label: tr('Tourist attractions'), value: 'tourist_attraction' },
+            { label: tr('Amusement parks'), value: 'amusement_park' },
+            { label: tr('Art galleries'), value: 'art_gallery' },
+            { label: tr('Zoos'), value: 'zoo' },
+        ];
+        this.state = {
+            localities: null,
+            selectedLocality: null,
             error: null,
-          });
-        }
-      })
-      .catch((error) => {
-        const errorResult =
-          (error && error.response && error.response.data) || "Unhandled error";
-        this.setState({ error: errorResult });
-      });
-  };
-
-  requestLocalityDetails = (publicId) => {
-    axios
-      .get(this.requestDetailsUrl, {
-        params: {
-          public_id: publicId,
-          key: Constants.woosmapKey,
-          language: "en",
-        },
-      })
-      .then((response) => {
-        if (this.mounted) {
-          this.setState({
-            error: null,
-            selectedLocality: response.data.result,
-          });
-        }
-      })
-      .catch((error) => {
-        const errorResult =
-          (error && error.response && error.response.data) || "Unhandled error";
-        this.setState({ error: errorResult });
-      });
-  };
-
-  getRequestparams = () => {
-    const { input, language, localitiesTypes, countries, selectedLocality } =
-      this.state;
-    if (selectedLocality) {
-      return {
-        key: Constants.woosmapKey,
-        public_id: selectedLocality.public_id,
-      };
+            input: '',
+            localitiesTypes: [{ label: 'Address', value: 'address' }],
+            countries: [
+                { label: 'UK', value: 'gb' },
+                { label: 'JE', value: 'je' },
+                { label: 'GG', value: 'gg' },
+                { label: 'IM', value: 'im' },
+            ],
+            language: 'en',
+        };
+        this.types = types.map((item) => ({
+            label: item.label,
+            value: item.value,
+        }));
+        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();
     }
-    return {
-      key: Constants.woosmapKey,
-      input,
-      language,
-      types: localitiesTypes.map((item) => item.value).join("|"),
-      components: countries.map((item) => `country:${item.value}`).join("|"),
-    };
-  };
 
-  selectLocality = (locality) => {
-    if (locality) {
-      this.requestLocalityDetails(locality.public_id);
-    } else {
-      this.setState({
-        error: null,
-        selectedLocality: null,
-      });
+    componentDidMount() {
+        this.requestLocalities();
     }
-  };
 
-  getHighlightedLocalityDesc = (locality) => {
-    let { description } = locality;
-
-    if (
-      locality.matched_substrings &&
-      locality.matched_substrings.description
-    ) {
-      for (
-        let j = locality.matched_substrings.description.length - 1;
-        j >= 0;
-        j--
-      ) {
-        const match = locality.matched_substrings.description[j];
-        description = `${description.substring(
-          0,
-          match.offset,
-        )}<span class="localities-matched">${description.substring(
-          match.offset,
-          match.offset + match.length,
-        )}</span>${description.substring(match.offset + match.length)}`;
-      }
+    componentWillUnmount() {
+        this.mounted = false;
     }
-    // eslint-disable-next-line react/no-danger
-    return <div dangerouslySetInnerHTML={{ __html: description }} />;
-  };
 
-  renderHeaderFilters = () => {
-    const inputFilter = {
-      label: tr("Type in a UK address "),
-      component: (
-        <LocalitiesAutocomplete
-          inputRef={this.inputRef}
-          woosmapKey={Constants.woosmapKey}
-          placeholder="Type in an address"
-          defaultLocality={this.defaultOrigin}
-          language="en"
-          components="country:gb|country:je|country:gg|country:im"
-          types="address"
-          callback={this.selectLocality}
-        />
-      ),
+    requestLocalities = () => {
+        axios
+            .get(this.requestUrl, {
+                params: this.getRequestparams(),
+            })
+            .then((response) => {
+                if (this.mounted) {
+                    this.setState({
+                        localities: response.data,
+                        error: null,
+                    });
+                }
+            })
+            .catch((error) => {
+                const errorResult = (error && error.response && error.response.data) || 'Unhandled error';
+                this.setState({ error: errorResult });
+            });
     };
-    return [inputFilter];
-  };
 
-  renderFooterFilters = () => [];
+    requestLocalityDetails = (publicId) => {
+        axios
+            .get(this.requestDetailsUrl, {
+                params: {
+                    public_id: publicId,
+                    key: Constants.woosmapKey,
+                    language: 'en',
+                },
+            })
+            .then((response) => {
+                if (this.mounted) {
+                    this.setState({
+                        error: null,
+                        selectedLocality: response.data.result,
+                    });
+                }
+            })
+            .catch((error) => {
+                const errorResult = (error && error.response && error.response.data) || 'Unhandled error';
+                this.setState({ error: errorResult });
+            });
+    };
 
-  renderAddress = () => {
-    const { selectedLocality } = this.state;
-    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;
+    getRequestparams = () => {
+        const { input, language, localitiesTypes, countries, selectedLocality } = this.state;
+        if (selectedLocality) {
+            return {
+                key: Constants.woosmapKey,
+                public_id: selectedLocality.public_id,
+            };
         }
-        case "postal_code_suffix": {
-          postcode = `${postcode}-${component.long_name}`;
-          break;
-        }
-        case "locality":
-          locality = component.long_name;
-          break;
+        return {
+            key: Constants.woosmapKey,
+            input,
+            language,
+            types: localitiesTypes.map((item) => item.value).join('|'),
+            components: countries.map((item) => `country:${item.value}`).join('|'),
+        };
+    };
 
-        case "state": {
-          state = component.long_name;
-          break;
-        }
-        case "administrative_area_level_1": {
-          state = component.long_name;
-          break;
-        }
-        case "country": {
-          country = component.long_name;
-          break;
+    selectLocality = (locality) => {
+        if (locality) {
+            this.requestLocalityDetails(locality.public_id);
+        } else {
+            this.setState({
+                error: null,
+                selectedLocality: null,
+            });
         }
-        case "premise": {
-          shippingAddress2 = component.long_name;
-          break;
+    };
+
+    getHighlightedLocalityDesc = (locality) => {
+        let { description } = locality;
+
+        if (locality.matched_substrings && locality.matched_substrings.description) {
+            for (let j = locality.matched_substrings.description.length - 1; j >= 0; j--) {
+                const match = locality.matched_substrings.description[j];
+                description = `${description.substring(
+                    0,
+                    match.offset
+                )}<span class="localities-matched">${description.substring(
+                    match.offset,
+                    match.offset + match.length
+                )}</span>${description.substring(match.offset + match.length)}`;
+            }
         }
-        default:
-          break;
-      }
-    });
+        // eslint-disable-next-line react/no-danger
+        return <div dangerouslySetInnerHTML={{ __html: description }} />;
+    };
 
-    return (
-      <div className="demo--localities--uk__formcontainer">
-        {!hasComponents && (
-          // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-          <div
-            role="button"
-            className="overlay"
-            onClick={() => {
-              this.inputRef.current.focus();
-            }}
-          />
-        )}
-        <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={() => {}}
-          disabled
-        />
-        <div className="demo__input-container--inline">
-          <Input
-            className="fullw"
-            label="State/Province"
-            placeholder="State/Province"
-            value={state}
-            onChange={() => {}}
-          />
-          <Input
-            className="fullw"
-            label="Postal code"
-            placeholder="Postal code"
-            value={postcode}
-            onChange={() => {}}
-          />
-        </div>
-        <Input
-          label="Country/Region"
-          placeholder="Country/Region"
-          value={country}
-          onChange={() => {}}
-        />
-      </div>
-    );
-  };
+    renderHeaderFilters = () => {
+        const inputFilter = {
+            label: tr('Type in a UK address '),
+            component: (
+                <LocalitiesAutocomplete
+                    inputRef={this.inputRef}
+                    woosmapKey={Constants.woosmapKey}
+                    placeholder="Type in an address"
+                    defaultLocality={this.defaultOrigin}
+                    language="en"
+                    components="country:gb|country:je|country:gg|country:im"
+                    types="address"
+                    callback={this.selectLocality}
+                />
+            ),
+        };
+        return [inputFilter];
+    };
+
+    renderFooterFilters = () => [];
 
-  render() {
-    const { localities, error, selectedLocality } = this.state;
-    return (
-      <Demo
-        noheader
-        id="localities-demo-uk"
-        className="demo--localities--uk"
-        footerFilters={this.renderFooterFilters()}
-        headerFilters={this.renderHeaderFilters()}
-        request={selectedLocality ? this.requestDetailsUrl : this.requestUrl}
-        params={this.getRequestparams()}
-        referer="http://localhost/"
-        response={
-          error || selectedLocality ? { result: selectedLocality } : localities
+    renderAddress = () => {
+        const { selectedLocality } = this.state;
+        let addressComponents = [];
+        const hasComponents = selectedLocality && selectedLocality.address_components;
+        if (hasComponents) {
+            addressComponents = selectedLocality.address_components;
         }
-        result={this.renderAddress()}
-      />
-    );
-  }
+        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--localities--uk__formcontainer">
+                {!hasComponents && (
+                    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+                    <div
+                        role="button"
+                        className="overlay"
+                        onClick={() => {
+                            this.inputRef.current.focus();
+                        }}
+                    />
+                )}
+                <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={() => {}} disabled />
+                <div className="demo__input-container--inline">
+                    <Input
+                        className="fullw"
+                        label="State/Province"
+                        placeholder="State/Province"
+                        value={state}
+                        onChange={() => {}}
+                    />
+                    <Input
+                        className="fullw"
+                        label="Postal code"
+                        placeholder="Postal code"
+                        value={postcode}
+                        onChange={() => {}}
+                    />
+                </div>
+                <Input label="Country/Region" placeholder="Country/Region" value={country} onChange={() => {}} />
+            </div>
+        );
+    };
+
+    render() {
+        const { localities, error, selectedLocality } = this.state;
+        return (
+            <Demo
+                noheader
+                id="localities-demo-uk"
+                className="demo--localities--uk"
+                footerFilters={this.renderFooterFilters()}
+                headerFilters={this.renderHeaderFilters()}
+                request={selectedLocality ? this.requestDetailsUrl : this.requestUrl}
+                params={this.getRequestparams()}
+                referer="http://localhost/"
+                response={error || selectedLocality ? { result: selectedLocality } : localities}
+                result={this.renderAddress()}
+            />
+        );
+    }
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import LocalitiesUKAddressDemo from '@/components/Demo/LocalitiesUKAddressDemo';
+import LocalitiesUKAddressDemo from './LocalitiesUKAddressDemo';
 
 const Story = {
     title: 'demo/LocalitiesUKAddress',