Skip to content

Commit

Permalink
Merge pull request #20247 from chychkoi/migrate-terms-step
Browse files Browse the repository at this point in the history 
Migrate TermsStep.js to function component
  • Loading branch information
@robertjchen
robertjchen committed Jun 8, 2023
2 parents 6e7f460 + 77e55c3 commit 78aa3ba
Showing 1 changed file with 80 additions and 95 deletions.
175 changes: 80 additions & 95 deletions src/pages/EnablePayments/TermsStep.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, {useEffect, useState} from 'react';
import {ScrollView} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import HeaderWithBackButton from '../../components/HeaderWithBackButton';
Expand Down Expand Up @@ -27,105 +27,90 @@ const defaultProps = {
walletTerms: {},
};

class TermsStep extends React.Component {
constructor(props) {
super(props);

this.toggleDisclosure = this.toggleDisclosure.bind(this);
this.togglePrivacyPolicy = this.togglePrivacyPolicy.bind(this);
this.state = {
hasAcceptedDisclosure: false,
hasAcceptedPrivacyPolicyAndWalletAgreement: false,
error: false,
};
}

clearError() {
if (!this.state.hasAcceptedDisclosure || !this.state.hasAcceptedPrivacyPolicyAndWalletAgreement) {
function TermsStep(props) {
const [hasAcceptedDisclosure, setHasAcceptedDisclosure] = useState(false);
const [hasAcceptedPrivacyPolicyAndWalletAgreement, setHasAcceptedPrivacyPolicyAndWalletAgreement] = useState(false);
const [error, setError] = useState(false);

const errorMessage = error ? 'common.error.acceptTerms' : ErrorUtils.getLatestErrorMessage(props.walletTerms) || '';

const toggleDisclosure = () => {
setHasAcceptedDisclosure(!hasAcceptedDisclosure);
};

const togglePrivacyPolicy = () => {
setHasAcceptedPrivacyPolicyAndWalletAgreement(!hasAcceptedPrivacyPolicyAndWalletAgreement);
};

/** clear error */
useEffect(() => {
if (!hasAcceptedDisclosure || !hasAcceptedPrivacyPolicyAndWalletAgreement) {
return;
}

this.setState({error: false});
}

toggleDisclosure() {
this.setState(
(prevState) => ({hasAcceptedDisclosure: !prevState.hasAcceptedDisclosure}),
() => this.clearError(),
);
}

togglePrivacyPolicy() {
this.setState(
(prevState) => ({
hasAcceptedPrivacyPolicyAndWalletAgreement: !prevState.hasAcceptedPrivacyPolicyAndWalletAgreement,
}),
() => this.clearError(),
);
}

render() {
const errorMessage = this.state.error ? 'common.error.acceptTerms' : ErrorUtils.getLatestErrorMessage(this.props.walletTerms) || '';
return (
<>
<HeaderWithBackButton title={this.props.translate('termsStep.headerTitle')} />

<ScrollView
style={styles.flex1}
contentContainerStyle={styles.ph5}
>
<ShortTermsForm />
<LongTermsForm />
<CheckboxWithLabel
style={[styles.mb4, styles.mt4]}
isChecked={this.state.hasAcceptedDisclosure}
onInputChange={this.toggleDisclosure}
LabelComponent={() => (
<Text>
{`${this.props.translate('termsStep.haveReadAndAgree')}`}
<TextLink href="https://use.expensify.com/esignagreement">{`${this.props.translate('termsStep.electronicDisclosures')}.`}</TextLink>
</Text>
)}
/>
<CheckboxWithLabel
isChecked={this.state.hasAcceptedPrivacyPolicyAndWalletAgreement}
onInputChange={this.togglePrivacyPolicy}
LabelComponent={() => (
<Text>
{`${this.props.translate('termsStep.agreeToThe')} `}

<TextLink href="https://use.expensify.com/privacy">{`${this.props.translate('common.privacy')} `}</TextLink>

{`${this.props.translate('common.and')} `}

<TextLink href="https://use.expensify.com/walletagreement">{`${this.props.translate('termsStep.walletAgreement')}.`}</TextLink>
</Text>
)}
/>
<FormAlertWithSubmitButton
buttonText={this.props.translate('termsStep.enablePayments')}
onSubmit={() => {
if (!this.state.hasAcceptedDisclosure || !this.state.hasAcceptedPrivacyPolicyAndWalletAgreement) {
this.setState({error: true});
return;
}

this.setState({error: false});
BankAccounts.acceptWalletTerms({
hasAcceptedTerms: this.state.hasAcceptedDisclosure && this.state.hasAcceptedPrivacyPolicyAndWalletAgreement,
chatReportID: this.props.walletTerms.chatReportID,
});
}}
message={errorMessage}
isAlertVisible={this.state.error || Boolean(errorMessage)}
containerStyles={[styles.mh0, styles.mv4]}
/>
</ScrollView>
</>
);
}
setError(false);
}, [hasAcceptedDisclosure, hasAcceptedPrivacyPolicyAndWalletAgreement]);

return (
<>
<HeaderWithBackButton title={props.translate('termsStep.headerTitle')} />

<ScrollView
style={styles.flex1}
contentContainerStyle={styles.ph5}
>
<ShortTermsForm />
<LongTermsForm />
<CheckboxWithLabel
style={[styles.mb4, styles.mt4]}
isChecked={hasAcceptedDisclosure}
onInputChange={toggleDisclosure}
LabelComponent={() => (
<Text>
{`${props.translate('termsStep.haveReadAndAgree')}`}
<TextLink href="https://use.expensify.com/esignagreement">{`${props.translate('termsStep.electronicDisclosures')}.`}</TextLink>
</Text>
)}
/>
<CheckboxWithLabel
isChecked={hasAcceptedPrivacyPolicyAndWalletAgreement}
onInputChange={togglePrivacyPolicy}
LabelComponent={() => (
<Text>
{`${props.translate('termsStep.agreeToThe')} `}

<TextLink href="https://use.expensify.com/privacy">{`${props.translate('common.privacy')} `}</TextLink>

{`${props.translate('common.and')} `}

<TextLink href="https://use.expensify.com/walletagreement">{`${props.translate('termsStep.walletAgreement')}.`}</TextLink>
</Text>
)}
/>
<FormAlertWithSubmitButton
buttonText={props.translate('termsStep.enablePayments')}
onSubmit={() => {
if (!hasAcceptedDisclosure || !hasAcceptedPrivacyPolicyAndWalletAgreement) {
setError(true);
return;
}

setError(false);
BankAccounts.acceptWalletTerms({
hasAcceptedTerms: hasAcceptedDisclosure && hasAcceptedPrivacyPolicyAndWalletAgreement,
chatReportID: props.walletTerms.chatReportID,
});
}}
message={errorMessage}
isAlertVisible={error || Boolean(errorMessage)}
containerStyles={[styles.mh0, styles.mv4]}
/>
</ScrollView>
</>
);
}

TermsStep.displayName = 'TermsPage';
TermsStep.propTypes = propTypes;
TermsStep.defaultProps = defaultProps;
export default compose(
Expand Down

0 comments on commit 78aa3ba

Please sign in to comment.