@ozdao/martyrs 0.2.602 → 0.2.603

package/src/modules/notifications/notifications.client.js

@@ -5,7 +5,7 @@ console.log('[LOADING 37] Notifications module import started...');
 import { toRefs, watch } from 'vue';
 // Router import
 import addRoutes from '@martyrs/src/modules/core/views/router/addRoutes.js';
-import { getRoutes } from './notifications.router.js';
+import { getRoutes } from './router/notifications.router.js';
 // Store
 import * as storeNotifications from './store/notifications.store.js';
 // Global WebSocket import
@@ -232,44 +232,39 @@ class NotificationManager {
   }
 
   async registerWebPush(store) {
-    if (!('Notification' in window) || !('serviceWorker' in navigator) || !('PushManager' in window)) {
-      console.warn('Web Push не поддерживается в браузере');
+    if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
+      console.warn('[WebPush] PushManager not supported');
       return;
     }
 
-    const permission = await Notification.requestPermission();
-    if (permission !== 'granted') {
-      console.warn('Разрешение на уведомления не получено');
-      return;
+    // Skip permission request if already granted (component handles the prompt)
+    if ('Notification' in window && Notification.permission !== 'granted') {
+      const permission = await Notification.requestPermission();
+      if (permission !== 'granted') {
+        console.warn('[WebPush] Permission not granted:', permission);
+        return;
+      }
     }
 
+    console.log('[WebPush] Subscribing to push manager...');
     const registration = await navigator.serviceWorker.ready;
     const subscription = await registration.pushManager.subscribe({
       userVisibleOnly: true,
       applicationServerKey: 'BJtNnRrx05VQS0abnkHC-8gHJWpnmoqC_iQveENCmZOZIs-adWzqAiqFCdGVVd7CbiaLW-Q5iuIBDRgM9G-VnKg',
     });
 
-    console.log('New subscription:', JSON.stringify(subscription));
+    console.log('[WebPush] Subscription:', JSON.stringify(subscription));
 
     const deviceToken = JSON.stringify(subscription);
     const deviceId = await this.generateDeviceId();
-    
+
     // Store device data for re-registration after login
     try {
-      await Preferences.set({
-        key: 'notifications_device_id',
-        value: deviceId
-      });
-      await Preferences.set({
-        key: 'notifications_device_token',
-        value: deviceToken
-      });
-      await Preferences.set({
-        key: 'notifications_device_type',
-        value: 'web'
-      });
+      await Preferences.set({ key: 'notifications_device_id', value: deviceId });
+      await Preferences.set({ key: 'notifications_device_token', value: deviceToken });
+      await Preferences.set({ key: 'notifications_device_type', value: 'web' });
     } catch (error) {
-      console.warn('Could not save device info to preferences:', error);
+      console.warn('[WebPush] Could not save device info to preferences:', error);
     }
 
     const deviceData = {
@@ -285,26 +280,24 @@ class NotificationManager {
         const result = await Preferences.get({ key: 'notifications_anonymous_id' });
         anonymousId = result.value;
       } catch (error) {
-        console.warn('Could not get anonymous ID from preferences:', error);
+        console.warn('[WebPush] Could not get anonymous ID:', error);
       }
-      
+
       if (!anonymousId) {
         anonymousId = 'anon_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
         try {
-          await Preferences.set({
-            key: 'notifications_anonymous_id',
-            value: anonymousId
-          });
+          await Preferences.set({ key: 'notifications_anonymous_id', value: anonymousId });
         } catch (error) {
-          console.warn('Could not save anonymous ID to preferences:', error);
+          console.warn('[WebPush] Could not save anonymous ID:', error);
         }
       }
       deviceData.anonymousId = anonymousId;
     }
 
     // Register device
-    console.log('[Notifications] Registering device with data:', deviceData);
+    console.log('[WebPush] Registering device:', deviceData);
     await store.notifications.actions.registerDevice(deviceData);
+    console.log('[WebPush] Device registered successfully');
   }
 
   async generateDeviceId() {
@@ -328,47 +321,63 @@ class NotificationManager {
   }
 
   async initialize() {
+    console.log('[NOTIF DEBUG] NotificationManager.initialize() called, initialized:', this.initialized, 'isServer:', this.isServer);
     if (this.initialized || this.isServer) return;
 
     const userId = this.store.core.state.session.userId;
-    
+    console.log('[NOTIF DEBUG] userId:', userId);
+
     // Connect WebSocket only for authenticated users
     if (userId) {
-      console.log('Connecting to websockets via notifications');
-      wsManager.initialize({
-        wsUrl: process.env.WSS_URL,
-        maxReconnectAttempts: 10,
-        reconnectDelay: 2000,
-      });
+      try {
+        console.log('[NOTIF DEBUG] Connecting to websockets, WSS_URL:', process.env.WSS_URL);
+        wsManager.initialize({
+          wsUrl: process.env.WSS_URL,
+          maxReconnectAttempts: 10,
+          reconnectDelay: 2000,
+        });
 
-      await wsManager.connect(userId);
+        await wsManager.connect(userId);
+        console.log('[NOTIF DEBUG] wsManager.connect() resolved successfully');
 
-      wsManager.removeModuleListeners('notification');
+        wsManager.removeModuleListeners('notification');
 
-      await wsManager.subscribeModule('notification');
+        await wsManager.subscribeModule('notification');
+        console.log('[NOTIF DEBUG] Subscribed to notification module');
 
-      wsManager.addEventListener(
-        'notification',
-        data => {
-          this.store.notifications.actions.addLocalNotification(data.data);
-        },
-        { module: 'notification' }
-      );
+        wsManager.addEventListener(
+          'notification',
+          data => {
+            this.store.notifications.actions.addLocalNotification(data.data);
+          },
+          { module: 'notification' }
+        );
+      } catch (error) {
+        console.error('[NOTIF DEBUG] WebSocket init FAILED:', error);
+      }
 
-      // Load notifications from API for authenticated users
-      await this.store.notifications.actions.getNotifications(userId);
+      // Load notifications regardless of WS status
+      try {
+        await this.store.notifications.actions.getNotifications(userId);
+      } catch (error) {
+        console.error('[NOTIF DEBUG] Failed to load notifications:', error);
+      }
     } else {
-      console.log('Initializing notifications for anonymous user');
+      console.log('[NOTIF DEBUG] No userId, skipping WS');
     }
 
-    // Enable push notifications for both authenticated and anonymous users
+    // Push registration in background — don't block initialization
     // Skip auto-init for mobile apps - will be triggered manually from Walkthrough
     if (this.options.enablePush !== false && !process.env.MOBILE_APP) {
-      await this.pushHandler.requestPermissions();
-      await this.registerWebPush(this.store);
+      this.pushHandler.requestPermissions().catch(() => {});
+      // Only register web push if permission already granted (no popup without user gesture)
+      if ('Notification' in window && Notification.permission === 'granted') {
+        this.registerWebPush(this.store).catch(err => console.error('[Notifications] WebPush registration error:', err));
+      }
     }
 
     this.initialized = true;
+    console.log('[NOTIF DEBUG] NotificationManager initialized successfully');
   }
 
   disconnect() {
@@ -444,13 +453,24 @@ function initializeNotifications(app, store, router, options = {}) {
     watch(
       () => store.core.state.session.userId,
       async (userId, oldUserId) => {
-        console.log('[Notifications] Watch triggered, userId:', userId, 'oldUserId:', oldUserId);
+        console.log('[NOTIF DEBUG] Watch triggered, userId:', userId, 'oldUserId:', oldUserId);
         if (userId && !oldUserId) {
           // Пользователь залогинен (либо при гидратации, либо при логине)
-          console.log('[Notifications] User authenticated, initializing WebSocket...', userId);
-          await store.notifications.actions.reregisterDeviceAfterLogin();
+          console.log('[NOTIF DEBUG] User authenticated branch, calling reregisterDeviceAfterLogin...');
+          try {
+            await store.notifications.actions.reregisterDeviceAfterLogin();
+            console.log('[NOTIF DEBUG] reregister done, calling disconnect...');
+          } catch (err) {
+            console.error('[NOTIF DEBUG] reregister failed:', err);
+          }
           notificationManager.disconnect();
-          await notificationManager.initialize();
+          console.log('[NOTIF DEBUG] disconnect done, calling initialize...');
+          try {
+            await notificationManager.initialize();
+            console.log('[NOTIF DEBUG] initialize done');
+          } catch (err) {
+            console.error('[NOTIF DEBUG] initialize FAILED:', err);
+          }
         } else if (!userId && oldUserId) {
           // Пользователь разлогинился
           console.log('[Notifications] User logged out, resetting notifications...');
@@ -474,6 +494,7 @@ function initializeNotifications(app, store, router, options = {}) {
       ...store.notifications.mutations,
       init: notificationManager.initialize.bind(notificationManager),
       disconnect: notificationManager.disconnect.bind(notificationManager),
+      registerWebPush: () => notificationManager.registerWebPush(store),
       isServer,
     };
   });

package/src/modules/notifications/router/notifications.router.js

@@ -1,30 +1,47 @@
-import NotificationsLayout from '../components/layouts/NotificationsLayout.vue';
-import Notifications from '../components/pages/Notifications.vue';
-import NotificationPreferences from '../components/sections/NotificationPreferences.vue';
-
-const nofitications = {
-  path: '/notifications',
-  component: NotificationsLayout,
-  children: [
+function buildNotificationRoutes() {
+  return [
     {
       path: '',
       name: 'Notifications',
-      component: Notifications,
+      component: () => import(
+        /* webpackChunkName: 'notifications-page' */
+        '../components/pages/Notifications.vue'
+      ),
       meta: {
-        // requiresAuth: true,
         title: 'Notifications',
       },
     },
     {
       path: 'preferences',
       name: 'NotificationPreferences',
-      component: NotificationPreferences,
+      component: () => import(
+        /* webpackChunkName: 'notifications-preferences' */
+        '../components/sections/NotificationPreferences.vue'
+      ),
       meta: {
-        // requiresAuth: true,
         title: 'Notification Preferences',
       },
     },
-  ],
-};
+  ];
+}
+
+export function getRoutes(options = {}) {
+  const routes = [];
+  const routeUsers = options.routeUsers || 'User Profile Root';
+
+  routes.push({
+    parentName: routeUsers,
+    config: {
+      basePath: options.basePath || 'notifications',
+      component: options.layoutComponent || (() => import(
+        /* webpackChunkName: 'notifications-layout' */
+        '../components/layouts/NotificationsLayout.vue'
+      )),
+      routes: buildNotificationRoutes(options),
+    },
+  });
+
+  return routes;
+}
 
-export default nofitications;
+export default { getRoutes };

package/src/modules/notifications/services/notification.service.js

@@ -176,12 +176,21 @@ export default (function (db, wss) {
   // Send push notification to mobile device
   const sendPushNotification = async (notification, user, device) => {
     const pushService = getPushServiceByDeviceType(device.deviceType);
-    return pushService.send({
-      token: device.deviceToken,
-      title: notification.title,
-      body: notification.body,
-      data: notification.metadata,
-    });
+    try {
+      return await pushService.send({
+        token: device.deviceToken,
+        title: notification.title,
+        body: notification.body,
+        data: notification.metadata,
+      });
+    } catch (error) {
+      // 410 Gone — subscription expired, deactivate device
+      if (error.statusCode === 410 || error.statusCode === 404) {
+        console.log(`[Push] Subscription expired (${error.statusCode}), deactivating device:`, device.deviceId);
+        db.userDevice.findByIdAndUpdate(device._id, { isActive: false }).catch(console.error);
+      }
+      throw error;
+    }
   };
   // Get the appropriate push service based on device type
   const getPushServiceByDeviceType = deviceType => {

package/src/modules/notifications/services/web-push.service.js

@@ -18,7 +18,9 @@ const WebPushService = {
         data: data,
       });
       // Send the notification
+      console.log('[WebPush] Sending to endpoint:', subscription.endpoint);
       const result = await webpush.sendNotification(subscription, payload);
+      console.log('[WebPush] Result:', result.statusCode, result.headers);
       return { success: true, statusCode: result.statusCode };
     } catch (error) {
       console.error('Web Push service error:', error);

package/src/modules/orders/components/blocks/CardApplication.vue

@@ -6,45 +6,38 @@
         <p class="t-transp">{{ application.contacts?.email || application.contacts?.phone }}</p>
       </div>
       <div class="flex-center">
-        <StatusBadge :value="{
-          text: application.status,
-          color: application.status === 'completed' ? '#22c55e' : application.status === 'in_progress' ? '#f59e0b' : '#6b7280'
-        }" />
+        <StatusBadge :value="application.status" />
       </div>
     </div>
 
-    <div class="mn-b-small pd-small bg-white radius-small flex-nowrap flex"> 
-      <div class="w-100">
-        <p class="truncate">{{ application.type || 'Unknown' }}</p> 
-        <small class="t-transp">Type</small>
-      </div>
+    <div class="mn-b-thin pd-small bg-white radius-small flex">
+      <p class="mn-r-auto t-transp">Type</p>
+      <p class="truncate">{{ application.type || 'Unknown' }}</p>
+    </div>
 
-      <div class="w-100 t-right">
-        <p>{{ formatDate(application.updatedAt) }}</p>
-        <small class="t-transp">Updated</small>
-      </div>
+    <div class="mn-b-thin pd-small bg-white radius-small flex">
+      <p class="mn-r-auto t-transp">Phone</p>
+      <p>{{ application.contacts?.phone || 'No phone' }}</p>
     </div>
 
-    <div class="pd-small bg-white radius-small">
-      <div class="flex mn-b-thin">
-        <div class="mn-r-auto">
-          <p>{{ application.contacts?.phone || 'No phone' }}</p>
-          <small class="t-transp">Phone</small>
-        </div>
-        <div class="t-right">
-          <p>#{{ application._id.slice(0, 4) + '...' + application._id.slice(-4) }}</p>
-          <small class="t-transp">ID</small>
-        </div>
-      </div>
+    <div class="mn-b-thin pd-small bg-white radius-small flex">
+      <p class="mn-r-auto t-transp">ID</p>
+      <p>#{{ application._id.slice(0, 4) + '...' + application._id.slice(-4) }}</p>
+    </div>
 
-      <div v-if="application.text" class="mn-t-thin">
-        <p class="t-small">{{ application.text.length > 100 ? application.text.slice(0, 100) + '...' : application.text }}</p>
-      </div>
+    <div v-if="application.text" class="mn-b-thin pd-small bg-white radius-small">
+      <p class="t-small">{{ application.text.length > 100 ? application.text.slice(0, 100) + '...' : application.text }}</p>
+    </div>
+
+    <div class="pd-small bg-white radius-small gap-micro flex-v-center flex-nowrap flex">
+      <IconTime class="i-medium t-transp" fill="rgb(var(--black))" />
+      <p class="fw-medium mn-r-auto">{{ formatDate(application.updatedAt) }}</p>
     </div>
   </div>
 </template>
 
 <script setup>
+  import IconTime from '@martyrs/src/modules/icons/entities/IconTime.vue';
   import StatusBadge from '@martyrs/src/components/Table/StatusBadge.vue';
 
   defineProps({
@@ -59,16 +52,3 @@
   });
 </script>
 
-<style scoped>
-  .bg-light {
-    background-color: var(--color-bg-light, #f8f9fa);
-  }
-  
-  .bg-light-transp {
-    background-color: var(--color-bg-light-transp, rgba(248, 249, 250, 0.7));
-  }
-  
-  .bg-light-transp-50 {
-    background-color: var(--color-bg-light-transp-50, rgba(248, 249, 250, 0.5));
-  }
-</style>

package/src/modules/orders/components/blocks/CardCustomer.vue

@@ -6,62 +6,55 @@
         <p class="t-transp">{{ customer.email || customer.phone }}</p>
       </div>
       <div class="flex-center">
-        <StatusBadge :value="{
-          text: customer.status,
-          color: customer.status === 'active' ? '#22c55e' : customer.status === 'inactive' ? '#f59e0b' : '#ef4444'
-        }" />
+        <StatusBadge :value="customer.status" />
       </div>
     </div>
 
-    <div class="mn-b-small pd-small bg-white radius-small flex-nowrap flex"> 
-      <div class="w-100">
-        <p class="truncate">{{ customer.source || 'Unknown' }}</p> 
-        <small class="t-transp">Source</small>
-      </div>
+    <div class="mn-b-thin pd-small bg-white radius-small flex">
+      <p class="mn-r-auto t-transp">Source</p>
+      <p class="truncate">{{ customer.source || 'Unknown' }}</p>
+    </div>
 
-      <div class="w-100 t-right">
-        <p>{{ formatDate(customer.lastActivity || customer.updatedAt) }}</p>
-        <small class="t-transp">Last Activity</small>
-      </div>
+    <div class="mn-b-thin pd-small bg-white radius-small flex">
+      <p class="mn-r-auto t-transp">Type</p>
+      <p>{{ customer.identity?.type || 'Visitor' }}</p>
     </div>
 
-    <div class="pd-small bg-white radius-small">
-      <div class="flex mn-b-thin">
-        <div class="mn-r-auto">
-          <p>{{ customer.identity?.type || 'Visitor' }}</p>
-          <small class="t-transp">Type</small>
-        </div>
-        <div class="t-right">
-          <p>#{{ customer._id.slice(0, 4) + '...' + customer._id.slice(-4) }}</p>
-          <small class="t-transp">ID</small>
-        </div>
-      </div>
+    <div class="mn-b-thin pd-small bg-white radius-small flex">
+      <p class="mn-r-auto t-transp">ID</p>
+      <p>#{{ customer._id.slice(0, 4) + '...' + customer._id.slice(-4) }}</p>
+    </div>
 
-      <div v-if="customer.tags && customer.tags.length > 0" class="flex flex-wrap gap-nano">
-        <span 
-          v-for="tag in customer.tags.slice(0, 3)" 
-          :key="tag"
-          class="bg-light pd-nano radius-small t-small"
-        >
-          {{ tag }}
-        </span>
-        <span 
-          v-if="customer.tags.length > 3"
-          class="bg-light-transp pd-nano radius-small t-small t-transp"
-        >
-          +{{ customer.tags.length - 3 }}
-        </span>
-      </div>
+    <div v-if="customer.tags && customer.tags.length > 0" class="mn-b-thin pd-small bg-white radius-small flex flex-wrap gap-nano">
+      <span
+        v-for="tag in customer.tags.slice(0, 3)"
+        :key="tag"
+        class="bg-light pd-nano radius-small t-small"
+      >
+        {{ tag }}
+      </span>
+      <span
+        v-if="customer.tags.length > 3"
+        class="bg-light pd-nano radius-small t-small t-transp"
+      >
+        +{{ customer.tags.length - 3 }}
+      </span>
+    </div>
 
-      <div v-if="customer.referral?.code" class="mn-t-thin">
-        <p class="t-small">Referral: {{ customer.referral.code }}</p>
-      </div>
+    <div v-if="customer.referral?.code" class="mn-b-thin pd-small bg-white radius-small">
+      <p class="t-small">Referral: {{ customer.referral.code }}</p>
+    </div>
+
+    <div class="pd-small bg-white radius-small gap-micro flex-v-center flex-nowrap flex">
+      <IconTime class="i-medium t-transp" fill="rgb(var(--black))" />
+      <p class="fw-medium mn-r-auto">{{ formatDate(customer.lastActivity || customer.updatedAt) }}</p>
     </div>
   </div>
 </template>
 
 <script setup>
   import StatusBadge from '@martyrs/src/components/Table/StatusBadge.vue';
+  import IconTime from '@martyrs/src/modules/icons/entities/IconTime.vue';
 
   defineProps({
     customer: {
@@ -75,16 +68,3 @@
   });
 </script>
 
-<style scoped>
-  .bg-light {
-    background-color: var(--color-bg-light, #f8f9fa);
-  }
-  
-  .bg-light-transp {
-    background-color: var(--color-bg-light-transp, rgba(248, 249, 250, 0.7));
-  }
-  
-  .bg-light-transp-50 {
-    background-color: var(--color-bg-light-transp-50, rgba(248, 249, 250, 0.5));
-  }
-</style>

package/src/modules/orders/components/blocks/CardOrderItem.vue

@@ -19,7 +19,7 @@
         
         <div class="mn-t-thin">
           <p v-if="price != null && quantity != null">
-            <span class="t-grey mn-r-micro d-inline-block fw-demi">
+            <span class="t-dark mn-r-micro d-inline-block fw-demi">
               {{ returnCurrency() }}{{ totalPrice }}
             </span>
             <span v-if="isRental && rentDates.start && rentDates.end" class="p-small t-transp">
@@ -30,7 +30,7 @@
             <span v-else class="p-small t-transp">{{ returnCurrency() }}{{ price }} × {{ quantity || 0 }}  {{ unit || 'pcs' }}</span>
           </p>
           
-          <p v-else-if="price != null && quantity == null" class="t-grey mn-r-micro d-inline-block fw-demi">
+          <p v-else-if="price != null && quantity == null" class="t-dark mn-r-micro d-inline-block fw-demi">
             {{ returnCurrency() }}{{ price }}
           </p>
           

package/src/modules/orders/components/blocks/CardOrderUser.vue

@@ -100,8 +100,8 @@ const statusConfig = {
   'confirmed': { label: 'Confirmed', class: 't-main bg-main-nano', dot: 'bg-main' },
   'shipped': { label: 'Shipped', class: 't-second bg-second-nano', dot: 'bg-second' },
   'preparing': { label: 'Preparing', class: 't-second bg-second-nano', dot: 'bg-second' },
-  'cancelled': { label: 'Cancelled', class: 't-grey bg-light', dot: 'bg-grey' },
-  'canceled': { label: 'Cancelled', class: 't-grey bg-light', dot: 'bg-grey' },
+  'cancelled': { label: 'Cancelled', class: 't-dark bg-light', dot: 'bg-grey' },
+  'canceled': { label: 'Cancelled', class: 't-dark bg-light', dot: 'bg-grey' },
   'returned': { label: 'Returned', class: 't-fourth bg-fourth-nano', dot: 'bg-fourth' }
 };
 

package/src/modules/orders/components/forms/FormCustomerDetails.vue

@@ -88,7 +88,7 @@
 
     <!-- Address Fields -->
     <div v-if="showAddressFields" class="mn-t-small">
-      <h3 class="fw-medium mn-b-thin">Address Information</h3>
+      <h5 class="fw-medium mn-b-thin">Address Information</h5>
       
       <Field 
         v-model:field="customer.address.country"   
@@ -138,7 +138,7 @@
       ]"
       @update:select="(option) => { customer.status = option.value; statusSelected = option }"
       placeholder="Status" 
-      class="bg-white pd-small radius-small mn-b-thin"
+      class="bg-white pd-small radius-small mn-t-small mn-b-thin"
     />