Merge branch 'update/monetization' into develop

2 files changed, 64 insertions, 0 deletions

diff --git a/src/features/spellchecker/index.js b/src/features/spellchecker/index.js
new file mode 100644
index 000000000..8b3fb7e00
--- /dev/null
+++ b/src/features/spellchecker/index.js
@@ -0,0 +1,38 @@
+import { autorun, reaction } from 'mobx';
+
+const debug = require('debug')('Franz:feature:spellchecker');
+
+const DEFAULT_IS_PREMIUM_FEATURE = true;
+
+export const config = {
+  isPremiumFeature: DEFAULT_IS_PREMIUM_FEATURE,
+};
+
+export default function init(stores) {
+  reaction(
+    () => stores.features.features.isSpellcheckerPremiumFeature,
+    (enabled, r) => {
+      if (enabled) {
+        debug('Initializing `spellchecker` feature');
+
+        // Dispose the reaction to run this only once
+        r.dispose();
+
+        const { isSpellcheckerPremiumFeature } = stores.features.features;
+
+        config.isPremiumFeature = isSpellcheckerPremiumFeature !== undefined ? isSpellcheckerPremiumFeature : DEFAULT_IS_PREMIUM_FEATURE;
+
+        autorun(() => {
+          if (!stores.user.data.isPremium && config.isPremiumFeature) {
+            debug('Override settings.spellcheckerEnabled flag to false');
+
+            Object.assign(stores.settings.all.app, {
+              enableSpellchecker: false,
+            });
+          }
+        });
+      }
+    },
+  );
+}
+
diff --git a/src/features/spellchecker/styles.js b/src/features/spellchecker/styles.js
new file mode 100644
index 000000000..097368d9a
--- /dev/null
+++ b/src/features/spellchecker/styles.js
@@ -0,0 +1,26 @@
+export default (theme) => {
+  console.log(theme);
+  return ({
+    container: {
+      background: theme.colorBackground,
+      position: 'absolute',
+      top: 0,
+      width: '100%',
+      display: 'flex',
+      'flex-direction': 'column',
+      'align-items': 'center',
+      'justify-content': 'center',
+      'z-index': 150,
+    },
+    headline: {
+      color: theme.colorHeadline,
+      margin: [25, 0, 40],
+      'max-width': 500,
+      'text-align': 'center',
+      'line-height': '1.3em',
+    },
+    button: {
+      margin: [40, 0, 20],
+    },
+  });
+};