Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create SaaStr Landing Page with new DemoSetupPage component #24649

Merged
merged 6 commits into from
Aug 17, 2023
Merged

Create SaaStr Landing Page with new DemoSetupPage component #24649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0032f16
Add /SaaStr Route and Mobile Heading
grgia Aug 16, 2023
1609b9e
Pass customHeadline down for desktop screens
grgia Aug 16, 2023
1803a2e
Commit DemoSetUp component
grgia Aug 16, 2023
0310dbb
Add translations
grgia Aug 16, 2023
4fb1754
prettier
grgia Aug 16, 2023
3c492b5
Update src/pages/signin/DemoSetupPage.js
grgia Aug 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/ROUTES.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions src/languages/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
1 change: 1 addition & 0 deletions src/languages/es.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
6 changes: 6 additions & 0 deletions src/libs/Navigation/AppNavigator/PublicScreens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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}
Expand Down
1 change: 1 addition & 0 deletions src/libs/Navigation/linkingConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]: {
Expand Down
12 changes: 12 additions & 0 deletions src/pages/signin/DemoSetupPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
10 changes: 9 additions & 1 deletion src/pages/signin/SignInHeroCopy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -9,10 +10,16 @@ import styles from '../../styles/styles';
import variables from '../../styles/variables';

const propTypes = {
/** Override the green headline copy */
customHeadline: PropTypes.string,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB. I think this should be headline or headlineText and marked as required.

The better alternative is to just make the default value props.translate('login.hero.header') but I don't think this is possible, we can't make the default value of one prop dependent on another prop.

Copy link
Contributor Author

@grgia grgia Aug 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but I don't think this is possible, we can't make the default value of one prop dependent on another prop.

Yeah this was my thought as well- I agree it would be better as required and then just pass the headline function as an option to the react navigator stack
I think for now, we can leave this as is, as it'll only be used for conferences and creating custom sign in pages for events such as in this PR

Copy link
Contributor

@aldo-expensify aldo-expensify Aug 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB too, but if you wanted to do what @s77rt is suggesting, headline would receive the translation key and default to login.hero.header

When you use the component in the Demo page, you would pass the prop like:

<SignInPage customHeadline="login.hero.demoHeadline" />

instead of

<SignInPage customHeadline={translate('login.hero.demoHeadline')} />

but again, NAB, I don't feel like this is better or worse, just an alternative

PD:

                {props.customHeadline || props.translate('login.hero.header')}

would become

                {props.translate(props.headline)}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be honest, I don't think that this change is worth blocking the PR since this is a critical issue

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll add a link to this comment in the description of this PR for the next time we update the demos?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good to me 👍


...windowDimensionsPropTypes,
...withLocalizePropTypes,
};

const defaultProps = {
customHeadline: '',
};
function SignInHeroCopy(props) {
return (
<View style={[styles.flex1, styles.alignSelfCenter, styles.gap7]}>
Expand All @@ -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>
Expand All @@ -32,5 +39,6 @@ function SignInHeroCopy(props) {

SignInHeroCopy.displayName = 'SignInHeroCopy';
SignInHeroCopy.propTypes = propTypes;
SignInHeroCopy.defaultProps = defaultProps;

export default compose(withWindowDimensions, withLocalize)(SignInHeroCopy);
12 changes: 9 additions & 3 deletions src/pages/signin/SignInPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
};

/**
Expand Down Expand Up @@ -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();
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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. */}
Expand Down
11 changes: 10 additions & 1 deletion src/pages/signin/SignInPageHero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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
Expand All @@ -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);
10 changes: 9 additions & 1 deletion src/pages/signin/SignInPageLayout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -108,7 +115,7 @@ function SignInPageLayout(props) {
props.isLargeScreenWidth ? styles.ph25 : {},
]}
>
<SignInPageHero />
<SignInPageHero customHeadline={props.customHeadline} />
<Footer scrollPageToTop={scrollPageToTop} />
</View>
</View>
Expand Down Expand Up @@ -147,5 +154,6 @@ function SignInPageLayout(props) {

SignInPageLayout.propTypes = propTypes;
SignInPageLayout.displayName = 'SignInPageLayout';
SignInPageLayout.defaultProps = defaultProps;

export default compose(withWindowDimensions, withSafeAreaInsets, withLocalize)(SignInPageLayout);