homeflowjs 0.9.16 → 0.9.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.9.16",
+  "version": "0.9.17",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {

package/reducers/user.reducer.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import UserActionTypes from '../actions/user.types';
 
 // currentUser is user loaded from server
@@ -5,7 +6,7 @@ import UserActionTypes from '../actions/user.types';
 
 export const INITIAL_USER_DATA = {
   address_2: null,
-  address_html: "",
+  address_html: '',
   agency: { hfpe_enabled: null, name: null, email: null },
   county: null,
   custom_marketing_preferences: null,
@@ -29,6 +30,7 @@ export const INITIAL_USER_DATA = {
   user_id: null,
   password: '',
   password_confirmation: '',
+  marketing_preferences: {},
 };
 
 // set both currentUser and localUser to same initial data
@@ -43,7 +45,7 @@ const INITIAL_STATE = {
   userCredentials: {
     email: '',
     password: '',
-  }
+  },
 };
 
 // TODO: load user from localStorage if not logged in
@@ -56,12 +58,55 @@ const userReducer = (state = INITIAL_STATE, action) => {
         currentUser: action.payload,
       };
     case UserActionTypes.SET_LOCAL_USER:
+      if (Object.prototype.hasOwnProperty.call(action.payload, 'opt_in_terms')) {
+        return {
+          ...state,
+          localUser: {
+            ...state.localUser,
+            marketing_preferences: {
+              ...state.localUser.marketing_preferences,
+              ...action.payload,
+            },
+          },
+        };
+      }
+      if (Object.prototype.hasOwnProperty.call(action.payload, 'opt_in_marketing_url')) {
+        /**
+         * opt_in_marketing_statement opt_in_marketing and opt_in_marketing_url belong all to
+         * the same object, this will update the url and value of marketing_preferences if
+         * opted in only, the statement will get added by the UserRegisterForm component
+         * since it has to be registered regardless the choosen option.
+        */
+
+        const { opt_in_marketing_url } = action.payload;
+        const marketingPreferencesObj = {
+          opt_in_marketing: '',
+          opt_in_marketing_url: '',
+        };
+
+        if (opt_in_marketing_url) {
+          marketingPreferencesObj.opt_in_marketing = 'on';
+
+          marketingPreferencesObj.opt_in_marketing_url = opt_in_marketing_url;
+        }
+
+        return {
+          ...state,
+          localUser: {
+            ...state.localUser,
+            marketing_preferences: {
+              ...state.localUser.marketing_preferences,
+              ...marketingPreferencesObj,
+            },
+          },
+        };
+      }
       return {
         ...state,
         localUser: {
           ...state.localUser,
           ...action.payload,
-         },
+        },
       };
     case UserActionTypes.SET_USER_CREDENTIALS:
       return {
@@ -74,6 +119,6 @@ const userReducer = (state = INITIAL_STATE, action) => {
     default:
       return state;
   }
-}
+};
 
 export default userReducer;

package/search/price-select/price-select.component.jsx

@@ -108,11 +108,11 @@ const PriceSelect = (props) => {
   const selectedPrice = type === 'min' ? minPrice : maxPrice;
 
   if (type === 'max' && minPrice) {
-    prices = prices.filter(price => price > minPrice);
+    prices = prices.filter(price => price >= minPrice);
   }
 
   if (type === 'min' && maxPrice) {
-    prices = prices.filter(price => price < maxPrice);
+    prices = prices.filter(price => price <= maxPrice);
   }
 
   if (reactSelect) {

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

@@ -44,7 +44,7 @@ describe('PriceSelect', () => {
     const wrapper = mount(<PriceSelect {...testProps} />);
 
     // includes the default unselected option
-    expect(wrapper.find('option').length).toEqual(2);
+    expect(wrapper.find('option').length).toEqual(3);
   });
 
   it('removes higher prices for min when selected for max', () => {
@@ -60,7 +60,7 @@ describe('PriceSelect', () => {
     const wrapper = mount(<PriceSelect {...testProps} />);
 
     // includes the default unselected option
-    expect(wrapper.find('option').length).toEqual(3);
+    expect(wrapper.find('option').length).toEqual(4);
   });
 
   it('calls the setSearchField prop on change', () => {

package/user/marketing-preferences-form/marketing-preferences-form.component.jsx

@@ -1,24 +1,49 @@
 import React, { useState } from 'react';
-import { connect } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
+import notify from '../../app/notify';
+import { setCurrentUser } from '../../actions/user.actions';
 
-const MarketingPreferencesForm = ({ user, buttonClass, buttonSpanClass }) => {
+const MarketingPreferencesForm = ({ buttonClass, buttonSpanClass }) => {
+  const user = useSelector((state) => state.user.currentUser);
   const [optInMarketing, setOptInMarketing] = useState(user.is_opted_in_to_marketing);
   const contactOption = user.is_opted_in_to_marketing ? 'OPTED IN to' : 'OPTED OUT of';
+  const dispatch = useDispatch();
 
   const handleChange = (e) => {
     setOptInMarketing(e.target.value === 'optin');
   };
 
   const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!user.marketing_preference_id) {
+      notify('Please sign in to update your preferences', 'error');
+      return;
+    }
+
     fetch(`/marketing_preferences/${user.marketing_preference_id}`, {
       method: 'PUT',
-      body: {
-        opt_in_marketing_at: e.target.value,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        opt_in_marketing_at: optInMarketing ? 'optin' : 'optout',
         opt_in_marketing_url: document.URL,
         user_id: user.user_id,
-      },
-    }).then((res) => console.log(res));
+      }),
+    }).then((res) => {
+      if (res.ok && (res.status === 200 || res.status === 204)) {
+        dispatch(setCurrentUser({
+          ...user,
+          is_opted_in_to_marketing: optInMarketing,
+        }));
+        notify('Your preferences have been successfully updated', 'success');
+      } else {
+        throw res;
+      }
+    }).catch((error) => {
+      notify('There was an error updating your preferences', 'error');
+      console.error(error);
+    });
   };
 
   return (
@@ -66,7 +91,6 @@ const MarketingPreferencesForm = ({ user, buttonClass, buttonSpanClass }) => {
 };
 
 MarketingPreferencesForm.propTypes = {
-  user: PropTypes.object.isRequired,
   buttonClass: PropTypes.string,
   buttonSpanClass: PropTypes.string,
 };
@@ -76,13 +100,7 @@ MarketingPreferencesForm.defaultProps = {
   buttonSpanClass: '',
 };
 
-const mapStateToProps = (state) => ({
-  user: state.user.currentUser,
-});
-
-export default connect(
-  mapStateToProps,
-)(MarketingPreferencesForm);
+export default MarketingPreferencesForm;
 
 // From C2
 // $.ajax({

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

@@ -6,7 +6,9 @@ import PropTypes from 'prop-types';
 import { setCurrentUser } from '../../actions/user.actions';
 import notify from '../../app/notify';
 
-const ResetPasswordForm = ({ user, setCurrentUser, inputClass, buttonClass, buttonSpanClass }) => {
+const ResetPasswordForm = ({
+  user, setCurrentUser, inputClass, buttonClass, buttonSpanClass, pattern, patternTitle,
+}) => {
   const [password, setPassword] = useState('');
   const [passwordConfirmation, setPasswordConfirmation] = useState('');
   const history = useHistory();
@@ -39,6 +41,8 @@ const ResetPasswordForm = ({ user, setCurrentUser, inputClass, buttonClass, butt
         value={password}
         onChange={(e) => setPassword(e.target.value)}
         className={inputClass}
+        pattern={pattern}
+        title={patternTitle}
       />
       <input
         name="password_confirmation"
@@ -47,6 +51,8 @@ const ResetPasswordForm = ({ user, setCurrentUser, inputClass, buttonClass, butt
         value={passwordConfirmation}
         onChange={(e) => setPasswordConfirmation(e.target.value)}
         className={inputClass}
+        pattern={pattern}
+        title={patternTitle}
       />
 
       <button
@@ -65,12 +71,16 @@ ResetPasswordForm.propTypes = {
   inputClass: PropTypes.string,
   buttonClass: PropTypes.string,
   buttonSpanClass: PropTypes.string,
+  pattern: PropTypes.string,
+  patternTitle: PropTypes.string,
 };
 
 ResetPasswordForm.defaultProps = {
   inputClass: '',
   buttonClass: '',
   buttonSpanClass: '',
+  pattern: null,
+  patternTitle: null,
 };
 
 const mapStateToProps = (state) => ({

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

@@ -21,7 +21,10 @@ const SignOutButton = ({ signOutUser, children, ...otherProps }) => (
 
 SignOutButton.propTypes = {
   signOutUser: PropTypes.func.isRequired,
-  children: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+  ]).isRequired,
 };
 
 const mapDispatchToProps = {
@@ -31,4 +34,4 @@ const mapDispatchToProps = {
 export default connect(
   null,
   mapDispatchToProps,
-)(SignOutButton)
+)(SignOutButton);

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

@@ -1,29 +1,49 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
+import PropTypes from 'prop-types';
+
 import { setLocalUser } from '../../actions/user.actions';
 
-const UserInput = ({ name, value, setLocalUser, ...otherProps }) => {
+const UserInput = ({
+  name, value, unmappedValue, setLocalUser, type, ...otherProps
+}) => {
   const handleChange = (e) => {
-    setLocalUser({ [name]: e.target.value });
+    let { value } = e.target;
+    if (type === 'checkbox') value = e.target.checked ? value : '';
+    setLocalUser({ [name]: value });
   };
 
-  let type = 'text';
-  if (name === 'password' || name === 'password_confirmation') type = 'password';
-  if (name === 'email') type = 'email';
+  let inputType = type;
+  if (name === 'password' || name === 'password_confirmation') inputType = 'password';
+  if (name === 'email') inputType = 'email';
 
   return (
     <input
       id={`user-input-${name}`}
-      type={type}
+      type={inputType}
       name={name}
-      value={value}
+      value={unmappedValue || value}
       onChange={handleChange}
       {...otherProps}
     />
   );
 };
 
+UserInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  setLocalUser: PropTypes.func.isRequired,
+  type: PropTypes.string,
+  unmappedValue: PropTypes.string,
+  // eslint-disable-next-line react/require-default-props
+  value: PropTypes.any,
+};
+
+UserInput.defaultProps = {
+  type: 'text',
+  unmappedValue: null,
+};
+
 const mapStateToProps = (state, ownProps) => ({
   value: state.user.localUser[ownProps.name],
 });
@@ -35,4 +55,4 @@ const mapDispatchToProps = {
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
-)(UserInput)
+)(UserInput);

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

@@ -14,6 +14,7 @@ const UserRegisterForm = (props) => {
     createUser,
     setLoading,
     doNotContact,
+    marketingStatement,
     ...otherProps
   } = props;
 
@@ -28,6 +29,9 @@ const UserRegisterForm = (props) => {
     e.preventDefault();
 
     const userParams = doNotContact ? { ...localUser, do_not_contact: 1 } : localUser;
+    userParams.marketing_preferences = {
+      ...localUser.marketing_preferences, opt_in_marketing_statement: marketingStatement,
+    };
 
     if (validateForm()) {
       setLoading({ userRegister: true });
@@ -64,13 +68,15 @@ UserRegisterForm.propTypes = {
   createUser: PropTypes.func.isRequired,
   setLoading: PropTypes.func.isRequired,
   doNotContact: PropTypes.bool,
+  marketingStatement: PropTypes.string,
 };
 
 UserRegisterForm.defaultProps = {
   doNotContact: false,
+  marketingStatement: 'Marketing preferences communications', // TODO: get generic message and all themes to supply statement.
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   localUser: state.user.localUser,
 });