Hide cost switcher for logged in users

flixpressllc · Nov 18, 2016 · ed0a62f · ed0a62f
1 parent 02e2e0f
commit ed0a62f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/specs/features/users-can-browse-with-filters.spec.js b/specs/features/users-can-browse-with-filters.spec.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Browser from '../../src/components/Browser';
 import create from '../spec-helpers';
+import { PAYG_PLAN_NAMES } from '../../src/stores/app-settings';
 
 describe('Feature: Users can browse with filters', () => {
   describe('while logged out', () => {
@@ -40,6 +41,17 @@ describe('Feature: Users can browse with filters', () => {
   });
 
   describe('while logged in', () => {
-    pending();
+    it('does not show the Cost Switcher', () => {
+      const app = mount(<Browser userType={'Free'} />);
+      expect(app.find('CostSwitch').length).toEqual(0);
+    });
+    describe('for PAYG plans', () => {
+      PAYG_PLAN_NAMES.forEach( (planName) => {
+        it(`defaults ${ planName } users to cost`, () => {
+          const app = mount(<Browser userType={ planName } />);
+          expect(app.state().templateOptions.costType).toEqual('price');
+        });
+      });
+    });
   });
 });
diff --git a/src/components/Browser.js b/src/components/Browser.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { union } from 'lodash';
 import Filter from '../helpers/TemplateFilters';
 import TemplateSorter from '../helpers/TemplateSorter';
+import { PAYG_PLAN_NAMES } from '../stores/app-settings';
 
 import CostSwitch from './CostSwitch';
 import TagPane from './TagPane';
@@ -24,11 +25,13 @@ class Browser extends Component {
     this.sortTemplates = this.sortTemplates.bind(this);
     this.handlePageChange = this.handlePageChange.bind(this);
 
+    const userIsPAYG = PAYG_PLAN_NAMES.indexOf(props.userType) !== -1;
+
     this.state = {
       filter: this.filter.getFilter(),
       sortTemplatesBy: props.userType === 'Free' ? 'free-first' : 'newest',
       templateOptions: {
-        costType: 'plan'
+        costType: userIsPAYG ? 'price' : 'plan'
       }
     };
   }
@@ -75,11 +78,19 @@ class Browser extends Component {
     this.setState({sortTemplatesBy: sortType});
   }
 
+  renderCostSwitch () {
+    if (this.props.userType !== 'guest') {return null}
+    return <CostSwitch
+      onChange={ this.handleCostTypeChange }
+      value={ this.state.templateOptions.costType } />
+  }
+
   render() {
     const tags = this.getTags();
     const filteredTemplates = this.getFilteredTemplates();
     const page = this.state.page || 1;
     const templates = PaginationPane.paginate(filteredTemplates, page)
+    const costSwitch = this.renderCostSwitch();
 
     return (
       <div className='reactTemplateBrowser-Browser browser'>
@@ -96,9 +107,7 @@ class Browser extends Component {
           <PlanChooser
             onChange={ this.setFilterPlanName }
             value={ this.state.filter.plan } />
-          <CostSwitch
-            onChange={ this.handleCostTypeChange }
-            value={ this.state.templateOptions.costType } />
+          { costSwitch }
         </div>
 
         <PaginationPane
@@ -124,7 +133,8 @@ class Browser extends Component {
 }
 
 Browser.defaultProps = {
-  templates: []
+  templates: [],
+  userType: 'guest'
 };
 
 export default Browser;