Merge with master

js/actions/notification_actions.js

@@ -9,10 +9,13 @@ class NotificationActions {
     constructor() {
         this.generateActions(
             'updatePieceListNotifications',
+            'flushPieceListNotifications',
             'updateEditionListNotifications',
+            'flushEditionListNotifications',
             'updateEditionNotifications',
             'updatePieceNotifications',
-            'updateContractAgreementListNotifications'
+            'updateContractAgreementListNotifications',
+            'flushContractAgreementListNotifications'
         );
     }
 

js/components/ascribe_accordion_list/accordion_list_item_piece.js

@@ -16,7 +16,7 @@ let AccordionListItemPiece = React.createClass({
             React.PropTypes.string,
             React.PropTypes.element
         ]),
-        piece: React.PropTypes.object,
+        piece: React.PropTypes.object.isRequired,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -54,17 +54,21 @@ let AccordionListItemPiece = React.createClass({
             piece,
             subsubheading,
             thumbnailPlaceholder: ThumbnailPlaceholder } = this.props;
-        const { url, url_safe } = piece.thumbnail;
+        const { url: thumbnailUrl, url_safe: thumbnailSafeUrl } = piece.thumbnail;
+
+        // Display the 300x300 thumbnail if we have it, otherwise just use the safe url
+        const thumbnailDisplayUrl = (piece.thumbnail.thumbnail_sizes && piece.thumbnail.thumbnail_sizes['300x300']) || thumbnailSafeUrl;
+
         let thumbnail;
 
         // Since we're going to refactor the thumbnail generation anyway at one point,
         // for not use the annoying ascribe_spiral.png, we're matching the url against
         // this name and replace it with a CSS version of the new logo.
-        if (url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
+        if (thumbnailUrl.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
             thumbnail = (<ThumbnailPlaceholder />);
         } else {
             thumbnail = (
-                <div style={{backgroundImage: 'url("' + url_safe + '")'}}/>
+                <div style={{backgroundImage: 'url("' + thumbnailDisplayUrl + '")'}} />
             );
         }
 
@@ -82,8 +86,7 @@ let AccordionListItemPiece = React.createClass({
                 subsubheading={subsubheading}
                 buttons={buttons}
                 badge={badge}
-                linkData={this.getLinkData()}
+                linkData={this.getLinkData()}>
-                >
                 {children}
             </AccordionListItem>
         );

js/components/ascribe_detail/detail_property.js

@@ -1,9 +1,10 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
 
-let DetailProperty = React.createClass({
+const DetailProperty = React.createClass({
     propTypes: {
         label: React.PropTypes.string,
         value: React.PropTypes.oneOfType([
@@ -12,6 +13,7 @@ let DetailProperty = React.createClass({
             React.PropTypes.element
         ]),
         separator: React.PropTypes.string,
+        className: React.PropTypes.string,
         labelClassName: React.PropTypes.string,
         valueClassName: React.PropTypes.string,
         ellipsis: React.PropTypes.bool,
@@ -30,31 +32,23 @@ let DetailProperty = React.createClass({
     },
 
     render() {
-        let styles = {};
+        const {
-        const { labelClassName,
+            children,
+            className,
+            ellipsis,
             label,
+            labelClassName,
             separator,
             valueClassName,
-                children,
             value } = this.props;
 
-        if(this.props.ellipsis) {
-            styles = {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
-            };
-        }
-
         return (
-            <div className="row ascribe-detail-property">
+            <div className={classNames('row ascribe-detail-property', className)}>
                 <div className="row-same-height">
                     <div className={labelClassName}>
                         {label} {separator}
                     </div>
-                    <div
+                    <div className={classNames(valueClassName, {'add-overflow-ellipsis': ellipsis})}>
-                        className={valueClassName}
-                        style={styles}>
                         {children || value}
                     </div>
                 </div>

js/components/ascribe_detail/edition.js

@@ -16,7 +16,7 @@ import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph
 
 import Form from './../ascribe_forms/form';
 import Property from './../ascribe_forms/property';
-import EditionDetailProperty from './detail_property';
+import DetailProperty from './detail_property';
 import LicenseDetail from './license_detail';
 import FurtherDetails from './further_details';
 
@@ -57,16 +57,16 @@ let Edition = React.createClass({
 
         return (
             <Row>
-                <Col md={6}>
+                <Col md={6} className="ascribe-print-col-left">
                     <MediaContainer
                         content={this.props.edition}/>
                 </Col>
-                <Col md={6} className="ascribe-edition-details">
+                <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
                     <div className="ascribe-detail-header">
-                        <hr style={{marginTop: 0}}/>
+                        <hr className="hidden-print" style={{marginTop: 0}}/>
                         <h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
-                        <EditionDetailProperty label="BY" value={this.props.edition.artist_name} />
+                        <DetailProperty label="BY" value={this.props.edition.artist_name} />
-                        <EditionDetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} />
+                        <DetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} />
                         <hr/>
                     </div>
                     <EditionSummary
@@ -169,10 +169,10 @@ let EditionSummary = React.createClass({
         let status = null;
         if (this.props.edition.status.length > 0){
             let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
-            status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
+            status = <DetailProperty label="STATUS" value={ statusStr }/>;
             if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
                 status = (
-                    <EditionDetailProperty label="STATUS" value={ statusStr } />
+                    <DetailProperty label="STATUS" value={ statusStr } />
                 );
             }
         }
@@ -183,14 +183,14 @@ let EditionSummary = React.createClass({
         let { actionPanelButtonListType, edition, currentUser } = this.props;
         return (
             <div className="ascribe-detail-header">
-                <EditionDetailProperty
+                <DetailProperty
                     label={getLangText('EDITION')}
                     value={ edition.edition_number + ' ' + getLangText('of') + ' ' + edition.num_editions} />
-                <EditionDetailProperty
+                <DetailProperty
                     label={getLangText('ID')}
                     value={ edition.bitcoin_id }
                     ellipsis={true} />
-                <EditionDetailProperty
+                <DetailProperty
                     label={getLangText('OWNER')}
                     value={ edition.owner } />
                 <LicenseDetail license={edition.license_type}/>
@@ -201,14 +201,15 @@ let EditionSummary = React.createClass({
                     `AclInformation` would show up
                 */}
                 <AclProxy show={currentUser && currentUser.email && Object.keys(edition.acl).length > 1}>
-                    <EditionDetailProperty
+                    <DetailProperty
-                        label={getLangText('ACTIONS')}>
+                        label={getLangText('ACTIONS')}
+                        className="hidden-print">
                         <EditionActionPanel
                             actionPanelButtonListType={actionPanelButtonListType}
                             edition={edition}
                             currentUser={currentUser}
                             handleSuccess={this.handleSuccess} />
-                    </EditionDetailProperty>
+                    </DetailProperty>
                 </AclProxy>
                 <hr/>
             </div>
@@ -225,36 +226,37 @@ let CoaDetails = React.createClass({
     },
 
     contactOnIntercom() {
-        window.Intercom('showNewMessage', `Hi, I'm having problems generating a Certificate of Authenticity for Edition: ${this.props.editionId}`);
+        const { coaError, editionId } = this.props;
-        console.logGlobal(new Error(`Coa couldn't be created for edition: ${this.props.editionId}`));
+
+        window.Intercom('showNewMessage', getLangText("Hi, I'm having problems generating a Certificate of Authenticity for Edition: %s", editionId));
+        console.logGlobal(new Error(`Coa couldn't be created for edition: ${editionId}`), coaError);
     },
 
     render() {
-        if(this.props.coaError) {
+        const { coa = {}, coaError } = this.props;
-            return (
+
-                <div className="text-center">
+        let coaDetailElement;
-                    <p>{getLangText('There was an error generating your Certificate of Authenticity.')}</p>
+        if (coaError) {
+            coaDetailElement = [
+                <p>{getLangText('There was an error generating your Certificate of Authenticity.')}</p>,
                 <p>
                     {getLangText('Try to refresh the page. If this happens repeatedly, please ')}
                     <a style={{ cursor: 'pointer' }} onClick={this.contactOnIntercom}>{getLangText('contact us')}</a>.
                 </p>
-                </div>
+            ];
-            );
+        } else if (coa.url_safe) {
-        }
+            coaDetailElement = [
-        if(this.props.coa && this.props.coa.url_safe) {
-            return (
-                <div>
                 <div
                     className="notification-contract-pdf"
                     style={{paddingBottom: '1em'}}>
                     <embed
                         className="embed-form"
-                            src={this.props.coa.url_safe}
+                        src={coa.url_safe}
                         alt="pdf"
                         pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
-                    </div>
+                </div>,
                 <div className="text-center ascribe-button-list">
-                        <a href={this.props.coa.url_safe} target="_blank">
+                    <a href={coa.url_safe} target="_blank">
                         <button className="btn btn-default btn-xs">
                             {getLangText('Download')} <Glyphicon glyph="cloud-download"/>
                         </button>
@@ -264,22 +266,27 @@ let CoaDetails = React.createClass({
                             {getLangText('Verify')} <Glyphicon glyph="check"/>
                         </button>
                     </Link>
-
                 </div>
-                </div>
+            ];
-            );
+        } else if (typeof coa === 'string') {
-        } else if(typeof this.props.coa === 'string'){
+            coaDetailElement = coa;
-            return (
+        } else {
-                <div className="text-center">
+            coaDetailElement = [
-                    {this.props.coa}
+                <AscribeSpinner color='dark-blue' size='md'/>,
-                </div>
+                <p>{getLangText("Just a sec, we're generating your COA")}</p>,
-            );
-        }
-        return (
-            <div className="text-center">
-                <AscribeSpinner color='dark-blue' size='md'/>
-                <p>{getLangText("Just a sec, we\'re generating your COA")}</p>
                 <p>{getLangText('(you may leave the page)')}</p>
+            ];
+        }
+
+        return (
+            <div>
+                <div className="text-center hidden-print">
+                    {coaDetailElement}
+                </div>
+                {/* Hide the COA and just show that it's a seperate document when printing */}
+                <div className="visible-print ascribe-coa-print-placeholder">
+                    {getLangText('The COA is available as a seperate document')}
+                </div>
             </div>
         );
     }
@@ -291,16 +298,34 @@ let SpoolDetails = React.createClass({
     },
 
     render() {
-        let bitcoinIdValue = (
+        const { edition: {
-            <a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.bitcoin_id}>{this.props.edition.bitcoin_id}</a>
+            bitcoin_id: bitcoinId,
+            hash_as_address: hashAsAddress,
+            btc_owner_address_noprefix: bitcoinOwnerAddress
+        } } = this.props;
+
+        const bitcoinIdValue = (
+            <a  className="anchor-no-expand-print"
+                target="_blank"
+                href={'https://www.blocktrail.com/BTC/address/' + bitcoinId}>
+                {bitcoinId}
+            </a>
         );
 
-        let hashOfArtwork = (
+        const hashOfArtwork = (
-            <a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.hash_as_address}>{this.props.edition.hash_as_address}</a>
+            <a  className="anchor-no-expand-print"
+                target="_blank"
+                href={'https://www.blocktrail.com/BTC/address/' + hashAsAddress}>
+                {hashAsAddress}
+            </a>
         );
 
-        let ownerAddress = (
+        const ownerAddress = (
-            <a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.btc_owner_address_noprefix}>{this.props.edition.btc_owner_address_noprefix}</a>
+            <a  className="anchor-no-expand-print"
+                target="_blank"
+                href={'https://www.blocktrail.com/BTC/address/' + bitcoinOwnerAddress}>
+                {bitcoinOwnerAddress}
+            </a>
         );
 
         return (

js/components/ascribe_detail/further_details_fileuploader.js

@@ -20,6 +20,7 @@ let FurtherDetailsFileuploader = React.createClass({
         otherData: React.PropTypes.arrayOf(React.PropTypes.object),
         setIsUploadReady: React.PropTypes.func,
         submitFile: React.PropTypes.func,
+        onValidationFailed: React.PropTypes.func,
         isReadyForFormSubmission: React.PropTypes.func,
         editable: React.PropTypes.bool,
         multiple: React.PropTypes.bool
@@ -60,6 +61,7 @@ let FurtherDetailsFileuploader = React.createClass({
                     }}
                     validation={AppConstants.fineUploader.validation.additionalData}
                     submitFile={this.props.submitFile}
+                    onValidationFailed={this.props.onValidationFailed}
                     setIsUploadReady={this.props.setIsUploadReady}
                     isReadyForFormSubmission={this.props.isReadyForFormSubmission}
                     session={{

js/components/ascribe_detail/history_iterator.js

@@ -22,7 +22,11 @@ let HistoryIterator = React.createClass({
             return (
                 <span>
                     {historicalEventDescription}
-                    <a href={historicalEvent[2]} target="_blank">{contractName}</a>
+                    <a  className="anchor-no-expand-print"
+                        target="_blank"
+                        href={historicalEvent[2]}>
+                        {contractName}
+                    </a>
                 </span>
             );
         } else if(historicalEvent.length === 2) {

js/components/ascribe_detail/media_container.js

@@ -114,7 +114,7 @@ let MediaContainer = React.createClass({
                     url={content.digital_work.url}
                     extraData={extraData}
                     encodingStatus={content.digital_work.isEncoding} />
-                <p className="text-center">
+                <p className="text-center hidden-print">
                     <span className="ascribe-social-button-list">
                         <FacebookShareButton />
                         <TwitterShareButton

js/components/ascribe_detail/piece.js

@@ -34,12 +34,12 @@ let Piece = React.createClass({
     render() {
         return (
             <Row>
-                <Col md={6}>
+                <Col md={6} className="ascribe-print-col-left">
                     <MediaContainer
                         refreshObject={this.updateObject}
                         content={this.props.piece}/>
                 </Col>
-                <Col md={6} className="ascribe-edition-details">
+                <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
                     {this.props.header}
                     {this.props.subheader}
                     {this.props.buttons}

js/components/ascribe_detail/piece_container.js

@@ -219,7 +219,9 @@ let PieceContainer = React.createClass({
                         no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
                         `AclInformation` would show up
                     */}
-                    <DetailProperty label={getLangText('ACTIONS')}>
+                    <DetailProperty
+                        label={getLangText('ACTIONS')}
+                        className="hidden-print">
                         <AclButtonList
                             className="ascribe-button-list"
                             availableAcls={piece.acl}
@@ -257,7 +259,7 @@ let PieceContainer = React.createClass({
                     loadPiece={this.loadPiece}
                     header={
                         <div className="ascribe-detail-header">
-                            <hr style={{marginTop: 0}}/>
+                            <hr className="hidden-print" style={{marginTop: 0}}/>
                             <h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
                             <DetailProperty label="BY" value={this.state.piece.artist_name} />
                             <DetailProperty label="DATE" value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year() } />

js/components/ascribe_forms/form.js

@@ -178,20 +178,20 @@ let Form = React.createClass({
             let formData = this.getFormData();
 
             // sentry shouldn't post the user's password
-            if(formData.password) {
+            if (formData.password) {
                 delete formData.password;
             }
 
             console.logGlobal(err, formData);
 
-            if(this.props.isInline) {
+            if (this.props.isInline) {
                 let notification = new GlobalNotificationModel(getLangText('Something went wrong, please try again later'), 'danger');
                 GlobalNotificationActions.appendGlobalNotification(notification);
             } else {
                 this.setState({errors: [getLangText('Something went wrong, please try again later')]});
             }
-
         }
+
         this.setState({submitted: false});
     },
 

js/components/ascribe_forms/form_register_piece.js

@@ -109,6 +109,11 @@ let RegisterPieceForm = React.createClass({
         );
     },
 
+    handleThumbnailValidationFailed(thumbnailFile) {
+        // If the validation fails, set the thumbnail as submittable since its optional
+        this.refs.submitButton.setReadyStateForKey('thumbnailKeyReady', true);
+    },
+
     isThumbnailDialogExpanded() {
         const { enableSeparateThumbnail } = this.props;
         const { digitalWorkFile } = this.state;
@@ -194,14 +199,15 @@ let RegisterPieceForm = React.createClass({
                             url: ApiUrls.blob_thumbnails
                         }}
                         handleChangedFile={this.handleChangedThumbnail}
+                        onValidationFailed={this.handleThumbnailValidationFailed}
                         isReadyForFormSubmission={formSubmissionValidation.fileOptional}
                         keyRoutine={{
                             url: AppConstants.serverUrl + 's3/key/',
                             fileClass: 'thumbnail'
                         }}
                         validation={{
-                            itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                            itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
-                            sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                            sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
                             allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
                         }}
                         setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}

js/components/ascribe_forms/input_fineuploader.js

@@ -52,6 +52,7 @@ const InputFineUploader = React.createClass({
             plural: string
         }),
         handleChangedFile: func,
+        onValidationFailed: func,
 
         // Provided by `Property`
         onChange: React.PropTypes.func
@@ -107,6 +108,7 @@ const InputFineUploader = React.createClass({
             isFineUploaderActive,
             isReadyForFormSubmission,
             keyRoutine,
+            onValidationFailed,
             setIsUploadReady,
             uploadMethod,
             validation,
@@ -127,6 +129,7 @@ const InputFineUploader = React.createClass({
                 createBlobRoutine={createBlobRoutine}
                 validation={validation}
                 submitFile={this.submitFile}
+                onValidationFailed={onValidationFailed}
                 setIsUploadReady={setIsUploadReady}
                 isReadyForFormSubmission={isReadyForFormSubmission}
                 areAssetsDownloadable={areAssetsDownloadable}

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -39,30 +39,6 @@ let PieceListToolbar = React.createClass({
         ])
     },
 
-    getFilterWidget(){
-        if (this.props.filterParams){
-            return (
-                <PieceListToolbarFilterWidget
-                    filterParams={this.props.filterParams}
-                    filterBy={this.props.filterBy}
-                    applyFilterBy={this.props.applyFilterBy} />
-            );
-        }
-        return null;
-    },
-
-    getOrderWidget(){
-        if (this.props.orderParams){
-            return (
-                <PieceListToolbarOrderWidget
-                    orderParams={this.props.orderParams}
-                    orderBy={this.props.orderBy}
-                    applyOrderBy={this.props.applyOrderBy}/>
-            );
-        }
-        return null;
-    },
-
     render() {
         const { className, children, searchFor, searchQuery } = this.props;
 
@@ -75,8 +51,14 @@ let PieceListToolbar = React.createClass({
                                 {children}
                             </span>
                             <span className="pull-right">
-                                {this.getOrderWidget()}
+                                <PieceListToolbarOrderWidget
-                                {this.getFilterWidget()}
+                                    orderParams={this.props.orderParams}
+                                    orderBy={this.props.orderBy}
+                                    applyOrderBy={this.props.applyOrderBy}/>
+                                <PieceListToolbarFilterWidget
+                                    filterParams={this.props.filterParams}
+                                    filterBy={this.props.filterBy}
+                                    applyFilterBy={this.props.applyFilterBy} />
                             </span>
                             <SearchBar
                                 className="pull-right search-bar ascribe-input-glyph"

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js

@@ -30,15 +30,15 @@ let PieceListToolbarFilterWidget = React.createClass({
     generateFilterByStatement(param) {
         const filterBy = Object.assign({}, this.props.filterBy);
 
-        if(filterBy) {
+        if (filterBy) {
             // we need hasOwnProperty since the values are all booleans
-            if(filterBy.hasOwnProperty(param)) {
+            if (filterBy.hasOwnProperty(param)) {
                 filterBy[param] = !filterBy[param];
 
                 // if the parameter is false, then we want to remove it again
                 // from the list of queryParameters as this component is only about
                 // which actions *CAN* be done and not what *CANNOT*
-                if(!filterBy[param]) {
+                if (!filterBy[param]) {
                     delete filterBy[param];
                 }
 
@@ -66,7 +66,7 @@ let PieceListToolbarFilterWidget = React.createClass({
 
         // We're hiding the star in that complicated matter so that,
         // the surrounding button is not resized up on appearance
-        if(trueValuesOnly.length > 0) {
+        if (trueValuesOnly.length) {
             return { visibility: 'visible'};
         } else {
             return { visibility: 'hidden' };
@@ -81,6 +81,7 @@ let PieceListToolbarFilterWidget = React.createClass({
             </span>
         );
 
+        if (this.props.filterParams && this.props.filterParams.length) {
             return (
                 <DropdownButton
                     pullRight={true}
@@ -107,7 +108,7 @@ let PieceListToolbarFilterWidget = React.createClass({
                                     // }
                                     //
                                     // This is why we need to distinguish between both here.
-                                if(typeof param !== 'string') {
+                                    if (typeof param !== 'string') {
                                         label = param.label;
                                         param = param.key;
                                     } else {
@@ -137,6 +138,9 @@ let PieceListToolbarFilterWidget = React.createClass({
                     })}
                 </DropdownButton>
             );
+        } else {
+            return null;
+        }
     }
 });
 

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js

@@ -37,7 +37,7 @@ let PieceListToolbarOrderWidget = React.createClass({
     isOrderActive() {
         // We're hiding the star in that complicated matter so that,
         // the surrounding button is not resized up on appearance
-        if(this.props.orderBy.length > 0) {
+        if (this.props.orderBy && this.props.orderBy.length) {
             return { visibility: 'visible'};
         } else {
             return { visibility: 'hidden' };
@@ -51,8 +51,9 @@ let PieceListToolbarOrderWidget = React.createClass({
                 <span style={this.isOrderActive()}>&middot;</span>
             </span>
         );
-        return (
 
+        if (this.props.orderParams && this.props.orderParams.length) {
+            return (
                 <DropdownButton
                     pullRight={true}
                     title={filterIcon}
@@ -82,6 +83,9 @@ let PieceListToolbarOrderWidget = React.createClass({
                     })}
                 </DropdownButton>
             );
+        } else {
+            return null;
+        }
     }
 });
 

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js

@@ -26,7 +26,7 @@ let FileDragAndDropDialog = React.createClass({
     getDragDialog(fileClass) {
         if (dragAndDropAvailable) {
             return [
-                <p>{getLangText('Drag %s here', fileClass)}</p>,
+                <p className="file-drag-and-drop-dialog-title">{getLangText('Drag %s here', fileClass)}</p>,
                 <p>{getLangText('or')}</p>
             ];
         } else {
@@ -46,6 +46,8 @@ let FileDragAndDropDialog = React.createClass({
         if (hasFiles) {
             return null;
         } else {
+            let dialogElement;
+
             if (enableLocalHashing && !uploadMethod) {
                 const currentQueryParams = getCurrentQueryParams();
 
@@ -55,9 +57,9 @@ let FileDragAndDropDialog = React.createClass({
                 const queryParamsUpload = Object.assign({}, currentQueryParams);
                 queryParamsUpload.method = 'upload';
 
-                return (
+                dialogElement = (
-                    <div className="file-drag-and-drop-dialog present-options">
+                    <div className="present-options">
-                        <p>{getLangText('Would you rather')}</p>
+                        <p className="file-drag-and-drop-dialog-title">{getLangText('Would you rather')}</p>
                         {/*
                             The frontend in live is hosted under /app,
                             Since `Link` is appending that base url, if its defined
@@ -85,34 +87,42 @@ let FileDragAndDropDialog = React.createClass({
                 );
             } else {
                 if (multipleFiles) {
-                    return (
+                    dialogElement = [
-                        <span className="file-drag-and-drop-dialog">
+                        this.getDragDialog(fileClassToUpload.plural),
-                            {this.getDragDialog(fileClassToUpload.plural)}
                         <span
                             className="btn btn-default"
                             onClick={onClick}>
                                 {getLangText('choose %s to upload', fileClassToUpload.plural)}
                         </span>
-                        </span>
+                    ];
-                    );
                 } else {
                     const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular)
                                                            : getLangText('choose a %s to upload', fileClassToUpload.singular);
 
-                    return (
+                    dialogElement = [
-                        <span className="file-drag-and-drop-dialog">
+                        this.getDragDialog(fileClassToUpload.singular),
-                            {this.getDragDialog(fileClassToUpload.singular)}
                         <span
                             className="btn btn-default"
                             onClick={onClick}>
                                 {dialog}
                         </span>
-                        </span>
+                    ];
+                }
+            }
+
+            return (
+                <div className="file-drag-and-drop-dialog">
+                    <div className="hidden-print">
+                        {dialogElement}
+                    </div>
+                    {/* Hide the uploader and just show that there's been on files uploaded yet when printing */}
+                    <p className="text-align-center visible-print">
+                        {getLangText('No files uploaded')}
+                    </p>
+                </div>
             );
         }
     }
-        }
-    }
 });
 
 export default FileDragAndDropDialog;

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js

@@ -68,7 +68,7 @@ const FileDragAndDropPreviewImage = React.createClass({
 
         return (
             <div
-                className="file-drag-and-drop-preview-image"
+                className="file-drag-and-drop-preview-image hidden-print"
                 style={imageStyle}>
                     <AclProxy
                         show={showProgress}>

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -50,6 +50,7 @@ const ReactS3FineUploader = React.createClass({
         }),
         handleChangedFile: func, // is for when a file is dropped or selected
         submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile
+        onValidationFailed: func,
         autoUpload: bool,
         debug: bool,
         objectProperties: shape({
@@ -523,13 +524,16 @@ const ReactS3FineUploader = React.createClass({
     },
 
     isFileValid(file) {
-        if(file.size > this.props.validation.sizeLimit) {
+        if (file.size > this.props.validation.sizeLimit) {
+            const fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
 
-            let fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
+            const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
-
-            let notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
             GlobalNotificationActions.appendGlobalNotification(notification);
 
+            if (typeof this.props.onValidationFailed === 'function') {
+                this.props.onValidationFailed(file);
+            }
+
             return false;
         } else {
             return true;

js/components/footer.js

@@ -7,7 +7,7 @@ import { getLangText } from '../utils/lang_utils';
 let Footer = React.createClass({
     render() {
         return (
-            <div className="ascribe-footer">
+            <div className="ascribe-footer hidden-print">
                 <p className="ascribe-sub-sub-statement">
                   <br />
                   <a href="http://docs.ascribe.apiary.io/" target="_blank">api</a> |

js/components/header.js

@@ -219,10 +219,11 @@ let Header = React.createClass({
         return (
             <div>
                 <Navbar
+                    ref="navbar"
                     brand={this.getLogo()}
                     toggleNavKey={0}
                     fixedTop={true}
-                    ref="navbar">
+                    className="hidden-print">
                     <CollapsibleNav
                         eventKey={0}>
                         <Nav navbar left>
@@ -237,6 +238,9 @@ let Header = React.createClass({
                         {navRoutesLinks}
                     </CollapsibleNav>
                 </Navbar>
+                <p className="ascribe-print-header visible-print">
+                    <span className="icon-ascribe-logo" />
+                </p>
             </div>
         );
     }

js/components/piece_list.js

@@ -37,6 +37,7 @@ let PieceList = React.createClass({
         bulkModalButtonListType: React.PropTypes.func,
         canLoadPieceList: React.PropTypes.bool,
         redirectTo: React.PropTypes.string,
+        shouldRedirect: React.PropTypes.func,
         customSubmitButton: React.PropTypes.element,
         customThumbnailPlaceholder: React.PropTypes.func,
         filterParams: React.PropTypes.array,
@@ -114,7 +115,11 @@ let PieceList = React.createClass({
     },
 
     componentDidUpdate() {
-        if (this.props.redirectTo && this.state.unfilteredPieceListCount === 0) {
+        const { redirectTo, shouldRedirect } = this.props;
+        const { unfilteredPieceListCount } = this.state;
+
+        if (redirectTo && unfilteredPieceListCount === 0 &&
+            (typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) {
             // FIXME: hack to redirect out of the dispatch cycle
             window.setTimeout(() => this.history.pushState(null, this.props.redirectTo, this.props.location.query), 0);
         }

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

@@ -19,8 +19,10 @@ import ApiUrls from '../../../../../../constants/api_urls';
 
 import requests from '../../../../../../utils/requests';
 
-import { getLangText } from '../../../../../../utils/lang_utils';
+import { getErrorNotificationMessage } from '../../../../../../utils/error_utils';
 import { setCookie } from '../../../../../../utils/fetch_api_utils';
+import { validateForms } from '../../../../../../utils/form_utils';
+import { getLangText } from '../../../../../../utils/lang_utils';
 import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
 
 
@@ -35,7 +37,7 @@ const PRRegisterPieceForm = React.createClass({
 
     mixins: [History],
 
-    getInitialState(){
+    getInitialState() {
         return {
             digitalWorkKeyReady: true,
             thumbnailKeyReady: true,
@@ -54,15 +56,15 @@ const PRRegisterPieceForm = React.createClass({
      * second adding all the additional details
      */
     submit() {
-        if(!this.validateForms()) {
+        if (!this.validateForms()) {
             return;
-        } else {
+        }
+
         // disable the submission button right after the user
         // clicks on it to avoid double submission
         this.setState({
             submitted: true
         });
-        }
 
         const { currentUser } = this.props;
         const { registerPieceForm,
@@ -106,10 +108,18 @@ const PRRegisterPieceForm = React.createClass({
             })
             .then(() => this.history.pushState(null, `/pieces/${this.state.piece.id}`))
             .catch((err) => {
-                const notificationMessage = new GlobalNotificationModel(getLangText("Oops! We weren't able to send your submission. Contact: support@ascribe.io"), 'danger', 5000);
+                const errMessage = (getErrorNotificationMessage(err) || getLangText("Oops! We weren't able to send your submission.")) +
+                                        getLangText(' Please contact support@ascribe.io');
+
+                const notificationMessage = new GlobalNotificationModel(errMessage, 'danger', 10000);
                 GlobalNotificationActions.appendGlobalNotification(notificationMessage);
 
                 console.logGlobal(new Error('Portfolio Review piece registration failed'), err);
+
+                // Reset the submit button
+                this.setState({
+                    submitted: false
+                });
             });
     },
 
@@ -118,11 +128,7 @@ const PRRegisterPieceForm = React.createClass({
                 additionalDataForm,
                 uploadersForm } = this.refs;
 
-        const registerPieceFormValidation = registerPieceForm.validate();
+        return validateForms([registerPieceForm, additionalDataForm, uploadersForm], true);
-        const additionalDataFormValidation = additionalDataForm.validate();
-        const uploaderFormValidation = uploadersForm.validate();
-
-        return registerPieceFormValidation && additionalDataFormValidation && uploaderFormValidation;
     },
 
     getCreateBlobRoutine() {
@@ -139,7 +145,7 @@ const PRRegisterPieceForm = React.createClass({
     },
 
     /**
-     * This method is overloaded so that we can track the ready-state
+     * These two methods are overloaded so that we can track the ready-state
      * of each uploader in the component
      * @param {string} uploaderKey Name of the uploader's key to track
      */
@@ -151,6 +157,14 @@ const PRRegisterPieceForm = React.createClass({
         };
     },
 
+    handleOptionalFileValidationFailed(uploaderKey) {
+        return () => {
+            this.setState({
+                [uploaderKey]: true
+            });
+        };
+    },
+
     getSubmitButton() {
         const { digitalWorkKeyReady,
                 thumbnailKeyReady,
@@ -303,7 +317,7 @@ const PRRegisterPieceForm = React.createClass({
                     </Property>
                     <Property
                         name="thumbnailKey"
-                        label={getLangText('Featured Cover photo')}>
+                        label={getLangText('Featured Cover photo (max 5MB)')}>
                         <InputFineuploader
                             fileInputElement={UploadButton()}
                             createBlobRoutine={{
@@ -316,8 +330,8 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'thumbnail'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                                itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
-                                sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                                sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
                                 allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
                             }}
                             location={location}
@@ -334,6 +348,7 @@ const PRRegisterPieceForm = React.createClass({
                             fileInputElement={UploadButton()}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                             setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
+                            onValidationFailed={this.handleOptionalFileValidationFailed('supportingMaterialsReady')}
                             createBlobRoutine={this.getCreateBlobRoutine()}
                             keyRoutine={{
                                 url: AppConstants.serverUrl + 's3/key/',

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

@@ -62,7 +62,7 @@ const PRRegisterPiece = React.createClass({
                 <Col xs={6}>
                     <div className="register-piece--info">
                         <h1>Portfolio Review</h1>
-                        <h2>{getLangText('Submission closing on %s', ' 22 Dec 2015')}</h2>
+                        <h2>{getLangText('Submission closing on %s', ' 27 Dec 2015')}</h2>
                         <p>For more information, visit:&nbsp;
                             <a href="http://www.portfolio-review.de/submission/" target="_blank">
                                 portfolio-review.de

js/components/whitelabel/prize/simple_prize/prize_app.js

@@ -32,7 +32,7 @@ let PrizeApp = React.createClass({
         if (!path || history.isActive('/login') || history.isActive('/signup')) {
             header = <Hero />;
         } else {
-            header = <Header showAddWork={false} routes={routes}/>;
+            header = <Header routes={routes}/>;
         }
 
         return (

js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js

@@ -25,12 +25,16 @@ let WalletPieceContainer = React.createClass({
         currentUser: React.PropTypes.object.isRequired,
         loadPiece: React.PropTypes.func.isRequired,
         handleDeleteSuccess: React.PropTypes.func.isRequired,
-        submitButtonType: React.PropTypes.func.isRequired
+        submitButtonType: React.PropTypes.func.isRequired,
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.object,
+            React.PropTypes.array
+        ])
     },
 
 
     render() {
-        if(this.props.piece && this.props.piece.id) {
+        if (this.props.piece && this.props.piece.id) {
             return (
                 <Piece
                     piece={this.props.piece}
@@ -76,12 +80,10 @@ let WalletPieceContainer = React.createClass({
                             url={ApiUrls.note_private_piece}
                             currentUser={this.props.currentUser}/>
                     </CollapsibleParagraph>
-
                     {this.props.children}
                 </Piece>
             );
-        }
+        } else {
-        else {
             return (
                 <div className="fullpage-spinner">
                     <AscribeSpinner color='dark-blue' size='lg' />

js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js

@@ -106,22 +106,27 @@ let IkonotvContractNotifications = React.createClass({
 
     handleConfirm() {
         let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
-        OwnershipFetcher.confirmContractAgreement(contractAgreement).then(
+        OwnershipFetcher
-            () => this.handleConfirmSuccess()
+            .confirmContractAgreement(contractAgreement)
-        );
+            .then(this.handleConfirmSuccess);
     },
 
     handleConfirmSuccess() {
         let notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
+
+        // Flush contract notifications and refetch
+        NotificationActions.flushContractAgreementListNotifications();
+        NotificationActions.fetchContractAgreementListNotifications();
+
         this.history.pushState(null, '/collection');
     },
 
     handleDeny() {
         let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
-        OwnershipFetcher.denyContractAgreement(contractAgreement).then(
+        OwnershipFetcher
-            () => this.handleDenySuccess()
+            .denyContractAgreement(contractAgreement)
-        );
+            .then(this.handleDenySuccess);
     },
 
     handleDenySuccess() {

js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js

@@ -61,8 +61,7 @@ let IkonotvArtistDetailsForm = React.createClass({
         let buttons, spinner, heading;
         let { isInline, handleSuccess } = this.props;
 
-
+        if (!isInline) {
-        if(!isInline) {
             buttons = (
                 <button
                     type="submit"
@@ -89,7 +88,7 @@ let IkonotvArtistDetailsForm = React.createClass({
             );
         }
 
-        if(this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
+        if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
             return (
                 <Form
                     disabled={this.props.disabled}

js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js

@@ -61,7 +61,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
         let buttons, spinner, heading;
         let { isInline, handleSuccess } = this.props;
 
-        if(!isInline) {
+        if (!isInline) {
             buttons = (
                 <button
                     type="submit"
@@ -88,7 +88,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
             );
         }
 
-        if(this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
+        if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
             return (
                 <Form
                     disabled={this.props.disabled}

js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js

@@ -1,15 +1,18 @@
 'use strict';
 
 import React from 'react';
+
 import PieceList from '../../../../piece_list';
 
 import UserActions from '../../../../../actions/user_actions';
 import UserStore from '../../../../../stores/user_store';
+import NotificationStore from '../../../../../stores/notification_store';
 
 import IkonotvAccordionListItem from './ikonotv_accordion_list/ikonotv_accordion_list_item';
 
-import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
+import { mergeOptions } from '../../../../../utils/general_utils';
+import { getLangText } from '../../../../../utils/lang_utils';
 
 
 let IkonotvPieceList = React.createClass({
@@ -18,20 +21,33 @@ let IkonotvPieceList = React.createClass({
     },
 
     getInitialState() {
-        return UserStore.getState();
+        return mergeOptions(
+            NotificationStore.getState(),
+            UserStore.getState()
+        );
     },
 
     componentDidMount() {
+        NotificationStore.listen(this.onChange);
         UserStore.listen(this.onChange);
+
         UserActions.fetchCurrentUser();
     },
 
     componentWillUnmount() {
+        NotificationStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
     },
 
     onChange(state) {
         this.setState(state);
+
+    },
+
+    redirectIfNoContractNotifications() {
+        const { contractAgreementListNotifications } = this.state;
+
+        return contractAgreementListNotifications && !contractAgreementListNotifications.length;
     },
 
     render() {
@@ -41,6 +57,7 @@ let IkonotvPieceList = React.createClass({
             <div>
                 <PieceList
                     redirectTo="/register_piece?slide_num=0"
+                    shouldRedirect={this.redirectIfNoContractNotifications}
                     accordionListItemType={IkonotvAccordionListItem}
                     filterParams={[{
                         label: getLangText('Show works I have'),

js/components/whitelabel/wallet/wallet_app.js

@@ -35,7 +35,7 @@ let WalletApp = React.createClass({
             && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
             header = (<div className="hero"/>);
         } else {
-            header = <Header showAddWork={true} routes={routes} />;
+            header = <Header routes={routes} />;
         }
 
         // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,

js/components/whitelabel/wallet/wallet_routes.js

@@ -54,7 +54,7 @@ let ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
             <Route
                 path='signup'
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
@@ -63,18 +63,19 @@ let ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandRegisterPiece)}
-                headerTitle='+ NEW WORK'/>
+                headerTitle='+ NEW WORK'
+                aclName='acl_wallet_submit' />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandPieceList)}
-                headerTitle='COLLECTION'/>
+                headerTitle='COLLECTION' />
             <Route path='editions/:editionId' component={EditionContainer} />
             <Route path='verify' component={CoaVerifyContainer} />
             <Route path='pieces/:pieceId' component={CylandPieceContainer} />
@@ -88,7 +89,7 @@ let ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
             <Route
                 path='signup'
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
@@ -97,18 +98,18 @@ let ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CCRegisterPiece)}
-                headerTitle='+ NEW WORK'/>
+                headerTitle='+ NEW WORK' />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PieceList)}
-                headerTitle='COLLECTION'/>
+                headerTitle='COLLECTION' />
             <Route path='pieces/:pieceId' component={PieceContainer} />
             <Route path='editions/:editionId' component={EditionContainer} />
             <Route path='verify' component={CoaVerifyContainer} />
@@ -123,7 +124,7 @@ let ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
             <Route
                 path='signup'
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
@@ -132,27 +133,27 @@ let ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
             <Route
                 path='request_loan'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SendContractAgreementForm)}
                 headerTitle='SEND NEW CONTRACT'
-                aclName='acl_create_contractagreement'/>
+                aclName='acl_create_contractagreement' />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvRegisterPiece)}
                 headerTitle='+ NEW WORK'
-                aclName='acl_create_piece'/>
+                aclName='acl_wallet_submit' />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvPieceList)}
-                headerTitle='COLLECTION'/>
+                headerTitle='COLLECTION' />
             <Route
                 path='contract_notifications'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)} />
             <Route path='pieces/:pieceId' component={IkonotvPieceContainer} />
             <Route path='editions/:editionId' component={EditionContainer} />
             <Route path='verify' component={CoaVerifyContainer} />
@@ -167,7 +168,7 @@ let ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
             <Route
                 path='signup'
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
@@ -176,18 +177,19 @@ let ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
-                headerTitle='+ NEW WORK'/>
+                headerTitle='+ NEW WORK'
+                aclName='acl_wallet_submit' />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
-                headerTitle='COLLECTION'/>
+                headerTitle='COLLECTION' />
             <Route path='pieces/:pieceId' component={MarketPieceContainer} />
             <Route path='editions/:editionId' component={MarketEditionContainer} />
             <Route path='verify' component={CoaVerifyContainer} />
@@ -202,7 +204,7 @@ let ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
             <Route
                 path='signup'
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
@@ -211,19 +213,19 @@ let ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
                 headerTitle='+ NEW WORK'
-                aclName='acl_wallet_submit'/>
+                aclName='acl_wallet_submit' />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(Vivi23PieceList)}
-                headerTitle='COLLECTION'/>
+                headerTitle='COLLECTION' />
             <Route path='pieces/:pieceId' component={MarketPieceContainer} />
             <Route path='editions/:editionId' component={MarketEditionContainer} />
             <Route path='verify' component={CoaVerifyContainer} />

js/constants/application_constants.js

@@ -91,6 +91,10 @@ const constants = {
             'registerWork': {
                 'itemLimit': 1,
                 'sizeLimit': '25000000000'
+            },
+            'workThumbnail': {
+                'itemLimit': 1,
+                'sizeLimit': '5000000'
             }
         }
     },

js/stores/notification_store.js

@@ -10,6 +10,8 @@ class NotificationStore {
     constructor() {
         this.pieceListNotifications = {};
         this.editionListNotifications = {};
+        // Need to determine if contract agreement notifications have been loaded or not,
+        // so we use null here instead of an empty array
         this.contractAgreementListNotifications = null;
         this.editionNotifications = null;
         this.pieceNotifications = null;
@@ -20,6 +22,10 @@ class NotificationStore {
         this.pieceListNotifications = res.notifications;
     }
 
+    onFlushPieceListNotifications() {
+        this.pieceListNotifications = [];
+    }
+
     onUpdatePieceNotifications(res) {
         this.pieceNotifications = res.notification;
     }
@@ -28,6 +34,10 @@ class NotificationStore {
         this.editionListNotifications = res.notifications;
     }
 
+    onFlushPieceListNotifications() {
+        this.editionListNotifications = [];
+    }
+
     onUpdateEditionNotifications(res) {
         this.editionNotifications = res.notification;
     }
@@ -36,6 +46,9 @@ class NotificationStore {
         this.contractAgreementListNotifications = res.notifications;
     }
 
+    onFlushContractAgreementListNotifications() {
+        this.contractAgreementListNotifications = null;
+    }
 }
 
 export default alt.createStore(NotificationStore, 'NotificationStore');

js/utils/error_utils.js

@@ -35,3 +35,31 @@ export function initLogging() {
 
     console.logGlobal = logGlobal;
 }
+
+/*
+ * Gets the json errors from the error as an array
+ * @param  {Error} error A Javascript error
+ * @return {Array}       List of json errors
+ */
+export function getJsonErrorsAsArray(error) {
+    const { json: { errors = {} } = {} } = error;
+
+    const errorArrays = Object
+        .keys(errors)
+        .map((errorKey) => {
+            return errors[errorKey];
+        });
+
+    // Collapse each errorKey's errors into a flat array
+    return [].concat(...errorArrays);
+}
+
+/*
+ * Tries to get an error message from the error, either by using its notification
+ * property or first json error (if any)
+ * @param  {Error} error A Javascript error
+ * @return {string}      Error message string
+ */
+export function getErrorNotificationMessage(error) {
+    return (error && error.notification) || getJsonErrorsAsArray(error)[0] || '';
+}

js/utils/form_utils.js

@@ -2,8 +2,34 @@
 
 import { getLangText } from './lang_utils';
 
+import GlobalNotificationActions from '../actions/global_notification_actions';
+import GlobalNotificationModel from '../models/global_notification_model';
+
 import AppConstants from '../constants/application_constants';
 
+/**
+ * Validates a given list of forms
+ * @param  {Form} forms                      List of forms, each of which should have a `validate` method available
+ * @param  {boolean} showFailureNotification Show global notification if there are validation failures
+ * @return {boolean}                         True if validation did *NOT* catch any errors
+ */
+export function validateForms(forms, showFailureNotification) {
+    const validationSuccessful = forms.reduce((result, form) => {
+        if (form && typeof form.validate === 'function') {
+            return form.validate() && result;
+        } else {
+            throw new Error('Form given for validation does not have a `validate` method');
+        }
+    }, true);
+
+    if (!validationSuccessful && showFailureNotification) {
+        const notification = new GlobalNotificationModel(getLangText('Oops, there may be missing or invalid fields. Please check your inputs again.'), 'danger');
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    }
+
+    return validationSuccessful;
+}
+
 /**
  * Get the data ids of the given piece or editions.
  * @param  {boolean} isPiece                   Is the given entities parameter a piece? (False: array of editions)

js/utils/general_utils.js

@@ -84,8 +84,6 @@ export function formatText() {
  * Checks a list of objects for key duplicates and returns a boolean
  */
 function _doesObjectListHaveDuplicates(l) {
-    let mergedList = [];
-
     l = l.map((obj) => {
         if(!obj) {
             throw new Error('The object you are trying to merge is null instead of an empty object');
@@ -94,11 +92,11 @@ function _doesObjectListHaveDuplicates(l) {
         return Object.keys(obj);
     });
 
-    // Taken from: http://stackoverflow.com/a/10865042
+    // Taken from: http://stackoverflow.com/a/10865042 (but even better with rest)
     // How to flatten an array of arrays in javascript.
     // If two objects contain the same key, then these two keys
     // will actually be represented in the merged array
-    mergedList = mergedList.concat.apply(mergedList, l);
+    let mergedList = [].concat(...l);
 
     // Taken from: http://stackoverflow.com/a/7376645/1263876
     // By casting the array to a set, and then checking if the size of the array

sass/ascribe_footer.scss

@@ -1,4 +1,3 @@
-
 .ascribe-footer {
     text-align: center;
     margin-top: 5em;

sass/ascribe_print.scss

@@ -0,0 +1,118 @@
+@media print {
+    @page {
+        margin: 1.2cm;
+    }
+
+    .ascribe-default-app {
+        padding: 0 !important;
+    }
+
+    // Utility class to not automatically expand an anchor href after the text
+    .anchor-no-expand-print:after {
+        content: '' !important;
+    }
+
+    // Replace navbar header with ascribe logo
+    .ascribe-print-header {
+        border-bottom: 1px solid rgba(0, 60, 105, 0.1);
+        font-size: 1.2em;
+        margin: 0.5em 0;
+        text-align: center;
+    }
+
+    // Force left and right columns
+    .ascribe-print-col-left {
+        width: 50% !important;
+        float: left !important;
+    }
+    .ascribe-print-col-right {
+        width: 50% !important;
+        float: right !important;
+    }
+
+    // Restyle file uploader dialogs
+    .file-drag-and-drop {
+        padding-top: 0;
+        outline-width: 0;
+        text-align: left;
+    }
+
+    .file-drag-and-drop-position {
+        margin: 0;
+    }
+
+    // Restyle COA
+    .ascribe-coa-print-placeholder {
+        padding: 0 1.5em 1em 1.5em;
+        margin: 0;
+    }
+
+    // Force collapsible properties to be expanded
+    .ascribe-collapsible-content .collapse {
+        display: block;
+    }
+
+    // Decrease property spacing
+    .ascribe-property-wrapper {
+        padding-bottom: 0.5em;
+    }
+
+    .ascribe-property {
+        padding-top: 0.5em;
+
+        > div,
+        > input,
+        > p,
+        > pre,
+        > select,
+        > span:not(.glyphicon),
+        > textarea {
+            margin: 0;
+        }
+    }
+
+    .ascribe-collapsible-wrapper {
+        margin-bottom: 5px;
+
+        > div:first-child {
+            margin-top: 0;
+            padding-bottom: 5px;
+        }
+    }
+
+    .ascribe-form hr {
+        margin-bottom: 3px;
+    }
+
+    // Hide placeholder text
+    input::-webkit-input-placeholder {
+        opacity: 0;
+    }
+    textarea::-webkit-input-placeholder {
+        opacity: 0;
+    }
+
+    /* firefox 18- */
+    input:-moz-placeholder {
+        opacity: 0;
+    }
+    textarea:-moz-placeholder {
+        opacity: 0;
+    }
+
+    /* firefox 19+ */
+    input::-moz-placeholder {
+        opacity: 0;
+    }
+    textarea::-moz-placeholder {
+        opacity: 0;
+    }
+
+    /* ie */
+    input:-ms-input-placeholder {
+        opacity: 0;
+    }
+    textarea:-ms-input-placeholder  {
+        opacity: 0;
+    }
+}

sass/ascribe_uploader.scss

@@ -28,9 +28,9 @@
 }
 
 .file-drag-and-drop-dialog {
-    margin: 1.5em 0 1.5em 0;
+    margin: 0 0 1.5em 0;
 
-    > p:first-child {
+    .file-drag-and-drop-dialog-title {
         font-size: 1.5em !important;
         margin-bottom: 0;
         margin-top: 0;
@@ -47,14 +47,6 @@
     margin: 1.5em 0 0 0;
 }
 
-.file-drag-and-drop .file-drag-and-drop-dialog > p:first-child {
-    font-size: 1.5em !important;
-
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-bottom: 0;
-}
-
 .file-drag-and-drop-position {
     display: inline-block;
     margin-left: .7em;
@@ -138,6 +130,7 @@
     text-align: center;
     width: 104px;
 
+    // REFACTOR TO USE TABLE CELL
     .action-file, .spinner-file, .icon-ascribe-ok {
         margin-top: 1em;
         line-height: 1.3;

sass/main.scss

@@ -44,6 +44,8 @@ $BASE_URL: '<%= BASE_URL %>';
 
 @import 'whitelabel/index';
 
+@import 'ascribe_print';
+
 
 html,
 body {
@@ -106,6 +108,12 @@ hr {
     color: $ascribe-dark-blue;
 }
 
+.add-overflow-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .ascribe-subheader {
     padding-bottom: 10px;
     margin-top: -10px;

sass/whitelabel/prize/index.scss

@@ -7,3 +7,9 @@
     padding-top: 70px;
     padding-bottom: 10px;
 }
+
+@media print {
+    .ascribe-prize-app {
+        padding: 0 !important;
+    }
+}

sass/whitelabel/wallet/index.scss

@@ -9,3 +9,9 @@
     padding-top: 70px;
     padding-bottom: 10px;
 }
+
+@media print {
+    .ascribe-wallet-app {
+        padding: 0 !important;
+    }
+}