homeflowjs 1.0.68 → 1.0.70

package/hooks/use-intersection-observer.js

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import { isFunction } from '../utils';
+
+/**
+ * Custom hook to observe the intersection of a target element with the viewport.
+ *
+ * @param {Object} params - Parameters for the hook.
+ * @param {HTMLElement|React.RefObject} params.target - The target element or a React ref to observe.
+ * @param {IntersectionObserverInit} [params.options={}] - Options for the IntersectionObserver (e.g., root, rootMargin, threshold).
+ * @param {Function} [params.onIntersect] - Callback function to execute when the target element intersects with the viewport.
+ * 
+ * @returns {boolean} - A boolean indicating whether the target element is currently intersecting with the viewport.
+ */
+const useIntersectionObserver = ({ target, options = {}, onIntersect }) => {
+  const [isIntersecting, setIsIntersecting] = useState(false);
+
+  useEffect(() => {
+    if (!target) return;
+
+    let targetElement = target;
+    // If `target` is a ref, get the current DOM element
+    if (target?.current) {
+      targetElement = target.current;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        const intersecting = entry.isIntersecting;
+        setIsIntersecting(intersecting);
+
+        // Call the callback if provided and isIntersecting is true
+        if (intersecting && isFunction(onIntersect)) {
+          onIntersect();
+        }
+      },
+      options
+    );
+
+    observer.observe(targetElement);
+
+    // Cleanup observer on component unmount
+    return () => {
+      observer.disconnect();
+    };
+  }, [target, options, onIntersect]);
+
+  return isIntersecting;
+};
+
+export default useIntersectionObserver;

package/hooks/use-scroll-to.hook.js

@@ -1,8 +1,8 @@
-import { useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { isFunction } from '../utils';
+import useIntersectionObserver from './use-intersection-observer';;
 
-const scrollToTarget = (target, { yOffset = 0, additionalYOffset = 0 } = {}) => {
-
+const getTargetElementHelper = (target) => {
   // If target is chunk ID
   let targetElement;
   if (!isNaN(target)) {
@@ -15,29 +15,38 @@ const scrollToTarget = (target, { yOffset = 0, additionalYOffset = 0 } = {}) =>
   if (!targetElement) targetElement = document.querySelector(`.${target}`);
   if (!targetElement) targetElement = document.querySelector(`#${target}`);
 
-  if (targetElement) {
-    let verticalOffset = 0;
-    if (typeof yOffset === 'number') {
-      verticalOffset = yOffset;
-    } else if (isFunction(yOffset)) {
-      const value = yOffset();
-      if (typeof value === 'number') {
-        verticalOffset = value;
-      }
-    }
-    if(additionalYOffset) {
-      verticalOffset = verticalOffset + parseInt(additionalYOffset, 10);
-    }
+  return targetElement;
+}
 
-    let y = 0;
-    const targetTop = targetElement.getBoundingClientRect().top;
-    if(targetTop > 0) y =
-      targetElement.getBoundingClientRect().top +
-      window.pageYOffset +
-      verticalOffset;
-    window.scrollTo({ top: y, behavior: 'smooth' });
-    history.scrollRestoration = 'manual';
+const scrollToTarget = ({ targetElement, yOffset = 0, additionalYOffset = 0 } = {}, signal) => {
+  if(!targetElement) return;  
+
+  let verticalOffset = 0;
+  if (typeof yOffset === 'number') {
+    verticalOffset = yOffset;
+  } else if (isFunction(yOffset)) {
+    const value = yOffset();
+    if (typeof value === 'number') {
+      verticalOffset = value;
+    }
   }
+  if(additionalYOffset) {
+    verticalOffset = verticalOffset + parseInt(additionalYOffset, 10);
+  }
+
+  /**
+   * Scroll to the target element
+   * Note: when using getBoundingClientRect(), the position of the div will
+   * change whenever you scroll on the page. To get the absolute position of
+   * the element on the page, not relative to the window,we need to add the
+   * number of scrolled pixels to the element’s window location using scrollY:
+   */
+  const rect = targetElement.getBoundingClientRect();
+  window.scroll({
+    top: rect.top + window.scrollY + verticalOffset,
+    behavior: 'smooth',
+    ...(signal && { signal: signal }), // This is used to abort the scroll via a trigger in the useIntersectionObserver
+  });
 };
 
 const getURLParams = (hash) => {
@@ -46,37 +55,111 @@ const getURLParams = (hash) => {
   return { target, yOffsetFromURLParams: yOffset };
 };
 
-function handleScrollToClick(options) {
-  // eslint-disable-next-line func-names
-  return function () {
-    const { target, yOffsetFromURLParams } = getURLParams(this.hash);
-    if (target) {
-      scrollToTarget(target, {
-        ...options,
-        additionalYOffset: yOffsetFromURLParams,
-      });
-    }
-  };
-}
 
+/**
+ * Custom hook that provides functionality to scroll to a specific target element
+ * on the page, either based on URL hash parameters or click events to links with
+ * href="#scroll-to?target=". It also handles layout shifts caused by lazy-loaded components
+ * using an intersection observer to ensure accurate scrolling.
+ *
+ * Features:
+ * - Scrolls to a target element specified by a URL hash or click event.
+ * - Supports additional vertical offsets (static or dynamic).
+ * - Uses an AbortController to manage and stop scrolling when necessary.
+ * - Resolves layout shift issues by re-calculating the target position using an intersection observer.
+ * - Automatically attaches click event listeners to links with href="#scroll-to?target=", 
+ *   target can either be a element id, class name or chunk id.
+ * - Handles URL navigation with scroll-to hash parameters.
+ *
+ * @param {Object} options - Configuration options for scrolling behavior.
+ * @param {number|function} [options.yOffset] - Vertical offset for scrolling. Can be a number or a function.
+ * @param {number} [options.additionalYOffset] - Additional vertical offset for scrolling.
+ */
 const useScrollTo = (options) => {
+  const [currentTarget, setCurrentTarget] = useState(null);
+  const scrollAbortControllerRef = useRef(null);
+
+  const handleScrollTo = () => {
+    const { target, yOffsetFromURLParams } = getURLParams(window.location.hash);
+    const targetElement = getTargetElementHelper(target);
+
+    if(!targetElement) return;
+
+    const targetObj = {
+      targetElement, 
+      additionalYOffset: yOffsetFromURLParams,
+      ...options,
+    }
+
+    // Update state so that the intersection observer can pick it up
+    setCurrentTarget(targetObj);
+
+    // AbortController to manage the scroll
+    const controller = new AbortController();
+    scrollAbortControllerRef.current = controller;
+
+    // Scroll to the target element;
+    scrollToTarget({ ...targetObj }, controller.signal);
+  }
+  
+  /**
+   * How this useIntersectionObserver is being used:
+   * This fixes a bug with the scrollToTarget function 
+   * where the getBoundingClientRect() method returns
+   * a different value between scroll to's. This is caused
+   * because of layout shift with lazy loaded components
+   * while scrolling.
+   * 
+   * How it works:
+   * When the scrollToTarget is fired, the useIntersectionObserver 
+   * will check if the target element is in the viewport. If it is
+   * it stops the window.scroll method in the scrollToTarget function
+   * stopping the scroll. This is done by using the AbortController.
+   * Then it scrollToTarget again, this in turn gets the most up to date
+   * getBoundingClientRect() value and scrolls to the target element.
+   * 
+   */
+  useIntersectionObserver({ 
+    target: currentTarget?.targetElement, 
+    onIntersect: () => {
+      if (scrollAbortControllerRef.current) {
+        scrollAbortControllerRef.current.abort(); // Stop the scroll
+        scrollAbortControllerRef.current = null; // Reset the controller
+        scrollToTarget({ ...currentTarget }); // Fire the scrollToTarget function again
+      }
+    }
+  });
+
+  
+  // Handle onclick scroll to events
   useEffect(() => {
+    const clickEventController = new AbortController()
     const scrollToEls = document.querySelectorAll(
       '[href*="#scroll-to"], [href*="#/scroll-to"]'
     );
+
     scrollToEls.forEach((el) => {
       el.addEventListener(
         'click',
-        handleScrollToClick(options),
+        (e) => {
+          e.preventDefault();
+          handleScrollTo();
+        },
+        { signal: clickEventController.signal }
       );
     });
 
-    const { target, yOffsetFromURLParams } = getURLParams(window.location.hash);
-    scrollToTarget(target, {
-      ...options,
-      additionalYOffset: yOffsetFromURLParams,
-    });
+    //On click element event listeners cleanup
+    return () => {
+      clickEventController.abort()
+    }
   }, []);
+
+  // Handle when a user navigates to a URL with a scroll to hash
+  useEffect(() => {
+    handleScrollTo();
+  }, [])
+
 };
 
 export default useScrollTo;

package/package.json

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

package/properties/stamp-duty-calculator/default-calculator.component.jsx

@@ -4,65 +4,61 @@ import englishRates from '../../utils/stamp-duty-calculator/english-rates';
 
 import './stamp-duty-calculator.styles.scss';
 
-const DefaultCalculator = ({ purchasePrice, setPurchasePrice, firstTimeBuyer, additionalProperty, ukResident, }) => {
-  const [effectiveRate, setEffectiveRate] = useState();
-  const [totalRate, setTotalRate] = useState();
-  const [rate1, setRate1] = useState();
-  const [rate2, setRate2] = useState();
-  const [rate3, setRate3] = useState();
-  const [rate4, setRate4] = useState();
-  const [rate5, setRate5] = useState();
-
-  const property = Homeflow.get('property');
-
-  const results = englishRates(property.price_value, firstTimeBuyer, additionalProperty, ukResident);
-
-  const calculateStampDuty = (price) => {
-    if (!price) {
-      setRate1(0);
-      setRate2(0);
-      setRate3(0);
-      setRate4(0);
-      setRate5(0);
-      setTotalRate(0);
-      setEffectiveRate(Math.round(0));
-
-      return null;
-    }
+const DefaultCalculator = ({
+  purchasePrice,
+  setPurchasePrice,
+  firstTimeBuyer,
+  additionalProperty,
+  ukResident,
+  buyToLet
+}) => {
+  const [priceDisplay, setPriceDisplay] = useState(purchasePrice);
+  const results = englishRates(
+    purchasePrice,
+    (firstTimeBuyer && !buyToLet),
+    (additionalProperty || buyToLet),
+    ukResident,
+  );
+
+  const englandRatesList = Homeflow.get('stamp_duty_england');
+
+  const ratesToCalculateBasedOnTaxType = () => {
+    const baseRates = englandRatesList['base'];
+    const firstTimeBuyerRates = englandRatesList['first_time_buyer'];
+
+    if (firstTimeBuyer && !buyToLet) {
+      const priceLimit = firstTimeBuyerRates[firstTimeBuyerRates?.length - 1]
+        ?.['maximum_property_price'];
 
-    const {
-      rate1,
-      rate2,
-      rate3,
-      rate4,
-      rate5,
-      effectiveRate,
-      totalRate
-    } = results;
-
-    setRate1(rate1);
-    setRate2(rate2);
-    setRate3(rate3);
-    setRate4(rate4);
-    setRate5(rate5);
-    setTotalRate(totalRate);
-    setEffectiveRate(Math.round(effectiveRate * 10) / 10);
-
-    return null;
-  };
-
-  useEffect(() => {
-    if (property && property.price_value) {
-      setPurchasePrice(property.price_value);
-      calculateStampDuty(property.price_value);
+      if (priceLimit && purchasePrice > priceLimit) {
+        return baseRates;
+      } else {
+        return firstTimeBuyerRates;
+      }
     }
-  }, [firstTimeBuyer, additionalProperty]);
 
-  const handlePriceInputChange = ({ target: { value } }) => {
-    const numberString = value.substring(1);
-    const number = parseInt(numberString.replace(/,/g, ''), 10);
-    setPurchasePrice(number);
-  };
+    return baseRates;
+  }
+
+  const ratesList = ratesToCalculateBasedOnTaxType();
+
+  const handleInputUpdate = (val) => {
+    let transformValues = val;
+
+    // Only accept numbers
+    if(transformValues.toUpperCase() != transformValues.toLowerCase()) return;
+
+    // If errors, default to 0
+    if (transformValues === NaN) transformValues = 0;
+
+    // Hacky way to keep the £ and multiple , in the input box while ultimately passing a number
+    if (transformValues?.includes('£')) transformValues = transformValues.replace('£', '');
+    if (transformValues?.includes(',')) transformValues = transformValues.replaceAll(',', '');
+
+    transformValues = +transformValues;
+
+    setPriceDisplay(transformValues);
+  }
 
   return (
     <div id="stampResi" className="stamp-duty-calculator main">
@@ -72,8 +68,8 @@ const DefaultCalculator = ({ purchasePrice, setPurchasePrice, firstTimeBuyer, ad
             className="SD_money residential auto"
             type="text"
             placeholder="Purchase price"
-            value={`£${purchasePrice ? Number(purchasePrice).toLocaleString() : ''}`}
-            onChange={handlePriceInputChange}
+            value={`£${priceDisplay?.toLocaleString() || '0'}`}
+            onChange={e => handleInputUpdate(e.target.value)}
           />
         </div>
 
@@ -82,7 +78,7 @@ const DefaultCalculator = ({ purchasePrice, setPurchasePrice, firstTimeBuyer, ad
             type="button"
             className="SD_calculate btn residential"
             data-preselector=".main"
-            onClick={() => calculateStampDuty(purchasePrice)}
+            onClick={() => setPurchasePrice(priceDisplay)}
           >
             Calculate
           </button>
@@ -95,135 +91,65 @@ const DefaultCalculator = ({ purchasePrice, setPurchasePrice, firstTimeBuyer, ad
           {' '}
           <span className="SD_result  residential">
             £
-            {Number(totalRate).toLocaleString()}
+            {Number(results?.totalRate || 0).toLocaleString()}
           </span>
           {' '}
           Stamp duty
         </p>
 
-        {(firstTimeBuyer && property.price_value >= 625000) && (
-          <p id="first_time_buyer_info">First time buyers purchasing property for more than £625,000 will not be entitled to any relief and will pay SDLT at the standard rates.</p>
-        )}
-
         <div className="results-table-wrap">
           <p><strong>How this was calculated:</strong></p>
-          {(firstTimeBuyer && property.price_value <= 625000) ? (
-            <table className="SD_results_table residential">
+          <table className="SD_results_table residential">
               <thead>
                 <tr>
                   <th>Band</th>
-                  <th>Stamp Duty Rate</th>
+                  <th>{`${!buyToLet ? 'Stamp Duty ' : ''}Rate`}</th>
+                  {(additionalProperty && !firstTimeBuyer && !buyToLet) && (
+                    <th>Additional Property Rate</th>
+                  )}
                   <th>Due</th>
                 </tr>
               </thead>
               <tbody>
-                <tr>
-                  <td>Between £0 and £425,000</td>
-                  <td> 0% </td>
-                  <td className="rate1">
-                    £
-                    {Number(rate1).toLocaleString()}
-                  </td>
-                </tr>
-                <tr>
-                  <td>Between £425,001 and £625,000</td>
-                  <td> 5% </td>
-                  <td className="rate3">
-                    £
-                    {Number(rate2).toLocaleString()}
-                  </td>
-                </tr>
-                <tr className="totals">
-                  <td>Total</td>
-                  <td className="effectiveRate">
-                    {effectiveRate}
-                    %
-                  </td>
-                  <td className="totalRate">
-                    £
-                    {Number(totalRate).toLocaleString()}
-                  </td>
-                </tr>
+                {ratesList?.map((rate, index) => {
+                  // long string builder
+                  let titleForRate = `${rate?.maximum_property_price ? 'Between' : 'Over'}`;
+                  titleForRate += ' ';
+                  titleForRate += `£${(+rate?.minimum_property_price).toLocaleString()}`;
+                  titleForRate += `${rate?.maximum_property_price ? ' and £' : ''}`;
+                  titleForRate += `${(+rate?.maximum_property_price).toLocaleString() || ''}`;
+
+                  return (
+                    <tr key={rate.id}>
+                      <td>
+                        {titleForRate}
+                      </td>
+                      {buyToLet ? (
+                        <td>
+                          {`${(+rate?.base_sdlt_rate || 0) + (+rate?.additional_property_surcharge || 0)}%`}
+                        </td>
+                      ) : (
+                        <td>
+                          {`${rate?.base_sdlt_rate || 0}%`}
+                        </td>
+                      )}
+                      {(additionalProperty && !firstTimeBuyer && !buyToLet) && (
+                        <td className="additional_rate">
+                          {`${+rate?.additional_property_surcharge}%`}
+                        </td>
+                      )}
+                      <td className="rate1">
+                        {`£${Number(results?.[`rate${index + 1}`]).toLocaleString()}`}
+                      </td>
+                    </tr>
+                  );
+                })}
               </tbody>
             </table>
-          ) : (
-              <table className="SD_results_table residential">
-              <thead>
-                <tr>
-                  <th>Band</th>
-                  <th>Stamp Duty Rate</th>
-                  <th>Additional Property Rate</th>
-                  <th>Due</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>Between £0 and £250,000</td>
-                  <td> 0% </td>
-                  <td className='additional_rate'> 3% </td>
-                  <td className="rate1">
-                    £
-                    {Number(rate1).toLocaleString()}
-                  </td>
-                </tr>
-                {/* <tr>
-                  <td>Between £125,000 and £250,000</td>
-                  <td> 2% </td>
-                  <td className="rate2">
-                    £
-                    {Number(rate2).toLocaleString()}
-                  </td>
-                </tr> */}
-                <tr>
-                  <td>Between £250,001 and £925,000</td>
-                  <td> 5% </td>
-                  <td className='additional_rate'> 8% </td>
-                  <td className="rate3">
-                    £
-                    {Number(rate2).toLocaleString()}
-                  </td>
-                </tr>
-                <tr>
-                  <td>Between £925,000 and £1,500,000 </td>
-                  <td> 10% </td>
-                  <td className='additional_rate'> 13% </td>
-                  <td className="rate4">
-                    £
-                    {Number(rate3).toLocaleString()}
-                  </td>
-                </tr>
-                <tr>
-                  <td>Over £1,500,000 </td>
-                  <td> 12% </td>
-                  <td className='additional_rate'> 15% </td>
-                  <td className="rate5">
-                    £
-                    {Number(rate4).toLocaleString()}
-                  </td>
-                </tr>
-                <tr className="totals">
-                  <td>Total</td>
-                  <td className="effectiveRate">
-                    {effectiveRate}
-                    %
-                  </td>
-                  <td></td>
-                  <td className="totalRate">
-                    £
-                    {Number(totalRate).toLocaleString()}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          )}
         </div>
       </div>
     </div>
   );
 };
 
-const mapStateToProps = (state) => ({
-  themePreferences: state.app.themePreferences,
-});
-
-export default connect(mapStateToProps)(DefaultCalculator);
+export default DefaultCalculator;

package/properties/stamp-duty-calculator/stamp-duty-calculator.component.jsx

@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
-import { connect } from 'react-redux';
 import DefaultCalculator from './default-calculator.component';
-import BTLCalculator from './btl-calculator.component';
 
 import './stamp-duty-calculator.styles.scss';
 
-const StampDutyCalculator = ({ scotland, themePreferences }) => {
+const StampDutyCalculator = () => {
+  const property = Homeflow.get('property');
   const [type, setType] = useState('residential');
+  const placeholderValue = 250_000;
+  const [purchasePrice, setPurchasePrice] = useState(
+    (property && property?.price_value) ? property.price_value : placeholderValue
+  );
   const [purchaseType, setPurchaseType] = useState('firstTimeBuyer')
-  const [purchasePrice, setPurchasePrice] = useState();
   const [firstTimeBuyer, setFirstTimeBuyer] = useState(false);
   const [additionalProperty, setAdditionalProperty] = useState(false);
 
@@ -21,6 +23,7 @@ const StampDutyCalculator = ({ scotland, themePreferences }) => {
           firstTimeBuyer={firstTimeBuyer}
           additionalProperty={additionalProperty} 
           ukResident
+          buyToLet={type === 'btl'}
         />
       );
     }
@@ -55,7 +58,11 @@ const StampDutyCalculator = ({ scotland, themePreferences }) => {
           <button
             type="button"
             className={`stamp-duty-cal__type ${type === 'btl' ? 'selected' : ''}`}
-            onClick={() => setType('btl')}
+            onClick={() => {
+              if (firstTimeBuyer) setFirstTimeBuyer(prev => !prev);
+              if (additionalProperty) setAdditionalProperty(prev => !prev);
+              setType('btl');
+            }}
           >
             Buy to Let
           </button>
@@ -81,13 +88,16 @@ const StampDutyCalculator = ({ scotland, themePreferences }) => {
           <label htmlFor="additionalProperty">Additional Property</label>
         </div>
       </div>
-      {renderCalculator()}
+      <DefaultCalculator
+        purchasePrice={purchasePrice}
+        setPurchasePrice={setPurchasePrice}
+        firstTimeBuyer={firstTimeBuyer}
+        additionalProperty={additionalProperty} 
+        ukResident
+        buyToLet={type === 'btl'}
+      />
     </div>
   );
 };
 
-const mapStateToProps = (state) => ({
-  themePreferences: state.app.themePreferences,
-});
-
-export default connect(mapStateToProps)(StampDutyCalculator);
+export default StampDutyCalculator;