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 : {},
]}
>
-
+