From 5cc947f51747365f6d61a2efcb3d738356c5cb75 Mon Sep 17 00:00:00 2001
From: Devin Rasmussen <devin.rasmussen@canopytax.com>
Date: Mon, 28 Sep 2020 16:50:00 -0600
Subject: [PATCH 1/4] udpate styling of error boundary

---
 src/canopy-react-error-boundary.js | 115 +++++++++++++++--------------
 1 file changed, 58 insertions(+), 57 deletions(-)

diff --git a/src/canopy-react-error-boundary.js b/src/canopy-react-error-boundary.js
index e2d6c0f..17ccf70 100644
--- a/src/canopy-react-error-boundary.js
+++ b/src/canopy-react-error-boundary.js
@@ -1,73 +1,74 @@
-import React from 'react';
-import {CprButton} from 'canopy-styleguide!sofe';
+import React from "react";
+import { CpButton, CpModal, CpEmptyState } from "canopy-styleguide!sofe";
 
 export default function decorateOptions(opts) {
-  if (typeof opts !== 'object' || typeof opts.featureName !== 'string') {
-    throw new Error("canopy-react-error-boundary decorator should be called with an opts object that has a featureName string. e.g. @ErrorBoundary({featureName: 'life'})");
+  if (typeof opts !== "object" || typeof opts.featureName !== "string") {
+    throw new Error(
+      "canopy-react-error-boundary decorator should be called with an opts object that has a featureName string. e.g. @ErrorBoundary({featureName: 'life'})"
+    );
   }
 
   return function decorateComponent(Comp) {
     return class CanopyReactErrorBoundary extends React.Component {
-      static displayName = `CanopyReactErrorBoundary(${opts.featureName})`
+      constructor(props) {
+        super(props);
+        console.count("construct");
+      }
+      static displayName = `CanopyReactErrorBoundary(${opts.featureName})`;
       state = {
         caughtError: null,
         caughtErrorInfo: null,
         dismissed: false,
-      }
+      };
       render() {
-        if (!this.state.caughtError) {
-          if (opts.noStrictMode || !React.StrictMode) {
-            return <Comp {...this.props} />
-          } else {
-            return (
-              <React.StrictMode>
+        return (
+          <>
+            <CpModal
+              show={this.state.caughtError && !this.state.dismissed}
+              onClose={() => this.setState({ dismissed: false })}
+              width={500}
+            >
+              <CpModal.Header
+                title={`The ${opts.featureName} is having problems`}
+              />
+              <CpModal.Body>
+                <CpEmptyState
+                  img='es_caution'
+                  text='Looks like there was a problem'
+                  subText='If the error continues, chat with support via the help center or call 855-558-8407'
+                />
+              </CpModal.Body>
+              <CpModal.Footer>
+                <CpButton
+                  btnType="primary"
+                  onClick={() => window.history.back()}
+                >
+                  Go back
+                </CpButton>
+                <CpButton
+                  btnType="flat"
+                  onClick={() => window.location.reload()}
+                >
+                  Reload page
+                </CpButton>
+              </CpModal.Footer>
+            </CpModal>
+
+            {!this.state.caughtError &&
+              (opts.noStrictMode || !React.StrictMode ? (
                 <Comp {...this.props} />
-              </React.StrictMode>
-            )
-          }
-        } else if (document.getElementById('canopy-react-error-boundary-modal')) {
-          // Only show one application's error modal at a time
-          return null;
-        } else if (this.state.dismissed) {
-          // Maybe they want to click on the navbar underneath the modal?
-          return null;
-        } else {
-          return (
-            <div className="cps-modal" id="canopy-react-error-boundary-modal" style={{whiteSpace: "normal"}}>
-              <div className="cps-modal__screen" />
-              <div className="cps-modal__dialog cps-card__height-3" style={{maxWidth: '100vw', transform: "translateX(-50%)", left: "50%"}}>
-                <div className="cps-card__header cps-subheader-sm">
-                  <span>
-                    The {opts.featureName} feature is having problems
-                  </span>
-                  <a className="cps-modal__dialog__close cps-icon cps-icon-close" onClick={() => this.setState({dismissed: false})} />
-                </div>
-                <div className="cps-card__body" style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
-                  <img src="https://cdn.canopytax.com/images/ErrorState.svg" style={{width: '25%', padding: '16px 0'}} />
-                  <div style={{fontSize: '20px', fontWeight: 'bold', textAlign: 'center'}}>
-                    Looks like there was a problem
-                  </div>
-                  <div style={{textAlign: 'center'}}>
-                    If the error continues, chat with support via the help center or call <a href="tel:855-558-8407">855-558-8407</a>
-                  </div>
-                </div>
-                <div className="cps-modal__dialog__actions">
-                  <CprButton actionType="primary" onClick={() => window.history.back()}>
-                    Go back
-                  </CprButton>
-                  <CprButton actionType="flat" onClick={() => window.location.reload()}>
-                    Reload page
-                  </CprButton>
-                </div>
-              </div>
-            </div>
-          );
-        }
+              ) : (
+                <React.StrictMode>
+                  <Comp {...this.props} />
+                </React.StrictMode>
+              ))}
+          </>
+        );
       }
       componentDidCatch(err, info) {
         if (info && info.componentStack) {
-          err.extra =  Object.assign(err.extra || {}, {
-            componentStack: info.componentStack
+          err.extra = Object.assign(err.extra || {}, {
+            componentStack: info.componentStack,
           });
         }
 
@@ -80,6 +81,6 @@ export default function decorateOptions(opts) {
           caughtErrorInfo: info,
         });
       }
-    }
-  }
+    };
+  };
 }

From 90fbad8b24bf2e5450851737001c1cf604848343 Mon Sep 17 00:00:00 2001
From: Devin Rasmussen <devin.rasmussen@canopytax.com>
Date: Mon, 28 Sep 2020 16:52:57 -0600
Subject: [PATCH 2/4] remove unused constructor

---
 src/canopy-react-error-boundary.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/canopy-react-error-boundary.js b/src/canopy-react-error-boundary.js
index 17ccf70..6f711d3 100644
--- a/src/canopy-react-error-boundary.js
+++ b/src/canopy-react-error-boundary.js
@@ -1,5 +1,5 @@
-import React from "react";
-import { CpButton, CpModal, CpEmptyState } from "canopy-styleguide!sofe";
+import React from 'react';
+import { CpButton, CpModal, CpEmptyState } from 'canopy-styleguide!sofe';
 
 export default function decorateOptions(opts) {
   if (typeof opts !== "object" || typeof opts.featureName !== "string") {
@@ -10,16 +10,12 @@ export default function decorateOptions(opts) {
 
   return function decorateComponent(Comp) {
     return class CanopyReactErrorBoundary extends React.Component {
-      constructor(props) {
-        super(props);
-        console.count("construct");
-      }
-      static displayName = `CanopyReactErrorBoundary(${opts.featureName})`;
+      static displayName = `CanopyReactErrorBoundary(${opts.featureName})`
       state = {
         caughtError: null,
         caughtErrorInfo: null,
         dismissed: false,
-      };
+      }
       render() {
         return (
           <>

From 7c64639b0119d67fffe3592025b9148693ef3e91 Mon Sep 17 00:00:00 2001
From: Devin Rasmussen <devin.rasmussen@canopytax.com>
Date: Mon, 28 Sep 2020 16:58:44 -0600
Subject: [PATCH 3/4] include "feature" to fix typo

---
 src/canopy-react-error-boundary.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/canopy-react-error-boundary.js b/src/canopy-react-error-boundary.js
index 6f711d3..c426c39 100644
--- a/src/canopy-react-error-boundary.js
+++ b/src/canopy-react-error-boundary.js
@@ -25,7 +25,7 @@ export default function decorateOptions(opts) {
               width={500}
             >
               <CpModal.Header
-                title={`The ${opts.featureName} is having problems`}
+                title={`The ${opts.featureName} feature is having problems`}
               />
               <CpModal.Body>
                 <CpEmptyState

From a0c8cf71fc1a47fe19357d2ee6103c1adeddce93 Mon Sep 17 00:00:00 2001
From: Devin Rasmussen <devin.rasmussen@canopytax.com>
Date: Tue, 29 Sep 2020 10:22:18 -0600
Subject: [PATCH 4/4] utilize getDerivedStateFromError correctly

---
 src/canopy-react-error-boundary.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/canopy-react-error-boundary.js b/src/canopy-react-error-boundary.js
index c426c39..98d0270 100644
--- a/src/canopy-react-error-boundary.js
+++ b/src/canopy-react-error-boundary.js
@@ -11,6 +11,9 @@ export default function decorateOptions(opts) {
   return function decorateComponent(Comp) {
     return class CanopyReactErrorBoundary extends React.Component {
       static displayName = `CanopyReactErrorBoundary(${opts.featureName})`
+      static getDerivedStateFromError(error) {    
+        return { caughtError: true };  
+      }
       state = {
         caughtError: null,
         caughtErrorInfo: null,
@@ -71,11 +74,6 @@ export default function decorateOptions(opts) {
         setTimeout(() => {
           throw err;
         });
-
-        this.setState({
-          caughtError: err,
-          caughtErrorInfo: info,
-        });
       }
     };
   };