Merge pull request #149 from w3bdesign/development

You can now place orders through Woocommerce!

Author: w3bdesign

README.md

@@ -2,7 +2,7 @@
 
 # Next.js Ecommerce site with Woocommerce backend
 
-## This is still a work in progress
+## This is still a work in progress, but you can place orders and add products to cart.
 
 Live url: <a href="https://nextjs-woocommerce.now.sh/">https://nextjs-woocommerce.now.sh/</a>
 
@@ -22,7 +22,8 @@ Start the server with ```npm run dev ```
 ## Features
 
 - Connect to Woocommerce GraphQL API and list name, price and display image for products
-- Cart handling with createContext
+- Cart handling with createContext and GraphQL mutations
+- Able to place orders remotely with Woocommerce (bank transfers only for now)
 - Algolia search (work in progress)
 - Apollo Client with GraphQL
 - Animations with React-Spring
@@ -34,15 +35,15 @@ Start the server with ```npm run dev ```
 - Pretty URLs with builtin Nextjs functionality
 - Tailwind CSS for styling
 - Minimalistic and responsive design
-- JSDoc comments on all functions
-- Currently connected to live Woocommerce installation instead of using a local installation
+- JSDoc comments
+- Currently connected to a local installation
 
 ## TODO
 
 - Add more cart functionality
 - Add checkout functionality
 - Hide products not in stock
 - Add better SEO
-- Add price to Algolia search
+- Add price to Algolia search (Wordpress plugin has been developed)
 - Add a better README.md
 - Implement https://github.com/cyrilwanner/next-optimized-images for production

components/Checkout/CheckoutForm.component.jsx

@@ -2,7 +2,7 @@ import { useState, useContext, useEffect } from 'react';
 import { useQuery, useMutation } from '@apollo/react-hooks';
 
 import Billing from './Billing.component';
-import Payment from "./Payment.component";
+import Payment from './Payment.component';
 
 import { GET_CART } from 'utils/const/GQL_QUERIES';
 import { CHECKOUT_MUTATION } from 'utils/const/GQL_MUTATIONS';
@@ -106,12 +106,10 @@ const CheckoutForm = () => {
               <h2 className="">Betalingsdetaljer</h2>
               <Billing input={input} handleOnChange={handleOnChange} />
             </div>
-
             {/*Payment*/}
             <div className="">
-							<Payment input={ input } handleOnChange={ handleOnChange }/>
-              </div>
-
+              <Payment input={input} handleOnChange={handleOnChange} />
+            </div>
             <div>
               <button
                 className="px-4 py-2 font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400"
@@ -120,14 +118,14 @@ const CheckoutForm = () => {
                 BESTILL
               </button>
             </div>
-
+            //TODO Add error handling here
             {/* Checkout Loading*/}
             {
-            //checkoutLoading && <p>Behandler ordre ...</p>
+              //checkoutLoading && <p>Behandler ordre ...</p>
             }
             {
-            //requestError && <p>Feilmelding: {requestError} </p>
-          }
+              //requestError && <p>Feilmelding: {requestError} </p>
+            }
           </div>
         </form>
       ) : (