Review changes

This commit is contained in:
Vesa Luusua 2017-11-29 16:35:41 +02:00
parent b3a754f9e4
commit 7bd32ba3ba
12 changed files with 47 additions and 51 deletions

View file

@ -20,6 +20,7 @@
.label {
width: 30px;
cursor: pointer;
}
.star {

View file

@ -101,9 +101,11 @@ export class OrderDetailsPanelComponent extends Component {
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 })
);
onSendReview(currentTransaction, rating, reviewContent)
.then(r => this.setState({ isReviewModalOpen: false, reviewSubmitted: true }))
.catch(e => {
// Do nothing.
});
}
render() {

View file

@ -23,6 +23,10 @@
@apply --marketplaceModalTitleStyles;
}
.reviewee {
white-space: nowrap;
}
/* Paragraph for the Modal */
.modalMessage {
@apply --marketplaceModalParagraphStyles;

View file

@ -26,6 +26,7 @@ const ReviewModal = props => {
const classes = classNames(rootClassName || css.root, className);
const closeButtonMessage = intl.formatMessage({ id: 'ReviewModal.later' });
const reviewee = <span className={css.reviewee}>{revieweeName}</span>;
return (
<Modal
@ -39,7 +40,7 @@ const ReviewModal = props => {
>
<IconReviewUser className={css.modalIcon} />
<p className={css.modalTitle}>
<FormattedMessage id="ReviewModal.title" values={{ revieweeName }} />
<FormattedMessage id="ReviewModal.title" values={{ revieweeName: reviewee }} />
</p>
<p className={css.modalMessage}>
<FormattedMessage id="ReviewModal.description" />

View file

@ -110,9 +110,11 @@ export class SaleDetailsPanelComponent extends Component {
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 })
);
onSendReview(currentTransaction, rating, reviewContent)
.then(r => this.setState({ isReviewModalOpen: false, reviewSubmitted: true }))
.catch(e => {
// Do nothing.
});
}
render() {

View file

@ -2,7 +2,7 @@ import { pick } from 'lodash';
import { types } from '../../util/sdkLoader';
import { isTransactionsTransitionInvalidTransition, storableError } from '../../util/errors';
import * as propTypes from '../../util/propTypes';
import { addMarketplaceEntities, getTransactionsById } from '../../ducks/marketplaceData.duck';
import { addMarketplaceEntities } from '../../ducks/marketplaceData.duck';
import { updatedEntities, denormalisedEntities } from '../../util/data';
const MESSAGES_PAGE_SIZE = 100;
@ -284,7 +284,7 @@ const sendReviewAsFirst = (id, params, dispatch, sdk) => {
.catch(e => {
// If transaction transition is invalid, lets try another endpoint.
if (isTransactionsTransitionInvalidTransition(e)) {
sendReviewAsSecond(id, params, dispatch, sdk);
return sendReviewAsSecond(id, params, dispatch, sdk);
} else {
dispatch(sendReviewError(storableError(e)));
@ -295,18 +295,16 @@ const sendReviewAsFirst = (id, params, dispatch, sdk) => {
});
};
export const sendReview = (orderId, reviewRating, reviewContent) => (dispatch, getState, sdk) => {
export const sendReview = (tx, 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_PROVIDER_FIRST;
tx.attributes.lastTransition === propTypes.TX_TRANSITION_REVIEW_BY_PROVIDER_FIRST;
dispatch(sendReviewRequest());
return txStateProviderFirst
? sendReviewAsSecond(orderId, params, dispatch, sdk)
: sendReviewAsFirst(orderId, params, dispatch, sdk);
? sendReviewAsSecond(tx.id, params, dispatch, sdk)
: sendReviewAsFirst(tx.id, params, dispatch, sdk);
};
// loadData is a collection of async calls that need to be made

View file

@ -210,8 +210,8 @@ const mapDispatchToProps = dispatch => ({
dispatch(manageDisableScrolling(componentId, disableScrolling)),
onShowMoreMessages: orderId => dispatch(fetchMoreMessages(orderId)),
onSendMessage: (orderId, message) => dispatch(sendMessage(orderId, message)),
onSendReview: (orderId, reviewRating, reviewContent) =>
dispatch(sendReview(orderId, reviewRating, reviewContent)),
onSendReview: (tx, reviewRating, reviewContent) =>
dispatch(sendReview(tx, reviewRating, reviewContent)),
onResetForm: formName => dispatch(resetForm(formName)),
});

View file

@ -41,7 +41,7 @@
.submitButton {
margin-top: auto;
margin-bottom: 24px;
margin-bottom: 96px;
flex-shrink: 0;
@media (--viewportMedium) {

View file

@ -14,6 +14,7 @@ import css from './ReviewForm.css';
const ReviewFormComponent = props => {
const {
className,
rootClassName,
disabled,
handleSubmit,
intl,
@ -38,23 +39,22 @@ const ReviewFormComponent = props => {
id: 'ReviewForm.reviewContentRequired',
});
const errorMessage =
sendReviewError && isTransactionsTransitionAlreadyReviewed(sendReviewError) ? (
<p className={css.error}>
<FormattedMessage id="ReviewForm.reviewSubmitAlreadySent" />
</p>
) : (
<p className={css.error}>
<FormattedMessage id="ReviewForm.reviewSubmitFailed" />
</p>
);
const errorMessage = isTransactionsTransitionAlreadyReviewed(sendReviewError) ? (
<p className={css.error}>
<FormattedMessage id="ReviewForm.reviewSubmitAlreadySent" />
</p>
) : (
<p className={css.error}>
<FormattedMessage id="ReviewForm.reviewSubmitFailed" />
</p>
);
const errorArea = sendReviewError ? errorMessage : <p className={css.errorPlaceholder} />;
const reviewSubmitMessage = intl.formatMessage({
id: 'ReviewForm.reviewSubmit',
});
const classes = classNames(css.root, className);
const classes = classNames(rootClassName || css.root, className);
const submitInProgress = submitting || sendReviewInProgress;
const submitDisabled = invalid || disabled || submitInProgress;
@ -92,13 +92,14 @@ const ReviewFormComponent = props => {
);
};
ReviewFormComponent.defaultProps = { className: null, sendReviewError: null };
ReviewFormComponent.defaultProps = { className: null, rootClassName: null, sendReviewError: null };
const { bool, func, string } = PropTypes;
ReviewFormComponent.propTypes = {
...formPropTypes,
className: string,
rootClassName: string,
intl: intlShape.isRequired,
onSubmit: func.isRequired,
reviewSent: bool.isRequired,

View file

@ -4,7 +4,7 @@ import { isTransactionsTransitionInvalidTransition, storableError } from '../../
import * as propTypes from '../../util/propTypes';
import * as log from '../../util/log';
import { updatedEntities, denormalisedEntities } from '../../util/data';
import { addMarketplaceEntities, getTransactionsById } from '../../ducks/marketplaceData.duck';
import { addMarketplaceEntities } from '../../ducks/marketplaceData.duck';
import { fetchCurrentUserNotifications } from '../../ducks/user.duck';
const MESSAGES_PAGE_SIZE = 100;
@ -353,7 +353,7 @@ const sendReviewAsFirst = (id, params, dispatch, sdk) => {
.catch(e => {
// If transaction transition is invalid, lets try another endpoint.
if (isTransactionsTransitionInvalidTransition(e)) {
sendReviewAsSecond(id, params, dispatch, sdk);
return sendReviewAsSecond(id, params, dispatch, sdk);
} else {
dispatch(sendReviewError(storableError(e)));
@ -364,18 +364,16 @@ const sendReviewAsFirst = (id, params, dispatch, sdk) => {
});
};
export const sendReview = (orderId, reviewRating, reviewContent) => (dispatch, getState, sdk) => {
export const sendReview = (tx, 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;
tx.attributes.lastTransition === propTypes.TX_TRANSITION_REVIEW_BY_CUSTOMER_FIRST;
dispatch(sendReviewRequest());
return txStateProviderFirst
? sendReviewAsSecond(orderId, params, dispatch, sdk)
: sendReviewAsFirst(orderId, params, dispatch, sdk);
? sendReviewAsSecond(tx.id, params, dispatch, sdk)
: sendReviewAsFirst(tx.id, params, dispatch, sdk);
};
// loadData is a collection of async calls that need to be made

View file

@ -233,8 +233,8 @@ const mapDispatchToProps = dispatch => {
onResetForm: formName => dispatch(resetForm(formName)),
onManageDisableScrolling: (componentId, disableScrolling) =>
dispatch(manageDisableScrolling(componentId, disableScrolling)),
onSendReview: (orderId, reviewRating, reviewContent) =>
dispatch(sendReview(orderId, reviewRating, reviewContent)),
onSendReview: (tx, reviewRating, reviewContent) =>
dispatch(sendReview(tx, reviewRating, reviewContent)),
};
};

View file

@ -68,17 +68,6 @@ export const getMarketplaceEntities = (state, entityRefs) => {
}
};
/**
* Get the denormalised transaction entities with the given IDs
*
* @param {Object} state the full Redux store
* @param {Array<UUID>} transactionIds transaction IDs to select from the store
*/
export const getTransactionsById = (state, transactionIds) => {
const entityRefs = transactionIds.map(id => ({ id, type: 'transaction' }));
return getMarketplaceEntities(state, entityRefs);
};
// ================ Action creators ================ //
export const addMarketplaceEntities = apiResponse => ({