Add additional required properties for Lumenus

Currently uses the FurtherDetailsFileuploader, just relabeled, to
handle the marketplace image. For now, this allows us to avoid creating
another property in the backend to handle the image, but could be
replaced or modified in the future if we do want to create another
property.

js/components/ascribe_detail/further_details_fileuploader.js

@@ -13,6 +13,7 @@ import { getCookie } from '../../utils/fetch_api_utils';
 
 let FurtherDetailsFileuploader = React.createClass({
     propTypes: {
+        label: React.PropTypes.string,
         uploadStarted: React.PropTypes.func,
         pieceId: React.PropTypes.number,
         otherData: React.PropTypes.arrayOf(React.PropTypes.object),
@@ -26,6 +27,7 @@ let FurtherDetailsFileuploader = React.createClass({
 
     getDefaultProps() {
         return {
+            label: "Additional files",
             multiple: false
         };
     },
@@ -44,7 +46,7 @@ let FurtherDetailsFileuploader = React.createClass({
 
         return (
             <Property
-                label="Additional files">
+                label={this.props.label}>
                 <ReactS3FineUploader
                     uploadStarted={this.props.uploadStarted}
                     keyRoutine={{
@@ -96,4 +98,4 @@ let FurtherDetailsFileuploader = React.createClass({
     }
 });
 
-export default FurtherDetailsFileuploader;
+export default FurtherDetailsFileuploader;

js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js

@@ -138,7 +138,7 @@ let CylandAdditionalDataForm = React.createClass({
                     </Property>
                     <FurtherDetailsFileuploader
                         uploadStarted={this.uploadStarted}
-                        submitFile={this.submitFile}
+                        submitFile={function () {}}
                         setIsUploadReady={this.setIsUploadReady}
                         isReadyForFormSubmission={formSubmissionValidation.fileOptional}
                         pieceId={piece.id}
@@ -157,4 +157,4 @@ let CylandAdditionalDataForm = React.createClass({
     }
 });
 
-export default CylandAdditionalDataForm;
+export default CylandAdditionalDataForm;

js/components/whitelabel/wallet/components/lumenus/lumenus_forms/lumenus_additional_data_form.js

@@ -5,17 +5,21 @@ import React from 'react';
 import Form from '../../../../../ascribe_forms/form';
 import Property from '../../../../../ascribe_forms/property';
 
+import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
+
+import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
+
 import GlobalNotificationModel from '../../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
 
+import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
+
 import ApiUrls from '../../../../../../constants/api_urls';
 import AppConstants from '../../../../../../constants/application_constants';
 
 import requests from '../../../../../../utils/requests';
-
 import { getLangText } from '../../../../../../utils/lang_utils';
 
-
 let LumenusAdditionalDataForm = React.createClass({
     propTypes: {
         handleSuccess: React.PropTypes.func,
@@ -32,7 +36,7 @@ let LumenusAdditionalDataForm = React.createClass({
 
     getInitialState() {
         return {
-            isUploadReady: true
+            isUploadReady: false
         };
     },
 
@@ -56,7 +60,18 @@ let LumenusAdditionalDataForm = React.createClass({
             extradata: extradata,
             piece_id: this.props.piece.id
         };
+    },
 
+    uploadStarted() {
+        this.setState({
+            isUploadReady: false
+        });
+    },
+
+    setIsUploadReady(isReady) {
+        this.setState({
+            isUploadReady: isReady
+        });
     },
 
     render() {
@@ -67,7 +82,8 @@ let LumenusAdditionalDataForm = React.createClass({
             buttons = (
                 <button
                     type="submit"
-                    className="btn ascribe-btn ascribe-btn-login">
+                    className="btn btn-default btn-wide"
+                    disabled={!this.state.isUploadReady}>
                     {getLangText('Register work')}
                 </button>
             );
@@ -98,20 +114,49 @@ let LumenusAdditionalDataForm = React.createClass({
                     buttons={buttons}
                     spinner={spinner}>
                     {heading}
+                    <FurtherDetailsFileuploader
+                        label={getLangText('Marketplace image')}
+                        uploadStarted={this.uploadStarted}
+                        submitFile={function () {}}
+                        setIsUploadReady={this.setIsUploadReady}
+                        isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
+                        pieceId={piece.id}
+                        otherData={piece.other_data}
+                        location={this.props.location}/>
                     <Property
-                        name='dummy_field'
+                        name='artist_bio'
-                        label={getLangText('Dummy Field')}>
+                        label={getLangText('Artist Bio')}>
-                        <input
+                        <InputTextAreaToggable
-                            type="text"
+                            rows={1}
-                            placeholder="Your awesome field here!"
+                            defaultValue={piece.extra_data.artist_bio}
+                            placeholder={getLangText('Enter a biography of the artist...')}
                             required/>
                     </Property>
                     <Property
-                        name='dummy_field'
+                        name='work_description'
-                        label={getLangText('Dummy Field')}>
+                        label={getLangText('Work Description')}>
-                        <input
+                        <InputTextAreaToggable
-                            type="text"
+                            rows={1}
-                            placeholder="Or here!"
+                            defaultValue={piece.extra_data.work_description}
+                            placeholder={getLangText('Enter a description of the work...')}
+                            required/>
+                    </Property>
+                    <Property
+                        name='tech_details'
+                        label={getLangText('Technology Details')}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={piece.extra_data.tech_details}
+                            placeholder={getLangText('Enter technological details about the work was produced...')}
+                            required/>
+                    </Property>
+                    <Property
+                        name='display_instructions'
+                        label={getLangText('Display Instructions')}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={piece.extra_data.display_instructions}
+                            placeholder={getLangText('Enter instructions on how to best display the work...')}
                             required/>
                     </Property>
                 </Form>