maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-28 20:53:24 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show reminder modal also for missing Stripe account

Browse source
This commit is contained in:
Kimmo Puputti 2018-03-02 10:38:39 +02:00
parent c0520d681b
commit 4cbc3a6013
3 changed files with 84 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Topbar/Topbar.css
View file

@ -207,6 +207,10 @@
@apply --marketplaceModalIconStyles;
}
.reminderModalLinkButton {
@apply --marketplaceButtonStylesPrimary;
}
.genericError {
position: fixed;
top: calc(var(--topbarHeight) + 15px);

104
src/components/Topbar/Topbar.js
View file

@ -78,6 +78,72 @@ GenericError.propTypes = {
show: bool.isRequired,
};
const ReminderModalContent = props => {
const {
currentUser,
email,
resendErrorMessage,
sendVerificationEmailInProgress,
resendEmailLink,
fixEmailLink,
} = props;
const emailVerificationMissingContent = (
<div>
<IconEmailAttention className={css.modalIcon} />
<p className={css.modalTitle}>
<FormattedMessage id="Topbar.verifyEmailTitle" />
</p>
<p className={css.modalMessage}>
<FormattedMessage id="Topbar.verifyEmailText" />
</p>
<p className={css.modalMessage}>
<FormattedMessage id="Topbar.checkInbox" values={{ email }} />
</p>
{resendErrorMessage}
<div className={css.bottomWrapper}>
<p className={css.helperText}>
{sendVerificationEmailInProgress ? (
<FormattedMessage id="Topbar.sendingEmail" />
) : (
<FormattedMessage id="Topbar.resendEmail" values={{ resendEmailLink }} />
)}
</p>
<p className={css.helperText}>
<FormattedMessage id="Topbar.fixEmail" values={{ fixEmailLink }} />
</p>
</div>
</div>
);
const stripeAccountMissingContent = (
<div>
<p className={css.modalTitle}>
<FormattedMessage id="Topbar.missingStripeAccountTitle" />
</p>
<p className={css.modalMessage}>
<FormattedMessage id="Topbar.missingStripeAccountText" />
</p>
<div className={css.bottomWrapper}>
<NamedLink className={css.reminderModalLinkButton} name="PayoutPreferencesPage">
<FormattedMessage id="Topbar.gotoPaymentSettings" />
</NamedLink>
</div>
</div>
);
const currentUserLoaded = currentUser && currentUser.id;
let content = null;
if (currentUserLoaded && !currentUser.attributes.emailVerified) {
content = emailVerificationMissingContent;
} else if (currentUserLoaded && !currentUser.attributes.stripeConnected) {
content = stripeAccountMissingContent;
}
return content;
};
class TopbarComponent extends Component {
constructor(props) {
super(props);
@ -115,6 +181,8 @@ class TopbarComponent extends Component {
// Track if path changes inside Page level component
const pathChanged = newLocation.pathname !== this.props.location.pathname;
const emailUnverified = !!currentUser.id && !currentUser.attributes.emailVerified;
const stripeAccountMissing = !!currentUser.id && !currentUser.attributes.stripeConnected;
const infoMissing = emailUnverified || stripeAccountMissing;
const notRemindedYet =
!this.state.showMissingInformationReminder && !this.state.hasSeenMissingInformationReminder;
const showOnPathChange = notRemindedYet || pathChanged;
@ -132,7 +200,7 @@ class TopbarComponent extends Component {
const isNotWhitelisted = !whitelistedPaths.includes(newLocation.pathname);
// Show reminder
if (emailUnverified && isNotWhitelisted && hasListingsOrOrders && showOnPathChange) {
if (infoMissing && isNotWhitelisted && hasListingsOrOrders && showOnPathChange) {
this.setState({ showMissingInformationReminder: true });
}
}
@ -343,32 +411,14 @@ class TopbarComponent extends Component {
onManageDisableScrolling={onManageDisableScrolling}
closeButtonMessage={closeButtonMessage}
>
<div className={css.verifyEmailContent}>
<IconEmailAttention className={css.modalIcon} />
<p className={css.modalTitle}>
<FormattedMessage id="Topbar.verifyEmailTitle" />
</p>
<p className={css.modalMessage}>
<FormattedMessage id="Topbar.verifyEmailText" />
</p>
<p className={css.modalMessage}>
<FormattedMessage id="Topbar.checkInbox" values={{ email }} />
</p>
{resendErrorMessage}
<div className={css.bottomWrapper}>
<p className={css.helperText}>
{sendVerificationEmailInProgress ? (
<FormattedMessage id="Topbar.sendingEmail" />
) : (
<FormattedMessage id="Topbar.resendEmail" values={{ resendEmailLink }} />
)}
</p>
<p className={css.helperText}>
<FormattedMessage id="Topbar.fixEmail" values={{ fixEmailLink }} />
</p>
</div>
</div>
<ReminderModalContent
currentUser={currentUser}
email={email}
resendErrorMessage={resendErrorMessage}
sendVerificationEmailInProgress={sendVerificationEmailInProgress}
resendEmailLink={resendEmailLink}
fixEmailLink={fixEmailLink}
/>
</Modal>
<GenericError show={showGenericError} />
</div>

3
src/translations/en.json
View file

@ -636,8 +636,11 @@
"Topbar.fixEmail": "Whoops, typo in your email? {fixEmailLink}",
"Topbar.fixEmailLinkText": "Fix it.",
"Topbar.genericError": "Oh no, something went wrong. Please check your network connection and try again.",
"Topbar.gotoPaymentSettings": "Add payment details",
"Topbar.logoIcon": "Go to homepage",
"Topbar.menuIcon": "Open menu",
"Topbar.missingStripeAccountText": "You have listings but your payment details are missing. Your listings cannot be booked until the details are saved.",
"Topbar.missingStripeAccountTitle": "Payment details missing",
"Topbar.mobileSearchHelp": "Tip: You can also search saunas by zip code, for example \"00500\" or city district – \"Sörnäinen\".",
"Topbar.resendEmail": "Didn't get the email? {resendEmailLink}",
"Topbar.resendEmailLinkText": "Resend it.",