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

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.37",
+  "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/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"