{currentUser?.email}
@@ -47,6 +62,7 @@ vi.mock("./EditProfileModal", () => ({
) : null,
}));
+// Оновлені мок-дані: додали масив турнірів!
const mockUserFull = {
id: "user-1",
displayName: "Super Hacker",
@@ -56,6 +72,11 @@ const mockUserFull = {
github: "hacker777",
discord: "hacker#7777",
roles: [{ display_name: "Admin", name: "admin" }, { name: "manager" }],
+ created_tournaments: [
+ { id: 1, title: "Напишіть Ядро Лінукс" },
+ { id: 2, name: "Напишіть свою мову програмування" },
+ { id: 3, title: "Напишіть гру на JS" },
+ ],
};
const mockUserFallbackName = {
@@ -63,12 +84,7 @@ const mockUserFallbackName = {
full_name: "Fallback Name",
email: "fallback@example.com",
roles: [],
-};
-
-const mockUserPartial = {
- id: "user-3",
- displayName: "Tester",
- email: "tester@example.com",
+ created_tournaments: [],
};
const mockUserEmpty = {
@@ -90,7 +106,7 @@ describe("Profile Component", () => {
it("displays loading state when user is null", () => {
vi.mocked(useSelector).mockReturnValue(null);
render(
);
- expect(screen.getByText("Завантаження...")).toBeInTheDocument();
+ expect(screen.getByText("loading")).toBeInTheDocument();
});
it("renders the SVG avatar icon", () => {
@@ -113,28 +129,22 @@ describe("Profile Component", () => {
expect(screen.getByText("Fallback Name")).toBeInTheDocument();
});
- it("displays 'Без імені' when both displayName and full_name are missing", () => {
+ it("displays 'unnamed' key when both displayName and full_name are missing", () => {
vi.mocked(useSelector).mockReturnValue(mockUserEmpty);
render(
);
- expect(screen.getByText("Без імені")).toBeInTheDocument();
+ expect(screen.getByText("unnamed")).toBeInTheDocument();
});
it("displays roles using display_name if available, otherwise name", () => {
vi.mocked(useSelector).mockReturnValue(mockUserFull);
render(
);
- expect(screen.getByText("Роль: Admin, manager")).toBeInTheDocument();
+ expect(screen.getByText("role: Admin, manager")).toBeInTheDocument();
});
- it("displays 'Немає ролей' when roles array is empty", () => {
+ it("displays 'no_roles' when roles array is empty", () => {
vi.mocked(useSelector).mockReturnValue(mockUserFallbackName);
render(
);
- expect(screen.getByText("Роль: Немає ролей")).toBeInTheDocument();
- });
-
- it("displays 'Немає ролей' when roles is undefined", () => {
- vi.mocked(useSelector).mockReturnValue(mockUserEmpty);
- render(
);
- expect(screen.getByText("Роль: Немає ролей")).toBeInTheDocument();
+ expect(screen.getByText("role: no_roles")).toBeInTheDocument();
});
it("opens edit modal on edit button click and closes on close button click", () => {
@@ -142,7 +152,7 @@ describe("Profile Component", () => {
render(
);
expect(screen.queryByTestId("edit-profile-modal")).not.toBeInTheDocument();
- fireEvent.click(screen.getByText("Редагувати профіль"));
+ fireEvent.click(screen.getByText("edit_profile"));
expect(screen.getByTestId("edit-profile-modal")).toBeInTheDocument();
fireEvent.click(screen.getByText("Close"));
@@ -152,39 +162,47 @@ describe("Profile Component", () => {
it("passes correct currentUser data to EditProfileModal", () => {
vi.mocked(useSelector).mockReturnValue(mockUserFull);
render(
);
- fireEvent.click(screen.getByText("Редагувати профіль"));
- expect(screen.getByTestId("modal-current-user")).toHaveTextContent("hacker777@example.com");
+ fireEvent.click(screen.getByText("edit_profile"));
+ expect(screen.getByTestId("modal-current-user")).toHaveTextContent(
+ "hacker777@example.com",
+ );
});
it("calls window.confirm with correct text before deleting", () => {
vi.mocked(useSelector).mockReturnValue(mockUserFull);
render(
);
- fireEvent.click(screen.getByText("Видалити"));
- expect(window.confirm).toHaveBeenCalledWith("Ви впевнені?");
+ fireEvent.click(screen.getByText("delete_account"));
+ expect(window.confirm).toHaveBeenCalledWith("confirm_delete");
});
it("calls delete mutation on delete button click if confirmed", () => {
const mockMutate = vi.fn();
- vi.mocked(useMutation).mockReturnValue({ mutate: mockMutate, isPending: false } as any);
+ vi.mocked(useMutation).mockReturnValue({
+ mutate: mockMutate,
+ isPending: false,
+ } as any);
vi.mocked(useSelector).mockReturnValue(mockUserFull);
render(
);
- fireEvent.click(screen.getByText("Видалити"));
+ fireEvent.click(screen.getByText("delete_account"));
expect(mockMutate).toHaveBeenCalled();
});
it("does not call mutate if user cancels confirm dialog", () => {
window.confirm = vi.fn(() => false);
const mockMutate = vi.fn();
- vi.mocked(useMutation).mockReturnValue({ mutate: mockMutate, isPending: false } as any);
+ vi.mocked(useMutation).mockReturnValue({
+ mutate: mockMutate,
+ isPending: false,
+ } as any);
vi.mocked(useSelector).mockReturnValue(mockUserFull);
render(
);
- fireEvent.click(screen.getByText("Видалити"));
+ fireEvent.click(screen.getByText("delete_account"));
expect(mockMutate).not.toHaveBeenCalled();
});
- it("shows loading state on delete button during mutation and disables it", () => {
+ it("disables delete button during mutation", () => {
vi.mocked(useSelector).mockReturnValue(mockUserFull);
vi.mocked(useMutation).mockReturnValue({
mutate: vi.fn(),
@@ -192,33 +210,12 @@ describe("Profile Component", () => {
} as any);
render(
);
- const deleteButton = screen.getByText("Видалення...");
+ // Шукаємо кнопку за текстом ключа
+ const deleteButton = screen.getByText("delete_account").closest("button");
expect(deleteButton).toBeInTheDocument();
expect(deleteButton).toBeDisabled();
});
- it("initializes useMutation with correct mutationKey", () => {
- vi.mocked(useSelector).mockReturnValue(mockUserFull);
- render(
);
- expect(useMutation).toHaveBeenCalledWith(expect.objectContaining({
- mutationKey: ["delete user"]
- }));
- });
-
- it("executes mutationFn with current user", async () => {
- vi.mocked(useSelector).mockReturnValue(mockUserFull);
- let mutationConfig: any;
- vi.mocked(useMutation).mockImplementation((config: any) => {
- mutationConfig = config;
- return { mutate: vi.fn(), isPending: false } as any;
- });
-
- render(
);
- await mutationConfig.mutationFn();
-
- expect(deleteUser).toHaveBeenCalledWith(auth.currentUser);
- });
-
it("throws error in mutationFn when currentUser is null", async () => {
vi.mocked(useSelector).mockReturnValue(mockUserFull);
auth.currentUser = null;
@@ -230,7 +227,9 @@ describe("Profile Component", () => {
});
render(
);
- await expect(mutationConfig.mutationFn()).rejects.toThrow("Користувач не авторизований");
+ await expect(mutationConfig.mutationFn()).rejects.toThrow(
+ "errors.not_authorized",
+ );
});
it("handles mutation onSuccess by clearing user data from auth and redux", async () => {
@@ -248,83 +247,44 @@ describe("Profile Component", () => {
expect(store.dispatch).toHaveBeenCalledWith(setUser(null));
});
- it("handles mutation onError by logging the error", () => {
- const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
- vi.mocked(useSelector).mockReturnValue(mockUserFull);
- let mutationConfig: any;
- vi.mocked(useMutation).mockImplementation((config: any) => {
- mutationConfig = config;
- return { mutate: vi.fn(), isPending: false } as any;
- });
-
- render(
);
- const testError = new Error("Test error message");
- mutationConfig.onError(testError);
-
- expect(consoleSpy).toHaveBeenCalledWith("An error occurred:", "Test error message");
- consoleSpy.mockRestore();
- });
-
- it("displays correct contact details when available", () => {
- vi.mocked(useSelector).mockReturnValue(mockUserFull);
- render(
);
-
- expect(screen.getByText("hacker777@example.com")).toBeInTheDocument();
- expect(screen.getByText("@hacker777")).toBeInTheDocument();
- expect(screen.getByText("hacker777")).toBeInTheDocument();
- expect(screen.getByText("hacker#7777")).toBeInTheDocument();
- });
-
- it("displays missing state 'Відсутній' for all missing contact details", () => {
+ it("displays missing state 'missing' for all missing contact details", () => {
vi.mocked(useSelector).mockReturnValue(mockUserEmpty);
render(
);
- const missingBadges = screen.getAllByText("Відсутній");
- expect(missingBadges).toHaveLength(3);
+ const missingBadges = screen.getAllByText("missing");
+ expect(missingBadges).toHaveLength(3); // Telegram, GitHub, Discord
});
it("applies specific colors for Telegram chip", () => {
vi.mocked(useSelector).mockReturnValue(mockUserFull);
render(
);
-
+
const telegramValue = screen.getByText("@hacker777");
const chipWrapper = telegramValue.closest("div");
-
- expect(chipWrapper).toHaveClass("bg-[#eff6ff]");
- expect(chipWrapper).toHaveClass("text-[#2563eb]");
+
+ expect(chipWrapper).toHaveClass("bg-blue-500/10");
+ expect(chipWrapper).toHaveClass("text-blue-600");
});
it("applies specific colors for Discord chip", () => {
vi.mocked(useSelector).mockReturnValue(mockUserFull);
render(
);
-
+
const discordValue = screen.getByText("hacker#7777");
const chipWrapper = discordValue.closest("div");
-
- expect(chipWrapper).toHaveClass("bg-[#f5f3ff]");
- expect(chipWrapper).toHaveClass("text-[#7c3aed]");
- });
- it("applies default colors for Email chip", () => {
- vi.mocked(useSelector).mockReturnValue(mockUserFull);
- render(
);
-
- const emailValue = screen.getByText("hacker777@example.com");
- const chipWrapper = emailValue.closest("div");
-
- expect(chipWrapper).toHaveClass("bg-[#f3f4f6]");
- expect(chipWrapper).toHaveClass("text-[#111827]");
+ expect(chipWrapper).toHaveClass("bg-purple-500/10");
+ expect(chipWrapper).toHaveClass("text-purple-600");
});
- it("displays tournament lists correctly with dot color", () => {
+ it("displays tournament lists correctly from API data", () => {
vi.mocked(useSelector).mockReturnValue(mockUserFull);
render(
);
- expect(screen.getByText("Турніри")).toBeInTheDocument();
+ expect(screen.getByText("tournaments")).toBeInTheDocument();
expect(screen.getByText("Напишіть Ядро Лінукс")).toBeInTheDocument();
- expect(screen.getByText("Напишіть свою мову програмування")).toBeInTheDocument();
+ expect(
+ screen.getByText("Напишіть свою мову програмування"),
+ ).toBeInTheDocument();
expect(screen.getByText("Напишіть гру на JS")).toBeInTheDocument();
-
- const listArrows = screen.getAllByText("❯");
- expect(listArrows).toHaveLength(3);
});
-});
\ No newline at end of file
+});
diff --git a/frontend/src/pages/Profile/Profile.tsx b/frontend/src/pages/Profile/Profile.tsx
index b5bd3ea..da75245 100644
--- a/frontend/src/pages/Profile/Profile.tsx
+++ b/frontend/src/pages/Profile/Profile.tsx
@@ -1,12 +1,15 @@
-import "./Profile.css";
+import { useState, type FC } from "react";
import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "@tanstack/react-query";
+
import { auth } from "../../firebase";
import { store, type RootState } from "../../store";
import { deleteUser } from "@/api/requests";
-import { useMutation } from "@tanstack/react-query";
import { setUser } from "@/slices/user";
-import { useState, type FC } from "react";
import { EditProfileModal } from "./EditProfileModal";
+import { Button } from "@/components/ui/Button";
+import { cn } from "@/utils/cn";
interface UserRole {
name: string;
@@ -14,7 +17,7 @@ interface UserRole {
}
interface UserData {
- id: string;
+ id: string | number;
displayName?: string;
full_name?: string;
email: string;
@@ -22,6 +25,7 @@ interface UserData {
github?: string;
discord?: string;
roles?: UserRole[];
+ created_tournaments?: Array<{ id: number; title?: string; name?: string }>;
}
interface ContactChipProps {
@@ -38,13 +42,14 @@ interface ListCardProps {
}
const Profile: FC = () => {
+ const { t } = useTranslation("profile");
const user = useSelector((s: RootState) => s.user.user as UserData | null);
const [isEditModalOpen, setIsEditModalOpen] = useState
(false);
const deleteUserMutation = useMutation({
mutationKey: ["delete user"],
mutationFn: async () => {
- if (!auth.currentUser) throw new Error("Користувач не авторизований");
+ if (!auth.currentUser) throw new Error(t("errors.not_authorized"));
await deleteUser(auth.currentUser);
},
onSuccess: async () => {
@@ -56,15 +61,28 @@ const Profile: FC = () => {
},
});
- if (!user) return Завантаження...
;
+ if (!user) {
+ return (
+
+ {t("loading")}
+
+ );
+ }
+
+ const userTournaments =
+ user.created_tournaments && user.created_tournaments.length > 0
+ ? user.created_tournaments.map(
+ (t) => t.title || t.name || t("tournament_unnamed"),
+ )
+ : [t("no_tournaments")];
return (
-
+
-
+
-
+
+
- {user.displayName || user.full_name || "Без імені"}
+ {user.displayName || user.full_name || t("unnamed")}
-
- Роль:{" "}
+
+ {t("role")}:{" "}
{user.roles && user.roles.length > 0
- ? user.roles
- .map((r) => r.display_name || r.name)
- .join(", ")
- : "Немає ролей"}
+ ? user.roles.map((r) => r.display_name || r.name).join(", ")
+ : t("no_roles")}
-
-
-
+
-
- СПОСОБИ ЗВ'ЯЗКУ
+
+ {t("contact_methods")}
@@ -135,16 +158,14 @@ const Profile: FC = () => {
+
setIsEditModalOpen(false)}
@@ -157,40 +178,65 @@ const Profile: FC = () => {
const ContactChip: FC = ({
label,
value,
- colorClass = "bg-[#f3f4f6] border-[#e5e7eb] text-[#111827]",
-}) => (
-
- {label}:
- {value ?? "Відсутній"}
-
-);
+ colorClass = "bg-bg-body border-border text-text-main",
+}) => {
+ const { t } = useTranslation("profile");
+
+ return (
+
+ {label}:
+ {value ?? t("missing")}
+
+ );
+};
-const ListCard: FC = ({ title, dotColor, items, isTeams = false }) => (
-
-
- {title}
+const ListCard: FC = ({
+ title,
+ dotColor,
+ items,
+ isTeams = false,
+ emptyMessage,
+}) => (
+
+
+ {title}
- {items.map((item, i) => (
-
-
- {isTeams && (
-
- 🤖
-
+ {items.length > 0 ? (
+ items.map((item, i) => (
+
+
+ {isTeams && (
+
+ 🤖
+
+ )}
+
+ {item}
+
+
+ {!isTeams && (
+
+ ❯
+
)}
-
{item}
- {!isTeams &&
❯}
+ ))
+ ) : (
+
+ {emptyMessage}
- ))}
+ )}
);
-export { Profile };
\ No newline at end of file
+export { Profile };
diff --git a/frontend/src/pages/RegistrationPage/RegistrationPage.tsx b/frontend/src/pages/RegistrationPage/RegistrationPage.tsx
new file mode 100644
index 0000000..9eca605
--- /dev/null
+++ b/frontend/src/pages/RegistrationPage/RegistrationPage.tsx
@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+import { useParams, Navigate, useNavigate, Link } from "react-router-dom";
+import { useForm, FormProvider } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+
+import { TOURNAMENTS_DATA } from "../../data/mockTournaments";
+import { BrandingPanel } from "../../components/ui/BrandingPanel";
+import { Ticket3D } from "../../components/ui/Ticket3D";
+
+import { makeSchema, type RegFormData, type TournamentConfig } from "./types";
+import { StepsNav } from "./components/StepsNav";
+import { StepGeneral } from "./components/StepGeneral";
+import { StepMembers } from "./components/StepMembers";
+import { StepConfirm } from "./components/StepConfirm";
+import { StepSuccess } from "./components/StepSuccess";
+
+export const RegistrationPage = () => {
+ const { t } = useTranslation("registration");
+ const navigate = useNavigate();
+ const { id } = useParams();
+
+ const user = {
+ displayName: "izachoc",
+ full_name: "Андрій Іванченко",
+ email: "andriy.test@gmail.com",
+ telegram: "@izachoc_dev",
+ github: "izachoc-code",
+ discord: "izachoc#1234",
+ };
+
+ const captainDisplayName = user?.full_name || user?.displayName || "Анонім";
+ const captainEmail = user?.email || "";
+
+ const foundTournament = TOURNAMENTS_DATA.find((t) => t.id === Number(id));
+ if (!foundTournament) return
;
+
+ const cfg: TournamentConfig = {
+ id: `UG-${String(foundTournament.id).padStart(3, "0")}`,
+ title: foundTournament.title,
+ minMembers: foundTournament.minMembers ?? 1,
+ maxMembers: foundTournament.maxMembers ?? 5,
+ customFields: foundTournament.customFields,
+ };
+
+ const [step, setStep] = useState(1);
+ const [isSuccess, setIsSuccess] = useState(false);
+ const [ticketId, setTicketId] = useState("");
+
+ const methods = useForm
({
+ resolver: zodResolver(makeSchema(cfg, t)),
+ defaultValues: {
+ format: cfg.maxMembers === 1 ? "solo" : "team",
+ members: [],
+ captainFullName: user?.full_name || "",
+ customFields: {
+ telegram: user?.telegram || "",
+ github: user?.github || "",
+ discord: user?.discord || "",
+ },
+ },
+ });
+
+ const { watch, handleSubmit, trigger } = methods;
+ const formValues = watch();
+ const isSolo = formValues.format === "solo";
+
+ const capName = formValues.captainFullName?.trim() || captainDisplayName;
+ const ticketTeamName = formValues.teamName?.trim() || capName;
+
+ const onSubmit = async (data: RegFormData) => {
+ const newId = `TKT-${Math.floor(100000 + Math.random() * 900000)}`;
+ setTicketId(newId);
+ setIsSuccess(true);
+ };
+
+ return (
+
+
+
+
+
{t("brand")}
+
×
+
Star for Life
+
+
+
+ {t("breadcrumbs.tournaments")}
+ /
+
+ {t("breadcrumbs.registration")}
+
+
+
+
+
+
+
+
+
+
+ ({ name: m.name }))}
+ />
+
+
+ {state === "done" ? : num}
+
+);
+
+export const FieldInput = React.forwardRef<
+ HTMLInputElement,
+ React.InputHTMLAttributes & {
+ hasError?: boolean;
+ isValid?: boolean;
+ }
+>(({ hasError, isValid, className = "", ...props }, ref) => (
+
+));
+FieldInput.displayName = "FieldInput";
+
+export const BtnNext = ({
+ children,
+ onClick,
+ disabled,
+ className = "",
+}: {
+ children: React.ReactNode;
+ onClick?: () => void;
+ disabled?: boolean;
+ className?: string;
+}) => (
+
+ {children}
+
+);
+
+export const BtnBack = ({
+ onClick,
+ disabled,
+}: {
+ onClick: () => void;
+ disabled?: boolean;
+}) => {
+ const { t } = useTranslation("registration");
+ return (
+
+ {t("buttons.back")}
+
+ );
+};
diff --git a/frontend/src/pages/RegistrationPage/components/Icons.tsx b/frontend/src/pages/RegistrationPage/components/Icons.tsx
new file mode 100644
index 0000000..77db9f6
--- /dev/null
+++ b/frontend/src/pages/RegistrationPage/components/Icons.tsx
@@ -0,0 +1,31 @@
+import {
+ Check,
+ ChevronRight,
+ ChevronLeft,
+ ChevronDown,
+ Plus,
+ X,
+ Info,
+ AlertTriangle,
+ Users,
+ User,
+ Home,
+ Send,
+} from "lucide-react";
+
+export const Icon = {
+ Check: Check,
+ ChevronRight: ChevronRight,
+ ChevronLeft: ChevronLeft,
+ ChevronDown: ChevronDown,
+ Plus: Plus,
+ X: X,
+ Info: Info,
+ Warning: AlertTriangle,
+ Team: Users,
+ Solo: User,
+ User: User,
+ Users: Users,
+ Org: Home,
+ Telegram: Send,
+};
diff --git a/frontend/src/pages/RegistrationPage/components/StepConfirm.tsx b/frontend/src/pages/RegistrationPage/components/StepConfirm.tsx
new file mode 100644
index 0000000..2211ec7
--- /dev/null
+++ b/frontend/src/pages/RegistrationPage/components/StepConfirm.tsx
@@ -0,0 +1,139 @@
+import React from "react";
+import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Icon } from "./Icons";
+import { BtnNext, BtnBack } from "./FormUI";
+import type { RegFormData, TournamentConfig } from "../types";
+
+interface StepConfirmProps {
+ cfg: TournamentConfig;
+ capName: string;
+ captainEmail: string;
+ onBack: () => void;
+}
+
+export const StepConfirm: React.FC = ({
+ cfg,
+ capName,
+ captainEmail,
+ onBack,
+}) => {
+ const { t } = useTranslation("registration");
+ const { watch } = useFormContext();
+ const formValues = watch();
+ const isSolo = formValues.format === "solo";
+
+ return (
+
+
+ {t("step_3.title")}
+
+
+ {t("step_3.subtitle")}
+
+
+
+
+
+ UGalaxy
+
+
+ {cfg.title}
+
+
+ {formValues.teamName || capName}
+
+
+
+
+
+
+
+
+
+
+ {isSolo
+ ? t("step_3.labels.player")
+ : t("step_3.labels.captain")}
+
+
+
+ {capName}{" "}
+ •{" "}
+ {captainEmail}
+
+
+ {cfg.customFields?.map((f) => {
+ const val =
+ formValues.customFields?.[
+ f.id as keyof typeof formValues.customFields
+ ];
+ if (!val) return null;
+ return (
+
+ {f.label}:
+
+ {val as string}
+
+
+ );
+ })}
+
+
+ {!isSolo && (formValues.members?.length ?? 0) > 0 && (
+
+
+
+
+
+
+ {t("step_3.labels.members")}
+
+
+
+
+ {formValues.members?.map((m, i) => (
+
+
+ {m.name}{" "}
+
+ •
+ {" "}
+ {m.email}
+
+ {cfg.customFields?.map((f) => {
+ const val = (m as any).customFields?.[f.id];
+ if (!val) return null;
+ return (
+
+ {f.label}:
+
+ {val}
+
+
+ );
+ })}
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+
+ {t("step_3.warning")}
+
+
+
+
+
+ {t("step_3.submit_btn")}
+
+
+
+
+
+ {t("step_1.title")}
+
+
+ {t("step_1.subtitle")}
+
+ {cfg.title}
+
+
+
+
+ {isMixedFormat && (
+
+
+ {t("step_1.format.label")}
+
+
+
+ {(["team", "solo"] as const).map((f) => {
+ const isActive = format === f;
+
+ return (
+
+ );
+ })}
+
+
+ )}
+
+
+
+ {isSolo
+ ? t("step_1.team_name.label_solo")
+ : t("step_1.team_name.label")}
+
+
+
+ {errors.teamName && (
+
+ {errors.teamName.message as string}
+
+ )}
+
+
+
+
+ {t("step_1.captain.label")}
+
+
+
+
+
+
+
+ {t("step_1.captain.info")}
+
+
+
+
+
+ {captainDisplayName[0]?.toUpperCase() ?? "А"}
+
+
+
+ {captainDisplayName}
+
+
+ {captainEmail}
+
+
+
+ {t("step_1.captain.badge")}
+
+
+
+
+
+
+
+
+ {cfg.customFields && cfg.customFields.length > 0 && (
+
+
+
+
+ {optOpen && (
+
+
+ {cfg.customFields.map((field) => {
+ const fieldError =
+ errors.customFields?.[
+ field.id as keyof typeof errors.customFields
+ ];
+
+ return (
+
+
+
+ {fieldError && (
+
+ {fieldError.message as string}
+
+ )}
+
+ );
+ })}
+
+
+ )}
+
+
+
+
+ {isSolo ? t("step_1.next.confirm") : t("step_1.next.members")}
+
+
+
+
+
+
+ {t("step_2.title")}
+
+
+ {t("step_2.subtitle_1")}{" "}
+ {minTeammates}{" "}
+ {t("step_2.subtitle_2")}{" "}
+ {maxTeammates}{" "}
+ {t("step_2.subtitle_3")}
+
+
+
+
+
+ {t("step_2.counter.label")}
+
+
+ {fields.length} /{" "}
+ {maxTeammates}
+
+
+
+
+
+
+
+
+ {t("step_2.counter.min")} {minTeammates}
+
+
+ {t("step_2.counter.max")} {maxTeammates}
+
+
+
+
+
+
+ {fields.length === 0 && (
+
+
+
+
+
+
+
+
+ {t("step_2.empty_title")}
+
+
+ {t("step_2.empty_state")}
+
+
+
+
+
+ {fields.map((field, index) => {
+ const memberErrors = errors.members?.[index];
+
+ return (
+
+
+
+
+
+
+ {index + 1}
+
+ {t("step_2.participant_label")} {index + 1}
+
+
+
+
+
+
+ {memberErrors?.name && (
+
+ {memberErrors.name.message}
+
+ )}
+
+
+
+
+ {memberErrors?.email && (
+
+ {memberErrors.email.message}
+
+ )}
+
+
+ {cfg.customFields?.map((cField) => {
+ const customError = (memberErrors as any)?.customFields?.[
+ cField.id
+ ];
+
+ return (
+
+
+
+ {customError && (
+
+ {customError.message}
+
+ )}
+
+ );
+ })}
+
+
+
+
+
+
+ {membersError && (
+
+
+
+
+ {membersError}
+
+ )}
+
+
+
+
+
+ {t("step_2.next_btn")}{" "}
+
+
+
+
+
+
+
+
+ {isSolo ? t("success.title_solo") : t("success.title")}
+
+
+
+ {t("success.desc")}
+
+
+
+
+ {t("success.home_btn")}{" "}
+
+
+
+
+ );
+};
diff --git a/frontend/src/pages/RegistrationPage/components/StepsNav.tsx b/frontend/src/pages/RegistrationPage/components/StepsNav.tsx
new file mode 100644
index 0000000..59d13f3
--- /dev/null
+++ b/frontend/src/pages/RegistrationPage/components/StepsNav.tsx
@@ -0,0 +1,90 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { StepCircle } from "./FormUI";
+
+interface StepsNavProps {
+ step: number;
+ isSolo: boolean;
+}
+
+export const StepsNav: React.FC = ({ step, isSolo }) => {
+ const { t } = useTranslation("registration");
+
+ const stepState = (n: number): "active" | "done" | "idle" =>
+ step === n ? "active" : step > n ? "done" : "idle";
+
+ const steps = [
+ { id: 1, label: t("nav.step_1"), actualStep: 1, visualNum: 1 },
+ ...(!isSolo
+ ? [
+ {
+ id: 2,
+ label: t("nav.step_2"),
+ actualStep: 2,
+ visualNum: 2,
+ },
+ ]
+ : []),
+ {
+ id: 3,
+ label: t("nav.step_3"),
+ actualStep: 3,
+ visualNum: isSolo ? 2 : 3,
+ },
+ ];
+
+ return (
+
+
+
+ {steps.map((s, idx) => {
+ const isLast = idx === steps.length - 1;
+ const state = stepState(s.actualStep);
+
+ return [
+
+
+
+
+ {s.label}
+
+ ,
+
+ !isLast && (
+
+ s.actualStep ? 1 : 0 }}
+ transition={{ duration: 0.45, ease: "easeInOut" }}
+ />
+
+ ),
+ ];
+ })}
+
+
+
-
-
-
-
+
+
-
- Конституція Платформи
-
-
- ПРАВИЛА
-
-
- Щоб перебування на платформі було комфортним та продуктивним для всіх,
- ми просимо дотримуватися кількох простих, але важливих правил.
-
-
-
+
{rules.map((rule, index) => (
-
-
+
{rule.id}
{rule.icon}
-
+
{rule.id}.
-
+
{rule.title}
-
+
{rule.description}
-
+
))}
-
-
+
+
+
-
- Згодні з правилами? Тоді вперед до перемог! 🚀
+
+ {t("cta.title")}
-
- Обирай свій перший турнір, збирай команду мрії та покажи, на що ти
- здатен.
+
+ {t("cta.desc")}
-
- Перейти до турнірів
-
-
+
+
+
+
+
+
);
};
-
-export { RulesPage };
diff --git a/frontend/src/pages/SupportPage/SupportPage.tsx b/frontend/src/pages/SupportPage/SupportPage.tsx
index d5eca66..8680f96 100644
--- a/frontend/src/pages/SupportPage/SupportPage.tsx
+++ b/frontend/src/pages/SupportPage/SupportPage.tsx
@@ -1,152 +1,109 @@
import React from "react";
+import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { Heart, Handshake, Users2 } from "lucide-react";
+import { Hero } from "../../components/Hero";
+import { Button } from "../../components/ui/Button";
+
+const SupportPageComponent: React.FC = () => {
+ const { t } = useTranslation("support");
-const SupportPage: React.FC = () => {
const supportOptions = [
{
- title: "Задонатити",
- description:
- "Твій фінансовий внесок безпосередньо допомагає забезпечувати дітей якісною освітою, психологічною підтримкою та необхідними ресурсами.",
- buttonText: "Зробити внесок",
+ badge: t("options.donate.badge"),
+ title: t("options.donate.title"),
+ description: t("options.donate.description"),
+ buttonText: t("options.donate.button"),
link: "https://www.sflua.org/uk/donate-1",
- gradient: "from-rose-400 to-pink-500",
- iconBg: "bg-rose-100",
- iconColor: "text-rose-500",
- btnHover: "hover:shadow-rose-500/30",
- icon: (
-
- ),
+ icon:
,
},
{
- title: "Партнерство",
- description:
- "Стань нашим партнером! Разом ми зможемо реалізувати масштабні проекти, залучити більше ресурсів та створити сталі зміни в суспільстві.",
- buttonText: "Стати партнером",
+ badge: t("options.partnership.badge"),
+ title: t("options.partnership.title"),
+ description: t("options.partnership.description"),
+ buttonText: t("options.partnership.button"),
link: "mailto:team@starforlife.org.ua?subject=Potential%20partnership",
- gradient: "from-blue-500 to-indigo-600",
- iconBg: "bg-blue-100",
- iconColor: "text-blue-600",
- btnHover: "hover:shadow-blue-500/30",
- icon: (
-
- ),
+ icon:
,
},
{
- title: "Волонтерство",
- description:
- "Поділися своїм часом, знаннями та навичками. Твоя особиста участь та підтримка можуть стати вирішальними для майбутнього дитини.",
- buttonText: "Стати волонтером",
- link: "https://www.sflua.org/uk/volunteer", // TODO: Встав сюди посилання на анкету волонтера
- gradient: "from-emerald-400 to-teal-500",
- iconBg: "bg-emerald-100",
- iconColor: "text-emerald-600",
- btnHover: "hover:shadow-emerald-500/30",
- icon: (
-
- ),
+ badge: t("options.volunteer.badge"),
+ title: t("options.volunteer.title"),
+ description: t("options.volunteer.description"),
+ buttonText: t("options.volunteer.button"),
+ link: "https://www.sflua.org/uk/volunteer",
+ icon:
,
},
];
return (
-
-
-
-
+
+
-
- Твоя підтримка важлива
-
-
- ПІДТРИМАТИ НАС
-
-
- Ось кілька способів, як ви можете нас підтримати та долучитися до
- створення кращого майбутнього для дітей України.
-
-
-
-
-
+
+
{supportOptions.map((option, index) => (
-
-
-
-
-
- Кожна гривня, кожна година вашого часу та кожна спільна ініціатива
- наближають нас до мети.{" "}
-
- Дякуємо, що ви з нами!
- {" "}
- 💙💛
+
+
+ {t("footer_note")}
-
+
);
};
-export { SupportPage };
+export const SupportPage = SupportPageComponent;
diff --git a/frontend/src/pages/TournamentsPage/TournamentsPage.tsx b/frontend/src/pages/TournamentsPage/TournamentsPage.tsx
index 5d7fde8..4145e1a 100644
--- a/frontend/src/pages/TournamentsPage/TournamentsPage.tsx
+++ b/frontend/src/pages/TournamentsPage/TournamentsPage.tsx
@@ -1,7 +1,7 @@
import { useState, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Search, ChevronLeft, ChevronRight } from "lucide-react";
-import { tournamentStatusByName } from "@/config/appConfig";
+import { useTranslation } from "react-i18next";
import { Hero } from "../../components/Hero";
import { TournamentCard } from "../../components/TournamentCard";
@@ -9,38 +9,20 @@ import {
TOURNAMENTS_DATA,
type TournamentStatus,
} from "../../data/mockTournaments";
+import { cn } from "../../utils/cn";
const PER_PAGE = 15;
-const FILTER_OPTIONS: {
- id: TournamentStatus | "all";
- label: string;
- dotColor?: string;
-}[] = [
- { id: "all", label: "Всі події" },
- {
- id: "draft",
- label: tournamentStatusByName.draft.display_name,
- dotColor: "bg-amber-500",
- },
- {
- id: "registration",
- label: tournamentStatusByName.registration.display_name,
- dotColor: "bg-green-500",
- },
- {
- id: "running",
- label: tournamentStatusByName.running.display_name,
- dotColor: "bg-pink-500",
- },
- {
- id: "finished",
- label: tournamentStatusByName.finished.display_name,
- dotColor: "bg-slate-400",
- },
+const FILTER_IDS: { id: TournamentStatus | "all"; dotColor?: string }[] = [
+ { id: "all" },
+ { id: "draft", dotColor: "bg-amber-500" },
+ { id: "registration", dotColor: "bg-green-500" },
+ { id: "running", dotColor: "bg-pink-accent" },
+ { id: "finished", dotColor: "bg-text-muted" },
];
export const TournamentsPage = () => {
+ const { t } = useTranslation("tournaments");
const [query, setQuery] = useState("");
const [filter, setFilter] = useState
("all");
const [page, setPage] = useState(1);
@@ -73,10 +55,7 @@ export const TournamentsPage = () => {
const containerVariants = {
hidden: { opacity: 0 },
- show: {
- opacity: 1,
- transition: { staggerChildren: 0.1 },
- },
+ show: { opacity: 1, transition: { staggerChildren: 0.1 } },
};
const itemVariants = {
@@ -89,54 +68,62 @@ export const TournamentsPage = () => {
};
return (
-
+
-
+
-
-
-
+
+
+
-
- {FILTER_OPTIONS.map((option) => (
+
+ {FILTER_IDS.map((option) => (
))}
-
- Знайдено:{" "}
+
+ {t("results.found")}{" "}
{filteredData.length}{" "}
- турнірів
+ {filteredData.length === 1
+ ? t("results.tournaments_one")
+ : t("results.tournaments_many")}
@@ -162,36 +149,36 @@ export const TournamentsPage = () => {
) : (
- 🔍
-
- Нічого не знайдено
+ 🔍
+
+ {t("empty.title")}
-
- Спробуй змінити фільтр або запит
+
+ {t("empty.subtitle")}
)}
{totalPages > 1 && (
-
-
+
+
@@ -203,11 +190,12 @@ export const TournamentsPage = () => {
setPage(p);
window.scrollTo({ top: 0, behavior: "smooth" });
}}
- className={`w-[38px] h-[38px] rounded-xl flex items-center justify-center font-bold text-[15px] transition-all duration-200 border-[1.5px] ${
+ className={cn(
+ "w-[40px] h-[40px] rounded-xl flex items-center justify-center font-bold text-[15px] transition-all duration-300 border-[1.5px]",
page === p
? "bg-primary text-white border-primary shadow-md shadow-primary/20"
- : "bg-transparent text-slate-500 border-transparent hover:bg-white hover:border-slate-200 hover:text-slate-900 hover:shadow-sm"
- }`}
+ : "bg-transparent text-text-muted border-transparent hover:bg-bg-card hover:border-border hover:text-text-main hover:shadow-sm",
+ )}
>
{p}
@@ -221,15 +209,17 @@ export const TournamentsPage = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
}}
disabled={page === totalPages}
- className="flex items-center gap-1 font-quicksand font-extrabold text-[14px] text-slate-500 hover:text-primary disabled:opacity-30 disabled:hover:text-slate-500 transition-colors"
+ className="flex items-center gap-1.5 font-nunito font-extrabold text-[15px] text-text-muted hover:text-primary disabled:opacity-30 disabled:hover:text-text-muted transition-colors duration-300"
>
- Вперед
-
+ {t("pagination.next")}
+
-
- Сторінка
{page} з{" "}
- {totalPages}
+
+
+ {t("pagination.page")}{" "}
+ {page}{" "}
+ {t("pagination.of")} {totalPages}
)}
diff --git a/frontend/src/routers/Router.tsx b/frontend/src/routers/Router.tsx
index 302b62c..1506cfe 100644
--- a/frontend/src/routers/Router.tsx
+++ b/frontend/src/routers/Router.tsx
@@ -19,12 +19,12 @@ import { OrganizerPanel } from "@/pages/OrganizerPanel/OrganizerPanel";
import { NewsPage } from "@/pages/NewsPage/NewsPage";
import JuryPanel from "@/pages/JuryPanel/JuryPanel";
import EvaluateTournamentPage from "@/pages/JuryPanel/EvaluateTournamentPage";
+import { RegistrationPage } from "@/pages/RegistrationPage/RegistrationPage";
export const Router = () => {
return (
- {/* Сторінки з Хедером та Футером */}
}>
} />
{
/>
} />
} />
+
+
+
+
+ }
+ />
+
{
} />
} />
- } />
- } />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
} />
} />
diff --git a/frontend/src/slices/user.ts b/frontend/src/slices/user.ts
index 94ca149..1bd1860 100644
--- a/frontend/src/slices/user.ts
+++ b/frontend/src/slices/user.ts
@@ -23,7 +23,7 @@ export interface ApiUserData {
evaluates_in: Tournament[];
}
-export interface UserData extends ApiUserData, FirebaseUserData { }
+export interface UserData extends ApiUserData, FirebaseUserData {}
interface UserState {
user: UserData | null | undefined;
@@ -44,8 +44,11 @@ export const userSlice = createSlice({
if (!state.user) return;
state.user.displayName = action.payload;
},
+ clearUser: (state) => {
+ state.user = null;
+ },
},
});
-export const { setUser, setDisplayName } = userSlice.actions;
+export const { setUser, setDisplayName, clearUser } = userSlice.actions;
export default userSlice.reducer;
diff --git a/frontend/src/utils/cn.ts b/frontend/src/utils/cn.ts
new file mode 100644
index 0000000..a5ef193
--- /dev/null
+++ b/frontend/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}