diff --git a/src/languages/en.js b/src/languages/en.js index e36cb9539b73..59ddc2c7fe00 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -1667,9 +1667,11 @@ export default { demos: { saastr: { signInWelcome: 'Welcome to SaaStr! Hop in to start networking now.', + heroBody: 'Use New Expensify for event updates, networking, social chatter, and to get paid back for lunch!', }, sbe: { signInWelcome: 'Welcome to Small Business Expo! Get paid back for your ride.', + heroBody: 'Use New Expensify for event updates, networking, social chatter, and to get paid back for your ride to or from the show!', }, }, }; diff --git a/src/languages/es.js b/src/languages/es.js index aee7351f0067..a05904a41537 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -2155,9 +2155,12 @@ export default { demos: { saastr: { signInWelcome: '¡Bienvenido a SaaStr! Entra y empieza a establecer contactos.', + heroBody: 'Utiliza New Expensify para estar al día de los eventos, establecer contactos, charlar en las redes sociales, ¡y para que te devuelvan el dinero de la comida!', }, sbe: { signInWelcome: '¡Bienvenido a Small Business Expo! Recupera el dinero de tu viaje.', + heroBody: + 'Utiliza New Expensify para estar al día de los eventos, establecer contactos, charlar en las redes sociales y para que te paguen el viaje de ida y vuelta a la conferencia.', }, }, }; diff --git a/src/libs/actions/DemoActions.js b/src/libs/actions/DemoActions.js index aa2b43824f91..fc4d2ece4b52 100644 --- a/src/libs/actions/DemoActions.js +++ b/src/libs/actions/DemoActions.js @@ -79,14 +79,24 @@ function runDemoByURL(url = '') { } } -function getHeadlineKeyByDemoInfo(demoInfo = {}) { +/** + * @param {Object} demoInfo + * @returns {Object} + */ +function getCustomTextForDemo(demoInfo = {}) { if (lodashGet(demoInfo, 'saastr.isBeginningDemo')) { - return Localize.translateLocal('demos.saastr.signInWelcome'); + return { + customHeadline: Localize.translateLocal('demos.saastr.signInWelcome'), + customHeroBody: Localize.translateLocal('demos.saastr.heroBody'), + }; } if (lodashGet(demoInfo, 'sbe.isBeginningDemo')) { - return Localize.translateLocal('demos.sbe.signInWelcome'); + return { + customHeadline: Localize.translateLocal('demos.sbe.signInWelcome'), + customHeroBody: Localize.translateLocal('demos.sbe.heroBody'), + }; } - return ''; + return {}; } -export {runSaastrDemo, runSbeDemo, runDemoByURL, getHeadlineKeyByDemoInfo}; +export {runSaastrDemo, runSbeDemo, runDemoByURL, getCustomTextForDemo}; diff --git a/src/pages/signin/SignInHeroCopy.js b/src/pages/signin/SignInHeroCopy.js index 93951c0b9236..c2caa3ea1296 100644 --- a/src/pages/signin/SignInHeroCopy.js +++ b/src/pages/signin/SignInHeroCopy.js @@ -13,13 +13,18 @@ const propTypes = { /** Override the green headline copy */ customHeadline: PropTypes.string, + /** Override the smaller hero body copy below the headline */ + customHeroBody: PropTypes.string, + ...windowDimensionsPropTypes, ...withLocalizePropTypes, }; const defaultProps = { customHeadline: '', + customHeroBody: '', }; + function SignInHeroCopy(props) { return ( @@ -32,7 +37,7 @@ function SignInHeroCopy(props) { > {props.customHeadline || props.translate('login.hero.header')} - {props.translate('login.hero.body')} + {props.customHeroBody || props.translate('login.hero.body')} ); } diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js index 21a92bce41c0..892c2e0faaed 100644 --- a/src/pages/signin/SignInPage.js +++ b/src/pages/signin/SignInPage.js @@ -115,7 +115,7 @@ function SignInPage({credentials, account, isInModal, demoInfo}) { let welcomeHeader = ''; let welcomeText = ''; - const customHeadline = DemoActions.getHeadlineKeyByDemoInfo(demoInfo); + const {customHeadline, customHeroBody} = DemoActions.getCustomTextForDemo(demoInfo); const headerText = customHeadline || translate('login.hero.header'); if (shouldShowLoginForm) { welcomeHeader = isSmallScreenWidth ? headerText : translate('welcomeText.getStarted'); @@ -165,6 +165,7 @@ function SignInPage({credentials, account, isInModal, demoInfo}) { ref={signInPageLayoutRef} isInModal={isInModal} customHeadline={customHeadline} + customHeroBody={customHeroBody} > {/* 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 eb2a275a49f7..89e9088d12f2 100644 --- a/src/pages/signin/SignInPageHero.js +++ b/src/pages/signin/SignInPageHero.js @@ -12,11 +12,15 @@ const propTypes = { /** Override the green headline copy */ customHeadline: PropTypes.string, + /** Override the smaller hero body copy below the headline */ + customHeroBody: PropTypes.string, + ...windowDimensionsPropTypes, }; const defaultProps = { customHeadline: '', + customHeroBody: '', }; function SignInPageHero(props) { @@ -33,7 +37,10 @@ function SignInPageHero(props) { > - + ); diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js index 52a8875a8e04..03b286727afb 100644 --- a/src/pages/signin/SignInPageLayout/index.js +++ b/src/pages/signin/SignInPageLayout/index.js @@ -44,6 +44,9 @@ const propTypes = { /** Override the green headline copy */ customHeadline: PropTypes.string, + /** Override the smaller hero body copy below the headline */ + customHeroBody: PropTypes.string, + ...windowDimensionsPropTypes, ...withLocalizePropTypes, }; @@ -51,6 +54,7 @@ const propTypes = { const defaultProps = { innerRef: () => {}, customHeadline: '', + customHeroBody: '', }; function SignInPageLayout(props) { @@ -133,7 +137,10 @@ function SignInPageLayout(props) { props.isLargeScreenWidth ? styles.ph25 : {}, ]} > - +