From a621f6566f4413efaa097fdf061a9bf2b83804ae Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Fri, 15 Mar 2024 16:34:02 -0400
Subject: [PATCH] DIG-4148: Phone Number field on registration not dynamic

---
 .../src/__snapshots__/Storyshots.test.ts.snap | 30 +++----
 .../DeviceVerificationForm.tsx                | 30 ++++++-
 .../__snapshots__/Storyshots.test.ts.snap     | 20 ++---
 .../__snapshots__/Storyshots.test.ts.snap     | 90 ++++++++++++-------
 .../__snapshots__/Storyshots.test.ts.snap     | 48 +++++-----
 5 files changed, 137 insertions(+), 81 deletions(-)

diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index 6cc298a2c..b121ee300 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -1620,7 +1620,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture 1`]
           id="future-year"
           max="9999"
           maxLength={4}
-          min={2023}
+          min={2024}
           name="year"
           onBlur={[Function]}
           onChange={[Function]}
@@ -1770,7 +1770,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           id="story-year"
           max="9999"
           maxLength={4}
-          min={2023}
+          min={2024}
           name="year"
           onBlur={[Function]}
           onChange={[Function]}
@@ -1920,7 +1920,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           id="story-year"
           max={2040}
           maxLength={4}
-          min={2023}
+          min={2024}
           name="year"
           onBlur={[Function]}
           onChange={[Function]}
@@ -2070,7 +2070,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           id="story-year"
           max={2040}
           maxLength={4}
-          min={2023}
+          min={2024}
           name="year"
           onBlur={[Function]}
           onChange={[Function]}
@@ -2218,7 +2218,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowPast 1`] =
         <input
           className="txt-f"
           id="past-year"
-          max={2023}
+          max={2024}
           maxLength={4}
           min="1000"
           name="year"
@@ -2368,7 +2368,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput with an initialDate
         <input
           className="txt-f"
           id="initial-year"
-          max={2023}
+          max={2024}
           maxLength={4}
           min="1000"
           name="year"
@@ -2580,7 +2580,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput default 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -2624,7 +2624,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput error 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -2694,7 +2694,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -2875,7 +2875,7 @@ exports[`Storyshots Form Elements|SelectDropdown default 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -2928,7 +2928,7 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -4450,7 +4450,7 @@ exports[`Storyshots ProgressBar default 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -4511,7 +4511,7 @@ exports[`Storyshots ProgressBar first step (interactive demo) 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -4572,7 +4572,7 @@ exports[`Storyshots ProgressBar last step (interactive demo) 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -4633,7 +4633,7 @@ exports[`Storyshots ProgressBar with task name 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
diff --git a/services-js/access-boston/src/client/device-verification/DeviceVerificationForm.tsx b/services-js/access-boston/src/client/device-verification/DeviceVerificationForm.tsx
index a9c4bbb2d..c5368d507 100644
--- a/services-js/access-boston/src/client/device-verification/DeviceVerificationForm.tsx
+++ b/services-js/access-boston/src/client/device-verification/DeviceVerificationForm.tsx
@@ -1,4 +1,7 @@
-import React from 'react';
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/core';
+
 import { FormikProps } from 'formik';
 import Link from 'next/link';
 
@@ -79,7 +82,7 @@ export default function DeviceVerificationForm(props: Props) {
 
         <hr className="hr hr--sq" aria-hidden />
 
-        <form className="m-v500" onSubmit={handleSubmit}>
+        <form className="m-v500" onSubmit={handleSubmit} css={FIELD_STYLING}>
           {phoneOrEmail === 'phone' && (
             <>
               <TextInput
@@ -142,6 +145,7 @@ export default function DeviceVerificationForm(props: Props) {
                 info="Choose a personal address, not a City of Boston one."
                 renderInputFunc={renderErrorNextToInput}
                 hideErrorMessage
+                className={`txt-email`}
               />
 
               <div className="t--subinfo m-v500">
@@ -181,3 +185,25 @@ export default function DeviceVerificationForm(props: Props) {
     </>
   );
 }
+
+export const FIELD_STYLING = css(`
+  input.txt-f {
+    min-width: 10.8rem;
+  }
+
+  input.txt-email {
+    min-width: 18rem;
+    width: 100%;
+  }
+
+  @media screen and (max-width: 540px) {
+    input.txt-f {
+      min-width: 10.7rem;
+    }
+  
+    input.txt-email {
+      min-width: 12rem;
+      width: 100%;
+    }
+  }
+`);
diff --git a/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap b/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
index d236b20d6..64a39df93 100644
--- a/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
@@ -3578,7 +3578,7 @@ exports[`Storyshots Confirm-Identity Review 1`] = `
                         className="txt-f"
                         disabled={true}
                         id="dob-year"
-                        max={2023}
+                        max={2024}
                         maxLength={4}
                         min="1000"
                         name="year"
@@ -4005,7 +4005,7 @@ exports[`Storyshots Confirm-Identity Validate 1`] = `
                       <input
                         className="txt-f"
                         id="dob-year"
-                        max={2023}
+                        max={2024}
                         maxLength={4}
                         min="1000"
                         name="year"
@@ -11145,7 +11145,7 @@ exports[`Storyshots RegisterMfaPage default 1`] = `
         className="hr hr--sq"
       />
       <form
-        className="m-v500"
+        className="m-v500 css-wgwnsn-DeviceVerificationForm"
         onSubmit={[Function]}
       >
         <div
@@ -11442,7 +11442,7 @@ exports[`Storyshots RegisterMfaPage email 1`] = `
         className="hr hr--sq"
       />
       <form
-        className="m-v500"
+        className="m-v500 css-wgwnsn-DeviceVerificationForm"
         onSubmit={[Function]}
       >
         <div
@@ -11493,7 +11493,7 @@ exports[`Storyshots RegisterMfaPage email 1`] = `
                 className="g--6"
               >
                 <input
-                  className=" txt-f  css-1rqmmmp-TextInput"
+                  className="txt-email txt-f  css-1rqmmmp-TextInput"
                   id="input-3734019359"
                   name="email"
                   onBlur={[Function]}
@@ -11687,7 +11687,7 @@ exports[`Storyshots RegisterMfaPage modal open 1`] = `
         className="hr hr--sq"
       />
       <form
-        className="m-v500"
+        className="m-v500 css-wgwnsn-DeviceVerificationForm"
         onSubmit={[Function]}
       >
         <div
@@ -12048,7 +12048,7 @@ exports[`Storyshots RegisterMfaPage/DeviceVerificationForm code sending error 1`
     className="hr hr--sq"
   />
   <form
-    className="m-v500"
+    className="m-v500 css-wgwnsn-DeviceVerificationForm"
     onSubmit={[Function]}
   >
     <div
@@ -12246,7 +12246,7 @@ exports[`Storyshots RegisterMfaPage/DeviceVerificationForm email with error 1`]
     className="hr hr--sq"
   />
   <form
-    className="m-v500"
+    className="m-v500 css-wgwnsn-DeviceVerificationForm"
     onSubmit={[Function]}
   >
     <div
@@ -12297,7 +12297,7 @@ exports[`Storyshots RegisterMfaPage/DeviceVerificationForm email with error 1`]
             className="g--6"
           >
             <input
-              className=" txt-f txt-f--err css-1rqmmmp-TextInput"
+              className="txt-email txt-f txt-f--err css-1rqmmmp-TextInput"
               id="input-3734019359"
               name="email"
               onBlur={[Function]}
@@ -12387,7 +12387,7 @@ exports[`Storyshots RegisterMfaPage/DeviceVerificationForm phone 1`] = `
     className="hr hr--sq"
   />
   <form
-    className="m-v500"
+    className="m-v500 css-wgwnsn-DeviceVerificationForm"
     onSubmit={[Function]}
   >
     <div
diff --git a/services-js/permit-finder/src/stories/__snapshots__/Storyshots.test.ts.snap b/services-js/permit-finder/src/stories/__snapshots__/Storyshots.test.ts.snap
index b40a99014..d9cfa4bf4 100644
--- a/services-js/permit-finder/src/stories/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/permit-finder/src/stories/__snapshots__/Storyshots.test.ts.snap
@@ -1264,9 +1264,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            You’ve got your permit and may begin working.  Please contact the Building Inspection unit to schedule an inspection and keep your project on track!
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "You’ve got your permit and may begin working.  Please contact the Building Inspection unit to schedule an inspection and keep your project on track!",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -1789,9 +1792,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Thanks for your application!  Staff is reviewing your application to ensure that all fees are properly calculated and we have the information needed to start processing it.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Thanks for your application!  Staff is reviewing your application to ensure that all fees are properly calculated and we have the information needed to start processing it.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -2322,9 +2328,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Congratulations! Once you get your permit and make sure all fees are paid you will be ready to get to work. Please make sure your permit is posted in a visable location to make sure your commmunity knows your work is allowed.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Congratulations! Once you get your permit and make sure all fees are paid you will be ready to get to work. Please make sure your permit is posted in a visable location to make sure your commmunity knows your work is allowed.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -3374,9 +3383,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            You’re almost there.  We need one final check to make sure your space is safe to use.  Staff is in the process of evaluating your certificate of occupancy.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "You’re almost there.  We need one final check to make sure your space is safe to use.  Staff is in the process of evaluating your certificate of occupancy.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -3893,9 +3905,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Your project plan is under review by a plans examiner familiar with local building and zoning codes.  We’re working with agencies throughout the City to ensure your project meets all applicable codes and regulatory requirements.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Your project plan is under review by a plans examiner familiar with local building and zoning codes.  We’re working with agencies throughout the City to ensure your project meets all applicable codes and regulatory requirements.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -4436,9 +4451,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            You should have received an official letter from ISD informing you of the status of your application. If we have requested more information please contact your plans examiner.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "You should have received an official letter from ISD informing you of the status of your application. If we have requested more information please contact your plans examiner.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -5418,9 +5436,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Your application requires an on-site inspection to be processed further. 
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Your application requires an on-site inspection to be processed further. ",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -5867,9 +5888,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Thanks for your application!  Staff is reviewing your application to ensure that all fees are properly calculated and we have the information needed to start processing it.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Thanks for your application!  Staff is reviewing your application to ensure that all fees are properly calculated and we have the information needed to start processing it.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -6334,9 +6358,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Congratulations! Once your permit is paid for and you get your fire prevention permit, you’re ready to start your project and get to work.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Congratulations! Once your permit is paid for and you get your fire prevention permit, you’re ready to start your project and get to work.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -7244,9 +7271,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Your permit application is under review by a team of fire prevention professionals at BFD. Review time varies based on permit type. Asbestos Removal, Bag Smoke Detectors, Construction-Demolition-Renovation, Cutting-Burning-Welding, Tank Removal, Temporary Dumpster and Smoke/CO Inspection are generally completed in 2–4 days. Other requests are generally completed in 10–15 days. 
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Your permit application is under review by a team of fire prevention professionals at BFD. Review time varies based on permit type. Asbestos Removal, Bag Smoke Detectors, Construction-Demolition-Renovation, Cutting-Burning-Welding, Tank Removal, Temporary Dumpster and Smoke/CO Inspection are generally completed in 2–4 days. Other requests are generally completed in 10–15 days. ",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index ffee63e4f..41055a109 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -10066,7 +10066,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
                 <input
                   className="txt-f"
                   id="dob-year"
-                  max={2023}
+                  max={2024}
                   maxLength={4}
                   min={1870}
                   name="year"
@@ -10568,7 +10568,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
                 <input
                   className="txt-f"
                   id="dob-year"
-                  max={2023}
+                  max={2024}
                   maxLength={4}
                   min={1870}
                   name="year"
@@ -14095,7 +14095,7 @@ exports[`Storyshots Birth/QuestionsFlowPage 3. Personal information 1`] = `
                         <input
                           className="txt-f"
                           id="dob-year"
-                          max={2023}
+                          max={2024}
                           maxLength={4}
                           min={1870}
                           name="year"
@@ -39192,7 +39192,7 @@ exports[`Storyshots Common Components/DateRangePicker default 1`] = `
     style={
       Object {
         "margin": "2rem auto",
-        "maxWidth": "768px",
+        "maxWidth": "600px",
       }
     }
   >
@@ -39236,7 +39236,7 @@ exports[`Storyshots Common Components/DateRangePicker default 1`] = `
             <input
               className="year-field txt-f "
               id="date1year"
-              max={2023}
+              max={2024}
               min={1870}
               onBlur={[Function]}
               onChange={[Function]}
@@ -39295,7 +39295,7 @@ exports[`Storyshots Common Components/DateRangePicker default 1`] = `
             <input
               className="year-field txt-f "
               id="date2year"
-              max={2023}
+              max={2024}
               min={1870}
               onBlur={[Function]}
               onChange={[Function]}
@@ -39405,7 +39405,7 @@ exports[`Storyshots Common Components/DateRangePicker range too vast 1`] = `
     style={
       Object {
         "margin": "2rem auto",
-        "maxWidth": "768px",
+        "maxWidth": "600px",
       }
     }
   >
@@ -39449,7 +39449,7 @@ exports[`Storyshots Common Components/DateRangePicker range too vast 1`] = `
             <input
               className="year-field txt-f "
               id="date1year"
-              max={2023}
+              max={2024}
               min={1870}
               onBlur={[Function]}
               onChange={[Function]}
@@ -39508,7 +39508,7 @@ exports[`Storyshots Common Components/DateRangePicker range too vast 1`] = `
             <input
               className="year-field txt-f "
               id="date2year"
-              max={2023}
+              max={2024}
               min={1870}
               onBlur={[Function]}
               onChange={[Function]}
@@ -39618,7 +39618,7 @@ exports[`Storyshots Common Components/DateRangePicker with values 1`] = `
     style={
       Object {
         "margin": "2rem auto",
-        "maxWidth": "768px",
+        "maxWidth": "600px",
       }
     }
   >
@@ -39662,7 +39662,7 @@ exports[`Storyshots Common Components/DateRangePicker with values 1`] = `
             <input
               className="year-field txt-f "
               id="date1year"
-              max={2023}
+              max={2024}
               min={1870}
               onBlur={[Function]}
               onChange={[Function]}
@@ -39721,7 +39721,7 @@ exports[`Storyshots Common Components/DateRangePicker with values 1`] = `
             <input
               className="year-field txt-f "
               id="date2year"
-              max={2023}
+              max={2024}
               min={1870}
               onBlur={[Function]}
               onChange={[Function]}
@@ -39784,7 +39784,7 @@ exports[`Storyshots Common Components/DateRangePicker/DateComponent default 1`]
     style={
       Object {
         "margin": "2rem auto",
-        "maxWidth": "768px",
+        "maxWidth": "600px",
       }
     }
   >
@@ -39825,7 +39825,7 @@ exports[`Storyshots Common Components/DateRangePicker/DateComponent default 1`]
           <input
             className="year-field txt-f "
             id="date1year"
-            max={2023}
+            max={2024}
             min={1870}
             onBlur={[Function]}
             onChange={[Function]}
@@ -39887,7 +39887,7 @@ exports[`Storyshots Common Components/DateRangePicker/DateComponent with values
     style={
       Object {
         "margin": "2rem auto",
-        "maxWidth": "768px",
+        "maxWidth": "600px",
       }
     }
   >
@@ -39928,7 +39928,7 @@ exports[`Storyshots Common Components/DateRangePicker/DateComponent with values
           <input
             className="year-field txt-f "
             id="date2year"
-            max={2023}
+            max={2024}
             min={1870}
             onBlur={[Function]}
             onChange={[Function]}
@@ -41699,7 +41699,7 @@ exports[`Storyshots Common Components/Question Components/AltSpellings default 1
     style={
       Object {
         "margin": "2rem auto",
-        "maxWidth": "768px",
+        "maxWidth": "600px",
       }
     }
   >
@@ -41848,7 +41848,7 @@ exports[`Storyshots Common Components/Question Components/AltSpellings with exis
     style={
       Object {
         "margin": "2rem auto",
-        "maxWidth": "768px",
+        "maxWidth": "600px",
       }
     }
   >
@@ -67443,7 +67443,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage date range too v
                 <input
                   className="year-field txt-f "
                   id="date1year"
-                  max={2023}
+                  max={2024}
                   min={1870}
                   onBlur={[Function]}
                   onChange={[Function]}
@@ -67502,7 +67502,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage date range too v
                 <input
                   className="year-field txt-f "
                   id="date2year"
-                  max={2023}
+                  max={2024}
                   min={1870}
                   onBlur={[Function]}
                   onChange={[Function]}
@@ -68421,7 +68421,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage knows exact date
                 <input
                   className="txt-f"
                   id="dateOfMarriageStart-year"
-                  max={2023}
+                  max={2024}
                   maxLength={4}
                   min={1870}
                   name="year"
@@ -68959,7 +68959,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage marriage too rec
                 <input
                   className="txt-f"
                   id="dateOfMarriageStart-year"
-                  max={2023}
+                  max={2024}
                   maxLength={4}
                   min={1870}
                   name="year"
@@ -69512,7 +69512,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage unsure of date 1
                 <input
                   className="year-field txt-f "
                   id="date1year"
-                  max={2023}
+                  max={2024}
                   min={1870}
                   onBlur={[Function]}
                   onChange={[Function]}
@@ -69571,7 +69571,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage unsure of date 1
                 <input
                   className="year-field txt-f "
                   id="date2year"
-                  max={2023}
+                  max={2024}
                   min={1870}
                   onBlur={[Function]}
                   onChange={[Function]}