Add license requirement

src/components/options/CategorySkipOptionsComponent.tsx

@@ -6,6 +6,8 @@ import { Category, CategorySkipOption } from "../../types";
 
 import { getCategorySuffix } from "../../utils/categoryUtils";
 import ToggleOptionComponent, { ToggleOptionProps } from "./ToggleOptionComponent";
+import { fetchingChaptersAllowed } from "../../utils/licenseKey";
+import LockSvg from "../../svg-icons/lock_svg";
 
 export interface CategorySkipOptionsProps { 
     category: Category;
@@ -16,6 +18,7 @@ export interface CategorySkipOptionsProps {
 export interface CategorySkipOptionsState {
     color: string;
     previewColor: string;
+    hideChapter: boolean;
 }
 
 class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsProps, CategorySkipOptionsState> {
@@ -28,7 +31,14 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
         this.state = {
             color: props.defaultColor || Config.config.barTypes[this.props.category]?.color,
             previewColor: props.defaultPreviewColor || Config.config.barTypes["preview-" + this.props.category]?.color,
-        }
+            hideChapter: true
+        };
+
+        fetchingChaptersAllowed().then((allowed) => {
+            this.setState({
+                hideChapter: !allowed
+            });
+        })
     }
 
     render(): React.ReactElement {
@@ -52,12 +62,25 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
             }
         }
 
+        let extraClasses = "";
+        const disabled = this.props.category === "chapter" && this.state.hideChapter;
+        if (disabled) {
+            extraClasses += " disabled";
+
+            if (!Config.config.showUpsells) {
+                return <></>;
+            }
+        }
+
         return (
             <>
                 <tr id={this.props.category + "OptionsRow"}
-                    className="categoryTableElement">
+                    className={`categoryTableElement${extraClasses}`} >
                     <td id={this.props.category + "OptionName"}
                         className="categoryTableLabel">
+                            {disabled &&
+                                <LockSvg className="upsellButton" onClick={() => chrome.tabs.create({url: chrome.runtime.getURL('upsell/index.html')})}/>
+                            }
                             {chrome.i18n.getMessage("category_" + this.props.category)}
                     </td>
 
@@ -66,6 +89,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                         <select
                             className="optionsSelector"
                             defaultValue={defaultOption}
+                            disabled={disabled}
                             onChange={this.skipOptionSelected.bind(this)}>
                                 {this.getCategorySkipOptions()}
                         </select>
@@ -77,6 +101,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                             <input
                                 className="categoryColorTextBox option-text-box"
                                 type="color"
+                                disabled={disabled}
                                 onChange={(event) => this.setColorState(event, false)}
                                 value={this.state.color} />
                         </td>
@@ -96,7 +121,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                 </tr>
 
                 <tr id={this.props.category + "DescriptionRow"}
-                    className="small-description categoryTableDescription">
+                    className={`small-description categoryTableDescription${extraClasses}`}>
                         <td
                             colSpan={2}>
                             {chrome.i18n.getMessage("category_" + this.props.category + "_description")}
@@ -107,7 +132,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                         </td>
                 </tr>
                 
-                {this.getExtraOptionComponents(this.props.category)}
+                {this.getExtraOptionComponents(this.props.category, extraClasses, disabled)}
 
             </>
         );
@@ -191,15 +216,16 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
         }, 50);
     }
 
-    getExtraOptionComponents(category: string): JSX.Element[] {
+    getExtraOptionComponents(category: string, extraClasses: string, disabled: boolean): JSX.Element[] {
         const result = [];
         for (const option of this.getExtraOptions(category)) {
             result.push(
-                <tr key={option.configKey}>
+                <tr key={option.configKey} className={extraClasses}>
                     <td id={`${category}_${option.configKey}`} className="categoryExtraOptions">
                         <ToggleOptionComponent 
                             configKey={option.configKey} 
-                            label={option.label} 
+                            label={option.label}
+                            disabled={disabled}
                         />
                     </td>
                 </tr>

src/components/options/ToggleOptionComponent.tsx

@@ -5,6 +5,7 @@ import Config from "../../config";
 export interface ToggleOptionProps { 
     configKey: string;
     label: string;
+    disabled?: boolean;
 }
 
 export interface ToggleOptionState {
@@ -27,7 +28,11 @@ class ToggleOptionComponent extends React.Component<ToggleOptionProps, ToggleOpt
             <div>
                 <div className="switch-container">
                     <label className="switch">
-                        <input id={this.props.configKey} type="checkbox" checked={this.state.enabled} onChange={(e) => this.clicked(e)}/>
+                        <input id={this.props.configKey} 
+                            type="checkbox" 
+                            checked={this.state.enabled} 
+                            disabled={this.props.disabled} 
+                            onChange={(e) => this.clicked(e)}/>
                         <span className="slider round"></span>
                     </label>
                     <label className="switch-label" htmlFor={this.props.configKey}>