homeflowjs 1.0.36 → 1.0.38

package/actions/user.actions.js

@@ -54,7 +54,7 @@ export const setUserCredentials = (payload) => ({
   payload,
 });
 
-export const createUser = (payload) => (dispatch, getState) => {
+export const createUser = (payload, recaptchaData = {}) => (dispatch, getState) => {
   const { user: { localUser }, app: { authenticityToken } } = getState();
 
   return fetch('/user.ljson', {
@@ -63,6 +63,7 @@ export const createUser = (payload) => (dispatch, getState) => {
     body: JSON.stringify({
       client: payload,
       authenticity_token: authenticityToken,
+      ...recaptchaData,
     }),
   })
     .then(async (response) => {

package/app/user-history.js

@@ -1,38 +1,35 @@
 export const addSearchToLocalStorage = (search) => {
-  // <search> format: {channel: 'sales'}
-
-  // Get search history from local storage.
-  // <searchHistory> format: [{channel: 'sales'}, {channel: 'sales'}]
-  const searchHistory = JSON.parse(localStorage.getItem?.('searchHistory') || null) || [];
-
-  // Get current page number from Homeflow state.
-  const pageNumber = Homeflow.getState?.().properties?.pagination?.current_page;
+  // Get search history from local storage
+  let searchHistory = localStorage.getItem('searchHistory');
+  searchHistory = searchHistory ? JSON.parse(searchHistory) : [];
 
   // Make a new instance of the search object without the page number.
-  const searchWithoutPageNumberString = JSON.stringify({ ...search, page: null });
+  const searchWithoutPageNumber = { ...search, page: null };
 
   // Make a new instance of the last search object without the page number.
-  const lastSearchWithoutPageNumberString = JSON.stringify({ ...searchHistory[0], page: null });
+  const lastSearchWithoutPageNumber = { ...searchHistory[0], page: null };
 
   /**
-   * If the searchWithoutPageNumberString and lastSearchWithoutPageNumberString match,
+   * If the searchWithoutPageNumber and lastSearchWithoutPageNumber match,
    * just update the the last search in local storage to have the search's page number if
    * it has one.
    */
-  if ((searchWithoutPageNumberString === lastSearchWithoutPageNumberString) && pageNumber) {
-    searchHistory[0].page = pageNumber;
-    localStorage.setItem?.('searchHistory', JSON.stringify(searchHistory));
+  if ((JSON.stringify(searchWithoutPageNumber) === JSON.stringify(lastSearchWithoutPageNumber)) && search?.page) {
+    const lastSearchWithUpdatedPageNumber = { ...searchHistory[0], page: search.page };
+    searchHistory.shift();
+    searchHistory.unshift(lastSearchWithUpdatedPageNumber);
+    localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
   }
 
   /**
    * If the search and last search without page numbers don't match add
    * the search to local storage.
    */
-  if (searchWithoutPageNumberString !== lastSearchWithoutPageNumberString) {
-    // Add <search> to the front of the array and ensure only 10 most recent searches in history.
-    localStorage.setItem('searchHistory', JSON.stringify(
-      [{ ...search }, ...searchHistory].slice(0, 10),
-    ));
+  if ((JSON.stringify(searchWithoutPageNumber) !== JSON.stringify(lastSearchWithoutPageNumber))) {
+    // Add search to the front of the array ...
+    searchHistory.unshift(search);
+    // ... and ensure only 10 most recent searches in history.
+    localStorage.setItem('searchHistory', JSON.stringify(searchHistory.slice(0, 10)));
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",
@@ -73,6 +73,6 @@
     "jest": "^26.6.0",
     "msw": "^0.28.1",
     "react-autosuggest": "^10.0.2",
-    "redux-mock-store": "^1.5.4"
+    "redux-mock-store": "^1.5.5"
   }
 }

package/properties/back-to-search-button/back-to-search-button.component.jsx

@@ -15,16 +15,12 @@ const BackToSearchButton = ({ children, ...otherProps }) => {
     const property = Homeflow.get('property');
     const currentPropertyID = property?.propertyId || property?.property_id;
 
-    if (currentPropertyID === secondToLastSearch?.clickedProperty) {
-      if ('expandedPolygon' in secondToLastSearch) {
-        const thirdToLastSearch = JSON.parse(searchHistory)?.[2] || null;
-        validSearch = thirdToLastSearch;
-      } else {
-        validSearch = secondToLastSearch;
-      }
-    }
+    if (currentPropertyID === secondToLastSearch?.clickedProperty) validSearch = secondToLastSearch;
   }
 
+  // delete the 'place' so we don't get [object Object] in URL if place is found in object.
+  if (validSearch?.place) delete validSearch.place;
+
   const href = `/search?${buildQueryString(validSearch)}`;
 
   return (

package/properties/property-results-pagination/property-results-pagination.component.jsx

@@ -47,6 +47,18 @@ export default function PropertyResultsPagination({
    * currentPage = 3;
    * pageCount = 100;
    *'Should output: [ 3, 4, 5, 6]'
+   *
+   * currentPage = 100;
+   * pageCount = 100;
+   * 'Should output: [ 96, 97, 98, 99]'
+   *
+   * currentPage = 3;
+   * pageCount = 3;
+   * 'Should output: [ 2 ]'
+   *
+   * currentPage = 1;
+   * pageCount = 3;
+   * 'Should output: [ 2 ]'
    * @returns {number[]} An array of page numbers for pagination.
    */
   const getPaginationIncrements = () => {
@@ -59,10 +71,18 @@ export default function PropertyResultsPagination({
       startIncrement++;
       endIncrement++;
     }
+
     if (endIncrement >= pageCount) {
       endIncrement = pageCount;
     }
 
+    // If on the final page
+    if (currentPage === pageCount) {
+      startIncrement = pageCount >= paginationIncrements
+        ? currentPage - paginationIncrements : currentPage - (paginationIncrements - currentPage);
+      endIncrement = currentPage;
+    }
+
     for (let i = startIncrement; i < endIncrement; i++) {
       pagination.push(i);
     }

package/search/property-search/property-search.js

@@ -41,10 +41,9 @@ export const buildQueryString = (search) => {
     // only include either q or place ID
     if ((key === 'q' && !search.isQuerySearch)
         || (key === 'placeId' && search.isQuerySearch)
+        || (key === 'place')
         || (key === 'poly' && search.isQuerySearch)) return;
 
-    if (key === 'place') return queryParams.push(`place_id=${value?.place_id}`);
-
     // Don't include branch_id if a search term has been entered
     if (key === 'branch_id' && search.isQuerySearch) return;
 

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

@@ -1,11 +1,13 @@
 import React from 'react';
-import { render, screen, waitFor, cleanup } from '@testing-library/react';
-import userEvent from '@testing-library/user-event'
+import { Provider } from 'react-redux';
+import { HashRouter } from 'react-router-dom';
+import { fireEvent, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
+import configureStore from 'redux-mock-store';
 
-import withHomeflowState, { resetStore } from  '../../../app/with-homeflow-state';
-import store from '../../../store';
+import withHomeflowState, { resetStore } from '../../../app/with-homeflow-state';
 import SignInForm from './sign-in-form.component';
 import UserProfileModal from '../user-profile/user-profile-modal.component';
 
@@ -57,7 +59,9 @@ describe('SignInForm Component', () => {
   });
 
   it('reports successful sign in', async () => {
-    const { findByText, findAllByText, getByText, getAllByText } = render(withHomeflowState(UserProfileModal));
+    const {
+      findByText, findAllByText, getByText, getAllByText,
+    } = render(withHomeflowState(UserProfileModal));
 
     await findByText('Register or Sign in');
     userEvent.click(getByText('Register or Sign in'));
@@ -71,7 +75,7 @@ describe('SignInForm Component', () => {
     const { findByText, getByText } = render(withHomeflowState(SignInForm));
 
     server.use(
-      rest.post('/session', (req,  res, ctx) => res(ctx.status(401))),
+      rest.post('/session', (req, res, ctx) => res(ctx.status(401))),
     );
     jest.spyOn(console, 'error').mockImplementation(() => {});
 
@@ -81,7 +85,9 @@ describe('SignInForm Component', () => {
   });
 
   it('reports succesful sign out', async () => {
-    const { findByText, findAllByText, getByText, getAllByText } = render(withHomeflowState(UserProfileModal));
+    const {
+      findByText, findAllByText, getByText, getAllByText,
+    } = render(withHomeflowState(UserProfileModal));
 
     await findByText('Register or Sign in');
     userEvent.click(getByText('Register or Sign in'));
@@ -98,7 +104,7 @@ describe('SignInForm Component', () => {
 
   it('clears sign-in credentials on sign-out', async () => {
     const {
-      findByText, findAllByText, getAllByLabelText, getByText, getAllByText
+      findByText, findAllByText, getAllByLabelText, getByText, getAllByText,
     } = render(withHomeflowState(UserProfileModal));
 
     await findByText('Register or Sign in');
@@ -121,29 +127,34 @@ describe('SignInForm Component', () => {
   });
 
   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' }));
+    const mockStore = configureStore([]);
+    const store = mockStore({
+      user: { currentUser: user, localUser: user },
+      app: { loading: { user: false }},
+      properties: { savedProperties: [] },
+      search: { savedSearches: [] },
+    });
+
+    const { findByText, getByDisplayValue } = render(
+      <Provider store={store}>
+        <HashRouter>
+          <UserProfileModal />
+        </HashRouter>
+      </Provider>,
+    );
 
-    await findByText('Welcome, Test.');
-    userEvent.click(getByText('Edit your profile'));
+    expect(findByText(`Welcome, ${user.first_name}`)).toBeTruthy();
+    expect(findByText(`${user.first_name} ${user.last_name}`)).toBeTruthy();
+    expect(findByText(user.email)).toBeTruthy();
+    expect(findByText(user.tel_home)).toBeTruthy();
+    expect(findByText('Edit your profile')).toBeTruthy();
 
-    await findByRole('heading', { name: 'Edit Your Profile' });
+    const button = await findByText('Edit your profile');
+    fireEvent.click(button);
 
-    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);
+    getByDisplayValue(user.first_name);
+    getByDisplayValue(user.last_name);
+    getByDisplayValue(user.tel_home);
+    getByDisplayValue(user.email);
   });
 });

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

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { useRecaptcha } from '../../hooks';
 
 import { setLocalUser, createUser } from '../../actions/user.actions';
 import { setLoading } from '../../actions/app.actions';
@@ -19,6 +20,9 @@ const UserRegisterForm = (props) => {
     ...otherProps
   } = props;
 
+  const formRef = useRef(null);
+  const [isRequestCompleted, setIsRequestCompleted] = useState(null);
+
   const validateForm = () => {
     if (localUser.password === localUser.password_confirmation) return true;
 
@@ -26,9 +30,8 @@ const UserRegisterForm = (props) => {
     return false;
   };
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const { body } = Object.fromEntries(new FormData(e.target));
+  const onRecaptchaSubmit = (recaptchaData) => {
+    const { body } = Object.fromEntries(new FormData(formRef.current));
     const formData = {
       ...localUser,
       body,
@@ -39,37 +42,61 @@ const UserRegisterForm = (props) => {
       ...localUser.marketing_preferences, opt_in_marketing_statement: marketingStatement,
     };
 
+    createUser(userParams)
+      .then(() => {
+        setLoading({ userRegister: false });
+        notify('You have been successfully registered!', 'success');
+
+        if (redirectHash) {
+          window.location.hash = redirectHash;
+        }
+      })
+      .catch(() => {
+        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 },
+          );
+        }
+      })
+      .finally(setIsRequestCompleted((prevState) => !prevState))
+  }
+
+  const { onRecaptchaRender, onResetRecaptcha } = useRecaptcha({
+    formID: 'registration-form',
+    formRef,
+    onRecaptchaSubmit,
+  });
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
     if (validateForm()) {
       setLoading({ userRegister: true });
-
-      createUser(userParams)
-        .then(() => {
-          setLoading({ userRegister: false });
-          notify('You have been successfully registered!', 'success');
-
-          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 },
-            );
-          }
-        });
+      setIsRequestCompleted(false);
+      onRecaptchaRender();
     }
   };
 
+  useEffect(() => {
+    if(isRequestCompleted) {
+      onResetRecaptcha();
+    }
+  }, [isRequestCompleted])
+  
+
   return (
-    <form onSubmit={handleSubmit} {...otherProps}>
+    <form
+      onSubmit={handleSubmit}
+      ref={formRef}
+      {...otherProps}
+    >
       <input
         type="text"
         name="body"