Save new signup flow

This commit is contained in:
Raphael Wickihalder 2022-05-02 09:48:28 +02:00 committed by Thomas Zarebczan
parent 4c1bf27dc1
commit 42b456307f
5 changed files with 83 additions and 37 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View file

@ -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);

View file

@ -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,6 +143,40 @@ function UserFirstChannel(props: Props) {
}
actions={
<Form onSubmit={handleCreateChannel}>
<fieldset-section>
<label>Avatar</label>
<div className="form-field__avatar_upload">
<img className="form-field__avatar" src={thumbnailPreview} />
<Button
button="alt"
title={__('Edit')}
onClick={() =>
openModal(MODALS.IMAGE_UPLOAD, {
onUpdate: (thumbnailUrl, isUpload) => handleThumbnailChange(thumbnailUrl, isUpload),
title: __('Edit Thumbnail Image'),
helpText: __('(1:1 ratio, %max_size%MB max)', {
max_size: THUMBNAIL_CDN_SIZE_LIMIT_BYTES / (1024 * 1024),
}),
assetName: __('Thumbnail'),
currentValue: params.thumbnailUrl,
})
}
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">
@ -125,7 +190,6 @@ function UserFirstChannel(props: Props) {
</fieldset-section>
<FormField
autoFocus
placeholder={__('channel')}
type="text"
name="auth_first_channel"
@ -134,37 +198,6 @@ function UserFirstChannel(props: Props) {
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} />
<Button
button="alt"
title={__('Edit')}
onClick={() =>
openModal(MODALS.IMAGE_UPLOAD, {
onUpdate: (thumbnailUrl, isUpload) => handleThumbnailChange(thumbnailUrl, isUpload),
title: __('Edit Thumbnail Image'),
helpText: __('(1:1 ratio, %max_size%MB max)', {
max_size: THUMBNAIL_CDN_SIZE_LIMIT_BYTES / (1024 * 1024),
}),
assetName: __('Thumbnail'),
currentValue: params.thumbnailUrl,
})
}
icon={ICONS.CAMERA}
iconSize={18}
/>
</fieldset-section>
<fieldset-section>
<FormField
name="language_select"

View file

@ -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,
});

View file

@ -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.