Added localization and many other improvements

- Added i18n
- Added new component locale selector to choose it or en language
- Translated all labels from it to en
- Fixed employee net calculation with low gross amount
- Other little improvements

package.json

@@ -10,9 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "i18next": "^22.0.4",
+    "i18next-browser-languagedetector": "^7.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "3.1.4",
+    "react-i18next": "^12.0.0",
     "react-share": "^4.4.1",
     "styled-components": "5.3.6"
   },

src/components/App.tsx

@@ -1,29 +1,18 @@
 import { useState, useEffect, useMemo } from "react";
-import styled from "styled-components";
 import { ErrorBoundary } from "react-error-boundary";
+import { GenericErrorFallback } from "./Errors";
 
+import { Tabs, TabLink, TabContent } from "./base/Tabs";
 import FreelanceForm from "./FreelanceForm";
 import CompanyForm from "./CompanyForm";
 import EmployeeForm from "./EmployeeForm";
-import { GenericErrorFallback } from "./Errors";
-import { Tabs, TabLink, TabContent } from "./Tabs";
 import Header from "./layout/Header";
 import Footer from "./layout/Footer";
-//import Privacy from "./Privacy";
-
-// --- STYLE ---
-const StyledApp = styled.div`
-  text-align: center;
-  padding: 0rem 2rem;
-  max-width: 700px;
-  margin: 0 auto;
+import LocaleSelector from "./base/LocaleSelector";
+import { StyledApp } from "./styled/StyledApp";
 
-  @media only screen and (max-width: 550px) {
-    padding: 0rem 0.4rem;
-  }
-`;
+import { useTranslation } from "react-i18next";
 
-// --- CODE ---
 export default function App() {
   const media: MediaQueryList = useMemo(() => {
     return window.matchMedia("(max-width: 580px)")
@@ -39,25 +28,28 @@ export default function App() {
     return () => media.removeEventListener("change", (e) => setMobile(e.matches));
   }, []);
 
+  const { t } = useTranslation();
+
   return (
     <StyledApp>
-      <Header mobile={mobile} />
+      <Header mobile={mobile}>{t('title')}</Header>
       <ErrorBoundary FallbackComponent={GenericErrorFallback}>
+        <LocaleSelector />
         <Tabs defaults="employee">
-          <TabLink to="employee">Dipendente</TabLink>
-          <TabLink to="freelance">Professionista</TabLink>
-          <TabLink to="company">Azienda</TabLink>
-
-          <TabContent id="employee">
-            <EmployeeForm />
-          </TabContent>
-          <TabContent id="freelance">
-            <FreelanceForm />
-          </TabContent>
-          <TabContent id="company">
-            <CompanyForm />
-          </TabContent>
-        </Tabs>
+            <TabLink to="employee">{t('employee.name')}</TabLink>
+            <TabLink to="freelance">{t('freelance.name')}</TabLink>
+            <TabLink to="company">{t('company.name')}</TabLink>
+
+            <TabContent id="employee">
+              <EmployeeForm />
+            </TabContent>
+            <TabContent id="freelance">
+              <FreelanceForm />
+            </TabContent>
+            <TabContent id="company">
+              <CompanyForm />
+            </TabContent>
+          </Tabs>
       </ErrorBoundary>
       <Footer />
     </StyledApp>

src/components/CompanyForm.tsx

@@ -23,6 +23,8 @@ import {
   StyledResultMainRow
 } from "./styled/StyledForm";
 
+import { useTranslation } from "react-i18next";
+
 const initialAmounts: TaxesOutcome = {
   netAmount: 0,
   iresAmount: 0,
@@ -36,6 +38,7 @@ export default function Form() {
   const refResult = useRef<HTMLInputElement>(null);
 
   const [errors, dispatchErrors] = useReducer(reducerErrors, initialErrors);
+  const { t } = useTranslation();
 
   // useEffect(() => {
   //   console.log(`errors`, errors);
@@ -48,7 +51,7 @@ export default function Form() {
     //const deductibleAmount = event.target.elements.deductibleAmount.value;
     //console.log(`grossAmount:${grossAmount} deductibleAmount:${deductibleAmount}`);
 
-    if (!checkErrors({ grossAmount, deductibleAmount, dispatchErrors })) return;
+    if (!checkErrors({ grossAmount, deductibleAmount, dispatchErrors, t })) return;
 
     const { netAmount, iresAmount, irapAmount }: TaxesOutcome = calculateTaxes(
       grossAmount,
@@ -71,15 +74,14 @@ export default function Form() {
 
   return (
     <StyledContainer>
-      <h3>Calcolo al netto di IRAP e IRES</h3>
-      <form>
-        <div ref={refResult}></div>
-        <StyledFormRow>
+      <div ref={refResult}></div>
+      <h3>{ t('company.title') }</h3>
+      <StyledFormRow>
           <span className="input-symbol input-symbol-euro">
             <StyledTextInput
               type="text"
               id="grossAmount"
-              placeholder="Lordo"
+              placeholder={t('inputs.placeholders.grossAmount')}
               onChange={(e) => setGrossAmount(parseInt(e.target.value))}
             />
           </span>
@@ -91,7 +93,7 @@ export default function Form() {
             <StyledTextInput
               type="text"
               id="deductibleAmount"
-              placeholder="Spese detraibili"
+              placeholder={t('inputs.placeholders.deductibleAmount')}
               onChange={(e) => setDeductibleAmount(parseInt(e.target.value))}
             />
           </span>
@@ -107,15 +109,14 @@ export default function Form() {
               IRAP: {numberFormatter.format(outcomeAmounts.irapAmount)}
             </StyledResultNormalRow>
             <StyledResultMainRow>
-              Netto: <b>{numberFormatter.format(outcomeAmounts.netAmount)}</b>
+              {t('result.netAmount')}: <b>{numberFormatter.format(outcomeAmounts.netAmount)}</b>
             </StyledResultMainRow>
             <StyledResultNormalRow>
-              Netto mese:{" "}
+              {t('result.netAmountPerMonth')}:&nbsp;
               {numberFormatter.format(outcomeAmounts.netAmount / 12)}
             </StyledResultNormalRow>
           </StyledResultContainer>
         )}
-      </form>
     </StyledContainer>
   );
 }