Merge pull request Expensify#26278 from Expensify/beaman-updateLandin…

…gPageCopyForConfs Update landing page copy (below headline) for SaaStr & SBE Conferences
margelo · Sep 1, 2023 · ec95ab0 · ec95ab0
2 parents 9b48540 + 284456f
commit ec95ab0
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 9 deletions.
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -1676,9 +1676,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
@@ -2164,9 +2164,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
@@ -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
@@ -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 (
         <View style={[styles.flex1, styles.alignSelfCenter, styles.gap7]}>
@@ -32,7 +37,7 @@ function SignInHeroCopy(props) {
             >
                 {props.customHeadline || props.translate('login.hero.header')}
             </Text>
-            <Text style={[styles.loginHeroBody]}>{props.translate('login.hero.body')}</Text>
+            <Text style={[styles.loginHeroBody]}>{props.customHeroBody || props.translate('login.hero.body')}</Text>
         </View>
     );
 }

diff --git 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
@@ -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) {
         >
             <View style={[styles.flex1, styles.alignSelfCenter, styles.gap7]}>
                 <SignInHeroImage />
-                <SignInHeroCopy customHeadline={props.customHeadline} />
+                <SignInHeroCopy
+                    customHeadline={props.customHeadline}
+                    customHeroBody={props.customHeroBody}
+                />
             </View>
         </View>
     );

diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
@@ -44,13 +44,17 @@ 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 = {
     innerRef: () => {},
     customHeadline: '',
+    customHeroBody: '',
 };
 
 function SignInPageLayout(props) {
@@ -133,7 +137,10 @@ function SignInPageLayout(props) {
                                         props.isLargeScreenWidth ? styles.ph25 : {},
                                     ]}
                                 >
-                                    <SignInPageHero customHeadline={props.customHeadline} />
+                                    <SignInPageHero
+                                        customHeadline={props.customHeadline}
+                                        customHeroBody={props.customHeroBody}
+                                    />
                                     <Footer scrollPageToTop={scrollPageToTop} />
                                 </View>
                             </View>