#654 Require pro subscription on CSS

Author: whimet

src/components/ContentWrap.jsx

@@ -19,6 +19,7 @@ import codeService from '../services/code_service';
 import { alertsService } from '../notifications';
 import { Popover } from './PopOver.jsx';
 import { SharePanel } from './SharePanel.jsx';
+import userService from '../services/user_service';
 
 const minCodeWrapSize = 33;
 
@@ -775,6 +776,17 @@ export default class ContentWrap extends Component {
 		}
 	}
 
+
+	onCSSActiviation() {
+		if(!window.user) {
+			this.props.onLogin();
+		} else if(userService.isPro()) {
+			return true;
+		} else {
+			this.props.onProFeature();
+		}
+	}
+
 	toolboxUpdateToApp(param) {
 		trackEvent('ui', 'code', 'toolbox');
 		const code = this.cm.js.getValue();
@@ -863,7 +875,7 @@ export default class ContentWrap extends Component {
 								{/* Inlet(scope.cm.js); */}
 							</div>
 						</div>
-						<div label="CSS">
+						<div label="CSS" onBeforeActiviation={this.onCSSActiviation.bind(this)}>
 							<div
 								data-code-wrap-id="1"
 								id="cssCodeEl"

src/components/Tabs.jsx

@@ -18,6 +18,14 @@ class Tabs extends Component {
 		};
 	};
 	onClickTabItem = async (tab) => {
+		const child = this.props.children.find(c => c.props.label === tab);
+		if(child && child.props.onBeforeActiviation) {
+			const result = child.props.onBeforeActiviation();
+			if(!result) {
+				return;
+			}
+		}
+
 		await this.setState({ activeTab: tab });
 		this.props.onChange(tab);
 	};

src/components/app.jsx

@@ -1433,6 +1433,7 @@ BookLibService.Borrow(id) {
 						prefs={this.state.prefs}
 						onEditorFocus={this.editorFocusHandler.bind(this)}
 						onSplitUpdate={this.splitUpdateHandler.bind(this)}
+						onProFeature={this.proBtnClickHandler.bind(this)}
 					/>
 					{this.isEmbed ? null : (
 						<Footer