-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #40567 from koko57/refactor/36648-wallet-enablemen…
…t-flow-terms Refactor/36648 wallet enablement flow terms
- Loading branch information
Showing
11 changed files
with
245 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import React from 'react'; | ||
| import {View} from 'react-native'; | ||
| import HeaderWithBackButton from '@components/HeaderWithBackButton'; | ||
| import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; | ||
| import ScreenWrapper from '@components/ScreenWrapper'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useSubStep from '@hooks/useSubStep'; | ||
| import type {SubStepProps} from '@hooks/useSubStep/types'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import Navigation from '@navigation/Navigation'; | ||
| import CONST from '@src/CONST'; | ||
| import ROUTES from '@src/ROUTES'; | ||
| import FeesStep from './substeps/FeesStep'; | ||
| import TermsStep from './substeps/TermsStep'; | ||
|
|
||
| const termsAndFeesSubsteps: Array<React.ComponentType<SubStepProps>> = [FeesStep, TermsStep]; | ||
|
|
||
| function FeesAndTerms() { | ||
| const {translate} = useLocalize(); | ||
| const styles = useThemeStyles(); | ||
|
|
||
| const submit = () => {}; | ||
| const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo} = useSubStep({bodyContent: termsAndFeesSubsteps, startFrom: 0, onFinished: submit}); | ||
|
|
||
| const handleBackButtonPress = () => { | ||
| if (screenIndex === 0) { | ||
| // TODO: temporary for refactor https://github.com/Expensify/App/issues/36648 | ||
| Navigation.navigate(ROUTES.SETTINGS_WALLET); | ||
| return; | ||
| } | ||
| prevScreen(); | ||
| }; | ||
|
|
||
| return ( | ||
| <ScreenWrapper | ||
| testID={FeesAndTerms.displayName} | ||
| includeSafeAreaPaddingBottom={false} | ||
| shouldEnablePickerAvoiding={false} | ||
| shouldEnableMaxHeight | ||
| > | ||
| <HeaderWithBackButton | ||
| title={translate('termsStep.headerTitleRefactor')} | ||
| onBackButtonPress={handleBackButtonPress} | ||
| /> | ||
| <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}> | ||
| <InteractiveStepSubHeader | ||
| startStepIndex={3} | ||
| stepNames={CONST.WALLET.STEP_NAMES} | ||
| /> | ||
| </View> | ||
| <SubStep | ||
| isEditing={isEditing} | ||
| onNext={nextScreen} | ||
| onMove={moveTo} | ||
| /> | ||
| </ScreenWrapper> | ||
| ); | ||
| } | ||
|
|
||
| FeesAndTerms.displayName = 'TermsAndFees'; | ||
|
|
||
| export default FeesAndTerms; |
37 changes: 37 additions & 0 deletions
37
src/pages/EnablePayments/FeesAndTerms/substeps/FeesStep.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react'; | ||
| import {View} from 'react-native'; | ||
| import {useOnyx} from 'react-native-onyx'; | ||
| import Button from '@components/Button'; | ||
| import ScrollView from '@components/ScrollView'; | ||
| import Text from '@components/Text'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import type {SubStepProps} from '@hooks/useSubStep/types'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import LongTermsForm from '@pages/EnablePayments/TermsPage/LongTermsForm'; | ||
| import ShortTermsForm from '@pages/EnablePayments/TermsPage/ShortTermsForm'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
|
|
||
| function FeesStep({onNext}: SubStepProps) { | ||
| const styles = useThemeStyles(); | ||
| const {translate} = useLocalize(); | ||
| const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET); | ||
|
|
||
| return ( | ||
| <ScrollView style={styles.flex1}> | ||
| <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('termsStep.takeALookAtSomeFees')}</Text> | ||
| <View style={[styles.ph5]}> | ||
| <ShortTermsForm userWallet={userWallet} /> | ||
| <LongTermsForm /> | ||
| <Button | ||
| success | ||
| large | ||
| style={[styles.w100, styles.mv5]} | ||
| onPress={onNext} | ||
| text={translate('common.next')} | ||
| /> | ||
| </View> | ||
| </ScrollView> | ||
| ); | ||
| } | ||
|
|
||
| export default FeesStep; |
112 changes: 112 additions & 0 deletions
112
src/pages/EnablePayments/FeesAndTerms/substeps/TermsStep.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import React, {useEffect, useState} from 'react'; | ||
| import {View} from 'react-native'; | ||
| import {useOnyx} from 'react-native-onyx'; | ||
| import CheckboxWithLabel from '@components/CheckboxWithLabel'; | ||
| import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; | ||
| import Text from '@components/Text'; | ||
| import TextLink from '@components/TextLink'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import * as ErrorUtils from '@libs/ErrorUtils'; | ||
| import Navigation from '@navigation/Navigation'; | ||
| // TODO: uncomment at the end of the refactor https://github.com/Expensify/App/issues/36648 | ||
| // import * as BankAccounts from '@userActions/BankAccounts'; | ||
| import CONST from '@src/CONST'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import ROUTES from '@src/ROUTES'; | ||
|
|
||
| function HaveReadAndAgreeLabel() { | ||
| const {translate} = useLocalize(); | ||
|
|
||
| return ( | ||
| <Text> | ||
| {`${translate('termsStep.haveReadAndAgree')}`} | ||
| <TextLink href={CONST.ELECTRONIC_DISCLOSURES_URL}>{`${translate('termsStep.electronicDisclosures')}.`}</TextLink> | ||
| </Text> | ||
| ); | ||
| } | ||
|
|
||
| function AgreeToTheLabel() { | ||
| const {translate} = useLocalize(); | ||
|
|
||
| return ( | ||
| <Text> | ||
| {`${translate('termsStep.agreeToThe')} `} | ||
| <TextLink href={CONST.PRIVACY_URL}>{`${translate('common.privacy')} `}</TextLink> | ||
| {`${translate('common.and')} `} | ||
| <TextLink href={CONST.WALLET_AGREEMENT_URL}>{`${translate('termsStep.walletAgreement')}.`}</TextLink> | ||
| </Text> | ||
| ); | ||
| } | ||
|
|
||
| function TermsStep() { | ||
| const styles = useThemeStyles(); | ||
| const [hasAcceptedDisclosure, setHasAcceptedDisclosure] = useState(false); | ||
| const [hasAcceptedPrivacyPolicyAndWalletAgreement, setHasAcceptedPrivacyPolicyAndWalletAgreement] = useState(false); | ||
| const [error, setError] = useState(false); | ||
| const {translate} = useLocalize(); | ||
|
|
||
| const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS); | ||
|
|
||
| const errorMessage = error ? 'common.error.acceptTerms' : ErrorUtils.getLatestErrorMessage(walletTerms ?? {}) ?? ''; | ||
|
|
||
| const toggleDisclosure = () => { | ||
| setHasAcceptedDisclosure(!hasAcceptedDisclosure); | ||
| }; | ||
|
|
||
| const togglePrivacyPolicy = () => { | ||
| setHasAcceptedPrivacyPolicyAndWalletAgreement(!hasAcceptedPrivacyPolicyAndWalletAgreement); | ||
| }; | ||
|
|
||
| /** clear error */ | ||
| useEffect(() => { | ||
| if (!hasAcceptedDisclosure || !hasAcceptedPrivacyPolicyAndWalletAgreement) { | ||
| return; | ||
| } | ||
|
|
||
| setError(false); | ||
| }, [hasAcceptedDisclosure, hasAcceptedPrivacyPolicyAndWalletAgreement]); | ||
|
|
||
| return ( | ||
| <View style={[styles.flexGrow1, styles.ph5]}> | ||
| <Text style={[styles.textHeadlineLineHeightXXL]}>{translate('termsStep.checkPlease')}</Text> | ||
| <Text style={[styles.mt3, styles.mb3, styles.textSupporting]}>{translate('termsStep.agreeToTerms')}</Text> | ||
| <View style={styles.flex1}> | ||
| <CheckboxWithLabel | ||
| accessibilityLabel={translate('termsStep.haveReadAndAgree')} | ||
| style={[styles.mb4, styles.mt4]} | ||
| onInputChange={toggleDisclosure} | ||
| LabelComponent={HaveReadAndAgreeLabel} | ||
| /> | ||
| <CheckboxWithLabel | ||
| accessibilityLabel={translate('termsStep.agreeToThe')} | ||
| onInputChange={togglePrivacyPolicy} | ||
| LabelComponent={AgreeToTheLabel} | ||
| /> | ||
| </View> | ||
| <FormAlertWithSubmitButton | ||
| buttonText={translate('termsStep.enablePayments')} | ||
| onSubmit={() => { | ||
| if (!hasAcceptedDisclosure || !hasAcceptedPrivacyPolicyAndWalletAgreement) { | ||
| setError(true); | ||
| return; | ||
| } | ||
|
|
||
| setError(false); | ||
| // TODO: uncomment at the end of the refactor https://github.com/Expensify/App/issues/36648 | ||
| // BankAccounts.acceptWalletTerms({ | ||
| // hasAcceptedTerms: hasAcceptedDisclosure && hasAcceptedPrivacyPolicyAndWalletAgreement, | ||
| // reportID: walletTerms?.chatReportID ?? '', | ||
| // }); | ||
| Navigation.navigate(ROUTES.SETTINGS_WALLET); | ||
| }} | ||
| message={errorMessage} | ||
| isAlertVisible={error || Boolean(errorMessage)} | ||
| isLoading={!!walletTerms?.isLoading} | ||
| containerStyles={[styles.mh0, styles.mv5]} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| export default TermsStep; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters