From b47a9570aa6ac9a05026743e2f46b0ceed9faf0e Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 13 Sep 2024 07:55:11 +0200
Subject: [PATCH 01/12] Design product

---
 .../Product/SingleProduct.component.tsx       | 77 +++++++++----------
 src/components/UI/Button.component.tsx        | 14 ++--
 2 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index 3be084f35..6cea2e69c 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -48,7 +48,7 @@ const SingleProduct = ({ product }: IProductRootObject) => {
   }
 
   return (
-    <section className="py-8 bg-white mb-12 sm:mb-2">
+    <section className="bg-white mb-12 sm:mb-2">
       {/* Show loading spinner while loading, and hide content while loading */}
       {isLoading ? (
         <div className="h-56 mt-20">
@@ -57,38 +57,41 @@ const SingleProduct = ({ product }: IProductRootObject) => {
           <LoadingSpinner />
         </div>
       ) : (
-        <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">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:gap-8">
             {image && (
-              <img
-                id="product-image"
-                src={image.sourceUrl}
-                alt={name}
-                className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 md:hover:grow md:hover:scale-105"
-              />
+              <div className="flex justify-center items-center">
+                <img
+                  id="product-image"
+                  src={image.sourceUrl}
+                  alt={name}
+                  className="max-w-full h-auto transition duration-500 ease-in-out transform hover:scale-105"
+                />
+              </div>
             )}
             {!image && (
-              <img
-                id="product-image"
-                src={
-                  process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ??
-                  placeholderFallBack
-                }
-                alt={name}
-                className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 md:hover:grow md:hover:shadow-lg md:hover:scale-105"
-              />
+              <div className="flex justify-center items-center">
+                <img
+                  id="product-image"
+                  src={
+                    process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ??
+                    placeholderFallBack
+                  }
+                  alt={name}
+                  className="max-w-full h-auto transition duration-500 ease-in-out transform hover:scale-105"
+                />
+              </div>
             )}
-            <div className="ml-8">
-              <p className="text-3xl font-bold text-left">{name}</p>
-              <br />
+            <div className="flex flex-col justify-center text-center md:text-left">
+              <h1 className="text-3xl font-bold mb-4">{name}</h1>
               {/* Display sale price when on sale */}
               {onSale && (
-                <div className="flex">
-                  <p className="pt-1 mt-4 text-3xl text-gray-900">
+                <div className="flex flex-col md:flex-row items-center md:items-start justify-center md:justify-start mb-4">
+                  <p className="text-3xl font-bold text-red-600 mr-4">
                     {product.variations && filteredVariantPrice(price, '')}
                     {!product.variations && salePrice}
                   </p>
-                  <p className="pt-1 pl-8 mt-4 text-2xl text-gray-900 line-through">
+                  <p className="text-2xl text-gray-500 line-through">
                     {product.variations && filteredVariantPrice(price, 'right')}
                     {!product.variations && regularPrice}
                   </p>
@@ -96,27 +99,21 @@ const SingleProduct = ({ product }: IProductRootObject) => {
               )}
               {/* Display regular price when not on sale */}
               {!onSale && (
-                <p className="pt-1 mt-4 text-2xl text-gray-900"> {price}</p>
+                <p className="text-3xl font-bold mb-4">{price}</p>
               )}
-              <br />
-              <p className="pt-1 mt-4 text-2xl text-gray-900">
-                {DESCRIPTION_WITHOUT_HTML}
-              </p>
+              <p className="text-lg mb-4">{DESCRIPTION_WITHOUT_HTML}</p>
               {Boolean(product.stockQuantity) && (
-                <p
-                  v-if="data.product.stockQuantity"
-                  className="pt-1 mt-4 mb-4 text-2xl text-gray-900"
-                >
+                <p className="text-lg mb-4">
                   {product.stockQuantity} på lager
                 </p>
               )}
               {product.variations && (
-                <p className="pt-1 mt-4 text-xl text-gray-900">
-                  <span className="py-2">Varianter</span>
+                <div className="mb-4">
+                  <label htmlFor="variant" className="block text-lg mb-2">Varianter</label>
                   <select
                     id="variant"
                     name="variant"
-                    className="block w-80 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                     onChange={(e) => {
                       setSelectedVariation(Number(e.target.value));
                     }}
@@ -133,13 +130,9 @@ const SingleProduct = ({ product }: IProductRootObject) => {
                       },
                     )}
                   </select>
-                </p>
+                </div>
               )}
-              <div className="pt-1 mt-2">
-                {
-                  // Display default AddToCart button if we do not have variations.
-                  // If we do, send the variationId to AddToCart button
-                }
+              <div className="flex justify-center md:justify-start">
                 {product.variations && (
                   <AddToCart
                     product={product}
diff --git a/src/components/UI/Button.component.tsx b/src/components/UI/Button.component.tsx
index ec4a6d93c..5afa38c7f 100644
--- a/src/components/UI/Button.component.tsx
+++ b/src/components/UI/Button.component.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-type TButtonColors = 'red' | 'blue';
+type TButtonColors = 'red' | 'blue' | 'yellow';
 
 interface IButtonProps {
   handleButtonClick?: () => void;
@@ -14,7 +14,7 @@ interface IButtonProps {
  * @function PageTitle
  * @param {void} handleButtonClick - Handle button click
  * @param {boolean?} buttonDisabled - Is button disabled?
- * @param {color?} TButtonColors - Color for button, either red or blue
+ * @param {color?} TButtonColors - Color for button, either red, blue, or yellow
  * @param {ReactNode} children - Children for button
  * @returns {JSX.Element} - Rendered component
  */
@@ -27,11 +27,15 @@ const Button = ({
   <button
     onClick={handleButtonClick}
     disabled={buttonDisabled}
-    className={`px-2 lg:px-4 py-2 font-bold bg-blue-500 border border-gray-400 border-solid rounded text-white ease-in-out transition-all duration-300 disabled:opacity-50
+    className={`px-4 py-3 font-bold border border-gray-400 border-solid rounded ease-in-out transition-all duration-300 disabled:opacity-50
       ${
         color === 'blue'
-          ? 'bg-blue-500 hover:bg-blue-600'
-          : 'bg-red-500 hover:bg-red-600'
+          ? 'bg-blue-500 hover:bg-blue-600 text-white'
+          : color === 'red'
+          ? 'bg-red-500 hover:bg-red-600 text-white'
+          : color === 'yellow'
+          ? 'bg-yellow-400 hover:bg-yellow-500 text-black'
+          : 'bg-blue-500 hover:bg-blue-600 text-white'
       }
     `}
   >

From 983d0a9314155366dbc4f2d706e06c90aec8105f Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 13 Sep 2024 07:58:21 +0200
Subject: [PATCH 02/12] Improve design

---
 .../Product/SingleProduct.component.tsx       | 202 ++++++++++--------
 1 file changed, 115 insertions(+), 87 deletions(-)

diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index 6cea2e69c..431efa3d5 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -1,21 +1,76 @@
-/*eslint complexity: ["error", 20]*/
-// Imports
 import { useState, useEffect } from 'react';
-
-// Utils
 import { filteredVariantPrice, paddedPrice } from '@/utils/functions/functions';
-
-// Components
 import AddToCart, { IProductRootObject } from './AddToCart.component';
 import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner.component';
 
-const SingleProduct = ({ product }: IProductRootObject) => {
+interface IImage {
+  __typename: string;
+  id: string;
+  uri: string;
+  title: string;
+  srcSet: string;
+  sourceUrl: string;
+}
+
+interface IVariationNode {
+  __typename: string;
+  name: string;
+}
+
+interface IAllPaColors {
+  __typename: string;
+  nodes: IVariationNode[];
+}
+
+interface IAllPaSizes {
+  __typename: string;
+  nodes: IVariationNode[];
+}
+
+interface IVariationNodes {
+  __typename: string;
+  id: string;
+  databaseId: number;
+  name: string;
+  stockStatus: string;
+  stockQuantity: number;
+  purchasable: boolean;
+  onSale: boolean;
+  salePrice?: string;
+  regularPrice: string;
+}
+
+interface IVariations {
+  __typename: string;
+  nodes: IVariationNodes[];
+}
+
+interface IProduct {
+  __typename: string;
+  id: string;
+  databaseId: number;
+  averageRating: number;
+  slug: string;
+  description: string;
+  onSale: boolean;
+  image: IImage;
+  name: string;
+  salePrice?: string;
+  regularPrice: string;
+  price: string;
+  stockQuantity: number;
+  allPaColors?: IAllPaColors;
+  allPaSizes?: IAllPaSizes;
+  variations?: IVariations;
+}
+
+const SingleProduct: React.FC<IProductRootObject> = ({ product }) => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [selectedVariation, setSelectedVariation] = useState<number>();
+  const [selectedVariation, setSelectedVariation] = useState<number | undefined>();
 
   const placeholderFallBack = 'https://via.placeholder.com/600';
 
-  let DESCRIPTION_WITHOUT_HTML;
+  let DESCRIPTION_WITHOUT_HTML: string | undefined;
 
   useEffect(() => {
     setIsLoading(false);
@@ -25,31 +80,18 @@ const SingleProduct = ({ product }: IProductRootObject) => {
     }
   }, [product.variations]);
 
-  let { description, image, name, onSale, price, regularPrice, salePrice } =
-    product;
+  let { description, image, name, onSale, price, regularPrice, salePrice } = product;
 
-  // Add padding/empty character after currency symbol here
-  if (price) {
-    price = paddedPrice(price, 'kr');
-  }
-  if (regularPrice) {
-    regularPrice = paddedPrice(regularPrice, 'kr');
-  }
-  if (salePrice) {
-    salePrice = paddedPrice(salePrice, 'kr');
-  }
+  if (price) price = paddedPrice(price, 'kr');
+  if (regularPrice) regularPrice = paddedPrice(regularPrice, 'kr');
+  if (salePrice) salePrice = paddedPrice(salePrice, 'kr');
 
-  // Strip out HTML from description
   if (process.browser) {
-    DESCRIPTION_WITHOUT_HTML = new DOMParser().parseFromString(
-      description,
-      'text/html',
-    ).body.textContent;
+    DESCRIPTION_WITHOUT_HTML = new DOMParser().parseFromString(description, 'text/html').body.textContent;
   }
 
   return (
-    <section className="bg-white mb-12 sm:mb-2">
-      {/* Show loading spinner while loading, and hide content while loading */}
+    <section className="bg-white">
       {isLoading ? (
         <div className="h-56 mt-20">
           <p className="text-2xl font-bold text-center">Laster produkt ...</p>
@@ -57,89 +99,75 @@ const SingleProduct = ({ product }: IProductRootObject) => {
           <LoadingSpinner />
         </div>
       ) : (
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:gap-8">
-            {image && (
-              <div className="flex justify-center items-center">
+        <div className="container mx-auto px-4 py-8 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
+            <div className="w-full">
+              {image ? (
                 <img
                   id="product-image"
                   src={image.sourceUrl}
                   alt={name}
-                  className="max-w-full h-auto transition duration-500 ease-in-out transform hover:scale-105"
+                  className="w-full h-auto object-cover rounded-lg shadow-md"
                 />
-              </div>
-            )}
-            {!image && (
-              <div className="flex justify-center items-center">
+              ) : (
                 <img
                   id="product-image"
-                  src={
-                    process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ??
-                    placeholderFallBack
-                  }
+                  src={process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ?? placeholderFallBack}
                   alt={name}
-                  className="max-w-full h-auto transition duration-500 ease-in-out transform hover:scale-105"
+                  className="w-full h-auto object-cover rounded-lg shadow-md"
                 />
-              </div>
-            )}
-            <div className="flex flex-col justify-center text-center md:text-left">
-              <h1 className="text-3xl font-bold mb-4">{name}</h1>
-              {/* Display sale price when on sale */}
-              {onSale && (
-                <div className="flex flex-col md:flex-row items-center md:items-start justify-center md:justify-start mb-4">
-                  <p className="text-3xl font-bold text-red-600 mr-4">
-                    {product.variations && filteredVariantPrice(price, '')}
-                    {!product.variations && salePrice}
-                  </p>
-                  <p className="text-2xl text-gray-500 line-through">
-                    {product.variations && filteredVariantPrice(price, 'right')}
-                    {!product.variations && regularPrice}
-                  </p>
-                </div>
               )}
-              {/* Display regular price when not on sale */}
-              {!onSale && (
-                <p className="text-3xl font-bold mb-4">{price}</p>
-              )}
-              <p className="text-lg mb-4">{DESCRIPTION_WITHOUT_HTML}</p>
+            </div>
+            <div className="flex flex-col space-y-4">
+              <h1 className="text-3xl font-bold text-center md:text-left">{name}</h1>
+              <div className="text-center md:text-left">
+                {onSale ? (
+                  <div className="flex flex-col md:flex-row items-center md:items-start space-y-2 md:space-y-0 md:space-x-4">
+                    <p className="text-3xl font-bold text-red-600">
+                      {product.variations ? filteredVariantPrice(price, '') : salePrice}
+                    </p>
+                    <p className="text-xl text-gray-500 line-through">
+                      {product.variations ? filteredVariantPrice(price, 'right') : regularPrice}
+                    </p>
+                  </div>
+                ) : (
+                  <p className="text-2xl font-bold">{price}</p>
+                )}
+              </div>
+              <p className="text-gray-600 text-center md:text-left">{DESCRIPTION_WITHOUT_HTML}</p>
               {Boolean(product.stockQuantity) && (
-                <p className="text-lg mb-4">
+                <p className="text-sm font-semibold text-center md:text-left">
                   {product.stockQuantity} på lager
                 </p>
               )}
               {product.variations && (
-                <div className="mb-4">
-                  <label htmlFor="variant" className="block text-lg mb-2">Varianter</label>
+                <div className="w-full">
+                  <label htmlFor="variant" className="block text-sm font-medium text-gray-700 mb-2">
+                    Varianter
+                  </label>
                   <select
                     id="variant"
                     name="variant"
-                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    onChange={(e) => {
-                      setSelectedVariation(Number(e.target.value));
-                    }}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    onChange={(e) => setSelectedVariation(Number(e.target.value))}
                   >
-                    {product.variations.nodes.map(
-                      ({ id, name, databaseId, stockQuantity }) => {
-                        // Remove product name from variation name
-                        const filteredName = name.split('- ').pop();
-                        return (
-                          <option key={id} value={databaseId}>
-                            {filteredName} - ({stockQuantity} på lager)
-                          </option>
-                        );
-                      },
-                    )}
+                    {product.variations.nodes.map(({ id, name, databaseId, stockQuantity }) => {
+                      const filteredName = name.split('- ').pop();
+                      return (
+                        <option key={id} value={databaseId}>
+                          {filteredName} - ({stockQuantity} på lager)
+                        </option>
+                      );
+                    })}
                   </select>
                 </div>
               )}
               <div className="flex justify-center md:justify-start">
-                {product.variations && (
-                  <AddToCart
-                    product={product}
-                    variationId={selectedVariation}
-                  />
+                {product.variations ? (
+                  <AddToCart product={product} variationId={selectedVariation} />
+                ) : (
+                  <AddToCart product={product} />
                 )}
-                {!product.variations && <AddToCart product={product} />}
               </div>
             </div>
           </div>

From a2978d93acf980f3c2b4f3c2adfb938c46b37697 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:02:03 +0200
Subject: [PATCH 03/12] Update SingleProduct.component.tsx

---
 .../Product/SingleProduct.component.tsx       | 88 ++++++++++---------
 1 file changed, 48 insertions(+), 40 deletions(-)

diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index 431efa3d5..a76e0badf 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { filteredVariantPrice, paddedPrice } from '@/utils/functions/functions';
 import AddToCart, { IProductRootObject } from './AddToCart.component';
 import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner.component';
@@ -45,28 +45,11 @@ interface IVariations {
   nodes: IVariationNodes[];
 }
 
-interface IProduct {
-  __typename: string;
-  id: string;
-  databaseId: number;
-  averageRating: number;
-  slug: string;
-  description: string;
-  onSale: boolean;
-  image: IImage;
-  name: string;
-  salePrice?: string;
-  regularPrice: string;
-  price: string;
-  stockQuantity: number;
-  allPaColors?: IAllPaColors;
-  allPaSizes?: IAllPaSizes;
-  variations?: IVariations;
-}
-
 const SingleProduct: React.FC<IProductRootObject> = ({ product }) => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [selectedVariation, setSelectedVariation] = useState<number | undefined>();
+  const [selectedVariation, setSelectedVariation] = useState<
+    number | undefined
+  >();
 
   const placeholderFallBack = 'https://via.placeholder.com/600';
 
@@ -80,14 +63,18 @@ const SingleProduct: React.FC<IProductRootObject> = ({ product }) => {
     }
   }, [product.variations]);
 
-  let { description, image, name, onSale, price, regularPrice, salePrice } = product;
+  let { description, image, name, onSale, price, regularPrice, salePrice } =
+    product;
 
   if (price) price = paddedPrice(price, 'kr');
   if (regularPrice) regularPrice = paddedPrice(regularPrice, 'kr');
   if (salePrice) salePrice = paddedPrice(salePrice, 'kr');
 
-  if (process.browser) {
-    DESCRIPTION_WITHOUT_HTML = new DOMParser().parseFromString(description, 'text/html').body.textContent;
+  if (typeof window !== 'undefined') {
+    DESCRIPTION_WITHOUT_HTML = new DOMParser().parseFromString(
+      description,
+      'text/html',
+    ).body.textContent;
   }
 
   return (
@@ -112,29 +99,40 @@ const SingleProduct: React.FC<IProductRootObject> = ({ product }) => {
               ) : (
                 <img
                   id="product-image"
-                  src={process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ?? placeholderFallBack}
+                  src={
+                    process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ??
+                    placeholderFallBack
+                  }
                   alt={name}
                   className="w-full h-auto object-cover rounded-lg shadow-md"
                 />
               )}
             </div>
             <div className="flex flex-col space-y-4">
-              <h1 className="text-3xl font-bold text-center md:text-left">{name}</h1>
+              <h1 className="text-3xl font-bold text-center md:text-left">
+                {name}
+              </h1>
               <div className="text-center md:text-left">
                 {onSale ? (
                   <div className="flex flex-col md:flex-row items-center md:items-start space-y-2 md:space-y-0 md:space-x-4">
                     <p className="text-3xl font-bold text-red-600">
-                      {product.variations ? filteredVariantPrice(price, '') : salePrice}
+                      {product.variations
+                        ? filteredVariantPrice(price, '')
+                        : salePrice}
                     </p>
                     <p className="text-xl text-gray-500 line-through">
-                      {product.variations ? filteredVariantPrice(price, 'right') : regularPrice}
+                      {product.variations
+                        ? filteredVariantPrice(price, 'right')
+                        : regularPrice}
                     </p>
                   </div>
                 ) : (
                   <p className="text-2xl font-bold">{price}</p>
                 )}
               </div>
-              <p className="text-gray-600 text-center md:text-left">{DESCRIPTION_WITHOUT_HTML}</p>
+              <p className="text-gray-600 text-center md:text-left">
+                {DESCRIPTION_WITHOUT_HTML}
+              </p>
               {Boolean(product.stockQuantity) && (
                 <p className="text-sm font-semibold text-center md:text-left">
                   {product.stockQuantity} på lager
@@ -142,29 +140,39 @@ const SingleProduct: React.FC<IProductRootObject> = ({ product }) => {
               )}
               {product.variations && (
                 <div className="w-full">
-                  <label htmlFor="variant" className="block text-sm font-medium text-gray-700 mb-2">
+                  <label
+                    htmlFor="variant"
+                    className="block text-sm font-medium text-gray-700 mb-2"
+                  >
                     Varianter
                   </label>
                   <select
                     id="variant"
                     name="variant"
                     className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    onChange={(e) => setSelectedVariation(Number(e.target.value))}
+                    onChange={(e) =>
+                      setSelectedVariation(Number(e.target.value))
+                    }
                   >
-                    {product.variations.nodes.map(({ id, name, databaseId, stockQuantity }) => {
-                      const filteredName = name.split('- ').pop();
-                      return (
-                        <option key={id} value={databaseId}>
-                          {filteredName} - ({stockQuantity} på lager)
-                        </option>
-                      );
-                    })}
+                    {product.variations.nodes.map(
+                      ({ id, name, databaseId, stockQuantity }) => {
+                        const filteredName = name.split('- ').pop();
+                        return (
+                          <option key={id} value={databaseId}>
+                            {filteredName} - ({stockQuantity} på lager)
+                          </option>
+                        );
+                      },
+                    )}
                   </select>
                 </div>
               )}
               <div className="flex justify-center md:justify-start">
                 {product.variations ? (
-                  <AddToCart product={product} variationId={selectedVariation} />
+                  <AddToCart
+                    product={product}
+                    variationId={selectedVariation}
+                  />
                 ) : (
                   <AddToCart product={product} />
                 )}

From de2c99af70dd6b51c0ff4ed4519e9a7cc1c53634 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:06:26 +0200
Subject: [PATCH 04/12] Update SingleProduct.component.tsx

---
 .../Product/SingleProduct.component.tsx       | 42 -------------------
 1 file changed, 42 deletions(-)

diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index a76e0badf..d47649d93 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -3,48 +3,6 @@ import { filteredVariantPrice, paddedPrice } from '@/utils/functions/functions';
 import AddToCart, { IProductRootObject } from './AddToCart.component';
 import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner.component';
 
-interface IImage {
-  __typename: string;
-  id: string;
-  uri: string;
-  title: string;
-  srcSet: string;
-  sourceUrl: string;
-}
-
-interface IVariationNode {
-  __typename: string;
-  name: string;
-}
-
-interface IAllPaColors {
-  __typename: string;
-  nodes: IVariationNode[];
-}
-
-interface IAllPaSizes {
-  __typename: string;
-  nodes: IVariationNode[];
-}
-
-interface IVariationNodes {
-  __typename: string;
-  id: string;
-  databaseId: number;
-  name: string;
-  stockStatus: string;
-  stockQuantity: number;
-  purchasable: boolean;
-  onSale: boolean;
-  salePrice?: string;
-  regularPrice: string;
-}
-
-interface IVariations {
-  __typename: string;
-  nodes: IVariationNodes[];
-}
-
 const SingleProduct: React.FC<IProductRootObject> = ({ product }) => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [selectedVariation, setSelectedVariation] = useState<

From e1b58c4e17d036410efb6fd2fd024d8e73e29e50 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:08:41 +0200
Subject: [PATCH 05/12] Update SingleProduct.component.tsx

---
 src/components/Product/SingleProduct.component.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index d47649d93..9fb95a202 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -11,7 +11,7 @@ const SingleProduct: React.FC<IProductRootObject> = ({ product }) => {
 
   const placeholderFallBack = 'https://via.placeholder.com/600';
 
-  let DESCRIPTION_WITHOUT_HTML: string | undefined;
+  let DESCRIPTION_WITHOUT_HTML: string | null = null;
 
   useEffect(() => {
     setIsLoading(false);
@@ -28,11 +28,10 @@ const SingleProduct: React.FC<IProductRootObject> = ({ product }) => {
   if (regularPrice) regularPrice = paddedPrice(regularPrice, 'kr');
   if (salePrice) salePrice = paddedPrice(salePrice, 'kr');
 
-  if (typeof window !== 'undefined') {
-    DESCRIPTION_WITHOUT_HTML = new DOMParser().parseFromString(
-      description,
-      'text/html',
-    ).body.textContent;
+  if (typeof window !== 'undefined' && description) {
+    DESCRIPTION_WITHOUT_HTML =
+      new DOMParser().parseFromString(description, 'text/html').body
+        .textContent || '';
   }
 
   return (

From d6085f2c145816bdb9316bf972d2d19a60509a06 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:19:16 +0200
Subject: [PATCH 06/12] Update SingleProduct.component.tsx

---
 .../Product/SingleProduct.component.tsx       | 39 +++++++++++++------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index 9fb95a202..21dfd0ef8 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -1,9 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import { filteredVariantPrice, paddedPrice } from '@/utils/functions/functions';
-import AddToCart, { IProductRootObject } from './AddToCart.component';
+import AddToCart, { IProduct, IProductRootObject } from './AddToCart.component';
 import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner.component';
+import Button from '@/components/UI/Button.component';
 
-const SingleProduct: React.FC<IProductRootObject> = ({ product }) => {
+interface SingleProductProps {
+  product: IProduct;
+}
+
+const SingleProduct: React.FC<SingleProductProps> = ({ product }) => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [selectedVariation, setSelectedVariation] = useState<
     number | undefined
@@ -34,8 +39,13 @@ const SingleProduct: React.FC<IProductRootObject> = ({ product }) => {
         .textContent || '';
   }
 
+  const handleBuy = () => {
+    // Implement buy functionality here
+    console.log('Buy button clicked');
+  };
+
   return (
-    <section className="bg-white">
+    <section className="bg-white mb-16 sm:mb-24">
       {isLoading ? (
         <div className="h-56 mt-20">
           <p className="text-2xl font-bold text-center">Laster produkt ...</p>
@@ -124,15 +134,20 @@ const SingleProduct: React.FC<IProductRootObject> = ({ product }) => {
                   </select>
                 </div>
               )}
-              <div className="flex justify-center md:justify-start">
-                {product.variations ? (
-                  <AddToCart
-                    product={product}
-                    variationId={selectedVariation}
-                  />
-                ) : (
-                  <AddToCart product={product} />
-                )}
+              <div className="flex flex-col space-y-4 items-center md:items-start">
+                <Button handleButtonClick={handleBuy} color="blue">
+                  Kjøp nå
+                </Button>
+                <div className="w-full md:w-auto">
+                  {product.variations ? (
+                    <AddToCart
+                      product={product}
+                      variationId={selectedVariation}
+                    />
+                  ) : (
+                    <AddToCart product={product} />
+                  )}
+                </div>
               </div>
             </div>
           </div>

From 188683f54c03096974139f6431b4a54a04fc25d0 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:23:57 +0200
Subject: [PATCH 07/12] Update SingleProduct.component.tsx

---
 .../Product/SingleProduct.component.tsx       | 143 ++++++++----------
 1 file changed, 65 insertions(+), 78 deletions(-)

diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index 21dfd0ef8..147f871ff 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -1,18 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import { filteredVariantPrice, paddedPrice } from '@/utils/functions/functions';
-import AddToCart, { IProduct, IProductRootObject } from './AddToCart.component';
+import AddToCart, { IProductRootObject } from './AddToCart.component';
 import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner.component';
 import Button from '@/components/UI/Button.component';
 
-interface SingleProductProps {
-  product: IProduct;
-}
-
-const SingleProduct: React.FC<SingleProductProps> = ({ product }) => {
+const SingleProduct: React.FC<IProductRootObject> = ({
+  product,
+  variationId: initialVariationId,
+}) => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [selectedVariation, setSelectedVariation] = useState<
     number | undefined
-  >();
+  >(initialVariationId);
 
   const placeholderFallBack = 'https://via.placeholder.com/600';
 
@@ -20,11 +19,11 @@ const SingleProduct: React.FC<SingleProductProps> = ({ product }) => {
 
   useEffect(() => {
     setIsLoading(false);
-    if (product.variations) {
+    if (product.variations && !selectedVariation) {
       const firstVariant = product.variations.nodes[0].databaseId;
       setSelectedVariation(firstVariant);
     }
-  }, [product.variations]);
+  }, [product.variations, selectedVariation]);
 
   let { description, image, name, onSale, price, regularPrice, salePrice } =
     product;
@@ -40,8 +39,7 @@ const SingleProduct: React.FC<SingleProductProps> = ({ product }) => {
   }
 
   const handleBuy = () => {
-    // Implement buy functionality here
-    console.log('Buy button clicked');
+    console.log('Buy now clicked');
   };
 
   return (
@@ -75,79 +73,68 @@ const SingleProduct: React.FC<SingleProductProps> = ({ product }) => {
                 />
               )}
             </div>
-            <div className="flex flex-col space-y-4">
-              <h1 className="text-3xl font-bold text-center md:text-left">
-                {name}
-              </h1>
-              <div className="text-center md:text-left">
-                {onSale ? (
-                  <div className="flex flex-col md:flex-row items-center md:items-start space-y-2 md:space-y-0 md:space-x-4">
-                    <p className="text-3xl font-bold text-red-600">
-                      {product.variations
-                        ? filteredVariantPrice(price, '')
-                        : salePrice}
-                    </p>
-                    <p className="text-xl text-gray-500 line-through">
-                      {product.variations
-                        ? filteredVariantPrice(price, 'right')
-                        : regularPrice}
-                    </p>
+            <div className="flex flex-col space-y-6">
+              <h1 className="text-3xl font-bold">{name}</h1>
+              <div className="flex flex-col space-y-2">
+                {onSale && <p className="text-sm">Før {regularPrice}</p>}
+                <p className="text-4xl font-bold">
+                  {product.variations
+                    ? filteredVariantPrice(price, '')
+                    : onSale
+                      ? salePrice
+                      : price}
+                </p>
+                <p className="text-sm">
+                  Tilbudet gjelder til 19/09 eller så lenge lageret rekker.
+                </p>
+              </div>
+              <div className="space-y-4">
+                <AddToCart product={product} variationId={selectedVariation} />
+                <Button handleButtonClick={handleBuy} color="blue">
+                  Kjøp nå
+                </Button>
+                {product.variations && (
+                  <div className="w-full">
+                    <label
+                      htmlFor="variant"
+                      className="block text-sm font-medium mb-2"
+                    >
+                      Varianter
+                    </label>
+                    <select
+                      id="variant"
+                      name="variant"
+                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      onChange={(e) =>
+                        setSelectedVariation(Number(e.target.value))
+                      }
+                      value={selectedVariation}
+                    >
+                      {product.variations.nodes.map(
+                        ({ id, name, databaseId, stockQuantity }) => {
+                          const filteredName = name.split('- ').pop();
+                          return (
+                            <option key={id} value={databaseId}>
+                              {filteredName} - ({stockQuantity} på lager)
+                            </option>
+                          );
+                        },
+                      )}
+                    </select>
                   </div>
-                ) : (
-                  <p className="text-2xl font-bold">{price}</p>
                 )}
               </div>
-              <p className="text-gray-600 text-center md:text-left">
-                {DESCRIPTION_WITHOUT_HTML}
-              </p>
               {Boolean(product.stockQuantity) && (
-                <p className="text-sm font-semibold text-center md:text-left">
-                  {product.stockQuantity} på lager
+                <p className="text-sm font-semibold">
+                  <span className="inline-block w-3 h-3 bg-green-500 rounded-full mr-2"></span>
+                  {product.stockQuantity}+ stk. på lager
                 </p>
               )}
-              {product.variations && (
-                <div className="w-full">
-                  <label
-                    htmlFor="variant"
-                    className="block text-sm font-medium text-gray-700 mb-2"
-                  >
-                    Varianter
-                  </label>
-                  <select
-                    id="variant"
-                    name="variant"
-                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    onChange={(e) =>
-                      setSelectedVariation(Number(e.target.value))
-                    }
-                  >
-                    {product.variations.nodes.map(
-                      ({ id, name, databaseId, stockQuantity }) => {
-                        const filteredName = name.split('- ').pop();
-                        return (
-                          <option key={id} value={databaseId}>
-                            {filteredName} - ({stockQuantity} på lager)
-                          </option>
-                        );
-                      },
-                    )}
-                  </select>
-                </div>
-              )}
-              <div className="flex flex-col space-y-4 items-center md:items-start">
-                <Button handleButtonClick={handleBuy} color="blue">
-                  Kjøp nå
-                </Button>
-                <div className="w-full md:w-auto">
-                  {product.variations ? (
-                    <AddToCart
-                      product={product}
-                      variationId={selectedVariation}
-                    />
-                  ) : (
-                    <AddToCart product={product} />
-                  )}
-                </div>
+              <div className="mt-8">
+                <h2 className="text-xl font-semibold mb-2">
+                  Produktbeskrivelse
+                </h2>
+                <p className="text-gray-600">{DESCRIPTION_WITHOUT_HTML}</p>
               </div>
             </div>
           </div>

From dcb45d96d85d1ec9983d5af192e1b9e50b4dd724 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:27:43 +0200
Subject: [PATCH 08/12] Update SingleProduct.component.tsx

---
 src/components/Product/SingleProduct.component.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index 147f871ff..c74992230 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -90,9 +90,7 @@ const SingleProduct: React.FC<IProductRootObject> = ({
               </div>
               <div className="space-y-4">
                 <AddToCart product={product} variationId={selectedVariation} />
-                <Button handleButtonClick={handleBuy} color="blue">
-                  Kjøp nå
-                </Button>
+
                 {product.variations && (
                   <div className="w-full">
                     <label

From fa8a0425cead1f94367231d38b7c0b1724427f71 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:28:35 +0200
Subject: [PATCH 09/12] Update SingleProduct.component.tsx

---
 src/components/Product/SingleProduct.component.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index c74992230..55b800ba4 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { filteredVariantPrice, paddedPrice } from '@/utils/functions/functions';
 import AddToCart, { IProductRootObject } from './AddToCart.component';
 import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner.component';
-import Button from '@/components/UI/Button.component';
 
 const SingleProduct: React.FC<IProductRootObject> = ({
   product,

From 9e813b7ae995889acc19e683b065f05835768eff Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:29:30 +0200
Subject: [PATCH 10/12] Update SingleProduct.component.tsx

---
 src/components/Product/SingleProduct.component.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index 55b800ba4..be79f18f2 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -37,10 +37,6 @@ const SingleProduct: React.FC<IProductRootObject> = ({
         .textContent || '';
   }
 
-  const handleBuy = () => {
-    console.log('Buy now clicked');
-  };
-
   return (
     <section className="bg-white mb-16 sm:mb-24">
       {isLoading ? (

From 65d03b786a0a64a41213d3e1cdc9460595698810 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:34:29 +0200
Subject: [PATCH 11/12] Update SingleProduct.component.tsx

---
 .../Product/SingleProduct.component.tsx       | 168 ++++++++++--------
 1 file changed, 90 insertions(+), 78 deletions(-)

diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index be79f18f2..3d9843a18 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -37,6 +37,10 @@ const SingleProduct: React.FC<IProductRootObject> = ({
         .textContent || '';
   }
 
+  const handleBuy = () => {
+    console.log('Buy now clicked');
+  };
+
   return (
     <section className="bg-white mb-16 sm:mb-24">
       {isLoading ? (
@@ -47,88 +51,96 @@ const SingleProduct: React.FC<IProductRootObject> = ({
         </div>
       ) : (
         <div className="container mx-auto px-4 py-8 sm:px-6 lg:px-8">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
-            <div className="w-full">
-              {image ? (
-                <img
-                  id="product-image"
-                  src={image.sourceUrl}
-                  alt={name}
-                  className="w-full h-auto object-cover rounded-lg shadow-md"
-                />
-              ) : (
-                <img
-                  id="product-image"
-                  src={
-                    process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ??
-                    placeholderFallBack
-                  }
-                  alt={name}
-                  className="w-full h-auto object-cover rounded-lg shadow-md"
-                />
-              )}
-            </div>
-            <div className="flex flex-col space-y-6">
-              <h1 className="text-3xl font-bold">{name}</h1>
-              <div className="flex flex-col space-y-2">
-                {onSale && <p className="text-sm">Før {regularPrice}</p>}
-                <p className="text-4xl font-bold">
-                  {product.variations
-                    ? filteredVariantPrice(price, '')
-                    : onSale
-                      ? salePrice
-                      : price}
-                </p>
-                <p className="text-sm">
-                  Tilbudet gjelder til 19/09 eller så lenge lageret rekker.
-                </p>
+          <div className="flex flex-col space-y-8">
+            {/* First row: Product info, price, and purchase options */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
+              <div className="w-full">
+                {image ? (
+                  <img
+                    id="product-image"
+                    src={image.sourceUrl}
+                    alt={name}
+                    className="w-full h-auto object-cover rounded-lg shadow-md"
+                  />
+                ) : (
+                  <img
+                    id="product-image"
+                    src={
+                      process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ??
+                      placeholderFallBack
+                    }
+                    alt={name}
+                    className="w-full h-auto object-cover rounded-lg shadow-md"
+                  />
+                )}
               </div>
-              <div className="space-y-4">
-                <AddToCart product={product} variationId={selectedVariation} />
+              <div className="flex flex-col space-y-6">
+                <h1 className="text-3xl font-bold">{name}</h1>
+                <div className="flex flex-col space-y-2">
+                  {onSale && <p className="text-sm">Før {regularPrice}</p>}
+                  <p className="text-4xl font-bold">
+                    {product.variations
+                      ? filteredVariantPrice(price, '')
+                      : onSale
+                        ? salePrice
+                        : price}
+                  </p>
+                  <p className="text-sm">
+                    Tilbudet gjelder til 19/09 eller så lenge lageret rekker.
+                  </p>
+                </div>
+                <div className="space-y-4">
+                  <AddToCart
+                    product={product}
+                    variationId={selectedVariation}
+                  />
 
-                {product.variations && (
-                  <div className="w-full">
-                    <label
-                      htmlFor="variant"
-                      className="block text-sm font-medium mb-2"
-                    >
-                      Varianter
-                    </label>
-                    <select
-                      id="variant"
-                      name="variant"
-                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                      onChange={(e) =>
-                        setSelectedVariation(Number(e.target.value))
-                      }
-                      value={selectedVariation}
-                    >
-                      {product.variations.nodes.map(
-                        ({ id, name, databaseId, stockQuantity }) => {
-                          const filteredName = name.split('- ').pop();
-                          return (
-                            <option key={id} value={databaseId}>
-                              {filteredName} - ({stockQuantity} på lager)
-                            </option>
-                          );
-                        },
-                      )}
-                    </select>
-                  </div>
+                  {product.variations && (
+                    <div className="w-full">
+                      <label
+                        htmlFor="variant"
+                        className="block text-sm font-medium mb-2"
+                      >
+                        Varianter
+                      </label>
+                      <select
+                        id="variant"
+                        name="variant"
+                        className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                        onChange={(e) =>
+                          setSelectedVariation(Number(e.target.value))
+                        }
+                        value={selectedVariation}
+                      >
+                        {product.variations.nodes.map(
+                          ({ id, name, databaseId, stockQuantity }) => {
+                            const filteredName = name.split('- ').pop();
+                            return (
+                              <option key={id} value={databaseId}>
+                                {filteredName} - ({stockQuantity} på lager)
+                              </option>
+                            );
+                          },
+                        )}
+                      </select>
+                    </div>
+                  )}
+                </div>
+                {Boolean(product.stockQuantity) && (
+                  <p className="text-sm font-semibold">
+                    <span className="inline-block w-3 h-3 bg-green-500 rounded-full mr-2"></span>
+                    {product.stockQuantity}+ stk. på lager
+                  </p>
                 )}
               </div>
-              {Boolean(product.stockQuantity) && (
-                <p className="text-sm font-semibold">
-                  <span className="inline-block w-3 h-3 bg-green-500 rounded-full mr-2"></span>
-                  {product.stockQuantity}+ stk. på lager
-                </p>
-              )}
-              <div className="mt-8">
-                <h2 className="text-xl font-semibold mb-2">
-                  Produktbeskrivelse
-                </h2>
-                <p className="text-gray-600">{DESCRIPTION_WITHOUT_HTML}</p>
-              </div>
+            </div>
+
+            {/* Second row: Product description */}
+            <div className="mt-8">
+              <h2 className="text-2xl font-semibold mb-4">
+                Produktbeskrivelse
+              </h2>
+              <p className="text-gray-600">{DESCRIPTION_WITHOUT_HTML}</p>
             </div>
           </div>
         </div>

From e70a52fb2f42cbcdc48ecf033fcf7e5a7c258fb8 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:35:48 +0200
Subject: [PATCH 12/12] Update SingleProduct.component.tsx

---
 src/components/Product/SingleProduct.component.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index 3d9843a18..5d45efdce 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -37,9 +37,7 @@ const SingleProduct: React.FC<IProductRootObject> = ({
         .textContent || '';
   }
 
-  const handleBuy = () => {
-    console.log('Buy now clicked');
-  };
+
 
   return (
     <section className="bg-white mb-16 sm:mb-24">