homeflowjs 0.10.18 → 0.10.20

package/__tests__/instant-valuation.test.jsx

@@ -71,7 +71,7 @@ describe('Instant Valuation', () => {
 
 describe('Instant Valuation Results', () => {
   it('renders error message if it can\'t provide an accurate valuation', () => {
-    render(<ResultStep valuation={{ price: null }} />);
+    render(<ResultStep valuation={{ price: null }} getValuation={jest.fn} />);
     const errorMessage = screen.getByTestId('valuation-error');
     expect(errorMessage).toBeInTheDocument();
   });

package/branches/branches-search-form/branches-search-input.component.jsx

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import Autosuggest from 'react-autosuggest';
 import debounce from 'lodash.debounce';
 import { setBranchesSearch } from '../../actions/branches.actions';
+import { DEBOUNCE_DELAY } from '../../utils';
 
 const BranchesSearchInput = ({
   placeholder,
@@ -53,7 +54,7 @@ const BranchesSearchInput = ({
       setSuggestions(suggestions);
     });
 
-  const debouncedGetSuggestions = useCallback(debounce(getSuggestions, 300), []);
+  const debouncedGetSuggestions = useCallback(debounce(getSuggestions, DEBOUNCE_DELAY), []);
 
   const renderSuggestion = (suggestion) => (
     <span className="react-autosuggest_span">{suggestion}</span>

package/hooks/index.js

@@ -1,7 +1,9 @@
 import useDefaultSort from './use-default-sort.hook';
 import useGeolocate from './use-geolocate';
+import useOutsideClick from './use-outside-click';
 
 export {
   useDefaultSort,
   useGeolocate,
+  useOutsideClick,
 };

package/hooks/use-outside-click.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+const useOutsideClick = (ref, callback) => {
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        callback();
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, [ref]);
+  return ref;
+};
+
+export default useOutsideClick;

package/instant-valuation/instant-valuation/instant-valuation.component.jsx

@@ -10,6 +10,7 @@ import IntroStep from '../intro-step/intro-step.component';
 import YourDetailsStep from '../your-details-step/your-details-step.component';
 import SimilarPropertiesStep from '../similar-properties-step/similar-properties-step.component';
 import ResultStep from '../result-step/result-step.component';
+import { DEBOUNCE_DELAY } from '../../utils';
 
 import './instant-valuation.styles.scss';
 
@@ -82,7 +83,7 @@ class InstantValuation extends Component {
     this.getSimilarProperties = this.getSimilarProperties.bind(this);
     this.toggleSimilarProperty = this.toggleSimilarProperty.bind(this);
     this.getValuation = this.getValuation.bind(this);
-    this.addressLookup = debounce(this.addressLookup, 1000).bind(this);
+    this.addressLookup = debounce(this.addressLookup, DEBOUNCE_DELAY).bind(this);
     this.reset = this.reset.bind(this);
     this.setMessage = this.setMessage.bind(this);
   }

package/instant-valuation/result-step/result-step.component.jsx

@@ -17,6 +17,18 @@ const ResultStep = ({
   reset,
   loading,
 }) => {
+  const [selectedChannel, setSelectedChannel] = useState('sales');
+
+  useEffect(() => {
+    getValuation();
+  }, []);
+
+  useEffect(() => {
+    if (valuation) Homeflow.kickEvent('valuation_successful');
+  }, [valuation])
+
+  if (!valuation || loading) return <Loader className="hfjs-instant-val__loader" />;
+
   if (!valuation.price) {
     return (
       <div data-testid="valuation-error" id="no_results">
@@ -32,16 +44,6 @@ const ResultStep = ({
     );
   }
 
-  const [selectedChannel, setSelectedChannel] = useState('sales');
-
-  useEffect(() => {
-    getValuation();
-  }, []);
-
-  useEffect(() => {
-    if (valuation) Homeflow.kickEvent('valuation_successful');
-  }, [valuation])
-
   const formatPrice = (price) => (
     `£${Math.round(price)}${selectedChannel === 'lettings' ? '/month' : ''}`
       .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')
@@ -82,11 +84,8 @@ const ResultStep = ({
   const companyName = Homeflow.get('company_name');
   const gmapsKey = Homeflow.get('theme_preferences').google_maps_api_key;
 
-  if (!valuation || loading) return <Loader className="hfjs-instant-val__loader" />;
-
   const streetviewQuery = `size=900x900&location=${lead.full_address},${search.postcode}&key=${gmapsKey}`;
 
-
   return (
     <div className="result-container">
       <div className="inner-wrapper">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.10.18",
+  "version": "0.10.20",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {

package/search/location-input/location-input.component.jsx

@@ -6,6 +6,7 @@ import Autosuggest from 'react-autosuggest';
 
 import { setSuggestions, setSearchField } from '../../actions/search.actions';
 import propertySearch from '../property-search/property-search';
+import { DEBOUNCE_DELAY } from '../../utils';
 
 import { autosuggestTheme } from './location-input.styles';
 
@@ -15,7 +16,7 @@ class LocationInput extends Component {
 
     this.onLocationChange = this.onLocationChange.bind(this);
     // wait half a second after typing stops before fetching results
-    this.debouncedLoadSuggestions = debounce(this.loadSuggestions, 500);
+    this.debouncedLoadSuggestions = debounce(this.loadSuggestions, DEBOUNCE_DELAY);
   }
 
   onLocationChange(event, { newValue }) {

package/user/default-profile/user-profile/user-profile-modal.component.jsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { connect } from 'react-redux';
 import {
   HashRouter as Router,
   Route,
   Switch,
   NavLink,
+  useHistory
 } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
@@ -17,6 +18,7 @@ import ForgottenPassword from '../forgotten-password/forgotten-password.componen
 import SignOutButton from '../../sign-out-button/sign-out-button.component';
 import Loader from '../../../shared/loader.component';
 import { loadingStyles } from '../../../modal/modal.component';
+import useOutsideClick from '../../../hooks/use-outside-click';
 
 import './user-profile.styles.scss';
 
@@ -32,9 +34,17 @@ const UserProfileModal = ({ currentUser, loading }) => {
   }
 
   const logo = Homeflow.get('agency_logo');
+  const history = useHistory();
+  const ref = useRef();
+
+  const handleClickOutside = () => {
+    history.push('/')
+  };
+
+  useOutsideClick(ref, handleClickOutside);
 
   return (
-    <div className="user-profile hf-modal">
+    <div className="user-profile hf-modal" ref={ref}>
       <div className="user-profile__side">
         <img src={logo} alt="Logo" className="user-profile__agency-logo" />
 

package/utils/index.js

@@ -1,12 +1,12 @@
 export { default as stampDutyCalculator } from './stamp-duty-calculator/stamp-duty-calculator';
 
-export const capitalizeFirstLetter = str => (
+export const capitalizeFirstLetter = (str) => (
   str.charAt(0).toUpperCase() + str.slice(1)
-)
+);
 
-export const camelToSnakeCase = str => (
-  str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`)
-)
+export const camelToSnakeCase = (str) => (
+  str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)
+);
 
 export const isEmpty = (obj) => {
   for (const key in obj) {
@@ -16,9 +16,7 @@ export const isEmpty = (obj) => {
   return true;
 };
 
-export const numberWithCommas = (num) => {
-  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-}
+export const numberWithCommas = (num) => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 
 // TODO: DRY these two functions up
 export const findSavedSearchIndex = (savedSearches, search) => {
@@ -64,9 +62,7 @@ export const formatMoney = (num) => {
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };
 
-export const uniqueKey = () => {
-  return Math.random().toString(36).substring(7);
-};
+export const uniqueKey = () => Math.random().toString(36).substring(7);
 
 export const objectDiff = (oldObject, newObject) => {
   const changed = {};
@@ -78,8 +74,10 @@ export const objectDiff = (oldObject, newObject) => {
   }
 
   return changed;
-}
+};
 
-export const compact = (array) => array.filter(item => typeof item !== 'undefined' && item !== null);
+export const compact = (array) => array.filter((item) => typeof item !== 'undefined' && item !== null);
 
 export const sanitizeText = (string) => new Option(string).innerHTML;
+
+export const DEBOUNCE_DELAY = 200;