Merge branch 'master' of https://github.com/Morrisai/cppeiCalculator into master

# Conflicts:
#	yarn.lock

Author: Aaron Morris

README.md

@@ -0,0 +1,2 @@
+# cppeiCalculator
+A calculator for figuring out when you will max out your cpp and ei contributions

package.json

@@ -6,7 +6,7 @@
     "@material-ui/core": "^1.2.0",
     "moment": "^2.22.2",
     "react": "^16.4.0",
-    "react-dom": "^16.4.0",
+    "react-dom": "^16.4.2",
     "react-ga": "^2.5.3",
     "react-google-ad": "^1.0.2",
     "react-scripts": "1.1.4",

public/index.html

@@ -19,12 +19,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>CPP &amp; EI Calculator - When will I max Out my CPP and EI in 2020?</title>
+    <title>CPP &amp; EI Calculator - When will I max Out my CPP and EI in 2022?</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
 
     <meta property="og:url"                content="https://eicppcalculator.com/" />
     <meta property="og:type"               content="article" />
-    <meta property="og:title"              content="CPP &amp; EI Calculator - When will I max Out my CPP and EI in 2020?" />
+    <meta property="og:title"              content="CPP &amp; EI Calculator - When will I max Out my CPP and EI in 2022?" />
     <meta property="og:description"        content="Try this calculator to roughly figure out when you'll stop paying into IE and CPP and get a nice little boost to your pay cheques." />
     <meta property="og:image"              content="https://eicppcalculator.com/images/Maple-Leaf-by-Merlin2525.png" />
   </head>

public/manifest.json

@@ -1,6 +1,6 @@
 {
   "short_name": "CPP & EI Calculator",
-  "name": "CPP & EI Calculator - When will I max Out my CPP and EI in 2018?",
+  "name": "CPP & EI Calculator - When will I max Out my CPP and EI in 2022?",
   "icons": [
     {
       "src": "favicon.ico",

src/components/Form.js

@@ -22,7 +22,7 @@ import Alert from './Alert';
 const styles = theme =>( {
     paper: {    
       padding: '3rem',
-      maxWidth: '75%',
+      maxWidth: '90%',
       margin:'2rem auto',     
 
       "@media (max-width:500px)": {
@@ -44,11 +44,11 @@ const styles = theme =>( {
     },
     section:{
         marginTop:'2rem',
-        maxWidth:'50%',
+        maxWidth:'90%',
         margin: 'auto' ,
         textAlign:'center',
 
-        "@media (max-width:500px)": {           
+        "@media (max-width:700px)": {           
             maxWidth:'100%',
             padding:'1rem'
         }
@@ -205,7 +205,7 @@ class Form extends React.Component{
         const { classes } = this.props
 
        return( 
-           <div  className={classes.root}>           
+           <div  className={classes.root} id="calculator">           
             <section className={classes.section}>            
             <Typography variant="display2" gutterBottom  >Calculator</Typography>    
             <Typography variant="body1" >If you get paid a regular amount every so often and know how much you will make this year use the first field otherwise use Year To Date if you want to see how bonuses or other irregular payments affect the timing</Typography>

src/components/Header.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Typography from '@material-ui/core/Typography';
 
 import { withStyles } from '@material-ui/core/styles';
-import { Paper } from '@material-ui/core';
+import { Button, Paper } from '@material-ui/core';
 
 import Model from '../model/model';
 
@@ -18,10 +18,15 @@ const styles = theme => ({
         padding:'1rem',
         }
 
+  },
+ 
+    button:{
+      textAlign:'center',
+      margin: '0 0 1rem 0',
   },
   text:{
     color: theme.palette.primary.contrastText,
-    maxWidth:'50%',
+    maxWidth:'75%',
     margin: '1rem auto',
 
     "@media (max-width:500px)": {
@@ -53,7 +58,14 @@ class Header extends React.Component {
             <Typography variant="display3" gutterBottom className={classes.h1}>
                 When will I max out my CPP and EI contributions?
             </Typography>
+            <Button className={classes.button} size="small" variant="contained" href="#calculator">
+  Skip to calculator
+</Button>
+
           <div >
+          <Typography gutterBottom className={classes.text}>Have you ever wondered why part way through the year all of a sudden you stop paying EI and CPP premiums on each paycheque and instead just get to pocket that money? 
+             For some people it happens very early in the year and for some people it might happen near the end or not at all. Once you max out, you simply stop paying for those extra deductions and your pay cheque gets a nice little bump. 
+            </Typography>
             <Typography gutterBottom className={classes.text}>The Canadian government has set maximums on how much an invidual can contribute to the CPP (Canadian Pension Plan) and to EI (Employment Insurance). 
             Once you have reached the maximum contribution for the year you will see an increase on your net pay going forward as these deductions will no longer be applied.
             </Typography> <Typography gutterBottom className={classes.text}>

src/model/model.js

@@ -1,15 +1,15 @@
  /// DATA FROM: https://www.canada.ca/en/revenue-agency/services/tax/businesses/topics/payroll/payroll-deductions-contributions/canada-pension-plan-cpp/cpp-contribution-rates-maximums-exemptions.html
  // and from https://www.canada.ca/en/employment-social-development/programs/ei/ei-list/ei-employers/2019-maximum-insurable-earnings.html
  const Model = {
-    cppMaxEarning : 58700,
+    cppMaxEarning : 64900,
     cppExemptAmount : 3500,
-    cppPerc :  0.0525,
-    maxContribution: 2898.00,
+    cppPerc :  0.0570,
+    maxContribution: 3499.80,
 
 
-    eiMaxEarning : 54200,    
+    eiMaxEarning : 60300,    
     eiPerc : 0.0158,
-    year: 2020
+    year: 2022
 }
 
 export default Model