Merge pull request #226 from w3bdesign/development

Development

Author: w3bdesign

components/Checkout/CheckoutForm.component.jsx

@@ -22,7 +22,7 @@ const CheckoutForm = () => {
 
   const [orderData, setOrderData] = useState(null);
   const [requestError, setRequestError] = useState(null);
-  const [orderCompleted, setorderCompleted] = useState(false);
+  const [orderCompleted, setorderCompleted] = useState(false); 
 
   // Checkout GraphQL mutation
   const [
@@ -70,7 +70,7 @@ const CheckoutForm = () => {
 
   return (
     <>
-      {cart ? (
+      {cart && !orderCompleted ? (
         <div className="container mx-auto">
           {/*	Order*/}
           <OrderDetails cart={cart} />

components/Product/IndexProducts.component.jsx

@@ -1,6 +1,8 @@
 import Link from 'next/link';
 import { v4 as uuidv4 } from 'uuid';
 
+import { WOO_CONFIG } from 'utils/config/nextConfig';
+
 /**
  * Displays all of the products as long as length is defined.
  * Does a map() over the props array and utilizes uuidv4 for unique key values.
@@ -32,19 +34,36 @@ const IndexProducts = ({ products }) => {
                     as={`/produkt/${slug}?productId=${productId}`}
                   >
                     <a>
-                      {image && (
+                      {image ? (
                         <img
                           id="product-image"
                           className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
                           alt={name}
                           src={image.sourceUrl}
                         />
+                      ) : (
+                        <img
+                          id="product-image"
+                          className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
+                          alt={name}
+                          src={WOO_CONFIG.PLACEHOLDER_SMALL_IMAGE_URL}
+                        />
                       )}
                     </a>
                   </Link>
-                  <div className="flex justify-center pt-3">
-                    <p className="font-bold text-center">{name}</p>
-                  </div>
+                  <Link
+                    href="/produkt/[post]"
+                    as={`/produkt/${slug}?productId=${productId}`}
+                  >
+                    <a>
+                      <div className="flex justify-center pt-3">
+                        <p className="font-bold text-center cursor-pointer">
+                          {name}
+                        </p>
+                      </div>
+                    </a>
+                  </Link>
+
                   {/* Display sale price when on sale */}
                   {onSale && (
                     <>

components/Product/SingleProduct.component.jsx

@@ -3,6 +3,8 @@ import { useState, useEffect } from 'react';
 import AddToCartButton from 'components/Cart/AddToCartButton.component';
 import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
 
+import { WOO_CONFIG } from 'utils/config/nextConfig';
+
 /**
  * Shows a single product with an Add To Cart button.
  * Uses GraphQL for product data
@@ -41,12 +43,22 @@ const SingleProduct = ({ product }) => {
       ) : (
         <div className="container flex flex-wrap items-center pt-4 pb-12 mx-auto ">
           <div className="grid grid-cols-1 gap-4 mt-16 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2">
-            <img
-              id="product-image"
-              className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
-              alt={name}
-              src={image.sourceUrl}
-            />
+            {image ? (
+              <img
+                id="product-image"
+                className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
+                alt={name}
+                src={image.sourceUrl}
+              />
+            ) : (
+              <img
+                id="product-image"
+                className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
+                alt={name}
+                src={WOO_CONFIG.PLACEHOLDER_LARGE_IMAGE_URL}
+              />
+            )}
+
             <div className="ml-8">
               <p className="text-3xl font-bold text-left">{name}</p>
               <br />

utils/config/nextConfig.js

@@ -8,6 +8,7 @@ export const WOO_CONFIG = {
   ALGOLIA_APP_ID: '7L9M5Y0B1K',
   ALGOLIA_PUBLIC_API_KEY: '925cc92373120f1bf477bb8ce0e71649',
   ALGOLIA_INDEX_NAME: 'dfweb',
+  PLACEHOLDER_IMAGE_URL: "https://via.placeholder.com/272",
 };
 */
 
@@ -17,7 +18,9 @@ export const WOO_CONFIG = {
   GRAPHQL_URL: 'http://localhost/wp/graphql',
   ALGOLIA_APP_ID: '7L9M5Y0B1K',
   ALGOLIA_PUBLIC_API_KEY: '925cc92373120f1bf477bb8ce0e71649',
+  ALGOLIA_INDEX_NAME: 'dfweb',
+  PLACEHOLDER_SMALL_IMAGE_URL: 'https://via.placeholder.com/272',
+  PLACEHOLDER_LARGE_IMAGE_URL: 'https://via.placeholder.com/616',
 };
 
-
 export default WOO_CONFIG;

utils/const/GQL_QUERIES.js

@@ -34,19 +34,19 @@ export const GET_SINGLE_PRODUCT = gql`
           }
         }
         variations {
-        nodes {
-          id
-          variationId
-          name
-          stockStatus          
-          stockQuantity
-          purchasable
-          onSale
-          salePrice
-          regularPrice          
+          nodes {
+            id
+            variationId
+            name
+            stockStatus
+            stockQuantity
+            purchasable
+            onSale
+            salePrice
+            regularPrice
+          }
         }
       }
-      }
       ... on ExternalProduct {
         price
         id
@@ -98,11 +98,11 @@ export const FETCH_FIRST_PRODUCTS_FROM_HOODIES_QUERY = `
  `;
 
 /**
- * Fetch all Woocommerce products from GraphQL
+ * Fetch first 24 Woocommerce products from GraphQL
  */
 export const FETCH_ALL_PRODUCTS_QUERY = gql`
   query MyQuery {
-    products(first: 8) {
+    products(first: 24) {
       nodes {
         productId
         name
@@ -127,11 +127,11 @@ export const FETCH_ALL_PRODUCTS_QUERY = gql`
 `;
 
 /**
- * Fetch all categories from GraphQL
+ * Fetch first 20 categories from GraphQL
  */
 export const FETCH_ALL_CATEGORIES_QUERY = gql`
   query Categories {
-    productCategories(first: 10) {
+    productCategories(first: 20) {
       nodes {
         id
         name