From 8d9df43339b09d96497762031964a62d139017e5 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 15 Jan 2016 17:17:34 +0100
Subject: [PATCH] Clean up whitelabel AdditionalDataForms

---
 .../cyland_additional_data_form.js            |  38 ++---
 .../ikonotv_detail/ikonotv_piece_container.js |   1 +
 .../ikonotv_artist_details_form.js            |  51 +++----
 .../ikonotv_artwork_details_form.js           |  62 ++++----
 .../market_additional_data_form.js            | 141 ++++++++++--------
 5 files changed, 155 insertions(+), 138 deletions(-)

diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js b/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
index 93cc515a..b4f20872 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
@@ -23,9 +23,10 @@ import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_
 
 let CylandAdditionalDataForm = React.createClass({
     propTypes: {
-        handleSuccess: React.PropTypes.func,
         piece: React.PropTypes.object.isRequired,
+
         disabled: React.PropTypes.bool,
+        handleSuccess: React.PropTypes.func,
         isInline: React.PropTypes.bool
     },
 
@@ -42,13 +43,13 @@ let CylandAdditionalDataForm = React.createClass({
     },
 
     handleSuccess() {
-        let notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
+        const notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     getFormData() {
-        let extradata = {};
-        let formRefs = this.refs.form.refs;
+        const extradata = {};
+        const formRefs = this.refs.form.refs;
 
         // Put additional fields in extra data object
         Object
@@ -71,10 +72,13 @@ let CylandAdditionalDataForm = React.createClass({
     },
 
     render() {
-        let { piece, isInline, disabled, handleSuccess, location } = this.props;
-        let buttons, spinner, heading;
+        const { disabled, handleSuccess, isInline, piece } = this.props;
 
-        if(!isInline) {
+        let buttons;
+        let spinner;
+        let heading;
+
+        if (!isInline) {
             buttons = (
                 <button
                     type="submit"
@@ -87,7 +91,7 @@ let CylandAdditionalDataForm = React.createClass({
             spinner = (
                 <div className="modal-footer">
                     <p className="pull-right">
-                        <AscribeSpinner color='dark-blue' size='md'/>
+                        <AscribeSpinner color='dark-blue' size='md' />
                     </p>
                 </div>
             );
@@ -101,7 +105,7 @@ let CylandAdditionalDataForm = React.createClass({
             );
         }
 
-        if(piece && piece.id) {
+        if (piece.id && piece.extra_data) {
             return (
                 <Form
                     disabled={disabled}
@@ -120,7 +124,7 @@ let CylandAdditionalDataForm = React.createClass({
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.artist_bio}
-                            placeholder={getLangText('Enter the artist\'s biography...')}/>
+                            placeholder={getLangText('Enter the artist\'s biography...')} />
                     </Property>
                     <Property
                         name='artist_contact_information'
@@ -129,7 +133,7 @@ let CylandAdditionalDataForm = React.createClass({
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.artist_contact_information}
-                            placeholder={getLangText('Enter the artist\'s contact information...')}/>
+                            placeholder={getLangText('Enter the artist\'s contact information...')} />
                     </Property>
                     <Property
                         name='conceptual_overview'
@@ -138,7 +142,7 @@ let CylandAdditionalDataForm = React.createClass({
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.conceptual_overview}
-                            placeholder={getLangText('Enter a conceptual overview...')}/>
+                            placeholder={getLangText('Enter a conceptual overview...')} />
                     </Property>
                     <Property
                         name='medium'
@@ -147,7 +151,7 @@ let CylandAdditionalDataForm = React.createClass({
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.medium}
-                            placeholder={getLangText('Enter the medium (and other technical specifications)...')}/>
+                            placeholder={getLangText('Enter the medium (and other technical specifications)...')} />
                     </Property>
                     <Property
                         name='size_duration'
@@ -156,7 +160,7 @@ let CylandAdditionalDataForm = React.createClass({
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.size_duration}
-                            placeholder={getLangText('Enter the size / duration...')}/>
+                            placeholder={getLangText('Enter the size / duration...')} />
                     </Property>
                     <Property
                         name='display_instructions'
@@ -165,7 +169,7 @@ let CylandAdditionalDataForm = React.createClass({
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.display_instructions}
-                            placeholder={getLangText('Enter the display instructions...')}/>
+                            placeholder={getLangText('Enter the display instructions...')} />
                     </Property>
                     <Property
                         name='additional_details'
@@ -174,7 +178,7 @@ let CylandAdditionalDataForm = React.createClass({
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.additional_details}
-                            placeholder={getLangText('Enter additional details...')}/>
+                            placeholder={getLangText('Enter additional details...')} />
                     </Property>
                     <FurtherDetailsFileuploader
                         label={getLangText('Additional files (e.g. still images, pdf)')}
@@ -189,7 +193,7 @@ let CylandAdditionalDataForm = React.createClass({
         } else {
             return (
                 <div className="ascribe-loading-position">
-                    <AscribeSpinner color='dark-blue' size='md'/>
+                    <AscribeSpinner color='dark-blue' size='md' />
                 </div>
             );
         }
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
index c7c35c7c..861b04f5 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
@@ -122,6 +122,7 @@ let IkonotvPieceContainer = React.createClass({
 
         if (piece.id) {
             setDocumentTitle([piece.artist_name, piece.title].join(', '));
+
             return (
                 <WalletPieceContainer
                     piece={piece}
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
index 0b97c8dd..5d845624 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
@@ -20,11 +20,10 @@ import { getLangText } from '../../../../../../utils/lang_utils';
 
 let IkonotvArtistDetailsForm = React.createClass({
     propTypes: {
-        handleSuccess: React.PropTypes.func,
         piece: React.PropTypes.object.isRequired,
 
         disabled: React.PropTypes.bool,
-
+        handleSuccess: React.PropTypes.func,
         isInline: React.PropTypes.bool
     },
 
@@ -35,8 +34,8 @@ let IkonotvArtistDetailsForm = React.createClass({
     },
 
     getFormData() {
-        let extradata = {};
-        let formRefs = this.refs.form.refs;
+        const extradata = {};
+        const formRefs = this.refs.form.refs;
 
         // Put additional fields in extra data object
         Object
@@ -53,20 +52,23 @@ let IkonotvArtistDetailsForm = React.createClass({
     },
 
     handleSuccess() {
-        let notification = new GlobalNotificationModel('Artist details successfully updated', 'success', 10000);
+        const notification = new GlobalNotificationModel('Artist details successfully updated', 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     render() {
-        let buttons, spinner, heading;
-        let { isInline, handleSuccess } = this.props;
+        const { disabled, isInline, handleSuccess, piece } = this.props;
+
+        let buttons;
+        let spinner;
+        let heading;
 
         if (!isInline) {
             buttons = (
                 <button
                     type="submit"
                     className="btn btn-default btn-wide"
-                    disabled={this.props.disabled}>
+                    disabled={disabled}>
                     {getLangText('Proceed to loan')}
                 </button>
             );
@@ -74,7 +76,7 @@ let IkonotvArtistDetailsForm = React.createClass({
             spinner = (
                 <div className="modal-footer">
                     <p className="pull-right">
-                        <AscribeSpinner color='dark-blue' size='md'/>
+                        <AscribeSpinner color='dark-blue' size='md' />
                     </p>
                 </div>
             );
@@ -88,13 +90,13 @@ let IkonotvArtistDetailsForm = React.createClass({
             );
         }
 
-        if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
+        if (piece.id && piece.extra_data) {
             return (
                 <Form
-                    disabled={this.props.disabled}
+                    disabled={disabled}
                     className="ascribe-form-bordered"
                     ref='form'
-                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})}
+                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: piece.id})}
                     handleSuccess={handleSuccess || this.handleSuccess}
                     getFormData={this.getFormData}
                     buttons={buttons}
@@ -103,39 +105,38 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='artist_website'
                         label={getLangText('Artist Website')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.artist_website}>
+                        expanded={!disabled || !!piece.extra_data.artist_website}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.artist_website}
-                            placeholder={getLangText('The artist\'s website if present...')}/>
+                            defaultValue={piece.extra_data.artist_website}
+                            placeholder={getLangText('The artist\'s website if present...')} />
                     </Property>
                     <Property
                         name='gallery_website'
                         label={getLangText('Website of related Gallery, Museum, etc.')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.gallery_website}>
+                        expanded={!disabled || !!piece.extra_data.gallery_website}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.gallery_website}
-                            placeholder={getLangText('The website of any related Gallery or Museum')}/>
+                            defaultValue={piece.extra_data.gallery_website}
+                            placeholder={getLangText('The website of any related Gallery or Museum')} />
                     </Property>
                     <Property
                         name='additional_websites'
                         label={getLangText('Additional Websites/Publications/Museums/Galleries')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_websites}>
+                        expanded={!disabled || !!piece.extra_data.additional_websites}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.additional_websites}
-                            placeholder={getLangText('Enter additional Websites/Publications if any')}/>
+                            defaultValue={piece.extra_data.additional_websites}
+                            placeholder={getLangText('Enter additional Websites/Publications if any')} />
                     </Property>
                     <Property
                         name='conceptual_overview'
                         label={getLangText('Short text about the Artist')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.conceptual_overview}>
+                        expanded={!disabled || !!piece.extra_data.conceptual_overview}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.conceptual_overview}
-                            placeholder={getLangText('Enter a short bio about the Artist')}
-                            />
+                            defaultValue={piece.extra_data.conceptual_overview}
+                            placeholder={getLangText('Enter a short bio about the Artist')} />
                     </Property>
                 </Form>
             );
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
index bcf6830d..9c2c3e33 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
@@ -20,11 +20,10 @@ import { getLangText } from '../../../../../../utils/lang_utils';
 
 let IkonotvArtworkDetailsForm = React.createClass({
     propTypes: {
-        handleSuccess: React.PropTypes.func,
         piece: React.PropTypes.object.isRequired,
 
         disabled: React.PropTypes.bool,
-
+        handleSuccess: React.PropTypes.func,
         isInline: React.PropTypes.bool
     },
 
@@ -35,8 +34,8 @@ let IkonotvArtworkDetailsForm = React.createClass({
     },
 
     getFormData() {
-        let extradata = {};
-        let formRefs = this.refs.form.refs;
+        const extradata = {};
+        const formRefs = this.refs.form.refs;
 
         // Put additional fields in extra data object
         Object
@@ -53,20 +52,23 @@ let IkonotvArtworkDetailsForm = React.createClass({
     },
 
     handleSuccess() {
-        let notification = new GlobalNotificationModel('Artwork details successfully updated', 'success', 10000);
+        const notification = new GlobalNotificationModel('Artwork details successfully updated', 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     render() {
-        let buttons, spinner, heading;
-        let { isInline, handleSuccess } = this.props;
+        const { disabled, isInline, handleSuccess, piece } = this.props;
+
+        let buttons;
+        let spinner;
+        let heading;
 
         if (!isInline) {
             buttons = (
                 <button
                     type="submit"
                     className="btn btn-default btn-wide"
-                    disabled={this.props.disabled}>
+                    disabled={disabled}>
                     {getLangText('Proceed to artist details')}
                 </button>
             );
@@ -74,7 +76,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
             spinner = (
                 <div className="modal-footer">
                     <p className="pull-right">
-                        <AscribeSpinner color='dark-blue' size='md'/>
+                        <AscribeSpinner color='dark-blue' size='md' />
                     </p>
                 </div>
             );
@@ -88,13 +90,13 @@ let IkonotvArtworkDetailsForm = React.createClass({
             );
         }
 
-        if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
+        if (piece.id && piece.extra_data) {
             return (
                 <Form
-                    disabled={this.props.disabled}
+                    disabled={disabled}
                     className="ascribe-form-bordered"
                     ref='form'
-                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})}
+                    url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: piece.id })}
                     handleSuccess={handleSuccess || this.handleSuccess}
                     getFormData={this.getFormData}
                     buttons={buttons}
@@ -103,56 +105,56 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='medium'
                         label={getLangText('Medium')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.medium}>
+                        expanded={!disabled || !!piece.extra_data.medium}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.medium}
-                            placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')}/>
+                            defaultValue={piece.extra_data.medium}
+                            placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')} />
                     </Property>
                     <Property
                         name='size_duration'
                         label={getLangText('Size/Duration')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.size_duration}>
+                        expanded={!disabled || !!piece.extra_data.size_duration}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.size_duration}
-                            placeholder={getLangText('Size in centimeters. Duration in minutes.')}/>
+                            defaultValue={piece.extra_data.size_duration}
+                            placeholder={getLangText('Size in centimeters. Duration in minutes.')} />
                     </Property>
                     <Property
                         name='copyright'
                         label={getLangText('Copyright')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright}>
+                        expanded={!disabled || !!piece.extra_data.copyright}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.copyright}
-                            placeholder={getLangText('Which copyright is attached to this work?')}/>
+                            defaultValue={piece.extra_data.copyright}
+                            placeholder={getLangText('Which copyright is attached to this work?')} />
                     </Property>
                     <Property
                         name='courtesy_of'
                         label={getLangText('Courtesy of')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.courtesy_of}>
+                        expanded={!disabled || !!piece.extra_data.courtesy_of}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.courtesy_of}
-                            placeholder={getLangText('The current owner of the artwork')}/>
+                            defaultValue={piece.extra_data.courtesy_of}
+                            placeholder={getLangText('The current owner of the artwork')} />
                     </Property>
                     <Property
                         name='copyright_of_photography'
                         label={getLangText('Copyright of Photography')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright_of_photography}>
+                        expanded={!disabled || !!piece.extra_data.copyright_of_photography}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.copyright_of_photography}
-                            placeholder={getLangText('Who should be attributed for the photography?')}/>
+                            defaultValue={piece.extra_data.copyright_of_photography}
+                            placeholder={getLangText('Who should be attributed for the photography?')} />
                     </Property>
                     <Property
                         name='additional_details'
                         label={getLangText('Additional Details about the artwork')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_details}>
+                        expanded={!disabled || !!piece.extra_data.additional_details}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.additional_details}
-                            placeholder={getLangText('Insert artwork overview')}/>
+                            defaultValue={piece.extra_data.additional_details}
+                            placeholder={getLangText('Insert artwork overview')} />
                     </Property>
                 </Form>
             );
diff --git a/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
index e5eb25fe..c8c1dae4 100644
--- a/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
+++ b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
@@ -109,7 +109,7 @@ let MarketAdditionalDataForm = React.createClass({
     render() {
         const {
             editable,
-            extraData,
+            extraData = {},
             isInline,
             handleSuccess,
             otherData,
@@ -118,8 +118,9 @@ let MarketAdditionalDataForm = React.createClass({
             showNotification,
             submitLabel } = this.props;
 
-        let buttons, heading;
-        let spinner = <AscribeSpinner color='dark-blue' size='lg' />;
+        let buttons;
+        let heading;
+        let spinner;
 
         if (!isInline) {
             buttons = (
@@ -134,7 +135,7 @@ let MarketAdditionalDataForm = React.createClass({
             spinner = (
                 <div className="modal-footer">
                     <p className="pull-right">
-                        {spinner}
+                        <AscribeSpinner color='dark-blue' size='md' />
                     </p>
                 </div>
             );
@@ -148,68 +149,76 @@ let MarketAdditionalDataForm = React.createClass({
             ) : null;
         }
 
-        return (
-            <Form
-                className="ascribe-form-bordered"
-                ref='form'
-                key={this.state.forceUpdateKey}
-                url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: pieceId})}
-                handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess}
-                getFormData={this.getFormData}
-                buttons={buttons}
-                spinner={spinner}
-                disabled={!this.props.editable}>
-                {heading}
-                <FurtherDetailsFileuploader
-                    label={getLangText('Marketplace Thumbnail Image')}
-                    submitFile={function () {}}
-                    setIsUploadReady={this.setIsUploadReady}
-                    isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                    pieceId={pieceId}
-                    otherData={otherData}
-                    editable={editable} />
-                <Property
-                    name='artist_bio'
-                    label={getLangText('Artist Bio')}
-                    expanded={editable || !!extraData.artist_bio}>
-                    <InputTextAreaToggable
-                        rows={1}
-                        defaultValue={extraData.artist_bio}
-                        placeholder={getLangText('Enter a biography of the artist...')}
-                        required />
-                </Property>
-                <Property
-                    name='work_description'
-                    label={getLangText('Work Description')}
-                    expanded={editable || !!extraData.work_description}>
-                    <InputTextAreaToggable
-                        rows={1}
-                        defaultValue={extraData.work_description}
-                        placeholder={getLangText('Enter a description of the work...')}
-                        required />
-                </Property>
-                <Property
-                    name='technology_details'
-                    label={getLangText('Technology Details')}
-                    expanded={editable || !!extraData.technology_details}>
-                    <InputTextAreaToggable
-                        rows={1}
-                        defaultValue={extraData.technology_details}
-                        placeholder={getLangText('Enter technological details about the work...')}
-                        required />
-                </Property>
-                <Property
-                    name='display_instructions'
-                    label={getLangText('Display Instructions')}
-                    expanded={editable || !!extraData.display_instructions}>
-                    <InputTextAreaToggable
-                        rows={1}
-                        defaultValue={extraData.display_instructions}
-                        placeholder={getLangText('Enter instructions on how to best display the work...')}
-                        required />
-                </Property>
-            </Form>
-        );
+        if (pieceId) {
+            return (
+                <Form
+                    className="ascribe-form-bordered"
+                    ref='form'
+                    key={this.state.forceUpdateKey}
+                    url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: pieceId })}
+                    handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess}
+                    getFormData={this.getFormData}
+                    buttons={buttons}
+                    spinner={spinner}
+                    disabled={!this.props.editable}>
+                    {heading}
+                    <FurtherDetailsFileuploader
+                        label={getLangText('Marketplace Thumbnail Image')}
+                        submitFile={function () {}}
+                        setIsUploadReady={this.setIsUploadReady}
+                        isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
+                        pieceId={pieceId}
+                        otherData={otherData}
+                        editable={editable} />
+                    <Property
+                        name='artist_bio'
+                        label={getLangText('Artist Bio')}
+                        expanded={editable || !!extraData.artist_bio}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={extraData.artist_bio}
+                            placeholder={getLangText('Enter a biography of the artist...')}
+                            required />
+                    </Property>
+                    <Property
+                        name='work_description'
+                        label={getLangText('Work Description')}
+                        expanded={editable || !!extraData.work_description}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={extraData.work_description}
+                            placeholder={getLangText('Enter a description of the work...')}
+                            required />
+                    </Property>
+                    <Property
+                        name='technology_details'
+                        label={getLangText('Technology Details')}
+                        expanded={editable || !!extraData.technology_details}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={extraData.technology_details}
+                            placeholder={getLangText('Enter technological details about the work...')}
+                            required />
+                    </Property>
+                    <Property
+                        name='display_instructions'
+                        label={getLangText('Display Instructions')}
+                        expanded={editable || !!extraData.display_instructions}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={extraData.display_instructions}
+                            placeholder={getLangText('Enter instructions on how to best display the work...')}
+                            required />
+                    </Property>
+                </Form>
+            );
+        } else {
+            return (
+                <div className="ascribe-loading-position">
+                    <AscribeSpinner color='dark-blue' size='md' />
+                </div>
+            );
+        }
     }
 });