feat: handle basic routes (#1784)

packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx

@@ -1,8 +1,8 @@
 import { ApplicationGroup } from '@/Application/ApplicationGroup'
-import { getPlatformString, getWindowUrlParams } from '@/Utils'
+import { getPlatformString } from '@/Utils'
 import { ApplicationEvent, Challenge, removeFromArray, WebAppEvent } from '@standardnotes/snjs'
 import { PANEL_NAME_NOTES, PANEL_NAME_NAVIGATION } from '@/Constants/Constants'
-import { alertDialog } from '@standardnotes/ui-services'
+import { alertDialog, RouteType } from '@standardnotes/ui-services'
 import { WebApplication } from '@/Application/Application'
 import Navigation from '@/Components/Navigation/Navigation'
 import NoteGroupView from '@/Components/NoteGroupView/NoteGroupView'
@@ -79,8 +79,13 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
     setNeedsUnlock(application.hasPasscode())
   }, [application])
 
-  const handleDemoSignInFromParams = useCallback(() => {
-    const token = getWindowUrlParams().get('demo-token')
+  const handleDemoSignInFromParamsIfApplicable = useCallback(() => {
+    const route = application.routeService.getRoute()
+    if (route.type !== RouteType.Demo) {
+      return
+    }
+
+    const token = route.demoParams.token
     if (!token || application.hasAccount()) {
       return
     }
@@ -91,8 +96,8 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
   const onAppLaunch = useCallback(() => {
     setLaunched(true)
     setNeedsUnlock(false)
-    handleDemoSignInFromParams()
-  }, [handleDemoSignInFromParams])
+    handleDemoSignInFromParamsIfApplicable()
+  }, [handleDemoSignInFromParamsIfApplicable])
 
   useEffect(() => {
     if (application.isStarted()) {

packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx

@@ -25,7 +25,7 @@ const UpgradeNow = ({ application, featuresController }: Props) => {
           application.getViewControllerManager().purchaseFlowController.openPurchaseFlow()
         }}
       >
-        Upgrade now
+        {hasAccount ? 'Unlock features' : 'Sign up to sync'}
       </button>
     </div>
   ) : null

packages/web/src/javascripts/Components/NoAccountWarning/NoAccountWarningContent.tsx

@@ -26,7 +26,9 @@ const NoAccountWarningContent = ({ accountMenuController, noAccountWarningContro
   return (
     <div className="mt-4 grid grid-cols-1 rounded-md border border-border p-4">
       <h1 className="sk-h3 m-0 text-sm font-semibold">Data not backed up</h1>
-      <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">Sign in or register to back up your notes.</p>
+      <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">
+        Sign in or register to sync your notes to your other devices with end-to-end encryption.
+      </p>
       <Button primary small className="col-start-1 col-end-3 mt-3 justify-self-start" onClick={showAccountMenu}>
         Open Account menu
       </Button>

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/InvitationsList.tsx

@@ -46,7 +46,7 @@ const InvitationsList = ({ subscriptionState, application }: Props) => {
   }
 
   if (usedInvitationsCount === 0) {
-    return <Text className="mt-1 mb-3">Make your first subscription invitation below.</Text>
+    return <Text className="mt-1 mb-3">Make your first subscription invite below.</Text>
   }
 
   return (

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/NoProSubscription.tsx

@@ -30,7 +30,7 @@ const NoProSubscription: FunctionComponent<Props> = ({ application }) => {
     <>
       <Text>
         Subscription sharing is available only on the <span className="font-bold">Professional</span> plan. Please
-        upgrade in order to share subscription.
+        upgrade in order to share your subscription.
       </Text>
       {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
       {purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}

packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts

@@ -3,21 +3,7 @@ import { IconType } from '@standardnotes/snjs'
 import { WebApplication } from '@/Application/Application'
 import { PackageProvider } from './Panes/General/Advanced/Packages/Provider/PackageProvider'
 import { securityPrefsHasBubble } from './Panes/Security/securityPrefsHasBubble'
-
-const PREFERENCE_IDS = [
-  'general',
-  'account',
-  'security',
-  'appearance',
-  'backups',
-  'listed',
-  'shortcuts',
-  'accessibility',
-  'get-free-month',
-  'help-feedback',
-] as const
-
-export type PreferenceId = typeof PREFERENCE_IDS[number]
+import { PreferenceId } from '@standardnotes/ui-services'
 
 interface PreferencesMenuItem {
   readonly id: PreferenceId

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -4,7 +4,8 @@ import styled from 'styled-components'
 import Dropdown from '../Dropdown/Dropdown'
 import { DropdownItem } from '../Dropdown/DropdownItem'
 import PreferencesMenuItem from './PreferencesComponents/MenuItem'
-import { PreferenceId, PreferencesMenu } from './PreferencesMenu'
+import { PreferencesMenu } from './PreferencesMenu'
+import { PreferenceId } from '@standardnotes/ui-services'
 
 type Props = {
   menu: PreferencesMenu

packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowFunctions.ts

@@ -1,24 +1,30 @@
 import { WebApplication } from '@/Application/Application'
-import { getWindowUrlParams, isDesktopApplication } from '@/Utils'
+import { isDesktopApplication } from '@/Utils'
+import { RouteType } from '@standardnotes/ui-services'
 
 export const getPurchaseFlowUrl = async (application: WebApplication): Promise<string | undefined> => {
   const currentUrl = window.location.origin
   const successUrl = isDesktopApplication() ? 'standardnotes://' : currentUrl
+
   if (application.noAccount()) {
     return `${window.purchaseUrl}/offline?&success_url=${successUrl}`
   }
+
   const token = await application.getNewSubscriptionToken()
   if (token) {
     return `${window.purchaseUrl}?subscription_token=${token}&success_url=${successUrl}`
   }
+
   return undefined
 }
 
 export const loadPurchaseFlowUrl = async (application: WebApplication): Promise<boolean> => {
   const url = await getPurchaseFlowUrl(application)
-  const params = getWindowUrlParams()
-  const period = params.get('period') ? `&period=${params.get('period')}` : ''
-  const plan = params.get('plan') ? `&plan=${params.get('plan')}` : ''
+  const route = application.routeService.getRoute()
+  const params = route.type === RouteType.Purchase ? route.purchaseParams : { period: null, plan: null }
+  const period = params.period ? `&period=${params.period}` : ''
+  const plan = params.plan ? `&plan=${params.plan}` : ''
+
   if (url) {
     const finalUrl = `${url}${period}${plan}`
 
@@ -31,5 +37,6 @@ export const loadPurchaseFlowUrl = async (application: WebApplication): Promise<
 
     return true
   }
+
   return false
 }