homeflowjs 0.7.21 → 0.7.25

package/Jenkinsfile

@@ -8,7 +8,7 @@ pipeline {
   }
 
   options {
-      timeout(time: 6, unit: 'HOURS')
+    timeout(time: 6, unit: 'HOURS')
   }
 
   agent {
@@ -17,7 +17,8 @@ pipeline {
       image 'homeflowdev/rubydocker'
       args '-v /var/run/docker.sock:/var/run/docker.sock \
             -v /var/secrets:/var/secrets \
-            -v /var/secrets/npm/.npmrc:/root/.npmrc'
+            -v /home/deployer/.npmrc:/root/.npmrc \
+            -v /home/deployer/.ssh/:/root/.ssh'
     }
   }
 
@@ -25,7 +26,7 @@ pipeline {
     stage('Setup') {
       steps {
         sh 'yarn install'
-        sh 'npm install --global $(./bin/peer-dependencies -v) npm-cli-login'
+        sh 'npm install --global $(./bin/peer-dependencies -v)'
         sh 'for f in $(./bin/peer-dependencies); do (cd "/usr/lib/node_modules/${f}/" && yarn link); done'
       }
     }
@@ -38,9 +39,12 @@ pipeline {
 
     stage('Publish Verification') {
       when {
-        branch 'jenkin-publish'
-        triggeredBy 'BitBucketPushCause'
-        beforeInput true
+        branch 'master'
+
+        anyOf {
+          triggeredBy 'BitBucketPushCause'
+          triggeredBy 'UserIdCause'
+        }
       }
 
       steps {
@@ -61,9 +65,11 @@ pipeline {
       }
 
       steps {
-        sh 'set -ax; . /var/secrets/production/npm.env ; npm-cli-login'
+        sh 'git config --global user.email "devops@homeflow.co.uk"'
+        sh 'git config --global user.name "Homeflow CI"'
         sh 'yarn publish --new-version ${PUBLISH_VERSION}'
-        sh 'git push git@bitbucket.org:homeflow_developers/homeflowjs master'
+        sh 'git show'
+        sh 'git push git@bitbucket.org:homeflow_developers/homeflowjs HEAD:master'
       }
     }
   }

package/actions/properties.actions.js

@@ -180,7 +180,11 @@ export const fetchSavedProperties = () => (dispatch) => {
   fetch('/saved_properties.ljson')
     .then((response) => response.json())
     .then((json) => {
-      if (json) dispatch(setSavedProperties(json.properties))
+      if (json) {
+        dispatch(setSavedProperties(json.properties));
+      } else {
+        dispatch(setSavedProperties([]));
+      }
     })
     .catch(() => dispatch(setSavedProperties([])));
 };

package/actions/user.actions.js

@@ -3,6 +3,8 @@ 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 { buildQueryString } from '../search/property-search/property-search';
 import { objectDiff, compact } from '../utils';
 
 export const setCurrentUser = (payload) => ({
@@ -60,6 +62,38 @@ export const createUser = (payload) => (dispatch, getState) => {
       authenticity_token: authenticityToken
     }),
   })
+    .then((response) => response.json())
+    .then(() => {
+      // load saved properties and searches from localStorage
+      const serializedSavedProperties = localStorage.getItem('savedProperties');
+      const serializedSavedSearches = localStorage.getItem('savedSearches');
+
+      let promises = [];
+
+      if (serializedSavedProperties) {
+        const localSavedProperties = JSON.parse(serializedSavedProperties);
+        const savedPropertyIDs = localSavedProperties.map((property) => property.property_id).join(',');
+
+        promises.push(fetch('/saved_properties.ljson', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ property_ids: savedPropertyIDs }),
+        }));
+      }
+
+      if (serializedSavedSearches) {
+        const localSavedSearches = JSON.parse(serializedSavedSearches);
+
+        localSavedSearches.forEach((search) => {
+          promises.push(fetch(`/search?${buildQueryString(search)}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+          }));
+        });
+      }
+
+      return Promise.all(promises);
+    })
     .then(() => dispatch(fetchUser()));
 };
 
@@ -84,6 +118,8 @@ export const signInUser = (payload) => (dispatch, getState) => {
         console.error('Could not sign in');
         return { success: false };
       }
+
+      return status;
     });
 };
 

package/branches/branch-map/branch-leaflet-map.component.jsx

@@ -1,17 +1,18 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import L from 'leaflet';
 import { MapContainer, TileLayer, Marker } from 'react-leaflet';
 
-const BranchLeafletMap = () => {
+const BranchLeafletMap = ({ iconConfig }) => {
   const branch = Homeflow.get('branch');
 
-  const defaultIcon = L.icon({
+  const defaultIconConfig = {
     iconRetinaUrl: '/assets/marker-icon.png',
     iconUrl: '/assets/marker-icon.png',
     shadowUrl: '/assets/marker-shadow.png',
-  });
+  };
 
-  // debugger;
+  const icon = L.icon(iconConfig || defaultIconConfig);
 
   return (
     <MapContainer
@@ -24,9 +25,17 @@ const BranchLeafletMap = () => {
         attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <Marker position={[branch.lat, branch.lng]} icon={defaultIcon} />
+      <Marker position={[branch.lat, branch.lng]} icon={icon} />
     </MapContainer>
   );
 };
 
+BranchLeafletMap.propTypes = {
+  iconConfig: PropTypes.object,
+};
+
+BranchLeafletMap.defaultProps = {
+  iconConfig: null,
+};
+
 export default BranchLeafletMap;

package/branches/branch-map/branch-map.component.jsx

@@ -59,10 +59,10 @@ class BranchMap extends React.Component {
   }
 
   render() {
-    const { google } = this.props;
+    const { google, iconConfig } = this.props;
 
     if (!google) {
-      return <LazyLeafletMap />;
+      return <LazyLeafletMap iconConfig={iconConfig} />;
     }
 
     return (
@@ -79,6 +79,7 @@ BranchMap.propTypes = {
   disableStreetview: PropTypes.bool,
   initGoogleMaps: PropTypes.func.isRequired,
   google: PropTypes.bool,
+  iconConfig: PropTypes.object,
 };
 
 BranchMap.defaultProps = {
@@ -88,6 +89,7 @@ BranchMap.defaultProps = {
   zoom: 15,
   disableStreetview: false,
   google: false,
+  iconConfig: null,
 };
 
 const mapDispatchToProps = {

package/branches/branches-map/branches-map.component.jsx

@@ -12,14 +12,25 @@ import ReactLeafletGoogleLayer from 'react-leaflet-google-layer';
 
 import 'leaflet/dist/leaflet.css';
 
-const BranchesMap = ({ CustomPopup, google, gmapsKey }) => {
-  const branches = Homeflow.get('branches');
+const BranchesMap = ({
+  CustomPopup, google, gmapsKey, iconConfig, fallbackLatLng,
+}) => {
+  let branches = Homeflow.get('branches');
+  let showMarkers = true;
+
+  // If no branches found use fallback lat, long and set showMarkers to false
+  if (!branches) {
+    branches = [fallbackLatLng];
+    showMarkers = false;
+  }
 
-  const defaultIcon = L.icon({
+  const defaultIconConfig = {
     iconRetinaUrl: '/assets/marker-icon.png',
     iconUrl: '/assets/marker-icon.png',
     shadowUrl: '/assets/marker-shadow.png',
-  });
+  };
+
+  const icon = L.icon(iconConfig || defaultIconConfig);
 
   const bounds = latLngBounds([branches[0].lat, branches[0].lng]);
 
@@ -29,7 +40,7 @@ const BranchesMap = ({ CustomPopup, google, gmapsKey }) => {
     return (
       <Marker
         position={[branch.lat, branch.lng]}
-        icon={defaultIcon}
+        icon={icon}
         key={branch.branch_id}
       >
         {CustomPopup ? (
@@ -77,7 +88,7 @@ const BranchesMap = ({ CustomPopup, google, gmapsKey }) => {
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
       )}
-      {markers}
+      {showMarkers && markers}
     </MapContainer>
   );
 };
@@ -86,12 +97,16 @@ BranchesMap.propTypes = {
   google: PropTypes.bool,
   CustomPopup: PropTypes.elementType,
   gmapsKey: PropTypes.string,
+  iconConfig: PropTypes.object,
+  fallbackLatLng: PropTypes.object,
 };
 
 BranchesMap.defaultProps = {
   google: false,
   CustomPopup: null,
   gmapsKey: null,
+  iconConfig: null,
+  fallbackLatLng: { lat: 51.509865, lng: -0.118092 },
 };
 
 const mapStateToProps = (state) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.7.21",
+  "version": "0.7.25",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {
@@ -39,7 +39,6 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-redux": "^7.2.1",
-    "react-router": "^5.2.0",
     "react-router-dom": "^5.3.0",
     "redux": "^4.0.5"
   },

package/properties/save-property-button/save-property-button.component.jsx

@@ -42,6 +42,10 @@ const SavePropertyButton = (props) => {
   );
 };
 
+SavePropertyButton.defaultProps = {
+  savedProperties: [],
+};
+
 const mapStateToProps = (state) => ({
   savedProperties: state.properties.savedProperties,
 });

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 };
+      const newSearch = { ...search, page: null };
       newSearch.sorted = value;
 
       propertySearch(newSearch);
@@ -49,7 +49,7 @@ const SortOrderSelect = (props) => {
   }
 
   const handleChange = (e) => {
-    const newSearch = { ...search };
+    const newSearch = { ...search, page: null };
     newSearch.sorted = e.target.value;
 
     propertySearch(newSearch);

package/reducers/search.reducer.js

@@ -56,6 +56,8 @@ const searchReducer = (state = INITIAL_STATE, action) => {
         currentSearch: {
           ...state.currentSearch,
           ...action.payload,
+          // delete poly if user enters new search query
+          poly: action.payload.q ? null : state.currentSearch.poly,
         },
       };
     case SearchActionTypes.ADD_TAG: {

package/search/save-search-button/save-search-button.component.jsx

@@ -9,7 +9,7 @@ const SaveSearchButton = (props) => {
   const {
     search,
     className,
-    savedSearches,
+    savedSearches = [],
     UnsavedComponent,
     SavedComponent,
     addSavedSearchAsync,
@@ -22,8 +22,9 @@ const SaveSearchButton = (props) => {
   const toggleSearch = (e) => {
     e.preventDefault();
 
+
     if (savedSearch) {
-      removeSavedSearchAsync(search);
+      removeSavedSearchAsync(savedSearch);
       notify('Saved search removed.', 'success');
     } else {
       addSavedSearchAsync(search);

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

@@ -15,6 +15,8 @@ const SavedSearch = (props) => {
     selectClass,
     visitButtonClass,
     deleteButtonClass,
+    buttonSpanClass,
+    userLoggedIn,
   } = props;
 
   const visitSearch = (e) => {
@@ -37,31 +39,36 @@ const SavedSearch = (props) => {
     <div className="saved-search">
       <h4 className="saved-search__title">{generateDescription(search)}</h4>
       <div className="saved-search__body">
-        Email me matching properties:
-        <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>
+        {userLoggedIn && (
+          <>
+            Email me matching properties:
+            <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>
+          </>
+        )}
 
         <button
           type="button"
           onClick={visitSearch}
           className={visitButtonClass}
         >
-          Visit
+          <span className={buttonSpanClass}>Visit</span>
         </button>
+
         <button
           type="button"
           onClick={removeSearch}
           className={deleteButtonClass}
         >
-          Delete
+          <span className={buttonSpanClass}>Remove</span>
         </button>
       </div>
     </div>
@@ -75,20 +82,27 @@ SavedSearch.propTypes = {
   selectClass: PropTypes.string,
   visitButtonClass: PropTypes.string,
   deleteButtonClass: PropTypes.string,
+  buttonSpanClass: PropTypes.string,
+  userLoggedIn: PropTypes.bool.isRequired,
 };
 
 SavedSearch.defaultProps = {
   selectClass: '',
   visitButtonClass: '',
   deleteButtonClass: '',
+  buttonSpanClass: '',
 }
 
+const mapStateToProps = (state) => ({
+  userLoggedIn: !!state.user.currentUser.user_id,
+});
+
 const mapDispatchToProps = {
   removeSavedSearchAsync,
   updateSavedSearchAsync,
 };
 
 export default connect(
-  null,
+  mapStateToProps,
   mapDispatchToProps,
 )(SavedSearch);

package/user/forgotten-password-form/forgotten-password-form.component.jsx

@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 
-const ForgottenPasswordForm = ({ inputClass, buttonClass }) => {
+import notify from '../../app/notify';
+
+const ForgottenPasswordForm = ({ inputClass, buttonClass, buttonSpanClass }) => {
   const [email, setEmail] = useState('');
   const [success, setSuccess] = useState(false);
 
@@ -15,9 +18,17 @@ const ForgottenPasswordForm = ({ inputClass, buttonClass }) => {
       body: formData,
     })
       .then(({ status }) => {
-        if (status === 200) setSuccess(true);
+        if (status === 200) {
+          setSuccess(true);
+        }
+      })
+      .finally(() => {
+        notify(
+          'If the email you have entered has a user account we will send you a forgotten password reset request now.',
+          'success',
+          { duration: 8000 },
+        );
       })
-      .catch((err) => console.error('Something went wrong', err));
   };
 
   if (success) {
@@ -44,10 +55,22 @@ const ForgottenPasswordForm = ({ inputClass, buttonClass }) => {
         type="submit"
         className={`forgotten-password-form__submit ${buttonClass}`}
       >
-        Reset Password
+        <span className={buttonSpanClass}>Reset Password</span>
       </button>
     </form>
   );
 };
 
+ForgottenPasswordForm.propTypes = {
+  inputClass: PropTypes.string,
+  buttonClass: PropTypes.string,
+  buttonSpanClass: PropTypes.string,
+};
+
+ForgottenPasswordForm.defaultProps = {
+  inputClass: '',
+  buttonClass: '',
+  buttonSpanClass: '',
+}
+
 export default ForgottenPasswordForm;

package/user/index.js

@@ -6,6 +6,7 @@ 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 ResetPasswordForm from './reset-password-form/reset-password-form.component';
 import UserEditForm from './user-edit-form/user-edit-form.component';
 
 export {
@@ -18,4 +19,5 @@ export {
   SignOutButton,
   MarketingPreferencesForm,
   ForgottenPasswordForm,
+  ResetPasswordForm,
 };

package/user/marketing-preferences-form/marketing-preferences-form.component.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-const MarketingPreferencesForm = ({ user }) => {
+const MarketingPreferencesForm = ({ user, buttonClass, buttonSpanClass }) => {
   const [optInMarketing, setOptInMarketing] = useState(user.is_opted_in_to_marketing);
   const contactOption = user.is_opted_in_to_marketing ? 'OPTED IN to' : 'OPTED OUT of';
 
@@ -29,7 +29,7 @@ const MarketingPreferencesForm = ({ user }) => {
       <div className="marketing-preferences__description">
         You are currently
         {' '}
-        {contactOption}
+        {contactOption.toLowerCase()}
         {' '}
         marketing communications.
       </div>
@@ -43,7 +43,7 @@ const MarketingPreferencesForm = ({ user }) => {
           checked={optInMarketing}
           onChange={handleChange}
         />
-        <span>I wish to OPT IN to marketing communications</span>
+        <span>I wish to opt in to marketing communications</span>
       </div>
 
       <div className="marketing-preferences__option">
@@ -55,11 +55,11 @@ const MarketingPreferencesForm = ({ user }) => {
           checked={!optInMarketing}
           onChange={handleChange}
         />
-        <span>I wish to OPT OUT of marketing communications</span>
+        <span>I wish to opt out of marketing communications</span>
       </div>
 
-      <button type="submit" className="marketing-preferences__submit">
-        Update
+      <button type="submit" className={`marketing-preferences__submit ${buttonClass}`}>
+        <span className={buttonSpanClass}>Update</span>
       </button>
     </form>
   );
@@ -67,6 +67,13 @@ const MarketingPreferencesForm = ({ user }) => {
 
 MarketingPreferencesForm.propTypes = {
   user: PropTypes.object.isRequired,
+  buttonClass: PropTypes.string,
+  buttonSpanClass: PropTypes.string,
+};
+
+MarketingPreferencesForm.defaultProps = {
+  buttonClass: '',
+  buttonSpanClass: '',
 };
 
 const mapStateToProps = (state) => ({

package/user/reset-password-form/reset-password-form.component.jsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { setCurrentUser } from '../../actions/user.actions';
 import notify from '../../app/notify';
 
-const ResetPasswordForm = ({ user, setCurrentUser }) => {
+const ResetPasswordForm = ({ user, setCurrentUser, inputClass, buttonClass, buttonSpanClass }) => {
   const [password, setPassword] = useState('');
   const [passwordConfirmation, setPasswordConfirmation] = useState('');
   const history = useHistory();
@@ -38,6 +38,7 @@ const ResetPasswordForm = ({ user, setCurrentUser }) => {
         placeholder="New password"
         value={password}
         onChange={(e) => setPassword(e.target.value)}
+        className={inputClass}
       />
       <input
         name="password_confirmation"
@@ -45,13 +46,14 @@ const ResetPasswordForm = ({ user, setCurrentUser }) => {
         placeholder="Confirm new password"
         value={passwordConfirmation}
         onChange={(e) => setPasswordConfirmation(e.target.value)}
+        className={inputClass}
       />
 
       <button
         type="submit"
-        className="reset-password-form__submit"
+        className={`reset-password-form__submit ${buttonClass}`}
       >
-        Reset Password
+        <span className={buttonSpanClass}>Reset Password</span>
       </button>
     </form>
   );
@@ -60,6 +62,15 @@ const ResetPasswordForm = ({ user, setCurrentUser }) => {
 ResetPasswordForm.propTypes = {
   user: PropTypes.object.isRequired,
   setCurrentUser: PropTypes.func.isRequired,
+  inputClass: PropTypes.string,
+  buttonClass: PropTypes.string,
+  buttonSpanClass: PropTypes.string,
+};
+
+ResetPasswordForm.defaultProps = {
+  inputClass: '',
+  buttonClass: '',
+  buttonSpanClass: '',
 };
 
 const mapStateToProps = (state) => ({

package/user/user-register-form/user-register-form.component.jsx

@@ -13,6 +13,7 @@ const UserRegisterForm = (props) => {
     setLocalUser,
     createUser,
     setLoading,
+    doNotContact,
     ...otherProps
   } = props;
 
@@ -26,13 +27,22 @@ const UserRegisterForm = (props) => {
   const handleSubmit = (e) => {
     e.preventDefault();
 
+    const userParams = doNotContact ? { ...localUser, do_not_contact: 1 } : localUser;
+
     if (validateForm()) {
       setLoading({ userRegister: true });
 
-      createUser(localUser)
+      createUser(userParams)
         .then(() => {
           setLoading({ userRegister: false });
           notify('You have been successfully registered!', 'success');
+        })
+        .catch(() => {
+          notify(
+            'Sorry, something went wrong. You may already have an account with this email address, if so, please try signing in instead of registering.',
+            'error',
+            { duration: 8000 },
+          );
         });
     }
   };
@@ -53,6 +63,11 @@ UserRegisterForm.propTypes = {
   setLocalUser: PropTypes.func.isRequired,
   createUser: PropTypes.func.isRequired,
   setLoading: PropTypes.func.isRequired,
+  doNotContact: PropTypes.bool,
+};
+
+UserRegisterForm.defaultProps = {
+  doNotContact: false,
 };
 
 const mapStateToProps = state => ({