diff --git a/package.json b/package.json index f1c28cc0..d1f2c246 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,8 @@ "redux-thunk": "^2.2.0", "sanitize.css": "^5.0.0", "sharetribe-scripts": "1.0.14", - "sharetribe-sdk": "git+ssh://git@github.com/sharetribe/sharetribe-sdk-js#acec122c4c1279bfecb411b027f7bb8928b6b44b", + "sharetribe-sdk": + "git+ssh://git@github.com/sharetribe/sharetribe-sdk-js#acec122c4c1279bfecb411b027f7bb8928b6b44b", "source-map-support": "^0.4.15", "url": "^0.11.0" }, @@ -58,7 +59,8 @@ "test-ci": "sharetribe-scripts test --env=jsdom --runInBand", "eject": "sharetribe-scripts eject", "start": "node server/index.js", - "dev-server": "REACT_APP_CANONICAL_ROOT_URL=http://localhost:4000 yarn run build&&nodemon --watch server server/index.js", + "dev-server": + "REACT_APP_CANONICAL_ROOT_URL=http://localhost:4000 yarn run build&&nodemon --watch server server/index.js", "heroku-prebuild": "./heroku-copy-ssh-key-from-env.sh", "heroku-postbuild": "yarn run build" }, diff --git a/server/dataLoader.js b/server/dataLoader.js index 145a4123..6f5e6dac 100644 --- a/server/dataLoader.js +++ b/server/dataLoader.js @@ -8,16 +8,13 @@ exports.loadData = function(requestUrl, sdk) { const store = configureStore(sdk); - const dataLoadingCalls = matchedRoutes.reduce( - (calls, match) => { - const { route, params } = match; - if (typeof route.loadData === 'function' && !route.auth) { - calls.push(store.dispatch(route.loadData(params, query))); - } - return calls; - }, - [] - ); + const dataLoadingCalls = matchedRoutes.reduce((calls, match) => { + const { route, params } = match; + if (typeof route.loadData === 'function' && !route.auth) { + calls.push(store.dispatch(route.loadData(params, query))); + } + return calls; + }, []); return Promise.all(dataLoadingCalls) .then(() => { diff --git a/server/index.js b/server/index.js index cfbb4851..e6ae255d 100644 --- a/server/index.js +++ b/server/index.js @@ -33,8 +33,8 @@ const log = require('./log'); const buildPath = path.resolve(__dirname, '..', 'build'); const dev = process.env.NODE_ENV !== 'production'; const PORT = process.env.PORT || 4000; -const CLIENT_ID = process.env.REACT_APP_SHARETRIBE_SDK_CLIENT_ID || - '08ec69f6-d37e-414d-83eb-324e94afddf0'; +const CLIENT_ID = + process.env.REACT_APP_SHARETRIBE_SDK_CLIENT_ID || '08ec69f6-d37e-414d-83eb-324e94afddf0'; const BASE_URL = process.env.REACT_APP_SHARETRIBE_SDK_BASE_URL || 'http://localhost:8088'; const USING_SSL = process.env.REACT_APP_SHARETRIBE_USING_SSL === 'true'; const TRUST_PROXY = process.env.SERVER_SHARETRIBE_TRUST_PROXY || null; diff --git a/src/Routes.js b/src/Routes.js index 6e0f523c..e63d9b13 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -19,9 +19,8 @@ const canShowComponent = props => { const callLoadData = props => { const { match, location, route, dispatch, logoutInProgress } = props; const { loadData, name } = route; - const shouldLoadData = typeof loadData === 'function' && - canShowComponent(props) && - !logoutInProgress; + const shouldLoadData = + typeof loadData === 'function' && canShowComponent(props) && !logoutInProgress; if (shouldLoadData) { dispatch(loadData(match.params, location.search)) @@ -55,12 +54,14 @@ class RouteComponentRenderer extends Component { if (!canShow) { staticContext.unauthorized = true; } - return canShow - ? - : ; + return canShow ? ( + + ) : ( + + ); } } diff --git a/src/components/AddImages/AddImages.css b/src/components/AddImages/AddImages.css index 019fd4dc..83bdff9e 100644 --- a/src/components/AddImages/AddImages.css +++ b/src/components/AddImages/AddImages.css @@ -6,7 +6,7 @@ padding-left: 0; &::after { - content: "."; + content: '.'; visibility: hidden; display: block; height: 0; diff --git a/src/components/AddImages/AddImages.example.js b/src/components/AddImages/AddImages.example.js index a6287afb..beab037b 100644 --- a/src/components/AddImages/AddImages.example.js +++ b/src/components/AddImages/AddImages.example.js @@ -31,25 +31,22 @@ class AddImagesTest extends Component { }); // Fake image uploaded state: show image thumbnail - setTimeout( - () => { - this.setState(prevState => { - const { UUID } = types; - const images = prevState.images; - const imageIndex = findIndex(images, i => i.id === fileId); - const updatedImage = { ...imageData, imageId: new UUID(fileId) }; - const updatedImages = [ - ...images.slice(0, imageIndex), - updatedImage, - ...images.slice(imageIndex + 1), - ]; - return { - images: updatedImages, - }; - }); - }, - 1000 - ); + setTimeout(() => { + this.setState(prevState => { + const { UUID } = types; + const images = prevState.images; + const imageIndex = findIndex(images, i => i.id === fileId); + const updatedImage = { ...imageData, imageId: new UUID(fileId) }; + const updatedImages = [ + ...images.slice(0, imageIndex), + updatedImage, + ...images.slice(imageIndex + 1), + ]; + return { + images: updatedImages, + }; + }); + }, 1000); } onSortEnd({ oldIndex, newIndex }) { @@ -70,7 +67,9 @@ class AddImagesTest extends Component { >
- + { const removeButton = image.imageId ? : null; // While image is uploading we show overlay on top of thumbnail - const uploadingOverlay = !image.imageId - ?
- : null; + const uploadingOverlay = !image.imageId ? ( +
+ +
+ ) : null; return ( { - this.props.onBlur(); - }, - BLUR_TIMEOUT - ); + this.blurTimeoutId = window.setTimeout(() => { + this.props.onBlur(); + }, BLUR_TIMEOUT); } handleSelectChange(type, value) { this.setState(prevState => { @@ -160,7 +157,11 @@ class BirthdayInputComponent extends Component { onChange={e => this.handleSelectChange('day', e.target.value)} > - {days.map(d => )} + {days.map(d => ( + + ))}
@@ -176,7 +177,11 @@ class BirthdayInputComponent extends Component { onChange={e => this.handleSelectChange('month', e.target.value)} > - {months.map(m => )} + {months.map(m => ( + + ))}
@@ -192,7 +197,11 @@ class BirthdayInputComponent extends Component { onChange={e => this.handleSelectChange('year', e.target.value)} > - {years.map(y => )} + {years.map(y => ( + + ))}
diff --git a/src/components/BookingBreakdown/BookingBreakdown.js b/src/components/BookingBreakdown/BookingBreakdown.js index 990c3402..24d39fbc 100644 --- a/src/components/BookingBreakdown/BookingBreakdown.js +++ b/src/components/BookingBreakdown/BookingBreakdown.js @@ -16,20 +16,15 @@ const { Money } = types; // Validate the assumption that the commission exists and the amount // is zero or negative. const isValidCommission = commissionLineItem => { - return commissionLineItem && + return ( + commissionLineItem && commissionLineItem.lineTotal instanceof Money && - commissionLineItem.lineTotal.amount <= 0; + commissionLineItem.lineTotal.amount <= 0 + ); }; export const BookingBreakdownComponent = props => { - const { - rootClassName, - className, - userRole, - transaction, - booking, - intl, - } = props; + const { rootClassName, className, userRole, transaction, booking, intl } = props; const isProvider = userRole === 'provider'; const classes = classNames(rootClassName || css.root, className); @@ -67,14 +62,14 @@ export const BookingBreakdownComponent = props => { item => item.code === (isProvider ? 'line-item/provider-refund' : 'line-item/customer-refund') ); - const refundInfo = refund - ?
- - - - {formatMoney(intl, refund.lineTotal)} -
- : null; + const refundInfo = refund ? ( +
+ + + + {formatMoney(intl, refund.lineTotal)} +
+ ) : null; const nightCount = nightPurchase.quantity.toFixed(); const nightCountMessage = ( @@ -129,9 +124,11 @@ export const BookingBreakdownComponent = props => { providerTotalMessageId = 'BookingBreakdown.providerTotalCanceled'; } - const totalLabel = isProvider - ? - : ; + const totalLabel = isProvider ? ( + + ) : ( + + ); const totalPrice = isProvider ? transaction.attributes.payoutTotal @@ -147,9 +144,7 @@ export const BookingBreakdownComponent = props => { {formattedUnitPrice}
- - {bookingPeriod} - + {bookingPeriod} {nightCountMessage}
{subTotalInfo} @@ -157,12 +152,8 @@ export const BookingBreakdownComponent = props => { {refundInfo}
-
- {totalLabel} -
-
- {formattedTotalPrice} -
+
{totalLabel}
+
{formattedTotalPrice}
); diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css index 5705d93f..d40633d5 100644 --- a/src/components/Button/Button.css +++ b/src/components/Button/Button.css @@ -106,9 +106,17 @@ } @keyframes checkmarkAnimation { - 0% { opacity: 0; transform: scale(0.75);} - 50% { transform: scale(1.15);} - 100% { opacity: 1; transform: scale(1);} + 0% { + opacity: 0; + transform: scale(0.75); + } + 50% { + transform: scale(1.15); + } + 100% { + opacity: 1; + transform: scale(1); + } } .secondaryButton .spinner { diff --git a/src/components/Button/Button.example.js b/src/components/Button/Button.example.js index c2fb7914..ad145534 100644 --- a/src/components/Button/Button.example.js +++ b/src/components/Button/Button.example.js @@ -25,21 +25,19 @@ class InteractiveButton extends Component { window.clearTimeout(this.inProgressTimeoutId); window.clearTimeout(this.readyTimeoutId); this.setState({ inProgress: true, disabled: true }); - this.inProgressTimeoutId = window.setTimeout( - () => { - this.setState({ inProgress: false, disabled: false, ready: true }); - this.readyTimeoutId = window.setTimeout( - () => { - this.setState({ inProgress: false, disabled: false, ready: false }); - }, - 2000 - ); - }, - 2000 - ); + this.inProgressTimeoutId = window.setTimeout(() => { + this.setState({ inProgress: false, disabled: false, ready: true }); + this.readyTimeoutId = window.setTimeout(() => { + this.setState({ inProgress: false, disabled: false, ready: false }); + }, 2000); + }, 2000); }; - return ; + return ( + + ); } } @@ -50,7 +48,9 @@ const ButtonsComponent = () => {

Button with a translation:

- +

Button with an icon and a text:

Default button disabled and in progress:

- +

Default button disabled and ready:

- +

Primary button:

Click me @@ -89,10 +93,14 @@ const ButtonsComponent = () => { Click me

Primary button disabled and in progress:

- Click me + + Click me +

Primary button disabled and ready:

- Click me + + Click me +

Secondary button:

Click me @@ -107,19 +115,31 @@ const ButtonsComponent = () => { Click me

Secondary button disabled and in progress:

- Click me + + Click me +

Secondary button disabled and ready:

- Click me + + Click me +

Inline text button:

Lorem ipsum button that looks like link dolor sit amet

-

Lorem ipsum a normal link dolor sit amet

+

+ Lorem ipsum{' '} + + a normal link + {' '} + dolor sit amet +

Link that looks like a default button:

- Click me + + Click me +

Translated link that looks like a default button:

@@ -127,14 +147,17 @@ const ButtonsComponent = () => {

Link that looks like a primary button:

- Click me + + Click me +

Link that looks like a secondary button:

- Click me + + Click me +

Button with custom styles:

- ); }; diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index 2f97036a..7389ad25 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -36,7 +36,11 @@ class Button extends Component { // the client side is handling the submit. const buttonDisabled = this.state.mounted ? disabled : true; - return ; + return ( + + ); } } diff --git a/src/components/CurrencyInputField/CurrencyInputField.example.js b/src/components/CurrencyInputField/CurrencyInputField.example.js index abc1095f..87d5daf8 100644 --- a/src/components/CurrencyInputField/CurrencyInputField.example.js +++ b/src/components/CurrencyInputField/CurrencyInputField.example.js @@ -24,7 +24,9 @@ const CurrencyInputWithIntl = ({ locale, ...rest }) => { addLocaleData([...fi]); } return ( - + + + ); }; diff --git a/src/components/CurrencyInputField/CurrencyInputField.js b/src/components/CurrencyInputField/CurrencyInputField.js index 7e227e68..b6d590a3 100644 --- a/src/components/CurrencyInputField/CurrencyInputField.js +++ b/src/components/CurrencyInputField/CurrencyInputField.js @@ -50,9 +50,8 @@ class CurrencyInputComponent extends Component { constructor(props) { super(props); const { currencyConfig, defaultValue, input, intl } = props; - const initialValue = input.value instanceof types.Money - ? convertMoneyToNumber(input.value) - : defaultValue; + const initialValue = + input.value instanceof types.Money ? convertMoneyToNumber(input.value) : defaultValue; const hasInitialValue = typeof initialValue === 'number' && !isNaN(initialValue); // We need to handle number format - some locales use dots and some commas as decimal separator @@ -147,8 +146,8 @@ class CurrencyInputComponent extends Component { const targetDecimalValue = isEmptyString ? null : new Decimal(targetValue); - const isSafeValue = isEmptyString || - (targetDecimalValue.isPositive() && isSafeNumber(targetDecimalValue)); + const isSafeValue = + isEmptyString || (targetDecimalValue.isPositive() && isSafeNumber(targetDecimalValue)); if (!isSafeValue) { throw new Error(`Unsafe money value: ${targetValue}`); } diff --git a/src/components/DateInputField/DateInputField.css b/src/components/DateInputField/DateInputField.css index 5cc65f8b..6091989c 100644 --- a/src/components/DateInputField/DateInputField.css +++ b/src/components/DateInputField/DateInputField.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; .inputRoot { - /* Override react-dates default styles to match input styles */ & :global(.SingleDatePicker) { @@ -30,7 +29,6 @@ } .fieldRoot { - } .input { diff --git a/src/components/DateInputField/DateInputField.js b/src/components/DateInputField/DateInputField.js index a1c155f7..1ff145b7 100644 --- a/src/components/DateInputField/DateInputField.js +++ b/src/components/DateInputField/DateInputField.js @@ -112,10 +112,10 @@ class DateInputComponent extends Component { const initialMoment = initialDate ? moment(initialDate) : null; const date = value instanceof Date ? moment(value) : initialMoment; - const placeholderText = placeholder || - intl.formatMessage({ id: 'DateInput.defaultPlaceholder' }); - const screenReaderInputText = screenReaderInputMessage || - intl.formatMessage({ id: 'DateInput.screenReaderInputMessage' }); + const placeholderText = + placeholder || intl.formatMessage({ id: 'DateInput.defaultPlaceholder' }); + const screenReaderInputText = + screenReaderInputMessage || intl.formatMessage({ id: 'DateInput.screenReaderInputMessage' }); const closeDatePickerText = phrases.closeDatePicker ? phrases.closeDatePicker : intl.formatMessage({ id: 'DateInput.closeDatePicker' }); diff --git a/src/components/DateRangeInputField/DateRangeInput.css b/src/components/DateRangeInputField/DateRangeInput.css index 29968006..9bcab1eb 100644 --- a/src/components/DateRangeInputField/DateRangeInput.css +++ b/src/components/DateRangeInputField/DateRangeInput.css @@ -7,9 +7,8 @@ } .inputRoot { - /* Contain repainting to this component only */ - transform: translate3d(0,0,0); + transform: translate3d(0, 0, 0); /* Override react-dates default styles to match input styles */ diff --git a/src/components/DateRangeInputField/DateRangeInput.js b/src/components/DateRangeInputField/DateRangeInput.js index 071948ba..bb184a3d 100644 --- a/src/components/DateRangeInputField/DateRangeInput.js +++ b/src/components/DateRangeInputField/DateRangeInput.js @@ -78,8 +78,10 @@ const defaultProps = { isOutsideRange: day => { const daysCountAvailableToBook = 90; const endOfRange = daysCountAvailableToBook - 1; - return !isInclusivelyAfterDay(day, moment()) || - !isInclusivelyBeforeDay(day, moment().add(endOfRange, 'days')); + return ( + !isInclusivelyAfterDay(day, moment()) || + !isInclusivelyBeforeDay(day, moment().add(endOfRange, 'days')) + ); }, isDayHighlighted: () => {}, @@ -137,12 +139,9 @@ class DateRangeInputComponent extends Component { this.props.onFocus(focusedInput); } else { window.clearTimeout(this.blurTimeoutId); - this.blurTimeoutId = window.setTimeout( - () => { - this.props.onBlur(); - }, - BLUR_TIMEOUT - ); + this.blurTimeoutId = window.setTimeout(() => { + this.props.onBlur(); + }, BLUR_TIMEOUT); } } @@ -170,18 +169,19 @@ class DateRangeInputComponent extends Component { const initialStartMoment = initialDates ? moment(initialDates.startDate) : null; const initialEndMoment = initialDates ? moment(initialDates.endDate) : null; - const startDate = value && value.startDate instanceof Date - ? moment(value.startDate) - : initialStartMoment; - const endDate = value && value.endDate instanceof Date - ? moment(value.endDate) - : initialEndMoment; + const startDate = + value && value.startDate instanceof Date ? moment(value.startDate) : initialStartMoment; + const endDate = + value && value.endDate instanceof Date ? moment(value.endDate) : initialEndMoment; - const startDatePlaceholderTxt = startDatePlaceholderText || + const startDatePlaceholderTxt = + startDatePlaceholderText || intl.formatMessage({ id: 'DateRangeInputField.startDatePlaceholderText' }); - const endDatePlaceholderTxt = endDatePlaceholderText || + const endDatePlaceholderTxt = + endDatePlaceholderText || intl.formatMessage({ id: 'DateRangeInputField.endDatePlaceholderText' }); - const screenReaderInputText = screenReaderInputMessage || + const screenReaderInputText = + screenReaderInputMessage || intl.formatMessage({ id: 'DateRangeInputField.screenReaderInputMessage' }); const closeDatePickerText = phrases.closeDatePicker ? phrases.closeDatePicker diff --git a/src/components/DateRangeInputField/DateRangeInputField.css b/src/components/DateRangeInputField/DateRangeInputField.css index 16d4a179..ca2c6a4a 100644 --- a/src/components/DateRangeInputField/DateRangeInputField.css +++ b/src/components/DateRangeInputField/DateRangeInputField.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; .fieldRoot { - } .labels { @@ -92,7 +91,6 @@ width: 100%; margin: 0; - /* Gutter between inputs (when calendar is not visible) */ & .startDateLabel, & .endDateLabel { @@ -103,7 +101,5 @@ flex-basis: calc(50% - 12px); transition: all 0.15s ease-out; } - } - } diff --git a/src/components/DateRangeInputField/DateRangeInputField.example.js b/src/components/DateRangeInputField/DateRangeInputField.example.js index 42aa0a45..c35c1a30 100644 --- a/src/components/DateRangeInputField/DateRangeInputField.example.js +++ b/src/components/DateRangeInputField/DateRangeInputField.example.js @@ -37,7 +37,9 @@ export const Empty = { startDatePlaceholderText: moment().format('ddd, MMMM D'), endDateId: `${defaultFormName}.bookingEndDate`, endDateLabel: 'End date', - endDatePlaceholderText: moment().add(1, 'days').format('ddd, MMMM D'), + endDatePlaceholderText: moment() + .add(1, 'days') + .format('ddd, MMMM D'), format: null, validate: [ required('Required'), diff --git a/src/components/DateRangeInputField/DateRangeInputField.js b/src/components/DateRangeInputField/DateRangeInputField.js index bfe63625..862787f0 100644 --- a/src/components/DateRangeInputField/DateRangeInputField.js +++ b/src/components/DateRangeInputField/DateRangeInputField.js @@ -92,12 +92,17 @@ class DateRangeInputFieldComponent extends Component { [css.hover]: this.state.focusedInput === END_DATE, }); - const label = startDateLabel && endDateLabel - ?
- - + const label = + startDateLabel && endDateLabel ? ( +
+ +
- : null; + ) : null; // eslint-disable-next-line no-unused-vars const { onBlur, onFocus, ...restOfInput } = input; diff --git a/src/components/Discussion/Discussion.js b/src/components/Discussion/Discussion.js index 14bf09c9..f03b6eec 100644 --- a/src/components/Discussion/Discussion.js +++ b/src/components/Discussion/Discussion.js @@ -43,9 +43,7 @@ class Discussion extends Component { render() { return (
-
    - {this.props.messages.map(msg => )} -
+
    {this.props.messages.map(msg => )}
- +
); diff --git a/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js b/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js index 0327033d..23b64786 100644 --- a/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js +++ b/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js @@ -25,21 +25,22 @@ const EditListingDescriptionPanel = props => { const currentListing = ensureListing(listing); const { description, title } = currentListing.attributes; const listingTitle = title || ''; - const listingLink = currentListing.id - ? - {listingTitle} - - : ''; + const listingLink = currentListing.id ? ( + + {listingTitle} + + ) : ( + '' + ); - const panelTitle = currentListing.id - ? - : ; + const panelTitle = currentListing.id ? ( + + ) : ( + + ); return (
diff --git a/src/components/EditListingLocationPanel/EditListingLocationPanel.js b/src/components/EditListingLocationPanel/EditListingLocationPanel.js index 7501c7a6..a8b0f1cf 100644 --- a/src/components/EditListingLocationPanel/EditListingLocationPanel.js +++ b/src/components/EditListingLocationPanel/EditListingLocationPanel.js @@ -25,21 +25,19 @@ const EditListingLocationPanel = props => { const currentListing = ensureListing(listing); const { address, geolocation, title } = currentListing.attributes; const listingTitle = title || ''; - const listingLink = currentListing.id - ? - {listingTitle} - - : ''; + const listingLink = currentListing.id ? ( + + {listingTitle} + + ) : ( + '' + ); - const panelTitle = currentListing.id - ? - : ; + const panelTitle = currentListing.id ? ( + + ) : ( + + ); // Only render current search if full place object is available in the URL params // TODO bounds and country are missing - those need to be queried directly from Google Places diff --git a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css index 462b7274..ad083cbf 100644 --- a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css +++ b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css @@ -13,7 +13,6 @@ flex-grow: 1; } - /* ================ Modal ================ */ .modalHeaderWrapper { diff --git a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js index a0260e03..b0422d89 100644 --- a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js +++ b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js @@ -24,9 +24,8 @@ class EditListingPhotosPanel extends Component { handlePhotosSubmit(values) { const { onSubmit, currentUser } = this.props; - const stripeConnected = currentUser && - currentUser.attributes && - currentUser.attributes.stripeConnected; + const stripeConnected = + currentUser && currentUser.attributes && currentUser.attributes.stripeConnected; if (stripeConnected) { onSubmit(values); } else { @@ -100,21 +99,22 @@ class EditListingPhotosPanel extends Component { const { title } = currentListing.attributes; const listingTitle = title || ''; - const listingLink = currentListing.id - ? - {listingTitle} - - : ''; + const listingLink = currentListing.id ? ( + + {listingTitle} + + ) : ( + '' + ); - const panelTitle = currentListing.id - ? - : ; + const panelTitle = currentListing.id ? ( + + ) : ( + + ); return (
@@ -162,7 +162,6 @@ class EditListingPhotosPanel extends Component { onSubmit={this.handlePayoutSubmit} /> -
); } diff --git a/src/components/EditListingPricingPanel/EditListingPricingPanel.js b/src/components/EditListingPricingPanel/EditListingPricingPanel.js index 153a44a8..71a35826 100644 --- a/src/components/EditListingPricingPanel/EditListingPricingPanel.js +++ b/src/components/EditListingPricingPanel/EditListingPricingPanel.js @@ -25,18 +25,19 @@ const EditListingPricingPanel = props => { const currentListing = ensureListing(listing); const { price, title } = currentListing.attributes; const listingTitle = title || ''; - const listingLink = currentListing.id - ? - {listingTitle} - - : ''; + const listingLink = currentListing.id ? ( + + {listingTitle} + + ) : ( + '' + ); - const panelTitle = currentListing.id - ? - : ; + const panelTitle = currentListing.id ? ( + + ) : ( + + ); return (
diff --git a/src/components/ExpandingTextarea/ExpandingTextarea.example.js b/src/components/ExpandingTextarea/ExpandingTextarea.example.js index 4c2fb648..67af576e 100644 --- a/src/components/ExpandingTextarea/ExpandingTextarea.example.js +++ b/src/components/ExpandingTextarea/ExpandingTextarea.example.js @@ -1,6 +1,7 @@ import ExpandingTextarea from './ExpandingTextarea'; -const loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas hendrerit tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer suscipit vitae risus et feugiat. Sed dapibus molestie auctor. Fusce faucibus nulla ac eros lacinia consequat. Quisque sodales blandit dolor vel consequat. In purus dui, mollis quis malesuada ut, convallis dapibus arcu. Nam pulvinar, ipsum et accumsan accumsan, urna lectus eleifend nisl, eu finibus mauris dolor quis lectus. Mauris sit amet sem sollicitudin, hendrerit turpis ut, sollicitudin quam. Morbi risus augue, iaculis non malesuada vitae, dignissim ac mauris. Nam urna justo, mollis vel mi vel, consectetur pellentesque lorem.\n\nProin egestas nunc lectus, nec luctus arcu placerat quis. Quisque ac arcu eu urna fringilla consequat a nec elit. Morbi sit amet tempus velit. Pellentesque ac magna tempus nunc consectetur iaculis in eget mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque imperdiet eros in diam rhoncus, vitae blandit turpis egestas. Duis venenatis finibus orci, eget molestie elit. Donec sollicitudin rhoncus neque in viverra. Phasellus mauris velit, aliquet sed dapibus sed, ultricies ut augue. Donec dapibus scelerisque erat ac rhoncus. Duis facilisis risus sit amet erat consectetur gravida.'; +const loremIpsum = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas hendrerit tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer suscipit vitae risus et feugiat. Sed dapibus molestie auctor. Fusce faucibus nulla ac eros lacinia consequat. Quisque sodales blandit dolor vel consequat. In purus dui, mollis quis malesuada ut, convallis dapibus arcu. Nam pulvinar, ipsum et accumsan accumsan, urna lectus eleifend nisl, eu finibus mauris dolor quis lectus. Mauris sit amet sem sollicitudin, hendrerit turpis ut, sollicitudin quam. Morbi risus augue, iaculis non malesuada vitae, dignissim ac mauris. Nam urna justo, mollis vel mi vel, consectetur pellentesque lorem.\n\nProin egestas nunc lectus, nec luctus arcu placerat quis. Quisque ac arcu eu urna fringilla consequat a nec elit. Morbi sit amet tempus velit. Pellentesque ac magna tempus nunc consectetur iaculis in eget mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque imperdiet eros in diam rhoncus, vitae blandit turpis egestas. Duis venenatis finibus orci, eget molestie elit. Donec sollicitudin rhoncus neque in viverra. Phasellus mauris velit, aliquet sed dapibus sed, ultricies ut augue. Donec dapibus scelerisque erat ac rhoncus. Duis facilisis risus sit amet erat consectetur gravida.'; export const Empty = { component: ExpandingTextarea, diff --git a/src/components/ExpandingTextarea/ExpandingTextarea.js b/src/components/ExpandingTextarea/ExpandingTextarea.js index c4ebea45..4fa5eb9d 100644 --- a/src/components/ExpandingTextarea/ExpandingTextarea.js +++ b/src/components/ExpandingTextarea/ExpandingTextarea.js @@ -10,12 +10,9 @@ class ExpandingTextarea extends Component { componentDidMount() { // Delay the autosize initialisation so that the autosize can // correctly calculate the height with the textarea value - this.timeoutId = window.setTimeout( - () => { - autosize(this.textarea); - }, - 100 - ); + this.timeoutId = window.setTimeout(() => { + autosize(this.textarea); + }, 100); } componentDidUpdate() { autosize.update(this.textarea); diff --git a/src/components/FilterPanel/FilterPanel.css b/src/components/FilterPanel/FilterPanel.css index 00539109..c8ac683c 100644 --- a/src/components/FilterPanel/FilterPanel.css +++ b/src/components/FilterPanel/FilterPanel.css @@ -14,7 +14,7 @@ font-size: 1.4rem; padding: 0.5rem; color: #fff; - background-color: #9B9B9B; + background-color: #9b9b9b; cursor: pointer; &:hover { diff --git a/src/components/FilterPanel/FilterPanel.js b/src/components/FilterPanel/FilterPanel.js index 28c798c8..dcc5a762 100644 --- a/src/components/FilterPanel/FilterPanel.js +++ b/src/components/FilterPanel/FilterPanel.js @@ -5,8 +5,12 @@ import css from './FilterPanel.css'; const FilterPanel = () => (

Filters

- See studios - X + + See studios + + + X +
); diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js index 226d492a..3165d5d4 100644 --- a/src/components/Form/Form.js +++ b/src/components/Form/Form.js @@ -13,11 +13,7 @@ const Form = props => { ...restProps, }; - return ( -
- {children} -
- ); + return
{children}
; }; Form.defaultProps = { diff --git a/src/components/HeroSection/HeroSection.css b/src/components/HeroSection/HeroSection.css index 36cee328..db5d3154 100644 --- a/src/components/HeroSection/HeroSection.css +++ b/src/components/HeroSection/HeroSection.css @@ -9,7 +9,7 @@ animation-timing-function: ease-out; -webkit-animation-fill-mode: forwards; - visibility:hidden; + visibility: hidden; opacity: 1; position: relative; } @@ -18,8 +18,16 @@ /* Animation for the hero elements */ @keyframes animationTitle { - 0% { visibility: hidden; opacity: 0; top: -20px; } - 100% { visibility: visible; opacity: 1; top: 0;} + 0% { + visibility: hidden; + opacity: 0; + top: -20px; + } + 100% { + visibility: visible; + opacity: 1; + top: 0; + } } .root { diff --git a/src/components/IconCheckmark/IconCheckmark.js b/src/components/IconCheckmark/IconCheckmark.js index fabdbcf3..726db408 100644 --- a/src/components/IconCheckmark/IconCheckmark.js +++ b/src/components/IconCheckmark/IconCheckmark.js @@ -8,9 +8,7 @@ const IconCheckmark = props => { const classes = classNames(rootClassName || css.root, className); return ( - + ); }; diff --git a/src/components/IconEmailAttention/IconEmailAttention.css b/src/components/IconEmailAttention/IconEmailAttention.css index 9356bf91..9bd6960d 100644 --- a/src/components/IconEmailAttention/IconEmailAttention.css +++ b/src/components/IconEmailAttention/IconEmailAttention.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; .root { - } .marketplaceStroke { diff --git a/src/components/IconEmailSent/IconEmailSent.js b/src/components/IconEmailSent/IconEmailSent.js index 6a10d5bb..046a8260 100644 --- a/src/components/IconEmailSent/IconEmailSent.js +++ b/src/components/IconEmailSent/IconEmailSent.js @@ -21,9 +21,7 @@ const IconEmailSent = props => { strokeLinecap="round" strokeLinejoin="round" > - + diff --git a/src/components/IconEmailSuccess/IconEmailSuccess.css b/src/components/IconEmailSuccess/IconEmailSuccess.css index a7dca9cd..da831919 100644 --- a/src/components/IconEmailSuccess/IconEmailSuccess.css +++ b/src/components/IconEmailSuccess/IconEmailSuccess.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; .root { - } .marketplaceStroke { diff --git a/src/components/IconSearch/IconSearch.js b/src/components/IconSearch/IconSearch.js index 50cceda1..7e12da0a 100644 --- a/src/components/IconSearch/IconSearch.js +++ b/src/components/IconSearch/IconSearch.js @@ -22,7 +22,8 @@ const IconSearch = props => { strokeLinecap="round" strokeLinejoin="round" > - + + ); diff --git a/src/components/IconSpinner/IconSpinner.css b/src/components/IconSpinner/IconSpinner.css index 426ba7e3..ee46c953 100644 --- a/src/components/IconSpinner/IconSpinner.css +++ b/src/components/IconSpinner/IconSpinner.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; .root { - /* While the viewbox of the icon is 30x30, the icon size is scaled to 28x28 by default, which results in scaling the whole image and the strokes a bit.*/ diff --git a/src/components/ImageCarousel/ImageCarousel.css b/src/components/ImageCarousel/ImageCarousel.css index f3348b97..6584a0f7 100644 --- a/src/components/ImageCarousel/ImageCarousel.css +++ b/src/components/ImageCarousel/ImageCarousel.css @@ -11,7 +11,7 @@ padding: 0; @media (--viewportMedium) { - padding: var(--verticalPadding) 10vw;; + padding: var(--verticalPadding) 10vw; } } @@ -24,7 +24,6 @@ } .imageIndex { - /* Fonts */ @apply --marketplaceH4FontStyles; font-weight: var(--fontWeightSemiBold); @@ -46,7 +45,6 @@ .prev, .next { - /* Position and dimensions */ position: absolute; top: 0; @@ -84,7 +82,6 @@ @media (--viewportMedium) { background-position: center left 5vw; background-image: url('data:image/svg+xml;utf8,'); - } } diff --git a/src/components/ImageCarousel/ImageCarousel.js b/src/components/ImageCarousel/ImageCarousel.js index 67638f47..6f511dca 100644 --- a/src/components/ImageCarousel/ImageCarousel.js +++ b/src/components/ImageCarousel/ImageCarousel.js @@ -54,17 +54,16 @@ class ImageCarousel extends Component { const classes = classNames(rootClassName || css.root, className); const naturalIndex = this.state.selectedImageIndex + 1; - const imageIndex = images.length > 0 - ? + const imageIndex = + images.length > 0 ? ( + {naturalIndex}/{images.length} - : null; - const prevButton = images.length > 1 - ?
-
- {title} -
+
{title}
{
  • Address: {address}
  • Country: {country || '[no country]'}
    • -
  • Coordinates: {origin.lat}, {origin.lng}
    • +
  • + Coordinates: {origin.lat}, {origin.lng} +
  • Bounds: {bounds ? 'yes' : 'no'}
diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.js b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.js index 5c3b8248..7bdc533f 100644 --- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.js +++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.js @@ -34,7 +34,8 @@ const Icon = () => ( strokeLinecap="round" strokeLinejoin="round" > - + + ); @@ -84,9 +85,7 @@ const LocationPredictionsList = props => { return (
-
    - {predictions.map(item)} -
+
    {predictions.map(item)}
); @@ -423,16 +422,16 @@ class LocationAutocompleteInput extends Component { onChange={this.onChange} onKeyDown={this.onKeyDown} /> - {renderPredictions - ? - : null} + {renderPredictions ? ( + + ) : null}
); } @@ -493,9 +492,11 @@ class LocationAutocompleteInputFieldComponent extends Component { const { input, label, meta, ...otherProps } = restProps; /* eslint-enable no-unused-vars */ - const labelInfo = label - ? - : null; + const labelInfo = label ? ( + + ) : null; return (
diff --git a/src/components/ManageListingCard/ManageListingCard.css b/src/components/ManageListingCard/ManageListingCard.css index 07fbc59c..bd995400 100644 --- a/src/components/ManageListingCard/ManageListingCard.css +++ b/src/components/ManageListingCard/ManageListingCard.css @@ -74,7 +74,6 @@ } } - /* Firefox doesn't support image aspect ratio inside flexbox */ .aspectWrapper { padding-bottom: 66.6667%; /* 3:2 Aspect Ratio */ @@ -133,19 +132,19 @@ transition: var(--transitionStyleButton); &:hover { - background-color: rgba(0,0,0,0.7); + background-color: rgba(0, 0, 0, 0.7); } } .listingMenuIsOpen { & .iconWrapper { - background-color: rgba(0,0,0,0.7); + background-color: rgba(0, 0, 0, 0.7); color: var(--matterColorLight); } } .menuContent { - visibility:hidden; + visibility: hidden; opacity: 0; pointer-events: none; @@ -236,7 +235,6 @@ } } - .mainInfo { display: flex; flex-direction: column; diff --git a/src/components/ManageListingCard/ManageListingCard.js b/src/components/ManageListingCard/ManageListingCard.js index 346642f9..e862e6e1 100644 --- a/src/components/ManageListingCard/ManageListingCard.js +++ b/src/components/ManageListingCard/ManageListingCard.js @@ -74,9 +74,8 @@ export const ManageListingCardComponent = props => { const id = currentListing.id.uuid; const { title = '', price, closed } = currentListing.attributes; const slug = createSlug(title); - const firstImage = currentListing.images && currentListing.images.length > 0 - ? currentListing.images[0] - : null; + const firstImage = + currentListing.images && currentListing.images.length > 0 ? currentListing.images[0] : null; const menuItemClasses = classNames(css.menuItem, { [css.menuItemDisabled]: !!actionsInProgressListingId, @@ -86,38 +85,39 @@ export const ManageListingCardComponent = props => { const { formattedPrice, priceTitle } = priceData(price, intl); /* eslint-disable jsx-a11y/no-static-element-interactions */ - const closedOverlay = !closed - ? null - :
{ - event.preventDefault(); - event.stopPropagation(); - }} - > -
-
-
- -
- + const closedOverlay = !closed ? null : ( +
{ + event.preventDefault(); + event.stopPropagation(); + }} + > +
+
+
+
-
; + +
+
+ ); - const errorOverlay = hasOpeningError || hasClosingError - ?
{ event.preventDefault(); @@ -131,23 +131,25 @@ export const ManageListingCardComponent = props => {
- : null; + ) : null; const thisInProgress = actionsInProgressListingId && actionsInProgressListingId.uuid === id; - const loadingOrErrorOverlay = thisInProgress - ?
{ - event.preventDefault(); - event.stopPropagation(); - }} - > -
-
- -
+ const loadingOrErrorOverlay = thisInProgress ? ( +
{ + event.preventDefault(); + event.stopPropagation(); + }} + > +
+
+
- : errorOverlay; +
+ ) : ( + errorOverlay + ); /* eslint-enable jsx-a11y/no-static-element-interactions */ return ( @@ -222,9 +224,7 @@ export const ManageListingCardComponent = props => {
-
- {title} -
+
{title}
- : null; + const closeBtn = isOpen ? ( + + ) : null; // Modal uses given styles to wrap child components. // If props doesn't contain isClosedClassName, styles default to css.isClosed @@ -98,9 +98,7 @@ export class ModalComponent extends Component {
{closeBtn} -
- {children} -
+
{children}
diff --git a/src/components/ModalInMobile/ModalInMobile.example.js b/src/components/ModalInMobile/ModalInMobile.example.js index e723892d..76a02ddb 100644 --- a/src/components/ModalInMobile/ModalInMobile.example.js +++ b/src/components/ModalInMobile/ModalInMobile.example.js @@ -23,9 +23,7 @@ class ModalInMobileWrapper extends Component { render() { return (
-
- Wrapper text before ModalInMobile -
+
Wrapper text before ModalInMobile
{ @@ -35,12 +33,12 @@ class ModalInMobileWrapper extends Component { isModalOpenOnMobile={this.state.isOpen} onManageDisableScrolling={onManageDisableScrolling} > -
- Some content inside ModalInMobile component -
+
Some content inside ModalInMobile component
- +
); diff --git a/src/components/NamedLink/NamedLink.js b/src/components/NamedLink/NamedLink.js index 8cc83baa..cc3f49f9 100644 --- a/src/components/NamedLink/NamedLink.js +++ b/src/components/NamedLink/NamedLink.js @@ -40,7 +40,11 @@ export const NamedLinkComponent = props => { title, }; - return {children}; + return ( + + {children} + + ); }; const { object, string, shape, any } = PropTypes; diff --git a/src/components/NamedLink/NamedLink.test.js b/src/components/NamedLink/NamedLink.test.js index 18edf007..9fa38779 100644 --- a/src/components/NamedLink/NamedLink.test.js +++ b/src/components/NamedLink/NamedLink.test.js @@ -35,7 +35,9 @@ describe('NamedLink', () => { it('should contain correct link', () => { const id = 12; const tree = renderDeep( - to ListingPage + + to ListingPage + ); expect(tree.type).toEqual('a'); expect(tree.props.href).toEqual(`/l/${id}`); diff --git a/src/components/NotificationBadge/NotificationBadge.js b/src/components/NotificationBadge/NotificationBadge.js index b5a8071f..7323b4a1 100644 --- a/src/components/NotificationBadge/NotificationBadge.js +++ b/src/components/NotificationBadge/NotificationBadge.js @@ -7,11 +7,7 @@ const NotificationBadge = props => { const { className, rootClassName, count } = props; const classes = classNames(rootClassName || css.root, className); - return ( - - {count} - - ); + return {count}; }; const { number, string } = PropTypes; diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.css b/src/components/OrderDetailsPanel/OrderDetailsPanel.css index c7793df0..9b3fb636 100644 --- a/src/components/OrderDetailsPanel/OrderDetailsPanel.css +++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.css @@ -140,7 +140,6 @@ margin: 1px 0 0 0; @media (--viewportLarge) { - margin-top: 122px; margin-left: 0; margin-right: 0; diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.js b/src/components/OrderDetailsPanel/OrderDetailsPanel.js index 1aed8688..c9624343 100644 --- a/src/components/OrderDetailsPanel/OrderDetailsPanel.js +++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.js @@ -11,14 +11,14 @@ import css from './OrderDetailsPanel.css'; const breakdown = transaction => { const loaded = transaction && transaction.id && transaction.booking && transaction.booking.id; - return loaded - ? - : null; + return loaded ? ( + + ) : null; }; const orderTitle = (transaction, listingLink, customerName) => { @@ -114,12 +114,7 @@ const orderMessage = (transaction, listingTitle, providerName) => { }; export const OrderDetailsPanelComponent = props => { - const { - rootClassName, - className, - transaction, - intl, - } = props; + const { rootClassName, className, transaction, intl } = props; const currentTransaction = ensureTransaction(transaction); const currentListing = ensureListing(currentTransaction.listing); const currentProvider = ensureUser(currentTransaction.provider); @@ -168,9 +163,8 @@ export const OrderDetailsPanelComponent = props => { ? orderMessageDeletedListing : orderMessage(currentTransaction, listingLink, authorDisplayName); - const firstImage = currentListing.images && currentListing.images.length > 0 - ? currentListing.images[0] - : null; + const firstImage = + currentListing.images && currentListing.images.length > 0 ? currentListing.images[0] : null; const classes = classNames(rootClassName || css.root, className); @@ -196,9 +190,7 @@ export const OrderDetailsPanelComponent = props => {

{orderHeading}

-
- {message} -
+
{message}
diff --git a/src/components/OrderDiscussionPanel/OrderDiscussionPanel.js b/src/components/OrderDiscussionPanel/OrderDiscussionPanel.js index f95aafd7..df4a1bfd 100644 --- a/src/components/OrderDiscussionPanel/OrderDiscussionPanel.js +++ b/src/components/OrderDiscussionPanel/OrderDiscussionPanel.js @@ -9,7 +9,8 @@ const OrderDiscussionPanel = props => { id: 1, date: new Date(Date.UTC(2017, 1, 26)), author: 'John', - text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac tellus ornare, tempor lacus quis, imperdiet lectus. Morbi suscipit semper nisl at lacinia. Vestibulum malesuada mattis nisl, et venenatis enim volutpat sit amet. Nulla laoreet feugiat gravida. Fusce ultricies nisl quis aliquet ullamcorper. Nulla congue risus metus.', + text: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac tellus ornare, tempor lacus quis, imperdiet lectus. Morbi suscipit semper nisl at lacinia. Vestibulum malesuada mattis nisl, et venenatis enim volutpat sit amet. Nulla laoreet feugiat gravida. Fusce ultricies nisl quis aliquet ullamcorper. Nulla congue risus metus.', }, ]; diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js index 700b37a6..9a5644dc 100644 --- a/src/components/Page/Page.js +++ b/src/components/Page/Page.js @@ -124,7 +124,8 @@ class PageComponent extends Component { // Schema for search engines (helps them to understand what this page is about) // http://schema.org // We are using JSON-LD format - const schemaJSONString = schema || + const schemaJSONString = + schema || JSON.stringify({ '@context': 'http://schema.org', '@type': 'WebPage', @@ -144,24 +145,19 @@ class PageComponent extends Component { {metaTags} - - + - {authInfoError - ?
- -
- : null} - {logoutError - ?
- -
- : null} -
- {children} -
+ {authInfoError ? ( +
+ +
+ ) : null} + {logoutError ? ( +
+ +
+ ) : null} +
{children}
); } diff --git a/src/components/PaginationLinks/PaginationLinks.css b/src/components/PaginationLinks/PaginationLinks.css index cf5c778c..f728c735 100644 --- a/src/components/PaginationLinks/PaginationLinks.css +++ b/src/components/PaginationLinks/PaginationLinks.css @@ -1,6 +1,6 @@ @import '../../marketplace.css'; -.root{ +.root { display: flex; justify-content: space-between; align-items: center; diff --git a/src/components/PaginationLinks/PaginationLinks.example.js b/src/components/PaginationLinks/PaginationLinks.example.js index 35f36c0a..a47b25be 100644 --- a/src/components/PaginationLinks/PaginationLinks.example.js +++ b/src/components/PaginationLinks/PaginationLinks.example.js @@ -27,9 +27,7 @@ const Pagination = props => { return ( 
-        
-          {JSON.stringify(pagination, null, '  ')}
-        
+        {JSON.stringify(pagination, null, '  ')}
diff --git a/src/components/PaginationLinks/PaginationLinks.js b/src/components/PaginationLinks/PaginationLinks.js index eee97e7e..4f4ea603 100644 --- a/src/components/PaginationLinks/PaginationLinks.js +++ b/src/components/PaginationLinks/PaginationLinks.js @@ -34,17 +34,12 @@ const getPageNumbersArray = (page, totalPages) => { // E.g. [1, 4, 5, 6, 9], where current page = 5 and totalPages = 9. return v === 1 || Math.abs(v - page) <= 1 || v === totalPages; }) - .reduce( - (newArray, p) => { - // Create a new array where gaps between consecutive numbers is filled with ellipsis character - // E.g. [1, '…', 4, 5, 6, '…', 9], where current page = 5 and totalPages = 9. - const isFirstPageOrNextToCurrentPage = p === 1 || newArray[newArray.length - 1] + 1 === p; - return isFirstPageOrNextToCurrentPage - ? newArray.concat([p]) - : newArray.concat(['\u2026', p]); - }, - [] - ); + .reduce((newArray, p) => { + // Create a new array where gaps between consecutive numbers is filled with ellipsis character + // E.g. [1, '…', 4, 5, 6, '…', 9], where current page = 5 and totalPages = 9. + const isFirstPageOrNextToCurrentPage = p === 1 || newArray[newArray.length - 1] + 1 === p; + return isFirstPageOrNextToCurrentPage ? newArray.concat([p]) : newArray.concat(['\u2026', p]); + }, []); }; /** @@ -115,18 +110,22 @@ export const PaginationLinksComponent = props => { const pageNumbersNavLinks = getPageNumbersArray(page, totalPages).map(v => { const isCurrentPage = v === page; const pageClassNames = classNames(css.toPageLink, { [css.currentPage]: isCurrentPage }); - return typeof v === 'number' - ? - {v} - - : {v}; + return typeof v === 'number' ? ( + + {v} + + ) : ( + + {v} + + ); }); // Using 'justify-content: space-between' we can deal with very narrow mobile screens. diff --git a/src/components/ResponsiveImage/NoImageIcon.js b/src/components/ResponsiveImage/NoImageIcon.js index 609cf968..9961cb9e 100644 --- a/src/components/ResponsiveImage/NoImageIcon.js +++ b/src/components/ResponsiveImage/NoImageIcon.js @@ -21,9 +21,7 @@ const NoImageIcon = props => { strokeLinecap="round" strokeLinejoin="round" /> - + ); diff --git a/src/components/ResponsiveImage/ResponsiveImage.example.css b/src/components/ResponsiveImage/ResponsiveImage.example.css index abb772cd..2db3065c 100644 --- a/src/components/ResponsiveImage/ResponsiveImage.example.css +++ b/src/components/ResponsiveImage/ResponsiveImage.example.css @@ -19,7 +19,6 @@ width: 100%; } - .rootForSizes { display: block; position: relative; diff --git a/src/components/SaleDetailsPanel/SaleDetailsPanel.css b/src/components/SaleDetailsPanel/SaleDetailsPanel.css index ff1af6ec..ba3d03a5 100644 --- a/src/components/SaleDetailsPanel/SaleDetailsPanel.css +++ b/src/components/SaleDetailsPanel/SaleDetailsPanel.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; .root { - } .container { @@ -196,7 +195,7 @@ /* Contain repainting to this component only */ /* 3D painting container helps scrolling */ - transform: translate3d(0,0,0); + transform: translate3d(0, 0, 0); box-shadow: var(--boxShadowTop); background-color: white; diff --git a/src/components/SaleDetailsPanel/SaleDetailsPanel.js b/src/components/SaleDetailsPanel/SaleDetailsPanel.js index 1bf83318..08e43957 100644 --- a/src/components/SaleDetailsPanel/SaleDetailsPanel.js +++ b/src/components/SaleDetailsPanel/SaleDetailsPanel.js @@ -19,13 +19,9 @@ import css from './SaleDetailsPanel.css'; const breakdown = transaction => { const loaded = transaction && transaction.id && transaction.booking && transaction.booking.id; - return loaded - ? - : null; + return loaded ? ( + + ) : null; }; const saleTitle = (transaction, listingLink, customerName) => { @@ -156,48 +152,47 @@ export const SaleDetailsPanelComponent = props => { : saleMessage(currentTransaction, customerDisplayName); const listingTitle = currentListing.attributes.title; - const firstImage = currentListing.images && currentListing.images.length > 0 - ? currentListing.images[0] - : null; + const firstImage = + currentListing.images && currentListing.images.length > 0 ? currentListing.images[0] : null; const canShowButtons = propTypes.txIsPreauthorized(currentTransaction) && !isCustomerBanned; const buttonsDisabled = acceptInProgress || declineInProgress; - const acceptErrorMessage = acceptSaleError - ?

- -

- : null; - const declineErrorMessage = declineSaleError - ?

- -

- : null; + const acceptErrorMessage = acceptSaleError ? ( +

+ +

+ ) : null; + const declineErrorMessage = declineSaleError ? ( +

+ +

+ ) : null; - const actionButtons = canShowButtons - ?
-
- {acceptErrorMessage} - {declineErrorMessage} -
- onDeclineSale(currentTransaction.id)} - > - - - onAcceptSale(currentTransaction.id)} - > - - + const actionButtons = canShowButtons ? ( +
+
+ {acceptErrorMessage} + {declineErrorMessage}
- : null; + onDeclineSale(currentTransaction.id)} + > + + + onAcceptSale(currentTransaction.id)} + > + + +
+ ) : null; const classes = classNames(rootClassName || css.root, className); @@ -257,9 +252,7 @@ export const SaleDetailsPanelComponent = props => {

-
- {bookingInfo} -
+
{bookingInfo}
diff --git a/src/components/SearchMap/SearchMap.js b/src/components/SearchMap/SearchMap.js index fc0a6672..e9415ce3 100644 --- a/src/components/SearchMap/SearchMap.js +++ b/src/components/SearchMap/SearchMap.js @@ -114,14 +114,14 @@ const MapWithGoogleMap = withGoogleMap(props => { }); const listingsArray = Array.isArray(infoCardOpen) ? infoCardOpen : [infoCardOpen]; - const openedCard = infoCardOpen - ? - : null; + const openedCard = infoCardOpen ? ( + + ) : null; return ( { const { className, clickHandler, history, intl, isInCarousel, listing } = props; const { title, price } = listing.attributes; - const formattedPrice = price && price.currency === config.currency - ? formatMoney(intl, price) - : price.currency; + const formattedPrice = + price && price.currency === config.currency ? formatMoney(intl, price) : price.currency; const firstImage = listing.images && listing.images.length > 0 ? listing.images[0] : null; const urlToListing = createURL(routeConfiguration(), history, listing); @@ -78,12 +77,8 @@ const ListingCard = props => {
-
- {formattedPrice} -
-
- {title} -
+
{formattedPrice}
+
{title}
@@ -133,35 +128,35 @@ class SearchMapInfoCard extends Component { // Explicit type change to object literal for Google OverlayViews (geolocation is SDK type) const latLngLiteral = { lat: geolocation.lat, lng: geolocation.lng }; const hasCarousel = listings.length > 1; - const pagination = hasCarousel - ?
-
+ ) : null; const classes = classNames(rootClassName || css.root, className); const caretClass = classNames(css.caret, { [css.caretWithCarousel]: hasCarousel }); diff --git a/src/components/SearchMapPriceLabel/SearchMapPriceLabel.css b/src/components/SearchMapPriceLabel/SearchMapPriceLabel.css index 7a100c29..b01cad5e 100644 --- a/src/components/SearchMapPriceLabel/SearchMapPriceLabel.css +++ b/src/components/SearchMapPriceLabel/SearchMapPriceLabel.css @@ -64,7 +64,6 @@ } .caret { - /* Caret / arrow dimensions and position */ width: 6px; height: 6px; @@ -82,5 +81,4 @@ border-bottom-style: solid; border-bottom-color: var(--matterColorNegative); border-bottom-width: 1px; - } diff --git a/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js b/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js index 4709dc72..b66a9264 100644 --- a/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js +++ b/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js @@ -30,9 +30,8 @@ class SearchMapPriceLabel extends Component { const { geolocation, price } = currentListing.attributes; // Create formatted price if currency is known or alternatively show just the unknown currency. - const formattedPrice = price && price.currency === config.currency - ? formatMoney(intl, price) - : price.currency; + const formattedPrice = + price && price.currency === config.currency ? formatMoney(intl, price) : price.currency; // Explicit type change to object literal for Google OverlayViews (geolocation is SDK type) const latLngLiteral = { lat: geolocation.lat, lng: geolocation.lng }; @@ -46,9 +45,7 @@ class SearchMapPriceLabel extends Component { > diff --git a/src/components/SearchResultsPanel/SearchResultsPanel.js b/src/components/SearchResultsPanel/SearchResultsPanel.js index 544ce2fc..00e20762 100644 --- a/src/components/SearchResultsPanel/SearchResultsPanel.js +++ b/src/components/SearchResultsPanel/SearchResultsPanel.js @@ -8,14 +8,15 @@ const SearchResultsPanel = props => { const { className, rootClassName, listings, pagination, search } = props; const classes = classNames(rootClassName || css.root, className); - const paginationLinks = pagination && pagination.totalPages > 1 - ? 1 ? ( + - : null; + ) : null; return (
diff --git a/src/components/SelectField/SelectField.css b/src/components/SelectField/SelectField.css index 07bd43cf..0aa58c74 100644 --- a/src/components/SelectField/SelectField.css +++ b/src/components/SelectField/SelectField.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; .root { - } .select { diff --git a/src/components/SelectField/SelectField.example.js b/src/components/SelectField/SelectField.example.js index 74ea6445..a348c25d 100644 --- a/src/components/SelectField/SelectField.example.js +++ b/src/components/SelectField/SelectField.example.js @@ -23,7 +23,9 @@ const FormComponent = props => { - + ); }; diff --git a/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.css b/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.css index 79ebf433..c6b2e1ef 100644 --- a/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.css +++ b/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.css @@ -5,7 +5,6 @@ } .root { - } .input { diff --git a/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.example.js b/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.example.js index b9908cb4..9100ba16 100644 --- a/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.example.js +++ b/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.example.js @@ -20,7 +20,9 @@ const formComponent = country => { formName={form} validate={validators.required(' ')} /> - + ); }; diff --git a/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js b/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js index 5d14f656..88179d72 100644 --- a/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js +++ b/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js @@ -222,14 +222,7 @@ class TokenInputFieldComponent extends Component { } render() { - const { - rootClassName, - className, - country, - formName, - meta: formMeta, - intl, - } = this.props; + const { rootClassName, className, country, formName, meta: formMeta, intl } = this.props; if (!supportedCountries.includes(country)) { return ( @@ -250,16 +243,17 @@ class TokenInputFieldComponent extends Component { // more specific errors. const showingFieldErrors = hasInputErrors; const showStripeError = !!(this.state.stripeError && !showingFieldErrors && formMeta.touched); - const showFormError = !!(formMeta.touched && + const showFormError = !!( + formMeta.touched && formMeta.error && !showingFieldErrors && - !showStripeError); + !showStripeError + ); const inputConfiguration = requiredInputs(country); return (
- {inputConfiguration.map(inputType => { return ( { }); // Print required inputs (to be included to error message) // e.g. "bank code, branch code and account number" - const inputsInString = inputsAsStrings.length > 1 - ? inputsAsStrings.join(', ').replace(/,([^,]*)$/, `${andTranslated} $1`) - : inputsAsStrings[0]; + const inputsInString = + inputsAsStrings.length > 1 + ? inputsAsStrings.join(', ').replace(/,([^,]*)$/, `${andTranslated} $1`) + : inputsAsStrings[0]; return intl.formatMessage( { diff --git a/src/components/TabNav/TabNav.js b/src/components/TabNav/TabNav.js index 49cdcf54..70374b4d 100644 --- a/src/components/TabNav/TabNav.js +++ b/src/components/TabNav/TabNav.js @@ -13,7 +13,9 @@ const Tab = props => { return (
- {text} + + {text} +
); }; diff --git a/src/components/TabNavHorizontal/TabNavHorizontal.js b/src/components/TabNavHorizontal/TabNavHorizontal.js index 65e546b8..41784b4d 100644 --- a/src/components/TabNavHorizontal/TabNavHorizontal.js +++ b/src/components/TabNavHorizontal/TabNavHorizontal.js @@ -27,7 +27,9 @@ const Tab = props => { return (
- {text} + + {text} +
); }; diff --git a/src/components/TextInputField/TextInputField.example.js b/src/components/TextInputField/TextInputField.example.js index ae50ac02..4007f50d 100644 --- a/src/components/TextInputField/TextInputField.example.js +++ b/src/components/TextInputField/TextInputField.example.js @@ -57,7 +57,9 @@ const FormComponent = props => { name="textarea3" placeholder="Textarea without label..." /> - + ); }; diff --git a/src/components/Topbar/SearchIcon.js b/src/components/Topbar/SearchIcon.js index 17d427f5..6fde019b 100644 --- a/src/components/Topbar/SearchIcon.js +++ b/src/components/Topbar/SearchIcon.js @@ -23,7 +23,8 @@ const SearchIcon = props => { strokeLinecap="round" strokeLinejoin="round" > - + + ); diff --git a/src/components/Topbar/Topbar.css b/src/components/Topbar/Topbar.css index de9cd886..edfe7889 100644 --- a/src/components/Topbar/Topbar.css +++ b/src/components/Topbar/Topbar.css @@ -136,7 +136,6 @@ z-index: -1; } - /* ================ Modal ================ */ .modalContainer { diff --git a/src/components/Topbar/Topbar.js b/src/components/Topbar/Topbar.js index 5fc210d5..029c2e92 100644 --- a/src/components/Topbar/Topbar.js +++ b/src/components/Topbar/Topbar.js @@ -101,7 +101,8 @@ class TopbarComponent extends Component { const routes = routeConfiguration(); const whitelistedPaths = VERIFY_EMAIL_MODAL_WHITELIST.map(page => - pathByRouteName(page, routes)); + pathByRouteName(page, routes) + ); const isNotWhitelisted = !whitelistedPaths.includes(newLocation.pathname); // Show reminder @@ -226,11 +227,11 @@ class TopbarComponent extends Component { ) ? 'Topbar.resendFailedTooManyRequests' : 'Topbar.resendFailed'; - const resendErrorMessage = sendVerificationEmailError - ?

- -

- : null; + const resendErrorMessage = sendVerificationEmailError ? ( +

+ +

+ ) : null; const closeButtonMessage = ; const classes = classNames(rootClassName || css.root, className); @@ -322,15 +323,16 @@ class TopbarComponent extends Component {

- {sendVerificationEmailInProgress - ? - : } + {sendVerificationEmailInProgress ? ( + + ) : ( + + )}

-
diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css index 9775046c..dd367ce5 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.css +++ b/src/components/TopbarDesktop/TopbarDesktop.css @@ -113,8 +113,8 @@ } @media (--viewportMedium) { - margin-top: 0; - margin-bottom: 0; + margin-top: 0; + margin-bottom: 0; } } @@ -137,8 +137,8 @@ } @media (--viewportMedium) { - margin-top: 0; - margin-bottom: 0; + margin-top: 0; + margin-bottom: 0; } } diff --git a/src/components/TopbarDesktop/TopbarDesktop.js b/src/components/TopbarDesktop/TopbarDesktop.js index 0fef729c..af74e473 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.js +++ b/src/components/TopbarDesktop/TopbarDesktop.js @@ -46,82 +46,83 @@ const TopbarDesktop = props => { const notificationDot = notificationCount > 0 ?
: null; - const inboxLink = isAuthenticated - ? - - - {notificationDot} - - - : null; + const inboxLink = isAuthenticated ? ( + + + + {notificationDot} + + + ) : null; const currentPageClass = page => { - const isAccountSettingsPage = page === 'AccountSettingsPage' && - ACCOUNT_SETTINGS_PAGES.includes(currentPage); + const isAccountSettingsPage = + page === 'AccountSettingsPage' && ACCOUNT_SETTINGS_PAGES.includes(currentPage); return currentPage === page || isAccountSettingsPage ? css.currentPage : null; }; - const profileMenu = isAuthenticated - ? - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - : null; + const profileMenu = isAuthenticated ? ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) : null; - const signupLink = isAuthenticated - ? null - : - - ; + const signupLink = isAuthenticated ? null : ( + + + + + + ); - const loginLink = isAuthenticated - ? null - : - - ; + const loginLink = isAuthenticated ? null : ( + + + + + + ); return (
diff --git a/src/config.js b/src/config.js index 8f5ac9b8..e6acdfa8 100644 --- a/src/config.js +++ b/src/config.js @@ -5,8 +5,8 @@ const dev = env !== 'production'; // script, react-scripts (and the sharetribe-scripts fork of // react-scripts) require using the REACT_APP_ prefix to avoid // exposing server secrets to the client side. -const sdkClientId = process.env.REACT_APP_SHARETRIBE_SDK_CLIENT_ID || - '08ec69f6-d37e-414d-83eb-324e94afddf0'; +const sdkClientId = + process.env.REACT_APP_SHARETRIBE_SDK_CLIENT_ID || '08ec69f6-d37e-414d-83eb-324e94afddf0'; const sdkBaseUrl = process.env.REACT_APP_SHARETRIBE_SDK_BASE_URL || 'http://localhost:8088'; const currency = process.env.REACT_APP_SHARETRIBE_MARKETPLACE_CURRENCY || 'USD'; @@ -30,8 +30,8 @@ const currencyConfig = { maximumFractionDigits: 2, }; -const stripePublishableKey = process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY || - 'pk_test_FWtdKPZvtrj37t45dIomssBI'; +const stripePublishableKey = + process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY || 'pk_test_FWtdKPZvtrj37t45dIomssBI'; // Stripe only supports payments in certain countries, see full list // at https://stripe.com/global diff --git a/src/containers/AuthenticationPage/AuthenticationPage.css b/src/containers/AuthenticationPage/AuthenticationPage.css index 11f53ef3..5f535fbe 100644 --- a/src/containers/AuthenticationPage/AuthenticationPage.css +++ b/src/containers/AuthenticationPage/AuthenticationPage.css @@ -9,7 +9,6 @@ padding-top: 29px; } - /* ================ Tabs & Form ================ */ .tabs { @@ -43,7 +42,6 @@ text-align: left; } - /* ================ Hide Top bar in screens smaller than 768px ================ */ .hideOnMobile { @@ -54,7 +52,6 @@ } } - /* ================ Close icon ================ */ .verifyClose { @@ -72,10 +69,8 @@ @apply --marketplaceModalCloseIcon; } - /* ================ Typography ================ */ - /* Title of the modal */ .modalTitle { @apply --marketplaceModalTitleStyles; @@ -112,7 +107,6 @@ } } - /* ================ Errors ================ */ .error { diff --git a/src/containers/AuthenticationPage/AuthenticationPage.js b/src/containers/AuthenticationPage/AuthenticationPage.js index 80496be2..f2ed992b 100644 --- a/src/containers/AuthenticationPage/AuthenticationPage.js +++ b/src/containers/AuthenticationPage/AuthenticationPage.js @@ -85,14 +85,16 @@ export const AuthenticationPageComponent = props => { const signupErrorMessage = (
- {isSignupEmailTakenError(signupError) - ? - : } + {isSignupEmailTakenError(signupError) ? ( + + ) : ( + + )}
); // eslint-disable-next-line no-confusing-arrow - const errorMessage = (error, message) => error ? message : null; + const errorMessage = (error, message) => (error ? message : null); const loginOrSignupError = isLogin ? errorMessage(loginError, loginErrorMessage) : errorMessage(signupError, signupErrorMessage); @@ -102,7 +104,9 @@ export const AuthenticationPageComponent = props => { const tabs = [ { text: ( -

+

+ +

), selected: !isLogin, linkProps: { @@ -111,7 +115,11 @@ export const AuthenticationPageComponent = props => { }, }, { - text:

, + text: ( +

+ +

+ ), selected: isLogin, linkProps: { name: 'LoginPage', @@ -124,9 +132,11 @@ export const AuthenticationPageComponent = props => {
{loginOrSignupError} - {isLogin - ? - : } + {isLogin ? ( + + ) : ( + + )}
); @@ -149,11 +159,11 @@ export const AuthenticationPageComponent = props => { ) ? 'AuthenticationPage.resendFailedTooManyRequests' : 'AuthenticationPage.resendFailed'; - const resendErrorMessage = sendVerificationEmailError - ?

- -

- : null; + const resendErrorMessage = sendVerificationEmailError ? ( +

+ +

+ ) : null; const emailVerificationContent = (
@@ -174,15 +184,16 @@ export const AuthenticationPageComponent = props => {

- {sendVerificationEmailInProgress - ? - : } + {sendVerificationEmailInProgress ? ( + + ) : ( + + )}

-
); @@ -243,11 +254,7 @@ AuthenticationPageComponent.propTypes = { const mapStateToProps = state => { const { authInfoError, isAuthenticated, loginError, logoutError, signupError } = state.Auth; - const { - currentUser, - sendVerificationEmailInProgress, - sendVerificationEmailError, - } = state.user; + const { currentUser, sendVerificationEmailInProgress, sendVerificationEmailError } = state.user; return { authInfoError, authInProgress: authenticationInProgress(state), diff --git a/src/containers/BookingDatesForm/BookingDatesForm.js b/src/containers/BookingDatesForm/BookingDatesForm.js index b53dc1a4..37cfb6cc 100644 --- a/src/containers/BookingDatesForm/BookingDatesForm.js +++ b/src/containers/BookingDatesForm/BookingDatesForm.js @@ -155,14 +155,14 @@ export class BookingDatesFormComponent extends Component { const endDateErrorMessage = intl.formatMessage({ id: 'DateRangeInputField.invalidEndDate' }); const hasBookingInfo = startDate && endDate; - const bookingInfo = hasBookingInfo - ?
-

- -

- {estimatedBreakdown(startDate, endDate, unitPrice)} -
- : null; + const bookingInfo = hasBookingInfo ? ( +
+

+ +

+ {estimatedBreakdown(startDate, endDate, unitPrice)} +
+ ) : null; const dateFormatOptions = { weekday: 'short', @@ -172,11 +172,14 @@ export class BookingDatesFormComponent extends Component { const now = moment(); const today = now.startOf('day').toDate(); - const tomorrow = now.startOf('day').add(1, 'days').toDate(); - const startDatePlaceholderText = startDatePlaceholder || - intl.formatDate(today, dateFormatOptions); - const endDatePlaceholderText = endDatePlaceholder || - intl.formatDate(tomorrow, dateFormatOptions); + const tomorrow = now + .startOf('day') + .add(1, 'days') + .toDate(); + const startDatePlaceholderText = + startDatePlaceholder || intl.formatDate(today, dateFormatOptions); + const endDatePlaceholderText = + endDatePlaceholder || intl.formatDate(tomorrow, dateFormatOptions); return (
diff --git a/src/containers/CheckoutPage/CheckoutPage.css b/src/containers/CheckoutPage/CheckoutPage.css index c55dbfb9..ef57f370 100644 --- a/src/containers/CheckoutPage/CheckoutPage.css +++ b/src/containers/CheckoutPage/CheckoutPage.css @@ -12,7 +12,6 @@ /* Dummy Topbar */ .topbar { - /* Size */ width: 100%; height: var(--topbarHeight); @@ -63,7 +62,6 @@ /* /Dummy Topbar */ - /** * Content: mobile flow vs desktop 2 columns * desktop has reduced version of bookListingContainer (incl. title and Stripe paymentForm). diff --git a/src/containers/CheckoutPage/CheckoutPage.duck.js b/src/containers/CheckoutPage/CheckoutPage.duck.js index 99754213..028c8b3d 100644 --- a/src/containers/CheckoutPage/CheckoutPage.duck.js +++ b/src/containers/CheckoutPage/CheckoutPage.duck.js @@ -103,31 +103,30 @@ export const speculateTransactionError = e => ({ /* ================ Thunks ================ */ -export const initiateOrder = params => - (dispatch, getState, sdk) => { - dispatch(initiateOrderRequest()); - const bodyParams = { - transition: 'transition/preauthorize', - params, - }; - return sdk.transactions - .initiate(bodyParams) - .then(response => { - const orderId = response.data.data.id; - dispatch(initiateOrderSuccess(orderId)); - dispatch(fetchCurrentUserHasOrdersSuccess(true)); - return orderId; - }) - .catch(e => { - dispatch(initiateOrderError(e)); - log.error(e, 'initiate-order-failed', { - listingId: params.listingId.uuid, - bookingStart: params.bookingStart, - bookingEnd: params.bookingEnd, - }); - throw e; - }); +export const initiateOrder = params => (dispatch, getState, sdk) => { + dispatch(initiateOrderRequest()); + const bodyParams = { + transition: 'transition/preauthorize', + params, }; + return sdk.transactions + .initiate(bodyParams) + .then(response => { + const orderId = response.data.data.id; + dispatch(initiateOrderSuccess(orderId)); + dispatch(fetchCurrentUserHasOrdersSuccess(true)); + return orderId; + }) + .catch(e => { + dispatch(initiateOrderError(e)); + log.error(e, 'initiate-order-failed', { + listingId: params.listingId.uuid, + bookingStart: params.bookingStart, + bookingEnd: params.bookingEnd, + }); + throw e; + }); +}; /** * Initiate the speculative transaction with the given booking details @@ -141,37 +140,40 @@ export const initiateOrder = params => * pricing info for the booking breakdown to get a proper estimate for * the price with the chosen information. */ -export const speculateTransaction = (listingId, bookingStart, bookingEnd) => - (dispatch, getState, sdk) => { - dispatch(speculateTransactionRequest()); - const bodyParams = { - transition: propTypes.TX_TRANSITION_PREAUTHORIZE, - params: { - listingId, - bookingStart, - bookingEnd, - cardToken: 'CheckoutPage_speculative_card_token', - }, - }; - const queryParams = { - include: ['booking', 'provider'], - expand: true, - }; - return sdk.transactions - .initiateSpeculative(bodyParams, queryParams) - .then(response => { - const transactionId = response.data.data.id; - const entities = updatedEntities({}, response.data); - const denormalised = denormalisedEntities(entities, 'transaction', [transactionId]); - const tx = denormalised[0]; - dispatch(speculateTransactionSuccess(tx)); - }) - .catch(e => { - log.error(e, 'speculate-transaction-failed', { - listingId: listingId.uuid, - bookingStart: bookingStart, - bookingEnd: bookingEnd, - }); - return dispatch(speculateTransactionError(e)); - }); +export const speculateTransaction = (listingId, bookingStart, bookingEnd) => ( + dispatch, + getState, + sdk +) => { + dispatch(speculateTransactionRequest()); + const bodyParams = { + transition: propTypes.TX_TRANSITION_PREAUTHORIZE, + params: { + listingId, + bookingStart, + bookingEnd, + cardToken: 'CheckoutPage_speculative_card_token', + }, }; + const queryParams = { + include: ['booking', 'provider'], + expand: true, + }; + return sdk.transactions + .initiateSpeculative(bodyParams, queryParams) + .then(response => { + const transactionId = response.data.data.id; + const entities = updatedEntities({}, response.data); + const denormalised = denormalisedEntities(entities, 'transaction', [transactionId]); + const tx = denormalised[0]; + dispatch(speculateTransactionSuccess(tx)); + }) + .catch(e => { + log.error(e, 'speculate-transaction-failed', { + listingId: listingId.uuid, + bookingStart: bookingStart, + bookingEnd: bookingEnd, + }); + return dispatch(speculateTransactionError(e)); + }); +}; diff --git a/src/containers/CheckoutPage/CheckoutPage.js b/src/containers/CheckoutPage/CheckoutPage.js index 0db525b7..d3d5aed7 100644 --- a/src/containers/CheckoutPage/CheckoutPage.js +++ b/src/containers/CheckoutPage/CheckoutPage.js @@ -75,7 +75,8 @@ export class CheckoutPageComponent extends Component { storeData(bookingDates, listing, STORAGE_KEY); } - const hasData = pageData && + const hasData = + pageData && pageData.listing && pageData.listing.id && pageData.bookingDates && @@ -140,7 +141,8 @@ export class CheckoutPageComponent extends Component { // initiate or the speculative initiate fail due to the listing // being deleted or closec, we should dig the information from the // errors and not the listing data. - const listingNotFound = isTransactionInitiateListingNotFoundError(speculateTransactionError) || + const listingNotFound = + isTransactionInitiateListingNotFoundError(speculateTransactionError) || isTransactionInitiateListingNotFoundError(initiateOrderError); const isLoading = !this.state.dataLoaded || speculateTransactionInProgress; @@ -151,16 +153,19 @@ export class CheckoutPageComponent extends Component { const currentListing = ensureListing(listing); const currentAuthor = ensureUser(currentListing.author); - const isOwnListing = currentUser && + const isOwnListing = + currentUser && currentUser.id && currentAuthor && currentAuthor.id && currentAuthor.id.uuid === currentUser.id.uuid; const hasListingAndAuthor = !!(currentListing.id && currentAuthor.id); - const hasBookingDates = !!(bookingDates && + const hasBookingDates = !!( + bookingDates && bookingDates.bookingStart && - bookingDates.bookingEnd); + bookingDates.bookingEnd + ); const hasRequiredData = hasListingAndAuthor && hasBookingDates; const canShowPage = hasRequiredData && !isOwnListing; const shouldRedirect = !isLoading && !canShowPage; @@ -179,34 +184,36 @@ export class CheckoutPageComponent extends Component { // Show breakdown only when transaction and booking are loaded // (i.e. have an id) - const breakdown = currentTransaction.id && currentBooking.id - ? - : null; + ) : null; // Allow showing page when currentUser is still being downloaded, // but show payment form only when user info is loaded. - const showPaymentForm = !!(currentUser && + const showPaymentForm = !!( + currentUser && hasRequiredData && !listingNotFound && - !initiateOrderError); + !initiateOrderError + ); const listingTitle = currentListing.attributes.title; const title = intl.formatMessage({ id: 'CheckoutPage.title' }, { listingTitle }); - const firstImage = currentListing.images && currentListing.images.length > 0 - ? currentListing.images[0] - : null; + const firstImage = + currentListing.images && currentListing.images.length > 0 ? currentListing.images[0] : null; - const listingNotFoundErrorMessage = listingNotFound - ?

- -

- : null; + const listingNotFoundErrorMessage = listingNotFound ? ( +

+ +

+ ) : null; const listingLink = ( - -

- : null; + const speculateTransactionErrorMessage = speculateTransactionError ? ( +

+ +

+ ) : null; const topbar = (
@@ -314,15 +321,15 @@ export class CheckoutPageComponent extends Component { {initiateOrderErrorMessage} {listingNotFoundErrorMessage} - {showPaymentForm - ? - : null} + {showPaymentForm ? ( + + ) : null}
@@ -357,7 +364,6 @@ export class CheckoutPageComponent extends Component { {speculateTransactionErrorMessage} {breakdown}
- ); diff --git a/src/containers/ContactDetailsForm/ContactDetailsForm.css b/src/containers/ContactDetailsForm/ContactDetailsForm.css index d1149366..ca0e55be 100644 --- a/src/containers/ContactDetailsForm/ContactDetailsForm.css +++ b/src/containers/ContactDetailsForm/ContactDetailsForm.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; :root { - --infoTextStyles: { @apply --marketplaceH4FontStyles; color: var(--successColor); @@ -21,7 +20,8 @@ } } -.root {} +.root { +} .emailSection { margin-top: 16px; @@ -144,4 +144,3 @@ margin: 24px 0; } } - diff --git a/src/containers/ContactDetailsForm/ContactDetailsForm.js b/src/containers/ContactDetailsForm/ContactDetailsForm.js index 1762b136..72397dcd 100644 --- a/src/containers/ContactDetailsForm/ContactDetailsForm.js +++ b/src/containers/ContactDetailsForm/ContactDetailsForm.js @@ -33,12 +33,9 @@ class ContactDetailsFormComponent extends Component { this.props.onResendVerificationEmail().then(() => { // show "verification email sent" text for a bit longer. - this.emailSentTimeoutId = window.setTimeout( - () => { - this.setState({ showVerificationEmailSentMessage: false }); - }, - SHOW_EMAIL_SENT_TIMEOUT - ); + this.emailSentTimeoutId = window.setTimeout(() => { + this.setState({ showVerificationEmailSentMessage: false }); + }, SHOW_EMAIL_SENT_TIMEOUT); }); } @@ -196,11 +193,12 @@ class ContactDetailsFormComponent extends Component { [css.confirmChangesSectionVisible]: !pristine, }); - const genericFailure = changeEmailError && !(emailTakenErrorText || passwordErrorText) - ? + const genericFailure = + changeEmailError && !(emailTakenErrorText || passwordErrorText) ? ( + - : null; + ) : null; const classes = classNames(rootClassName || css.root, className); const submitDisabled = invalid || submitting || inProgress; diff --git a/src/containers/ContactDetailsPage/ContactDetailsPage.css b/src/containers/ContactDetailsPage/ContactDetailsPage.css index 93b731b5..30d830f8 100644 --- a/src/containers/ContactDetailsPage/ContactDetailsPage.css +++ b/src/containers/ContactDetailsPage/ContactDetailsPage.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; .content { - @media (--viewportMedium) { margin: 32px auto 0 auto; max-width: 564px; @@ -10,7 +9,6 @@ @media (--viewportLarge) { margin: 0; } - } .desktopTopbar, diff --git a/src/containers/ContactDetailsPage/ContactDetailsPage.duck.js b/src/containers/ContactDetailsPage/ContactDetailsPage.duck.js index 57715459..6930929a 100644 --- a/src/containers/ContactDetailsPage/ContactDetailsPage.duck.js +++ b/src/containers/ContactDetailsPage/ContactDetailsPage.duck.js @@ -53,17 +53,16 @@ export const changeEmailClear = () => ({ type: CHANGE_EMAIL_CLEAR }); // ================ Thunks ================ // -export const changeEmail = params => - (dispatch, getState, sdk) => { - dispatch(changeEmailRequest()); - const { email, currentPassword } = params; +export const changeEmail = params => (dispatch, getState, sdk) => { + dispatch(changeEmailRequest()); + const { email, currentPassword } = params; - return sdk.currentUser - .changeEmail({ email, currentPassword }, { expand: true }) - .then(response => { - const currentUser = response.data.data; - dispatch(changeEmailSuccess()); - dispatch(currentUserShowSuccess(currentUser)); - }) - .catch(e => dispatch(changeEmailError(e))); - }; + return sdk.currentUser + .changeEmail({ email, currentPassword }, { expand: true }) + .then(response => { + const currentUser = response.data.data; + dispatch(changeEmailSuccess()); + dispatch(currentUserShowSuccess(currentUser)); + }) + .catch(e => dispatch(changeEmailError(e))); +}; diff --git a/src/containers/ContactDetailsPage/ContactDetailsPage.js b/src/containers/ContactDetailsPage/ContactDetailsPage.js index ed3dbf11..2b1270e4 100644 --- a/src/containers/ContactDetailsPage/ContactDetailsPage.js +++ b/src/containers/ContactDetailsPage/ContactDetailsPage.js @@ -55,21 +55,21 @@ export const ContactDetailsPageComponent = props => { const user = ensureCurrentUser(currentUser); const email = user.attributes.email || ''; - const changeEmailForm = user.id - ? - : null; + const changeEmailForm = user.id ? ( + + ) : null; return ( { // Page needs authInfoError and logoutError, Topbar needs isAuthenticated const { authInfoError, isAuthenticated, logoutError } = state.Auth; // Topbar needs user info. - const { - currentUser, - sendVerificationEmailInProgress, - sendVerificationEmailError, - } = state.user; + const { currentUser, sendVerificationEmailInProgress, sendVerificationEmailError } = state.user; const { changeEmailError, changeEmailInProgress, emailChanged } = state.ContactDetailsPage; return { authInfoError, diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js index b68b5fec..0779743f 100644 --- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js +++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js @@ -48,11 +48,11 @@ const EditListingDescriptionFormComponent = props => { id: 'EditListingDescriptionForm.descriptionRequired', }); - const errorMessage = updateError - ?

- -

- : null; + const errorMessage = updateError ? ( +

+ +

+ ) : null; const classes = classNames(css.root, className); const submitReady = updated; diff --git a/src/containers/EditListingLocationForm/EditListingLocationForm.css b/src/containers/EditListingLocationForm/EditListingLocationForm.css index 01788633..e182bf83 100644 --- a/src/containers/EditListingLocationForm/EditListingLocationForm.css +++ b/src/containers/EditListingLocationForm/EditListingLocationForm.css @@ -64,4 +64,3 @@ margin-top: 100px; } } - diff --git a/src/containers/EditListingLocationForm/EditListingLocationForm.js b/src/containers/EditListingLocationForm/EditListingLocationForm.js index e50da3f2..425263aa 100644 --- a/src/containers/EditListingLocationForm/EditListingLocationForm.js +++ b/src/containers/EditListingLocationForm/EditListingLocationForm.js @@ -41,11 +41,11 @@ export const EditListingLocationFormComponent = props => { id: 'EditListingLocationForm.buildingPlaceholder', }); - const errorMessage = updateError - ?

- -

- : null; + const errorMessage = updateError ? ( +

+ +

+ ) : null; const classes = classNames(css.root, className); const submitReady = updated; diff --git a/src/containers/EditListingPage/EditListingPage.js b/src/containers/EditListingPage/EditListingPage.js index 2a2581cf..77124b2d 100644 --- a/src/containers/EditListingPage/EditListingPage.js +++ b/src/containers/EditListingPage/EditListingPage.js @@ -27,14 +27,7 @@ import { import css from './EditListingPage.css'; const formatRequestData = values => { - const { - address, - description, - images, - geolocation, - price, - title, - } = values; + const { address, description, images, geolocation, price, title } = values; return { address, @@ -224,11 +217,7 @@ EditListingPageComponent.propTypes = { const mapStateToProps = state => { const page = state.EditListingPage; const { authInfoError, logoutError } = state.Auth; - const { - createStripeAccountInProgress, - createStripeAccountError, - currentUser, - } = state.user; + const { createStripeAccountInProgress, createStripeAccountError, currentUser } = state.user; const fetchInProgress = createStripeAccountInProgress; diff --git a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css index ec185bea..920e8fcb 100644 --- a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css +++ b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css @@ -39,7 +39,7 @@ overflow: hidden; &::after { - content: "."; + content: '.'; visibility: hidden; display: block; height: 0; @@ -111,8 +111,8 @@ font-weight: var(--fontWeightSemiBold); margin-top: 0; margin-bottom: 0; - } - } + } +} .imageTypes { @apply --marketplaceTinyFontStyles; @@ -124,7 +124,7 @@ @media (--viewportLarge) { margin-top: 0; margin-bottom: 0; - } + } } .addImageInput { diff --git a/src/containers/EditListingPhotosForm/EditListingPhotosForm.js b/src/containers/EditListingPhotosForm/EditListingPhotosForm.js index 13d6ce92..afbfdd8f 100644 --- a/src/containers/EditListingPhotosForm/EditListingPhotosForm.js +++ b/src/containers/EditListingPhotosForm/EditListingPhotosForm.js @@ -22,7 +22,9 @@ const RenderAddImage = props => {
{disabled ? null : } - +
); @@ -129,32 +131,29 @@ export class EditListingPhotosFormComponent extends Component { } // Create and show listing errors are shown above submit button - const createListingFailed = createListingsError - ?

- -

- : null; - const showListingFailed = showListingsError - ?

- -

- : null; + const createListingFailed = createListingsError ? ( +

+ +

+ ) : null; + const showListingFailed = showListingsError ? ( +

+ +

+ ) : null; - const errorMessage = updateError - ?

- -

- : null; + const errorMessage = updateError ? ( +

+ +

+ ) : null; const classes = classNames(css.root, className); const submitReady = updated || ready; const submitInProgress = submitting || updateInProgress; - const submitDisabled = invalid || - disabled || - submitInProgress || - this.state.imageUploadRequested || - ready; + const submitDisabled = + invalid || disabled || submitInProgress || this.state.imageUploadRequested || ready; return ( diff --git a/src/containers/EditListingPricingForm/EditListingPricingForm.js b/src/containers/EditListingPricingForm/EditListingPricingForm.js index 4a44f6d0..4ade5caf 100644 --- a/src/containers/EditListingPricingForm/EditListingPricingForm.js +++ b/src/containers/EditListingPricingForm/EditListingPricingForm.js @@ -29,11 +29,11 @@ export const EditListingPricingFormComponent = props => { id: 'EditListingPricingForm.priceInputPlaceholder', }); - const errorMessage = updateError - ?

- -

- : null; + const errorMessage = updateError ? ( +

+ +

+ ) : null; const classes = classNames(css.root, className); const submitReady = updated; diff --git a/src/containers/EmailVerificationForm/EmailVerificationForm.css b/src/containers/EmailVerificationForm/EmailVerificationForm.css index 4e0a0656..eabfd74c 100644 --- a/src/containers/EmailVerificationForm/EmailVerificationForm.css +++ b/src/containers/EmailVerificationForm/EmailVerificationForm.css @@ -8,7 +8,6 @@ @apply --marketplaceModalBottomWrapper; } - /* ================ Typography ================ */ /* Title of the modal */ diff --git a/src/containers/EmailVerificationForm/EmailVerificationForm.js b/src/containers/EmailVerificationForm/EmailVerificationForm.js index 9a1a4ff1..95f61112 100644 --- a/src/containers/EmailVerificationForm/EmailVerificationForm.js +++ b/src/containers/EmailVerificationForm/EmailVerificationForm.js @@ -14,13 +14,7 @@ import * as propTypes from '../../util/propTypes'; import css from './EmailVerificationForm.css'; const EmailVerificationFormComponent = props => { - const { - currentUser, - submitting, - inProgress, - handleSubmit, - verificationError, - } = props; + const { currentUser, submitting, inProgress, handleSubmit, verificationError } = props; const { email, emailVerified, pendingEmail, profile } = currentUser.attributes; const emailToVerify = {pendingEmail || email}; @@ -51,7 +45,6 @@ const EmailVerificationFormComponent = props => {

{verificationError ? errorMessage : null} - @@ -59,12 +52,12 @@ const EmailVerificationFormComponent = props => {
- - {submitting || inProgress - ? - : } + {submitting || inProgress ? ( + + ) : ( + + )} -
@@ -81,7 +74,6 @@ const EmailVerificationFormComponent = props => {

-
diff --git a/src/containers/EmailVerificationPage/EmailVerificationPage.js b/src/containers/EmailVerificationPage/EmailVerificationPage.js index 3879f79a..9ac9e366 100644 --- a/src/containers/EmailVerificationPage/EmailVerificationPage.js +++ b/src/containers/EmailVerificationPage/EmailVerificationPage.js @@ -62,19 +62,19 @@ export const EmailVerificationPageComponent = props => {
- - {currentUser - ? - : } + {currentUser ? ( + + ) : ( + + )}
- ); }; diff --git a/src/containers/InboxPage/InboxPage.css b/src/containers/InboxPage/InboxPage.css index e9603f11..47b10745 100644 --- a/src/containers/InboxPage/InboxPage.css +++ b/src/containers/InboxPage/InboxPage.css @@ -49,13 +49,11 @@ } .content { - /* Expand to the full remaining width of the viewport */ flex: 1; display: flex; flex-direction: column; - @media (--viewportLarge) { padding: 118px 15vw 82px 82px; background-color: var(--matterColorLight); @@ -70,7 +68,6 @@ } .navigation { - /* Layout */ display: flex; flex-direction: row; @@ -102,7 +99,6 @@ } .title { - /* Font */ @apply --marketplaceH1FontStyles; color: var(--matterColor); @@ -111,7 +107,6 @@ margin-top: 0; margin-bottom: 0; - @media (--viewportMedium) { padding-bottom: 10px; margin-top: 0; @@ -380,7 +375,7 @@ color: var(--matterColor); margin-top: 4px; - @media (var--viewportMedium) { + @media (var--viewportmedium) { margin-top: 9px; } } diff --git a/src/containers/InboxPage/InboxPage.duck.js b/src/containers/InboxPage/InboxPage.duck.js index daba0363..73ef5777 100644 --- a/src/containers/InboxPage/InboxPage.duck.js +++ b/src/containers/InboxPage/InboxPage.duck.js @@ -70,46 +70,39 @@ const fetchOrdersOrSalesError = e => ({ const INBOX_PAGE_SIZE = 10; -export const loadData = (params, search) => - (dispatch, getState, sdk) => { - const { tab } = params; +export const loadData = (params, search) => (dispatch, getState, sdk) => { + const { tab } = params; - const onlyFilterValues = { - orders: 'order', - sales: 'sale', - }; - - const onlyFilter = onlyFilterValues[tab]; - if (!onlyFilter) { - return Promise.reject(new Error(`Invalid tab for InboxPage: ${tab}`)); - } - - dispatch(fetchOrdersOrSalesRequest()); - - const { page = 1 } = parse(search); - - const apiQueryParams = { - only: onlyFilter, - include: [ - 'provider', - 'provider.profileImage', - 'customer', - 'customer.profileImage', - 'booking', - ], - page, - per_page: INBOX_PAGE_SIZE, - }; - - return sdk.transactions - .query(apiQueryParams) - .then(response => { - dispatch(addMarketplaceEntities(response)); - dispatch(fetchOrdersOrSalesSuccess(response)); - return response; - }) - .catch(e => { - dispatch(fetchOrdersOrSalesError(e)); - throw e; - }); + const onlyFilterValues = { + orders: 'order', + sales: 'sale', }; + + const onlyFilter = onlyFilterValues[tab]; + if (!onlyFilter) { + return Promise.reject(new Error(`Invalid tab for InboxPage: ${tab}`)); + } + + dispatch(fetchOrdersOrSalesRequest()); + + const { page = 1 } = parse(search); + + const apiQueryParams = { + only: onlyFilter, + include: ['provider', 'provider.profileImage', 'customer', 'customer.profileImage', 'booking'], + page, + per_page: INBOX_PAGE_SIZE, + }; + + return sdk.transactions + .query(apiQueryParams) + .then(response => { + dispatch(addMarketplaceEntities(response)); + dispatch(fetchOrdersOrSalesSuccess(response)); + return response; + }) + .catch(e => { + dispatch(fetchOrdersOrSalesError(e)); + throw e; + }); +}; diff --git a/src/containers/InboxPage/InboxPage.js b/src/containers/InboxPage/InboxPage.js index a0155bd7..e1dce82c 100644 --- a/src/containers/InboxPage/InboxPage.js +++ b/src/containers/InboxPage/InboxPage.js @@ -128,9 +128,7 @@ export const InboxItem = props => {
-
- {rowNotificationDot} -
+
{rowNotificationDot}
{otherUserDisplayName} @@ -194,40 +192,45 @@ export const InboxPageComponent = props => { ); }; - const error = fetchOrdersOrSalesError - ?

- -

- : null; + const error = fetchOrdersOrSalesError ? ( +

+ +

+ ) : null; - const noResults = !fetchInProgress && transactions.length === 0 && !fetchOrdersOrSalesError - ?
  • + const noResults = + !fetchInProgress && transactions.length === 0 && !fetchOrdersOrSalesError ? ( +
    • - : null; + ) : null; const hasOrderOrSaleTransactions = (tx, isOrdersTab, user) => { return isOrdersTab ? tx && tx.length > 0 && tx[0].customer.id.uuid === user.id.uuid : tx && tx.length > 0 && tx[0].provider.id.uuid === user.id.uuid; }; - const hasTransactions = !fetchInProgress && - hasOrderOrSaleTransactions(transactions, isOrders, currentUser); - const pagingLinks = hasTransactions && pagination && pagination.totalPages > 1 - ? 1 ? ( + - : null; + ) : null; - const providerNotificationBadge = providerNotificationCount > 0 - ? - : null; + const providerNotificationBadge = + providerNotificationCount > 0 ? : null; const tabs = [ { - text: , + text: ( + + + + ), selected: isOrders, linkProps: { name: 'InboxPage', @@ -236,7 +239,10 @@ export const InboxPageComponent = props => { }, { text: ( - {providerNotificationBadge} + + + {providerNotificationBadge} + ), selected: !isOrders, linkProps: { @@ -311,17 +317,9 @@ InboxPageComponent.propTypes = { }; const mapStateToProps = state => { - const { - fetchInProgress, - fetchOrdersOrSalesError, - pagination, - transactionRefs, - } = state.InboxPage; + const { fetchInProgress, fetchOrdersOrSalesError, pagination, transactionRefs } = state.InboxPage; const { authInfoError, logoutError } = state.Auth; - const { - currentUser, - currentUserNotificationCount: providerNotificationCount, - } = state.user; + const { currentUser, currentUserNotificationCount: providerNotificationCount } = state.user; return { authInfoError, currentUser, diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css index f194ee40..ed4d75dc 100644 --- a/src/containers/LandingPage/LandingPage.css +++ b/src/containers/LandingPage/LandingPage.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; .root { - } /* heroContainer gives the height for HeroSection */ @@ -14,11 +13,11 @@ @media (--viewportMedium) { min-height: calc(100vh - var(--topbarHeightDesktop)); - border: solid 24px #FFF; + border: solid 24px #fff; } @media (--viewportLarge) { - border: solid 36px #FFF; + border: solid 36px #fff; } } diff --git a/src/containers/LandingPage/LandingPage.js b/src/containers/LandingPage/LandingPage.js index 812c160c..ee852b5b 100644 --- a/src/containers/LandingPage/LandingPage.js +++ b/src/containers/LandingPage/LandingPage.js @@ -13,14 +13,7 @@ import twitterImage from '../../assets/saunatimeTwitter-600x314.jpg'; import css from './LandingPage.css'; export const LandingPageComponent = props => { - const { - authInfoError, - history, - intl, - location, - logoutError, - scrollingDisabled, - } = props; + const { authInfoError, history, intl, location, logoutError, scrollingDisabled } = props; // Schema for search engines (helps them to understand what this page is about) // http://schema.org @@ -41,8 +34,7 @@ export const LandingPageComponent = props => { title={schemaTitle} facebookImages={[{ url: facebookImage, width: 1200, height: 630 }]} twitterImages={[{ url: twitterImage, width: 600, height: 314 }]} - schema={ - ` + schema={` { "@context": "http://schema.org", "@type": "WebPage", @@ -52,8 +44,7 @@ export const LandingPageComponent = props => { "${schemaImage}" ] } - ` - } + `} >
    diff --git a/src/containers/ListingPage/EditIcon.js b/src/containers/ListingPage/EditIcon.js index 6ff5ce80..51bce939 100644 --- a/src/containers/ListingPage/EditIcon.js +++ b/src/containers/ListingPage/EditIcon.js @@ -22,9 +22,7 @@ const EditIcon = props => { - + diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index f6951661..e015703e 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/src/containers/ListingPage/ListingPage.css @@ -96,7 +96,7 @@ } .editIcon { - margin: -6px 7px 0 0 ; + margin: -6px 7px 0 0; } .rootForImage { @@ -280,7 +280,6 @@ } } - .heading { margin-bottom: 33px; padding: 0 24px; @@ -405,7 +404,7 @@ /* Contain repainting to this component only */ /* 3D painting container helps scrolling */ - transform: translate3d(0,0,0); + transform: translate3d(0, 0, 0); @media (--viewportMedium) { padding: 18px 60px 18px 60px; @@ -453,7 +452,6 @@ } .modalInMobile { - @media (--viewportLarge) { display: block; margin-top: 87px; diff --git a/src/containers/ListingPage/ListingPage.duck.js b/src/containers/ListingPage/ListingPage.duck.js index 96bfea08..f41607d7 100644 --- a/src/containers/ListingPage/ListingPage.duck.js +++ b/src/containers/ListingPage/ListingPage.duck.js @@ -40,17 +40,16 @@ export const showListingError = e => ({ payload: e, }); -export const showListing = listingId => - (dispatch, getState, sdk) => { - dispatch(showListingRequest(listingId)); - dispatch(fetchCurrentUser()); - return sdk.listings - .show({ id: listingId, include: ['author', 'author.profileImage', 'images'] }) - .then(data => { - dispatch(addMarketplaceEntities(data)); - return data; - }) - .catch(e => { - dispatch(showListingError(e)); - }); - }; +export const showListing = listingId => (dispatch, getState, sdk) => { + dispatch(showListingRequest(listingId)); + dispatch(fetchCurrentUser()); + return sdk.listings + .show({ id: listingId, include: ['author', 'author.profileImage', 'images'] }) + .then(data => { + dispatch(addMarketplaceEntities(data)); + return data; + }) + .catch(e => { + dispatch(showListingError(e)); + }); +}; diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index 57ff782e..42dc6fc6 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -53,11 +53,7 @@ const priceData = (price, intl) => { }; export const ActionBar = props => { - const { - isOwnListing, - isClosed, - editParams, - } = props; + const { isOwnListing, isClosed, editParams } = props; if (isOwnListing) { return ( @@ -215,19 +211,19 @@ export class ListingPageComponent extends Component { imageCarouselOpen: true, }); }; - const viewPhotosButton = hasImages - ? - : null; + const viewPhotosButton = hasImages ? ( + + ) : null; const authorAvailable = currentListing && currentListing.author; const userAndListingAuthorAvailable = !!(currentUser && authorAvailable); - const isOwnListing = userAndListingAuthorAvailable && - currentListing.author.id.uuid === currentUser.id.uuid; + const isOwnListing = + userAndListingAuthorAvailable && currentListing.author.id.uuid === currentUser.id.uuid; const currentAuthor = ensureUser(authorAvailable ? currentListing.author : {}); const currentAuthorDisplayName = currentAuthor.attributes.profile.displayName; @@ -238,14 +234,16 @@ export class ListingPageComponent extends Component { const bookBtnMessage = intl.formatMessage({ id: 'ListingPage.ctaButtonMessage' }); const { formattedPrice, priceTitle } = priceData(price, intl); - const map = geolocation - ?
    -

    - -

    -
    + const map = geolocation ? ( +
    +

    + +

    +
    +
    - : null; +
    + ) : null; const showClosedListingHelpText = currentListing.id && currentListing.attributes.closed; const bookingHeading = ( @@ -289,15 +287,15 @@ export class ListingPageComponent extends Component { // Action bar is wrapped with a div that prevents the click events // to the parent that would otherwise open the image carousel - const actionBar = currentListing.id - ?
    e.stopPropagation()}> - -
    - : null; + const actionBar = currentListing.id ? ( +
    e.stopPropagation()}> + +
    + ) : null; const facebookImages = hasImages ? currentListing.images.map(image => { @@ -336,8 +334,7 @@ export class ListingPageComponent extends Component { facebookImages={facebookImages} twitterImages={twitterImages} canonicalPath={canonicalPath} - schema={ - ` + schema={` { "@context": "http://schema.org", "@type": "ItemPage", @@ -345,8 +342,7 @@ export class ListingPageComponent extends Component { "name": "${schemaTitle}", "image": ${schemaImages} } - ` - } + `} > {topbar}
    @@ -441,14 +437,14 @@ export class ListingPageComponent extends Component {
    {bookingHeading} - {!currentListing.attributes.closed - ? - : null} + {!currentListing.attributes.closed ? ( + + ) : null}
    @@ -460,13 +456,15 @@ export class ListingPageComponent extends Component {
    - {!currentListing.attributes.closed - ? - :
    - -
    } + {!currentListing.attributes.closed ? ( + + ) : ( +
    + +
    + )}
    diff --git a/src/containers/LoginForm/LoginForm.js b/src/containers/LoginForm/LoginForm.js index 3f463292..1f38115a 100644 --- a/src/containers/LoginForm/LoginForm.js +++ b/src/containers/LoginForm/LoginForm.js @@ -60,7 +60,6 @@ const LoginFormComponent = props => { return (
    -
    ({ }); // Throwing error for new (loadData may need that info) -export const queryOwnListings = queryParams => - (dispatch, getState, sdk) => { - dispatch(queryListingsRequest(queryParams)); +export const queryOwnListings = queryParams => (dispatch, getState, sdk) => { + dispatch(queryListingsRequest(queryParams)); - const { include = [], page, perPage } = queryParams; + const { include = [], page, perPage } = queryParams; - // TODO: API can't handle camelCase request parameter yet. - return sdk.listings - .queryOwn({ include, page, per_page: perPage }) - .then(response => { - dispatch(addOwnEntities(response)); - dispatch(queryListingsSuccess(response)); - return response; - }) - .catch(e => { - dispatch(queryListingsError(e)); - throw e; - }); - }; + // TODO: API can't handle camelCase request parameter yet. + return sdk.listings + .queryOwn({ include, page, per_page: perPage }) + .then(response => { + dispatch(addOwnEntities(response)); + dispatch(queryListingsSuccess(response)); + return response; + }) + .catch(e => { + dispatch(queryListingsError(e)); + throw e; + }); +}; -export const closeListing = listingId => - (dispatch, getState, sdk) => { - dispatch(closeListingRequest(listingId)); +export const closeListing = listingId => (dispatch, getState, sdk) => { + dispatch(closeListingRequest(listingId)); - return sdk.listings - .close({ id: listingId }, { expand: true }) - .then(response => { - dispatch(closeListingSuccess(response)); - return response; - }) - .catch(e => { - dispatch(closeListingError(e)); - }); - }; + return sdk.listings + .close({ id: listingId }, { expand: true }) + .then(response => { + dispatch(closeListingSuccess(response)); + return response; + }) + .catch(e => { + dispatch(closeListingError(e)); + }); +}; -export const openListing = listingId => - (dispatch, getState, sdk) => { - dispatch(openListingRequest(listingId)); +export const openListing = listingId => (dispatch, getState, sdk) => { + dispatch(openListingRequest(listingId)); - return sdk.listings - .open({ id: listingId }, { expand: true }) - .then(response => { - dispatch(openListingSuccess(response)); - return response; - }) - .catch(e => { - dispatch(openListingError(e)); - }); - }; + return sdk.listings + .open({ id: listingId }, { expand: true }) + .then(response => { + dispatch(openListingSuccess(response)); + return response; + }) + .catch(e => { + dispatch(openListingError(e)); + }); +}; diff --git a/src/containers/ManageListingsPage/ManageListingsPage.js b/src/containers/ManageListingsPage/ManageListingsPage.js index 8955880e..cf28a4f7 100644 --- a/src/containers/ManageListingsPage/ManageListingsPage.js +++ b/src/containers/ManageListingsPage/ManageListingsPage.js @@ -68,30 +68,35 @@ export class ManageListingsPageComponent extends Component { ); - const noResults = listingsAreLoaded && pagination.totalItems === 0 - ?

    + const noResults = + listingsAreLoaded && pagination.totalItems === 0 ? ( +

    - : null; + ) : null; - const title = listingsAreLoaded && pagination.totalItems > 0 - ?

    + const title = + listingsAreLoaded && pagination.totalItems > 0 ? ( +

    - : noResults; + ) : ( + noResults + ); const page = queryParams ? queryParams.page : 1; - const paginationLinks = listingsAreLoaded && pagination && pagination.totalPages > 1 - ? 1 ? ( + - : null; + ) : null; const listingMenuOpen = this.state.listingMenuOpen; const closingErrorListingId = !!closingListingError && closingListingError.listingId; @@ -128,7 +133,6 @@ export class ManageListingsPageComponent extends Component {
    {paginationLinks}
    - ); } diff --git a/src/containers/NotFoundPage/NotFoundPage.css b/src/containers/NotFoundPage/NotFoundPage.css index 935d327e..4873d051 100644 --- a/src/containers/NotFoundPage/NotFoundPage.css +++ b/src/containers/NotFoundPage/NotFoundPage.css @@ -20,7 +20,6 @@ @media (--viewportMedium) { margin-top: 10vh; } - } .number { diff --git a/src/containers/NotFoundPage/NotFoundPage.js b/src/containers/NotFoundPage/NotFoundPage.js index 2e406433..bc3f809f 100644 --- a/src/containers/NotFoundPage/NotFoundPage.js +++ b/src/containers/NotFoundPage/NotFoundPage.js @@ -21,13 +21,7 @@ export class NotFoundPageComponent extends Component { } render() { - const { - authInfoError, - history, - logoutError, - intl, - scrollingDisabled, - } = this.props; + const { authInfoError, history, logoutError, intl, scrollingDisabled } = this.props; const title = intl.formatMessage({ id: 'NotFoundPage.title', diff --git a/src/containers/OrderPage/OrderPage.duck.js b/src/containers/OrderPage/OrderPage.duck.js index d65bbbf8..dbb905d0 100644 --- a/src/containers/OrderPage/OrderPage.duck.js +++ b/src/containers/OrderPage/OrderPage.duck.js @@ -46,51 +46,49 @@ const listingRelationship = txResponse => { return txResponse.data.data.relationships.listing.data; }; -export const fetchOrder = id => - (dispatch, getState, sdk) => { - dispatch(fetchOrderRequest()); +export const fetchOrder = id => (dispatch, getState, sdk) => { + dispatch(fetchOrderRequest()); - let txResponse = null; + let txResponse = null; - return sdk.transactions - .show({ id, include: ['customer', 'provider', 'listing', 'booking'] }, { expand: true }) - .then(response => { - txResponse = response; - const listingId = listingRelationship(response).id; - const entities = updatedEntities({}, response.data); - const denormalised = denormalisedEntities(entities, 'listing', [listingId]); - const listing = denormalised[0]; + return sdk.transactions + .show({ id, include: ['customer', 'provider', 'listing', 'booking'] }, { expand: true }) + .then(response => { + txResponse = response; + const listingId = listingRelationship(response).id; + const entities = updatedEntities({}, response.data); + const denormalised = denormalisedEntities(entities, 'listing', [listingId]); + const listing = denormalised[0]; - const canFetchListing = listing && listing.attributes && !listing.attributes.deleted; - - if (canFetchListing) { - return sdk.listings.show({ - id: listingId, - include: ['author', 'author.profileImage', 'images'], - }); - } else { - return response; - } - }) - .then(response => { - dispatch(addMarketplaceEntities(txResponse)); - dispatch(addMarketplaceEntities(response)); - dispatch(fetchOrderSuccess(txResponse)); + const canFetchListing = listing && listing.attributes && !listing.attributes.deleted; + if (canFetchListing) { + return sdk.listings.show({ + id: listingId, + include: ['author', 'author.profileImage', 'images'], + }); + } else { return response; - }) - .catch(e => { - dispatch(fetchOrderError(e)); - throw e; - }); - }; + } + }) + .then(response => { + dispatch(addMarketplaceEntities(txResponse)); + dispatch(addMarketplaceEntities(response)); + dispatch(fetchOrderSuccess(txResponse)); + + return response; + }) + .catch(e => { + dispatch(fetchOrderError(e)); + throw e; + }); +}; // 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 orderId = new types.UUID(params.id); +export const loadData = params => dispatch => { + const orderId = new types.UUID(params.id); - // Order (i.e. transaction entity in API, but from buyers perspective) contains order details - return dispatch(fetchOrder(orderId)); - }; + // Order (i.e. transaction entity in API, but from buyers perspective) contains order details + return dispatch(fetchOrder(orderId)); +}; diff --git a/src/containers/OrderPage/OrderPage.js b/src/containers/OrderPage/OrderPage.js index 5fb50762..f3575886 100644 --- a/src/containers/OrderPage/OrderPage.js +++ b/src/containers/OrderPage/OrderPage.js @@ -31,7 +31,8 @@ export const OrderPageComponent = props => { const listingTitle = currentListing.attributes.title; // Redirect users with someone else's direct link to their own inbox/orders page. - const isDataAvailable = currentUser && + const isDataAvailable = + currentUser && currentTransaction.id && currentTransaction.id.uuid === params.id && currentTransaction.customer && @@ -47,13 +48,22 @@ export const OrderPageComponent = props => { [css.tabContentVisible]: props.tab === 'details', }); - const loadingOrFaildFetching = fetchOrderError - ?

    - :

    ; + const loadingOrFaildFetching = fetchOrderError ? ( +

    + +

    + ) : ( +

    + +

    + ); - const panel = isDataAvailable && currentTransaction.id - ? - : loadingOrFaildFetching; + const panel = + isDataAvailable && currentTransaction.id ? ( + + ) : ( + loadingOrFaildFetching + ); return ( + const genericFailure = + changePasswordError && !passwordErrorText ? ( + - : null; + ) : null; const classes = classNames(rootClassName || css.root, className); const submitDisabled = invalid || submitting || inProgress; diff --git a/src/containers/PasswordChangePage/PasswordChangePage.css b/src/containers/PasswordChangePage/PasswordChangePage.css index 93b731b5..30d830f8 100644 --- a/src/containers/PasswordChangePage/PasswordChangePage.css +++ b/src/containers/PasswordChangePage/PasswordChangePage.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; .content { - @media (--viewportMedium) { margin: 32px auto 0 auto; max-width: 564px; @@ -10,7 +9,6 @@ @media (--viewportLarge) { margin: 0; } - } .desktopTopbar, diff --git a/src/containers/PasswordChangePage/PasswordChangePage.duck.js b/src/containers/PasswordChangePage/PasswordChangePage.duck.js index 6ee1600e..a93b9384 100644 --- a/src/containers/PasswordChangePage/PasswordChangePage.duck.js +++ b/src/containers/PasswordChangePage/PasswordChangePage.duck.js @@ -51,18 +51,17 @@ export const changePasswordClear = () => ({ type: CHANGE_PASSWORD_CLEAR }); // ================ Thunks ================ // -export const changePassword = params => - (dispatch, getState, sdk) => { - dispatch(changePasswordRequest()); - const { newPassword, currentPassword } = params; +export const changePassword = params => (dispatch, getState, sdk) => { + dispatch(changePasswordRequest()); + const { newPassword, currentPassword } = params; - return sdk.currentUser - .changePassword({ newPassword, currentPassword }) - .then(() => dispatch(changePasswordSuccess())) - .catch(e => { - dispatch(changePasswordError(e)); - // This is thrown so that form can be cleared - // after a timeout on changePassword submit handler - throw e; - }); - }; + return sdk.currentUser + .changePassword({ newPassword, currentPassword }) + .then(() => dispatch(changePasswordSuccess())) + .catch(e => { + dispatch(changePasswordError(e)); + // This is thrown so that form can be cleared + // after a timeout on changePassword submit handler + throw e; + }); +}; diff --git a/src/containers/PasswordChangePage/PasswordChangePage.js b/src/containers/PasswordChangePage/PasswordChangePage.js index ae582718..4a2f7ae1 100644 --- a/src/containers/PasswordChangePage/PasswordChangePage.js +++ b/src/containers/PasswordChangePage/PasswordChangePage.js @@ -48,8 +48,9 @@ export const PasswordChangePageComponent = props => { }, ]; - const changePasswordForm = currentUser && currentUser.id - ? { inProgress={changePasswordInProgress} ready={passwordChanged} /> - : null; + ) : null; return ( {
    - ); }; diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js index a2ec3b7c..59e6ad59 100644 --- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js +++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.duck.js @@ -69,12 +69,11 @@ export const clearPasswordRecoveryError = () => ({ type: CLEAR_RECOVERY_ERROR }) // ================ Thunks ================ // -export const recoverPassword = email => - (dispatch, getState, sdk) => { - dispatch(passwordRecoveryRequest()); +export const recoverPassword = email => (dispatch, getState, sdk) => { + dispatch(passwordRecoveryRequest()); - return sdk.passwordReset - .request({ email }) - .then(() => dispatch(passwordRecoverySuccess(email))) - .catch(error => dispatch(passwordRecoveryError(error, email))); - }; + return sdk.passwordReset + .request({ email }) + .then(() => dispatch(passwordRecoverySuccess(email))) + .catch(error => dispatch(passwordRecoveryError(error, email))); +}; diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js index ea32296a..afc2e6f0 100644 --- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js +++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js @@ -68,9 +68,11 @@ export const PasswordRecoveryPageComponent = props => { ); - const submittedEmailText = passwordRequested - ? {initialEmail} - : {submittedEmail}; + const submittedEmailText = passwordRequested ? ( + {initialEmail} + ) : ( + {submittedEmail} + ); const emailSubmittedContent = (
    @@ -86,12 +88,14 @@ export const PasswordRecoveryPageComponent = props => {

    - {recoveryInProgress - ? - : } + {recoveryInProgress ? ( + + ) : ( + + )}

    @@ -147,9 +151,7 @@ export const PasswordRecoveryPageComponent = props => { return ( -

    - {content} -
    +
    {content}
    ); }; diff --git a/src/containers/PasswordResetForm/PasswordResetForm.css b/src/containers/PasswordResetForm/PasswordResetForm.css index 0ec86da0..65476586 100644 --- a/src/containers/PasswordResetForm/PasswordResetForm.css +++ b/src/containers/PasswordResetForm/PasswordResetForm.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; .root { - } .password { diff --git a/src/containers/PasswordResetPage/PasswordResetPage.css b/src/containers/PasswordResetPage/PasswordResetPage.css index ed4f7b3f..b5af3658 100644 --- a/src/containers/PasswordResetPage/PasswordResetPage.css +++ b/src/containers/PasswordResetPage/PasswordResetPage.css @@ -16,7 +16,6 @@ @apply --marketplaceModalErrorStyles; } - /* ================ Typography ================ */ /* Title of the modal */ diff --git a/src/containers/PasswordResetPage/PasswordResetPage.duck.js b/src/containers/PasswordResetPage/PasswordResetPage.duck.js index 3fa8d2e7..46cb3ac0 100644 --- a/src/containers/PasswordResetPage/PasswordResetPage.duck.js +++ b/src/containers/PasswordResetPage/PasswordResetPage.duck.js @@ -40,12 +40,15 @@ export const resetPasswordError = e => ({ // ================ Thunks ================ // -export const resetPassword = (email, passwordResetToken, newPassword) => - (dispatch, getState, sdk) => { - dispatch(resetPasswordRequest()); - const params = { email, passwordResetToken, newPassword }; - return sdk.passwordReset - .reset(params) - .then(() => dispatch(resetPasswordSuccess())) - .catch(e => dispatch(resetPasswordError(e))); - }; +export const resetPassword = (email, passwordResetToken, newPassword) => ( + dispatch, + getState, + sdk +) => { + dispatch(resetPasswordRequest()); + const params = { email, passwordResetToken, newPassword }; + return sdk.passwordReset + .reset(params) + .then(() => dispatch(resetPasswordSuccess())) + .catch(e => dispatch(resetPasswordError(e))); +}; diff --git a/src/containers/PasswordResetPage/PasswordResetPage.js b/src/containers/PasswordResetPage/PasswordResetPage.js index 3dbab202..f3c75574 100644 --- a/src/containers/PasswordResetPage/PasswordResetPage.js +++ b/src/containers/PasswordResetPage/PasswordResetPage.js @@ -71,11 +71,11 @@ export class PasswordResetPageComponent extends Component {

    - {resetPasswordError - ?

    - -

    - : null} + {resetPasswordError ? ( +

    + +

    + ) : null} -
    - {content} -
    +
    {content}
    ); } diff --git a/src/containers/PayoutDetailsForm/PayoutDetailsForm.css b/src/containers/PayoutDetailsForm/PayoutDetailsForm.css index e725ff3b..6644139c 100644 --- a/src/containers/PayoutDetailsForm/PayoutDetailsForm.css +++ b/src/containers/PayoutDetailsForm/PayoutDetailsForm.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; .root { - } .sectionContainer { diff --git a/src/containers/PayoutDetailsForm/PayoutDetailsForm.js b/src/containers/PayoutDetailsForm/PayoutDetailsForm.js index 5dd280f6..da0912b3 100644 --- a/src/containers/PayoutDetailsForm/PayoutDetailsForm.js +++ b/src/containers/PayoutDetailsForm/PayoutDetailsForm.js @@ -129,76 +129,75 @@ const PayoutDetailsFormComponent = props => { ); const showAddressFields = country && requiresAddress(country); - const addressSection = showAddressFields - ?
    + const addressSection = showAddressFields ? ( +
    + +
    + -
    - - -
    - : null; +
    + ) : null; // StripeBankAccountTokenInputField handles the error messages // internally, we just have to make sure we require a valid token // out of the field. Therefore the empty validation message. const bankAccountRequired = validators.required(' '); - const bankAccountSection = country - ?
    -

    - -

    - -
    - : null; + const bankAccountSection = country ? ( +
    +

    + +

    + +
    + ) : null; const classes = classNames(css.root, className); const submitReady = false; const submitInProgress = submitting || inProgress; const submitDisabled = pristine || invalid || disabled || submitInProgress; - const error = createStripeAccountError - ?
    - -
    - : null; + const error = createStripeAccountError ? ( +
    + +
    + ) : null; return (
    -

    diff --git a/src/containers/ProfilePage/ProfilePage.js b/src/containers/ProfilePage/ProfilePage.js index fd7c5374..51d51bab 100644 --- a/src/containers/ProfilePage/ProfilePage.js +++ b/src/containers/ProfilePage/ProfilePage.js @@ -6,12 +6,7 @@ import { Page } from '../../components'; import { TopbarContainer } from '../../containers'; export const ProfilePageComponent = props => { - const { - authInfoError, - logoutError, - params, - scrollingDisabled, - } = props; + const { authInfoError, logoutError, params, scrollingDisabled } = props; return ( { return (
    - + { - this.setState({ uploadDelay: false }); - }, - UPLOAD_CHANGE_DELAY - ); + this.uploadDelayTimeoutId = window.setTimeout(() => { + this.setState({ uploadDelay: false }); + }, UPLOAD_CHANGE_DELAY); } } @@ -145,9 +144,12 @@ class ProfileSettingsFormComponent extends Component { }); const lastNameRequired = validators.required(lastNameRequiredMessage); - const uploadingOverlay = uploadInProgress || this.state.uploadDelay - ?
    - : null; + const uploadingOverlay = + uploadInProgress || this.state.uploadDelay ? ( +
    + +
    + ) : null; const hasUploadError = !!uploadImageError && !uploadInProgress; const errorClasses = classNames({ [css.avatarUploadError]: hasUploadError }); @@ -158,8 +160,9 @@ class ProfileSettingsFormComponent extends Component { const fileExists = !!profileImage.file; const fileUploadInProgress = uploadInProgress && fileExists; const delayAfterUpload = profileImage.imageId && this.state.uploadDelay; - const imageFromFile = fileExists && (fileUploadInProgress || delayAfterUpload) - ? {uploadingOverlay} - : null; + ) : null; // Avatar is rendered in hidden during the upload delay // Upload delay smoothes image change process: @@ -176,32 +179,36 @@ class ProfileSettingsFormComponent extends Component { const avatarClasses = classNames(errorClasses, css.avatar, { [css.avatarInvisible]: this.state.uploadDelay, }); - const avatarComponent = !fileUploadInProgress && profileImage.imageId - ? - : null; + const avatarComponent = + !fileUploadInProgress && profileImage.imageId ? ( + + ) : null; - const chooseAvatarLabel = profileImage.imageId || fileUploadInProgress - ?
    + const chooseAvatarLabel = + profileImage.imageId || fileUploadInProgress ? ( +
    {imageFromFile} {avatarComponent}
    - :
    + ) : ( +
    -
    ; - - const submitError = updateProfileError - ?
    -
    - : null; + ); + + const submitError = updateProfileError ? ( +
    + +
    + ) : null; const classes = classNames(rootClassName || css.root, className); const submitInProgress = submitting || updateInProgress; @@ -225,8 +232,12 @@ class ProfileSettingsFormComponent extends Component { type="file" uploadImageError={uploadImageError} /> -
    -
    +
    + +
    +
    + +

    diff --git a/src/containers/ProfileSettingsPage/ProfileSettingsPage.js b/src/containers/ProfileSettingsPage/ProfileSettingsPage.js index ee263fc0..ec587137 100644 --- a/src/containers/ProfileSettingsPage/ProfileSettingsPage.js +++ b/src/containers/ProfileSettingsPage/ProfileSettingsPage.js @@ -45,9 +45,10 @@ export class ProfileSettingsPageComponent extends Component { const uploadedImage = this.props.image; // Update profileImage only if file system has been accessed - const updatedValues = uploadedImage && uploadedImage.imageId && uploadedImage.file - ? { ...name, profileImageId: uploadedImage.imageId } - : name; + const updatedValues = + uploadedImage && uploadedImage.imageId && uploadedImage.file + ? { ...name, profileImageId: uploadedImage.imageId } + : name; onUpdateProfile(updatedValues).then(() => { this.setState({ profileUpdated: true }); @@ -64,22 +65,22 @@ export class ProfileSettingsPageComponent extends Component { const profileImageId = user.profileImage ? user.profileImage.id : null; const profileImage = image || { imageId: profileImageId }; - const profileSettingsForm = user.id - ? onImageUploadHandler(e, onImageUpload)} - uploadInProgress={uploadInProgress} - updateInProgress={updateInProgress} - updateProfileReady={this.state.profileUpdated} - uploadImageError={uploadImageError} - updateProfileError={updateProfileError} - onSubmit={handleSubmit} - onChange={handleChange} - /> - : null; + const profileSettingsForm = user.id ? ( + onImageUploadHandler(e, onImageUpload)} + uploadInProgress={uploadInProgress} + updateInProgress={updateInProgress} + updateProfileReady={this.state.profileUpdated} + uploadImageError={uploadImageError} + updateProfileError={updateProfileError} + onSubmit={handleSubmit} + onChange={handleChange} + /> + ) : null; return (
    -

    +

    + +

    {profileSettingsForm}
    diff --git a/src/containers/SalePage/SalePage.duck.js b/src/containers/SalePage/SalePage.duck.js index 10759335..09d1c28a 100644 --- a/src/containers/SalePage/SalePage.duck.js +++ b/src/containers/SalePage/SalePage.duck.js @@ -88,102 +88,98 @@ const listingRelationship = txResponse => { return txResponse.data.data.relationships.listing.data; }; -export const fetchSale = id => - (dispatch, getState, sdk) => { - dispatch(fetchSaleRequest()); - let txResponse = null; +export const fetchSale = id => (dispatch, getState, sdk) => { + dispatch(fetchSaleRequest()); + let txResponse = null; - return sdk.transactions - .show( - { - id, - include: [ - 'customer', - 'customer.profileImage', - 'provider', - 'provider.profileImage', - 'listing', - 'booking', - ], - }, - { expand: true } - ) - .then(response => { - txResponse = response; - const listingId = listingRelationship(response).id; - return sdk.listings.show({ - id: listingId, - include: ['author', 'author.profileImage', 'images'], - }); - }) - .then(response => { - dispatch(addMarketplaceEntities(txResponse)); - dispatch(addMarketplaceEntities(response)); - dispatch(fetchSaleSuccess(txResponse)); - return response; - }) - .catch(e => { - dispatch(fetchSaleError(e)); - throw e; + return sdk.transactions + .show( + { + id, + include: [ + 'customer', + 'customer.profileImage', + 'provider', + 'provider.profileImage', + 'listing', + 'booking', + ], + }, + { expand: true } + ) + .then(response => { + txResponse = response; + const listingId = listingRelationship(response).id; + return sdk.listings.show({ + id: listingId, + include: ['author', 'author.profileImage', 'images'], }); - }; + }) + .then(response => { + dispatch(addMarketplaceEntities(txResponse)); + dispatch(addMarketplaceEntities(response)); + dispatch(fetchSaleSuccess(txResponse)); + return response; + }) + .catch(e => { + dispatch(fetchSaleError(e)); + throw e; + }); +}; -export const acceptSale = id => - (dispatch, getState, sdk) => { - if (acceptOrDeclineInProgress(getState())) { - return Promise.reject(new Error('Accept or decline already in progress')); - } - dispatch(acceptSaleRequest()); +export const acceptSale = id => (dispatch, getState, sdk) => { + if (acceptOrDeclineInProgress(getState())) { + return Promise.reject(new Error('Accept or decline already in progress')); + } + dispatch(acceptSaleRequest()); - return sdk.transactions - .transition({ id, transition: propTypes.TX_TRANSITION_ACCEPT, params: {} }, { expand: true }) - .then(response => { - dispatch(addMarketplaceEntities(response)); - dispatch(acceptSaleSuccess()); - dispatch(fetchCurrentUserNotifications()); - return response; - }) - .catch(e => { - dispatch(acceptSaleError(e)); - log.error(e, 'accept-sale-failed', { - txId: id, - transition: propTypes.TX_TRANSITION_ACCEPT, - }); - throw e; + return sdk.transactions + .transition({ id, transition: propTypes.TX_TRANSITION_ACCEPT, params: {} }, { expand: true }) + .then(response => { + dispatch(addMarketplaceEntities(response)); + dispatch(acceptSaleSuccess()); + dispatch(fetchCurrentUserNotifications()); + return response; + }) + .catch(e => { + dispatch(acceptSaleError(e)); + log.error(e, 'accept-sale-failed', { + txId: id, + transition: propTypes.TX_TRANSITION_ACCEPT, }); - }; + throw e; + }); +}; -export const declineSale = id => - (dispatch, getState, sdk) => { - if (acceptOrDeclineInProgress(getState())) { - return Promise.reject(new Error('Accept or decline already in progress')); - } - dispatch(declineSaleRequest()); +export const declineSale = id => (dispatch, getState, sdk) => { + if (acceptOrDeclineInProgress(getState())) { + return Promise.reject(new Error('Accept or decline already in progress')); + } + dispatch(declineSaleRequest()); - return sdk.transactions - .transition({ id, transition: propTypes.TX_TRANSITION_DECLINE, params: {} }, { expand: true }) - .then(response => { - dispatch(addMarketplaceEntities(response)); - dispatch(declineSaleSuccess()); - dispatch(fetchCurrentUserNotifications()); - return response; - }) - .catch(e => { - dispatch(declineSaleError(e)); - log.error(e, 'redect-sale-failed', { - txId: id, - transition: propTypes.TX_TRANSITION_DECLINE, - }); - throw e; + return sdk.transactions + .transition({ id, transition: propTypes.TX_TRANSITION_DECLINE, params: {} }, { expand: true }) + .then(response => { + dispatch(addMarketplaceEntities(response)); + dispatch(declineSaleSuccess()); + dispatch(fetchCurrentUserNotifications()); + return response; + }) + .catch(e => { + dispatch(declineSaleError(e)); + log.error(e, 'redect-sale-failed', { + txId: id, + transition: propTypes.TX_TRANSITION_DECLINE, }); - }; + throw e; + }); +}; // 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); +export const loadData = params => dispatch => { + const saleId = new types.UUID(params.id); - // Sale (i.e. transaction entity in API, but from buyers perspective) contains sale details - return dispatch(fetchSale(saleId)); - }; + // Sale (i.e. transaction entity in API, but from buyers perspective) contains sale details + return dispatch(fetchSale(saleId)); +}; diff --git a/src/containers/SalePage/SalePage.js b/src/containers/SalePage/SalePage.js index ef8c4e7b..ca9f2b8c 100644 --- a/src/containers/SalePage/SalePage.js +++ b/src/containers/SalePage/SalePage.js @@ -37,7 +37,8 @@ export const SalePageComponent = props => { const listingTitle = currentListing.attributes.title; // Redirect users with someone else's direct link to their own inbox/sales page. - const isDataAvailable = currentUser && + const isDataAvailable = + currentUser && currentTransaction.id && currentTransaction.id.uuid === params.id && currentTransaction.provider && @@ -52,12 +53,19 @@ export const SalePageComponent = props => { [css.tabContentVisible]: props.tab === 'details', }); - const loadingOrFailedFetching = fetchSaleError - ?

    - :

    ; + const loadingOrFailedFetching = fetchSaleError ? ( +

    + +

    + ) : ( +

    + +

    + ); - const panel = isDataAvailable && currentTransaction.id - ? { acceptSaleError={acceptSaleError} declineSaleError={declineSaleError} /> - : loadingOrFailedFetching; + ) : ( + loadingOrFailedFetching + ); return ( { scrollingDisabled={scrollingDisabled} > -
    - {panel} -
    +
    {panel}
     ); }; diff --git a/src/containers/SearchPage/MapIcon.js b/src/containers/SearchPage/MapIcon.js index 305da86a..51ee9364 100644 --- a/src/containers/SearchPage/MapIcon.js +++ b/src/containers/SearchPage/MapIcon.js @@ -28,7 +28,8 @@ const MapIcon = props => { result="shadowMatrixOuter1" /> - + + @@ -41,9 +42,7 @@ const MapIcon = props => { strokeLinecap="round" strokeLinejoin="round" > - + ); diff --git a/src/containers/SearchPage/SearchPage.css b/src/containers/SearchPage/SearchPage.css index aa21c94b..ed0a36c1 100644 --- a/src/containers/SearchPage/SearchPage.css +++ b/src/containers/SearchPage/SearchPage.css @@ -123,7 +123,6 @@ } .mapPanel { - @media (--viewportMedium) { /** * .container is using flexbox, diff --git a/src/containers/SearchPage/SearchPage.duck.js b/src/containers/SearchPage/SearchPage.duck.js index 2cf93864..25d8e03b 100644 --- a/src/containers/SearchPage/SearchPage.duck.js +++ b/src/containers/SearchPage/SearchPage.duck.js @@ -107,48 +107,46 @@ export const searchMapListingsError = e => ({ payload: e, }); -export const searchListings = searchParams => - (dispatch, getState, sdk) => { - dispatch(searchListingsRequest(searchParams)); +export const searchListings = searchParams => (dispatch, getState, sdk) => { + dispatch(searchListingsRequest(searchParams)); - const { origin, include = [], page, perPage } = searchParams; + const { origin, include = [], page, perPage } = searchParams; - // TODO: API can't handle camelCase request parameter yet. - const searchOrQuery = origin - ? sdk.listings.search({ ...searchParams, per_page: perPage }) - : sdk.listings.query({ include, page, per_page: perPage }); + // TODO: API can't handle camelCase request parameter yet. + const searchOrQuery = origin + ? sdk.listings.search({ ...searchParams, per_page: perPage }) + : sdk.listings.query({ include, page, per_page: perPage }); - return searchOrQuery - .then(response => { - dispatch(addMarketplaceEntities(response)); - dispatch(searchListingsSuccess(response)); - return response; - }) - .catch(e => { - dispatch(searchListingsError(e)); - throw e; - }); - }; + return searchOrQuery + .then(response => { + dispatch(addMarketplaceEntities(response)); + dispatch(searchListingsSuccess(response)); + return response; + }) + .catch(e => { + dispatch(searchListingsError(e)); + throw e; + }); +}; -export const searchMapListings = searchParams => - (dispatch, getState, sdk) => { - dispatch(searchMapListingsRequest(searchParams)); +export const searchMapListings = searchParams => (dispatch, getState, sdk) => { + dispatch(searchMapListingsRequest(searchParams)); - const { origin, include = [], page = 1, perPage } = searchParams; + const { origin, include = [], page = 1, perPage } = searchParams; - // TODO: API can't handle camelCase request parameter yet. - const searchOrQuery = origin - ? sdk.listings.search({ ...searchParams, page, per_page: perPage }) - : sdk.listings.query({ include, page, per_page: perPage }); + // TODO: API can't handle camelCase request parameter yet. + const searchOrQuery = origin + ? sdk.listings.search({ ...searchParams, page, per_page: perPage }) + : sdk.listings.query({ include, page, per_page: perPage }); - return searchOrQuery - .then(response => { - dispatch(addMarketplaceEntities(response)); - dispatch(searchMapListingsSuccess(response)); - return response; - }) - .catch(e => { - dispatch(searchMapListingsError(e)); - throw e; - }); - }; + return searchOrQuery + .then(response => { + dispatch(addMarketplaceEntities(response)); + dispatch(searchMapListingsSuccess(response)); + return response; + }) + .catch(e => { + dispatch(searchMapListingsError(e)); + throw e; + }); +}; diff --git a/src/containers/SearchPage/SearchPage.js b/src/containers/SearchPage/SearchPage.js index b3c03a9b..152d692a 100644 --- a/src/containers/SearchPage/SearchPage.js +++ b/src/containers/SearchPage/SearchPage.js @@ -115,8 +115,8 @@ export class SearchPageComponent extends Component { // Search more listings for map onSearchMapListings(searchParamsForMapResults) .then(response => { - const hasNextPage = page < response.data.meta.totalPages && - page < MAX_SEARCH_RESULT_PAGES_ON_MAP; + const hasNextPage = + page < response.data.meta.totalPages && page < MAX_SEARCH_RESULT_PAGES_ON_MAP; if (hasNextPage) { onSearchMapListings({ ...searchParamsForMapResults, page: page + 1 }); } else { @@ -174,9 +174,9 @@ export class SearchPageComponent extends Component {

    ); - const addressNode = address - ? {searchInURL.address.split(', ')[0]} - : null; + const addressNode = address ? ( + {searchInURL.address.split(', ')[0]} + ) : null; const resultsFoundWithAddress = (

    ); - const resultsFound = address && !boundsChanged - ? resultsFoundWithAddress - : resultsFoundNoAddress; + const resultsFound = + address && !boundsChanged ? resultsFoundWithAddress : resultsFoundNoAddress; const noResults = (

    @@ -216,9 +215,8 @@ export class SearchPageComponent extends Component { ); const showSearchMapInMobile = this.state.isSearchMapOpenOnMobile ? searchMap : null; const isWindowDefined = typeof window !== 'undefined'; - const searchMapMaybe = isWindowDefined && window.innerWidth < MODAL_BREAKPOINT - ? showSearchMapInMobile - : searchMap; + const searchMapMaybe = + isWindowDefined && window.innerWidth < MODAL_BREAKPOINT ? showSearchMapInMobile : searchMap; const searchParamsForPagination = parse(location.search); @@ -262,8 +260,7 @@ export class SearchPageComponent extends Component { scrollingDisabled={scrollingDisabled} description={schemaDescription} title={schemaTitle} - schema={ - ` + schema={` { "@context": "http://schema.org", "@type": "SearchResultsPage", @@ -271,8 +268,7 @@ export class SearchPageComponent extends Component { "name": "${schemaTitle}", "mainEntity": [${schemaMainEntity}] } - ` - } + `} >
    @@ -316,9 +312,7 @@ export class SearchPageComponent extends Component { showAsModalMaxWidth={MODAL_BREAKPOINT} onManageDisableScrolling={onManageDisableScrolling} > -
    - {searchMapMaybe} -
    +
    {searchMapMaybe}
    diff --git a/src/containers/SecurityPage/SecurityPage.js b/src/containers/SecurityPage/SecurityPage.js index 34fd0557..36041785 100644 --- a/src/containers/SecurityPage/SecurityPage.js +++ b/src/containers/SecurityPage/SecurityPage.js @@ -6,11 +6,7 @@ import { Page } from '../../components'; import { TopbarContainer } from '../../containers'; export const SecurityPageComponent = props => { - const { - authInfoError, - logoutError, - scrollingDisabled, - } = props; + const { authInfoError, logoutError, scrollingDisabled } = props; return ( {

    - ); }; diff --git a/src/containers/StripePaymentForm/StripePaymentForm.js b/src/containers/StripePaymentForm/StripePaymentForm.js index 1de90d5f..d7f6b7ea 100644 --- a/src/containers/StripePaymentForm/StripePaymentForm.js +++ b/src/containers/StripePaymentForm/StripePaymentForm.js @@ -33,9 +33,10 @@ const stripeErrorTranslation = (intl, stripeError) => { return intl.formatMessage({ id: 'StripePaymentForm.genericError' }); } - const translationId = type === 'validation_error' - ? `StripePaymentForm.stripe.validation_error.${code}` - : `StripePaymentForm.stripe.${type}`; + const translationId = + type === 'validation_error' + ? `StripePaymentForm.stripe.validation_error.${code}` + : `StripePaymentForm.stripe.${type}`; return intl.formatMessage({ id: translationId, @@ -48,7 +49,8 @@ const stripeElementsOptions = { { family: 'sofiapro', fontSmoothing: 'antialiased', - src: 'local("sofiapro"), local("SofiaPro"), local("Sofia Pro"), url("https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-medium-webfont.woff2") format("woff2")', + src: + 'local("sofiapro"), local("SofiaPro"), local("Sofia Pro"), url("https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-medium-webfont.woff2") format("woff2")', }, ], }; diff --git a/src/containers/StyleguidePage/StyleguidePage.css b/src/containers/StyleguidePage/StyleguidePage.css index 65c03adb..3609bd37 100644 --- a/src/containers/StyleguidePage/StyleguidePage.css +++ b/src/containers/StyleguidePage/StyleguidePage.css @@ -68,15 +68,16 @@ } /* Typography.example */ -.typographyContent {} +.typographyContent { +} .baselines { background-image: url('data:image/svg+xml;utf8,'); background-repeat: repeat; @media (--viewportMedium) { - background-image: url('data:image/svg+xml;utf8,'); - background-repeat: repeat; + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: repeat; } } @@ -110,7 +111,6 @@ margin-right: calc(2 * var(--spacingUnitDesktop)); margin-bottom: calc(2 * var(--spacingUnitDesktop) + 2px); } - } .element { diff --git a/src/containers/StyleguidePage/StyleguidePage.js b/src/containers/StyleguidePage/StyleguidePage.js index 2550a846..e8d04ad3 100644 --- a/src/containers/StyleguidePage/StyleguidePage.js +++ b/src/containers/StyleguidePage/StyleguidePage.js @@ -31,7 +31,6 @@ const Example = props => { {componentName} / - { return (