fix favicon, playlist subscription only

src/components/MobileCoinBadge.js

@@ -25,7 +25,7 @@ const MobileCoinBadge = ({ style, textStyle, iconSize = 20, iconPosition = 'left
   }, [currentUserData?.coins])
 
   const handlePress = useCallback(() => {
-    navigate(Routes.Payments)
+    navigate(Routes.Payments, { pack: 'packs' })
   }, [])
 
   if (!currentUID || Platform.OS === 'web') {

src/components/modal/PlaylistModal.js

@@ -1,9 +1,10 @@
-import React, { useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Dimensions, FlatList, Image, Pressable, Text, TextInput, View } from 'react-native'
 import { SheetManager } from 'react-native-actions-sheet'
 import useMinuit from 'react-native-minuit/src/hooks/useMinuit'
 import SwiperFlatList from 'react-native-swiper-flatlist'
 import { icons } from '../../assets'
+import usePlaylistCreationGuard from '../../hooks/usePlaylistCreationGuard'
 import { useUserData } from '../../providers/UserDataProvider'
 import { addMusicToPlaylist, createPlaylist } from '../../screens/Library/Playlists/playlist'
 import { Palette } from '../../styles'
@@ -20,8 +21,9 @@ const PlaylistModal = (props) => {
   const [selectedId, setSelectedId] = useState('')
   const [playlist, setPlaylist] = useState('')
   const [isCreating, setIsCreating] = useState(false)
-  const { currentUID, userPlaylists = [] } = useUserData()
+  const { currentUID, userPlaylists = [], hasActiveSubscription } = useUserData()
   const startAtCreate = props?.payload?.startAtCreate || false
+  const ensureCanCreatePlaylist = usePlaylistCreationGuard()
   const { setTooltip } = useMinuit()
 
   const sanitizedPlaylists = useMemo(
@@ -35,9 +37,19 @@ const PlaylistModal = (props) => {
     return sanitizedPlaylists.some((p) => (p?.name || '').trim().toLowerCase() === lower)
   }, [playlist, sanitizedPlaylists])
 
-  const hideSheet = () => {
+  const hideSheet = useCallback(() => {
     SheetManager.hide('Playlist')
-  }
+  }, [])
+
+  useEffect(() => {
+    if (!startAtCreate || hasActiveSubscription) {
+      return
+    }
+
+    if (!ensureCanCreatePlaylist()) {
+      hideSheet()
+    }
+  }, [ensureCanCreatePlaylist, hasActiveSubscription, hideSheet, startAtCreate])
 
   return (
     <AppActionSheet id="Playlist">
@@ -45,7 +57,7 @@ const PlaylistModal = (props) => {
         style={{ width, left: -14 }}
         ref={scrollRef}
         disableGesture
-        index={startAtCreate ? 1 : 0}
+        index={startAtCreate && hasActiveSubscription ? 1 : 0}
       >
         <View style={{ width, paddingHorizontal: 14 }}>
           <View style={{ gap: 20 }}>
@@ -70,12 +82,17 @@ const PlaylistModal = (props) => {
                     ...Style.containerRow,
                     gap: 10,
                   }}
-                  onPress={() =>
+                  onPress={() => {
+                    if (!ensureCanCreatePlaylist()) {
+                      hideSheet()
+                      return
+                    }
+
                     scrollRef.current?.scrollToIndex({
                       index: 1,
                       animated: true,
                     })
-                  }
+                  }}
                 >
                   <Image source={icons.add} style={size({ size: 15 })} />
                   <Text
@@ -212,6 +229,11 @@ const PlaylistModal = (props) => {
               onPress={async () => {
                 if (!playlist?.trim()?.length || !currentUID) return
                 try {
+                  if (!ensureCanCreatePlaylist()) {
+                    hideSheet()
+                    return
+                  }
+
                   setIsCreating(true)
                   const name = playlist.trim()
                   const lower = name.toLowerCase()
@@ -232,7 +254,7 @@ const PlaylistModal = (props) => {
                     musics: props?.payload?.projectId ? [props.payload.projectId] : [],
                     createdAt: new Date(),
                     updatedAt: new Date(),
-                  })
+                  }, { hasActiveSubscription })
 
                   setTooltip({
                     type: 'success',

src/components/modal/PlaylistModal.web.js

@@ -1,11 +1,12 @@
 import { Portal } from '@gorhom/portal'
 import { BlurView } from 'expo-blur'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { FlatList, Image, Pressable, StyleSheet, Text, TextInput, View } from 'react-native'
 import { SheetManager, useProviderContext } from 'react-native-actions-sheet'
 import { actionSheetEventManager } from 'react-native-actions-sheet/dist/src/eventmanager'
 import useMinuit from 'react-native-minuit/src/hooks/useMinuit'
 import { icons } from '../../assets'
+import usePlaylistCreationGuard from '../../hooks/usePlaylistCreationGuard'
 import { useUserData } from '../../providers/UserDataProvider'
 import { addMusicToPlaylist, createPlaylist } from '../../screens/Library/Playlists/playlist'
 import { Palette } from '../../styles'
@@ -18,16 +19,17 @@ const PlaylistModal = (props) => {
   const [selectedId, setSelectedId] = useState('')
   const [playlist, setPlaylist] = useState('')
   const [isCreating, setIsCreating] = useState(false)
-  const { currentUID, userPlaylists = [] } = useUserData()
+  const { currentUID, userPlaylists = [], hasActiveSubscription } = useUserData()
+  const ensureCanCreatePlaylist = usePlaylistCreationGuard()
   const { setTooltip } = useMinuit()
   const startAtCreate = props?.payload?.startAtCreate || false
-  const [mode, setMode] = useState(startAtCreate ? 'create' : 'select')
+  const [mode, setMode] = useState(startAtCreate && hasActiveSubscription ? 'create' : 'select')
   const [visible, setVisible] = useState(true)
   const providerContext = useProviderContext()
 
   useEffect(() => {
-    setMode(startAtCreate ? 'create' : 'select')
-  }, [startAtCreate])
+    setMode(startAtCreate && hasActiveSubscription ? 'create' : 'select')
+  }, [hasActiveSubscription, startAtCreate])
 
   const sanitizedPlaylists = useMemo(
     () => (Array.isArray(userPlaylists) ? userPlaylists : []),
@@ -44,7 +46,7 @@ const PlaylistModal = (props) => {
     setVisible(true)
   }, [props?.sheetId, props?.payload])
 
-  const hideModal = () => {
+  const hideModal = useCallback(() => {
     setVisible(false)
     props?.payload?.onClose?.()
 
@@ -56,7 +58,17 @@ const PlaylistModal = (props) => {
       // close event manually to let the SheetProvider unmount it.
       actionSheetEventManager.publish(`onclose_${sheetId}`, undefined, providerContext)
     }
-  }
+  }, [props?.payload, props?.sheetId, providerContext])
+
+  useEffect(() => {
+    if (!startAtCreate || hasActiveSubscription) {
+      return
+    }
+
+    if (!ensureCanCreatePlaylist()) {
+      hideModal()
+    }
+  }, [ensureCanCreatePlaylist, hasActiveSubscription, hideModal, startAtCreate])
 
   const handleValidateSelection = async () => {
     if (!selectedId) return
@@ -84,6 +96,10 @@ const PlaylistModal = (props) => {
 
   const handleCreatePlaylist = async () => {
     if (!playlist?.trim()?.length || !currentUID) return
+    if (!ensureCanCreatePlaylist()) {
+      hideModal()
+      return
+    }
     try {
       setIsCreating(true)
       const name = playlist.trim()
@@ -103,7 +119,7 @@ const PlaylistModal = (props) => {
         musics: props?.payload?.projectId ? [props.payload.projectId] : [],
         createdAt: new Date(),
         updatedAt: new Date(),
-      })
+      }, { hasActiveSubscription })
 
       setTooltip({
         type: 'success',
@@ -152,6 +168,10 @@ const PlaylistModal = (props) => {
               alignSelf: 'center',
             }}
             onPress={() => {
+              if (!ensureCanCreatePlaylist()) {
+                hideModal()
+                return
+              }
               setPlaylist('')
               setMode('create')
             }}