homeflowjs 1.0.77 → 1.0.78

package/actions/branches.actions.js

@@ -14,3 +14,13 @@ export const setBranchesPagination = (payload) => ({
   type: BranchesActionTypes.SET_BRANCHES_PAGINATION,
   payload,
 });
+
+export const setSearchedPolygonBranchesIDs = (payload) => ({
+  type: BranchesActionTypes.SET_SEARCHED_POLYGON_BRANCHES_IDS,
+  payload,
+});
+
+export const setBranchDepartmentFilter = (payload) => ({
+  type: BranchesActionTypes.SET_BRANCH_DEPARTMENT_FILTER,
+  payload,
+});

package/actions/branches.types.js

@@ -2,6 +2,8 @@ const BranchesActionTypes = {
   SET_BRANCHES: 'SET_BRANCHES',
   SET_BRANCHES_SEARCH: 'SET_BRANCHES_SEARCH',
   SET_BRANCHES_PAGINATION: 'SET_BRANCHES_PAGINATION',
+  SET_SEARCHED_POLYGON_BRANCHES_IDS: 'SET_SEARCHED_POLYGON_BRANCHES_IDS',
+  SET_BRANCH_DEPARTMENT_FILTER: 'SET_BRANCH_DEPARTMENT_FILTER',
 };
 
 export default BranchesActionTypes;

package/branches/branches-search-form/branches-polygon-search-input.component.jsx

@@ -0,0 +1,216 @@
+import React, {
+  useState, useRef, useEffect, useCallback,
+  useMemo,
+} from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import Autosuggest from 'react-autosuggest';
+import debounce from 'lodash.debounce';
+import { notify } from 'homeflowjs';
+
+import { DEBOUNCE_DELAY } from '../../utils';
+import branchSearchUtils from '../../utils/requests-handler';
+import { setSearchedPolygonBranchesIDs } from '../../actions/branches.actions';
+import LoadingIcon from '../../shared/loading-icon/loading-icon.component';
+
+const { fetchAddressSuggestions, fetchBranchDataBySearchedAddress, ERROR_DEFAULT_MESSAGE } = branchSearchUtils;
+
+const BranchesPolygonSearchInput = ({
+  placeholder,
+  inputProps,
+  channel,
+  isDepartmentSearch,
+  hiddenBranchIDs,
+  icon: Icon,
+  loadingIcon: CustomLoadingIcon,
+  handleInputClick,
+  handleSuggestionSelected,
+}) => {
+  const dispatch = useDispatch();
+  
+  const [suggestions, setSuggestions] = useState([]);
+  const [searchedAddress, setSearchedAddress] = useState('');
+  const [requestIsLoading, setRequestIsLoading] = useState(false);
+  const [isFieldDisabled, setIsFieldDisabled] = useState(false);
+  const [selectedSuggestion, setSelectedSuggestion] = useState(null);
+
+  useEffect(() => {
+    dispatch(setSearchedPolygonBranchesIDs(null));
+  }, []);
+
+  const handleSearchedBranchData = (branchesIDs) => {
+    const searchedBranchesIDs = branchesIDs.filter(
+      (branchID) => !hiddenBranchIDs.includes(branchID.toString())
+    );
+    dispatch(setSearchedPolygonBranchesIDs(searchedBranchesIDs));
+  };
+
+  const resetLoadingStatus = () => {
+    setRequestIsLoading(false);
+    setIsFieldDisabled(false);
+  }
+
+  const handleError = (err) => {
+    let errorData = err;
+    if (
+      errorData instanceof SyntaxError
+      || errorData instanceof TypeError
+      || errorData instanceof ReferenceError
+    ) {
+      errorData = new Error(ERROR_DEFAULT_MESSAGE);
+    }
+    notify(errorData.message, 'error')
+  }
+
+  const getSearchedBranch = () => {
+    if (channel) {
+      fetchBranchDataBySearchedAddress({
+        addressID: selectedSuggestion,
+        usingPolygon: true,
+        channel,
+        isDepartmentSearch,
+      })
+        .then(handleSearchedBranchData)
+        .catch(handleError)
+        .finally(resetLoadingStatus)
+    } else {
+      Promise.all([
+        fetchBranchDataBySearchedAddress({
+          addressID: selectedSuggestion,
+          usingPolygon: true,
+          channel: 'sales',
+          isDepartmentSearch,
+        }),
+        fetchBranchDataBySearchedAddress({
+          addressID: selectedSuggestion,
+          usingPolygon: true,
+          channel: 'lettings',
+          isDepartmentSearch,
+        })
+      ])
+        .then(([salesBranchIDList, lettingsBranchIDList]) => {
+          handleSearchedBranchData([
+            ...salesBranchIDList,
+            ...lettingsBranchIDList,
+          ])
+        })
+        .catch(handleError)
+        .finally(resetLoadingStatus);
+    }
+  }
+
+  useEffect(() => {
+    if (selectedSuggestion) {
+      setRequestIsLoading(true);
+      setIsFieldDisabled(true);
+
+      getSearchedBranch();
+    }
+  }, [channel, selectedSuggestion]);
+
+  const getSuggestions = useCallback(
+    (searchedAddress) => {
+      setSelectedSuggestion(null);
+      setRequestIsLoading(true);
+      fetchAddressSuggestions({ searchedAddress })
+        .then((suggestions) => {
+          setRequestIsLoading(false);
+          setSuggestions(suggestions)
+        })
+        .catch((err) => notify(err.message, 'error'))
+    }, [])
+
+  const debouncedGetSuggestions = useCallback(debounce(({ value }) => {
+    setSearchedAddress(value);
+    getSuggestions(value);
+  }, DEBOUNCE_DELAY), []);
+
+  const onSuggestionSelected = useCallback((_, { suggestion }) => {
+    if (suggestion.id) {
+      if (handleSuggestionSelected) {
+        handleSuggestionSelected();
+      }
+      setSelectedSuggestion(suggestion.id);
+    }
+  }, [channel]);
+
+  const onSuggestionsClear = useCallback(() => setSuggestions([]), []);
+
+  const getSuggestionValue = useCallback((suggestion) => suggestion.address, []);
+
+  const renderSuggestion = useCallback((suggestion) => (
+    <span className="react-autosuggest_span">{suggestion.address}</span>
+  ), []);
+
+  const onInputChange = useCallback((_, { newValue }) => {
+    if (!newValue) {
+      dispatch(setSearchedPolygonBranchesIDs(null));
+    }
+    setSearchedAddress(newValue);
+    setSelectedSuggestion(null);
+  }, []);
+
+  const onInputClick = useCallback(() => {
+    if (handleInputClick) {
+      handleInputClick();
+    }
+  }, [handleInputClick]);
+
+  const additionalInputProps = useMemo(() => ({
+    placeholder,
+    name: 'react-autosuggest__input',
+    id: 'react-autosuggest__input',
+    value: searchedAddress,
+    onClick: onInputClick,
+    onChange: onInputChange,
+    ...((isFieldDisabled && requestIsLoading) ? { disabled: true } : {}),
+  }), [searchedAddress, isFieldDisabled, requestIsLoading, onInputClick]);
+
+  const SearchLoadingIcon = CustomLoadingIcon || LoadingIcon;
+
+  return (
+    <>
+      <input type="hidden" name="location" value={searchedAddress} />
+      <Autosuggest
+        suggestions={suggestions}
+        onSuggestionsClearRequested={onSuggestionsClear}
+        onSuggestionsFetchRequested={debouncedGetSuggestions}
+        onSuggestionSelected={onSuggestionSelected}
+        getSuggestionValue={getSuggestionValue}
+        renderSuggestion={renderSuggestion}
+        inputProps={{
+          ...additionalInputProps,
+          ...inputProps,
+        }}
+        highlightFirstSuggestion
+      />
+      {requestIsLoading ? <SearchLoadingIcon /> : <Icon />}
+    </>
+  );
+};
+
+BranchesPolygonSearchInput.propTypes = {
+  placeholder: PropTypes.string,
+  inputProps: PropTypes.object,
+  channel: PropTypes.string,
+  isDepartmentSearch: PropTypes.bool,
+  icon: PropTypes.func,
+  loadingIcon: PropTypes.func,
+  handleInputClick: PropTypes.func,
+  handleSuggestionSelected: PropTypes.func,
+  hiddenBranchIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+};
+
+BranchesPolygonSearchInput.defaultProps = {
+  placeholder: '',
+  inputProps: {},
+  channel: null,
+  isDepartmentSearch: true,
+  icon: () => <div/>,
+  loadingIcon: null,
+  handleInputClick: null,
+  handleSuggestionSelected: null,
+  hiddenBranchIds: [],
+};
+
+export default BranchesPolygonSearchInput;

package/branches/index.js

@@ -3,6 +3,7 @@ import BranchMap from './branch-map/branch-map.component';
 import BranchStreetview from './branch-streetview/branch-streetview.component';
 import BranchesSearchForm from './branches-search-form/branches-search-form.component';
 import BranchesSearchInput from './branches-search-form/branches-search-input.component';
+import BranchesPolygonSearchInput from './branches-search-form/branches-polygon-search-input.component';
 
 export {
   BranchesMap,
@@ -10,4 +11,5 @@ export {
   BranchStreetview,
   BranchesSearchForm,
   BranchesSearchInput,
+  BranchesPolygonSearchInput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.77",
+  "version": "1.0.78",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/reducers/branches.reducer.js

@@ -4,6 +4,8 @@ const INITIAL_STATE = {
   branches: [],
   branchesSearch: '',
   pagination: {},
+  searchedBranchesIDs: null,
+  branchDepartmentFilter: 'all',
 };
 
 const branchesReducer = (state = INITIAL_STATE, action) => {
@@ -23,6 +25,16 @@ const branchesReducer = (state = INITIAL_STATE, action) => {
         ...state,
         pagination: action.payload,
       };
+    case BranchesActionTypes.SET_SEARCHED_POLYGON_BRANCHES_IDS:
+      return {
+        ...state,
+        searchedBranchesIDs: action.payload,
+      };
+    case BranchesActionTypes.SET_BRANCH_DEPARTMENT_FILTER:
+      return {
+        ...state,
+        branchDepartmentFilter: action.payload,
+      };
     default: return state;
   }
 };

package/utils/requests-handler.js

@@ -0,0 +1,78 @@
+const ERROR_MESSAGE_SERVICE_NOT_AVAILABLE = 'Sorry, the service is temporarily unavailable. Please try again later.';
+const ERROR_MESSAGE_NOT_FOUND_POSTCODE = 'Sorry, no postcode was found for the searched address.';
+const ERROR_DEFAULT_MESSAGE = 'Sorry, something went wrong. Please try again later.';
+
+const handleRequest = async(response) => {
+  if (response.ok) {
+    const responseData = await response.json();
+    return responseData;
+  } else {
+    throw new Error(ERROR_MESSAGE_SERVICE_NOT_AVAILABLE);
+  }
+}
+
+const fetchAddressSuggestions = ({ searchedAddress }) => fetch(`/address_lookup?autocomplete=${searchedAddress}`)
+  .then(handleRequest)
+  .then((data) => data?.suggestions
+    ? data?.suggestions?.filter((_item, index) => index < 15)
+    : []
+  )
+  .catch((err) => {
+    console.log(err);
+    return err;
+  })
+
+const fetchBranchDataByPostcode = ({
+  postcode,
+  usingPolygon = false,
+  channel,
+  isDepartmentSearch
+}) => {
+  const polygonPrm = (usingPolygon && channel) ? '&using_polygon=true' : '';
+  const channelPrm = channel ? `&channel=${channel}` : '';
+  const departmentPrm = (isDepartmentSearch && channel) ? `&department=true` : '';
+
+  return fetch(`/postcode_branch_lookup?postcode=${postcode}${departmentPrm}${channelPrm}${polygonPrm}`)
+    .then(handleRequest)
+    .catch((err) => {
+      console.log(err);
+      return err;
+    })
+}
+
+const fetchDetailedAddressData = ({ addressID }) => fetch(`/address_lookup?id=${addressID}`)
+  .then(handleRequest)
+  .catch((err) => {
+    console.log(err);
+    return err;
+  });
+
+const fetchBranchDataBySearchedAddress = ({
+  addressID,
+  usingPolygon,
+  channel,
+  isDepartmentSearch,
+}) => fetchDetailedAddressData({ addressID })
+  .then((data) => {
+    if (data?.postcode) {
+      return fetchBranchDataByPostcode({
+        postcode: data.postcode,
+        usingPolygon,
+        channel,
+        isDepartmentSearch
+      })
+    } else {
+      throw new Error(ERROR_MESSAGE_NOT_FOUND_POSTCODE);
+    }
+  })
+  .then((data) => data?.branch && data?.branch?.id ? [data?.branch?.id.toString()] : [])
+  .catch((err) => {
+    console.log(err);
+    return err;
+  });
+
+export default {
+  fetchAddressSuggestions,
+  fetchBranchDataBySearchedAddress,
+  ERROR_DEFAULT_MESSAGE,
+};