homeflowjs 0.10.17 → 0.10.19

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 }} getValuation={jest.fn} />);
+    const errorMessage = screen.getByTestId('valuation-error');
+    expect(errorMessage).toBeInTheDocument();
+  });
+});

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,6 +15,7 @@ const ResultStep = ({
   valuation,
   recentSales,
   reset,
+  loading,
 }) => {
   const [selectedChannel, setSelectedChannel] = useState('sales');
 
@@ -26,6 +27,23 @@ const ResultStep = ({
     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">
+        <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 formatPrice = (price) => (
     `£${Math.round(price)}${selectedChannel === 'lettings' ? '/month' : ''}`
       .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')
@@ -66,25 +84,8 @@ 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" />;
-
   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">
       <div className="inner-wrapper">

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.17",
+  "version": "0.10.19",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {