homeflowjs 1.0.37 → 1.0.39

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "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/property-results-pagination/property-results-pagination-item.component.jsx

@@ -13,21 +13,45 @@ export default function PropertyResultsPaginationItem({
   LeftChevron,
   RightChevron,
 }) {
-  const activeClassName = (className) => (
-    currentPage === pageNumber ? `${className}--active` : ''
-  );
+  const activeClassName = (className) =>
+    currentPage === pageNumber ? `${className}--active` : '';
+
+  const pageLink = () => {
+    if (window.location.pathname.includes('page-')) {
+      return window.location.pathname.replace(/page-\d+/, `page-${pageNumber}`);
+    }
+    return `${window.location.pathname}/page-${pageNumber}`;
+  };
+
   return (
-    <li className={`property-results-pagination__item ${activeClassName('property-results-pagination__item')}`}>
-      <a href={`${window.location.pathname}/page-${pageNumber}`} className={`property-results-pagination__link ${activeClassName('property-results-pagination__link')}`}>
+    <li
+      className={`property-results-pagination__item ${activeClassName(
+        'property-results-pagination__item'
+      )}`}
+    >
+      <a
+        href={pageLink()}
+        className={`property-results-pagination__link ${activeClassName(
+          'property-results-pagination__link'
+        )}`}
+      >
         {previous && (
           <>
             {!noChevrons && <LeftChevron />}
-            {!noPrevOrNextText && <span className="property-results-pagination__link-prev-text">Previous</span>}
+            {!noPrevOrNextText && (
+              <span className="property-results-pagination__link-prev-text">
+                Previous
+              </span>
+            )}
           </>
         )}
         {next && (
           <>
-            {!noPrevOrNextText && <span className="property-results-pagination__link-next-text">Next</span>}
+            {!noPrevOrNextText && (
+              <span className="property-results-pagination__link-next-text">
+                Next
+              </span>
+            )}
             {!noChevrons && <RightChevron />}
           </>
         )}

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

@@ -22,78 +22,110 @@ export default function PropertyResultsPagination({
     current_page: currentPage,
     has_next_page: hasNextPage,
     has_prev_page: hasPrevPage,
-    total_count: totalCount,
     page_count: pageCount,
   } = pagination;
 
   /**
-   * Generates an array of pagination increments (the middle numbers in the pagination)
-   * based on the current page and total page count.
-   * For example the 2,3,4 and 5 in < 1 ... 2 - 3 - 4 - 5 ... 29 >
-   *
+   * Generates an array of pagination with ellipsis '...' where appropriate
    * @example
    * currentPage = 1;
-   * pageCount = 100;
-   * 'Should output: [2, 3, 4, 5]'
+   * pageCount = 1;
+   * paginationIncrements = 4;
+   * 'Should output: [1]'
    *
    * currentPage = 1;
    * pageCount = 5;
-   *'Should output: [2, 3, 4]'
+   * paginationIncrements = 4;
+   *'Should output: ['1', '2', '3', '4', '5']'
+   *
+   * currentPage = 1;
+   * pageCount = 3;
+   * paginationIncrements = 4;
+   *'Should output:  ['1', '2','3']'
+   *
+   * currentPage = 1;
+   * pageCount = 100;
+   * paginationIncrements = 4;
+   *'Should output: ['1', '2', '3', '4', '5', '...', '100']'
    *
    * currentPage = 2;
    * pageCount = 100;
-   *'Should output: [2, 3, 4, 5]'
+   * paginationIncrements = 4;
+   * 'Should output: ['1', '2', '3', '4', '5', '...', '100']'
    *
    * currentPage = 3;
    * pageCount = 100;
-   *'Should output: [ 3, 4, 5, 6]'
+   * paginationIncrements = 4;
+   * 'Should output: ['1', '...', '3', '4', '5', '6', '...', '100']'
    *
-   * currentPage = 100;
+   * currentPage = 99;
    * pageCount = 100;
-   * 'Should output: [ 96, 97, 98, 99]'
+   * paginationIncrements = 4;
+   * 'Should output: ['1', '...', '96', '97', '98', '99', '100']'
    *
-   * currentPage = 3;
-   * pageCount = 3;
-   * 'Should output: [ 2 ]'
+   * currentPage = 96;
+   * pageCount = 100;
+   * paginationIncrements = 4;
+   * 'Should output: ['1', '...', '96', '97', '98', '99', '100']'
    *
-   * currentPage = 1;
-   * pageCount = 3;
-   * 'Should output: [ 2 ]'
-   * @returns {number[]} An array of page numbers for pagination.
+   * currentPage = 100;
+   * pageCount = 100;
+   * paginationIncrements = 4;
+   * 'Should output: ['1', '...','96','97', '98', '99', '100']'
+   *
+   * @returns {string[]} An array of strings for pagination.
    */
-  const getPaginationIncrements = () => {
-    if (pageCount === 1) return [];
-
-    const pagination = [];
-    let startIncrement = currentPage;
-    let endIncrement = currentPage + paginationIncrements;
-    if (currentPage === 1) {
-      startIncrement++;
-      endIncrement++;
+  const generatePagination = () => {
+    if (pageCount === 1) return ['1'];
+
+    let pages = [];
+
+    if (pageCount <= paginationIncrements + 1) {
+      for (let i = 1; i <= pageCount; i++) {
+        pages.push(i.toString());
+      }
+      return pages;
     }
 
-    if (endIncrement >= pageCount) {
-      endIncrement = pageCount;
+    if (currentPage > 1 && currentPage !== 2) {
+      pages.push('1', '...');
     }
 
-    // If on the final page
-    if (currentPage === pageCount) {
-      startIncrement = pageCount >= paginationIncrements
-        ? currentPage - paginationIncrements : currentPage - (paginationIncrements - currentPage);
-      endIncrement = currentPage;
+    if (currentPage === 2) {
+      pages.push('1');
     }
 
-    for (let i = startIncrement; i < endIncrement; i++) {
-      pagination.push(i);
+    const getStart = () => {
+      if (currentPage + paginationIncrements >= pageCount)
+        return pageCount - paginationIncrements;
+      return Math.max(currentPage, 1);
+    };
+
+    const getEnd = () => {
+      if (currentPage + paginationIncrements >= pageCount) return pageCount;
+      if (currentPage === 1) return paginationIncrements + 1;
+      return Math.min(currentPage + (paginationIncrements - 1), pageCount);
+    };
+
+    const start = getStart();
+    const end = getEnd();
+
+    for (let i = start; i <= end; i++) {
+      pages.push(i.toString());
+    }
+
+    if (end < pageCount) {
+      pages.push('...', pageCount.toString());
     }
-    return pagination;
+
+    return pages;
   };
 
   return (
     <div className="property-results-pagination" {...otherProps}>
       <ul className="property-results-pagination__links">
         {/* Previous page */}
-        {hasPrevPage && (!noChevrons && !noPrevOrNextText) && (
+        {hasPrevPage && !noChevrons && !noPrevOrNextText && (
           <PropertyResultsPaginationItem
             previous
             pageNumber={currentPage - 1}
@@ -102,45 +134,28 @@ export default function PropertyResultsPagination({
           />
         )}
 
-        {/* First page */}
-        {pageCount > 1 && (
-          <PropertyResultsPaginationItem pageNumber={1} currentPage={currentPage} />
-        )}
-
-        {/* Ellipsis */}
-        {totalCount > paginationIncrements && (
-          <li className="property-results-pagination__item property-results-pagination__item--ellipsis">
-            <span className="property-results-pagination__ellipsis">&hellip;</span>
-          </li>
-        )}
-
-        {/* Pagination increments */}
-        {getPaginationIncrements().map((pageNumber) => (
-          <PropertyResultsPaginationItem
-            key={pageNumber}
-            pageNumber={pageNumber}
-            currentPage={currentPage}
-          />
-        ))}
-
-        {/* Ellipsis */}
-        {totalCount > paginationIncrements && (
-          <li className="property-results-pagination__item property-results-pagination__item--ellipsis">
-            <span className="property-results-pagination__ellipsis">&hellip;</span>
-          </li>
-        )}
-
-        {/* Total page count */}
-        {showIfPageCountIsOne && pageCount !== 0 ? (
-          <PropertyResultsPaginationItem pageNumber={pageCount} currentPage={currentPage} />
-        ) : (
-          pageCount > 1 && (
-            <PropertyResultsPaginationItem pageNumber={pageCount} currentPage={currentPage} />
-          )
-        )}
-
-        {/* Previous page */}
-        {hasNextPage && (!noChevrons && !noPrevOrNextText) && (
+        {generatePagination().map((page) => {
+          if (page === '...') {
+            // Ellipsis
+            return (
+              <li className="property-results-pagination__item property-results-pagination__item--ellipsis">
+                <span className="property-results-pagination__ellipsis">
+                  &hellip;
+                </span>
+              </li>
+            );
+          }
+          return (
+            <PropertyResultsPaginationItem
+              key={page}
+              pageNumber={parseInt(page, 10)}
+              currentPage={currentPage}
+            />
+          );
+        })}
+
+        {/* Next page */}
+        {hasNextPage && !noChevrons && !noPrevOrNextText && (
           <PropertyResultsPaginationItem
             next
             pageNumber={currentPage + 1}

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"