Next release

package.json

@@ -19,47 +19,46 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
-    "@sentry/react": "^6.2.1",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^10.4.9",
-    "@testing-library/user-event": "^12.8.3",
-    "axios": "^0.21.1",
-    "dompurify": "^2.2.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@sentry/react": "^7.110.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^15.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "axios": "^1.6.8",
+    "dompurify": "^3.1.0",
     "esri-loader": "^3.1.0",
-    "logrocket": "^1.0.14",
-    "logrocket-react": "^4.0.1",
-    "prop-types": "^15.7.2",
-    "react": "^16.12.0 || ^16.13.1 || ^16.14.0",
-    "react-app-polyfill": "^2.0.0",
+    "logrocket": "^8.1.0",
+    "logrocket-react": "^6.0.3",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-app-polyfill": "^3.0.0",
     "react-debounce-input": "^3.3.0",
-    "react-dom": "^16.12.0 || ^16.14.0",
-    "react-hook-form": "^5.7.2",
-    "react-scripts": ">=2.1.3 || 3.4.5"
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.3",
+    "react-scripts": "5.0.1",
+    "sass": "^1.75.0"
   },
   "devDependencies": {
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.1.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jam3": "^0.2.3",
-    "eslint-plugin-prettier": "^3.3.1",
-    "npm-check-updates": "^11.2.1",
-    "prettier": "^2.2.1",
-    "react-app-rewired": "^2.1.8",
-    "sass": "^1.58.3",
+    "eslint-plugin-prettier": "^5.1.3",
+    "npm-check-updates": "^16.14.18",
+    "prettier": "^3.2.5",
+    "react-app-rewired": "^2.2.1",
     "sass-lint": "^1.13.1",
-    "sass-lint-webpack": "^1.0.3"
+    "sass-lint-webpack": "^1.0.4"
   },
   "browserslist": {
     "production": [
       ">0.2%",
       "not dead",
-      "not op_mini all",
-      "ie 11"
+      "not op_mini all"
     ],
     "development": [
       ">0.2%",
       "not dead",
-      "not op_mini all",
-      "ie 11"
+      "not op_mini all"
     ]
   },
   "sasslintConfig": ".sass-lint.yml"

src/components/Form/Form.js

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { useForm, FormContext } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
 // Import contexts
 import { FormDataContext } from 'globalState/FormDataContext';
 // Helper
@@ -25,13 +25,13 @@ import useTrackFormAbandonment from './useTrackFormAbandonment';
 // Import styling
 import s from './Form.module.scss';
 
-const Form = ({
+function Form({
   formSubmitStatus,
   setFormSubmitStatus,
   isRecoverLinkPressed,
   setIsFormStarted,
   setIsRecoverLinkPressed,
-}) => {
+}) {
   const [formDataState, formDataDispatch] = useContext(FormDataContext); // Get the state/dispatch of form data from FormDataContext
   const { currentStep, hasReachedConfirmation } = formDataState; // Destructure step from state
   const { ExistingUser, SMSAlert } = formDataState.formData;
@@ -115,7 +115,7 @@ const Form = ({
     <>
       {/* pass all methods into the context */}
       {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-      <FormContext {...methods}>
+      <FormProvider {...methods}>
         <div className="wmnds-col-1 wmnds-col-md-2-3">
           {stepToGoTo && (
             <div className="wmnds-col-1 wmnds-m-b-md">
@@ -205,10 +205,10 @@ const Form = ({
             </div>
           </div>
         )}
-      </FormContext>
+      </FormProvider>
     </>
   );
-};
+}
 
 Form.propTypes = {
   formSubmitStatus: PropTypes.bool,

src/components/Form/Step0Recovery/Step0Recovery.js

@@ -10,7 +10,7 @@ import Input from 'components/shared/FormElements/Input/Input';
 import Button from 'components/shared/Button/Button';
 import Message from 'components/shared/Message/Message';
 
-const Step0Recovery = ({ setFormSubmitStatus }) => {
+function Step0Recovery({ setFormSubmitStatus }) {
   const [, formDataDispatch] = useContext(FormDataContext);
   const formRef = useRef(); // Used so we can keep track of the form DOM element
   const { register } = useStepLogic(formRef); // Custom hook for handling continue button (validation, errors etc)
@@ -100,7 +100,7 @@ const Step0Recovery = ({ setFormSubmitStatus }) => {
       />
     </form>
   );
-};
+}
 
 Step0Recovery.propTypes = {
   setFormSubmitStatus: PropTypes.func.isRequired,

src/components/Form/Step10SubmitConfirmation/Success.js

@@ -4,15 +4,10 @@ import InsetText from 'components/shared/InsetText/InsetText';
 import { FormDataContext } from '../../../globalState/FormDataContext';
 
 function Success() {
-  // eslint-disable-next-line no-unused-vars
-  const [formDataState, formDataDispatch] = useContext(FormDataContext);
+  const [formDataState] = useContext(FormDataContext);
   const { isRequestingRecovery } = formDataState;
   const { Phone, SMSAlert, EmailAlert } = formDataState.formData;
 
-  const alignCenter = {
-    textAlign: 'center',
-  };
-
   let message;
   let steps;
   let title = 'Sign up to service disruption alerts';
@@ -59,7 +54,7 @@ function Success() {
           <h1>{title}</h1>
         </div>
         <div className="wmnds-col-1 wmnds-m-b-xl">
-          <div style={alignCenter} className="wmnds-msg-summary wmnds-msg-summary--success-fill ">
+          <div className="wmnds-msg-summary wmnds-msg-summary--success-fill ">
             <div className="wmnds-msg-summary__header">
               <h3 className="wmnds-msg-summary__title">{message}</h3>
             </div>

src/components/Form/Step1Name/Step1Name.js

@@ -6,17 +6,18 @@ import useStepLogic from 'components/Form/useStepLogic';
 import Input from 'components/shared/FormElements/Input/Input';
 import SectionStepInfo from 'components/shared/SectionStepInfo/SectionStepInfo';
 
-const Step1Name = () => {
+function Step1Name() {
   const formRef = useRef(); // Used so we can keep track of the form DOM element
-  const { register, handleSubmit, showGenericError, continueButton } = useStepLogic(formRef); // Custom hook for handling continue button (validation, errors etc)
+
+  const { register, handleSubmit, showGenericError, continueButton } = useStepLogic(); // Custom hook for handling continue button (validation, errors etc)
 
   // Labels used on inputs and for validation
   const fNameLabel = 'First name';
   const lNameLabel = 'Last name';
 
   // Logic used to validate fields
   const fieldValidation = (name) => {
-    return register({ required: `${name} is required` });
+    return { ...register(name, { required: true }) };
   };
 
   return (
@@ -41,21 +42,21 @@ const Step1Name = () => {
           name="Firstname"
           label={fNameLabel}
           autocomplete="given-name"
-          fieldValidation={fieldValidation(fNameLabel)}
+          fieldValidation={fieldValidation('Firstname')}
         />
         <Input
           className="wmnds-col-1 wmnds-col-lg-3-4"
           name="LastName"
           label={lNameLabel}
           autocomplete="family-name"
-          fieldValidation={fieldValidation(lNameLabel)}
+          fieldValidation={fieldValidation('LastName')}
         />
       </fieldset>
 
       {/* Continue button */}
       {continueButton()}
     </form>
   );
-};
+}
 
 export default Step1Name;

src/components/Form/Step2SmsAlert/Step2SmsAlert.js

@@ -6,7 +6,7 @@ import Radios from 'components/shared/FormElements/Radios/Radios';
 import SectionStepInfo from 'components/shared/SectionStepInfo/SectionStepInfo';
 import InsetText from 'components/shared/InsetText/InsetText';
 
-const Step2SmsAlert = () => {
+function Step2SmsAlert() {
   const formRef = useRef(); // Used so we can keep track of the form DOM element
   const { register, handleSubmit, showGenericError, continueButton } = useStepLogic(formRef); // Custom hook for handling continue button (validation, errors etc)
 
@@ -26,7 +26,7 @@ const Step2SmsAlert = () => {
       <fieldset className="wmnds-fe-fieldset wmnds-col-1">
         <legend className="wmnds-fe-fieldset__legend">
           <h2 className="wmnds-fe-question">
-            Do you want to recieve text message alerts for disruptions?
+            Do you want to receive text message alerts for disruptions?
           </h2>
           <p>We’ll automatically send text message alerts straight to your mobile phone.</p>
           <InsetText
@@ -49,6 +49,6 @@ const Step2SmsAlert = () => {
       {continueButton()}
     </form>
   );
-};
+}
 
 export default Step2SmsAlert;

src/components/Form/Step3SmsConsent/Step3SmsConsent.js

@@ -7,7 +7,7 @@ import WarningText from 'components/shared/WarningText/WarningText';
 import useStepLogic from 'components/Form/useStepLogic';
 import useFormData from '../useFormData';
 
-const Step3SmsConsent = () => {
+function Step3SmsConsent() {
   const formRef = useRef(); // Used so we can keep track of the form DOM element
   const { register, handleSubmit, showGenericError, continueButton } = useStepLogic(formRef); // Custom hook for handling continue button (validation, errors etc)
 
@@ -154,6 +154,6 @@ const Step3SmsConsent = () => {
       {continueButton()}
     </form>
   );
-};
+}
 
 export default Step3SmsConsent;

src/components/Form/Step4Phone/Step4Phone.js

@@ -6,7 +6,7 @@ import Input from 'components/shared/FormElements/Input/Input';
 import SectionStepInfo from 'components/shared/SectionStepInfo/SectionStepInfo';
 import useFormData from '../useFormData';
 
-const Step4Phone = () => {
+function Step4Phone() {
   const formRef = useRef(); // Used so we can keep track of the form DOM element
   const { register, handleSubmit, showGenericError, continueButton } = useStepLogic(formRef); // Custom hook for handling continue button (validation, errors etc)
 
@@ -52,6 +52,6 @@ const Step4Phone = () => {
       {continueButton()}
     </form>
   );
-};
+}
 
 export default Step4Phone;

src/components/Form/Step5Email/Step5Email.js

@@ -10,7 +10,7 @@ import { setSearchParam } from 'helpers/URLSearchParams';
 import useStepLogic from 'components/Form/useStepLogic';
 import useFormData from '../useFormData';
 
-const Step5Email = () => {
+function Step5Email() {
   const formRef = useRef(); // Used so we can keep track of the form DOM element
   const { register, handleSubmit, showGenericError, continueButton, setStep } =
     useStepLogic(formRef); // Custom hook for handling continue button (validation, errors etc)
@@ -75,6 +75,7 @@ const Step5Email = () => {
       value: emailRegex,
       message: `Enter an ${emailLabel.toLowerCase()} in the correct format`,
     },
+    // eslint-disable-next-line react/no-unstable-nested-components
     validate: async (value) => (await checkEmailAddress(value)) || ErrorMessage, // Check if email exists, if false is returned (email exists), then pipe/show error message
   });
 
@@ -128,6 +129,6 @@ const Step5Email = () => {
       {continueButton(checkingEmail)}
     </form>
   );
-};
+}
 
 export default Step5Email;

src/components/Form/Step6EmailAlert/Step6EmailAlert.js

@@ -7,7 +7,7 @@ import SectionStepInfo from 'components/shared/SectionStepInfo/SectionStepInfo';
 import InsetText from 'components/shared/InsetText/InsetText';
 import useFormData from '../useFormData';
 
-const Step6EmailAlert = () => {
+function Step6EmailAlert() {
   const formRef = useRef(); // Used so we can keep track of the form DOM element
   const { register, handleSubmit, showGenericError, continueButton } = useStepLogic(formRef); // Custom hook for handling continue button (validation, errors etc)
   const [radioValue, setRadioValue] = useState();
@@ -74,6 +74,6 @@ const Step6EmailAlert = () => {
       {continueButton()}
     </form>
   );
-};
+}
 
 export default Step6EmailAlert;

src/components/Form/Step7AddService/AddBusService/AddBusService.js

@@ -5,7 +5,7 @@ import Button from 'components/shared/Button/Button';
 import RemoveService from 'components/shared/RemoveService/RemoveService';
 import useStepLogic from 'components/Form/useStepLogic';
 
-const AddBusService = () => {
+function AddBusService() {
   const { setStep, formDataState, formDataDispatch } = useStepLogic();
 
   const { BusServices } = formDataState.formData;
@@ -52,6 +52,6 @@ const AddBusService = () => {
       )}
     </>
   );
-};
+}
 
 export default AddBusService;

src/components/Form/Step7AddService/AddRoadArea/AddRoadArea.js

@@ -4,7 +4,7 @@ import Button from 'components/shared/Button/Button';
 import RemoveService from 'components/shared/RemoveService/RemoveService';
 import useStepLogic from 'components/Form/useStepLogic';
 
-const AddRoadService = () => {
+function AddRoadService() {
   const { setStep, formDataState, formDataDispatch } = useStepLogic();
   const { RoadAreas } = formDataState.formData;
 
@@ -49,6 +49,6 @@ const AddRoadService = () => {
       )}
     </>
   );
-};
+}
 
 export default AddRoadService;

src/components/Form/Step7AddService/AddTrainService/AddTrainService.js

@@ -4,7 +4,7 @@ import Button from 'components/shared/Button/Button';
 import RemoveService from 'components/shared/RemoveService/RemoveService';
 import useStepLogic from 'components/Form/useStepLogic';
 
-const AddTrainService = () => {
+function AddTrainService() {
   const { setStep, formDataState, formDataDispatch } = useStepLogic();
   const { Trains } = formDataState.formData;
 
@@ -57,6 +57,6 @@ const AddTrainService = () => {
       )}
     </>
   );
-};
+}
 
 export default AddTrainService;

src/components/Form/Step7AddService/AddTramService/AddTramService.js

@@ -6,7 +6,7 @@ import useStepLogic from 'components/Form/useStepLogic';
 import Button from 'components/shared/Button/Button';
 import RemoveService from 'components/shared/RemoveService/RemoveService';
 
-const AddTramService = () => {
+function AddTramService() {
   const { formDataState, formDataDispatch, setStep } = useStepLogic();
   const { selectableTramLineIds, filterTramLineInfo } = useSelectableTramLines();
   const { TramLines, LineId } = formDataState.formData;
@@ -87,6 +87,6 @@ const AddTramService = () => {
       )}
     </>
   );
-};
+}
 
 export default AddTramService;

src/components/Form/Step8SearchForService/AutoComplete/AutoComplete.js

@@ -9,7 +9,7 @@ import TrainAutoComplete from './TrainAutoComplete/TrainAutoComplete';
 import TramAutoComplete from './TramAutoComplete/TramAutoComplete';
 import RoadAutoComplete from './RoadAutoComplete/RoadAutoComplete';
 
-const AutoComplete = () => {
+function AutoComplete() {
   const { mode, setMode } = useFormData();
   const { formDataState, setStep } = useStepLogic();
 
@@ -55,6 +55,6 @@ const AutoComplete = () => {
 
   // Render the correct component based on logic in switch statement above
   return <>{autoCompleteToShow()}</>;
-};
+}
 
 export default AutoComplete;