From ed168c1a2206d839926655ad4bc7d3334ebdc510 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 17 Apr 2024 22:50:28 +0200 Subject: [PATCH 1/5] feat: setup Terms and Fees step --- src/languages/en.ts | 4 + src/languages/es.ts | 4 + .../TermsAndFees/TermsAndFees.tsx | 58 ++++++++++ .../TermsAndFees/substeps/FeesStep.tsx | 24 ++++ .../TermsAndFees/substeps/TermsStep.tsx | 106 ++++++++++++++++++ 5 files changed, 196 insertions(+) create mode 100644 src/pages/EnablePayments/TermsAndFees/TermsAndFees.tsx create mode 100644 src/pages/EnablePayments/TermsAndFees/substeps/FeesStep.tsx create mode 100644 src/pages/EnablePayments/TermsAndFees/substeps/TermsStep.tsx diff --git a/src/languages/en.ts b/src/languages/en.ts index fda7acc309bd..2aab5f00c830 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1564,6 +1564,7 @@ export default { }, termsStep: { headerTitle: 'Terms and fees', + headerTitleRefactor: 'Fees and terms', haveReadAndAgree: 'I have read and agree to receive ', electronicDisclosures: 'electronic disclosures', agreeToThe: 'I agree to the', @@ -1574,6 +1575,9 @@ export default { noOverdraftOrCredit: 'No overdraft/credit feature.', electronicFundsWithdrawal: 'Electronic funds withdrawal', standard: 'Standard', + takeALookAtSomeFees: 'Take a look at some fees.', + checkPlease: 'Check please.', + agreeToTerms: 'Agree to the terms and you’ll be good to go!', shortTermsForm: { expensifyPaymentsAccount: ({walletProgram}: WalletProgramParams) => `The Expensify Wallet is issued by ${walletProgram}.`, perPurchase: 'Per purchase', diff --git a/src/languages/es.ts b/src/languages/es.ts index 46a8d051bdfe..acdf9978de0b 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1585,6 +1585,7 @@ export default { }, termsStep: { headerTitle: 'Condiciones y tarifas', + headerTitleRefactor: 'Tarifas y condiciones', haveReadAndAgree: 'He leído y acepto recibir ', electronicDisclosures: 'divulgaciones electrónicas', agreeToThe: 'Estoy de acuerdo con el ', @@ -1595,6 +1596,9 @@ export default { noOverdraftOrCredit: 'Sin función de sobregiro/crédito', electronicFundsWithdrawal: 'Retiro electrónico de fondos', standard: 'Estándar', + takeALookAtSomeFees: 'Echa un vistazo a algunas tarifas.', + checkPlease: 'Por favor, revisa.', + agreeToTerms: 'Debes aceptar los términos y condiciones para continuar.', shortTermsForm: { expensifyPaymentsAccount: ({walletProgram}: WalletProgramParams) => `La billetera Expensify es emitida por ${walletProgram}.`, perPurchase: 'Por compra', diff --git a/src/pages/EnablePayments/TermsAndFees/TermsAndFees.tsx b/src/pages/EnablePayments/TermsAndFees/TermsAndFees.tsx new file mode 100644 index 000000000000..7e26f652efe8 --- /dev/null +++ b/src/pages/EnablePayments/TermsAndFees/TermsAndFees.tsx @@ -0,0 +1,58 @@ +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 CONST from '@src/CONST'; +import FeesStep from './substeps/FeesStep'; +import TermsStep from './substeps/TermsStep'; + +const termsAndFeesSubsteps: Array> = [FeesStep, TermsStep]; + +function TermsAndFees() { + 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) { + return; + } + prevScreen(); + }; + + return ( + + + + + + + + ); +} + +TermsAndFees.displayName = 'TermsAndFees'; + +export default TermsAndFees; diff --git a/src/pages/EnablePayments/TermsAndFees/substeps/FeesStep.tsx b/src/pages/EnablePayments/TermsAndFees/substeps/FeesStep.tsx new file mode 100644 index 000000000000..78ff371b747c --- /dev/null +++ b/src/pages/EnablePayments/TermsAndFees/substeps/FeesStep.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import {useOnyx} from 'react-native-onyx'; +import ScrollView from '@components/ScrollView'; +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() { + const styles = useThemeStyles(); + const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET); + + return ( + + + + + ); +} + +export default FeesStep; diff --git a/src/pages/EnablePayments/TermsAndFees/substeps/TermsStep.tsx b/src/pages/EnablePayments/TermsAndFees/substeps/TermsStep.tsx new file mode 100644 index 000000000000..e77bf7db4817 --- /dev/null +++ b/src/pages/EnablePayments/TermsAndFees/substeps/TermsStep.tsx @@ -0,0 +1,106 @@ +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 ScrollView from '@components/ScrollView'; +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 * as BankAccounts from '@userActions/BankAccounts'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; + +function HaveReadAndAgreeLabel() { + const {translate} = useLocalize(); + + return ( + + {`${translate('termsStep.haveReadAndAgree')}`} + {`${translate('termsStep.electronicDisclosures')}.`} + + ); +} + +function AgreeToTheLabel() { + const {translate} = useLocalize(); + + return ( + + {`${translate('termsStep.agreeToThe')} `} + {`${translate('common.privacy')} `} + {`${translate('common.and')} `} + {`${translate('termsStep.walletAgreement')}.`} + + ); +} + +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 ( + + {translate('termsStep.checkPlease')} + {translate('termsStep.agreeToTerms')} + + + { + if (!hasAcceptedDisclosure || !hasAcceptedPrivacyPolicyAndWalletAgreement) { + setError(true); + return; + } + + setError(false); + BankAccounts.acceptWalletTerms({ + hasAcceptedTerms: hasAcceptedDisclosure && hasAcceptedPrivacyPolicyAndWalletAgreement, + reportID: walletTerms?.chatReportID ?? '', + }); + }} + message={errorMessage} + isAlertVisible={error || Boolean(errorMessage)} + isLoading={!!walletTerms?.isLoading} + containerStyles={[styles.mh0, styles.mv4]} + /> + + ); +} + +export default TermsStep; From 0999bf7371971d8c50f9f39a9e03dc25023a2bea Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 18 Apr 2024 18:48:35 +0200 Subject: [PATCH 2/5] feat: rename terms and feex, fix styling, create temporary test route --- src/ROUTES.ts | 2 + src/SCREENS.ts | 2 + .../ModalStackNavigators/index.tsx | 2 + src/libs/Navigation/linkingConfig/config.ts | 5 +++ .../FeesAndTerms.tsx} | 8 ++-- .../FeesAndTerms/substeps/FeesStep.tsx | 37 +++++++++++++++++++ .../substeps/TermsStep.tsx | 32 ++++++++-------- .../TermsAndFees/substeps/FeesStep.tsx | 24 ------------ .../TermsPage/ShortTermsForm.tsx | 16 ++++---- src/styles/index.ts | 5 ++- 10 files changed, 80 insertions(+), 53 deletions(-) rename src/pages/EnablePayments/{TermsAndFees/TermsAndFees.tsx => FeesAndTerms/FeesAndTerms.tsx} (93%) create mode 100644 src/pages/EnablePayments/FeesAndTerms/substeps/FeesStep.tsx rename src/pages/EnablePayments/{TermsAndFees => FeesAndTerms}/substeps/TermsStep.tsx (79%) delete mode 100644 src/pages/EnablePayments/TermsAndFees/substeps/FeesStep.tsx diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 46f2e2fef049..2ed8be54f408 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -119,6 +119,8 @@ const ROUTES = { SETTINGS_ADD_BANK_ACCOUNT: 'settings/wallet/add-bank-account', SETTINGS_ADD_BANK_ACCOUNT_REFACTOR: 'settings/wallet/add-bank-account-refactor', SETTINGS_ENABLE_PAYMENTS: 'settings/wallet/enable-payments', + // TODO: Added temporarily for testing purposes, remove after refactor - https://github.com/Expensify/App/issues/36648 + SETTINGS_ENABLE_PAYMENTS_TEMPORARY_TERMS: 'settings/wallet/enable-payments-temporary-terms', SETTINGS_WALLET_CARD_DIGITAL_DETAILS_UPDATE_ADDRESS: { route: 'settings/wallet/card/:domain/digital-details/update-address', getRoute: (domain: string) => `settings/wallet/card/${domain}/digital-details/update-address` as const, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index acbb4b507b65..cf5723c43d31 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -84,6 +84,8 @@ const SCREENS = { TRANSFER_BALANCE: 'Settings_Wallet_Transfer_Balance', CHOOSE_TRANSFER_ACCOUNT: 'Settings_Wallet_Choose_Transfer_Account', ENABLE_PAYMENTS: 'Settings_Wallet_EnablePayments', + // TODO: Added temporarily for testing purposes, remove after refactor - https://github.com/Expensify/App/issues/36648 + ENABLE_PAYMENTS_TEMPORARY_TERMS: 'Settings_Wallet_EnablePayments_Temporary_Terms', CARD_ACTIVATE: 'Settings_Wallet_Card_Activate', REPORT_VIRTUAL_CARD_FRAUD: 'Settings_Wallet_ReportVirtualCardFraud', CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS: 'Settings_Wallet_Cards_Digital_Details_Update_Address', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index a596acf0a3ac..711e911fe9f1 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -215,6 +215,8 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/settings/Wallet/TransferBalancePage').default as React.ComponentType, [SCREENS.SETTINGS.WALLET.CHOOSE_TRANSFER_ACCOUNT]: () => require('../../../../pages/settings/Wallet/ChooseTransferAccountPage').default as React.ComponentType, [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS]: () => require('../../../../pages/EnablePayments/EnablePaymentsPage').default as React.ComponentType, + // TODO: Added temporarily for testing purposes, remove after refactor - https://github.com/Expensify/App/issues/36648 + [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS_TEMPORARY_TERMS]: () => require('../../../../pages/EnablePayments/FeesAndTerms/FeesAndTerms').default as React.ComponentType, [SCREENS.SETTINGS.ADD_DEBIT_CARD]: () => require('../../../../pages/settings/Wallet/AddDebitCardPage').default as React.ComponentType, [SCREENS.SETTINGS.ADD_BANK_ACCOUNT]: () => require('../../../../pages/AddPersonalBankAccountPage').default as React.ComponentType, [SCREENS.SETTINGS.ADD_BANK_ACCOUNT_REFACTOR]: () => require('../../../../pages/EnablePayments/AddBankAccount/AddBankAccount').default as React.ComponentType, diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 05b7190fa181..c19ce019a621 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -156,6 +156,11 @@ const config: LinkingOptions['config'] = { path: ROUTES.SETTINGS_ENABLE_PAYMENTS, exact: true, }, + // TODO: Added temporarily for testing purposes, remove after refactor - https://github.com/Expensify/App/issues/36648 + [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS_TEMPORARY_TERMS]: { + path: ROUTES.SETTINGS_ENABLE_PAYMENTS_TEMPORARY_TERMS, + exact: true, + }, [SCREENS.SETTINGS.WALLET.TRANSFER_BALANCE]: { path: ROUTES.SETTINGS_WALLET_TRANSFER_BALANCE, exact: true, diff --git a/src/pages/EnablePayments/TermsAndFees/TermsAndFees.tsx b/src/pages/EnablePayments/FeesAndTerms/FeesAndTerms.tsx similarity index 93% rename from src/pages/EnablePayments/TermsAndFees/TermsAndFees.tsx rename to src/pages/EnablePayments/FeesAndTerms/FeesAndTerms.tsx index 7e26f652efe8..76955e860f13 100644 --- a/src/pages/EnablePayments/TermsAndFees/TermsAndFees.tsx +++ b/src/pages/EnablePayments/FeesAndTerms/FeesAndTerms.tsx @@ -13,7 +13,7 @@ import TermsStep from './substeps/TermsStep'; const termsAndFeesSubsteps: Array> = [FeesStep, TermsStep]; -function TermsAndFees() { +function FeesAndTerms() { const {translate} = useLocalize(); const styles = useThemeStyles(); @@ -29,7 +29,7 @@ function TermsAndFees() { return ( + {translate('termsStep.takeALookAtSomeFees')} + + + +