v1.0.8 add network change instruct pages

src/lib/pages/print/PrintMenu.svelte

@@ -6,6 +6,8 @@
 	import PrintProgress from './PrintProgress.svelte';
 	import PaymentPage from '$lib/common/ui/PaymentPage.svelte';
 	import { plFiles, plCopies } from '$lib/common/utils/pricing.util.js';
+	import NetworkGate from '$lib/common/ui/NetworkGate.svelte';
+	import { detectNetwork } from '$lib/common/services/network.service.js';
 
 	let { onBack = () => {} } = $props();
 	const store = createPrintStore();
@@ -33,18 +35,59 @@
 		return f.sides !== 'Двусторонняя' && s >= 25;
 	  })
 	);
+
+	/* ── Проверка сети перед отправкой печати ──
+	 * Печать работает только в локальной сети принтера (домен → 192.168.20.1).
+	 * Если «Я оплатил(а)» нажата не в той сети — показываем экран подключения
+	 * и автоматически отправляем печать, как только сеть появится.
+	 */
+	/** @type {null | 'checking' | 'blocked'} */
+	let printNetGate = $state(null);
+
+	async function handleConfirmPayment() {
+	  if (printNetGate === 'checking') return;
+	  printNetGate = 'checking';
+	  const net = await detectNetwork();
+	  if (net === 'local') {
+		printNetGate = null;
+		store.submitPrint();
+	  } else {
+		printNetGate = 'blocked';
+	  }
+	}
+
+	function handleGateReady() {
+	  // сеть принтера появилась — пропускаем пользователя и сразу печатаем
+	  printNetGate = null;
+	  store.submitPrint();
+	}
+
+	function handleGateBack() {
+	  printNetGate = null; // возврат к странице оплаты
+	}
 </script>
 
 {#if store.job}
 	<!-- Страница прогресса печати (после оплаты) -->
 	<PrintProgress {store} onBack={onBack} />
 {:else if store.showPayment}
-	<PaymentPage
-		totalPrice={store.totalPrice}
-		filesCount={store.files.length}
-		onBack={store.hidePayment}
-		onConfirmPayment={store.submitPrint}
-	/>
+  {#if printNetGate === 'blocked'}
+    <NetworkGate mode="need-local" onReady={handleGateReady} onBack={handleGateBack} />
+  {:else if printNetGate === 'checking'}
+    <div class="page-container">
+      <div class="net-checking">
+        <div class="net-spinner"></div>
+        <p>Проверка подключения к принтеру…</p>
+      </div>
+    </div>
+  {:else}
+    <PaymentPage
+      totalPrice={store.totalPrice}
+      filesCount={store.files.length}
+      onBack={store.hidePayment}
+      onConfirmPayment={handleConfirmPayment}
+    />
+  {/if}
 {:else if !store.activeFile}
 	<div class="page-container">
 		<header class="header">
@@ -99,6 +142,9 @@
 {/if}
 
 <style>
+	.net-checking { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 20px; color: #8b93a1; font-size: 15px; font-weight: 600; text-align: center; }
+	.net-spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.12); border-top-color: #6366f1; animation: net-spin 0.8s linear infinite; }
+	@keyframes net-spin { to { transform: rotate(360deg); } }
 	.page-container { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% -10%, rgba(99,102,241,0.18) 0%, transparent 60%); font-family: system-ui, -apple-system, sans-serif; color: #f5f7fa; }
 	.header { padding: 24px 20px 8px; display: flex; align-items: center; position: relative; }
 	.back-btn { background: none; border: none; color: #6366f1; font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 4px; margin-right: auto; min-height: 44px; }