Toggle payout details modal when submitting

src/components/EditListingPhotosPanel/EditListingPhotosPanel.js

@@ -1,20 +1,68 @@
 import React, { Component, PropTypes } from 'react';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
-import { EditListingPhotosForm } from '../../containers';
+import { EditListingPhotosForm, PayoutDetailsForm } from '../../containers';
+import { Modal } from '../../components';
 import * as propTypes from '../../util/propTypes';
+import config from '../../config';
 
 import css from './EditListingPhotosPanel.css';
 
 class EditListingPhotosPanel extends Component {
   constructor(props) {
     super(props);
-    this.handleSubmit = this.handleSubmit.bind(this);
+    this.state = {
+      submittedValues: null,
+      showPayoutDetails: false,
+    };
+    this.handlePhotosSubmit = this.handlePhotosSubmit.bind(this);
+    this.handlePayoutModalClose = this.handlePayoutModalClose.bind(this);
+    this.handlePayoutSubmit = this.handlePayoutSubmit.bind(this);
   }
-  handleSubmit(values) {
-    console.log('EditListingPhotosPanel.handleSubmit():', values); // eslint-disable-line
-    const { onSubmit } = this.props;
-    onSubmit(values);
+  handlePhotosSubmit(values) {
+    console.log('EditListingPhotosPanel.handleSubmit():', values);
+    const { onSubmit, currentUser } = this.props;
+    const stripeConnected = currentUser &&
+      currentUser.attributes &&
+      currentUser.attributes.stripeConnected;
+    if (stripeConnected) {
+      onSubmit(values);
+    } else {
+      this.setState({
+        submittedValues: values,
+        showPayoutDetails: true,
+      });
+    }
+  }
+  handlePayoutModalClose() {
+    this.setState({ showPayoutDetails: false });
+  }
+  handlePayoutSubmit(values) {
+    const {
+      firstName,
+      lastName,
+      birthDate,
+      country,
+      streetAddress,
+      postalCode,
+      city,
+      bankAccountToken,
+    } = values;
+    const params = {
+      firstName,
+      lastName,
+      birthDate,
+      bankAccountToken,
+      address: {
+        country,
+        city,
+        addressLine: streetAddress && streetAddress.selectedPlace
+          ? streetAddress.selectedPlace.address
+          : null,
+        postalCode,
+      },
+    };
+    console.log('payout details:', params, 'state:', this.state);
   }
   render() {
     const {
@@ -23,19 +71,33 @@ class EditListingPhotosPanel extends Component {
       images,
       onImageUpload,
       onUpdateImageOrder,
+      togglePageClassNames,
     } = this.props;
 
     const rootClass = rootClassName || css.root;
     const classes = classNames(rootClass, className);
+    const currency = config.currencyConfig.currency;
+
+    const payoutDetailsModal = (
+      <Modal
+        className={css.payoutModal}
+        isOpen={this.state.showPayoutDetails}
+        onClose={this.handlePayoutModalClose}
+        togglePageClassNames={togglePageClassNames}
+      >
+        <PayoutDetailsForm currency={currency} onSubmit={this.handlePayoutSubmit} />
+      </Modal>
+    );
 
     return (
       <div className={classes}>
+        {payoutDetailsModal}
         <h1><FormattedMessage id="EditListingPhotosPanel.title" /></h1>
         <EditListingPhotosForm
           initialValues={{ images }}
           images={images}
           onImageUpload={onImageUpload}
-          onSubmit={this.handleSubmit}
+          onSubmit={this.handlePhotosSubmit}
           onUpdateImageOrder={onUpdateImageOrder}
         />
       </div>
@@ -60,6 +122,7 @@ EditListingPhotosPanel.propTypes = {
   onUpdateImageOrder: func.isRequired,
   onSubmit: func.isRequired,
   currentUser: propTypes.currentUser,
+  togglePageClassNames: func.isRequired,
 };
 
 export default EditListingPhotosPanel;