From 960caeb08596579c35fe8347fdc4c4ea38bd2954 Mon Sep 17 00:00:00 2001
From: EduardZaydler <117674342+EduardZaydler@users.noreply.github.com>
Date: Tue, 10 Dec 2024 16:50:54 +0500
Subject: [PATCH] teams page redesign (#563)

---
 playwright/e2eTests/teamsOperations.spec.ts   |  4 ++-
 playwright/e2eTests/triggerOperations.spec.ts |  3 +-
 playwright/pages/teams.page.ts                |  8 +++--
 .../ChristmasMoodToggle.tsx                   | 13 ++++++--
 src/Components/Grid/Grid.less                 |  1 -
 src/Components/Header/Header.tsx              |  5 ++--
 src/Components/Teams/TeamCard/TeamCard.tsx    |  7 ++++-
 src/Components/Teams/Teams.tsx                | 10 ++-----
 src/Components/TeamsList/TeamsList.tsx        | 23 ++++++++++++++
 .../AllTeamsContainer/AllTeamsContainer.less  |  5 ----
 .../AllTeamsContainer/AllTeamsContainer.tsx   | 30 ++++---------------
 src/Containers/SettingsContainer.tsx          |  2 +-
 src/Containers/TeamContainer.tsx              | 25 ----------------
 src/Containers/TeamWithUsers.tsx              | 25 ----------------
 src/Containers/TeamsContainer.tsx             |  4 +--
 src/Domain/Global.ts                          |  2 --
 src/desktop.bundle.tsx                        |  2 --
 src/hooks/themes/useThemeFeature.ts           |  2 +-
 src/hooks/useChristmasMood.ts                 |  4 +--
 src/hooks/useFeatureFlag.ts                   |  2 +-
 src/store/Reducers/UIReducer.slice.ts         |  5 +---
 yarn.lock                                     | 11 ++-----
 22 files changed, 67 insertions(+), 126 deletions(-)
 create mode 100644 src/Components/TeamsList/TeamsList.tsx
 delete mode 100644 src/Containers/AllTeamsContainer/AllTeamsContainer.less
 delete mode 100644 src/Containers/TeamContainer.tsx
 delete mode 100644 src/Containers/TeamWithUsers.tsx

diff --git a/playwright/e2eTests/teamsOperations.spec.ts b/playwright/e2eTests/teamsOperations.spec.ts
index 877d4f434..5c8634aef 100644
--- a/playwright/e2eTests/teamsOperations.spec.ts
+++ b/playwright/e2eTests/teamsOperations.spec.ts
@@ -35,6 +35,7 @@ test("Add team", async ({ page, teamName, teamDescription, teamsPage }) => {
 });
 
 test("Edit team description", async ({ page, teamDescription, teamsPage, teamName }) => {
+    await teamsPage.teamCardKebab.click();
     await teamsPage.editTeamButton.click();
     await expect(teamsPage.nameInput("Team name")).toHaveValue(teamName);
     await expect(teamsPage.teamDescription).toContainText(teamDescription);
@@ -64,7 +65,8 @@ test("Delete user", async ({ page, userName, teamsPage }) => {
 });
 
 test("Delete team", async ({ page, teamName, teamsPage }) => {
-    await teamsPage.deleteTeamButton(teamName + " changed").click();
+    await teamsPage.teamCardKebab.click();
+    await teamsPage.deleteTeamButton.click();
     await page.getByRole("button", { name: "Confirm" }).click();
     await expect(
         page.locator(`:text("${teamName}"):right-of(span[data-tid='Delete team ${teamName}'])`)
diff --git a/playwright/e2eTests/triggerOperations.spec.ts b/playwright/e2eTests/triggerOperations.spec.ts
index 0ebefe729..0775a32b6 100644
--- a/playwright/e2eTests/triggerOperations.spec.ts
+++ b/playwright/e2eTests/triggerOperations.spec.ts
@@ -79,8 +79,7 @@ test("Set trigger maintenance for all intervals", async ({ triggerName, page })
 
             const requestBody = JSON.parse(setMaintenanceRequest.postData() || "{}");
             expect(requestBody).not.toBeNull();
-            expect(requestBody.trigger).toEqual(expectedTriggerTime);
-
+            expect(Math.abs(requestBody.trigger - expectedTriggerTime)).toBeLessThanOrEqual(1);
             if (maintenance === Maintenance.off) {
                 await expect(page.getByText("Maintenance")).toBeVisible();
             } else
diff --git a/playwright/pages/teams.page.ts b/playwright/pages/teams.page.ts
index 1de8d9a39..5b2535bac 100644
--- a/playwright/pages/teams.page.ts
+++ b/playwright/pages/teams.page.ts
@@ -6,11 +6,12 @@ export class TeamsPage {
     readonly nameInput: (testId: string) => Locator;
     readonly teamDescription: Locator;
     readonly previewButton: Locator;
+    readonly teamCardKebab: Locator;
     readonly editTeamButton: Locator;
     readonly showUsersButton: Locator;
     readonly addUserModalButton: Locator;
     readonly deleteUserButton: (userName: string) => Locator;
-    readonly deleteTeamButton: (teamName: string) => Locator;
+    readonly deleteTeamButton: Locator;
 
     constructor(page: Page) {
         this.page = page;
@@ -18,11 +19,12 @@ export class TeamsPage {
         this.nameInput = (testId) => page.locator(`label[data-tid='${testId}'] > span > input`);
         this.teamDescription = page.locator("[data-tid='Team description']");
         this.previewButton = page.getByText("Preview");
-        this.editTeamButton = page.getByRole("button", { name: "Edit Team" });
+        this.teamCardKebab = page.locator("[data-tid='Team card kebab']");
+        this.editTeamButton = page.getByRole("button", { name: "Edit" });
         this.showUsersButton = page.getByText("Show users");
         this.addUserModalButton = page.locator("[data-tid='Add user modal']");
         this.deleteUserButton = (userName) => page.locator(`[data-tid="Delete user ${userName}"]`);
-        this.deleteTeamButton = (teamName) => page.locator(`[data-tid="Delete team ${teamName}"]`);
+        this.deleteTeamButton = page.getByRole("button", { name: "Delete" });
     }
 
     async gotoTeamsPage(): Promise<void> {
diff --git a/src/Components/ChristmasMoodToggle/ChristmasMoodToggle.tsx b/src/Components/ChristmasMoodToggle/ChristmasMoodToggle.tsx
index 75ed25691..c4c1e06ef 100644
--- a/src/Components/ChristmasMoodToggle/ChristmasMoodToggle.tsx
+++ b/src/Components/ChristmasMoodToggle/ChristmasMoodToggle.tsx
@@ -3,18 +3,25 @@ import { Toggle } from "@skbkontur/react-ui/components/Toggle";
 import { useChristmasMood } from "../../hooks/useChristmasMood";
 import { useAppDispatch } from "../../store/hooks";
 import { toggleChristmasMood } from "../../store/Reducers/UIReducer.slice";
+import { useSelector } from "react-redux";
+import { selectIsChristmasMood } from "../../store/Reducers/ConfigReducer.slice";
 
 export const ChristmasMoodToggle: FC = () => {
     const dispatch = useAppDispatch();
     const [isChristmasMood, setChristmasMood] = useChristmasMood();
+    const isChristmasMoodEnabled = useSelector(selectIsChristmasMood);
 
     const handleToggleChristmasMood = (selected: boolean) => {
         setChristmasMood(selected);
         dispatch(toggleChristmasMood(selected));
     };
     return (
-        <Toggle checked={isChristmasMood} onValueChange={handleToggleChristmasMood}>
-            <span style={{ color: "#fff" }}>New Year mood</span>
-        </Toggle>
+        <>
+            {isChristmasMoodEnabled ? (
+                <Toggle checked={isChristmasMood} onValueChange={handleToggleChristmasMood}>
+                    <span style={{ color: "#fff" }}>New Year mood</span>
+                </Toggle>
+            ) : null}
+        </>
     );
 };
diff --git a/src/Components/Grid/Grid.less b/src/Components/Grid/Grid.less
index 62015ecee..d51e05a9c 100644
--- a/src/Components/Grid/Grid.less
+++ b/src/Components/Grid/Grid.less
@@ -1,4 +1,3 @@
 .grid {
     display: grid;
-    align-items: baseline;
 }
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index f44b6a91e..1dbc0179a 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -9,7 +9,7 @@ import RouterLink from "../RouterLink/RouterLink";
 import svgLogo from "./moira-logo.svg";
 import { AdminMenu } from "./Components/AdminMenu";
 import { useSelector } from "react-redux";
-import { selectIsChristmasMood, selectPlatform } from "../../store/Reducers/ConfigReducer.slice";
+import { selectPlatform } from "../../store/Reducers/ConfigReducer.slice";
 import { useGetConfigQuery } from "../../services/BaseApi";
 import { Platform } from "../../Domain/Config";
 import { ChristmasHatSVG } from "./Components/ChristmasHat";
@@ -29,7 +29,6 @@ export default function Header(): React.ReactElement {
     const { isLoading } = useGetConfigQuery();
     const theme = useTheme();
     const { isChristmasMood } = useAppSelector(UIState);
-    const isChristmasMoodEnabled = useSelector(selectIsChristmasMood);
 
     return (
         <header
@@ -46,7 +45,7 @@ export default function Header(): React.ReactElement {
                     <img className={cn("logo-img")} src={svgLogo} alt="Moira" />
                 </Link>
                 <nav className={cn("menu")}>
-                    {isChristmasMoodEnabled && <ChristmasMoodToggle />}
+                    <ChristmasMoodToggle />
                     <ThemeSwitchModal />
                     <AdminMenu />
                     <RouterLink to={getPageLink("teams")} icon={<PeopleIcon />}>
diff --git a/src/Components/Teams/TeamCard/TeamCard.tsx b/src/Components/Teams/TeamCard/TeamCard.tsx
index 19eeaea86..cebf797b2 100644
--- a/src/Components/Teams/TeamCard/TeamCard.tsx
+++ b/src/Components/Teams/TeamCard/TeamCard.tsx
@@ -79,7 +79,11 @@ export const TeamCard: FC<ITeamCardProps> = ({ team, isDeleting, onOpenDelete, o
                 className={cn("team-card")}
             >
                 <Flexbox gap={5}>
-                    <Kebab className={cn("team-card-kebab")} size="large">
+                    <Kebab
+                        data-tid="Team card kebab"
+                        className={cn("team-card-kebab")}
+                        size="large"
+                    >
                         <MenuItem icon={<EditIcon />} onClick={openModal}>
                             Edit
                         </MenuItem>
@@ -100,6 +104,7 @@ export const TeamCard: FC<ITeamCardProps> = ({ team, isDeleting, onOpenDelete, o
                                         onClick={handleConfirm}
                                         use={"primary"}
                                         width={100}
+                                        data-tid={`Delete team ${name}`}
                                     >
                                         Confirm
                                     </Button>
diff --git a/src/Components/Teams/Teams.tsx b/src/Components/Teams/Teams.tsx
index fea634cf7..807a02c92 100644
--- a/src/Components/Teams/Teams.tsx
+++ b/src/Components/Teams/Teams.tsx
@@ -4,7 +4,7 @@ import { Grid } from "../Grid/Grid";
 import { TeamEditor } from "./TeamEditor/TeamEditor";
 import { useGetUserTeamsQuery } from "../../services/TeamsApi";
 import { useModal } from "../../hooks/useModal";
-import { TeamWithUsers } from "../../Containers/TeamWithUsers";
+import { TeamsList } from "../TeamsList/TeamsList";
 
 export function Teams(): ReactElement {
     const { isModalOpen, openModal, closeModal } = useModal();
@@ -12,13 +12,7 @@ export function Teams(): ReactElement {
 
     return (
         <>
-            {teams?.map((team) => {
-                return (
-                    <div key={team.id}>
-                        <TeamWithUsers team={team} />
-                    </div>
-                );
-            })}
+            <TeamsList teams={teams} />
             <Grid columns="100px" margin="24px 0">
                 <Button onClick={openModal}>Add team</Button>
             </Grid>
diff --git a/src/Components/TeamsList/TeamsList.tsx b/src/Components/TeamsList/TeamsList.tsx
new file mode 100644
index 000000000..c9ed4ee50
--- /dev/null
+++ b/src/Components/TeamsList/TeamsList.tsx
@@ -0,0 +1,23 @@
+import React, { FC, useState } from "react";
+import { TeamCard } from "../../Components/Teams/TeamCard/TeamCard";
+import { Grid } from "../../Components/Grid/Grid";
+import { EmptyListText } from "../../Components/TriggerInfo/Components/EmptyListMessage/EmptyListText";
+import { Team } from "../../Domain/Team";
+
+export const TeamsList: FC<{ teams?: Team[] }> = ({ teams }) => {
+    const [deletingTeam, setDeletingTeam] = useState<Team | null>(null);
+    if (!teams?.length) return <EmptyListText text={"There are no teams"} />;
+    return (
+        <Grid gap="16px" columns="repeat(auto-fit, minmax(300px, 1fr))">
+            {teams?.map((team) => (
+                <TeamCard
+                    key={team.id}
+                    team={team}
+                    isDeleting={deletingTeam?.id === team.id}
+                    onOpenDelete={() => setDeletingTeam(team)}
+                    onCloseDelete={() => setDeletingTeam(null)}
+                />
+            ))}
+        </Grid>
+    );
+};
diff --git a/src/Containers/AllTeamsContainer/AllTeamsContainer.less b/src/Containers/AllTeamsContainer/AllTeamsContainer.less
deleted file mode 100644
index 5747978d7..000000000
--- a/src/Containers/AllTeamsContainer/AllTeamsContainer.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.teams-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 16px;
-}
diff --git a/src/Containers/AllTeamsContainer/AllTeamsContainer.tsx b/src/Containers/AllTeamsContainer/AllTeamsContainer.tsx
index 1bcc81dd2..85420de26 100644
--- a/src/Containers/AllTeamsContainer/AllTeamsContainer.tsx
+++ b/src/Containers/AllTeamsContainer/AllTeamsContainer.tsx
@@ -4,21 +4,15 @@ import { setDocumentTitle } from "../../helpers/setDocumentTitle";
 import { useAppDispatch, useAppSelector } from "../../store/hooks";
 import { UIState } from "../../store/selectors";
 import { useGetAllTeamsQuery } from "../../services/TeamsApi";
-import classNames from "classnames/bind";
-import { Team } from "../../Domain/Team";
 import { Flexbox } from "../../Components/Flexbox/FlexBox";
 import { SearchInput } from "../../Components/TriggerInfo/Components/SearchInput/SearchInput";
 import { useDebounce } from "../../hooks/useDebounce";
 import { Paging } from "@skbkontur/react-ui/components/Paging";
 import transformPageFromHumanToProgrammer from "../../logic/transformPageFromHumanToProgrammer";
 import { Select } from "@skbkontur/react-ui/components/Select";
-import { EmptyListText } from "../../Components/TriggerInfo/Components/EmptyListMessage/EmptyListText";
-import { TeamCard } from "../../Components/Teams/TeamCard/TeamCard";
 import { setError } from "../../store/Reducers/UIReducer.slice";
-
-import styles from "./AllTeamsContainer.less";
-
-const cn = classNames.bind(styles);
+import { TeamsList } from "../../Components/TeamsList/TeamsList";
+import { useQueryState } from "../../hooks/useQueryState";
 
 type SortDirection = "asc" | "desc";
 
@@ -29,8 +23,7 @@ const SORT_OPTIONS: Array<[SortDirection, string]> = [
 
 const AllTeamsContainer: FC = () => {
     const { error, isLoading } = useAppSelector(UIState);
-    const [deletingTeam, setDeletingTeam] = useState<Team | null>(null);
-    const [searchValue, setSearchValue] = useState("");
+    const [searchValue, setSearchValue] = useQueryState<string>("team", "");
     const [activePage, setActivePage] = useState(1);
     const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
     const debouncedSearchMetric = useDebounce(searchValue, 500);
@@ -75,21 +68,8 @@ const AllTeamsContainer: FC = () => {
                             items={SORT_OPTIONS}
                         />
                     </Flexbox>
-                    {teams?.list.length ? (
-                        <div className={cn("teams-container")}>
-                            {teams?.list.map((team) => (
-                                <TeamCard
-                                    key={team.id}
-                                    team={team}
-                                    isDeleting={deletingTeam?.id === team.id}
-                                    onOpenDelete={() => setDeletingTeam(team)}
-                                    onCloseDelete={() => setDeletingTeam(null)}
-                                />
-                            ))}
-                        </div>
-                    ) : (
-                        <EmptyListText text={"There are no teams"} />
-                    )}
+
+                    <TeamsList teams={teams?.list} />
 
                     <Paging
                         shouldBeVisibleWithLessThanTwoPages={false}
diff --git a/src/Containers/SettingsContainer.tsx b/src/Containers/SettingsContainer.tsx
index a35c5746b..3ef0c306b 100644
--- a/src/Containers/SettingsContainer.tsx
+++ b/src/Containers/SettingsContainer.tsx
@@ -54,7 +54,7 @@ const SettingsContainer: FC<ISettingsContainerProps> = ({ isTeamMember, history
                             <Flexbox align="baseline" direction="row" gap={4}>
                                 <span>Shown for {team ? "team" : "user"}</span>
                                 {isAdminLink ? (
-                                    <RouterLink to={getPageLink("team", team.id)}>
+                                    <RouterLink to={`${getPageLink("allTeams")}?team=${team.id}`}>
                                         {team.name}
                                     </RouterLink>
                                 ) : (
diff --git a/src/Containers/TeamContainer.tsx b/src/Containers/TeamContainer.tsx
deleted file mode 100644
index 3cdf34504..000000000
--- a/src/Containers/TeamContainer.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { FC, useEffect } from "react";
-import { setDocumentTitle } from "../helpers/setDocumentTitle";
-import { Layout, LayoutContent, LayoutTitle } from "../Components/Layout/Layout";
-import { TeamWithUsers } from "./TeamWithUsers";
-import { useAppSelector } from "../store/hooks";
-import { UIState } from "../store/selectors";
-
-export const TeamContainer: FC = () => {
-    const { isLoading, error } = useAppSelector(UIState);
-
-    useEffect(() => {
-        setDocumentTitle("Team");
-    }, []);
-
-    return (
-        <Layout loading={isLoading} error={error as string}>
-            <LayoutContent>
-                <LayoutTitle>Team</LayoutTitle>
-                <LayoutContent>
-                    <TeamWithUsers />
-                </LayoutContent>
-            </LayoutContent>
-        </Layout>
-    );
-};
diff --git a/src/Containers/TeamWithUsers.tsx b/src/Containers/TeamWithUsers.tsx
deleted file mode 100644
index 714a2ad35..000000000
--- a/src/Containers/TeamWithUsers.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { FC } from "react";
-import { Team as TeamComponent } from "../Components/Teams/Team/Team";
-import { useGetTeamQuery } from "../services/TeamsApi";
-import { Grid } from "../Components/Grid/Grid";
-import { Users } from "../Components/Teams/Users";
-import { Team } from "../Domain/Team";
-import { useParams } from "react-router";
-
-interface ITeamWithUsersProps {
-    team?: Team;
-}
-
-export const TeamWithUsers: FC<ITeamWithUsersProps> = (props) => {
-    const { teamId } = useParams<{ teamId: string }>();
-    const { data: teamData } = useGetTeamQuery(teamId, { skip: !teamId });
-    const team = props.team || teamData;
-    return team ? (
-        <>
-            <TeamComponent team={team} />
-            <Grid gap="4px" margin="8px 0 0">
-                <Users team={team} />
-            </Grid>
-        </>
-    ) : null;
-};
diff --git a/src/Containers/TeamsContainer.tsx b/src/Containers/TeamsContainer.tsx
index f352f9cc7..a19d40c7b 100644
--- a/src/Containers/TeamsContainer.tsx
+++ b/src/Containers/TeamsContainer.tsx
@@ -16,9 +16,7 @@ const TeamsContainer = () => {
         <Layout loading={isLoading} error={error}>
             <LayoutContent>
                 <LayoutTitle>Teams</LayoutTitle>
-                <LayoutContent>
-                    <Teams />
-                </LayoutContent>
+                <Teams />
             </LayoutContent>
         </Layout>
     );
diff --git a/src/Domain/Global.ts b/src/Domain/Global.ts
index 3c274973c..7a1899446 100644
--- a/src/Domain/Global.ts
+++ b/src/Domain/Global.ts
@@ -10,7 +10,6 @@ export const PagesPaths = {
     tags: "/tags",
     patterns: "/patterns",
     teams: "/teams",
-    team: "/teams/:teamId?",
     contacts: "/contacts",
     allTeams: "/teams/all",
 };
@@ -27,7 +26,6 @@ export const PagesLinks = {
     tags: "/tags",
     patterns: "/patterns",
     teams: "/teams",
-    team: "/teams/%id%",
     docs: "//moira.readthedocs.org/",
     contacts: "/contacts",
     allTeams: "/teams/all",
diff --git a/src/desktop.bundle.tsx b/src/desktop.bundle.tsx
index 24a182049..44ce4f0cb 100644
--- a/src/desktop.bundle.tsx
+++ b/src/desktop.bundle.tsx
@@ -22,7 +22,6 @@ import Trigger, { TriggerProps } from "./pages/trigger/trigger";
 import TriggerDesktop, { TriggerDesktopProps } from "./pages/trigger/trigger.desktop";
 import { AdminRoute } from "./PrivateRoutes/AdminRoute";
 import TeamsContainer from "./Containers/TeamsContainer";
-import { TeamContainer } from "./Containers/TeamContainer";
 import { TeamSettingsPrivateRoute } from "./PrivateRoutes/TeamSettingsPrivateRoute";
 import AllTeamsContainer from "./Containers/AllTeamsContainer/AllTeamsContainer";
 import { ChristmasLights } from "./Components/ChristmasLights/ChristmasLights";
@@ -80,7 +79,6 @@ function Desktop() {
                 <Route exact path={getPagePath("settings")} component={SettingsContainer} />
                 <Route exact path={getPagePath("teams")} component={TeamsContainer} />
                 <AdminRoute exact path={getPagePath("allTeams")} component={AllTeamsContainer} />
-                <AdminRoute exact path={getPagePath("team")} component={TeamContainer} />
                 <AdminRoute
                     exact
                     path={getPagePath("notifications")}
diff --git a/src/hooks/themes/useThemeFeature.ts b/src/hooks/themes/useThemeFeature.ts
index ed3724ed1..be098d918 100644
--- a/src/hooks/themes/useThemeFeature.ts
+++ b/src/hooks/themes/useThemeFeature.ts
@@ -29,7 +29,7 @@ export const useThemeFeature = () => {
         const resultTheme = isSystemTheme ? browserTheme : localValue;
 
         document.body.dataset.theme = resultTheme;
-    }, [localValue]);
+    }, [localValue, isBrowserDarkThemeEnabled]);
 
     return useFeatureFlag<EThemesNames>({ ...ThemeFlag, defaultValue: localValue });
 };
diff --git a/src/hooks/useChristmasMood.ts b/src/hooks/useChristmasMood.ts
index 323b279da..ab116a2d5 100644
--- a/src/hooks/useChristmasMood.ts
+++ b/src/hooks/useChristmasMood.ts
@@ -23,10 +23,10 @@ export const useChristmasMood = () => {
     );
 
     useEffect(() => {
-        if (localChristmasMood !== moodFromStore) {
+        if (localChristmasMood !== moodFromStore && isChristmasMoodApiff) {
             dispatch(toggleChristmasMood(localChristmasMood));
         }
-    }, [localChristmasMood, moodFromStore]);
+    }, [localChristmasMood, moodFromStore, isChristmasMoodApiff]);
 
     return [localChristmasMood, setLocalChristmasMood] as const;
 };
diff --git a/src/hooks/useFeatureFlag.ts b/src/hooks/useFeatureFlag.ts
index 7205ed38e..f57ffd9a9 100644
--- a/src/hooks/useFeatureFlag.ts
+++ b/src/hooks/useFeatureFlag.ts
@@ -30,7 +30,7 @@ export const useFeatureFlag = <T>(
             return;
         }
         window.localStorage.setItem(key, JSON.stringify(value));
-    }, [value]);
+    }, [value, shouldPersist]);
 
     return [value, setValue];
 };
diff --git a/src/store/Reducers/UIReducer.slice.ts b/src/store/Reducers/UIReducer.slice.ts
index 1e6bbb80f..fddd720c3 100644
--- a/src/store/Reducers/UIReducer.slice.ts
+++ b/src/store/Reducers/UIReducer.slice.ts
@@ -1,7 +1,6 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 import { Subscription } from "../../Domain/Subscription";
 import { TriggerApi } from "../../services/TriggerApi";
-import { christmasMoodFlag } from "../../hooks/useChristmasMood";
 import { EThemesNames } from "../../Themes/themesNames";
 
 interface IUIState {
@@ -22,9 +21,7 @@ const initialState: IUIState = {
     isTransferringSubscriptions: false,
     transferingSubscriptions: [],
     isTransformNullApplied: false,
-    isChristmasMood: JSON.parse(
-        window.localStorage.getItem(`ff_${christmasMoodFlag.id}`) || "false"
-    ),
+    isChristmasMood: false,
     theme: EThemesNames.System,
 };
 
diff --git a/yarn.lock b/yarn.lock
index e5c421399..9849dfe4d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5068,11 +5068,6 @@ classnames@2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
-classnames@2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
-  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
-
 classnames@^2.2.5:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz"
@@ -8889,7 +8884,7 @@ lodash.invokemap@^4.6.0:
   resolved "https://registry.yarnpkg.com/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz"
   integrity sha512-CfkycNtMqgUlfjfdh2BhKO/ZXrP8ePOX5lEU/g0R3ItJcnuxWDwokMGKx1hWcfOikmyOVx6X9IwWnDGlgKl61w==
 
-lodash.isequal@4.5.0, lodash.isequal@^4.5.0:
+lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz"
   integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
@@ -12282,7 +12277,7 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1, tslib@^1.13.0, tslib@^1.9.2:
+tslib@^1.13.0, tslib@^1.9.2:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -12790,7 +12785,7 @@ walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-warning@4.0.3, warning@^4.0.2, warning@^4.0.3:
+warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==