diff --git a/assets/images/arrow-up.svg b/assets/images/arrow-up.svg new file mode 100644 index 00000000000..f8c4b75ac35 --- /dev/null +++ b/assets/images/arrow-up.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/assets/images/printer.svg b/assets/images/printer.svg new file mode 100644 index 00000000000..cd62ce79744 --- /dev/null +++ b/assets/images/printer.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 766985a3646..26a81647d8a 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -872,7 +872,7 @@ SPEC CHECKSUMS: DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de EXHaptics: 337c160c148baa6f0e7166249f368965906e346b FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53 - FBReactNativeSpec: 884d4cc2b011759361797a4035c47e10099393b5 + FBReactNativeSpec: 825b0f0851f5cc5c6268a920286281f62fc96c37 Firebase: 54cdc8bc9c9b3de54f43dab86e62f5a76b47034f FirebaseABTesting: 4cb61aeeb50f60680af1c01fff781dfaf9293916 FirebaseAnalytics: 4751d6a49598a2b58da678cc07df696bcd809ab9 @@ -899,9 +899,9 @@ SPEC CHECKSUMS: Onfido: 116a268e4cb8b767c15285e8071c2e8304673cdf onfido-react-native-sdk: b8f1b7cbe1adab6479d735275772390161630dcd OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b - Permission-LocationAccuracy: e8adff9ede1b23b43b7054a4500113d515fc87a8 - Permission-LocationAlways: 7f7f373d086af7a81b2f4f20d65d29266ca2043b - Permission-LocationWhenInUse: 3ae82a9feb5da4e94e386dba17c7dd3531af9feb + Permission-LocationAccuracy: 76669f87b4c276f5ae803cc0ddd1862a4c0e9dd8 + Permission-LocationAlways: a274bc04bb386068782468dbdaca3859f51634ca + Permission-LocationWhenInUse: 3a2b0dbc167d79e8e920a4377ff9520cdc108407 Plaid: f55c6acdc249245c6778a4045757eb4e839cca61 PromisesObjC: 68159ce6952d93e17b2dfe273b8c40907db5ba58 Protobuf: 7327d4444215b5f18e560a97f879ff5503c4581c @@ -917,15 +917,15 @@ SPEC CHECKSUMS: React-jsiexecutor: 124e8f99992490d0d13e0649d950d3e1aae06fe9 React-jsinspector: 500a59626037be5b3b3d89c5151bc3baa9abf1a9 react-native-config: d8b45133fd13d4f23bd2064b72f6e2c08b2763ed - react-native-document-picker: 0e3602a4064da040321bafad6848d8b0edcb1d55 + react-native-document-picker: f2f73db94328c84e22144e369fb4a3ede47bc1f5 react-native-flipper: 1943b82f2e494c77b741eb1ed257b6734a334b83 - react-native-image-picker: 4089335b89b625d4e34d53fb249c48a7a791b3ea - react-native-netinfo: 52cf0ee8342548a485e28f4b09e56b477567244d + react-native-image-picker: 474cf2c33c2b6671da53d293a16c97995f0aec15 + react-native-netinfo: 30fb89fa913c342be82a887b56e96be6d71201dd react-native-pdf: 4b5a9e4465a6a3b399e91dc4838eb44ddf716d1f - react-native-plaid-link-sdk: 1a6593e2d3d790e8113c29178d883eb883f8c032 - react-native-progress-bar-android: ce95a69f11ac580799021633071368d08aaf9ad8 - react-native-progress-view: 5816e8a6be812c2b122c6225a2a3db82d9008640 - react-native-safe-area-context: 01158a92c300895d79dee447e980672dc3fb85a6 + react-native-plaid-link-sdk: 59b7376efca9f00e9693321c5cf7c6ab2c567635 + react-native-progress-bar-android: be43138ab7da30d51fc038bafa98e9ed594d0c40 + react-native-progress-view: 21b1e29e70c7559c16c9e0a04c4adc19fce6ede2 + react-native-safe-area-context: 79fea126c6830c85f65947c223a5e3058a666937 React-perflogger: aad6d4b4a267936b3667260d1f649b6f6069a675 React-RCTActionSheet: fc376be462c9c8d6ad82c0905442fd77f82a9d2a React-RCTAnimation: ba0a1c3a2738be224a08092fa7f1b444ab77d309 @@ -939,17 +939,17 @@ SPEC CHECKSUMS: React-runtimeexecutor: ff951a0c241bfaefc4940a3f1f1a229e7cb32fa6 ReactCommon: bedc99ed4dae329c4fcf128d0c31b9115e5365ca rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba - RNBootSplash: 3123ba68fe44d8be09a014e89cc8f0f55b68a521 + RNBootSplash: 24175aa28fe203b10c48dc34e78d946fd33c77af RNCAsyncStorage: 8324611026e8dc3706f829953aa6e3899f581589 - RNCClipboard: 5e299c6df8e0c98f3d7416b86ae563d3a9f768a3 - RNCMaskedView: 138134c4d8a9421b4f2bf39055a79aa05c2d47b1 + RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495 + RNCMaskedView: fc29d354a40316a990e8fb46391f08aea829c3aa RNCPicker: 6780c753e9e674065db90d9c965920516402579d RNFBAnalytics: 8ba84c2d31c64374d054c8621b998f25145ffddc RNFBApp: 64c90ab78b6010ed5c3ade026dfe5ff6442c21fd RNFBCrashlytics: 1de18b8cc36d9bcf86407c4a354399228cc84a61 RNFBPerf: e3a7269f573a4787810a32de51647cdcbe08dfb4 RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b - RNPermissions: eb94f9fdc0a8ecd02fcce0676d56ffb1395d41e1 + RNPermissions: 4c8a37b4dde50f1f152bf8cd08c4a43d2355829e RNReanimated: 833ebd229b31e18a8933ebd0cd744a0f47d88c42 RNScreens: e8e8dd0588b5da0ab57dcca76ab9b2d8987757e0 RNSVG: ce9d996113475209013317e48b05c21ee988d42e @@ -966,7 +966,7 @@ SPEC CHECKSUMS: UMReactNativeAdapter: 7b458ca3d4497b5114e6bb766b223432bad22d8a UMSensorsInterface: 50439b47826e716a514cbd7384aebe9ab4fde5f4 UMTaskManagerInterface: 482155764886069beb1bc7fcf6036f12e4ad0751 - urbanairship-react-native: d415a12e67ba93bf3ce914df9a310b66a88a5cc3 + urbanairship-react-native: a05a913d6f9559141d477ff4d380bcd616b5c59d Yoga: a7de31c64fe738607e7a3803e3f591a4b1df7393 YogaKit: f782866e155069a2cca2517aafea43200b01fd5a diff --git a/package-lock.json b/package-lock.json index 70e58fc525f..0350c9a77a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34739,6 +34739,11 @@ "object-assign": "^4.1.1" } }, + "react-collapse": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-5.1.0.tgz", + "integrity": "sha512-5v0ywsn9HjiR/odNzbRDs0RZfrnbdSippJebWOBCFFDA12Vx8DddrbI4qWVf1P2wTiVagrpcSy07AU0b6+gM9Q==" + }, "react-colorful": { "version": "5.1.4", "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.1.4.tgz", @@ -35998,6 +36003,11 @@ "nullthrows": "^1.1.1" } }, + "react-native-collapsible": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/react-native-collapsible/-/react-native-collapsible-1.6.0.tgz", + "integrity": "sha512-beZjdgbT9Y/Pg591Xy5XkKG20HffJiVad4n9bfcUF/f783A+tvOVXnqvbS58Lkaym93mi4jcDPMuW9Vc1t6rqg==" + }, "react-native-config": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/react-native-config/-/react-native-config-1.4.1.tgz", diff --git a/package.json b/package.json index dace87611ca..b45eabb9608 100644 --- a/package.json +++ b/package.json @@ -72,9 +72,11 @@ "prop-types": "^15.7.2", "pusher-js": "^7.0.0", "react": "^17.0.2", + "react-collapse": "^5.1.0", "react-dom": "^17.0.2", "react-native": "0.64.1", "react-native-bootsplash": "^3.2.0", + "react-native-collapsible": "^1.6.0", "react-native-config": "^1.4.0", "react-native-document-picker": "^5.1.0", "react-native-gesture-handler": "1.9.0", diff --git a/src/CONST.js b/src/CONST.js index 31f7f704edd..1856c35f03a 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -129,6 +129,9 @@ const CONST = { PLAY_STORE_URL: 'https://play.google.com/store/apps/details?id=com.expensify.chat&hl=en', ADD_SECONDARY_LOGIN_URL: '/settings?param={%22section%22:%22account%22}', MANAGE_CARDS_URL: '/domain_companycards', + FEES_URL: 'https://use.expensify.com/fees', + CFPB_PREPAID_URL: 'https://cfpb.gov/prepaid', + NEWDOT: 'new.expensify.com', OPTION_TYPE: { REPORT: 'report', PERSONAL_DETAIL: 'personalDetail', @@ -353,6 +356,13 @@ const CONST = { }, }, + TERMS: { + CFPB_PREPAID: 'cfpb.gov/prepaid', + CFPB_COMPLAINT: 'cfpb.gov/complaint', + FDIC_PREPAID: 'fdic.gov/deposit/deposits/prepaid.html', + USE_EXPENSIFY_FEES: 'use.expensify.com/fees', + }, + REGEX: { US_PHONE: /^\+1\d{10}$/, PHONE_E164_PLUS: /^\+?[1-9]\d{1,14}$/, diff --git a/src/components/CollapsibleSection/Collapsible/index.js b/src/components/CollapsibleSection/Collapsible/index.js new file mode 100644 index 00000000000..51d650ed574 --- /dev/null +++ b/src/components/CollapsibleSection/Collapsible/index.js @@ -0,0 +1,3 @@ +import Collapsible from 'react-collapse'; + +export default Collapsible; diff --git a/src/components/CollapsibleSection/Collapsible/index.native.js b/src/components/CollapsibleSection/Collapsible/index.native.js new file mode 100644 index 00000000000..4963aee7179 --- /dev/null +++ b/src/components/CollapsibleSection/Collapsible/index.native.js @@ -0,0 +1,26 @@ +import CollapsibleRN from 'react-native-collapsible'; +import PropTypes from 'prop-types'; +import React from 'react'; + +const propTypes = { + /** Whether the section should start expanded. False by default */ + isOpened: PropTypes.bool, + + /** Children to display inside the Collapsible component */ + children: PropTypes.node.isRequired, +}; + +const defaultProps = { + isOpened: false, +}; + +const Collapsible = props => ( + + {props.children} + +); + +Collapsible.displayName = 'Collapsible'; +Collapsible.propTypes = propTypes; +Collapsible.defaultProps = defaultProps; +export default Collapsible; diff --git a/src/components/CollapsibleSection/CollapsibleSectionPropTypes.js b/src/components/CollapsibleSection/CollapsibleSectionPropTypes.js new file mode 100644 index 00000000000..e928619d432 --- /dev/null +++ b/src/components/CollapsibleSection/CollapsibleSectionPropTypes.js @@ -0,0 +1,18 @@ +import PropTypes from 'prop-types'; + +const propTypes = { + /** Title of the Collapsible section */ + title: PropTypes.string.isRequired, + + /** Whether the section should start expanded. False by default */ + isExpanded: PropTypes.bool, + + /** Children to display inside the Collapsible component */ + children: PropTypes.node.isRequired, +}; + +const defaultProps = { + isExpanded: false, +}; + +export {propTypes, defaultProps}; diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js new file mode 100644 index 00000000000..1b734933c08 --- /dev/null +++ b/src/components/CollapsibleSection/index.js @@ -0,0 +1,53 @@ +import React from 'react'; +import {View, TouchableOpacity} from 'react-native'; +import Collapsible from './Collapsible'; +import Text from '../Text'; +import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; +import styles from '../../styles/styles'; +import Icon from '../Icon'; +import {DownArrow, UpArrow} from '../Icon/Expensicons'; + +class CollapsibleSection extends React.Component { + constructor(props) { + super(props); + this.toggleSection = this.toggleSection.bind(this); + this.state = { + isExpanded: this.props.isExpanded, + }; + } + + /** + * Expands/collapses the section + */ + toggleSection() { + this.setState(prevState => ({ + isExpanded: !prevState.isExpanded, + })); + } + + render() { + const src = this.state.isExpanded ? UpArrow : DownArrow; + + return ( + + + + {this.props.title} + + + + + + + + {this.props.children} + + + + ); + } +} + +CollapsibleSection.defaultProps = defaultProps; +CollapsibleSection.propTypes = propTypes; +export default CollapsibleSection; diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index 42c8dc079b0..8555edc7395 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -40,14 +40,16 @@ import Phone from '../../../assets/images/phone.svg'; import Pin from '../../../assets/images/pin.svg'; import PinCircle from '../../../assets/images/pin-circle.svg'; import Plus from '../../../assets/images/plus.svg'; +import Printer from '../../../assets/images/printer.svg'; import Profile from '../../../assets/images/profile.svg'; import Receipt from '../../../assets/images/receipt.svg'; import Send from '../../../assets/images/send.svg'; import SignOut from '../../../assets/images/sign-out.svg'; import Sync from '../../../assets/images/sync.svg'; import Trashcan from '../../../assets/images/trashcan.svg'; -import Users from '../../../assets/images/users.svg'; +import UpArrow from '../../../assets/images/arrow-up.svg'; import Upload from '../../../assets/images/upload.svg'; +import Users from '../../../assets/images/users.svg'; import Venmo from '../../../assets/images/venmo.svg'; import Wallet from '../../../assets/images/wallet.svg'; import Workspace from '../../../assets/images/workspace-default-avatar.svg'; @@ -95,12 +97,14 @@ export { Pin, PinCircle, Plus, + Printer, Profile, Receipt, Send, SignOut, Sync, Trashcan, + UpArrow, Upload, Users, Venmo, diff --git a/src/languages/en.js b/src/languages/en.js index 595e8e249a1..1f679c44194 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -57,6 +57,7 @@ export default { dateFormat: 'YYYY-MM-DD', send: 'Send', notifications: 'Notifications', + na: 'N/A', noResultsFound: 'No results found', timePrefix: 'It\'s', conjunctionFor: 'for', @@ -418,10 +419,70 @@ export default { headerTitle: 'Terms and Fees', haveReadAndAgree: 'I have read and agree to receive ', electronicDisclosures: 'electronic disclosures', - agreeToThe: 'I agree to the ', + agreeToThe: 'I agree to the', walletAgreement: 'Wallet Agreement', enablePayments: 'Enable Payments', termsMustBeAccepted: 'Terms must be accepted', + feeAmountZero: '$0', + monthlyFee: 'Monthly Fee', + inactivity: 'Inactivity', + electronicFundsInstantFee: '1.5%', + electronicFundsInstantFeeMin: 'Min $0.25', + noOverdraftOrCredit: 'No overdraft/credit feature.', + electronicFundsWithdrawal: 'Electronic Funds Withdrawal', + instant: 'Instant', + standard: 'Standard', + shortTermsForm: { + expensifyPaymentsAccount: 'The Expensify Payments Account is issues by The Bancorp Bank.', + perPurchase: 'Per Purchase', + atmWithdrawal: 'ATM Withdrawal', + cashReload: 'Cash Reload', + inNetwork: 'In-network', + outOfNetwork: 'out-of-network', + atmBalanceInquiry: 'ATM balance inquiry', + inOrOutOfNetwork: 'In-network or out-of-network', + customerService: 'Customer Service', + automatedOrLive: 'Automated or live agent', + afterTwelveMonths: 'After 12 months with no transactions', + weChargeOneFee: 'We charge 1 type of fee.', + fdicInsurance: 'Your funds are eligible for FDIC insurance.', + generalInfo: 'For general information about prepaid accounts, visit', + conditionsDetails: 'Find details and conditions for all fees and services by visiting', + conditionsPhone: 'or calling +1 833-400-0904.', + }, + longTermsForm: { + listOfAllFees: 'All Expensify Payments account fees:', + typeOfFeeHeader: 'Type of Fee', + feeAmountHeader: 'Fee Amount', + moreDetailsHeader: 'More Details', + openingAccountTitle: 'Opening An Account', + openingAccountDetails: 'There is no fee to create an account.', + monthlyFeeDetails: 'There is no monthly fee', + customerServiceTitle: 'Customer service', + customerServiceDetails: 'There are no customer service fees.', + inactivityDetails: 'There is no inactivity fee.', + sendingFundsTitle: 'Sending funds to another account holder', + sendingFundsDetails: 'There is no fee to send funds to another account holder using your balance, ' + + 'bank account, or debit card.', + electronicFundsStandardDetails: 'There is no fee to transfer funds from your Expensify Payments Account ' + + 'to your bank account using the standard option. This transfer usually completes within 1-3 business' + + ' days.', + electronicFundsInstantDetails: 'There is a fee to transfer funds from your Expensify Payments Account to ' + + 'your linked debit card using the instant transfer option. This transfer usually completes within' + + 'several minutes. The fee is 1.5% of the transfer amount (with a minimum fee of $0.25).', + fdicInsuranceBancorp: 'Your funds are eligible for FDIC insurance. Your funds will be held at or ' + + 'transferred to The Bancorp Bank, an FDIC-insured institution. Once there, your funds are insured up ' + + 'to $250,000 by the FDIC in the event The Bancorp Bank fails. See', + fdicInsuranceBancorp2: 'for details.', + contactExpensifyPayments: 'Contact Expensify Payments by calling +1 833-400-0904, by email at', + contactExpensifyPayments2: 'or sign in at', + generalInformation: 'For general information about prepaid accounts, visit', + generalInformation2: 'If you have a complaint about a prepaid account, call the Consumer Financial ' + + 'Protection Bureau at 1-855-411-2372 or visit', + printerFriendlyView: 'View printer-friendly version', + automated: 'Automated', + liveAgent: 'Live Agent', + }, }, activateStep: { headerTitle: 'Enable Payments', diff --git a/src/languages/es.js b/src/languages/es.js index 2965419569f..c8b48790124 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -57,6 +57,7 @@ export default { dateFormat: 'AAAA-MM-DD', send: 'Enviar', notifications: 'Notificaciones', + na: 'N/A', noResultsFound: 'No se han encontrado resultados', timePrefix: 'Son las', conjunctionFor: 'para', @@ -422,6 +423,68 @@ export default { walletAgreement: 'Acuerdo de billetera', enablePayments: 'Habilitar pagos', termsMustBeAccepted: 'Se deben aceptar los términos', + feeAmountZero: '$0', + monthlyFee: 'Cuota mensual', + inactivity: 'Inactividad', + electronicFundsInstantFee: '1.5%', + electronicFundsInstantFeeMin: 'Mínimo $0.25', + noOverdraftOrCredit: 'Sin función de sobregiro / crédito', + electronicFundsWithdrawal: 'Retiro electrónico de fondos', + instant: 'Instantáneo', + standard: 'Estándar', + shortTermsForm: { + expensifyPaymentsAccount: 'La cuenta Expensify Payments es emitida por The Bancorp Bank.', + perPurchase: 'Por compra', + atmWithdrawal: 'Retiro de cajero automático', + cashReload: 'Recarga de efectivo', + inNetwork: 'En la red', + outOfNetwork: 'fuera de la red', + atmBalanceInquiry: 'Consulta de saldo de cajero automático', + inOrOutOfNetwork: 'Dentro o fuera de la red', + customerService: 'Servicio al cliente', + automatedOrLive: 'Agente automatizado o en vivo', + afterTwelveMonths: 'Después de 12 meses sin transacciones', + weChargeOneFee: 'Cobramos 1 tipo de tarifa.', + fdicInsurance: 'Sus fondos son elegibles para el seguro de la FDIC.', + generalInfo: 'Para obtener información general sobre cuentas prepagas, visite', + conditionsDetails: 'Encuentra detalles y condiciones para todas las tarifas y servicios visitando', + conditionsPhone: 'o llamando al +1 833-400-0904.', + }, + longTermsForm: { + listOfAllFees: 'Todas las tarifas de la cuenta Expensify Payments:', + typeOfFeeHeader: 'Tipo de tarifa', + feeAmountHeader: 'Importe de la tarifa', + moreDetailsHeader: 'Más detalles', + openingAccountTitle: 'Abrir una cuenta', + openingAccountDetails: 'No hay tarifa para crear una cuenta.', + monthlyFeeDetails: 'No hay tarifa mensual', + customerServiceTitle: 'Servicio al cliente', + customerServiceDetails: 'No hay tarifas de servicio al cliente.', + inactivityDetails: 'No hay tarifa de inactividad.', + sendingFundsTitle: 'Enviar fondos a otro titular de cuenta', + sendingFundsDetails: 'No se aplica ningún cargo por enviar fondos a otro titular de cuenta utilizando su ' + + 'saldo cuenta bancaria o tarjeta de débito', + electronicFundsStandardDetails: 'No hay cargo por transferir fondos desde su cuenta Expensify Payments' + + 'a su cuenta bancaria utilizando la opción estándar. Esta transferencia generalmente se completa en' + + '1-3 negocios días.', + electronicFundsInstantDetails: 'Hay una tarifa para transferir fondos desde su cuenta Expensify Payments a ' + + 'su tarjeta de débito vinculada utilizando la opción de transferencia instantánea. Esta transferencia' + + ' generalmente se completa dentro de varios minutos. La tarifa es el 1.5% del monto de la ' + + 'transferencia (con una tarifa mínima de $ 0.25). ', + fdicInsuranceBancorp: 'Sus fondos son elegibles para el seguro de la FDIC. Sus fondos se mantendrán en o ' + + 'transferido a The Bancorp Bank, una institución asegurada por la FDIC. Una vez allí, sus fondos ' + + 'están asegurados a $ 250,000 por la FDIC en caso de que The Bancorp Bank quiebre. Ver', + fdicInsuranceBancorp2: 'para detalles.', + contactExpensifyPayments: 'Comuníquese con Expensify Payments llamando al + 1833-400-0904, por correo' + + 'electrónico a', + contactExpensifyPayments2: 'o inicie sesión en', + generalInformation: 'Para obtener información general sobre cuentas prepagas, visite', + generalInformation2: 'Si tiene una queja sobre una cuenta prepaga, llame al Consumer Financial Oficina de ' + + 'Protección al 1-855-411-2372 o visite', + printerFriendlyView: 'Ver versión para imprimir', + automated: 'Automatizado', + liveAgent: 'Agente en vivo', + }, }, activateStep: { headerTitle: 'Habilitar pagos', diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js new file mode 100644 index 00000000000..af7e7b1363b --- /dev/null +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -0,0 +1,144 @@ +import React from 'react'; +import {View, Linking} from 'react-native'; +import styles from '../../../styles/styles'; +import Text from '../../../components/Text'; +import CollapsibleSection from '../../../components/CollapsibleSection'; +import {translateLocal} from '../../../libs/translate'; +import CONST from '../../../CONST'; +import Icon from '../../../components/Icon'; +import {Printer} from '../../../components/Icon/Expensicons'; + +const termsData = [ + { + title: translateLocal('termsStep.longTermsForm.openingAccountTitle'), + rightText: translateLocal('termsStep.feeAmountZero'), + details: translateLocal('termsStep.longTermsForm.openingAccountDetails'), + }, + { + title: translateLocal('termsStep.monthlyFee'), + rightText: translateLocal('termsStep.feeAmountZero'), + details: translateLocal('termsStep.longTermsForm.monthlyFeeDetails'), + }, + { + title: translateLocal('termsStep.longTermsForm.customerServiceTitle'), + subTitle: translateLocal('termsStep.longTermsForm.automated'), + rightText: translateLocal('termsStep.feeAmountZero'), + details: translateLocal('termsStep.longTermsForm.customerServiceDetails'), + }, + { + title: translateLocal('termsStep.longTermsForm.customerServiceTitle'), + subTitle: translateLocal('termsStep.longTermsForm.liveAgent'), + rightText: translateLocal('termsStep.feeAmountZero'), + details: translateLocal('termsStep.longTermsForm.customerServiceDetails'), + }, + { + title: translateLocal('termsStep.inactivity'), + rightText: translateLocal('termsStep.feeAmountZero'), + details: translateLocal('termsStep.longTermsForm.inactivityDetails'), + }, + { + title: translateLocal('termsStep.longTermsForm.sendingFundsTitle'), + rightText: translateLocal('termsStep.feeAmountZero'), + details: translateLocal('termsStep.longTermsForm.sendingFundsDetails'), + }, + { + title: translateLocal('termsStep.electronicFundsWithdrawal'), + subTitle: translateLocal('termsStep.standard'), + rightText: translateLocal('termsStep.feeAmountZero'), + details: translateLocal('termsStep.longTermsForm.electronicFundsStandardDetails'), + }, + { + title: translateLocal('termsStep.electronicFundsWithdrawal'), + subTitle: translateLocal('termsStep.instant'), + rightText: translateLocal('termsStep.electronicFundsInstantFee'), + subRightText: translateLocal('termsStep.electronicFundsInstantFeeMin'), + details: translateLocal('termsStep.longTermsForm.electronicFundsStandardDetails'), + }, +]; + +const getLongTermsSections = () => termsData.map((section, index) => ( + // eslint-disable-next-line react/no-array-index-key + + + + {section.title} + { + section.subTitle + && ( + + {section.subTitle} + + ) + } + + + + {section.rightText} + + { + section.subRightText + && ( + + {section.subRightText} + + ) + } + + + + {section.details} + + +)); + +const LongTermsForm = () => ( + <> + + {getLongTermsSections()} + + + + {translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp')} + {' '} + {CONST.TERMS.FDIC_PREPAID} + {' '} + {translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp2')} + + + {translateLocal('termsStep.noOverdraftOrCredit')} + + + {translateLocal('termsStep.longTermsForm.contactExpensifyPayments')} + {' '} + {CONST.EMAIL.CONCIERGE} + {' '} + {translateLocal('termsStep.longTermsForm.contactExpensifyPayments2')} + {' '} + {CONST.NEWDOT} + . + + + {translateLocal('termsStep.longTermsForm.generalInformation')} + {' '} + {CONST.TERMS.CFPB_PREPAID} + {'. '} + {translateLocal('termsStep.longTermsForm.generalInformation2')} + {' '} + {CONST.TERMS.CFPB_COMPLAINT} + . + + + + + Linking.openURL(CONST.FEES_URL)} + > + {translateLocal('termsStep.longTermsForm.printerFriendlyView')} + + + +); + +LongTermsForm.displayName = 'LongTermsForm'; +export default LongTermsForm; diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js new file mode 100644 index 00000000000..b1cce789a13 --- /dev/null +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -0,0 +1,130 @@ +import React from 'react'; +import {View, Linking} from 'react-native'; +import styles from '../../../styles/styles'; +import Text from '../../../components/Text'; +import {translateLocal} from '../../../libs/translate'; +import CONST from '../../../CONST'; + +const termsData = [ + { + title: translateLocal('termsStep.monthlyFee'), + rightText: translateLocal('termsStep.feeAmountZero'), + }, + { + title: translateLocal('termsStep.shortTermsForm.perPurchase'), + rightText: translateLocal('termsStep.feeAmountZero'), + }, + { + title: translateLocal('termsStep.shortTermsForm.atmWithdrawal'), + subTitle: translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork'), + rightText: translateLocal('common.na'), + }, + { + title: translateLocal('termsStep.shortTermsForm.cashReload'), + rightText: translateLocal('common.na'), + }, + { + title: translateLocal('termsStep.shortTermsForm.atmBalanceInquiry'), + subTitle: translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork'), + rightText: translateLocal('common.na'), + }, + { + title: translateLocal('termsStep.shortTermsForm.customerService'), + subTitle: translateLocal('termsStep.shortTermsForm.automatedOrLive'), + rightText: translateLocal('termsStep.feeAmountZero'), + }, + { + title: translateLocal('termsStep.inactivity'), + subTitle: translateLocal('termsStep.shortTermsForm.afterTwelveMonths'), + rightText: translateLocal('termsStep.feeAmountZero'), + }, +]; + +const getShortTermsSections = () => termsData.map(section => ( + + + {section.title} + { + section.subTitle + && ( + + {section.subTitle} + + ) + } + + + + {section.rightText} + + + +)); + +const ShortTermsForm = () => ( + <> + + {translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')} + + + {getShortTermsSections()} + + + + {translateLocal('termsStep.shortTermsForm.weChargeOneFee')} + + + + + {translateLocal('termsStep.electronicFundsWithdrawal')} + + {translateLocal('termsStep.instant')} + + + + + {translateLocal('termsStep.electronicFundsInstantFee')} + + + {translateLocal('termsStep.electronicFundsInstantFeeMin')} + + + + + + {translateLocal('termsStep.noOverdraftOrCredit')} + + + {translateLocal('termsStep.shortTermsForm.fdicInsurance')} + + + {translateLocal('termsStep.shortTermsForm.generalInfo')} + {' '} + Linking.openURL(CONST.CFPB_PREPAID_URL)} + > + {CONST.TERMS.CFPB_PREPAID} + + . + + + {translateLocal('termsStep.shortTermsForm.conditionsDetails')} + {' '} + Linking.openURL(CONST.FEES_URL)} + > + {CONST.TERMS.USE_EXPENSIFY_FEES} + + {' '} + {translateLocal('termsStep.shortTermsForm.conditionsPhone')} + + + + +); + +ShortTermsForm.displayName = 'ShortTermsForm'; + +export default ShortTermsForm; diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js index 38bbadb31ac..5743151206b 100644 --- a/src/pages/EnablePayments/TermsStep.js +++ b/src/pages/EnablePayments/TermsStep.js @@ -4,7 +4,6 @@ import { } from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; -import ScreenWrapper from '../../components/ScreenWrapper'; import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import Navigation from '../../libs/Navigation/Navigation'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; @@ -17,6 +16,8 @@ import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; import CheckboxWithLabel from '../../components/CheckboxWithLabel'; import Text from '../../components/Text'; +import ShortTermsForm from './TermsPage/ShortTermsForm'; +import LongTermsForm from './TermsPage/LongTermsForm'; const propTypes = { /** Comes from Onyx. Information about the terms for the wallet */ @@ -58,61 +59,58 @@ class TermsStep extends React.Component { render() { return ( - + <> Navigation.dismissModal()} /> - - {/* @TODO build out the terms page */} - {/* eslint-disable-next-line max-len */} - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - ( - - {`${this.props.translate('termsStep.haveReadAndAgree')} `} - - - {`${this.props.translate('termsStep.electronicDisclosures')}.`} - - - )} - /> - ( - <> + + + ( - {`${this.props.translate('termsStep.agreeToThe')} `} + {`${this.props.translate('termsStep.haveReadAndAgree')} `} + + + {`${this.props.translate('termsStep.electronicDisclosures')}.`} + + )} + /> + ( + <> + + {`${this.props.translate('termsStep.agreeToThe')} `} + - - {`${this.props.translate('common.privacyPolicy')} `} - + + {`${this.props.translate('common.privacyPolicy')} `} + - {`${this.props.translate('common.and')} `} + {`${this.props.translate('common.and')} `} - - {`${this.props.translate('termsStep.walletAgreement')}.`} - - - )} - /> + + {`${this.props.translate('termsStep.walletAgreement')}.`} + + + )} + /> + {this.state.error && ( {this.props.translate('termsStep.termsMustBeAccepted')} )} - +