homeflowjs 1.0.14 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/search/address-lookup-input/address-lookup-input.component.jsx

@@ -0,0 +1,205 @@
+import React, {
+  useState, useEffect, useRef, useCallback,
+} from 'react';
+import PropTypes from 'prop-types';
+import debounce from 'lodash.debounce';
+import Input from './input';
+
+const DEFAULT_ADDRESS = {
+  value: {},
+  error: null,
+};
+
+const AddressLookupInput = ({
+  label,
+  placeholder,
+  className,
+  name,
+  required,
+  setSelectedAddress,
+}) => {
+  const [locationQuery, setLocationQuery] = useState('');
+  const [suggestions, setSuggestions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [address, setAddress] = useState(DEFAULT_ADDRESS);
+
+  const addressLookup = (value) => {
+    setLoading(true);
+    // If no value or is loading just hide suggestions
+    if (!value || loading) setSuggestions([]);
+
+    fetch(`/address_lookup?autocomplete=${value}`)
+      .then(response => response.json())
+      .then((json) => {
+        if (json.suggestions.length === 0) {
+          setAddress({
+            value: address.value,
+            error: 'Sorry we couldn\'t find that address',
+          });
+        }
+        if (json.suggestions.length !== 0) {
+          setAddress({
+            value: address.value,
+            error: null,
+          });
+          setSuggestions(json.suggestions);
+        }
+        setLoading(false);
+      });
+  };
+
+  const debouncedAddressLookup = useCallback(debounce(addressLookup, 500), []);
+
+  const handleQueryChange = (e) => {
+    const { value } = e.target;
+
+    setLocationQuery(value);
+    debouncedAddressLookup(value);
+  };
+
+  const handleAddressSelect = (id, address) => {
+    fetch(`/address_lookup?id=${id}`)
+      .then(response => response.json())
+      .then((json) => {
+        setLocationQuery(address);
+        setAddress({
+          value: json,
+          error: null,
+        });
+        if (setSelectedAddress) {
+          setSelectedAddress(json);
+        }
+        setLoading(false);
+      });
+  };
+
+  // This handles triggering the search
+  const clearSearch = () => {
+    setLocationQuery('');
+    setSuggestions([]);
+    setAddress({
+      value: {},
+      error: null,
+    });
+  };
+
+  // If there is an error remove suggestions
+  useEffect(() => {
+    if (address.error) setSuggestions([]);
+  }, [address.error]);
+
+
+  /**
+   * If loading setSuggestions to an empty array,
+   * this stops the suggestions updating sporadically
+   * as the user is entering a new query
+   */
+  useEffect(() => {
+    if (loading) setSuggestions([]);
+  }, [loading]);
+
+  /**
+   * This will clear the input and close our dropdown if the user click
+   * outside of the input, this was in its own hook but was causing a
+   * memory leak
+   */
+  const inputRef = useRef(null);
+  const [clickedOutSide, setClickedOutside] = useState(null);
+  const closeDropdown = () => {
+    if (Object.keys(address.value).length === 0 && !loading) {
+      setLocationQuery('');
+      setSuggestions([]);
+    }
+  };
+  useEffect(() => {
+    // If clicked on outside of element
+    const handleClickOutside = (event) => {
+      /**
+       * Check if the user has clicked outside of the component,
+       * close the dropdown. However,we only ever need to check
+       * this once so setClickedOutside to true after
+       */
+      if (inputRef.current && !inputRef.current.contains(event.target) && !clickedOutSide) {
+        closeDropdown();
+        setClickedOutside(true);
+      }
+
+      // If the user clicks inside the component just set clickedOutSide to false
+      if (inputRef.current && inputRef.current.contains(event.target) && clickedOutSide) {
+        setClickedOutside(false);
+      }
+    };
+    // Bind the event listener
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [inputRef, clickedOutSide]);
+
+  return (
+    <div className="address-lookup-input" ref={inputRef}>
+      <Input
+        id="address-lookup-input"
+        name={name}
+        data-key="address_lookup"
+        label={label}
+        placeholder={loading ? 'Loading...' : placeholder}
+        value={locationQuery}
+        onChange={handleQueryChange}
+        onClear={clearSearch}
+        address={address}
+        loading={loading}
+        fullWidth
+        onDark={false}
+        required={required}
+        className={className}
+        // autoComplete false won't in chrome but if we set it to some random value it will work
+        autoComplete="nope"
+      />
+      {/* Render the search results  */}
+      {suggestions.length > 0 && (
+      <ul className="address-lookup-input__results">
+        {suggestions.map(({ address, id }) => (
+          <li
+            className="address-lookup-input__results-item"
+            key={id}
+          >
+            <button
+              type="button"
+              className="address-lookup-input__results-btn btn-unstyled"
+              onClick={() => {
+                handleAddressSelect(id, address);
+                setLoading(true);
+                setSuggestions([]);
+              }}
+            >
+              {address}
+            </button>
+          </li>
+        ))}
+      </ul>
+      )}
+    </div>
+  );
+};
+
+AddressLookupInput.propTypes = {
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  name: PropTypes.string,
+  required: PropTypes.bool,
+  className: PropTypes.string,
+  setSelectedAddress: PropTypes.func,
+};
+
+AddressLookupInput.defaultProps = {
+  label: '',
+  placeholder: 'Enter postcode or address',
+  name: 'formatted_address',
+  required: false,
+  className: '',
+  setSelectedAddress: null,
+};
+
+export default AddressLookupInput;

package/search/address-lookup-input/clear-button.component.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SearchIcon from '../../shared/search-icon.component';
+import CloseIcon from '../../shared/close-icon.component';
+import LoadingIcon from '../../shared/loading-icon.component';
+
+const ClearButton = ({ address, loading, onClear }) => (
+  <button
+    type="button"
+    className="address-lookup-input__btn btn-unstyled"
+    onClick={onClear}
+    // Disable the button if there is no address
+    disabled={Object.keys(address.value).length === 0}
+  >
+    {Object.keys(address.value).length === 0 && !loading && (
+      <SearchIcon />
+    )}
+    {Object.keys(address.value).length !== 0 && !loading && (
+    <CloseIcon />
+    )}
+    {loading && (
+    <LoadingIcon />
+    )}
+  </button>
+);
+
+ClearButton.propTypes = {
+  address: PropTypes.object.isRequired,
+  loading: PropTypes.bool.isRequired,
+  onClear: PropTypes.func.isRequired,
+};
+
+export default ClearButton;

package/search/address-lookup-input/input.jsx

@@ -0,0 +1,88 @@
+/* eslint-disable jsx-a11y/label-has-for */
+import React from 'react';
+import PropTypes from 'prop-types';
+import ClearButton from './clear-button.component';
+
+const Input = ({
+  type,
+  id,
+  name,
+  label,
+  value,
+  onChange,
+  onClear,
+  placeholder,
+  address,
+  fullWidth,
+  onDark,
+  iconLeft,
+  iconRight,
+  disabled,
+  className,
+  required,
+  loading,
+  ...other
+}) => (
+  <div className={`input ${address?.error ? 'input--error' : ''} ${fullWidth ? 'input--full-width' : ''} ${onDark ? 'input--on-dark' : ''}`}>
+    {label && (
+    <label className="input__label" htmlFor={id}>{label}</label>
+    )}
+    <div className="input__wrapper">
+      {iconLeft}
+      <input
+        type={type}
+        className={`input__input ${className || ''}`}
+        placeholder={placeholder}
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        required={required}
+        {...other}
+      />
+      <ClearButton address={address} loading={loading} onClear={onClear} />
+    </div>
+    {address?.error && typeof (address.error) === 'string' && (
+      <span className="input__error">{address.error}</span>
+    )}
+  </div>
+);
+
+Input.propTypes = {
+  type: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  value: PropTypes.any.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onClear: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  address: PropTypes.object.isRequired,
+  fullWidth: PropTypes.bool,
+  onDark: PropTypes.bool,
+  iconLeft: PropTypes.node,
+  iconRight: PropTypes.node,
+  loading: PropTypes.bool.isRequired,
+  disabled: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+  ]),
+  className: PropTypes.string,
+  required: PropTypes.bool,
+};
+
+Input.defaultProps = {
+  type: 'text',
+  label: '',
+  placeholder: '',
+  fullWidth: false,
+  onDark: true,
+  iconLeft: null,
+  iconRight: null,
+  disabled: false,
+  className: '',
+  required: false,
+};
+
+export default Input;

package/search/index.js

@@ -1,5 +1,6 @@
 import SearchForm from './search-form/search-form.component';
 import LocationInput from './location-input/location-input.component';
+import AddressLookupInput from './address-lookup-input/address-lookup-input.component';
 import BedroomsSelect from './bedrooms-select/bedrooms-select.component';
 import ChannelRadioButton from './channel-radio-button/channel-radio-button.component';
 import PriceSelect from './price-select/price-select.component';
@@ -17,6 +18,7 @@ import generateSearchDescription from './saved-search/generate-description';
 export {
   SearchForm,
   LocationInput,
+  AddressLookupInput,
   BedroomsSelect,
   ChannelRadioButton,
   PriceSelect,

package/shared/close-icon.component.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const CloseIcon = () => (
+  <svg role="img" xmlns="http://www.w3.org/2000/svg" width="20.52" height="20.52" viewBox="0 0 20.52 20.52">
+    <title>Close Icon</title>
+    <g transform="translate(-336.011 -145.97)">
+      <line x2="19.459" y2="19.459" transform="translate(336.541 146.5)" fill="none" stroke="inherit" strokeWidth="1.5" />
+      <line x1="19.459" y2="19.459" transform="translate(336.541 146.5)" fill="none" stroke="inherit" strokeWidth="1.5" />
+    </g>
+  </svg>
+);
+
+export default CloseIcon;

package/shared/loading-icon.component.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const LoadingIcon = () => (
+  <svg role="img" className="loading-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Loading Icon</title>
+    <path d="M23 4V10H17" stroke="inherit" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M20.49 15C19.84 16.8399 18.6096 18.4187 16.9842 19.4985C15.3588 20.5783 13.4265 21.1006 11.4784 20.9866C9.53038 20.8726 7.67216 20.1286 6.18376 18.8667C4.69536 17.6047 3.65743 15.8932 3.22637 13.9901C2.79531 12.0869 2.99448 10.0952 3.79386 8.31508C4.59325 6.53496 5.94954 5.06288 7.65836 4.12065C9.36717 3.17843 11.3359 2.81711 13.268 3.09116C15.2 3.3652 16.9906 4.25975 18.37 5.64001L23 10" stroke="inherit" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export default LoadingIcon;

package/shared/search-icon.component.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SearchIcon = ({ inherit }) => (
+  <svg role="img" xmlns="http://www.w3.org/2000/svg" width="15.97" height="14.197" viewBox="0 0 15.97 14.197">
+    <title>Search Icon</title>
+    <g transform="translate(-1033.533 -21.389)">
+      <g transform="translate(1033.533 21.389)" fill="none" stroke={`${inherit ? 'inherit' : '#fff'}`} strokeWidth="1.5">
+        <ellipse cx="6.805" cy="6.806" rx="6.805" ry="6.806" stroke="none" />
+        <ellipse cx="6.805" cy="6.806" rx="6.055" ry="6.056" fill="none" />
+      </g>
+      <line x1="3.781" y1="3.025" transform="translate(1045.254 31.976)" fill="none" stroke={`${inherit ? 'inherit' : '#fff'}`} strokeWidth="1.5" />
+    </g>
+  </svg>
+);
+
+SearchIcon.propTypes = {
+  inherit: PropTypes.bool,
+};
+
+SearchIcon.defaultProps = {
+  inherit: false,
+};
+
+export default SearchIcon;