From 9ff034d19fe7db577edbc9d7c67fc0ff4cb088c5 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 18:27:31 +0300
Subject: [PATCH] =?UTF-8?q?OnlineBoard=20search:=20render=20=D0=9A=D1=83?=
 =?UTF-8?q?=D0=BF=D0=B8=D1=82=D1=8C/=D0=9E=D0=BD=D0=BB=D0=B0=D0=B9=D0=BD?=
 =?UTF-8?q?=20=D1=80=D0=B5=D0=B3=D0=B8=D1=81=D1=82=D1=80=D0=B0=D1=86=D0=B8?=
 =?UTF-8?q?=D1=8F=20in=20expanded=20row?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Angular's board search results expansion shows [Купить] [Онлайн
регистрация] [Детали рейса]. React only rendered Details. Added a
`renderActions` prop on FlightCard/FlightList so the feature layer
can inject extra buttons without the ui layer importing from
features. OnlineBoardSearchPage wires it to FlightActions with
showShare=false (the row already has a dedicated share icon).

Visibility rules fall through to canBuyTicket / canRegister (same
as BoardDetailsHeader), so cancelled/past flights still hide the
Buy button and carriers without a registrationUrl still hide the
Online Registration button — matching Angular's per-flight gating.

Integration test mocks useAppSettings to avoid requiring the real
ApiClientProvider in flight-search.test.tsx.
---
 .../components/OnlineBoardSearchPage.tsx       | 13 +++++++++++++
 src/ui/flights/FlightCard.tsx                  | 14 ++++++++++++++
 src/ui/flights/FlightList.tsx                  |  9 +++++++++
 .../online-board/flight-search.test.tsx        | 18 ++++++++++++++++++
 4 files changed, 54 insertions(+)

diff --git a/src/features/online-board/components/OnlineBoardSearchPage.tsx b/src/features/online-board/components/OnlineBoardSearchPage.tsx
index e69a6e85..a89117fd 100644
--- a/src/features/online-board/components/OnlineBoardSearchPage.tsx
+++ b/src/features/online-board/components/OnlineBoardSearchPage.tsx
@@ -18,6 +18,7 @@ import { useNavigate } from "@modern-js/runtime/router";
 import { useLocale } from "@/i18n/useLocale.js";
 import { useTranslation } from "@/i18n/provider.js";
 import { FlightList } from "@/ui/flights/FlightList.js";
+import { FlightActions } from "./BoardDetailsHeader/FlightActions.js";
 import { findClosestFlightId } from "../closestFlight.js";
 import { PageLayout } from "@/ui/layout/PageLayout.js";
 import { PageTabs } from "@/ui/layout/PageTabs.js";
@@ -514,6 +515,18 @@ export const OnlineBoardSearchPage: FC<OnlineBoardSearchPageProps> = ({
               onFlightClick={handleFlightClick}
               initialCurrentFlightId={initialCurrentFlightId}
               direction={params.type}
+              renderActions={(flight) => (
+                // Mirrors Angular's board search expansion: each row
+                // shows [Купить] [Онлайн регистрация] alongside the
+                // Details button. Visibility falls through to the
+                // same canBuyTicket / canRegister rules we use in the
+                // BoardDetailsHeader.
+                <FlightActions
+                  flight={flight}
+                  locale={language}
+                  showShare={false}
+                />
+              )}
             />
           </section>
         )}
diff --git a/src/ui/flights/FlightCard.tsx b/src/ui/flights/FlightCard.tsx
index 510f8dbb..a62642be 100644
--- a/src/ui/flights/FlightCard.tsx
+++ b/src/ui/flights/FlightCard.tsx
@@ -46,6 +46,13 @@ export interface FlightCardProps {
    * pages to render the per-leg route diagram.
    */
   renderExpandedBody?: (flight: ISimpleFlight) => ReactNode;
+  /**
+   * Extra action buttons rendered before the default share + details
+   * buttons in the expanded actions row. Used by the online-board
+   * search page to surface the same Купить / Онлайн регистрация
+   * buttons Angular shows on the search results expansion.
+   */
+  renderActions?: (flight: ISimpleFlight) => ReactNode;
 }
 
 /** Extract the primary leg from a flight (first leg for multi-leg) */
@@ -116,6 +123,7 @@ export const FlightCard: FC<FlightCardProps> = ({
   onViewDetails,
   direction = "route",
   renderExpandedBody,
+  renderActions,
 }) => {
   const { t } = useTranslation();
   const { language } = useLocale();
@@ -415,6 +423,12 @@ export const FlightCard: FC<FlightCardProps> = ({
               >
                 <img src="/assets/img/share.svg" alt="" aria-hidden="true" />
               </button>
+              {/* Extra actions (Купить / Онлайн регистрация). Angular
+                  renders Buy + Registration + Details here on every
+                  expanded board row; the caller wires up FlightActions
+                  via renderActions so the visibility rules live with
+                  the feature instead of leaking into the ui layer. */}
+              {renderActions?.(flight)}
               <button
                 type="button"
                 className="flight-card__details-btn"
diff --git a/src/ui/flights/FlightList.tsx b/src/ui/flights/FlightList.tsx
index 4c97114a..1c487052 100644
--- a/src/ui/flights/FlightList.tsx
+++ b/src/ui/flights/FlightList.tsx
@@ -33,6 +33,13 @@ export interface FlightListProps {
    * default time/transition rows.
    */
   renderExpandedBody?: (flight: ISimpleFlight) => ReactNode;
+  /**
+   * Extra action buttons rendered in the default expanded-body actions
+   * row, right before the share/details buttons. Threads down to each
+   * FlightCard for the online-board search page where Angular shows
+   * Купить / Онлайн регистрация alongside Детали рейса.
+   */
+  renderActions?: (flight: ISimpleFlight) => ReactNode;
 }
 
 /**
@@ -49,6 +56,7 @@ export const FlightList: FC<FlightListProps> = ({
   initialCurrentFlightId,
   direction = "route",
   renderExpandedBody,
+  renderActions,
 }) => {
   const { t } = useTranslation();
   const cardRefs = useRef<Map<string, HTMLDivElement>>(new Map());
@@ -102,6 +110,7 @@ export const FlightList: FC<FlightListProps> = ({
               ? { onViewDetails: () => onFlightClick(flight) }
               : {})}
             {...(renderExpandedBody ? { renderExpandedBody } : {})}
+            {...(renderActions ? { renderActions } : {})}
           />
         </div>
       ))}
diff --git a/tests/integration/online-board/flight-search.test.tsx b/tests/integration/online-board/flight-search.test.tsx
index 11239ebf..d7e11789 100644
--- a/tests/integration/online-board/flight-search.test.tsx
+++ b/tests/integration/online-board/flight-search.test.tsx
@@ -64,6 +64,24 @@ vi.mock("@/shared/dictionaries/index.js", () => ({
   useDictionaries: () => ({ dictionaries: null, loading: false, error: null }),
 }));
 
+// FlightActions (rendered inside each expanded flight row) pulls the
+// buy/registration window lengths from useAppSettings, which itself
+// needs the ApiClientProvider. Integration tests don't wire the real
+// API client, so mock useAppSettings with the Angular defaults.
+vi.mock("@/shared/hooks/useAppSettings.js", () => ({
+  useAppSettings: () => ({
+    onlineboardSearchFrom: 1,
+    onlineboardSearchTo: 7,
+    scheduleSearchFrom: 1,
+    scheduleSearchTo: 330,
+    flightStatusAvailableFromHours: 2,
+    buyTicketMinHours: 2,
+    buyTicketMaxHours: 72,
+    loading: false,
+    error: null,
+  }),
+}));
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------