Add SEO Footer to New Dot (All Platforms)

src/CONST.js

@@ -898,6 +898,37 @@ const CONST = {
         LEAVE_ROOM: 'leaveRoom',
     },
 
+    FOOTER: {
+        EXPENSE_MANAGEMENT_URL: `${USE_EXPENSIFY_URL}/expense-management`,
+        SPEND_MANAGEMENT_URL: `${USE_EXPENSIFY_URL}/spend-management`,
+        EXPENSE_REPORTS_URL: `${USE_EXPENSIFY_URL}/expense-reports`,
+        COMPANY_CARD_URL: `${USE_EXPENSIFY_URL}/company-credit-card`,
+        RECIEPT_SCANNING_URL: `${USE_EXPENSIFY_URL}/receipt-scanning-app`,
+        BILL_PAY_URL: `${USE_EXPENSIFY_URL}/bills`,
+        INVOICES_URL: `${USE_EXPENSIFY_URL}/invoices`,
+        CPA_CARD_URL: `${USE_EXPENSIFY_URL}/cpa-card`,
+        PAYROLL_URL: `${USE_EXPENSIFY_URL}/payroll`,
+        TRAVEL_URL: `${USE_EXPENSIFY_URL}/travel`,
+        EXPENSIFY_APPROVED_URL: `${USE_EXPENSIFY_URL}/accountants`,
+        PRESS_KIT_URL: 'https://we.are.expensify.com/press-kit',
+        SUPPORT_URL: `${USE_EXPENSIFY_URL}/support`,
+        COMMUNITY_URL: 'https://community.expensify.com/',
+        PRIVACY_URL: `${USE_EXPENSIFY_URL}/privacy`,
+        ABOUT_URL: 'https://we.are.expensify.com/',
+        BLOG_URL: 'https://blog.expensify.com/',
+        JOBS_URL: 'https://we.are.expensify.com/apply',
+        ORG_URL: 'https://expensify.org/',
+        INVESTOR_RELATIONS_URL: 'https://ir.expensify.com/',
+    },
+
+    SOCIALS: {
+        PODCAST: 'https://we.are.expensify.com/podcast',
+        TWITTER: 'https://www.twitter.com/expensify',
+        INSTAGRAM: 'https://www.instagram.com/expensify',
+        FACEBOOK: 'https://www.facebook.com/expensify',
+        LINKEDIN: 'https://www.linkedin.com/company/expensify',
+    },
+
     // These split the maximum decimal value of a signed 64-bit number (9,223,372,036,854,775,807) into parts where none of them are too big to fit into a 32-bit number, so that we can
     // generate them each with a random number generator with only 32-bits of precision.
     MAX_64BIT_LEFT_PART: 92233,

src/components/Icon/Expensicons.js

@@ -98,6 +98,14 @@ import Zoom from '../../../assets/images/zoom.svg';
 import FallbackAvatar from '../../../assets/images/avatars/fallback-avatar.svg';
 import FallbackWorkspaceAvatar from '../../../assets/images/avatars/fallback-workspace-avatar.svg';
 import DragAndDrop from '../../../assets/images/drag-and-drop.svg';
+import ExpensifyFooterLogo from '../../../assets/images/expensify-footer-logo.svg';
+import ExpensifyFooterLogoVertical from '../../../assets/images/expensify-footer-logo-vertical.svg';
+import Twitter from '../../../assets/images/social-twitter.svg';
+import Youtube from '../../../assets/images/social-youtube.svg';
+import Facebook from '../../../assets/images/social-facebook.svg';
+import Podcast from '../../../assets/images/social-podcast.svg';
+import Linkedin from '../../../assets/images/social-linkedin.svg';
+import Instagram from '../../../assets/images/social-instagram.svg';
 
 export {
     ActiveRoomAvatar,
@@ -140,6 +148,8 @@ export {
     Exit,
     ExpensifyCard,
     ExpensifyWordmark,
+    ExpensifyFooterLogo,
+    ExpensifyFooterLogoVertical,
     Expand,
     Eye,
     EyeDisabled,
@@ -200,4 +210,10 @@ export {
     Wallet,
     Workspace,
     Zoom,
+    Twitter,
+    Youtube,
+    Facebook,
+    Podcast,
+    Linkedin,
+    Instagram,
 };

src/components/LocalePicker.js

@@ -9,6 +9,7 @@ import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
 import Picker from './Picker';
 import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
 
 const propTypes = {
     /** Indicates which locale the user currently has selected */
@@ -47,6 +48,7 @@ const LocalePicker = (props) => {
             size={props.size}
             value={props.preferredLocale}
             containerStyles={props.size === 'small' ? [styles.pickerContainerSmall] : []}
+            backgroundColor={themeColors.transparent}
         />
     );
 };

src/languages/en.js

@@ -1182,4 +1182,33 @@ export default {
     report: {
         genericAddCommentFailureMessage: 'Unexpected error while posting the comment, please try again later',
     },
+    footer: {
+        features: 'Features',
+        expenseManagement: 'Expense Management',
+        spendManagement: 'Spend Management',
+        expenseReports: 'Expense Reports',
+        companyCreditCard: 'Company Credit Card',
+        receiptScanningApp: 'Receipt Scanning App',
+        billPay: 'Bill Pay',
+        invoicing: 'Invoicing',
+        CPACard: 'CPA Card',
+        payroll: 'Payroll',
+        travel: 'Travel',
+        resources: 'Resources',
+        expensifyApproved: 'ExpensifyApproved!',
+        pressKit: 'Press Kit',
+        support: 'Support',
+        expensifyHelp: 'ExpensifyHelp',
+        community: 'Community',
+        privacy: 'Privacy',
+        learnMore: 'Learn More',
+        aboutExpensify: 'About Expensify',
+        blog: 'Blog',
+        jobs: 'Jobs',
+        expensifyOrg: 'Expensify.org',
+        investorRelations: 'Investor Relations',
+        getStarted: 'Get Started',
+        createAccount: 'Create a new account',
+        logIn: 'Log in',
+    },
 };

src/languages/es.js

@@ -1184,4 +1184,33 @@ export default {
     report: {
         genericAddCommentFailureMessage: 'Error inesperado al agregar el comentario, por favor inténtalo más tarde',
     },
+    footer: {
+        features: 'Características',
+        expenseManagement: 'Gestión de Gastos',
+        spendManagement: 'Control de Gastos',
+        expenseReports: 'Informes de Gastos',
+        companyCreditCard: 'Tarjeta de Crédito de Empresa',
+        receiptScanningApp: 'Aplicación de Escaneado de Recibos',
+        billPay: 'Pago de Facturas',
+        invoicing: 'Facturación',
+        CPACard: 'Tarjeta Para Contables',
+        payroll: 'Nómina',
+        travel: 'Viajes',
+        resources: 'Recursos',
+        expensifyApproved: 'ExpensifyApproved!',
+        pressKit: 'Kit de Prensa',
+        support: 'Soporte',
+        expensifyHelp: 'ExpensifyHelp',
+        community: 'Comunidad',
+        privacy: 'Privacidad',
+        learnMore: 'Más Información',
+        aboutExpensify: 'Acerca de Expensify',
+        blog: 'Blog',
+        jobs: 'Empleo',
+        expensifyOrg: 'Expensify.org',
+        investorRelations: 'Relaciones Con Los Inversores',
+        getStarted: 'Comenzar',
+        createAccount: 'Crear Una Cuenta Nueva',
+        logIn: 'Conectarse',
+    },
 };

src/libs/Navigation/AppNavigator/defaultScreenOptions.js

@@ -1,6 +1,7 @@
 const defaultScreenOptions = {
     cardStyle: {
         overflow: 'visible',
+        flex: 1,
     },
     headerShown: false,
     animationTypeForReplace: 'pop',

src/pages/signin/Licenses.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import {View} from 'react-native';
+import styles from '../../styles/styles';
+import CONST from '../../CONST';
+import Text from '../../components/Text';
+import TextLink from '../../components/TextLink';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import LocalePicker from '../../components/LocalePicker';
+
+const currentYear = new Date().getFullYear();
+
+const Licenses = props => (
+    <>
+        <Text style={[styles.textExtraSmallSupporting, styles.mb4]}>
+            {`© ${currentYear} Expensify`}
+        </Text>
+        <Text style={[styles.textExtraSmallSupporting]}>
+            {props.translate('termsOfUse.phrase5')}
+            <TextLink style={[styles.textExtraSmallSupporting, styles.link]} href={CONST.LICENSES_URL}>
+                {' '}
+                {props.translate('termsOfUse.phrase6')}
+            </TextLink>
+            .
+        </Text>
+        <View style={[styles.mt4, styles.alignItemsCenter, styles.mb2, styles.flexRow, styles.justifyContentBetween]}>
+            <LocalePicker size="small" />
+        </View>
+    </>
+);
+
+Licenses.propTypes = {...withLocalizePropTypes};
+Licenses.displayName = 'Licenses';
+
+export default withLocalize(Licenses);

src/pages/signin/LoginForm.js

@@ -17,7 +17,6 @@ import * as ValidationUtils from '../../libs/ValidationUtils';
 import * as LoginUtils from '../../libs/LoginUtils';
 import withToggleVisibilityView, {toggleVisibilityViewPropTypes} from '../../components/withToggleVisibilityView';
 import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton';
-import OfflineIndicator from '../../components/OfflineIndicator';
 import {withNetwork} from '../../components/OnyxProvider';
 import networkPropTypes from '../../components/networkPropTypes';
 import * as ErrorUtils from '../../libs/ErrorUtils';
@@ -211,7 +210,6 @@ class LoginForm extends React.Component {
                         </View>
                     )
                 }
-                <OfflineIndicator containerStyles={[styles.mv1]} />
             </>
         );
     }

src/pages/signin/PasswordForm.js

@@ -23,8 +23,8 @@ import canFocusInputOnScreenFocus from '../../libs/canFocusInputOnScreenFocus';
 import * as ErrorUtils from '../../libs/ErrorUtils';
 import {withNetwork} from '../../components/OnyxProvider';
 import networkPropTypes from '../../components/networkPropTypes';
-import OfflineIndicator from '../../components/OfflineIndicator';
 import FormHelpMessage from '../../components/FormHelpMessage';
+import Terms from './Terms';
 
 const propTypes = {
     /* Onyx Props */
@@ -225,7 +225,9 @@ class PasswordForm extends React.Component {
                     />
                     <ChangeExpensifyLoginLink onPress={this.clearSignInData} />
                 </View>
-                <OfflineIndicator containerStyles={[styles.mv5]} />
+                <View style={[styles.mt5, styles.signInPageWelcomeTextContainer]}>
+                    <Terms />
+                </View>
             </>
         );
     }