Mk
/
supersam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Hermes 2026-08-11 13:37:16 +02:00
parent 02b70cac22
commit 65b42c8482
2 changed files with 92 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/client/PwaInstallCard.jsx Normal file
View File

@ -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;

30
src/pages/ClientDeliveryPage.jsx
View File

@ -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}