fix: Show rental modal on ff enabled (decentraland#1160)

* fix: Show rental modal on ff enabled

* fix: Remove console log

webapp/src/components/Modals/RentalsLaunchModal/RentalsLaunchModal.container.ts

@@ -1,11 +1,20 @@
 import { connect } from 'react-redux'
+import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
+import { FETCH_APPLICATION_FEATURES_REQUEST } from 'decentraland-dapps/dist/modules/features/actions'
 import { RootState } from '../../../modules/reducer'
-import { getIsMarketplaceLaunchPopupEnabled } from '../../../modules/features/selectors'
+import {
+  getIsMarketplaceLaunchPopupEnabled,
+  isLoadingFeatureFlags
+} from '../../../modules/features/selectors'
 import { MapStateProps } from './RentalsLaunchModal.types'
 import { RentalsLaunchModal } from './RentalsLaunchModal'
 
 const mapState = (state: RootState): MapStateProps => {
   return {
+    isLoadingFeatureFlags: isLoadingType(
+      isLoadingFeatureFlags(state),
+      FETCH_APPLICATION_FEATURES_REQUEST
+    ),
     isRentalsLaunchPopupEnabled: getIsMarketplaceLaunchPopupEnabled(state)
   }
 }

webapp/src/components/Modals/RentalsLaunchModal/RentalsLaunchModal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import {
   Modal,
@@ -18,17 +18,35 @@ import { Props } from './RentalsLaunchModal.types'
 
 const RENTAL_PROMO_POPUP_KEY = 'rental-intro-popup-key'
 
-export const RentalsLaunchModal = ({ isRentalsLaunchPopupEnabled }: Props) => {
+export const RentalsLaunchModal = ({
+  isRentalsLaunchPopupEnabled,
+  isLoadingFeatureFlags
+}: Props) => {
   const blogPostUrl = `${config.get(
     'DECENTRALAND_BLOG'
   )}/announcements/land-rentals-become-an-easy-process-via-decentraland-s-marketplace/`
+
   const onClose = useCallback(() => {
     localStorage.setItem(RENTAL_PROMO_POPUP_KEY, 'true')
     setIsOpen(false)
   }, [])
-  const [isOpen, setIsOpen] = useState<boolean>(
-    !localStorage.getItem(RENTAL_PROMO_POPUP_KEY) && isRentalsLaunchPopupEnabled
-  )
+
+  const [hasLoadedInitialFlags, setHasLoadedInitialFlags] = useState(false)
+  useEffect(() => {
+    if (!isLoadingFeatureFlags) {
+      setHasLoadedInitialFlags(true)
+    }
+  }, [isLoadingFeatureFlags])
+
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+  useEffect(() => {
+    setIsOpen(
+      !localStorage.getItem(RENTAL_PROMO_POPUP_KEY) &&
+        hasLoadedInitialFlags &&
+        isRentalsLaunchPopupEnabled
+    )
+  }, [hasLoadedInitialFlags, isRentalsLaunchPopupEnabled])
+
   const isMobile = useMobileMediaQuery()
   const modalActions = useMemo(
     () => (

webapp/src/components/Modals/RentalsLaunchModal/RentalsLaunchModal.types.ts

@@ -1,6 +1,10 @@
 export type Props = {
   isRentalsLaunchPopupEnabled: boolean
+  isLoadingFeatureFlags: boolean
 }
 
-export type MapStateProps = Pick<Props, 'isRentalsLaunchPopupEnabled'>
+export type MapStateProps = Pick<
+  Props,
+  'isRentalsLaunchPopupEnabled' | 'isLoadingFeatureFlags'
+>
 export type MapDispatchProps = {}

webapp/src/modules/features/selectors.ts

@@ -31,7 +31,7 @@ export const getIsMarketplaceLaunchPopupEnabled = (
     return getIsFeatureEnabled(
       state,
       ApplicationName.MARKETPLACE,
-      FeatureName.RENTALS
+      FeatureName.LAUNCH_POPUP
     )
   } catch (e) {
     return false

webapp/src/modules/features/types.ts

@@ -1,6 +1,6 @@
 export enum FeatureName {
   MAINTENANCE = 'maintenance',
-  LAUNCH_POUP = 'launch-popup',
+  LAUNCH_POPUP = 'launch-popup',
   RANKINGS = 'rankings_variant',
   EMOTE_CATEGORIES = 'emote-categories',
   RENTALS = 'rentals',