Update Terms and Fees step to match latest requirements

src/languages/en.js

@@ -521,37 +521,37 @@ export default {
         monthlyFee: 'Monthly fee',
         inactivity: 'Inactivity',
         electronicFundsInstantFee: '1.5%',
-        electronicFundsInstantFeeMin: 'Min $0.25',
         noOverdraftOrCredit: 'No overdraft/credit feature.',
-        electronicFundsWithdrawal: 'Electronic Funds Withdrawal',
-        instant: 'Instant',
+        electronicFundsWithdrawal: 'Electronic funds withdrawal',
         standard: 'Standard',
         shortTermsForm: {
-            expensifyPaymentsAccount: 'The Expensify Payments Account is issues by The Bancorp Bank.',
+            expensifyPaymentsAccount: 'The Expensify Wallet is issued 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',
+            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.',
+            automatedOrLive: '(automated or live agent)',
+            afterTwelveMonths: '(after 12 months with no transactions)',
+            weChargeOneFee: 'We charge one type of fee.',
             fdicInsurance: 'Your funds are eligible for FDIC insurance.',
             generalInfo: 'For general information about prepaid accounts, visit',
             conditionsDetails: 'Find details and conditions for all fees and services by visiting',
             conditionsPhone: 'or calling +1 833-400-0904.',
+            instant: '(instant)',
+            electronicFundsInstantFeeMin: '(min $0.25)',
         },
         longTermsForm: {
-            listOfAllFees: 'All Expensify Payments account fees:',
+            listOfAllFees: 'A list of all Expensify Wallet fees',
             typeOfFeeHeader: 'Type of fee',
             feeAmountHeader: 'Fee amount',
             moreDetailsHeader: 'More details',
             openingAccountTitle: 'Opening an account',
-            openingAccountDetails: 'There is no fee to create an account.',
-            monthlyFeeDetails: 'There is no monthly fee',
+            openingAccountDetails: 'There is no fee to open an account.',
+            monthlyFeeDetails: 'There is no monthly fee.',
             customerServiceTitle: 'Customer service',
             customerServiceDetails: 'There are no customer service fees.',
             inactivityDetails: 'There is no inactivity fee.',
@@ -562,7 +562,7 @@ export default {
                 + 'to your bank account using the standard option. This transfer usually completes within 1-3 business'
                 + ' days.',
             electronicFundsInstantDetails: 'There is a fee to transfer funds from your Expensify Payments Account to '
-                + 'your linked debit card using the instant transfer option. This transfer usually completes within'
+                + '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 '
@@ -576,6 +576,8 @@ export default {
             printerFriendlyView: 'View printer-friendly version',
             automated: 'Automated',
             liveAgent: 'Live Agent',
+            instant: 'Instant',
+            electronicFundsInstantFeeMin: 'Min $0.25',
         },
     },
     activateStep: {

src/languages/es.js

@@ -521,37 +521,37 @@ export default {
         monthlyFee: 'Cuota mensual',
         inactivity: 'Inactividad',
         electronicFundsInstantFee: '1.5%',
-        electronicFundsInstantFeeMin: 'Mínimo $0.25',
         noOverdraftOrCredit: 'Sin función de sobregiro / crédito',
         electronicFundsWithdrawal: 'Retiro electrónico de fondos',
-        instant: 'Instantáneo',
         standard: 'Estándar',
         shortTermsForm: {
-            expensifyPaymentsAccount: 'La cuenta Expensify Payments es emitida por The Bancorp Bank.',
+            expensifyPaymentsAccount: 'La billetera Expensify es emitida por The Bancorp Bank.',
             perPurchase: 'Por compra',
             atmWithdrawal: 'Retiro de cajero automático',
             cashReload: 'Recarga de efectivo',
-            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',
+            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.',
+            automatedOrLive: '(agente automatizado o en vivo)',
+            afterTwelveMonths: '(después de 12 meses sin transacciones)',
+            weChargeOneFee: 'Cobramos un tipo de tarifa.',
             fdicInsurance: 'Sus fondos son elegibles para el seguro de la FDIC.',
             generalInfo: 'Para obtener información general sobre cuentas prepagas, visite',
             conditionsDetails: 'Encuentra detalles y condiciones para todas las tarifas y servicios visitando',
             conditionsPhone: 'o llamando al +1 833-400-0904.',
+            instant: '(instantáneo)',
+            electronicFundsInstantFeeMin: '(mínimo $0.25)',
         },
         longTermsForm: {
-            listOfAllFees: 'Todas las tarifas de la cuenta Expensify Payments:',
+            listOfAllFees: 'Una lista de todas las tarifas de la billetera Expensify',
             typeOfFeeHeader: 'Tipo de tarifa',
             feeAmountHeader: 'Importe de la tarifa',
             moreDetailsHeader: 'Más detalles',
             openingAccountTitle: 'Abrir una cuenta',
-            openingAccountDetails: 'No hay tarifa para crear una cuenta.',
-            monthlyFeeDetails: 'No hay tarifa mensual',
+            openingAccountDetails: 'No hay tarifa para abrir una cuenta.',
+            monthlyFeeDetails: 'No hay tarifa mensual.',
             customerServiceTitle: 'Servicio al cliente',
             customerServiceDetails: 'No hay tarifas de servicio al cliente.',
             inactivityDetails: 'No hay tarifa de inactividad.',
@@ -562,8 +562,8 @@ export default {
                 + 'a su cuenta bancaria utilizando la opción estándar. Esta transferencia generalmente se completa en'
                 + '1-3 negocios días.',
             electronicFundsInstantDetails: 'Hay una tarifa para transferir fondos desde su cuenta Expensify Payments a '
-                + 'su tarjeta de débito vinculada utilizando la opción de transferencia instantánea. Esta transferencia'
-                + ' generalmente se completa dentro de varios minutos. La tarifa es el 1.5% del monto de la '
+                + 'su tarjeta de débito vinculada utilizando la opción de transferencia instantánea. Esta transferencia '
+                + 'generalmente se completa dentro de varios minutos. La tarifa es el 1.5% del monto de la '
                 + 'transferencia (con una tarifa mínima de $ 0.25). ',
             fdicInsuranceBancorp: 'Sus fondos son elegibles para el seguro de la FDIC. Sus fondos se mantendrán en o '
                 + 'transferido a The Bancorp Bank, una institución asegurada por la FDIC. Una vez allí, sus fondos '
@@ -578,6 +578,8 @@ export default {
             printerFriendlyView: 'Ver versión para imprimir',
             automated: 'Automatizado',
             liveAgent: 'Agente en vivo',
+            instant: 'Instantáneo',
+            electronicFundsInstantFeeMin: 'Mínimo $0.25',
         },
     },
     activateStep: {

src/pages/EnablePayments/TermsPage/LongTermsForm.js

@@ -51,10 +51,10 @@ const termsData = [
     },
     {
         title: Localize.translateLocal('termsStep.electronicFundsWithdrawal'),
-        subTitle: Localize.translateLocal('termsStep.instant'),
+        subTitle: Localize.translateLocal('termsStep.longTermsForm.instant'),
         rightText: Localize.translateLocal('termsStep.electronicFundsInstantFee'),
-        subRightText: Localize.translateLocal('termsStep.electronicFundsInstantFeeMin'),
-        details: Localize.translateLocal('termsStep.longTermsForm.electronicFundsStandardDetails'),
+        subRightText: Localize.translateLocal('termsStep.longTermsForm.electronicFundsInstantFeeMin'),
+        details: Localize.translateLocal('termsStep.longTermsForm.electronicFundsInstantDetails'),
     },
 ];
 

src/pages/EnablePayments/TermsPage/ShortTermsForm.js

@@ -1,4 +1,3 @@
-import _ from 'underscore';
 import React from 'react';
 import {View} from 'react-native';
 import styles from '../../../styles/styles';
@@ -7,88 +6,139 @@ import * as Localize from '../../../libs/Localize';
 import CONST from '../../../CONST';
 import * as Link from '../../../libs/actions/Link';
 
-const termsData = [
-    {
-        title: Localize.translateLocal('termsStep.monthlyFee'),
-        rightText: Localize.translateLocal('termsStep.feeAmountZero'),
-    },
-    {
-        title: Localize.translateLocal('termsStep.shortTermsForm.perPurchase'),
-        rightText: Localize.translateLocal('termsStep.feeAmountZero'),
-    },
-    {
-        title: Localize.translateLocal('termsStep.shortTermsForm.atmWithdrawal'),
-        subTitle: Localize.translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork'),
-        rightText: Localize.translateLocal('common.na'),
-    },
-    {
-        title: Localize.translateLocal('termsStep.shortTermsForm.cashReload'),
-        rightText: Localize.translateLocal('common.na'),
-    },
-    {
-        title: Localize.translateLocal('termsStep.shortTermsForm.atmBalanceInquiry'),
-        subTitle: Localize.translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork'),
-        rightText: Localize.translateLocal('common.na'),
-    },
-    {
-        title: Localize.translateLocal('termsStep.shortTermsForm.customerService'),
-        subTitle: Localize.translateLocal('termsStep.shortTermsForm.automatedOrLive'),
-        rightText: Localize.translateLocal('termsStep.feeAmountZero'),
-    },
-    {
-        title: Localize.translateLocal('termsStep.inactivity'),
-        subTitle: Localize.translateLocal('termsStep.shortTermsForm.afterTwelveMonths'),
-        rightText: Localize.translateLocal('termsStep.feeAmountZero'),
-    },
-];
-
-const getShortTermsSections = () => _.map(termsData, section => (
-    <View style={styles.shortTermsRow} key={section.title}>
-        <View style={[styles.flex4]}>
-            <ExpensifyText>{section.title}</ExpensifyText>
-            {
-                section.subTitle
-                && (
-                    <ExpensifyText style={[styles.textMicroSupporting, styles.mt1]}>
-                        {section.subTitle}
-                    </ExpensifyText>
-                )
-            }
-        </View>
-        <View style={[styles.flex1, styles.termsCenterRight]}>
-            <ExpensifyText style={[styles.textStrong, styles.textAlignRight]}>
-                {section.rightText}
-            </ExpensifyText>
-        </View>
-    </View>
-));
-
 const ShortTermsForm = () => (
     <>
         <ExpensifyText style={styles.mb5}>
             {Localize.translateLocal('termsStep.shortTermsForm.expensifyPaymentsAccount')}
         </ExpensifyText>
-        <View style={[styles.border, styles.p2, styles.mb6]}>
-            {getShortTermsSections()}
 
-            <View style={styles.shortTermsBoldHeadingSection}>
+        <View style={[styles.shortTermsBorder, styles.p2, styles.mb6]}>
+            <View style={[styles.shortTermsRow, styles.mb4]}>
+                <View style={[styles.flex2]}>
+                    <View style={[styles.flexRow, styles.mb1]}>
+                        <ExpensifyText style={styles.textLarge}>{Localize.translateLocal('termsStep.monthlyFee')}</ExpensifyText>
+                    </View>
+                    <View style={styles.flexRow}>
+                        <ExpensifyText style={styles.textXXXLarge}>{Localize.translateLocal('termsStep.feeAmountZero')}</ExpensifyText>
+                    </View>
+                </View>
+                <View style={[styles.flex2]}>
+                    <View style={[styles.flex2]}>
+                        <View style={[styles.flexRow, styles.mb1]}>
+                            <ExpensifyText style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.perPurchase')}</ExpensifyText>
+                        </View>
+                        <View style={styles.flexRow}>
+                            <ExpensifyText style={styles.textXXXLarge}>{Localize.translateLocal('termsStep.feeAmountZero')}</ExpensifyText>
+                        </View>
+                    </View>
+                </View>
+            </View>
+
+            <View style={[styles.shortTermsRow, styles.mb6]}>
+                <View style={[styles.flex2]}>
+                    <View style={[styles.flexRow, styles.mb1]}>
+                        <ExpensifyText style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.atmWithdrawal')}</ExpensifyText>
+                    </View>
+                    <View style={styles.flexRow}>
+                        <ExpensifyText style={styles.textXXXLarge}>{Localize.translateLocal('common.na')}</ExpensifyText>
+                    </View>
+                    <View style={styles.flexRow}>
+                        <ExpensifyText style={styles.textLabelSupporting}>
+                            {Localize.translateLocal('termsStep.shortTermsForm.inNetwork')}
+                        </ExpensifyText>
+                    </View>
+                    <View style={[styles.flexRow, styles.mt1]}>
+                        <ExpensifyText style={styles.textXXXLarge}>{Localize.translateLocal('common.na')}</ExpensifyText>
+                    </View>
+                    <View style={styles.flexRow}>
+                        <ExpensifyText style={styles.textLabelSupporting}>
+                            {Localize.translateLocal('termsStep.shortTermsForm.outOfNetwork')}
+                        </ExpensifyText>
+                    </View>
+                </View>
+                <View style={[styles.flex2]}>
+                    <View style={[styles.flex2]}>
+                        <View style={[styles.flexRow, styles.mb1]}>
+                            <ExpensifyText style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.cashReload')}</ExpensifyText>
+                        </View>
+                        <View style={styles.flexRow}>
+                            <ExpensifyText style={styles.textXXXLarge}>{Localize.translateLocal('common.na')}</ExpensifyText>
+                        </View>
+                    </View>
+                </View>
+            </View>
+
+            <View style={styles.shortTermsHorizontalRule} />
+            <View style={styles.shortTermsRow}>
+                <View style={[styles.flex3, styles.pr4]}>
+                    <ExpensifyText>
+                        {Localize.translateLocal('termsStep.shortTermsForm.atmBalanceInquiry')}
+                        {' '}
+                        {Localize.translateLocal('termsStep.shortTermsForm.inOrOutOfNetwork')}
+                    </ExpensifyText>
+                </View>
+                <View style={styles.flex1}>
+                    <ExpensifyText>
+                        {Localize.translateLocal('common.na')}
+                    </ExpensifyText>
+                </View>
+            </View>
+
+            <View style={styles.shortTermsHorizontalRule} />
+            <View style={styles.shortTermsRow}>
+                <View style={[styles.flex3, styles.pr4]}>
+                    <ExpensifyText>
+                        {Localize.translateLocal('termsStep.shortTermsForm.customerService')}
+                        {' '}
+                        {Localize.translateLocal('termsStep.shortTermsForm.automatedOrLive')}
+                    </ExpensifyText>
+                </View>
+                <View style={styles.flex1}>
+                    <ExpensifyText style={styles.label}>
+                        {Localize.translateLocal('termsStep.feeAmountZero')}
+                    </ExpensifyText>
+                </View>
+            </View>
+
+            <View style={styles.shortTermsHorizontalRule} />
+            <View style={[styles.shortTermsRow, styles.mb4]}>
+                <View style={[styles.flex3, styles.pr4]}>
+                    <ExpensifyText>
+                        {Localize.translateLocal('termsStep.inactivity')}
+                        {' '}
+                        {Localize.translateLocal('termsStep.shortTermsForm.afterTwelveMonths')}
+                    </ExpensifyText>
+                </View>
+                <View style={styles.flex1}>
+                    <ExpensifyText>
+                        {Localize.translateLocal('termsStep.feeAmountZero')}
+                    </ExpensifyText>
+                </View>
+            </View>
+
+            <View style={styles.shortTermsLargeHorizontalRule} />
+            <View style={[styles.shortTermsBoldHeadingSection, styles.mb3]}>
                 <ExpensifyText style={styles.textStrong}>
                     {Localize.translateLocal('termsStep.shortTermsForm.weChargeOneFee')}
                 </ExpensifyText>
             </View>
+
+            <View style={styles.shortTermsHorizontalRule} />
             <View style={styles.shortTermsRow}>
-                <View style={[styles.flex4]}>
-                    <ExpensifyText>{Localize.translateLocal('termsStep.electronicFundsWithdrawal')}</ExpensifyText>
-                    <ExpensifyText style={[styles.textMicroSupporting, styles.mt1]}>
-                        {Localize.translateLocal('termsStep.instant')}
+                <View style={[styles.flex3, styles.pr4]}>
+                    <ExpensifyText>
+                        {Localize.translateLocal('termsStep.electronicFundsWithdrawal')}
+                        {' '}
+                        {Localize.translateLocal('termsStep.shortTermsForm.instant')}
                     </ExpensifyText>
                 </View>
                 <View style={[styles.flex1, styles.termsCenterRight]}>
-                    <ExpensifyText style={[styles.textStrong, styles.textAlignRight]}>
+                    <ExpensifyText style={styles.label}>
                         {Localize.translateLocal('termsStep.electronicFundsInstantFee')}
+                        {' '}
                     </ExpensifyText>
-                    <ExpensifyText style={[styles.textMicroSupporting, styles.mt1, styles.textAlignRight]}>
-                        {Localize.translateLocal('termsStep.electronicFundsInstantFeeMin')}
+                    <ExpensifyText style={styles.label}>
+                        {Localize.translateLocal('termsStep.shortTermsForm.electronicFundsInstantFeeMin')}
                     </ExpensifyText>
                 </View>
             </View>