Create SaaStr Landing Page with new DemoSetupPage component

src/ROUTES.js

@@ -22,6 +22,7 @@ export default {
     BANK_ACCOUNT_PERSONAL: 'bank-account/personal',
     getBankAccountRoute: (stepToOpen = '', policyID = '') => `bank-account/${stepToOpen}?policyID=${policyID}`,
     HOME: '',
+    SAASTR_HOME: 'saastr',
     SETTINGS: 'settings',
     SETTINGS_PROFILE: 'settings/profile',
     SETTINGS_SHARE_CODE: 'settings/shareCode',

src/languages/en.js

@@ -239,6 +239,7 @@ export default {
         hero: {
             header: 'Split bills, request payments, and chat with friends.',
             body: 'Welcome to the future of Expensify, your new go-to place for financial collaboration with friends and teammates alike.',
+            demoHeadline: 'Welcome to SaaStr! Hop in to start networking now.',
         },
     },
     reportActionCompose: {

src/languages/es.js

@@ -238,6 +238,7 @@ export default {
         hero: {
             header: 'Divida las facturas, solicite pagos y chatee con sus amigos.',
             body: 'Bienvenido al futuro de Expensify, tu nuevo lugar de referencia para la colaboración financiera con amigos y compañeros de equipo por igual.',
+            demoHeadline: '¡Bienvenido a SaaStr! Entra y empieza a establecer contactos.',
         },
     },
     reportActionCompose: {

src/libs/Navigation/AppNavigator/PublicScreens.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {createStackNavigator} from '@react-navigation/stack';
 import SignInPage from '../../../pages/signin/SignInPage';
+import DemoSetupPage from '../../../pages/signin/DemoSetupPage';
 import ValidateLoginPage from '../../../pages/ValidateLoginPage';
 import LogInWithShortLivedAuthTokenPage from '../../../pages/LogInWithShortLivedAuthTokenPage';
 import SCREENS from '../../../SCREENS';
@@ -17,6 +18,11 @@ function PublicScreens() {
                 options={defaultScreenOptions}
                 component={SignInPage}
             />
+            <RootStack.Screen
+                name="SaaStrHome"
+                options={defaultScreenOptions}
+                component={DemoSetupPage}
+            />
             <RootStack.Screen
                 name={SCREENS.TRANSITION_BETWEEN_APPS}
                 options={defaultScreenOptions}

src/libs/Navigation/linkingConfig.js

@@ -14,6 +14,7 @@ export default {
             [SCREENS.TRANSITION_BETWEEN_APPS]: ROUTES.TRANSITION_BETWEEN_APPS,
             Concierge: ROUTES.CONCIERGE,
             [SCREENS.REPORT_ATTACHMENTS]: ROUTES.REPORT_ATTACHMENTS,
+            SaaStrHome: ROUTES.SAASTR_HOME,
 
             // Sidebar
             [SCREENS.HOME]: {

src/pages/signin/DemoSetupPage.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import SignInPage from './SignInPage';
+import useLocalize from '../../hooks/useLocalize';
+
+function DemoSetupPage() {
+    const {translate} = useLocalize();
+    return <SignInPage customHeadline={translate('login.hero.demoHeadline')} />;
+}
+
+DemoSetupPage.displayName = 'DemoSetupPage';
+
+export default DemoSetupPage;

src/pages/signin/SignInHeroCopy.js

@@ -1,4 +1,5 @@
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
 import React from 'react';
 import Text from '../../components/Text';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
@@ -9,10 +10,16 @@ import styles from '../../styles/styles';
 import variables from '../../styles/variables';
 
 const propTypes = {
+    /** Override the green headline copy */
+    customHeadline: PropTypes.string,
+
     ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
 };
 
+const defaultProps = {
+    customHeadline: '',
+};
 function SignInHeroCopy(props) {
     return (
         <View style={[styles.flex1, styles.alignSelfCenter, styles.gap7]}>
@@ -23,7 +30,7 @@ function SignInHeroCopy(props) {
                     props.isLargeScreenWidth && StyleUtils.getFontSizeStyle(variables.fontSizeSignInHeroLarge),
                 ]}
             >
-                {props.translate('login.hero.header')}
+                {props.customHeadline || props.translate('login.hero.header')}
             </Text>
             <Text style={[styles.loginHeroBody]}>{props.translate('login.hero.body')}</Text>
         </View>
@@ -32,5 +39,6 @@ function SignInHeroCopy(props) {
 
 SignInHeroCopy.displayName = 'SignInHeroCopy';
 SignInHeroCopy.propTypes = propTypes;
+SignInHeroCopy.defaultProps = defaultProps;
 
 export default compose(withWindowDimensions, withLocalize)(SignInHeroCopy);

src/pages/signin/SignInPage.js

@@ -45,11 +45,15 @@ const propTypes = {
         twoFactorAuthCode: PropTypes.string,
         validateCode: PropTypes.string,
     }),
+
+    /** Override the green headline copy */
+    customHeadline: PropTypes.string,
 };
 
 const defaultProps = {
     account: {},
     credentials: {},
+    customHeadline: '',
 };
 
 /**
@@ -77,7 +81,7 @@ function getRenderOptions({hasLogin, hasValidateCode, hasAccount, isPrimaryLogin
     };
 }
 
-function SignInPage({credentials, account}) {
+function SignInPage({credentials, account, customHeadline}) {
     const {translate, formatPhoneNumber} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
     const safeAreaInsets = useSafeAreaInsets();
@@ -100,8 +104,9 @@ function SignInPage({credentials, account}) {
 
     let welcomeHeader = '';
     let welcomeText = '';
+    const headerText = customHeadline || translate('login.hero.header');
     if (shouldShowLoginForm) {
-        welcomeHeader = isSmallScreenWidth ? translate('login.hero.header') : translate('welcomeText.getStarted');
+        welcomeHeader = isSmallScreenWidth ? headerText : translate('welcomeText.getStarted');
         welcomeText = isSmallScreenWidth ? translate('welcomeText.getStarted') : '';
     } else if (shouldShowValidateCodeForm) {
         if (account.requiresTwoFactorAuth) {
@@ -126,7 +131,7 @@ function SignInPage({credentials, account}) {
             }
         }
     } else if (shouldShowUnlinkLoginForm || shouldShowEmailDeliveryFailurePage) {
-        welcomeHeader = isSmallScreenWidth ? translate('login.hero.header') : translate('welcomeText.welcomeBack');
+        welcomeHeader = isSmallScreenWidth ? headerText : translate('welcomeText.welcomeBack');
 
         // Don't show any welcome text if we're showing the user the email delivery failed view
         if (shouldShowEmailDeliveryFailurePage) {
@@ -143,6 +148,7 @@ function SignInPage({credentials, account}) {
                 welcomeText={welcomeText}
                 shouldShowWelcomeHeader={shouldShowWelcomeHeader || !isSmallScreenWidth}
                 shouldShowWelcomeText={shouldShowWelcomeText}
+                customHeadline={customHeadline}
             >
                 {/* LoginForm must use the isVisible prop. This keeps it mounted, but visually hidden
                     so that password managers can access the values. Conditionally rendering this component will break this feature. */}

src/pages/signin/SignInPageHero.js

@@ -1,4 +1,5 @@
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
 import React from 'react';
 import * as StyleUtils from '../../styles/StyleUtils';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
@@ -8,9 +9,16 @@ import styles from '../../styles/styles';
 import variables from '../../styles/variables';
 
 const propTypes = {
+    /** Override the green headline copy */
+    customHeadline: PropTypes.string,
+
     ...windowDimensionsPropTypes,
 };
 
+const defaultProps = {
+    customHeadline: '',
+};
+
 function SignInPageHero(props) {
     return (
         <View
@@ -25,13 +33,14 @@ function SignInPageHero(props) {
         >
             <View style={[styles.flex1, styles.alignSelfCenter, styles.gap7]}>
                 <SignInHeroImage />
-                <SignInHeroCopy />
+                <SignInHeroCopy customHeadline={props.customHeadline} />
             </View>
         </View>
     );
 }
 
 SignInPageHero.displayName = 'SignInPageHero';
 SignInPageHero.propTypes = propTypes;
+SignInPageHero.defaultProps = defaultProps;
 
 export default withWindowDimensions(SignInPageHero);

src/pages/signin/SignInPageLayout/index.js

@@ -35,10 +35,17 @@ const propTypes = {
     /** Whether to show welcome header on a particular page */
     shouldShowWelcomeHeader: PropTypes.bool.isRequired,
 
+    /** Override the green headline copy */
+    customHeadline: PropTypes.string,
+
     ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
 };
 
+const defaultProps = {
+    customHeadline: '',
+};
+
 function SignInPageLayout(props) {
     const scrollViewRef = useRef();
     const prevPreferredLocale = usePrevious(props.preferredLocale);
@@ -108,7 +115,7 @@ function SignInPageLayout(props) {
                                         props.isLargeScreenWidth ? styles.ph25 : {},
                                     ]}
                                 >
-                                    <SignInPageHero />
+                                    <SignInPageHero customHeadline={props.customHeadline} />
                                     <Footer scrollPageToTop={scrollPageToTop} />
                                 </View>
                             </View>
@@ -147,5 +154,6 @@ function SignInPageLayout(props) {
 
 SignInPageLayout.propTypes = propTypes;
 SignInPageLayout.displayName = 'SignInPageLayout';
+SignInPageLayout.defaultProps = defaultProps;
 
 export default compose(withWindowDimensions, withSafeAreaInsets, withLocalize)(SignInPageLayout);