import { constants , isPlanStatusValid } from '@devhub/core' ; import React from 'react' ; import { View } from 'react-native' ; import { useDispatch } from 'react-redux' ; import { useReduxState } from '../../hooks/use-redux-state' ; import { Platform } from '../../libs/platform' ; import * as actions from '../../redux/actions' ; import * as selectors from '../../redux/selectors' ; import { sharedStyles } from '../../styles/shared' ; import { contentPadding , normalTextSize , scaleFactor , } from '../../styles/variables' ; import { openAppStore } from '../../utils/helpers/shared' ; import { ModalColumn } from '../columns/ModalColumn' ; import { AppVersion } from '../common/AppVersion' ; import { Avatar } from '../common/Avatar' ; import { Button } from '../common/Button' ; import { ButtonLink } from '../common/ButtonLink' ; import { Link } from '../common/Link' ; import { Spacer } from '../common/Spacer' ; import { SubHeader } from '../common/SubHeader' ; import { UnreadDot } from '../common/UnreadDot' ; import { useAppLayout } from '../context/LayoutContext' ; import { usePlans } from '../context/PlansContext' ; import { ThemedIcon } from '../themed/ThemedIcon' ; import { ThemedText } from '../themed/ThemedText' ; import { DesktopPreferences } from '../widgets/DesktopPreferences' ; import { ThemePreference } from '../widgets/ThemePreference' ; export interface SettingsModalProps { showBackButton : boolean ; } export const SettingsModal = React . memo ( ( props ) => { const { showBackButton } = props ; const { sizename } = useAppLayout ( ) ; const { freePlan , paidPlans } = usePlans ( ) ; const dispatch = useDispatch ( ) ; const appToken = useReduxState ( selectors . appTokenSelector ) ; const username = useReduxState ( selectors . currentGitHubUsernameSelector ) ; const userPlan = useReduxState ( selectors . currentUserPlanSelector ) ; const isPlanExpired = useReduxState ( selectors . isPlanExpiredSelector ) ; return ( < ModalColumn hideCloseButton = { sizename <= '2-medium' } name = "SETTINGS" right = { sizename <= '2-medium' && username ? ( < Avatar backgroundColorLoading = "" shape = "circle" size = { 28 * scaleFactor } username = { username } / > ) : undefined } showBackButton = { showBackButton } title = "Preferences" > < > { Platform . OS === 'web' && ! ( userPlan ?. status === 'active' && ! userPlan . interval ) && ! ( userPlan ?. id === 'free' && ! paidPlans . length ) && ( < View > < SubHeader title = "Current plan" > < Spacer flex = { 1 } /> < ButtonLink href = { `${ constants . DEVHUB_LINKS . ACCOUNT_PAGE }?appToken=${ appToken }` } openOnNewTab size = { 32 * scaleFactor } > < View style = { [ sharedStyles . center , sharedStyles . horizontal ] } > { } < ThemedText color = "foregroundColor" > { `${ userPlan ? userPlan . label || ( userPlan . amount ? 'Paid' : 'Free' ) : 'None' }${ isPlanExpired && paidPlans . length ? ' (expired)' : userPlan && userPlan . status === 'trialing' ? ( userPlan . label || '' ) . toLowerCase ( ) . includes ( 'trial' ) ? '' : userPlan . amount ? ' (trial)' : ' trial' : ! isPlanStatusValid ( userPlan ) && userPlan && userPlan . status ? ` (${ userPlan . status })` : '' } ↗` } < /ThemedText> { ! ! ( ( isPlanExpired && ! ( freePlan && ! freePlan . trialPeriodDays ) && paidPlans . length ) || ( userPlan && userPlan . status === 'active' && userPlan . cancelAtPeriodEnd && userPlan . cancelAt ) || ( userPlan && userPlan . status && ! isPlanStatusValid ( userPlan ) ) ) && ( < > < Spacer width = { contentPadding / 2 } /> < UnreadDot backgroundColor = "red" borderColor = { null } / > < />)} < /View> < /ButtonLink> < /SubHeader> < /View>)} < DesktopPreferences / > < ThemePreference /> { } < Spacer height = { contentPadding } /> { Platform . OS === 'ios' || Platform . OS === 'android' ? ( < SubHeader title = "Rate this app" > < Spacer flex = { 1 } /> < Button analyticsLabel = "rate_app" onPress = { ( ) => openAppStore ( { showReviewModal : true } ) } size = { 32 * scaleFactor } > < ThemedIcon color = "foregroundColor" family = "octicon" name = "star" size = { 16 * scaleFactor } / > < /Button> < /SubHeader>) : Platform.realOS === 'ios' || Platform.realOS === 'android' ? (<SubHeader title="Download native app"> < Spacer flex = { 1 } / > < Button analyticsLabel = "download_native_app" onPress = { ( ) => openAppStore ( { showReviewModal : false } ) } size = { 32 * scaleFactor } > < ThemedIcon color = "foregroundColor" family = "octicon" name = "device-mobile" size = { 16 * scaleFactor } / > < /Button> < /SubHeader>) : null} < View style = { { minHeight : 32 * scaleFactor } } > < SubHeader title = "Community" > < Spacer flex = { 1 } /> < View style = { sharedStyles . horizontal } > < Link analyticsCategory = "preferences_link" analyticsLabel = "twitter" enableForegroundHover href = { constants . DEVHUB_LINKS . TWITTER_PROFILE } openOnNewTab textProps = { { color : 'foregroundColor' , style : { fontSize : normalTextSize , lineHeight : normalTextSize * 1.5 , textAlign : 'center' , } , } } > Twitter < /Link> { } < ThemedText color = "foregroundColorMuted25" style = { { fontStyle : 'italic' , paddingHorizontal : contentPadding / 2 , } } > | < /ThemedText> < Link analyticsCategory = "preferences_link" analyticsLabel = "github" enableForegroundHover href = { constants . DEVHUB_LINKS . GITHUB_REPOSITORY } openOnNewTab textProps = { { color : 'foregroundColor' , style : { fontSize : normalTextSize , lineHeight : normalTextSize * 1.5 , textAlign : 'center' , } , } } > GitHub < /Link> < /View> < /SubHeader> < /View> < View style = { { minHeight : 32 * scaleFactor } } > < SubHeader title = "Follow me on Twitter" > < Spacer flex = { 1 } /> < View style = { sharedStyles . horizontal } > < Link analyticsCategory = "preferences_link" analyticsLabel = "twitter" enableForegroundHover href = "https://twitter.com/brunolemos" openOnNewTab textProps = { { color : 'foregroundColor' , style : { fontSize : normalTextSize , lineHeight : normalTextSize * 1.5 , textAlign : 'center' , } , } } > @ brunolemos < /Link> < /View> < /SubHeader> < /View> < Spacer flex = { 1 } minHeight = { contentPadding } / > < View style = { sharedStyles . paddingHorizontal } > < AppVersion /> < Spacer height = { contentPadding / 2 } /> < Button key = "advanced-button" onPress = { ( ) => dispatch ( actions . pushModal ( { name : 'ADVANCED_SETTINGS' } ) ) } > Show advanced settings < /Button> < /View> < Spacer height = { contentPadding / 2 } /> < /> < /ModalColumn>); } ) ; SettingsModal . displayName = 'SettingsModal' ;