homeflowjs 0.7.15 → 0.7.19

package/Jenkinsfile

@@ -0,0 +1,41 @@
+pipeline {
+  triggers {
+    bitbucketPush()
+  }
+
+  environment {
+    TERM = 'xterm'
+  }
+
+  agent {
+    docker {
+      alwaysPull true
+      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'
+    }
+  }
+
+  stages {
+    stage('Setup') {
+      steps {
+        sh 'yarn install'
+        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'
+      }
+    }
+
+    stage('Test') {
+      steps {
+        sh 'yarn test'
+      }
+    }
+  }
+
+  post {
+    always {
+      cleanWs()
+    }
+  }
+}

package/__tests__/instant-valuation.test.jsx

@@ -61,7 +61,7 @@ describe('Instant Valuation', () => {
       }),
     );
 
-    const message = await screen.findByText('Please fill out the required fields');
+    const message = await screen.getByText('Please fill out the required fields');
     expect(message).toBeInTheDocument();
   });
 });

package/actions/properties.actions.js

@@ -91,6 +91,11 @@ export const setPropertyLinksAsync = () => (dispatch) => {
     });
 };
 
+export const setProperty = (payload) => ({
+  type: PropertiesActionTypes.SET_PROPERTY,
+  payload,
+});
+
 export const setProperties = (payload) => ({
   type: PropertiesActionTypes.SET_PROPERTIES,
   payload,

package/actions/properties.actions.test.js

@@ -0,0 +1,13 @@
+import store from '../store';
+import * as actions from './properties.actions';
+
+describe('Properties action creators', () => {
+  it('creates correct action for setProperty', () => {
+    const expectedAction = {
+      type: 'SET_PROPERTY',
+      payload: { property_ref: 'ABC123', postcode: 'AB1 1AA' },
+    };
+
+    expect(actions.setProperty({ property_ref: 'ABC123', postcode: 'AB1 1AA' })).toEqual(expectedAction);
+  });
+});

package/actions/properties.types.js

@@ -1,4 +1,5 @@
 const PropertiesActionTypes = {
+  SET_PROPERTY: 'SET_PROPERTY',
   SET_PROPERTIES: 'SET_PROPERTIES',
   TOGGLE_SAVED_PROPERTY: 'TOGGLE_SAVED_PROPERTY',
   SET_SAVED_PROPERTIES: 'SET_SAVED_PROPERTIES',

package/actions/user.actions.js

@@ -3,7 +3,7 @@ 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 { objectDiff } from '../utils';
+import { objectDiff, compact } from '../utils';
 
 export const setCurrentUser = (payload) => ({
   type: UserActionTypes.SET_CURRENT_USER,
@@ -33,10 +33,10 @@ export const fetchUser = () => (dispatch) => {
         const serializedSavedProperties = localStorage.getItem('savedProperties');
 
         if (serializedSavedSearches) {
-          dispatch(setSavedSearches(JSON.parse(serializedSavedSearches)));
+          dispatch(setSavedSearches(compact(JSON.parse(serializedSavedSearches))));
         }
         if (serializedSavedProperties) {
-          dispatch(setSavedProperties(JSON.parse(serializedSavedProperties)));
+          dispatch(setSavedProperties(compact(JSON.parse(serializedSavedProperties))));
         }
       }
 
@@ -60,17 +60,7 @@ export const createUser = (payload) => (dispatch, getState) => {
       authenticity_token: authenticityToken
     }),
   })
-    .then((response) => response.json())
-    .then((json) => {
-      dispatch(setCurrentUser({ ...localUser, ...json }));
-      dispatch(
-        setLocalUser({
-          ...INITIAL_USER_DATA,
-          password: '',
-          password_confirmation: '',
-        })
-      );
-    });
+    .then(() => dispatch(fetchUser()));
 };
 
 export const signInUser = (payload) => (dispatch, getState) => {
@@ -89,8 +79,10 @@ export const signInUser = (payload) => (dispatch, getState) => {
     .then(({ status }) => {
       if (status === 200) {
         dispatch(fetchUser());
+        return { success: true };
       } else {
-        console.error('Could not sign in.');
+        console.error('Could not sign in');
+        return { success: false };
       }
     });
 };
@@ -116,6 +108,8 @@ export const signOutUser = () => (dispatch) => (
   })
     .then(() => {
       dispatch(setCurrentUser(INITIAL_USER_DATA));
+      dispatch(setLocalUser(INITIAL_USER_DATA));
+      dispatch(setUserCredentials({ email: '', password: '' }));
       dispatch(setSavedProperties([]));
       dispatch(setSavedSearches([]));
     })

package/actions/user.actions.test.js

@@ -1,3 +1,4 @@
+import store from '../store';
 import * as actions from './user.actions';
 
 describe('user action creators', () => {

package/app/notify.js

@@ -1,14 +1,12 @@
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
+import { sanitizeText } from '../utils/index';
+
 const notify = (message, type, config = {}) => {
   if (!message) return;
 
-  let color = '#28a745'; // default is success
-
-  if (type === 'error') {
-    color = '#dc3545';
-  }
+  const color = { error: '#dc3545' }[type] || '#28a745'; // default is success
 
   Toastify({
     duration: 3000,
@@ -16,8 +14,9 @@ const notify = (message, type, config = {}) => {
     gravity: 'top',
     position: 'center',
     stopOnFocus: true,
-    text: message,
-    backgroundColor: color,
+    text: sanitizeText(message),
+    escapeMarkup: false,
+    style: { background: color },
     ...config,
   }).showToast();
 };

package/app/with-homeflow-state.jsx

@@ -4,6 +4,10 @@ import { HashRouter } from 'react-router-dom';
 
 import store from '../store';
 
+export const resetStore = () => {
+  store.dispatch({ type: 'RESET_STORE' });
+};
+
 const withHomeflowState = (WrappedComponent, props) => (
   <Provider store={store} {...props}>
     <HashRouter>

package/bin/peer-dependencies

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const toVersionString = ([package, version]) => `${package}@${version.replace(/[^0-9\.]/, '')}`;
+const peerDependencies = JSON.parse(fs.readFileSync('./package.json', 'utf8'))['peerDependencies'];
+const dependenciesString = Object.entries(peerDependencies).map(toVersionString).join(' ');
+
+if (process.argv[2] === '-v') {
+  process.stdout.write(dependenciesString);
+} else {
+  process.stdout.write(Object.keys(peerDependencies).join(' '));
+}

package/bin/test

@@ -0,0 +1,17 @@
+#!/bin/sh
+set -eu
+
+dependencies="$(bin/peer-dependencies)"
+
+yarn link ${dependencies} >/dev/null
+echo 'Linked peer dependencies.'
+
+set +e
+jest $@
+code=$?
+
+set -e
+yarn unlink ${dependencies} >/dev/null
+echo 'Unlinked peer dependencies.'
+
+exit ${code}

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

@@ -1,13 +1,30 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Autosuggest from 'react-autosuggest';
 import { setBranchesSearch } from '../../actions/branches.actions';
 
-const BranchesSearchInput = ({ branchesSearch, setBranchesSearch, placeholder }) => {
+const BranchesSearchInput = ({
+  branchesSearch, setBranchesSearch, placeholder, isSelected, setIsSelected,
+}) => {
   const [placeID, setPlaceID] = useState('');
   const [suggestions, setSuggestions] = useState([]);
 
+  /**
+   * On country wide (mobile screens) the form takes up the whole screen when the
+   * form input is selected. This code handles that by using setFullScreen
+   * for the parent component to know if the input is currently selected.
+   * Note we have to use useRef as we can't use a onclick to the Autosuggest component.
+   */
+  const inputEl = useRef(null);
+  useEffect(() => {
+    inputEl.current.input.onclick = () => {
+      if (!isSelected && isSelected !== '') {
+        setIsSelected(true);
+      }
+    };
+  }, [inputEl]);
+
   const getSuggestions = (q) => fetch(`/places?term=${q}`)
     .then((response) => response.json())
     .then((data) => {
@@ -30,13 +47,23 @@ const BranchesSearchInput = ({ branchesSearch, setBranchesSearch, placeholder })
       <input type="hidden" name="place_id" value={placeID} />
       <input type="hidden" name="location" value={branchesSearch} />
       <Autosuggest
+        ref={inputEl}
         suggestions={suggestions}
         onSuggestionsClearRequested={() => setSuggestions([])}
         onSuggestionsFetchRequested={({ value }) => {
           setBranchesSearch(value);
           getSuggestions(value);
         }}
-        onSuggestionSelected={(_, { suggestion }) => setPlaceID(suggestion.place)}
+        onSuggestionSelected={(_, { suggestion }) => {
+          /**
+           * Check is setIsSelect exists as its is only passed as a prop on
+           * countrywide themes, other themes will not use this.
+           */
+          if (setIsSelected) setIsSelected(false);
+          return (
+            setPlaceID(suggestion.place)
+          );
+        }}
         getSuggestionValue={(suggestion) => suggestion.label}
         renderSuggestion={(suggestion) => renderSuggestion(suggestion.label)}
         inputProps={{
@@ -56,10 +83,20 @@ BranchesSearchInput.propTypes = {
   branchesSearch: PropTypes.string.isRequired,
   setBranchesSearch: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
+  isSelected: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.string,
+  ]),
+  setIsSelected: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string,
+  ]),
 };
 
 BranchesSearchInput.defaultProps = {
   placeholder: '',
+  isSelected: '',
+  setIsSelected: '',
 };
 
 const mapStateToProps = (state) => ({

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "homeflowjs",
-  "version": "0.7.15",
+  "version": "0.7.19",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {
-    "test": "jest"
+    "test": "bin/test"
   },
   "author": "",
   "license": "ISC",
@@ -39,16 +39,21 @@
     "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"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.12.1",
+    "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
+    "@testing-library/user-event": "^13.5.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
+    "es-abstract": "^1.19.1",
     "eslint": "^7.18.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-airbnb-base": "^14.2.1",

package/reducers/index.js

@@ -7,7 +7,7 @@ import appReducer from './app.reducer';
 import propertiesReducer from './properties.reducer';
 import branchesReducer from './branches.reducer';
 
-export default combineReducers({
+const combined = combineReducers({
   app: appReducer,
   search: searchReducer,
   user: userReducer,
@@ -15,3 +15,11 @@ export default combineReducers({
   properties: propertiesReducer,
   branches: branchesReducer,
 });
+
+export default (state, action) => {
+  if (action.type == 'RESET_STORE') {
+    return combined(undefined, action);
+  } else {
+    return combined(state, action);
+  }
+};

package/reducers/properties.reducer.js

@@ -12,10 +12,15 @@ const INITIAL_STATE = {
 
 const propertiesReducer = (state = INITIAL_STATE, action) => {
   switch (action.type) {
+    case PropertiesActionTypes.SET_PROPERTY:
+      return {
+        ...state,
+        property: action.payload,
+      };
     case PropertiesActionTypes.SET_PROPERTIES:
       return {
         ...state,
-        properties: action.payload
+        properties: action.payload,
       };
     case PropertiesActionTypes.SET_PAGINATION:
       return {
@@ -52,7 +57,8 @@ const propertiesReducer = (state = INITIAL_STATE, action) => {
       } else {
         // need to find the property from the propertiesReducer and add it here
         const property = state.properties.find(({ property_id }) => property_id === propertyId);
-        newSavedProperties.push(property);
+
+        newSavedProperties.push(property || state.property);
 
         if (!action.payload.userLoggedIn) {
           localStorage.setItem('savedProperties', JSON.stringify(newSavedProperties));

package/reducers/properties.reducer.test.js

@@ -35,4 +35,20 @@ describe('propertiesReducer', () => {
 
     expect(reducedState.savedProperties.length).toEqual(0);
   });
+
+  it('Sets the current property when it receives the SET_PROPERTY action', () => {
+    const property = { id: '123456789', property_ref: 'ABC12345', postcode: 'AB1 1AA' };
+    const state = { properties: [], savedProperties: [], pagination: {}, propertyLinks: { next: '', previous: '' } };
+    const reducedState = propertiesReducer(state, { type: 'SET_PROPERTY', payload: property });
+
+    expect(reducedState.property).toEqual(property);
+  });
+
+  it('Retains initial state when it receives the SET_PROPERTY action', () => {
+    const property = { id: '123456789', property_ref: 'ABC12345', postcode: 'AB1 1AA' };
+    const state = { properties: [], savedProperties: [], pagination: {}, propertyLinks: { next: '', previous: '' } };
+    const reducedState = propertiesReducer(state, { type: 'SET_PROPERTY', payload: property });
+
+    expect(reducedState).toMatchObject(state);
+  });
 });

package/reducers/user.reducer.js

@@ -28,7 +28,7 @@ export const INITIAL_USER_DATA = {
   town: '',
   user_id: null,
   password: '',
-  confirm_password: '',
+  password_confirmation: '',
 };
 
 // set both currentUser and localUser to same initial data

package/search/location-input/location-input.component.jsx

@@ -71,7 +71,14 @@ class LocationInput extends Component {
 
     setSearchField({ placeId: suggestion.place, isQuerySearch: false });
 
-    if (searchOnSelection) propertySearch(search);
+    if (searchOnSelection) {
+      const newSearch = {
+        ...search,
+        page: null,
+      };
+
+      propertySearch(newSearch);
+    }
 
     return suggestion.label;
   }

package/search/location-input/location-input.test.js

@@ -8,7 +8,7 @@ describe('LocationInput', () => {
   it('renders the component', () => {
     const testProps = {
       suggestions: [],
-      q: '',
+      search: { q: '' },
       setSuggestions: jest.fn(),
       setSearchField: jest.fn(),
     };

package/search/radius-select/radius-select.test.js

@@ -8,6 +8,7 @@ describe('RadiusSelect', () => {
     const testProps = {
       within: '5-miles',
       setSearchField: jest.fn(),
+      search: {},
     };
     render(<RadiusSelect { ...testProps } />);
     expect(screen.getByTestId('select')).toBeInTheDocument();

package/search/search-form/search-form.component.jsx

@@ -80,6 +80,7 @@ class SearchForm extends Component {
       setPlace,
       children,
       setInitialSearch,
+      submitCallback,
       ...otherProps
     } = this.props;
 

package/store.js

@@ -5,7 +5,8 @@ import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
 import rootReducer from './reducers';
 import { setThemePreferences, setThemeSettings, setAuthenticityToken } from './actions/app.actions';
 import { fetchUser } from './actions/user.actions';
-import { setProperties, setPagination, setPropertyLinksAsync } from './actions/properties.actions';
+import { setProperties, setPagination, setProperty, setPropertyLinksAsync } from './actions/properties.actions';
+// import { fetchCompanyPreferences } from './actions/company-preferences.actions';
 // import { fetchCompanyPreferences } from './actions/company-preferences.actions';
 
 const middleware = [thunk];
@@ -29,6 +30,7 @@ window.addEventListener('DOMContentLoaded', () => {
 // TODO: This should use data set inline for use setCompanyPreferences.
 // store.dispatch(fetchCompanyPreferences());
 
+store.dispatch(setProperty(Homeflow.get('property')));
 store.dispatch(setProperties(Homeflow.get('properties')));
 store.dispatch(setPagination(Homeflow.get('pagination')));
 store.dispatch(setThemePreferences(Homeflow.get('theme_preferences')));

package/user/default-profile/account/account-edit.component.jsx

@@ -8,48 +8,48 @@ import Loader from '../../../shared/loader.component';
 
 const AccountEdit = ({ localUser, toggleEdit, updating }) => (
   <div className="account-edit">
-    <h3>Edit Your Profile</h3>
+    <h3 role="heading">Edit Your Profile</h3>
 
     <UserEditForm className="profile-edit-form" callback={toggleEdit}>
       <fieldset>
         <div className="profile-edit-form__group">
           <UserInput name="first_name" required />
-          <label className={localUser.first_name ? 'shrink' : ''}>First name</label>
+          <label htmlFor="user-input-first_name" className={localUser.first_name ? 'shrink' : ''}>First name</label>
         </div>
 
         <div className="profile-edit-form__group">
           <UserInput name="last_name" required />
-          <label className={localUser.last_name ? 'shrink' : ''}>Last name</label>
+          <label htmlFor="user-input-last_name" className={localUser.last_name ? 'shrink' : ''}>Last name</label>
         </div>
 
         <div className="profile-edit-form__group">
           <UserInput name="email" required />
-          <label className={localUser.email ? 'shrink' : ''}>Email</label>
+          <label htmlFor="user-input-email" className={localUser.email ? 'shrink' : ''}>Email</label>
         </div>
 
         <div className="profile-edit-form__group">
           <UserInput name="tel_home" required />
-          <label className={localUser.tel_home ? 'shrink' : ''}>Phone</label>
+          <label htmlFor="user-input-tel_home" className={localUser.tel_home ? 'shrink' : ''}>Phone</label>
         </div>
 
         <div className="profile-edit-form__group">
           <UserInput name="street_address" />
-          <label className={localUser.street_address ? 'shrink' : ''}>Street Address</label>
+          <label htmlFor="user-input-street_address" className={localUser.street_address ? 'shrink' : ''}>Street Address</label>
         </div>
 
         <div className="profile-edit-form__group">
           <UserInput name="town" />
-          <label className={localUser.town ? 'shrink' : ''}>Town</label>
+          <label htmlFor="user-input-town" className={localUser.town ? 'shrink' : ''}>Town</label>
         </div>
 
         <div className="profile-edit-form__group">
           <UserInput name="county" />
-          <label className={localUser.county ? 'shrink' : ''}>County</label>
+          <label htmlFor="user-input-county" className={localUser.county ? 'shrink' : ''}>County</label>
         </div>
 
         <div className="profile-edit-form__group">
           <UserInput name="postcode" />
-          <label className={localUser.postcode ? 'shrink' : ''}>Postcode</label>
+          <label htmlFor="user-input-postcode" className={localUser.postcode ? 'shrink' : ''}>Postcode</label>
         </div>
 
         <button

package/user/default-profile/account/register-form.component.jsx

@@ -13,36 +13,37 @@ const RegisterForm = ({ localUser, registering }) => (
     <fieldset>
       <div className="profile-register-form__group">
         <UserInput name="first_name" required />
-        <label className={localUser.first_name ? 'shrink' : ''}>First name</label>
+        <label htmlFor="user-input-first_name" className={localUser.first_name ? 'shrink' : ''}>First name</label>
       </div>
 
       <div className="profile-register-form__group">
         <UserInput name="last_name" required />
-        <label className={localUser.last_name ? 'shrink' : ''}>Last name</label>
+        <label htmlFor="user-input-last_name" className={localUser.last_name ? 'shrink' : ''}>Last name</label>
       </div>
 
       <div className="profile-register-form__group">
         <UserInput name="email" required />
-        <label className={localUser.email ? 'shrink' : ''}>Email</label>
+        <label htmlFor="user-input-email" className={localUser.email ? 'shrink' : ''}>Email</label>
       </div>
 
       <div className="profile-register-form__group">
         <UserInput name="tel_home" required />
-        <label className={localUser.tel_home ? 'shrink' : ''}>Phone</label>
+        <label htmlFor="user-input-tel_home" className={localUser.tel_home ? 'shrink' : ''}>Phone</label>
       </div>
 
       <div className="profile-register-form__group">
         <UserInput name="password" required />
-        <label className={localUser.password ? 'shrink' : ''}>Password</label>
+        <label htmlFor="user-input-password" className={localUser.password ? 'shrink' : ''}>Password</label>
       </div>
 
       <div className="profile-register-form__group">
         <UserInput name="password_confirmation" required />
-        <label className={localUser.password_confirmation ? 'shrink' : ''}>Confirm password</label>
+        <label htmlFor="user-input-password_confirmation" className={localUser.password_confirmation ? 'shrink' : ''}>Confirm password</label>
       </div>
 
       <button
         className="profile-register-form__submit"
+        role="button"
         type="submit"
         disabled={registering}
       >

package/user/default-profile/account/sign-in-form.component.jsx

@@ -11,12 +11,12 @@ const SignInForm = ({ userCredentials }) => (
     <fieldset>
       <div className="profile-sign-in__group">
         <SignInInput name="email" required />
-        <label className={userCredentials.email ? 'shrink' : ''}>Email</label>
+        <label htmlFor="sign-in-input-email" className={userCredentials.email ? 'shrink' : ''}>Email</label>
       </div>
 
       <div className="profile-sign-in__group">
         <SignInInput name="password" required />
-        <label className={userCredentials.password ? 'shrink' : ''}>Password</label>
+        <label htmlFor="sign-in-input-password" className={userCredentials.password ? 'shrink' : ''}>Password</label>
       </div>
 
       <button

package/user/default-profile/account/sign-in-form.component.test.jsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { render, screen, waitFor, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event'
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+
+import withHomeflowState, { resetStore } from  '../../../app/with-homeflow-state';
+import store from '../../../store';
+import SignInForm from './sign-in-form.component';
+import UserProfileModal from '../user-profile/user-profile-modal.component';
+
+const user = {
+  user_id: '1000',
+  first_name: 'Test',
+  last_name: 'User',
+  email: 'user@example.com',
+  tel_home: '0123456789',
+};
+
+const server = setupServer(
+  rest.post('/session', (req, res, ctx) => (
+    res(ctx.json({}))
+  )),
+  rest.delete('/session', (req, res, ctx) => (
+    res(ctx.json({}))
+  )),
+  rest.get('/user.ljson', (req, res, ctx) => (
+    res(ctx.json({ user }))
+  )),
+  rest.post('/user.ljson', (req, res, ctx) => (
+    res(ctx.json({ user }))
+  )),
+  rest.get('/saved_properties.ljson', (req, res, ctx) => (
+    res(ctx.json({ properties: [] }))
+  )),
+  rest.get('/saved_searches.ljson', (req, res, ctx) => (
+    res(ctx.json([]))
+  )),
+);
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterEach(() => resetStore());
+afterAll(() => server.close());
+
+describe('SignInForm Component', () => {
+  it('has an Email input field', () => {
+    const { getByLabelText } = render(withHomeflowState(SignInForm));
+
+    expect(getByLabelText('Email')).toBeInTheDocument();
+  });
+
+  it('has a Password input field', () => {
+    const { getByLabelText } = render(withHomeflowState(SignInForm));
+
+    expect(getByLabelText('Password')).toBeInTheDocument();
+  });
+
+  it('reports successful sign in', async () => {
+    const { findByText, findAllByText, getByText, getAllByText } = render(withHomeflowState(UserProfileModal));
+
+    await findByText('Register or Sign in');
+    userEvent.click(getByText('Register or Sign in'));
+    await findAllByText('Sign In');
+    userEvent.click(getAllByText('Sign In')[1]);
+
+    expect(await findByText('Welcome, Test.')).toBeInTheDocument();
+  });
+
+  it('reports failed sign in', async () => {
+    const { findByText, getByText } = render(withHomeflowState(SignInForm));
+
+    server.use(
+      rest.post('/session', (req,  res, ctx) => res(ctx.status(401))),
+    );
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    userEvent.click(getByText('Sign In'));
+
+    expect(await findByText('Sign in failed, please try again')).toBeInTheDocument();
+  });
+
+  it('reports succesful sign out', async () => {
+    const { findByText, findAllByText, getByText, getAllByText } = render(withHomeflowState(UserProfileModal));
+
+    await findByText('Register or Sign in');
+    userEvent.click(getByText('Register or Sign in'));
+    await findAllByText('Sign In');
+    userEvent.click(getAllByText('Sign In')[1]);
+
+    await findByText('Welcome, Test.');
+    await findByText('Sign Out');
+
+    userEvent.click(getByText('Sign Out'));
+
+    expect(await findByText('You have been signed out')).toBeInTheDocument();
+  });
+
+  it('clears sign-in credentials on sign-out', async () => {
+    const {
+      findByText, findAllByText, getAllByLabelText, getByText, getAllByText
+    } = render(withHomeflowState(UserProfileModal));
+
+    await findByText('Register or Sign in');
+    userEvent.click(getByText('Register or Sign in'));
+    await findAllByText('Sign In');
+    userEvent.type(getAllByLabelText('Email')[0], 'user@example.com');
+    userEvent.type(getAllByLabelText('Password')[0], 'password');
+    userEvent.click(getAllByText('Sign In')[1]);
+
+    await findByText('Welcome, Test.');
+    await findByText('Sign Out');
+
+    userEvent.click(getByText('Sign Out'));
+
+    await findByText('You have been signed out');
+    await findAllByText('Password');
+
+    expect(getAllByLabelText('Email')[0]).toHaveValue('');
+    expect(getAllByLabelText('Password')[0]).toHaveValue('');
+  });
+
+  it('populates new user data in profile edit page afte user registration', async () => {
+    const {
+      findByText, findAllByText, findByRole, getByLabelText, getAllByLabelText, getByRole, getByText, getAllByText
+    } = render(withHomeflowState(UserProfileModal));
+
+    await findByText('Register or Sign in');
+    userEvent.click(getByText('Register or Sign in'));
+    await findByText('Welcome, Guest.');
+    userEvent.type(getByLabelText('First name'), user.first_name);
+    userEvent.type(getByLabelText('Last name'), user.last_name);
+    userEvent.type(getAllByLabelText('Email')[0], user.email);
+    userEvent.type(getByLabelText('Phone'), user.pohne);
+    userEvent.type(getAllByLabelText('Password')[0], 'password');
+    userEvent.type(getByLabelText('Confirm password'), 'password');
+    userEvent.click(getByRole('button', { name: 'Register' }));
+
+    await findByText('Welcome, Test.');
+    userEvent.click(getByText('Edit your profile'));
+
+    await findByRole('heading', { name: 'Edit Your Profile' });
+
+    expect(getByLabelText('First name')).toHaveValue(user.first_name);
+    expect(getByLabelText('Last name')).toHaveValue(user.last_name);
+    expect(getByLabelText('Email')).toHaveValue(user.email);
+    expect(getByLabelText('Phone')).toHaveValue(user.tel_home);
+  });
+});

package/user/index.js

@@ -6,12 +6,14 @@ 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 UserEditForm from './user-edit-form/user-edit-form.component';
 
 export {
   withUser,
   UserRegisterForm,
   UserInput,
   UserSignInForm,
+  UserEditForm,
   SignInInput,
   SignOutButton,
   MarketingPreferencesForm,

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

@@ -11,7 +11,7 @@ const SignOutButton = ({ signOutUser, children, ...otherProps }) => (
     onClick={(e) => {
       e.preventDefault();
       signOutUser()
-        .then(() => notify('You have been signed out.', 'success'));
+        .then(() => notify('You have been signed out', 'success'));
     }}
     {...otherProps}
   >

package/user/user-input/user-input.component.jsx

@@ -14,6 +14,7 @@ const UserInput = ({ name, value, setLocalUser, ...otherProps }) => {
 
   return (
     <input
+      id={`user-input-${name}`}
       type={type}
       name={name}
       value={value}

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

@@ -7,6 +7,7 @@ const SignInInput = ({ name, value, setUserCredentials, ...otherProps }) => (
   <input
     name={name}
     value={value}
+    id={`sign-in-input-${name}`}
     type={name === 'password' ? 'password' : 'text'}
     onChange={e => setUserCredentials({ [name]: e.target.value })}
     {...otherProps}

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

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

package/utils/index.js

@@ -79,3 +79,7 @@ export const objectDiff = (oldObject, newObject) => {
 
   return changed;
 }
+
+export const compact = (array) => array.filter(item => typeof item !== 'undefined' && item !== null);
+
+export const sanitizeText = (string) => new Option(string).innerHTML;

package/utils/index.test.js

@@ -0,0 +1,21 @@
+import * as utils from './index';
+
+describe('compact', () => {
+  it('removes null elements from array', () => {
+    expect(utils.compact([1, null, 2, 3, null, 4, null, 5])).toEqual([1, 2, 3, 4, 5]);
+  });
+
+  it('removes undefined elements from array', () => {
+    expect(utils.compact([1, undefined, 2, 3, undefined, 4, undefined, 5])).toEqual([1, 2, 3, 4, 5]);
+  });
+});
+
+describe('sanitizeText', () => {
+  it('converts < and > to &lt; and &gt;', () => {
+    expect(utils.sanitizeText('<hello>')).toEqual('&lt;hello&gt;');
+  });
+
+  it('converts & to &amp;', () => {
+    expect(utils.sanitizeText('<hello>')).toEqual('&lt;hello&gt;');
+  });
+});