fix build and linting issues

package.json

@@ -11,11 +11,11 @@
   },
   "copyright": "WMCA",
   "scripts": {
-    "start": "react-app-rewired start",
+    "start": "react-app-rewired --openssl-legacy-provider start",
     "lint:styles": "sass-lint '**/*.scss'",
     "update-packages": "ncu",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
+    "build": "react-app-rewired --openssl-legacy-provider build",
+    "test": "react-app-rewired --openssl-legacy-provider test",
     "eject": "react-scripts eject"
   },
   "dependencies": {
@@ -28,14 +28,14 @@
     "esri-loader": "^3.1.0",
     "logrocket": "^1.0.14",
     "logrocket-react": "^4.0.1",
-    "node-sass": "^5.0.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-app-polyfill": "^2.0.0",
-    "react-debounce-input": "^3.2.3",
+    "react-debounce-input": "^3.2.5",
     "react-dom": "^17.0.1",
-    "react-hook-form": "^5.7.2",
-    "react-scripts": "4.0.3"
+    "react-hook-form": "^6.15.7",
+    "react-scripts": "4.0.3",
+    "sass": "^1.58.3"
   },
   "devDependencies": {
     "eslint-config-airbnb": "^18.2.1",

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
@@ -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,7 +205,7 @@ const Form = ({
             </div>
           </div>
         )}
-      </FormContext>
+      </FormProvider>
     </>
   );
 };

src/components/Form/Step0Recovery/Step0Recovery.js

@@ -18,7 +18,8 @@ const Step0Recovery = ({ setFormSubmitStatus }) => {
   // Labels used on inputs and for validation
   const emailLabel = 'Email address';
   // Logic used to validate the email field
-  const emailRegex = /^[\w!#$%&'*+\-/=?^_`{|}~]+(\.[\w!#$%&'*+\-/=?^_`{|}~]+)*@((([-\w]+\.)+[a-zA-Z]{2,4})|(([0-9]{1,3}\.){3}[0-9]{1,3}))$/; // Matches email regex on server
+  const emailRegex =
+    /^[\w!#$%&'*+\-/=?^_`{|}~]+(\.[\w!#$%&'*+\-/=?^_`{|}~]+)*@((([-\w]+\.)+[a-zA-Z]{2,4})|(([0-9]{1,3}\.){3}[0-9]{1,3}))$/; // Matches email regex on server
   const emailValidation = register({
     required: `${emailLabel} is required`,
     pattern: {

src/components/Form/Step10SubmitConfirmation/Success.js

@@ -4,15 +4,9 @@ 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 { Phone, SMSAlert, EmailAlert } = formDataState.formData;
-
-  const alignCenter = {
-    textAlign: 'center',
-  };
 
   let message;
   let steps;
@@ -26,7 +20,6 @@ function Success() {
       'Visit the link in the email to manage your disruption alerts.',
       'You can now manage your services and communication preferences. You can access the page at any time by visiting the link in your email.',
     ];
-  } else if (Phone && SMSAlert === 'yes' && EmailAlert === 'yes') {
   } else if (Phone && SMSAlert === 'yes' && EmailAlert === 'yes') {
     /* Text messages AND Email */
     message = 'You have successfully signed up to text message and email alerts';
@@ -61,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/Step2SmsAlert/Step2SmsAlert.js

@@ -33,16 +33,11 @@ const Step2SmsAlert = () => {
             classes="wmnds-m-b-lg"
             content="You can choose quiet hours or days. We won’t send you text or email alerts during those times."
           />
-          <InsetText
-            classes="wmnds-m-b-lg"
-            content="You can choose quiet hours or days. We won’t send you text or email alerts during those times."
-          />
         </legend>
 
         <Radios
           name="SMSAlert"
           classes="wmnds-m-b-sm"
-          classes="wmnds-m-b-sm"
           radios={radioButtons}
           fieldValidation={register({
             required: `Please select one option to proceed`,

src/components/Form/Step5Email/Step5Email.js

@@ -12,9 +12,8 @@ import useFormData from '../useFormData';
 
 const 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)
+  const { register, handleSubmit, showGenericError, continueButton, setStep } =
+    useStepLogic(formRef); // Custom hook for handling continue button (validation, errors etc)
 
   const [checkingEmail, setcheckingEmail] = useState(false);
 
@@ -26,11 +25,13 @@ const Step5Email = () => {
   // Labels used on inputs and for validation
   const emailLabel = 'Email address';
   // Logic used to validate the email field
-  const emailRegex = /^[\w!#$%&'*+\-/=?^_`{|}~]+(\.[\w!#$%&'*+\-/=?^_`{|}~]+)*@((([-\w]+\.)+[a-zA-Z]{2,4})|(([0-9]{1,3}\.){3}[0-9]{1,3}))$/; // Matches email regex on server
+  const emailRegex =
+    /^[\w!#$%&'*+\-/=?^_`{|}~]+(\.[\w!#$%&'*+\-/=?^_`{|}~]+)*@((([-\w]+\.)+[a-zA-Z]{2,4})|(([0-9]{1,3}\.){3}[0-9]{1,3}))$/; // Matches email regex on server
   // To show in case of the entered email is not registered.
 
   // Function to check if email address has already registered
   const checkEmailAddress = async (value) => {
+    console.log(value);
     setcheckingEmail(true); // Set checking email to true so continue button shows loading spinner
 
     try {

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

@@ -26,7 +26,7 @@ const SelectedTrainStation = ({ station, clearStation }) => {
 
 // PropTypes
 SelectedTrainStation.propTypes = {
-  station: PropTypes.objectOf(PropTypes.any).isRequired,
+  station: PropTypes.objectOf(PropTypes).isRequired,
   clearStation: PropTypes.func.isRequired,
 };
 

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

@@ -78,7 +78,7 @@ const TrainAutoComplete = ({ station, setStation }) => {
 
 // PropTypes
 TrainAutoComplete.propTypes = {
-  station: PropTypes.objectOf(PropTypes.any),
+  station: PropTypes.objectOf(PropTypes),
   setStation: PropTypes.func.isRequired,
 };
 

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

@@ -148,9 +148,9 @@ const TrainAutoCompleteSelectLines = ({
 
 TrainAutoCompleteSelectLines.propTypes = {
   formDataDispatch: PropTypes.func.isRequired,
-  formDataState: PropTypes.objectOf(PropTypes.any).isRequired,
+  formDataState: PropTypes.objectOf(PropTypes).isRequired,
   closeAutoComlplete: PropTypes.func.isRequired,
-  trainStations: PropTypes.objectOf(PropTypes.any).isRequired,
+  trainStations: PropTypes.objectOf(PropTypes).isRequired,
 };
 
 export default TrainAutoCompleteSelectLines;

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

@@ -26,7 +26,7 @@ const SelectedTramStop = ({ stop, clearStop }) => {
 
 // PropTypes
 SelectedTramStop.propTypes = {
-  stop: PropTypes.objectOf(PropTypes.any).isRequired,
+  stop: PropTypes.objectOf(PropTypes).isRequired,
   clearStop: PropTypes.func.isRequired,
 };
 

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

@@ -78,7 +78,7 @@ const TramAutoComplete = ({ stop, setStop }) => {
 
 // PropTypes
 TramAutoComplete.propTypes = {
-  stop: PropTypes.objectOf(PropTypes.any),
+  stop: PropTypes.objectOf(PropTypes),
   setStop: PropTypes.func.isRequired,
 };
 

src/components/Form/Step9Confirm/Step9SummarySection.js

@@ -55,7 +55,7 @@ function Step9SummarySection() {
       >
         Change
       </button>
-    ) : null,
+    ) : null
   );
 
   const dataLine2 = [];
@@ -72,7 +72,7 @@ function Step9SummarySection() {
       >
         Change
       </button>
-    ) : null,
+    ) : null
   );
 
   const dataLine3 = [];
@@ -88,7 +88,7 @@ function Step9SummarySection() {
         }}
       >
         Change
-      </button>,
+      </button>
     );
   }
   /* End of Table Data */

src/components/Form/StepQuietHours/StepQuietHours.js

@@ -14,7 +14,7 @@ const StepQuietHours = () => {
   // Add InsetText with extra info when selected option is "no"
   let extraInfo;
   const selectedOption = document.querySelector(
-    'input.wmnds-fe-radios__input[name="EmailAlert"]:checked',
+    'input.wmnds-fe-radios__input[name="EmailAlert"]:checked'
   );
   if (selectedOption && selectedOption.value === 'no') {
     extraInfo = (

src/components/Form/useStepLogic.js

@@ -1,13 +1,13 @@
 import React, { useState, useContext } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 // Import contexts
 import { FormDataContext } from 'globalState/FormDataContext';
 // Import components
 import GenericError from 'components/shared/Errors/GenericError';
 import Button from 'components/shared/Button/Button';
 
 const useStepLogic = (formRef) => {
-  const { register, errors, triggerValidation, getValues } = useFormContext(); // Get useForm methods
+  const { register, errors, trigger, getValues } = useForm(); // Get useForm methods
   const [formDataState, formDataDispatch] = useContext(FormDataContext); // Get the state/dispatch of form data from FormDataContext
   const [isContinuePressed, setIsContinuePressed] = useState(false); // State for tracking if continue has been pressed
 
@@ -22,7 +22,7 @@ const useStepLogic = (formRef) => {
   // Update the current step to the correct one depending on users selection
   const handleSubmit = async (event) => {
     event.preventDefault();
-    const result = await triggerValidation();
+    const result = await trigger();
     setIsContinuePressed(true);
     // if no errors
     if (result) {

src/components/HeaderAndBreadCrumb.js

@@ -31,7 +31,7 @@ const HeaderAndBreadcrumb = ({ isFormStarted, formSubmitStatus }) => {
         </div>
       </header>
 
-      <div className="wmnds-container">
+      {/* <div className="wmnds-container">
         <div className="wmnds-banner-container">
           <div className="wmnds-col-1">
             <div className="wmnds-banner-container__phase-wrapper">
@@ -59,7 +59,7 @@ const HeaderAndBreadcrumb = ({ isFormStarted, formSubmitStatus }) => {
             </p>
           </div>
         </div>
-      </div>
+      </div> */}
 
       {/* <!-- Breadcrumb --> */}
       {/* Only show breadcrumbs if the form isn't started or we are on success/error page (formSubmitStatus) */}

src/components/shared/FormElements/Checkboxes/Checkboxes.js

@@ -18,7 +18,7 @@ const Checkboxes = ({ name, label, checkboxes, fieldValidation, parentCallback }
 
   const handleOnChange = (position) => {
     const updatedCheckedState = checkedState.map((item, index) =>
-      index === position ? !item : item,
+      index === position ? !item : item
     );
     setCheckedState(updatedCheckedState);
     const daysSelected = updatedCheckedState.map((currentState, index) => {

src/components/shared/FormElements/Dropdown/Dropdown.js

@@ -36,7 +36,7 @@ const Dropdown = ({
             />
           )}
           <label className="wmnds-fe-label" htmlFor={name}>
-            {hint}
+            {label} {hint}
           </label>
           <select
             className="wmnds-fe-dropdown__select"

src/components/shared/RemoveService/RemoveService.module.scss

@@ -3,7 +3,7 @@
 .leftWrap {
   flex-wrap: nowrap;
 
-  @media all and(min-width: $breakpoint-sm) {
+  @media all and (min-width: $breakpoint-sm) {
     width: calc(100% - 180px);
   }
 }
@@ -14,7 +14,7 @@
 
 .removeBtn {
   margin-top: $size-md;
-  @media screen and(min-width: $breakpoint-sm) {
+  @media screen and (min-width: $breakpoint-sm) {
     margin: 0;
   }
 }

src/globalState/FormDataContext.js

@@ -80,7 +80,7 @@ export const FormDataProvider = (props) => {
             ...state.formData,
             TramLines: state.formData.TramLines.filter(
               (line) =>
-                action.payload.From.id !== line.From.id || action.payload.To.id !== line.To.id,
+                action.payload.From.id !== line.From.id || action.payload.To.id !== line.To.id
             ),
           },
         };