fix: hide subscription marketing on iOS (#1929)

2022-11-02 12:07:26 -05:00
parent f3e2d80b44
commit 35b21b21ce
13 changed files with 100 additions and 42 deletions
--- a/packages/web/src/javascripts/Application/Application.ts
+++ b/packages/web/src/javascripts/Application/Application.ts
@@ -203,6 +203,14 @@ export class WebApplication extends SNApplication implements WebApplicationInter
    return undefined
  }

+  isNativeIOS() {
+    return this.isNativeMobileWeb() && this.platform === Platform.Ios
+  }
+
+  get hideSubscriptionMarketing() {
+    return this.isNativeIOS()
+  }
+
  mobileDevice(): MobileDeviceInterface {
    if (!this.isNativeMobileWeb()) {
      throw Error('Attempting to access device as mobile device on non mobile platform')
--- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
@@ -110,6 +110,7 @@ const ContentListView: FunctionComponent<Props> = ({
    renderedItems,
    items,
    searchBarElement,
+    isCurrentNoteTemplate,
  } = itemListController

  const { selectedUuids, selectNextItem, selectPreviousItem } = selectionController
@@ -245,13 +246,13 @@ const ContentListView: FunctionComponent<Props> = ({
  )

  useEffect(() => {
-    const hasEditorPane = selectedUuids.size > 0
+    const hasEditorPane = selectedUuids.size > 0 || renderedItems.length === 0 || isCurrentNoteTemplate
    if (!hasEditorPane) {
      itemsViewPanelRef.current?.style.removeProperty('width')
    }
-  }, [selectedUuids, itemsViewPanelRef])
+  }, [selectedUuids, itemsViewPanelRef, isCurrentNoteTemplate, renderedItems])

-  const hasEditorPane = selectedUuids.size > 0 || renderedItems.length === 0
+  const hasEditorPane = selectedUuids.size > 0 || renderedItems.length === 0 || isCurrentNoteTemplate

  return (
    <div
--- a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
@@ -212,14 +212,17 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
        {!DailyEntryModeEnabled &&
          'Create powerful workflows and organizational layouts with per-tag display preferences.'}
      </p>
-      <Button
-        primary
-        small
-        className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
-        onClick={() => application.openPurchaseFlow()}
-      >
-        Upgrade Features
-      </Button>
+
+      {!application.hideSubscriptionMarketing && (
+        <Button
+          primary
+          small
+          className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
+          onClick={() => application.openPurchaseFlow()}
+        >
+          Upgrade Features
+        </Button>
+      )}
    </div>
  )

--- a/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx
+++ b/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx
@@ -12,6 +12,10 @@ const UpgradeNow = ({ application, featuresController }: Props) => {
  const shouldShowCTA = !featuresController.hasFolders
  const hasAccount = application.hasAccount()

+  if (hasAccount && application.hideSubscriptionMarketing) {
+    return null
+  }
+
  return shouldShowCTA ? (
    <div className="flex h-full items-center px-2">
      <button
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -286,11 +286,13 @@ const NotesOptions = ({

  const switchClassNames = classNames(textClassNames, defaultClassNames, 'justify-between')

+  const firstItemClass = 'pt-4'
+
  return (
    <>
      {notes.length === 1 && (
        <>
-          <button className={defaultClassNames} onClick={openRevisionHistoryModal}>
+          <button className={classNames(defaultClassNames, firstItemClass)} onClick={openRevisionHistoryModal}>
            <Icon type="history" className={iconClass} />
            Note history
          </button>
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
@@ -31,12 +31,14 @@ const NoSubscription: FunctionComponent<Props> = ({ application }) => {
      <Text>You don't have a Standard Notes subscription yet.</Text>
      {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
      {purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}
-      <div className="flex">
-        <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
-        {application.hasAccount() && (
-          <Button className="mt-3 min-w-20" primary label="Subscribe" onClick={onPurchaseClick} />
-        )}
-      </div>
+      {!application.hideSubscriptionMarketing && (
+        <div className="flex">
+          <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
+          {application.hasAccount() && (
+            <Button className="mt-3 min-w-20" primary label="Subscribe" onClick={onPurchaseClick} />
+          )}
+        </div>
+      )}
    </>
  )
 }
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/NoProSubscription.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/NoProSubscription.tsx
@@ -34,12 +34,15 @@ const NoProSubscription: FunctionComponent<Props> = ({ application }) => {
      </Text>
      {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
      {purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}
-      <div className="flex">
-        <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
-        {application.hasAccount() && (
-          <Button className="mt-3 min-w-20" primary label="Upgrade" onClick={onPurchaseClick} />
-        )}
-      </div>
+
+      {!application.hideSubscriptionMarketing && (
+        <div className="flex">
+          <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
+          {application.hasAccount() && (
+            <Button className="mt-3 min-w-20" primary label="Upgrade" onClick={onPurchaseClick} />
+          )}
+        </div>
+      )}
    </>
  )
 }
--- a/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
+++ b/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
@@ -61,15 +61,17 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
            To take advantage of <span className="font-semibold">{featureName}</span> and other advanced features,
            upgrade your current plan.
          </AlertDialogDescription>
-          <div className="p-4">
-            <button
-              onClick={handleClick}
-              className="no-border w-full cursor-pointer rounded bg-info py-2 font-bold text-info-contrast hover:brightness-125 focus:brightness-125"
-              ref={plansButtonRef}
-            >
-              Upgrade
-            </button>
-          </div>
+          {!application.hideSubscriptionMarketing && (
+            <div className="p-4">
+              <button
+                onClick={handleClick}
+                className="no-border w-full cursor-pointer rounded bg-info py-2 font-bold text-info-contrast hover:brightness-125 focus:brightness-125"
+                ref={plansButtonRef}
+              >
+                Upgrade
+              </button>
+            </div>
+          )}
        </div>
      </div>
    </AlertDialog>
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
@@ -2,6 +2,7 @@ import { WebApplication } from '@/Application/Application'
 import { FunctionComponent, MouseEventHandler, useCallback } from 'react'
 import Switch from '@/Components/Switch/Switch'
 import { isMobileScreen } from '@/Utils'
+import { classNames } from '@/Utils/ConcatenateClassNames'

 type Props = {
  application: WebApplication
@@ -29,7 +30,11 @@ const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onCl

  return (
    <button
-      className="group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2"
+      className={classNames(
+        'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left',
+        'text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2',
+        'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
+      )}
      onClick={toggle}
    >
      <div className="flex items-center">Focused Writing</div>
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/PanelSettingsSection.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/PanelSettingsSection.tsx
@@ -53,7 +53,7 @@ const PanelSettingsSection = ({ application }: Props) => {
  }, [application])

  return (
-    <div className="hidden text-sm md:block pointer-coarse:md-only:hidden pointer-coarse:lg-only:hidden">
+    <div className="hidden md:block pointer-coarse:md-only:hidden pointer-coarse:lg-only:hidden">
      <MenuItem
        type={MenuItemType.SwitchButton}
        className="py-1 hover:bg-contrast focus:bg-info-backdrop"
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -21,6 +21,7 @@ import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import PanelSettingsSection from './PanelSettingsSection'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
+import { classNames } from '@/Utils/ConcatenateClassNames'

 const focusModeAnimationDuration = 1255

@@ -173,7 +174,11 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
          <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Tools</div>
          {toggleableComponents.map((component) => (
            <button
-              className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
+              className={classNames(
+                'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left',
+                'text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none',
+                'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
+              )}
              onClick={() => {
                toggleComponent(component)
              }}
@@ -191,7 +196,11 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
      )}
      <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Appearance</div>
      <button
-        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
+        className={classNames(
+          'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left',
+          'text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none',
+          'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
+        )}
        onClick={toggleDefaultTheme}
        ref={defaultThemeButtonRef}
      >
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -8,6 +8,7 @@ import { ThemeItem } from './ThemeItem'
 import RadioIndicator from '../Radio/RadioIndicator'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
 import { isMobileScreen } from '@/Utils'
+import { classNames } from '@/Utils/ConcatenateClassNames'

 type Props = {
  item: ThemeItem
@@ -54,9 +55,11 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {

  return (
    <button
-      className={
-        'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2 md:text-sm'
-      }
+      className={classNames(
+        'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5',
+        'text-left text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2',
+        'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
+      )}
      onClick={toggleTheme}
    >
      {item.component?.isLayerable() ? (
--- a/packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts
+++ b/packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts
@@ -386,7 +386,12 @@ export class ItemListController
   * In some cases we want to keep the selected item open even if it doesn't appear in results,
   * for example if you are inside tag Foo and remove tag Foo from the note, we want to keep the note open.
   */
-  private shouldCloseActiveItem = (activeItem: SNNote | FileItem | undefined) => {
+  private shouldCloseActiveItem = (activeItem: SNNote | FileItem | undefined, source?: ItemsReloadSource) => {
+    if (source === ItemsReloadSource.UserTriggeredTagChange) {
+      log(LoggingDomain.Selection, 'shouldCloseActiveItem true due to ItemsReloadSource.UserTriggeredTagChange')
+      return true
+    }
+
    const activeItemExistsInUpdatedResults = this.items.find((item) => item.uuid === activeItem?.uuid)

    const closeBecauseActiveItemIsFileAndDoesntExistInUpdatedResults =
@@ -417,6 +422,7 @@ export class ItemListController
      return true
    }

+    log(LoggingDomain.Selection, 'shouldCloseActiveItem false')
    return false
  }

@@ -462,7 +468,7 @@ export class ItemListController

    const activeItem = activeController?.item

-    if (activeController && activeItem && this.shouldCloseActiveItem(activeItem)) {
+    if (activeController && activeItem && this.shouldCloseActiveItem(activeItem, itemsReloadSource)) {
      this.closeItemController(activeController)

      this.selectionController.deselectItem(activeItem)
@@ -835,6 +841,16 @@ export class ItemListController
    this.application.getDesktopService()?.searchText(this.noteFilterText)
  }

+  get isCurrentNoteTemplate(): boolean {
+    const controller = this.getActiveItemController()
+
+    if (!controller) {
+      return false
+    }
+
+    return controller instanceof NoteViewController && controller.isTemplateNote
+  }
+
  public async insertCurrentIfTemplate(): Promise<void> {
    const controller = this.getActiveItemController()