fix: build

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

@@ -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;
@@ -208,7 +208,7 @@ const Form = ({
       </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/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)
 
@@ -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;

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

@@ -12,7 +12,7 @@ import BusAutoCompleteResult from './BusAutoCompleteResult';
 import useAutoCompleteAPI from '../customHooks/useAutoCompleteAPI';
 import useHandleAutoCompleteKeys from '../customHooks/useHandleAutoCompleteKeys';
 
-const BusAutoComplete = ({ closeAutoComplete }) => {
+function BusAutoComplete({ closeAutoComplete }) {
   const { formDataState } = useStepLogic(); // get formDataState and setStep logic from customHook
   const [query, setQuery] = useState(); // placeholder for getting/setting query
   const BusServices = formDataState.formData.BusServices || []; // Get currently selected bus services
@@ -30,7 +30,7 @@ const BusAutoComplete = ({ closeAutoComplete }) => {
   const { loading, errorInfo, results } = useAutoCompleteAPI(
     `/api/lineinfo?q=${encodeURI(formatQuery(query))}`,
     'bus',
-    query
+    query,
   );
 
   // Import handleKeyDown function from customHook (used by all modes)
@@ -112,7 +112,7 @@ const BusAutoComplete = ({ closeAutoComplete }) => {
       </div>
     </div>
   );
-};
+}
 
 BusAutoComplete.propTypes = {
   closeAutoComplete: PropTypes.func.isRequired,

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

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { FormDataContext } from 'globalState/FormDataContext';
 
-const BusAutoCompleteResult = (props) => {
+function BusAutoCompleteResult(props) {
   const [formState, formDataDispatch] = useContext(FormDataContext); // Get state and dispatch of form
   const { result, handleKeyDown, handleCancel } = props || {};
   // Destructure fields from result
@@ -51,6 +51,6 @@ const BusAutoCompleteResult = (props) => {
       </div>
     </li>
   );
-};
+}
 
 export default BusAutoCompleteResult;