homeflowjs 0.10.2 → 0.10.4

package/package.json

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

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

@@ -101,70 +101,121 @@ const DefaultCalculator = ({ purchasePrice, setPurchasePrice, firstTimeBuyer, ad
           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>
-          <table className="SD_results_table residential">
-            <thead>
-              <tr>
-                <th>Band</th>
-                <th>Rate</th>
-                <th>Due</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>Between £0 and £125,000</td>
-                <td> 0% </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,000 and £925,000</td>
-                <td> 5% </td>
-                <td className="rate3">
-                  £
-                  {Number(rate3).toLocaleString()}
-                </td>
-              </tr>
-              <tr>
-                <td>Between £925,000 and £1,500,000 </td>
-                <td> 10% </td>
-                <td className="rate4">
-                  £
-                  {Number(rate4).toLocaleString()}
-                </td>
-              </tr>
-              <tr>
-                <td>Over £1,500,000 </td>
-                <td> 12% </td>
-                <td className="rate5">
-                  £
-                  {Number(rate5).toLocaleString()}
-                </td>
-              </tr>
-              <tr className="totals">
-                <td>Total</td>
-                <td className="effectiveRate">
-                  {effectiveRate}
-                  %
-                </td>
-                <td className="totalRate">
-                  £
-                  {Number(totalRate).toLocaleString()}
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          {(firstTimeBuyer && property.price_value <= 625000) ? (
+            <table className="SD_results_table residential">
+              <thead>
+                <tr>
+                  <th>Band</th>
+                  <th>Stamp Duty 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>
+              </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>

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

@@ -7,6 +7,7 @@ import './stamp-duty-calculator.styles.scss';
 
 const StampDutyCalculator = ({ scotland, themePreferences }) => {
   const [type, setType] = useState('residential');
+  const [purchaseType, setPurchaseType] = useState('additional')
   const [purchasePrice, setPurchasePrice] = useState();
 
   const renderCalculator = () => {
@@ -15,8 +16,8 @@ const StampDutyCalculator = ({ scotland, themePreferences }) => {
         <DefaultCalculator
           purchasePrice={purchasePrice}
           setPurchasePrice={setPurchasePrice}
-          firstTimeBuyer
-          additionalProperty={false} 
+          firstTimeBuyer={purchaseType === 'firstTimeBuyer'}
+          additionalProperty={purchaseType === 'additional'} 
           ukResident
         />
       );
@@ -57,7 +58,26 @@ const StampDutyCalculator = ({ scotland, themePreferences }) => {
           </button>
         </div>
       </div>
-
+      <div className="switches">
+        <div className="form-group">
+          <button
+            type="button"
+            className={`stamp-duty-cal__type ${purchaseType === 'additional' ? 'selected' : ''}`}
+            onClick={() => setPurchaseType('additional')}
+          >
+            Additional Property
+          </button>
+        </div>
+        <div className="form-group">
+          <button
+            type="button"
+            className={`stamp-duty-cal__type ${purchaseType === 'firstTimeBuyer' ? 'selected' : ''}`}
+            onClick={() => setPurchaseType('firstTimeBuyer')}
+          >
+            First Time Buyer
+          </button>
+        </div>
+      </div>
       {renderCalculator()}
     </div>
   );

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

@@ -20,36 +20,50 @@ const NormalSelect = ({
   placeholder,
   bedOptionText,
   ...otherProps
-}) => (
-  <select
-    value={value}
-    onChange={e => setSearchField({
-      [e.target.name]: e.target.value ? parseInt(e.target.value) : null
-    })}
-    name={`${type}Beds`}
-    {...otherProps}
-  >
-    <option
-      value=""
-      title={`${type} beds`}
-      className={optionClass}
+}) => {
+  const isNumberArray = (array) => array.every((item) => typeof item === 'number');
+
+  return (
+    <select
+      value={value}
+      onChange={(e) => setSearchField({
+        [e.target.name]: e.target.value ? parseInt(e.target.value) : null,
+      })}
+      name={`${type}Beds`}
+      {...otherProps}
     >
-      {placeholder || `${capitalizeFirstLetter(type)}. bedrooms`}
-    </option>
-    {bedValues.map((_, i) => (
       <option
-        key={i}
-        value={i + 1}
-        title={`${i + 1} Bed`}
+        value=""
+        title={`${type} beds`}
         className={optionClass}
       >
-        {i + 1}
-        {' '}
-        {bedOptionText}
+        {placeholder || `${capitalizeFirstLetter(type)}. bedrooms`}
       </option>
-    ))}
-  </select>
-);
+      {bedValues.map((item) => (
+        isNumberArray(bedValues) ? (
+          <option
+            key={item}
+            value={item}
+            title={`${item} Bed`}
+            className={optionClass}
+          >
+            {item}
+            {' '}
+            {bedOptionText}
+          </option>
+        ) : (
+          <option
+            key={item.label}
+            value={item.value}
+            title={`${item.value} Bed`}
+            className={optionClass}
+          >
+            {item.label}
+          </option>
+        )))}
+    </select>
+  );
+};
 
 const ReactSelect = (props) => {
   const {
@@ -63,7 +77,7 @@ const ReactSelect = (props) => {
     bedOptionText,
   } = props;
 
-  const bedOptions = bedValues.map(bedValue => (
+  const bedOptions = bedValues.map((bedValue) => (
     { value: bedValue, label: `${bedValue} ${bedOptionText}` }
   ));
 
@@ -76,17 +90,17 @@ const ReactSelect = (props) => {
       options={bedOptions}
       styles={styles}
       placeholder={placeholder || `${capitalizeFirstLetter(type)} bedrooms`}
-      value={bedOptions.find(option => option.value === value)}
+      value={bedOptions.find((option) => option.value === value)}
       setValue={() => value}
       isSearchable={false}
       onChange={({ value }) => {
         setSearchField({
-          [`${type}Beds`]: value ? parseInt(value) : null
-        })}
-      }
+          [`${type}Beds`]: value ? parseInt(value) : null,
+        });
+      }}
     />
-  )
-}
+  );
+};
 
 const BedroomsSelect = (props) => {
   const {
@@ -104,18 +118,18 @@ const BedroomsSelect = (props) => {
   let filteredBedValues = bedValues;
 
   if (type === 'max' && minBeds && !allowUnderOver) {
-    filteredBedValues = bedValues.filter(bedValue => bedValue >= minBeds);
+    filteredBedValues = bedValues.filter((bedValue) => (bedValue.value || bedValue) >= minBeds);
   }
 
   if (type === 'min' && maxBeds && !allowUnderOver) {
-    filteredBedValues = bedValues.filter(bedValue => bedValue <= maxBeds);
+    filteredBedValues = bedValues.filter((bedValue) => (bedValue.value || bedValue) <= maxBeds);
   }
 
   if (reactSelect) {
-    return <ReactSelect type={type} value={value || ''} bedValues={filteredBedValues} {...otherProps} />;
+    return <ReactSelect type={type} value={value || value === 0 ? value : ''} bedValues={filteredBedValues} {...otherProps} />;
   }
 
-  return <NormalSelect type={type} value={value || ''} bedValues={filteredBedValues} {...otherProps} />;
+  return <NormalSelect type={type} value={value || value === 0 ? value : ''} bedValues={filteredBedValues} {...otherProps} />;
 };
 
 BedroomsSelect.propTypes = {

package/search/property-search/property-search.js

@@ -17,6 +17,8 @@ const fragmentize = (key, value) => {
   return `${pattern[0] ? pattern[0] : ''}${value}${pattern[1] ? pattern[1] : ''}`;
 };
 
+const minOrMaxBedZero = (key, value) => (key === 'minBeds' || key === 'maxBeds') && value === 0;
+
 export const buildQueryString = (search) => {
   const queryParams = [];
   const fragmentParams = [];
@@ -24,7 +26,7 @@ export const buildQueryString = (search) => {
   Object.keys(search).forEach((key) => {
     const value = search[key];
 
-    if (value === 0 && key === 'maxBeds') return fragmentParams.push(fragmentize(key, value));
+    if (minOrMaxBedZero(key, value)) return fragmentParams.push(fragmentize(key, value));
 
     if (!value) return;