Merge pull request #425 from NYPL/main

My Account 2.0 QA #3
NYPL · Dec 20, 2024 · c4b7f59 · c4b7f59
2 parents 986f582 + 626168b
commit c4b7f59
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 43 deletions.
diff --git a/src/components/MyAccount/Settings/PasswordForm.tsx b/src/components/MyAccount/Settings/PasswordForm.tsx
@@ -81,12 +81,21 @@ const PasswordForm = ({ patronData, settingsState }: PasswordFormProps) => {
 
   const cancelEditing = () => {
     setIsEditing(false)
+    clearForm()
     setEditingField("")
     setTimeout(() => {
       editingRef.current?.focus()
     }, 0)
   }
 
+  const clearForm = () => {
+    setFormData({
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: "",
+      passwordsMatch: true,
+    })
+  }
   const validateForm =
     formData.currentPassword !== "" &&
     formData.newPassword !== "" &&
@@ -146,6 +155,7 @@ const PasswordForm = ({ patronData, settingsState }: PasswordFormProps) => {
       console.error("Error submitting", error)
     } finally {
       setIsLoading(false)
+      clearForm()
       setEditingField("")
     }
   }

diff --git a/src/components/MyAccount/Settings/SettingsSelectForm.tsx b/src/components/MyAccount/Settings/SettingsSelectForm.tsx
@@ -190,50 +190,52 @@ const SettingsSelectForm = ({
             </Select>
           </Flex>
         ) : (
-          <Flex marginLeft={{ base: "m", lg: "unset" }}>
-            <Flex flexDir="column">
-              <Text
-                sx={{
-                  marginTop: { base: "xs", lg: "unset" },
-                  width: { base: "200px", sm: "250px" },
-                  marginBottom: 0,
-                }}
-              >
-                {selection}
-              </Text>
-              {isNotification &&
-                patronHasNonePref &&
-                !patronHasPhone &&
-                !patronHasEmail && (
-                  <Banner
-                    sx={{
-                      marginTop: "s",
-                      width: { base: "200px", sm: "250px" },
-                    }}
-                    content="Please set a phone number or email address to choose a notification preference."
-                  />
-                )}
+          <Flex flexDir="column">
+            <Flex marginLeft={{ base: "m", lg: "unset" }}>
+              <Flex flexDir="column">
+                <Text
+                  sx={{
+                    marginTop: { base: "xs", lg: "unset" },
+                    width: { base: "200px", sm: "250px" },
+                    marginBottom: 0,
+                  }}
+                >
+                  {selection}
+                </Text>
+              </Flex>
+              {editingField === "" && (
+                <EditButton
+                  isDisabled={
+                    isNotification &&
+                    patronHasNonePref &&
+                    !patronHasPhone &&
+                    !patronHasEmail
+                  }
+                  ref={editingRef}
+                  buttonLabel={`Edit ${type}`}
+                  buttonId={`edit-${type}-button`}
+                  onClick={() => {
+                    setIsEditing(true)
+                    setEditingField(type)
+                    setTimeout(() => {
+                      selectRef.current?.focus()
+                    }, 0)
+                  }}
+                />
+              )}
             </Flex>
-            {editingField === "" && (
-              <EditButton
-                isDisabled={
-                  isNotification &&
-                  patronHasNonePref &&
-                  !patronHasPhone &&
-                  !patronHasEmail
-                }
-                ref={editingRef}
-                buttonLabel={`Edit ${type}`}
-                buttonId={`edit-${type}-button`}
-                onClick={() => {
-                  setIsEditing(true)
-                  setEditingField(type)
-                  setTimeout(() => {
-                    selectRef.current?.focus()
-                  }, 0)
-                }}
-              />
-            )}
+            {isNotification &&
+              patronHasNonePref &&
+              !patronHasPhone &&
+              !patronHasEmail && (
+                <Banner
+                  sx={{
+                    width: { base: "80%", sm: "320px" },
+                    marginLeft: { base: "m", lg: "unset" },
+                  }}
+                  content="Please set a phone number or email address to choose a notification preference."
+                />
+              )}
           </Flex>
         )}
         {isEditing && (