@plentymarkets/shop-core 1.3.11 → 1.4.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "shop-core",
   "configKey": "shopCore",
-  "version": "1.3.11",
+  "version": "1.4.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/composables/__tests__/useCookieBar.spec.js

@@ -3,6 +3,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mockNuxtImport } from "@nuxt/test-utils/runtime";
 import { useCookieBar } from "../useCookieBar.js";
 import { useCookieConsent } from "../useCookieConsent.js";
+import { ref } from "vue";
 const { useCookie } = vi.hoisted(() => ({
   useCookie: vi.fn().mockReturnValue({})
 }));
@@ -11,11 +12,12 @@ const { useRouter } = vi.hoisted(() => ({
     go: vi.fn()
   })
 }));
-mockNuxtImport("useRouter", () => useRouter);
 mockNuxtImport("useCookie", () => useCookie);
+mockNuxtImport("useRouter", () => useRouter);
 describe("useCookieBar", () => {
   beforeEach(() => {
     const cookieInit = {
+      configHash: "",
       barTitle: "Test",
       barDescription: "Test",
       groups: [
@@ -35,19 +37,29 @@ describe("useCookieBar", () => {
           ]
         },
         {
+          id: 1,
           name: "marketing",
+          accepted: false,
+          showMore: false,
+          description: "Marketing cookies description",
           cookies: [
             {
               name: "testCookie",
               accepted: false,
               Lifespan: "100",
-              script: []
+              script: [],
+              Provider: "TestProvider",
+              Status: "Inactive",
+              PrivacyPolicy: "/PrivacyPolicy"
             },
             {
               name: "externalScript",
               accepted: false,
               Lifespan: "100",
-              script: ["https://cdn02.plentymarkets.com/mevofvd5omld/frontend/test-cookie-external-script.js"]
+              script: ["https://cdn02.plentymarkets.com/mevofvd5omld/frontend/test-cookie-external-script.js"],
+              Provider: "TestProvider",
+              Status: "Inactive",
+              PrivacyPolicy: "/PrivacyPolicy"
             }
           ]
         }
@@ -99,21 +111,41 @@ describe("useCookieBar", () => {
     expect(document.cookie).not.toContain("testCookie=testValue");
   });
   it("should set state read from browser-cookie", () => {
-    const { initializeCookies, data } = useCookieBar();
     const browserCookies = {
-      marketing: {
-        testCookie: true
+      hash: "",
+      groups: {
+        "CookieBar.essentials.label": {
+          "CookieBar.essentials.cookies.payPal.name": true
+        },
+        marketing: {
+          testCookie: true
+        }
       }
     };
-    useCookie.mockReturnValue({ value: browserCookies });
+    useCookie.mockImplementation((name) => {
+      if (name === "consent-cookie") return ref(browserCookies);
+      return ref(null);
+    });
+    const { initializeCookies, data } = useCookieBar();
     initializeCookies();
     expect(data.value.groups[1].cookies[0].accepted).toBe(true);
   });
   it("should reload the page if a consent cookie is revoked", () => {
     const { setConsent, initializeCookies, data } = useCookieBar();
     const RouterGoSpy = vi.fn();
-    useRouter.mockReturnValue({
-      go: RouterGoSpy
+    useRouter.mockReturnValue({ go: RouterGoSpy });
+    useCookie.mockImplementation((name) => {
+      if (name === "consent-cookie") {
+        return ref({
+          hash: "abc123",
+          groups: {
+            marketing: {
+              testCookie: true
+            }
+          }
+        });
+      }
+      return ref(null);
     });
     initializeCookies();
     data.value.groups[1].cookies[0].accepted = false;
@@ -152,4 +184,27 @@ describe("useCookieBar", () => {
     expect(data.value.groups[1].cookies[0].accepted).toBe(true);
     expect(consent.value).toBe(true);
   });
+  it("should show the cookie bar if hash is missing", () => {
+    const browserCookies = { groups: {} };
+    useCookie.mockImplementation((name) => {
+      if (name === "consent-cookie") return ref(browserCookies);
+      return ref(null);
+    });
+    const { initializeCookies, visible } = useCookieBar();
+    initializeCookies();
+    expect(visible.value).toBe(true);
+  });
+  it("should show the cookie bar if hash does not match", () => {
+    const browserCookies = {
+      hash: "mismatchedHash",
+      groups: {}
+    };
+    useCookie.mockImplementation((name) => {
+      if (name === "consent-cookie") return ref(browserCookies);
+      return ref(null);
+    });
+    const { initializeCookies, visible } = useCookieBar();
+    initializeCookies();
+    expect(visible.value).toBe(true);
+  });
 });

package/dist/runtime/composables/__tests__/useRegisterCookie.spec.js

@@ -4,6 +4,9 @@ import { useRegisterCookie } from "../useRegisterCookie.js";
 vi.mock("nuxt/app", () => ({
   useRuntimeConfig: vi.fn()
 }));
+vi.mock("../../utils/runtime", () => ({
+  isClient: vi.fn(() => false)
+}));
 describe("useRegisterCookie", () => {
   it("adds a cookie to the specified group", () => {
     const { add } = useRegisterCookie();

package/dist/runtime/composables/useCookieBar.d.ts

@@ -1,5 +1,5 @@
-import type { Ref } from 'vue';
-import type { Cookie, CookieGroupFromNuxtConfig } from '../types/index.js';
+import { type Ref } from 'vue';
+import type { Cookie, CookieGroup, CookieGroupFromNuxtConfig } from '../types/index.js';
 /**
  * @description Composable for managing cookie consent bar.
  * @example
@@ -10,7 +10,8 @@ import type { Cookie, CookieGroupFromNuxtConfig } from '../types/index.js';
  * ```
  */
 export declare const useCookieBar: () => {
-    changeVisibilityState: () => void;
+    cookieGroups: import("vue").ComputedRef<CookieGroup[]>;
+    changeVisibilityState: () => boolean;
     setConsent: () => void;
     initializeCookies: () => void;
     setAllCookiesState: (accepted: boolean) => void;

package/dist/runtime/composables/useCookieBar.js

@@ -1,7 +1,8 @@
 import { useRuntimeConfig, useState, useCookie, useRouter } from "nuxt/app";
-import { toRefs } from "vue";
+import { computed, toRefs } from "vue";
 import { cookieBarHelper } from "../utils/cookieBarHelper.js";
 import { useCookieConsent } from "./useCookieConsent.js";
+import { sha256 } from "js-sha256";
 const checkIfScriptIsExternal = (scriptName) => {
   return scriptName.startsWith("http");
 };
@@ -12,66 +13,60 @@ export const useCookieBar = () => {
     visible: false,
     loading: false
   }));
-  const runtimeConfig = useRuntimeConfig();
-  const initialCookies = runtimeConfig.public.cookieGroups;
-  const changeVisibilityState = () => {
-    state.value.visible = !state.value.visible;
-  };
+  const changeVisibilityState = () => state.value.visible = !state.value.visible;
+  const cookieGroups = computed(() => state.value.data?.groups || []);
   const initializeCookies = () => {
-    const cookies = JSON.parse(JSON.stringify(initialCookies));
-    const browserCookies = useCookie("consent-cookie");
-    cookies.groups.forEach((group) => {
+    const runtimeCookies = useRuntimeConfig().public.cookieGroups;
+    const { configHash, ...configWithoutHash } = runtimeCookies;
+    runtimeCookies.configHash = sha256(JSON.stringify(configWithoutHash));
+    const browserCookies = useCookie("consent-cookie", { default: () => null });
+    const browserHash = browserCookies.value?.hash ?? "";
+    runtimeCookies.groups.forEach((group) => {
       group.cookies.forEach((cookie) => {
-        const isAccepted = group.name === ESSENTIAL_COOKIE_GROUP || !!browserCookies.value?.[group.name]?.[cookie.name] || false;
-        if (browserCookies.value?.[group.name]?.[cookie.name] !== void 0 || group.name === ESSENTIAL_COOKIE_GROUP) {
+        const isAccepted = group.name === ESSENTIAL_COOKIE_GROUP || (browserCookies.value?.groups?.[group.name]?.[cookie.name] ?? false);
+        if (browserCookies.value?.groups?.[group.name]?.[cookie.name] !== void 0 || group.name === ESSENTIAL_COOKIE_GROUP) {
           cookie.accepted = isAccepted;
-          if (isAccepted && cookie.script && cookie.script.length) {
-            fetchScripts(cookie.script);
-          }
+          if (isAccepted && cookie.script && cookie.script.length) fetchScripts(cookie.script);
         }
         const { consent } = useCookieConsent(cookie.name);
         consent.value = isAccepted;
       });
       group.accepted = group.cookies.some((cookie) => cookie.accepted);
     });
-    state.value.data = cookies;
-    if (!browserCookies.value) {
-      state.value.visible = true;
-    }
+    state.value.data = runtimeCookies;
+    state.value.visible = browserHash !== runtimeCookies.configHash;
   };
   const setConsent = () => {
     const { getMinimumLifeSpan } = cookieBarHelper();
     const router = useRouter();
-    const browserCookies = useCookie("consent-cookie");
+    const browserCookies = useCookie("consent-cookie", { default: () => null });
     let cookieRevoke = false;
-    const jsonCookie = state.value.data.groups.reduce((accumulator, group) => {
+    const jsonCookie = cookieGroups.value.reduce((accumulator, group) => {
       accumulator[group.name] = group.cookies.reduce((childAccumulator, cookie) => {
-        const currentStatus = !!browserCookies.value?.[group.name]?.[cookie.name] || false;
+        const currentStatus = !!browserCookies.value?.groups?.[group.name]?.[cookie.name] || false;
         const { consent } = useCookieConsent(cookie.name);
         childAccumulator[cookie.name] = cookie.accepted || false;
         consent.value = cookie.accepted || false;
         if (currentStatus && !consent.value) {
           cookieRevoke = true;
           removeCookies(cookie);
-        } else if (!currentStatus && consent.value && cookie.script && cookie.script.length) {
-          fetchScripts(cookie.script);
         }
+        if (!currentStatus && consent.value && cookie.script && Array.isArray(cookie.script) && cookie.script.length)
+          fetchScripts(cookie.script);
         return childAccumulator;
       }, {});
       return accumulator;
     }, {});
     const consentCookie = useCookie("consent-cookie", {
       path: "/",
-      maxAge: getMinimumLifeSpan(state.value.data.groups)
+      maxAge: getMinimumLifeSpan(cookieGroups.value)
     });
-    consentCookie.value = JSON.stringify(jsonCookie);
+    consentCookie.value = JSON.stringify({ hash: state.value.data.configHash, groups: jsonCookie });
     changeVisibilityState();
-    if (cookieRevoke) {
-      router.go(0);
-    }
+    if (cookieRevoke) router.go(0);
   };
   const setAllCookiesState = (accepted) => {
-    state.value.data.groups.forEach((group) => {
+    cookieGroups.value.forEach((group) => {
       const isAccepted = group.name === ESSENTIAL_COOKIE_GROUP || accepted;
       group.accepted = isAccepted;
       group.cookies.forEach((cookie) => cookie.accepted = isAccepted);
@@ -79,7 +74,7 @@ export const useCookieBar = () => {
     setConsent();
   };
   const accept = (name) => {
-    state.value.data.groups.forEach((group) => {
+    cookieGroups.value.forEach((group) => {
       group.cookies.forEach((cookie) => {
         if (cookie.name === name) {
           cookie.accepted = true;
@@ -104,6 +99,7 @@ export const useCookieBar = () => {
   };
   return {
     ...toRefs(state.value),
+    cookieGroups,
     changeVisibilityState,
     setConsent,
     initializeCookies,

package/dist/runtime/composables/useRegisterCookie.d.ts

@@ -4,5 +4,5 @@ import type { Cookie } from '../types/cookies.js';
  * @example const { add } = useRegisterCookie();
  */
 export declare const useRegisterCookie: () => {
-    add: (cookie: Cookie, group: string) => void;
+    add: (newCookie: Cookie, group: string) => void;
 };

package/dist/runtime/composables/useRegisterCookie.js

@@ -1,23 +1,23 @@
 import { useRuntimeConfig } from "nuxt/app";
+import { isClient } from "../utils/runtime.js";
 export const useRegisterCookie = () => {
-  const add = (cookie, group) => {
-    const runtimeConfig = useRuntimeConfig();
-    const initialCookies = runtimeConfig.public.cookieGroups;
-    if (initialCookies && initialCookies.groups) {
-      initialCookies.groups.forEach((cookieGroup) => {
+  const add = (newCookie, group) => {
+    if (isClient()) {
+      console.error(
+        "Cookies can only be registered on the server side, use plugin.server.ts to only run your plugin on the server side"
+      );
+      return;
+    }
+    const runtimeCookies = useRuntimeConfig().public.cookieGroups;
+    if (runtimeCookies?.groups) {
+      for (const cookieGroup of runtimeCookies.groups) {
         if (cookieGroup.name === group) {
-          if (!cookieGroup.cookies) {
-            cookieGroup.cookies = [];
-          }
-          if (cookieGroup.cookies.some((existingCookie) => {
-            return existingCookie.name === cookie.name;
-          })) {
-            return;
-          }
-          cookieGroup.cookies.push(cookie);
+          if (!cookieGroup.cookies) cookieGroup.cookies = [];
+          if (cookieGroup.cookies.some((runtimeCookie) => runtimeCookie.name === newCookie.name)) return;
+          cookieGroup.cookies.push(newCookie);
           return;
         }
-      });
+      }
     }
   };
   return {

package/dist/runtime/types/cookies.d.ts

@@ -17,6 +17,7 @@ export type CookieGroup = {
     cookies: Cookie[];
 };
 export type CookieGroupFromNuxtConfig = {
+    configHash: string;
     groups: CookieGroup[];
     barTitle: string;
     barDescription: string;
@@ -26,3 +27,7 @@ export type JsonCookie = {
         [key: string]: boolean;
     };
 };
+export type BrowserCookies = {
+    hash: string;
+    groups: JsonCookie;
+} | null;

package/dist/runtime/utils/runtime.d.ts

@@ -0,0 +1 @@
+export declare const isClient: () => boolean | undefined;

package/dist/runtime/utils/runtime.js

@@ -0,0 +1 @@
+export const isClient = () => import.meta.client;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plentymarkets/shop-core",
-  "version": "1.3.11",
+  "version": "1.4.0",
   "description": "Core module for PlentyONE Shop",
   "repository": {
     "type": "git",
@@ -42,8 +42,9 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@plentymarkets/shop-api": "^0.104.0",
+    "@plentymarkets/shop-api": "^0.105.0",
     "@vue-storefront/sdk": "^3.4.1",
+    "js-sha256": "^0.11.0",
     "mitt": "^3.0.1",
     "resolve": "^1.22.10"
   },