Upgrade message for disabled templates, too

flixpressllc · Nov 18, 2016 · 7605f06 · 7605f06
1 parent ed0a62f
commit 7605f06
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/src/components/Template.css b/src/components/Template.css
@@ -38,3 +38,21 @@
   letter-spacing: 0.05em;
   font-weight: bold;
 }
+
+.reactTemplateBrowser-Template-upgradeMessage {
+  display: block;
+  text-align: center;
+}
+
+.reactTemplateBrowser-Template-upgradeLink {
+  display: inline-block;
+  color: white;
+  padding: 1px 4px;
+  margin: -1px auto;
+  background: #b70000;
+  border-radius: 3px;
+}
+
+.reactTemplateBrowser-Template-upgradeLink:hover {
+  background: #018cB7;
+}
diff --git a/src/components/Template.js b/src/components/Template.js
@@ -114,21 +114,21 @@ class Template extends Component {
     const template = this.props.template;
     const cost = this.props.options.costType === 'plan' ?
       `Plan: ${ template.plan }` : `Pay As You Go: ${ template.price }`;
-    const upgradeLink = <button 
+    const upgradeLink = <span 
       className='reactTemplateBrowser-Template-upgradeLink'
       onMouseOver={ this.handleUpgradeHover }
       onMouseOut={ this.handleUpgradeUnhover }
-      >Upgrade</button>;
+      >Upgrade</span>;
     const regularOutput = [
       <span key='1' className='reactTemplateBrowser-Template-duration'>Duration: { template.duration }</span>,
       <span key='2' className='reactTemplateBrowser-Template-priceOrPlan'>{ cost }</span>
     ];
+    const upgradeMessage = <span className='reactTemplateBrowser-Template-upgradeMessage'>{ upgradeLink } for full access</span>;
     const hoverOutput = (() => {
       switch (true) {
         case this.getIsTrial(this.props.userType, template.plan):
-          return <span>or { upgradeLink } for full access</span>;
-        // case this.getIsDisabled(this.props.userType, template.plan):
-        //   return 'Click to preview only';
+        case this.getIsDisabled(this.props.userType, template.plan):
+          return upgradeMessage;
         default:
           return regularOutput;
       }

diff --git a/src/components/Template.spec.js b/src/components/Template.spec.js
@@ -96,7 +96,7 @@ describe('hover interactions', () => {
 
       component.setProps({isHovered: true});
 
-      expect(component.text()).toContain('or Upgrade for full access');
+      expect(component.text()).toContain('Upgrade for full access');
     });
 
     it('the call to action navigates to upgrade page', () => {
@@ -125,6 +125,14 @@ describe('hover interactions', () => {
       expect(component.text()).toContain('Click to preview only');
       expect(component.text()).not.toContain('ID:');
     });
+    it('changes the lower bar to call to action', () => {
+      const template = create('template', {plan: 'Expert'});
+      const component = shallow(<Template template={ template } userType={ 'Free' } />);
+
+      component.setProps({isHovered: true});
+
+      expect(component.text()).toContain('Upgrade for full access');
+    });
 
   });
   describe('with PAYG user', () => {