diff --git a/src/ROUTES.js b/src/ROUTES.js index 6c0365e40568..ad93ce933099 100644 --- a/src/ROUTES.js +++ b/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', diff --git a/src/languages/en.js b/src/languages/en.js index 229166a3f858..fbbabe073350 100755 --- a/src/languages/en.js +++ b/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: { diff --git a/src/languages/es.js b/src/languages/es.js index 0e24a386cd14..3c0da4f5b4e0 100644 --- a/src/languages/es.js +++ b/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: { diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.js b/src/libs/Navigation/AppNavigator/PublicScreens.js index 40325918451a..8cd7cbe7e6b2 100644 --- a/src/libs/Navigation/AppNavigator/PublicScreens.js +++ b/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} /> + ; +} + +DemoSetupPage.displayName = 'DemoSetupPage'; + +export default DemoSetupPage; diff --git a/src/pages/signin/SignInHeroCopy.js b/src/pages/signin/SignInHeroCopy.js index 204876c25398..93951c0b9236 100644 --- a/src/pages/signin/SignInHeroCopy.js +++ b/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 ( @@ -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')} {props.translate('login.hero.body')} @@ -32,5 +39,6 @@ function SignInHeroCopy(props) { SignInHeroCopy.displayName = 'SignInHeroCopy'; SignInHeroCopy.propTypes = propTypes; +SignInHeroCopy.defaultProps = defaultProps; export default compose(withWindowDimensions, withLocalize)(SignInHeroCopy); diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js index f6eb4f9306f3..67d636bd1f80 100644 --- a/src/pages/signin/SignInPage.js +++ b/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. */} diff --git a/src/pages/signin/SignInPageHero.js b/src/pages/signin/SignInPageHero.js index 3af7a8fb1a1e..eb2a275a49f7 100644 --- a/src/pages/signin/SignInPageHero.js +++ b/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 ( - + ); @@ -33,5 +41,6 @@ function SignInPageHero(props) { SignInPageHero.displayName = 'SignInPageHero'; SignInPageHero.propTypes = propTypes; +SignInPageHero.defaultProps = defaultProps; export default withWindowDimensions(SignInPageHero); diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js index 12f223de33f7..26b7716627cd 100644 --- a/src/pages/signin/SignInPageLayout/index.js +++ b/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 : {}, ]} > - +