rm waitlist modal, button during sign up (#3148)
parent
c8e0fa9c97
commit
31826633cb
|
@ -4,7 +4,6 @@ import {
|
||||||
Keyboard,
|
Keyboard,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
TouchableOpacity,
|
TouchableOpacity,
|
||||||
TouchableWithoutFeedback,
|
|
||||||
View,
|
View,
|
||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
import {CreateAccountState, CreateAccountDispatch, is18} from './state'
|
import {CreateAccountState, CreateAccountDispatch, is18} from './state'
|
||||||
|
@ -19,7 +18,6 @@ import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
|
||||||
import {isWeb} from 'platform/detection'
|
import {isWeb} from 'platform/detection'
|
||||||
import {Trans, msg} from '@lingui/macro'
|
import {Trans, msg} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
import {useModalControls} from '#/state/modals'
|
|
||||||
import {logger} from '#/logger'
|
import {logger} from '#/logger'
|
||||||
import {
|
import {
|
||||||
FontAwesomeIcon,
|
FontAwesomeIcon,
|
||||||
|
@ -49,7 +47,6 @@ export function Step1({
|
||||||
}) {
|
}) {
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const {openModal} = useModalControls()
|
|
||||||
const serverInputControl = useDialogControl()
|
const serverInputControl = useDialogControl()
|
||||||
|
|
||||||
const onPressSelectService = React.useCallback(() => {
|
const onPressSelectService = React.useCallback(() => {
|
||||||
|
@ -57,10 +54,6 @@ export function Step1({
|
||||||
Keyboard.dismiss()
|
Keyboard.dismiss()
|
||||||
}, [serverInputControl])
|
}, [serverInputControl])
|
||||||
|
|
||||||
const onPressWaitlist = React.useCallback(() => {
|
|
||||||
openModal({name: 'waitlist'})
|
|
||||||
}, [openModal])
|
|
||||||
|
|
||||||
const birthDate = React.useMemo(() => {
|
const birthDate = React.useMemo(() => {
|
||||||
return sanitizeDate(uiState.birthDate)
|
return sanitizeDate(uiState.birthDate)
|
||||||
}, [uiState.birthDate])
|
}, [uiState.birthDate])
|
||||||
|
@ -164,23 +157,7 @@ export function Step1({
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!uiState.inviteCode && uiState.isInviteCodeRequired ? (
|
{uiState.inviteCode ? (
|
||||||
<View style={[s.flexRow, s.alignCenter]}>
|
|
||||||
<Text style={pal.text}>
|
|
||||||
<Trans>Don't have an invite code?</Trans>{' '}
|
|
||||||
</Text>
|
|
||||||
<TouchableWithoutFeedback
|
|
||||||
onPress={onPressWaitlist}
|
|
||||||
accessibilityLabel={_(msg`Join the waitlist.`)}
|
|
||||||
accessibilityHint="">
|
|
||||||
<View style={styles.touchable}>
|
|
||||||
<Text style={pal.link}>
|
|
||||||
<Trans>Join the waitlist.</Trans>
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</TouchableWithoutFeedback>
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<>
|
<>
|
||||||
<View style={s.pb20}>
|
<View style={s.pb20}>
|
||||||
<Text
|
<Text
|
||||||
|
@ -260,7 +237,7 @@ export function Step1({
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
) : undefined}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -20,7 +20,6 @@ import * as ReportModal from './report/Modal'
|
||||||
import * as AppealLabelModal from './AppealLabel'
|
import * as AppealLabelModal from './AppealLabel'
|
||||||
import * as DeleteAccountModal from './DeleteAccount'
|
import * as DeleteAccountModal from './DeleteAccount'
|
||||||
import * as ChangeHandleModal from './ChangeHandle'
|
import * as ChangeHandleModal from './ChangeHandle'
|
||||||
import * as WaitlistModal from './Waitlist'
|
|
||||||
import * as InviteCodesModal from './InviteCodes'
|
import * as InviteCodesModal from './InviteCodes'
|
||||||
import * as AddAppPassword from './AddAppPasswords'
|
import * as AddAppPassword from './AddAppPasswords'
|
||||||
import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
|
import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
|
||||||
|
@ -109,9 +108,6 @@ export function ModalsContainer() {
|
||||||
} else if (activeModal?.name === 'change-handle') {
|
} else if (activeModal?.name === 'change-handle') {
|
||||||
snapPoints = ChangeHandleModal.snapPoints
|
snapPoints = ChangeHandleModal.snapPoints
|
||||||
element = <ChangeHandleModal.Component {...activeModal} />
|
element = <ChangeHandleModal.Component {...activeModal} />
|
||||||
} else if (activeModal?.name === 'waitlist') {
|
|
||||||
snapPoints = WaitlistModal.snapPoints
|
|
||||||
element = <WaitlistModal.Component />
|
|
||||||
} else if (activeModal?.name === 'invite-codes') {
|
} else if (activeModal?.name === 'invite-codes') {
|
||||||
snapPoints = InviteCodesModal.snapPoints
|
snapPoints = InviteCodesModal.snapPoints
|
||||||
element = <InviteCodesModal.Component />
|
element = <InviteCodesModal.Component />
|
||||||
|
|
|
@ -22,7 +22,6 @@ import * as CropImageModal from './crop-image/CropImage.web'
|
||||||
import * as AltTextImageModal from './AltImage'
|
import * as AltTextImageModal from './AltImage'
|
||||||
import * as EditImageModal from './EditImage'
|
import * as EditImageModal from './EditImage'
|
||||||
import * as ChangeHandleModal from './ChangeHandle'
|
import * as ChangeHandleModal from './ChangeHandle'
|
||||||
import * as WaitlistModal from './Waitlist'
|
|
||||||
import * as InviteCodesModal from './InviteCodes'
|
import * as InviteCodesModal from './InviteCodes'
|
||||||
import * as AddAppPassword from './AddAppPasswords'
|
import * as AddAppPassword from './AddAppPasswords'
|
||||||
import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
|
import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
|
||||||
|
@ -105,8 +104,6 @@ function Modal({modal}: {modal: ModalIface}) {
|
||||||
element = <ThreadgateModal.Component {...modal} />
|
element = <ThreadgateModal.Component {...modal} />
|
||||||
} else if (modal.name === 'change-handle') {
|
} else if (modal.name === 'change-handle') {
|
||||||
element = <ChangeHandleModal.Component {...modal} />
|
element = <ChangeHandleModal.Component {...modal} />
|
||||||
} else if (modal.name === 'waitlist') {
|
|
||||||
element = <WaitlistModal.Component />
|
|
||||||
} else if (modal.name === 'invite-codes') {
|
} else if (modal.name === 'invite-codes') {
|
||||||
element = <InviteCodesModal.Component />
|
element = <InviteCodesModal.Component />
|
||||||
} else if (modal.name === 'add-app-password') {
|
} else if (modal.name === 'add-app-password') {
|
||||||
|
|
|
@ -1,190 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
ActivityIndicator,
|
|
||||||
StyleSheet,
|
|
||||||
TouchableOpacity,
|
|
||||||
View,
|
|
||||||
} from 'react-native'
|
|
||||||
import {TextInput} from './util'
|
|
||||||
import {
|
|
||||||
FontAwesomeIcon,
|
|
||||||
FontAwesomeIconStyle,
|
|
||||||
} from '@fortawesome/react-native-fontawesome'
|
|
||||||
import LinearGradient from 'react-native-linear-gradient'
|
|
||||||
import {Text} from '../util/text/Text'
|
|
||||||
import {s, gradients} from 'lib/styles'
|
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
|
||||||
import {useTheme} from 'lib/ThemeContext'
|
|
||||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
|
||||||
import {cleanError} from 'lib/strings/errors'
|
|
||||||
import {Trans, msg} from '@lingui/macro'
|
|
||||||
import {useLingui} from '@lingui/react'
|
|
||||||
import {useModalControls} from '#/state/modals'
|
|
||||||
|
|
||||||
export const snapPoints = ['80%']
|
|
||||||
|
|
||||||
export function Component({}: {}) {
|
|
||||||
const pal = usePalette('default')
|
|
||||||
const theme = useTheme()
|
|
||||||
const {_} = useLingui()
|
|
||||||
const {closeModal} = useModalControls()
|
|
||||||
const [email, setEmail] = React.useState<string>('')
|
|
||||||
const [isEmailSent, setIsEmailSent] = React.useState<boolean>(false)
|
|
||||||
const [isProcessing, setIsProcessing] = React.useState<boolean>(false)
|
|
||||||
const [error, setError] = React.useState<string>('')
|
|
||||||
|
|
||||||
const onPressSignup = async () => {
|
|
||||||
setError('')
|
|
||||||
setIsProcessing(true)
|
|
||||||
try {
|
|
||||||
const res = await fetch('https://bsky.app/api/waitlist', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {'Content-Type': 'application/json'},
|
|
||||||
body: JSON.stringify({email}),
|
|
||||||
})
|
|
||||||
const resBody = await res.json()
|
|
||||||
if (resBody.success) {
|
|
||||||
setIsEmailSent(true)
|
|
||||||
} else {
|
|
||||||
setError(
|
|
||||||
resBody.error ||
|
|
||||||
_(msg`Something went wrong. Check your email and try again.`),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
} catch (e: any) {
|
|
||||||
setError(cleanError(e))
|
|
||||||
}
|
|
||||||
setIsProcessing(false)
|
|
||||||
}
|
|
||||||
const onCancel = () => {
|
|
||||||
closeModal()
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={[styles.container, pal.view]}>
|
|
||||||
<View style={[styles.innerContainer, pal.view]}>
|
|
||||||
<Text type="title-xl" style={[styles.title, pal.text]}>
|
|
||||||
<Trans>Join the waitlist</Trans>
|
|
||||||
</Text>
|
|
||||||
<Text type="lg" style={[styles.description, pal.text]}>
|
|
||||||
<Trans>
|
|
||||||
Bluesky uses invites to build a healthier community. If you don't
|
|
||||||
know anybody with an invite, you can sign up for the waitlist and
|
|
||||||
we'll send one soon.
|
|
||||||
</Trans>
|
|
||||||
</Text>
|
|
||||||
<TextInput
|
|
||||||
style={[styles.textInput, pal.borderDark, pal.text, s.mb10, s.mt10]}
|
|
||||||
placeholder={_(msg`Enter your email`)}
|
|
||||||
placeholderTextColor={pal.textLight.color}
|
|
||||||
autoCapitalize="none"
|
|
||||||
autoCorrect={false}
|
|
||||||
keyboardAppearance={theme.colorScheme}
|
|
||||||
value={email}
|
|
||||||
onChangeText={setEmail}
|
|
||||||
onSubmitEditing={onPressSignup}
|
|
||||||
enterKeyHint="done"
|
|
||||||
accessible={true}
|
|
||||||
accessibilityLabel={_(msg`Email`)}
|
|
||||||
accessibilityHint={_(
|
|
||||||
msg`Input your email to get on the Bluesky waitlist`,
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{error ? (
|
|
||||||
<View style={s.mt10}>
|
|
||||||
<ErrorMessage message={error} style={styles.error} />
|
|
||||||
</View>
|
|
||||||
) : undefined}
|
|
||||||
{isProcessing ? (
|
|
||||||
<View style={[styles.btn, s.mt10]}>
|
|
||||||
<ActivityIndicator />
|
|
||||||
</View>
|
|
||||||
) : isEmailSent ? (
|
|
||||||
<View style={[styles.btn, s.mt10]}>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon="check"
|
|
||||||
style={pal.text as FontAwesomeIconStyle}
|
|
||||||
/>
|
|
||||||
<Text style={[s.ml10, pal.text]}>
|
|
||||||
<Trans>
|
|
||||||
Your email has been saved! We'll be in touch soon.
|
|
||||||
</Trans>
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={onPressSignup}
|
|
||||||
accessibilityRole="button"
|
|
||||||
accessibilityHint={_(
|
|
||||||
msg`Confirms signing up ${email} to the waitlist`,
|
|
||||||
)}>
|
|
||||||
<LinearGradient
|
|
||||||
colors={[gradients.blueLight.start, gradients.blueLight.end]}
|
|
||||||
start={{x: 0, y: 0}}
|
|
||||||
end={{x: 1, y: 1}}
|
|
||||||
style={[styles.btn]}>
|
|
||||||
<Text type="button-lg" style={[s.white, s.bold]}>
|
|
||||||
<Trans>Join Waitlist</Trans>
|
|
||||||
</Text>
|
|
||||||
</LinearGradient>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[styles.btn, s.mt10]}
|
|
||||||
onPress={onCancel}
|
|
||||||
accessibilityRole="button"
|
|
||||||
accessibilityLabel={_(msg`Cancel waitlist signup`)}
|
|
||||||
accessibilityHint={_(
|
|
||||||
msg`Exits signing up for waitlist with ${email}`,
|
|
||||||
)}
|
|
||||||
onAccessibilityEscape={onCancel}>
|
|
||||||
<Text type="button-lg" style={pal.textLight}>
|
|
||||||
<Trans>Cancel</Trans>
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
innerContainer: {
|
|
||||||
paddingBottom: 20,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
textAlign: 'center',
|
|
||||||
marginTop: 12,
|
|
||||||
marginBottom: 12,
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
textAlign: 'center',
|
|
||||||
paddingHorizontal: 22,
|
|
||||||
marginBottom: 10,
|
|
||||||
},
|
|
||||||
textInput: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderRadius: 6,
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingVertical: 12,
|
|
||||||
fontSize: 20,
|
|
||||||
marginHorizontal: 20,
|
|
||||||
},
|
|
||||||
btn: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
borderRadius: 32,
|
|
||||||
padding: 14,
|
|
||||||
marginHorizontal: 20,
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
borderRadius: 6,
|
|
||||||
marginHorizontal: 20,
|
|
||||||
marginBottom: 20,
|
|
||||||
},
|
|
||||||
})
|
|
Loading…
Reference in New Issue