Merge pull request #724 from sharetribe/payment-settings-already-connected

Payment settings page vol2

src/containers/PayoutDetailsForm/PayoutDetailsForm.js

@@ -51,6 +51,7 @@ const PayoutDetailsFormComponent = props => {
     disabled,
     inProgress,
     ready,
+    submitButtonText,
     handleSubmit,
     pristine,
     submitting,
@@ -286,7 +287,11 @@ const PayoutDetailsFormComponent = props => {
         disabled={submitDisabled}
         ready={ready}
       >
-        <FormattedMessage id="PayoutDetailsForm.submitButtonText" />
+        {submitButtonText ? (
+          submitButtonText
+        ) : (
+          <FormattedMessage id="PayoutDetailsForm.submitButtonText" />
+        )}
       </Button>
     </Form>
   );
@@ -299,6 +304,7 @@ PayoutDetailsFormComponent.defaultProps = {
   disabled: false,
   inProgress: false,
   ready: false,
+  submitButtonText: null,
 };
 
 const { bool, object, string } = PropTypes;
@@ -310,6 +316,7 @@ PayoutDetailsFormComponent.propTypes = {
   disabled: bool,
   inProgress: bool,
   ready: bool,
+  submitButtonText: string,
 
   // from mapStateToProps
   country: string,

src/containers/PayoutPreferencesPage/PayoutPreferencesPage.duck.js

@@ -4,11 +4,14 @@ import { fetchCurrentUser, createStripeAccount } from '../../ducks/user.duck';
 // ================ Action types ================ //
 
 export const SET_INITIAL_STATE = 'app/PayoutPreferencesPage/SET_INITIAL_STATE';
+export const SAVE_PAYOUT_DETAILS_REQUEST = 'app/PayoutPreferencesPage/SAVE_PAYOUT_DETAILS_REQUEST';
 export const SAVE_PAYOUT_DETAILS_SUCCESS = 'app/PayoutPreferencesPage/SAVE_PAYOUT_DETAILS_SUCCESS';
+export const SAVE_PAYOUT_DETAILS_ERROR = 'app/PayoutPreferencesPage/SAVE_PAYOUT_DETAILS_ERROR';
 
 // ================ Reducer ================ //
 
 const initialState = {
+  payoutDetailsSaveInProgress: false,
   payoutDetailsSaved: false,
 };
 
@@ -17,8 +20,14 @@ export default function payoutPreferencesPageReducer(state = initialState, actio
   switch (type) {
     case SET_INITIAL_STATE:
       return initialState;
+
+    case SAVE_PAYOUT_DETAILS_REQUEST:
+      return { ...state, payoutDetailsSaveInProgress: true };
+    case SAVE_PAYOUT_DETAILS_ERROR:
+      return { ...state, payoutDetailsSaveInProgress: false };
     case SAVE_PAYOUT_DETAILS_SUCCESS:
-      return { ...state, payoutDetailsSaved: true };
+      return { ...state, payoutDetailsSaveInProgress: false, payoutDetailsSaved: true };
+
     default:
       return state;
   }
@@ -30,6 +39,12 @@ export const setInitialState = () => ({
   type: SET_INITIAL_STATE,
 });
 
+export const savePayoutDetailsRequest = () => ({
+  type: SAVE_PAYOUT_DETAILS_REQUEST,
+});
+export const savePayoutDetailsError = () => ({
+  type: SAVE_PAYOUT_DETAILS_ERROR,
+});
 export const savePayoutDetailsSuccess = () => ({
   type: SAVE_PAYOUT_DETAILS_SUCCESS,
 });
@@ -37,6 +52,7 @@ export const savePayoutDetailsSuccess = () => ({
 // ================ Thunks ================ //
 
 export const savePayoutDetails = values => (dispatch, getState, sdk) => {
+  dispatch(savePayoutDetailsRequest());
   const {
     firstName,
     lastName,
@@ -60,7 +76,9 @@ export const savePayoutDetails = values => (dispatch, getState, sdk) => {
     bankAccountToken,
     address: omitBy(address, isUndefined),
   };
-  return dispatch(createStripeAccount(params)).then(() => dispatch(savePayoutDetailsSuccess()));
+  return dispatch(createStripeAccount(params))
+    .then(() => dispatch(savePayoutDetailsSuccess()))
+    .catch(() => dispatch(savePayoutDetailsError()));
 };
 
 export const loadData = () => (dispatch, getState, sdk) => {

src/containers/PayoutPreferencesPage/PayoutPreferencesPage.js

@@ -26,10 +26,10 @@ export const PayoutPreferencesPageComponent = props => {
   const {
     currentUser,
     scrollingDisabled,
-    fetchInProgress,
     createStripeAccountError,
     onPayoutDetailsFormChange,
     onPayoutDetailsFormSubmit,
+    payoutDetailsSaveInProgress,
     payoutDetailsSaved,
     intl,
   } = props;
@@ -75,6 +75,20 @@ export const PayoutPreferencesPageComponent = props => {
     message = <FormattedMessage id="PayoutPreferencesPage.stripeNotConnected" />;
   }
 
+  const showForm =
+    currentUserLoaded && (payoutDetailsSaveInProgress || payoutDetailsSaved || !stripeConnected);
+  const form = showForm ? (
+    <PayoutDetailsForm
+      disabled={formDisabled}
+      inProgress={payoutDetailsSaveInProgress}
+      ready={payoutDetailsSaved}
+      submitButtonText={intl.formatMessage({ id: 'PayoutPreferencesPage.submitButtonText' })}
+      createStripeAccountError={createStripeAccountError}
+      onChange={onPayoutDetailsFormChange}
+      onSubmit={onPayoutDetailsFormSubmit}
+    />
+  ) : null;
+
   return (
     <Page title={title} scrollingDisabled={scrollingDisabled}>
       <LayoutSideNavigation>
@@ -93,14 +107,7 @@ export const PayoutPreferencesPageComponent = props => {
               <FormattedMessage id="PayoutPreferencesPage.heading" />
             </h1>
             <p>{message}</p>
-            <PayoutDetailsForm
-              disabled={formDisabled}
-              inProgress={fetchInProgress}
-              ready={payoutDetailsSaved}
-              createStripeAccountError={createStripeAccountError}
-              onChange={onPayoutDetailsFormChange}
-              onSubmit={onPayoutDetailsFormSubmit}
-            />
+            {form}
           </div>
         </LayoutWrapperMain>
         <LayoutWrapperFooter>
@@ -119,7 +126,7 @@ PayoutPreferencesPageComponent.defaultProps = {
 PayoutPreferencesPageComponent.propTypes = {
   currentUser: propTypes.currentUser,
   scrollingDisabled: bool.isRequired,
-  fetchInProgress: bool.isRequired,
+  payoutDetailsSaveInProgress: bool.isRequired,
   createStripeAccountError: propTypes.error,
   payoutDetailsSaved: bool.isRequired,
 
@@ -131,13 +138,12 @@ PayoutPreferencesPageComponent.propTypes = {
 };
 
 const mapStateToProps = state => {
-  const { createStripeAccountInProgress, createStripeAccountError, currentUser } = state.user;
-  const fetchInProgress = createStripeAccountInProgress;
-  const { payoutDetailsSaved } = state.PayoutPreferencesPage;
+  const { createStripeAccountError, currentUser } = state.user;
+  const { payoutDetailsSaveInProgress, payoutDetailsSaved } = state.PayoutPreferencesPage;
   return {
     currentUser,
-    fetchInProgress,
     createStripeAccountError,
+    payoutDetailsSaveInProgress,
     payoutDetailsSaved,
     scrollingDisabled: isScrollingDisabled(state),
   };

src/containers/PayoutPreferencesPage/PayoutPreferencesPage.test.js

@@ -15,7 +15,7 @@ describe('PayoutPreferencesPage', () => {
       <PayoutPreferencesPageComponent
         currentUser={currentUser}
         scrollingDisabled={false}
-        fetchInProgress={false}
+        payoutDetailsSaveInProgress={false}
         payoutDetailsSaved={false}
         onPayoutDetailsFormChange={noop}
         onPayoutDetailsFormSubmit={noop}
@@ -31,7 +31,7 @@ describe('PayoutPreferencesPage', () => {
       <PayoutPreferencesPageComponent
         currentUser={currentUser}
         scrollingDisabled={false}
-        fetchInProgress={false}
+        payoutDetailsSaveInProgress={false}
         payoutDetailsSaved={false}
         onPayoutDetailsFormChange={noop}
         onPayoutDetailsFormSubmit={noop}
@@ -47,7 +47,7 @@ describe('PayoutPreferencesPage', () => {
       <PayoutPreferencesPageComponent
         currentUser={currentUser}
         scrollingDisabled={false}
-        fetchInProgress={false}
+        payoutDetailsSaveInProgress={false}
         payoutDetailsSaved={true}
         onPayoutDetailsFormChange={noop}
         onPayoutDetailsFormSubmit={noop}

src/containers/PayoutPreferencesPage/__snapshots__/PayoutPreferencesPage.test.js.snap

@@ -78,14 +78,6 @@ exports[`PayoutPreferencesPage matches snapshot with Stripe connected 1`] = `
             values={Object {}}
           />
         </p>
-        <Connect(ReduxForm)
-          createStripeAccountError={null}
-          disabled={true}
-          inProgress={false}
-          onChange={[Function]}
-          onSubmit={[Function]}
-          ready={false}
-        />
       </div>
     </LayoutWrapperMain>
     <LayoutWrapperFooter
@@ -183,6 +175,7 @@ exports[`PayoutPreferencesPage matches snapshot with Stripe not connected 1`] =
           onChange={[Function]}
           onSubmit={[Function]}
           ready={false}
+          submitButtonText="PayoutPreferencesPage.submitButtonText"
         />
       </div>
     </LayoutWrapperMain>
@@ -281,6 +274,7 @@ exports[`PayoutPreferencesPage matches snapshot with details submitted 1`] = `
           onChange={[Function]}
           onSubmit={[Function]}
           ready={true}
+          submitButtonText="PayoutPreferencesPage.submitButtonText"
         />
       </div>
     </LayoutWrapperMain>

src/translations/en.json

@@ -442,9 +442,10 @@
   "PayoutPreferencesPage.loadingData": "Loading data…",
   "PayoutPreferencesPage.passwordTabTitle": "Password",
   "PayoutPreferencesPage.paymentsTabTitle": "Payments",
-  "PayoutPreferencesPage.payoutDetailsSaved": "Payment information successfully saved!",
-  "PayoutPreferencesPage.stripeAlreadyConnected": "Payment information already saved. If you want to change your information, contact your administrator.",
+  "PayoutPreferencesPage.payoutDetailsSaved": "Payment information successfully saved! If you want to change your payment details, please contact the marketplace admins.",
+  "PayoutPreferencesPage.stripeAlreadyConnected": "You’ve already entered your payment details. If you want to change your payment details, please contact the marketplace admins.",
   "PayoutPreferencesPage.stripeNotConnected": "Payment information not saved. Please fill in the form to accept payments from your listings.",
+  "PayoutPreferencesPage.submitButtonText": "Save details",
   "PayoutPreferencesPage.title": "Payment settings",
   "PrivacyPolicyPage.heading": "Saunatime Privacy Policy",
   "PrivacyPolicyPage.privacyTabTitle": "Privacy Policy",