Merge pull request #1000 from sharetribe/use-env-variable-to-enable-availability-calendar

Use env variable to enable or disable availability calendar

CHANGELOG.md

@@ -14,6 +14,10 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [fix] Use environment variable `REACT_APP_AVAILABILITY_ENABLED` to enable or disable availability
+  calendar. In the config.js file variable fetchAvailableTimeSlots is now renamed to more general
+  enableAvailability because it affects both fetching availability data and enabling the
+  availability calendar. [#1000](https://github.com/sharetribe/flex-template-web/pull/1000)
 - [fix] UI was broken for banned user after transaction enquiry changes.
   [#996](https://github.com/sharetribe/flex-template-web/pull/996)
 

src/components/EditListingWizard/EditListingWizard.js

@@ -3,6 +3,7 @@ import { array, bool, func, number, object, oneOf, shape, string } from 'prop-ty
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
+import config from '../../config';
 import { withViewport } from '../../util/contextHelpers';
 import {
   LISTING_PAGE_PARAM_TYPE_DRAFT,
@@ -24,9 +25,20 @@ import EditListingWizardTab, {
 } from './EditListingWizardTab';
 import css from './EditListingWizard.css';
 
+// Show availability calendar only if environment variable availabilityEnabled is true
+const availabilityMaybe = config.enableAvailability ? [AVAILABILITY] : [];
+
 // TODO: PHOTOS panel needs to be the last one since it currently contains PayoutDetailsForm modal
 // All the other panels can be reordered.
-export const TABS = [DESCRIPTION, FEATURES, POLICY, LOCATION, PRICING, AVAILABILITY, PHOTOS];
+export const TABS = [
+  DESCRIPTION,
+  FEATURES,
+  POLICY,
+  LOCATION,
+  PRICING,
+  ...availabilityMaybe,
+  PHOTOS,
+];
 
 // Tabs are horizontal in small screens
 const MAX_HORIZONTAL_NAV_SCREEN_WIDTH = 1023;

src/components/ManageListingCard/ManageListingCard.js

@@ -123,6 +123,7 @@ export const ManageListingCardComponent = props => {
     onOpenListing,
     onToggleMenu,
     renderSizes,
+    availabilityEnabled,
   } = props;
   const classes = classNames(rootClassName || css.root, className);
   const currentListing = ensureOwnListing(listing);
@@ -335,15 +336,19 @@ export const ManageListingCardComponent = props => {
             <FormattedMessage id="ManageListingCard.editListing" />
           </NamedLink>
 
-          <span className={css.manageLinksSeparator}>{' • '}</span>
+          {availabilityEnabled ? (
+            <React.Fragment>
+              <span className={css.manageLinksSeparator}>{' • '}</span>
 
-          <NamedLink
-            className={css.manageLink}
-            name="EditListingPage"
-            params={{ id, slug, type: 'edit', tab: 'availability' }}
-          >
-            <FormattedMessage id="ManageListingCard.manageAvailability" />
-          </NamedLink>
+              <NamedLink
+                className={css.manageLink}
+                name="EditListingPage"
+                params={{ id, slug, type: editListingLinkType, tab: 'availability' }}
+              >
+                <FormattedMessage id="ManageListingCard.manageAvailability" />
+              </NamedLink>
+            </React.Fragment>
+          ) : null}
         </div>
       </div>
     </div>
@@ -355,6 +360,7 @@ ManageListingCardComponent.defaultProps = {
   rootClassName: null,
   actionsInProgressListingId: null,
   renderSizes: null,
+  availabilityEnabled: config.enableAvailability,
 };
 
 const { bool, func, shape, string } = PropTypes;
@@ -371,6 +377,7 @@ ManageListingCardComponent.propTypes = {
   onCloseListing: func.isRequired,
   onOpenListing: func.isRequired,
   onToggleMenu: func.isRequired,
+  availabilityEnabled: bool,
 
   // Responsive image sizes hint
   renderSizes: string,

src/components/ManageListingCard/ManageListingCard.test.js

@@ -18,6 +18,7 @@ describe('ManageListingCard', () => {
         onToggleMenu={noop}
         hasClosingError={false}
         hasOpeningError={false}
+        availabilityEnabled={true}
       />
     );
     expect(tree).toMatchSnapshot();

src/config.js

@@ -39,7 +39,7 @@ const bookingUnitType = 'line-item/night';
 
 // Should the application fetch available time slots (currently defined as
 // start and end dates) to be shown on listing page.
-const fetchAvailableTimeSlots = process.env.REACT_APP_AVAILABILITY_ENABLED === 'true';
+const enableAvailability = process.env.REACT_APP_AVAILABILITY_ENABLED === 'true';
 
 // A maximum number of days forwards during which a booking can be made.
 // This is limited due to Stripe holding funds up to 90 days from the
@@ -186,7 +186,7 @@ const config = {
   locale,
   bookingProcessAlias,
   bookingUnitType,
-  fetchAvailableTimeSlots,
+  enableAvailability,
   dayCountAvailableForBooking,
   i18n,
   sdk: {

src/containers/ListingPage/ListingPage.duck.js

@@ -277,7 +277,7 @@ export const loadData = (params, search) => dispatch => {
     return dispatch(showListing(listingId, true));
   }
 
-  if (config.fetchAvailableTimeSlots) {
+  if (config.enableAvailability) {
     return Promise.all([
       dispatch(showListing(listingId)),
       dispatch(fetchTimeSlots(listingId)),

src/containers/TransactionPage/TransactionPage.duck.js

@@ -269,7 +269,7 @@ export const fetchTransaction = (id, txRole) => (dispatch, getState, sdk) => {
       // Fetch time slots for transactions that are in enquired state
       const canFetchTimeslots =
         txRole === 'customer' &&
-        config.fetchAvailableTimeSlots &&
+        config.enableAvailability &&
         transaction &&
         txIsEnquired(transaction);