From 1dc9b0ae43d6f35a1858c250d6f1ab681de9c01f Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Tue, 29 Aug 2017 16:37:41 +0300 Subject: [PATCH 1/2] Add spacing for breakdown columns --- src/components/BookingBreakdown/BookingBreakdown.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/BookingBreakdown/BookingBreakdown.css b/src/components/BookingBreakdown/BookingBreakdown.css index 3471a82a..f2c02557 100644 --- a/src/components/BookingBreakdown/BookingBreakdown.css +++ b/src/components/BookingBreakdown/BookingBreakdown.css @@ -34,12 +34,11 @@ .itemValue { @apply --marketplaceDefaultFontStyles; font-weight: 600; - margin: 0; + margin: 0 0 0 10px; @media (--viewportMedium) { font-weight: 700; - margin-top: -1px; - margin-bottom: 0; + margin: -1px 0 0 10px; } } @@ -70,9 +69,9 @@ .totalPrice { @apply --marketplaceH2FontStyles; - margin: 0; + margin: 0 0 0 10px; @media (--viewportMedium) { - margin: 0; + margin: 0 0 0 10px; } } From f610add43123e024697103aab5d2435fbf46f19d Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Tue, 29 Aug 2017 16:38:16 +0300 Subject: [PATCH 2/2] Change breakdown texts based on tx state --- .../BookingBreakdown.example.js | 54 +++++++++++++++++++ .../BookingBreakdown/BookingBreakdown.js | 21 +++++--- .../BookingBreakdown/BookingBreakdown.test.js | 4 ++ .../BookingBreakdown.test.js.snap | 12 ++--- .../OrderDetailsPanel/OrderDetailsPanel.js | 1 + .../OrderDetailsPanel.test.js.snap | 2 + .../SaleDetailsPanel/SaleDetailsPanel.js | 12 ++--- .../SaleDetailsPanel.test.js.snap | 12 +---- src/translations/en.json | 12 ++--- 9 files changed, 91 insertions(+), 39 deletions(-) diff --git a/src/components/BookingBreakdown/BookingBreakdown.example.js b/src/components/BookingBreakdown/BookingBreakdown.example.js index d578b693..90f7b823 100644 --- a/src/components/BookingBreakdown/BookingBreakdown.example.js +++ b/src/components/BookingBreakdown/BookingBreakdown.example.js @@ -1,10 +1,12 @@ import Decimal from 'decimal.js'; import { types } from '../../util/sdkLoader'; +import * as propTypes from '../../util/propTypes'; import BookingBreakdown from './BookingBreakdown'; export const Checkout = { component: BookingBreakdown, props: { + transactionState: propTypes.TX_STATE_PREAUTHORIZED, bookingStart: new Date(Date.UTC(2017, 3, 14)), bookingEnd: new Date(Date.UTC(2017, 3, 16)), userRole: 'customer', @@ -23,6 +25,7 @@ export const Checkout = { export const CustomerOrder = { component: BookingBreakdown, props: { + transactionState: propTypes.TX_STATE_PREAUTHORIZED, bookingStart: new Date(Date.UTC(2017, 3, 14)), bookingEnd: new Date(Date.UTC(2017, 3, 16)), userRole: 'customer', @@ -41,6 +44,7 @@ export const CustomerOrder = { export const ProviderSale = { component: BookingBreakdown, props: { + transactionState: propTypes.TX_STATE_PREAUTHORIZED, bookingStart: new Date(Date.UTC(2017, 3, 14)), bookingEnd: new Date(Date.UTC(2017, 3, 16)), userRole: 'provider', @@ -64,6 +68,7 @@ export const ProviderSale = { export const ProviderSaleZeroCommission = { component: BookingBreakdown, props: { + transactionState: propTypes.TX_STATE_PREAUTHORIZED, bookingStart: new Date(Date.UTC(2017, 3, 14)), bookingEnd: new Date(Date.UTC(2017, 3, 16)), userRole: 'provider', @@ -87,6 +92,55 @@ export const ProviderSaleZeroCommission = { export const ProviderSaleSingleNight = { component: BookingBreakdown, props: { + transactionState: propTypes.TX_STATE_PREAUTHORIZED, + bookingStart: new Date(Date.UTC(2017, 3, 14)), + bookingEnd: new Date(Date.UTC(2017, 3, 15)), + userRole: 'provider', + lineItems: [ + { + code: 'line-item/night', + quantity: new Decimal(1), + unitPrice: new types.Money(4500, 'USD'), + lineTotal: new types.Money(4500, 'USD'), + }, + { + code: 'line-item/provider-commission', + unitPrice: new types.Money(-2000, 'USD'), + lineTotal: new types.Money(-2000, 'USD'), + }, + ], + payoutTotal: new types.Money(2500, 'USD'), + }, +}; + +export const ProviderSaleRejected = { + component: BookingBreakdown, + props: { + transactionState: propTypes.TX_STATE_REJECTED, + bookingStart: new Date(Date.UTC(2017, 3, 14)), + bookingEnd: new Date(Date.UTC(2017, 3, 15)), + userRole: 'provider', + lineItems: [ + { + code: 'line-item/night', + quantity: new Decimal(1), + unitPrice: new types.Money(4500, 'USD'), + lineTotal: new types.Money(4500, 'USD'), + }, + { + code: 'line-item/provider-commission', + unitPrice: new types.Money(-2000, 'USD'), + lineTotal: new types.Money(-2000, 'USD'), + }, + ], + payoutTotal: new types.Money(2500, 'USD'), + }, +}; + +export const ProviderSaleDelivered = { + component: BookingBreakdown, + props: { + transactionState: propTypes.TX_STATE_DELIVERED, bookingStart: new Date(Date.UTC(2017, 3, 14)), bookingEnd: new Date(Date.UTC(2017, 3, 15)), userRole: 'provider', diff --git a/src/components/BookingBreakdown/BookingBreakdown.js b/src/components/BookingBreakdown/BookingBreakdown.js index 275d4c66..d1288cd1 100644 --- a/src/components/BookingBreakdown/BookingBreakdown.js +++ b/src/components/BookingBreakdown/BookingBreakdown.js @@ -16,11 +16,11 @@ export const BookingBreakdownComponent = props => { const { rootClassName, className, + transactionState, bookingStart, bookingEnd, payinTotal, payoutTotal, - totalLabelMessage, lineItems, userRole, intl, @@ -38,7 +38,7 @@ export const BookingBreakdownComponent = props => { const dateFormatOptions = { weekday: 'short', - month: 'long', + month: 'short', day: 'numeric', }; const bookingPeriod = ( @@ -102,10 +102,16 @@ export const BookingBreakdownComponent = props => { ); } - const defaultTotalLabel = userRole === 'customer' + let providerTotalMessageId = 'BookingBreakdown.providerTotalDefault'; + if (transactionState === propTypes.TX_STATE_DELIVERED) { + providerTotalMessageId = 'BookingBreakdown.providerTotalDelivered'; + } else if (transactionState === propTypes.TX_STATE_REJECTED) { + providerTotalMessageId = 'BookingBreakdown.providerTotalRejected'; + } + + const totalLabel = userRole === 'customer' ? - : ; - const totalLabel = totalLabelMessage || defaultTotalLabel; + : ; const totalPrice = userRole === 'customer' ? payinTotal : payoutTotal; const formattedTotalPrice = formatMoney(intl, totalPrice); @@ -144,10 +150,9 @@ BookingBreakdownComponent.defaultProps = { className: null, payinTotal: null, payoutTotal: null, - totalLabelMessage: null, }; -const { arrayOf, instanceOf, node, oneOf, shape, string } = PropTypes; +const { arrayOf, instanceOf, oneOf, shape, string } = PropTypes; const lineItem = shape({ code: string.isRequired, @@ -160,13 +165,13 @@ BookingBreakdownComponent.propTypes = { rootClassName: string, className: string, + transactionState: oneOf(propTypes.TX_STATES).isRequired, bookingStart: instanceOf(Date).isRequired, bookingEnd: instanceOf(Date).isRequired, lineItems: arrayOf(lineItem).isRequired, userRole: oneOf(['customer', 'provider']).isRequired, payinTotal: propTypes.money, // required if userRole === customer payoutTotal: propTypes.money, // required if userRole === provider - totalLabelMessage: node, // from injectIntl intl: intlShape.isRequired, diff --git a/src/components/BookingBreakdown/BookingBreakdown.test.js b/src/components/BookingBreakdown/BookingBreakdown.test.js index 9d42041a..c1b497fc 100644 --- a/src/components/BookingBreakdown/BookingBreakdown.test.js +++ b/src/components/BookingBreakdown/BookingBreakdown.test.js @@ -3,12 +3,14 @@ import Decimal from 'decimal.js'; import { fakeIntl } from '../../util/test-data'; import { renderDeep } from '../../util/test-helpers'; import { types } from '../../util/sdkLoader'; +import * as propTypes from '../../util/propTypes'; import { BookingBreakdownComponent } from './BookingBreakdown'; describe('BookingBreakdown', () => { it('pretransaction data matches snapshot', () => { const tree = renderDeep( { it('customer transaction data matches snapshot', () => { const tree = renderDeep( { it('provider transaction data matches snapshot', () => { const tree = renderDeep( @@ -95,7 +95,7 @@ exports[`BookingBreakdown pretransaction data matches snapshot 1`] = ` @@ -155,7 +155,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = ` @@ -165,7 +165,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = ` - Subtotal: + Subtotal - Saunatime fee: + Saunatime fee - Happy days! You just made… + You\'ll make
{ } return (
@@ -220,6 +221,7 @@ exports[`OrderDetailsPanel matches snapshot 1`] = ` "currency": "USD", } } + transactionState="state/preauthorized" userRole="customer" />
diff --git a/src/components/SaleDetailsPanel/SaleDetailsPanel.js b/src/components/SaleDetailsPanel/SaleDetailsPanel.js index b45ff001..f8c2825c 100644 --- a/src/components/SaleDetailsPanel/SaleDetailsPanel.js +++ b/src/components/SaleDetailsPanel/SaleDetailsPanel.js @@ -15,7 +15,7 @@ import { import css from './SaleDetailsPanel.css'; -const breakdown = (transaction, totalLabelMessage) => { +const breakdown = transaction => { const tx = ensureTransaction(transaction); const booking = ensureBooking(tx.booking); const bookingStart = booking.attributes.start; @@ -27,16 +27,15 @@ const breakdown = (transaction, totalLabelMessage) => { if (!bookingStart || !bookingEnd || !payinTotal || !payoutTotal || !lineItems) { return null; } - return ( ); }; @@ -142,12 +141,7 @@ const SaleDetailsPanel = props => { ); } - const wasRejected = transactionState === propTypes.TX_STATE_REJECTED; - const totalMessage = wasRejected - ? - : ; - - const bookingInfo = breakdown(currentTransaction, totalMessage); + const bookingInfo = breakdown(currentTransaction); const title = saleTitle(transactionState, listingLink, customerDisplayName, lastTransition); const message = saleMessage( diff --git a/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap b/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap index c6d69b50..444ec5d0 100644 --- a/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap +++ b/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap @@ -151,11 +151,7 @@ exports[`SaleDetailsPanel matches snapshot 1`] = ` "currency": "USD", } } - totalLabelMessage={ - - } + transactionState="state/preauthorized" userRole="provider" />
@@ -228,11 +224,7 @@ exports[`SaleDetailsPanel matches snapshot 1`] = ` "currency": "USD", } } - totalLabelMessage={ - - } + transactionState="state/preauthorized" userRole="provider" />
diff --git a/src/translations/en.json b/src/translations/en.json index 21e139d4..183c1ba8 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -10,11 +10,13 @@ "AuthenticationPage.signupLinkText": "Sign up", "AuthenticationPage.signupPageTitle": "Sign up", "BookingBreakdown.bookingPeriod": "{bookingStart} – {bookingEnd}", - "BookingBreakdown.commission": "Saunatime fee:", - "BookingBreakdown.nightCount": "× {count, number} {count, plural, one {night} other {nights}}", + "BookingBreakdown.commission": "Saunatime fee", + "BookingBreakdown.nightCount": "{count, number} {count, plural, one {night} other {nights}}", "BookingBreakdown.pricePerNight": "Price per night", - "BookingBreakdown.providerTotal":"Happy days! You just made…", - "BookingBreakdown.subTotal": "Subtotal:", + "BookingBreakdown.providerTotalDefault": "You'll make", + "BookingBreakdown.providerTotalDelivered": "You made", + "BookingBreakdown.providerTotalRejected": "You would have made", + "BookingBreakdown.subTotal": "Subtotal", "BookingBreakdown.total": "Total price", "BookingDatesForm.bookingEndTitle": "End date", "BookingDatesForm.bookingStartTitle": "Start date", @@ -245,8 +247,6 @@ "SaleDetailsPanel.listingDeliveredTitle": "{customerName} booked {listingLink}", "SaleDetailsPanel.listingRejectedTitle": "{customerName} requested to book {listingLink}", "SaleDetailsPanel.listingRequestedTitle": "{customerName} has requested to book {listingLink}", - "SaleDetailsPanel.providerRejectedTotal": "You would have made:", - "SaleDetailsPanel.providerTotal": "Happy days! You just made…", "SaleDetailsPanel.saleAcceptedStatus": "You accepted the request on {formattedDate}.", "SaleDetailsPanel.saleAutoRejectedStatus": "You did not react to the request on time. The request expired on {formattedDate}.", "SaleDetailsPanel.saleDeliveredStatus": "You delivered the order on {formattedDate}.",