homeflowjs 1.0.103 → 1.0.104

package/app/recaptcha.js

@@ -12,11 +12,14 @@ window.submitRecaptchaForm = (token) => {
 
   Homeflow.kickEvent('after_successful_recaptcha', form);
 
+  console.log('Appending recaptchaTokenField', recaptchaTokenField);
   form.appendChild(recaptchaTokenField);
   form.submit();
 };
 
 export default () => {
+  console.log('Recaptcha script loaded');
+
   window.addEventListener('DOMContentLoaded', () => {
     if (window.noRecaptcha) return null;
 
@@ -29,7 +32,7 @@ export default () => {
       'form[action="/user/send_to_friend"]',
     ];
 
-    const initUniqRecaptchaV2Wrapper = ({form, id}) => {
+    const initUniqRecaptchaV2Wrapper = ({ form, id }) => {
       const recaptchaId = id || Math.random().toString().substring(2);
       const formRecaptchaWrapper = document.createElement('div');
       formRecaptchaWrapper.classList.add('recaptcha-wrapper');
@@ -38,14 +41,21 @@ export default () => {
       form.appendChild(formRecaptchaWrapper);
 
       const onRecaptchaSubmit = () => {
+        console.log('Recaptcha V2 submitted');
+
         if (form.classList?.contains('async-recaptcha-submit')) {
+          console.log('Async form');
           const continueAsyncSubmission = new Event('async-recaptcha-submit');
           document.dispatchEvent(continueAsyncSubmission);
         } else {
+          console.log('Calling form.submit()', form);
           form.submit();
         }
+
+        console.log('After IF statement');
+
         Homeflow.kickEvent('after_successful_recaptcha', form);
-      }
+      };
 
       const widget = window.grecaptcha.render(`recaptcha-wrapper-${recaptchaId}`, {
         sitekey: '6Lf16S0UAAAAAL0YaWCLRhChd4Uk77b-4Ai0ZdRY',
@@ -53,61 +63,76 @@ export default () => {
         size: 'invisible',
       });
 
-      window.widgetIds =  window.widgetIds
+      console.log('window.widgetIds', window.widgetIds);
+
+      window.widgetIds = window.widgetIds
         ? [...window.widgetIds, widget]
-        : [widget]
+        : [widget];
 
       form.addEventListener('submit', (e) => {
+        console.log('Submit handler called...');
+
         if (e.target.classList.contains('hfjs-form-invalid')) {
           return;
         }
 
+        console.log('Preventing default...');
         e.preventDefault();
+
         Homeflow.set('submitted_form', e.target);
+        console.log('Running grecaptcha.execute...');
         grecaptcha.execute(widget);
       });
-    }
+    };
 
     const onRecaptchaV2Ready = (triggeredFormEl) => {
+      console.log('onRecaptchaV2Ready running');
+
       if (window.recaptchaLoadingScriptInterval) {
         clearInterval(window.recaptchaLoadingScriptInterval);
         window.recaptchaLoadingScriptInterval = undefined;
       }
 
       if (triggeredFormEl) {
-        initUniqRecaptchaV2Wrapper({form: triggeredFormEl})
+        initUniqRecaptchaV2Wrapper({ form: triggeredFormEl });
       } else {
         const forms = document.querySelectorAll(formSelectors.join(', '));
 
+        console.log('forms', forms);
+
         forms.forEach((form, i) => {
-          initUniqRecaptchaV2Wrapper({ form, id: i })
+          initUniqRecaptchaV2Wrapper({ form, id: i });
         });
       }
-    }
+    };
 
     const appendRecaptchaScript = (version) => {
       const srcConfig = {
         v2: 'https://www.google.com/recaptcha/api.js',
         v3: 'https://www.google.com/recaptcha/api.js?render=6LeKPOUUAAAAAEKNWIu2qkNwdOqVxH41v0D7fe-K',
-      }
+      };
 
       const recaptchaScript = document.createElement('script');
       recaptchaScript.src = srcConfig[version];
       recaptchaScript.id = 'recaptcha-script';
 
+      console.log('Appending recaptcha script...');
       document.body.appendChild(recaptchaScript);
 
       if (version === 'v2') {
-         window.recaptchaLoadingScriptInterval = setInterval(() => {
+        window.recaptchaLoadingScriptInterval = setInterval(() => {
+          console.log('Running setInterval callback...');
           if (window.grecaptcha?.render) {
-            onRecaptchaV2Ready()
+            console.log('Calling onRecaptchaV2Ready from inside interval callback...');
+            onRecaptchaV2Ready();
           }
         }, 300);
       }
-    }
+    };
 
     const initRecaptchaV3 = (form) => {
       form.addEventListener('submit', (e) => {
+        console.log('Recaptcha V3 submitted');
         if (!document.getElementById('g-recaptcha-response') || !document.getElementById('g-recaptcha-response').value) {
           e.preventDefault();
           Homeflow.set('submitted_form', e.target);
@@ -118,22 +143,23 @@ export default () => {
         }
       });
       form.classList.add('has-recaptcha');
-    }
+    };
 
     const handleRecaptchaV3ForTargetForm = (targetFormEl) => {
       if (!document.getElementById('recaptcha-script')) {
-        appendRecaptchaScript('v3')
+        appendRecaptchaScript('v3');
       }
-      
-      initRecaptchaV3(targetFormEl)
-    }
+
+      initRecaptchaV3(targetFormEl);
+    };
 
     function addRecaptchaV3(targetFormEl) {
       for (let i = 0; i < formSelectors.length; i++) {
         if (targetFormEl) {
-          handleRecaptchaV3ForTargetForm(targetFormEl)
+          handleRecaptchaV3ForTargetForm(targetFormEl);
         } else {
           const formInputs = document.querySelectorAll(`${formSelectors[i]} input, ${formSelectors[i]} textarea`);
+
           formInputs.forEach((input) => {
             input.addEventListener('focus', () => {
               if (!document.getElementById('recaptcha-script')) {
@@ -145,7 +171,7 @@ export default () => {
 
         const forms = document.querySelectorAll(formSelectors[i]);
         forms.forEach((form) => {
-          handleRecaptchaV3ForTargetForm(form)
+          handleRecaptchaV3ForTargetForm(form);
         });
       }
     }
@@ -153,31 +179,34 @@ export default () => {
     const handleRecaptchaV2ForTargetForm = (targetFormEl) => {
       const hasRecaptcha = targetFormEl?.querySelector('.recaptcha-wrapper');
 
-      if(hasRecaptcha) {
+      if (hasRecaptcha) {
         return;
       }
-      
+
       if (!document.getElementById('recaptcha-script')) {
-        appendRecaptchaScript('v2')
+        appendRecaptchaScript('v2');
       }
       if (window.grecaptcha) {
-        onRecaptchaV2Ready(targetFormEl)
+        onRecaptchaV2Ready(targetFormEl);
       }
-    }
+    };
 
     function addRecaptchaV2(targetFormEl) {
       if (targetFormEl) {
-        handleRecaptchaV2ForTargetForm(targetFormEl)
+        handleRecaptchaV2ForTargetForm(targetFormEl);
       } else {
         for (let i = 0; i < formSelectors.length; i++) {
           const formInputs = document.querySelectorAll(
-            `${formSelectors[i]} input, ${formSelectors[i]} textarea, ${formSelectors[i]} select`
+            `${formSelectors[i]} input, ${formSelectors[i]} textarea, ${formSelectors[i]} select`,
           );
+
+          console.log('formInputs', formInputs);
           formInputs.forEach((input) => {
             input.addEventListener('focusin', (event) => {
               event.stopPropagation();
               if (!document.getElementById('recaptcha-script')) {
-                appendRecaptchaScript('v2')
+                console.log('Calling appendRecaptchaScript...');
+                appendRecaptchaScript('v2');
               }
             });
           });
@@ -186,12 +215,13 @@ export default () => {
     }
 
     const initRecaptcha = (targetFormEl) => {
+      console.log('Inside initRecaptcha');
       if (Homeflow.get('recaptcha_version') === 3) {
         addRecaptchaV3(targetFormEl);
       } else {
         addRecaptchaV2(targetFormEl);
       }
-    }
+    };
 
     const handleRecaptchaRelatedBodyFocus = (event) => {
       event.stopPropagation();
@@ -205,13 +235,18 @@ export default () => {
       if (isFormElementFocused && isRecaptchaForm) {
         initRecaptcha(targetFormEl);
       }
-    }
+    };
 
     const initDynamicallyOpenFormsRecaptcha = () => {
       document.body.addEventListener('focusin', handleRecaptchaRelatedBodyFocus);
-    }
+    };
 
+    console.log('Calling initDynamicallyOpenFormsRecaptcha...');
     initDynamicallyOpenFormsRecaptcha();
-    initRecaptcha()
+
+    console.log('Calling initRecaptcha...');
+    initRecaptcha();
+
+    return null;
   });
 };

package/instant-valuation/property-results-pagination.styles.scss

@@ -0,0 +1,3 @@
+body {
+  background-color: green !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.103",
+  "version": "1.0.104",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/search/index.js

@@ -15,6 +15,7 @@ import SavedSearch from './saved-search/saved-search.component';
 import propertySearch from './property-search/property-search';
 import generateSearchDescription from './saved-search/generate-description';
 import TextSearchInput from './text-search/text-search.component';
+import PropertyTypeSelect from './property-type-select/property-type-select.component';
 
 export {
   SearchForm,
@@ -34,4 +35,5 @@ export {
   SaveSearchButton,
   SavedSearch,
   propertySearch,
+  PropertyTypeSelect,
 };

package/search/property-type-select/property-type-select.component.jsx

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+import Select from 'react-dropdown';
+import { useSelector, useDispatch } from 'react-redux';
+import { addTag, removeTag } from '../../actions/search.actions';
+import { capitalizeFirstLetter } from '../../utils';
+
+const ReactSelect = ({
+  className,
+  styles,
+  propertyTypes,
+  placeholder,
+  selectedType,
+  onChange,
+}) => {
+
+  const types = useMemo(
+    () => propertyTypes.map((type) => ({ value: type, label: capitalizeFirstLetter(type) })),
+    [propertyTypes]
+  );
+
+  const searchTypes = selectedType
+    ? [{ value: '', label: 'Property type' }, ...types]
+    : types;
+
+  return (
+    <Select
+      classNamePrefix="react-select"
+      className={className}
+      styles={styles}
+      options={searchTypes}
+      placeholder={placeholder || 'Property type'}
+      value={searchTypes.find((type) => type.value === selectedType) || null}
+      onChange={(opt) => onChange(opt.value)}
+      isSearchable={false}
+    />
+  );
+};
+
+const PropertyTypeSelect = ({ propertyTypes, className, placeholder, styles }) => {
+  const dispatch = useDispatch();
+  const tags = useSelector((state) => state.search.currentSearch.tags) || [];
+  const selectedType = propertyTypes.find((type) => tags.includes(type)) || null;
+
+  const handleChange = (newType) => {
+    const previousType = propertyTypes.find((option) => tags.includes(option)) || null;
+
+    if (previousType) {
+      dispatch(removeTag(previousType));
+    }
+
+    if (newType) {
+      dispatch(addTag(newType));
+    }
+  };
+
+  return (
+    <ReactSelect
+      className={className}
+      styles={styles}
+      propertyTypes={propertyTypes}
+      placeholder={placeholder}
+      selectedType={selectedType}
+      onChange={handleChange}
+    />
+  );
+};
+
+export default PropertyTypeSelect;