[Play]: Savings Calculator (reactplay#748)

* Initial file setup with images

* Add total component

* Add saving options form

* Add saving options form funtionality

* Add total dynamic rendering functionality

* Fix currency change automatically in form feilds

* Refactor savings calculation

* Add responsive styling

* Add cover image

* Add readme

* Add play's header to play

* Refactor SavingsCalculator to SavingCalculator

* Refactor calculatSaving to getCalculatedSaving

* Refactor currencies to select tag

* Add play body wrapper

* Add value attribute to dropdown options

* Refactor currency symbol into util function

* Refactor period options

* Refactor wrap fireevent with act

* Refactor appropriate variable type usage

* Add prefix to parent classes to avoid conflicts

* Add implementation details to readme

* Refactor image import name

Co-authored-by: Sachin Chaurasiya <[email protected]>

package.json

@@ -9,6 +9,8 @@
  "@mui/material": "^5.9.1",
  "@mui/styles": "^5.9.3",
  "@nhost/react": "^0.9.0",
+ "@testing-library/jest-dom": "^5.16.5",
+ "@testing-library/react": "^13.4.0",
  "@types/lodash": "^4.14.182",
  "@types/react": "^18.0.6",
  "@types/react-dom": "^18.0.2",

src/plays/savings-calculator/SavingsCalculator.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import PlayHeader from "common/playlists/PlayHeader";
+import Total from "./components/Total";
+import SavingOptions from "./components/SavingOptions";
+import "./styles/savingsCalculator.scss";
+
+function SavingCalculator(props) {
+ const [total, setTotal] = useState(2327);
+ const [currency, setCurrency] = useState("INR");
+
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="play-details-body">
+ <div className="savingsCalculator__container">
+ <div className="savingsCalculator">
+ <Total total={total} currency={currency} />
+ <SavingOptions
+ currency={currency}
+ setCurrency={setCurrency}
+ setTotal={setTotal}
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default SavingCalculator;

src/plays/savings-calculator/components/SavingOptions/index.jsx

@@ -0,0 +1,151 @@
+import { getCurrencySymbol } from "plays/savings-calculator/utils/getCurrencySymbol";
+import React, { useState } from "react";
+import { getCalculatedSaving } from "../../utils/getCalculatedSaving";
+import "./savingOptions.scss";
+
+function SavingOptions(props) {
+ const { currency, setCurrency, setTotal } = props;
+
+ const [startingBalance, setStartingBalance] = useState(1000);
+ const [monthlyContribution, setMonthlyContribution] = useState(100);
+ const [period, setPeriod] = useState(1);
+ const [periodChoice, setPeriodChoice] = useState("Years");
+ const [annualInterest, setAnnualInterest] = useState(8);
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+
+ const total = getCalculatedSaving({
+ startingBalance,
+ monthlyContribution,
+ period,
+ periodChoice,
+ annualInterest,
+ });
+
+ setTotal(total);
+ };
+
+ return (
+ <div className="savingCalculator__savingOptions">
+ <div className="savingOptions__currencyGroup">
+ <label htmlFor="currency">Currency:</label>
+ <select
+ className="savingOptions__currencies"
+ id="currency"
+ value={currency}
+ onChange={(e) => setCurrency(e.target.value)}
+ >
+ <option value="INR">INR</option>
+ <option value="USD">USD</option>
+ </select>
+ </div>
+ <form>
+ <div className="savingOptions__formGroup">
+ <label htmlFor="starting-balance">Starting Balance:</label>
+ <div className="savingOptions__inputGroup">
+ <div className="savingOptions__inputPrepend">
+ {getCurrencySymbol(currency)}
+ </div>
+ <input
+ type="number"
+ className="savingOptions__formControl"
+ id="starting-balance"
+ placeholder="Enter initial balance"
+ value={startingBalance}
+ onChange={(e) => setStartingBalance(e.target.value)}
+ />
+ </div>
+ </div>
+ <div className="savingOptions__formGroup">
+ <label htmlFor="monthly-contribution">Monthly Contribution:</label>
+ <div className="savingOptions__inputGroup">
+ <div className="savingOptions__inputPrepend">
+ {getCurrencySymbol(currency)}
+ </div>
+ <input
+ type="number"
+ className="savingOptions__formControl"
+ id="monthly-contribution"
+ placeholder="Enter monthly contribution"
+ value={monthlyContribution}
+ onChange={(e) => setMonthlyContribution(e.target.value)}
+ />
+ </div>
+ </div>
+ <div className="savingOptions__formGroup">
+ <label htmlFor="period">Period:</label>
+ <div className="savingOptions__inputGroup">
+ <input
+ type="number"
+ className="savingOptions__formControl"
+ id="period"
+ placeholder="Enter period of contribution"
+ value={period}
+ onChange={(e) => setPeriod(e.target.value)}
+ />
+ </div>
+ </div>
+ <div className="savingOptions__periodChoice">
+ <div className="savingOptions__formRadio">
+ <input
+ className="savingOptions__radioInput"
+ type="radio"
+ name="period-choice"
+ id="period-choice-years"
+ value="Years"
+ defaultChecked
+ onChange={(e) => setPeriodChoice(e.target.value)}
+ />
+ <label
+ className="savingOptions__radioLabel"
+ htmlFor="period-choice-years"
+ >
+ Years
+ </label>
+ </div>
+ <div className="savingOptions__formRadio">
+ <input
+ className="savingOptions__radioInput"
+ type="radio"
+ name="period-choice"
+ id="period-choice-months"
+ value="Months"
+ onChange={(e) => setPeriodChoice(e.target.value)}
+ />
+ <label
+ className="savingOptions__radioLabel"
+ htmlFor="period-choice-months"
+ >
+ Months
+ </label>
+ </div>
+ </div>
+ <div className="savingOptions__formGroup">
+ <label htmlFor="annual-interest-rate">
+ Annual Interest Rate (%):
+ </label>
+ <div className="savingOptions__inputGroup">
+ <input
+ type="number"
+ className="savingOptions__formControl"
+ id="annual-interest-rate"
+ placeholder="Enter interest rate per annum"
+ value={annualInterest}
+ onChange={(e) => setAnnualInterest(e.target.value)}
+ />
+ </div>
+ </div>
+ <button
+ type="submit"
+ className="savingOptions__calculate"
+ onClick={handleSubmit}
+ >
+ Calculate Total
+ </button>
+ </form>
+ </div>
+ );
+}
+
+export default SavingOptions;