homeflowjs 0.9.37 → 0.9.39

package/package.json

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

package/search/index.js

@@ -30,4 +30,4 @@ export {
   SaveSearchButton,
   SavedSearch,
   propertySearch,
-}
+};

package/search/price-select/default-price-label.js

@@ -0,0 +1,11 @@
+import { numberWithCommas } from '../../utils';
+const defaultPriceLabel = (price, channel, lettingsAs) => {
+  if (channel === 'lettings' && lettingsAs === 'pw') {
+    const pwPrice = Math.ceil(price / (52 / 12));
+    return `£${numberWithCommas(pwPrice)} pw (£${numberWithCommas(price)} pcm)`;
+  }
+
+  return `£${numberWithCommas(price)} ${channel === 'lettings' ? 'pcm' : ''}`;
+};
+
+export default defaultPriceLabel;

package/search/price-select/price-select.component.jsx

@@ -1,22 +1,14 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Select from 'react-dropdown';
 
 import 'react-dropdown/style.css';
 
-import { capitalizeFirstLetter, numberWithCommas } from '../../utils';
+import { capitalizeFirstLetter } from '../../utils';
 import { defaultSalesPrices, defaultLettingsPrices } from './default-prices';
 import { setSearchField } from '../../actions/search.actions';
-
-const priceLabel = (price, channel, lettingsAs) => {
-  if (channel === 'lettings' && lettingsAs === 'pw') {
-    const pwPrice = Math.ceil(price / (52 / 12));
-    return `£${numberWithCommas(pwPrice)} pw (£${numberWithCommas(price)} pcm)`;
-  }
-
-  return `£${numberWithCommas(price)} ${channel === 'lettings' ? 'pcm' : ''}`
-};
+import defaultPriceLabel from './default-price-label';
 
 const NormalSelect = ({
   type,
@@ -28,28 +20,34 @@ const NormalSelect = ({
   minPrice,
   maxPrice,
   ...otherProps
-}) => (
-  <select
-    name={`${type}Price`}
-    aria-label={`${type}-price`}
-    value={selectedPrice || ''}
-    onChange={e => setSearchField({
-      [e.target.name]: e.target.value ? parseInt(e.target.value) : null
-    })}
-    {...otherProps}
-  >
-    <option value="" title={`${type} price`}>{capitalizeFirstLetter(type)}. Price</option>
-    {prices.map(price => (
-      <option
-        key={price}
-        value={price}
-        title={price}
-      >
-        {priceLabel(price, channel, priceConfig.lettingsAs)}
+}) => {
+  const { priceLabel } = priceConfig;
+  return (
+    <select
+      name={`${type}Price`}
+      aria-label={`${type}-price`}
+      value={selectedPrice || ''}
+      onChange={e => setSearchField({
+        [e.target.name]: e.target.value ? parseInt(e.target.value) : null,
+      })}
+      {...otherProps}
+    >
+      <option value="" title={`${type} price`}>
+        {capitalizeFirstLetter(type)}
+        . Price
       </option>
-    ))}
-  </select>
-);
+      {prices.map(price => (
+        <option
+          key={price}
+          value={price}
+          title={price}
+        >
+          {priceLabel(price, channel, priceConfig.lettingsAs)}
+        </option>
+      ))}
+    </select>
+  );
+};
 
 const ReactSelect = (props) => {
   const {
@@ -63,6 +61,8 @@ const ReactSelect = (props) => {
     priceConfig,
   } = props;
 
+  const { priceLabel } = priceConfig;
+
   const priceOptions = prices.map(price => (
     { value: price, label: priceLabel(price, channel, priceConfig.lettingsAs) }
   ));
@@ -103,6 +103,25 @@ const PriceSelect = (props) => {
     lettingsPrices = defaultLettingsPrices,
   } = priceConfig;
 
+  /**
+   * If not on first render and the channel updates clear the min and
+   * and max prices in the redux store. This is to stop bugs when the
+   * uses changes between the sales and letting channels, as the minPrice
+   * and maxPrice in redux may be set to the wrong channel values. For
+   * example the user selects min and max prices the sales channel
+   * but then user updates the channel to lettings, the inputs look to
+   * have changed but the sales prices will still saved in the store.
+   * So thats why we need to clear them is the channel updates.
+   */
+  const [firstRender, setFirstRender] = useState(true);
+  useEffect(() => {
+    if (!firstRender) {
+      setSearchField({ minPrice: null });
+      setSearchField({ maxPrice: null });
+    }
+    setFirstRender(false);
+  }, [channel]);
+
   let prices = channel === 'sales' ? salesPrices : lettingsPrices;
 
   const selectedPrice = type === 'min' ? minPrice : maxPrice;
@@ -122,7 +141,7 @@ const PriceSelect = (props) => {
         selectedPrice={selectedPrice}
         {...props}
       />
-    )
+    );
   }
 
   return (
@@ -131,15 +150,9 @@ const PriceSelect = (props) => {
       selectedPrice={selectedPrice}
       {...props}
     />
-  )
+  );
 };
 
-// const priceConfig = {
-//   salesPrices: Homeflow.get('sales_prices'),
-//   salesPrices: Homeflow.get('lettings_prices'),
-//   lettingsAs: 'pw',
-// }
-
 PriceSelect.propTypes = {
   type: PropTypes.string.isRequired,
   channel: PropTypes.oneOf(['sales', 'lettings']).isRequired,
@@ -150,6 +163,7 @@ PriceSelect.propTypes = {
     salesPrices: PropTypes.array,
     lettingsPrices: PropTypes.array,
     lettingsAs: PropTypes.string,
+    priceLabel: PropTypes.func,
   }),
   lettingsAs: PropTypes.string,
   reactSelect: PropTypes.bool,
@@ -160,6 +174,7 @@ PriceSelect.defaultProps = {
     salesPrices: defaultSalesPrices,
     lettingsPrices: defaultLettingsPrices,
     lettingsAs: 'pcm',
+    priceLabel: defaultPriceLabel,
   },
 };
 

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
+import defaultPriceLabel from './default-price-label';
 
 import {
   TESTPriceSelect as PriceSelect,
@@ -39,6 +40,7 @@ describe('PriceSelect', () => {
       minPrice: 150000,
       priceConfig: {
         salesPrices: [50000, 100000, 150000, 200000],
+        priceLabel: defaultPriceLabel,
       }
     };
     const wrapper = mount(<PriceSelect {...testProps} />);
@@ -55,6 +57,7 @@ describe('PriceSelect', () => {
       maxPrice: 150000,
       priceConfig: {
         salesPrices: [50000, 100000, 150000, 200000],
+        priceLabel: defaultPriceLabel,
       },
     };
     const wrapper = mount(<PriceSelect {...testProps} />);
@@ -71,6 +74,7 @@ describe('PriceSelect', () => {
       maxPrice: 150000,
       priceConfig: {
         salesPrices: [50000, 100000, 150000, 200000],
+        priceLabel: defaultPriceLabel,
       },
     };
     const wrapper = mount(<PriceSelect {...testProps} />);

package/search/saved-search/saved-search.component.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-
+import Select from 'react-dropdown';
+import 'react-dropdown/style.css';
 import { removeSavedSearchAsync, updateSavedSearchAsync } from '../../actions/search.actions';
 import propertySearch from '../property-search/property-search';
 import notify from '../../app/notify';
@@ -20,15 +21,23 @@ const SavedSearch = (props) => {
     frequencyLabel,
     visitSearchLabel,
     removeSearchLabel,
+    reactSelect,
   } = props;
 
+  const options = [
+    { value: 'I', label: 'Immediately' },
+    { value: 'W', label: 'Weekly' },
+    { value: 'M', label: 'Monthly' },
+    { value: 'N', label: 'Never' },
+  ];
+
   const visitSearch = (e) => {
     e.preventDefault();
     propertySearch(search);
   };
 
-  const handleFrequencyChange = (e) => {
-    const newSearch = { ...search, alert_frequency: e.target.value };
+  const handleFrequencyChange = (value) => {
+    const newSearch = { ...search, alert_frequency: value };
     updateSavedSearchAsync(newSearch);
   };
 
@@ -45,16 +54,23 @@ const SavedSearch = (props) => {
         {userLoggedIn && (
           <>
             {frequencyLabel}
-            <select
-              className={`saved-search__frequency ${selectClass}`}
-              onChange={handleFrequencyChange}
-              value={search.alert_frequency}
-            >
-              <option value="I">Immediately</option>
-              <option value="W">Weekly</option>
-              <option value="M">Monthly</option>
-              <option value="N">Never</option>
-            </select>
+            {reactSelect ? (
+              <Select
+                className={selectClass}
+                options={options}
+                value={search.alert_frequency}
+                isSearchable={false}
+                onChange={({ value }) => handleFrequencyChange(value)}
+              />
+            ) : (
+              <select
+                className={`saved-search__frequency ${selectClass}`}
+                onChange={(e) => handleFrequencyChange(e.target.value)}
+                value={search.alert_frequency}
+              >
+                {options.map((option) => <option value={option.value}>{option.label}</option>)}
+              </select>
+            )}
           </>
         )}
 
@@ -90,6 +106,7 @@ SavedSearch.propTypes = {
   frequencyLabel: PropTypes.string,
   visitSearchLabel: PropTypes.string,
   removeSearchLabel: PropTypes.string,
+  reactSelect: PropTypes.bool,
 };
 
 SavedSearch.defaultProps = {
@@ -100,6 +117,7 @@ SavedSearch.defaultProps = {
   frequencyLabel: 'Email me matching properties:',
   visitSearchLabel: 'Visit',
   removeSearchLabel: 'Remove',
+  reactSelect: false,
 };
 
 const mapStateToProps = (state) => ({