diff --git a/src/components/BookingBreakdown/BookingBreakdown.css b/src/components/BookingBreakdown/BookingBreakdown.css index c314132d..33e6fbc3 100644 --- a/src/components/BookingBreakdown/BookingBreakdown.css +++ b/src/components/BookingBreakdown/BookingBreakdown.css @@ -44,7 +44,7 @@ @media (--viewportMedium) { font-weight: 700; - margin: -1px 0 0 10px; + margin: 0 0 0 10px; } } @@ -79,6 +79,6 @@ margin: 0 0 0 10px; @media (--viewportMedium) { - margin: 0 0 0 10px; + margin: 2px 0 0 10px; } } diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.css b/src/components/OrderDetailsPanel/OrderDetailsPanel.css index a0b877a1..8b7e84a2 100644 --- a/src/components/OrderDetailsPanel/OrderDetailsPanel.css +++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.css @@ -102,7 +102,7 @@ @media (--viewportLarge) { max-width: 100%; - margin: 175px 0 0 0; + margin: 177px 0 0 0; } } @@ -176,7 +176,7 @@ margin: 1px 0 0 0; @media (--viewportLarge) { - margin-top: 121px; + margin-top: 123px; margin-left: 0; margin-right: 0; } @@ -263,11 +263,7 @@ } .feed { - margin-top: 17px; - - @media (--viewportMedium) { - margin-top: 19px; - } + margin-top: 20px; } .sendMessageForm { @@ -277,7 +273,7 @@ box-shadow: var(--boxShadowBottomForm); @media (--viewportLarge) { - margin-top: 47px; + margin-top: 46px; position: relative; box-shadow: none; } diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.js b/src/components/OrderDetailsPanel/OrderDetailsPanel.js index f60a843c..d5eea321 100644 --- a/src/components/OrderDetailsPanel/OrderDetailsPanel.js +++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.js @@ -57,15 +57,37 @@ const orderTitle = (transaction, listingLink, customerName) => { ); } else if (propTypes.txIsDeclined(transaction)) { - return ; + return ( + + ); } else if (propTypes.txIsAutodeclined(transaction)) { return ( - + ); } else if (propTypes.txIsCanceled(transaction)) { - return ; - } else if (propTypes.txIsDelivered(transaction)) { - return ; + return ( + + ); + } else if ( + propTypes.txIsDelivered(transaction) || + propTypes.txHasFirstReview(transaction) || + propTypes.txIsReviewed(transaction) + ) { + return ( + + ); } else { return null; } @@ -74,7 +96,7 @@ const orderTitle = (transaction, listingLink, customerName) => { const orderMessage = (transaction, providerName) => { if (propTypes.txIsPreauthorized(transaction)) { return ( - + ); } return null; diff --git a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap b/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap index 241719cc..ba14c0f9 100644 --- a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap +++ b/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap @@ -712,9 +712,10 @@ exports[`OrderDetailsPanel autodeclined matches snapshot 1`] = `

{ if (propTypes.txIsPreauthorized(transaction)) { return ( ); } else if (propTypes.txIsAccepted(transaction)) { return ( ); } else if (propTypes.txIsDeclined(transaction)) { return ( ); } else if (propTypes.txIsAutodeclined(transaction)) { return ( ); } else if (propTypes.txIsCanceled(transaction)) { return ( ); - } else if (propTypes.txIsDelivered(transaction)) { + } else if ( + propTypes.txIsDelivered(transaction) || + propTypes.txHasFirstReview(transaction) || + propTypes.txIsReviewed(transaction) + ) { return ( ); @@ -84,7 +88,7 @@ const saleTitle = (transaction, listingLink, customerName) => { const saleInfoText = (transaction, customerName) => { if (propTypes.txIsPreauthorized(transaction)) { - return ; + return ; } return null; }; diff --git a/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap b/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap index f906332e..b89b5c5c 100644 --- a/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap +++ b/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap @@ -70,7 +70,7 @@ exports[`SaleDetailsPanel accepted matches snapshot 1`] = `

{ id: 'InboxPage.stateCanceled', }), }; - } else if (propTypes.txIsDelivered(tx)) { + } else if ( + propTypes.txIsDelivered(tx) || + propTypes.txHasFirstReview(tx) || + propTypes.txIsReviewed(tx) + ) { return { nameClassName: css.nameDelivered, bookingClassName: css.bookingDelivered, diff --git a/src/translations/en.json b/src/translations/en.json index 8cfe0b7b..6eef813a 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -284,14 +284,13 @@ "OrderDetailsPanel.initialMessageFailed": "Whoops, failed to send message from checkout.", "OrderDetailsPanel.messageDeletedListing": "However, the listing is deleted and cannot be viewed anymore.", "OrderDetailsPanel.messageLoadingFailed": "Something went wrong when loading messages. Please refresh the page and try again.", - "OrderDetailsPanel.orderAcceptedSubtitle": "You have booked {listingLink}", + "OrderDetailsPanel.orderAcceptedSubtitle": "Your booking for {listingLink} has been accepted.", "OrderDetailsPanel.orderAcceptedTitle": "Woohoo {customerName}!", - "OrderDetailsPanel.orderAutoDeclinedTitle": "You requested to book {listingLink}", - "OrderDetailsPanel.orderCanceledTitle": "You booked {listingLink}", - "OrderDetailsPanel.orderDeclinedTitle": "You requested to book {listingLink}", - "OrderDetailsPanel.orderDeliveredTitle": "The booking period has ended", - "OrderDetailsPanel.orderPreauthorizedStatus": "{providerName} has been notified about the booking request. Sit back and relax.", - "OrderDetailsPanel.orderPreauthorizedSubtitle": "You have requested to book {listingLink}", + "OrderDetailsPanel.orderCancelledTitle": "{customerName}, your booking for {listingLink} has been cancelled.", + "OrderDetailsPanel.orderDeclinedTitle": "{customerName}, your booking for {listingLink} has been declined.", + "OrderDetailsPanel.orderDeliveredTitle": "{customerName}, your booking for {listingLink} has been completed.", + "OrderDetailsPanel.orderPreauthorizedInfo": "{providerName} has been notified about the booking request. Sit back and relax.", + "OrderDetailsPanel.orderPreauthorizedSubtitle": "You have requested to book {listingLink}.", "OrderDetailsPanel.orderPreauthorizedTitle": "Great success, {customerName}!", "OrderDetailsPanel.sendMessagePlaceholder": "Send a message to {name}…", "OrderPage.fetchOrderFailed": "Fetching order data failed.", @@ -459,18 +458,13 @@ "SaleDetailsPanel.bookingBreakdownTitle": "Booking breakdown", "SaleDetailsPanel.customerBannedStatus": "The user made the request, but was later banned.", "SaleDetailsPanel.declineSaleFailed": "Oops, declining failed. Please try again.", - "SaleDetailsPanel.listingAcceptedTitle": "Woohoo! You accepted a request from {customerName} for {listingLink}", - "SaleDetailsPanel.listingCanceledTitle": "{customerName} booked {listingLink}", - "SaleDetailsPanel.listingDeclinedTitle": "{customerName} requested to book {listingLink}", - "SaleDetailsPanel.listingDeliveredTitle": "{customerName} booked {listingLink}", - "SaleDetailsPanel.listingRequestedTitle": "{customerName} has requested to book {listingLink}", "SaleDetailsPanel.messageLoadingFailed": "Something went wrong when loading messages. Please refresh the page and try again.", - "SaleDetailsPanel.saleAcceptedStatus": "You accepted the request on {formattedDate}.", - "SaleDetailsPanel.saleAutoDeclinedStatus": "You did not react to the request on time. The request expired on {formattedDate}.", - "SaleDetailsPanel.saleCanceledStatus": "The request was cancelled on {formattedDate}.", - "SaleDetailsPanel.saleDeclinedStatus": "You declined the request on {formattedDate}.", - "SaleDetailsPanel.saleDeliveredStatus": "You delivered the order on {formattedDate}.", - "SaleDetailsPanel.saleRequestedStatus": "{customerName} is waiting for your response.", + "SaleDetailsPanel.saleAcceptedTitle": "You accepted a request from {customerName} to book {listingLink}.", + "SaleDetailsPanel.saleCancelledTitle": "The booking from {customerName} for {listingLink} has been cancelled.", + "SaleDetailsPanel.saleDeclinedTitle": "The request from {customerName} to book {listingLink} has been declined.", + "SaleDetailsPanel.saleDeliveredTitle": "The booking from {customerName} for {listingLink} has been completed.", + "SaleDetailsPanel.saleRequestedInfo": "{customerName} is waiting for your response.", + "SaleDetailsPanel.saleRequestedTitle": "{customerName} has requested to book {listingLink}.", "SaleDetailsPanel.sendMessagePlaceholder": "Send a message to {name}…", "SalePage.acceptButton": "Accept", "SalePage.declineButton": "Decline", diff --git a/src/util/propTypes.js b/src/util/propTypes.js index b7144b8f..7359e3d8 100644 --- a/src/util/propTypes.js +++ b/src/util/propTypes.js @@ -220,12 +220,21 @@ export const txIsCanceled = tx => txLastTransition(tx) === TX_TRANSITION_CANCEL; export const txIsDelivered = tx => txLastTransition(tx) === TX_TRANSITION_MARK_DELIVERED; +export const txHasFirstReview = tx => firstReviewTransitions.includes(txLastTransition(tx)); + +export const txIsReviewed = tx => areReviewsCompleted(txLastTransition(tx)); + export const txTransition = shape({ at: instanceOf(Date).isRequired, by: oneOf(TX_TRANSITION_ACTORS).isRequired, transition: oneOf(TX_TRANSITIONS).isRequired, }); +const firstReviewTransitions = [ + TX_TRANSITION_REVIEW_BY_PROVIDER_FIRST, + TX_TRANSITION_REVIEW_BY_CUSTOMER_FIRST, +]; + // Check if tx transition is followed by a state where // reviews are completed export const areReviewsCompleted = transition => {