feat(client): add persistent PWA install card on delivery page (Android button + iOS instructions)

src/components/client/PwaInstallCard.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { usePwaStatus } from "../../hooks/usePwaStatus";
+
+/**
+ * Persistent PWA install card shown on the client delivery page.
+ * - Android/desktop: a button that fires the native `beforeinstallprompt` dialog.
+ * - iOS Safari: step-by-step instructions to add the app to the Home Screen.
+ * Hidden when the app is already installed (standalone mode).
+ */
+export const PwaInstallCard = () => {
+  const { isInstalled, isInstallAvailable, installApp } = usePwaStatus();
+
+  const isIOS =
+    typeof navigator !== "undefined" &&
+    /iPad|iPhone|iPod/.test(navigator.userAgent) &&
+    !window.MSStream;
+
+  // Already installed as a PWA — nothing to offer.
+  if (isInstalled) return null;
+
+  return (
+    <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3">
+      <div className="flex items-start gap-2.5">
+        <span className="text-base flex-shrink-0 mt-0.5">📲</span>
+        <div className="flex-1">
+          <p className="text-sm font-semibold text-[var(--color-text)]">
+            Установить приложение «СуперСам»
+          </p>
+          <p className="text-xs text-[var(--color-text-muted)] mt-1 leading-5">
+            Откройте приложение прямо с главного экрана — быстрее и удобнее.
+          </p>
+
+          {isIOS ? (
+            <ol className="text-xs text-[var(--color-text-muted)] mt-2 space-y-1 leading-5">
+              <li>1. Откройте эту страницу в <span className="font-medium">Safari</span></li>
+              <li>2. Нажмите <span className="font-medium">«Поделиться»</span> (квадрат со стрелкой ↑)</li>
+              <li>3. Выберите <span className="font-medium">«На экран Домой»</span> → «Добавить»</li>
+            </ol>
+          ) : (
+            <div className="mt-2">
+              {isInstallAvailable ? (
+                <button
+                  type="button"
+                  onClick={() => installApp()}
+                  className="rounded-xl bg-[var(--color-accent)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90"
+                >
+                  Установить
+                </button>
+              ) : (
+                <p className="text-xs leading-5 text-[var(--color-text-muted)]">
+                  Нажмите <span className="font-medium">«Установить приложение»</span> в меню браузера.
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PwaInstallCard;

src/pages/ClientDeliveryPage.jsx

@@ -7,6 +7,7 @@ import { OrderCompositionPanel } from "../components/client/OrderCompositionPane
 import { getInvitationReferenceLabel } from "../components/client/invitationReference";
 import { DeliveryStateNotice } from "../components/client/DeliveryStateNotice";
 import { PushSubscriptionBanner } from "../components/client/PushSubscriptionBanner";
+import { PwaInstallCard } from "../components/client/PwaInstallCard";
 import { Panel } from "../components/UI/Panel";
 
 import { Skeleton } from "../components/UI/Loading";
@@ -340,6 +341,33 @@ export const ClientDeliveryPage = () => {
     setError("");
   };
 
+  if (!token) {
+    return (
+      <main className="min-h-screen bg-[var(--color-bg)] px-3 py-4 sm:px-6 sm:py-8">
+        <div className="mx-auto flex w-full max-w-3xl flex-col gap-4">
+          <Panel className="space-y-4 p-5 sm:p-6">
+            <div className="flex items-center gap-3">
+              <img src="/icons/icon-192.png" alt="" className="h-12 w-12 rounded-xl" />
+              <div>
+                <p className="text-sm uppercase tracking-[0.24em] text-[var(--color-text-muted)]">СуперСам</p>
+                <h1 className="text-2xl font-semibold leading-tight sm:text-3xl">Доставка заказа</h1>
+              </div>
+            </div>
+            <p className="text-sm leading-6 text-[var(--color-text-muted)]">
+              Здесь можно согласовать дату доставки или самовывоза и включить уведомления по заказу.
+            </p>
+            <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg)] p-4">
+              <p className="text-sm font-semibold text-[var(--color-text)]">Откройте персональную ссылку</p>
+              <p className="mt-1 text-sm leading-6 text-[var(--color-text-muted)]">
+                Она приходит в сообщении от «СуперСам». Данные заказа без персональной ссылки не отображаются.
+              </p>
+            </div>
+          </Panel>
+        </div>
+      </main>
+    );
+  }
+
   if (loading) {
     return (
       <main className="min-h-screen bg-[var(--color-bg)] px-3 py-4 sm:px-6 sm:py-8">
@@ -396,6 +424,8 @@ export const ClientDeliveryPage = () => {
 
         <OrderCompositionPanel invitation={invitation} />
 
+        <PwaInstallCard />
+
         <PushSubscriptionBanner
           phone={invitation?.customerPhone || invitation?.customer_phone || ""}
           orderGroupId={invitation?.orderGroupId || invitation?.order_group_id || null}