From 1d3f61150112af84bde1f5e681e7994a3f9a7e91 Mon Sep 17 00:00:00 2001 From: haraldox Date: Tue, 30 Jan 2018 14:35:30 +0100 Subject: ADDED embedded invite screen in settings reuses component `Invite` --- src/app.js | 2 + src/components/auth/Invite.js | 24 +++++++---- .../settings/navigation/SettingsNavigation.js | 2 +- src/components/ui/Link.js | 2 +- src/containers/auth/InviteScreen.js | 11 +++-- src/containers/settings/InviteScreen.js | 48 ++++++++++++++++++++++ src/styles/invite.scss | 15 +++++++ src/styles/main.scss | 1 + 8 files changed, 90 insertions(+), 15 deletions(-) create mode 100644 src/containers/settings/InviteScreen.js create mode 100644 src/styles/invite.scss diff --git a/src/app.js b/src/app.js index 8e62776d2..edcf273dc 100644 --- a/src/app.js +++ b/src/app.js @@ -27,6 +27,7 @@ import EditServiceScreen from './containers/settings/EditServiceScreen'; import AccountScreen from './containers/settings/AccountScreen'; import EditUserScreen from './containers/settings/EditUserScreen'; import EditSettingsScreen from './containers/settings/EditSettingsScreen'; +import InviteSettingsScreen from './containers/settings/InviteScreen'; import WelcomeScreen from './containers/auth/WelcomeScreen'; import LoginScreen from './containers/auth/LoginScreen'; import PasswordScreen from './containers/auth/PasswordScreen'; @@ -74,6 +75,7 @@ window.addEventListener('load', () => { + diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js index fa83837ac..14dd6483d 100644 --- a/src/components/auth/Invite.js +++ b/src/components/auth/Invite.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; import { Link } from 'react-router'; +import classnames from 'classnames'; import Form from '../../lib/Form'; import { email } from '../../helpers/validation-helpers'; @@ -37,10 +38,12 @@ export default class Invite extends Component { static propTypes = { onSubmit: PropTypes.func.isRequired, from: PropTypes.string, + embed: PropTypes.bool, }; static defaultProps = { from: '/', + embed: false, }; static contextTypes = { @@ -78,21 +81,25 @@ export default class Invite extends Component { render() { const { form } = this; const { intl } = this.context; - const { from } = this.props; + const { from, embed } = this.props; const atLeastOneEmailAddress = form.$('invite') .map(invite => invite.$('email').value) .some(emailValue => emailValue.trim() !== ''); + const sendButtonClassName = classnames({ + auth__button: true, + 'invite__embed--button': embed, + }); + return ( -
this.submit(e)}> - -

+ />)} +

{intl.formatMessage(messages.headline)}

{form.$('invite').map(invite => ( @@ -105,18 +112,17 @@ export default class Invite extends Component { ))}
); } } diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js index 3b4ada768..75ace53cc 100644 --- a/src/components/settings/navigation/SettingsNavigation.js +++ b/src/components/settings/navigation/SettingsNavigation.js @@ -75,7 +75,7 @@ export default class SettingsNavigation extends Component { {intl.formatMessage(messages.settings)} diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js index 693be84ea..aabb9e0a6 100644 --- a/src/components/ui/Link.js +++ b/src/components/ui/Link.js @@ -35,7 +35,7 @@ export default class Link extends Component { filter = `${to}`; } - const match = matchRoute(filter, router.location.pathname); + const match = matchRoute(filter, router.location.pathname + router.location.search); const linkClasses = classnames({ [`${className}`]: true, diff --git a/src/containers/auth/InviteScreen.js b/src/containers/auth/InviteScreen.js index 42a00f1fc..7102df0b9 100644 --- a/src/containers/auth/InviteScreen.js +++ b/src/containers/auth/InviteScreen.js @@ -17,10 +17,13 @@ export default class InviteScreen extends Component { } = this.props; return ( - +
+ +
); } } diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js new file mode 100644 index 000000000..5a7c64f73 --- /dev/null +++ b/src/containers/settings/InviteScreen.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { inject, observer } from 'mobx-react'; +import Invite from '../../components/auth/Invite'; +import { gaPage } from '../../lib/analytics'; + +@inject('stores', 'actions') @observer +export default class InviteScreen extends Component { + componentDidMount() { + gaPage('Settings/Invite'); + } + + render() { + const { + actions, + location, + } = this.props; + + return ( +
+
+ {/*

{intl.formatMessage(messages.headline)}

*/} +

Invite Friends

+
+
+ +
+
+ ); + } +} + +InviteScreen.wrappedComponent.propTypes = { + actions: PropTypes.shape({ + user: PropTypes.shape({ + invite: PropTypes.func.isRequired, + }).isRequired, + }).isRequired, + location: PropTypes.shape({ + query: PropTypes.shape({ + from: PropTypes.string, + }), + }).isRequired, +}; diff --git a/src/styles/invite.scss b/src/styles/invite.scss new file mode 100644 index 000000000..bfb1a4b6b --- /dev/null +++ b/src/styles/invite.scss @@ -0,0 +1,15 @@ +.invite__form { + /* play with values to see different layouts */ + // display: flex; + align-items: center; + align-self: center; + justify-content: center; +} + +.invite__embed { + text-align: center; +} + +.invite__embed--button { + width: 100%; +} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 261396f6f..446bdca14 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -27,6 +27,7 @@ $mdi-font-path: '../node_modules/mdi/fonts'; @import './subscription.scss'; @import './subscription-popup.scss'; @import './content-tabs.scss'; +@import './invite.scss'; // form @import './input.scss'; -- cgit v1.2.3-54-g00ecf