feat: show all themes and premium icon if not entitled (#854)

standardnotes · Feb 8, 2022 · 139853a · 139853a
1 parent 7f5f0d9
commit 139853a
Show file tree

Hide file tree

Showing 7 changed files with 398 additions and 333 deletions.
diff --git a/app/assets/javascripts/components/ApplicationView.tsx b/app/assets/javascripts/components/ApplicationView.tsx
@@ -23,6 +23,7 @@ import { NotesContextMenu } from '@/components/NotesContextMenu';
 import { PurchaseFlowWrapper } from '@/purchaseFlow/PurchaseFlowWrapper';
 import { render } from 'preact';
 import { PermissionsModal } from './PermissionsModal';
+import { PremiumModalProvider } from './Premium';
 
 type Props = {
   application: WebApplication;
@@ -196,63 +197,65 @@ export class ApplicationView extends PureComponent<Props, State> {
 
   render() {
     return (
-      <div className={this.platformString + ' main-ui-view sn-component'}>
-        {!this.state.needsUnlock && this.state.launched && (
-          <div
-            id="app"
-            className={this.state.appClass + ' app app-column-container'}
-          >
-            <Navigation application={this.application} />
+      <PremiumModalProvider state={this.appState.features}>
+        <div className={this.platformString + ' main-ui-view sn-component'}>
+          {!this.state.needsUnlock && this.state.launched && (
+            <div
+              id="app"
+              className={this.state.appClass + ' app app-column-container'}
+            >
+              <Navigation application={this.application} />
 
-            <NotesView
+              <NotesView
+                application={this.application}
+                appState={this.appState}
+              />
+
+              <NoteGroupView application={this.application} />
+            </div>
+          )}
+
+          {!this.state.needsUnlock && this.state.launched && (
+            <Footer
               application={this.application}
-              appState={this.appState}
+              applicationGroup={this.props.mainApplicationGroup}
             />
+          )}
 
-            <NoteGroupView application={this.application} />
-          </div>
-        )}
-
-        {!this.state.needsUnlock && this.state.launched && (
-          <Footer
+          <SessionsModal
             application={this.application}
-            applicationGroup={this.props.mainApplicationGroup}
+            appState={this.appState}
           />
-        )}
 
-        <SessionsModal
-          application={this.application}
-          appState={this.appState}
-        />
-
-        <PreferencesViewWrapper
-          appState={this.appState}
-          application={this.application}
-        />
+          <PreferencesViewWrapper
+            appState={this.appState}
+            application={this.application}
+          />
 
-        {this.state.challenges.map((challenge) => {
-          return (
-            <div className="sk-modal">
-              <ChallengeModal
-                key={challenge.id}
-                application={this.application}
-                challenge={challenge}
-                onDismiss={this.removeChallenge}
-              />
-            </div>
-          );
-        })}
+          {this.state.challenges.map((challenge) => {
+            return (
+              <div className="sk-modal">
+                <ChallengeModal
+                  key={challenge.id}
+                  application={this.application}
+                  challenge={challenge}
+                  onDismiss={this.removeChallenge}
+                />
+              </div>
+            );
+          })}
 
-        <NotesContextMenu
-          application={this.application}
-          appState={this.appState}
-        />
+          <NotesContextMenu
+            application={this.application}
+            appState={this.appState}
+          />
 
-        <PurchaseFlowWrapper
-          application={this.application}
-          appState={this.appState}
-        />
-      </div>
+          <PurchaseFlowWrapper
+            application={this.application}
+            appState={this.appState}
+          />
+        </div>
+      </PremiumModalProvider>
     );
   }
 }
diff --git a/app/assets/javascripts/components/Navigation.tsx b/app/assets/javascripts/components/Navigation.tsx
@@ -6,7 +6,6 @@ import { ApplicationEvent, PrefKey } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
-import { PremiumModalProvider } from './Premium';
 import {
   PanelSide,
   ResizeFinishCallback,
@@ -51,42 +50,40 @@ export const Navigation: FunctionComponent<Props> = observer(
     }, [appState]);
 
     return (
-      <PremiumModalProvider state={appState.features}>
-        <div
-          id="navigation"
-          className="sn-component section app-column app-column-first"
-          data-aria-label="Navigation"
-          ref={setRef}
-        >
-          <div id="navigation-content" className="content">
-            <div className="section-title-bar">
-              <div className="section-title-bar-header">
-                <div className="sk-h3 title">
-                  <span className="sk-bold">Views</span>
-                </div>
+      <div
+        id="navigation"
+        className="sn-component section app-column app-column-first"
+        data-aria-label="Navigation"
+        ref={setRef}
+      >
+        <div id="navigation-content" className="content">
+          <div className="section-title-bar">
+            <div className="section-title-bar-header">
+              <div className="sk-h3 title">
+                <span className="sk-bold">Views</span>
               </div>
             </div>
-            <div className="scrollable">
-              <SmartTagsSection appState={appState} />
-              <TagsSection appState={appState} />
-            </div>
           </div>
-          {ref && (
-            <PanelResizer
-              collapsable={true}
-              defaultWidth={150}
-              panel={ref}
-              hoverable={true}
-              side={PanelSide.Right}
-              type={PanelResizeType.WidthOnly}
-              resizeFinishCallback={panelResizeFinishCallback}
-              widthEventCallback={panelWidthEventCallback}
-              width={panelWidth}
-              left={0}
-            />
-          )}
+          <div className="scrollable">
+            <SmartTagsSection appState={appState} />
+            <TagsSection appState={appState} />
+          </div>
         </div>
-      </PremiumModalProvider>
+        {ref && (
+          <PanelResizer
+            collapsable={true}
+            defaultWidth={150}
+            panel={ref}
+            hoverable={true}
+            side={PanelSide.Right}
+            type={PanelResizeType.WidthOnly}
+            resizeFinishCallback={panelResizeFinishCallback}
+            widthEventCallback={panelWidthEventCallback}
+            width={panelWidth}
+            left={0}
+          />
+        )}
+      </div>
     );
   }
 );
diff --git a/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx b/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx
@@ -29,7 +29,6 @@ import {
 import { FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { Icon } from '../Icon';
-import { PremiumModalProvider } from '../Premium';
 import { createEditorMenuGroups } from './changeEditor/createEditorMenuGroups';
 import { EditorAccordionMenu } from './changeEditor/EditorAccordionMenu';
 
@@ -273,16 +272,14 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
         }}
         className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
       >
-        <PremiumModalProvider state={appState.features}>
-          <EditorAccordionMenu
-            application={application}
-            closeOnBlur={closeOnBlur}
-            currentEditor={selectedEditor}
-            groups={editorMenuGroups}
-            isOpen={changeEditorMenuOpen}
-            selectComponent={selectComponent}
-          />
-        </PremiumModalProvider>
+        <EditorAccordionMenu
+          application={application}
+          closeOnBlur={closeOnBlur}
+          currentEditor={selectedEditor}
+          groups={editorMenuGroups}
+          isOpen={changeEditorMenuOpen}
+          selectComponent={selectComponent}
+        />
       </DisclosurePanel>
     </Disclosure>
   );

diff --git a/app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx b/app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx
@@ -1,10 +1,10 @@
 import { WebApplication } from '@/ui_models/application';
 import { FeatureStatus, FeatureIdentifier } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
-import { useCallback, useState } from 'preact/hooks';
+import { useCallback } from 'preact/hooks';
 import { JSXInternal } from 'preact/src/jsx';
 import { Icon } from '../Icon';
-import { PremiumFeaturesModal } from '../PremiumFeaturesModal';
+import { usePremiumModal } from '../Premium';
 import { Switch } from '../Switch';
 
 type Props = {
@@ -20,7 +20,7 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
   onClose,
   isEnabled,
 }) => {
-  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const premiumModal = usePremiumModal();
   const isEntitled =
     application.getFeatureStatus(FeatureIdentifier.FocusMode) ===
     FeatureStatus.Entitled;
@@ -33,10 +33,10 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
         onToggle(!isEnabled);
         onClose();
       } else {
-        setShowUpgradeModal(true);
+        premiumModal.activate('Focused Writing');
       }
     },
-    [isEntitled, isEnabled, onToggle, setShowUpgradeModal, onClose]
+    [isEntitled, onToggle, isEnabled, onClose, premiumModal]
   );
 
   return (
@@ -57,11 +57,6 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
           </div>
         )}
       </button>
-      <PremiumFeaturesModal
-        showModal={showUpgradeModal}
-        featureName="Focus Mode"
-        onClose={() => setShowUpgradeModal(false)}
-      />
     </>
   );
 };