Adding quiet hours and days in disruptions signup page (#281)

* Adding quiet hours and days in disruptions signup page * Fixing label for checkbox * Updating state * Updating state * Updating aria labels * Adding functionality to strip overlapping times * Adding functionality to strip overlapping times Co-authored-by: Mushtaque Ahmed <mushtaque.ahmed@wmca.org.uk>
wmcadigital · Jul 13, 2022 · 0effaf8 · 0effaf8
1 parent b612d40
commit 0effaf8
Show file tree

Hide file tree

Showing 31 changed files with 940 additions and 74 deletions.
diff --git a/.env b/.env
@@ -5,5 +5,5 @@
 REACT_APP_WMNDS_VERSION = 1.7.3
 
 # Variables that control the site title and meta descriptions
-REACT_APP_TITLE = "Sign up to email alerts about disruption"
-REACT_APP_DESCRIPTION= "Sign up to email alerts about disruption - West Midlands Network"
+REACT_APP_TITLE = "Sign up to alerts about disruptions"
+REACT_APP_DESCRIPTION= "Sign up to alerts about disruption - Transport for West Midlands"
diff --git a/.env.development b/.env.development
@@ -1,5 +1,5 @@
 # developemnt API and keys
-REACT_APP_API_HOST='https://rtccdisruptions6zqwajo6s.azurewebsites.net'
+REACT_APP_API_HOST='https://rtccdisruptionsbfasldoiz.azurewebsites.net'
 # Autocomplete API
 REACT_APP_AUTOCOMPLETE_API='https://wmca-api-portal-staging.azure-api.net'
 REACT_APP_AUTOCOMPLETE_API_KEY='0d4cca4a2c5d40c3bfbbfe45d1bbf294'

diff --git a/netlify.toml b/netlify.toml
@@ -14,13 +14,13 @@ package = "@sentry/netlify-build-plugin"
 # Use staging for branch deploys for next-release
 # So that dummy data from testing does not enter live DB
 [context."next-release".environment]
-  REACT_APP_API_HOST="https://rtccdisruptions6zqwajo6s.azurewebsites.net"
+  REACT_APP_API_HOST="https://rtccdisruptionsbfasldoiz.azurewebsites.net"
   REACT_APP_AUTOCOMPLETE_API="https://wmca-api-portal-staging.azure-api.net"
   REACT_APP_AUTOCOMPLETE_API_KEY="0d4cca4a2c5d40c3bfbbfe45d1bbf294"
   REACT_APP_ROADS_AUTOCOMPLETE_KEY="e0c1216f818a41be8d528ac1d4f7ebfd"
 
 [context.deploy-preview.environment]
-  REACT_APP_API_HOST="https://rtccdisruptions6zqwajo6s.azurewebsites.net"
+  REACT_APP_API_HOST="https://rtccdisruptionsbfasldoiz.azurewebsites.net"
   REACT_APP_AUTOCOMPLETE_API="https://wmca-api-portal-staging.azure-api.net"
   REACT_APP_AUTOCOMPLETE_API_KEY="0d4cca4a2c5d40c3bfbbfe45d1bbf294"
   REACT_APP_ROADS_AUTOCOMPLETE_KEY="e0c1216f818a41be8d528ac1d4f7ebfd"
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
 
-    <title>%REACT_APP_TITLE% - West Midlands Network</title>
+    <title>%REACT_APP_TITLE% - Transport West Midlands</title>
     <meta name="description" content="%REACT_APP_DESCRIPTION%" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
@@ -102,6 +102,7 @@
         padding: 0;
         background-color: #f3f2f1;
       }
+      .wmnds-header--mega-menu {display: none}
     </style>
 
     <!-- Google Tag Manager (noscript) -->
@@ -130,21 +131,8 @@
     <div id="root"></div>
 
     <!-- Footer -->
-    <footer class="wmnds-footer wmnds-footer--mobile-app">
-      <div class="wmnds-container wmnds-grid">
-        <div class="wmnds-col-1 wmnds-col-md-1-2">Copyright West Midlands Network &copy; 2021</div>
-        <div class="wmnds-col-1 wmnds-col-md-1-2">
-          <a
-            href="https://www.networkwestmidlands.com/privacy-cookies-policy/"
-            title="Privacy and cookies policy"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="wmnds-footer__link wmnds-link"
-            >Privacy & Cookies Policy</a
-          >
-        </div>
-      </div>
-    </footer>
+    <script src="https://cloudcdn.wmca.org.uk/tfwmassets/js/header-footer.min.js"></script>
+
     <!-- End footer -->
 
     <!-- Ajax SVG in, SVGS are referenced in app (Icon component) -->

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,7 +1,7 @@
 {
-  "short_name": "WMN - Sign up to email alerts about disruption",
-  "name": "Sign up to email alerts about disruption - West Midlands Network ",
-  "description": "Sign up to email alerts about disruption section of the West Midlands Network website",
+  "short_name": "WMN - Sign up to alerts about disruption",
+  "name": "Sign up to alerts about disruption - West Midlands Network ",
+  "description": "Sign up to alerts about disruption section of the West Midlands Network website",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/assets/styles/_vars.scss b/src/assets/styles/_vars.scss
@@ -18,7 +18,8 @@ $palettes: (
   information: #84329b,
   disable: #676869,
   plannedDisruption: #ffdd00,
-  background: #f3f2f1
+  background: #f3f2f1,
+  hover: #e2cee7
 );
 
 $white: #ffffff;

diff --git a/src/components/Breadcrumb.js b/src/components/Breadcrumb.js
@@ -26,7 +26,7 @@ function Breadcrumb() {
             className="wmnds-breadcrumb__link wmnds-breadcrumb__link--current"
             aria-current="page"
           >
-            Sign up to email alerts about disruption
+            Sign up to alerts about disruption
           </a>
         </li>
       </ol>

diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
@@ -16,6 +16,8 @@ import Step6EmailAlert from './Step6EmailAlert/Step6EmailAlert';
 import Step7AddService from './Step7AddService/Step7AddService';
 import Step8SearchForService from './Step8SearchForService/Step8SearchForService';
 import Step9Confirm from './Step9Confirm/Step9Confirm';
+import StepDisruptionAlert from './StepDisruptionAlert/StepDisruptionAlert';
+import StepQuietHours from './StepQuietHours/StepQuietHours';
 import SubmitSuccess from './Step10SubmitConfirmation/Success';
 import SubmitError from './Step10SubmitConfirmation/Error';
 // Custom Hooks
@@ -49,15 +51,15 @@ const Form = ({
   useTrackFormAbandonment(currentStep, formSubmitStatus);
 
   // Show debug options for below (this should be deleted on release)
-  const debugStepOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+  const debugStepOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
 
   let stepToGoTo;
 
   if (!ExistingUser) {
-    // NEW USERS: Show back button if the step is between 1 or 9
+    // NEW USERS: Show back button if the step is between 1 or 11
     if (
       currentStep > 1 &&
-      currentStep < 9 &&
+      currentStep < 11 &&
       !(currentStep === 5 && SMSAlert === 'no') &&
       !(currentStep === 7 && SMSAlert === 'no')
     ) {
@@ -67,13 +69,18 @@ const Form = ({
     if (currentStep === 5 && SMSAlert === 'no') {
       stepToGoTo = 2;
     }
-
+    if (currentStep === 4) {
+      stepToGoTo = 2;
+    }
+    if (currentStep === 2 && SMSAlert === 'yes') {
+      stepToGoTo = 4;
+    }
     if (currentStep === 7 && SMSAlert === 'no') {
       stepToGoTo = 5;
     }
   } else {
     /* EXISTING USERS: Show back button if the step is 4 or 6. Step 3 has no back button */
-    if (currentStep > 3 && currentStep < 9 && currentStep !== 6) {
+    if (currentStep > 3 && currentStep < 11 && currentStep !== 6) {
       stepToGoTo = currentStep - 1;
     }
 
@@ -100,7 +107,7 @@ const Form = ({
   }, []);
 
   useEffect(() => {
-    if (currentStep === 9) scrollToTopOfSummary();
+    if (currentStep === 11) scrollToTopOfSummary();
   }, [currentStep, scrollToTopOfSummary]);
 
   // Run! Like go get some data from an API.
@@ -118,7 +125,7 @@ const Form = ({
                 onClick={() =>
                   formDataDispatch({
                     type: 'UPDATE_STEP',
-                    payload: hasReachedConfirmation ? 9 : stepToGoTo,
+                    payload: hasReachedConfirmation ? 11 : stepToGoTo,
                   })
                 }
               >
@@ -152,10 +159,12 @@ const Form = ({
             {currentStep === 6 && <Step6EmailAlert />}
             {currentStep === 7 && <Step7AddService />}
             {currentStep === 8 && <Step8SearchForService />}
-            {currentStep === 9 && <Step9Confirm setFormSubmitStatus={setFormSubmitStatus} />}
+            {currentStep === 9 && <StepDisruptionAlert />}
+            {currentStep === 10 && <StepQuietHours />}
+            {currentStep === 11 && <Step9Confirm setFormSubmitStatus={setFormSubmitStatus} />}
             {/* for testing only */}
-            {currentStep === 10 && <SubmitSuccess />}
-            {currentStep === 11 && <SubmitError />}
+            {currentStep === 12 && <SubmitSuccess />}
+            {currentStep === 13 && <SubmitError />}
           </div>
         </div>
         {/* If in development based on envs then show form debugging */}

diff --git a/src/components/Form/Step10SubmitConfirmation/Success.js b/src/components/Form/Step10SubmitConfirmation/Success.js
@@ -7,7 +7,7 @@ function Success() {
   // eslint-disable-next-line no-unused-vars
   const [formDataState, formDataDispatch] = useContext(FormDataContext);
   const { isRequestingRecovery } = formDataState;
-  const { Phone, SMSAlert, EmailAlert, SMSTerms } = formDataState.formData;
+  const { Phone, SMSAlert, EmailAlert } = formDataState.formData;
 
   const alignCenter = {
     textAlign: 'center',
@@ -25,7 +25,7 @@ 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' || SMSTerms) && 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';
     steps = [
@@ -34,7 +34,7 @@ function Success() {
       'Visit the link in the confirmation email to access your disruption alert dashboard. Enter the PIN code sent to you via text message.',
       'Once you have confirmed your mobile phone number, you’ll receive disruption alerts to your mobile phone.',
     ];
-  } else if (Phone && (SMSAlert === 'yes' || SMSTerms)) {
+  } else if (Phone && SMSAlert === 'yes') {
     /* Text messages */
     message = 'You have successfully signed up to text message alerts';
     steps = [
@@ -81,7 +81,7 @@ function Success() {
 
           <p>
             <a
-              href="https://forms.office.com/Pages/ResponsePage.aspx?id=RetZCK7xCk6e-ubWa7tnLz45Weo_RTVDpYxVYcrD8wxUMzI4UlRVRVFMV002VU9FWllFTDM5QjlVWS4u"
+              href="https://forms.office.com/Pages/ResponsePage.aspx?id=RetZCK7xCk6e-ubWa7tnL51Hn3Md47tLqr_OlQdqFgtUMTE0NURDUkE2NExFWDlJTVhTQUxGTEdSWC4u"
               title="Service feedback survey"
               target="_blank"
               className="wmds-link"

diff --git a/src/components/Form/Step2SmsAlert/Step2SmsAlert.js b/src/components/Form/Step2SmsAlert/Step2SmsAlert.js
@@ -15,19 +15,6 @@ const Step2SmsAlert = () => {
     { text: 'No', value: 'no' },
   ];
 
-  const selectedOption = document.querySelector(
-    'input.wmnds-fe-radios__input[name="SMSAlert"]:checked'
-  );
-  let extraInfo;
-  if (selectedOption && selectedOption.value === 'no') {
-    extraInfo = (
-      <InsetText
-        classes="wmnds-m-b-lg"
-        content="You can also sign up to the text message service disruptions trial later in the disruption alerts dashboard."
-      />
-    );
-  }
-
   return (
     <form onSubmit={handleSubmit} ref={formRef} autoComplete="on">
       {/* Subsection */}
@@ -39,20 +26,23 @@ const Step2SmsAlert = () => {
       <fieldset className="wmnds-fe-fieldset wmnds-col-1">
         <legend className="wmnds-fe-fieldset__legend">
           <h2 className="wmnds-fe-question">
-            Would you like to sign up to a trial to receive text message alerts for disruptions?
+            Do you want to recieve text message alerts for disruptions?
           </h2>
           <p>We’ll automatically send text message alerts straight to your mobile phone.</p>
+          <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={extraInfo ? 'wmnds-m-b-sm' : ''}
+          classes="wmnds-m-b-sm"
           radios={radioButtons}
           fieldValidation={register({
             required: `Please select one option to proceed`,
           })}
         />
-        {extraInfo}
       </fieldset>
 
       {/* Continue button */}

diff --git a/src/components/Form/Step6EmailAlert/Step6EmailAlert.js b/src/components/Form/Step6EmailAlert/Step6EmailAlert.js
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 // Import custom hooks
 import useStepLogic from 'components/Form/useStepLogic';
 // Import components
@@ -10,18 +10,18 @@ import useFormData from '../useFormData';
 const 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();
 
   const radioButtons = [
     { text: 'Yes', value: 'yes' },
     { text: 'No', value: 'no' },
   ];
-
+  const setCurrentValue = (e) => {
+    setRadioValue(e.toLowerCase());
+  };
   // Add InsetText with extra info when selected option is "no"
   let extraInfo;
-  const selectedOption = document.querySelector(
-    'input.wmnds-fe-radios__input[name="EmailAlert"]:checked'
-  );
-  if (selectedOption && selectedOption.value === 'no') {
+  if (radioValue && radioValue === 'no') {
     extraInfo = (
       <InsetText
         classes="wmnds-m-b-lg"
@@ -59,7 +59,9 @@ const Step6EmailAlert = () => {
 
         <Radios
           name="EmailAlert"
+          classes={extraInfo ? 'wmnds-m-b-sm' : ''}
           radios={radioButtons}
+          onChange={(e) => setCurrentValue(e.target.value)}
           fieldValidation={register({
             required: `Please select one option to proceed`,
           })}

diff --git a/src/components/Form/Step9Confirm/Step9SummarySection.js b/src/components/Form/Step9Confirm/Step9SummarySection.js
@@ -6,6 +6,7 @@ import { FormDataContext } from 'globalState/FormDataContext';
 // Components
 import RemoveService from 'components/shared/RemoveService/RemoveService';
 import Table from 'components/shared/Table/Table';
+import HoursMinutes from '../../shared/HoursMinutes/HoursMinutes';
 
 function Step9SummarySection() {
   const [formDataState, formDataDispatch] = useContext(FormDataContext);
@@ -20,6 +21,8 @@ function Step9SummarySection() {
     RoadAreas,
     LineId,
     ExistingUser,
+    QuietHours,
+    QuietDays,
   } = formDataState.formData;
   const { filterTramLineInfo } = useSelectableTramLines();
 
@@ -210,6 +213,51 @@ function Step9SummarySection() {
           </>
         )}
 
+        {!ExistingUser && QuietHours.length > 0 && (
+          <>
+            <div className="wmnds-m-b-lg wmnds-m-t-xl wmnds-grid wmnds-grid--justify-between">
+              <h3 className="wmnds-col-2-3">Daily quiet hours</h3>
+              <button
+                type="button"
+                className="wmnds-btn wmnds-btn--link"
+                onClick={() => {
+                  setStepInContext(10);
+                }}
+              >
+                Change
+              </button>
+            </div>
+            You will not receive alerts between
+            <HoursMinutes times={QuietHours} />.
+          </>
+        )}
+        {!ExistingUser && QuietDays.length > 0 && (
+          <>
+            <div className="wmnds-m-b-lg wmnds-m-t-xl wmnds-grid wmnds-grid--justify-between">
+              <h3 className="wmnds-col-2-3">Quiet days</h3>
+              <button
+                type="button"
+                className="wmnds-btn wmnds-btn--link"
+                onClick={() => {
+                  setStepInContext(10);
+                }}
+              >
+                Change
+              </button>
+            </div>
+            <p className="wmnds-col-2-3">
+              You will not receive alerts on
+              {QuietDays.length > 1 ? (
+                <span>
+                  <strong> {QuietDays.slice(0, -1).join(', ')}</strong> and{' '}
+                </span>
+              ) : (
+                ` `
+              )}
+              <strong>{QuietDays[QuietDays.length - 1]}</strong>.
+            </p>
+          </>
+        )}
         {ExistingUser && (
           <div className="wmnds-m-b-lg wmnds-m-t-xl">
             <h3 className="wmnds-col-1-3">Your services</h3>