feat: Enable the MVMF22 tab while the announcement stage is live (#891)

* feat: Enable the MVMF22 tab while the announcement stage is live

* feat: add a custom FF for the MVMF Tab and Page

Author: juanmahidalgo

webapp/src/components/MVMFPage/MVMFPage.container.ts

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux'
-
+import { getIsMVMFTabEnabled } from '../../modules/features/selectors'
 import { RootState } from '../../modules/reducer'
 import {
   getIsFullscreen,
@@ -17,7 +17,8 @@ const mapState = (state: RootState): MapStateProps => ({
   assetType: getAssetType(state),
   section: getSection(state),
   isFullscreen: getIsFullscreen(state),
-  contracts: getData(state)
+  contracts: getData(state),
+  isMVMFTabEnabled: getIsMVMFTabEnabled(state)
 })
 
 const mapDispatch = (dispatch: MapDispatch) => ({

webapp/src/components/MVMFPage/MVMFPage.tsx

@@ -17,7 +17,13 @@ import './MVMFPage.css'
 const MVMFTag = 'MVMF22'
 
 const MVMFPage = (props: Props) => {
-  const { isFullscreen, section, contracts, onFetchEventContracts } = props
+  const {
+    isFullscreen,
+    section,
+    contracts,
+    onFetchEventContracts,
+    isMVMFTabEnabled
+  } = props
   const vendor = isVendor(props.vendor) ? props.vendor : VendorName.DECENTRALAND
 
   useEffect(() => {
@@ -26,7 +32,7 @@ const MVMFPage = (props: Props) => {
 
   const activeTab = NavigationTab.MVMF
 
-  return (
+  return isMVMFTabEnabled ? (
     <>
       <Navbar isFullscreen />
       <Navigation activeTab={activeTab} isFullscreen={isFullscreen} />
@@ -47,7 +53,7 @@ const MVMFPage = (props: Props) => {
       )}
       <Footer isFullscreen={isFullscreen} />
     </>
-  )
+  ) : null
 }
 
 export default React.memo(MVMFPage)

webapp/src/components/MVMFPage/MVMFPage.types.ts

@@ -14,11 +14,17 @@ export type Props = {
   isFullscreen?: boolean
   onFetchEventContracts: typeof fetchEventRequest
   contracts: Record<string, string[]>
+  isMVMFTabEnabled: boolean
 }
 
 export type MapStateProps = Pick<
   Props,
-  'vendor' | 'isFullscreen' | 'assetType' | 'section' | 'contracts'
+  | 'vendor'
+  | 'isFullscreen'
+  | 'assetType'
+  | 'section'
+  | 'contracts'
+  | 'isMVMFTabEnabled'
 >
 export type MapDispatchProps = Pick<Props, 'onFetchEventContracts'>
 export type MapDispatch = Dispatch<FetchEventRequestAction>

webapp/src/components/Navigation/Navigation.container.tsx

@@ -1,11 +1,11 @@
 import { connect } from 'react-redux'
-import { getIsMVMFEnabled } from '../../modules/features/selectors'
+import { getIsMVMFTabEnabled } from '../../modules/features/selectors'
 import { RootState } from '../../modules/reducer'
 import { MapStateProps } from './Navigation.types'
 import Navigation from './Navigation'
 
 const mapState = (state: RootState): MapStateProps => ({
-  isMVMFEnabled: getIsMVMFEnabled(state)
+  isMVMFTabEnabled: getIsMVMFTabEnabled(state)
 })
 
 export default connect(mapState)(Navigation)

webapp/src/components/Navigation/Navigation.tsx

@@ -11,7 +11,7 @@ import { Props, NavigationTab } from './Navigation.types'
 import './Navigation.css'
 
 const Navigation = (props: Props) => {
-  const { activeTab, isFullscreen, isMVMFEnabled } = props
+  const { activeTab, isFullscreen, isMVMFTabEnabled } = props
   return (
     <Tabs isFullscreen={isFullscreen}>
       <Tabs.Left>
@@ -20,7 +20,7 @@ const Navigation = (props: Props) => {
             {t('navigation.overview')}
           </Tabs.Tab>
         </Link>
-        {isMVMFEnabled ? (
+        {isMVMFTabEnabled ? (
           <Link
             to={locations.MVMF22({
               section: decentraland.Section.WEARABLES,

webapp/src/components/Navigation/Navigation.types.ts

@@ -9,10 +9,10 @@ export enum NavigationTab {
 }
 
 export type Props = {
-  isMVMFEnabled: boolean
+  isMVMFTabEnabled: boolean
   activeTab?: NavigationTab
   isFullscreen?: boolean
 }
 
-export type MapStateProps = Pick<Props, 'isMVMFEnabled'>
+export type MapStateProps = Pick<Props, 'isMVMFTabEnabled'>
 export type MapDispatchProps = {}

webapp/src/modules/features/selectors.ts

@@ -30,11 +30,19 @@ export const getIsRentalsEnabled = (state: RootState) => {
 }
 
 export const getIsMVMFEnabled = (state: RootState) => {
+  try {
+    return getIsFeatureEnabled(state, ApplicationName.BUILDER, FeatureName.MVMF)
+  } catch (e) {
+    return false
+  }
+}
+
+export const getIsMVMFTabEnabled = (state: RootState) => {
   try {
     return getIsFeatureEnabled(
       state,
       ApplicationName.BUILDER,
-      FeatureName.MVMF
+      FeatureName.MVMF_TAB
     )
   } catch (e) {
     return false

webapp/src/modules/features/types.ts

@@ -4,5 +4,6 @@ export enum FeatureName {
   EMOTE_CATEGORIES = 'emote-categories',
   RENTALS = 'rentals',
   MVMF = 'mvmf-2022',
-  MVMF_ANNOUNCEMENT = 'mvmf-2022-announcement'
+  MVMF_ANNOUNCEMENT = 'mvmf-2022-announcement',
+  MVMF_TAB = 'mvmf-2022-tab'
 }