chore(release): publish

- @standardnotes/[email protected].0
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].0
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].0
 - @standardnotes/[email protected].0
 - @standardnotes/[email protected]
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].0

packages/api/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.20.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-13)
+
+### Features
+
+* iap ([#1996](https://github.com/standardnotes/app/issues/1996)) ([d519aca](https://github.com/standardnotes/app/commit/d519aca685b32f4b6f7079ba9562ecaf1a18aecb))
+
 ## [1.19.9](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-09)
 
 ### Bug Fixes

packages/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/api",
-  "version": "1.19.9",
+  "version": "1.20.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/api/src/Domain/Client/Subscription/SubscriptionApiOperations.ts

@@ -3,4 +3,5 @@ export enum SubscriptionApiOperations {
   CancelingInvite,
   ListingInvites,
   AcceptingInvite,
+  ConfirmAppleIAP,
 }

packages/api/src/Domain/Client/Subscription/SubscriptionApiService.ts

@@ -11,6 +11,8 @@ import { SubscriptionInviteAcceptResponse } from '../../Response/Subscription/Su
 import { SubscriptionApiServiceInterface } from './SubscriptionApiServiceInterface'
 import { SubscriptionApiOperations } from './SubscriptionApiOperations'
 import { Uuid } from '@standardnotes/common'
+import { AppleIAPConfirmResponse } from './../../Response/Subscription/AppleIAPConfirmResponse'
+import { AppleIAPConfirmRequestParams } from '../../Request'
 
 export class SubscriptionApiService implements SubscriptionApiServiceInterface {
   private operationsInProgress: Map<SubscriptionApiOperations, boolean>
@@ -31,11 +33,11 @@ export class SubscriptionApiService implements SubscriptionApiServiceInterface {
         [ApiEndpointParam.ApiVersion]: ApiVersion.v0,
       })
 
-      this.operationsInProgress.set(SubscriptionApiOperations.ListingInvites, false)
-
       return response
     } catch (error) {
       throw new ApiCallError(ErrorMessage.GenericFail)
+    } finally {
+      this.operationsInProgress.set(SubscriptionApiOperations.ListingInvites, false)
     }
   }
 
@@ -52,11 +54,11 @@ export class SubscriptionApiService implements SubscriptionApiServiceInterface {
         inviteUuid,
       })
 
-      this.operationsInProgress.set(SubscriptionApiOperations.CancelingInvite, false)
-
       return response
     } catch (error) {
       throw new ApiCallError(ErrorMessage.GenericFail)
+    } finally {
+      this.operationsInProgress.set(SubscriptionApiOperations.CancelingInvite, false)
     }
   }
 
@@ -73,11 +75,11 @@ export class SubscriptionApiService implements SubscriptionApiServiceInterface {
         identifier: inviteeEmail,
       })
 
-      this.operationsInProgress.set(SubscriptionApiOperations.Inviting, false)
-
       return response
     } catch (error) {
       throw new ApiCallError(ErrorMessage.GenericFail)
+    } finally {
+      this.operationsInProgress.set(SubscriptionApiOperations.Inviting, false)
     }
   }
 
@@ -93,11 +95,27 @@ export class SubscriptionApiService implements SubscriptionApiServiceInterface {
         inviteUuid,
       })
 
-      this.operationsInProgress.set(SubscriptionApiOperations.AcceptingInvite, false)
-
       return response
     } catch (error) {
       throw new ApiCallError(ErrorMessage.GenericFail)
+    } finally {
+      this.operationsInProgress.set(SubscriptionApiOperations.AcceptingInvite, false)
+    }
+  }
+
+  async confirmAppleIAP(params: AppleIAPConfirmRequestParams): Promise<AppleIAPConfirmResponse> {
+    if (this.operationsInProgress.get(SubscriptionApiOperations.ConfirmAppleIAP)) {
+      throw new ApiCallError(ErrorMessage.GenericInProgress)
+    }
+
+    this.operationsInProgress.set(SubscriptionApiOperations.ConfirmAppleIAP, true)
+
+    try {
+      const response = await this.subscriptionServer.confirmAppleIAP(params)
+
+      return response
+    } finally {
+      this.operationsInProgress.set(SubscriptionApiOperations.ConfirmAppleIAP, false)
     }
   }
 }

packages/api/src/Domain/Client/Subscription/SubscriptionApiServiceInterface.ts

@@ -1,5 +1,7 @@
 import { Uuid } from '@standardnotes/common'
 
+import { AppleIAPConfirmResponse } from './../../Response/Subscription/AppleIAPConfirmResponse'
+import { AppleIAPConfirmRequestParams } from '../../Request'
 import { SubscriptionInviteAcceptResponse } from '../../Response/Subscription/SubscriptionInviteAcceptResponse'
 import { SubscriptionInviteCancelResponse } from '../../Response/Subscription/SubscriptionInviteCancelResponse'
 import { SubscriptionInviteListResponse } from '../../Response/Subscription/SubscriptionInviteListResponse'
@@ -10,4 +12,5 @@ export interface SubscriptionApiServiceInterface {
   listInvites(): Promise<SubscriptionInviteListResponse>
   cancelInvite(inviteUuid: Uuid): Promise<SubscriptionInviteCancelResponse>
   acceptInvite(inviteUuid: Uuid): Promise<SubscriptionInviteAcceptResponse>
+  confirmAppleIAP(params: AppleIAPConfirmRequestParams): Promise<AppleIAPConfirmResponse>
 }

packages/api/src/Domain/Http/HttpService.spec.ts

@@ -10,7 +10,11 @@ describe('HttpService', () => {
   const host = 'http://bar'
   let updateMetaCallback: (meta: HttpResponseMeta) => void
 
-  const createService = () => new HttpService(environment, appVersion, snjsVersion, host, updateMetaCallback)
+  const createService = () => {
+    const service = new HttpService(environment, appVersion, snjsVersion, updateMetaCallback)
+    service.setHost(host)
+    return service
+  }
 
   beforeEach(() => {
     updateMetaCallback = jest.fn()

packages/api/src/Domain/Http/HttpService.ts

@@ -14,12 +14,12 @@ import { HttpErrorResponseBody } from './HttpErrorResponseBody'
 export class HttpService implements HttpServiceInterface {
   private authorizationToken?: string
   private __latencySimulatorMs?: number
+  private host!: string
 
   constructor(
     private environment: Environment,
     private appVersion: string,
     private snjsVersion: string,
-    private host: string,
     private updateMetaCallback: (meta: HttpResponseMeta) => void,
   ) {}
 

packages/api/src/Domain/Request/Subscription/AppleIAPConfirmRequestParams.ts

@@ -0,0 +1,7 @@
+export type AppleIAPConfirmRequestParams = {
+  productId: string
+  transactionId: string
+  transactionDate: string
+  transactionReceipt: string
+  subscription_token: string
+}

packages/api/src/Domain/Request/index.ts

@@ -1,4 +1,5 @@
 export * from './ApiEndpointParam'
+export * from './Subscription/AppleIAPConfirmRequestParams'
 export * from './Subscription/SubscriptionInviteAcceptRequestParams'
 export * from './Subscription/SubscriptionInviteCancelRequestParams'
 export * from './Subscription/SubscriptionInviteDeclineRequestParams'

packages/api/src/Domain/Response/Subscription/AppleIAPConfirmResponse.ts

@@ -0,0 +1,9 @@
+import { Either } from '@standardnotes/common'
+
+import { HttpErrorResponseBody } from '../../Http/HttpErrorResponseBody'
+import { HttpResponse } from '../../Http/HttpResponse'
+import { AppleIAPConfirmResponseBody } from './AppleIAPConfirmResponseBody'
+
+export interface AppleIAPConfirmResponse extends HttpResponse {
+  data: Either<AppleIAPConfirmResponseBody, HttpErrorResponseBody>
+}

packages/api/src/Domain/Response/Subscription/AppleIAPConfirmResponseBody.ts

@@ -0,0 +1 @@
+export type AppleIAPConfirmResponseBody = { success: true } | { success: false; message: string }

packages/api/src/Domain/Response/index.ts

@@ -1,3 +1,5 @@
+export * from './Subscription/AppleIAPConfirmResponse'
+export * from './Subscription/AppleIAPConfirmResponseBody'
 export * from './Subscription/SubscriptionInviteAcceptResponse'
 export * from './Subscription/SubscriptionInviteAcceptResponseBody'
 export * from './Subscription/SubscriptionInviteCancelResponse'

packages/api/src/Domain/Server/Subscription/Paths.ts

@@ -8,8 +8,13 @@ const SharingPaths = {
   listInvites: '/v1/subscription-invites',
 }
 
+const ApplePaths = {
+  confirmAppleIAP: '/v1/subscriptions/apple_iap_confirm',
+}
+
 export const Paths = {
   v1: {
     ...SharingPaths,
+    ...ApplePaths,
   },
 }

packages/api/src/Domain/Server/Subscription/SubscriptionServer.ts

@@ -1,4 +1,6 @@
+import { AppleIAPConfirmResponse } from './../../Response/Subscription/AppleIAPConfirmResponse'
 import { HttpServiceInterface } from '../../Http/HttpServiceInterface'
+import { AppleIAPConfirmRequestParams } from '../../Request'
 import { SubscriptionInviteAcceptRequestParams } from '../../Request/Subscription/SubscriptionInviteAcceptRequestParams'
 import { SubscriptionInviteCancelRequestParams } from '../../Request/Subscription/SubscriptionInviteCancelRequestParams'
 import { SubscriptionInviteDeclineRequestParams } from '../../Request/Subscription/SubscriptionInviteDeclineRequestParams'
@@ -45,4 +47,10 @@ export class SubscriptionServer implements SubscriptionServerInterface {
 
     return response as SubscriptionInviteResponse
   }
+
+  async confirmAppleIAP(params: AppleIAPConfirmRequestParams): Promise<AppleIAPConfirmResponse> {
+    const response = await this.httpService.post(Paths.v1.confirmAppleIAP, params)
+
+    return response as AppleIAPConfirmResponse
+  }
 }

packages/api/src/Domain/Server/Subscription/SubscriptionServerInterface.ts

@@ -1,3 +1,5 @@
+import { AppleIAPConfirmResponse } from './../../Response/Subscription/AppleIAPConfirmResponse'
+import { AppleIAPConfirmRequestParams } from './../../Request/Subscription/AppleIAPConfirmRequestParams'
 import { SubscriptionInviteAcceptRequestParams } from '../../Request/Subscription/SubscriptionInviteAcceptRequestParams'
 import { SubscriptionInviteCancelRequestParams } from '../../Request/Subscription/SubscriptionInviteCancelRequestParams'
 import { SubscriptionInviteDeclineRequestParams } from '../../Request/Subscription/SubscriptionInviteDeclineRequestParams'
@@ -15,4 +17,5 @@ export interface SubscriptionServerInterface {
   declineInvite(params: SubscriptionInviteDeclineRequestParams): Promise<SubscriptionInviteDeclineResponse>
   cancelInvite(params: SubscriptionInviteCancelRequestParams): Promise<SubscriptionInviteCancelResponse>
   listInvites(params: SubscriptionInviteListRequestParams): Promise<SubscriptionInviteListResponse>
+  confirmAppleIAP(params: AppleIAPConfirmRequestParams): Promise<AppleIAPConfirmResponse>
 }

packages/blocks-editor/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-11)
+
+### Bug Fixes
+
+* super improvements ([#1995](https://github.com/standardnotes/app/issues/1995)) ([da6f36f](https://github.com/standardnotes/app/commit/da6f36f34cdee324339d2c923d61191b373513f3))
+
+# [1.4.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-11)
+
+### Features
+
+* **dev:** insert current date and time command in super note ([#1994](https://github.com/standardnotes/app/issues/1994)) ([e27ac31](https://github.com/standardnotes/app/commit/e27ac3126ee4fec9e81df8722b6326ba6f38fe5e))
+
 ## [1.3.11](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-10)
 
 ### Bug Fixes

packages/blocks-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/blocks-editor",
-  "version": "1.3.11",
+  "version": "1.4.1",
   "private": true,
   "main": "./src/index.ts",
   "scripts": {

packages/blocks-editor/src/Editor/BlocksEditor.tsx

@@ -36,7 +36,7 @@ const BlockDragEnabled = false;
 type BlocksEditorProps = {
   onChange: (value: string, preview: string) => void;
   className?: string;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   previewLength: number;
   spellcheck?: boolean;
 };
@@ -48,8 +48,14 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
   previewLength,
   spellcheck,
 }) => {
+  const [didIgnoreFirstChange, setDidIgnoreFirstChange] = useState(false);
   const handleChange = useCallback(
     (editorState: EditorState, _editor: LexicalEditor) => {
+      if (!didIgnoreFirstChange) {
+        setDidIgnoreFirstChange(true);
+        return;
+      }
+
       editorState.read(() => {
         const childrenNodes = $getRoot().getAllTextNodes().slice(0, 2);
         let previewText = '';
@@ -65,7 +71,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
         onChange(stringifiedEditorState, previewText);
       });
     },
-    [onChange],
+    [onChange, didIgnoreFirstChange],
   );
 
   const [floatingAnchorElem, setFloatingAnchorElem] =

packages/blocks-editor/src/Editor/BlocksEditorComposer.tsx

@@ -7,17 +7,19 @@ import {Klass, LexicalNode} from 'lexical';
 type BlocksEditorComposerProps = {
   initialValue: string;
   children: React.ReactNode;
-  nodes: Array<Klass<LexicalNode>>;
+  nodes?: Array<Klass<LexicalNode>>;
+  readonly?: boolean;
 };
 
 export const BlocksEditorComposer: FunctionComponent<
   BlocksEditorComposerProps
-> = ({initialValue, children, nodes}) => {
+> = ({initialValue, children, readonly, nodes = []}) => {
   return (
     <LexicalComposer
       initialConfig={{
         namespace: 'BlocksEditor',
         theme: BlocksEditorTheme,
+        editable: !readonly,
         onError: (error: Error) => console.error(error),
         editorState:
           initialValue && initialValue.length > 0 ? initialValue : undefined,

packages/blocks-editor/src/Lexical/Plugins/HorizontalRulePlugin/index.ts

@@ -35,7 +35,6 @@ export default function HorizontalRulePlugin(): null {
 
         if (focusNode !== null) {
           const horizontalRuleNode = $createHorizontalRuleNode();
-          selection.insertParagraph();
           selection.focus
             .getNode()
             .getTopLevelElementOrThrow()

packages/blocks-editor/src/Lexical/Theme/base.scss

@@ -1041,7 +1041,7 @@ body {
   }
 
   hr {
-    padding: 2px 2px;
+    padding: 2px 0px;
     border: none;
     margin: 1em 0;
     cursor: pointer;
@@ -1051,7 +1051,7 @@ body {
     content: '';
     display: block;
     height: 2px;
-    background-color: var(--sn-stylekit-contrast-border-color);
+    background-color: var(--sn-stylekit-secondary-background-color);
     line-height: 2px;
   }
 

packages/desktop/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.23.294](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-13)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.293](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-11)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.292](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-11)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
 ## [3.23.291](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-10)
 
 **Note:** Version bump only for package @standardnotes/desktop

packages/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@standardnotes/desktop",
   "main": "./app/dist/index.js",
-  "version": "3.23.291",
+  "version": "3.23.294",
   "license": "AGPL-3.0-or-later",
   "author": "Standard Notes.",
   "private": true,

packages/mobile/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.46.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-13)
+
+### Features
+
+* iap ([#1996](https://github.com/standardnotes/app/issues/1996)) ([d519aca](https://github.com/standardnotes/app/commit/d519aca685b32f4b6f7079ba9562ecaf1a18aecb))
+
+## [3.45.42](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-11)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.45.41](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-11)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
 ## [3.45.40](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-10)
 
 **Note:** Version bump only for package @standardnotes/mobile

packages/mobile/ios/Podfile.lock

@@ -349,6 +349,8 @@ PODS:
     - React-Core
   - RNFS (2.20.0):
     - React-Core
+  - RNIap (12.4.4):
+    - React-Core
   - RNKeychain (8.0.0):
     - React-Core
   - RNPrivacySnapshot (1.0.0):
@@ -422,6 +424,7 @@ DEPENDENCIES:
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
   - RNFileViewer (from `../node_modules/react-native-file-viewer`)
   - RNFS (from `../node_modules/react-native-fs`)
+  - RNIap (from `../node_modules/react-native-iap`)
   - RNKeychain (from `../node_modules/react-native-keychain`)
   - RNPrivacySnapshot (from `../node_modules/react-native-privacy-snapshot`)
   - RNShare (from `../node_modules/react-native-share`)
@@ -518,6 +521,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-file-viewer"
   RNFS:
     :path: "../node_modules/react-native-fs"
+  RNIap:
+    :path: "../node_modules/react-native-iap"
   RNKeychain:
     :path: "../node_modules/react-native-keychain"
   RNPrivacySnapshot:
@@ -578,6 +583,7 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: b03032fdbdb725bea0bd9e5ec5a7272865ae7398
   RNFileViewer: ce7ca3ac370e18554d35d6355cffd7c30437c592
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
+  RNIap: 3bcd6982cf99503339cf9243e4ba70a45ea2cf72
   RNKeychain: 4f63aada75ebafd26f4bc2c670199461eab85d94
   RNPrivacySnapshot: 8eaf571478a353f2e5184f5c803164f22428b023
   RNShare: a5dc3b9c53ddc73e155b8cd9a94c70c91913c43c

packages/mobile/ios/StandardNotes.xcodeproj/project.pbxproj

@@ -14,6 +14,7 @@
 		1C2EEB3B45F4EB07AC795C77 /* (null) in Frameworks */ = {isa = PBXBuildFile; };
 		33BB1B14071EBE5978EBF3A8 /* libPods-StandardNotes-StandardNotesTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 04FCB5A3A3387CA3CFC82AA3 /* libPods-StandardNotes-StandardNotesTests.a */; };
 		BC8DEA834BF198E8511F04FF /* libPods-StandardNotesDev.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 51F2D747BE02C2A1BCFEEFD1 /* libPods-StandardNotesDev.a */; };
+		CD6592A9291EEFCC00C09DC6 /* StoreKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = CD6592A8291EEFCC00C09DC6 /* StoreKit.framework */; };
 		CD7D5ECA27800609005FE1BF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = CD7D5EC927800608005FE1BF /* LaunchScreen.storyboard */; };
 		CD7D5ECF278015D2005FE1BF /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
 		CD7D5ED0278015D2005FE1BF /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
@@ -59,6 +60,7 @@
 		66417CEB7622E77D89928FCA /* Pods-StandardNotes.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-StandardNotes.debug.xcconfig"; path = "Target Support Files/Pods-StandardNotes/Pods-StandardNotes.debug.xcconfig"; sourceTree = "<group>"; };
 		948EE90E15EA48C27577820B /* Pods-StandardNotes.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-StandardNotes.release.xcconfig"; path = "Target Support Files/Pods-StandardNotes/Pods-StandardNotes.release.xcconfig"; sourceTree = "<group>"; };
 		A09B7794259DBFABFC4D05CE /* Pods-StandardNotesDev.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-StandardNotesDev.debug.xcconfig"; path = "Target Support Files/Pods-StandardNotesDev/Pods-StandardNotesDev.debug.xcconfig"; sourceTree = "<group>"; };
+		CD6592A8291EEFCC00C09DC6 /* StoreKit.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = StoreKit.framework; path = System/Library/Frameworks/StoreKit.framework; sourceTree = SDKROOT; };
 		CD7D5EC8278005B6005FE1BF /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; name = Info.plist; path = StandardNotes/Info.plist; sourceTree = "<group>"; };
 		CD7D5EC927800608005FE1BF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; path = LaunchScreen.storyboard; sourceTree = "<group>"; };
 		CD7D5EDF278015D2005FE1BF /* StandardNotesDev.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = StandardNotesDev.app; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -86,6 +88,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				CD6592A9291EEFCC00C09DC6 /* StoreKit.framework in Frameworks */,
 				1C2EEB3B45F4EB07AC795C77 /* (null) in Frameworks */,
 				DD3D1CE428EC1C8BA0C49211 /* libPods-StandardNotes.a in Frameworks */,
 			);
@@ -153,6 +156,7 @@
 		2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
+				CD6592A8291EEFCC00C09DC6 /* StoreKit.framework */,
 				ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
 				04FCB5A3A3387CA3CFC82AA3 /* libPods-StandardNotes-StandardNotesTests.a */,
 				51F2D747BE02C2A1BCFEEFD1 /* libPods-StandardNotesDev.a */,

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/mobile",
-  "version": "3.45.40",
+  "version": "3.46.0",
   "author": "Standard Notes.",
   "private": true,
   "license": "AGPL-3.0-or-later",
@@ -57,6 +57,7 @@
     "react-native-fingerprint-scanner": "standardnotes/react-native-fingerprint-scanner#b55d1c0ca627a87a130f758603f12911fbac200f",
     "react-native-flag-secure-android": "standardnotes/react-native-flag-secure-android#cb08e74583c22a5d912842459b35ebbbb4bcd852",
     "react-native-fs": "^2.19.0",
+    "react-native-iap": "^12.4.4",
     "react-native-keychain": "standardnotes/react-native-keychain#d277d360494cbd02be4accb4a360772a8e0e97b6",
     "react-native-privacy-snapshot": "standardnotes/react-native-privacy-snapshot#653e904c90fc6f2b578da59138f2bfe5d7f942fe",
     "react-native-share": "^7.9.0",

packages/mobile/src/Lib/Interface.ts

@@ -1,5 +1,6 @@
 import AsyncStorage from '@react-native-community/async-storage'
 import SNReactNative from '@standardnotes/react-native-utils'
+import { AppleIAPReceipt } from '@standardnotes/services/dist/Domain/Subscription/AppleIAPReceipt'
 import {
   ApplicationIdentifier,
   Environment,
@@ -11,6 +12,7 @@ import {
   RawKeychainValue,
   removeFromArray,
   TransferPayload,
+  AppleIAPProductId,
   UuidString,
 } from '@standardnotes/snjs'
 import { ColorSchemeObserverService } from 'ColorSchemeObserverService'
@@ -41,6 +43,7 @@ import Share from 'react-native-share'
 import { AndroidBackHandlerService } from '../AndroidBackHandlerService'
 import { AppStateObserverService } from './../AppStateObserverService'
 import Keychain from './Keychain'
+import { PurchaseManager } from '../PurchaseManager'
 
 export type BiometricsType = 'Fingerprint' | 'Face ID' | 'Biometrics' | 'Touch ID'
 
@@ -99,6 +102,10 @@ export class MobileDevice implements MobileDeviceInterface {
     private colorSchemeService?: ColorSchemeObserverService,
   ) {}
 
+  purchaseSubscriptionIAP(plan: AppleIAPProductId): Promise<AppleIAPReceipt | undefined> {
+    return PurchaseManager.getInstance().purchase(plan)
+  }
+
   deinit() {
     this.stateObserverService?.deinit()
     ;(this.stateObserverService as unknown) = undefined
@@ -108,7 +115,7 @@ export class MobileDevice implements MobileDeviceInterface {
     ;(this.colorSchemeService as unknown) = undefined
   }
 
-  consoleLog(...args: any[]): void {
+  consoleLog(...args: unknown[]): void {
     // eslint-disable-next-line no-console
     console.log(args)
   }

packages/mobile/src/Lib/Logging.ts

@@ -0,0 +1,18 @@
+import { log as utilsLog } from '@standardnotes/snjs'
+
+export enum LoggingDomain {
+  AppleIAP,
+}
+
+const LoggingStatus: Record<LoggingDomain, boolean> = {
+  [LoggingDomain.AppleIAP]: false,
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function log(domain: LoggingDomain, ...args: any[]): void {
+  if (!LoggingStatus[domain]) {
+    return
+  }
+
+  utilsLog(LoggingDomain[domain], ...args)
+}

packages/mobile/src/PurchaseManager.ts

@@ -0,0 +1,80 @@
+import { LoggingDomain, log } from './Lib/Logging'
+import { EmitterSubscription } from 'react-native'
+import {
+  initConnection,
+  endConnection,
+  purchaseErrorListener,
+  purchaseUpdatedListener,
+  type ProductPurchase,
+  type PurchaseError,
+  type SubscriptionPurchase,
+  finishTransaction,
+  requestSubscription,
+  getSubscriptions,
+} from 'react-native-iap'
+import { AppleIAPReceipt, AppleIAPProductId } from '@standardnotes/snjs'
+
+export class PurchaseManager {
+  private static instance: PurchaseManager
+  private listenerDisposer: EmitterSubscription
+  private errorDisposer: EmitterSubscription
+
+  private constructor() {
+    this.listenerDisposer = purchaseUpdatedListener((purchase: SubscriptionPurchase | ProductPurchase) => {
+      log(LoggingDomain.AppleIAP, 'purchaseUpdatedListener', purchase)
+      const receipt = purchase.transactionReceipt
+      if (receipt) {
+        void finishTransaction({ purchase, isConsumable: false })
+      }
+    })
+
+    this.errorDisposer = purchaseErrorListener((error: PurchaseError) => {
+      log(LoggingDomain.AppleIAP, 'purchaseErrorListener', error)
+    })
+  }
+
+  public static getInstance(): PurchaseManager {
+    if (!PurchaseManager.instance) {
+      PurchaseManager.instance = new PurchaseManager()
+    }
+
+    return PurchaseManager.instance
+  }
+
+  deinit() {
+    this.listenerDisposer.remove()
+    this.errorDisposer.remove()
+    void endConnection()
+  }
+
+  async purchase(sku: AppleIAPProductId): Promise<AppleIAPReceipt | undefined> {
+    await initConnection()
+
+    const subscriptions = await getSubscriptions({
+      skus: [AppleIAPProductId.PlusPlanYearly, AppleIAPProductId.ProPlanYearly],
+    })
+
+    log(LoggingDomain.AppleIAP, 'Retrieved subscriptions', subscriptions)
+
+    try {
+      const result = await requestSubscription({ sku, andDangerouslyFinishTransactionAutomaticallyIOS: true })
+
+      log(LoggingDomain.AppleIAP, 'Purchase result', result)
+
+      if (result && result.transactionId && result.transactionDate) {
+        return {
+          transactionId: result.transactionId,
+          productId: result.productId as AppleIAPProductId,
+          transactionDate: String(result.transactionDate),
+          transactionReceipt: result.transactionReceipt,
+        }
+      } else {
+        log(LoggingDomain.AppleIAP, 'Purchase method returning undefined even though successful')
+        return undefined
+      }
+    } catch (error) {
+      log(LoggingDomain.AppleIAP, error)
+      return undefined
+    }
+  }
+}

packages/releases/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.225](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-13)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.224](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-11)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.223](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-11)
+
+**Note:** Version bump only for package @standardnotes/releases
+
 ## [1.3.222](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-10)
 
 **Note:** Version bump only for package @standardnotes/releases

packages/releases/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/releases",
-  "version": "1.3.222",
+  "version": "1.3.225",
   "license": "AGPL-3.0-or-later",
   "main": "dist/releases.json",
   "types": "dist/index.d.ts",

packages/services/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.43.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-13)
+
+### Features
+
+* iap ([#1996](https://github.com/standardnotes/app/issues/1996)) ([d519aca](https://github.com/standardnotes/app/commit/d519aca685b32f4b6f7079ba9562ecaf1a18aecb))
+
 ## [1.42.8](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-09)
 
 **Note:** Version bump only for package @standardnotes/services

packages/services/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/services",
-  "version": "1.42.8",
+  "version": "1.43.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/services/src/Domain/Device/MobileDeviceInterface.ts

@@ -1,5 +1,7 @@
+import { AppleIAPProductId } from './../Subscription/AppleIAPProductId'
 import { DeviceInterface } from './DeviceInterface'
 import { Environment, Platform, RawKeychainValue } from '@standardnotes/models'
+import { AppleIAPReceipt } from '../Subscription/AppleIAPReceipt'
 
 export interface MobileDeviceInterface extends DeviceInterface {
   environment: Environment.Mobile
@@ -22,4 +24,5 @@ export interface MobileDeviceInterface extends DeviceInterface {
   isUrlComponentUrl(url: string): boolean
   getAppState(): Promise<'active' | 'background' | 'inactive' | 'unknown' | 'extension'>
   getColorScheme(): Promise<'light' | 'dark' | null | undefined>
+  purchaseSubscriptionIAP(plan: AppleIAPProductId): Promise<AppleIAPReceipt | undefined>
 }

packages/services/src/Domain/Event/ApplicationEvent.ts

@@ -64,4 +64,5 @@ export enum ApplicationEvent {
   CompletedInitialSync = 30,
   BiometricsSoftLockEngaged = 31,
   BiometricsSoftLockDisengaged = 32,
+  DidPurchaseSubscription = 33,
 }

packages/services/src/Domain/Feature/FeaturesEvent.ts

@@ -1,4 +1,5 @@
 export enum FeaturesEvent {
   UserRolesChanged = 'UserRolesChanged',
   FeaturesUpdated = 'FeaturesUpdated',
+  DidPurchaseSubscription = 'DidPurchaseSubscription',
 }

packages/services/src/Domain/Subscription/AppleIAPProductId.ts

@@ -0,0 +1,4 @@
+export enum AppleIAPProductId {
+  ProPlanYearly = 'pro_plan_yearly',
+  PlusPlanYearly = 'plus_plan_yearly',
+}

packages/services/src/Domain/Subscription/AppleIAPReceipt.ts

@@ -0,0 +1,8 @@
+import { AppleIAPProductId } from './AppleIAPProductId'
+
+export type AppleIAPReceipt = {
+  productId: AppleIAPProductId
+  transactionDate: string
+  transactionId: string
+  transactionReceipt: string
+}

packages/services/src/Domain/Subscription/SubscriptionClientInterface.ts

@@ -1,9 +1,14 @@
 import { Uuid } from '@standardnotes/common'
 import { Invitation } from '@standardnotes/models'
+import { AppleIAPReceipt } from './AppleIAPReceipt'
 
 export interface SubscriptionClientInterface {
   listSubscriptionInvitations(): Promise<Invitation[]>
   inviteToSubscription(inviteeEmail: string): Promise<boolean>
   cancelInvitation(inviteUuid: Uuid): Promise<boolean>
   acceptInvitation(inviteUuid: Uuid): Promise<{ success: true } | { success: false; message: string }>
+  confirmAppleIAP(
+    receipt: AppleIAPReceipt,
+    subscriptionToken: string,
+  ): Promise<{ success: true } | { success: false; message: string }>
 }

packages/services/src/Domain/Subscription/SubscriptionManager.ts

@@ -4,6 +4,7 @@ import { InternalEventBusInterface } from '../Internal/InternalEventBusInterface
 import { AbstractService } from '../Service/AbstractService'
 import { SubscriptionClientInterface } from './SubscriptionClientInterface'
 import { Uuid } from '@standardnotes/common'
+import { AppleIAPReceipt } from './AppleIAPReceipt'
 
 export class SubscriptionManager extends AbstractService implements SubscriptionClientInterface {
   constructor(
@@ -56,4 +57,24 @@ export class SubscriptionManager extends AbstractService implements Subscription
       return false
     }
   }
+
+  async confirmAppleIAP(
+    params: AppleIAPReceipt,
+    subscriptionToken: string,
+  ): Promise<{ success: true } | { success: false; message: string }> {
+    try {
+      const result = await this.subscriptionApiService.confirmAppleIAP({
+        ...params,
+        subscription_token: subscriptionToken,
+      })
+
+      if (result.data.error) {
+        return { success: false, message: result.data.error.message }
+      }
+
+      return result.data
+    } catch (error) {
+      return { success: false, message: 'Could not confirm IAP.' }
+    }
+  }
 }

packages/services/src/Domain/index.ts

@@ -76,6 +76,8 @@ export * from './Strings/InfoStrings'
 export * from './Strings/Messages'
 export * from './Subscription/SubscriptionClientInterface'
 export * from './Subscription/SubscriptionManager'
+export * from './Subscription/AppleIAPProductId'
+export * from './Subscription/AppleIAPReceipt'
 export * from './Sync/SyncMode'
 export * from './Sync/SyncOptions'
 export * from './Sync/SyncQueueStrategy'

packages/snjs/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.148.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-13)
+
+### Features
+
+* iap ([#1996](https://github.com/standardnotes/app/issues/1996)) ([d519aca](https://github.com/standardnotes/app/commit/d519aca685b32f4b6f7079ba9562ecaf1a18aecb))
+
 ## [2.147.11](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-09)
 
 ### Bug Fixes

packages/snjs/lib/Application/Application.ts

@@ -287,6 +287,10 @@ export class SNApplication implements ApplicationInterface, AppGroupManagedAppli
     return this.listedService
   }
 
+  public get alerts(): ExternalServices.AlertService {
+    return this.alertService
+  }
+
   public computePrivateUsername(username: string): Promise<string | undefined> {
     return ComputePrivateUsername(this.options.crypto, username)
   }
@@ -367,8 +371,12 @@ export class SNApplication implements ApplicationInterface, AppGroupManagedAppli
 
     await this.handleStage(ExternalServices.ApplicationStage.StorageDecrypted_09)
 
-    this.apiService.loadHost()
+    const host = this.apiService.loadHost()
+
+    this.httpService.setHost(host)
+
     this.webSocketsService.loadWebSocketUrl()
+
     await this.sessionManager.initializeFromDisk()
 
     this.settingsService.initializeFromDisk()
@@ -594,6 +602,7 @@ export class SNApplication implements ApplicationInterface, AppGroupManagedAppli
 
   public async setCustomHost(host: string): Promise<void> {
     await this.setHost(host)
+
     this.webSocketsService.setWebSocketUrl(undefined)
   }
 
@@ -1072,7 +1081,7 @@ export class SNApplication implements ApplicationInterface, AppGroupManagedAppli
     this.createProtocolService()
     this.diskStorageService.provideEncryptionProvider(this.protocolService)
     this.createChallengeService()
-    this.createHttpManager()
+    this.createLegacyHttpManager()
     this.createApiService()
     this.createHttpService()
     this.createUserServer()
@@ -1238,6 +1247,10 @@ export class SNApplication implements ApplicationInterface, AppGroupManagedAppli
             void this.notifyEvent(ApplicationEvent.FeaturesUpdated)
             break
           }
+          case ExternalServices.FeaturesEvent.DidPurchaseSubscription: {
+            void this.notifyEvent(ApplicationEvent.DidPurchaseSubscription)
+            break
+          }
           default: {
             Utils.assertUnreachable(event)
           }
@@ -1385,7 +1398,7 @@ export class SNApplication implements ApplicationInterface, AppGroupManagedAppli
     this.services.push(this.componentManagerService)
   }
 
-  private createHttpManager() {
+  private createLegacyHttpManager() {
     this.deprecatedHttpService = new InternalServices.SNHttpService(
       this.environment,
       this.options.appVersion,
@@ -1399,7 +1412,6 @@ export class SNApplication implements ApplicationInterface, AppGroupManagedAppli
       this.environment,
       this.options.appVersion,
       SnjsVersion,
-      this.options.defaultHost,
       this.apiService.processMetaObject.bind(this.apiService),
     )
   }

packages/snjs/lib/Services/Api/ApiService.ts

@@ -110,7 +110,7 @@ export class SNApiService
     this.invalidSessionObserver = observer
   }
 
-  public loadHost(): void {
+  public loadHost(): string {
     const storedValue = this.storageService.getValue<string | undefined>(StorageKey.ServerHost)
     this.host =
       storedValue ||
@@ -120,6 +120,8 @@ export class SNApiService
           _default_sync_server?: string
         }
       )._default_sync_server as string)
+
+    return this.host
   }
 
   public async setHost(host: string): Promise<void> {

packages/snjs/lib/Services/Features/FeaturesService.spec.ts

@@ -10,6 +10,7 @@ import { PureCryptoInterface } from '@standardnotes/sncrypto-common'
 import { convertTimestampToMilliseconds } from '@standardnotes/utils'
 import {
   AlertService,
+  FeaturesEvent,
   FeatureStatus,
   InternalEventBusInterface,
   StorageKey,
@@ -203,6 +204,47 @@ describe('featuresService', () => {
   })
 
   describe('updateRoles()', () => {
+    it('setRoles should notify event if roles changed', async () => {
+      storageService.getValue = jest.fn().mockReturnValue(roles)
+      const featuresService = createService()
+      featuresService.initializeFromDisk()
+
+      const mock = (featuresService['notifyEvent'] = jest.fn())
+
+      const newRoles = [...roles, RoleName.PlusUser]
+      await featuresService.setRoles(newRoles)
+
+      expect(mock.mock.calls[0][0]).toEqual(FeaturesEvent.UserRolesChanged)
+    })
+
+    it('should notify of subscription purchase', async () => {
+      storageService.getValue = jest.fn().mockReturnValue(roles)
+      const featuresService = createService()
+      featuresService.initializeFromDisk()
+
+      const spy = jest.spyOn(featuresService, 'notifyEvent' as never)
+
+      const newRoles = [...roles, RoleName.ProUser]
+      await featuresService.updateRolesAndFetchFeatures('123', newRoles)
+
+      expect(spy.mock.calls[2][0]).toEqual(FeaturesEvent.DidPurchaseSubscription)
+    })
+
+    it('should not notify of subscription purchase on initial roles load after sign in', async () => {
+      storageService.getValue = jest.fn().mockReturnValue(roles)
+      const featuresService = createService()
+      featuresService.initializeFromDisk()
+      featuresService['roles'] = []
+
+      const spy = jest.spyOn(featuresService, 'notifyEvent' as never)
+
+      const newRoles = [...roles, RoleName.ProUser]
+      await featuresService.updateRolesAndFetchFeatures('123', newRoles)
+
+      const triggeredEvents = spy.mock.calls.map((call) => call[0])
+      expect(triggeredEvents).not.toContain(FeaturesEvent.DidPurchaseSubscription)
+    })
+
     it('saves new roles to storage and fetches features if a role has been added', async () => {
       const newRoles = [...roles, RoleName.PlusUser]
 
@@ -631,7 +673,7 @@ describe('featuresService', () => {
       await featuresService.updateRolesAndFetchFeatures('123', [RoleName.CoreUser, RoleName.PlusUser])
 
       sessionManager.isSignedIntoFirstPartyServer = jest.fn().mockReturnValue(false)
-      featuresService.hasOnlineSubscription = jest.fn().mockReturnValue(false)
+      featuresService.rolesIncludePaidSubscription = jest.fn().mockReturnValue(false)
       featuresService['completedSuccessfulFeaturesRetrieval'] = true
 
       expect(featuresService.getFeatureStatus(FeatureIdentifier.MidnightTheme)).toBe(FeatureStatus.NoUserSubscription)

packages/snjs/lib/Services/Features/FeaturesService.ts

@@ -154,7 +154,7 @@ export class SNFeaturesService
     if (stage === ApplicationStage.FullSyncCompleted_13) {
       void this.addDarkTheme()
 
-      if (!this.hasOnlineSubscription()) {
+      if (!this.rolesIncludePaidSubscription()) {
         const offlineRepo = this.getOfflineRepo()
         if (offlineRepo) {
           void this.downloadOfflineFeatures(offlineRepo)
@@ -355,8 +355,12 @@ export class SNFeaturesService
   }
 
   public async updateRolesAndFetchFeatures(userUuid: UuidString, roles: RoleName[]): Promise<void> {
+    const previousRoles = this.roles
+
     const userRolesChanged = this.haveRolesChanged(roles)
 
+    const isInitialLoadRolesChange = previousRoles.length === 0 && userRolesChanged
+
     if (!userRolesChanged && !this.needsInitialFeaturesUpdate) {
       return
     }
@@ -375,13 +379,23 @@ export class SNFeaturesService
         await this.didDownloadFeatures(features)
       }
     }
+
+    if (userRolesChanged && !isInitialLoadRolesChange) {
+      if (this.rolesIncludePaidSubscription()) {
+        await this.notifyEvent(FeaturesEvent.DidPurchaseSubscription)
+      }
+    }
   }
 
-  private async setRoles(roles: RoleName[]): Promise<void> {
+  async setRoles(roles: RoleName[]): Promise<void> {
+    const rolesChanged = !arraysEqual(this.roles, roles)
+
     this.roles = roles
-    if (!arraysEqual(this.roles, roles)) {
+
+    if (rolesChanged) {
       void this.notifyEvent(FeaturesEvent.UserRolesChanged)
     }
+
     this.storageService.setValue(StorageKey.UserRoles, this.roles)
   }
 
@@ -434,14 +448,13 @@ export class SNFeaturesService
     return this.features.find((feature) => feature.identifier === featureId)
   }
 
-  hasOnlineSubscription(): boolean {
-    const roles = this.roles
+  rolesIncludePaidSubscription(): boolean {
     const unpaidRoles = [RoleName.CoreUser]
-    return roles.some((role) => !unpaidRoles.includes(role))
+    return this.roles.some((role) => !unpaidRoles.includes(role))
   }
 
   public hasPaidOnlineOrOfflineSubscription(): boolean {
-    return this.hasOnlineSubscription() || this.hasOfflineRepo()
+    return this.rolesIncludePaidSubscription() || this.hasOfflineRepo()
   }
 
   public rolesBySorting(roles: RoleName[]): RoleName[] {

packages/snjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/snjs",
-  "version": "2.147.11",
+  "version": "2.148.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/styles/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.7.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-13)
+
+### Features
+
+* iap ([#1996](https://github.com/standardnotes/app/issues/1996)) ([d519aca](https://github.com/standardnotes/app/commit/d519aca685b32f4b6f7079ba9562ecaf1a18aecb))
+
 ## [1.6.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-04)
 
 **Note:** Version bump only for package @standardnotes/styles

packages/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/styles",
-  "version": "1.6.4",
+  "version": "1.7.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "publishConfig": {

packages/styles/src/Alert/Alert.ts

@@ -23,7 +23,7 @@ export class SKAlert {
   buttonsString() {
     const genButton = function (buttonDesc: AlertButton, index: number) {
       return `
-        <button id='button-${index}' class='font-bold px-2.5 py-2 text-xs text-info-contrast bg-${buttonDesc.style}'>
+        <button id='button-${index}' class='font-bold px-2.5 py-2 text-base lg:text-xs text-info-contrast bg-${buttonDesc.style}'>
           <div class='sk-label'>${buttonDesc.text}</div>
         </button>
       `
@@ -57,8 +57,8 @@ export class SKAlert {
       buttonsTemplate = ''
       panelStyle = 'style="padding-bottom: 8px"'
     }
-    const titleTemplate = this.title ? `<div class='sk-h3 sk-panel-section-title'>${this.title}</div>` : ''
-    const messageTemplate = this.text ? `<p class='sk-p'>${this.text}</p>` : ''
+    const titleTemplate = this.title ? `<div class='mb-1 font-bold text-lg lg:text-base'>${this.title}</div>` : ''
+    const messageTemplate = this.text ? `<p class='sk-p text-base lg:text-sm'>${this.text}</p>` : ''
 
     const template = `
       <div class="sk-modal">

packages/ui-services/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.13.10](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-13)
+
+**Note:** Version bump only for package @standardnotes/ui-services
+
 ## [1.13.9](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-09)
 
 **Note:** Version bump only for package @standardnotes/ui-services

packages/ui-services/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/ui-services",
-  "version": "1.13.9",
+  "version": "1.13.10",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/web/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.96.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-13)
+
+### Features
+
+* iap ([#1996](https://github.com/standardnotes/app/issues/1996)) ([d519aca](https://github.com/standardnotes/app/commit/d519aca685b32f4b6f7079ba9562ecaf1a18aecb))
+
+## [3.95.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-11)
+
+### Bug Fixes
+
+* super improvements ([#1995](https://github.com/standardnotes/app/issues/1995)) ([da6f36f](https://github.com/standardnotes/app/commit/da6f36f34cdee324339d2c923d61191b373513f3))
+
+# [3.95.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-11)
+
+### Features
+
+* **dev:** insert current date and time command in super note ([#1994](https://github.com/standardnotes/app/issues/1994)) ([e27ac31](https://github.com/standardnotes/app/commit/e27ac3126ee4fec9e81df8722b6326ba6f38fe5e))
+
 ## [3.94.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-11-10)
 
 ### Bug Fixes

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/web",
-  "version": "3.94.2",
+  "version": "3.96.0",
   "license": "AGPL-3.0-or-later",
   "main": "dist/app.js",
   "author": "Standard Notes.",

packages/web/src/javascripts/Application/Application.ts

@@ -204,10 +204,6 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     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')

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

@@ -199,7 +199,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
       <AndroidBackHandlerProvider application={application}>
         <DarkModeHandler application={application} />
         <ResponsivePaneProvider paneController={application.getViewControllerManager().paneController}>
-          <PremiumModalProvider application={application} viewControllerManager={viewControllerManager}>
+          <PremiumModalProvider application={application} featuresController={viewControllerManager.featuresController}>
             <div className={platformString + ' main-ui-view sn-component h-full'}>
               <div id="app" className="app app-column-container" ref={appColumnContainerRef}>
                 <FileDragNDropProvider

packages/web/src/javascripts/Components/BlockEditor/BlockEditorComponent.tsx

@@ -15,6 +15,8 @@ import ItemBubblePlugin from './Plugins/ItemBubblePlugin/ItemBubblePlugin'
 import { NodeObserverPlugin } from './Plugins/NodeObserverPlugin/NodeObserverPlugin'
 import { FilesController } from '@/Controllers/FilesController'
 import FilesControllerProvider from '@/Controllers/FilesControllerProvider'
+import DatetimePlugin from './Plugins/DateTimePlugin/DateTimePlugin'
+import AutoLinkPlugin from './Plugins/AutoLinkPlugin/AutoLinkPlugin'
 
 const NotePreviewCharLimit = 160
 
@@ -57,7 +59,7 @@ export const BlockEditor: FunctionComponent<Props> = ({
       <ErrorBoundary>
         <LinkingControllerProvider controller={linkingController}>
           <FilesControllerProvider controller={filesController}>
-            <BlocksEditorComposer initialValue={note.text} nodes={[FileNode, BubbleNode]}>
+            <BlocksEditorComposer readonly={note.locked} initialValue={note.text} nodes={[FileNode, BubbleNode]}>
               <BlocksEditor
                 onChange={handleChange}
                 className="relative relative resize-none text-base focus:shadow-none focus:outline-none"
@@ -68,6 +70,8 @@ export const BlockEditor: FunctionComponent<Props> = ({
                 <FilePlugin />
                 <ItemBubblePlugin />
                 <BlockPickerMenuPlugin />
+                <DatetimePlugin />
+                <AutoLinkPlugin />
                 <NodeObserverPlugin nodeType={BubbleNode} onRemove={handleBubbleRemove} />
                 <NodeObserverPlugin nodeType={FileNode} onRemove={handleBubbleRemove} />
               </BlocksEditor>

packages/web/src/javascripts/Components/BlockEditor/Plugins/AutoLinkPlugin/AutoLinkPlugin.tsx

@@ -0,0 +1,31 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { COMMAND_PRIORITY_EDITOR, KEY_MODIFIER_COMMAND, $getSelection } from 'lexical'
+import { useEffect } from 'react'
+import { TOGGLE_LINK_COMMAND } from '@lexical/link'
+import { mergeRegister } from '@lexical/utils'
+
+export default function AutoLinkPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        KEY_MODIFIER_COMMAND,
+        (event: KeyboardEvent) => {
+          const isCmdK = event.key === 'k' && !event.altKey && (event.metaKey || event.ctrlKey)
+          if (isCmdK) {
+            const selection = $getSelection()
+            if (selection) {
+              editor.dispatchCommand(TOGGLE_LINK_COMMAND, selection.getTextContent())
+            }
+          }
+
+          return false
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    )
+  }, [editor])
+
+  return null
+}

packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx

@@ -20,6 +20,7 @@ import { GetEmbedsBlocks } from './Blocks/Embeds'
 import { GetDynamicTableBlocks, GetTableBlock } from './Blocks/Table'
 import Popover from '@/Components/Popover/Popover'
 import { PopoverClassNames } from '../ClassNames'
+import { GetDatetimeBlocks } from './Blocks/DateTime'
 
 export default function BlockPickerMenuPlugin(): JSX.Element {
   const [editor] = useLexicalComposerContext()
@@ -45,6 +46,7 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
       GetQuoteBlock(editor),
       GetCodeBlock(editor),
       GetDividerBlock(editor),
+      ...GetDatetimeBlocks(editor),
       ...GetAlignmentBlocks(editor),
       GetCollapsibleBlock(editor),
       ...GetEmbedsBlocks(editor),

packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/DateTime.tsx

@@ -0,0 +1,23 @@
+import { BlockPickerOption } from '../BlockPickerOption'
+import { LexicalEditor } from 'lexical'
+import { INSERT_DATETIME_COMMAND, INSERT_DATE_COMMAND, INSERT_TIME_COMMAND } from '../../Commands'
+
+export function GetDatetimeBlocks(editor: LexicalEditor) {
+  return [
+    new BlockPickerOption('Current date and time', {
+      iconName: 'authenticator',
+      keywords: ['date'],
+      onSelect: () => editor.dispatchCommand(INSERT_DATETIME_COMMAND, 'datetime'),
+    }),
+    new BlockPickerOption('Current time', {
+      iconName: 'authenticator',
+      keywords: ['time'],
+      onSelect: () => editor.dispatchCommand(INSERT_TIME_COMMAND, 'datetime'),
+    }),
+    new BlockPickerOption('Current date', {
+      iconName: 'authenticator',
+      keywords: ['date'],
+      onSelect: () => editor.dispatchCommand(INSERT_DATE_COMMAND, 'datetime'),
+    }),
+  ]
+}

packages/web/src/javascripts/Components/BlockEditor/Plugins/Commands.ts

@@ -2,3 +2,6 @@ import { createCommand, LexicalCommand } from 'lexical'
 
 export const INSERT_FILE_COMMAND: LexicalCommand<string> = createCommand('INSERT_FILE_COMMAND')
 export const INSERT_BUBBLE_COMMAND: LexicalCommand<string> = createCommand('INSERT_BUBBLE_COMMAND')
+export const INSERT_TIME_COMMAND: LexicalCommand<string> = createCommand('INSERT_TIME_COMMAND')
+export const INSERT_DATE_COMMAND: LexicalCommand<string> = createCommand('INSERT_DATE_COMMAND')
+export const INSERT_DATETIME_COMMAND: LexicalCommand<string> = createCommand('INSERT_DATETIME_COMMAND')

packages/web/src/javascripts/Components/BlockEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx

@@ -0,0 +1,103 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import {
+  COMMAND_PRIORITY_EDITOR,
+  $createTextNode,
+  $getSelection,
+  $isRangeSelection,
+  $createParagraphNode,
+} from 'lexical'
+import { useEffect } from 'react'
+import { INSERT_DATETIME_COMMAND, INSERT_TIME_COMMAND, INSERT_DATE_COMMAND } from '../Commands'
+import { mergeRegister } from '@lexical/utils'
+import { $createHeadingNode } from '@lexical/rich-text'
+import { formatDateAndTimeForNote, dateToHoursAndMinutesTimeString } from '@/Utils/DateUtils'
+import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode'
+
+export default function DatetimePlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand<string>(
+        INSERT_DATETIME_COMMAND,
+        () => {
+          const now = new Date()
+          const selection = $getSelection()
+
+          if (!$isRangeSelection(selection)) {
+            return false
+          }
+
+          const heading = $createHeadingNode('h1')
+          const dateString = $createTextNode(formatDateAndTimeForNote(now, false))
+          dateString.setFormat('italic')
+          heading.append(dateString)
+
+          const timeNode = $createTextNode(dateToHoursAndMinutesTimeString(now))
+          timeNode.toggleFormat('superscript')
+          timeNode.toggleFormat('italic')
+          heading.append(timeNode)
+
+          const newLineNode = $createParagraphNode()
+
+          selection.insertNodes([heading, newLineNode])
+
+          editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined)
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand<string>(
+        INSERT_DATE_COMMAND,
+        () => {
+          const now = new Date()
+          const selection = $getSelection()
+
+          if (!$isRangeSelection(selection)) {
+            return false
+          }
+
+          const heading = $createHeadingNode('h1')
+          const dateString = $createTextNode(formatDateAndTimeForNote(now, false))
+          dateString.setFormat('italic')
+          heading.append(dateString)
+
+          const newLineNode = $createParagraphNode()
+
+          selection.insertNodes([heading, newLineNode])
+
+          editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined)
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand<string>(
+        INSERT_TIME_COMMAND,
+        () => {
+          const now = new Date()
+          const selection = $getSelection()
+
+          if (!$isRangeSelection(selection)) {
+            return false
+          }
+
+          const heading = $createHeadingNode('h2')
+          const dateString = $createTextNode(dateToHoursAndMinutesTimeString(now))
+          dateString.setFormat('italic')
+          heading.append(dateString)
+
+          const newLineNode = $createParagraphNode()
+
+          selection.insertNodes([heading, newLineNode])
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    )
+  }, [editor])
+
+  return null
+}

packages/web/src/javascripts/Components/BlockEditor/Plugins/ImportPlugin/ImportPlugin.tsx

@@ -0,0 +1,27 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useEffect } from 'react'
+import { $convertFromMarkdownString, TRANSFORMERS } from '@lexical/markdown'
+import { $generateNodesFromDOM } from '@lexical/html'
+import { $createParagraphNode, $createRangeSelection } from 'lexical'
+
+/** Note that markdown conversion does not insert new lines. See: https://github.com/facebook/lexical/issues/2815 */
+export default function ImportPlugin({ text, format }: { text: string; format: 'md' | 'html' }): JSX.Element | null {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    editor.update(() => {
+      if (format === 'md') {
+        $convertFromMarkdownString(text, [...TRANSFORMERS])
+      } else {
+        const parser = new DOMParser()
+        const dom = parser.parseFromString(text, 'text/html')
+        const nodes = $generateNodesFromDOM(editor, dom)
+        const selection = $createRangeSelection()
+        const newLineNode = $createParagraphNode()
+        selection.insertNodes([newLineNode, ...nodes])
+      }
+    })
+  }, [editor, text, format])
+
+  return null
+}

packages/web/src/javascripts/Components/BlockEditor/SuperNoteImporter.tsx

@@ -0,0 +1,106 @@
+import { WebApplication } from '@/Application/Application'
+import { NoteType, SNNote } from '@standardnotes/snjs'
+import { FunctionComponent, useCallback, useState } from 'react'
+import { BlockEditorController } from './BlockEditorController'
+import { BlocksEditor, BlocksEditorComposer } from '@standardnotes/blocks-editor'
+import { ErrorBoundary } from '@/Utils/ErrorBoundary'
+import ModalDialog from '@/Components/Shared/ModalDialog'
+import ModalDialogButtons from '@/Components/Shared/ModalDialogButtons'
+import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
+import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
+import Button from '@/Components/Button/Button'
+import ImportPlugin from './Plugins/ImportPlugin/ImportPlugin'
+
+export function spaceSeparatedStrings(...strings: string[]): string {
+  return strings.join(' ')
+}
+
+const NotePreviewCharLimit = 160
+
+type Props = {
+  application: WebApplication
+  note: SNNote
+  closeDialog: () => void
+  onConvertComplete: () => void
+}
+
+export const SuperNoteImporter: FunctionComponent<Props> = ({ note, application, closeDialog, onConvertComplete }) => {
+  const [lastValue, setLastValue] = useState({ text: '', previewPlain: '' })
+
+  const format =
+    !note.noteType || [NoteType.Plain, NoteType.Markdown, NoteType.Code, NoteType.Task].includes(note.noteType)
+      ? 'md'
+      : 'html'
+
+  const handleChange = useCallback((value: string, preview: string) => {
+    setLastValue({ text: value, previewPlain: preview })
+  }, [])
+
+  const confirmConvert = useCallback(() => {
+    const controller = new BlockEditorController(note, application)
+    void controller.save({ text: lastValue.text, previewPlain: lastValue.previewPlain, previewHtml: undefined })
+    closeDialog()
+    onConvertComplete()
+  }, [closeDialog, application, lastValue, note, onConvertComplete])
+
+  const convertAsIs = useCallback(async () => {
+    const confirmed = await application.alertService.confirm(
+      spaceSeparatedStrings(
+        "This option is useful if you switched this note's type from Super to another plaintext-based format, and want to return to Super.",
+        'To use this option, the preview in the convert window should display a language format known as JSON.',
+        'If this is not the case, cancel this prompt.',
+      ),
+      'Are you sure?',
+    )
+    if (!confirmed) {
+      return
+    }
+
+    const controller = new BlockEditorController(note, application)
+    void controller.save({ text: note.text, previewPlain: note.preview_plain, previewHtml: undefined })
+    closeDialog()
+    onConvertComplete()
+  }, [closeDialog, application, note, onConvertComplete])
+
+  return (
+    <ModalDialog>
+      <ModalDialogLabel closeDialog={closeDialog}>
+        Convert to Super note
+        <p className="text-sm font-normal text-neutral">
+          The following is a preview of how your note will look when converted to Super. Super notes use a custom format
+          under the hood. Converting your note will transition it from plaintext to the custom Super format.
+        </p>
+      </ModalDialogLabel>
+      <ModalDialogDescription>
+        <div className="relative w-full">
+          <ErrorBoundary>
+            <BlocksEditorComposer readonly initialValue={''}>
+              <BlocksEditor
+                onChange={handleChange}
+                className="relative relative resize-none text-base focus:shadow-none focus:outline-none"
+                previewLength={NotePreviewCharLimit}
+                spellcheck={note.spellcheck}
+              >
+                <ImportPlugin text={note.text} format={format} />
+              </BlocksEditor>
+            </BlocksEditorComposer>
+          </ErrorBoundary>
+        </div>
+      </ModalDialogDescription>
+      <ModalDialogButtons>
+        <div className="flex w-full justify-between">
+          <div>
+            <Button onClick={convertAsIs}>Convert As-Is</Button>
+          </div>
+          <div className="flex">
+            <Button onClick={closeDialog}>Cancel</Button>
+            <div className="min-w-3" />
+            <Button primary onClick={confirmConvert}>
+              Convert to Super
+            </Button>
+          </div>
+        </div>
+      </ModalDialogButtons>
+    </ModalDialog>
+  )
+}

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx

@@ -26,6 +26,7 @@ const ChangeEditorButton: FunctionComponent<Props> = ({
     return note ? application.componentManager.editorForNote(note) : undefined
   })
   const [selectedEditorIcon, selectedEditorIconTint] = getIconAndTintForNoteType(selectedEditor?.package_info.note_type)
+  const [isClickOutsideDisabled, setIsClickOutsideDisabled] = useState(false)
 
   const toggleMenu = useCallback(async () => {
     const willMenuOpen = !isOpen
@@ -35,6 +36,10 @@ const ChangeEditorButton: FunctionComponent<Props> = ({
     setIsOpen(willMenuOpen)
   }, [onClickPreprocessing, isOpen])
 
+  const disableClickOutside = useCallback(() => {
+    setIsClickOutsideDisabled(true)
+  }, [])
+
   return (
     <div ref={containerRef}>
       <RoundIconButton
@@ -44,11 +49,18 @@ const ChangeEditorButton: FunctionComponent<Props> = ({
         icon={selectedEditorIcon}
         iconClassName={`text-accessory-tint-${selectedEditorIconTint}`}
       />
-      <Popover togglePopover={toggleMenu} anchorElement={buttonRef.current} open={isOpen} className="pt-2 md:pt-0">
+      <Popover
+        togglePopover={toggleMenu}
+        disableClickOutside={isClickOutsideDisabled}
+        anchorElement={buttonRef.current}
+        open={isOpen}
+        className="pt-2 md:pt-0"
+      >
         <ChangeEditorMenu
           application={application}
           isVisible={isOpen}
           note={note}
+          handleDisableClickoutsideRequest={disableClickOutside}
           closeMenu={() => {
             setIsOpen(false)
           }}

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -5,13 +5,14 @@ import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { STRING_EDIT_LOCKED_ATTEMPT } from '@/Constants/Strings'
 import { WebApplication } from '@/Application/Application'
-import { ComponentArea, NoteMutator, PrefKey, SNComponent, SNNote } from '@standardnotes/snjs'
+import { ComponentArea, NoteMutator, NoteType, PrefKey, SNComponent, SNNote } from '@standardnotes/snjs'
 import { Fragment, FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
 import { EditorMenuGroup } from '@/Components/NotesOptions/EditorMenuGroup'
 import { EditorMenuItem } from '@/Components/NotesOptions/EditorMenuItem'
 import { createEditorMenuGroups } from '../../Utils/createEditorMenuGroups'
 import { reloadFont } from '../NoteView/FontFunctions'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
+import { SuperNoteImporter } from '../BlockEditor/SuperNoteImporter'
 
 type ChangeEditorMenuProps = {
   application: WebApplication
@@ -19,6 +20,7 @@ type ChangeEditorMenuProps = {
   isVisible: boolean
   note: SNNote | undefined
   onSelect?: (component: SNComponent | undefined) => void
+  handleDisableClickoutsideRequest?: () => void
 }
 
 const getGroupId = (group: EditorMenuGroup) => group.title.toLowerCase().replace(/\s/, '-')
@@ -29,6 +31,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
   isVisible,
   note,
   onSelect,
+  handleDisableClickoutsideRequest,
 }) => {
   const editors = useMemo(
     () =>
@@ -39,6 +42,8 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
   )
   const groups = useMemo(() => createEditorMenuGroups(application, editors), [application, editors])
   const [currentComponent, setCurrentComponent] = useState<SNComponent>()
+  const [showSuperImporter, setShowSuperImporter] = useState(false)
+  const [pendingSuperItem, setPendingSuperItem] = useState<EditorMenuItem | null>(null)
 
   useEffect(() => {
     if (note) {
@@ -54,7 +59,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
         return item.component?.identifier === currentComponent.identifier
       }
 
-      return item.noteType === note?.noteType
+      return item.noteType === note?.noteType || (!note?.noteType && item.noteType === NoteType.Plain)
     },
     [currentComponent, note],
   )
@@ -109,6 +114,13 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
         return
       }
 
+      if (itemToBeSelected.noteType === NoteType.Blocks) {
+        setPendingSuperItem(itemToBeSelected)
+        handleDisableClickoutsideRequest?.()
+        setShowSuperImporter(true)
+        return
+      }
+
       let shouldMakeSelection = true
 
       if (itemToBeSelected.component) {
@@ -136,46 +148,77 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
         onSelect(itemToBeSelected.component)
       }
     },
-    [application, closeMenu, currentComponent, note, onSelect, premiumModal, selectComponent, selectNonComponent],
+    [
+      application,
+      closeMenu,
+      currentComponent,
+      note,
+      onSelect,
+      premiumModal,
+      selectComponent,
+      selectNonComponent,
+      handleDisableClickoutsideRequest,
+    ],
   )
 
-  return (
-    <Menu className="pt-0.5 pb-1" a11yLabel="Change note type menu" isOpen={isVisible}>
-      {groups
-        .filter((group) => group.items && group.items.length)
-        .map((group, index) => {
-          const groupId = getGroupId(group)
+  const handleSuperNoteConversionCompletion = useCallback(() => {
+    if (!pendingSuperItem || !note) {
+      return
+    }
 
-          return (
-            <Fragment key={groupId}>
-              <div className={`border-0 border-t border-solid border-border py-1 ${index === 0 ? 'border-t-0' : ''}`}>
-                {group.items.map((item) => {
-                  const onClickEditorItem = () => {
-                    selectItem(item).catch(console.error)
-                  }
-                  return (
-                    <MenuItem
-                      key={item.name}
-                      type={MenuItemType.RadioButton}
-                      onClick={onClickEditorItem}
-                      className={'flex-row-reverse py-2'}
-                      checked={item.isEntitled ? isSelected(item) : undefined}
-                    >
-                      <div className="flex flex-grow items-center justify-between">
-                        <div className="flex items-center">
-                          {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
-                          {item.name}
+    selectNonComponent(pendingSuperItem, note).catch(console.error)
+    closeMenu()
+  }, [note, pendingSuperItem, selectNonComponent, closeMenu])
+
+  return (
+    <>
+      <Menu className="pt-0.5 pb-1" a11yLabel="Change note type menu" isOpen={isVisible}>
+        {groups
+          .filter((group) => group.items && group.items.length)
+          .map((group, index) => {
+            const groupId = getGroupId(group)
+
+            return (
+              <Fragment key={groupId}>
+                <div className={`border-0 border-t border-solid border-border py-1 ${index === 0 ? 'border-t-0' : ''}`}>
+                  {group.items.map((item) => {
+                    const onClickEditorItem = () => {
+                      selectItem(item).catch(console.error)
+                    }
+                    return (
+                      <MenuItem
+                        key={item.name}
+                        type={MenuItemType.RadioButton}
+                        onClick={onClickEditorItem}
+                        className={'flex-row-reverse py-2'}
+                        checked={item.isEntitled ? isSelected(item) : undefined}
+                      >
+                        <div className="flex flex-grow items-center justify-between">
+                          <div className={`flex items-center ${group.featured ? 'font-bold' : ''}`}>
+                            {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
+                            {item.name}
+                          </div>
+                          {!item.isEntitled && (
+                            <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />
+                          )}
                         </div>
-                        {!item.isEntitled && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
-                      </div>
-                    </MenuItem>
-                  )
-                })}
-              </div>
-            </Fragment>
-          )
-        })}
-    </Menu>
+                      </MenuItem>
+                    )
+                  })}
+                </div>
+              </Fragment>
+            )
+          })}
+      </Menu>
+      {showSuperImporter && note && (
+        <SuperNoteImporter
+          note={note}
+          application={application}
+          onConvertComplete={handleSuperNoteConversionCompletion}
+          closeDialog={() => setShowSuperImporter(false)}
+        />
+      )}
+    </>
   )
 }
 

packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx

@@ -213,16 +213,14 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
           'Create powerful workflows and organizational layouts with per-tag display preferences.'}
       </p>
 
-      {!application.hideSubscriptionMarketing && (
-        <Button
-          primary
-          small
-          className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
-          onClick={() => application.openPurchaseFlow()}
-        >
-          Upgrade Features
-        </Button>
-      )}
+      <Button
+        primary
+        small
+        className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
+        onClick={() => application.openPurchaseFlow()}
+      >
+        Upgrade Features
+      </Button>
     </div>
   )
 

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

@@ -2,7 +2,6 @@ import { WebApplication } from '@/Application/Application'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
 import { observer } from 'mobx-react-lite'
-import { loadPurchaseFlowUrl } from '../PurchaseFlow/PurchaseFlowFunctions'
 
 type Props = {
   application: WebApplication
@@ -14,22 +13,11 @@ const UpgradeNow = ({ application, featuresController, subscriptionContoller }:
   const shouldShowCTA = !featuresController.hasFolders
   const hasAccount = subscriptionContoller.hasAccount
 
-  if (hasAccount && subscriptionContoller.hideSubscriptionMarketing) {
-    return null
-  }
-
   return shouldShowCTA ? (
     <div className="flex h-full items-center px-2">
       <button
         className="rounded bg-info py-0.5 px-1.5 text-sm font-bold uppercase text-info-contrast hover:brightness-125 lg:text-xs"
-        onClick={() => {
-          if (hasAccount) {
-            void loadPurchaseFlowUrl(application)
-            return
-          }
-
-          application.getViewControllerManager().purchaseFlowController.openPurchaseFlow()
-        }}
+        onClick={() => application.openPurchaseFlow()}
       >
         {hasAccount ? 'Unlock features' : 'Sign up to sync'}
       </button>

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

@@ -334,6 +334,8 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
       this.setState({
         editorFeatureIdentifier: note.editorIdentifier,
         noteType: note.noteType,
+        editorText: note.text,
+        editorTitle: note.title,
       })
 
       void this.reloadEditorComponent()

packages/web/src/javascripts/Components/NotesOptions/AccordionMenuGroup.tsx

@@ -5,4 +5,5 @@ export type AccordionMenuGroup<T> = {
   iconClassName?: string
   title: string
   items: Array<T>
+  featured?: boolean
 }

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

@@ -27,6 +27,7 @@ const useRegisterPopoverToParent = (popoverId: string) => {
 
 type Props = PopoverProps & {
   open: boolean
+  disableClickOutside?: boolean
 }
 
 const Popover = ({
@@ -39,6 +40,7 @@ const Popover = ({
   overrideZIndex,
   side,
   togglePopover,
+  disableClickOutside,
 }: Props) => {
   const popoverId = useRef(UuidGenerator.GenerateUuid())
 
@@ -96,6 +98,7 @@ const Popover = ({
         overrideZIndex={overrideZIndex}
         side={side}
         togglePopover={togglePopover}
+        disableClickOutside={disableClickOutside}
       >
         {children}
       </PositionedPopoverContent>

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -23,6 +23,7 @@ const PositionedPopoverContent = ({
   overrideZIndex,
   side = 'bottom',
   togglePopover,
+  disableClickOutside,
 }: PopoverContentProps) => {
   const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
   const popoverRect = useAutoElementRect(popoverElement)
@@ -50,6 +51,7 @@ const PositionedPopoverContent = ({
     anchorElement,
     togglePopover,
     childPopovers,
+    disabled: disableClickOutside,
   })
 
   useDisableBodyScrollOnMobile()

packages/web/src/javascripts/Components/Popover/Types.ts

@@ -44,6 +44,7 @@ export type PopoverContentProps = CommonPopoverProps & {
   anchorPoint?: Point
   childPopovers: Set<string>
   id: string
+  disableClickOutside?: boolean
 }
 
 export type PopoverProps =

packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts

@@ -6,6 +6,7 @@ type Options = {
   anchorElement: HTMLElement | null | undefined
   togglePopover: () => void
   childPopovers: Set<string>
+  disabled?: boolean
 }
 
 export const usePopoverCloseOnClickOutside = ({
@@ -13,6 +14,7 @@ export const usePopoverCloseOnClickOutside = ({
   anchorElement,
   togglePopover,
   childPopovers,
+  disabled,
 }: Options) => {
   useEffect(() => {
     const closeIfClickedOutside = (event: MouseEvent) => {
@@ -31,7 +33,9 @@ export const usePopoverCloseOnClickOutside = ({
       const isDescendantOfChallengeModal = !!target.closest('.challenge-modal')
 
       if (!isDescendantOfMenu && !isAnchorElement && !isDescendantOfChildPopover && !isDescendantOfChallengeModal) {
-        togglePopover()
+        if (!disabled) {
+          togglePopover()
+        }
       }
     }
 
@@ -41,5 +45,5 @@ export const usePopoverCloseOnClickOutside = ({
       document.removeEventListener('click', closeIfClickedOutside, { capture: true })
       document.removeEventListener('contextmenu', closeIfClickedOutside, { capture: true })
     }
-  }, [anchorElement, childPopovers, popoverElement, togglePopover])
+  }, [anchorElement, childPopovers, popoverElement, togglePopover, disabled])
 }

packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx

@@ -2,7 +2,6 @@ import { FunctionComponent, useState } from 'react'
 import { LinkButton, Text } from '@/Components/Preferences/PreferencesComponents/Content'
 import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/Application/Application'
-import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowFunctions'
 
 type Props = {
   application: WebApplication
@@ -16,9 +15,7 @@ const NoSubscription: FunctionComponent<Props> = ({ application }) => {
     const errorMessage = 'There was an error when attempting to redirect you to the subscription page.'
     setIsLoadingPurchaseFlow(true)
     try {
-      if (!(await loadPurchaseFlowUrl(application))) {
-        setPurchaseFlowError(errorMessage)
-      }
+      application.openPurchaseFlow()
     } catch (e) {
       setPurchaseFlowError(errorMessage)
     } finally {
@@ -31,14 +28,12 @@ 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>}
-      {!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>
-      )}
+      <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>
     </>
   )
 }

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

@@ -2,7 +2,6 @@ import { FunctionComponent, useState } from 'react'
 import { LinkButton, Text } from '@/Components/Preferences/PreferencesComponents/Content'
 import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/Application/Application'
-import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowFunctions'
 
 type Props = {
   application: WebApplication
@@ -16,9 +15,7 @@ const NoProSubscription: FunctionComponent<Props> = ({ application }) => {
     const errorMessage = 'There was an error when attempting to redirect you to the subscription page.'
     setIsLoadingPurchaseFlow(true)
     try {
-      if (!(await loadPurchaseFlowUrl(application))) {
-        setPurchaseFlowError(errorMessage)
-      }
+      application.openPurchaseFlow()
     } catch (e) {
       setPurchaseFlowError(errorMessage)
     } finally {
@@ -35,14 +32,12 @@ const NoProSubscription: FunctionComponent<Props> = ({ application }) => {
       {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
       {purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}
 
-      {!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>
-      )}
+      <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>
     </>
   )
 }

packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeatureModalType.tsx

@@ -0,0 +1,4 @@
+export enum PremiumFeatureModalType {
+  UpgradePrompt,
+  UpgradeSuccess,
+}

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

@@ -4,7 +4,7 @@ import Icon from '@/Components/Icon/Icon'
 import { WebApplication } from '@/Application/Application'
 import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
-import { loadPurchaseFlowUrl } from '../PurchaseFlow/PurchaseFlowFunctions'
+import { PremiumFeatureModalType } from './PremiumFeatureModalType'
 
 type Props = {
   application: WebApplication
@@ -13,6 +13,7 @@ type Props = {
   hasAccount: boolean
   onClose: () => void
   showModal: boolean
+  type: PremiumFeatureModalType
 }
 
 const PremiumFeaturesModal: FunctionComponent<Props> = ({
@@ -22,6 +23,7 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
   hasAccount,
   onClose,
   showModal,
+  type = PremiumFeatureModalType.UpgradePrompt,
 }) => {
   const plansButtonRef = useRef<HTMLButtonElement>(null)
 
@@ -29,11 +31,58 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
     if (hasSubscription) {
       void openSubscriptionDashboard(application)
     } else if (hasAccount) {
-      void loadPurchaseFlowUrl(application)
+      void application.openPurchaseFlow()
     } else if (window.plansUrl) {
       window.location.assign(window.plansUrl)
     }
-  }, [application, hasSubscription, hasAccount])
+    onClose()
+  }, [application, hasSubscription, hasAccount, onClose])
+
+  const UpgradePrompt = (
+    <>
+      <AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
+        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>
+    </>
+  )
+
+  const SuccessPrompt = (
+    <>
+      <AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
+        Enjoy your new powered up experience.
+      </AlertDialogDescription>
+
+      <div className="p-4">
+        <button
+          onClick={onClose}
+          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}
+        >
+          Continue
+        </button>
+      </div>
+    </>
+  )
+
+  const title =
+    type === PremiumFeatureModalType.UpgradePrompt ? 'Enable Advanced Features' : 'Your purchase was successful!'
+
+  const iconName = type === PremiumFeatureModalType.UpgradePrompt ? PremiumFeatureIconName : '🎉'
+  const iconClass =
+    type === PremiumFeatureModalType.UpgradePrompt
+      ? `h-12 w-12 ${PremiumFeatureIconClass}`
+      : 'px-7 py-2 h-24 w-24 text-[50px]'
 
   return showModal ? (
     <AlertDialog leastDestructiveRef={plansButtonRef} className="p-0">
@@ -53,25 +102,11 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
               className="mx-auto mb-5 flex h-24 w-24 items-center justify-center rounded-[50%] bg-contrast"
               aria-hidden={true}
             >
-              <Icon className={`h-12 w-12 ${PremiumFeatureIconClass}`} type={PremiumFeatureIconName} />
+              <Icon className={iconClass} size={'custom'} type={iconName} />
             </div>
-            <div className="mb-1 text-center text-lg font-bold">Enable Advanced Features</div>
+            <div className="mb-1 text-center text-lg font-bold">{title}</div>
           </AlertDialogLabel>
-          <AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
-            To take advantage of <span className="font-semibold">{featureName}</span> and other advanced features,
-            upgrade your current plan.
-          </AlertDialogDescription>
-          {!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>
-          )}
+          {type === PremiumFeatureModalType.UpgradePrompt ? UpgradePrompt : SuccessPrompt}
         </div>
       </div>
     </AlertDialog>

packages/web/src/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx

@@ -7,7 +7,6 @@ import { ChangeEventHandler, FunctionComponent, useEffect, useRef, useState } fr
 import FloatingLabelInput from '@/Components/Input/FloatingLabelInput'
 import { isEmailValid } from '@/Utils'
 import { BlueDotIcon, CircleIcon, DiamondIcon, CreateAccountIllustration } from '@standardnotes/icons'
-import { loadPurchaseFlowUrl } from '../PurchaseFlowFunctions'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -52,10 +51,7 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
   }
 
   const subscribeWithoutAccount = () => {
-    loadPurchaseFlowUrl(application).catch((err) => {
-      console.error(err)
-      application.alertService.alert(err).catch(console.error)
-    })
+    application.getViewControllerManager().purchaseFlowController.openPurchaseWebpage()
   }
 
   const handleCreateAccount = async () => {
@@ -93,13 +89,7 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
       await application.register(email, password)
 
       viewControllerManager.purchaseFlowController.closePurchaseFlow()
-
-      if (!application.hideSubscriptionMarketing) {
-        loadPurchaseFlowUrl(application).catch((err) => {
-          console.error(err)
-          application.alertService.alert(err).catch(console.error)
-        })
-      }
+      viewControllerManager.purchaseFlowController.openPurchaseFlow()
     } catch (err) {
       console.error(err)
       application.alertService.alert(err as string).catch(console.error)
@@ -170,13 +160,15 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
             >
               Sign in instead
             </button>
-            <button
-              onClick={subscribeWithoutAccount}
-              disabled={isCreatingAccount}
-              className="flex cursor-pointer items-start border-0 bg-default p-0 font-medium text-info hover:underline"
-            >
-              Subscribe without account
-            </button>
+            {!application.isNativeIOS() && (
+              <button
+                onClick={subscribeWithoutAccount}
+                disabled={isCreatingAccount}
+                className="flex cursor-pointer items-start border-0 bg-default p-0 font-medium text-info hover:underline"
+              >
+                Subscribe without account
+              </button>
+            )}
           </div>
           <Button
             className="mb-4 py-2.5 md:mb-0"

packages/web/src/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx

@@ -7,7 +7,6 @@ import { ChangeEventHandler, FunctionComponent, useEffect, useRef, useState } fr
 import FloatingLabelInput from '@/Components/Input/FloatingLabelInput'
 import { isEmailValid } from '@/Utils'
 import { BlueDotIcon, CircleIcon, DiamondIcon } from '@standardnotes/icons'
-import { loadPurchaseFlowUrl } from '../PurchaseFlowFunctions'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -75,13 +74,7 @@ const SignIn: FunctionComponent<Props> = ({ viewControllerManager, application }
         throw new Error(response.error?.message || response.data?.error?.message)
       } else {
         viewControllerManager.purchaseFlowController.closePurchaseFlow()
-
-        if (!application.hideSubscriptionMarketing) {
-          loadPurchaseFlowUrl(application).catch((err) => {
-            console.error(err)
-            application.alertService.alert(err).catch(console.error)
-          })
-        }
+        viewControllerManager.purchaseFlowController.openPurchaseFlow()
       }
     } catch (err) {
       console.error(err)

packages/web/src/javascripts/Components/Shared/ModalDialog.tsx

@@ -16,7 +16,7 @@ const ModalDialog = ({ children, onDismiss, className }: Props) => {
       <AlertDialogContent
         tabIndex={0}
         className={classNames(
-          'flex w-full flex-col rounded border border-solid border-border bg-default p-0 shadow-main md:w-160',
+          'flex max-h-[85vh] w-full flex-col rounded border border-solid border-border bg-default p-0 shadow-main md:w-160',
           className,
         )}
       >

packages/web/src/javascripts/Components/Shared/ModalDialogDescription.tsx

@@ -7,7 +7,7 @@ type Props = {
 }
 
 const ModalDialogDescription: FunctionComponent<Props> = ({ children, className = '' }) => (
-  <AlertDialogDescription className={`px-4 py-4 ${className}`}>{children}</AlertDialogDescription>
+  <AlertDialogDescription className={`overflow-y-scroll px-4 py-4 ${className}`}>{children}</AlertDialogDescription>
 )
 
 export default ModalDialogDescription

packages/web/src/javascripts/Constants/Constants.ts

@@ -22,7 +22,7 @@ export const TAG_FOLDERS_FEATURE_TOOLTIP = 'A Plus or Pro plan is required to en
 export const SMART_TAGS_FEATURE_NAME = 'Smart Tags'
 
 export const PLAIN_EDITOR_NAME = 'Plain Text'
-export const BLOCKS_EDITOR_NAME = 'Super Note'
+export const BLOCKS_EDITOR_NAME = 'Super'
 
 export const SYNC_TIMEOUT_DEBOUNCE = 350
 export const SYNC_TIMEOUT_NO_DEBOUNCE = 100

packages/web/src/javascripts/Controllers/FeaturesController.ts

@@ -1,4 +1,5 @@
 import { WebApplication } from '@/Application/Application'
+import { PremiumFeatureModalType } from '@/Components/PremiumFeaturesModal/PremiumFeatureModalType'
 import { destroyAllObjectProperties } from '@/Utils'
 import {
   ApplicationEvent,
@@ -16,6 +17,7 @@ export class FeaturesController extends AbstractViewController {
   hasSmartViews: boolean
   hasFiles: boolean
   premiumAlertFeatureName: string | undefined
+  premiumAlertType: PremiumFeatureModalType | undefined = undefined
 
   override deinit() {
     super.deinit()
@@ -25,6 +27,7 @@ export class FeaturesController extends AbstractViewController {
     ;(this.hasSmartViews as unknown) = undefined
     ;(this.hasFiles as unknown) = undefined
     ;(this.premiumAlertFeatureName as unknown) = undefined
+    ;(this.premiumAlertType as unknown) = undefined
 
     destroyAllObjectProperties(this)
   }
@@ -43,10 +46,11 @@ export class FeaturesController extends AbstractViewController {
       hasFolders: observable,
       hasSmartViews: observable,
       hasFiles: observable,
-
+      premiumAlertType: observable,
       premiumAlertFeatureName: observable,
       showPremiumAlert: action,
       closePremiumAlert: action,
+      showPurchaseSuccessAlert: action,
     })
 
     this.showPremiumAlert = this.showPremiumAlert.bind(this)
@@ -55,6 +59,9 @@ export class FeaturesController extends AbstractViewController {
     this.disposers.push(
       application.addEventObserver(async (event) => {
         switch (event) {
+          case ApplicationEvent.DidPurchaseSubscription:
+            this.showPurchaseSuccessAlert()
+            break
           case ApplicationEvent.FeaturesUpdated:
           case ApplicationEvent.Launched:
             runInAction(() => {
@@ -76,11 +83,17 @@ export class FeaturesController extends AbstractViewController {
 
   public async showPremiumAlert(featureName: string): Promise<void> {
     this.premiumAlertFeatureName = featureName
-    return when(() => this.premiumAlertFeatureName === undefined)
+    this.premiumAlertType = PremiumFeatureModalType.UpgradePrompt
+
+    return when(() => this.premiumAlertType === undefined)
+  }
+
+  showPurchaseSuccessAlert = () => {
+    this.premiumAlertType = PremiumFeatureModalType.UpgradeSuccess
   }
 
   public closePremiumAlert() {
-    this.premiumAlertFeatureName = undefined
+    this.premiumAlertType = undefined
   }
 
   private isEntitledToFiles(): boolean {

packages/web/src/javascripts/Controllers/PurchaseFlow/PurchaseFlowController.ts

@@ -1,5 +1,6 @@
+import { LoggingDomain, log } from '@/Logging'
 import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowFunctions'
-import { InternalEventBus } from '@standardnotes/snjs'
+import { InternalEventBus, AppleIAPProductId } from '@standardnotes/snjs'
 import { action, makeObservable, observable } from 'mobx'
 import { WebApplication } from '../../Application/Application'
 import { AbstractViewController } from '../Abstract/AbstractViewController'
@@ -26,15 +27,67 @@ export class PurchaseFlowController extends AbstractViewController {
     this.currentPane = currentPane
   }
 
-  openPurchaseFlow = (): void => {
+  openPurchaseFlow = (plan = AppleIAPProductId.ProPlanYearly): void => {
     const user = this.application.getUser()
     if (!user) {
       this.isOpen = true
+      return
+    }
+
+    if (this.application.isNativeIOS()) {
+      void this.beginIosIapPurchaseFlow(plan)
     } else {
       loadPurchaseFlowUrl(this.application).catch(console.error)
     }
   }
 
+  openPurchaseWebpage = () => {
+    loadPurchaseFlowUrl(this.application).catch((err) => {
+      console.error(err)
+      this.application.alertService.alert(err).catch(console.error)
+    })
+  }
+
+  beginIosIapPurchaseFlow = async (plan: AppleIAPProductId): Promise<void> => {
+    const result = await this.application.mobileDevice().purchaseSubscriptionIAP(plan)
+
+    log(LoggingDomain.Purchasing, 'BeginIosIapPurchaseFlow result', result)
+
+    if (!result) {
+      void this.application.alertService.alert('Your purchase was canceled or failed. Please try again.')
+      return
+    }
+
+    const showGenericError = () => {
+      void this.application.alertService.alert(
+        'There was an error confirming your purchase. Please contact support at [email protected].',
+      )
+    }
+
+    log(LoggingDomain.Purchasing, 'Confirming result with our server')
+
+    const token = await this.application.getNewSubscriptionToken()
+
+    if (!token) {
+      log(LoggingDomain.Purchasing, 'Unable to generate subscription token')
+      showGenericError()
+      return
+    }
+
+    const confirmResult = await this.application.subscriptions.confirmAppleIAP(result, token)
+
+    log(LoggingDomain.Purchasing, 'Server confirm result', confirmResult)
+
+    if (confirmResult) {
+      void this.application.alerts.alert(
+        'Please allow a few minutes for your subscription benefits to activate. You will see a confirmation alert in the app when your subscription is ready.',
+        'Your purchase was successful!',
+      )
+    } else {
+      showGenericError()
+    }
+  }
+
   closePurchaseFlow = (): void => {
     this.isOpen = false
   }

packages/web/src/javascripts/Controllers/Subscription/SubscriptionController.ts

@@ -21,7 +21,6 @@ export class SubscriptionController extends AbstractViewController {
   userSubscription: Subscription | undefined = undefined
   availableSubscriptions: AvailableSubscriptions | undefined = undefined
   subscriptionInvitations: Invitation[] | undefined = undefined
-  hideSubscriptionMarketing: boolean
   hasAccount: boolean
 
   override deinit() {
@@ -39,14 +38,12 @@ export class SubscriptionController extends AbstractViewController {
     private subscriptionManager: SubscriptionClientInterface,
   ) {
     super(application, eventBus)
-    this.hideSubscriptionMarketing = application.hideSubscriptionMarketing
     this.hasAccount = application.hasAccount()
 
     makeObservable(this, {
       userSubscription: observable,
       availableSubscriptions: observable,
       subscriptionInvitations: observable,
-      hideSubscriptionMarketing: observable,
       hasAccount: observable,
 
       userSubscriptionName: computed,

packages/web/src/javascripts/Hooks/usePremiumModal.tsx

@@ -1,8 +1,8 @@
 import { WebApplication } from '@/Application/Application'
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, createContext, useCallback, useContext, ReactNode } from 'react'
 import PremiumFeaturesModal from '@/Components/PremiumFeaturesModal/PremiumFeaturesModal'
+import { FeaturesController } from '@/Controllers/FeaturesController'
 
 type PremiumModalContextData = {
   activate: (featureName: string) => void
@@ -24,15 +24,13 @@ export const usePremiumModal = (): PremiumModalContextData => {
 
 interface Props {
   application: WebApplication
-  viewControllerManager: ViewControllerManager
+  featuresController: FeaturesController
   children: ReactNode
 }
 
 const PremiumModalProvider: FunctionComponent<Props> = observer(
-  ({ application, viewControllerManager, children }: Props) => {
-    const featureName = viewControllerManager.featuresController.premiumAlertFeatureName || ''
-
-    const showModal = !!featureName
+  ({ application, featuresController, children }: Props) => {
+    const featureName = featuresController.premiumAlertFeatureName || ''
 
     const hasSubscription = application.hasValidSubscription()
 
@@ -40,25 +38,26 @@ const PremiumModalProvider: FunctionComponent<Props> = observer(
 
     const activate = useCallback(
       (feature: string) => {
-        viewControllerManager.featuresController.showPremiumAlert(feature).catch(console.error)
+        featuresController.showPremiumAlert(feature).catch(console.error)
       },
-      [viewControllerManager],
+      [featuresController],
     )
 
     const close = useCallback(() => {
-      viewControllerManager.featuresController.closePremiumAlert()
-    }, [viewControllerManager])
+      featuresController.closePremiumAlert()
+    }, [featuresController])
 
     return (
       <>
-        {showModal && (
+        {featuresController.premiumAlertType != undefined && (
           <PremiumFeaturesModal
             application={application}
             featureName={featureName}
             hasSubscription={hasSubscription}
             hasAccount={hasAccount}
             onClose={close}
-            showModal={!!featureName}
+            showModal={featuresController.premiumAlertType != undefined}
+            type={featuresController.premiumAlertType}
           />
         )}
         <PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
@@ -71,12 +70,10 @@ PremiumModalProvider.displayName = 'PremiumModalProvider'
 
 const PremiumModalProviderWithDeallocateHandling: FunctionComponent<Props> = ({
   application,
-  viewControllerManager,
+  featuresController,
   children,
 }) => {
-  return (
-    <PremiumModalProvider application={application} viewControllerManager={viewControllerManager} children={children} />
-  )
+  return <PremiumModalProvider application={application} featuresController={featuresController} children={children} />
 }
 
 export default observer(PremiumModalProviderWithDeallocateHandling)

packages/web/src/javascripts/Logging.ts

@@ -9,6 +9,7 @@ export enum LoggingDomain {
   Viewport,
   Selection,
   BlockEditor,
+  Purchasing,
 }
 
 const LoggingStatus: Record<LoggingDomain, boolean> = {
@@ -18,7 +19,8 @@ const LoggingStatus: Record<LoggingDomain, boolean> = {
   [LoggingDomain.NavigationList]: false,
   [LoggingDomain.Viewport]: false,
   [LoggingDomain.Selection]: false,
-  [LoggingDomain.BlockEditor]: true,
+  [LoggingDomain.BlockEditor]: false,
+  [LoggingDomain.Purchasing]: true,
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/web/src/javascripts/Utils/DateUtils.ts

@@ -29,6 +29,12 @@ export const formatDateAndTimeForNote = (date: Date, includeTime = true) => {
   }
 }
 
+export const dateToHoursAndMinutesTimeString = (date: Date) => {
+  return date.toLocaleTimeString(undefined, {
+    timeStyle: 'short',
+  })
+}
+
 export function numHoursBetweenDates(date1: Date, date2: Date): number {
   return Math.abs(date1.getTime() - date2.getTime()) / 3600000
 }

packages/web/src/javascripts/Utils/createEditorMenuGroups.ts

@@ -126,10 +126,11 @@ const createGroupsFromMap = (map: NoteTypeToEditorRowsMap): EditorMenuGroup[] =>
 
   if (featureTrunkEnabled(FeatureTrunkName.Blocks)) {
     groups.splice(1, 0, {
-      icon: 'dashboard',
-      iconClassName: 'text-accessory-tint-1',
+      icon: 'file-doc',
+      iconClassName: 'text-accessory-tint-4',
       title: BLOCKS_EDITOR_NAME,
       items: map[NoteType.Blocks],
+      featured: true,
     })
   }
 

yarn.lock

@@ -5728,6 +5728,7 @@ __metadata:
     react-native-fingerprint-scanner: "standardnotes/react-native-fingerprint-scanner#b55d1c0ca627a87a130f758603f12911fbac200f"
     react-native-flag-secure-android: "standardnotes/react-native-flag-secure-android#cb08e74583c22a5d912842459b35ebbbb4bcd852"
     react-native-fs: ^2.19.0
+    react-native-iap: ^12.4.4
     react-native-keychain: "standardnotes/react-native-keychain#d277d360494cbd02be4accb4a360772a8e0e97b6"
     react-native-privacy-snapshot: "standardnotes/react-native-privacy-snapshot#653e904c90fc6f2b578da59138f2bfe5d7f942fe"
     react-native-share: ^7.9.0
@@ -25623,6 +25624,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-iap@npm:^12.4.4":
+  version: 12.4.4
+  resolution: "react-native-iap@npm:12.4.4"
+  peerDependencies:
+    react: ">=16.13.1"
+    react-native: ">=0.65.1"
+  checksum: f5c71ba006d12bc12791f085d5da70259e06d81d333f67dca4499cee189266b3eed88078c29f0d01138fccd97e87893936de4946a21a322c7bbb2e601273471f
+  languageName: node
+  linkType: hard
+
 "react-native-keychain@standardnotes/react-native-keychain#d277d360494cbd02be4accb4a360772a8e0e97b6":
   version: 8.0.0
   resolution: "react-native-keychain@https://github.com/standardnotes/react-native-keychain.git#commit=d277d360494cbd02be4accb4a360772a8e0e97b6"