Update Ikono routes for loading user and whitelabel settings in top level app

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

@@ -6,49 +6,42 @@ import { History } from 'react-router';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import Button from 'react-bootstrap/lib/Button';
 
-import NotificationActions from '../../../../../actions/notification_actions';
-import NotificationStore from '../../../../../stores/notification_store';
-
-import UserActions from '../../../../../actions/user_actions';
-import UserStore from '../../../../../stores/user_store';
-
-import OwnershipFetcher from '../../../../../fetchers/ownership_fetcher';
-
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-
 import GlobalNotificationModel from '../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
 
-import CopyrightAssociationForm from '../../../../ascribe_forms/form_copyright_association';
+import NotificationActions from '../../../../../actions/notification_actions';
+import NotificationStore from '../../../../../stores/notification_store';
 
+import OwnershipFetcher from '../../../../../fetchers/ownership_fetcher';
+
+import CopyrightAssociationForm from '../../../../ascribe_forms/form_copyright_association';
 import Property from '../../../../ascribe_forms/property';
 
 import AppConstants from '../../../../../constants/application_constants';
 
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
-import { mergeOptions } from '../../../../../utils/general_utils';
 
 
 let IkonotvContractNotifications = React.createClass({
+    propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object
+    },
 
     mixins: [History],
 
     getInitialState() {
-        return mergeOptions(
+        return NotificationStore.getState();
-            NotificationStore.getState(),
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
     },
 
     componentDidMount() {
         NotificationStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
+
-        UserActions.fetchCurrentUser();
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel();
         if (this.state.contractAgreementListNotifications === null){
             NotificationActions.fetchContractAgreementListNotifications();
         }
@@ -56,7 +49,6 @@ let IkonotvContractNotifications = React.createClass({
 
     componentWillUnmount() {
         NotificationStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -64,8 +56,9 @@ let IkonotvContractNotifications = React.createClass({
     },
 
     getContract(){
-        let notifications = this.state.contractAgreementListNotifications[0];
+        const notifications = this.state.contractAgreementListNotifications[0];
-        let blob = notifications.contract_agreement.contract.blob;
+        const blob = notifications.contract_agreement.contract.blob;
+
         if (blob.mime === 'pdf') {
             return (
                 <div className='notification-contract-pdf'>
@@ -76,22 +69,24 @@ let IkonotvContractNotifications = React.createClass({
                         pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
                 </div>
             );
+        } else {
+            return (
+                <div className='notification-contract-download'>
+                    <a href={blob.url_safe} target="_blank">
+                        <Glyphicon glyph='download-alt'/>
+                        <span style={{padding: '0.3em'}}>
+                            Download contract
+                        </span>
+                    </a>
+                </div>
+            );
         }
-        return (
-            <div className='notification-contract-download'>
-                <a href={blob.url_safe} target="_blank">
-                    <Glyphicon glyph='download-alt'/>
-                    <span style={{padding: '0.3em'}}>
-                        Download contract
-                    </span>
-                </a>
-            </div>
-        );
     },
 
     getAppendix() {
-        let notifications = this.state.contractAgreementListNotifications[0];
+        const notifications = this.state.contractAgreementListNotifications[0];
-        let appendix = notifications.contract_agreement.appendix;
+        const appendix = notifications.contract_agreement.appendix;
+
         if (appendix && appendix.default) {
             return (
                 <Property
@@ -100,19 +95,20 @@ let IkonotvContractNotifications = React.createClass({
                     <pre className="ascribe-pre">{appendix.default}</pre>
                 </Property>
             );
+        } else {
+            return null;
         }
-        return null;
     },
 
     handleConfirm() {
-        let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
+        const contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
         OwnershipFetcher
             .confirmContractAgreement(contractAgreement)
             .then(this.handleConfirmSuccess);
     },
 
     handleConfirmSuccess() {
-        let notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 5000);
+        const notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         // Flush contract notifications and refetch
@@ -123,20 +119,21 @@ let IkonotvContractNotifications = React.createClass({
     },
 
     handleDeny() {
-        let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
+        const contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
         OwnershipFetcher
             .denyContractAgreement(contractAgreement)
             .then(this.handleDenySuccess);
     },
 
     handleDenySuccess() {
-        let notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
+        const notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
+
         this.history.pushState(null, '/collection');
     },
 
     getCopyrightAssociationForm(){
-        let currentUser = this.state.currentUser;
+        const { currentUser } = this.props;
 
         if (currentUser && currentUser.profile && !currentUser.profile.copyright_association) {
             return (
@@ -149,24 +146,26 @@ let IkonotvContractNotifications = React.createClass({
                     <CopyrightAssociationForm currentUser={currentUser}/>
                 </div>
             );
+        } else {
+            return null;
         }
-        return null;
     },
 
     render() {
+        const { whitelabel } = this.props;
+        const { contractAgreementListNotifications } = this.state;
+
         setDocumentTitle(getLangText('Contacts notifications'));
 
-        if (this.state.contractAgreementListNotifications &&
+        if (contractAgreementListNotifications && contractAgreementListNotifications.length) {
-            this.state.contractAgreementListNotifications.length > 0) {
+            const notifications = contractAgreementListNotifications[0];
-
+            const blob = notifications.contract_agreement.contract.blob;
-            let notifications = this.state.contractAgreementListNotifications[0];
-            let blob = notifications.contract_agreement.contract.blob;
 
             return (
                 <div className='container'>
                     <div className='notification-contract-wrapper'>
                         <div className='notification-contract-logo'>
-                            <img src={this.state.whitelabel.logo}/>
+                            <img src={whitelabel.logo}/>
                             <div className='notification-contract-header'>
                                 {getLangText('Contract')}
                             </div>

js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js

@@ -3,29 +3,27 @@
 import React from 'react';
 import { History } from 'react-router';
 
+import EditionListActions from '../../../../../../actions/edition_list_actions';
+
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+
 import PieceActions from '../../../../../../actions/piece_actions';
 import PieceStore from '../../../../../../stores/piece_store';
 
-import UserStore from '../../../../../../stores/user_store';
-
 import PieceListStore from '../../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../../actions/piece_list_actions';
 
-import EditionListActions from '../../../../../../actions/edition_list_actions';
-
 import IkonotvSubmitButton from '../ikonotv_buttons/ikonotv_submit_button';
 
-import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
-
 import IkonotvArtistDetailsForm from '../ikonotv_forms/ikonotv_artist_details_form';
 import IkonotvArtworkDetailsForm from '../ikonotv_forms/ikonotv_artwork_details_form';
 
 import WalletPieceContainer from '../../ascribe_detail/wallet_piece_container';
 
-import AscribeSpinner from '../../../../../ascribe_spinner';
+import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
 
-import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import AscribeSpinner from '../../../../../ascribe_spinner';
-import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../../utils/dom_utils';
@@ -34,6 +32,12 @@ import { mergeOptions } from '../../../../../../utils/general_utils';
 
 let IkonotvPieceContainer = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object,
         params: React.PropTypes.object
     },
 
@@ -42,14 +46,12 @@ let IkonotvPieceContainer = React.createClass({
     getInitialState() {
         return mergeOptions(
             PieceStore.getState(),
-            UserStore.getState(),
             PieceListStore.getState()
         );
     },
 
     componentDidMount() {
         PieceStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
 
         // Every time we enter the piece detail page, just reset the piece
@@ -62,7 +64,7 @@ let IkonotvPieceContainer = React.createClass({
 
      // We need this for when the user clicks on a notification while being in another piece view
     componentWillReceiveProps(nextProps) {
-        if(this.props.params.pieceId !== nextProps.params.pieceId) {
+        if (this.props.params.pieceId !== nextProps.params.pieceId) {
             PieceActions.updatePiece({});
             PieceActions.fetchOne(nextProps.params.pieceId);
         }
@@ -70,7 +72,6 @@ let IkonotvPieceContainer = React.createClass({
 
     componentWillUnmount() {
         PieceStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         PieceListStore.listen(this.onChange);
     },
 
@@ -91,13 +92,16 @@ let IkonotvPieceContainer = React.createClass({
         EditionListActions.closeAllEditionLists();
         EditionListActions.clearAllEditionSelections();
 
-        let notification = new GlobalNotificationModel(response.notification, 'success');
+        const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         this.history.pushState(null, '/collection');
     },
 
     render() {
+        const { currentUser } = this.props;
+        const { piece } = this.state;
+
         let furtherDetails = (
             <CollapsibleParagraph
                 title={getLangText('Further Details')}
@@ -106,37 +110,37 @@ let IkonotvPieceContainer = React.createClass({
             </CollapsibleParagraph>
         );
 
-        if(this.state.piece.extra_data && Object.keys(this.state.piece.extra_data).length > 0 && this.state.piece.acl) {
+        if (piece.extra_data && Object.keys(piece.extra_data).length > 0 && piece.acl) {
             furtherDetails = (
                 <CollapsibleParagraph
                     title={getLangText('Further Details')}
                     defaultExpanded={true}>
                     <IkonotvArtistDetailsForm
-                        piece={this.state.piece}
+                        piece={piece}
                         isInline={true}
-                        disabled={!this.state.piece.acl.acl_edit} />
+                        disabled={!piece.acl.acl_edit} />
                     <IkonotvArtworkDetailsForm
-                        piece={this.state.piece}
+                        piece={piece}
                         isInline={true}
-                        disabled={!this.state.piece.acl.acl_edit} />
+                        disabled={!piece.acl.acl_edit} />
                 </CollapsibleParagraph>
             );
         }
 
-        if(this.state.piece && this.state.piece.id) {
+        if (piece && piece.id) {
-            setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
+            setDocumentTitle([piece.artist_name, piece.title].join(', '));
+
             return (
                 <WalletPieceContainer
-                    piece={this.state.piece}
+                    piece={piece}
-                    currentUser={this.state.currentUser}
+                    currentUser={currentUser}
                     loadPiece={this.loadPiece}
                     handleDeleteSuccess={this.handleDeleteSuccess}
                     submitButtonType={IkonotvSubmitButton}>
                     {furtherDetails}
                 </WalletPieceContainer>
             );
-        }
+        } else {
-        else {
             return (
                 <div className="fullpage-spinner">
                     <AscribeSpinner color='dark-blue' size='lg' />

js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js

@@ -6,47 +6,32 @@ import Button from 'react-bootstrap/lib/Button';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
-
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 
 let IkonotvLanding = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     getEnterButton() {
+        const { currentUser, location } = this.props;
         let redirect = '/login';
 
-        if(this.state.currentUser && this.state.currentUser.email) {
+        if (currentUser && currentUser.email) {
             redirect = '/collection';
-        }
+        } else if (location.query.redirect) {
-        else if (this.props.location.query && this.props.location.query.redirect) {
+            redirect = '/' + location.query.redirect;
-            redirect = '/' + this.props.location.query.redirect;
         }
 
         return (
-            <LinkContainer to={redirect} query={this.props.location.query}>
+            <LinkContainer to={redirect} query={location.query}>
                 <Button>
                     {getLangText('ENTER TO START')}
                 </Button>

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

@@ -4,44 +4,38 @@ 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 { setDocumentTitle } from '../../../../../utils/dom_utils';
-import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 
 
 let IkonotvPieceList = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
     getInitialState() {
-        return mergeOptions(
+        return NotificationStore.getState();
-            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() {
@@ -56,6 +50,7 @@ let IkonotvPieceList = React.createClass({
         return (
             <div>
                 <PieceList
+                    {...this.props}
                     redirectTo="/register_piece?slide_num=0"
                     shouldRedirect={this.redirectIfNoContractNotifications}
                     accordionListItemType={IkonotvAccordionListItem}
@@ -71,8 +66,7 @@ let IkonotvPieceList = React.createClass({
                                 label: getLangText('loaned')
                             }
                         ]
-                    }]}
+                    }]} />
-                    location={this.props.location}/>
             </div>
         );
     }

js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js

@@ -10,24 +10,18 @@ import Row from 'react-bootstrap/lib/Row';
 import PieceListStore from '../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../actions/piece_list_actions';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
-
 import PieceStore from '../../../../../stores/piece_store';
 import PieceActions from '../../../../../actions/piece_actions';
 
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
 import GlobalNotificationModel from '../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
 
-import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
-import LoanForm from '../../../../ascribe_forms/form_loan';
-
 import IkonotvArtistDetailsForm from './ikonotv_forms/ikonotv_artist_details_form';
 import IkonotvArtworkDetailsForm from './ikonotv_forms/ikonotv_artwork_details_form';
 
+import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
+import LoanForm from '../../../../ascribe_forms/form_loan';
+
 import SlidesContainer from '../../../../ascribe_slides_container/slides_container';
 
 import ApiUrls from '../../../../../constants/api_urls';
@@ -38,8 +32,14 @@ import { getLangText } from '../../../../../utils/lang_utils';
 
 let IkonotvRegisterPiece = React.createClass({
     propTypes: {
-        handleSuccess: React.PropTypes.func,
         piece: React.PropTypes.object.isRequired,
+        handleSuccess: React.PropTypes.func,
+
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
@@ -47,10 +47,8 @@ let IkonotvRegisterPiece = React.createClass({
 
     getInitialState(){
         return mergeOptions(
-            UserStore.getState(),
             PieceListStore.getState(),
             PieceStore.getState(),
-            WhitelabelStore.getState(),
             {
                 step: 0,
                 pageExitWarning: getLangText("If you leave this form now, your work will not be loaned to Ikono TV.")
@@ -59,18 +57,12 @@ let IkonotvRegisterPiece = React.createClass({
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
         PieceStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-        WhitelabelActions.fetchWhitelabel();
 
         // Before we load the new piece, we reset the piece store to delete old data that we do
         // not want to display to the user.
         PieceActions.updatePiece({});
 
-        let queryParams = this.props.location.query;
-
         // Since every step of this register process is atomic,
         // we may need to enter the process at step 1 or 2.
         // If this is the case, we'll need the piece number to complete submission.
@@ -78,6 +70,7 @@ let IkonotvRegisterPiece = React.createClass({
         //
         // We're using 'in' here as we want to know if 'piece_id' is present in the url,
         // we don't care about the value.
+        const queryParams = this.props.location.query;
         if (queryParams && 'piece_id' in queryParams) {
             PieceActions.fetchOne(queryParams.piece_id);
         }
@@ -85,9 +78,7 @@ let IkonotvRegisterPiece = React.createClass({
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         PieceStore.unlisten(this.onChange);
-        WhitelabelStore.listen(this.onChange);
     },
 
     onChange(state) {
@@ -158,8 +149,7 @@ let IkonotvRegisterPiece = React.createClass({
     },
 
     canSubmit() {
-        let currentUser = this.state.currentUser;
+        const { currentUser, whitelabel } = this.props;
-        let whitelabel = this.state.whitelabel;
         return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel && whitelabel.user;
     },
 
@@ -199,10 +189,9 @@ let IkonotvRegisterPiece = React.createClass({
 
     getSlideLoan() {
         if (this.canSubmit()) {
-            const { piece, whitelabel } = this.state;
+            const { piece, whitelabel } = this.props;
-            let today = new Moment();
+            const today = new Moment();
-            let endDate = new Moment();
+            const endDate = (new Moment()).add(2, 'years');
-            endDate.add(2, 'years');
 
             return (
                 <div data-slide-title={getLangText('Loan')}>
@@ -252,7 +241,7 @@ let IkonotvRegisterPiece = React.createClass({
                                 submitMessage={getLangText('Register')}
                                 isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                location={this.props.location}/>
+                                location={this.props.location} />
                         </Col>
                     </Row>
                 </div>