homeflowjs 1.0.47 → 1.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.47",
+  "version": "1.0.48",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",
@@ -9,6 +9,7 @@
     "properties/property-map/**/*",
     "properties/property-streetview/**/*",
     "properties/stamp-duty-calculator/**/*",
+    "search/range-controller/**/*",
     "properties/property-results-pagination/**/*"
   ],
   "description": "JavaScript toolkit for Homeflow themes",
@@ -36,6 +37,7 @@
     "react-dropdown": "^1.9.2",
     "react-leaflet": "^3.1.0",
     "react-leaflet-google-layer": "^2.0.3",
+    "react-range": "^1.10.0",
     "react-transition-group": "^4.4.1",
     "redux-devtools-extension": "^2.13.8",
     "redux-logger": "^3.0.6",

package/rent-yield-calculator/index.js

@@ -0,0 +1,3 @@
+import RentYieldCalculator from './rent-yield-calculator';
+
+export default RentYieldCalculator;

package/rent-yield-calculator/rent-yield-calculator.jsx

@@ -0,0 +1,187 @@
+import React, {
+  memo, useState, useEffect, useMemo,
+  useCallback,
+} from 'react';
+import PropTypes from 'prop-types';
+import RangeInput from '../search/range-input';
+import {
+  RANGE_CONTROLLER_CONFIG_DEFAULT_PROPS,
+  RANGE_CONTROLLER_CONFIG_PROP_TYPES,
+} from '../search/range-controller/prop-types';
+
+const initialFieldsConfigsList = [
+  {
+    name: 'purchasePrice',
+    title: 'Purchase Price or Current Value:',
+    minValue: 0,
+    maxValue: 5000000,
+  },
+  {
+    name: 'monthlyRent',
+    title: 'Monthly rent:',
+    minValue: 0,
+    maxValue: 10000,
+  },
+  {
+    name: 'annualRunningCosts',
+    title: 'Annual running costs:',
+    minValue: 0,
+    maxValue: 100000,
+  },
+];
+
+const setInitialCalculatorValues = (fieldsConfigs) => fieldsConfigs
+  .reduce(
+    (values, fieldConfig) => ({
+      ...values,
+      [fieldConfig.name]: Number(fieldConfig.initialValue),
+    }),
+    {},
+  );
+
+const getGrossYieldValue = ({ purchasePrice, monthlyRent }) => {
+  let grossYieldValue = null;
+  if (purchasePrice && monthlyRent) {
+    const annualRent = monthlyRent * 12;
+    grossYieldValue = (annualRent / purchasePrice) * 100;
+    grossYieldValue = `${grossYieldValue.toFixed(2)}%`;
+  }
+
+  return grossYieldValue;
+};
+
+const getNetYieldValue = ({ purchasePrice, monthlyRent, annualRunningCosts = 0 }) => {
+  let netYieldResult = null;
+
+  if (purchasePrice && monthlyRent) {
+    const annualRent = monthlyRent * 12;
+    netYieldResult = ((annualRent - annualRunningCosts) / purchasePrice) * 100;
+    netYieldResult = `${netYieldResult.toFixed(2)}%`;
+  }
+
+  return netYieldResult;
+};
+
+const RentYieldCalculator = ({
+  title,
+  className,
+  purchasePriceConfig,
+  monthlyRentConfig,
+  annualRunningCostsConfig,
+  rangeStylesConfigs,
+  currency,
+  grossYieldTitle,
+  netYieldTitle,
+}) => {
+  const customFieldsConfigsList = useMemo(() => initialFieldsConfigsList
+    .map((fieldConfig) => {
+      const linkedFieldsData = {
+        purchasePrice: purchasePriceConfig || {},
+        monthlyRent: monthlyRentConfig || {},
+        annualRunningCosts: annualRunningCostsConfig || {},
+      };
+      const customConfig = linkedFieldsData[fieldConfig.name];
+
+      return {
+        ...fieldConfig,
+        ...customConfig,
+        initialValue: customConfig ? customConfig.initialValue || 0 : 0,
+      };
+    }), []);
+
+  const [formValues, setFormValues] = useState(null);
+
+  useEffect(() => {
+    setFormValues(
+      setInitialCalculatorValues(customFieldsConfigsList),
+    );
+  }, []);
+
+  const onFormDataUpdate = useCallback(({ name, digitValue }) => {
+    setFormValues((prevState) => ({
+      ...prevState,
+      [name]: digitValue,
+    }));
+  }, []);
+
+  const grossYieldValue = getGrossYieldValue({
+    purchasePrice: formValues?.purchasePrice,
+    monthlyRent: formValues?.monthlyRent,
+  });
+
+  const netYieldValue = getNetYieldValue({
+    purchasePrice: formValues?.purchasePrice,
+    monthlyRent: formValues?.monthlyRent,
+    annualRunningCosts: formValues?.annualRunningCosts,
+  });
+
+  return (
+    <div className={`${className} rent-yield-calculator__container`}>
+      {title && (
+        <h2 className="rent-yield-calculator__title">{title}</h2>
+      )}
+      {formValues && customFieldsConfigsList.map((config) => (
+        <div
+          key={config.name}
+          className="rent-yield-calculator__field-container"
+        >
+          <RangeInput
+            title={config.title}
+            name={config.name}
+            min={config.minValue}
+            max={config.maxValue}
+            inititalValue={config.initialValue}
+            rangeStylesConfigs={rangeStylesConfigs}
+            inputPrefixString={currency}
+            onRangeInputUpdate={onFormDataUpdate}
+          />
+        </div>
+      ))}
+      {(grossYieldValue && netYieldValue) && (
+        <div className="rent-yield-calculator__result-container">
+          <div className="rent-yield-calculator__result-item">
+            <h4 className="rent-yield-calculator__result-title">{grossYieldTitle}</h4>
+            <span className="rent-yield-calculator__result-value">{grossYieldValue}</span>
+          </div>
+          <div className="rent-yield-calculator__result-item">
+            <h4 className="rent-yield-calculator__result-title">{netYieldTitle}</h4>
+            <span className="rent-yield-calculator__result-value">{netYieldValue}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+RentYieldCalculator.defaultProps = {
+  title: 'Rental Yield Calculator',
+  className: '',
+  purchasePriceConfig: {},
+  monthlyRentConfig: {},
+  annualRunningCostsConfig: {},
+  rangeStylesConfigs: RANGE_CONTROLLER_CONFIG_DEFAULT_PROPS,
+  currency: '£',
+  grossYieldTitle: 'Gross Yield',
+  netYieldTitle: 'Net Yield',
+};
+
+const FieldConfigType = PropTypes.shape({
+  title: PropTypes.string,
+  minValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  maxValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  initialValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+});
+
+RentYieldCalculator.propTypes = {
+  title: PropTypes.string,
+  className: PropTypes.string,
+  purchasePriceConfig: FieldConfigType,
+  monthlyRentConfig: FieldConfigType,
+  annualRunningCostsConfig: FieldConfigType,
+  rangeStylesConfigs: RANGE_CONTROLLER_CONFIG_PROP_TYPES,
+  currency: PropTypes.string,
+  grossYieldTitle: PropTypes.string,
+  netYieldTitle: PropTypes.string,
+};
+
+export default memo(RentYieldCalculator);

package/search/range-controller/index.jsx

@@ -0,0 +1,125 @@
+import React, {
+  memo, useCallback, useState, useEffect,
+} from 'react';
+import PropTypes from 'prop-types';
+import { Range, getTrackBackground } from 'react-range';
+import {
+  RANGE_CONTROLLER_CONFIG_DEFAULT_PROPS,
+  RANGE_CONTROLLER_PROP_TYPES,
+} from './prop-types';
+import './range.scss';
+
+const RangeController = ({
+  name,
+  min,
+  max,
+  values,
+  rangeStylesConfigs,
+  onRangeChange,
+}) => {
+  const stylesConfig = {
+    ...RANGE_CONTROLLER_CONFIG_DEFAULT_PROPS,
+    ...rangeStylesConfigs,
+    thumbBorderWidth: 2,
+  };
+  useEffect(() => {
+    const docEl = document.documentElement;
+    const thumbSizeValue = Number(stylesConfig.thumbSize.toString().match(/\d+/)[0]);
+    docEl.style.setProperty('--range-track-height', stylesConfig.trackHeight);
+    docEl.style.setProperty('--range-thumb-size', `${thumbSizeValue + 2}px`);
+    docEl.style.setProperty('--range-active-color', stylesConfig.trackActiveColor);
+    docEl.style.setProperty('--range-inactive-color', stylesConfig.trackInactiveColor);
+  }, []);
+
+  const [rangeValues, setRangeValues] = useState(values);
+
+  const onChange = useCallback((values) => {
+    if (onRangeChange) {
+      onRangeChange({ name, value: values });
+    }
+
+    setRangeValues(values);
+  }, [onRangeChange]);
+
+  useEffect(() => {
+    const validatedValues = values;
+    if (validatedValues.length > 1) {
+      validatedValues[0] = validatedValues[0] < min ? min : validatedValues[0];
+      validatedValues[1] = validatedValues[1] > max ? max : validatedValues[1];
+    } else {
+      validatedValues[0] = validatedValues[0] > max ? max : validatedValues[0];
+      validatedValues[0] = validatedValues[0] < min ? min : validatedValues[0];
+    }
+
+    setRangeValues(validatedValues);
+  }, [values]);
+
+  const renderRangeTrack = useCallback(({ props, children }) => (
+    <div
+      className="range__track"
+      {...props}
+      style={{
+        ...props.style,
+        height: stylesConfig.trackHeight,
+        background: getTrackBackground({
+          colors: [
+            stylesConfig.trackActiveColor,
+            stylesConfig.trackInactiveColor,
+          ],
+          values,
+          min,
+          max,
+        }),
+      }}
+    >
+      {children}
+    </div>
+  ), [values]);
+
+  const renderRangeThumb = useCallback(({ props }) => {
+    const borderActiveColor = stylesConfig.thumbBorderColor || stylesConfig.trackActiveColor;
+    const borderValue = `${stylesConfig.thumbBorderWidth}px solid ${borderActiveColor}`;
+
+    return (
+      <div
+        className="range__thumb"
+        {...props}
+        style={{
+          ...props.style,
+          height: stylesConfig.thumbSize,
+          width: stylesConfig.thumbSize,
+          backgroundColor: stylesConfig.thumbColor,
+          border: borderValue,
+          borderRadius: '50%',
+        }}
+      />
+    );
+  }, []);
+
+  return (
+    <Range
+      min={min}
+      max={max}
+      values={rangeValues}
+      onChange={onChange}
+      renderTrack={renderRangeTrack}
+      renderThumb={renderRangeThumb}
+    />
+  );
+};
+
+RangeController.defaultProps = {
+  name: '',
+  min: 0,
+  values: [0],
+  rangeStylesConfigs: RANGE_CONTROLLER_CONFIG_DEFAULT_PROPS,
+  onRangeChange: null,
+};
+
+RangeController.propTypes = {
+  values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+  onRangeChange: PropTypes.func,
+  ...RANGE_CONTROLLER_PROP_TYPES,
+};
+
+export default memo(RangeController);

package/search/range-controller/prop-types.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+
+export const RANGE_CONTROLLER_CONFIG_DEFAULT_PROPS = {
+  trackHeight: '4px',
+  trackActiveColor: '#333',
+  trackInactiveColor: '#c4c4c4',
+  thumbSize: '24px',
+  thumbBorderColor: '',
+  thumbColor: '#ffffff',
+};
+
+export const RANGE_CONTROLLER_CONFIG_PROP_TYPES = PropTypes.shape({
+  trackHeight: PropTypes.string,
+  trackActiveColor: PropTypes.string,
+  trackInactiveColor: PropTypes.string,
+  thumbSize: PropTypes.string,
+  thumbBorderColor: PropTypes.string,
+  thumbColor: PropTypes.string,
+});
+
+export const RANGE_CONTROLLER_PROP_TYPES = {
+  name: PropTypes.string,
+  min: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  max: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  rangeStylesConfigs: RANGE_CONTROLLER_CONFIG_PROP_TYPES,
+};

package/search/range-controller/range.scss

@@ -0,0 +1,25 @@
+.range__track {
+  margin: 0 calc(var(--range-thumb-size) / 2);
+  position: relative;
+
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    height: 4px;
+    width: var(--range-thumb-size);
+    border-radius: 10px;
+    z-index: -1;
+  }
+
+  &:before {
+    background-color: var(--range-active-color);
+    left: calc(-1 * var(--range-thumb-size) / 2);
+  }
+
+  &:after {
+    right: calc(-1 * var(--range-thumb-size) / 2);
+    background-color: var(--range-inactive-color);
+  }
+}

package/search/range-input/index.jsx

@@ -0,0 +1,122 @@
+import React, {
+  memo, useCallback, useEffect, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import RangeController from '../range-controller';
+import {
+  RANGE_CONTROLLER_CONFIG_DEFAULT_PROPS,
+  RANGE_CONTROLLER_PROP_TYPES,
+} from '../range-controller/prop-types';
+
+const RangeInput = ({
+  title,
+  name,
+  inititalValue,
+  min,
+  max,
+  themePrimaryColor,
+  rangeStylesConfigs,
+  inputPrefixString,
+  onRangeInputUpdate,
+}) => {
+  const [valueConfig, setValueConfig] = useState({
+    inputValue: inputPrefixString ? `${inputPrefixString} 0` : '0',
+    rangeValue: 0,
+  });
+
+  const onValidateValue = (value) => {
+    let validatedValue = value;
+    validatedValue = validatedValue > max ? max : validatedValue;
+    validatedValue = validatedValue < min ? min : validatedValue;
+
+    return validatedValue;
+  };
+
+  useEffect(() => {
+    const validatedValue = onValidateValue(Number(inititalValue));
+    setValueConfig({
+      inputValue: inputPrefixString
+        ? `${inputPrefixString} ${validatedValue}`
+        : `${validatedValue}`,
+      rangeValue: validatedValue,
+    });
+  }, []);
+
+  const onChange = useCallback(({ name, value }) => {
+    const isRangeValue = Array.isArray(value);
+    const currentValue = isRangeValue ? value[0] : value;
+    const digitValue = isRangeValue
+      ? currentValue
+      : currentValue.substring(currentValue.indexOf(inputPrefixString) + 1).trim();
+
+    if (isNaN(digitValue)) {
+      return;
+    }
+    const validatedValue = onValidateValue(Number(digitValue));
+    const inputValue = inputPrefixString
+      ? `${inputPrefixString} ${validatedValue}`
+      : `${validatedValue}`;
+    const rangeValue = Number(validatedValue);
+
+    setValueConfig((prevState) => ({
+      ...prevState,
+      inputValue,
+      rangeValue,
+    }));
+
+    if (onRangeInputUpdate) {
+      onRangeInputUpdate({
+        name, digitValue: rangeValue, stringValue: inputValue,
+      });
+    }
+  }, []);
+
+  return (
+    <>
+      <h3 className="rent-yield-calculator__field-title">{title}</h3>
+      <div className="rent-yield-calculator__field-wrapper">
+        <div className="rent-yield-calculator__field-range">
+          <RangeController
+            name={name}
+            min={min}
+            max={max}
+            values={[valueConfig.rangeValue]}
+            themePrimaryColor={themePrimaryColor}
+            rangeStylesConfigs={rangeStylesConfigs}
+            onRangeChange={onChange}
+          />
+        </div>
+        <input
+          type="text"
+          name={name}
+          className="rent-yield-calculator__field"
+          value={valueConfig.inputValue}
+          onChange={(e) => onChange(
+            {
+              name: e.currentTarget.name,
+              value: e.currentTarget.value,
+            },
+          )}
+        />
+      </div>
+    </>
+  );
+};
+
+RangeInput.defaultProps = {
+  min: 0,
+  inititalValue: 0,
+  rangeStylesConfigs: RANGE_CONTROLLER_CONFIG_DEFAULT_PROPS,
+  inputPrefixString: '',
+  onRangeInputUpdate: null,
+};
+
+RangeInput.propTypes = {
+  title: PropTypes.string.isRequired,
+  inititalValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  inputPrefixString: PropTypes.string,
+  onRangeInputUpdate: PropTypes.func,
+  ...RANGE_CONTROLLER_PROP_TYPES,
+};
+
+export default memo(RangeInput);