Merge pull request #161 from w3bdesign/development

Implement UI feedback while placing order

Author: w3bdesign

README.md

@@ -29,7 +29,8 @@ Start the server with ```npm run dev ```
 - Apollo Client with GraphQL
 - Animations with React-Spring
 - Shows loading spinner created with Styled Components while loading data and error message if data can not be loaded
-- Mobile menu
+- Shows page load progress with Nprogress during navigation
+- Mobile menu and cart slide-out with animations
 - List all product categories on a separate page
 - Link to individual product
 - Pretty URLs with builtin Nextjs functionality

components/Checkout/CheckoutForm.component.jsx

@@ -2,7 +2,8 @@ import { useState, useContext, useEffect } from 'react';
 import { useQuery, useMutation } from '@apollo/react-hooks';
 
 import Billing from './Billing.component';
-import OrderDetails from "./OrderDetails.component";
+import OrderDetails from './OrderDetails.component';
+import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.component';
 //import Payment from './Payment.component';
 
 import { GET_CART } from 'utils/const/GQL_QUERIES';
@@ -102,22 +103,31 @@ const CheckoutForm = () => {
       {cart ? (
         <form onSubmit={handleFormSubmit} className="">
           <div className="container mx-auto">
-            {/*	Order*/} 
-               
+            {/*	Order*/}
+
             <OrderDetails cart={cart} />
-            {/*Payment Details*/} 
-            <div className="">                 
-            <Billing input={input} handleOnChange={handleOnChange} />
+            {/*Payment Details*/}
+            <div className="">
+              <Billing input={input} handleOnChange={handleOnChange} />
             </div>
-          
 
             {/* Checkout Loading*/}
-            {checkoutLoading}
+
+            {checkoutLoading && (
+              <div className="text-xl text-center">
+                Behandler ordre, vennligst vent ...
+                <br />
+                <LoadingSpinner />
+              </div>
+            )}
+
             {requestError}
           </div>
         </form>
       ) : (
-        ''
+        <div className="container m-12 mx-auto text-xl text-center">
+          Takk for din ordre!
+        </div>
       )}
     </>
   );

package-lock.json

@@ -24,6 +24,7 @@
     "graphql-request": "^2.0.0",
     "graphql-tag": "^2.10.3",
     "next": "^9.4.4",
+    "nprogress": "^0.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-instantsearch-dom": "^6.6.0",

package.json

@@ -1,15 +1,22 @@
 import { ApolloProvider } from '@apollo/react-hooks';
-
 import { AppProvider } from 'utils/context/AppContext';
 
+import Router from 'next/router';
+import NProgress from 'nprogress';
+
 import Header from '../components/Header/Header.component';
 import Footer from '../components/Footer/Footer.component';
 
 import '../styles/index.css';
 import '../styles/algolia.min.css';
+import 'nprogress/nprogress.css';
 
 import client from '../utils/apollo/ApolloClient';
 
+Router.events.on('routeChangeStart', () => NProgress.start());
+Router.events.on('routeChangeComplete', () => NProgress.done());
+Router.events.on('routeChangeError', () => NProgress.done());
+
 const App = ({ Component, pageProps }) => {
   return (
     <>

pages/_app.js

@@ -12,7 +12,7 @@ export const INITIAL_STATE = {
   country: 'NO',
   postcode: '1525',
   phone: '90561212',
-  email: 'test@gmail.com',
+  email: 'test@testemailgmail.com',
   company: 'Tech',
   createAccount: false,
   orderNotes: '',