Updated Introduction/onboarding flow

• Updated: - Introduction/onboarding flow • Added: - autoJoinGroup to default "Introduce Yourself" group in gab.com if you post the welcome post in introduction last slide
2020-07-14 22:31:54 -05:00 · 2020-07-14 22:31:54 -05:00 · de834cd586
commit de834cd586
parent 0eb3ae2dfa
11 changed files with 236 additions and 65 deletions
--- a/app/controllers/api/v1/statuses_controller.rb
+++ b/app/controllers/api/v1/statuses_controller.rb
@ -56,6 +56,7 @@ class Api::V1::StatusesController < Api::BaseController
    @status = PostStatusService.new.call(current_user.account,
                                         text: status_params[:status],
                                         markdown: markdown,
+                                         autoJoinGroup: status_params[:autoJoinGroup],
                                         thread: status_params[:in_reply_to_id].blank? ? nil : Status.find(status_params[:in_reply_to_id]),
                                         media_ids: status_params[:media_ids],
                                         sensitive: status_params[:sensitive],
@ -109,6 +110,7 @@ class Api::V1::StatusesController < Api::BaseController
    params.permit(
      :status,
      :markdown,
+      :autoJoinGroup,
      :in_reply_to_id,
      :quote_of_id,
      :sensitive,
--- a/app/javascript/gabsocial/actions/compose.js
+++ b/app/javascript/gabsocial/actions/compose.js
@ -7,6 +7,7 @@ import { isMobile } from '../utils/is_mobile'
 import { search as emojiSearch } from '../components/emoji/emoji_mart_search_light';
 import { urlRegex } from '../features/ui/util/url_regex'
 import { tagHistory } from '../settings';
+import { joinGroup } from './groups'
 import { useEmoji } from './emojis';
 import resizeImage from '../utils/resize_image';
 import { importFetchedAccounts } from './importer';
@ -260,10 +261,12 @@ export function handleComposeSubmit(dispatch, getState, response, status) {
  }
 }

-export function submitCompose(groupId, replyToId = null, router, isStandalone) {
+export function submitCompose(groupId, replyToId = null, router, isStandalone, autoJoinGroup) {
  return function (dispatch, getState) {
    if (!me) return;

+    if (autoJoinGroup) dispatch(joinGroup(groupId))
+
    let status = getState().getIn(['compose', 'text'], '');
    let markdown = getState().getIn(['compose', 'markdown'], '');
    const media = getState().getIn(['compose', 'media_attachments']);
@ -304,6 +307,7 @@ export function submitCompose(groupId, replyToId = null, router, isStandalone) {
      status,
      markdown,
      scheduled_at,
+      autoJoinGroup,
      in_reply_to_id: inReplyToId,
      quote_of_id: getState().getIn(['compose', 'quote_of_id'], null),
      media_ids: media.map(item => item.get('id')),
--- a/app/javascript/gabsocial/actions/onboarding.js
+++ b/app/javascript/gabsocial/actions/onboarding.js
@ -1,8 +1,5 @@
-import moment from 'moment-mini'
 import { changeSetting, saveSettings } from './settings'

-export const MIN_ACCOUNT_CREATED_AT_ONBOARDING = moment('2020-07-14').valueOf()
-
 export const saveShownOnboarding = () => (dispatch) => {
  dispatch(changeSetting(['shownOnboarding'], true))
  dispatch(saveSettings())
--- a/app/javascript/gabsocial/constants.js
+++ b/app/javascript/gabsocial/constants.js
@ -109,3 +109,6 @@ export const NOTIFICATION_FILTERS = [
 ]

 export const GAB_COM_INTRODUCE_YOURSELF_GROUP_ID = '12'
+
+// export const MIN_ACCOUNT_CREATED_AT_ONBOARDING = 1594789200000 // 2020-07-15
+export const MIN_ACCOUNT_CREATED_AT_ONBOARDING = 1594782839825 // 2020-07-14
--- a/app/javascript/gabsocial/containers/gabsocial.js
+++ b/app/javascript/gabsocial/containers/gabsocial.js
@ -3,18 +3,21 @@
 import { Provider } from 'react-redux'
 import configureStore from '../store/configureStore'
 import { BrowserRouter, Route } from 'react-router-dom'
+import moment from 'moment-mini'
 import { ScrollContext } from 'react-router-scroll-4'
 import { IntlProvider, addLocaleData } from 'react-intl'
 import { fetchCustomEmojis } from '../actions/custom_emojis'
 import { hydrateStore } from '../actions/store'
+import { MIN_ACCOUNT_CREATED_AT_ONBOARDING } from '../constants'
 import {
  connectUserStream,
  connectStatusUpdateStream,
 } from '../actions/streaming'
 import { getLocale } from '../locales'
 import initialState from '../initial_state'
-import { me } from '../initial_state'
+import { me, isFirstSession } from '../initial_state'
 import UI from '../features/ui'
+import IntroductionPage from '../pages/introduction_page'
 import ErrorBoundary from '../components/error_boundary'
 import Display from './display'

@ -27,9 +30,45 @@ const hydrateAction = hydrateStore(initialState)
 store.dispatch(hydrateAction)
 store.dispatch(fetchCustomEmojis())

+const mapStateToProps = (state) => ({
+  accountCreatedAt: !!me ? state.getIn(['accounts', me, 'created_at']) : undefined,
+  shownOnboarding: state.getIn(['settings', 'shownOnboarding']),
+})
+
+@connect(mapStateToProps)
 class GabSocialMount extends PureComponent {

+  static propTypes = {
+    shownOnboarding: PropTypes.bool.isRequired,
+    accountCreatedAt: PropTypes.string,
+  }
+
+  state = {
+    shownOnboarding: this.props.shownOnboarding,
+    shouldShow: false,
+  }
+
+  componentDidMount() {
+    if (!!me && this.props.accountCreatedAt) {
+      //If first time opening app, and is new user, show onboarding
+      const accountCreatedAtValue = moment(this.props.accountCreatedAt).valueOf()
+      const shouldShow = isFirstSession && !this.state.shownOnboarding && accountCreatedAtValue > MIN_ACCOUNT_CREATED_AT_ONBOARDING
+
+      if (shouldShow) this.setState({ shouldShow })
+    }
+  }
+
  render () {
+    const { shownOnboarding, shouldShow } = this.state
+    
+    if (!shownOnboarding && shouldShow) {
+      return (
+        <BrowserRouter>
+          <Route path='/' component={IntroductionPage} />
+        </BrowserRouter>
+      )
+    }
+
    return (
      <BrowserRouter>
        <ScrollContext>
--- a/app/javascript/gabsocial/features/compose/components/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form.js
@ -90,6 +90,7 @@ class ComposeForm extends ImmutablePureComponent {
    selectedGifSrc: PropTypes.string,
    isPro: PropTypes.bool,
    hidePro: PropTypes.bool,
+    autoJoinGroup: PropTypes.bool,
  }

  static defaultProps = {
@ -142,14 +143,14 @@ class ComposeForm extends ImmutablePureComponent {
    // }

    // Submit disabled:
-    const { isSubmitting, isChangingUpload, isUploading, anyMedia, groupId } = this.props;
+    const { isSubmitting, isChangingUpload, isUploading, anyMedia, groupId, autoJoinGroup } = this.props
    const fulltext = [this.props.spoilerText, countableText(this.props.text)].join('');

    if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > MAX_POST_CHARACTER_COUNT || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
      return;
    }

-    this.props.onSubmit(groupId, this.props.replyToId, this.context.router);
+    this.props.onSubmit(groupId, this.props.replyToId, this.context.router, autoJoinGroup)
  }

  onSuggestionsClearRequested = () => {
--- a/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
+++ b/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
@ -102,8 +102,8 @@ const mapDispatchToProps = (dispatch, { isStandalone }) => ({
    dispatch(changeCompose(text, markdown, newReplyToId, isStandalone, position))
  },

-  onSubmit(groupId, replyToId, router) {
-    dispatch(submitCompose(groupId, replyToId, router, isStandalone))
+  onSubmit(groupId, replyToId, router, autoJoinGroup) {
+    dispatch(submitCompose(groupId, replyToId, router, isStandalone, autoJoinGroup))
  },

  onClearSuggestions() {
--- a/app/javascript/gabsocial/features/introduction.js
+++ b/app/javascript/gabsocial/features/introduction.js
@ -1,17 +1,22 @@
+import { Fragment } from 'react'
 import ReactSwipeableViews from 'react-swipeable-views'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { CX } from '../constants'
+import {
+  CX,
+  BREAKPOINT_EXTRA_SMALL,
+  GAB_COM_INTRODUCE_YOURSELF_GROUP_ID,
+} from '../constants'
 import { me } from '../initial_state'
 import { saveShownOnboarding } from '../actions/onboarding'
 import { fetchGroups } from '../actions/groups'
+import { saveUserProfileInformation } from '../actions/user'
 import {
  changeCompose,
  clearCompose,
 } from '../actions/compose'
 import { makeGetAccount } from '../selectors'
 import Button from '../components/button'
-import DisplayName from '../components/display_name'
 import Divider from '../components/divider'
 import FileInput from '../components/file_input'
 import GroupListItem from '../components/group_list_item'
@ -21,12 +26,15 @@ import Image from '../components/image'
 import Input from '../components/input'
 import Text from '../components/text'
 import ComposeFormContainer from './compose/containers/compose_form_container'
+import Responsive from './ui/util/responsive_component'

 class SlideWelcome extends PureComponent {

  render() {
    return (
      <div className={[_s.default, _s.width100PC, _s.height100PC].join(' ')}>
+        <Image src='/headers/onboarding.png' alt='Welcome to Gab' />
+
        <div className={[_s.default, _s.px15, _s.py15].join(' ')}>

          <Text size='large'>Gab is the home of free speech online and a place where users shape their own experience. </Text>
@ -41,10 +49,6 @@ class SlideWelcome extends PureComponent {

        </div>

-        <Image
-          className={[_s.mtAuto].join(' ')}
-          src='https://gab.com/system/media_attachments/files/008/707/779/original/42de809171745057.png?1568251173'
-        />
      </div>
    )
  }
@ -57,35 +61,72 @@ class SlidePhotos extends ImmutablePureComponent {
    account: ImmutablePropTypes.map.isRequired,
  }

+  state = {
+    displayNameValue: this.props.account.get('display_name'),
+  }
+
+  handleCoverPhotoChange = (e) => {
+    try {
+      this.props.onSave({ header: e.target.files[0] })
+    } catch (error) {
+      // 
+    }
+  }
+
+  handleProfilePhotoChange = (e) => {
+    try {
+      this.props.onSave({ avatar: e.target.files[0] })
+    } catch (error) {
+      // 
+    }
+  }
+
+  handleDisplayNameChange = (value) => {
+    this.setState({ displayNameValue: value })
+  }
+
+  handleDisplayNameBlur = () => {
+    this.props.onSave({
+      displayName: this.state.displayNameValue,
+    })
+  }
+
  render() {
-    const { account } = this.props
+    const { displayNameValue } = this.state

    return (
      <div className={[_s.default, _s.width100PC].join(' ')}>
        <div className={[_s.default, _s.px15, _s.py15, _s.alignItemsCenter].join(' ')}>

-          <div className={[_s.default, _s.py10, _s.width330PX].join(' ')}>
+          <div className={[_s.default, _s.py10, _s.maxWidth640PX].join(' ')}>
            <Text size='large' align='center'>Set your cover photo, profile photo and enter your display name so people can find you.</Text>
          </div>

          <div className={[_s.default, _s.mt15, _s.width100PC, _s.alignItemsCenter].join(' ')}>
-            <div className={[_s.default, _s.width330PX, _s.border1PX, _s.borderColorSecondary, _s.overflowHidden, _s.radiusSmall].join(' ')}>
-              <Image
-                width={330}
-                height={194}
-                src='http://localhost:3000/system/accounts/headers/000/000/001/original/0a49fe388d16f372.jpg?1562898139'
+            <div className={[_s.default, _s.border1PX, _s.borderColorSecondary, _s.overflowHidden, _s.radiusSmall, _s.bgPrimary].join(' ')}>
+              <FileInput
+                width='300px'
+                height='140px'
+                id='cover-photo'
+                onChange={this.handleCoverPhotoChange}
              />
-              <div className={[_s.default, _s.mtNeg75PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
-                <Image
-                  width={142}
-                  height={142}
-                  className={[_s.circle, _s.border6PX, _s.borderColorWhite].join(' ')}
-                  src='http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139'
+              <div className={[_s.default, _s.mtNeg32PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+                <FileInput
+                  width='124px'
+                  height='124px'
+                  id='profile-photo'
+                  className={[_s.circle, _s.border6PX, _s.borderColorWhite, _s.bgPrimary].join(' ')}
+                  onChange={this.handleProfilePhotoChange}
                />
              </div>
              <div className={[_s.default, _s.py5, _s.px15, _s.mt5, _s.mb15].join(' ')}>
                <Input
-                  placeholder='John Doe'
+                  id='display-name'
+                  title='Display name'
+                  placeholder='Add your name...'
+                  value={displayNameValue}
+                  onChange={this.handleDisplayNameChange}
+                  onBlur={this.handleDisplayNameBlur}
                />
              </div>
            </div>
@ -119,6 +160,7 @@ class SlideGroups extends ImmutablePureComponent {
              groupIds.map((groupId, i) => (
                <GroupListItem
                  isAddable
+                  isStatic
                  key={`group-collection-item-${i}`}
                  id={groupId}
                  isLast={groupIds.count() - 1 === i}
@ -136,21 +178,49 @@ class SlideGroups extends ImmutablePureComponent {
 class SlideFirstPost extends PureComponent {

  static propTypes = {
+    submitted: PropTypes.bool.isRequired,
    onNext: PropTypes.func.isRequired,
  }

  render() {
+    const { submitted } = this.props
+
    return (
      <div className={[_s.default, _s.width100PC].join(' ')}>
        <div className={[_s.default, _s.py15, _s.px15].join(' ')}>
+          {
+            !submitted &&
+            <Fragment>
              <Text size='large' className={_s.pb10}>Now let's make your very first Gab post! Please introduce yourself to the Gab community. How did you hear about Gab? What are you interested in?</Text>
              <br />

              <Divider />

              <div className={[_s.default, _s.mt15, _s.boxShadowBlock, _s.radiusSmall].join(' ')}>
-            <ComposeFormContainer hidePro autoFocus />
+                <ComposeFormContainer
+                  groupId={GAB_COM_INTRODUCE_YOURSELF_GROUP_ID}
+                  hidePro
+                  autoFocus
+                  autoJoinGroup
+                />
              </div>
+            </Fragment>
+          }
+          {
+            submitted &&
+            <Fragment>
+              <Text size='large' align='center'>Your gab was posted!</Text>
+              <br />
+              <Text size='large' align='center'>Click the checkbox in the top right to go to your home page.</Text>
+              <br />
+              <Button
+                href='/home'
+                onClick={this.props.onNext}
+              >
+                Finish
+              </Button>
+            </Fragment>
+          }

        </div>
      </div>
@ -163,13 +233,20 @@ const mapStateToProps = (state) => ({
  account: makeGetAccount()(state, me),
  groupIds: state.getIn(['group_lists', 'featured', 'items']),
  shownOnboarding: state.getIn(['settings', 'shownOnboarding'], false),
+  isSubmitting: state.getIn(['compose', 'is_submitting']),
 })

 const mapDispatchToProps = (dispatch) => ({
  onClearCompose: () => dispatch(clearCompose()),
  onSaveShownOnboarding: () => dispatch(saveShownOnboarding()),
  onFetchFeaturedGroups: () => dispatch(fetchGroups('featured')),
-  setPlaceholderCompose: () => dispatch(changeCompose('Hello everyone, I just joined Gab! I’m looking forward to speaking freely and meeting new friends.'))
+  setPlaceholderCompose() {
+    const defaultMessage = 'Hello everyone, I just joined Gab! I’m looking forward to speaking freely and meeting new friends.'
+    dispatch(changeCompose(defaultMessage))
+  },
+  onSaveUserProfileInformation(data) {
+    dispatch(saveUserProfileInformation(data))
+  },
 })

 export default
@ -178,26 +255,32 @@ class Introduction extends ImmutablePureComponent {

  static propTypes = {
    account: ImmutablePropTypes.map.isRequired,
-    dispatch: PropTypes.func.isRequired,
    groupIds: ImmutablePropTypes.list,
+    isSubmitting: PropTypes.bool.isRequired,
    shownOnboarding: PropTypes.bool.isRequired,
    setPlaceholderCompose: PropTypes.func.isRequired,
    onClearCompose: PropTypes.func.isRequired,
    onSaveShownOnboarding: PropTypes.func.isRequired,
    onFetchFeaturedGroups: PropTypes.func.isRequired,
+    onSaveUserProfileInformation: PropTypes.func.isRequired,
  }

  state = {
    currentIndex: 0,
+    submittedFirstPost: false,
  }

  componentDidMount() {
-    if (!this.props.shownOnboarding) {
    window.addEventListener('keyup', this.handleKeyUp)
    this.props.onFetchFeaturedGroups()
    this.props.setPlaceholderCompose()
    this.props.onSaveShownOnboarding()
  }
+
+  componentDidUpdate(prevProps) {
+    if (!this.state.submittedFirstPost && !prevProps.isSubmitting && this.props.isSubmitting) {
+      this.setState({ submittedFirstPost: true })
+    }
  }

  componentWillUnmount() {
@ -223,7 +306,7 @@ class Introduction extends ImmutablePureComponent {
      currentIndex: newIndex,
    })

-    if (newIndex === 3) {
+    if (newIndex === 4) {
      this.props.onClearCompose()
    }
  }
@ -243,15 +326,25 @@ class Introduction extends ImmutablePureComponent {
    }
  }

+  handleOnSaveUserProfileInformation = (data) => {
+    this.props.onSaveUserProfileInformation(data)
+  }
+
  render() {
    const { account, groupIds } = this.props
-    const { currentIndex } = this.state
+    const { currentIndex, submittedFirstPost } = this.state

    const pages = [
      <SlideWelcome />,
-      <SlidePhotos account={account} />,
+      <SlidePhotos
+        account={account}
+        onSave={this.handleOnSaveUserProfileInformation}
+      />,
      <SlideGroups groupIds={groupIds} />,
-      <SlideFirstPost />,
+      <SlideFirstPost
+        submitted={submittedFirstPost}
+        onNext={this.handleNext}
+      />,
    ]

    const titles = [
@ -284,20 +377,34 @@ class Introduction extends ImmutablePureComponent {
    return (
      <div className={[_s.default, _s.width100PC, _s.heightMax80VH].join(' ')}>
        <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
+          <Responsive min={BREAKPOINT_EXTRA_SMALL}>
            <Heading>
              {title}
            </Heading>
+          </Responsive>
+          <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+            <Heading size='h2'>
+              {title}
+            </Heading>
+          </Responsive>
          <div className={[_s.mlAuto].join(' ')}>
            <Button
-              to={currentIndex === 3 ? '/home' : undefined}
+              href={currentIndex === 3 ? '/home' : undefined}
              onClick={this.handleNext}
-              className={currentIndex !== 3 ? _s.px10 : undefined}
+              className={_s.px10}
              icon={currentIndex !== 3 ? 'arrow-right' : undefined}
              iconSize={currentIndex !== 3 ? '18px' : undefined}
            >
              {
                currentIndex === 3 &&
-                <Text color='white' className={[_s.pr5]}>Complete</Text>
+                <Fragment>
+                  <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+                    <Text color='white' className={_s.px5}>Complete</Text>
+                  </Responsive>
+                  <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+                    <Icon id='check' size='14px' className={_s.fillWhite} />
+                  </Responsive>
+                </Fragment>
              }
            </Button>
          </div>
@ -341,7 +448,7 @@ class Introduction extends ImmutablePureComponent {
            {pagination}
          </ul>
          <Button
-            to={currentIndex === 3 ? '/home' : undefined}
+            href={currentIndex === 3 ? '/home' : undefined}
            className={[_s.default, _s.width50PX, _s.mlAuto, _s.opacity05].join(' ')}
            onClick={this.handleNext}
            icon={currentIndex === 3 ? 'check' : 'arrow-right'}
--- a/app/javascript/gabsocial/layouts/introduction_layout.js
+++ b/app/javascript/gabsocial/layouts/introduction_layout.js
@ -1,20 +1,34 @@
 import Block from '../components/block'
-import NavigationBar from '../components/navigation_bar'
+import Icon from '../components/icon'
+import BundleColumnError from '../components/bundle_column_error'
+import Bundle from '../features/ui/util/bundle'
+import { Introduction } from '../features/ui/util/async_components'

 export default class IntroductionLayout extends PureComponent {

-  static propTypes = {
-    children: PropTypes.node,
-    title: PropTypes.string,
+  renderError = (props) => {
+    return <BundleColumnError {...props} />
  }

  render() {
-    const { children, title } = this.props
-
    return (
      <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>

-        <NavigationBar title={title} noSearch noActions />
+        <div className={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}>
+          <div className={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+            <div className={[_s.default, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.width1255PX].join(' ')}>
+              <div className={[_s.default, _s.flexRow].join(' ')}>
+
+                <h1 className={[_s.default, _s.mr15].join(' ')}>
+                  <div className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.px10, _s.mr15].join(' ')}>
+                    <Icon id='logo' className={_s.fillNavigationBrand} />
+                  </div>
+                </h1>
+
+              </div>
+            </div>
+          </div>
+        </div>

        <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
          <div className={[_s.default, _s.width100PC].join(' ')}>
@ -23,7 +37,9 @@ export default class IntroductionLayout extends PureComponent {

                <div className={[_s.default, _s.width645PX, _s.maxWidth100PC42PX].join(' ')}>
                  <Block>
-                    {children}
+                    <Bundle fetchComponent={Introduction} error={this.renderError}>
+                      {Component => (<Component />)}
+                    </Bundle>
                  </Block>
                </div>

--- a/app/javascript/gabsocial/reducers/settings.js
+++ b/app/javascript/gabsocial/reducers/settings.js
@ -8,7 +8,7 @@ import uuid from '../utils/uuid'

 const initialState = ImmutableMap({
  saved: true,
-  onboarded: false,
+  shownOnboarding: false,
  skinTone: 1,
  commentSorting: COMMENT_SORTING_TYPE_OLDEST,

--- a/app/services/post_status_service.rb
+++ b/app/services/post_status_service.rb
@ -28,6 +28,7 @@ class PostStatusService < BaseService
    @text        = @options[:text] || ''
    @markdown    = @options[:markdown] if @account.is_pro
    @in_reply_to = @options[:thread]
+    @autoJoinGroup = @options[:autoJoinGroup] || false

    return idempotency_duplicate if idempotency_given? && idempotency_duplicate?

@ -104,6 +105,7 @@ class PostStatusService < BaseService
    group_id = @options[:group_id]

    return if group_id.blank?
+    return if @autoJoinGroup

    raise GabSocial::ValidationError, I18n.t('statuses.not_a_member_of_group') if not GroupAccount.where(account: @account, group_id: group_id).exists?
  end