Add custom buttons to loan form for Cyland registration

js/components/ascribe_forms/form_loan.js

@@ -25,6 +25,7 @@ import { mergeOptions } from '../../utils/general_utils';
 let LoanForm = React.createClass({
     propTypes: {
         loanHeading: React.PropTypes.string,
+        buttons: React.PropTypes.element,
         email: React.PropTypes.string,
         gallery: React.PropTypes.string,
         startDate: React.PropTypes.object,
@@ -80,7 +81,11 @@ let LoanForm = React.createClass({
     },
 
     getButtons() {
-        if(this.props.loanHeading) {
+        const { buttons, loanHeading } = this.props;
+
+        if (buttons) {
+            return buttons;
+        } else if (loanHeading) {
             return (
                 <button
                     type="submit"

js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js

@@ -8,6 +8,8 @@ import Moment from 'moment';
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
 
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
+
 import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
 
 import WhitelabelActions from '../../../../../actions/whitelabel_actions';
@@ -159,11 +161,37 @@ let CylandRegisterPiece = React.createClass({
     },
 
     render() {
+        const { location } = this.props;
+        const { currentUser, piece, step, whitelabel } = this.state;
 
-        let today = new Moment();
-        let datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment();
+        const today = new Moment();
+        const datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment();
         datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain.add(1000, 'years');
 
+        const loanHeading = getLangText('Loan to Cyland archive');
+        const loanButtons = (
+            <div>
+                <div
+                    className='col-xs-6 pull-left'
+                    style={{padding: '0 2px 2px 0'}}>
+                    <LinkContainer to='/collection'>
+                        <button
+                            type='button'
+                            className='btn btn-secondary btn-wide'>
+                            {getLangText('Loan later')}
+                        </button>
+                    </LinkContainer>
+                </div>
+                <div
+                    className='col-xs-6 pull-right'
+                    style={{padding: '0 0 2px 2px'}}>
+                    <button className='btn btn-default btn-wide'>
+                        {getLangText('Loan to archive')}
+                    </button>
+                </div>
+            </div>
+        );
+
         setDocumentTitle(getLangText('Register a new piece'));
 
         return (
@@ -174,18 +202,18 @@ let CylandRegisterPiece = React.createClass({
                     pending: 'glyphicon glyphicon-chevron-right',
                     completed: 'glyphicon glyphicon-lock'
                 }}
-                location={this.props.location}>
+                location={location}>
                 <div data-slide-title={getLangText('Register work')}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <RegisterPieceForm
-                                disabled={this.state.step > 0}
+                                disabled={step > 0}
                                 enableLocalHashing={false}
                                 headerMessage={getLangText('Submit to Cyland Archive')}
                                 submitMessage={getLangText('Submit')}
                                 isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                location={this.props.location}/>
+                                location={location}/>
                         </Col>
                     </Row>
                 </div>
@@ -193,9 +221,9 @@ let CylandRegisterPiece = React.createClass({
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <CylandAdditionalDataForm
-                                disabled={this.state.step > 1}
+                                disabled={step > 1}
                                 handleSuccess={this.handleAdditionalDataSuccess}
-                                piece={this.state.piece} />
+                                piece={piece} />
                         </Col>
                     </Row>
                 </div>
@@ -204,15 +232,16 @@ let CylandRegisterPiece = React.createClass({
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <LoanForm
                                 loanHeading={getLangText('Loan to Cyland archive')}
+                                buttons={loanButtons}
                                 message={getAclFormMessage({
                                     aclName: 'acl_loan',
-                                    entities: this.state.piece,
+                                    entities: piece,
                                     isPiece: true,
-                                    senderName: this.state.currentUser.username
+                                    senderName: currentUser.username
                                 })}
-                                id={{piece_id: this.state.piece.id}}
+                                id={{piece_id: piece.id}}
                                 url={ApiUrls.ownership_loans_pieces}
-                                email={this.state.whitelabel.user}
+                                email={whitelabel.user}
                                 gallery="Cyland Archive"
                                 startDate={today}
                                 endDate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}

sass/whitelabel/wallet/cyland/cyland_custom_style.scss

@@ -1,6 +1,7 @@
 $cyland--nav-bg-color: #fcfcfc;
 $cyland--nav-fg-prim-color: #1E1E1E;
 $cyland--button-color: $cyland--nav-fg-prim-color;
+$cyland--button-sec-color: #515151;
 
 .client--cyland {
     .navbar-default {
@@ -117,8 +118,8 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
         &.active:hover,
         &.active:focus,
         &.active.focus {
-            background-color: $cyland--button-color;
-            border-color: $cyland--button-color;
+            background-color: $cyland--button-sec-color;
+            border-color: $cyland--button-sec-color;
             color: white;
         }
     }
@@ -234,4 +235,4 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
 
 .client--cyland  .upload-button-wrapper > span {
     color: $cyland--button-color;
-}
+}