Avoid passing around currencyConfig

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 {
           </div>
           <PayoutDetailsForm
             className={css.payoutDetails}
-            currency={currency}
             disabled={fetchInProgress}
             onSubmit={this.handlePayoutSubmit}
           />

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,
   },

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 (
     <NamedLink className={classes} name="ListingPage" params={{ id, slug }}>
@@ -95,7 +96,6 @@ const { string } = PropTypes;
 ListingCardComponent.propTypes = {
   className: string,
   rootClassName: string,
-  currencyConfig: propTypes.currencyConfig.isRequired,
   intl: intlShape.isRequired,
   listing: propTypes.listing.isRequired,
 };

src/components/ListingCard/ListingCard.test.js

@@ -8,7 +8,7 @@ describe('ListingCard', () => {
     const author = createUser('user1');
     const listing = { ...createListing('listing1'), author };
     const tree = renderShallow(
-      <ListingCardComponent listing={listing} intl={fakeIntl} currencyConfig={currencyConfig} />
+      <ListingCardComponent listing={listing} intl={fakeIntl} />
     );
     expect(tree).toMatchSnapshot();
   });

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;

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;
 

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,

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(<SearchResultsPanel {...props} />);

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 },
 };

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 => {
       </div>
     );
   }
-  if (unitPrice.currency !== marketplaceCurrency) {
+  if (unitPrice.currency !== config.currency) {
     return (
       <div className={classes}>
         <p className={css.error}>

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}`
       );

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
       ? <div className={css.locationContainer}>
           <h3 className={css.locationTitle}>

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);
     },

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}
         />
       </div>
@@ -239,7 +238,6 @@ PayoutDetailsFormComponent.propTypes = {
   ...formPropTypes,
   className: string,
   disabled: bool,
-  currency: string.isRequired,
 
   // from mapStateToProps
   country: string,

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 {
             >
               <SearchResultsPanel
                 className={css.searchListingsPanel}
-                currencyConfig={config.currencyConfig}
                 listings={listings}
                 pagination={listingsAreLoaded ? pagination : null}
                 search={searchParamsForPagination}

src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap

@@ -39,17 +39,6 @@ exports[`SearchPageComponent matches snapshot 1`] = `
         className="">
         <SearchResultsPanel
           className={null}
-          currencyConfig={
-            Object {
-              "currency": "USD",
-              "currencyDisplay": "symbol",
-              "maximumFractionDigits": 2,
-              "minimumFractionDigits": 2,
-              "style": "currency",
-              "subUnitDivisor": 100,
-              "useGrouping": true,
-            }
-          }
           listings={Array []}
           pagination={
             Object {

src/util/currency.js

@@ -197,7 +197,7 @@ export const convertMoneyToNumber = 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 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);