From 04c7d9e0cfbf405d71aca3fcc0136543ed4d0ffc Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Mon, 14 Sep 2020 23:23:22 +0200
Subject: [PATCH] Display error during checkout if there is any

---
 components/Checkout/CheckoutForm.component.jsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/Checkout/CheckoutForm.component.jsx b/components/Checkout/CheckoutForm.component.jsx
index e2bc63ac4..6da7dd59a 100644
--- a/components/Checkout/CheckoutForm.component.jsx
+++ b/components/Checkout/CheckoutForm.component.jsx
@@ -21,7 +21,7 @@ const CheckoutForm = () => {
   const [cart, setCart] = useContext(AppContext);
   const [orderData, setOrderData] = useState(null);
   const [requestError, setRequestError] = useState(null);
-  const [orderCompleted, setorderCompleted] = useState(false); 
+  const [orderCompleted, setorderCompleted] = useState(false);
 
   // Checkout GraphQL mutation
   const [
@@ -74,10 +74,15 @@ const CheckoutForm = () => {
           {/*	Order*/}
           <OrderDetails cart={cart} />
           <MobileOrderDetails cart={cart} />
-
           {/*Payment Details*/}
           <Billing onSubmit={onSubmit} />
-
+          {/*Error display*/}
+          {requestError && (
+            <div className="h-32 text-xl text-center text-red-600">
+              En feil har oppstått. Feilmeldingen er: <br />$
+              {requestError.toString()}
+            </div>
+          )}
           {/* Checkout Loading*/}
           {checkoutLoading && (
             <div className="text-xl text-center">
@@ -86,7 +91,6 @@ const CheckoutForm = () => {
               <LoadingSpinner />
             </div>
           )}
-          {requestError}
         </div>
       ) : (
         <>