-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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.
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
Conversation
@@ -9,10 +10,16 @@ import styles from '../../styles/styles'; | |||
import variables from '../../styles/variables'; | |||
|
|||
const propTypes = { | |||
/** Override the green headline copy */ | |||
customHeadline: PropTypes.string, |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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)}
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good to me 👍
Reviewer Checklist
Screenshots/Videos |
Co-authored-by: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! 🚀
@aldo-expensify Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
cc @Beamanator if you want to review for SaaStr project! |
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
Innnnteresting, I didn't know we had a separate issue for this, I made my own version of this solution here - #24535 FYI we're going to have to do a very similar thing for SBE 😅 |
🚀 Deployed to staging by https://github.com/aldo-expensify in version: 1.3.56-0 🚀
|
🚀 Deployed to production by https://github.com/roryabraham in version: 1.3.56-24 🚀
|
Details
Creates the landing page located at
/saastr
I created a new component
DemoSetupPage
as outlined in the Design Doc and refactored the Sign In Page so we can pass in a custom headline for future conferences. This can be done in two files by changinglogin.hero.demoHeadline
inen.js
andes.js
:Desktop:
Mobile:
Spanish:
NOTE
For future Demos, we may want to make this modification to passing in the headerPath:
#24649 (comment)
Fixed Issues
$ https://github.com/Expensify/Expensify/issues/308667
Tests
THIS IS A WEB-ONLY CHANGE
For Web and mWeb:
For Native and Desktop:
Offline tests
QA Steps
For Web and mWeb:
For Native and Desktop:
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)/** comment above it */
this
properly so there are no scoping issues (i.e. foronClick={this.submit}
the methodthis.submit
should be bound tothis
in the constructor)this
are necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);
ifthis.submit
is never passed to a component event handler likeonClick
)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Web
Desktop:
Mobile:
Mobile Web - Chrome
Mobile Web - Safari
Desktop
N/A - Custom Route
iOS
N/A - Custom Route
Android
N/A - Custom Route