Add BuyTicketButton component

2026-04-17 01:27:35 +03:00
parent 0c84d635d8
commit 369b413a32
2 changed files with 136 additions and 0 deletions
@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { BuyTicketButton } from "./BuyTicketButton.js";
+import type { ISimpleFlight } from "../../types.js";
+
+vi.mock("@/i18n/provider.js", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+function makeFlight(
+  depUtc = "2026-04-20T10:00:00Z",
+  dep = "SVO",
+  arr = "LED",
+): ISimpleFlight {
+  return {
+    id: "X",
+    routeType: "Direct",
+    flyingTime: "1h",
+    status: "Scheduled",
+    flightId: { carrier: "SU", flightNumber: "0022", suffix: "", date: "20260417" },
+    operatingBy: { carrier: "SU", flightNumber: "0022" },
+    leg: {
+      arrival: {
+        scheduled: { airport: "", airportCode: arr, city: "", cityCode: "", countryCode: "" },
+        latest: { airport: "", airportCode: arr, city: "", cityCode: "", countryCode: "" },
+        dispatch: "",
+        gate: "",
+        terminal: "",
+        times: {
+          scheduledArrival: {
+            dayChange: { value: 0, title: "" },
+            local: "",
+            localTime: "",
+            tzOffset: 0,
+            utc: "",
+          },
+        },
+      },
+      dayChange: 0,
+      departure: {
+        scheduled: { airport: "", airportCode: dep, city: "", cityCode: "", countryCode: "" },
+        latest: { airport: "", airportCode: dep, city: "", cityCode: "", countryCode: "" },
+        dispatch: "",
+        gate: "",
+        terminal: "",
+        checkingStatus: "Scheduled",
+        parkingStand: "",
+        times: {
+          scheduledDeparture: {
+            dayChange: { value: 0, title: "" },
+            local: "",
+            localTime: "",
+            tzOffset: 0,
+            utc: depUtc,
+          },
+        },
+      },
+      equipment: {},
+      flags: { checkinAvailable: false, returnToAirport: false, routeChanged: false },
+      flyingTime: "1h",
+      index: 0,
+      operatingBy: {},
+      status: "Scheduled",
+      updated: "",
+    },
+  } as ISimpleFlight;
+}
+
+describe("BuyTicketButton", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "open", { value: vi.fn(), writable: true });
+  });
+
+  it("renders label SHARED.BUY-TICKET", () => {
+    render(<BuyTicketButton flight={makeFlight()} locale="ru" />);
+    expect(screen.getByText("SHARED.BUY-TICKET")).toBeTruthy();
+  });
+
+  it("has data-testid buy-ticket-button", () => {
+    render(<BuyTicketButton flight={makeFlight()} locale="ru" />);
+    expect(screen.getByTestId("buy-ticket-button")).toBeTruthy();
+  });
+
+  it("click opens aeroflot buy ticket URL with locale, routes, and autosearch", () => {
+    render(<BuyTicketButton flight={makeFlight()} locale="ru" />);
+    fireEvent.click(screen.getByTestId("buy-ticket-button"));
+    const openMock = window.open as ReturnType<typeof vi.fn>;
+    expect(openMock).toHaveBeenCalledTimes(1);
+    const url = openMock.mock.calls[0]![0] as string;
+    expect(url).toContain("aeroflot.ru/sb/app/ru-ru");
+    expect(url).toContain("routes=SVO.20260420.LED");
+    expect(url).toContain("autosearch=Y");
+  });
+});
@@ -0,0 +1,41 @@
+import type { FC } from "react";
+import { parseISO, format } from "date-fns";
+import { useTranslation } from "@/i18n/provider.js";
+import type { ISimpleFlight } from "../../types.js";
+import "./actions.scss";
+
+export interface BuyTicketButtonProps {
+  flight: ISimpleFlight;
+  locale: string;
+}
+
+function buildBuyTicketUrl(flight: ISimpleFlight, locale: string): string {
+  const legs = flight.routeType === "Direct" ? [flight.leg] : flight.legs;
+  const firstLeg = legs[0]!;
+  const lastLeg = legs[legs.length - 1]!;
+  const dep = firstLeg.departure.scheduled.airportCode;
+  const arr = lastLeg.arrival.scheduled.airportCode;
+  const depDate = parseISO(firstLeg.departure.times.scheduledDeparture.utc);
+  const date = format(depDate, "yyyyMMdd");
+  return `https://www.aeroflot.ru/sb/app/${locale}-${locale}#/search?adults=1&cabin=economy&children=0&infants=0&routes=${dep}.${date}.${arr}&autosearch=Y`;
+}
+
+export const BuyTicketButton: FC<BuyTicketButtonProps> = ({ flight, locale }) => {
+  const { t } = useTranslation();
+
+  const handleClick = () => {
+    const url = buildBuyTicketUrl(flight, locale);
+    window.open(url, "_blank", "noopener,noreferrer");
+  };
+
+  return (
+    <button
+      type="button"
+      className="flight-action-btn flight-action-btn--orange"
+      data-testid="buy-ticket-button"
+      onClick={handleClick}
+    >
+      {t("SHARED.BUY-TICKET")}
+    </button>
+  );
+};