From a7514013da7a81250deecc4cc6f61673896a57ed Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Thu, 1 Jul 2021 15:19:58 -0700 Subject: [PATCH 01/52] set defualt step to terms for testing --- src/pages/EnablePayments/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/EnablePayments/index.js b/src/pages/EnablePayments/index.js index 8012df050e5ce..aa1cfd69925e5 100644 --- a/src/pages/EnablePayments/index.js +++ b/src/pages/EnablePayments/index.js @@ -32,7 +32,8 @@ class EnablePaymentsPage extends React.Component { return ; } - const currentStep = this.props.userWallet.currentStep || CONST.WALLET.STEP.ONFIDO; + // TODO: revert the default step back to CONST.WALLET.STEP.ONFIDO + const currentStep = this.props.userWallet.currentStep || CONST.WALLET.STEP.TERMS; return ( {currentStep === CONST.WALLET.STEP.ONFIDO && } From 9ed00105cf395c7895265e9f93f1752433ec2285 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Thu, 1 Jul 2021 17:00:46 -0700 Subject: [PATCH 02/52] get collapsible demo working on native --- ios/Podfile.lock | 2 +- package-lock.json | 5 + package.json | 2 + src/components/Collapsible/index.js | 20 ++ src/components/Collapsible/index.native.js | 219 +++++++++++++++++++++ src/pages/EnablePayments/TermsPage.js | 32 +++ src/pages/EnablePayments/TermsStep.js | 7 +- src/pages/home/sidebar/SidebarScreen.js | 3 +- 8 files changed, 283 insertions(+), 7 deletions(-) create mode 100644 src/components/Collapsible/index.js create mode 100644 src/components/Collapsible/index.native.js create mode 100644 src/pages/EnablePayments/TermsPage.js diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 8f4aa1dc3ac55..bcd1f7ad74ad1 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -728,7 +728,7 @@ SPEC CHECKSUMS: CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53 - FBReactNativeSpec: 7c304782592aaf95fe9fc6add0746906d6562739 + FBReactNativeSpec: 825b0f0851f5cc5c6268a920286281f62fc96c37 Firebase: c23a36d9e4cdf7877dfcba8dd0c58add66358999 FirebaseAnalytics: 3bb096873ee0d7fa4b6c70f5e9166b6da413cc7f FirebaseCore: d3a978a3cfa3240bf7e4ba7d137fdf5b22b628ec diff --git a/package-lock.json b/package-lock.json index b9dce013edf74..2425e4aeb1ece 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33792,6 +33792,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 08a793391d62b..2ff0158942d3d 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,9 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-native": "0.64.1", + "react-native-animatable": "^1.3.3", "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/components/Collapsible/index.js b/src/components/Collapsible/index.js new file mode 100644 index 0000000000000..210c84a0d5b19 --- /dev/null +++ b/src/components/Collapsible/index.js @@ -0,0 +1,20 @@ +import React from 'react'; +import Text from '../Text'; + +class AccordionView extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( + // TODO: create web component + + {/* 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. + + ); + } +} + +export default AccordionView; diff --git a/src/components/Collapsible/index.native.js b/src/components/Collapsible/index.native.js new file mode 100644 index 0000000000000..51e3fc8e91c57 --- /dev/null +++ b/src/components/Collapsible/index.native.js @@ -0,0 +1,219 @@ +import {View, TouchableOpacity, ScrollView, Switch, StyleSheet} from 'react-native'; +import Text from '../Text'; +import React from 'react'; +import * as Animatable from 'react-native-animatable'; +import Collapsible from 'react-native-collapsible'; +import Accordion from 'react-native-collapsible/Accordion'; + +const BACON_IPSUM = + 'Bacon ipsum dolor amet chuck turducken landjaeger tongue spare ribs. Picanha beef prosciutto meatball turkey shoulder shank salami cupim doner jowl pork belly cow. Chicken shankle rump swine tail frankfurter meatloaf ground round flank ham hock tongue shank andouille boudin brisket. '; + +const CONTENT = [ + { + title: 'First', + content: BACON_IPSUM, + }, + { + title: 'Second', + content: BACON_IPSUM, + }, + { + title: 'Third', + content: BACON_IPSUM, + }, + { + title: 'Fourth', + content: BACON_IPSUM, + }, + { + title: 'Fifth', + content: BACON_IPSUM, + }, +]; + +const SELECTORS = [ + { + title: 'First', + value: 0, + }, + { + title: 'Third', + value: 2, + }, + { + title: 'None', + }, +]; + +class AccordionView extends React.Component { + state = { + activeSections: [], + collapsed: true, + multipleSelect: false, + }; + + toggleExpanded = () => { + this.setState({ collapsed: !this.state.collapsed }); + }; + + setSections = (sections) => { + this.setState({ + activeSections: sections.includes(undefined) ? [] : sections, + }); + }; + + renderHeader = (section, _, isActive) => { + return ( + + {section.title} + + ); + }; + + renderContent(section, _, isActive) { + return ( + + + {section.content} + + + ); + } + + render() { + const { multipleSelect, activeSections } = this.state; + + return ( + + + Accordion Example + + + Multiple Select? + this.setState({ multipleSelect: a })} + /> + + + + Select: + + {SELECTORS.map((selector) => ( + this.setSections([selector.value])} + > + + + {selector.title} + + + + ))} + + + + + Single Collapsible + + + + + + Bacon ipsum dolor amet chuck turducken landjaeger tongue spare + ribs + + + + + + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#F5FCFF', + paddingTop: 20, + }, + title: { + textAlign: 'center', + fontSize: 22, + fontWeight: '300', + marginBottom: 20, + }, + header: { + backgroundColor: '#F5FCFF', + padding: 10, + }, + headerText: { + textAlign: 'center', + fontSize: 16, + fontWeight: '500', + }, + content: { + padding: 20, + backgroundColor: '#fff', + }, + active: { + backgroundColor: 'rgba(255,255,255,1)', + }, + inactive: { + backgroundColor: 'rgba(245,252,255,1)', + }, + selectors: { + marginBottom: 10, + flexDirection: 'row', + justifyContent: 'center', + }, + selector: { + backgroundColor: '#F5FCFF', + padding: 10, + }, + activeSelector: { + fontWeight: 'bold', + }, + selectTitle: { + fontSize: 14, + fontWeight: '500', + padding: 10, + }, + multipleToggle: { + flexDirection: 'row', + justifyContent: 'center', + marginVertical: 30, + alignItems: 'center', + }, + multipleToggle__title: { + fontSize: 16, + marginRight: 8, + }, +}); + +export default AccordionView; diff --git a/src/pages/EnablePayments/TermsPage.js b/src/pages/EnablePayments/TermsPage.js new file mode 100644 index 0000000000000..29861e41d23f0 --- /dev/null +++ b/src/pages/EnablePayments/TermsPage.js @@ -0,0 +1,32 @@ +import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; +import React from 'react'; +import compose from '../../libs/compose'; +import AccordionView from '../../components/Collapsible'; + +const propTypes = { + ...withLocalizePropTypes, +}; + +const defaultProps = { + +}; + +class TermsPage extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( + <> + + + ); + } +} + +TermsPage.propTypes = propTypes; +TermsPage.defaultProps = defaultProps; +export default compose( + withLocalize, +)(TermsPage); diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js index 38bbadb31ac61..41d044e10661d 100644 --- a/src/pages/EnablePayments/TermsStep.js +++ b/src/pages/EnablePayments/TermsStep.js @@ -17,6 +17,7 @@ import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; import CheckboxWithLabel from '../../components/CheckboxWithLabel'; import Text from '../../components/Text'; +import TermsPage from './TermsPage'; const propTypes = { /** Comes from Onyx. Information about the terms for the wallet */ @@ -65,11 +66,7 @@ class TermsStep extends React.Component { /> - - {/* @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. - + Navigation.navigate(ROUTES.NEW_CHAT), + // TODO: set back to ROUTES.NEW_CHAT + onSelected: () => Navigation.navigate(ROUTES.ENABLE_PAYMENTS), }, { icon: Users, From 2569859ea1acc253ea094b75f8a544a2217886af Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Thu, 1 Jul 2021 18:00:13 -0700 Subject: [PATCH 03/52] get collapsible working on web --- package-lock.json | 5 ++ package.json | 1 + src/components/Collapsible/index.js | 81 +++++++++++++++++++++++++++-- 3 files changed, 82 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2425e4aeb1ece..b042eb14551f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32533,6 +32533,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", diff --git a/package.json b/package.json index 2ff0158942d3d..b7127d112e616 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "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-animatable": "^1.3.3", diff --git a/src/components/Collapsible/index.js b/src/components/Collapsible/index.js index 210c84a0d5b19..cb64fd5601287 100644 --- a/src/components/Collapsible/index.js +++ b/src/components/Collapsible/index.js @@ -1,20 +1,91 @@ import React from 'react'; import Text from '../Text'; +import {View, TouchableOpacity} from 'react-native-web'; +import Collapse from 'react-collapse'; +import _ from 'underscore'; +import PropTypes from 'prop-types'; + +const BACON_IPSUM = + 'Bacon ipsum dolor amet chuck turducken landjaeger tongue spare ribs. Picanha beef prosciutto meatball turkey shoulder shank salami cupim doner jowl pork belly cow. Chicken shankle rump swine tail frankfurter meatloaf ground round flank ham hock tongue shank andouille boudin brisket. '; + +const CONTENT = [ + { + title: 'First', + content: BACON_IPSUM, + }, + { + title: 'Second', + content: BACON_IPSUM, + }, + { + title: 'Third', + content: BACON_IPSUM, + }, + { + title: 'Fourth', + content: BACON_IPSUM, + }, + { + title: 'Fifth', + content: BACON_IPSUM, + }, +]; + +const propTypes = { + // Whether the section should start expanded. False by default + isExpanded: PropTypes.bool, + + // Callback to fire when the section is expanded + onExpand: PropTypes.func, +}; + +const defaultProps = { + isExpanded: false, + onExpand: () => {}, +}; class AccordionView extends React.Component { constructor(props) { super(props); + this.toggle = this.toggle.bind(this); + this.state = { + isExpanded: this.props.isExpanded, + }; + } + + /** + * Expands/collapses the section + */ + toggle() { + this.setState(prevState => ({ + isExpanded: !prevState.isExpanded + }), () => { + if (this.state.isExpanded) { + this.props.onExpand(); + } + }); } render() { return ( - // TODO: create web component - - {/* 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. - + <> + {_.map(CONTENT, section => ( + + + {section.title} + + + + + {section.content} + + + + ))} + ); } } +AccordionView.defaultProps = defaultProps; export default AccordionView; From d30d2bb09611f2df2d65e38fef20918d9733d561 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Fri, 2 Jul 2021 15:52:02 -0700 Subject: [PATCH 04/52] use collapsibleSection structure --- src/components/Collapsible/index.js | 91 -------- src/components/Collapsible/index.native.js | 219 ------------------ src/components/CollapsibleSection/index.js | 55 +++++ .../CollapsibleSection/index.native.js | 63 +++++ src/pages/EnablePayments/TermsPage.js | 5 +- src/pages/home/sidebar/SidebarScreen.js | 1 + 6 files changed, 122 insertions(+), 312 deletions(-) delete mode 100644 src/components/Collapsible/index.js delete mode 100644 src/components/Collapsible/index.native.js create mode 100644 src/components/CollapsibleSection/index.js create mode 100644 src/components/CollapsibleSection/index.native.js diff --git a/src/components/Collapsible/index.js b/src/components/Collapsible/index.js deleted file mode 100644 index cb64fd5601287..0000000000000 --- a/src/components/Collapsible/index.js +++ /dev/null @@ -1,91 +0,0 @@ -import React from 'react'; -import Text from '../Text'; -import {View, TouchableOpacity} from 'react-native-web'; -import Collapse from 'react-collapse'; -import _ from 'underscore'; -import PropTypes from 'prop-types'; - -const BACON_IPSUM = - 'Bacon ipsum dolor amet chuck turducken landjaeger tongue spare ribs. Picanha beef prosciutto meatball turkey shoulder shank salami cupim doner jowl pork belly cow. Chicken shankle rump swine tail frankfurter meatloaf ground round flank ham hock tongue shank andouille boudin brisket. '; - -const CONTENT = [ - { - title: 'First', - content: BACON_IPSUM, - }, - { - title: 'Second', - content: BACON_IPSUM, - }, - { - title: 'Third', - content: BACON_IPSUM, - }, - { - title: 'Fourth', - content: BACON_IPSUM, - }, - { - title: 'Fifth', - content: BACON_IPSUM, - }, -]; - -const propTypes = { - // Whether the section should start expanded. False by default - isExpanded: PropTypes.bool, - - // Callback to fire when the section is expanded - onExpand: PropTypes.func, -}; - -const defaultProps = { - isExpanded: false, - onExpand: () => {}, -}; - -class AccordionView extends React.Component { - constructor(props) { - super(props); - this.toggle = this.toggle.bind(this); - this.state = { - isExpanded: this.props.isExpanded, - }; - } - - /** - * Expands/collapses the section - */ - toggle() { - this.setState(prevState => ({ - isExpanded: !prevState.isExpanded - }), () => { - if (this.state.isExpanded) { - this.props.onExpand(); - } - }); - } - - render() { - return ( - <> - {_.map(CONTENT, section => ( - - - {section.title} - - - - - {section.content} - - - - ))} - - ); - } -} - -AccordionView.defaultProps = defaultProps; -export default AccordionView; diff --git a/src/components/Collapsible/index.native.js b/src/components/Collapsible/index.native.js deleted file mode 100644 index 51e3fc8e91c57..0000000000000 --- a/src/components/Collapsible/index.native.js +++ /dev/null @@ -1,219 +0,0 @@ -import {View, TouchableOpacity, ScrollView, Switch, StyleSheet} from 'react-native'; -import Text from '../Text'; -import React from 'react'; -import * as Animatable from 'react-native-animatable'; -import Collapsible from 'react-native-collapsible'; -import Accordion from 'react-native-collapsible/Accordion'; - -const BACON_IPSUM = - 'Bacon ipsum dolor amet chuck turducken landjaeger tongue spare ribs. Picanha beef prosciutto meatball turkey shoulder shank salami cupim doner jowl pork belly cow. Chicken shankle rump swine tail frankfurter meatloaf ground round flank ham hock tongue shank andouille boudin brisket. '; - -const CONTENT = [ - { - title: 'First', - content: BACON_IPSUM, - }, - { - title: 'Second', - content: BACON_IPSUM, - }, - { - title: 'Third', - content: BACON_IPSUM, - }, - { - title: 'Fourth', - content: BACON_IPSUM, - }, - { - title: 'Fifth', - content: BACON_IPSUM, - }, -]; - -const SELECTORS = [ - { - title: 'First', - value: 0, - }, - { - title: 'Third', - value: 2, - }, - { - title: 'None', - }, -]; - -class AccordionView extends React.Component { - state = { - activeSections: [], - collapsed: true, - multipleSelect: false, - }; - - toggleExpanded = () => { - this.setState({ collapsed: !this.state.collapsed }); - }; - - setSections = (sections) => { - this.setState({ - activeSections: sections.includes(undefined) ? [] : sections, - }); - }; - - renderHeader = (section, _, isActive) => { - return ( - - {section.title} - - ); - }; - - renderContent(section, _, isActive) { - return ( - - - {section.content} - - - ); - } - - render() { - const { multipleSelect, activeSections } = this.state; - - return ( - - - Accordion Example - - - Multiple Select? - this.setState({ multipleSelect: a })} - /> - - - - Select: - - {SELECTORS.map((selector) => ( - this.setSections([selector.value])} - > - - - {selector.title} - - - - ))} - - - - - Single Collapsible - - - - - - Bacon ipsum dolor amet chuck turducken landjaeger tongue spare - ribs - - - - - - - ); - } -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#F5FCFF', - paddingTop: 20, - }, - title: { - textAlign: 'center', - fontSize: 22, - fontWeight: '300', - marginBottom: 20, - }, - header: { - backgroundColor: '#F5FCFF', - padding: 10, - }, - headerText: { - textAlign: 'center', - fontSize: 16, - fontWeight: '500', - }, - content: { - padding: 20, - backgroundColor: '#fff', - }, - active: { - backgroundColor: 'rgba(255,255,255,1)', - }, - inactive: { - backgroundColor: 'rgba(245,252,255,1)', - }, - selectors: { - marginBottom: 10, - flexDirection: 'row', - justifyContent: 'center', - }, - selector: { - backgroundColor: '#F5FCFF', - padding: 10, - }, - activeSelector: { - fontWeight: 'bold', - }, - selectTitle: { - fontSize: 14, - fontWeight: '500', - padding: 10, - }, - multipleToggle: { - flexDirection: 'row', - justifyContent: 'center', - marginVertical: 30, - alignItems: 'center', - }, - multipleToggle__title: { - fontSize: 16, - marginRight: 8, - }, -}); - -export default AccordionView; diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js new file mode 100644 index 0000000000000..44d68f29ee1e8 --- /dev/null +++ b/src/components/CollapsibleSection/index.js @@ -0,0 +1,55 @@ +import React from 'react'; +import Text from '../Text'; +import {View, TouchableOpacity} from 'react-native-web'; +import Collapse from 'react-collapse'; +import PropTypes from 'prop-types'; + +const propTypes = { + // Whether the section should start expanded. False by default + isExpanded: PropTypes.bool, +}; + +const defaultProps = { + isExpanded: false, +}; + +class CollapsibleSection extends React.Component { + constructor(props) { + super(props); + this.toggle = this.toggle.bind(this); + this.state = { + isExpanded: this.props.isExpanded, + }; + } + + /** + * Expands/collapses the section + */ + toggle() { + this.setState(prevState => ({ + isExpanded: !prevState.isExpanded + })); + } + + render() { + return ( + <> + + + Test Title + + + + + Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content + + + + + ); + } +} + +CollapsibleSection.defaultProps = defaultProps; +CollapsibleSection.propTypes = propTypes; +export default CollapsibleSection; diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js new file mode 100644 index 0000000000000..d25625e2346a1 --- /dev/null +++ b/src/components/CollapsibleSection/index.native.js @@ -0,0 +1,63 @@ +import {View, TouchableOpacity, ScrollView, StyleSheet} from 'react-native'; +import Text from '../Text'; +import React from 'react'; +import Collapsible from 'react-native-collapsible'; + +class CollapsibleSection extends React.Component { + state = { + collapsed: true, + }; + + toggleExpanded = () => { + this.setState({ collapsed: !this.state.collapsed }); + }; + + render() { + return ( + + + + Single Collapsible + + + + + + Bacon ipsum dolor amet chuck turducken landjaeger tongue spare + ribs + + + + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#F5FCFF', + paddingTop: 20, + }, + title: { + textAlign: 'center', + fontSize: 22, + fontWeight: '300', + marginBottom: 20, + }, + header: { + backgroundColor: '#F5FCFF', + padding: 10, + }, + headerText: { + textAlign: 'center', + fontSize: 16, + fontWeight: '500', + }, + content: { + padding: 20, + backgroundColor: '#fff', + }, +}); + +export default CollapsibleSection; diff --git a/src/pages/EnablePayments/TermsPage.js b/src/pages/EnablePayments/TermsPage.js index 29861e41d23f0..f3fe2b15c2082 100644 --- a/src/pages/EnablePayments/TermsPage.js +++ b/src/pages/EnablePayments/TermsPage.js @@ -1,7 +1,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import React from 'react'; import compose from '../../libs/compose'; -import AccordionView from '../../components/Collapsible'; +import CollapsibleSection from '../../components/CollapsibleSection'; const propTypes = { ...withLocalizePropTypes, @@ -19,7 +19,8 @@ class TermsPage extends React.Component { render() { return ( <> - + + ); } diff --git a/src/pages/home/sidebar/SidebarScreen.js b/src/pages/home/sidebar/SidebarScreen.js index 26af71b81fc2e..6c9bf991944ce 100755 --- a/src/pages/home/sidebar/SidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen.js @@ -114,6 +114,7 @@ class SidebarScreen extends Component { { icon: ChatBubble, text: this.props.translate('sidebarScreen.newChat'), + // TODO: set back to ROUTES.NEW_CHAT onSelected: () => Navigation.navigate(ROUTES.ENABLE_PAYMENTS), }, From cd8c11f96a17984c8d2a376a4cd97fa72a9f4378 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Fri, 2 Jul 2021 15:56:27 -0700 Subject: [PATCH 05/52] remove unnecessary import --- package.json | 1 - src/components/CollapsibleSection/index.native.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index b7127d112e616..bf38a5a9242b5 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,6 @@ "react-collapse": "^5.1.0", "react-dom": "^17.0.2", "react-native": "0.64.1", - "react-native-animatable": "^1.3.3", "react-native-bootsplash": "^3.2.0", "react-native-collapsible": "^1.6.0", "react-native-config": "^1.4.0", diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js index d25625e2346a1..5e8ac9198a078 100644 --- a/src/components/CollapsibleSection/index.native.js +++ b/src/components/CollapsibleSection/index.native.js @@ -1,4 +1,4 @@ -import {View, TouchableOpacity, ScrollView, StyleSheet} from 'react-native'; +import {View, TouchableOpacity, StyleSheet} from 'react-native'; import Text from '../Text'; import React from 'react'; import Collapsible from 'react-native-collapsible'; From c481cafa19212f355d3c56637608616b1b385f77 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Fri, 2 Jul 2021 16:09:30 -0700 Subject: [PATCH 06/52] pass data from terms page --- src/components/CollapsibleSection/index.js | 12 +++++-- .../CollapsibleSection/index.native.js | 36 ++++++++++++++----- src/pages/EnablePayments/TermsPage.js | 13 +++++-- 3 files changed, 47 insertions(+), 14 deletions(-) diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js index 44d68f29ee1e8..4ba5917322a2b 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -5,8 +5,14 @@ import Collapse from 'react-collapse'; import PropTypes from 'prop-types'; const propTypes = { - // Whether the section should start expanded. False by default + /** 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 = { @@ -36,12 +42,12 @@ class CollapsibleSection extends React.Component { <> - Test Title + {this.props.title} - Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content + {this.props.children} diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js index 5e8ac9198a078..79d643b6f5850 100644 --- a/src/components/CollapsibleSection/index.native.js +++ b/src/components/CollapsibleSection/index.native.js @@ -2,14 +2,33 @@ import {View, TouchableOpacity, StyleSheet} from 'react-native'; import Text from '../Text'; import React from 'react'; import Collapsible from 'react-native-collapsible'; +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, +}; class CollapsibleSection extends React.Component { - state = { - collapsed: true, - }; + constructor(props) { + super(props); + this.state = { + isExpanded: this.props.isExpanded, + } + } toggleExpanded = () => { - this.setState({ collapsed: !this.state.collapsed }); + this.setState({isExpanded: !this.state.isExpanded}); }; render() { @@ -20,12 +39,9 @@ class CollapsibleSection extends React.Component { Single Collapsible - + - - Bacon ipsum dolor amet chuck turducken landjaeger tongue spare - ribs - + {this.props.children} @@ -60,4 +76,6 @@ const styles = StyleSheet.create({ }, }); +CollapsibleSection.propTypes = propTypes; +CollapsibleSection.defaultProps = defaultProps; export default CollapsibleSection; diff --git a/src/pages/EnablePayments/TermsPage.js b/src/pages/EnablePayments/TermsPage.js index f3fe2b15c2082..e9ad93a37eab1 100644 --- a/src/pages/EnablePayments/TermsPage.js +++ b/src/pages/EnablePayments/TermsPage.js @@ -2,6 +2,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize import React from 'react'; import compose from '../../libs/compose'; import CollapsibleSection from '../../components/CollapsibleSection'; +import Text from '../../components/Text'; const propTypes = { ...withLocalizePropTypes, @@ -19,8 +20,16 @@ class TermsPage extends React.Component { render() { return ( <> - - + + Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing + + + Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing + ); } From d7f4b47bdb67284c96ece169d70e68e07219f58c Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Fri, 2 Jul 2021 16:12:24 -0700 Subject: [PATCH 07/52] move shared propTypes and defaults to file --- .../CollapsibleSectionPropTypes.js | 18 ++++++++++++++++++ src/components/CollapsibleSection/index.js | 17 +---------------- .../CollapsibleSection/index.native.js | 17 +---------------- 3 files changed, 20 insertions(+), 32 deletions(-) create mode 100644 src/components/CollapsibleSection/CollapsibleSectionPropTypes.js diff --git a/src/components/CollapsibleSection/CollapsibleSectionPropTypes.js b/src/components/CollapsibleSection/CollapsibleSectionPropTypes.js new file mode 100644 index 0000000000000..e928619d432ec --- /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 index 4ba5917322a2b..c1336245c9238 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -2,22 +2,7 @@ import React from 'react'; import Text from '../Text'; import {View, TouchableOpacity} from 'react-native-web'; import Collapse from 'react-collapse'; -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, -}; +import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; class CollapsibleSection extends React.Component { constructor(props) { diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js index 79d643b6f5850..c4cb3e9fbbc93 100644 --- a/src/components/CollapsibleSection/index.native.js +++ b/src/components/CollapsibleSection/index.native.js @@ -2,22 +2,7 @@ import {View, TouchableOpacity, StyleSheet} from 'react-native'; import Text from '../Text'; import React from 'react'; import Collapsible from 'react-native-collapsible'; -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, -}; +import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; class CollapsibleSection extends React.Component { constructor(props) { From 533230a53d7838c0da9feeadf5afc02a9f5d5343 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Fri, 2 Jul 2021 16:20:23 -0700 Subject: [PATCH 08/52] clean up inconsistencies --- src/components/CollapsibleSection/index.js | 30 ++++++++----------- .../CollapsibleSection/index.native.js | 3 ++ src/pages/EnablePayments/TermsPage.js | 10 ++----- 3 files changed, 19 insertions(+), 24 deletions(-) diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js index c1336245c9238..7e8b47d5dd5d0 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -7,7 +7,7 @@ import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; class CollapsibleSection extends React.Component { constructor(props) { super(props); - this.toggle = this.toggle.bind(this); + this.toggleExpanded = this.toggleExpanded.bind(this); this.state = { isExpanded: this.props.isExpanded, }; @@ -16,27 +16,23 @@ class CollapsibleSection extends React.Component { /** * Expands/collapses the section */ - toggle() { - this.setState(prevState => ({ - isExpanded: !prevState.isExpanded - })); + toggleExpanded() { + this.setState({isExpanded: !this.state.isExpanded}); } render() { return ( - <> - - - {this.props.title} - + + + {this.props.title} + - - - {this.props.children} - - - - + + + {this.props.children} + + + ); } } diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js index c4cb3e9fbbc93..c409c38be9710 100644 --- a/src/components/CollapsibleSection/index.native.js +++ b/src/components/CollapsibleSection/index.native.js @@ -12,6 +12,9 @@ class CollapsibleSection extends React.Component { } } + /** + * Expands/collapses the section + */ toggleExpanded = () => { this.setState({isExpanded: !this.state.isExpanded}); }; diff --git a/src/pages/EnablePayments/TermsPage.js b/src/pages/EnablePayments/TermsPage.js index e9ad93a37eab1..b6f5ecf346fb9 100644 --- a/src/pages/EnablePayments/TermsPage.js +++ b/src/pages/EnablePayments/TermsPage.js @@ -1,5 +1,5 @@ -import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import React from 'react'; +import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import compose from '../../libs/compose'; import CollapsibleSection from '../../components/CollapsibleSection'; import Text from '../../components/Text'; @@ -13,20 +13,16 @@ const defaultProps = { }; class TermsPage extends React.Component { - constructor(props) { - super(props); - } - render() { return ( <> Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing From b1c255191074f8bae90f5a0008f12a74144f7b57 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Fri, 2 Jul 2021 16:42:57 -0700 Subject: [PATCH 09/52] get basic table/spacing views added --- src/pages/EnablePayments/TermsPage.js | 32 ++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/src/pages/EnablePayments/TermsPage.js b/src/pages/EnablePayments/TermsPage.js index b6f5ecf346fb9..e8eb18cc4af64 100644 --- a/src/pages/EnablePayments/TermsPage.js +++ b/src/pages/EnablePayments/TermsPage.js @@ -1,8 +1,10 @@ import React from 'react'; +import {View} from 'react-native'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import compose from '../../libs/compose'; import CollapsibleSection from '../../components/CollapsibleSection'; import Text from '../../components/Text'; +import styles from '../../styles/styles'; const propTypes = { ...withLocalizePropTypes, @@ -19,12 +21,30 @@ class TermsPage extends React.Component { - Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing - - - Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing + + + + Type of Fee + + + Fee Amount + + + More Details + + + + + Opening an Account + + + $0 + + + There is no monthly usage fee + + + ); From febe9e4db6ebf985a7307fc153d87fb414d12880 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Fri, 2 Jul 2021 17:57:42 -0700 Subject: [PATCH 10/52] split into long and short form pages --- .../CollapsibleSection/index.native.js | 3 +- src/pages/EnablePayments/TermsPage.js | 58 ------------------- .../EnablePayments/TermsPage/LongTermsForm.js | 38 ++++++++++++ .../TermsPage/ShortTermsForm.js | 48 +++++++++++++++ .../EnablePayments/TermsPage/TermsPage.js | 33 +++++++++++ src/pages/EnablePayments/TermsStep.js | 2 +- 6 files changed, 122 insertions(+), 60 deletions(-) delete mode 100644 src/pages/EnablePayments/TermsPage.js create mode 100644 src/pages/EnablePayments/TermsPage/LongTermsForm.js create mode 100644 src/pages/EnablePayments/TermsPage/ShortTermsForm.js create mode 100644 src/pages/EnablePayments/TermsPage/TermsPage.js diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js index c409c38be9710..5f9a2b114721f 100644 --- a/src/components/CollapsibleSection/index.native.js +++ b/src/components/CollapsibleSection/index.native.js @@ -7,6 +7,7 @@ import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; class CollapsibleSection extends React.Component { constructor(props) { super(props); + this.toggleExpanded = this.toggleExpanded.bind(this); this.state = { isExpanded: this.props.isExpanded, } @@ -15,7 +16,7 @@ class CollapsibleSection extends React.Component { /** * Expands/collapses the section */ - toggleExpanded = () => { + toggleExpanded() { this.setState({isExpanded: !this.state.isExpanded}); }; diff --git a/src/pages/EnablePayments/TermsPage.js b/src/pages/EnablePayments/TermsPage.js deleted file mode 100644 index e8eb18cc4af64..0000000000000 --- a/src/pages/EnablePayments/TermsPage.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import {View} from 'react-native'; -import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; -import compose from '../../libs/compose'; -import CollapsibleSection from '../../components/CollapsibleSection'; -import Text from '../../components/Text'; -import styles from '../../styles/styles'; - -const propTypes = { - ...withLocalizePropTypes, -}; - -const defaultProps = { - -}; - -class TermsPage extends React.Component { - render() { - return ( - <> - - - - - Type of Fee - - - Fee Amount - - - More Details - - - - - Opening an Account - - - $0 - - - There is no monthly usage fee - - - - - - ); - } -} - -TermsPage.propTypes = propTypes; -TermsPage.defaultProps = defaultProps; -export default compose( - withLocalize, -)(TermsPage); diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js new file mode 100644 index 0000000000000..6806e7b9db7be --- /dev/null +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -0,0 +1,38 @@ +import React from 'react'; +import {View} from 'react-native'; +import styles from '../../../styles/styles'; +import Text from '../../../components/Text'; +import CollapsibleSection from '../../../components/CollapsibleSection'; + +const LongTermsForm = () => ( + + + + + Type of Fee + + + Fee Amount + + + More Details + + + + + Opening an Account + + + $0 + + + There is no monthly usage fee + + + + +); + +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 0000000000000..8bff9740ea930 --- /dev/null +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -0,0 +1,48 @@ +import React from 'react'; +import {View} from 'react-native'; +import styles from '../../../styles/styles'; +import Text from '../../../components/Text'; + +const ShortTermsForm = () => ( + + + + Monthly Fee + + + Per Purchase + + + ATM Withdrawal + + + Cash Reload + + + + + $0 + + + $0 + + + + N/A + in-network + + + N/A + out-of-network + + + + N/A + + + +); + +ShortTermsForm.displayName = 'ShortTermsForm'; + +export default ShortTermsForm; diff --git a/src/pages/EnablePayments/TermsPage/TermsPage.js b/src/pages/EnablePayments/TermsPage/TermsPage.js new file mode 100644 index 0000000000000..805d1b1c0f20f --- /dev/null +++ b/src/pages/EnablePayments/TermsPage/TermsPage.js @@ -0,0 +1,33 @@ +import React from 'react'; +import LongTermsForm from './LongTermsForm'; +import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import compose from '../../../libs/compose'; +import ShortTermsForm from './ShortTermsForm'; + +const propTypes = { + ...withLocalizePropTypes, +}; + +const defaultProps = { + +}; + +class TermsPage extends React.Component { + render() { + return ( + <> + {/*Short Form*/} + + + {/*Long Form*/} + + + ); + } +} + +TermsPage.propTypes = propTypes; +TermsPage.defaultProps = defaultProps; +export default compose( + withLocalize, +)(TermsPage); diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js index 41d044e10661d..b51f0a79d58c8 100644 --- a/src/pages/EnablePayments/TermsStep.js +++ b/src/pages/EnablePayments/TermsStep.js @@ -17,7 +17,7 @@ import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; import CheckboxWithLabel from '../../components/CheckboxWithLabel'; import Text from '../../components/Text'; -import TermsPage from './TermsPage'; +import TermsPage from './TermsPage/TermsPage'; const propTypes = { /** Comes from Onyx. Information about the terms for the wallet */ From 4d8d77564d80fe80c78300e89044a67c8f0abc7d Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Fri, 2 Jul 2021 18:54:23 -0700 Subject: [PATCH 11/52] add content and initial short form styling --- .../CollapsibleSection/index.native.js | 3 +- .../EnablePayments/TermsPage/LongTermsForm.js | 48 +++++++------- .../TermsPage/ShortTermsForm.js | 66 +++++++++++-------- src/styles/styles.js | 5 ++ 4 files changed, 70 insertions(+), 52 deletions(-) diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js index 5f9a2b114721f..938423fae38b2 100644 --- a/src/components/CollapsibleSection/index.native.js +++ b/src/components/CollapsibleSection/index.native.js @@ -42,7 +42,7 @@ const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', - paddingTop: 20, + paddingTop: 10, }, title: { textAlign: 'center', @@ -60,7 +60,6 @@ const styles = StyleSheet.create({ fontWeight: '500', }, content: { - padding: 20, backgroundColor: '#fff', }, }); diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index 6806e7b9db7be..f8f090e50de56 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -5,32 +5,34 @@ import Text from '../../../components/Text'; import CollapsibleSection from '../../../components/CollapsibleSection'; const LongTermsForm = () => ( - - - - - Type of Fee + + + + + + Type of Fee + + + Fee Amount + + + More Details + - - Fee Amount - - - More Details - - - - - Opening an Account - - - $0 - - - There is no monthly usage fee + + + Opening an Account + + + $0 + + + There is no monthly usage fee + - - + + ); LongTermsForm.displayName = 'LongTermsForm'; diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 8bff9740ea930..e90dd706d05e0 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -4,43 +4,55 @@ import styles from '../../../styles/styles'; import Text from '../../../components/Text'; const ShortTermsForm = () => ( - - - - Monthly Fee - - - Per Purchase - - - ATM Withdrawal - - - Cash Reload - - - - - $0 - - - $0 + <> + + + + Monthly Fee + + + Per Purchase + + + ATM Withdrawal + + + Cash Reload + - + - N/A - in-network + $0 + + + $0 + + + + N/A + in-network + + + N/A + out-of-network + N/A - out-of-network - + + + + + ATM balance inquiry + (in-network or out-of-network) + + N/A - + ); ShortTermsForm.displayName = 'ShortTermsForm'; diff --git a/src/styles/styles.js b/src/styles/styles.js index d213bca928b89..5783c384b89dd 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1740,6 +1740,11 @@ const styles = { lineHeight: 16, ...whiteSpace.noWrap, }, + + shortTermsRow: { + borderTopColor: themeColors.border, + borderTopWidth: 1, + }, }; const baseCodeTagStyles = { From e8f0db31856b355b2057399ab278b4048bb3dcb2 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Tue, 6 Jul 2021 15:00:34 -0700 Subject: [PATCH 12/52] use title --- src/components/CollapsibleSection/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js index 938423fae38b2..90d6eec8888a3 100644 --- a/src/components/CollapsibleSection/index.native.js +++ b/src/components/CollapsibleSection/index.native.js @@ -25,7 +25,7 @@ class CollapsibleSection extends React.Component { - Single Collapsible + {this.props.title} From 1dd86286885bd969d5d196cf555f6d564d87a917 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Tue, 6 Jul 2021 21:16:59 -0700 Subject: [PATCH 13/52] add short form terms rows --- .../TermsPage/ShortTermsForm.js | 40 +++++++++++++++++-- src/styles/styles.js | 5 +++ 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index e90dd706d05e0..f4e15aac50bef 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -5,7 +5,7 @@ import Text from '../../../components/Text'; const ShortTermsForm = () => ( <> - + Monthly Fee @@ -30,11 +30,11 @@ const ShortTermsForm = () => ( N/A - in-network + in-network N/A - out-of-network + out-of-network @@ -46,12 +46,44 @@ const ShortTermsForm = () => ( ATM balance inquiry - (in-network or out-of-network) + (in-network or out-of-network) N/A + + + Customer Service + (automated or live agent) + + + $0 + + + + + Inactivity + (after 12 months with no transactions) + + + $0 + + + + + We charge 1 type of fee. + + + + + Electronic Funds withdrawal + (instant) + + + 1.5% (min. $0.25) + + ); diff --git a/src/styles/styles.js b/src/styles/styles.js index 5783c384b89dd..b2b925ca5a964 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1745,6 +1745,11 @@ const styles = { borderTopColor: themeColors.border, borderTopWidth: 1, }, + + shortTermsBoldRow: { + borderTopWidth: 3, + borderTopColor: themeColors.shadow, + } }; const baseCodeTagStyles = { From 2c2233a7846462bd733fa01d9c8915fa71a074ca Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Tue, 6 Jul 2021 21:39:16 -0700 Subject: [PATCH 14/52] add links --- .../TermsPage/ShortTermsForm.js | 22 +++++++++++++++++++ src/styles/styles.js | 2 +- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index f4e15aac50bef..4eaa06cfdd4ef 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -2,6 +2,7 @@ import React from 'react'; import {View} from 'react-native'; import styles from '../../../styles/styles'; import Text from '../../../components/Text'; +import TextLink from '../../../components/TextLink'; const ShortTermsForm = () => ( <> @@ -84,6 +85,27 @@ const ShortTermsForm = () => ( 1.5% (min. $0.25) + + + No overdraft/credit feature. + Your funds are elligible for FDIC insurance. + + For general information about prepaid accounts, visit + {' '} + + cfpb.gov/prepaid + + {'.'} + + Find details and conditions for all fees and services by visiting + {' '} + + use.expensify.com/fees + + {' '} + or calling +1 833-400-0904. + + ); diff --git a/src/styles/styles.js b/src/styles/styles.js index b2b925ca5a964..cd3024a768778 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1749,7 +1749,7 @@ const styles = { shortTermsBoldRow: { borderTopWidth: 3, borderTopColor: themeColors.shadow, - } + }, }; const baseCodeTagStyles = { From 7d60c188bcb3238e24ed7d036d22f6cfb8a74b9f Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Tue, 6 Jul 2021 22:06:39 -0700 Subject: [PATCH 15/52] update styles, remove unnecessary termsPage --- src/components/CollapsibleSection/index.js | 6 ++- .../CollapsibleSection/index.native.js | 4 +- .../EnablePayments/TermsPage/LongTermsForm.js | 22 +++++------ .../TermsPage/ShortTermsForm.js | 39 ++++++++++--------- .../EnablePayments/TermsPage/TermsPage.js | 33 ---------------- src/pages/EnablePayments/TermsStep.js | 6 ++- 6 files changed, 41 insertions(+), 69 deletions(-) delete mode 100644 src/pages/EnablePayments/TermsPage/TermsPage.js diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js index 7e8b47d5dd5d0..c6cfda19e413e 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -1,7 +1,7 @@ import React from 'react'; -import Text from '../Text'; import {View, TouchableOpacity} from 'react-native-web'; import Collapse from 'react-collapse'; +import Text from '../Text'; import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; class CollapsibleSection extends React.Component { @@ -17,7 +17,9 @@ class CollapsibleSection extends React.Component { * Expands/collapses the section */ toggleExpanded() { - this.setState({isExpanded: !this.state.isExpanded}); + this.setState(prevState => ({ + isExpanded: !prevState.isExpanded, + })); } render() { diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js index 90d6eec8888a3..6012f83564e0b 100644 --- a/src/components/CollapsibleSection/index.native.js +++ b/src/components/CollapsibleSection/index.native.js @@ -1,7 +1,7 @@ -import {View, TouchableOpacity, StyleSheet} from 'react-native'; -import Text from '../Text'; import React from 'react'; +import {View, TouchableOpacity, StyleSheet} from 'react-native'; import Collapsible from 'react-native-collapsible'; +import Text from '../Text'; import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; class CollapsibleSection extends React.Component { diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index f8f090e50de56..4b9e3a05a78a7 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -5,29 +5,29 @@ import Text from '../../../components/Text'; import CollapsibleSection from '../../../components/CollapsibleSection'; const LongTermsForm = () => ( - + - - - + + + Type of Fee - + Fee Amount - + More Details - - + + Opening an Account - + $0 - - There is no monthly usage fee + + There is no monthly usage fee. diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 4eaa06cfdd4ef..8c139f0267521 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -6,39 +6,39 @@ import TextLink from '../../../components/TextLink'; const ShortTermsForm = () => ( <> - - - + + + Monthly Fee - + Per Purchase - + ATM Withdrawal - + Cash Reload - - + + $0 - + $0 - - + + N/A - in-network + in-network - + N/A - out-of-network + out-of-network - + N/A @@ -73,13 +73,13 @@ const ShortTermsForm = () => ( - We charge 1 type of fee. + We charge 1 type of fee. Electronic Funds withdrawal - (instant) + (instant) 1.5% (min. $0.25) @@ -95,9 +95,10 @@ const ShortTermsForm = () => ( cfpb.gov/prepaid - {'.'} + . - Find details and conditions for all fees and services by visiting + + Find details and conditions for all fees and services by visiting {' '} use.expensify.com/fees diff --git a/src/pages/EnablePayments/TermsPage/TermsPage.js b/src/pages/EnablePayments/TermsPage/TermsPage.js deleted file mode 100644 index 805d1b1c0f20f..0000000000000 --- a/src/pages/EnablePayments/TermsPage/TermsPage.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import LongTermsForm from './LongTermsForm'; -import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import compose from '../../../libs/compose'; -import ShortTermsForm from './ShortTermsForm'; - -const propTypes = { - ...withLocalizePropTypes, -}; - -const defaultProps = { - -}; - -class TermsPage extends React.Component { - render() { - return ( - <> - {/*Short Form*/} - - - {/*Long Form*/} - - - ); - } -} - -TermsPage.propTypes = propTypes; -TermsPage.defaultProps = defaultProps; -export default compose( - withLocalize, -)(TermsPage); diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js index b51f0a79d58c8..032712138be28 100644 --- a/src/pages/EnablePayments/TermsStep.js +++ b/src/pages/EnablePayments/TermsStep.js @@ -17,7 +17,8 @@ import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; import CheckboxWithLabel from '../../components/CheckboxWithLabel'; import Text from '../../components/Text'; -import TermsPage from './TermsPage/TermsPage'; +import ShortTermsForm from './TermsPage/ShortTermsForm'; +import LongTermsForm from './TermsPage/LongTermsForm'; const propTypes = { /** Comes from Onyx. Information about the terms for the wallet */ @@ -66,7 +67,8 @@ class TermsStep extends React.Component { /> - + + Date: Tue, 6 Jul 2021 22:11:20 -0700 Subject: [PATCH 16/52] add spacing for long form --- .../EnablePayments/TermsPage/LongTermsForm.js | 21 +++++++++++-------- .../TermsPage/ShortTermsForm.js | 12 +++++------ src/styles/styles.js | 4 ++-- 3 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index 4b9e3a05a78a7..e98651c813027 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -5,28 +5,31 @@ import Text from '../../../components/Text'; import CollapsibleSection from '../../../components/CollapsibleSection'; const LongTermsForm = () => ( - + + + A list of all Expensify Payments Account fees: + - - + + Type of Fee - + Fee Amount - + More Details - - + + Opening an Account - + $0 - + There is no monthly usage fee. diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 8c139f0267521..5e66fa11dc6f9 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -44,7 +44,7 @@ const ShortTermsForm = () => ( - + ATM balance inquiry (in-network or out-of-network) @@ -53,7 +53,7 @@ const ShortTermsForm = () => ( N/A - + Customer Service (automated or live agent) @@ -62,7 +62,7 @@ const ShortTermsForm = () => ( $0 - + Inactivity (after 12 months with no transactions) @@ -71,12 +71,12 @@ const ShortTermsForm = () => ( $0 - + We charge 1 type of fee. - + Electronic Funds withdrawal (instant) @@ -86,7 +86,7 @@ const ShortTermsForm = () => ( - + No overdraft/credit feature. Your funds are elligible for FDIC insurance. diff --git a/src/styles/styles.js b/src/styles/styles.js index cd3024a768778..149acee40e3a8 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1741,12 +1741,12 @@ const styles = { ...whiteSpace.noWrap, }, - shortTermsRow: { + termsRow: { borderTopColor: themeColors.border, borderTopWidth: 1, }, - shortTermsBoldRow: { + termsRowBold: { borderTopWidth: 3, borderTopColor: themeColors.shadow, }, From 3af9007b1cecc085e2b92abe68d444065ac8dc7e Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Fri, 9 Jul 2021 21:32:19 -0700 Subject: [PATCH 17/52] style collapsible component on web --- ios/Podfile.lock | 30 +++++++++---------- src/components/CollapsibleSection/index.js | 5 ++-- .../CollapsibleSection/index.native.js | 13 ++++---- .../EnablePayments/TermsPage/LongTermsForm.js | 22 +++++++------- src/styles/styles.js | 9 ++++++ src/styles/utilities/spacing.js | 12 ++++++++ 6 files changed, 57 insertions(+), 34 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index bcd1f7ad74ad1..f5254b4d551e8 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -751,9 +751,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: c02276ccc630a726a9ed790bf923d29839ff4017 PromisesObjC: 3113f7f76903778cf4a0586bd1ab89329a0b7b97 RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c @@ -768,14 +768,14 @@ SPEC CHECKSUMS: React-jsiexecutor: 124e8f99992490d0d13e0649d950d3e1aae06fe9 React-jsinspector: 500a59626037be5b3b3d89c5151bc3baa9abf1a9 react-native-config: d8b45133fd13d4f23bd2064b72f6e2c08b2763ed - react-native-document-picker: 0e3602a4064da040321bafad6848d8b0edcb1d55 - react-native-image-picker: 4089335b89b625d4e34d53fb249c48a7a791b3ea - react-native-netinfo: 52cf0ee8342548a485e28f4b09e56b477567244d + react-native-document-picker: f2f73db94328c84e22144e369fb4a3ede47bc1f5 + 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 @@ -789,20 +789,20 @@ SPEC CHECKSUMS: React-runtimeexecutor: ff951a0c241bfaefc4940a3f1f1a229e7cb32fa6 ReactCommon: bedc99ed4dae329c4fcf128d0c31b9115e5365ca rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba - RNBootSplash: 3123ba68fe44d8be09a014e89cc8f0f55b68a521 + RNBootSplash: 24175aa28fe203b10c48dc34e78d946fd33c77af RNCAsyncStorage: cb9a623793918c6699586281f0b51cbc38f046f9 - RNCClipboard: 5e299c6df8e0c98f3d7416b86ae563d3a9f768a3 - RNCMaskedView: 138134c4d8a9421b4f2bf39055a79aa05c2d47b1 + RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495 + RNCMaskedView: fc29d354a40316a990e8fb46391f08aea829c3aa RNCPicker: 6780c753e9e674065db90d9c965920516402579d RNFBAnalytics: 2dc4dd9e2445faffca041b10447a23a71dcdabf8 RNFBApp: 7eacc7da7ab19f96c05e434017d44a9f09410da8 RNFBCrashlytics: 4870c14cf8833053b6b5648911abefe1923854d2 RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b - RNPermissions: eb94f9fdc0a8ecd02fcce0676d56ffb1395d41e1 + RNPermissions: 4c8a37b4dde50f1f152bf8cd08c4a43d2355829e RNReanimated: b8c8004b43446e3c2709fe64b2b41072f87428ad RNScreens: e8e8dd0588b5da0ab57dcca76ab9b2d8987757e0 RNSVG: ce9d996113475209013317e48b05c21ee988d42e - urbanairship-react-native: d415a12e67ba93bf3ce914df9a310b66a88a5cc3 + urbanairship-react-native: a05a913d6f9559141d477ff4d380bcd616b5c59d Yoga: a7de31c64fe738607e7a3803e3f591a4b1df7393 YogaKit: f782866e155069a2cca2517aafea43200b01fd5a diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js index c6cfda19e413e..f9c55efe1675c 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -3,6 +3,7 @@ import {View, TouchableOpacity} from 'react-native-web'; import Collapse from 'react-collapse'; import Text from '../Text'; import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; +import styles from '../../styles/styles'; class CollapsibleSection extends React.Component { constructor(props) { @@ -24,8 +25,8 @@ class CollapsibleSection extends React.Component { render() { return ( - - + + {this.props.title} diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js index 6012f83564e0b..a67a758b6f209 100644 --- a/src/components/CollapsibleSection/index.native.js +++ b/src/components/CollapsibleSection/index.native.js @@ -3,6 +3,7 @@ import {View, TouchableOpacity, StyleSheet} from 'react-native'; import Collapsible from 'react-native-collapsible'; import Text from '../Text'; import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; +import styles from '../../styles/styles'; class CollapsibleSection extends React.Component { constructor(props) { @@ -22,14 +23,14 @@ class CollapsibleSection extends React.Component { render() { return ( - - - - {this.props.title} + + + + {this.props.title} - + {this.props.children} @@ -38,7 +39,7 @@ class CollapsibleSection extends React.Component { } } -const styles = StyleSheet.create({ +const styles2 = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index e98651c813027..1a948f1ab046e 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -6,31 +6,31 @@ import CollapsibleSection from '../../../components/CollapsibleSection'; const LongTermsForm = () => ( - + A list of all Expensify Payments Account fees: - - - + + + Type of Fee - + Fee Amount - + More Details - - + + Opening an Account - + $0 - - There is no monthly usage fee. + + There is no fee to create an account. diff --git a/src/styles/styles.js b/src/styles/styles.js index 149acee40e3a8..3a5e473f17fc9 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1750,6 +1750,15 @@ const styles = { borderTopWidth: 3, borderTopColor: themeColors.shadow, }, + + termsTableItem: { + textAlign: 'center', + }, + + termsSection: { + borderBottomWidth: 4, + borderBottomColor: themeColors.border, + }, }; const baseCodeTagStyles = { diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js index 2b881bcca510e..61784692d539b 100644 --- a/src/styles/utilities/spacing.js +++ b/src/styles/utilities/spacing.js @@ -225,10 +225,18 @@ export default { paddingRight: 32, }, + pl4: { + paddingLeft: 16, + }, + pl5: { paddingLeft: 20, }, + pt1: { + paddingTop: 4, + }, + pt2: { paddingTop: 8, }, @@ -253,6 +261,10 @@ export default { paddingBottom: 12, }, + pb4: { + paddingBottom: 16, + }, + pb5: { paddingBottom: 20, }, From 51b8def5f02560f55072f4d9142e7a9dce4eed75 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Fri, 9 Jul 2021 21:56:07 -0700 Subject: [PATCH 18/52] get mobile collapsible component styles added --- src/components/CollapsibleSection/index.js | 2 +- src/components/CollapsibleSection/index.native.js | 12 +++++------- src/pages/EnablePayments/TermsPage/LongTermsForm.js | 5 +++-- src/styles/styles.js | 1 + 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js index f9c55efe1675c..464808536448c 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -26,7 +26,7 @@ class CollapsibleSection extends React.Component { render() { return ( - + {this.props.title} diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js index a67a758b6f209..75600947cab92 100644 --- a/src/components/CollapsibleSection/index.native.js +++ b/src/components/CollapsibleSection/index.native.js @@ -23,14 +23,12 @@ class CollapsibleSection extends React.Component { render() { return ( - - - - {this.props.title} - + + + {this.props.title} - - + + {this.props.children} diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index 1a948f1ab046e..6d58e60985139 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -6,9 +6,10 @@ import CollapsibleSection from '../../../components/CollapsibleSection'; const LongTermsForm = () => ( - + A list of all Expensify Payments Account fees: + @@ -22,7 +23,7 @@ const LongTermsForm = () => ( More Details - + Opening an Account diff --git a/src/styles/styles.js b/src/styles/styles.js index 3a5e473f17fc9..e3b2494bb81bb 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1753,6 +1753,7 @@ const styles = { termsTableItem: { textAlign: 'center', + alignItems: 'center', }, termsSection: { From 3fd1513c9a31166105305fde3a6ebe21f22fd0ab Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Mon, 12 Jul 2021 19:33:06 -0700 Subject: [PATCH 19/52] add termsData and map function --- .../EnablePayments/TermsPage/LongTermsForm.js | 64 +++++++++++-------- 1 file changed, 39 insertions(+), 25 deletions(-) diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index 6d58e60985139..859f261604ea7 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -4,37 +4,51 @@ import styles from '../../../styles/styles'; import Text from '../../../components/Text'; import CollapsibleSection from '../../../components/CollapsibleSection'; +const termsData = [ + { + key: 'OpeningAccountLongTerms', + sectionTitle: 'Opening An Account', + typeOfFee: 'Opening An Account', + feeAmount: '$0', + moreDetails: 'There is no fee to create an account.', + }, +]; + +const getTermsSection = () => termsData.map(data => ( + + + + Type of Fee + + + Fee Amount + + + More Details + + + + + {data.typeOfFee} + + + {data.feeAmount} + + + {data.moreDetails} + + + +)); + const LongTermsForm = () => ( A list of all Expensify Payments Account fees: - + - - - - Type of Fee - - - Fee Amount - - - More Details - - - - - Opening an Account - - - $0 - - - There is no fee to create an account. - - - + {getTermsSection()} ); From c10e872ed0b560cbbe650e8d4e89735c5c16779a Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Mon, 12 Jul 2021 20:14:45 -0700 Subject: [PATCH 20/52] add all long form content and en.js translations --- src/components/CollapsibleSection/index.js | 2 +- .../CollapsibleSection/index.native.js | 2 +- src/languages/en.js | 27 +++++ .../EnablePayments/TermsPage/LongTermsForm.js | 101 ++++++++++++------ 4 files changed, 100 insertions(+), 32 deletions(-) diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js index 464808536448c..9e54f001ce30b 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -25,7 +25,7 @@ class CollapsibleSection extends React.Component { render() { return ( - + {this.props.title} diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js index 75600947cab92..c31e46b67dfe0 100644 --- a/src/components/CollapsibleSection/index.native.js +++ b/src/components/CollapsibleSection/index.native.js @@ -23,7 +23,7 @@ class CollapsibleSection extends React.Component { render() { return ( - + {this.props.title} diff --git a/src/languages/en.js b/src/languages/en.js index 538bb326b0ff1..daccbf633ff42 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -364,6 +364,33 @@ export default { walletAgreement: 'Wallet Agreement', enablePayments: 'Enable Payments', termsMustBeAccepted: 'Terms must be accepted', + longTermsForm: { + typeOfFeeHeader: 'Type of Fee', + feeAmountHeader: 'Fee Amount', + moreDetailsHeader: 'More Details', + openingAccountTitle: 'Opening An Account', + feeAmountZero: '$0', + openingAccountDetails: 'There is no fee to create an account.', + monthlyFeeTitle: 'Monthly Fee', + monthlyFeeDetails: 'There is no monthly fee', + customerServiceAutomatedTitle: 'Customer service (automated)', + customerServiceLiveTitle: 'Customer service (live agent)', + customerServiceDetails: 'There are no customer service fees.', + inactivityTitle: 'Inactivity', + 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.', + electronicFundsStandardTitle: 'Electronic funds withdrawal (standard)', + 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.', + electronicFundsInstantTitle: 'Electronic funds withdrawal (instant)', + electronicFundsInstantFee: '1.5% (min. of $0.25)', + 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).', + }, }, activateStep: { headerTitle: 'Enable Payments', diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index 859f261604ea7..e8f51f55c67c6 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -3,42 +3,86 @@ import {View} from 'react-native'; import styles from '../../../styles/styles'; import Text from '../../../components/Text'; import CollapsibleSection from '../../../components/CollapsibleSection'; +import {translateLocal} from '../../../libs/translate'; const termsData = [ { - key: 'OpeningAccountLongTerms', - sectionTitle: 'Opening An Account', - typeOfFee: 'Opening An Account', - feeAmount: '$0', - moreDetails: 'There is no fee to create an account.', + sectionTitle: translateLocal('termsStep.longTermsForm.openingAccountTitle'), + typeOfFee: translateLocal('termsStep.longTermsForm.openingAccountTitle'), + feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + moreDetails: translateLocal('termsStep.longTermsForm.openingAccountDetails'), + }, + { + sectionTitle: translateLocal('termsStep.longTermsForm.monthlyFeeTitle'), + typeOfFee: translateLocal('termsStep.longTermsForm.monthlyFeeTitle'), + feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + moreDetails: translateLocal('termsStep.longTermsForm.monthlyFeeDetails'), + }, + { + sectionTitle: translateLocal('termsStep.longTermsForm.customerServiceAutomatedTitle'), + typeOfFee: translateLocal('termsStep.longTermsForm.customerServiceAutomatedTitle'), + feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + moreDetails: translateLocal('termsStep.longTermsForm.customerServiceDetails'), + }, + { + sectionTitle: translateLocal('termsStep.longTermsForm.customerServiceLiveTitle'), + typeOfFee: translateLocal('termsStep.longTermsForm.customerServiceLiveTitle'), + feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + moreDetails: translateLocal('termsStep.longTermsForm.customerServiceDetails'), + }, + { + sectionTitle: translateLocal('termsStep.longTermsForm.inactivityTitle'), + typeOfFee: translateLocal('termsStep.longTermsForm.inactivityTitle'), + feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + moreDetails: translateLocal('termsStep.longTermsForm.inactivityDetails'), + }, + { + sectionTitle: translateLocal('termsStep.longTermsForm.sendingFundsTitle'), + typeOfFee: translateLocal('termsStep.longTermsForm.sendingFundsTitle'), + feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + moreDetails: translateLocal('termsStep.longTermsForm.sendingFundsDetails'), + }, + { + sectionTitle: translateLocal('termsStep.longTermsForm.electronicFundsStandardTitle'), + typeOfFee: translateLocal('termsStep.longTermsForm.electronicFundsStandardTitle'), + feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + moreDetails: translateLocal('termsStep.longTermsForm.electronicFundsStandardDetails'), + }, + { + sectionTitle: translateLocal('termsStep.longTermsForm.electronicFundsInstantTitle'), + typeOfFee: translateLocal('termsStep.longTermsForm.electronicFundsInstantTitle'), + feeAmount: translateLocal('termsStep.longTermsForm.electronicFundsInstantFee'), + moreDetails: translateLocal('termsStep.longTermsForm.electronicFundsInstantDetails'), }, ]; const getTermsSection = () => termsData.map(data => ( - - - - Type of Fee - - - Fee Amount - - - More Details + + + + + {translateLocal('termsStep.longTermsForm.typeOfFeeHeader')} + + + {translateLocal('termsStep.longTermsForm.feeAmountHeader')} + + + {translateLocal('termsStep.longTermsForm.moreDetailsHeader')} + - - - - {data.typeOfFee} - - - {data.feeAmount} - - - {data.moreDetails} + + + {data.typeOfFee} + + + {data.feeAmount} + + + {data.moreDetails} + - + )); const LongTermsForm = () => ( @@ -47,12 +91,9 @@ const LongTermsForm = () => ( A list of all Expensify Payments Account fees: - - {getTermsSection()} - + {getTermsSection()} ); LongTermsForm.displayName = 'LongTermsForm'; - export default LongTermsForm; From 3c19afda6f3e4592e5482228d82ef4f17c571141 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Mon, 12 Jul 2021 20:23:18 -0700 Subject: [PATCH 21/52] update long form spanish translations --- src/languages/es.js | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/src/languages/es.js b/src/languages/es.js index 22db7566f107e..ae6634997b189 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -393,6 +393,48 @@ export default { welcomeNote: ({workspaceName}) => `¡Has sido invitado a la ${workspaceName} Espacio de trabajo! Descargue la aplicación móvil Expensify para comenzar a rastrear sus gastos.`, }, }, + termsStep: { + headerTitle: 'Términos y tarifas', + haveReadAndAgree: 'He leído y acepto recibir', + electronicDisclosures: 'divulgaciones electrónicas', + agreeToThe: 'Estoy de acuerdo con', + walletAgreement: 'Acuerdo de billetera', + enablePayments: 'Habilitar pagos', + termsMustBeAccepted: 'Se deben aceptar los términos', + longTermsForm: { + typeOfFeeHeader: 'Tipo de tarifa', + feeAmountHeader: 'Importe de la tarifa', + moreDetailsHeader: 'Más detalles', + openingAccountTitle: 'Abrir una cuenta', + feeAmountZero: '$0', + openingAccountDetails: 'No hay tarifa para crear una cuenta.', + monthlyFeeTitle: 'Cuota mensual', + monthlyFeeDetails: 'No hay tarifa mensual', + customerServiceAutomatedTitle: 'Servicio al cliente (automatizado)', + customerServiceLiveTitle: 'Servicio al cliente (agente en vivo)', + customerServiceDetails: 'No hay tarifas de servicio al cliente.', + inactivityTitle: 'Inactividad', + 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', + electronicFundsStandardTitle: 'Retiro electrónico de fondos (estándar)', + 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.', + electronicFundsInstantTitle: 'Retiro electrónico de fondos (instantáneo)', + electronicFundsInstantFee: '1.5% (mínimo de $ 0.25)', + 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). ', + }, + }, + activateStep: { + headerTitle: 'Habilitar pagos', + activated: 'Su billetera Expensify está lista para usar', + checkBackLater: 'Todavía estamos revisando su información. Por favor, vuelva más tarde.', + }, companyStep: { headerTitle: 'Información de la Empresa', subtitle: 'Dé más información sobre su empresa.', From 6fbe0cb9c70c989e695ea3b0a05e2784e431f53a Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Mon, 12 Jul 2021 20:25:02 -0700 Subject: [PATCH 22/52] add listOfAllFees translation --- src/languages/en.js | 1 + src/languages/es.js | 1 + src/pages/EnablePayments/TermsPage/LongTermsForm.js | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/languages/en.js b/src/languages/en.js index daccbf633ff42..6b5d69cb05eb8 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -365,6 +365,7 @@ export default { enablePayments: 'Enable Payments', termsMustBeAccepted: 'Terms must be accepted', longTermsForm: { + listOfAllFees: 'A list of all Expensify Payments Account fees:', typeOfFeeHeader: 'Type of Fee', feeAmountHeader: 'Fee Amount', moreDetailsHeader: 'More Details', diff --git a/src/languages/es.js b/src/languages/es.js index ae6634997b189..d0b0fe1353a99 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -402,6 +402,7 @@ export default { enablePayments: 'Habilitar pagos', termsMustBeAccepted: 'Se deben aceptar los términos', longTermsForm: { + listOfAllFees: 'Una lista de todas las tarifas de la cuenta Expensify Payments:', typeOfFeeHeader: 'Tipo de tarifa', feeAmountHeader: 'Importe de la tarifa', moreDetailsHeader: 'Más detalles', diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index e8f51f55c67c6..d2e181cdbe865 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -88,7 +88,7 @@ const getTermsSection = () => termsData.map(data => ( const LongTermsForm = () => ( - A list of all Expensify Payments Account fees: + {translateLocal('termsStep.longTermsForm.listOfAllFees')} {getTermsSection()} From 13a8a1f9c0bada741dee2dafdb782ddfd945efbd Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Mon, 12 Jul 2021 21:05:34 -0700 Subject: [PATCH 23/52] translate short form --- src/languages/en.js | 29 ++++++- src/languages/es.js | 29 ++++++- .../EnablePayments/TermsPage/LongTermsForm.js | 24 +++--- .../TermsPage/ShortTermsForm.js | 75 ++++++++++++------- src/pages/EnablePayments/TermsStep.js | 2 +- 5 files changed, 109 insertions(+), 50 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index 6b5d69cb05eb8..5414ee5d14283 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -55,6 +55,7 @@ export default { dateFormat: 'YYYY-MM-DD', send: 'Send', notifications: 'Notifications', + na: 'N/A', }, attachmentPicker: { cameraPermissionRequired: 'Camera Permission Required', @@ -364,20 +365,41 @@ export default { walletAgreement: 'Wallet Agreement', enablePayments: 'Enable Payments', termsMustBeAccepted: 'Terms must be accepted', + feeAmountZero: '$0', + monthlyFee: 'Monthly Fee', + inactivity: 'Inactivity', + electronicFundsInstantFee: '1.5% (min. of $0.25)', + shortTermsForm: { + 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.', + electronicFundsWithdrawal: 'Electronic Funds Withdrawal', + instant: '(instant)', + noOverdraftOrCredit: 'No overdraft/credit feature.', + fdicInsurance: 'Your funds are elligible for FDIC insurance.', + generalInfo: 'For general information about prepaid accoutns, visit', + conditionsDetails: 'Find details and conditions for all fees and services by visiting', + conditionsPhone: 'or calling +1 833-400-0904', + }, longTermsForm: { listOfAllFees: 'A list of all Expensify Payments Account fees:', typeOfFeeHeader: 'Type of Fee', feeAmountHeader: 'Fee Amount', moreDetailsHeader: 'More Details', openingAccountTitle: 'Opening An Account', - feeAmountZero: '$0', openingAccountDetails: 'There is no fee to create an account.', - monthlyFeeTitle: 'Monthly Fee', monthlyFeeDetails: 'There is no monthly fee', customerServiceAutomatedTitle: 'Customer service (automated)', customerServiceLiveTitle: 'Customer service (live agent)', customerServiceDetails: 'There are no customer service fees.', - inactivityTitle: 'Inactivity', 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, ' @@ -387,7 +409,6 @@ export default { + 'to your bank account using the standard option. This transfer usually completes within 1-3 business' + ' days.', electronicFundsInstantTitle: 'Electronic funds withdrawal (instant)', - electronicFundsInstantFee: '1.5% (min. of $0.25)', 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).', diff --git a/src/languages/es.js b/src/languages/es.js index d0b0fe1353a99..b10293fb8a3ec 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -51,6 +51,7 @@ export default { dateFormat: 'AAAA-MM-DD', send: 'Enviar', notifications: 'Notificaciones', + na: 'N/A', }, attachmentPicker: { cameraPermissionRequired: 'Se necesita permiso para usar la cámara', @@ -401,20 +402,41 @@ 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% (mínimo de $ 0.25)', + shortTermsForm: { + perPurchase: 'Por compra', + atmWithdrawal: 'Retiro de cajero automático', + cashReload: 'Cash Reload', + 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.', + electronicFundsWithdrawal: 'Retiro electrónico de fondos', + instant: '(instantáneo)', + noOverdraftOrCredit: 'Sin función de sobregiro / crédito', + 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: 'Una lista de 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', - feeAmountZero: '$0', openingAccountDetails: 'No hay tarifa para crear una cuenta.', - monthlyFeeTitle: 'Cuota mensual', monthlyFeeDetails: 'No hay tarifa mensual', customerServiceAutomatedTitle: 'Servicio al cliente (automatizado)', customerServiceLiveTitle: 'Servicio al cliente (agente en vivo)', customerServiceDetails: 'No hay tarifas de servicio al cliente.', - inactivityTitle: 'Inactividad', 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 ' @@ -424,7 +446,6 @@ export default { + 'a su cuenta bancaria utilizando la opción estándar. Esta transferencia generalmente se completa en' + '1-3 negocios días.', electronicFundsInstantTitle: 'Retiro electrónico de fondos (instantáneo)', - electronicFundsInstantFee: '1.5% (mínimo de $ 0.25)', 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 ' diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index d2e181cdbe865..a48d48b7f2b06 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -9,49 +9,49 @@ const termsData = [ { sectionTitle: translateLocal('termsStep.longTermsForm.openingAccountTitle'), typeOfFee: translateLocal('termsStep.longTermsForm.openingAccountTitle'), - feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + feeAmount: translateLocal('termsStep.feeAmountZero'), moreDetails: translateLocal('termsStep.longTermsForm.openingAccountDetails'), }, { - sectionTitle: translateLocal('termsStep.longTermsForm.monthlyFeeTitle'), - typeOfFee: translateLocal('termsStep.longTermsForm.monthlyFeeTitle'), - feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + sectionTitle: translateLocal('termsStep.monthlyFee'), + typeOfFee: translateLocal('termsStep.monthlyFee'), + feeAmount: translateLocal('termsStep.feeAmountZero'), moreDetails: translateLocal('termsStep.longTermsForm.monthlyFeeDetails'), }, { sectionTitle: translateLocal('termsStep.longTermsForm.customerServiceAutomatedTitle'), typeOfFee: translateLocal('termsStep.longTermsForm.customerServiceAutomatedTitle'), - feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + feeAmount: translateLocal('termsStep.feeAmountZero'), moreDetails: translateLocal('termsStep.longTermsForm.customerServiceDetails'), }, { sectionTitle: translateLocal('termsStep.longTermsForm.customerServiceLiveTitle'), typeOfFee: translateLocal('termsStep.longTermsForm.customerServiceLiveTitle'), - feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + feeAmount: translateLocal('termsStep.feeAmountZero'), moreDetails: translateLocal('termsStep.longTermsForm.customerServiceDetails'), }, { - sectionTitle: translateLocal('termsStep.longTermsForm.inactivityTitle'), - typeOfFee: translateLocal('termsStep.longTermsForm.inactivityTitle'), - feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + sectionTitle: translateLocal('termsStep.inactivity'), + typeOfFee: translateLocal('termsStep.inactivity'), + feeAmount: translateLocal('termsStep.feeAmountZero'), moreDetails: translateLocal('termsStep.longTermsForm.inactivityDetails'), }, { sectionTitle: translateLocal('termsStep.longTermsForm.sendingFundsTitle'), typeOfFee: translateLocal('termsStep.longTermsForm.sendingFundsTitle'), - feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + feeAmount: translateLocal('termsStep.feeAmountZero'), moreDetails: translateLocal('termsStep.longTermsForm.sendingFundsDetails'), }, { sectionTitle: translateLocal('termsStep.longTermsForm.electronicFundsStandardTitle'), typeOfFee: translateLocal('termsStep.longTermsForm.electronicFundsStandardTitle'), - feeAmount: translateLocal('termsStep.longTermsForm.feeAmountZero'), + feeAmount: translateLocal('termsStep.feeAmountZero'), moreDetails: translateLocal('termsStep.longTermsForm.electronicFundsStandardDetails'), }, { sectionTitle: translateLocal('termsStep.longTermsForm.electronicFundsInstantTitle'), typeOfFee: translateLocal('termsStep.longTermsForm.electronicFundsInstantTitle'), - feeAmount: translateLocal('termsStep.longTermsForm.electronicFundsInstantFee'), + feeAmount: translateLocal('termsStep.electronicFundsInstantFee'), moreDetails: translateLocal('termsStep.longTermsForm.electronicFundsInstantDetails'), }, ]; diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 5e66fa11dc6f9..288e5b9196a85 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -3,94 +3,111 @@ import {View} from 'react-native'; import styles from '../../../styles/styles'; import Text from '../../../components/Text'; import TextLink from '../../../components/TextLink'; +import {translateLocal} from '../../../libs/translate'; const ShortTermsForm = () => ( <> - Monthly Fee + {translateLocal('termsStep.monthlyFee')} - Per Purchase + {translateLocal('termsStep.shortTermsForm.perPurchase')} - ATM Withdrawal + {translateLocal('termsStep.shortTermsForm.atmWithdrawal')} - Cash Reload + {translateLocal('termsStep.shortTermsForm.cashReload')} - $0 + {translateLocal('termsStep.feeAmountZero')} - $0 + {translateLocal('termsStep.feeAmountZero')} - N/A - in-network + {translateLocal('common.na')} + + {translateLocal('termsStep.shortTermsForm.inNetwork')} + - N/A - out-of-network + {translateLocal('common.na')} + + {translateLocal('termsStep.shortTermsForm.outOfNetwork')} + - N/A + {translateLocal('common.na')} - ATM balance inquiry - (in-network or out-of-network) + {translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} + + {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} + - N/A + {translateLocal('common.na')} - Customer Service - (automated or live agent) + {translateLocal('termsStep.shortTermsForm.customerService')} + + {translateLocal('termsStep.shortTermsForm.automatedOrLive')} + - $0 + {translateLocal('termsStep.feeAmountZero')} - Inactivity - (after 12 months with no transactions) + {translateLocal('termsStep.inactivity')} + + {translateLocal('termsStep.shortTermsForm.afterTwelveMonths')} + - $0 + {translateLocal('termsStep.feeAmountZero')} - We charge 1 type of fee. + + {translateLocal('termsStep.shortTermsForm.weChargeOneFee')} + - Electronic Funds withdrawal - (instant) + {translateLocal('termsStep.shortTermsForm.electronicFundsWithdrawal')} + {translateLocal('termsStep.shortTermsForm.instant')} - 1.5% (min. $0.25) + {translateLocal('termsStep.electronicFundsInstantFee')} - No overdraft/credit feature. - Your funds are elligible for FDIC insurance. + + {translateLocal('termsStep.shortTermsForm.noOverdraftOrCredit')} + + + {translateLocal('termsStep.shortTermsForm.fdicInsurance')} + - For general information about prepaid accounts, visit + {translateLocal('termsStep.shortTermsForm.generalInfo')} {' '} cfpb.gov/prepaid @@ -98,13 +115,13 @@ const ShortTermsForm = () => ( . - Find details and conditions for all fees and services by visiting + {translateLocal('termsStep.shortTermsForm.conditionsDetails')} {' '} use.expensify.com/fees {' '} - or calling +1 833-400-0904. + {translateLocal('termsStep.shortTermsForm.conditionsPhone')} diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js index 032712138be28..46c1c1a8665a2 100644 --- a/src/pages/EnablePayments/TermsStep.js +++ b/src/pages/EnablePayments/TermsStep.js @@ -66,7 +66,7 @@ class TermsStep extends React.Component { onCloseButtonPress={() => Navigation.dismissModal()} /> - + From 067ca47b25b9d03a749a3c17737d58120ff7c537 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Mon, 12 Jul 2021 21:38:42 -0700 Subject: [PATCH 24/52] show open and close arrow for sections --- src/components/CollapsibleSection/index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js index 9e54f001ce30b..0adf0adf1691a 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -4,6 +4,8 @@ import Collapse from 'react-collapse'; import Text from '../Text'; import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; import styles from '../../styles/styles'; +import Icon from '../Icon'; +import {Close, DownArrow} from '../Icon/Expensicons'; class CollapsibleSection extends React.Component { constructor(props) { @@ -24,10 +26,15 @@ class CollapsibleSection extends React.Component { } render() { + const src = this.state.isExpanded ? Close : DownArrow; + return ( - - {this.props.title} + + {this.props.title} + + + From f4a98e9067bb54bcf9f3e89fcc070ce969c051f3 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Mon, 12 Jul 2021 21:45:09 -0700 Subject: [PATCH 25/52] style mobile collapsibles --- src/components/CollapsibleSection/index.js | 1 + .../CollapsibleSection/index.native.js | 39 ++++++------------- 2 files changed, 12 insertions(+), 28 deletions(-) diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js index 0adf0adf1691a..b98e076556eef 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -26,6 +26,7 @@ class CollapsibleSection extends React.Component { } render() { + // TODO: Get an UpArrow SVG const src = this.state.isExpanded ? Close : DownArrow; return ( diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js index c31e46b67dfe0..37058083ea6ea 100644 --- a/src/components/CollapsibleSection/index.native.js +++ b/src/components/CollapsibleSection/index.native.js @@ -4,6 +4,9 @@ import Collapsible from 'react-native-collapsible'; import Text from '../Text'; import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; import styles from '../../styles/styles'; +import Icon from '../Icon'; +import {Close, DownArrow} from '../Icon/Expensicons'; + class CollapsibleSection extends React.Component { constructor(props) { @@ -22,10 +25,16 @@ class CollapsibleSection extends React.Component { }; render() { + // TODO: Get an UpArrow SVG + const src = this.state.isExpanded ? Close : DownArrow; + return ( - - {this.props.title} + + {this.props.title} + + + @@ -37,32 +46,6 @@ class CollapsibleSection extends React.Component { } } -const styles2 = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#F5FCFF', - paddingTop: 10, - }, - title: { - textAlign: 'center', - fontSize: 22, - fontWeight: '300', - marginBottom: 20, - }, - header: { - backgroundColor: '#F5FCFF', - padding: 10, - }, - headerText: { - textAlign: 'center', - fontSize: 16, - fontWeight: '500', - }, - content: { - backgroundColor: '#fff', - }, -}); - CollapsibleSection.propTypes = propTypes; CollapsibleSection.defaultProps = defaultProps; export default CollapsibleSection; From 256bbfb08d78380c1ca8c57bf50a7876f54993ee Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Mon, 12 Jul 2021 22:22:29 -0700 Subject: [PATCH 26/52] remove duplicated code --- .../CollapsibleSection/Collapsible/index.js | 3 ++ .../Collapsible/index.native.js | 26 ++++++++++ src/components/CollapsibleSection/index.js | 8 +-- .../CollapsibleSection/index.native.js | 51 ------------------- 4 files changed, 33 insertions(+), 55 deletions(-) create mode 100644 src/components/CollapsibleSection/Collapsible/index.js create mode 100644 src/components/CollapsibleSection/Collapsible/index.native.js delete mode 100644 src/components/CollapsibleSection/index.native.js diff --git a/src/components/CollapsibleSection/Collapsible/index.js b/src/components/CollapsibleSection/Collapsible/index.js new file mode 100644 index 0000000000000..70c13f3040242 --- /dev/null +++ b/src/components/CollapsibleSection/Collapsible/index.js @@ -0,0 +1,3 @@ +import Collapse from 'react-collapse'; + +export default Collapse; diff --git a/src/components/CollapsibleSection/Collapsible/index.native.js b/src/components/CollapsibleSection/Collapsible/index.native.js new file mode 100644 index 0000000000000..8624a8829f692 --- /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/index.js b/src/components/CollapsibleSection/index.js index b98e076556eef..50ecc24893db0 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -1,6 +1,6 @@ import React from 'react'; -import {View, TouchableOpacity} from 'react-native-web'; -import Collapse from 'react-collapse'; +import {View, TouchableOpacity} from 'react-native'; +import Collapsible from './Collapsible'; import Text from '../Text'; import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; import styles from '../../styles/styles'; @@ -38,11 +38,11 @@ class CollapsibleSection extends React.Component { - + {this.props.children} - + ); } diff --git a/src/components/CollapsibleSection/index.native.js b/src/components/CollapsibleSection/index.native.js deleted file mode 100644 index 37058083ea6ea..0000000000000 --- a/src/components/CollapsibleSection/index.native.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import {View, TouchableOpacity, StyleSheet} from 'react-native'; -import Collapsible from 'react-native-collapsible'; -import Text from '../Text'; -import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; -import styles from '../../styles/styles'; -import Icon from '../Icon'; -import {Close, DownArrow} from '../Icon/Expensicons'; - - -class CollapsibleSection extends React.Component { - constructor(props) { - super(props); - this.toggleExpanded = this.toggleExpanded.bind(this); - this.state = { - isExpanded: this.props.isExpanded, - } - } - - /** - * Expands/collapses the section - */ - toggleExpanded() { - this.setState({isExpanded: !this.state.isExpanded}); - }; - - render() { - // TODO: Get an UpArrow SVG - const src = this.state.isExpanded ? Close : DownArrow; - - return ( - - - {this.props.title} - - - - - - - {this.props.children} - - - - ); - } -} - -CollapsibleSection.propTypes = propTypes; -CollapsibleSection.defaultProps = defaultProps; -export default CollapsibleSection; From 70666466991f839c0088dd8661970ffb5748a3d5 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Mon, 12 Jul 2021 22:27:25 -0700 Subject: [PATCH 27/52] use same name --- src/components/CollapsibleSection/Collapsible/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CollapsibleSection/Collapsible/index.js b/src/components/CollapsibleSection/Collapsible/index.js index 70c13f3040242..51d650ed57484 100644 --- a/src/components/CollapsibleSection/Collapsible/index.js +++ b/src/components/CollapsibleSection/Collapsible/index.js @@ -1,3 +1,3 @@ -import Collapse from 'react-collapse'; +import Collapsible from 'react-collapse'; -export default Collapse; +export default Collapsible; From 1e1249839f4e7db72c98c9776db2cba5caa85fa4 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Tue, 13 Jul 2021 20:41:02 -0700 Subject: [PATCH 28/52] remove unnecessary view --- .../EnablePayments/TermsPage/LongTermsForm.js | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index a48d48b7f2b06..c213a11f595f6 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -58,28 +58,26 @@ const termsData = [ const getTermsSection = () => termsData.map(data => ( - - - - {translateLocal('termsStep.longTermsForm.typeOfFeeHeader')} - - - {translateLocal('termsStep.longTermsForm.feeAmountHeader')} - - - {translateLocal('termsStep.longTermsForm.moreDetailsHeader')} - + + + {translateLocal('termsStep.longTermsForm.typeOfFeeHeader')} - - - {data.typeOfFee} - - - {data.feeAmount} - - - {data.moreDetails} - + + {translateLocal('termsStep.longTermsForm.feeAmountHeader')} + + + {translateLocal('termsStep.longTermsForm.moreDetailsHeader')} + + + + + {data.typeOfFee} + + + {data.feeAmount} + + + {data.moreDetails} From 19a81a357eb742ca5b5c8ccf8a92a6620aa00a3c Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Wed, 14 Jul 2021 22:00:27 -0700 Subject: [PATCH 29/52] add more information section --- src/languages/en.js | 18 ++++-- src/languages/es.js | 14 +++- .../EnablePayments/TermsPage/LongTermsForm.js | 64 +++++++++++++++++-- .../TermsPage/ShortTermsForm.js | 2 +- src/styles/utilities/spacing.js | 4 ++ 5 files changed, 88 insertions(+), 14 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index f769f9c35b635..4783e00e2d49a 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -403,6 +403,7 @@ export default { monthlyFee: 'Monthly Fee', inactivity: 'Inactivity', electronicFundsInstantFee: '1.5% (min. of $0.25)', + noOverdraftOrCredit: 'No overdraft/credit feature.', shortTermsForm: { perPurchase: 'Per Purchase', atmWithdrawal: 'ATM Withdrawal', @@ -417,11 +418,10 @@ export default { weChargeOneFee: 'We charge 1 type of fee.', electronicFundsWithdrawal: 'Electronic Funds Withdrawal', instant: '(instant)', - noOverdraftOrCredit: 'No overdraft/credit feature.', - fdicInsurance: 'Your funds are elligible for FDIC insurance.', - generalInfo: 'For general information about prepaid accoutns, visit', + 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', + conditionsPhone: 'or calling +1 833-400-0904.', }, longTermsForm: { listOfAllFees: 'A list of all Expensify Payments Account fees:', @@ -446,6 +446,16 @@ export default { 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: 'Printer Friendly View', }, }, activateStep: { diff --git a/src/languages/es.js b/src/languages/es.js index bcde235ba5bee..f98af71be2fe6 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -427,6 +427,7 @@ export default { monthlyFee: 'Cuota mensual', inactivity: 'Inactividad', electronicFundsInstantFee: '1.5% (mínimo de $ 0.25)', + noOverdraftOrCredit: 'Sin función de sobregiro / crédito', shortTermsForm: { perPurchase: 'Por compra', atmWithdrawal: 'Retiro de cajero automático', @@ -441,11 +442,10 @@ export default { weChargeOneFee: 'Cobramos 1 tipo de tarifa.', electronicFundsWithdrawal: 'Retiro electrónico de fondos', instant: '(instantáneo)', - noOverdraftOrCredit: 'Sin función de sobregiro / crédito', 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', + conditionsPhone: 'o llamando al +1 833-400-0904.', }, longTermsForm: { listOfAllFees: 'Una lista de todas las tarifas de la cuenta Expensify Payments:', @@ -471,6 +471,16 @@ export default { + '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: '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: 'Printer Friendly View', }, }, activateStep: { diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index c213a11f595f6..27f9382cd091f 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -4,6 +4,8 @@ import styles from '../../../styles/styles'; import Text from '../../../components/Text'; import CollapsibleSection from '../../../components/CollapsibleSection'; import {translateLocal} from '../../../libs/translate'; +import TextLink from '../../../components/TextLink'; +import CONST from '../../../CONST'; const termsData = [ { @@ -84,13 +86,61 @@ const getTermsSection = () => termsData.map(data => ( )); const LongTermsForm = () => ( - - - {translateLocal('termsStep.longTermsForm.listOfAllFees')} - - - {getTermsSection()} - + <> + + + {translateLocal('termsStep.longTermsForm.listOfAllFees')} + + + {getTermsSection()} + + + + + {translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp')} + {' '} + + fdic.gov/deposit/deposits/prepaid.html + + {' '} + {translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp2')} + + + {translateLocal('termsStep.noOverdraftOrCredit')} + + + {translateLocal('termsStep.longTermsForm.contactExpensifyPayments')} + {' '} + + {CONST.EMAIL.CONCIERGE} + + {' '} + {translateLocal('termsStep.longTermsForm.contactExpensifyPayments2')} + {' '} + + new.expensify.com + + . + + + {translateLocal('termsStep.longTermsForm.generalInformation')} + {' '} + + cfpb.gov/prepaid + + {' '} + {translateLocal('termsStep.longTermsForm.generalInformation2')} + {' '} + + cfpb.gov/complaint. + + + + {translateLocal('termsStep.longTermsForm.printerFriendlyView')} + + + + ); LongTermsForm.displayName = 'LongTermsForm'; diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 288e5b9196a85..4d5f38de29449 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -101,7 +101,7 @@ const ShortTermsForm = () => ( - {translateLocal('termsStep.shortTermsForm.noOverdraftOrCredit')} + {translateLocal('termsStep.noOverdraftOrCredit')} {translateLocal('termsStep.shortTermsForm.fdicInsurance')} diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js index e8c76b16df919..54fd4b77dbc4a 100644 --- a/src/styles/utilities/spacing.js +++ b/src/styles/utilities/spacing.js @@ -229,6 +229,10 @@ export default { paddingRight: 8, }, + pr4: { + paddingRight: 16, + }, + pr5: { paddingRight: 20, }, From 796e964e2a4078db0f3214912e8c1e40737163e6 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Wed, 14 Jul 2021 22:04:05 -0700 Subject: [PATCH 30/52] translate to spanish --- src/languages/es.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/languages/es.js b/src/languages/es.js index f98af71be2fe6..5df9fde944ab9 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -471,16 +471,17 @@ export default { + '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: '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: 'Printer Friendly View', + 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: 'Vista fácil de imprimir', }, }, activateStep: { From 08bc872fe59ab1b9fa8b74df5657b8ee1c9d31d6 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Wed, 14 Jul 2021 22:14:51 -0700 Subject: [PATCH 31/52] lint --- .../CollapsibleSection/Collapsible/index.native.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/CollapsibleSection/Collapsible/index.native.js b/src/components/CollapsibleSection/Collapsible/index.native.js index 8624a8829f692..4963aee717983 100644 --- a/src/components/CollapsibleSection/Collapsible/index.native.js +++ b/src/components/CollapsibleSection/Collapsible/index.native.js @@ -1,5 +1,5 @@ import CollapsibleRN from 'react-native-collapsible'; -import PropTypes from "prop-types"; +import PropTypes from 'prop-types'; import React from 'react'; const propTypes = { @@ -8,13 +8,13 @@ const propTypes = { /** Children to display inside the Collapsible component */ children: PropTypes.node.isRequired, -} +}; const defaultProps = { isOpened: false, }; -const Collapsible = (props) => ( +const Collapsible = props => ( {props.children} From bf531fa68a983e77dbb4cafa3abad3b3ccf39cf4 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Tue, 27 Jul 2021 18:25:57 -0700 Subject: [PATCH 32/52] restyle short term row --- src/languages/en.js | 1 + src/languages/es.js | 1 + .../TermsPage/ShortTermsForm.js | 19 +++++++++++++++++++ src/styles/styles.js | 5 +++++ 4 files changed, 26 insertions(+) diff --git a/src/languages/en.js b/src/languages/en.js index 7d5aa08bef926..dd9ce707ca11f 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -421,6 +421,7 @@ export default { electronicFundsInstantFee: '1.5% (min. of $0.25)', noOverdraftOrCredit: 'No overdraft/credit feature.', shortTermsForm: { + expensifyPaymentsAccount: 'The Expensify Payments Account is issues by The Bancorp Bank.', perPurchase: 'Per Purchase', atmWithdrawal: 'ATM Withdrawal', cashReload: 'Cash Reload', diff --git a/src/languages/es.js b/src/languages/es.js index ad6ad954f5828..5c7ca83441c91 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -445,6 +445,7 @@ export default { electronicFundsInstantFee: '1.5% (mínimo de $ 0.25)', noOverdraftOrCredit: 'Sin función de sobregiro / crédito', shortTermsForm: { + expensifyPaymentsAccount: 'The Expensify Payments Account is issues by The Bancorp Bank.', perPurchase: 'Por compra', atmWithdrawal: 'Retiro de cajero automático', cashReload: 'Cash Reload', diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 4d5f38de29449..577821e5d2eb6 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -8,6 +8,25 @@ import {translateLocal} from '../../../libs/translate'; const ShortTermsForm = () => ( <> + + {translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')} + + + + + {translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} + + {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} + + + + + {translateLocal('common.na')} + + + + + {translateLocal('termsStep.monthlyFee')} diff --git a/src/styles/styles.js b/src/styles/styles.js index 86b10c1dcd8cc..b2b70d41d2969 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1861,6 +1861,11 @@ const styles = { borderTopWidth: 1, }, + termsCenterRight: { + margin: 'auto', + textAlign: 'right', + }, + termsRowBold: { borderTopWidth: 3, borderTopColor: themeColors.shadow, From d632cb43ee7570de273575f5325a19fb6aa8d2e8 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Tue, 27 Jul 2021 18:40:39 -0700 Subject: [PATCH 33/52] update spacing for row --- .../EnablePayments/TermsPage/ShortTermsForm.js | 16 +++++++++++++--- src/styles/styles.js | 7 ++++++- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 577821e5d2eb6..789686bd1fe2b 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -11,15 +11,25 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')} - - + + + + {translateLocal('termsStep.monthlyFee')} + + + + {translateLocal('termsStep.feeAmountZero')} + + + + {translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} - + {translateLocal('common.na')} diff --git a/src/styles/styles.js b/src/styles/styles.js index b2b70d41d2969..8999108bd6790 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1861,7 +1861,12 @@ const styles = { borderTopWidth: 1, }, - termsCenterRight: { + shortTermsRow: { + flexDirection: 'row', + padding: 12, + }, + + shortTermsCenterRight: { margin: 'auto', textAlign: 'right', }, From 2e4070c426a8a856c765f41d3419260d33d69e79 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Tue, 27 Jul 2021 19:18:09 -0700 Subject: [PATCH 34/52] fix remaining short terms --- src/languages/en.js | 11 +- src/languages/es.js | 11 +- .../TermsPage/ShortTermsForm.js | 239 +++++++++--------- src/styles/styles.js | 6 + 4 files changed, 131 insertions(+), 136 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index dd9ce707ca11f..3061b52bbcefd 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -418,23 +418,24 @@ export default { feeAmountZero: '$0', monthlyFee: 'Monthly Fee', inactivity: 'Inactivity', - electronicFundsInstantFee: '1.5% (min. of $0.25)', + electronicFundsInstantFee: '1.5%', + electronicFundsInstantFeeMin: 'Min $0.25', noOverdraftOrCredit: 'No overdraft/credit feature.', shortTermsForm: { expensifyPaymentsAccount: 'The Expensify Payments Account is issues by The Bancorp Bank.', perPurchase: 'Per Purchase', atmWithdrawal: 'ATM Withdrawal', cashReload: 'Cash Reload', - inNetwork: 'in-network', + 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)', + automatedOrLive: 'Automated or live agent', + afterTwelveMonths: 'After 12 months with no transactions', weChargeOneFee: 'We charge 1 type of fee.', electronicFundsWithdrawal: 'Electronic Funds Withdrawal', - instant: '(instant)', + instant: 'Instant', 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', diff --git a/src/languages/es.js b/src/languages/es.js index 5c7ca83441c91..2805ee08e7a0b 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -442,23 +442,24 @@ export default { feeAmountZero: '$0', monthlyFee: 'Cuota mensual', inactivity: 'Inactividad', - electronicFundsInstantFee: '1.5% (mínimo de $ 0.25)', + electronicFundsInstantFee: '1.5%', + electronicFundsInstantFeeMin: 'Min $0.25', noOverdraftOrCredit: 'Sin función de sobregiro / crédito', shortTermsForm: { expensifyPaymentsAccount: 'The Expensify Payments Account is issues by The Bancorp Bank.', perPurchase: 'Por compra', atmWithdrawal: 'Retiro de cajero automático', cashReload: 'Cash Reload', - inNetwork: 'en la red', + 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)', + automatedOrLive: 'Agente automatizado o en vivo', + afterTwelveMonths: 'Después de 12 meses sin transacciones', weChargeOneFee: 'Cobramos 1 tipo de tarifa.', electronicFundsWithdrawal: 'Retiro electrónico de fondos', - instant: '(instantáneo)', + instant: 'Instantáneo', 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', diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 789686bd1fe2b..31e6f5f28f979 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -7,152 +7,139 @@ import {translateLocal} from '../../../libs/translate'; const ShortTermsForm = () => ( <> - - - {translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')} - - - - - {translateLocal('termsStep.monthlyFee')} - - - - {translateLocal('termsStep.feeAmountZero')} - - - - - - {translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} - - {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} - - - - - {translateLocal('common.na')} - - - - - - - + + {translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')} + + + + {translateLocal('termsStep.monthlyFee')} - + + + {translateLocal('termsStep.feeAmountZero')} + + + + + {translateLocal('termsStep.shortTermsForm.perPurchase')} - + + + {translateLocal('termsStep.feeAmountZero')} + + + + + {translateLocal('termsStep.shortTermsForm.atmWithdrawal')} + + {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} + - + + + {translateLocal('common.na')} + + + + + {translateLocal('termsStep.shortTermsForm.cashReload')} + + + {translateLocal('common.na')} + + - - - {translateLocal('termsStep.feeAmountZero')} - - - {translateLocal('termsStep.feeAmountZero')} - - - - {translateLocal('common.na')} - - {translateLocal('termsStep.shortTermsForm.inNetwork')} - - - - {translateLocal('common.na')} - - {translateLocal('termsStep.shortTermsForm.outOfNetwork')} - - - - - {translateLocal('common.na')} + + + {translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} + + {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} + + + + + {translateLocal('common.na')} + - - - - - {translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} - - {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} - + + + {translateLocal('termsStep.shortTermsForm.customerService')} + + {translateLocal('termsStep.shortTermsForm.automatedOrLive')} + + + + + {translateLocal('termsStep.feeAmountZero')} + + - - {translateLocal('common.na')} + + + {translateLocal('termsStep.inactivity')} + + {translateLocal('termsStep.shortTermsForm.afterTwelveMonths')} + + + + + {translateLocal('termsStep.feeAmountZero')} + + - - - - {translateLocal('termsStep.shortTermsForm.customerService')} - - {translateLocal('termsStep.shortTermsForm.automatedOrLive')} + + + {translateLocal('termsStep.shortTermsForm.weChargeOneFee')} - - {translateLocal('termsStep.feeAmountZero')} + + + {translateLocal('termsStep.shortTermsForm.electronicFundsWithdrawal')} + + {translateLocal('termsStep.shortTermsForm.instant')} + + + + + {translateLocal('termsStep.electronicFundsInstantFee')} + + + {translateLocal('termsStep.electronicFundsInstantFeeMin')} + + - - - - {translateLocal('termsStep.inactivity')} - - {translateLocal('termsStep.shortTermsForm.afterTwelveMonths')} + + + {translateLocal('termsStep.noOverdraftOrCredit')} - - - {translateLocal('termsStep.feeAmountZero')} - - - - - - {translateLocal('termsStep.shortTermsForm.weChargeOneFee')} + + {translateLocal('termsStep.shortTermsForm.fdicInsurance')} + + + {translateLocal('termsStep.shortTermsForm.generalInfo')} + {' '} + + cfpb.gov/prepaid + + . + + + {translateLocal('termsStep.shortTermsForm.conditionsDetails')} + {' '} + + use.expensify.com/fees + + {' '} + {translateLocal('termsStep.shortTermsForm.conditionsPhone')} - - - {translateLocal('termsStep.shortTermsForm.electronicFundsWithdrawal')} - {translateLocal('termsStep.shortTermsForm.instant')} - - - {translateLocal('termsStep.electronicFundsInstantFee')} - - - - - - {translateLocal('termsStep.noOverdraftOrCredit')} - - - {translateLocal('termsStep.shortTermsForm.fdicInsurance')} - - - {translateLocal('termsStep.shortTermsForm.generalInfo')} - {' '} - - cfpb.gov/prepaid - - . - - - {translateLocal('termsStep.shortTermsForm.conditionsDetails')} - {' '} - - use.expensify.com/fees - - {' '} - {translateLocal('termsStep.shortTermsForm.conditionsPhone')} - - ); diff --git a/src/styles/styles.js b/src/styles/styles.js index 8999108bd6790..f4fccaa304d99 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1871,6 +1871,12 @@ const styles = { textAlign: 'right', }, + shortTermsBoldHeadingSection: { + paddingRight: 12, + paddingLeft: 12, + marginTop: 16, + }, + termsRowBold: { borderTopWidth: 3, borderTopColor: themeColors.shadow, From 241f19e0ef272f55a79d6127946922a26b764196 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Tue, 27 Jul 2021 19:54:09 -0700 Subject: [PATCH 35/52] re-style supporting text for long form --- src/components/CollapsibleSection/index.js | 6 +- src/languages/en.js | 2 +- src/languages/es.js | 2 +- .../EnablePayments/TermsPage/LongTermsForm.js | 209 ++++++++++++------ .../TermsPage/ShortTermsForm.js | 4 +- src/styles/styles.js | 7 +- 6 files changed, 155 insertions(+), 75 deletions(-) diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js index 50ecc24893db0..bc8902f5c0ac9 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -31,8 +31,10 @@ class CollapsibleSection extends React.Component { return ( - - {this.props.title} + + + {this.props.title} + diff --git a/src/languages/en.js b/src/languages/en.js index 3061b52bbcefd..cf386d18c1eda 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -442,7 +442,7 @@ export default { conditionsPhone: 'or calling +1 833-400-0904.', }, longTermsForm: { - listOfAllFees: 'A list of all Expensify Payments Account fees:', + listOfAllFees: 'All Expensify Payments account fees:', typeOfFeeHeader: 'Type of Fee', feeAmountHeader: 'Fee Amount', moreDetailsHeader: 'More Details', diff --git a/src/languages/es.js b/src/languages/es.js index 2805ee08e7a0b..5313ffb463c1a 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -466,7 +466,7 @@ export default { conditionsPhone: 'o llamando al +1 833-400-0904.', }, longTermsForm: { - listOfAllFees: 'Una lista de todas las tarifas de la cuenta Expensify Payments:', + listOfAllFees: 'All Expensify Payments account fees:', typeOfFeeHeader: 'Tipo de tarifa', feeAmountHeader: 'Importe de la tarifa', moreDetailsHeader: 'Más detalles', diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index 27f9382cd091f..4b9e57ab126af 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -58,88 +58,171 @@ const termsData = [ }, ]; -const getTermsSection = () => termsData.map(data => ( - - - - {translateLocal('termsStep.longTermsForm.typeOfFeeHeader')} +const LongTermsForm = () => ( + <> + + + + {translateLocal('termsStep.monthlyFee')} + + + + {translateLocal('termsStep.feeAmountZero')} + + - - {translateLocal('termsStep.longTermsForm.feeAmountHeader')} + + + {translateLocal('termsStep.shortTermsForm.perPurchase')} + + + + {translateLocal('termsStep.feeAmountZero')} + + - - {translateLocal('termsStep.longTermsForm.moreDetailsHeader')} + + + {translateLocal('termsStep.shortTermsForm.atmWithdrawal')} + + {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} + + + + + {translateLocal('common.na')} + + - - - - {data.typeOfFee} + + + {translateLocal('termsStep.shortTermsForm.cashReload')} + + + + {translateLocal('common.na')} + + - - {data.feeAmount} + + + {translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} + + {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} + + + + + {translateLocal('common.na')} + + - - {data.moreDetails} + + + {translateLocal('termsStep.shortTermsForm.customerService')} + + {translateLocal('termsStep.shortTermsForm.automatedOrLive')} + + + + + {translateLocal('termsStep.feeAmountZero')} + + - - -)); - -const LongTermsForm = () => ( - <> - - - {translateLocal('termsStep.longTermsForm.listOfAllFees')} - - - {getTermsSection()} - - - - - {translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp')} - {' '} - - fdic.gov/deposit/deposits/prepaid.html - - {' '} - {translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp2')} + + + {translateLocal('termsStep.inactivity')} + + {translateLocal('termsStep.shortTermsForm.afterTwelveMonths')} + + + + + {translateLocal('termsStep.feeAmountZero')} + + + + + + {translateLocal('termsStep.shortTermsForm.weChargeOneFee')} - + + + + {translateLocal('termsStep.shortTermsForm.electronicFundsWithdrawal')} + + {translateLocal('termsStep.shortTermsForm.instant')} + + + + + {translateLocal('termsStep.electronicFundsInstantFee')} + + + {translateLocal('termsStep.electronicFundsInstantFeeMin')} + + + + + {translateLocal('termsStep.noOverdraftOrCredit')} - - {translateLocal('termsStep.longTermsForm.contactExpensifyPayments')} - {' '} - - {CONST.EMAIL.CONCIERGE} - - {' '} - {translateLocal('termsStep.longTermsForm.contactExpensifyPayments2')} - {' '} - - new.expensify.com - - . + + {translateLocal('termsStep.shortTermsForm.fdicInsurance')} - - {translateLocal('termsStep.longTermsForm.generalInformation')} + + {translateLocal('termsStep.shortTermsForm.generalInfo')} {' '} cfpb.gov/prepaid + . + + + {translateLocal('termsStep.shortTermsForm.conditionsDetails')} {' '} - {translateLocal('termsStep.longTermsForm.generalInformation2')} - {' '} - - cfpb.gov/complaint. + + use.expensify.com/fees + {' '} + {translateLocal('termsStep.shortTermsForm.conditionsPhone')} - - {translateLocal('termsStep.longTermsForm.printerFriendlyView')} - + + + {translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp')} + {' '} + fdic.gov/deposit/deposits/prepaid.html + {' '} + {translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp2')} + + + {translateLocal('termsStep.noOverdraftOrCredit')} + + + {translateLocal('termsStep.longTermsForm.contactExpensifyPayments')} + {' '} + {CONST.EMAIL.CONCIERGE} + {' '} + {translateLocal('termsStep.longTermsForm.contactExpensifyPayments2')} + {' '} + new.expensify.com. + + + {translateLocal('termsStep.longTermsForm.generalInformation')} + {' '} + cfpb.gov/prepaid + {' '} + {translateLocal('termsStep.longTermsForm.generalInformation2')} + {' '} + cfpb.gov/complaint. + + + + {translateLocal('termsStep.longTermsForm.printerFriendlyView')} + ); diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 31e6f5f28f979..1884a790975be 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -10,7 +10,7 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')} - + {translateLocal('termsStep.monthlyFee')} @@ -114,7 +114,7 @@ const ShortTermsForm = () => ( - + {translateLocal('termsStep.noOverdraftOrCredit')} diff --git a/src/styles/styles.js b/src/styles/styles.js index f4fccaa304d99..d9f071127b8c9 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1856,11 +1856,6 @@ const styles = { ...whiteSpace.noWrap, }, - termsRow: { - borderTopColor: themeColors.border, - borderTopWidth: 1, - }, - shortTermsRow: { flexDirection: 'row', padding: 12, @@ -1888,7 +1883,7 @@ const styles = { }, termsSection: { - borderBottomWidth: 4, + borderBottomWidth: 2, borderBottomColor: themeColors.border, }, From 373cefa3d336ee980b8da8c97ce1401a4e085a92 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Tue, 27 Jul 2021 20:54:05 -0700 Subject: [PATCH 36/52] re-style long form --- src/components/CollapsibleSection/index.js | 7 +- src/languages/en.js | 7 +- src/languages/es.js | 7 +- .../EnablePayments/TermsPage/LongTermsForm.js | 146 ++++++++---------- .../TermsPage/ShortTermsForm.js | 28 ++-- src/styles/styles.js | 7 +- 6 files changed, 99 insertions(+), 103 deletions(-) diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js index bc8902f5c0ac9..92f7f0377c27d 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -30,15 +30,14 @@ class CollapsibleSection extends React.Component { const src = this.state.isExpanded ? Close : DownArrow; return ( - + {this.props.title} - - - + + diff --git a/src/languages/en.js b/src/languages/en.js index cf386d18c1eda..9734fa05c2d7f 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -429,7 +429,7 @@ export default { inNetwork: 'In-network', outOfNetwork: 'out-of-network', atmBalanceInquiry: 'ATM balance inquiry', - inOrOutOfNetwork: 'in-network or out-of-network', + inOrOutOfNetwork: 'In-network or out-of-network', customerService: 'Customer Service', automatedOrLive: 'Automated or live agent', afterTwelveMonths: 'After 12 months with no transactions', @@ -449,8 +449,7 @@ export default { openingAccountTitle: 'Opening An Account', openingAccountDetails: 'There is no fee to create an account.', monthlyFeeDetails: 'There is no monthly fee', - customerServiceAutomatedTitle: 'Customer service (automated)', - customerServiceLiveTitle: 'Customer service (live agent)', + customerServiceTitle: 'Customer service', customerServiceDetails: 'There are no customer service fees.', inactivityDetails: 'There is no inactivity fee.', sendingFundsTitle: 'Sending funds to another account holder', @@ -474,6 +473,8 @@ export default { generalInformation2: 'If you have a complaint about a prepaid account, call the Consumer Financial ' + 'Protection Bureau at 1-855-411-2372 or visit', printerFriendlyView: 'Printer Friendly View', + automated: 'Automated', + liveAgent: 'Live Agent', }, }, activateStep: { diff --git a/src/languages/es.js b/src/languages/es.js index 5313ffb463c1a..7bee84085c4f1 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -453,7 +453,7 @@ export default { inNetwork: 'En la red', outOfNetwork: 'fuera de la red', atmBalanceInquiry: 'Consulta de saldo de cajero automático', - inOrOutOfNetwork: 'dentro o fuera de la red', + 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', @@ -473,8 +473,7 @@ export default { openingAccountTitle: 'Abrir una cuenta', openingAccountDetails: 'No hay tarifa para crear una cuenta.', monthlyFeeDetails: 'No hay tarifa mensual', - customerServiceAutomatedTitle: 'Servicio al cliente (automatizado)', - customerServiceLiveTitle: 'Servicio al cliente (agente en vivo)', + 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', @@ -500,6 +499,8 @@ export default { 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: 'Vista fácil de imprimir', + automated: 'Automatizado', + liveAgent: 'Agente en vivo', }, }, activateStep: { diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index 4b9e57ab126af..04f8aee14ee99 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -21,14 +21,10 @@ const termsData = [ moreDetails: translateLocal('termsStep.longTermsForm.monthlyFeeDetails'), }, { - sectionTitle: translateLocal('termsStep.longTermsForm.customerServiceAutomatedTitle'), - typeOfFee: translateLocal('termsStep.longTermsForm.customerServiceAutomatedTitle'), feeAmount: translateLocal('termsStep.feeAmountZero'), moreDetails: translateLocal('termsStep.longTermsForm.customerServiceDetails'), }, { - sectionTitle: translateLocal('termsStep.longTermsForm.customerServiceLiveTitle'), - typeOfFee: translateLocal('termsStep.longTermsForm.customerServiceLiveTitle'), feeAmount: translateLocal('termsStep.feeAmountZero'), moreDetails: translateLocal('termsStep.longTermsForm.customerServiceDetails'), }, @@ -61,134 +57,128 @@ const termsData = [ const LongTermsForm = () => ( <> - + - {translateLocal('termsStep.monthlyFee')} + {translateLocal('termsStep.longTermsForm.openingAccountTitle')} - + {translateLocal('termsStep.feeAmountZero')} - + + {translateLocal('termsStep.longTermsForm.openingAccountDetails')} + + + - {translateLocal('termsStep.shortTermsForm.perPurchase')} + {translateLocal('termsStep.monthlyFee')} - + {translateLocal('termsStep.feeAmountZero')} - + + {translateLocal('termsStep.longTermsForm.monthlyFeeDetails')} + + + - {translateLocal('termsStep.shortTermsForm.atmWithdrawal')} - - {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} + + {translateLocal('termsStep.longTermsForm.customerServiceTitle')} + + + {translateLocal('termsStep.longTermsForm.automated')} - + - {translateLocal('common.na')} + {translateLocal('termsStep.feeAmountZero')} - + + {translateLocal('termsStep.longTermsForm.customerServiceDetails')} + + + - {translateLocal('termsStep.shortTermsForm.cashReload')} + + {translateLocal('termsStep.longTermsForm.customerServiceTitle')} + + + {translateLocal('termsStep.longTermsForm.liveAgent')} + - + - {translateLocal('common.na')} + {translateLocal('termsStep.feeAmountZero')} - + + {translateLocal('termsStep.longTermsForm.customerServiceDetails')} + + + - {translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} - - {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} - + {translateLocal('termsStep.inactivity')} - + - {translateLocal('common.na')} + {translateLocal('termsStep.feeAmountZero')} - + + {translateLocal('termsStep.longTermsForm.inactivityDetails')} + + + - {translateLocal('termsStep.shortTermsForm.customerService')} - - {translateLocal('termsStep.shortTermsForm.automatedOrLive')} - + {translateLocal('termsStep.longTermsForm.sendingFundsTitle')} - + {translateLocal('termsStep.feeAmountZero')} - + + {translateLocal('termsStep.longTermsForm.sendingFundsDetails')} + + + - {translateLocal('termsStep.inactivity')} - - {translateLocal('termsStep.shortTermsForm.afterTwelveMonths')} - + {translateLocal('termsStep.longTermsForm.electronicFundsStandardTitle')} - + {translateLocal('termsStep.feeAmountZero')} - - - {translateLocal('termsStep.shortTermsForm.weChargeOneFee')} - - - + + {translateLocal('termsStep.longTermsForm.electronicFundsStandardDetails')} + + + - {translateLocal('termsStep.shortTermsForm.electronicFundsWithdrawal')} - - {translateLocal('termsStep.shortTermsForm.instant')} - + {translateLocal('termsStep.longTermsForm.electronicFundsInstantTitle')} - + {translateLocal('termsStep.electronicFundsInstantFee')} - - {translateLocal('termsStep.electronicFundsInstantFeeMin')} - - - - {translateLocal('termsStep.noOverdraftOrCredit')} - - - {translateLocal('termsStep.shortTermsForm.fdicInsurance')} - - - {translateLocal('termsStep.shortTermsForm.generalInfo')} - {' '} - - cfpb.gov/prepaid - - . - - - {translateLocal('termsStep.shortTermsForm.conditionsDetails')} - {' '} - - use.expensify.com/fees - - {' '} - {translateLocal('termsStep.shortTermsForm.conditionsPhone')} - - + + {translateLocal('termsStep.longTermsForm.electronicFundsInstantDetails')} + + diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 1884a790975be..2165dd8ddca59 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -15,7 +15,7 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.monthlyFee')} - + {translateLocal('termsStep.feeAmountZero')} @@ -25,7 +25,7 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.shortTermsForm.perPurchase')} - + {translateLocal('termsStep.feeAmountZero')} @@ -34,11 +34,11 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.shortTermsForm.atmWithdrawal')} - + {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} - + {translateLocal('common.na')} @@ -48,7 +48,7 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.shortTermsForm.cashReload')} - + {translateLocal('common.na')} @@ -57,11 +57,11 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} - + {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} - + {translateLocal('common.na')} @@ -70,11 +70,11 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.shortTermsForm.customerService')} - + {translateLocal('termsStep.shortTermsForm.automatedOrLive')} - + {translateLocal('termsStep.feeAmountZero')} @@ -83,11 +83,11 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.inactivity')} - + {translateLocal('termsStep.shortTermsForm.afterTwelveMonths')} - + {translateLocal('termsStep.feeAmountZero')} @@ -101,15 +101,15 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.shortTermsForm.electronicFundsWithdrawal')} - + {translateLocal('termsStep.shortTermsForm.instant')} - + {translateLocal('termsStep.electronicFundsInstantFee')} - + {translateLocal('termsStep.electronicFundsInstantFeeMin')} diff --git a/src/styles/styles.js b/src/styles/styles.js index d9f071127b8c9..d29d89052ec3d 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1861,7 +1861,7 @@ const styles = { padding: 12, }, - shortTermsCenterRight: { + termsCenterRight: { margin: 'auto', textAlign: 'right', }, @@ -1872,6 +1872,11 @@ const styles = { marginTop: 16, }, + longTermsRow: { + flexDirection: 'row', + marginTop: 20, + }, + termsRowBold: { borderTopWidth: 3, borderTopColor: themeColors.shadow, From bdfffc56dbd133e9c04c086589f3183af3cd1f1a Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Tue, 27 Jul 2021 21:27:12 -0700 Subject: [PATCH 37/52] remove unused code, add some translations --- src/components/CollapsibleSection/index.js | 2 +- src/languages/en.js | 2 +- src/languages/es.js | 10 ++-- .../EnablePayments/TermsPage/LongTermsForm.js | 59 +++---------------- src/styles/styles.js | 7 +-- 5 files changed, 17 insertions(+), 63 deletions(-) diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js index 92f7f0377c27d..8c11e683710cd 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -37,7 +37,7 @@ class CollapsibleSection extends React.Component { - + diff --git a/src/languages/en.js b/src/languages/en.js index 9734fa05c2d7f..b70c4d1a3e725 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -472,7 +472,7 @@ export default { 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: 'Printer Friendly View', + printerFriendlyView: 'View printer-friendly version', automated: 'Automated', liveAgent: 'Live Agent', }, diff --git a/src/languages/es.js b/src/languages/es.js index 7bee84085c4f1..54cb61659c864 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -443,13 +443,13 @@ export default { monthlyFee: 'Cuota mensual', inactivity: 'Inactividad', electronicFundsInstantFee: '1.5%', - electronicFundsInstantFeeMin: 'Min $0.25', + electronicFundsInstantFeeMin: 'Mínimo $0.25', noOverdraftOrCredit: 'Sin función de sobregiro / crédito', shortTermsForm: { - expensifyPaymentsAccount: 'The Expensify Payments Account is issues by The Bancorp Bank.', + expensifyPaymentsAccount: 'La cuenta Expensify Payments es emitida por The Bancorp Bank.', perPurchase: 'Por compra', atmWithdrawal: 'Retiro de cajero automático', - cashReload: 'Cash Reload', + cashReload: 'Recarga de efectivo', inNetwork: 'En la red', outOfNetwork: 'fuera de la red', atmBalanceInquiry: 'Consulta de saldo de cajero automático', @@ -466,7 +466,7 @@ export default { conditionsPhone: 'o llamando al +1 833-400-0904.', }, longTermsForm: { - listOfAllFees: 'All Expensify Payments account fees:', + listOfAllFees: 'Todas las tarifas de la cuenta Expensify Payments:', typeOfFeeHeader: 'Tipo de tarifa', feeAmountHeader: 'Importe de la tarifa', moreDetailsHeader: 'Más detalles', @@ -498,7 +498,7 @@ export default { 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: 'Vista fácil de imprimir', + printerFriendlyView: 'Ver versión para imprimir', automated: 'Automatizado', liveAgent: 'Agente en vivo', }, diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index 04f8aee14ee99..4bfd9a5b81d70 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -6,53 +6,8 @@ import CollapsibleSection from '../../../components/CollapsibleSection'; import {translateLocal} from '../../../libs/translate'; import TextLink from '../../../components/TextLink'; import CONST from '../../../CONST'; - -const termsData = [ - { - sectionTitle: translateLocal('termsStep.longTermsForm.openingAccountTitle'), - typeOfFee: translateLocal('termsStep.longTermsForm.openingAccountTitle'), - feeAmount: translateLocal('termsStep.feeAmountZero'), - moreDetails: translateLocal('termsStep.longTermsForm.openingAccountDetails'), - }, - { - sectionTitle: translateLocal('termsStep.monthlyFee'), - typeOfFee: translateLocal('termsStep.monthlyFee'), - feeAmount: translateLocal('termsStep.feeAmountZero'), - moreDetails: translateLocal('termsStep.longTermsForm.monthlyFeeDetails'), - }, - { - feeAmount: translateLocal('termsStep.feeAmountZero'), - moreDetails: translateLocal('termsStep.longTermsForm.customerServiceDetails'), - }, - { - feeAmount: translateLocal('termsStep.feeAmountZero'), - moreDetails: translateLocal('termsStep.longTermsForm.customerServiceDetails'), - }, - { - sectionTitle: translateLocal('termsStep.inactivity'), - typeOfFee: translateLocal('termsStep.inactivity'), - feeAmount: translateLocal('termsStep.feeAmountZero'), - moreDetails: translateLocal('termsStep.longTermsForm.inactivityDetails'), - }, - { - sectionTitle: translateLocal('termsStep.longTermsForm.sendingFundsTitle'), - typeOfFee: translateLocal('termsStep.longTermsForm.sendingFundsTitle'), - feeAmount: translateLocal('termsStep.feeAmountZero'), - moreDetails: translateLocal('termsStep.longTermsForm.sendingFundsDetails'), - }, - { - sectionTitle: translateLocal('termsStep.longTermsForm.electronicFundsStandardTitle'), - typeOfFee: translateLocal('termsStep.longTermsForm.electronicFundsStandardTitle'), - feeAmount: translateLocal('termsStep.feeAmountZero'), - moreDetails: translateLocal('termsStep.longTermsForm.electronicFundsStandardDetails'), - }, - { - sectionTitle: translateLocal('termsStep.longTermsForm.electronicFundsInstantTitle'), - typeOfFee: translateLocal('termsStep.longTermsForm.electronicFundsInstantTitle'), - feeAmount: translateLocal('termsStep.electronicFundsInstantFee'), - moreDetails: translateLocal('termsStep.longTermsForm.electronicFundsInstantDetails'), - }, -]; +import Icon from '../../../components/Icon'; +import {Receipt} from '../../../components/Icon/Expensicons'; const LongTermsForm = () => ( <> @@ -210,9 +165,13 @@ const LongTermsForm = () => ( cfpb.gov/complaint. - - {translateLocal('termsStep.longTermsForm.printerFriendlyView')} - + + {/* TODO: Get printer icon */} + + + {translateLocal('termsStep.longTermsForm.printerFriendlyView')} + + ); diff --git a/src/styles/styles.js b/src/styles/styles.js index d29d89052ec3d..5079f57fa2cd8 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1882,12 +1882,7 @@ const styles = { borderTopColor: themeColors.shadow, }, - termsTableItem: { - textAlign: 'center', - alignItems: 'center', - }, - - termsSection: { + collapsibleSectionBorder: { borderBottomWidth: 2, borderBottomColor: themeColors.border, }, From cb2a792b2f35870e394653a07b9b151c66fb9ea8 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Tue, 27 Jul 2021 21:39:27 -0700 Subject: [PATCH 38/52] update withdrawal section content --- src/languages/en.js | 7 +++---- src/languages/es.js | 7 +++---- src/pages/EnablePayments/TermsPage/LongTermsForm.js | 13 +++++++++++-- .../EnablePayments/TermsPage/ShortTermsForm.js | 4 ++-- 4 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index b70c4d1a3e725..e5d403790f622 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -421,6 +421,9 @@ export default { 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', @@ -434,8 +437,6 @@ export default { automatedOrLive: 'Automated or live agent', afterTwelveMonths: 'After 12 months with no transactions', weChargeOneFee: 'We charge 1 type of fee.', - electronicFundsWithdrawal: 'Electronic Funds Withdrawal', - instant: 'Instant', 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', @@ -455,11 +456,9 @@ export default { 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.', - electronicFundsStandardTitle: 'Electronic funds withdrawal (standard)', 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.', - electronicFundsInstantTitle: 'Electronic funds withdrawal (instant)', 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).', diff --git a/src/languages/es.js b/src/languages/es.js index 54cb61659c864..310b159906c17 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -445,6 +445,9 @@ export default { 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', @@ -458,8 +461,6 @@ export default { automatedOrLive: 'Agente automatizado o en vivo', afterTwelveMonths: 'Después de 12 meses sin transacciones', weChargeOneFee: 'Cobramos 1 tipo de tarifa.', - electronicFundsWithdrawal: 'Retiro electrónico de fondos', - instant: 'Instantáneo', 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', @@ -479,11 +480,9 @@ export default { 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', - electronicFundsStandardTitle: 'Retiro electrónico de fondos (estándar)', 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.', - electronicFundsInstantTitle: 'Retiro electrónico de fondos (instantáneo)', 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 ' diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index 4bfd9a5b81d70..c931f73c2e975 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -108,7 +108,10 @@ const LongTermsForm = () => ( - {translateLocal('termsStep.longTermsForm.electronicFundsStandardTitle')} + {translateLocal('termsStep.electronicFundsWithdrawal')} + + {translateLocal('termsStep.standard')} + @@ -122,12 +125,18 @@ const LongTermsForm = () => ( - {translateLocal('termsStep.longTermsForm.electronicFundsInstantTitle')} + {translateLocal('termsStep.electronicFundsWithdrawal')} + + {translateLocal('termsStep.instant')} + {translateLocal('termsStep.electronicFundsInstantFee')} + + {translateLocal('termsStep.electronicFundsInstantFeeMin')} + diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 2165dd8ddca59..8a15288f8692c 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -100,9 +100,9 @@ const ShortTermsForm = () => ( - {translateLocal('termsStep.shortTermsForm.electronicFundsWithdrawal')} + {translateLocal('termsStep.electronicFundsWithdrawal')} - {translateLocal('termsStep.shortTermsForm.instant')} + {translateLocal('termsStep.instant')} From 7fb67df39b2495dfc22ec72939041e79413ff42b Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Wed, 28 Jul 2021 14:51:33 -0700 Subject: [PATCH 39/52] fix spacing bug for margins --- src/styles/styles.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 5079f57fa2cd8..fa5fd66be4e31 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1862,7 +1862,8 @@ const styles = { }, termsCenterRight: { - margin: 'auto', + marginTop: 'auto', + marginBottom: 'auto', textAlign: 'right', }, From 3b986cf99f89f27ccb706d9aacce67b92095485f Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Wed, 28 Jul 2021 17:49:28 -0700 Subject: [PATCH 40/52] add arrow and printer icons --- assets/images/arrow-up.svg | 7 +++++++ assets/images/printer.svg | 13 +++++++++++++ src/components/CollapsibleSection/index.js | 5 ++--- src/components/Icon/Expensicons.js | 6 +++++- src/pages/EnablePayments/TermsPage/LongTermsForm.js | 5 ++--- 5 files changed, 29 insertions(+), 7 deletions(-) create mode 100644 assets/images/arrow-up.svg create mode 100644 assets/images/printer.svg diff --git a/assets/images/arrow-up.svg b/assets/images/arrow-up.svg new file mode 100644 index 0000000000000..f8c4b75ac35cf --- /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 0000000000000..cd62ce79744dc --- /dev/null +++ b/assets/images/printer.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js index 8c11e683710cd..b3abef0e16004 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -5,7 +5,7 @@ import Text from '../Text'; import {propTypes, defaultProps} from './CollapsibleSectionPropTypes'; import styles from '../../styles/styles'; import Icon from '../Icon'; -import {Close, DownArrow} from '../Icon/Expensicons'; +import {DownArrow, UpArrow} from '../Icon/Expensicons'; class CollapsibleSection extends React.Component { constructor(props) { @@ -26,8 +26,7 @@ class CollapsibleSection extends React.Component { } render() { - // TODO: Get an UpArrow SVG - const src = this.state.isExpanded ? Close : DownArrow; + const src = this.state.isExpanded ? UpArrow : DownArrow; return ( diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index 42c8dc079b0fe..8555edc73957c 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/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index c931f73c2e975..de631af1decac 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -7,7 +7,7 @@ import {translateLocal} from '../../../libs/translate'; import TextLink from '../../../components/TextLink'; import CONST from '../../../CONST'; import Icon from '../../../components/Icon'; -import {Receipt} from '../../../components/Icon/Expensicons'; +import {Printer} from '../../../components/Icon/Expensicons'; const LongTermsForm = () => ( <> @@ -175,8 +175,7 @@ const LongTermsForm = () => ( - {/* TODO: Get printer icon */} - + {translateLocal('termsStep.longTermsForm.printerFriendlyView')} From 7f14c6922b3bf250d2298b6d368a5515adbde62a Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Wed, 28 Jul 2021 18:18:09 -0700 Subject: [PATCH 41/52] fix links on mobile --- src/CONST.js | 2 ++ .../EnablePayments/TermsPage/LongTermsForm.js | 10 ++++++---- .../EnablePayments/TermsPage/ShortTermsForm.js | 18 ++++++++++++------ 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index ac5bda74851cc..40227f15b1114 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -127,6 +127,8 @@ 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', OPTION_TYPE: { REPORT: 'report', PERSONAL_DETAIL: 'personalDetail', diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index de631af1decac..850cf07697752 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -1,10 +1,9 @@ import React from 'react'; -import {View} from 'react-native'; +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 TextLink from '../../../components/TextLink'; import CONST from '../../../CONST'; import Icon from '../../../components/Icon'; import {Printer} from '../../../components/Icon/Expensicons'; @@ -176,9 +175,12 @@ const LongTermsForm = () => ( - + Linking.openURL(CONST.FEES_URL)} + > {translateLocal('termsStep.longTermsForm.printerFriendlyView')} - + ); diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 8a15288f8692c..7be55a5590fe9 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -1,9 +1,9 @@ import React from 'react'; -import {View} from 'react-native'; +import {View, Linking} from 'react-native'; import styles from '../../../styles/styles'; import Text from '../../../components/Text'; -import TextLink from '../../../components/TextLink'; import {translateLocal} from '../../../libs/translate'; +import CONST from '../../../CONST'; const ShortTermsForm = () => ( <> @@ -124,17 +124,23 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.shortTermsForm.generalInfo')} {' '} - + Linking.openURL(CONST.CFPB_PREPAID_URL)} + > cfpb.gov/prepaid - + . {translateLocal('termsStep.shortTermsForm.conditionsDetails')} {' '} - + Linking.openURL(CONST.FEES_URL)} + > use.expensify.com/fees - + {' '} {translateLocal('termsStep.shortTermsForm.conditionsPhone')} From 6b05d7033b87982ca94e3401ceca9a81344db4b5 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Wed, 28 Jul 2021 18:27:04 -0700 Subject: [PATCH 42/52] move checkboxes inside scrollview --- src/pages/EnablePayments/TermsStep.js | 64 +++++++++++++-------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js index 46c1c1a8665a2..9c25095996d13 100644 --- a/src/pages/EnablePayments/TermsStep.js +++ b/src/pages/EnablePayments/TermsStep.js @@ -69,43 +69,43 @@ class TermsStep extends React.Component { - - ( - - {`${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')} From be34b12b39fbddd7afd8e8361709a39f4610e6eb Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Wed, 28 Jul 2021 18:49:00 -0700 Subject: [PATCH 43/52] fix right align issue on mobile --- .../EnablePayments/TermsPage/LongTermsForm.js | 18 +++++++++--------- .../EnablePayments/TermsPage/ShortTermsForm.js | 16 ++++++++-------- src/styles/styles.js | 5 ++++- 3 files changed, 21 insertions(+), 18 deletions(-) diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index 850cf07697752..df82c3f987588 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -16,7 +16,7 @@ const LongTermsForm = () => ( {translateLocal('termsStep.longTermsForm.openingAccountTitle')} - + {translateLocal('termsStep.feeAmountZero')} @@ -30,7 +30,7 @@ const LongTermsForm = () => ( {translateLocal('termsStep.monthlyFee')} - + {translateLocal('termsStep.feeAmountZero')} @@ -49,7 +49,7 @@ const LongTermsForm = () => ( - + {translateLocal('termsStep.feeAmountZero')} @@ -68,7 +68,7 @@ const LongTermsForm = () => ( - + {translateLocal('termsStep.feeAmountZero')} @@ -82,7 +82,7 @@ const LongTermsForm = () => ( {translateLocal('termsStep.inactivity')} - + {translateLocal('termsStep.feeAmountZero')} @@ -96,7 +96,7 @@ const LongTermsForm = () => ( {translateLocal('termsStep.longTermsForm.sendingFundsTitle')} - + {translateLocal('termsStep.feeAmountZero')} @@ -113,7 +113,7 @@ const LongTermsForm = () => ( - + {translateLocal('termsStep.feeAmountZero')} @@ -130,10 +130,10 @@ const LongTermsForm = () => ( - + {translateLocal('termsStep.electronicFundsInstantFee')} - + {translateLocal('termsStep.electronicFundsInstantFeeMin')} diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 7be55a5590fe9..47da74318822b 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -16,7 +16,7 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.monthlyFee')} - + {translateLocal('termsStep.feeAmountZero')} @@ -26,7 +26,7 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.shortTermsForm.perPurchase')} - + {translateLocal('termsStep.feeAmountZero')} @@ -39,7 +39,7 @@ const ShortTermsForm = () => ( - + {translateLocal('common.na')} @@ -49,7 +49,7 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.shortTermsForm.cashReload')} - + {translateLocal('common.na')} @@ -62,7 +62,7 @@ const ShortTermsForm = () => ( - + {translateLocal('common.na')} @@ -75,7 +75,7 @@ const ShortTermsForm = () => ( - + {translateLocal('termsStep.feeAmountZero')} @@ -88,7 +88,7 @@ const ShortTermsForm = () => ( - + {translateLocal('termsStep.feeAmountZero')} @@ -106,7 +106,7 @@ const ShortTermsForm = () => ( - + {translateLocal('termsStep.electronicFundsInstantFee')} diff --git a/src/styles/styles.js b/src/styles/styles.js index fa5fd66be4e31..74905ba1e7bc6 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -58,6 +58,10 @@ const styles = { textAlign: 'center', }, + textAlignRight: { + textAlign: 'right', + }, + textUnderline: { textDecorationLine: 'underline', }, @@ -1864,7 +1868,6 @@ const styles = { termsCenterRight: { marginTop: 'auto', marginBottom: 'auto', - textAlign: 'right', }, shortTermsBoldHeadingSection: { From b97340ba6e6f8fee42aad6b69f454f21db26bec8 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Wed, 28 Jul 2021 19:08:37 -0700 Subject: [PATCH 44/52] dry short terms views --- .../TermsPage/ShortTermsForm.js | 142 ++++++++---------- 1 file changed, 59 insertions(+), 83 deletions(-) diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 47da74318822b..87840d50a1a31 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -5,94 +5,70 @@ 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 getTermsSections = () => termsData.map(data => ( + + + {data.title} + { + data.subTitle + && ( + + {data.subTitle} + + ) + } + + + + {data.rightText} + + + +)); + const ShortTermsForm = () => ( <> {translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')} - - - {translateLocal('termsStep.monthlyFee')} - - - - {translateLocal('termsStep.feeAmountZero')} - - - - - - {translateLocal('termsStep.shortTermsForm.perPurchase')} - - - - {translateLocal('termsStep.feeAmountZero')} - - - - - - {translateLocal('termsStep.shortTermsForm.atmWithdrawal')} - - {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} - - - - - {translateLocal('common.na')} - - - - - - {translateLocal('termsStep.shortTermsForm.cashReload')} - - - - {translateLocal('common.na')} - - - - - - {translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')} - - {translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')} - - - - - {translateLocal('common.na')} - - - - - - {translateLocal('termsStep.shortTermsForm.customerService')} - - {translateLocal('termsStep.shortTermsForm.automatedOrLive')} - - - - - {translateLocal('termsStep.feeAmountZero')} - - - - - - {translateLocal('termsStep.inactivity')} - - {translateLocal('termsStep.shortTermsForm.afterTwelveMonths')} - - - - - {translateLocal('termsStep.feeAmountZero')} - - - + {getTermsSections()} + {translateLocal('termsStep.shortTermsForm.weChargeOneFee')} @@ -109,7 +85,7 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.electronicFundsInstantFee')} - + {translateLocal('termsStep.electronicFundsInstantFeeMin')} From a8081b2f3d5209d7c3c52a29e6ac92e1ad8da5a3 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Wed, 28 Jul 2021 19:38:31 -0700 Subject: [PATCH 45/52] dry long terms views --- src/languages/en.js | 2 +- .../EnablePayments/TermsPage/LongTermsForm.js | 213 +++++++----------- .../TermsPage/ShortTermsForm.js | 14 +- 3 files changed, 91 insertions(+), 138 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index e5d403790f622..e08dae48ecb1f 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -411,7 +411,7 @@ 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', diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index df82c3f987588..db646517291fb 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -8,140 +8,93 @@ import CONST from '../../../CONST'; import Icon from '../../../components/Icon'; import {Printer} from '../../../components/Icon/Expensicons'; -const LongTermsForm = () => ( - <> - - - - {translateLocal('termsStep.longTermsForm.openingAccountTitle')} - - - - {translateLocal('termsStep.feeAmountZero')} - - - - - {translateLocal('termsStep.longTermsForm.openingAccountDetails')} - - - - - {translateLocal('termsStep.monthlyFee')} - - - - {translateLocal('termsStep.feeAmountZero')} - - - - - {translateLocal('termsStep.longTermsForm.monthlyFeeDetails')} - - - - - - {translateLocal('termsStep.longTermsForm.customerServiceTitle')} - - - {translateLocal('termsStep.longTermsForm.automated')} - - - - - {translateLocal('termsStep.feeAmountZero')} - - - - - {translateLocal('termsStep.longTermsForm.customerServiceDetails')} - - - - - - {translateLocal('termsStep.longTermsForm.customerServiceTitle')} - - - {translateLocal('termsStep.longTermsForm.liveAgent')} - - - - - {translateLocal('termsStep.feeAmountZero')} - - - - - {translateLocal('termsStep.longTermsForm.customerServiceDetails')} - +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'), + }, +]; - - - {translateLocal('termsStep.inactivity')} - - - - {translateLocal('termsStep.feeAmountZero')} - - +const getLongTermsSections = () => termsData.map((section, index) => ( + // eslint-disable-next-line react/no-array-index-key + + + + {section.title} + { + section.subTitle + && ( + + {section.subTitle} + + ) + } - - {translateLocal('termsStep.longTermsForm.inactivityDetails')} - - - - - {translateLocal('termsStep.longTermsForm.sendingFundsTitle')} - - - - {translateLocal('termsStep.feeAmountZero')} - - - - - {translateLocal('termsStep.longTermsForm.sendingFundsDetails')} - - - - - {translateLocal('termsStep.electronicFundsWithdrawal')} - - {translateLocal('termsStep.standard')} - - - - - {translateLocal('termsStep.feeAmountZero')} - - - - - {translateLocal('termsStep.longTermsForm.electronicFundsStandardDetails')} - - - - - {translateLocal('termsStep.electronicFundsWithdrawal')} - - {translateLocal('termsStep.instant')} - - - - - {translateLocal('termsStep.electronicFundsInstantFee')} - - - {translateLocal('termsStep.electronicFundsInstantFeeMin')} - - + + + {section.rightText} + + { + section.subRightText + && ( + + {section.subRightText} + + ) + } - - {translateLocal('termsStep.longTermsForm.electronicFundsInstantDetails')} - + + + {section.details} + + +)); +const LongTermsForm = () => ( + <> + + {getLongTermsSections()} diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 87840d50a1a31..ddc29029cd2eb 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -40,22 +40,22 @@ const termsData = [ }, ]; -const getTermsSections = () => termsData.map(data => ( - +const getShortTermsSections = () => termsData.map(section => ( + - {data.title} + {section.title} { - data.subTitle + section.subTitle && ( - {data.subTitle} + {section.subTitle} ) } - {data.rightText} + {section.rightText} @@ -67,7 +67,7 @@ const ShortTermsForm = () => ( {translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')} - {getTermsSections()} + {getShortTermsSections()} From a1b6d5b4690057cbe786aa68fe416062d931318d Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Wed, 28 Jul 2021 19:42:36 -0700 Subject: [PATCH 46/52] remove testing todos, remove unused styles --- src/pages/EnablePayments/index.js | 3 +-- src/pages/home/sidebar/SidebarScreen.js | 4 +--- src/styles/utilities/spacing.js | 12 ------------ 3 files changed, 2 insertions(+), 17 deletions(-) diff --git a/src/pages/EnablePayments/index.js b/src/pages/EnablePayments/index.js index aa1cfd69925e5..8012df050e5ce 100644 --- a/src/pages/EnablePayments/index.js +++ b/src/pages/EnablePayments/index.js @@ -32,8 +32,7 @@ class EnablePaymentsPage extends React.Component { return ; } - // TODO: revert the default step back to CONST.WALLET.STEP.ONFIDO - const currentStep = this.props.userWallet.currentStep || CONST.WALLET.STEP.TERMS; + const currentStep = this.props.userWallet.currentStep || CONST.WALLET.STEP.ONFIDO; return ( {currentStep === CONST.WALLET.STEP.ONFIDO && } diff --git a/src/pages/home/sidebar/SidebarScreen.js b/src/pages/home/sidebar/SidebarScreen.js index aed97df10ad36..fcfd60c59950c 100755 --- a/src/pages/home/sidebar/SidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen.js @@ -114,9 +114,7 @@ class SidebarScreen extends Component { { icon: ChatBubble, text: this.props.translate('sidebarScreen.newChat'), - - // TODO: set back to ROUTES.NEW_CHAT - onSelected: () => Navigation.navigate(ROUTES.ENABLE_PAYMENTS), + onSelected: () => Navigation.navigate(ROUTES.NEW_CHAT), }, { icon: Users, diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js index 52c3e43d54022..2ddb61032358e 100644 --- a/src/styles/utilities/spacing.js +++ b/src/styles/utilities/spacing.js @@ -233,10 +233,6 @@ export default { paddingRight: 8, }, - pr4: { - paddingRight: 16, - }, - pr5: { paddingRight: 20, }, @@ -245,18 +241,10 @@ export default { paddingRight: 32, }, - pl4: { - paddingLeft: 16, - }, - pl5: { paddingLeft: 20, }, - pt1: { - paddingTop: 4, - }, - pt2: { paddingTop: 8, }, From 339d50eb459e9522728a04c7a5cd5bab7ca369f8 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Wed, 28 Jul 2021 20:02:57 -0700 Subject: [PATCH 47/52] move some constantss --- src/CONST.js | 8 ++++++++ src/pages/EnablePayments/TermsPage/LongTermsForm.js | 10 ++++++---- src/pages/EnablePayments/TermsPage/ShortTermsForm.js | 4 ++-- src/styles/styles.js | 11 ----------- 4 files changed, 16 insertions(+), 17 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 40227f15b1114..c956a545b89f9 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -129,6 +129,7 @@ const CONST = { 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', @@ -352,6 +353,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/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index db646517291fb..5c5372de14f8d 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -100,7 +100,7 @@ const LongTermsForm = () => ( {translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp')} {' '} - fdic.gov/deposit/deposits/prepaid.html + {CONST.TERMS.FDIC_PREPAID} {' '} {translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp2')} @@ -114,16 +114,18 @@ const LongTermsForm = () => ( {' '} {translateLocal('termsStep.longTermsForm.contactExpensifyPayments2')} {' '} - new.expensify.com. + {CONST.NEWDOT} + . {translateLocal('termsStep.longTermsForm.generalInformation')} {' '} - cfpb.gov/prepaid + { CONST.TERMS.CFPB_PREPAID } {' '} {translateLocal('termsStep.longTermsForm.generalInformation2')} {' '} - cfpb.gov/complaint. + {CONST.TERMS.CFPB_COMPLAINT} + . diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index ddc29029cd2eb..b1cce789a133f 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -104,7 +104,7 @@ const ShortTermsForm = () => ( style={styles.link} onPress={() => Linking.openURL(CONST.CFPB_PREPAID_URL)} > - cfpb.gov/prepaid + {CONST.TERMS.CFPB_PREPAID} . @@ -115,7 +115,7 @@ const ShortTermsForm = () => ( style={styles.link} onPress={() => Linking.openURL(CONST.FEES_URL)} > - use.expensify.com/fees + {CONST.TERMS.USE_EXPENSIFY_FEES} {' '} {translateLocal('termsStep.shortTermsForm.conditionsPhone')} diff --git a/src/styles/styles.js b/src/styles/styles.js index 74905ba1e7bc6..387e58d5896da 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1881,22 +1881,11 @@ const styles = { marginTop: 20, }, - termsRowBold: { - borderTopWidth: 3, - borderTopColor: themeColors.shadow, - }, - collapsibleSectionBorder: { borderBottomWidth: 2, borderBottomColor: themeColors.border, }, - communicationsLinkIcon: { - right: -36, - top: 0, - bottom: 0, - }, - communicationsLinkHeight: { height: 20, }, From d8e487bb9a76524cf3a9bf284ea8edb69a9f0b8c Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Wed, 28 Jul 2021 20:14:14 -0700 Subject: [PATCH 48/52] fix heading space bug on mobile --- src/pages/EnablePayments/TermsPage/LongTermsForm.js | 4 ++-- src/pages/EnablePayments/TermsStep.js | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index 5c5372de14f8d..af7e7b1363b33 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -120,8 +120,8 @@ const LongTermsForm = () => ( {translateLocal('termsStep.longTermsForm.generalInformation')} {' '} - { CONST.TERMS.CFPB_PREPAID } - {' '} + {CONST.TERMS.CFPB_PREPAID} + {'. '} {translateLocal('termsStep.longTermsForm.generalInformation2')} {' '} {CONST.TERMS.CFPB_COMPLAINT} diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js index 9c25095996d13..63855e8c81522 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'; @@ -60,7 +59,7 @@ class TermsStep extends React.Component { render() { return ( - + <> Navigation.dismissModal()} @@ -132,7 +131,7 @@ class TermsStep extends React.Component { /> - + ); } } From 87bdb543bee49370cdc8033cf60a82875ff4d930 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Thu, 29 Jul 2021 14:37:50 -0700 Subject: [PATCH 49/52] update podfile.lock --- ios/Podfile.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index a833bd5b21af3..26a81647d8aff 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -917,10 +917,10 @@ 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: 59b7376efca9f00e9693321c5cf7c6ab2c567635 react-native-progress-bar-android: be43138ab7da30d51fc038bafa98e9ed594d0c40 From bccf156a7c221fe230399865edf754fe680e77fe Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Thu, 29 Jul 2021 14:55:44 -0700 Subject: [PATCH 50/52] remove extra space above button --- src/pages/EnablePayments/TermsStep.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js index 63855e8c81522..5743151206bf1 100644 --- a/src/pages/EnablePayments/TermsStep.js +++ b/src/pages/EnablePayments/TermsStep.js @@ -65,7 +65,7 @@ class TermsStep extends React.Component { onCloseButtonPress={() => Navigation.dismissModal()} /> - + )} - +