homeflowjs 1.0.102 → 1.0.103

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

@@ -0,0 +1,223 @@
+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 { setSearchedBranchesIDs } from '../../actions/branches.actions';
+import LoadingIcon from '../../shared/loading-icon/loading-icon.component';
+
+const { fetchAddressSuggestions, fetchBranchesDataBySearchedAddress, ERROR_DEFAULT_MESSAGE } = branchSearchUtils;
+
+const BranchesPolygonSearchInputMultiple = ({
+  placeholder,
+  inputProps,
+  channel,
+  isDepartmentSearch,
+  hiddenBranchIDs,
+  icon: Icon,
+  loadingIcon: CustomLoadingIcon,
+  handleInputClick,
+  handleSuggestionSelected,
+  usePolygonSearch,
+}) => {
+  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(setSearchedBranchesIDs(null));
+  }, []);
+
+  const handleSearchedBranchData = (branchesIDs) => {
+    if (!branchesIDs) return;
+
+    const searchedBranchesIDs = branchesIDs.filter(
+      (branchData) => !hiddenBranchIDs.includes(branchData.branchID || branchData.id)
+    );
+    dispatch(setSearchedBranchesIDs(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 polygonRequestPrm = usePolygonSearch ? { usingPolygon: true } : {};
+
+  const getSearchedBranch = () => {
+    if (channel) {
+      fetchBranchesDataBySearchedAddress({
+        addressID: selectedSuggestion,
+        channel,
+        isDepartmentSearch,
+        ...polygonRequestPrm,
+      })
+        .then(handleSearchedBranchData)
+        .catch(handleError)
+        .finally(resetLoadingStatus)
+    } else {
+      Promise.all([
+        fetchBranchesDataBySearchedAddress({
+          addressID: selectedSuggestion,
+          channel: 'sales',
+          isDepartmentSearch,
+          ...polygonRequestPrm,
+        }),
+        fetchBranchesDataBySearchedAddress({
+          addressID: selectedSuggestion,
+          channel: 'lettings',
+          isDepartmentSearch,
+          ...polygonRequestPrm,
+        })
+      ])
+        .then(([salesBranchIDList, lettingsBranchIDList]) => {
+          const mergedList = [...salesBranchIDList, ...lettingsBranchIDList];
+          const uniqueBranchesMap = new Map(mergedList.map(branch => [branch.id, branch]));
+          const uniqueBranches = Array.from(uniqueBranchesMap.values());
+          handleSearchedBranchData(uniqueBranches)
+        })
+        .catch(handleError)
+        .finally(resetLoadingStatus);
+    }
+  }
+
+  useEffect(() => {
+    if (selectedSuggestion && !requestIsLoading) {
+      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(setSearchedBranchesIDs(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 />}
+    </>
+  );
+};
+
+BranchesPolygonSearchInputMultiple.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,
+  usePolygonSearch: PropTypes.bool,
+  hiddenBranchIDs: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+};
+
+BranchesPolygonSearchInputMultiple.defaultProps = {
+  placeholder: '',
+  inputProps: {},
+  channel: null,
+  isDepartmentSearch: true,
+  icon: () => <div/>,
+  loadingIcon: null,
+  handleInputClick: null,
+  handleSuggestionSelected: null,
+  hiddenBranchIDs: [],
+  usePolygonSearch: true,
+};
+
+export default BranchesPolygonSearchInputMultiple;

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

@@ -103,7 +103,7 @@ const BranchesPolygonSearchInput = ({
   }
 
   useEffect(() => {
-    if (selectedSuggestion) {
+    if (selectedSuggestion && !requestIsLoading) {
       setRequestIsLoading(true);
       setIsFieldDisabled(true);
 
@@ -201,7 +201,8 @@ BranchesPolygonSearchInput.propTypes = {
   loadingIcon: PropTypes.func,
   handleInputClick: PropTypes.func,
   handleSuggestionSelected: PropTypes.func,
-  hiddenBranchIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+  usePolygonSearch: PropTypes.bool,
+  hiddenBranchIDs: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
 };
 
 BranchesPolygonSearchInput.defaultProps = {
@@ -213,7 +214,7 @@ BranchesPolygonSearchInput.defaultProps = {
   loadingIcon: null,
   handleInputClick: null,
   handleSuggestionSelected: null,
-  hiddenBranchIds: [],
+  hiddenBranchIDs: [],
   usePolygonSearch: true,
 };
 

package/branches/index.js

@@ -4,6 +4,7 @@ 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';
+import BranchesPolygonSearchInputMultiple from './branches-search-form/branches-polygon-search-input-multiple.component';
 
 export {
   BranchesMap,
@@ -11,5 +12,6 @@ export {
   BranchStreetview,
   BranchesSearchForm,
   BranchesSearchInput,
-  BranchesPolygonSearchInput
+  BranchesPolygonSearchInput,
+  BranchesPolygonSearchInputMultiple
 };

package/package.json

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

package/utils/requests-handler.js

@@ -47,6 +47,25 @@ const fetchDetailedAddressData = ({ addressID }) => fetch(`/address_lookup?id=${
     return err;
   });
 
+const fetchBranchesDataByPostcode = ({
+  postcode,
+  usingPolygon = false,
+  channel,
+  isDepartmentSearch
+}) => {
+  const polygonPrm = (usingPolygon && channel) ? '&using_polygon=true' : '';
+  const channelPrm = channel ? `&channel=${channel}` : '';
+  const departmentPrm = (isDepartmentSearch && channel) ? `&department=true` : '';
+  const crossAgencyPrm = `&check_for_cross_agency_branches=true`
+
+  return fetch(`/postcode_branches_lookup?postcode=${postcode}${departmentPrm}${channelPrm}${polygonPrm}${crossAgencyPrm}`)
+    .then(handleRequest)
+    .catch((err) => {
+      console.log(err);
+      return err;
+    })
+}
+
 const fetchBranchDataBySearchedAddress = ({
   addressID,
   usingPolygon,
@@ -71,8 +90,56 @@ const fetchBranchDataBySearchedAddress = ({
     return err;
   });
 
+const fetchBranchesDataBySearchedAddress = ({
+  addressID,
+  usingPolygon,
+  channel,
+  isDepartmentSearch,
+}) => fetchDetailedAddressData({ addressID })
+  .then((data) => {
+    if (data?.postcode) {
+      return fetchBranchesDataByPostcode({
+        postcode: data.postcode,
+        usingPolygon,
+        channel,
+        isDepartmentSearch
+      })
+    } else {
+      throw new Error(ERROR_MESSAGE_NOT_FOUND_POSTCODE);
+    }
+  })
+  .then((data) => {
+    const branchesArray = Array.isArray(data) ? data : (data?.branches || []);
+    return branchesArray.map(branch => ({
+      id: branch?.id?.toString(),
+      distance: branch?.distance,
+      branchID: branch?.id?.toString(),
+      name: branch?.name,
+      address: [branch?.street_address, branch?.town, branch?.county, branch?.postcode].filter(Boolean).join(', '),
+      postcode: branch?.postcode,
+      telephone: branch?.telephone,
+      email: branch?.email,
+      agencyId: branch?.agency_id,
+      agencyName: branch?.agency_name,
+      salesEnabled: branch?.sales_enabled,
+      lettingsEnabled: branch?.lettings_enabled,
+      salesContactNumber: branch?.contactable_sales_telephone,
+      lettingsContactNumber: branch?.contactable_lettings_telephone,
+      heroImageURL: branch?.hero_asset?.mr_url || null,
+      departments: branch?.departments,
+      branchURL: branch?.url_label,
+      externalBranchURL: branch?.external_branch_url,
+      locationMethod: branch?.location_method,
+    })).filter(branch => branch.id);
+  })
+  .catch((err) => {
+    console.log(err);
+    return err;
+  });
+
 export default {
   fetchAddressSuggestions,
   fetchBranchDataBySearchedAddress,
+  fetchBranchesDataBySearchedAddress,
   ERROR_DEFAULT_MESSAGE,
 };