homeflowjs 0.9.2 → 0.9.5

package/actions/user.actions.js

@@ -92,6 +92,8 @@ export const createUser = (payload) => (dispatch, getState) => {
         });
       }
 
+      Homeflow.kickEvent('user_signed_up');
+
       return Promise.all(promises);
     })
     .then(() => dispatch(fetchUser()));

package/articles/articles-grid.component.jsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Loader from '../shared/loader.component';
+
+const ArticlesGrid = ({
+  handleIsLoading,
+  pageSize,
+  gridClass,
+  articleItem,
+  loadMoreButtonContainerClass,
+  loadMoreButtonClass,
+  loadMoreButtonText,
+  // eslint-disable-next-line react/prop-types
+  customLoader,
+}) => {
+  const [pagination, setPagination] = useState({});
+  const [articles, setArticles] = useState([]);
+  const [page, setPage] = useState(1);
+  const [showMore, setShowMore] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+
+  const agent = `${window.location.protocol}//${window.location.host}`;
+  const path = window.location.pathname;
+  const topicPath = '/articles/topic-';
+
+  const topic = path.includes(topicPath)
+    ? `&topic=${path.slice(path.indexOf(topicPath) + topicPath.length).replace('#/', '')}`
+    : '';
+  const url = `${agent}/articles.ljson?page=${page}&page_size=${pageSize}${topic}`;
+
+  const loader = () => {
+    if (customLoader) return customLoader;
+    return <Loader containerClass={loadMoreButtonContainerClass} />;
+  };
+
+  const fetchArticles = (firstRender = false) => {
+    fetch(url)
+      .then((response) => response.json())
+      .then((json) => {
+        setArticles((prev) => [...prev, ...json.articles]);
+        setPagination(json.pagination);
+        setShowMore(json.pagination.has_next_page);
+        setPage(json.pagination.current_page + 1);
+        setIsLoading(false);
+        setLoadingMore(false);
+        if (handleIsLoading && firstRender) handleIsLoading(false);
+      })
+      .catch((e) => console.log('error', e));
+  };
+
+  const loadMore = () => {
+    if (pagination.has_next_page) {
+      setLoadingMore(true);
+      fetchArticles();
+    }
+    return false;
+  };
+
+  useEffect(() => {
+    if (handleIsLoading) handleIsLoading(true);
+    fetchArticles(true);
+  }, []);
+
+  return (
+    <>
+      <div className={gridClass}>
+        {articles.map((article) => articleItem(article))}
+      </div>
+      <div className={loadMoreButtonContainerClass}>
+        {(showMore && !isLoading) && (
+          <>
+            {loadingMore ? (
+              loader()
+            ) : (
+              <button
+                type="button"
+                onClick={loadMore}
+                className={loadMoreButtonClass}
+              >
+                {loadMoreButtonText}
+              </button>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+ArticlesGrid.propTypes = {
+  gridClass: PropTypes.string.isRequired,
+  articleItem: PropTypes.elementType.isRequired,
+  handleIsLoading: PropTypes.elementType,
+  loadMoreButtonClass: PropTypes.string,
+  loadMoreButtonText: PropTypes.string,
+  loadMoreButtonContainerClass: PropTypes.string,
+  pageSize: PropTypes.number,
+};
+
+ArticlesGrid.defaultProps = {
+  loadMoreButtonClass: '',
+  loadMoreButtonContainerClass: '',
+  loadMoreButtonText: 'Load more',
+  handleIsLoading: null,
+  pageSize: 12,
+};
+
+export default ArticlesGrid;

package/articles/index.js

@@ -0,0 +1,5 @@
+import ArticlesGrid from './articles-grid.component';
+
+export {
+  ArticlesGrid,
+};

package/instant-valuation/instant-valuation/instant-valuation.component.jsx

@@ -239,6 +239,8 @@ class InstantValuation extends Component {
 
     const largeModalStyles = { width: 1000, height: 800 };
 
+    Homeflow.kickEvent('valuation_opened');
+
     return (
       <div
         className="instant-valuation hf-modal"

package/instant-valuation/result-step/result-step.component.jsx

@@ -22,6 +22,10 @@ const ResultStep = ({
     getValuation();
   }, []);
 
+  useEffect(() => {
+    if (valuation) Homeflow.kickEvent('valuation_successful');
+  }, [valuation])
+
   const formatPrice = (price) => (
     `£${Math.round(price)}${selectedChannel === 'lettings' ? '/month' : ''}`
       .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')
@@ -170,72 +174,3 @@ const ResultStep = ({
 };
 
 export default ResultStep;
-
-// doesn't work
-// /valuations.json?search%5Bpaon%5D=&search%5Bpostcode%5D=bn2+9sq&search%5Bproperty_type%5D=t&search%5Bbedrooms%5D=2&lead%5Bfirst_name%5D=fwkjenk&lead%5Blast_name%5D=kjnfkwejf&lead%5Btel_home%5D=07589347534&lead%5Bemail%5D=kjnfkjew%40fkjwenkfj.com&lead%5Bmoving_plans%5D=3+months&lead%5Breason%5D=selling&lead%5Bplans%5D=3+months&lead%5Bfull_address%5D=1+Coleman+Street%2C++Brighton%2C++East+Sussex&lead%5Bis_branch_lead%5D=&lead%5Bis_valuation_request%5D=1&lead%5Bbranch_id%5D=&lead%5Baccount_confirmation_status%5D=false&lead%5Bopt_in_marketing%5D=false&lead%5Bopt_in_terms%5D=true&lead%5Bopt_in_marketing_statement%5D=&lead%5Bopt_in_marketing_url%5D=http%3A%2F%2Flocalhost%3A3000%2F%23%2Fvaluation&lead%5Bcontact_by_phone%5D=false&lead%5Bcontact_by_email%5D=false&lead%5Bcontact_by_sms%5D=false&lead%5Bcontact_by_post%5D=false&search%5Bproperties%5D%5B%5D=13713068
-
-// works
-// /valuations.json?search%5Bpaon%5D=1&search%5Bpostcode%5D=BN2+9SQ&search%5Bproperties%5D%5B%5D=13713078&search%5Bproperty_type%5D=t&search%5Bbedrooms%5D=1&lead%5Bfirst_name%5D=jfkwenk&lead%5Blast_name%5D=jkfnwekf&lead%5Btel_home%5D=07589437534&lead%5Bemail%5D=kjnfwke%40fkmewklf.com&lead%5Bmoving_plans%5D=asap&lead%5Breason%5D=selling&lead%5Bplans%5D=asap&lead%5Bfull_address%5D=1+Coleman+Street%2C++Brighton%2C++East+Sussex&lead%5Baccount_confirmation_status%5D=false&lead%5Bopt_in_marketing%5D=false&lead%5Bopt_in_terms%5D=true&lead%5Bopt_in_marketing_statement%5D=+Get+emails+with+the+latest+news+and+information+on+the+local+property+market%2C+our+products+and+services.+You+can+unsubscribe+at+any+time.+&lead%5Bopt_in_marketing_url%5D=https%3A%2F%2Fsawyerandco.agent.staging.homeflow.co.uk%2F%23%2Fvaluation&lead%5Bcontact_by_phone%5D=false&lead%5Bcontact_by_email%5D=false&lead%5Bcontact_by_sms%5D=false&lead%5Bcontact_by_post%5D=false
-
-// doesn't work
-// search[paon]:
-// search[postcode]: bn2 9sq
-// search[property_type]: t
-// search[bedrooms]: 2
-// lead[first_name]: fwkjenk
-// lead[last_name]: kjnfkwejf
-// lead[tel_home]: 07589347534
-// lead[email]: kjnfkjew@fkjwenkfj.com
-// lead[moving_plans]: 3 months
-// lead[reason]: selling
-// lead[plans]: 3 months
-// lead[full_address]: 1 Coleman Street, Brighton, East Sussex
-// lead[is_branch_lead]:
-// lead[is_valuation_request]: 1
-// lead[branch_id]:
-// lead[account_confirmation_status]: false
-// lead[opt_in_marketing]: false
-// lead[opt_in_terms]: true
-// lead[opt_in_marketing_statement]:
-// lead[opt_in_marketing_url]: http://localhost:3000/#/valuation
-// lead[contact_by_phone]: false
-// lead[contact_by_email]: false
-// lead[contact_by_sms]: false
-// lead[contact_by_post]: false
-// search[properties][]: 13713068
-
-// works
-// search[paon]: 1
-// search[postcode]: BN2 9SQ
-// search[properties][]: 13713078
-// search[property_type]: t
-// search[bedrooms]: 1
-// lead[first_name]: jfkwenk
-// lead[last_name]: jkfnwekf
-// lead[tel_home]: 07589437534
-// lead[email]: kjnfwke@fkmewklf.com
-// lead[moving_plans]: asap
-// lead[reason]: selling
-// lead[plans]: asap
-// lead[full_address]: 1 Coleman Street, Brighton, East Sussex
-// lead[account_confirmation_status]: false
-// lead[opt_in_marketing]: false
-// lead[opt_in_terms]: true
-// lead[opt_in_marketing_statement]: Get emails with the latest news and information on the local property market, our products and services.You can unsubscribe at any time.
-// lead[opt_in_marketing_url]: https://sawyerandco.agent.staging.homeflow.co.uk/#/valuation
-// lead[contact_by_phone]: false
-// lead[contact_by_email]: false
-// lead[contact_by_sms]: false
-// lead[contact_by_post]: false
-
-// doesn't work
-// search[properties][]: 13713068
-
-// does work
-// search[properties][]: 13713078
-
-// works (without similar props)
-// http://localhost:3000/valuations.json?search%5Bpaon%5D=&search%5Bpostcode%5D=bn2+9sq&search%5Bproperty_type%5D=t&search%5Bbedrooms%5D=2&lead%5Bfirst_name%5D=efjwek&lead%5Blast_name%5D=fwenkfn&lead%5Btel_home%5D=07589347594&lead%5Bemail%5D=fewjkf%40fwenfkl.com&lead%5Bmoving_plans%5D=3+months&lead%5Breason%5D=selling&lead%5Bplans%5D=3+months&lead%5Bfull_address%5D=1+Coleman+Street%2C++Brighton%2C++East+Sussex&lead%5Bis_branch_lead%5D=&lead%5Bis_valuation_request%5D=1&lead%5Bbranch_id%5D=&lead%5Baccount_confirmation_status%5D=false&lead%5Bopt_in_marketing%5D=false&lead%5Bopt_in_terms%5D=true&lead%5Bopt_in_marketing_statement%5D=&lead%5Bopt_in_marketing_url%5D=http%3A%2F%2Flocalhost%3A3000%2F%23%2Fvaluation&lead%5Bcontact_by_phone%5D=false&lead%5Bcontact_by_email%5D=false&lead%5Bcontact_by_sms%5D=false&lead%5Bcontact_by_post%5D=false
-
-// doesn't work (with similar props)
-// http://localhost:3000/valuations.json?search%5Bpaon%5D=&search%5Bpostcode%5D=bn2+9sq&search%5Bproperty_type%5D=t&search%5Bbedrooms%5D=2&lead%5Bfirst_name%5D=fjwenjkf&lead%5Blast_name%5D=fjknwekjf&lead%5Btel_home%5D=078593473434&lead%5Bemail%5D=kfnkwejf%40ewkjnfk.com&lead%5Bmoving_plans%5D=3+months&lead%5Breason%5D=selling&lead%5Bplans%5D=3+months&lead%5Bfull_address%5D=1+Coleman+Street%2C++Brighton%2C++East+Sussex&lead%5Bis_branch_lead%5D=&lead%5Bis_valuation_request%5D=1&lead%5Bbranch_id%5D=&lead%5Baccount_confirmation_status%5D=false&lead%5Bopt_in_marketing%5D=false&lead%5Bopt_in_terms%5D=true&lead%5Bopt_in_marketing_statement%5D=&lead%5Bopt_in_marketing_url%5D=http%3A%2F%2Flocalhost%3A3000%2F%23%2Fvaluation&lead%5Bcontact_by_phone%5D=false&lead%5Bcontact_by_email%5D=false&lead%5Bcontact_by_sms%5D=false&lead%5Bcontact_by_post%5D=false&search%5Bproperties%5D%5B%5D=13713068&search%5Bproperties%5D%5B%5D=13713067&search%5Bproperties%5D%5B%5D=13669747

package/package.json

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

package/search/saved-search/saved-search.component.jsx

@@ -17,6 +17,9 @@ const SavedSearch = (props) => {
     deleteButtonClass,
     buttonSpanClass,
     userLoggedIn,
+    frequencyLabel,
+    visitSearchLabel,
+    removeSearchLabel,
   } = props;
 
   const visitSearch = (e) => {
@@ -41,7 +44,7 @@ const SavedSearch = (props) => {
       <div className="saved-search__body">
         {userLoggedIn && (
           <>
-            Email me matching properties:
+            {frequencyLabel}
             <select
               className={`saved-search__frequency ${selectClass}`}
               onChange={handleFrequencyChange}
@@ -60,7 +63,7 @@ const SavedSearch = (props) => {
           onClick={visitSearch}
           className={visitButtonClass}
         >
-          <span className={buttonSpanClass}>Visit</span>
+          <span className={buttonSpanClass}>{visitSearchLabel}</span>
         </button>
 
         <button
@@ -68,7 +71,7 @@ const SavedSearch = (props) => {
           onClick={removeSearch}
           className={deleteButtonClass}
         >
-          <span className={buttonSpanClass}>Remove</span>
+          <span className={buttonSpanClass}>{removeSearchLabel}</span>
         </button>
       </div>
     </div>
@@ -84,6 +87,9 @@ SavedSearch.propTypes = {
   deleteButtonClass: PropTypes.string,
   buttonSpanClass: PropTypes.string,
   userLoggedIn: PropTypes.bool.isRequired,
+  frequencyLabel: PropTypes.string,
+  visitSearchLabel: PropTypes.string,
+  removeSearchLabel: PropTypes.string,
 };
 
 SavedSearch.defaultProps = {
@@ -91,7 +97,10 @@ SavedSearch.defaultProps = {
   visitButtonClass: '',
   deleteButtonClass: '',
   buttonSpanClass: '',
-}
+  frequencyLabel: 'Email me matching properties:',
+  visitSearchLabel: 'Visit',
+  removeSearchLabel: 'Remove',
+};
 
 const mapStateToProps = (state) => ({
   userLoggedIn: !!state.user.currentUser.user_id,

package/shared/loader.component.jsx

@@ -1,17 +1,30 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import './loader.styles.scss';
 
-const Loader = ({ className, message }) => (
-  <div>
-    <div className={`la-ball-beat la-dark la-2x ${className ? className : ''}`}>
-      <div></div>
-      <div></div>
-      <div></div>
+const Loader = ({ containerClass, className, message }) => (
+  <div className={containerClass}>
+    <div className={`la-ball-beat la-dark la-2x ${className}`}>
+      <div />
+      <div />
+      <div />
     </div>
 
     {message && <p style={{ marginTop: '10px' }}>{message}</p>}
   </div>
 );
 
+Loader.propTypes = {
+  className: PropTypes.string,
+  message: PropTypes.string,
+  containerClass: PropTypes.string,
+};
+
+Loader.defaultProps = {
+  className: '',
+  message: '',
+  containerClass: '',
+};
+
 export default Loader;