From 689de418782a1c12d61947c698264ca7489ba7a8 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 17 Feb 2022 12:58:25 -0500
Subject: [PATCH] Settings Page: Render SMTP port error (#4239)

---
 changes/issue-4187-render-smtp-error          |  1 +
 .../admin/AppSettingsPage/AppSettingsPage.tsx | 20 ++++++++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 changes/issue-4187-render-smtp-error

diff --git a/changes/issue-4187-render-smtp-error b/changes/issue-4187-render-smtp-error
new file mode 100644
index 0000000000..4ee1901ae9
--- /dev/null
+++ b/changes/issue-4187-render-smtp-error
@@ -0,0 +1 @@
+* Render more helpful SMTP error when cannot configure SMTP server
\ No newline at end of file
diff --git a/frontend/pages/admin/AppSettingsPage/AppSettingsPage.tsx b/frontend/pages/admin/AppSettingsPage/AppSettingsPage.tsx
index bc357879d9..281aac59da 100644
--- a/frontend/pages/admin/AppSettingsPage/AppSettingsPage.tsx
+++ b/frontend/pages/admin/AppSettingsPage/AppSettingsPage.tsx
@@ -58,9 +58,23 @@ const AppSettingsPage = (): JSX.Element => {
         .then(() => {
           dispatch(renderFlash("success", "Successfully updated settings."));
         })
-        .catch((errors: any) => {
-          if (errors.base) {
-            dispatch(renderFlash("error", errors.base));
+        .catch((response: any) => {
+          if (
+            response.data.errors[0].reason.includes("could not dial smtp host")
+          ) {
+            dispatch(
+              renderFlash(
+                "error",
+                "Could not connect to SMTP server. Please try again."
+              )
+            );
+          } else if (response.data.errors) {
+            dispatch(
+              renderFlash(
+                "error",
+                `Could not update settings. ${response.data.errors[0].reason}`
+              )
+            );
           }
         })
         .finally(() => {