Finalize layouting submission form

js/components/ascribe_buttons/upload_file_button.js

@@ -0,0 +1,74 @@
+'use strict';
+
+import React from 'react';
+
+import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
+import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
+
+import AppConstants from '../../constants/application_constants';
+import ApiUrls from '../../constants/api_urls';
+
+import { getCookie } from '../../utils/fetch_api_utils';
+import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
+
+
+const { shape, arrayOf, string, object, number, oneOfType } = React.PropTypes;
+
+const UploadFileButton = React.createClass({
+    propTypes: {
+        keyRoutine: shape({
+            url: string,
+            fileClass: string
+        }).isRequired,
+        validation: shape({
+            itemLimit: number,
+            sizeLimit: oneOfType([string, number]),
+            allowedExtensions: arrayOf(string)
+        }),
+        location: object,
+        fileClassToUpload: shape({
+            singular: string,
+            plural: string
+        }).isRequired
+    },
+
+    submitFile(file) {
+        console.log(file);
+    },
+
+    render() {
+
+        const { fileClassToUpload, validation, keyRoutine } = this.props;
+
+        return (
+            <ReactS3FineUploader
+                fileInputElement={UploadButton}
+                keyRoutine={keyRoutine}
+                createBlobRoutine={{
+                    url: ApiUrls.blob_contracts
+                }}
+                validation={validation}
+                setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
+                signature={{
+                    endpoint: AppConstants.serverUrl + 's3/signature/',
+                    customHeaders: {
+                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                    }
+                }}
+                deleteFile={{
+                    enabled: true,
+                    method: 'DELETE',
+                    endpoint: AppConstants.serverUrl + 's3/delete',
+                    customHeaders: {
+                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                    }
+                }}
+                fileClassToUpload={fileClassToUpload}
+                isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
+                submitFile={this.submitFile}
+                location={this.props.location}/>
+        );
+    }
+});
+
+export default UploadFileButton;

js/components/ascribe_settings/contract_settings_update_button.js

@@ -56,7 +56,6 @@ let ContractSettingsUpdateButton = React.createClass({
     render() {
         return (
            <ReactS3FineUploader
-                ref="fineuploader"
                 fileInputElement={UploadButton}
                 keyRoutine={{
                     url: AppConstants.serverUrl + 's3/key/',

js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js

@@ -5,11 +5,22 @@ 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 InputCheckbox from '../../../../../ascribe_forms/input_checkbox';
+
+import UploadFileButton from '../../../../../ascribe_buttons/upload_file_button';
+
+import AppConstants from '../../../../../../constants/application_constants';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
 
 
+const { object } = React.PropTypes;
+
 const PRRegisterPieceForm = React.createClass({
+    propTypes: {
+        location: object
+    },
+
     getInitialState(){
         return {
             isUploadReady: false
@@ -21,8 +32,10 @@ const PRRegisterPieceForm = React.createClass({
     },
 
     render() {
+        const { location } = this.props;
+
         return (
-            <div>
+            <div className="register-piece--form">
                 <Form
                     className="ascribe-form-bordered"
                     ref="registerPieceFields">
@@ -77,6 +90,96 @@ const PRRegisterPieceForm = React.createClass({
                             placeholder={getLangText('THIS NEEDS TEXT')}/>
                     </Property>
                 </Form>
+                <div className="input-upload-file-button-property">
+                    {getLangText('Select the PDF with your work')}
+                    <UploadFileButton
+                        keyRoutine={{
+                            url: AppConstants.serverUrl + 's3/key/',
+                            fileClass: 'digitalwork'
+                        }}
+                        validation={{
+                            itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                            sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                            allowedExtensions: ['pdf']
+                        }}
+                        location={location}
+                        fileClassToUpload={{
+                            singular: getLangText('Upload the Portfolio'),
+                            plural: getLangText('Upload the Portfolios')
+                        }}/>
+                </div>
+                <div className="input-upload-file-button-property">
+                    {getLangText('Featured Cover photo')}
+                    <UploadFileButton
+                        keyRoutine={{
+                            url: AppConstants.serverUrl + 's3/key/',
+                            fileClass: 'thumbnail'
+                        }}
+                        validation={{
+                            itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                            sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                            allowedExtensions: ['png', 'jpg']
+                        }}
+                        location={location}
+                        fileClassToUpload={{
+                            singular: getLangText('Upload cover photo'),
+                            plural: getLangText('Upload cover photos')
+                        }}/>
+                </div>
+                <div className="input-upload-file-button-property">
+                    {getLangText('Supporting Materials (Optional)')}
+                    <UploadFileButton
+                        keyRoutine={{
+                            url: AppConstants.serverUrl + 's3/key/',
+                            fileClass: 'other_data'
+                        }}
+                        validation={{
+                            itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                            sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit
+                        }}
+                        location={location}
+                        fileClassToUpload={{
+                            singular: getLangText('Upload'),
+                            plural: getLangText('Upload')
+                        }}/>
+                </div>
+                <div className="input-upload-file-button-property">
+                    {getLangText('Proof of payment')}
+                    <UploadFileButton
+                        keyRoutine={{
+                            url: AppConstants.serverUrl + 's3/key/',
+                            fileClass: 'other_data'
+                        }}
+                        validation={{
+                            itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                            sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit
+                        }}
+                        location={location}
+                        fileClassToUpload={{
+                            singular: getLangText('Upload Screenshot'),
+                            plural: getLangText('Upload Screenshots')
+                        }}/>
+                </div>
+                <Form
+                    className="ascribe-form-bordered"
+                    ref="terms">
+                    <Property
+                        name="terms"
+                        className="ascribe-property-collapsible-toggle"
+                        style={{paddingBottom: 0}}>
+                        <InputCheckbox
+                            key="terms_explicitly"
+                            defaultChecked={false}>
+                            &nbsp;{getLangText('I agree to the Terms and Conditions of the Portfolio Review')}
+                        </InputCheckbox>
+                    </Property>
+                </Form>
+                <button
+                    type="submit"
+                    className="btn btn-default btn-wide"
+                    disabled={!this.state.isUploadReady}>
+                    {getLangText('Submit to Portfolio Review')}
+                </button>
             </div>
         );
     }

js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js

@@ -8,13 +8,23 @@ import Row from 'react-bootstrap/lib/Row';
 import PRRegisterPieceForm from './pr_forms/pr_register_piece_form';
 
 import { getLangText } from '../../../../../utils/lang_utils';
+import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 
+const { object } = React.PropTypes;
+
 const PRRegisterPiece = React.createClass({
+    propTypes: {
+        location: object
+    },
+
     render() {
+        const { location } = this.props;
+
+        setDocumentTitle(getLangText('Submission form'));
         return (
             <Row>
-                <Col xs={4}>
+                <Col xs={6}>
                     <div className="register-piece--hero">
                         <h1>Portfolio Review</h1>
                         <h2>{getLangText('Submission closing on %s', ' 21 Dec 2015')}</h2>
@@ -23,8 +33,9 @@ const PRRegisterPiece = React.createClass({
                         <p>{getLangText('You need to pay 50€ in order to apply. We only accept PayPal.')}</p>
                     </div>
                 </Col>
-                <Col xs={8}>
-                    <PRRegisterPieceForm />
+                <Col xs={6}>
+                    <PRRegisterPieceForm
+                        location={location}/>
                 </Col>
             </Row>
         );

sass/ascribe_property.scss

@@ -219,3 +219,18 @@ $ascribe-red-error: rgb(169, 68, 66);
         margin-top: 0;
     }
 }
+
+.input-upload-file-button-property {
+    background-color: white;
+    padding: 1.5em 0 1.5em 0;
+    text-align: right;
+
+    button {
+        font-size: 1em;
+        margin-right: 1em;
+    }
+
+    span + button {
+        margin-left: 1em;
+    }
+}

sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss

@@ -28,6 +28,20 @@
         p:last-child {
             margin-bottom: 1.5em;
         }
+    }
 
+    .register-piece--form {
+    
+        form {
+            border-top: none;
+        }
+
+        form:first-child {
+            border-bottom: none;
+        }
+
+        form + form, form:last-child {
+            border-bottom: 1px solid rgba(0, 0, 0, .05);
+        }
     }
 }