From 5a670d5d5b7edd3ac6912bb8415ea4a2e82fd75d Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Fri, 25 Sep 2020 18:22:02 -0700
Subject: [PATCH] fix: show error states on the marketo form

---
 src/components/MarketoForm/MarketoForm.js | 33 ++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/MarketoForm/MarketoForm.js b/src/components/MarketoForm/MarketoForm.js
index 1b50cec14..da54a8318 100644
--- a/src/components/MarketoForm/MarketoForm.js
+++ b/src/components/MarketoForm/MarketoForm.js
@@ -35,22 +35,49 @@ const MarketoForm = ({
           padding: 1.25rem;
         `}
       >
-        <p
+        <h4
           css={css`
-            font-size: 1rem;
             font-weight: bold;
             text-align: center;
+            margin-bottom: 1rem;
           `}
         >
           {title}
-        </p>
+        </h4>
         <form id={`mktoForm_${id}`} />
+        {state.matches('blocked') && (
+          <Error>
+            Unable to load the form. Perhaps you have an ad blocker enabled?
+          </Error>
+        )}
+        {state.matches('error') && <Error>Unable to load the form.</Error>}
         {state.matches('loading') && <Spinner />}
       </div>
     </div>
   );
 };
 
+const Error = ({ children }) => (
+  <div
+    css={css`
+      padding: 1rem;
+      border-radius: 0.25rem;
+      background: var(--color-red-100);
+      font-size: 0.875rem;
+
+      .dark-mode & {
+        background: var(--color-red-900);
+      }
+    `}
+  >
+    {children}
+  </div>
+);
+
+Error.propTypes = {
+  children: PropTypes.node,
+};
+
 MarketoForm.propTypes = {
   title: PropTypes.string.isRequired,
   id: PropTypes.number.isRequired,