feat(client): test page /client/test for PWA install + push flow (mock data, no real order)
This commit is contained in:
parent
b2bd855de3
commit
bdeb055fae
|
|
@ -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;
|
||||||
|
|
@ -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 />,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue