Save new signup flow

ui/component/userFirstChannel/index.js

@@ -15,7 +15,7 @@ const select = (state) => ({
 
 const perform = (dispatch) => ({
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
-  createChannel: (name, amount) => dispatch(doCreateChannel(name, amount)),
+  createChannel: (name, amount, optionalParams) => dispatch(doCreateChannel(name, amount, optionalParams)),
 });
 
 export default connect(select, perform)(UserFirstChannel);

ui/component/userFirstChannel/view.jsx

@@ -11,14 +11,15 @@ import I18nMessage from 'component/i18nMessage';
 import analytics from 'analytics';
 import { sortLanguageMap } from 'util/default-languages';
 import SUPPORTED_LANGUAGES from 'constants/supported_languages';
-import Gerbil from 'component/channelThumbnail/gerbil.png';
+import Spaceman from 'component/channelThumbnail/spaceman.png';
+import ThumbnailBrokenImage from 'component/selectThumbnail/thumbnail-broken.png';
 import { THUMBNAIL_CDN_SIZE_LIMIT_BYTES } from 'config';
 import * as ICONS from 'constants/icons';
 
 export const DEFAULT_BID_FOR_FIRST_CHANNEL = 0.01;
 
 type Props = {
-  createChannel: (string, number) => Promise<ChannelClaim>,
+  createChannel: (string, number, any) => Promise<ChannelClaim>,
   creatingChannel: boolean,
   createChannelError: string,
   claimingReward: boolean,
@@ -55,6 +56,12 @@ function UserFirstChannel(props: Props) {
   const primaryLanguage = Array.isArray(languageParam) && languageParam.length && languageParam[0];
   const [nameError, setNameError] = useState(undefined);
 
+  var optionalParams = {
+    title: title,
+    thumbnailUrl: params.thumbnailUrl,
+    languages: primaryLanguage,
+  };
+
   function getChannelParams() {
     // fill this in with sdk data
     const channelParams: {
@@ -69,7 +76,7 @@ function UserFirstChannel(props: Props) {
 
   let thumbnailPreview;
   if (!params.thumbnailUrl) {
-    thumbnailPreview = Gerbil;
+    thumbnailPreview = Spaceman;
   } else if (thumbError) {
     thumbnailPreview = ThumbnailBrokenImage;
   } else {
@@ -82,8 +89,27 @@ function UserFirstChannel(props: Props) {
     setThumbError(false);
   }
 
+  function handleLanguageChange(index, code) {
+    let langs = [...languageParam];
+    if (index === 0) {
+      if (code === LANG_NONE) {
+        // clear all
+        langs = [];
+      } else {
+        langs[0] = code;
+      }
+    } else {
+      if (code === LANG_NONE || code === langs[0]) {
+        langs.splice(1, 1);
+      } else {
+        langs[index] = code;
+      }
+    }
+    setParams({ ...params, languages: langs });
+  }
+
   function handleCreateChannel() {
-    createChannel(`@${channel}`, DEFAULT_BID_FOR_FIRST_CHANNEL).then((channelClaim) => {
+    createChannel(`@${channel}`, DEFAULT_BID_FOR_FIRST_CHANNEL, optionalParams).then((channelClaim) => {
       if (channelClaim) {
         analytics.apiLogPublish(channelClaim);
       }
@@ -100,6 +126,11 @@ function UserFirstChannel(props: Props) {
     }
   }
 
+  function handleTitleChange(e) {
+    const { value } = e.target;
+    setTitle(value);
+  }
+
   return (
     <div className="main__channel-creation">
       <Card
@@ -112,41 +143,10 @@ function UserFirstChannel(props: Props) {
         }
         actions={
           <Form onSubmit={handleCreateChannel}>
-            <fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
-              <fieldset-section>
-                <label htmlFor="auth_first_channel">
-                  {createChannelError || nameError ? (
-                    <span className="error__text">{createChannelError || nameError}</span>
-                  ) : (
-                    __('Your Channel')
-                  )}
-                </label>
-                <div className="form-field__prefix">@</div>
-              </fieldset-section>
-
-              <FormField
-                autoFocus
-                placeholder={__('channel')}
-                type="text"
-                name="auth_first_channel"
-                className="form-field"
-                value={channel}
-                onChange={handleChannelChange}
-              />
-            </fieldset-group>
-            <fieldset-section>
-              <FormField
-                type="text"
-                name="channel_title2"
-                label={__('Title')}
-                placeholder={__('My Awesome Channel')}
-                value={title}
-                onChange={handleChannelChange}
-              />
-            </fieldset-section>
             <fieldset-section>
               <label>Avatar</label>
-              <img className="form-field__avatar" src={Gerbil} />
+              <div className="form-field__avatar_upload">
+                <img className="form-field__avatar" src={thumbnailPreview} />
                 <Button
                   button="alt"
                   title={__('Edit')}
@@ -164,7 +164,40 @@ function UserFirstChannel(props: Props) {
                   icon={ICONS.CAMERA}
                   iconSize={18}
                 />
+              </div>
             </fieldset-section>
+            <fieldset-section>
+              <FormField
+                autoFocus
+                type="text"
+                name="channel_title2"
+                label={__('Title')}
+                placeholder={__('My Awesome Channel')}
+                value={title}
+                onChange={handleTitleChange}
+              />
+            </fieldset-section>
+            <fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
+              <fieldset-section>
+                <label htmlFor="auth_first_channel">
+                  {createChannelError || nameError ? (
+                    <span className="error__text">{createChannelError || nameError}</span>
+                  ) : (
+                    __('Your Channel')
+                  )}
+                </label>
+                <div className="form-field__prefix">@</div>
+              </fieldset-section>
+
+              <FormField
+                placeholder={__('channel')}
+                type="text"
+                name="auth_first_channel"
+                className="form-field"
+                value={channel}
+                onChange={handleChannelChange}
+              />
+            </fieldset-group>
             <fieldset-section>
               <FormField
                 name="language_select"

ui/redux/actions/claims.js

@@ -431,6 +431,8 @@ export function doCreateChannel(name: string, amount: number, optionalParams: an
     const state = getState();
     const channelCountOverLimit = selectIsMyChannelCountOverLimit(state);
 
+    console.log('optionalParams: ', optionalParams);
+
     dispatch({
       type: ACTIONS.CREATE_CHANNEL_STARTED,
     });

ui/scss/component/_main.scss

@@ -1162,6 +1162,17 @@ body {
   margin-left: auto;
   margin-right: auto;
   max-width: 32rem;
+
+  fieldset-section {
+    .form-field__avatar_upload {
+      display: flex;
+      flex-flow: row;
+      align-items: center;
+      .button--alt {
+        margin-left: var(--spacing-s);
+      }
+    }
+  }
 }
 
 // Temp hacks until 'section__actions--no-margin' is generic again.