feat(client): test page /client/test for PWA install + push flow (mock data, no real order)

This commit is contained in:
Hermes 2026-08-11 15:12:19 +02:00
parent b2bd855de3
commit bdeb055fae
2 changed files with 73 additions and 0 deletions

View File

@ -0,0 +1,68 @@
import React from "react";
import { Panel } from "../components/UI/Panel";
import { PwaInstallCard } from "../components/client/PwaInstallCard";
import { PushSubscriptionBanner } from "../components/client/PushSubscriptionBanner";
/**
* Test page for PWA install + push notification flow.
* Mock data no real order, no API calls.
* Route: /client/test
*/
const MOCK_INVITATION = {
customerName: "Тестов Тест Тестович",
customerPhone: "79990000000",
orderNumber: "TEST-001",
deliveryAddress: "г. Симферополь, ул. Тестовая, д. 1",
deliveryDate: null,
deliveryTime: null,
state: "awaiting_choice",
availableSlots: [],
orderGroupId: "test-group-001",
};
export const ClientTestPage = () => {
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-3 p-5 sm:p-6">
<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>
<p className="text-sm leading-6 text-[var(--color-text-muted)]">
Это тестовая страница для проверки установки PWA и подписки на push-уведомления.
Заказ и телефон ненастоящие.
</p>
</Panel>
<Panel className="space-y-3 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 text-[var(--color-text-muted)]">Заказ {MOCK_INVITATION.orderNumber}</p>
<p className="text-base font-semibold text-[var(--color-text)]">{MOCK_INVITATION.customerName}</p>
<p className="text-sm text-[var(--color-text-muted)]">{MOCK_INVITATION.deliveryAddress}</p>
</div>
</div>
<div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2">
<p className="text-xs text-[var(--color-text-muted)]">Телефон для подписки</p>
<p className="text-sm font-mono text-[var(--color-text)]">{MOCK_INVITATION.customerPhone}</p>
</div>
</Panel>
<PwaInstallCard />
<PushSubscriptionBanner
phone={MOCK_INVITATION.customerPhone}
orderGroupId={MOCK_INVITATION.orderGroupId}
/>
</div>
</main>
);
};
export default ClientTestPage;

View File

@ -2,6 +2,7 @@ import React from "react";
import { Navigate, createBrowserRouter, useParams } from "react-router-dom"; import { Navigate, createBrowserRouter, useParams } from "react-router-dom";
import App from "./App"; import App from "./App";
import { ClientDeliveryPage } from "./pages/ClientDeliveryPage"; import { ClientDeliveryPage } from "./pages/ClientDeliveryPage";
import { ClientTestPage } from "./pages/ClientTestPage";
import { DashboardPage } from "./pages/DashboardPage"; import { DashboardPage } from "./pages/DashboardPage";
import { GroupDetailPage } from "./pages/GroupDetailPage"; import { GroupDetailPage } from "./pages/GroupDetailPage";
import { LoginPage } from "./pages/LoginPage"; import { LoginPage } from "./pages/LoginPage";
@ -51,6 +52,10 @@ export const router = createBrowserRouter([
path: "client/:token", path: "client/:token",
element: <ClientDeliveryPage />, element: <ClientDeliveryPage />,
}, },
{
path: "client/test",
element: <ClientTestPage />,
},
{ {
path: "delivery/:token", path: "delivery/:token",
element: <LegacyDeliveryRedirect />, element: <LegacyDeliveryRedirect />,