diff --git a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js index a73db287..c263a021 100644 --- a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js +++ b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js @@ -6,7 +6,6 @@ import { EditListingPhotosForm, PayoutDetailsForm } from '../../containers'; import { ensureListing } from '../../util/data'; import { Modal } from '../../components'; import * as propTypes from '../../util/propTypes'; -import config from '../../config'; import css from './EditListingPhotosPanel.css'; @@ -93,7 +92,6 @@ class EditListingPhotosPanel extends Component { const classes = classNames(rootClass, className, { [css.payoutModalOpen]: this.state.showPayoutDetails, }); - const currency = config.currencyConfig.currency; const currentListing = ensureListing(listing); const { title } = currentListing.attributes; const listingTitle = title || ''; @@ -139,7 +137,6 @@ class EditListingPhotosPanel extends Component { diff --git a/src/components/ListingCard/ListingCard.example.js b/src/components/ListingCard/ListingCard.example.js index 17511ed2..c9ce3a49 100644 --- a/src/components/ListingCard/ListingCard.example.js +++ b/src/components/ListingCard/ListingCard.example.js @@ -1,7 +1,7 @@ /* eslint-disable no-console */ import React from 'react'; import ListingCard from './ListingCard'; -import { createUser, createListing, currencyConfig, fakeIntl } from '../../util/test-data'; +import { createUser, createListing, fakeIntl } from '../../util/test-data'; const author = createUser('user1'); const listing = { ...createListing('listing1'), author }; @@ -15,7 +15,6 @@ const ListingCardWrapper = props => ( export const ListingCardWrapped = { component: ListingCardWrapper, props: { - currencyConfig, intl: fakeIntl, listing, }, diff --git a/src/components/ListingCard/ListingCard.js b/src/components/ListingCard/ListingCard.js index 5484f401..78aa7a50 100644 --- a/src/components/ListingCard/ListingCard.js +++ b/src/components/ListingCard/ListingCard.js @@ -6,11 +6,12 @@ import * as propTypes from '../../util/propTypes'; import { formatMoney } from '../../util/currency'; import { ensureListing, ensureUser } from '../../util/data'; import { createSlug } from '../../util/urlHelpers'; +import config from '../../config'; import css from './ListingCard.css'; -const priceData = (price, currencyConfig, intl) => { - if (price && price.currency === currencyConfig.currency) { +const priceData = (price, intl) => { + if (price && price.currency === config.currency) { const formattedPrice = formatMoney(intl, price); return { formattedPrice, priceTitle: formattedPrice }; } else if (price) { @@ -29,7 +30,7 @@ const priceData = (price, currencyConfig, intl) => { }; export const ListingCardComponent = props => { - const { className, rootClassName, currencyConfig, intl, listing } = props; + const { className, rootClassName, intl, listing } = props; const classes = classNames(rootClassName || css.root, className); const currentListing = ensureListing(listing); const id = currentListing.id.uuid; @@ -42,7 +43,7 @@ export const ListingCardComponent = props => { : null; // TODO: Currently, API can return currencies that are not supported by starter app. - const { formattedPrice, priceTitle } = priceData(price, currencyConfig, intl); + const { formattedPrice, priceTitle } = priceData(price, intl); return ( @@ -95,7 +96,6 @@ const { string } = PropTypes; ListingCardComponent.propTypes = { className: string, rootClassName: string, - currencyConfig: propTypes.currencyConfig.isRequired, intl: intlShape.isRequired, listing: propTypes.listing.isRequired, }; diff --git a/src/components/ListingCard/ListingCard.test.js b/src/components/ListingCard/ListingCard.test.js index e601bb45..346e3504 100644 --- a/src/components/ListingCard/ListingCard.test.js +++ b/src/components/ListingCard/ListingCard.test.js @@ -8,7 +8,7 @@ describe('ListingCard', () => { const author = createUser('user1'); const listing = { ...createListing('listing1'), author }; const tree = renderShallow( - + ); expect(tree).toMatchSnapshot(); }); diff --git a/src/components/SearchMapInfoCard/SearchMapInfoCard.js b/src/components/SearchMapInfoCard/SearchMapInfoCard.js index dcc23310..9648ea73 100644 --- a/src/components/SearchMapInfoCard/SearchMapInfoCard.js +++ b/src/components/SearchMapInfoCard/SearchMapInfoCard.js @@ -33,7 +33,7 @@ const ListingCard = props => { const { className, clickHandler, flattenedRoutes, history, intl, isInCarousel, listing } = props; const { title, price } = listing.attributes; - const formattedPrice = price && price.currency === config.currencyConfig.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; diff --git a/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js b/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js index 821a6b3a..371c3c45 100644 --- a/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js +++ b/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js @@ -30,7 +30,7 @@ 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.currencyConfig.currency + const formattedPrice = price && price.currency === config.currency ? formatMoney(intl, price) : price.currency; diff --git a/src/components/SearchResultsPanel/SearchResultsPanel.js b/src/components/SearchResultsPanel/SearchResultsPanel.js index 666b2a02..1afdc5c1 100644 --- a/src/components/SearchResultsPanel/SearchResultsPanel.js +++ b/src/components/SearchResultsPanel/SearchResultsPanel.js @@ -5,7 +5,7 @@ import { ListingCard, PaginationLinks } from '../../components'; import css from './SearchResultsPanel.css'; const SearchResultsPanel = props => { - const { className, rootClassName, currencyConfig, listings, pagination, search } = props; + const { className, rootClassName, listings, pagination, search } = props; const classes = classNames(rootClassName || css.root, className); const paginationLinks = pagination && pagination.totalPages > 1 @@ -25,7 +25,6 @@ const SearchResultsPanel = props => { className={css.listingCard} key={l.id.uuid} listing={l} - currencyConfig={currencyConfig} /> ))} {props.children} @@ -49,7 +48,6 @@ const { array, node, object, string } = PropTypes; SearchResultsPanel.propTypes = { children: node, className: string, - currencyConfig: propTypes.currencyConfig.isRequired, listings: array, pagination: propTypes.pagination, rootClassName: string, diff --git a/src/components/SearchResultsPanel/SearchResultsPanel.test.js b/src/components/SearchResultsPanel/SearchResultsPanel.test.js index 88edcfea..69c93a56 100644 --- a/src/components/SearchResultsPanel/SearchResultsPanel.test.js +++ b/src/components/SearchResultsPanel/SearchResultsPanel.test.js @@ -7,7 +7,6 @@ import SearchResultsPanel from './SearchResultsPanel'; describe('SearchResultsPanel', () => { it('matches snapshot', () => { const props = { - currencyConfig, intl: fakeIntl, }; const tree = renderShallow(); diff --git a/src/config.js b/src/config.js index a76d7f1d..556d1a02 100644 --- a/src/config.js +++ b/src/config.js @@ -9,12 +9,14 @@ 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'; + // Currency configuration contains subUnitsDivisor and formatting for React-Intl // SubUnitDivisor is used to convert Money.amount to presentational value // E.g. 1099ยข / subUnitDivisor = $10.99 const currencyConfig = { style: 'currency', - currency: process.env.REACT_APP_SHARETRIBE_MARKETPLACE_CURRENCY || 'USD', + currency, currencyDisplay: 'symbol', useGrouping: true, minimumFractionDigits: 2, @@ -118,6 +120,7 @@ const config = { env, dev, sdk: { clientId: sdkClientId, baseUrl: sdkBaseUrl }, + currency, currencyConfig, stripe: { publishableKey: stripePublishableKey, supportedCountries: stripeSupportedCountries }, }; diff --git a/src/containers/BookingDatesForm/BookingDatesForm.js b/src/containers/BookingDatesForm/BookingDatesForm.js index 0de79e02..b07e0c20 100644 --- a/src/containers/BookingDatesForm/BookingDatesForm.js +++ b/src/containers/BookingDatesForm/BookingDatesForm.js @@ -73,7 +73,6 @@ export const BookingDatesFormComponent = props => { const { startDate, endDate } = bookingDates; const classes = classNames(rootClassName || css.root, className); - const { currency: marketplaceCurrency } = config.currencyConfig; if (!unitPrice) { return ( @@ -84,7 +83,7 @@ export const BookingDatesFormComponent = props => { ); } - if (unitPrice.currency !== marketplaceCurrency) { + if (unitPrice.currency !== config.currency) { return (

diff --git a/src/containers/CheckoutPage/CheckoutPage.js b/src/containers/CheckoutPage/CheckoutPage.js index c7b4f4a7..539f6b8f 100644 --- a/src/containers/CheckoutPage/CheckoutPage.js +++ b/src/containers/CheckoutPage/CheckoutPage.js @@ -146,13 +146,12 @@ export class CheckoutPageComponent extends Component { // Estimate total price. NOTE: this will change when we can do a // dry-run to the API and get a proper breakdown of the price. - const { currency: marketplaceCurrency } = config.currencyConfig; const unitPrice = currentListing.attributes.price; if (!unitPrice) { throw new Error('Listing has no price'); } - if (unitPrice.currency !== marketplaceCurrency) { + if (unitPrice.currency !== config.currency) { throw new Error( `Listing currency different from marketplace currency: ${unitPrice.currency}` ); diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index 37277c9a..14faaede 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -34,8 +34,8 @@ const MODAL_BREAKPOINT = 1023; const { UUID } = types; -const priceData = (price, currencyConfig, intl) => { - if (price && price.currency === currencyConfig.currency) { +const priceData = (price, intl) => { + if (price && price.currency === config.currency) { const formattedPrice = formatMoney(intl, price); return { formattedPrice, priceTitle: formattedPrice }; } else if (price) { @@ -103,7 +103,6 @@ export class ListingPageComponent extends Component { scrollingDisabled, showListingError, } = this.props; - const currencyConfig = config.currencyConfig; const currentListing = ensureListing(getListing(new UUID(params.id))); const { address = '', @@ -145,7 +144,7 @@ export class ListingPageComponent extends Component { } const bookBtnMessage = intl.formatMessage({ id: 'ListingPage.ctaButtonMessage' }); - const { formattedPrice, priceTitle } = priceData(price, currencyConfig, intl); + const { formattedPrice, priceTitle } = priceData(price, intl); const map = geolocation ?

diff --git a/src/containers/PayoutDetailsForm/PayoutDetailsForm.example.js b/src/containers/PayoutDetailsForm/PayoutDetailsForm.example.js index a3f58e5b..7c7f34e3 100644 --- a/src/containers/PayoutDetailsForm/PayoutDetailsForm.example.js +++ b/src/containers/PayoutDetailsForm/PayoutDetailsForm.example.js @@ -4,7 +4,6 @@ import PayoutDetailsForm from './PayoutDetailsForm'; export const USD = { component: PayoutDetailsForm, props: { - currency: 'USD', onSubmit: values => { console.log('submit payout details:', values); }, diff --git a/src/containers/PayoutDetailsForm/PayoutDetailsForm.js b/src/containers/PayoutDetailsForm/PayoutDetailsForm.js index 80f0db97..198cbec5 100644 --- a/src/containers/PayoutDetailsForm/PayoutDetailsForm.js +++ b/src/containers/PayoutDetailsForm/PayoutDetailsForm.js @@ -30,7 +30,6 @@ const PayoutDetailsFormComponent = props => { const { className, country, - currency, form, disabled, handleSubmit, @@ -155,7 +154,7 @@ const PayoutDetailsFormComponent = props => { routingNumberId={`${form}.bankAccountToken.routingNumber`} accountNumberId={`${form}.bankAccountToken.accountNumber`} country={country} - currency={currency} + currency={config.currency} validate={bankAccountRequired} />

@@ -239,7 +238,6 @@ PayoutDetailsFormComponent.propTypes = { ...formPropTypes, className: string, disabled: bool, - currency: string.isRequired, // from mapStateToProps country: string, diff --git a/src/containers/SearchPage/SearchPage.js b/src/containers/SearchPage/SearchPage.js index 21f62269..7f5b862a 100644 --- a/src/containers/SearchPage/SearchPage.js +++ b/src/containers/SearchPage/SearchPage.js @@ -5,7 +5,6 @@ import { compose } from 'redux'; import { withRouter } from 'react-router-dom'; import { debounce, isEqual, unionWith } from 'lodash'; import classNames from 'classnames'; -import config from '../../config'; import { withFlattenedRoutes } from '../../util/contextHelpers'; import { googleLatLngToSDKLatLng, googleBoundsToSDKBounds } from '../../util/googleMaps'; import { createResourceLocatorString } from '../../util/routes'; @@ -261,7 +260,6 @@ export class SearchPageComponent extends Component { > { if (!(value instanceof types.Money)) { throw new Error('Value must be a Money type'); } - if (value.currency !== config.currencyConfig.currency) { + if (value.currency !== config.currency) { throw new Error('Given currency different from marketplace currency'); } const subUnitDivisorAsDecimal = convertDivisorToDecimal(config.currencyConfig.subUnitDivisor); @@ -237,7 +237,7 @@ export const formatMoney = (intl, value) => { if (!(value instanceof types.Money)) { throw new Error('Value must be a Money type'); } - if (value.currency !== config.currencyConfig.currency) { + if (value.currency !== config.currency) { throw new Error('Given currency different from marketplace currency'); } const valueAsNumber = convertMoneyToNumber(value);