[web] Indicate success via `saveAvatarButton` on success
ClosedPublic
Actions

	// @flow			// @flow

	import invariant from 'invariant';			import invariant from 'invariant';
	import * as React from 'react';			import * as React from 'react';
	import { Text } from 'react-native';			import { Text, View, Image, Linking } from 'react-native';

	import RegistrationButtonContainer from './registration-button-container.react.js';			import RegistrationButtonContainer from './registration-button-container.react.js';
	import RegistrationButton from './registration-button.react.js';			import RegistrationButton from './registration-button.react.js';
	import RegistrationContainer from './registration-container.react.js';			import RegistrationContainer from './registration-container.react.js';
	import RegistrationContentContainer from './registration-content-container.react.js';			import RegistrationContentContainer from './registration-content-container.react.js';
	import { RegistrationContext } from './registration-context.js';			import { RegistrationContext } from './registration-context.js';
	import type { RegistrationNavigationProp } from './registration-navigator.react.js';			import type { RegistrationNavigationProp } from './registration-navigator.react.js';
	import type {			import type {
	CoolOrNerdMode,			CoolOrNerdMode,
	AccountSelection,			AccountSelection,
	AvatarData,			AvatarData,
	} from './registration-types.js';			} from './registration-types.js';
				import commSwooshSource from '../../img/comm-swoosh.png';
	import type { NavigationRoute } from '../../navigation/route-names.js';			import type { NavigationRoute } from '../../navigation/route-names.js';
	import { useStyles } from '../../themes/colors.js';			import { useStyles } from '../../themes/colors.js';

	export type RegistrationTermsParams = {			export type RegistrationTermsParams = {
	+userSelections: {			+userSelections: {
	+coolOrNerdMode: CoolOrNerdMode,			+coolOrNerdMode: CoolOrNerdMode,
	+keyserverUsername: string,			+keyserverUsername: string,
	+accountSelection: AccountSelection,			+accountSelection: AccountSelection,
	+avatarData: ?AvatarData,			+avatarData: ?AvatarData,
	},			},
	};			};

				const onTermsOfUsePressed = () => {
				Linking.openURL('https://comm.app/terms');
				};

				const onPrivacyPolicyPressed = () => {
				Linking.openURL('https://comm.app/privacy');
				};

	type Props = {			type Props = {
	+navigation: RegistrationNavigationProp<'RegistrationTerms'>,			+navigation: RegistrationNavigationProp<'RegistrationTerms'>,
	+route: NavigationRoute<'RegistrationTerms'>,			+route: NavigationRoute<'RegistrationTerms'>,
	};			};
	function RegistrationTerms(props: Props): React.Node {			function RegistrationTerms(props: Props): React.Node {
	const registrationContext = React.useContext(RegistrationContext);			const registrationContext = React.useContext(RegistrationContext);
	invariant(registrationContext, 'registrationContext should be set');			invariant(registrationContext, 'registrationContext should be set');
	const { register } = registrationContext;			const { register } = registrationContext;

	const [registrationInProgress, setRegistrationInProgress] =			const [registrationInProgress, setRegistrationInProgress] =
	React.useState(false);			React.useState(false);

	const { userSelections } = props.route.params;			const { userSelections } = props.route.params;
	const onProceed = React.useCallback(async () => {			const onProceed = React.useCallback(async () => {
	setRegistrationInProgress(true);			setRegistrationInProgress(true);
	try {			try {
	await register(userSelections);			await register(userSelections);
	} finally {			} finally {
	setRegistrationInProgress(false);			setRegistrationInProgress(false);
	}			}
	}, [register, userSelections]);			}, [register, userSelections]);

	const styles = useStyles(unboundStyles);			const styles = useStyles(unboundStyles);

				/* eslint-disable react-native/no-raw-text */
				const termsNotice = (
				<Text style={styles.body}>
				By registering, you are agreeing to our{' '}
				<Text style={styles.hyperlinkText} onPress={onTermsOfUsePressed}>
				Terms of Use
				</Text>
				{' and '}
				<Text style={styles.hyperlinkText} onPress={onPrivacyPolicyPressed}>
				Privacy Policy
				</Text>
				.
				</Text>
				);
				/* eslint-enable react-native/no-raw-text */

	return (			return (
	<RegistrationContainer>			<RegistrationContainer>
	<RegistrationContentContainer>			<RegistrationContentContainer style={styles.scrollViewContentContainer}>
	<Text style={styles.header}>Finish registration</Text>			<Text style={styles.header}>Finish registration</Text>
				{termsNotice}
				<View style={styles.commSwooshContainer}>
				<Image source={commSwooshSource} style={styles.commSwoosh} />
				</View>
	</RegistrationContentContainer>			</RegistrationContentContainer>
	<RegistrationButtonContainer>			<RegistrationButtonContainer>
	<RegistrationButton			<RegistrationButton
	onPress={onProceed}			onPress={onProceed}
	label="Register"			label="Register"
	variant={registrationInProgress ? 'loading' : 'enabled'}			variant={registrationInProgress ? 'loading' : 'enabled'}
	/>			/>
	</RegistrationButtonContainer>			</RegistrationButtonContainer>
	</RegistrationContainer>			</RegistrationContainer>
	);			);
	}			}

	const unboundStyles = {			const unboundStyles = {
				scrollViewContentContainer: {
				flexGrow: 1,
				},
	header: {			header: {
	fontSize: 24,			fontSize: 24,
	color: 'panelForegroundLabel',			color: 'panelForegroundLabel',
	paddingBottom: 16,			paddingBottom: 16,
	},			},
				body: {
				fontFamily: 'Arial',
				fontSize: 15,
				lineHeight: 20,
				color: 'panelForegroundSecondaryLabel',
				paddingBottom: 16,
				},
				commSwooshContainer: {
				flexGrow: 1,
				flexShrink: 1,
				alignItems: 'center',
				justifyContent: 'center',
				},
				commSwoosh: {
				resizeMode: 'center',
				width: '100%',
				height: '100%',
				},
				hyperlinkText: {
				color: 'purpleLink',
				},
	};			};

	export default RegistrationTerms;			export default RegistrationTerms;

[web] Indicate success via `saveAvatarButton` on successClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 28093

web/avatars/emoji-avatar-selection-modal.react.js

[web] Indicate success via `saveAvatarButton` on success
ClosedPublic
Actions

Revision Contents
Changeset List