homeflowjs 1.0.77 → 1.0.79

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/actions/user.actions.js

@@ -67,56 +67,67 @@ export const createUser = (payload, recaptchaData = {}) => (dispatch, getState)
     }),
   })
     .then(async (response) => {
-      const response_status = response.status;
-      const json = await response.json();
+      const responseData = await response.json();
+      if (response.ok) {
+        // load saved properties and searches from localStorage
+        const serializedSavedProperties = localStorage.getItem('savedProperties');
+        const serializedSavedSearches = localStorage.getItem('savedSearches');
 
-      if (response_status === 422) throw json?.errors
+        let promises = [];
 
-      return json
-    })
-    .then(() => {
-      // load saved properties and searches from localStorage
-      const serializedSavedProperties = localStorage.getItem('savedProperties');
-      const serializedSavedSearches = localStorage.getItem('savedSearches');
-
-      let promises = [];
-
-      if (serializedSavedProperties && 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 (serializedSavedProperties && serializedSavedProperties !== '[]') {
+          const localSavedProperties = JSON.parse(serializedSavedProperties);
+          const savedPropertyIDs = localSavedProperties.map((property) => property.property_id).join(',');
 
-      if (serializedSavedSearches) {
-        const localSavedSearches = JSON.parse(serializedSavedSearches);
-
-        localSavedSearches.forEach((search) => {
-          promises.push(fetch(`/search?${buildQueryString(search)}`, {
+          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' },
+            }));
+          });
+        }
+
+        Homeflow.kickEvent('user_signed_up');
+
+        const event = new CustomEvent('formSubmission', {
+          detail: {
+            name: 'user signed up',
+            payload,
+          }
         });
-      }
 
-      Homeflow.kickEvent('user_signed_up');
+        document.dispatchEvent(event);
 
-      const event = new CustomEvent('formSubmission', {
-        detail: {
-          name: 'user signed up',
-          payload,
-        }
-      });
+        Promise.all(promises).then(() => dispatch(fetchUser()));
+
+        return responseData;
+      }
 
-      document.dispatchEvent(event);
+      const hasValidationErrors = responseData.errors && Array.isArray(responseData.errors);
+      if (hasValidationErrors) {
+        return { validationErrors: responseData.errors };
+      }
 
-      return Promise.all(promises);
+      if (responseData.message) {
+        throw new Error(responseData.message);
+      } else {
+        throw new Error();
+      }
     })
-    .then(() => dispatch(fetchUser()));
+    .catch((err) => {
+      console.error('Something went wrong.', err.message);
+      throw new Error(err instanceof SyntaxError ? '' : err.message);
+    });
 };
 
 export const signInUser = (payload) => (dispatch, getState) => {

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/hooks/use-recaptcha.js

@@ -92,12 +92,14 @@ const useRecaptcha = ({
   }, [stateIsRecaptchaLoaded]);
 
   const onRecaptchaRender = useCallback(() => {
-    const isRecaptchaTokenReady = formRef
+    const recaptchaTokenEl = formRef
       .current
       .querySelector(`[name="${RECAPTCHA_CONFIG.FILED_NAME}"]`);
     
-    if (isRecaptchaTokenReady){
-      return;
+    if (recaptchaTokenEl){
+      onRecaptchaSubmit({
+        [RECAPTCHA_CONFIG.FILED_NAME]: recaptchaTokenEl.value
+      })
     } else {
       if (window.grecaptcha?.render) {
         triggerRecaptchaRender();

package/package.json

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

package/reducers/app.reducer.js

@@ -13,6 +13,7 @@ const INITIAL_STATE = {
     propertiesMap: true,
     googleMaps: true,
     articles: false,
+    userPasswordReset: false,
   },
   themePreferences: {},
   themeSettings: Homeflow.get('theme_settings_defaults') || {},

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/user/change-password-form/change-password-form.component.jsx

@@ -0,0 +1,303 @@
+import React, { useReducer } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import notify from '../../app/notify';
+
+const ERROR_MESSAGE = 'Something went wrong updating your password. Please try again later.';
+
+const ChangePasswordForm = ({
+  classNames,
+  onSuccessCallback,
+  onErrorCallback,
+  submitText,
+  submitTextSubmitting,
+  Loader,
+}) => {
+  const user = useSelector((state) => state?.user?.currentUser) || null;
+  if (!user) return null;
+
+  const formInitialState = {
+    email: user.email,
+    current_password: '',
+    new_password: '',
+    new_password_confirmation: '',
+    errors: [],
+    success: false,
+    loading: false,
+  };
+
+  const [formData, dispatch] = useReducer((currentData, action) => {
+    switch (action?.type) {
+      case 'UPDATE_USER_DATA':
+        return {
+          ...currentData,
+          [action.field]: action.payload,
+        };
+      case 'SUCCESS':
+        return {
+          ...currentData,
+          success: true,
+          loading: false,
+        };
+      case 'ERRORS':
+        return {
+          ...currentData,
+          errors: action.payload,
+          loading: false,
+        };
+      case 'LOADING':
+        return {
+          ...currentData,
+          loading: action.payload,
+        };
+      case 'RESET':
+        return formInitialState;
+      case 'RESET_WITH_ERROR':
+        return {
+          ...formInitialState,
+          errors: action.payload,
+        };
+      default:
+        return currentData;
+    }
+  }, formInitialState);
+
+  const changePasswordClassNames = {
+    formWrapperClassName:
+      `change-password-form
+      ${classNames?.formWrapperClassName
+        ? classNames.formWrapperClassName
+        : ''
+      }`,
+    formClassName:
+      `change-password-form__form
+      ${classNames?.formClassName
+        ? classNames.formClassName
+        : ''
+      }`,
+    currentPasswordClassName:
+      `change-password-form__current-password
+      ${classNames?.currentPasswordClassName
+        ? classNames.currentPasswordClassName
+        : ''
+      }`,
+    passwordClassName:
+      `change-password-form__password
+      ${classNames?.passwordClassName
+        ? classNames.passwordClassName
+        : ''
+      }`,
+    confirmPasswordClassName:
+      `change-password-form__confirm-password
+      ${classNames?.confirmPasswordClassName
+        ? classNames.confirmPasswordClassName
+        : ''
+      }`,
+    buttonClassName:
+      `change-password-form__button
+      ${classNames?.buttonClassName
+        ? classNames.buttonClassName
+        : ''
+      }`,
+    buttonLoadingClassName:
+      `change-password-form__button--loading
+      ${classNames?.buttonLoadingClassName
+        ? classNames.buttonLoadingClassName
+        : ''
+      }`,
+    errorsListClassName:
+      `change-password-form__errors-list
+      ${classNames?.errorsListClassName
+        ? classNames.errorsListClassName
+        : ''
+      }`,
+  };
+
+  function resetForm({ errors, callBack }) {
+    if (errors) {
+      dispatch({
+        type: 'RESET_WITH_ERROR',
+        payload: errors,
+      });
+    } else {
+      dispatch({ type: 'RESET' });
+    }
+
+    if (callBack) {
+      callBack();
+    }
+  }
+
+  function updateUser() {
+    fetch('/passwords', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `${Homeflow.get('authenticityToken')}`,
+      },
+      body: JSON.stringify({
+        email: user.email,
+        current_password: formData.current_password,
+        new_password: formData.new_password,
+        new_password_confirmation: formData.new_password_confirmation,
+      }),
+    })
+      .then(async (response) => {
+        const responseData = await response.json();
+        const statusCode = response.status;
+
+        if (response.ok) {
+          // password changed sucessfully
+          resetForm({ callback: onSuccessCallback });
+          notify('You have successfully changed your password.', 'success');
+        }
+        else if (responseData.errors && Array.isArray(responseData.errors) && statusCode === 422) {
+          // new validation erorrs for form from Users API
+          resetForm({
+            errors: responseData.errors,
+            callback: onErrorCallback,
+          });
+        }
+        else if (responseData.message) {
+          // attis just single message response
+          throw new Error(responseData.message);
+        }
+        else {
+          // generic error fallback / 500
+          throw new Error(ERROR_MESSAGE);
+        }
+      })
+      .catch((err) => {
+        resetForm({ callback: onErrorCallback });
+        const errMessage = err instanceof SyntaxError
+          ? ERROR_MESSAGE
+          : err.message || ERROR_MESSAGE;
+
+        console.error('Something went wrong.', err.message);
+        notify(errMessage, 'error');
+      });
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+
+    dispatch({
+      type: 'LOADING',
+      payload: true,
+    });
+    updateUser();
+  }
+
+  function handleInputs(e) {
+    const { name, value } = e.target;
+    dispatch({
+      type: 'UPDATE_USER_DATA',
+      field: name,
+      payload: value,
+    });
+  }
+
+  const loadingClassName = formData.loading ? changePasswordClassNames.buttonLoadingClassName : '';
+
+  return (
+    <div className={changePasswordClassNames.formWrapperClassName}>
+      <form
+        className={changePasswordClassNames.formClassName}
+        onSubmit={(e) => handleSubmit(e)}
+      >
+        {(formData.errors?.length > 0) && (
+          <ul className={changePasswordClassNames.errorsListClassName}>
+            {formData.errors.map((err) => <li key={err}>{err}</li>)}
+          </ul>
+        )}
+        <input
+          type="password"
+          onChange={(e) => handleInputs(e)}
+          value={formData.current_password}
+          className={changePasswordClassNames.currentPasswordClassName}
+          name="current_password"
+          placeholder="Current password"
+          required
+          {...(formData.loading && {
+            disabled: true,
+          })}
+        />
+        <input
+          type="password"
+          onChange={(e) => handleInputs(e)}
+          value={formData.new_password}
+          className={changePasswordClassNames.passwordClassName}
+          name="new_password"
+          placeholder="New password"
+          required
+          {...(formData.loading && {
+            disabled: true,
+          })}
+        />
+        <input
+          type="password"
+          onChange={(e) => handleInputs(e)}
+          value={formData.new_password_confirmation}
+          className={changePasswordClassNames.confirmPasswordClassName}
+          name="new_password_confirmation"
+          placeholder="Repeat new password"
+          required
+          {...(formData.loading && {
+            disabled: true,
+          })}
+        />
+        <button
+          className={`${changePasswordClassNames.buttonClassName} ${loadingClassName}`}
+          type="submit"
+          {...(formData.loading && {
+            disabled: true,
+          })}
+        >
+          {(Loader && formData.loading) && <Loader />}
+          {formData.loading ? submitTextSubmitting : submitText}
+        </button>
+      </form>
+    </div>
+  );
+};
+
+ChangePasswordForm.propTypes = {
+  classNames: PropTypes.shape({
+    formWrapperClassName: PropTypes.string,
+    formClassName: PropTypes.string,
+    currentPasswordClassName: PropTypes.string,
+    passwordClassName: PropTypes.string,
+    confirmPasswordClassName: PropTypes.string,
+    buttonClassName: PropTypes.string,
+    buttonLoadingClassName: PropTypes.string,
+    errorsListClassName: PropTypes.string,
+  }),
+  onSuccessCallback: PropTypes.func,
+  onErrorCallback: PropTypes.func,
+  submitText: PropTypes.string,
+  pattern: PropTypes.string,
+  patternText: PropTypes.string,
+  submitTextSubmitting: PropTypes.string,
+  Loader: PropTypes.node,
+};
+
+ChangePasswordForm.defaultProps = {
+  classNames: {
+    formWrapperClassName: '',
+    formClassName: '',
+    currentPasswordClassName: '',
+    passwordClassName: '',
+    confirmPasswordClassName: '',
+    buttonClassName: '',
+    errorsListClassName: '',
+  },
+  onSuccessCallback: null,
+  onErrorCallback: null,
+  pattern: null,
+  patternText: '',
+  submitText: 'Update',
+  submitTextSubmitting: 'Updating',
+  Loader: null,
+};
+
+export default ChangePasswordForm;

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

@@ -11,9 +11,11 @@ const ForgottenPasswordForm = ({
   buttonSpanClass,
   honeypot,
   honeypotClass,
+  Loader,
 }) => {
   const formRef = useRef(null);
   const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(false);
 
   const fallbackHoneypotStyles = {
@@ -28,6 +30,7 @@ const ForgottenPasswordForm = ({
   };
 
   const onRecaptchaSubmit = useCallback((recaptchaData) => {
+    setLoading(true);
     const formData = new FormData(formRef.current);
     const honeypot = formData.get("body");
 
@@ -45,6 +48,7 @@ const ForgottenPasswordForm = ({
         }
       })
       .finally(() => {
+        setLoading(false);
         notify(
           'If the email you have entered has a user account we will send you a forgotten password reset request now.',
           'success',
@@ -80,6 +84,8 @@ const ForgottenPasswordForm = ({
     );
   }
 
+  const loadingClassName = loading ? 'forgotten-password-form__submit--loading' : '';
+
   return (
     <form
       ref={formRef}
@@ -110,8 +116,10 @@ const ForgottenPasswordForm = ({
 
       <button
         type="submit"
-        className={`forgotten-password-form__submit ${buttonClass}`}
+        className={`forgotten-password-form__submit ${buttonClass} ${loadingClassName}`}
+        disabled={loading}
       >
+        {(loading && Loader) && (<Loader />)}
         <span className={buttonSpanClass}>Reset Password</span>
       </button>
     </form>
@@ -124,6 +132,7 @@ ForgottenPasswordForm.propTypes = {
   buttonSpanClass: PropTypes.string,
   honeypot: PropTypes.bool,
   honeypotClass: PropTypes.string,
+  Loader: PropTypes.element,
 };
 
 ForgottenPasswordForm.defaultProps = {
@@ -132,6 +141,7 @@ ForgottenPasswordForm.defaultProps = {
   buttonSpanClass: '',
   honeypot: false,
   honeypotClass: '',
+  Loader: null,
 };
 
 export default ForgottenPasswordForm;

package/user/index.js

@@ -7,6 +7,7 @@ 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 ChangePasswordForm from './change-password-form/change-password-form.component';
 import UserEditForm from './user-edit-form/user-edit-form.component';
 import UserHoneypot from './user-honeypot/user-honeypot.component';
 
@@ -21,5 +22,6 @@ export {
   MarketingPreferencesForm,
   ForgottenPasswordForm,
   ResetPasswordForm,
+  ChangePasswordForm,
   UserHoneypot,
 };

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

@@ -3,9 +3,12 @@ import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
+import { setLoading } from '../../actions/app.actions';
 import { setCurrentUser } from '../../actions/user.actions';
 import notify from '../../app/notify';
 
+const ERROR_MESSAGE = 'Something went wrong updating your password. Please try again later.';
+
 const ResetPasswordForm = ({
   user,
   setCurrentUser,
@@ -17,12 +20,17 @@ const ResetPasswordForm = ({
   redirect,
   newPasswordInputProps,
   confirmPasswordInputProps,
+  Loader,
+  setLoading,
+  isRequestInProgress,
 }) => {
   const [password, setPassword] = useState('');
   const [passwordConfirmation, setPasswordConfirmation] = useState('');
+  const [validationErrors, setValidationErrors] = useState(null);
   const history = useHistory();
 
   const handleSubmit = (e) => {
+    setLoading({ userPasswordReset: true });
     e.preventDefault();
 
     fetch('/user.ljson', {
@@ -36,17 +44,59 @@ const ResetPasswordForm = ({
         password,
         password_confirmation: passwordConfirmation,
       }),
-    }).then((response) => response.json())
-      .then(({ user }) => {
-        setCurrentUser(user);
-        notify('You have successfully changed your password.', 'success');
-        history.push(redirect);
+    })
+      .then(async (response) => {
+        const responseData = await response.json();
+        const statusCode = response.status;
+
+        if (response.ok) {
+          // 200 - password change good
+          setCurrentUser(user);
+          notify('You have successfully changed your password.', 'success');
+          history.push(redirect);
+        }
+        else if (response.status === 302) {
+          // 302 - password chnage most likely good, may see flash message from server
+          const redirectUrl = response.headers.get('Location');
+          if (redirectUrl) {
+            window.location.href = redirectUrl; // old school, is below correct?
+          } else {
+            throw new Error('Received a redirect without a destination URL');
+          }
+        }
+        else if (responseData.errors && Array.isArray(responseData.errors) && statusCode === 422) {
+          // New validation errors for form from Users API
+          setValidationErrors(responseData.errors);
+        }
+        else if (responseData.message) {
+          // Attis just single message response
+          throw new Error(responseData.message);
+        }
+        else {
+          // Generic error fallback / 500
+          throw new Error(ERROR_MESSAGE);
+        }
       })
-      .catch((err) => console.error('Something went wrong.', err));
+      .catch((err) => {
+        const errMessage = err instanceof SyntaxError
+          ? ERROR_MESSAGE
+          : err.message || ERROR_MESSAGE;
+
+        console.error('Something went wrong.', err.message);
+        notify(errMessage, 'error');
+      })
+      .finally(() => setLoading({ userPasswordReset: false }));
   };
 
+  const loadingClassName = isRequestInProgress ? 'reset-password-form__submit--loading' : '';
+
   return (
     <form className="reset-password-form" onSubmit={handleSubmit}>
+      {(validationErrors && validationErrors?.length > 0) && (
+        <ul className="reset-password-form__errors-list">
+          {validationErrors.map((err) => <li key={err}>Password {err}</li>)}
+        </ul>
+      )}
       <input
         name="password"
         type="password"
@@ -72,8 +122,10 @@ const ResetPasswordForm = ({
 
       <button
         type="submit"
-        className={`reset-password-form__submit ${buttonClass}`}
+        className={`reset-password-form__submit ${buttonClass} ${loadingClassName}`}
+        disabled={isRequestInProgress}
       >
+        {(isRequestInProgress && Loader) && (<Loader />)}
         <span className={buttonSpanClass}>Reset Password</span>
       </button>
     </form>
@@ -89,6 +141,11 @@ ResetPasswordForm.propTypes = {
   pattern: PropTypes.string,
   patternTitle: PropTypes.string,
   redirect: PropTypes.string,
+  Loader: PropTypes.element,
+  newPasswordInputProps: PropTypes.object,
+  confirmPasswordInputProps: PropTypes.object,
+  setLoading: PropTypes.func.isRequired,
+  isRequestInProgress: PropTypes.bool.isRequired,
 };
 
 ResetPasswordForm.defaultProps = {
@@ -100,14 +157,17 @@ ResetPasswordForm.defaultProps = {
   redirect: '/user',
   newPasswordInputProps: {},
   confirmPasswordInputProps: {},
+  Loader: null,
 };
 
 const mapStateToProps = (state) => ({
   user: state.user.currentUser,
+  isRequestInProgress: state.app.loading?.userPasswordReset,
 });
 
 const mapDispatchToProps = {
   setCurrentUser,
+  setLoading,
 };
 
 export default connect(

package/user/sign-out-button/sign-out-button.component.jsx

@@ -7,7 +7,7 @@ import { signOutUser } from '../../actions/user.actions';
 import notify from '../../app/notify';
 
 const SignOutButton = ({
-  signOutUser, pushHistory, reload, children, ...otherProps
+  signOutUser, pushHistory, signOutRedirectUrl, reload, children, ...otherProps
 }) => {
   const history = useHistory();
   const handleClick = (e) => {
@@ -16,7 +16,7 @@ const SignOutButton = ({
       .then((success) => {
         if (success) {
           notify('You have been signed out', 'success');
-          if (pushHistory) history.push('/');
+          if (pushHistory) history.push(signOutRedirectUrl || '/');
           if (reload) location.reload(false);
         } else {
           notify('There was an error signing out', 'error');
@@ -43,11 +43,13 @@ SignOutButton.propTypes = {
   ]).isRequired,
   pushHistory: PropTypes.bool,
   reload: PropTypes.bool,
+  signOutRedirectUrl: PropTypes.string,
 };
 
 SignOutButton.defaultProps = {
   pushHistory: false,
   reload: false,
+  signOutRedirectUrl: null,
 };
 
 const mapDispatchToProps = {

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

@@ -20,10 +20,10 @@ const UserEditForm = (props) => {
     setLoading({ userUpdate: true });
     updateUser(localUser)
       .then(() => {
-        setLoading({ userUpdate: false });
         notify('Profile successfully updated.', 'success');
         if (callback) callback();
-      });
+      })
+      .finally(() => setLoading({ userUpdate: false }))
   };
 
   return (

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

@@ -7,6 +7,8 @@ import { setLocalUser, createUser } from '../../actions/user.actions';
 import { setLoading } from '../../actions/app.actions';
 import notify from '../../app/notify';
 
+const ERROR_MESSAGE = 'Sorry, something went wrong. You may already have an account with this email address, if so, please try signing in instead of registering.';
+
 const UserRegisterForm = (props) => {
   const {
     children,
@@ -18,18 +20,14 @@ const UserRegisterForm = (props) => {
     marketingStatement,
     redirectHash,
     withRecaptcha,
+    isRequestInProgress,
+    className,
     ...otherProps
   } = props;
 
   const formRef = useRef(null);
   const [isRequestCompleted, setIsRequestCompleted] = useState(null);
-
-  const validateForm = () => {
-    if (localUser.password === localUser.password_confirmation) return true;
-
-    notify('Passwords do not match', 'error'); // TODO: Flash messages
-    return false;
-  };
+  const [validationErrors, setValidationErrors] = useState(null);
 
   const onRecaptchaSubmit = (recaptchaData) => {
     const { body } = Object.fromEntries(new FormData(formRef.current));
@@ -43,30 +41,33 @@ const UserRegisterForm = (props) => {
       ...localUser.marketing_preferences, opt_in_marketing_statement: marketingStatement,
     };
 
+    if (userParams?.body) {
+      window.location.href = '/';
+    }
+
     createUser(userParams)
-      .then(() => {
-        setLoading({ userRegister: false });
-        notify('You have been successfully registered!', 'success');
+      .then((data) => {
+        if (data?.validationErrors?.length > 0) {
+          setValidationErrors(data.validationErrors);
+        } else {
+          notify('You have been successfully registered!', 'success');
 
-        if (redirectHash) {
-          window.location.hash = redirectHash;
+          if (redirectHash) {
+            window.location.hash = redirectHash;
+          }
         }
       })
-      .catch((errors) => {
-        if (userParams?.body) {
-          window.location.href = '/';
-        } else if(errors?.password){
-          // this could be used for any kind of errors but we only need it for password errors right now
-          errors.password?.forEach((error) => notify(error, 'error', { duration: 8000 }))
-        } else {
-          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 },
-          );
-        }
+      .catch((err) => {
+        notify(
+          err?.message || ERROR_MESSAGE,
+          'error',
+          { duration: 8000 },
+        );
+      })
+      .finally(() => {
+        setIsRequestCompleted((prevState) => !prevState);
+        setLoading({ userRegister: false });
       })
-      .finally(setIsRequestCompleted((prevState) => !prevState))
   }
 
   const { onRecaptchaRender, onResetRecaptcha } = useRecaptcha({
@@ -78,11 +79,9 @@ const UserRegisterForm = (props) => {
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    if (validateForm()) {
-      setLoading({ userRegister: true });
-      setIsRequestCompleted(false);
-      withRecaptcha ? onRecaptchaRender() :  onRecaptchaSubmit()
-    }
+    setLoading({ userRegister: true });
+    setIsRequestCompleted(false);
+    withRecaptcha ? onRecaptchaRender() :  onRecaptchaSubmit()
   };
 
   useEffect(() => {
@@ -96,8 +95,14 @@ const UserRegisterForm = (props) => {
     <form
       onSubmit={handleSubmit}
       ref={formRef}
+      className={`registration-form ${className ? className : ''}}`}
       {...otherProps}
     >
+      {(validationErrors && validationErrors?.length > 0) && (
+        <ul className="reset-password-form__errors-list">
+          {validationErrors.map(err => <li key={err}>{err}</li>)}
+        </ul>
+      )}
       <input
         type="text"
         name="body"

package/user/user-sign-in-form/user-sign-in-form.component.jsx

@@ -12,13 +12,14 @@ const UserSignInForm = ({ children, signInUser, userCredentials, setLoading, ...
 
     signInUser(userCredentials)
       .then(({ success }) => {
-        setLoading({ userSignIn: false });
         if (success) {
           notify('You have successfully signed in', 'success');
         } else {
           notify('Sign in failed, please try again', 'error');
         }
-      });
+      })
+      .catch(() => notify('Sign in failed, please try again', 'error'))
+      .finally(() => setLoading({ userSignIn: false }));
   };
 
   return (

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,
+};