Merge branch 'master' into 1112-design-categories-1920-x-1080

Author: w3bdesign

.github/workflows/codeql.yml

@@ -27,15 +27,15 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           languages: ${{ matrix.language }}
           queries: +security-and-quality
 
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+        uses: github/codeql-action/autobuild@v3
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3
         with:
           category: "/language:${{ matrix.language }}"

.github/workflows/playwright.yml

@@ -22,7 +22,7 @@ jobs:
       env:
           CI: true
           NEXT_PUBLIC_GRAPHQL_URL: ${{ secrets.NEXT_PUBLIC_GRAPHQL_URL }}
-    - uses: actions/upload-artifact@v3
+    - uses: actions/upload-artifact@v4
       if: always()
       with:
         name: playwright-report

README.md

@@ -71,7 +71,7 @@ The current release has been tested and is confirmed working with the following
 
 ## Features
 
--   Next.js version 13.5.3
+-   Next.js version 14.2.5
 -   React 18
 -   Typescript
 -   Tests with Playwright
@@ -114,6 +114,8 @@ With that said, keep the following in mind:
 -   Currently only simple products and variable products work without any issues. Other product types are not known to work.
 -   Only Cash On Delivery (COD) is currently supported. More payment methods may be added later.
 
+This project is tested with BrowserStack.
+
 ## TODO
 
 -   Add total to cart/checkout page

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-woocommerce",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -22,37 +22,37 @@
   "author": "w3bdesign",
   "license": "ISC",
   "dependencies": {
-    "@apollo/client": "^3.8.7",
-    "@types/react": "^18.2.37",
-    "algoliasearch": "^4.20.0",
-    "autoprefixer": "^10.4.16",
-    "framer-motion": "10.16.5",
-    "graphql": "^16.8.1",
+    "@apollo/client": "^3.11.8",
+    "@types/react": "^18.3.5",
+    "algoliasearch": "^4.24.0",
+    "autoprefixer": "^10.4.20",
+    "framer-motion": "11.5.4",
+    "graphql": "^16.9.0",
     "lodash": "^4.17.21",
-    "next": "^14.0.3",
+    "next": "^14.2.11",
     "nprogress": "^0.2.0",
-    "postcss": "^8.4.31",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.48.2",
+    "postcss": "^8.4.45",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
     "react-instantsearch-dom": "^6.40.4",
-    "uuid": "^9.0.1"
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.40.0",
-    "@types/lodash": "^4.14.201",
-    "@types/node": "20.9.1",
+    "@playwright/test": "^1.47.1",
+    "@types/lodash": "^4.17.7",
+    "@types/node": "22.5.4",
     "@types/nprogress": "^0.2.3",
-    "@types/react-instantsearch-dom": "^6.12.6",
-    "@types/uuid": "^9.0.7",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
+    "@types/react-instantsearch-dom": "^6.12.8",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.5.0",
+    "@typescript-eslint/parser": "^8.5.0",
     "babel-plugin-styled-components": "^2.1.4",
-    "eslint": "^8.53.0",
-    "eslint-config-next": "^14.0.3",
-    "postcss-preset-env": "^9.3.0",
-    "prettier": "^3.1.0",
-    "tailwindcss": "^3.3.5",
-    "typescript": "^5.2.2"
+    "eslint": "8.57.0",
+    "eslint-config-next": "^14.2.11",
+    "postcss-preset-env": "^10.0.3",
+    "prettier": "^3.3.3",
+    "tailwindcss": "^3.4.11",
+    "typescript": "^5.6.2"
   }
 }

package.json

@@ -13,7 +13,7 @@ import Hamburger from './Hamburger.component';
 const Stickynav = () => (
   <nav
     id="footer"
-    className="fixed bottom-0 z-50 w-full md:hidden lg:hidden xl:hidden"
+    className="fixed bottom-0 z-50 w-full md:hidden"
   >
     <div className="container flex flex-wrap items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96 bg-blue-800">
       <Hamburger />

src/components/Footer/Stickynav.component.tsx

@@ -13,7 +13,7 @@ interface IPageTitleProps {
 const PageTitle = ({ title, marginLeft }: IPageTitleProps) => (
   <section
     className={`container ${
-      marginLeft ? 'pl-8' : 'pl-4'
+      marginLeft ? 'p-4' : 'p-0'
     }  pl-4 mx-auto mt-24 text-center bg-white`}
   >
     <span className="py-2 text-2xl font-bold tracking-wide text-center text-gray-800 no-underline uppercase hover:no-underline">

src/components/Layout/PageTitle.component.tsx

@@ -80,15 +80,18 @@ export interface IProduct {
 export interface IProductRootObject {
   product: IProduct;
   variationId?: number;
+  fullWidth?: boolean;
 }
 
 /**
  * Handles the Add to cart functionality.
  * Uses GraphQL for product data
  * @param {IAddToCartProps} product // Product data
+ * @param {number} variationId // Variation ID
+ * @param {boolean} fullWidth // Whether the button should be full-width
  */
 
-const AddToCart = ({ product, variationId }: IProductRootObject) => {
+const AddToCart = ({ product, variationId, fullWidth = false }: IProductRootObject) => {
   const { setCart } = useContext(CartContext);
   const [requestError, setRequestError] = useState<boolean>(false);
 
@@ -146,6 +149,7 @@ const AddToCart = ({ product, variationId }: IProductRootObject) => {
       <Button
         handleButtonClick={() => handleAddToCart()}
         buttonDisabled={addToCartLoading || requestError}
+        fullWidth={fullWidth}
       >
         KJØP
       </Button>

src/components/Product/AddToCart.component.tsx

@@ -48,7 +48,7 @@ interface IDisplayProductsProps {
 
 const DisplayProducts = ({ products }: IDisplayProductsProps) => (
   <section className="container mx-auto bg-white">
-    <div id="product-container" className="flex flex-wrap items-center">
+    <div id="product-container" className="flex flex-wrap items-center mb-[120px] md:mb-0">
       {products ? (
         products.map(
           ({

src/components/Product/DisplayProducts.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-[8rem] md:mb-12">
       {/* Show loading spinner while loading, and hide content while loading */}
       {isLoading ? (
         <div className="h-56 mt-20">
@@ -57,14 +57,14 @@ 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 flex flex-wrap items-center pt-4 pb-12 mx-auto">
+          <div className="grid grid-cols-1 gap-4 md:mt-16 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2">
             {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 hover:grow hover:scale-105"
+                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"
               />
             )}
             {!image && (
@@ -75,48 +75,47 @@ const SingleProduct = ({ product }: IProductRootObject) => {
                   placeholderFallBack
                 }
                 alt={name}
-                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"
+                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="ml-8">
-              <p className="text-3xl font-bold text-left">{name}</p>
-              <br />
+            <div className="px-4 md:ml-8">
+              <h1 className="text-3xl font-bold text-center md:text-left 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 mb-4">
+                  <p className="text-3xl font-bold text-red-600">
                     {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-xl text-gray-500 line-through md:ml-4">
                     {product.variations && filteredVariantPrice(price, 'right')}
                     {!product.variations && regularPrice}
                   </p>
                 </div>
               )}
               {/* Display regular price when not on sale */}
               {!onSale && (
-                <p className="pt-1 mt-4 text-2xl text-gray-900"> {price}</p>
+                <p className="text-2xl 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 text-center md:text-left">{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"
-                >
-                  {product.stockQuantity} på lager
-                </p>
+                <div className="mb-4 p-2 bg-green-100 border border-green-400 rounded-lg mx-auto md:mx-0 max-w-[14.375rem]">
+                  <p className="text-lg text-green-700 font-semibold text-center md:text-left">
+                    {product.stockQuantity} på lager
+                  </p>
+                </div>
               )}
               {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 font-medium 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="block w-full px-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                     onChange={(e) => {
                       setSelectedVariation(Number(e.target.value));
                     }}
@@ -133,20 +132,17 @@ 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="w-full p-4 md:p-0">
                 {product.variations && (
                   <AddToCart
                     product={product}
                     variationId={selectedVariation}
+                    fullWidth={true}
                   />
                 )}
-                {!product.variations && <AddToCart product={product} />}
+                {!product.variations && <AddToCart product={product} fullWidth={true} />}
               </div>
             </div>
           </div>