feat: add maintainance page

src/modules/features.ts

@@ -3,4 +3,5 @@ export enum Flags {
   HideEventsInWorlds = "events-hide-events-in-worlds",
   NewNavbarDropdown = "dapps-new-navbar-dropdown",
   DCLFoundationAddresses = "events-decentraland-foundation-addresses",
+  Maintenance = "events-maintenance",
 }

src/pages/confirm.tsx

@@ -1,8 +1,10 @@
 import React from "react"
 
 import { useLocation } from "@gatsbyjs/reach-router"
+import MaintenancePage from "decentraland-gatsby/dist/components/Layout/MaintenancePage"
 import Divider from "decentraland-gatsby/dist/components/Text/Divider"
 import Paragraph from "decentraland-gatsby/dist/components/Text/Paragraph"
+import useFeatureFlagContext from "decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
 import { Container } from "decentraland-ui/dist/components/Container/Container"
 
@@ -11,6 +13,7 @@ import {
   EmailSubscriptionStatus,
   ProfileSettingsAttributes,
 } from "../entities/ProfileSettings/types"
+import { Flags } from "../modules/features"
 
 import "./settings.css"
 
@@ -27,13 +30,18 @@ export type SettingsPageState = {
 export default function SettingsPage() {
   const location = useLocation()
   const l = useFormatMessage()
+  const [ff] = useFeatureFlagContext()
   const params = new URLSearchParams(location.search)
   const unsubscribe = params.get("unsubscribe")
   const verify = params.get("verify")
   const ok = String(EmailSubscriptionStatus.OK)
   const expired = String(EmailSubscriptionStatus.Expired)
   const invalid = String(EmailSubscriptionStatus.Invalid)
 
+  if (ff.flags[Flags.Maintenance]) {
+    return <MaintenancePage />
+  }
+
   return (
     <>
       <Navigation />

src/pages/event.tsx

@@ -4,8 +4,10 @@ import { Helmet } from "react-helmet"
 
 import { useLocation } from "@gatsbyjs/reach-router"
 import ImgFixed from "decentraland-gatsby/dist/components/Image/ImgFixed"
+import MaintenancePage from "decentraland-gatsby/dist/components/Layout/MaintenancePage"
 import NotFound from "decentraland-gatsby/dist/components/Layout/NotFound"
 import useAuthContext from "decentraland-gatsby/dist/context/Auth/useAuthContext"
+import useFeatureFlagContext from "decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
 import { Container } from "decentraland-ui/dist/components/Container/Container"
 import { Loader } from "decentraland-ui/dist/components/Loader/Loader"
@@ -22,6 +24,7 @@ import {
   canApproveAnyEvent,
   canApproveOwnEvent,
 } from "../entities/ProfileSettings/utils"
+import { Flags } from "../modules/features"
 
 import "./index.css"
 
@@ -31,6 +34,7 @@ export type EventPageState = {
 
 export default function EventPage() {
   const l = useFormatMessage()
+  const [ff] = useFeatureFlagContext()
   const [, accountState] = useAuthContext()
   const location = useLocation()
   const params = new URLSearchParams(location.search)
@@ -46,6 +50,10 @@ export default function EventPage() {
   )
   const loading = accountState.loading || eventState.loading
 
+  if (ff.flags[Flags.Maintenance]) {
+    return <MaintenancePage />
+  }
+
   if (!loading && !event && eventState.version !== 0) {
     return (
       <Container style={{ paddingTop: "75px" }}>

src/pages/index.tsx

@@ -3,7 +3,9 @@ import React, { useEffect, useMemo, useState } from "react"
 import { Helmet } from "react-helmet"
 
 import { useLocation } from "@gatsbyjs/reach-router"
+import MaintenancePage from "decentraland-gatsby/dist/components/Layout/MaintenancePage"
 import useAuthContext from "decentraland-gatsby/dist/context/Auth/useAuthContext"
+import useFeatureFlagContext from "decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext"
 import useAsyncMemo from "decentraland-gatsby/dist/hooks/useAsyncMemo"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
 import { navigate } from "decentraland-gatsby/dist/plugins/intl"
@@ -24,6 +26,7 @@ import { useProfileSettingsContext } from "../context/ProfileSetting"
 import { SessionEventAttributes } from "../entities/Event/types"
 import { getCurrentSchedules } from "../entities/Schedule/utils"
 import { getSchedules } from "../modules/events"
+import { Flags } from "../modules/features"
 import locations, { toEventFilters } from "../modules/locations"
 
 import "./index.css"
@@ -64,6 +67,12 @@ export default function IndexPage() {
     }
   }, [event])
 
+  const [ff] = useFeatureFlagContext()
+
+  if (ff.flags[Flags.Maintenance]) {
+    return <MaintenancePage />
+  }
+
   return (
     <>
       <Helmet>

src/pages/me.tsx

@@ -3,11 +3,13 @@ import React, { useEffect, useMemo, useState } from "react"
 import { Helmet } from "react-helmet"
 
 import { useLocation } from "@gatsbyjs/reach-router"
+import MaintenancePage from "decentraland-gatsby/dist/components/Layout/MaintenancePage"
 import Divider from "decentraland-gatsby/dist/components/Text/Divider"
 import Link from "decentraland-gatsby/dist/components/Text/Link"
 import Paragraph from "decentraland-gatsby/dist/components/Text/Paragraph"
 import SubTitle from "decentraland-gatsby/dist/components/Text/SubTitle"
 import useAuthContext from "decentraland-gatsby/dist/context/Auth/useAuthContext"
+import useFeatureFlagContext from "decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
 import { navigate } from "decentraland-gatsby/dist/plugins/intl"
 import prevent from "decentraland-gatsby/dist/utils/react/prevent"
@@ -25,6 +27,7 @@ import {
 } from "../context/Event"
 import { useProfileSettingsContext } from "../context/ProfileSetting"
 import useListEventsFiltered from "../hooks/useListEventsFiltered"
+import { Flags } from "../modules/features"
 import locations from "../modules/locations"
 
 import "./index.css"
@@ -37,6 +40,7 @@ export default function MyEventsPage() {
     [location.search]
   )
 
+  const [ff] = useFeatureFlagContext()
   const [account, accountState] = useAuthContext()
   const [eventList, eventsState] = useEventsContext()
   const [settings] = useProfileSettingsContext()
@@ -68,6 +72,10 @@ export default function MyEventsPage() {
     }
   }, [event])
 
+  if (ff.flags[Flags.Maintenance]) {
+    return <MaintenancePage />
+  }
+
   return (
     <>
       <Helmet>

src/pages/pending.tsx

@@ -3,11 +3,13 @@ import React, { useEffect, useMemo, useState } from "react"
 import { Helmet } from "react-helmet"
 
 import { useLocation } from "@gatsbyjs/reach-router"
+import MaintenancePage from "decentraland-gatsby/dist/components/Layout/MaintenancePage"
 import Divider from "decentraland-gatsby/dist/components/Text/Divider"
 import Link from "decentraland-gatsby/dist/components/Text/Link"
 import Paragraph from "decentraland-gatsby/dist/components/Text/Paragraph"
 import SubTitle from "decentraland-gatsby/dist/components/Text/SubTitle"
 import useAuthContext from "decentraland-gatsby/dist/context/Auth/useAuthContext"
+import useFeatureFlagContext from "decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
 import { navigate } from "decentraland-gatsby/dist/plugins/intl"
 import prevent from "decentraland-gatsby/dist/utils/react/prevent"
@@ -26,13 +28,15 @@ import {
   useEventsContext,
 } from "../context/Event"
 import { useProfileSettingsContext } from "../context/ProfileSetting"
+import { Flags } from "../modules/features"
 import locations from "../modules/locations"
 
 import "./index.css"
 
 export default function MyEventsPage() {
   const l = useFormatMessage()
   const location = useLocation()
+  const [ff] = useFeatureFlagContext()
   const params = new URLSearchParams(location.search)
   const [account, accountState] = useAuthContext()
   const [eventList, eventsState] = useEventsContext()
@@ -51,6 +55,10 @@ export default function MyEventsPage() {
     }
   }, [event])
 
+  if (ff.flags[Flags.Maintenance]) {
+    return <MaintenancePage />
+  }
+
   if (accountState.loading || !account) {
     return (
       <>

src/pages/schedule.tsx

@@ -3,9 +3,11 @@ import React, { useMemo, useState } from "react"
 import { Helmet } from "react-helmet"
 
 import { useLocation } from "@gatsbyjs/reach-router"
+import MaintenancePage from "decentraland-gatsby/dist/components/Layout/MaintenancePage"
 import NotFound from "decentraland-gatsby/dist/components/Layout/NotFound"
 import SubTitle from "decentraland-gatsby/dist/components/Text/SubTitle"
 import useAuthContext from "decentraland-gatsby/dist/context/Auth/useAuthContext"
+import useFeatureFlagContext from "decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext"
 import useAsyncMemo from "decentraland-gatsby/dist/hooks/useAsyncMemo"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
 import TokenList from "decentraland-gatsby/dist/utils/dom/TokenList"
@@ -20,6 +22,7 @@ import mvfwLogo from "../images/mvfw.svg"
 import mvmfImage from "../images/mvmf.jpg"
 import pride2023Image from "../images/pride-2023.png"
 import { getSchedules } from "../modules/events"
+import { Flags } from "../modules/features"
 import { toEventFilters } from "../modules/locations"
 
 import "./schedule.css"
@@ -33,6 +36,7 @@ export default function IndexPage() {
   const l = useFormatMessage()
   const [, accountState] = useAuthContext()
   const location = useLocation()
+  const [ff] = useFeatureFlagContext()
   const params = useMemo(
     () => new URLSearchParams(location.search),
     [location.search]
@@ -50,6 +54,10 @@ export default function IndexPage() {
   const loading = accountState.loading || state.loading
   const [enabledNotification, setEnabledNotification] = useState(false)
 
+  if (ff.flags[Flags.Maintenance]) {
+    return <MaintenancePage />
+  }
+
   return (
     <>
       <Helmet>

src/pages/schedules.tsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useMemo, useState } from "react"
 
+import MaintenancePage from "decentraland-gatsby/dist/components/Layout/MaintenancePage"
 import NotFound from "decentraland-gatsby/dist/components/Layout/NotFound"
 import Divider from "decentraland-gatsby/dist/components/Text/Divider"
 import Paragraph from "decentraland-gatsby/dist/components/Text/Paragraph"
 import Avatar from "decentraland-gatsby/dist/components/User/Avatar"
 import useAuthContext from "decentraland-gatsby/dist/context/Auth/useAuthContext"
+import useFeatureFlagContext from "decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext"
 import useAsyncMemo from "decentraland-gatsby/dist/hooks/useAsyncMemo"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
 import { Link } from "decentraland-gatsby/dist/plugins/intl"
@@ -26,6 +28,7 @@ import { canEditAnySchedule } from "../entities/ProfileSettings/utils"
 import { ScheduleAttributes } from "../entities/Schedule/types"
 import { getScheduleBackground } from "../entities/Schedule/utils"
 import { showTimezoneLabel } from "../modules/date"
+import { Flags } from "../modules/features"
 import locations from "../modules/locations"
 
 import "./users.css"
@@ -34,6 +37,7 @@ export default function SettingsPage() {
   const l = useFormatMessage()
   const [account, accountState] = useAuthContext()
   const [settings, settingsState] = useProfileSettingsContext()
+  const [ff] = useFeatureFlagContext()
   const [schedules, schedulesState] = useAsyncMemo(
     async () => {
       const schedules = await Events.get().getSchedules()
@@ -51,6 +55,10 @@ export default function SettingsPage() {
     }
   )
 
+  if (ff.flags[Flags.Maintenance]) {
+    return <MaintenancePage />
+  }
+
   if (
     !account ||
     accountState.loading ||

src/pages/settings.tsx

@@ -2,8 +2,10 @@ import React, { useEffect, useMemo, useState } from "react"
 
 import { Helmet } from "react-helmet"
 
+import MaintenancePage from "decentraland-gatsby/dist/components/Layout/MaintenancePage"
 import Paragraph from "decentraland-gatsby/dist/components/Text/Paragraph"
 import useAuthContext from "decentraland-gatsby/dist/context/Auth/useAuthContext"
+import useFeatureFlagContext from "decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext"
 import useCountdown from "decentraland-gatsby/dist/hooks/useCountdown"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
 import Time from "decentraland-gatsby/dist/utils/date/Time"
@@ -22,18 +24,24 @@ import isEmail from "validator/lib/isEmail"
 import Navigation from "../components/Layout/Navigation"
 import { useProfileSettingsContext } from "../context/ProfileSetting"
 import check from "../images/check.svg"
+import { Flags } from "../modules/features"
 
 import "./settings.css"
 
 export default function SettingsPage() {
   const l = useFormatMessage()
   const [account, accountState] = useAuthContext()
   const [settings, state] = useProfileSettingsContext()
+  const [ff] = useFeatureFlagContext()
   const [email, setEmail] = useState(settings.email)
   const currentEmailChanged = email !== settings.email
   const currentEmailIsValid = useMemo(() => isEmail(email || ""), [email])
   useEffect(() => setEmail(settings.email), [settings.email])
 
+  if (ff.flags[Flags.Maintenance]) {
+    return <MaintenancePage />
+  }
+
   // const emailNextVerificationDate = useMemo(() => {
   //   return settings.email_updated_at
   //     ? new Date(settings.email_updated_at.getTime() + Time.Minute)

src/pages/user.tsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useMemo, useState } from "react"
 
 import { useLocation } from "@gatsbyjs/reach-router"
+import MaintenancePage from "decentraland-gatsby/dist/components/Layout/MaintenancePage"
 import NotFound from "decentraland-gatsby/dist/components/Layout/NotFound"
 import Paragraph from "decentraland-gatsby/dist/components/Text/Paragraph"
 import Avatar from "decentraland-gatsby/dist/components/User/Avatar"
 import useAuthContext from "decentraland-gatsby/dist/context/Auth/useAuthContext"
+import useFeatureFlagContext from "decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext"
 import useAsyncMemo from "decentraland-gatsby/dist/hooks/useAsyncMemo"
 import useAsyncTask from "decentraland-gatsby/dist/hooks/useAsyncTask"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
@@ -28,6 +30,7 @@ import {
   updateProfileSettingsSchema,
 } from "../entities/ProfileSettings/types"
 import { canEditAnyProfile } from "../entities/ProfileSettings/utils"
+import { Flags } from "../modules/features"
 import locations from "../modules/locations"
 
 import "./users.css"
@@ -39,6 +42,7 @@ export default function SettingsPage() {
   const l = useFormatMessage()
   const [account, accountState] = useAuthContext()
   const [settings, settingsState] = useProfileSettingsContext()
+  const [ff] = useFeatureFlagContext()
   const [value, setValue] = useState("")
   const handleChangeValue = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.currentTarget.value),
@@ -108,6 +112,10 @@ export default function SettingsPage() {
     [user, profile, profileState, profilePermissions]
   )
 
+  if (ff.flags[Flags.Maintenance]) {
+    return <MaintenancePage />
+  }
+
   if (
     !account ||
     accountState.loading ||

src/pages/users.tsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useMemo, useState } from "react"
 
+import MaintenancePage from "decentraland-gatsby/dist/components/Layout/MaintenancePage"
 import NotFound from "decentraland-gatsby/dist/components/Layout/NotFound"
 import Divider from "decentraland-gatsby/dist/components/Text/Divider"
 import Paragraph from "decentraland-gatsby/dist/components/Text/Paragraph"
 import Avatar from "decentraland-gatsby/dist/components/User/Avatar"
 import useAuthContext from "decentraland-gatsby/dist/context/Auth/useAuthContext"
+import useFeatureFlagContext from "decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext"
 import useAsyncMemo from "decentraland-gatsby/dist/hooks/useAsyncMemo"
 import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
 import { Link } from "decentraland-gatsby/dist/plugins/intl"
@@ -30,6 +32,7 @@ import {
   updateProfileSettingsSchema,
 } from "../entities/ProfileSettings/types"
 import { canEditAnyProfile } from "../entities/ProfileSettings/utils"
+import { Flags } from "../modules/features"
 import locations from "../modules/locations"
 
 import "./users.css"
@@ -41,6 +44,7 @@ export default function SettingsPage() {
   const l = useFormatMessage()
   const [account, accountState] = useAuthContext()
   const [settings, settingsState] = useProfileSettingsContext()
+  const [ff] = useFeatureFlagContext()
   const [filter, setFilter] = useState("")
   const handleChangeFilter = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) =>
@@ -83,6 +87,10 @@ export default function SettingsPage() {
     [avatars]
   )
 
+  if (ff.flags[Flags.Maintenance]) {
+    return <MaintenancePage />
+  }
+
   if (
     !account ||
     accountState.loading ||