homeflowjs 0.10.16 → 0.10.18

package/__tests__/instant-valuation.test.jsx

@@ -3,11 +3,14 @@
 import React from 'react';
 import { Router } from 'react-router-dom';
 import { createHashHistory } from 'history';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import {
+  render, screen, fireEvent, waitFor,
+} from '@testing-library/react';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 
 import InstantValuation from 'instant-valuation/instant-valuation/instant-valuation.component';
+import ResultStep from '../instant-valuation/result-step/result-step.component';
 
 const server = setupServer(
   rest.get('/address_lookup', (req, res, ctx) => (
@@ -65,3 +68,11 @@ describe('Instant Valuation', () => {
     expect(message).toBeInTheDocument();
   });
 });
+
+describe('Instant Valuation Results', () => {
+  it('renders error message if it can\'t provide an accurate valuation', () => {
+    render(<ResultStep valuation={{ price: null }} />);
+    const errorMessage = screen.getByTestId('valuation-error');
+    expect(errorMessage).toBeInTheDocument();
+  });
+});

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

@@ -1,22 +1,28 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { connect } from 'react-redux';
+import React, {
+  useState, useRef, useEffect, useCallback,
+} from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import Autosuggest from 'react-autosuggest';
+import debounce from 'lodash.debounce';
 import { setBranchesSearch } from '../../actions/branches.actions';
 
 const BranchesSearchInput = ({
-  branchesSearch,
-  setBranchesSearch,
   placeholder,
   isSelected,
   setIsSelected,
+  label,
+  isRequired,
 }) => {
+  const { branchesSearch } = useSelector((state) => state?.branches);
+  const dispatch = useDispatch();
   const [placeID, setPlaceID] = useState('');
   const [suggestions, setSuggestions] = useState([]);
+  const [inputFocused, setInputFocused] = useState(false);
 
   useEffect(() => {
     const searchedPlace = Homeflow.get('place');
-    if (searchedPlace) setBranchesSearch(searchedPlace.name);
+    if (searchedPlace) dispatch(setBranchesSearch(searchedPlace.name));
   }, []);
 
   /**
@@ -47,21 +53,53 @@ const BranchesSearchInput = ({
       setSuggestions(suggestions);
     });
 
+  const debouncedGetSuggestions = useCallback(debounce(getSuggestions, 300), []);
+
   const renderSuggestion = (suggestion) => (
     <span className="react-autosuggest_span">{suggestion}</span>
   );
 
+  const updateLabelState = (reason) => {
+    if (label && (reason === 'input-focused' || reason === 'input-changed')) {
+      setInputFocused(true);
+    }
+    return true;
+  };
+
+  /**
+   * this follows the autosuggest library class naming convention (bem)
+   */
+  const labelClasses = () => {
+    if (inputFocused || branchesSearch) {
+      return 'react-autosuggest__label react-autosuggest__label--focused';
+    }
+    return 'react-autosuggest__label';
+  };
+
   return (
     <>
       <input type="hidden" name="place_id" value={placeID} />
       <input type="hidden" name="location" value={branchesSearch} />
+
+      {label && (
+        <label
+          className={labelClasses()}
+          htmlFor="react-autosuggest__input"
+        >
+          {label}
+        </label>
+      )}
+
       <Autosuggest
         ref={inputEl}
         suggestions={suggestions}
-        onSuggestionsClearRequested={() => setSuggestions([])}
+        onSuggestionsClearRequested={() => {
+          setSuggestions([]);
+          if (label) setInputFocused(false);
+        }}
         onSuggestionsFetchRequested={({ value }) => {
-          setBranchesSearch(value);
-          getSuggestions(value);
+          dispatch(setBranchesSearch(value));
+          debouncedGetSuggestions(value);
         }}
         onSuggestionSelected={(_, { suggestion }) => {
           /**
@@ -69,17 +107,22 @@ const BranchesSearchInput = ({
            * countrywide themes, other themes will not use this.
            */
           if (setIsSelected) setIsSelected(false);
+          if (label) setInputFocused(true);
           return (
             setPlaceID(suggestion.place)
           );
         }}
         getSuggestionValue={(suggestion) => suggestion.label}
+        shouldRenderSuggestions={(_, reason) => updateLabelState(reason)}
         renderSuggestion={(suggestion) => renderSuggestion(suggestion.label)}
         inputProps={{
           placeholder,
+          name: 'react-autosuggest__input',
+          required: isRequired,
           value: branchesSearch,
+          // eslint-disable-next-line no-unused-vars
           onChange: (_, { newValue, method }) => {
-            setBranchesSearch(newValue);
+            dispatch(setBranchesSearch(newValue));
           },
         }}
         highlightFirstSuggestion
@@ -89,9 +132,9 @@ const BranchesSearchInput = ({
 };
 
 BranchesSearchInput.propTypes = {
-  branchesSearch: PropTypes.string.isRequired,
-  setBranchesSearch: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
+  label: PropTypes.string,
+  isRequired: PropTypes.bool,
   isSelected: PropTypes.oneOfType([
     PropTypes.bool,
     PropTypes.string,
@@ -104,19 +147,10 @@ BranchesSearchInput.propTypes = {
 
 BranchesSearchInput.defaultProps = {
   placeholder: '',
+  label: '',
   isSelected: '',
   setIsSelected: '',
+  isRequired: false,
 };
 
-const mapStateToProps = (state) => ({
-  branchesSearch: state.branches.branchesSearch,
-});
-
-const mapDispatchToProps = {
-  setBranchesSearch,
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(BranchesSearchInput);
+export default BranchesSearchInput;

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

@@ -15,6 +15,7 @@ import './instant-valuation.styles.scss';
 
 const INITIAL_STATE = {
   step: 1,
+  loading: false,
   addresses: [],
   message: null,
   similarProperties: [],
@@ -91,10 +92,11 @@ class InstantValuation extends Component {
   }
 
   getSimilarProperties() {
+    this.setState({ loading: true });
     const { search } = this.state;
     fetch(`/properties/similar_properties?bedrooms=${search.bedrooms}&postcode=${search.postcode}&channel=sales`)
       .then((response) => response.json())
-      .then((json) => this.setState({ similarProperties: json }));
+      .then((json) => this.setState({ similarProperties: json, loading: false }));
   }
 
   getRecentSales() {
@@ -108,6 +110,7 @@ class InstantValuation extends Component {
   }
 
   getValuation() {
+    this.setState({ loading: true });
     const { search, lead } = this.state;
     const { properties, ...restOfSearch } = search;
 
@@ -144,7 +147,11 @@ class InstantValuation extends Component {
       .then((json) => {
         this.getRecentSales()
           .then((recentSalesJson) => {
-            this.setState({ valuation: json, recentSales: recentSalesJson.recent_sales });
+            this.setState({
+              valuation: json,
+              recentSales: recentSalesJson.recent_sales,
+              loading: false,
+            });
 
             const event = new CustomEvent('formSubmission', {
               detail:  {
@@ -247,6 +254,7 @@ class InstantValuation extends Component {
       similarProperties,
       valuation,
       recentSales,
+      loading,
     } = this.state;
 
     const StepComponent = stepComponents[step];
@@ -290,6 +298,7 @@ class InstantValuation extends Component {
             recentSales={recentSales}
             reset={this.reset}
             setMessage={this.setMessage}
+            loading={loading}
           />}
         </div>
       </div>

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

@@ -15,7 +15,23 @@ const ResultStep = ({
   valuation,
   recentSales,
   reset,
+  loading,
 }) => {
+  if (!valuation.price) {
+    return (
+      <div data-testid="valuation-error" id="no_results">
+        <p>
+          Unfortunately we do not have enough data to give you an accurate valuation. Your local
+          {' '}
+          {companyName}
+          {' '}
+          property expert will be in touch to arrange an accurate valuation taking
+          into account improvements to your property, the local market and more.
+        </p>
+      </div>
+    );
+  }
+
   const [selectedChannel, setSelectedChannel] = useState('sales');
 
   useEffect(() => {
@@ -66,24 +82,10 @@ const ResultStep = ({
   const companyName = Homeflow.get('company_name');
   const gmapsKey = Homeflow.get('theme_preferences').google_maps_api_key;
 
-  if (!valuation) return <Loader className="hfjs-instant-val__loader" />;
+  if (!valuation || loading) return <Loader className="hfjs-instant-val__loader" />;
 
   const streetviewQuery = `size=900x900&location=${lead.full_address},${search.postcode}&key=${gmapsKey}`;
 
-  if (valuation.price === 0) {
-    return (
-      <div id="no_results">
-        <p>
-          Unfortunately we do not have enough data to give you an accurate valuation. Your local
-          {' '}
-          {companyName}
-          {' '}
-          property expert will be in touch to arrange an accurate valuation taking
-          into account improvements to your property, the local market and more.
-        </p>
-      </div>
-    );
-  }
 
   return (
     <div className="result-container">

package/instant-valuation/similar-properties-step/similar-properties-step.component.jsx

@@ -11,6 +11,7 @@ const SimilarPropertiesStep = ({
   getSimilarProperties,
   toggleSimilarProperty,
   reset,
+  loading,
 }) => {
   useEffect(() => {
     getSimilarProperties();
@@ -24,7 +25,7 @@ const SimilarPropertiesStep = ({
 
   const { properties: selectedProperties } = search;
 
-  if (!similarProperties.length) return <Loader className="hfjs-instant-val__loader" />;
+  if (!similarProperties.length || loading) return <Loader className="hfjs-instant-val__loader" />;
 
   return (
     <form id="similar-properties-form" onSubmit={handleSubmit}>

package/package.json

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

package/user/default-profile/account/register-form.component.jsx

@@ -27,7 +27,7 @@ const RegisterForm = ({ localUser, registering }) => (
       </div>
 
       <div className="profile-register-form__group">
-        <UserInput name="tel_home" required />
+        <UserInput name="tel_home" required pattern="^[+]?[0-9]{9,12}$" />
         <label htmlFor="user-input-tel_home" className={localUser.tel_home ? 'shrink' : ''}>Phone</label>
       </div>
 

package/user/default-profile/account/sign-in-form.component.jsx

@@ -10,7 +10,7 @@ const SignInForm = ({ userCredentials }) => (
   <UserSignInForm className="profile-sign-in">
     <fieldset>
       <div className="profile-sign-in__group">
-        <SignInInput name="email" required />
+        <SignInInput name="email" required type="email"/>
         <label htmlFor="sign-in-input-email" className={userCredentials.email ? 'shrink' : ''}>Email</label>
       </div>