homeflowjs 0.7.13 → 0.7.17

package/__tests__/instant-valuation.test.jsx

@@ -61,7 +61,7 @@ describe('Instant Valuation', () => {
       }),
     );
 
-    const message = await screen.findByText('Please fill out the required fields');
+    const message = await screen.getByText('Please fill out the required fields');
     expect(message).toBeInTheDocument();
   });
 });

package/actions/properties.actions.js

@@ -91,6 +91,11 @@ export const setPropertyLinksAsync = () => (dispatch) => {
     });
 };
 
+export const setProperty = (payload) => ({
+  type: PropertiesActionTypes.SET_PROPERTY,
+  payload,
+});
+
 export const setProperties = (payload) => ({
   type: PropertiesActionTypes.SET_PROPERTIES,
   payload,

package/actions/properties.actions.test.js

@@ -0,0 +1,13 @@
+import store from '../store';
+import * as actions from './properties.actions';
+
+describe('Properties action creators', () => {
+  it('creates correct action for setProperty', () => {
+    const expectedAction = {
+      type: 'SET_PROPERTY',
+      payload: { property_ref: 'ABC123', postcode: 'AB1 1AA' },
+    };
+
+    expect(actions.setProperty({ property_ref: 'ABC123', postcode: 'AB1 1AA' })).toEqual(expectedAction);
+  });
+});

package/actions/properties.types.js

@@ -1,4 +1,5 @@
 const PropertiesActionTypes = {
+  SET_PROPERTY: 'SET_PROPERTY',
   SET_PROPERTIES: 'SET_PROPERTIES',
   TOGGLE_SAVED_PROPERTY: 'TOGGLE_SAVED_PROPERTY',
   SET_SAVED_PROPERTIES: 'SET_SAVED_PROPERTIES',

package/actions/user.actions.js

@@ -3,7 +3,7 @@ import { fetchSavedProperties, setSavedProperties } from './properties.actions';
 import { fetchSavedSearches, setSavedSearches } from './search.actions';
 import { setLoading } from './app.actions';
 import { INITIAL_USER_DATA } from '../reducers/user.reducer';
-import { objectDiff } from '../utils';
+import { objectDiff, compact } from '../utils';
 
 export const setCurrentUser = (payload) => ({
   type: UserActionTypes.SET_CURRENT_USER,
@@ -33,10 +33,10 @@ export const fetchUser = () => (dispatch) => {
         const serializedSavedProperties = localStorage.getItem('savedProperties');
 
         if (serializedSavedSearches) {
-          dispatch(setSavedSearches(JSON.parse(serializedSavedSearches)));
+          dispatch(setSavedSearches(compact(JSON.parse(serializedSavedSearches))));
         }
         if (serializedSavedProperties) {
-          dispatch(setSavedProperties(JSON.parse(serializedSavedProperties)));
+          dispatch(setSavedProperties(compact(JSON.parse(serializedSavedProperties))));
         }
       }
 

package/actions/user.actions.test.js

@@ -1,3 +1,4 @@
+import store from '../store';
 import * as actions from './user.actions';
 
 describe('user action creators', () => {

package/app/notify.js

@@ -1,12 +1,12 @@
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
+import { sanitizeText } from '../utils/index';
+
 const notify = (message, type, config = {}) => {
-  let color = '#28a745'; // default is success
+  if (!message) return;
 
-  if (type === 'error') {
-    color = '#dc3545';
-  }
+  const color = { error: '#dc3545' }[type] || '#28a745'; // default is success
 
   Toastify({
     duration: 3000,
@@ -14,8 +14,9 @@ const notify = (message, type, config = {}) => {
     gravity: 'top',
     position: 'center',
     stopOnFocus: true,
-    text: message,
-    backgroundColor: color,
+    text: sanitizeText(message),
+    escapeMarkup: false,
+    style: { background: color },
     ...config,
   }).showToast();
 };

package/bin/test

@@ -0,0 +1,6 @@
+#!/bin/sh
+dependencies="react react-dom react-redux react-router-dom redux"
+
+yarn link ${dependencies} >/dev/null && echo 'Linked peer dependencies.'
+jest $@
+yarn unlink ${dependencies} >/dev/null && echo 'Unlinked peer dependencies.'

package/cookie-consent/cookie-consent.js

@@ -27,7 +27,7 @@ const initCookieConsent = () => {
             });
         }
 
-        fetch('ajax-events/logs', {
+        fetch('/ajax-events/logs', {
           method: 'POST',
           body: JSON.stringify({ 'cookie-consent': status }),
         });

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "homeflowjs",
-  "version": "0.7.13",
+  "version": "0.7.17",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {
-    "test": "jest"
+    "test": "bin/test"
   },
   "author": "",
   "license": "ISC",
@@ -39,6 +39,7 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-redux": "^7.2.1",
+    "react-router-dom": "^6.0.2",
     "redux": "^4.0.5"
   },
   "devDependencies": {
@@ -49,6 +50,7 @@
     "babel-jest": "^26.6.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
+    "es-abstract": "^1.19.1",
     "eslint": "^7.18.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-airbnb-base": "^14.2.1",

package/properties/properties-grid/properties-grid.component.jsx

@@ -24,21 +24,17 @@ const PropertiesGrid = ({ properties, GridItem, infiniteScroll }) => {
     );
   }
 
-  const items = propertiesByPage(properties).map((page) => (
-    <div
-      data-result-page={page[0].resultPage}
-      key={uniqueKey()}
-      className="clearfix results-page--grid"
-    >
-      {page.map((property) => (
-        <GridItem key={property.property_id} property={property} />
-      ))}
-    </div>
-  ));
+  const items = propertiesByPage(properties).map((page) =>
+    page.map((property) => (
+      <GridItem key={property.property_id} property={property} />
+    )
+  )).flat();
 
   return (
     <div className="hf-property-results hf-property-results__list">
-      {items}
+      <div className="clearfix results-page--grid">
+        {items}
+      </div>
     </div>
   );
 };

package/properties/sort-order-select/sort-order-select.component.jsx

@@ -20,7 +20,7 @@ const SortOrderSelect = (props) => {
 
   if (reactSelect) {
     const handleChange = ({ value }) => {
-      const newSearch = { ...search, page: null };
+      const newSearch = { ...search };
       newSearch.sorted = value;
 
       propertySearch(newSearch);
@@ -49,7 +49,7 @@ const SortOrderSelect = (props) => {
   }
 
   const handleChange = (e) => {
-    const newSearch = { ...search, page: null };
+    const newSearch = { ...search };
     newSearch.sorted = e.target.value;
 
     propertySearch(newSearch);

package/properties/stamp-duty-calculator/default-calculator.component.jsx

@@ -10,6 +10,7 @@ const DefaultCalculator = ({ purchasePrice, setPurchasePrice }) => {
   const [rate2, setRate2] = useState();
   const [rate3, setRate3] = useState();
   const [rate4, setRate4] = useState();
+  const [rate5, setRate5] = useState();
 
   const calculateStampDuty = (price) => {
     if (!price) {
@@ -17,6 +18,7 @@ const DefaultCalculator = ({ purchasePrice, setPurchasePrice }) => {
       setRate2(0);
       setRate3(0);
       setRate4(0);
+      setRate5(0);
       setTotalRate(0);
       setEffectiveRate(Math.round(0));
 
@@ -29,29 +31,38 @@ const DefaultCalculator = ({ purchasePrice, setPurchasePrice }) => {
     let rate2 = 0;
     let rate3 = 0;
     let rate4 = 0;
+    let rate5 = 0;
 
-    if (price - 500000 > 0) {
-      rate2 = (price - 500000);
-      rate2 *= 0.05;
-      if (rate2 > 425000 * 0.05) {
-        rate2 = 425000 * 0.05;
+    if (price - 125000 > 0) {
+      rate2 = (price - 125000);
+      rate2 *= 0.02;
+      if (rate2 > 125000 * 0.02) {
+        rate2 = 125000 * 0.02;
+      }
+    }
+
+    if (price - 250000 > 0) {
+      rate3 = (price - 250000);
+      rate3 *= 0.05;
+      if (rate3 > 675000 * 0.05) {
+        rate3 = 675000 * 0.05;
       }
     }
 
     if (price - 925000 > 0) {
-      rate3 = (price - 925000);
-      rate3 *= 0.10;
-      if (rate3 > 575000 * 0.10) {
-        rate3 = 575000 * 0.10;
+      rate4 = (price - 925000);
+      rate4 *= 0.10;
+      if (rate4 > 575000 * 0.10) {
+        rate4 = 575000 * 0.10;
       }
     }
 
     if (price - 1500000 > 0) {
-      rate4 = (price - 1500000);
-      rate4 *= 0.12;
+      rate5 = (price - 1500000);
+      rate5 *= 0.12;
     }
 
-    totalRate = rate1 + rate2 + rate3 + rate4;
+    totalRate = rate1 + rate2 + rate3 + rate4 + rate5;
     effectiveRate = totalRate / price;
     effectiveRate *= 100;
 
@@ -59,6 +70,7 @@ const DefaultCalculator = ({ purchasePrice, setPurchasePrice }) => {
     setRate2(rate2);
     setRate3(rate3);
     setRate4(rate4);
+    setRate5(rate5);
     setTotalRate(totalRate);
     setEffectiveRate(Math.round(effectiveRate * 10) / 10);
 
@@ -128,7 +140,7 @@ const DefaultCalculator = ({ purchasePrice, setPurchasePrice }) => {
             </thead>
             <tbody>
               <tr>
-                <td>Between £0 and £500,000</td>
+                <td>Between £0 and £125,000</td>
                 <td> 0% </td>
                 <td className="rate1">
                   £
@@ -136,29 +148,37 @@ const DefaultCalculator = ({ purchasePrice, setPurchasePrice }) => {
                 </td>
               </tr>
               <tr>
-                <td>Between £500,000 and £925,000</td>
-                <td> 5% </td>
+                <td>Between £125,000 and £250,000</td>
+                <td> 2% </td>
                 <td className="rate2">
                   £
                   {Number(rate2).toLocaleString()}
                 </td>
               </tr>
               <tr>
-                <td>Between £925,000 and £1,500,000 </td>
-                <td> 10% </td>
+                <td>Between £250,000 and £925,000</td>
+                <td> 5% </td>
                 <td className="rate3">
                   £
                   {Number(rate3).toLocaleString()}
                 </td>
               </tr>
               <tr>
-                <td>Over £1,500,000 </td>
-                <td> 12% </td>
+                <td>Between £925,000 and £1,500,000 </td>
+                <td> 10% </td>
                 <td className="rate4">
                   £
                   {Number(rate4).toLocaleString()}
                 </td>
               </tr>
+              <tr>
+                <td>Over £1,500,000 </td>
+                <td> 12% </td>
+                <td className="rate5">
+                  £
+                  {Number(rate5).toLocaleString()}
+                </td>
+              </tr>
               <tr className="totals">
                 <td>Total</td>
                 <td className="effectiveRate">

package/reducers/properties.reducer.js

@@ -12,10 +12,15 @@ const INITIAL_STATE = {
 
 const propertiesReducer = (state = INITIAL_STATE, action) => {
   switch (action.type) {
+    case PropertiesActionTypes.SET_PROPERTY:
+      return {
+        ...state,
+        property: action.payload,
+      };
     case PropertiesActionTypes.SET_PROPERTIES:
       return {
         ...state,
-        properties: action.payload
+        properties: action.payload,
       };
     case PropertiesActionTypes.SET_PAGINATION:
       return {
@@ -52,7 +57,8 @@ const propertiesReducer = (state = INITIAL_STATE, action) => {
       } else {
         // need to find the property from the propertiesReducer and add it here
         const property = state.properties.find(({ property_id }) => property_id === propertyId);
-        newSavedProperties.push(property);
+
+        newSavedProperties.push(property || state.property);
 
         if (!action.payload.userLoggedIn) {
           localStorage.setItem('savedProperties', JSON.stringify(newSavedProperties));

package/reducers/properties.reducer.test.js

@@ -35,4 +35,20 @@ describe('propertiesReducer', () => {
 
     expect(reducedState.savedProperties.length).toEqual(0);
   });
+
+  it('Sets the current property when it receives the SET_PROPERTY action', () => {
+    const property = { id: '123456789', property_ref: 'ABC12345', postcode: 'AB1 1AA' };
+    const state = { properties: [], savedProperties: [], pagination: {}, propertyLinks: { next: '', previous: '' } };
+    const reducedState = propertiesReducer(state, { type: 'SET_PROPERTY', payload: property });
+
+    expect(reducedState.property).toEqual(property);
+  });
+
+  it('Retains initial state when it receives the SET_PROPERTY action', () => {
+    const property = { id: '123456789', property_ref: 'ABC12345', postcode: 'AB1 1AA' };
+    const state = { properties: [], savedProperties: [], pagination: {}, propertyLinks: { next: '', previous: '' } };
+    const reducedState = propertiesReducer(state, { type: 'SET_PROPERTY', payload: property });
+
+    expect(reducedState).toMatchObject(state);
+  });
 });

package/search/location-input/location-input.test.js

@@ -8,7 +8,7 @@ describe('LocationInput', () => {
   it('renders the component', () => {
     const testProps = {
       suggestions: [],
-      q: '',
+      search: { q: '' },
       setSuggestions: jest.fn(),
       setSearchField: jest.fn(),
     };

package/search/radius-select/radius-select.test.js

@@ -8,6 +8,7 @@ describe('RadiusSelect', () => {
     const testProps = {
       within: '5-miles',
       setSearchField: jest.fn(),
+      search: {},
     };
     render(<RadiusSelect { ...testProps } />);
     expect(screen.getByTestId('select')).toBeInTheDocument();

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

@@ -80,6 +80,7 @@ class SearchForm extends Component {
       setPlace,
       children,
       setInitialSearch,
+      submitCallback,
       ...otherProps
     } = this.props;
 

package/store.js

@@ -5,7 +5,8 @@ import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
 import rootReducer from './reducers';
 import { setThemePreferences, setThemeSettings, setAuthenticityToken } from './actions/app.actions';
 import { fetchUser } from './actions/user.actions';
-import { setProperties, setPagination, setPropertyLinksAsync } from './actions/properties.actions';
+import { setProperties, setPagination, setProperty, setPropertyLinksAsync } from './actions/properties.actions';
+// import { fetchCompanyPreferences } from './actions/company-preferences.actions';
 // import { fetchCompanyPreferences } from './actions/company-preferences.actions';
 
 const middleware = [thunk];
@@ -29,6 +30,7 @@ window.addEventListener('DOMContentLoaded', () => {
 // TODO: This should use data set inline for use setCompanyPreferences.
 // store.dispatch(fetchCompanyPreferences());
 
+store.dispatch(setProperty(Homeflow.get('property')));
 store.dispatch(setProperties(Homeflow.get('properties')));
 store.dispatch(setPagination(Homeflow.get('pagination')));
 store.dispatch(setThemePreferences(Homeflow.get('theme_preferences')));

package/user/index.js

@@ -6,12 +6,14 @@ import SignInInput from './user-sign-in-form/sign-in-input.component';
 import SignOutButton from './sign-out-button/sign-out-button.component';
 import MarketingPreferencesForm from './marketing-preferences-form/marketing-preferences-form.component';
 import ForgottenPasswordForm from './forgotten-password-form/forgotten-password-form.component';
+import UserEditForm from './user-edit-form/user-edit-form.component';
 
 export {
   withUser,
   UserRegisterForm,
   UserInput,
   UserSignInForm,
+  UserEditForm,
   SignInInput,
   SignOutButton,
   MarketingPreferencesForm,

package/utils/index.js

@@ -79,3 +79,7 @@ export const objectDiff = (oldObject, newObject) => {
 
   return changed;
 }
+
+export const compact = (array) => array.filter(item => typeof item !== 'undefined' && item !== null);
+
+export const sanitizeText = (string) => new Option(string).innerHTML;

package/utils/index.test.js

@@ -0,0 +1,21 @@
+import * as utils from './index';
+
+describe('compact', () => {
+  it('removes null elements from array', () => {
+    expect(utils.compact([1, null, 2, 3, null, 4, null, 5])).toEqual([1, 2, 3, 4, 5]);
+  });
+
+  it('removes undefined elements from array', () => {
+    expect(utils.compact([1, undefined, 2, 3, undefined, 4, undefined, 5])).toEqual([1, 2, 3, 4, 5]);
+  });
+});
+
+describe('sanitizeText', () => {
+  it('converts < and > to &lt; and &gt;', () => {
+    expect(utils.sanitizeText('<hello>')).toEqual('&lt;hello&gt;');
+  });
+
+  it('converts & to &amp;', () => {
+    expect(utils.sanitizeText('<hello>')).toEqual('&lt;hello&gt;');
+  });
+});