maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-31 02:26:50 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

SalePage can show review modal (and related changes)

Browse source
This commit is contained in:
Vesa Luusua 2017-11-29 15:12:30 +02:00
parent e954e3271d
commit 888acbe143
6 changed files with 254 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/components/SaleDetailsPanel/SaleDetailsPanel.js
View file

@ -7,14 +7,15 @@ import { createSlug } from '../../util/urlHelpers';
import { ensureListing, ensureTransaction, ensureUser, userDisplayName } from '../../util/data';
import { isMobileSafari } from '../../util/userAgent';
import {
ActivityFeed,
AvatarLarge,
AvatarMedium,
BookingBreakdown,
NamedLink,
ResponsiveImage,
PrimaryButton,
ResponsiveImage,
ReviewModal,
SecondaryButton,
ActivityFeed,
} from '../../components';
import { SendMessageForm } from '../../containers';
@ -91,8 +92,29 @@ const saleInfoText = (transaction, customerName) => {
export class SaleDetailsPanelComponent extends Component {
constructor(props) {
super(props);
this.state = { sendMessageFormFocused: false };
this.state = {
sendMessageFormFocused: false,
isReviewModalOpen: false,
reviewSubmitted: false,
};
this.onOpenReviewModal = this.onOpenReviewModal.bind(this);
this.onSubmitReview = this.onSubmitReview.bind(this);
}
onOpenReviewModal() {
this.setState({ isReviewModalOpen: true });
}
onSubmitReview(values) {
const { onSendReview, transaction } = this.props;
const currentTransaction = ensureTransaction(transaction);
const { reviewRating, reviewContent } = values;
const rating = Number.parseInt(reviewRating, 10);
onSendReview(currentTransaction.id, rating, reviewContent).then(r =>
this.setState({ isReviewModalOpen: false, reviewSubmitted: true })
);
}
render() {
const {
rootClassName,
@ -111,6 +133,9 @@ export class SaleDetailsPanelComponent extends Component {
messages,
sendMessageInProgress,
sendMessageError,
sendReviewInProgress,
sendReviewError,
onManageDisableScrolling,
onShowMoreMessages,
onSendMessage,
onResetForm,
@ -196,6 +221,7 @@ export class SaleDetailsPanelComponent extends Component {
transaction={currentTransaction}
currentUser={currentUser}
hasOlderMessages={hasOlderMessages && !fetchMessagesInProgress}
onOpenReviewModal={this.onOpenReviewModal}
onShowOlderMessages={handleShowOlderMessages}
fetchMessagesInProgress={fetchMessagesInProgress}
/>
@ -361,6 +387,17 @@ export class SaleDetailsPanelComponent extends Component {
</div>
</div>
</div>
<ReviewModal
id="ReviewSaleModal"
isOpen={this.state.isReviewModalOpen}
onCloseModal={() => this.setState({ isReviewModalOpen: false })}
onManageDisableScrolling={onManageDisableScrolling}
onSubmitReview={this.onSubmitReview}
revieweeName={customerDisplayName}
reviewSent={this.state.reviewSubmitted}
sendReviewInProgress={sendReviewInProgress}
sendReviewError={sendReviewError}
/>
</div>
);
}
@ -374,6 +411,7 @@ SaleDetailsPanelComponent.defaultProps = {
declineSaleError: null,
fetchMessagesError: null,
sendMessageError: null,
sendReviewError: null,
};
const { bool, func, string, arrayOf, number } = PropTypes;
@ -396,8 +434,12 @@ SaleDetailsPanelComponent.propTypes = {
messages: arrayOf(propTypes.message).isRequired,
sendMessageInProgress: bool.isRequired,
sendMessageError: propTypes.error,
sendReviewInProgress: bool.isRequired,
sendReviewError: propTypes.error,
onManageDisableScrolling: func.isRequired,
onShowMoreMessages: func.isRequired,
onSendMessage: func.isRequired,
onSendReview: func.isRequired,
onResetForm: func.isRequired,
// from injectIntl

4
src/components/SaleDetailsPanel/SaleDetailsPanel.test.js
View file

@ -80,8 +80,12 @@ describe('SaleDetailsPanel', () => {
],
fetchMessagesInProgress: false,
sendMessageInProgress: false,
sendReviewInProgress: false,
onManageDisableScrolling: noop,
onOpenReviewModal: noop,
onShowMoreMessages: noop,
onSendMessage: noop,
onSendReview: noop,
onResetForm: noop,
intl: fakeIntl,
};

72
src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap
View file

@ -304,6 +304,7 @@ exports[`SaleDetailsPanel accepted matches snapshot 1`] = `
},
]
}
onOpenReviewModal={[Function]}
onShowOlderMessages={[Function]}
transaction={
Object {
@ -584,6 +585,17 @@ exports[`SaleDetailsPanel accepted matches snapshot 1`] = `
</div>
</div>
</div>
<InjectIntl(ReviewModal)
id="ReviewSaleModal"
isOpen={false}
onCloseModal={[Function]}
onManageDisableScrolling={[Function]}
onSubmitReview={[Function]}
reviewSent={false}
revieweeName="customer1 display name"
sendReviewError={null}
sendReviewInProgress={false}
/>
</div>
`;
@ -891,6 +903,7 @@ exports[`SaleDetailsPanel autodeclined matches snapshot 1`] = `
},
]
}
onOpenReviewModal={[Function]}
onShowOlderMessages={[Function]}
transaction={
Object {
@ -1171,6 +1184,17 @@ exports[`SaleDetailsPanel autodeclined matches snapshot 1`] = `
</div>
</div>
</div>
<InjectIntl(ReviewModal)
id="ReviewSaleModal"
isOpen={false}
onCloseModal={[Function]}
onManageDisableScrolling={[Function]}
onSubmitReview={[Function]}
reviewSent={false}
revieweeName="customer1 display name"
sendReviewError={null}
sendReviewInProgress={false}
/>
</div>
`;
@ -1478,6 +1502,7 @@ exports[`SaleDetailsPanel canceled matches snapshot 1`] = `
},
]
}
onOpenReviewModal={[Function]}
onShowOlderMessages={[Function]}
transaction={
Object {
@ -1758,6 +1783,17 @@ exports[`SaleDetailsPanel canceled matches snapshot 1`] = `
</div>
</div>
</div>
<InjectIntl(ReviewModal)
id="ReviewSaleModal"
isOpen={false}
onCloseModal={[Function]}
onManageDisableScrolling={[Function]}
onSubmitReview={[Function]}
reviewSent={false}
revieweeName="customer1 display name"
sendReviewError={null}
sendReviewInProgress={false}
/>
</div>
`;
@ -2065,6 +2101,7 @@ exports[`SaleDetailsPanel declined matches snapshot 1`] = `
},
]
}
onOpenReviewModal={[Function]}
onShowOlderMessages={[Function]}
transaction={
Object {
@ -2345,6 +2382,17 @@ exports[`SaleDetailsPanel declined matches snapshot 1`] = `
</div>
</div>
</div>
<InjectIntl(ReviewModal)
id="ReviewSaleModal"
isOpen={false}
onCloseModal={[Function]}
onManageDisableScrolling={[Function]}
onSubmitReview={[Function]}
reviewSent={false}
revieweeName="customer1 display name"
sendReviewError={null}
sendReviewInProgress={false}
/>
</div>
`;
@ -2652,6 +2700,7 @@ exports[`SaleDetailsPanel delivered matches snapshot 1`] = `
},
]
}
onOpenReviewModal={[Function]}
onShowOlderMessages={[Function]}
transaction={
Object {
@ -2932,6 +2981,17 @@ exports[`SaleDetailsPanel delivered matches snapshot 1`] = `
</div>
</div>
</div>
<InjectIntl(ReviewModal)
id="ReviewSaleModal"
isOpen={false}
onCloseModal={[Function]}
onManageDisableScrolling={[Function]}
onSubmitReview={[Function]}
reviewSent={false}
revieweeName="customer1 display name"
sendReviewError={null}
sendReviewInProgress={false}
/>
</div>
`;
@ -3249,6 +3309,7 @@ exports[`SaleDetailsPanel preauthorized matches snapshot 1`] = `
},
]
}
onOpenReviewModal={[Function]}
onShowOlderMessages={[Function]}
transaction={
Object {
@ -3585,5 +3646,16 @@ exports[`SaleDetailsPanel preauthorized matches snapshot 1`] = `
</div>
</div>
</div>
<InjectIntl(ReviewModal)
id="ReviewSaleModal"
isOpen={false}
onCloseModal={[Function]}
onManageDisableScrolling={[Function]}
onSubmitReview={[Function]}
reviewSent={false}
revieweeName="customer1 display name"
sendReviewError={null}
sendReviewInProgress={false}
/>
</div>
`;

2
src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap
View file

@ -42,6 +42,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
<textarea
className="undefined"
id="fakeTestForm.description"
maxLength={5000}
name="description"
onBlur={[Function]}
onChange={[Function]}
@ -49,6 +50,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
onDrop={[Function]}
onFocus={[Function]}
placeholder="How many people can fit at once? Does the sauna come with towels?"
rows={1}
value=""
/>
</div>

127
src/containers/SalePage/SalePage.duck.js
View file

@ -1,15 +1,18 @@
import { pick } from 'lodash';
import { types } from '../../util/sdkLoader';
import { storableError } from '../../util/errors';
import { isTransactionsTransitionInvalidTransition, storableError } from '../../util/errors';
import * as propTypes from '../../util/propTypes';
import * as log from '../../util/log';
import { updatedEntities, denormalisedEntities } from '../../util/data';
import { addMarketplaceEntities } from '../../ducks/marketplaceData.duck';
import { addMarketplaceEntities, getTransactionsById } from '../../ducks/marketplaceData.duck';
import { fetchCurrentUserNotifications } from '../../ducks/user.duck';
const MESSAGES_PAGE_SIZE = 100;
// ================ Action types ================ //
export const SET_INITAL_VALUES = 'app/OrderPage/SET_INITIAL_VALUES';
export const FETCH_SALE_REQUEST = 'app/SalePagePage/FETCH_SALE_REQUEST';
export const FETCH_SALE_SUCCESS = 'app/SalePage/FETCH_SALE_SUCCESS';
export const FETCH_SALE_ERROR = 'app/SalePage/FETCH_SALE_ERROR';
@ -29,7 +32,10 @@ export const FETCH_MESSAGES_ERROR = 'app/SalePage/FETCH_MESSAGES_ERROR';
export const SEND_MESSAGE_REQUEST = 'app/SalePage/SEND_MESSAGE_REQUEST';
export const SEND_MESSAGE_SUCCESS = 'app/SalePage/SEND_MESSAGE_SUCCESS';
export const SEND_MESSAGE_ERROR = 'app/SalePage/SEND_MESSAGE_ERROR';
export const CLEAR_SEND_MESSAGE_ERROR = 'app/SalePage/CLEAR_SEND_MESSAGE_ERROR';
export const SEND_REVIEW_REQUEST = 'app/SalePage/SEND_REVIEW_REQUEST';
export const SEND_REVIEW_SUCCESS = 'app/SalePage/SEND_REVIEW_SUCCESS';
export const SEND_REVIEW_ERROR = 'app/SalePage/SEND_REVIEW_ERROR';
// ================ Reducer ================ //
@ -47,11 +53,16 @@ const initialState = {
messages: [],
sendMessageInProgress: false,
sendMessageError: null,
sendReviewInProgress: false,
sendReviewError: null,
};
export default function checkoutPageReducer(state = initialState, action = {}) {
const { type, payload } = action;
switch (type) {
case SET_INITAL_VALUES:
return { ...initialState, ...payload };
case FETCH_SALE_REQUEST:
return { ...state, fetchSaleInProgress: true, fetchSaleError: null };
case FETCH_SALE_SUCCESS: {
@ -94,8 +105,13 @@ export default function checkoutPageReducer(state = initialState, action = {}) {
return { ...state, sendMessageInProgress: false };
case SEND_MESSAGE_ERROR:
return { ...state, sendMessageInProgress: false, sendMessageError: payload };
case CLEAR_SEND_MESSAGE_ERROR:
return { ...state, sendMessageError: null };
case SEND_REVIEW_REQUEST:
return { ...state, sendReviewInProgress: true, sendReviewError: null };
case SEND_REVIEW_SUCCESS:
return { ...state, sendReviewInProgress: false };
case SEND_REVIEW_ERROR:
return { ...state, sendReviewInProgress: false, sendReviewError: payload };
default:
return state;
@ -113,6 +129,10 @@ export const fetchedMessagesCount = state => {
};
// ================ Action creators ================ //
export const setInitialValues = initialValues => ({
type: SET_INITAL_VALUES,
payload: pick(initialValues, Object.keys(initialState)),
});
const fetchSaleRequest = () => ({ type: FETCH_SALE_REQUEST });
const fetchSaleSuccess = response => ({ type: FETCH_SALE_SUCCESS, payload: response });
@ -136,7 +156,10 @@ const fetchMessagesError = e => ({ type: FETCH_MESSAGES_ERROR, error: true, payl
const sendMessageRequest = () => ({ type: SEND_MESSAGE_REQUEST });
const sendMessageSuccess = () => ({ type: SEND_MESSAGE_SUCCESS });
const sendMessageError = e => ({ type: SEND_MESSAGE_ERROR, error: true, payload: e });
const clearSendMessageError = () => ({ type: CLEAR_SEND_MESSAGE_ERROR });
const sendReviewRequest = () => ({ type: SEND_REVIEW_REQUEST });
const sendReviewSuccess = () => ({ type: SEND_REVIEW_SUCCESS });
const sendReviewError = e => ({ type: SEND_REVIEW_ERROR, error: true, payload: e });
// ================ Thunks ================ //
@ -271,21 +294,6 @@ export const fetchMoreMessages = txId => (dispatch, getState, sdk) => {
return dispatch(fetchNLatestMessages(txId, messagesToFetch));
};
// loadData is a collection of async calls that need to be made
// before page has all the info it needs to render itself
export const loadData = params => dispatch => {
const saleId = new types.UUID(params.id);
// Clear the send error since the message form is emptied as well.
dispatch(clearSendMessageError());
// Sale (i.e. transaction entity in API, but from buyers perspective) contains sale details
return Promise.all([
dispatch(fetchSale(saleId)),
dispatch(fetchNLatestMessages(saleId, MESSAGES_PAGE_SIZE)),
]);
};
export const sendMessage = (saleId, message) => (dispatch, getState, sdk) => {
dispatch(sendMessageRequest());
@ -307,3 +315,80 @@ export const sendMessage = (saleId, message) => (dispatch, getState, sdk) => {
throw e;
});
};
// If other party (customer) has already sent a review, we need to make transition to
// TX_TRANSITION_REVIEW_BY_PROVIDER_SECOND
const sendReviewAsSecond = (id, params, dispatch, sdk) => {
const transition = propTypes.TX_TRANSITION_REVIEW_BY_PROVIDER_SECOND;
return sdk.transactions
.transition({ id, transition, params }, { expand: true })
.then(response => {
dispatch(addMarketplaceEntities(response));
dispatch(sendReviewSuccess());
return response;
})
.catch(e => {
dispatch(sendReviewError(storableError(e)));
// Rethrow so the page can track whether the sending failed, and
// keep the message in the form for a retry.
throw e;
});
};
// If other party (customer) has not yet sent a review, we need to make transition to
// TX_TRANSITION_REVIEW_BY_PROVIDER_FIRST
// However, the other party might have made the review after previous data synch point.
// So, error is likely to happen and then we must try another state transition
// by calling sendReviewAsSecond().
const sendReviewAsFirst = (id, params, dispatch, sdk) => {
const transition = propTypes.TX_TRANSITION_REVIEW_BY_PROVIDER_FIRST;
return sdk.transactions
.transition({ id, transition, params }, { expand: true })
.then(response => {
dispatch(addMarketplaceEntities(response));
dispatch(sendReviewSuccess());
return response;
})
.catch(e => {
// If transaction transition is invalid, lets try another endpoint.
if (isTransactionsTransitionInvalidTransition(e)) {
sendReviewAsSecond(id, params, dispatch, sdk);
} else {
dispatch(sendReviewError(storableError(e)));
// Rethrow so the page can track whether the sending failed, and
// keep the message in the form for a retry.
throw e;
}
});
};
export const sendReview = (orderId, reviewRating, reviewContent) => (dispatch, getState, sdk) => {
const params = { reviewRating, reviewContent };
const txs = getTransactionsById(getState(), [orderId]);
const txStateProviderFirst =
txs.length === 1 &&
txs[0].attributes.lastTransition === propTypes.TX_TRANSITION_REVIEW_BY_CUSTOMER_FIRST;
dispatch(sendReviewRequest());
return txStateProviderFirst
? sendReviewAsSecond(orderId, params, dispatch, sdk)
: sendReviewAsFirst(orderId, params, dispatch, sdk);
};
// loadData is a collection of async calls that need to be made
// before page has all the info it needs to render itself
export const loadData = params => dispatch => {
const saleId = new types.UUID(params.id);
// Clear the send error since the message form is emptied as well.
dispatch(setInitialValues({ sendMessageError: null, sendReviewError: null }));
// Sale (i.e. transaction entity in API, but from buyers perspective) contains sale details
return Promise.all([
dispatch(fetchSale(saleId)),
dispatch(fetchNLatestMessages(saleId, MESSAGES_PAGE_SIZE)),
]);
};

27
src/containers/SalePage/SalePage.js
View file

@ -8,8 +8,7 @@ import { reset as resetForm } from 'redux-form';
import * as propTypes from '../../util/propTypes';
import { ensureListing, ensureTransaction } from '../../util/data';
import { getMarketplaceEntities } from '../../ducks/marketplaceData.duck';
import { isScrollingDisabled } from '../../ducks/UI.duck';
import { acceptSale, declineSale, loadData, sendMessage, fetchMoreMessages } from './SalePage.duck';
import { isScrollingDisabled, manageDisableScrolling } from '../../ducks/UI.duck';
import {
NamedRedirect,
SaleDetailsPanel,
@ -22,6 +21,14 @@ import {
} from '../../components';
import { TopbarContainer } from '../../containers';
import {
acceptSale,
declineSale,
loadData,
sendMessage,
sendReview,
fetchMoreMessages,
} from './SalePage.duck';
import css from './SalePage.css';
// SalePage handles data loading
@ -46,8 +53,12 @@ export const SalePageComponent = props => {
messages,
sendMessageInProgress,
sendMessageError,
sendReviewInProgress,
sendReviewError,
onManageDisableScrolling,
onShowMoreMessages,
onSendMessage,
onSendReview,
onResetForm,
} = props;
@ -100,8 +111,12 @@ export const SalePageComponent = props => {
fetchMessagesError={fetchMessagesError}
sendMessageInProgress={sendMessageInProgress}
sendMessageError={sendMessageError}
sendReviewInProgress={sendReviewInProgress}
sendReviewError={sendReviewError}
onManageDisableScrolling={onManageDisableScrolling}
onShowMoreMessages={onShowMoreMessages}
onSendMessage={onSendMessage}
onSendReview={onSendReview}
onResetForm={onResetForm}
/>
) : (
@ -181,6 +196,8 @@ const mapStateToProps = state => {
messages,
sendMessageInProgress,
sendMessageError,
sendReviewInProgress,
sendReviewError,
} = state.SalePage;
const { currentUser } = state.user;
@ -202,6 +219,8 @@ const mapStateToProps = state => {
messages,
sendMessageInProgress,
sendMessageError,
sendReviewInProgress,
sendReviewError,
};
};
@ -212,6 +231,10 @@ const mapDispatchToProps = dispatch => {
onShowMoreMessages: saleId => dispatch(fetchMoreMessages(saleId)),
onSendMessage: (saleId, message) => dispatch(sendMessage(saleId, message)),
onResetForm: formName => dispatch(resetForm(formName)),
onManageDisableScrolling: (componentId, disableScrolling) =>
dispatch(manageDisableScrolling(componentId, disableScrolling)),
onSendReview: (orderId, reviewRating, reviewContent) =>
dispatch(sendReview(orderId, reviewRating, reviewContent)),
};
};