Bluesky app fork with some witchin' additions 💫 witchsky.app
bluesky fork

Improve instructions on NoAccessScreen and bday dialog (#9571)

authored by Eric Bailey and committed by GitHub a355eedf 89cffdf5

Changed files
+47 -46
src
ageAssurance
components
components
+33 -45
src/ageAssurance/components/NoAccessScreen.tsx
··· 9 useCreateSupportLink, 10 } from '#/lib/hooks/useCreateSupportLink' 11 import {dateDiff, useGetTimeAgo} from '#/lib/hooks/useTimeAgo' 12 - import {isAppPassword} from '#/lib/jwt' 13 import {logger} from '#/logger' 14 import {isWeb} from '#/platform/detection' 15 import {isNative} from '#/platform/detection' 16 import {useIsBirthdateUpdateAllowed} from '#/state/birthdate' 17 - import {useSession, useSessionApi} from '#/state/session' 18 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' 19 import {Admonition} from '#/components/Admonition' 20 import {AgeAssuranceAppealDialog} from '#/components/ageAssurance/AgeAssuranceAppealDialog' ··· 30 import {createStaticClick, SimpleInlineLinkText} from '#/components/Link' 31 import {Outlet as PortalOutlet} from '#/components/Portal' 32 import * as Toast from '#/components/Toast' 33 - import {Span, Text} from '#/components/Typography' 34 import {BottomSheetOutlet} from '#/../modules/bottom-sheet' 35 import {useAgeAssurance} from '#/ageAssurance' 36 import {useAgeAssuranceDataContext} from '#/ageAssurance/data' ··· 55 const {logoutCurrentAccount} = useSessionApi() 56 const createSupportLink = useCreateSupportLink() 57 58 - const {currentAccount} = useSession() 59 - const isUsingAppPassword = isAppPassword(currentAccount?.accessJwt || '') 60 - 61 const aa = useAgeAssurance() 62 const isBlocked = aa.state.status === aa.Status.Blocked 63 const isAARegion = !!region ··· 89 logoutCurrentAccount('AgeAssuranceNoAccessScreen') 90 }, [logoutCurrentAccount]) 91 92 - const birthdateUpdateText = canUpdateBirthday ? ( 93 - <Text style={[textStyles]}> 94 <Trans> 95 - If you believe your birthdate is incorrect, you can update it by{' '} 96 - <SimpleInlineLinkText 97 - label={_(msg`Click here to update your birthdate`)} 98 - style={[textStyles]} 99 - {...createStaticClick(() => { 100 - logger.metric('ageAssurance:noAccessScreen:openBirthdateDialog', {}) 101 - birthdateControl.open() 102 - })}> 103 - clicking here 104 - </SimpleInlineLinkText> 105 - . 106 </Trans> 107 - </Text> 108 ) : ( 109 <Text style={[textStyles]}> 110 <Trans> ··· 120 </Text> 121 ) 122 123 - const orgAdmonition = ( 124 - <Admonition type="tip"> 125 - <Trans> 126 - For organizational accounts, use the birthdate of the person who is 127 - responsible for the account. 128 - </Trans> 129 - </Admonition> 130 - ) 131 - 132 return ( 133 <> 134 <View style={[a.util_screen_outer, a.flex_1]}> ··· 175 </Text> 176 177 {!isBlocked && birthdateUpdateText} 178 - 179 - {orgAdmonition} 180 </View> 181 182 <AccessSection /> ··· 191 </Text> 192 193 {birthdateUpdateText} 194 - 195 - {orgAdmonition} 196 </View> 197 )} 198 </> ··· 224 </ButtonText> 225 </Button> 226 227 - {isUsingAppPassword ? ( 228 - <Admonition type="info"> 229 - <Trans> 230 - Hmm, it looks like you're logged in with an{' '} 231 - <Span style={[a.italic]}>App Password</Span>. To set your 232 - birthdate, you'll need to log in with your main account 233 - password, or ask whomever controls this account to do so. 234 - </Trans> 235 - </Admonition> 236 - ) : ( 237 - orgAdmonition 238 - )} 239 </View> 240 )} 241
··· 9 useCreateSupportLink, 10 } from '#/lib/hooks/useCreateSupportLink' 11 import {dateDiff, useGetTimeAgo} from '#/lib/hooks/useTimeAgo' 12 import {logger} from '#/logger' 13 import {isWeb} from '#/platform/detection' 14 import {isNative} from '#/platform/detection' 15 import {useIsBirthdateUpdateAllowed} from '#/state/birthdate' 16 + import {useSessionApi} from '#/state/session' 17 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' 18 import {Admonition} from '#/components/Admonition' 19 import {AgeAssuranceAppealDialog} from '#/components/ageAssurance/AgeAssuranceAppealDialog' ··· 29 import {createStaticClick, SimpleInlineLinkText} from '#/components/Link' 30 import {Outlet as PortalOutlet} from '#/components/Portal' 31 import * as Toast from '#/components/Toast' 32 + import {Text} from '#/components/Typography' 33 import {BottomSheetOutlet} from '#/../modules/bottom-sheet' 34 import {useAgeAssurance} from '#/ageAssurance' 35 import {useAgeAssuranceDataContext} from '#/ageAssurance/data' ··· 54 const {logoutCurrentAccount} = useSessionApi() 55 const createSupportLink = useCreateSupportLink() 56 57 const aa = useAgeAssurance() 58 const isBlocked = aa.state.status === aa.Status.Blocked 59 const isAARegion = !!region ··· 85 logoutCurrentAccount('AgeAssuranceNoAccessScreen') 86 }, [logoutCurrentAccount]) 87 88 + const orgAdmonition = ( 89 + <Admonition type="tip"> 90 <Trans> 91 + For organizational accounts, use the birthdate of the person who is 92 + responsible for the account. 93 </Trans> 94 + </Admonition> 95 + ) 96 + 97 + const birthdateUpdateText = canUpdateBirthday ? ( 98 + <> 99 + <Text style={[textStyles]}> 100 + <Trans> 101 + If you believe your birthdate is incorrect, you can update it by{' '} 102 + <SimpleInlineLinkText 103 + label={_(msg`Click here to update your birthdate`)} 104 + style={[textStyles]} 105 + {...createStaticClick(() => { 106 + logger.metric( 107 + 'ageAssurance:noAccessScreen:openBirthdateDialog', 108 + {}, 109 + ) 110 + birthdateControl.open() 111 + })}> 112 + clicking here 113 + </SimpleInlineLinkText> 114 + . 115 + </Trans> 116 + </Text> 117 + 118 + {orgAdmonition} 119 + </> 120 ) : ( 121 <Text style={[textStyles]}> 122 <Trans> ··· 132 </Text> 133 ) 134 135 return ( 136 <> 137 <View style={[a.util_screen_outer, a.flex_1]}> ··· 178 </Text> 179 180 {!isBlocked && birthdateUpdateText} 181 </View> 182 183 <AccessSection /> ··· 192 </Text> 193 194 {birthdateUpdateText} 195 </View> 196 )} 197 </> ··· 223 </ButtonText> 224 </Button> 225 226 + {orgAdmonition} 227 </View> 228 )} 229
+14 -1
src/components/dialogs/BirthDateSettings.tsx
··· 4 import {useLingui} from '@lingui/react' 5 6 import {useCleanError} from '#/lib/hooks/useCleanError' 7 import {getAge, getDateAgo} from '#/lib/strings/time' 8 import {logger} from '#/logger' 9 import {isIOS, isWeb} from '#/platform/detection' ··· 15 usePreferencesQuery, 16 type UsePreferencesQueryResponse, 17 } from '#/state/queries/preferences' 18 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' 19 import {atoms as a, useTheme, web} from '#/alf' 20 import {Admonition} from '#/components/Admonition' ··· 23 import {DateField} from '#/components/forms/DateField' 24 import {SimpleInlineLinkText} from '#/components/Link' 25 import {Loader} from '#/components/Loader' 26 - import {Text} from '#/components/Typography' 27 28 export function BirthDateSettingsDialog({ 29 control, ··· 34 const {_} = useLingui() 35 const {isLoading, error, data: preferences} = usePreferencesQuery() 36 const isBirthdateUpdateAllowed = useIsBirthdateUpdateAllowed() 37 38 return ( 39 <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}> ··· 65 } 66 style={[a.rounded_sm]} 67 /> 68 ) : ( 69 <BirthdayInner control={control} preferences={preferences} /> 70 )}
··· 4 import {useLingui} from '@lingui/react' 5 6 import {useCleanError} from '#/lib/hooks/useCleanError' 7 + import {isAppPassword} from '#/lib/jwt' 8 import {getAge, getDateAgo} from '#/lib/strings/time' 9 import {logger} from '#/logger' 10 import {isIOS, isWeb} from '#/platform/detection' ··· 16 usePreferencesQuery, 17 type UsePreferencesQueryResponse, 18 } from '#/state/queries/preferences' 19 + import {useSession} from '#/state/session' 20 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' 21 import {atoms as a, useTheme, web} from '#/alf' 22 import {Admonition} from '#/components/Admonition' ··· 25 import {DateField} from '#/components/forms/DateField' 26 import {SimpleInlineLinkText} from '#/components/Link' 27 import {Loader} from '#/components/Loader' 28 + import {Span, Text} from '#/components/Typography' 29 30 export function BirthDateSettingsDialog({ 31 control, ··· 36 const {_} = useLingui() 37 const {isLoading, error, data: preferences} = usePreferencesQuery() 38 const isBirthdateUpdateAllowed = useIsBirthdateUpdateAllowed() 39 + const {currentAccount} = useSession() 40 + const isUsingAppPassword = isAppPassword(currentAccount?.accessJwt || '') 41 42 return ( 43 <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}> ··· 69 } 70 style={[a.rounded_sm]} 71 /> 72 + ) : isUsingAppPassword ? ( 73 + <Admonition type="info"> 74 + <Trans> 75 + Hmm, it looks like you're logged in with an{' '} 76 + <Span style={[a.italic]}>App Password</Span>. To set your 77 + birthdate, you'll need to log in with your main account 78 + password, or ask whomever controls this account to do so. 79 + </Trans> 80 + </Admonition> 81 ) : ( 82 <BirthdayInner control={control} preferences={preferences} /> 83 )}