homeflowjs 1.0.51 → 1.0.53

package/actions/search.actions.js

@@ -32,6 +32,11 @@ export const setSearchField = (payload) => ({
   payload,
 });
 
+export const setTextSearch = (payload) => ({
+  type: SearchActionTypes.SET_TEXT_SEARCH,
+  payload,
+});
+
 export const toggleTag = (payload) => ({
   type: SearchActionTypes.TOGGLE_TAG,
   payload,

package/actions/search.types.js

@@ -2,6 +2,7 @@ const SearchActionTypes = {
   SET_SEARCH: 'SET_SEARCH',
   SET_INITIAL_SEARCH: 'SET_INITIAL_SEARCH',
   SET_SUGGESTIONS: 'SET_SUGGESTIONS',
+  SET_TEXT_SEARCH: 'SET_TEXT_SEARCH',
   SET_CHANNEL: 'SET_CHANNEL',
   SET_SEARCH_FIELD: 'SET_SEARCH_FIELD',
   ADD_TAG: 'ADD_TAG',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",
@@ -10,7 +10,8 @@
     "properties/property-streetview/**/*",
     "properties/stamp-duty-calculator/**/*",
     "search/range-controller/**/*",
-    "properties/property-results-pagination/**/*"
+    "properties/property-results-pagination/**/*",
+    "shared/loading-icon/**/*"
   ],
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",

package/reducers/search.reducer.js

@@ -11,6 +11,7 @@ const INITIAL_STATE = {
     tags: [],
     poly: '',
     auctionDate: '',
+    text: '',
     viewport: [],
   },
   initialSearch: {}, // original search when the page first loads
@@ -42,6 +43,14 @@ const searchReducer = (state = INITIAL_STATE, action) => {
           suggestions: action.payload,
         },
       };
+    case SearchActionTypes.SET_TEXT_SEARCH:
+      return {
+        ...state,
+        currentSearch: {
+          ...state.currentSearch,
+          text: action.payload,
+        },
+      };
     case SearchActionTypes.SET_CHANNEL:
       // when channel is changed, reset prices to avoid trying to search using wrong prices
       return {

package/search/address-lookup-input/address-lookup-input.component.jsx

@@ -18,6 +18,7 @@ const AddressLookupInput = ({
   required,
   setSelectedAddress,
   iconStokeInherit,
+  errorMessage
 }) => {
   const [locationQuery, setLocationQuery] = useState('');
   const [suggestions, setSuggestions] = useState([]);
@@ -35,7 +36,7 @@ const AddressLookupInput = ({
         if (json.suggestions.length === 0) {
           setAddress({
             value: address.value,
-            error: 'Sorry we couldn\'t find that address',
+            error: errorMessage,
           });
         }
         if (json.suggestions.length !== 0) {
@@ -194,6 +195,7 @@ AddressLookupInput.propTypes = {
   className: PropTypes.string,
   setSelectedAddress: PropTypes.func,
   iconStokeInherit: PropTypes.bool,
+  errorMessage: PropTypes.node,
 };
 
 AddressLookupInput.defaultProps = {
@@ -204,6 +206,7 @@ AddressLookupInput.defaultProps = {
   className: '',
   setSelectedAddress: null,
   iconStokeInherit: true,
+  errorMessage: <span className="input__error">Sorry we couldn't find that address</span>,
 };
 
 export default AddressLookupInput;

package/search/address-lookup-input/clear-button.component.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import SearchIcon from '../../shared/search-icon.component';
 import CloseIcon from '../../shared/close-icon.component';
-import LoadingIcon from '../../shared/loading-icon.component';
+import LoadingIcon from '../../shared/loading-icon/loading-icon.component';
 
 const ClearButton = ({ address, loading, onClear, iconStokeInherit }) => (
   <button

package/search/address-lookup-input/input.jsx

@@ -44,9 +44,7 @@ const Input = ({
       />
       <ClearButton address={address} loading={loading} onClear={onClear} iconStokeInherit={iconStokeInherit} />
     </div>
-    {address?.error && typeof (address.error) === 'string' && (
-      <span className="input__error">{address.error}</span>
-    )}
+    {address?.error && address.error}
   </div>
 );
 

package/search/index.js

@@ -14,10 +14,12 @@ import RemoveSavedSearchButton from '../properties/remove-saved-property-button/
 import SavedSearch from './saved-search/saved-search.component';
 import propertySearch from './property-search/property-search';
 import generateSearchDescription from './saved-search/generate-description';
+import TextSearchInput from './text-search/text-search.component';
 
 export {
   SearchForm,
   LocationInput,
+  TextSearchInput,
   AddressLookupInput,
   BedroomsSelect,
   ChannelRadioButton,

package/search/text-search/text-search.component.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { setTextSearch } from '../../actions/search.actions';
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+
+const TextSearchInput = ({
+  className, placeholder, htmlFor,
+}) => {
+  const dispatch = useDispatch();
+
+  const initialTextSearch = useSelector(state => state.search.currentSearch.text) || '';
+
+  const handleChange = (e) => {
+    dispatch(setTextSearch(e.target.value?.replace('%20', ' ')));
+  }
+
+  return (
+    <input
+      type="text"
+      name="text_search"
+      id="text_search"
+      value={initialTextSearch?.replace('%20', ' ')}
+      {...className && {
+        className: className,
+      }}
+      {...placeholder && {
+        placeholder: placeholder,
+      }}
+      {...htmlFor && {
+        htmlFor: htmlFor,
+      }}
+      onChange={e => handleChange(e)}
+    />
+  );
+};
+
+TextSearchInput.propTypes = {
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+  htmlFor: PropTypes.string,
+};
+
+export default TextSearchInput;

package/shared/{loading-icon.component.jsx → loading-icon/loading-icon.component.jsx}

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import './loading-icon.styles.scss';
 
 const LoadingIcon = ({inherit}) => (
   <svg role="img" className="loading-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/shared/loading-icon/loading-icon.styles.scss

@@ -0,0 +1,13 @@
+@keyframes spin-loading-icon {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-icon {
+  transform-origin: center;
+  animation: spin-loading-icon 1s linear infinite;
+}