-
Notifications
You must be signed in to change notification settings - Fork 106
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Co-authored-by: Saliou Diallo <saliou@audius.co>
- Loading branch information
Showing
16 changed files
with
467 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
147 changes: 147 additions & 0 deletions
147
...bile/src/components/gated-content-upload-prompt-drawer/GatedContentUploadPromptDrawer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| import { useCallback } from 'react' | ||
|
|
||
| import { TouchableOpacity, View } from 'react-native' | ||
| import { useDispatch } from 'react-redux' | ||
|
|
||
| import IconArrow from 'app/assets/images/iconArrow.svg' | ||
| import IconExternalLink from 'app/assets/images/iconExternalLink.svg' | ||
| import IconRocket from 'app/assets/images/iconRocket.svg' | ||
| import { Button, Text, useLink } from 'app/components/core' | ||
| import { NativeDrawer } from 'app/components/drawer' | ||
| import { useNavigation } from 'app/hooks/useNavigation' | ||
| import { setVisibility } from 'app/store/drawers/slice' | ||
| import { flexRowCentered, makeStyles } from 'app/styles' | ||
| import { useColor } from 'app/utils/theme' | ||
|
|
||
| const LEARN_MORE_URL = | ||
| 'https://blog.audius.co/guide-to-audius-availability-settings' | ||
|
|
||
| const messages = { | ||
| title: 'NEW UPDATE!', | ||
| subtitle: 'Control who has access to your tracks!', | ||
| description: | ||
| 'Availability settings allow you to limit access to specific groups of users or offer exclusive content to your most dedicated fans.', | ||
| learnMore: 'Learn More', | ||
| gotIt: 'Got It', | ||
| checkItOut: 'Check It Out' | ||
| } | ||
|
|
||
| const useStyles = makeStyles(({ spacing, palette, typography }) => ({ | ||
| drawer: { | ||
| marginVertical: spacing(8), | ||
| marginHorizontal: spacing(4), | ||
| alignItems: 'flex-start' | ||
| }, | ||
| titleContainer: { | ||
| ...flexRowCentered(), | ||
| justifyContent: 'center', | ||
| width: '100%', | ||
| paddingBottom: spacing(4), | ||
| marginBottom: spacing(6), | ||
| borderBottomWidth: 1, | ||
| borderBottomColor: palette.neutralLight8 | ||
| }, | ||
| titleText: { | ||
| marginLeft: spacing(3), | ||
| fontFamily: typography.fontByWeight.heavy, | ||
| fontSize: typography.fontSize.medium, | ||
| color: palette.neutralLight4 | ||
| }, | ||
| subtitle: { | ||
| marginBottom: spacing(6), | ||
| fontFamily: typography.fontByWeight.bold, | ||
| fontSize: typography.fontSize.large | ||
| }, | ||
| description: { | ||
| marginBottom: spacing(6), | ||
| fontFamily: typography.fontByWeight.medium, | ||
| fontSize: typography.fontSize.large, | ||
| lineHeight: spacing(7) | ||
| }, | ||
| button: { | ||
| marginBottom: spacing(6) | ||
| }, | ||
| buttonText: { | ||
| fontSize: typography.fontSize.large | ||
| }, | ||
| learnMore: { | ||
| ...flexRowCentered(), | ||
| marginBottom: spacing(6) | ||
| }, | ||
| learnMoreIcon: { | ||
| marginLeft: spacing(1) | ||
| } | ||
| })) | ||
|
|
||
| export const GatedContentUploadPromptDrawer = ({ | ||
| isUpload | ||
| }: { | ||
| isUpload?: boolean | ||
| }) => { | ||
| const styles = useStyles() | ||
| const neutralLight4 = useColor('neutralLight4') | ||
| const navigation = useNavigation() | ||
| const dispatch = useDispatch() | ||
| const { onPress: onLearnMorePress } = useLink(LEARN_MORE_URL) | ||
|
|
||
| const handleClose = useCallback(() => { | ||
| dispatch( | ||
| setVisibility({ drawer: 'GatedContentUploadPrompt', visible: false }) | ||
| ) | ||
| }, [dispatch]) | ||
|
|
||
| const handleSubmit = useCallback(() => { | ||
| handleClose() | ||
| navigation.push('Availability') | ||
| }, [handleClose, navigation]) | ||
|
|
||
| if (!isUpload) return null | ||
|
|
||
| return ( | ||
| <NativeDrawer drawerName='GatedContentUploadPrompt'> | ||
| <View style={styles.drawer}> | ||
| <View style={styles.titleContainer}> | ||
| <IconRocket fill={neutralLight4} width={24} height={24} /> | ||
| <Text style={styles.titleText} weight='heavy' color='neutral'> | ||
| {messages.title} | ||
| </Text> | ||
| </View> | ||
| <Text style={styles.subtitle}>{messages.subtitle}</Text> | ||
| <Text style={styles.description}>{messages.description}</Text> | ||
| <TouchableOpacity style={styles.learnMore} onPress={onLearnMorePress}> | ||
| <Text weight='bold' color='neutralLight4' fontSize='large'> | ||
| {messages.learnMore} | ||
| </Text> | ||
| <IconExternalLink | ||
| style={styles.learnMoreIcon} | ||
| width={20} | ||
| height={20} | ||
| fill={neutralLight4} | ||
| /> | ||
| </TouchableOpacity> | ||
| <Button | ||
| title={messages.gotIt} | ||
| onPress={handleClose} | ||
| variant='commonAlt' | ||
| size='large' | ||
| styles={{ | ||
| root: styles.button, | ||
| text: styles.buttonText | ||
| }} | ||
| fullWidth | ||
| /> | ||
| <Button | ||
| title={messages.checkItOut} | ||
| onPress={handleSubmit} | ||
| styles={{ | ||
| root: styles.button, | ||
| text: styles.buttonText | ||
| }} | ||
| size='large' | ||
| icon={IconArrow} | ||
| fullWidth | ||
| /> | ||
| </View> | ||
| </NativeDrawer> | ||
| ) | ||
| } |
1 change: 1 addition & 0 deletions
1
packages/mobile/src/components/gated-content-upload-prompt-drawer/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { GatedContentUploadPromptDrawer } from './GatedContentUploadPromptDrawer' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { useEffect } from 'react' | ||
|
|
||
| import AsyncStorage from '@react-native-async-storage/async-storage' | ||
| import { useDispatch } from 'react-redux' | ||
| import { useAsync } from 'react-use' | ||
|
|
||
| import type { Drawer as DrawerName } from 'app/store/drawers/slice' | ||
| import { setVisibility } from 'app/store/drawers/slice' | ||
|
|
||
| type UseOneTimeDrawerProps = { | ||
| key: string // AsyncStorage key | ||
| name: DrawerName | ||
| disabled?: boolean | ||
| } | ||
|
|
||
| export const useOneTimeDrawer = ({ | ||
| key, | ||
| name, | ||
| disabled = false | ||
| }: UseOneTimeDrawerProps) => { | ||
| const dispatch = useDispatch() | ||
| const { value: seen, loading } = useAsync(() => AsyncStorage.getItem(key)) | ||
|
|
||
| useEffect(() => { | ||
| if (disabled) return | ||
|
|
||
| const shouldOpen = !loading && !seen | ||
| if (shouldOpen) { | ||
| dispatch(setVisibility({ drawer: name, visible: true })) | ||
| AsyncStorage.setItem(key, 'true') | ||
| } | ||
| }, [disabled, loading, seen, dispatch, name, key]) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.