Initiate new enquiry tx and redirect to order page

src/containers/ListingPage/ListingPage.duck.js

@@ -2,6 +2,7 @@ import { types } from '../../util/sdkLoader';
 import { storableError } from '../../util/errors';
 import { addMarketplaceEntities } from '../../ducks/marketplaceData.duck';
 import { updatedEntities, denormalisedEntities } from '../../util/data';
+import * as propTypes from '../../util/propTypes';
 import { fetchCurrentUser } from '../../ducks/user.duck';
 
 // ================ Action types ================ //
@@ -13,6 +14,10 @@ export const FETCH_REVIEWS_REQUEST = 'app/ListingPage/FETCH_REVIEWS_REQUEST';
 export const FETCH_REVIEWS_SUCCESS = 'app/ListingPage/FETCH_REVIEWS_SUCCESS';
 export const FETCH_REVIEWS_ERROR = 'app/ListingPage/FETCH_REVIEWS_ERROR';
 
+export const SEND_ENQUIRY_REQUEST = 'app/ListingPage/SEND_ENQUIRY_REQUEST';
+export const SEND_ENQUIRY_SUCCESS = 'app/ListingPage/SEND_ENQUIRY_SUCCESS';
+export const SEND_ENQUIRY_ERROR = 'app/ListingPage/SEND_ENQUIRY_ERROR';
+
 // ================ Reducer ================ //
 
 const initialState = {
@@ -20,6 +25,8 @@ const initialState = {
   showListingError: null,
   reviews: [],
   fetchReviewsError: null,
+  sendEnquiryInProgress: false,
+  sendEnquiryError: null,
 };
 
 const listingPageReducer = (state = initialState, action = {}) => {
@@ -29,12 +36,21 @@ const listingPageReducer = (state = initialState, action = {}) => {
       return { ...state, id: payload.id, showListingError: null };
     case SHOW_LISTING_ERROR:
       return { ...state, showListingError: payload };
+
     case FETCH_REVIEWS_REQUEST:
       return { ...state, fetchReviewsError: null };
     case FETCH_REVIEWS_SUCCESS:
       return { ...state, reviews: payload };
     case FETCH_REVIEWS_ERROR:
       return { ...state, fetchReviewsError: payload };
+
+    case SEND_ENQUIRY_REQUEST:
+      return { ...state, sendEnquiryInProgress: true, sendEnquiryError: null };
+    case SEND_ENQUIRY_SUCCESS:
+      return { ...state, sendEnquiryInProgress: false };
+    case SEND_ENQUIRY_ERROR:
+      return { ...state, sendEnquiryInProgress: false, sendEnquiryError: payload };
+
     default:
       return state;
   }
@@ -57,7 +73,15 @@ export const showListingError = e => ({
 
 export const fetchReviewsRequest = () => ({ type: FETCH_REVIEWS_REQUEST });
 export const fetchReviewsSuccess = reviews => ({ type: FETCH_REVIEWS_SUCCESS, payload: reviews });
-export const fetchReviewsError = error => ({ type: FETCH_REVIEWS_ERROR, payload: error });
+export const fetchReviewsError = error => ({
+  type: FETCH_REVIEWS_ERROR,
+  error: true,
+  payload: error,
+});
+
+export const sendEnquiryRequest = () => ({ type: SEND_ENQUIRY_REQUEST });
+export const sendEnquirySuccess = () => ({ type: SEND_ENQUIRY_SUCCESS });
+export const sendEnquiryError = e => ({ type: SEND_ENQUIRY_ERROR, error: true, payload: e });
 
 // ================ Thunks ================ //
 
@@ -85,7 +109,28 @@ export const fetchReviews = listingId => (dispatch, getState, sdk) => {
       dispatch(fetchReviewsSuccess(denormalized));
     })
     .catch(e => {
-      dispatch(fetchReviewsError(e));
+      dispatch(fetchReviewsError(storableError(e)));
+    });
+};
+
+export const sendEnquiry = (listingId, message) => (dispatch, getState, sdk) => {
+  console.log('sendEnquiry:', listingId.uuid, message);
+  dispatch(sendEnquiryRequest());
+  const bodyParams = {
+    transition: propTypes.TX_TRANSITION_ENQUIRE,
+    params: { listingId },
+  };
+  return sdk.transactions
+    .initiate(bodyParams)
+    .then(response => {
+      const txId = response.data.data.id;
+      // TODO: send message to the transaction
+      dispatch(sendEnquirySuccess());
+      return txId;
+    })
+    .catch(e => {
+      dispatch(sendEnquiryError(storableError(e)));
+      throw e;
     });
 };
 

src/containers/ListingPage/ListingPage.js

@@ -38,7 +38,7 @@ import {
 } from '../../components';
 import { BookingDatesForm, TopbarContainer, EnquiryForm } from '../../containers';
 
-import { loadData } from './ListingPage.duck';
+import { sendEnquiry, loadData } from './ListingPage.duck';
 import EditIcon from './EditIcon';
 import css from './ListingPage.css';
 
@@ -145,6 +145,7 @@ export class ListingPageComponent extends Component {
 
     this.handleSubmit = this.handleSubmit.bind(this);
     this.onContactUser = this.onContactUser.bind(this);
+    this.onSubmitEnquiry = this.onSubmitEnquiry.bind(this);
   }
 
   handleSubmit(values) {
@@ -182,6 +183,28 @@ export class ListingPageComponent extends Component {
     this.setState({ enquiryModalOpen: true });
   }
 
+  onSubmitEnquiry(values) {
+    const { history, params, onSendEnquiry } = this.props;
+    const routes = routeConfiguration();
+    const listingId = new UUID(params.id);
+    const { message = '' } = values;
+    const msg = message.trim();
+
+    onSendEnquiry(listingId, msg)
+      .then(txId => {
+        console.log('enquiry success, redirect to tx page:', txId.uuid);
+        this.setState({ enquiryModalOpen: false });
+
+        // Redirect to OrderDetailsPage
+        history.push(
+          createResourceLocatorString('OrderDetailsPage', routes, { id: txId.uuid }, {})
+        );
+      })
+      .catch(() => {
+        // Ignore, error handling in duck file
+      });
+  }
+
   render() {
     const {
       tab,
@@ -195,7 +218,15 @@ export class ListingPageComponent extends Component {
       history,
       reviews,
       fetchReviewsError,
+      sendEnquiryInProgress,
+      sendEnquiryError,
     } = this.props;
+
+    if (sendEnquiryError) {
+      // TODO: add to UI
+      console.error(sendEnquiryError);
+    }
+
     const listingId = new UUID(params.id);
     const currentListing = ensureListing(getListing(listingId));
     const listingSlug = params.slug || createSlug(currentListing.attributes.title || '');
@@ -390,11 +421,6 @@ export class ListingPageComponent extends Component {
       </NamedLink>
     );
 
-    const handleSubmitEnquiryMessage = values => {
-      const { message } = values;
-      console.log('TODO: send enquiry message:', message);
-    };
-
     const reviewsError = (
       <h2 className={css.errorText}>
         <FormattedMessage id="ListingPage.reviewsError" />
@@ -542,7 +568,8 @@ export class ListingPageComponent extends Component {
                         submitButtonWrapperClassName={css.enquirySubmitButtonWrapper}
                         listingTitle={title}
                         authorDisplayName={authorDisplayName}
-                        onSubmit={handleSubmitEnquiryMessage}
+                        onSubmit={this.onSubmitEnquiry}
+                        inProgress={sendEnquiryInProgress}
                       />
                     </Modal>
                   </div>
@@ -617,6 +644,7 @@ ListingPageComponent.defaultProps = {
   tab: 'listing',
   reviews: [],
   fetchReviewsError: null,
+  sendEnquiryError: null,
 };
 
 ListingPageComponent.propTypes = {
@@ -641,10 +669,19 @@ ListingPageComponent.propTypes = {
   useInitialValues: func.isRequired,
   reviews: arrayOf(propTypes.review),
   fetchReviewsError: propTypes.error,
+  sendEnquiryInProgress: bool.isRequired,
+  sendEnquiryError: propTypes.error,
+  onSendEnquiry: func.isRequired,
 };
 
 const mapStateToProps = state => {
-  const { showListingError, reviews, fetchReviewsError } = state.ListingPage;
+  const {
+    showListingError,
+    reviews,
+    fetchReviewsError,
+    sendEnquiryInProgress,
+    sendEnquiryError,
+  } = state.ListingPage;
   const { currentUser } = state.user;
 
   const getListing = id => {
@@ -659,6 +696,8 @@ const mapStateToProps = state => {
     showListingError,
     reviews,
     fetchReviewsError,
+    sendEnquiryInProgress,
+    sendEnquiryError,
   };
 };
 
@@ -666,6 +705,7 @@ const mapDispatchToProps = dispatch => ({
   onManageDisableScrolling: (componentId, disableScrolling) =>
     dispatch(manageDisableScrolling(componentId, disableScrolling)),
   useInitialValues: (setInitialValues, values) => dispatch(setInitialValues(values)),
+  onSendEnquiry: (listingId, message) => dispatch(sendEnquiry(listingId, message)),
 });
 
 // Note: it is important that the withRouter HOC is **outside** the