Ported to @mui

.eslintrc

@@ -8,7 +8,7 @@
   ],
   "rules": {
     "prettier/prettier": [
-      "error",
+      1,
       {
         "singleQuote": true
       }
@@ -23,4 +23,4 @@
       }
     ]
   }
-}
+}

README.md

@@ -1,3 +1,5 @@
+This project refers to the article https://medium.com/@nphivu414/build-a-multi-step-form-with-react-hooks-formik-yup-and-materialui-fa4f73545598
+
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ## Available Scripts

package.json

@@ -1,11 +1,13 @@
 {
-  "name": "app",
+  "name": "building-multi-step-form-with-formik-and-yup",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
-    "@material-ui/core": "^4.9.0",
-    "@material-ui/pickers": "^3.2.10",
+    "@emotion/react": "11.7.1",
+    "@emotion/styled": "11.6.0",
+    "@mui/lab": "5.0.0-alpha.67",
+    "@mui/material": "5.4.0",
     "@testing-library/jest-dom": "^5.0.2",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^8.1.0",
@@ -14,9 +16,9 @@
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-scripts": "3.3.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^5.0.0",
     "yup": "^0.28.1"
   },
   "scripts": {
@@ -41,9 +43,11 @@
     ]
   },
   "devDependencies": {
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.18.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "prettier": "1.19.1"
-  }
-}
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "prettier": "2.5.1"
+  },
+  "keywords": [],
+  "description": ""
+}

src/components/CheckoutPage/CheckoutPage.jsx

@@ -5,8 +5,8 @@ import {
   StepLabel,
   Button,
   Typography,
-  CircularProgress
-} from '@material-ui/core';
+  CircularProgress,
+} from '@mui/material';
 import { Formik, Form } from 'formik';
 
 import AddressForm from './Forms/AddressForm';
@@ -18,7 +18,7 @@ import validationSchema from './FormModel/validationSchema';
 import checkoutFormModel from './FormModel/checkoutFormModel';
 import formInitialValues from './FormModel/formInitialValues';
 
-import useStyles from './styles';
+//import useStyles from "./styles";
 
 const steps = ['Shipping address', 'Payment details', 'Review your order'];
 const { formId, formField } = checkoutFormModel;
@@ -37,13 +37,12 @@ function _renderStepContent(step) {
 }
 
 export default function CheckoutPage() {
-  const classes = useStyles();
   const [activeStep, setActiveStep] = useState(0);
   const currentValidationSchema = validationSchema[activeStep];
   const isLastStep = activeStep === steps.length - 1;
 
   function _sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
+    return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
   async function _submitForm(values, actions) {
@@ -73,8 +72,8 @@ export default function CheckoutPage() {
       <Typography component="h1" variant="h4" align="center">
         Checkout
       </Typography>
-      <Stepper activeStep={activeStep} className={classes.stepper}>
-        {steps.map(label => (
+      <Stepper activeStep={activeStep}>
+        {steps.map((label) => (
           <Step key={label}>
             <StepLabel>{label}</StepLabel>
           </Step>
@@ -93,28 +92,20 @@ export default function CheckoutPage() {
               <Form id={formId}>
                 {_renderStepContent(activeStep)}
 
-                <div className={classes.buttons}>
+                <div>
                   {activeStep !== 0 && (
-                    <Button onClick={_handleBack} className={classes.button}>
-                      Back
-                    </Button>
+                    <Button onClick={_handleBack}>Back</Button>
                   )}
-                  <div className={classes.wrapper}>
+                  <div>
                     <Button
                       disabled={isSubmitting}
                       type="submit"
                       variant="contained"
                       color="primary"
-                      className={classes.button}
                     >
-                      {isLastStep ? 'Place order' : 'Next'}
+                        {isLastStep ? 'Place order' : 'Next'}
                     </Button>
-                    {isSubmitting && (
-                      <CircularProgress
-                        size={24}
-                        className={classes.buttonProgress}
-                      />
-                    )}
+                    {isSubmitting && <CircularProgress size={24} />}
                   </div>
                 </div>
               </Form>

src/components/CheckoutPage/CheckoutSuccess/CheckoutSuccess.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 
 function CheckoutSuccess() {
   return (

src/components/CheckoutPage/FormModel/checkoutFormModel.js

@@ -1,71 +1,73 @@
-export default {
+const checkoutFormModel = {
   formId: 'checkoutForm',
   formField: {
     firstName: {
       name: 'firstName',
       label: 'First name*',
-      requiredErrorMsg: 'First name is required'
+      requiredErrorMsg: 'First name is required',
     },
     lastName: {
       name: 'lastName',
       label: 'Last name*',
-      requiredErrorMsg: 'Last name is required'
+      requiredErrorMsg: 'Last name is required',
     },
     address1: {
       name: 'address1',
       label: 'Address Line 1*',
-      requiredErrorMsg: 'Address Line 1 is required'
+      requiredErrorMsg: 'Address Line 1 is required',
     },
     address2: {
       name: 'address2',
-      label: 'Address Line 2'
+      label: 'Address Line 2',
     },
     city: {
       name: 'city',
       label: 'City*',
-      requiredErrorMsg: 'City is required'
+      requiredErrorMsg: 'City is required',
     },
     state: {
       name: 'state',
-      label: 'State/Province/Region'
+      label: 'State/Province/Region',
     },
     zipcode: {
       name: 'zipcode',
       label: 'Zipcode*',
       requiredErrorMsg: 'Zipcode is required',
-      invalidErrorMsg: 'Zipcode is not valid (e.g. 70000)'
+      invalidErrorMsg: 'Zipcode is not valid (e.g. 70000)',
     },
     country: {
       name: 'country',
       label: 'Country*',
-      requiredErrorMsg: 'Country is required'
+      requiredErrorMsg: 'Country is required',
     },
     useAddressForPaymentDetails: {
       name: 'useAddressForPaymentDetails',
-      label: 'Use this address for payment details'
+      label: 'Use this address for payment details',
     },
     nameOnCard: {
       name: 'nameOnCard',
       label: 'Name on card*',
-      requiredErrorMsg: 'Name on card is required'
+      requiredErrorMsg: 'Name on card is required',
     },
     cardNumber: {
       name: 'cardNumber',
       label: 'Card number*',
       requiredErrorMsg: 'Card number is required',
-      invalidErrorMsg: 'Card number is not valid (e.g. 4111111111111)'
+      invalidErrorMsg: 'Card number is not valid (e.g. 4111111111111)',
     },
     expiryDate: {
       name: 'expiryDate',
       label: 'Expiry date*',
       requiredErrorMsg: 'Expiry date is required',
-      invalidErrorMsg: 'Expiry date is not valid'
+      invalidErrorMsg: 'Expiry date is not valid',
     },
     cvv: {
       name: 'cvv',
       label: 'CVV*',
       requiredErrorMsg: 'CVV is required',
-      invalidErrorMsg: 'CVV is invalid (e.g. 357)'
-    }
-  }
+      invalidErrorMsg: 'CVV is invalid (e.g. 357)',
+    },
+  },
 };
+
+export default checkoutFormModel;

src/components/CheckoutPage/FormModel/formInitialValues.js

@@ -11,8 +11,8 @@ const {
     nameOnCard,
     cardNumber,
     expiryDate,
-    cvv
-  }
+    cvv,
+  },
 } = checkoutFormModel;
 
 export default {
@@ -26,5 +26,5 @@ export default {
   [nameOnCard.name]: '',
   [cardNumber.name]: '',
   [expiryDate.name]: '',
-  [cvv.name]: ''
+  [cvv.name]: '',
 };

src/components/CheckoutPage/FormModel/validationSchema.js

@@ -12,8 +12,8 @@ const {
     nameOnCard,
     cardNumber,
     expiryDate,
-    cvv
-  }
+    cvv,
+  },
 } = checkoutFormModel;
 
 const visaRegEx = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
@@ -23,19 +23,17 @@ export default [
     [firstName.name]: Yup.string().required(`${firstName.requiredErrorMsg}`),
     [lastName.name]: Yup.string().required(`${lastName.requiredErrorMsg}`),
     [address1.name]: Yup.string().required(`${address1.requiredErrorMsg}`),
-    [city.name]: Yup.string()
-      .nullable()
-      .required(`${city.requiredErrorMsg}`),
+    [city.name]: Yup.string().nullable().required(`${city.requiredErrorMsg}`),
     [zipcode.name]: Yup.string()
       .required(`${zipcode.requiredErrorMsg}`)
       .test(
         'len',
         `${zipcode.invalidErrorMsg}`,
-        val => val && val.length === 5
+        (val) => val && val.length === 5
       ),
     [country.name]: Yup.string()
       .nullable()
-      .required(`${country.requiredErrorMsg}`)
+      .required(`${country.requiredErrorMsg}`),
   }),
   Yup.object().shape({
     [nameOnCard.name]: Yup.string().required(`${nameOnCard.requiredErrorMsg}`),
@@ -45,7 +43,7 @@ export default [
     [expiryDate.name]: Yup.string()
       .nullable()
       .required(`${expiryDate.requiredErrorMsg}`)
-      .test('expDate', expiryDate.invalidErrorMsg, val => {
+      .test('expDate', expiryDate.invalidErrorMsg, (val) => {
         if (val) {
           const startDate = new Date();
           const endDate = new Date(2050, 12, 31);
@@ -58,6 +56,6 @@ export default [
       }),
     [cvv.name]: Yup.string()
       .required(`${cvv.requiredErrorMsg}`)
-      .test('len', `${cvv.invalidErrorMsg}`, val => val && val.length === 3)
-  })
+      .test('len', `${cvv.invalidErrorMsg}`, (val) => val && val.length === 3),
+  }),
 ];