From 7cfaaa220594c6aab400f6453c3c66614c27c980 Mon Sep 17 00:00:00 2001
From: Gwendolen Lynch <gwendolen.lynch@gmail.com>
Date: Thu, 27 Apr 2023 08:44:33 +0200
Subject: [PATCH 1/2] Fix typos

---
 src/Context.tsx               |  4 ++--
 src/components/SecondStep.tsx | 14 +++++++-------
 src/initialValues.ts          |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/Context.tsx b/src/Context.tsx
index bb8920c..9b6f791 100644
--- a/src/Context.tsx
+++ b/src/Context.tsx
@@ -175,7 +175,7 @@ export function StepsProvider({ children }: ProviderProps) {
     []
   )
 
-  const constextValue = useMemo(
+  const contextValue = useMemo(
     () => ({
       activeStep,
       formValues,
@@ -189,7 +189,7 @@ export function StepsProvider({ children }: ProviderProps) {
   )
 
   return (
-    <AppContext.Provider value={constextValue}>
+    <AppContext.Provider value={contextValue}>
       <div className='mui-step-form'>{children}</div>
     </AppContext.Provider>
   )
diff --git a/src/components/SecondStep.tsx b/src/components/SecondStep.tsx
index 9c83807..eefb2e7 100644
--- a/src/components/SecondStep.tsx
+++ b/src/components/SecondStep.tsx
@@ -10,14 +10,14 @@ import { AppContext } from '../Context'
 
 export default function SecondStep() {
   const { formValues, handleChange, handleBack, handleNext, variant, margin } = useContext(AppContext)
-  const { city, date, phone, agreenemt } = formValues
+  const { city, date, phone, agreement } = formValues
 
   const isError = useCallback(
     () =>
-      Object.keys({ city, date, phone, agreenemt }).some(
+      Object.keys({ city, date, phone, agreement }).some(
         (name) => (formValues[name].required && !formValues[name].value) || formValues[name].error
       ),
-    [formValues, city, date, phone, agreenemt]
+    [formValues, city, date, phone, agreement]
   )
 
   return (
@@ -73,16 +73,16 @@ export default function SecondStep() {
           <FormControlLabel
             control={
               <Checkbox
-                checked={agreenemt.value}
+                checked={agreement.value}
                 onChange={handleChange}
-                name='agreenemt'
+                name='agreement'
                 color='primary'
-                required={agreenemt.required}
+                required={agreement.required}
               />
             }
             label='Agree to terms and conditions'
           />
-          <FormHelperText error={!!agreenemt.error}>{agreenemt.error}</FormHelperText>
+          <FormHelperText error={!!agreement.error}>{agreement.error}</FormHelperText>
         </Grid>
       </Grid>
 
diff --git a/src/initialValues.ts b/src/initialValues.ts
index 809665e..bfbf478 100644
--- a/src/initialValues.ts
+++ b/src/initialValues.ts
@@ -39,7 +39,7 @@ export const initialValues: ValidationSchema = {
     minLength: 3,
     maxLength: 20
   },
-  agreenemt: {
+  agreement: {
     value: false,
     error: '',
     required: true,

From 12f0c96650a9880ee8aebd36c88f6d5026d794da Mon Sep 17 00:00:00 2001
From: Gwendolen Lynch <gwendolen.lynch@gmail.com>
Date: Thu, 27 Apr 2023 08:45:03 +0200
Subject: [PATCH 2/2] HTML5 email regex

---
 src/Context.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Context.tsx b/src/Context.tsx
index 9b6f791..d5f8fed 100644
--- a/src/Context.tsx
+++ b/src/Context.tsx
@@ -2,7 +2,7 @@ import React, { createContext, useCallback, useMemo, useReducer } from 'react'
 import { initialValues } from './initialValues'
 
 const isText = /^[A-Z ]+$/i
-const isEmail = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
+const isEmail = /^[a-zA-Z0-9.!#$%&'*+\\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/
 const isPhone = /^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4,6})$/ // us
 const isZip = /^[0-9]{5}([- /]?[0-9]{4})?$/ // us
 const isNumber = /^\d+$/