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

w3bdesign · w3bdesign · commit 69254bf08f43 · 2023-11-17T22:40:11.000+01:00
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
@@ -24,7 +24,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v2
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -9,8 +9,8 @@ jobs:
     timeout-minutes: 60
     runs-on: windows-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: 18
     - name: Install dependencies
diff --git a/README.md b/README.md
@@ -36,7 +36,7 @@ Optional plugin:
 
 The current release has been tested and is confirmed working with the following versions:
 
--   WordPress version 6.1.1
+-   WordPress version 6.3.2
 -   WooCommerce version 7.4.0
 -   WP GraphQL version 1.13.8
 -   WooGraphQL version 0.12.0
@@ -71,7 +71,7 @@ The current release has been tested and is confirmed working with the following
 
 ## Features
 
--   Next.js version 13.4.7
+-   Next.js version 13.5.3
 -   React 18
 -   Typescript
 -   Tests with Playwright
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nextjs-woocommerce",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -22,37 +22,37 @@
   "author": "w3bdesign",
   "license": "ISC",
   "dependencies": {
-    "@apollo/client": "^3.7.17",
-    "@types/react": "^18.2.15",
-    "algoliasearch": "^4.19.1",
-    "autoprefixer": "^10.4.14",
-    "framer-motion": "10.13.0",
-    "graphql": "^16.7.1",
+    "@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",
     "lodash": "^4.17.21",
-    "next": "^13.4.11",
+    "next": "^14.0.3",
     "nprogress": "^0.2.0",
-    "postcss": "^8.4.26",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-hook-form": "^7.45.2",
-    "react-instantsearch-dom": "^6.40.3",
-    "uuid": "^9.0.0"
+    "postcss": "^8.4.31",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.48.2",
+    "react-instantsearch-dom": "^6.40.4",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.36.1",
-    "@types/lodash": "^4.14.195",
-    "@types/node": "18.16.19",
-    "@types/nprogress": "^0.2.0",
-    "@types/react-instantsearch-dom": "^6.12.3",
-    "@types/uuid": "^9.0.2",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
+    "@playwright/test": "^1.40.0",
+    "@types/lodash": "^4.14.201",
+    "@types/node": "20.9.1",
+    "@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",
     "babel-plugin-styled-components": "^2.1.4",
-    "eslint": "^8.45.0",
-    "eslint-config-next": "^13.4.11",
-    "postcss-preset-env": "^9.0.0",
-    "prettier": "^3.0.0",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.1.6"
+    "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"
   }
 }
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" version="1.1" viewBox="0 0 160 145" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"><path d="M11.142,45.302l45.301,-45.302c14.82,14.819 14.82,38.846 0,53.665l-45.301,45.303c-14.82,-14.82 -14.82,-38.847 0,-53.666l0,0Z" style="fill:#095684;fill-rule:nonzero"/><path d="M56.411,90.635l-14.562,-14.562l-30.74,-30.739c-10.09,10.091 -13.303,24.446 -9.654,37.261c1.712,6.006 4.923,11.676 9.654,16.405l45.302,45.301c14.819,-14.818 14.819,-38.846 0,-53.666l0,0Z" style="fill:#23b99a;fill-rule:nonzero"/><path d="M147.903,45.302l-45.301,-45.302c-14.819,14.819 -14.819,38.846 0,53.665l45.301,45.303c14.82,-14.82 14.82,-38.847 0,-53.666l0,0Z" style="fill:#23b99a;fill-rule:nonzero"/><path d="M102.635,90.635l14.562,-14.562l30.74,-30.739c10.089,10.091 13.302,24.446 9.653,37.261c-1.711,6.006 -4.924,11.676 -9.653,16.405l-45.302,45.301c-14.82,-14.818 -14.82,-38.846 0,-53.666l0,0Z" style="fill:#095684;fill-rule:nonzero"/><path d="M11.141,45.302l45.302,-45.302c14.82,14.819 14.82,38.846 0,53.665l-45.302,45.303c-14.819,-14.82 -14.819,-38.847 0,-53.666l0,0Z" style="fill:#095684;fill-rule:nonzero"/><path d="M56.411,90.635l-14.563,-14.562l-30.739,-30.739c-10.09,10.091 -13.303,24.446 -9.654,37.261c1.712,6.006 4.923,11.676 9.654,16.405l45.302,45.301c14.819,-14.818 14.819,-38.846 -0.001,-53.666l0,0Z" style="fill:#23b99a;fill-rule:nonzero"/><path d="M147.903,45.302l-45.301,-45.302c-14.82,14.819 -14.82,38.846 0,53.665l45.301,45.303c14.82,-14.82 14.82,-38.847 0,-53.666l0,0Z" style="fill:#23b99a;fill-rule:nonzero"/><path d="M102.635,90.635l14.561,-14.562l30.741,-30.739c10.089,10.091 13.302,24.446 9.652,37.261c-1.71,6.006 -4.923,11.676 -9.652,16.405l-45.303,45.301c-14.82,-14.818 -14.82,-38.846 0,-53.666l0,0Z" style="fill:#095684;fill-rule:nonzero"/></svg>
diff --git a/src/components/Footer/Hamburger.component.tsx b/src/components/Footer/Hamburger.component.tsx
@@ -97,6 +97,14 @@ const Hamburger = () => {
                       onClick={() => {
                         setisExpanded((prevExpanded) => !prevExpanded);
                       }}
+                      onKeyDown={(event) => {
+                        // 'Enter' key or 'Space' key
+                        if (event.key === 'Enter' || event.key === ' ') {
+                          setisExpanded((prevExpanded) => !prevExpanded);
+                        }
+                      }}
+                      tabIndex={0} // Make the span focusable
+                      role="button" // Indicate the span acts as a button
                     >
                       {title}
                     </span>
diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
@@ -12,6 +12,9 @@ import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner.component
 const SingleProduct = ({ product }: IProductRootObject) => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [selectedVariation, setSelectedVariation] = useState<number>();
+
+  const placeholderFallBack = 'https://via.placeholder.com/600';
+
   let DESCRIPTION_WITHOUT_HTML;
 
   useEffect(() => {
@@ -44,10 +47,8 @@ const SingleProduct = ({ product }: IProductRootObject) => {
     ).body.textContent;
   }
 
-  const placeholderFallBack = 'https://via.placeholder.com/600';
-
   return (
-    <section className="py-8 bg-white">
+    <section className="py-8 bg-white mb-12 sm:mb-2">
       {/* Show loading spinner while loading, and hide content while loading */}
       {isLoading ? (
         <div className="h-56 mt-20">
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -3,7 +3,9 @@ import { Html, Head, Main, NextScript } from 'next/document';
 export default function Document() {
   return (
     <Html lang="nb-NO">
-      <Head />
+      <Head>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
       <body>
         <Main />
         <NextScript />
diff --git a/src/utils/apollo/ApolloClient.js b/src/utils/apollo/ApolloClient.js
@@ -7,24 +7,39 @@ import {
   ApolloLink,
 } from '@apollo/client';
 
+const SEVEN_DAYS = 7 * 24 * 60 * 60 * 1000; // 7 days in milliseconds
+
 /**
  * Middleware operation
  * If we have a session token in localStorage, add it to the GraphQL request as a Session header.
  */
 export const middleware = new ApolloLink((operation, forward) => {
   /**
    * If session data exist in local storage, set value as session header.
-   * Here we also delete the session if it is older than 24 hours
+   * Here we also delete the session if it is older than 7 days
    */
-  const session = process.browser ? localStorage.getItem('woo-session') : null;
+  const sessionData = process.browser
+    ? JSON.parse(localStorage.getItem('woo-session'))
+    : null;
+
+  if (sessionData) {
+    const { token, createdTime } = sessionData;
 
-  if (session) {
-    operation.setContext(() => ({
-      headers: {
-        'woocommerce-session': `Session ${session}`,
-      },
-    }));
+    // Check if the token is older than 7 days
+    if (Date.now() - createdTime > SEVEN_DAYS) {
+      // If it is, delete it
+      localStorage.removeItem('woo-session');
+      localStorage.setItem('woocommerce-cart', JSON.stringify({}));
+    } else {
+      // If it's not, use the token
+      operation.setContext(() => ({
+        headers: {
+          'woocommerce-session': `Session ${token}`,
+        },
+      }));
+    }
   }
+
   return forward(operation);
 });
 
@@ -51,7 +66,10 @@ export const afterware = new ApolloLink((operation, forward) =>
         localStorage.removeItem('woo-session');
         // Update session new data if changed.
       } else if (!localStorage.getItem('woo-session')) {
-        localStorage.setItem('woo-session', session);
+        localStorage.setItem(
+          'woo-session',
+          JSON.stringify({ token: session, createdTime: Date.now() }),
+        );
       }
     }
 
