feat: Implement push subscription event handling in AddToCartButton and ProductFilters components; enhance article and category unsubscribe functionality with optional identifiers

src/components/AddToCartButton.js

@@ -15,6 +15,8 @@ import NotificationsActiveIcon from "@mui/icons-material/NotificationsActive";
 import CircularProgress from "@mui/material/CircularProgress";
 import { withI18n } from "../i18n/withTranslation.js";
 import {
+  PUSH_SUBSCRIPTIONS_CHANGED_EVENT,
+  emitPushSubscriptionsChanged,
   isPushApiSupported,
   fetchPushConfiguration,
   registerPushServiceWorker,
@@ -109,9 +111,10 @@ class AddToCartButton extends Component {
           this.setState({ pushSubscribed: false, pushBusy: false });
           return;
         }
-        const res = await articlePushUnsubscribe(subscription.endpoint);
+        const res = await articlePushUnsubscribe(subscription.endpoint, kArtikel);
         if (parseSuccess(res)) {
           this.setState({ pushSubscribed: false });
+          emitPushSubscriptionsChanged();
         } else {
           this.setState({
             pushError:
@@ -146,6 +149,7 @@ class AddToCartButton extends Component {
         const res = await articlePushSubscribe(kArtikel, subscription);
         if (parseSuccess(res)) {
           this.setState({ pushSubscribed: true });
+          emitPushSubscriptionsChanged();
         } else {
           this.setState({
             pushError:
@@ -174,7 +178,14 @@ class AddToCartButton extends Component {
       if (this.state.quantity !== newQuantity)
         this.setState({ quantity: newQuantity });
     };
+    this.onPushSubscriptionsChanged = () => {
+      this.refreshIncomingPushStatus();
+    };
     window.addEventListener("cart", this.cart);
+    window.addEventListener(
+      PUSH_SUBSCRIPTIONS_CHANGED_EVENT,
+      this.onPushSubscriptionsChanged
+    );
     this.refreshIncomingPushStatus();
   }
 
@@ -190,6 +201,10 @@ class AddToCartButton extends Component {
 
   componentWillUnmount() {
     window.removeEventListener("cart", this.cart);
+    window.removeEventListener(
+      PUSH_SUBSCRIPTIONS_CHANGED_EVENT,
+      this.onPushSubscriptionsChanged
+    );
   }
 
   handleIncrement = () => {

src/components/ProductFilters.js

@@ -12,6 +12,8 @@ import { useParams, useSearchParams, useNavigate, useLocation } from 'react-rout
 import { setSessionSetting, removeSessionSetting, clearAllSessionSettings } from '../utils/sessionStorage.js';
 import { withI18n } from '../i18n/withTranslation.js';
 import {
+  PUSH_SUBSCRIPTIONS_CHANGED_EVENT,
+  emitPushSubscriptionsChanged,
   isPushApiSupported,
   fetchPushConfiguration,
   registerPushServiceWorker,
@@ -68,14 +70,25 @@ class ProductFilters extends Component {
   }
 
   componentDidMount() {
+    this.onPushSubscriptionsChanged = () => {
+      this.refreshCategoryPushStatus();
+    };
     this.adjustPaperHeight();
     window.addEventListener('resize', this.adjustPaperHeight);
+    window.addEventListener(
+      PUSH_SUBSCRIPTIONS_CHANGED_EVENT,
+      this.onPushSubscriptionsChanged
+    );
     this._loadManufacturerImages();
     this.refreshCategoryPushStatus();
   }
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.adjustPaperHeight);
+    window.removeEventListener(
+      PUSH_SUBSCRIPTIONS_CHANGED_EVENT,
+      this.onPushSubscriptionsChanged
+    );
     this._manufacturerImageUrls.forEach(url => URL.revokeObjectURL(url));
   }
 
@@ -204,9 +217,10 @@ class ProductFilters extends Component {
           this.setState({ pushSubscribed: false, pushBusy: false });
           return;
         }
-        const res = await categoryPushUnsubscribe(subscription.endpoint);
+        const res = await categoryPushUnsubscribe(subscription.endpoint, kKat);
         if (parseSuccess(res)) {
           this.setState({ pushSubscribed: false });
+          emitPushSubscriptionsChanged();
         } else {
           this.setState({
             pushError:
@@ -237,6 +251,7 @@ class ProductFilters extends Component {
         const res = await categoryPushSubscribe(kKat, subscription);
         if (parseSuccess(res)) {
           this.setState({ pushSubscribed: true });
+          emitPushSubscriptionsChanged();
         } else {
           this.setState({
             pushError: