diff --git a/lib/utils/policy-acknowledge-utlis.js b/lib/utils/policy-acknowledge-utils.js similarity index 100% rename from lib/utils/policy-acknowledge-utlis.js rename to lib/utils/policy-acknowledge-utils.js diff --git a/native/account/terms-and-privacy-modal.react.js b/native/account/terms-and-privacy-modal.react.js index 7d96fee7b..93c7666e8 100644 --- a/native/account/terms-and-privacy-modal.react.js +++ b/native/account/terms-and-privacy-modal.react.js @@ -1,188 +1,188 @@ // @flow import { useIsFocused } from '@react-navigation/native'; import * as React from 'react'; import { ActivityIndicator, BackHandler, Linking, Platform, Text, View, } from 'react-native'; import { policyAcknowledgment, policyAcknowledgmentActionTypes, } from 'lib/actions/user-actions.js'; import { type PolicyType, policyTypes } from 'lib/facts/policies.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { useServerCall } from 'lib/utils/action-utils.js'; -import { acknowledgePolicy } from 'lib/utils/policy-acknowledge-utlis.js'; +import { acknowledgePolicy } from 'lib/utils/policy-acknowledge-utils.js'; import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; import Button from '../components/button.react.js'; import Modal from '../components/modal.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; import { useSelector } from '../redux/redux-utils.js'; import { useStyles } from '../themes/colors.js'; export type TermsAndPrivacyModalParams = { +policyType: PolicyType, }; type Props = { +navigation: RootNavigationProp<'TermsAndPrivacyModal'>, +route: NavigationRoute<'TermsAndPrivacyModal'>, }; const loadingStatusSelector = createLoadingStatusSelector( policyAcknowledgmentActionTypes, ); function TermsAndPrivacyModal(props: Props): React.Node { const loadingStatus = useSelector(loadingStatusSelector); const [acknowledgmentError, setAcknowledgmentError] = React.useState(''); const sendAcknowledgmentRequest = useServerCall(policyAcknowledgment); const dispatchActionPromise = useDispatchActionPromise(); const policyType = props.route.params.policyType; const policyState = useSelector(store => store.userPolicies[policyType]); const isAcknowledged = policyState?.isAcknowledged; const isFocused = useIsFocused(); React.useEffect(() => { if (isAcknowledged && isFocused) { props.navigation.goBack(); } }, [isAcknowledged, props.navigation, isFocused]); const onAccept = React.useCallback(() => { acknowledgePolicy( policyTypes.tosAndPrivacyPolicy, dispatchActionPromise, sendAcknowledgmentRequest, setAcknowledgmentError, ); }, [dispatchActionPromise, sendAcknowledgmentRequest]); const styles = useStyles(unboundStyles); const buttonContent = React.useMemo(() => { if (loadingStatus === 'loading') { return ( ); } return I accept; }, [loadingStatus, styles.buttonText, styles.loading]); const onBackPress = props.navigation.isFocused; React.useEffect(() => { BackHandler.addEventListener('hardwareBackPress', onBackPress); return () => { BackHandler.removeEventListener('hardwareBackPress', onBackPress); }; }, [onBackPress]); const safeAreaEdges = ['top', 'bottom']; return ( Terms of Service and Privacy Policy We recently updated our Terms of Service & Privacy Policy . In order to continue using Comm, we’re asking you to read through, acknowledge, and accept the updated policies. {buttonContent} {acknowledgmentError} ); } const unboundStyles = { modal: { backgroundColor: 'modalForeground', paddingBottom: 10, paddingTop: 32, paddingHorizontal: 32, flex: 0, borderColor: 'modalForegroundBorder', }, header: { color: 'modalForegroundLabel', fontSize: 20, fontWeight: '600', textAlign: 'center', paddingBottom: 16, }, label: { color: 'modalForegroundSecondaryLabel', fontSize: 16, lineHeight: 20, textAlign: 'center', }, link: { color: 'purpleLink', fontWeight: 'bold', }, buttonsContainer: { flexDirection: 'column', marginTop: 24, height: 72, paddingHorizontal: 16, }, button: { borderRadius: 5, height: 48, justifyContent: 'center', alignItems: 'center', backgroundColor: 'purpleButton', }, buttonText: { color: 'white', fontSize: 16, fontWeight: '600', textAlign: 'center', }, error: { marginTop: 6, fontStyle: 'italic', color: 'redText', textAlign: 'center', }, loading: { paddingTop: Platform.OS === 'android' ? 0 : 6, }, }; const onTermsOfUsePressed = () => { void Linking.openURL('https://comm.app/terms'); }; const onPrivacyPolicyPressed = () => { void Linking.openURL('https://comm.app/privacy'); }; export default TermsAndPrivacyModal; diff --git a/web/modals/terms-and-privacy-modal.react.js b/web/modals/terms-and-privacy-modal.react.js index 3aa9ae55b..306c44b9b 100644 --- a/web/modals/terms-and-privacy-modal.react.js +++ b/web/modals/terms-and-privacy-modal.react.js @@ -1,94 +1,94 @@ // @flow import * as React from 'react'; import { policyAcknowledgment, policyAcknowledgmentActionTypes, } from 'lib/actions/user-actions.js'; import { policyTypes } from 'lib/facts/policies.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { useServerCall } from 'lib/utils/action-utils.js'; -import { acknowledgePolicy } from 'lib/utils/policy-acknowledge-utlis.js'; +import { acknowledgePolicy } from 'lib/utils/policy-acknowledge-utils.js'; import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; import Modal from './modal.react.js'; import css from './terms-and-privacy-modal.css'; import Button, { buttonThemes } from '../components/button.react.js'; import LoadingIndicator from '../loading-indicator.react.js'; import { useSelector } from '../redux/redux-utils.js'; const loadingStatusSelector = createLoadingStatusSelector( policyAcknowledgmentActionTypes, ); const disabledOnClose = () => undefined; function TermsAndPrivacyModal(): React.Node { const loading = useSelector(loadingStatusSelector); const [acknowledgmentError, setAcknowledgmentError] = React.useState(''); const sendAcknowledgmentRequest = useServerCall(policyAcknowledgment); const dispatchActionPromise = useDispatchActionPromise(); const onAccept = React.useCallback(() => { acknowledgePolicy( policyTypes.tosAndPrivacyPolicy, dispatchActionPromise, sendAcknowledgmentRequest, setAcknowledgmentError, ); }, [dispatchActionPromise, sendAcknowledgmentRequest]); const buttonContent = React.useMemo(() => { if (loading === 'loading') { return ; } return 'I accept'; }, [loading]); return ( We recently updated our{' '} Terms of Service {' & '} Privacy Policy . In order to continue using Comm, we’re asking you to read through, acknowledge, and accept the updated policies. {buttonContent} {acknowledgmentError} ); } export default TermsAndPrivacyModal;