upload

src/admin/client/modules/apps/account/components/account.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Field, reduxForm } from 'redux-form';
+import { Link } from 'react-router-dom';
+import { TextField } from 'redux-form-material-ui';
+
+import { CustomToggle } from 'modules/shared/form';
+import messages from 'lib/text';
+import style from './style.css';
+
+import Paper from 'material-ui/Paper';
+import RaisedButton from 'material-ui/RaisedButton';
+import Divider from 'material-ui/Divider';
+import FontIcon from 'material-ui/FontIcon';
+import { List, ListItem } from 'material-ui/List';
+
+const AccountForm = ({ handleSubmit, pristine, submitting, initialValues }) => {
+	return (
+		<div style={{ maxWidth: 720, width: '100%' }}>
+			<div className="gray-title" style={{ margin: '15px 0 15px 20px' }}>
+				{messages.account}
+			</div>
+			<form
+				onSubmit={handleSubmit}
+				style={{
+					display: 'initial',
+					width: '100%'
+				}}
+			>
+				<Paper style={{ margin: '0px 20px' }} zDepth={1}>
+					<div style={{ padding: '10px 30px 30px 30px' }}>
+						<div>
+							<Field
+								component={TextField}
+								fullWidth={true}
+								name="email"
+								floatingLabelText={messages.email}
+							/>
+						</div>
+						<div>
+							<Field
+								component={TextField}
+								fullWidth={true}
+								name="shop_url"
+								floatingLabelText={messages.shopUrl}
+							/>
+						</div>
+						<div>
+							<Field
+								component={TextField}
+								fullWidth={true}
+								name="admin_url"
+								floatingLabelText={messages.adminUrl}
+							/>
+						</div>
+						<Field
+							component={CustomToggle}
+							name="is_developer"
+							label={messages.isDeveloper}
+							style={{ paddingTop: 16, paddingBottom: 16 }}
+						/>
+					</div>
+					<div
+						className="buttons-box"
+						style={{ display: pristine ? 'none' : 'block' }}
+					>
+						<RaisedButton
+							type="submit"
+							label={messages.save}
+							primary={true}
+							className={style.button}
+							disabled={pristine || submitting}
+						/>
+					</div>
+				</Paper>
+			</form>
+		</div>
+	);
+};
+
+export default reduxForm({
+	form: 'WebStoreAccountForm',
+	enableReinitialize: true
+})(AccountForm);

src/admin/client/modules/apps/account/components/details.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import messages from 'lib/text';
+import style from './style.css';
+import Account from './account';
+import Developer from './developer';
+
+export default class WebStoreAccountDetails extends React.Component {
+	constructor(props) {
+		super(props);
+	}
+
+	componentDidMount() {
+		this.props.fetchData();
+	}
+
+	render() {
+		const { account, onAccountSubmit, onDeveloperSubmit } = this.props;
+		const developerData = account ? account.developer : null;
+
+		if (account) {
+			return (
+				<div className={style.detailsContainer + ' scroll col-full-height'}>
+					<Account initialValues={account} onSubmit={onAccountSubmit} />
+					{account &&
+						account.is_developer === true && (
+							<Developer
+								initialValues={developerData}
+								onSubmit={onDeveloperSubmit}
+							/>
+						)}
+				</div>
+			);
+		} else {
+			return null;
+		}
+	}
+}

src/admin/client/modules/apps/account/components/developer.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Field, reduxForm } from 'redux-form';
+import { Link } from 'react-router-dom';
+import { TextField } from 'redux-form-material-ui';
+
+import { CustomToggle } from 'modules/shared/form';
+import messages from 'lib/text';
+import style from './style.css';
+
+import Paper from 'material-ui/Paper';
+import RaisedButton from 'material-ui/RaisedButton';
+import Divider from 'material-ui/Divider';
+import FontIcon from 'material-ui/FontIcon';
+import { List, ListItem } from 'material-ui/List';
+
+const DeveloperForm = ({
+	handleSubmit,
+	pristine,
+	submitting,
+	initialValues
+}) => {
+	return (
+		<div style={{ maxWidth: 720, width: '100%' }}>
+			<div className="gray-title" style={{ margin: '15px 0 15px 20px' }}>
+				{messages.developerProfile}
+			</div>
+			<form
+				onSubmit={handleSubmit}
+				style={{
+					display: 'initial',
+					width: '100%'
+				}}
+			>
+				<Paper style={{ margin: '0px 20px' }} zDepth={1}>
+					<div style={{ padding: '10px 30px 30px 30px' }}>
+						<div>
+							<Field
+								component={TextField}
+								fullWidth={true}
+								name="name"
+								floatingLabelText={messages.fullName}
+							/>
+						</div>
+						<div>
+							<Field
+								component={TextField}
+								fullWidth={true}
+								name="description"
+								floatingLabelText={messages.description}
+								multiLine={true}
+								rows={1}
+							/>
+						</div>
+						<div>
+							<Field
+								component={TextField}
+								fullWidth={true}
+								name="website"
+								floatingLabelText={messages.website}
+							/>
+						</div>
+						<div>
+							<Field
+								component={TextField}
+								fullWidth={true}
+								name="email"
+								floatingLabelText={messages.email}
+							/>
+						</div>
+					</div>
+					<div
+						className="buttons-box"
+						style={{ display: pristine ? 'none' : 'block' }}
+					>
+						<RaisedButton
+							type="submit"
+							label={messages.save}
+							primary={true}
+							className={style.button}
+							disabled={pristine || submitting}
+						/>
+					</div>
+				</Paper>
+			</form>
+		</div>
+	);
+};
+
+export default reduxForm({
+	form: 'WebStoreDeveloperForm',
+	enableReinitialize: true
+})(DeveloperForm);

src/admin/client/modules/apps/account/components/style.css

@@ -0,0 +1,26 @@
+.button {
+  margin-left: 12px;
+}
+
+.toggle {
+  margin-top: 12px;
+  margin-bottom: 22px;
+}
+
+.innerBox {
+  padding: 30px;
+}
+
+.childrenBox {
+  padding: 0 30px 30px 30px;
+}
+
+.error {
+  color: rgb(244, 67, 54);
+}
+
+.detailsContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

src/admin/client/modules/apps/account/index.js

@@ -0,0 +1,38 @@
+import { connect } from 'react-redux';
+import {
+	fetchAccount,
+	updateAccount,
+	updateDeveloperAccount
+} from '../actions';
+import Details from './components/details';
+import * as webstoreAuth from 'lib/webstoreAuth';
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		account: state.apps.account
+	};
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+	return {
+		fetchData: () => {
+			const webstoreAuthorized = webstoreAuth.isCurrentTokenValid();
+			if (webstoreAuthorized) {
+				dispatch(fetchAccount());
+			} else {
+				ownProps.history.push('/admin/apps/login');
+			}
+		},
+		onAccountSubmit: values => {
+			dispatch(updateAccount(values));
+		},
+		onDeveloperSubmit: values => {
+			dispatch(updateDeveloperAccount(values));
+		}
+	};
+};
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(Details);