homeflowjs 1.0.68 → 1.0.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.68",
+  "version": "1.0.69",
   "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;