diff --git a/src/components/Template.css b/src/components/Template.css
index 72d229d..09c86f1 100644
--- 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
index 9e53bcd..f4b3cc3 100644
--- 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 = ;
+ >Upgrade;
const regularOutput = [
Duration: { template.duration },
{ cost }
];
+ const upgradeMessage = { upgradeLink } for full access;
const hoverOutput = (() => {
switch (true) {
case this.getIsTrial(this.props.userType, template.plan):
- return or { upgradeLink } for full access;
- // 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
index 097d345..a0d04f9 100644
--- 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();
+
+ component.setProps({isHovered: true});
+
+ expect(component.text()).toContain('Upgrade for full access');
+ });
});
describe('with PAYG user', () => {