From 60098e03d794237b63cd2d1effd2eb4eb2c37156 Mon Sep 17 00:00:00 2001
From: Ivan Kalachikov <ivan.kalachikov@gmail.com>
Date: Fri, 30 Aug 2024 15:01:59 +0800
Subject: [PATCH] chore: replace updateQueries with update (#1258)

---
 client-app/core/api/graphql/config/cache.ts   |  7 +-
 client-app/core/api/graphql/consts.ts         |  1 +
 .../mutations/clearAllPushMessages/index.ts   | 39 ++++++-----
 .../markAllPushMessagesRead/index.ts          | 52 ++++++++------
 .../markAllPushMessagesUnread/index.ts        | 69 +++++++++++++------
 .../mutations/markPushMessageRead/index.ts    | 65 +++++++++++------
 .../mutations/markPushMessageUnread/index.ts  | 65 +++++++++++------
 .../queries/getPushMessages/index.ts          | 23 ++++++-
 .../api/graphql/push-messages/typePolices.ts  | 13 ++++
 client-app/core/constants/notifications.ts    |  6 ++
 client-app/router/routes/account.ts           |  5 +-
 .../account/components/account-navigation.vue |  5 +-
 .../header/_internal/bottom-header.vue        | 10 +--
 .../header/_internal/mobile-header.vue        | 10 +--
 .../push-messages/components/push-message.vue |  2 +-
 .../composables/usePushMessage.ts             |  6 +-
 .../composables/usePushMessages.ts            | 18 +++--
 .../useWebPushNotifications/index.ts          |  8 ++-
 18 files changed, 262 insertions(+), 142 deletions(-)
 create mode 100644 client-app/core/api/graphql/push-messages/typePolices.ts

diff --git a/client-app/core/api/graphql/config/cache.ts b/client-app/core/api/graphql/config/cache.ts
index 99121ca86..1da33e1d3 100644
--- a/client-app/core/api/graphql/config/cache.ts
+++ b/client-app/core/api/graphql/config/cache.ts
@@ -1,4 +1,5 @@
 import { InMemoryCache } from "@apollo/client/core";
+import { pushMessagesTypePolices } from "../push-messages/typePolices";
 
 export const cache = new InMemoryCache({
   typePolicies: {
@@ -70,11 +71,7 @@ export const cache = new InMemoryCache({
     },
     Query: {
       fields: {
-        pushMessages: {
-          merge(existing, incoming) {
-            return { ...existing, ...incoming };
-          },
-        },
+        ...pushMessagesTypePolices,
       },
     },
   },
diff --git a/client-app/core/api/graphql/consts.ts b/client-app/core/api/graphql/consts.ts
index 1f3599d92..8733f0e65 100644
--- a/client-app/core/api/graphql/consts.ts
+++ b/client-app/core/api/graphql/consts.ts
@@ -1,3 +1,4 @@
 export const HTTP_ENDPOINT_URL = "/graphql";
 export const WEBSOCKETS_ENDPOINT_URL = `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}${HTTP_ENDPOINT_URL}`;
 export const WEBSOCKETS_ENDPOINT_TIMEOUT = 55 * 1000; // 55 seconds
+export const ROOT_QUERY_CACHE_ID = "ROOT_QUERY";
diff --git a/client-app/core/api/graphql/push-messages/mutations/clearAllPushMessages/index.ts b/client-app/core/api/graphql/push-messages/mutations/clearAllPushMessages/index.ts
index a03558932..a9181df25 100644
--- a/client-app/core/api/graphql/push-messages/mutations/clearAllPushMessages/index.ts
+++ b/client-app/core/api/graphql/push-messages/mutations/clearAllPushMessages/index.ts
@@ -1,7 +1,9 @@
 import { useApolloClient } from "@vue/apollo-composable";
 import { useMutation } from "@/core/api/graphql/composables/useMutation";
+import { ROOT_QUERY_CACHE_ID } from "@/core/api/graphql/consts";
+import { PUSH_MESSAGES_CACHE_ID } from "@/core/constants/notifications";
 import { ClearAllPushMessagesDocument, OperationNames } from "../../types";
-import type { GetPushMessagesQuery } from "../../types";
+import type { PushMessageConnection } from "../../types";
 
 export function useClearAllPushMessages() {
   const { client } = useApolloClient();
@@ -9,24 +11,23 @@ export function useClearAllPushMessages() {
     optimisticResponse: {
       clearAllPushMessages: true,
     },
-    updateQueries: {
-      [OperationNames.Query.GetPushMessages]: (previousQueryResult, { mutationResult }) => {
-        const pushMessagesQueryResult = previousQueryResult as GetPushMessagesQuery;
-        if (mutationResult.data?.clearAllPushMessages) {
-          return {
-            ...pushMessagesQueryResult,
-            pushMessages: {
-              items: [],
-              totalCount: 0,
-            },
-            unreadCount: {
-              totalCount: 0,
-            },
-          } satisfies GetPushMessagesQuery;
-        } else {
-          return { ...pushMessagesQueryResult };
-        }
-      },
+    update(cache, updateResult) {
+      if (!updateResult.data?.clearAllPushMessages) {
+        return;
+      }
+      const cacheData = cache.extract() as Record<string, unknown>;
+      const pushMessagesIds = Object.keys(cacheData[ROOT_QUERY_CACHE_ID] ?? {}).filter(([key]) =>
+        key.startsWith(PUSH_MESSAGES_CACHE_ID),
+      );
+      pushMessagesIds?.forEach((id) => {
+        cache.modify<Record<string, PushMessageConnection[keyof PushMessageConnection]>>({
+          id: id,
+          fields: {
+            items: () => [],
+            totalCount: () => 0,
+          },
+        });
+      });
     },
     // Just in case we did something wrong in cache
     refetchQueries: [OperationNames.Query.GetPushMessages],
diff --git a/client-app/core/api/graphql/push-messages/mutations/markAllPushMessagesRead/index.ts b/client-app/core/api/graphql/push-messages/mutations/markAllPushMessagesRead/index.ts
index 49de673b2..586560cbb 100644
--- a/client-app/core/api/graphql/push-messages/mutations/markAllPushMessagesRead/index.ts
+++ b/client-app/core/api/graphql/push-messages/mutations/markAllPushMessagesRead/index.ts
@@ -1,33 +1,45 @@
 import { useMutation } from "@/core/api/graphql/composables/useMutation";
+import {
+  PUSH_MESSAGE_CACHE_ID,
+  UNREAD_COUNT_CACHE_ID,
+  UNREAD_COUNT_WITH_HIDDEN_CACHE_ID,
+} from "@/core/constants/notifications";
 import { MarkAllPushMessagesReadDocument, OperationNames } from "../../types";
-import type { GetPushMessagesQuery } from "../../types";
+import type { PushMessageConnection } from "../../types";
 
 export function useMarkAllPushMessagesRead() {
   return useMutation(MarkAllPushMessagesReadDocument, {
     optimisticResponse: {
       markAllPushMessagesRead: true,
     },
-    updateQueries: {
-      [OperationNames.Query.GetPushMessages]: (previousQueryResult, { mutationResult }) => {
-        const pushMessagesQueryResult = previousQueryResult as GetPushMessagesQuery;
-        if (mutationResult.data?.markAllPushMessagesRead) {
-          return {
-            ...pushMessagesQueryResult,
-            pushMessages: {
-              items: pushMessagesQueryResult.pushMessages?.items?.map((pushMessage) => ({
-                ...pushMessage,
-                isRead: true,
-              })),
-              totalCount: pushMessagesQueryResult.pushMessages?.items?.length ?? 0,
-            },
-            unreadCount: {
-              totalCount: 0,
+    update(cache, result) {
+      if (!result.data?.markAllPushMessagesRead) {
+        return;
+      }
+      const cacheData = cache.extract() as Record<string, unknown>;
+
+      // update all push messages to be read
+      Object.keys(cacheData).forEach((id) => {
+        if (id.startsWith(PUSH_MESSAGE_CACHE_ID)) {
+          cache.modify({
+            id: id,
+            fields: {
+              isRead: () => true,
             },
-          } satisfies GetPushMessagesQuery;
-        } else {
-          return { ...pushMessagesQueryResult };
+          });
         }
-      },
+      });
+
+      cache.modify<Record<string, Pick<PushMessageConnection, "totalCount">>>({
+        fields: {
+          [UNREAD_COUNT_CACHE_ID]: () => ({
+            totalCount: 0,
+          }),
+          [UNREAD_COUNT_WITH_HIDDEN_CACHE_ID]: () => ({
+            totalCount: 0,
+          }),
+        },
+      });
     },
     // Just in case we did something wrong in cache
     refetchQueries: [OperationNames.Query.GetPushMessages],
diff --git a/client-app/core/api/graphql/push-messages/mutations/markAllPushMessagesUnread/index.ts b/client-app/core/api/graphql/push-messages/mutations/markAllPushMessagesUnread/index.ts
index 66b7d30ae..5b5260a71 100644
--- a/client-app/core/api/graphql/push-messages/mutations/markAllPushMessagesUnread/index.ts
+++ b/client-app/core/api/graphql/push-messages/mutations/markAllPushMessagesUnread/index.ts
@@ -1,34 +1,61 @@
 import { useMutation } from "@/core/api/graphql/composables/useMutation";
+import { ROOT_QUERY_CACHE_ID } from "@/core/api/graphql/consts";
+import {
+  PUSH_MESSAGE_CACHE_ID,
+  PUSH_MESSAGES_CACHE_ID,
+  UNREAD_COUNT_CACHE_ID,
+  UNREAD_COUNT_WITH_HIDDEN_CACHE_ID,
+} from "@/core/constants/notifications";
 import { MarkAllPushMessagesUnreadDocument, OperationNames } from "../../types";
-import type { GetPushMessagesQuery } from "../../types";
+import type { PushMessageConnection } from "../../types";
 
 export function useMarkAllPushMessagesUnread() {
   return useMutation(MarkAllPushMessagesUnreadDocument, {
     optimisticResponse: {
       markAllPushMessagesUnread: true,
     },
-    updateQueries: {
-      [OperationNames.Query.GetPushMessages]: (previousQueryResult, { mutationResult, queryVariables }) => {
-        const pushMessagesQueryResult = previousQueryResult as GetPushMessagesQuery;
-        const { withHidden } = queryVariables;
-        if (mutationResult.data?.markAllPushMessagesUnread) {
-          return {
-            ...pushMessagesQueryResult,
-            pushMessages: {
-              items: pushMessagesQueryResult.pushMessages?.items?.map((pushMessage) => ({
-                ...pushMessage,
-                isRead: false,
-              })),
-              totalCount: pushMessagesQueryResult.pushMessages?.items?.length ?? 0,
-            },
-            unreadCount: {
-              totalCount: !withHidden ? pushMessagesQueryResult.pushMessages?.items?.length : 0,
+    update(cache, result) {
+      if (!result.data?.markAllPushMessagesUnread) {
+        return;
+      }
+      const cacheData = cache.extract() as Record<string, unknown>;
+
+      // update all push messages to be unread
+      Object.keys(cacheData).forEach((id) => {
+        if (id.startsWith(PUSH_MESSAGE_CACHE_ID)) {
+          cache.modify({
+            id: id,
+            fields: {
+              isRead: () => false,
             },
-          } satisfies GetPushMessagesQuery;
-        } else {
-          return { ...pushMessagesQueryResult };
+          });
         }
-      },
+      });
+
+      // read current messages count and messages with hidden count from cache
+      const rootQueryEntries = Object.entries((cacheData[ROOT_QUERY_CACHE_ID] ?? {}) as Record<string, unknown>);
+
+      const messages = rootQueryEntries.find(
+        ([key]) =>
+          key.startsWith(PUSH_MESSAGES_CACHE_ID) && key.includes("after") && !key.includes('"withHidden":true'),
+      ) as [string, PushMessageConnection] | undefined;
+      const messagesWithHidden = rootQueryEntries.find(
+        ([key]) => key.startsWith(PUSH_MESSAGES_CACHE_ID) && key.includes("after") && key.includes('"withHidden":true'),
+      ) as [string, PushMessageConnection] | undefined;
+
+      const messagesCount = messages?.[1]?.totalCount ?? 0;
+      const messagesWithHiddenCount = messagesWithHidden?.[1]?.totalCount ?? 0;
+
+      cache.modify<Record<string, Pick<PushMessageConnection, "totalCount">>>({
+        fields: {
+          [UNREAD_COUNT_CACHE_ID]: () => ({
+            totalCount: messagesCount,
+          }),
+          [UNREAD_COUNT_WITH_HIDDEN_CACHE_ID]: () => ({
+            totalCount: messagesWithHiddenCount,
+          }),
+        },
+      });
     },
     // Just in case we did something wrong in cache
     refetchQueries: [OperationNames.Query.GetPushMessages],
diff --git a/client-app/core/api/graphql/push-messages/mutations/markPushMessageRead/index.ts b/client-app/core/api/graphql/push-messages/mutations/markPushMessageRead/index.ts
index 68f4e84da..bb7c71546 100644
--- a/client-app/core/api/graphql/push-messages/mutations/markPushMessageRead/index.ts
+++ b/client-app/core/api/graphql/push-messages/mutations/markPushMessageRead/index.ts
@@ -1,35 +1,56 @@
 import { useMutation } from "@/core/api/graphql/composables/useMutation";
+import {
+  PUSH_MESSAGE_CACHE_ID,
+  UNREAD_COUNT_CACHE_ID,
+  UNREAD_COUNT_WITH_HIDDEN_CACHE_ID,
+} from "@/core/constants/notifications";
 import { MarkPushMessageReadDocument, OperationNames, PushMessageFragmentDoc } from "../../types";
-import type { GetPushMessagesQuery } from "../../types";
+import type { PushMessageConnection, PushMessageType } from "../../types";
 
-export function useMarkPushMessageRead(optimistic = true) {
+type UnreadCountType = Pick<PushMessageConnection, "totalCount">;
+
+export function useMarkPushMessageRead() {
   return useMutation(MarkPushMessageReadDocument, {
     optimisticResponse: {
       markPushMessageRead: true,
     },
     update(cache, result, { variables }) {
-      if (result.data?.markPushMessageRead) {
-        cache.updateFragment(
-          {
-            id: `PushMessageType:${variables?.command?.messageId}`,
-            fragment: PushMessageFragmentDoc,
-          },
-          (pushMessage) => ({ ...pushMessage!, isRead: true }),
-        );
+      if (!result.data?.markPushMessageRead) {
+        return;
       }
-    },
-    updateQueries: (!optimistic && {}) || {
-      [OperationNames.Query.GetPushMessages]: (previousQueryResult) => {
-        const pushMessagesQueryResult = previousQueryResult as GetPushMessagesQuery;
-        return {
-          ...pushMessagesQueryResult,
-          unreadCount: {
-            totalCount: pushMessagesQueryResult.unreadCount?.totalCount
-              ? pushMessagesQueryResult.unreadCount.totalCount - 1
-              : 0,
+
+      let message: PushMessageType | null = null;
+
+      cache.updateFragment(
+        {
+          id: `${PUSH_MESSAGE_CACHE_ID}${variables?.command?.messageId}`,
+          fragment: PushMessageFragmentDoc,
+        },
+        (pushMessage) => {
+          message = pushMessage;
+          return pushMessage ? { ...pushMessage, isRead: true } : null;
+        },
+      );
+
+      cache.modify({
+        fields: {
+          [UNREAD_COUNT_CACHE_ID]: (value) => {
+            const unreadCount = value as UnreadCountType;
+            if (message?.isHidden) {
+              return unreadCount;
+            }
+            return {
+              totalCount: unreadCount.totalCount ? unreadCount.totalCount - 1 : 0,
+            };
+          },
+          [UNREAD_COUNT_WITH_HIDDEN_CACHE_ID]: (value) => {
+            const unreadCountWithHidden = value as UnreadCountType;
+            return {
+              totalCount: unreadCountWithHidden.totalCount ? unreadCountWithHidden.totalCount - 1 : 0,
+            };
           },
-        } satisfies GetPushMessagesQuery;
-      },
+        },
+      });
     },
     // Just in case we did something wrong in cache
     refetchQueries: [OperationNames.Query.GetPushMessages],
diff --git a/client-app/core/api/graphql/push-messages/mutations/markPushMessageUnread/index.ts b/client-app/core/api/graphql/push-messages/mutations/markPushMessageUnread/index.ts
index df6d14bf8..2493e1f03 100644
--- a/client-app/core/api/graphql/push-messages/mutations/markPushMessageUnread/index.ts
+++ b/client-app/core/api/graphql/push-messages/mutations/markPushMessageUnread/index.ts
@@ -1,35 +1,56 @@
 import { useMutation } from "@/core/api/graphql/composables/useMutation";
+import {
+  PUSH_MESSAGE_CACHE_ID,
+  UNREAD_COUNT_CACHE_ID,
+  UNREAD_COUNT_WITH_HIDDEN_CACHE_ID,
+} from "@/core/constants/notifications";
 import { MarkPushMessageUnreadDocument, OperationNames, PushMessageFragmentDoc } from "../../types";
-import type { GetPushMessagesQuery } from "../../types";
+import type { PushMessageConnection, PushMessageType } from "../../types";
 
-export function useMarkPushMessageUnread(optimistic = true) {
+type UnreadCountType = Pick<PushMessageConnection, "totalCount">;
+
+export function useMarkPushMessageUnread() {
   return useMutation(MarkPushMessageUnreadDocument, {
     optimisticResponse: {
       markPushMessageUnread: true,
     },
     update(cache, result, { variables }) {
-      if (result.data?.markPushMessageUnread) {
-        cache.updateFragment(
-          {
-            id: `PushMessageType:${variables?.command?.messageId}`,
-            fragment: PushMessageFragmentDoc,
-          },
-          (pushMessage) => ({ ...pushMessage!, isRead: false }),
-        );
+      if (!result.data?.markPushMessageUnread) {
+        return;
       }
-    },
-    updateQueries: (!optimistic && {}) || {
-      [OperationNames.Query.GetPushMessages]: (previousQueryResult) => {
-        const pushMessagesQueryResult = previousQueryResult as GetPushMessagesQuery;
-        return {
-          ...pushMessagesQueryResult,
-          unreadCount: {
-            totalCount: pushMessagesQueryResult.unreadCount?.totalCount
-              ? pushMessagesQueryResult.unreadCount.totalCount + 1
-              : 1,
+
+      let message: PushMessageType | null = null;
+
+      cache.updateFragment(
+        {
+          id: `${PUSH_MESSAGE_CACHE_ID}${variables?.command?.messageId}`,
+          fragment: PushMessageFragmentDoc,
+        },
+        (pushMessage) => {
+          message = pushMessage;
+          return pushMessage ? { ...pushMessage, isRead: false } : null;
+        },
+      );
+
+      cache.modify({
+        fields: {
+          [UNREAD_COUNT_CACHE_ID]: (value) => {
+            const unreadCount = value as UnreadCountType;
+            if (message?.isHidden) {
+              return unreadCount;
+            }
+            return {
+              totalCount: (unreadCount.totalCount ?? 0) + 1,
+            };
+          },
+          [UNREAD_COUNT_WITH_HIDDEN_CACHE_ID]: (value) => {
+            const unreadCountWithHidden = value as UnreadCountType;
+            return {
+              totalCount: (unreadCountWithHidden.totalCount ?? 0) + 1,
+            };
           },
-        } satisfies GetPushMessagesQuery;
-      },
+        },
+      });
     },
     // Just in case we did something wrong in cache
     refetchQueries: [OperationNames.Query.GetPushMessages],
diff --git a/client-app/core/api/graphql/push-messages/queries/getPushMessages/index.ts b/client-app/core/api/graphql/push-messages/queries/getPushMessages/index.ts
index bfbc69f0a..142b043fc 100644
--- a/client-app/core/api/graphql/push-messages/queries/getPushMessages/index.ts
+++ b/client-app/core/api/graphql/push-messages/queries/getPushMessages/index.ts
@@ -1,18 +1,30 @@
 import { useQuery } from "@vue/apollo-composable";
+import { toValue } from "vue";
 import { GetPushMessagesDocument, OnPushMessageCreatedDocument } from "../../types";
 import type { GetPushMessagesQueryVariables } from "../../types";
 import type { MaybeRefOrGetter } from "vue";
 
+let subscribed = false;
+let subscribedWithHidden = false;
+
 export function useGetPushMessages(payload: MaybeRefOrGetter<GetPushMessagesQueryVariables>) {
   const result = useQuery(GetPushMessagesDocument, payload, { fetchPolicy: "cache-and-network" });
+  const payloadValue = toValue(payload);
+  if ((!payloadValue.withHidden && subscribed) || (payloadValue.withHidden && subscribedWithHidden)) {
+    return result;
+  }
   result.subscribeToMore({
     document: OnPushMessageCreatedDocument,
     updateQuery: (previousQueryResult, { subscriptionData }) => {
       if (!subscriptionData.data) {
         return previousQueryResult;
       }
+
       const newPushMessage = subscriptionData.data.pushMessageCreated;
       const items = previousQueryResult.pushMessages?.items ?? [];
+      const unreadCount = previousQueryResult.unreadCount?.totalCount;
+      const unreadCountWithHidden = previousQueryResult.unreadCountWithHidden?.totalCount;
+
       return {
         ...previousQueryResult,
         pushMessages: {
@@ -20,10 +32,19 @@ export function useGetPushMessages(payload: MaybeRefOrGetter<GetPushMessagesQuer
           totalCount: items.length + 1,
         },
         unreadCount: {
-          totalCount: previousQueryResult.unreadCount?.totalCount ? previousQueryResult.unreadCount.totalCount + 1 : 1,
+          totalCount: !payloadValue.withHidden ? (unreadCount ?? 0) + 1 : unreadCount,
+        },
+        unreadCountWithHidden: {
+          totalCount: !payloadValue.withHidden ? (unreadCountWithHidden ?? 0) + 1 : unreadCountWithHidden,
         },
       };
     },
   });
+  if (!payloadValue.withHidden) {
+    subscribed = true;
+  }
+  if (payloadValue.withHidden) {
+    subscribedWithHidden = true;
+  }
   return result;
 }
diff --git a/client-app/core/api/graphql/push-messages/typePolices.ts b/client-app/core/api/graphql/push-messages/typePolices.ts
new file mode 100644
index 000000000..1a1f2981b
--- /dev/null
+++ b/client-app/core/api/graphql/push-messages/typePolices.ts
@@ -0,0 +1,13 @@
+import type { FieldPolicy } from "@apollo/client/core";
+
+export const pushMessagesTypePolices = {
+  pushMessages: {
+    keyArgs: (args) =>
+      args?.after
+        ? ["withHidden", "unreadOnly", "after", "first", "cultureName"]
+        : ["withHidden", "unreadOnly", "after", "first"],
+    merge(existing, incoming) {
+      return { ...existing, ...incoming };
+    },
+  } as FieldPolicy,
+};
diff --git a/client-app/core/constants/notifications.ts b/client-app/core/constants/notifications.ts
index b55261058..42b010424 100644
--- a/client-app/core/constants/notifications.ts
+++ b/client-app/core/constants/notifications.ts
@@ -1 +1,7 @@
 export const DEFAULT_NOTIFICATION_DURATION = 15000;
+
+export const UNREAD_COUNT_CACHE_ID = 'pushMessages:{"unreadOnly":true}';
+export const UNREAD_COUNT_WITH_HIDDEN_CACHE_ID = 'pushMessages:{"withHidden":true,"unreadOnly":true}';
+
+export const PUSH_MESSAGE_CACHE_ID = "PushMessageType:";
+export const PUSH_MESSAGES_CACHE_ID = "pushMessages:";
diff --git a/client-app/router/routes/account.ts b/client-app/router/routes/account.ts
index 348cf05ec..0b7d990bf 100644
--- a/client-app/router/routes/account.ts
+++ b/client-app/router/routes/account.ts
@@ -1,6 +1,6 @@
 import { useThemeContext } from "@/core/composables";
 import { useUser } from "@/shared/account";
-import { usePushMessages } from "@/shared/push-messages/composables/usePushMessages";
+import { isActive as isPushMessagesActive } from "@/shared/push-messages/composables/usePushMessages";
 import type { RouteRecordRaw } from "vue-router";
 
 const Dashboard = () => import("@/pages/account/dashboard.vue");
@@ -119,8 +119,7 @@ export const accountRoutes: RouteRecordRaw[] = [
     name: "Notifications",
     component: Notifications,
     beforeEnter(_to, _from, next) {
-      const { isActive } = usePushMessages();
-      if (themeContext.value?.settings?.push_messages_enabled && isActive) {
+      if (isPushMessagesActive.value) {
         next();
       } else {
         next({ name: "Dashboard" });
diff --git a/client-app/shared/account/components/account-navigation.vue b/client-app/shared/account/components/account-navigation.vue
index 27c962c41..ddb48a795 100644
--- a/client-app/shared/account/components/account-navigation.vue
+++ b/client-app/shared/account/components/account-navigation.vue
@@ -95,7 +95,7 @@
       />
 
       <AccountNavigationLink
-        v-if="$cfg.push_messages_enabled && isPushMessagesActive"
+        v-if="isPushMessagesActive"
         :to="{ name: 'Notifications' }"
         :text="$t('shared.account.navigation.links.notifications')"
         class="notifications-icon"
@@ -125,7 +125,7 @@ import { useRoute } from "vue-router";
 import { useUser } from "@/shared/account/composables/useUser";
 import { useUserOrders } from "@/shared/account/composables/useUserOrders";
 import { useUserOrdersFilter } from "@/shared/account/composables/useUserOrdersFilter";
-import { usePushMessages } from "@/shared/push-messages/composables/usePushMessages";
+import { isActive as isPushMessagesActive } from "@/shared/push-messages/composables/usePushMessages";
 import { useWishlists } from "@/shared/wishlists";
 import AccountNavigationLink from "./account-navigation-link.vue";
 
@@ -134,7 +134,6 @@ const { isCorporateMember } = useUser();
 const { lists, fetchWishlists } = useWishlists();
 const { facets } = useUserOrders({});
 const { filterData, applyFilters } = useUserOrdersFilter();
-const { isActive: isPushMessagesActive } = usePushMessages();
 
 const isListDetails = eagerComputed(() => route.name === "ListDetails");
 const isOrdersPage = eagerComputed(() => route.name === "Orders");
diff --git a/client-app/shared/layout/components/header/_internal/bottom-header.vue b/client-app/shared/layout/components/header/_internal/bottom-header.vue
index c273ed860..7b46ac3fa 100644
--- a/client-app/shared/layout/components/header/_internal/bottom-header.vue
+++ b/client-app/shared/layout/components/header/_internal/bottom-header.vue
@@ -44,10 +44,7 @@
           </BottomHeaderLink>
 
           <template v-else-if="item.id === 'push-messages'">
-            <PushMessages
-              v-if="$cfg.push_messages_enabled && isAuthenticated && isPushMessagesActive"
-              :offset-options="20"
-            >
+            <PushMessages v-if="isPushMessagesActive" :offset-options="20">
               <template #trigger="{ totalCount, unreadCount }">
                 <BottomHeaderLink :link="item" :count="unreadCount">
                   <template #icon>
@@ -99,19 +96,18 @@ import { useUser } from "@/shared/account/composables/useUser";
 import { useShortCart } from "@/shared/cart";
 import { useCompareProducts } from "@/shared/compare";
 import { SearchBar } from "@/shared/layout";
-import { usePushMessages } from "@/shared/push-messages/composables/usePushMessages";
+import { isActive as isPushMessagesActive } from "@/shared/push-messages/composables/usePushMessages";
 import BottomHeaderLink from "./bottom-header-link.vue";
 import CatalogMenu from "./catalog-menu.vue";
 import type { StyleValue } from "vue";
 import PushMessages from "@/shared/push-messages/components/push-messages.vue";
 
 const router = useRouter();
-const { isAuthenticated, organization } = useUser();
+const { organization } = useUser();
 const { cart } = useShortCart();
 const { logoUrl } = useWhiteLabeling();
 const { catalogMenuItems, desktopMainMenuItems } = useNavigations();
 const { productsIds } = useCompareProducts();
-const { isActive: isPushMessagesActive } = usePushMessages();
 
 const bottomHeader = ref<HTMLElement | null>(null);
 const catalogMenuElement = shallowRef<HTMLElement | null>(null);
diff --git a/client-app/shared/layout/components/header/_internal/mobile-header.vue b/client-app/shared/layout/components/header/_internal/mobile-header.vue
index dc8be114d..06cfb2b54 100644
--- a/client-app/shared/layout/components/header/_internal/mobile-header.vue
+++ b/client-app/shared/layout/components/header/_internal/mobile-header.vue
@@ -33,10 +33,7 @@
             <VcIcon class="text-primary" name="search" :size="28" />
           </button>
 
-          <PushMessages
-            v-if="$cfg.push_messages_enabled && isAuthenticated && isPushMessagesActive"
-            class="px-1 py-2 xs:px-2"
-          >
+          <PushMessages v-if="isPushMessagesActive" class="px-1 py-2 xs:px-2">
             <template #trigger="{ totalCount, unreadCount }">
               <div class="relative">
                 <transition :name="unreadCount ? 'shake' : ''" mode="out-in">
@@ -131,10 +128,9 @@ import { syncRefs, useElementSize, useScrollLock, whenever } from "@vueuse/core"
 import { computed, ref, watchEffect } from "vue";
 import { useRouteQueryParam, useWhiteLabeling } from "@/core/composables";
 import { QueryParamName } from "@/core/enums";
-import { useUser } from "@/shared/account/composables/useUser";
 import { useShortCart } from "@/shared/cart";
 import { useNestedMobileHeader, useSearchBar } from "@/shared/layout";
-import { usePushMessages } from "@/shared/push-messages/composables/usePushMessages";
+import { isActive as isPushMessagesActive } from "@/shared/push-messages/composables/usePushMessages";
 import MobileMenu from "./mobile-menu.vue";
 import type { StyleValue } from "vue";
 import type { RouteLocationRaw } from "vue-router";
@@ -145,13 +141,11 @@ const searchPhraseInUrl = useRouteQueryParam<string>(QueryParamName.SearchPhrase
 const mobileMenuVisible = ref(false);
 const headerElement = ref(null);
 
-const { isAuthenticated } = useUser();
 const { customSlots, isAnimated } = useNestedMobileHeader();
 const { searchBarVisible, toggleSearchBar, hideSearchBar } = useSearchBar();
 const { height } = useElementSize(headerElement);
 const { cart } = useShortCart();
 const { logoUrl } = useWhiteLabeling();
-const { isActive: isPushMessagesActive } = usePushMessages();
 
 const placeholderStyle = computed<StyleValue | undefined>(() =>
   height.value ? { height: height.value + "px" } : undefined,
diff --git a/client-app/shared/push-messages/components/push-message.vue b/client-app/shared/push-messages/components/push-message.vue
index ba0345b14..38c393103 100644
--- a/client-app/shared/push-messages/components/push-message.vue
+++ b/client-app/shared/push-messages/components/push-message.vue
@@ -15,5 +15,5 @@ const props = defineProps<IProps>();
 
 const { pushMessage: _pushMessage } = toRefs(props);
 
-const { toggleRead } = usePushMessage(_pushMessage, !_pushMessage.value.isHidden);
+const { toggleRead } = usePushMessage(_pushMessage);
 </script>
diff --git a/client-app/shared/push-messages/composables/usePushMessage.ts b/client-app/shared/push-messages/composables/usePushMessage.ts
index eaf1ec5b3..f5071a2e4 100644
--- a/client-app/shared/push-messages/composables/usePushMessage.ts
+++ b/client-app/shared/push-messages/composables/usePushMessage.ts
@@ -2,13 +2,13 @@ import { useMarkPushMessageRead } from "@/core/api/graphql/push-messages/mutatio
 import { useMarkPushMessageUnread } from "@/core/api/graphql/push-messages/mutations/markPushMessageUnread";
 import type { Ref } from "vue";
 
-export function usePushMessage(pushMessage: Ref<VcPushMessageType>, optimistic = true) {
-  const { mutate: _markRead } = useMarkPushMessageRead(optimistic);
+export function usePushMessage(pushMessage: Ref<VcPushMessageType>) {
+  const { mutate: _markRead } = useMarkPushMessageRead();
   async function markRead() {
     await _markRead({ command: { messageId: pushMessage.value.id } });
   }
 
-  const { mutate: _markUnread } = useMarkPushMessageUnread(optimistic);
+  const { mutate: _markUnread } = useMarkPushMessageUnread();
   async function markUnread() {
     await _markUnread({ command: { messageId: pushMessage.value.id } });
   }
diff --git a/client-app/shared/push-messages/composables/usePushMessages.ts b/client-app/shared/push-messages/composables/usePushMessages.ts
index 34bce73d5..e5210c3d1 100644
--- a/client-app/shared/push-messages/composables/usePushMessages.ts
+++ b/client-app/shared/push-messages/composables/usePushMessages.ts
@@ -7,6 +7,7 @@ import { useMarkAllPushMessagesRead } from "@/core/api/graphql/push-messages/mut
 import { useMarkAllPushMessagesUnread } from "@/core/api/graphql/push-messages/mutations/markAllPushMessagesUnread";
 import { useGetPushMessages } from "@/core/api/graphql/push-messages/queries/getPushMessages";
 import { useModuleSettings } from "@/core/composables/useModuleSettings";
+import { useThemeContext } from "@/core/composables/useThemeContext";
 import { DEFAULT_ORDERS_PER_PAGE } from "@/core/constants";
 import { MODULE_ID_PUSH_MESSAGES } from "@/core/constants/modules";
 import { useUser } from "@/shared/account/composables";
@@ -21,13 +22,17 @@ export interface IUsePushMessagesOptions {
 
 provideApolloClient(apolloClient);
 
-export function usePushMessages(options?: IUsePushMessagesOptions) {
-  const { isAuthenticated } = useUser();
-  const { hasModuleSettings } = useModuleSettings(MODULE_ID_PUSH_MESSAGES);
+const { isAuthenticated } = useUser();
+const { hasModuleSettings } = useModuleSettings(MODULE_ID_PUSH_MESSAGES);
+const { themeContext } = useThemeContext();
 
-  if (!hasModuleSettings.value || !isAuthenticated.value) {
+const isActive = computed(
+  () => themeContext.value?.settings?.push_messages_enabled && hasModuleSettings.value && isAuthenticated.value,
+);
+
+function usePushMessages(options?: IUsePushMessagesOptions) {
+  if (!isActive.value) {
     return {
-      isActive: false,
       totalCount: computed(() => 0),
       unreadCount: computed(() => 0),
       unreadCountWithHidden: computed(() => 0),
@@ -68,7 +73,6 @@ export function usePushMessages(options?: IUsePushMessagesOptions) {
   const { mutate: clearAll } = useClearAllPushMessages();
 
   return {
-    isActive: true,
     totalCount,
     unreadCount,
     unreadCountWithHidden,
@@ -81,3 +85,5 @@ export function usePushMessages(options?: IUsePushMessagesOptions) {
     page,
   };
 }
+
+export { isActive, usePushMessages };
diff --git a/client-app/shared/push-messages/composables/useWebPushNotifications/index.ts b/client-app/shared/push-messages/composables/useWebPushNotifications/index.ts
index d7e7ebbc1..a17d168a1 100644
--- a/client-app/shared/push-messages/composables/useWebPushNotifications/index.ts
+++ b/client-app/shared/push-messages/composables/useWebPushNotifications/index.ts
@@ -1,4 +1,5 @@
 import { useModuleSettings } from "@/core/composables/useModuleSettings";
+import { useThemeContext } from "@/core/composables/useThemeContext";
 import { MODULE_ID_PUSH_MESSAGES } from "@/core/constants/modules";
 import { useUser } from "@/shared/account/composables/useUser";
 
@@ -8,8 +9,13 @@ export function useWebPushNotifications() {
   async function init() {
     const { hasModuleSettings } = useModuleSettings(MODULE_ID_PUSH_MESSAGES);
     const { isAuthenticated } = useUser();
+    const { themeContext } = useThemeContext();
 
-    if (isAuthenticated.value === false || !hasModuleSettings.value) {
+    if (
+      !themeContext.value?.settings?.push_messages_enabled ||
+      isAuthenticated.value === false ||
+      !hasModuleSettings.value
+    ) {
       const serviceWorkerRegistration = await navigator.serviceWorker.getRegistration(REGISTRATION_SCOPE);
       if (serviceWorkerRegistration) {
         void serviceWorkerRegistration.unregister();