Merge pull request #13 from flixpressllc/url-hash-to-display-prices

add option for cost type default
flixpressllc · Oct 11, 2017 · e553099 · e553099
2 parents 1b873b4 + 50e3b1e
commit e553099
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 15 deletions.
diff --git a/public/index.html b/public/index.html
@@ -69,10 +69,37 @@
     function openInCbox(id, type){
       alert('Would have opened in colorbox on server: ' + id + ' ' + type);
     }
-    initTemplateBrowser({
-      divId: 'root',
-      onTemplateOpen: openInCbox,
-      userType: 'Free'
-    })
+
+    function firstUpper(string) {
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+
+    var userTypes = [
+      'guest',
+      'Free',
+      'Personal',
+      'Expert',
+      'Business',
+      'Enterprise',
+      'Pay As You Go',
+      'Reseller',
+    ];
+    var initFunctions = [];
+
+    userTypes.map( function (currentUserType) {
+      var functionName = 'initAs' + firstUpper(currentUserType.replace(/ /g, ''));
+      initFunctions.push(functionName);
+
+      window[functionName] = function () {
+        console.log('initializing as ' + currentUserType);
+        initTemplateBrowser({
+          divId: 'root',
+          onTemplateOpen: openInCbox,
+          userType: currentUserType,
+        });
+      };
+    });
+
+    initAsFree();
   </script>
 </html>
diff --git a/src/components/Browser.js b/src/components/Browser.js
@@ -2,7 +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, DEFAULT_PAGE_SIZE } from '../stores/app-settings';
+import { PAYG_PLAN_NAMES, DEFAULT_PAGE_SIZE, ALL_PLAN_NAMES } from '../stores/app-settings';
 import { clone } from '../helpers/ObjectHelpers';
 
 import CostSwitch from './CostSwitch';
@@ -16,6 +16,18 @@ import '../helpers/eventPolyfills';
 
 import './Browser.css';
 
+function determineCostType(userType, preferredCostType) {
+  const userIsPAYG = PAYG_PLAN_NAMES.indexOf(userType) !== -1;
+  const userIsGuest = ALL_PLAN_NAMES.indexOf(userType) === -1;
+  const costTypes = ['price', 'plan'];
+  const preferredIsAvailable = (costTypes.indexOf(preferredCostType) > -1);
+
+  if (userIsGuest) {
+    return preferredIsAvailable ? preferredCostType : 'plan';
+  } else {
+    return userIsPAYG ? 'price' : 'plan';
+  }
+}
 
 class Browser extends Component {
 
@@ -40,13 +52,11 @@ class Browser extends Component {
       this.filter.setFilter('tags','');
     }
 
-    const userIsPAYG = PAYG_PLAN_NAMES.indexOf(props.userType) !== -1;
-
     this.state = {
       filter: this.filter.getFilter(),
       sortTemplatesBy: props.userType === 'Free' ? 'free-first' : 'newest',
       templateOptions: {
-        costType: userIsPAYG ? 'price' : 'plan'
+        costType: determineCostType(props.userType, props.preferredCostType)
       }
     };
   }
@@ -189,7 +199,7 @@ class Browser extends Component {
     if (this.props.userType !== 'guest') {return null}
     return <CostSwitch
       onChange={ this.handleCostTypeChange }
-      value={ this.state.templateOptions.costType } />
+      costType={ this.state.templateOptions.costType } />
   }
 
   renderSortSelectorOrGroupEscape () {

diff --git a/src/components/Browser.spec.js b/src/components/Browser.spec.js
@@ -14,11 +14,59 @@ it('renders without crashing', () => {
 
 it('creates a tag pane', () => {
   const app = shallow(<Browser templates={ TEST_TEMPLATES } />);
-
   expect(app.find('TagPane').length).toBe(1);
 });
 
 it('creates a template pane', ()=>{
   const app = shallow(<Browser templates={ TEST_TEMPLATES } />);
   expect(app.find('TemplatePane').length).toBe(1);
 });
+
+describe('cost type', () => {
+  describe('when user is a guest', () => {
+    it('defaults to "plan"', () => {
+      const app = shallow(<Browser templates={ TEST_TEMPLATES } userType="guest" />);
+      expect(app.state('templateOptions').costType).toEqual('plan');
+    });
+    it('can be overwritten with "preferredCostType"', () => {
+      const app = shallow(<Browser
+        templates={ TEST_TEMPLATES }
+        preferredCostType="price"
+        userType="guest" />);
+      expect(app.state('templateOptions').costType).toEqual('price');
+    });
+    it('defaults to plan when "preferredCostType" is not valid', () => {
+      const app = shallow(<Browser
+        templates={ TEST_TEMPLATES }
+        preferredCostType="xprice"
+        userType="guest" />);
+      expect(app.state('templateOptions').costType).toEqual('plan');
+    });
+  });
+  describe('when user is on a plan', () => {
+    it('defaults to "plan"', () => {
+      const app = shallow(<Browser templates={ TEST_TEMPLATES } userType="Free" />);
+      expect(app.state('templateOptions').costType).toEqual('plan');
+    });
+    it('ignores "preferredCostType"', () => {
+      const app = shallow(<Browser
+        templates={ TEST_TEMPLATES }
+        preferredCostType="price"
+        userType="Free" />);
+      expect(app.state('templateOptions').costType).toEqual('plan');
+    });
+  });
+  describe('when user is PAYG', () => {
+    it('defaults to "price"', () => {
+      const app = shallow(<Browser templates={ TEST_TEMPLATES } userType="Reseller" />);
+      expect(app.state('templateOptions').costType).toEqual('price');
+    });
+    it('ignores "preferredCostType"', () => {
+      const app = shallow(<Browser
+        templates={ TEST_TEMPLATES }
+        preferredCostType="plan"
+        userType="Reseller" />);
+      expect(app.state('templateOptions').costType).toEqual('price');
+    });
+  });
+});
diff --git a/src/components/CostSwitch.js b/src/components/CostSwitch.js
@@ -3,7 +3,6 @@ import cx from 'classnames';
 import './CostSwitch.css';
 
 class CostSwitch extends Component {
-
   constructor (props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
@@ -16,7 +15,7 @@ class CostSwitch extends Component {
   }
 
   render(){
-    const costType = this.props.value;
+    const { costType } = this.props;
     return (
       <div className='reactTemplateBrowser-CostSwitch'>
         <span>Pricing shown as </span>
@@ -38,7 +37,7 @@ class CostSwitch extends Component {
             Prices
           </label>
         </div>
-        </div>
+      </div>
     );
   }
 }

diff --git a/src/index.js b/src/index.js
@@ -27,10 +27,11 @@ function initTemplateBrowser (options) {
     ReactDOM.render(
       <Browser templates={ templateData.getAll() }
         userType={ options.userType }
+        preferredCostType={ options.preferredCostType }
         onTemplateOpen={ options.onTemplateOpen } />,
       document.getElementById(options.divId)
     );
   })
 }
 
-window.initTemplateBrowser = initTemplateBrowser;
+window.initTemplateBrowser = initTemplateBrowser;