feat: Purchase "Create account" & "Sign in" flows and Floating label input (#672)

app/assets/javascripts/ui_models/app_state/app_state.ts

@@ -23,6 +23,7 @@ import { NotesState } from './notes_state';
 import { TagsState } from './tags_state';
 import { AccountMenuState } from '@/ui_models/app_state/account_menu_state';
 import { PreferencesState } from './preferences_state';
+import { PurchaseFlowState } from './purchase_flow_state';
 import { QuickSettingsState } from './quick_settings_state';
 
 export enum AppStateEvent {
@@ -67,6 +68,7 @@ export class AppState {
   readonly accountMenu: AccountMenuState;
   readonly actionsMenu = new ActionsMenuState();
   readonly preferences = new PreferencesState();
+  readonly purchaseFlow: PurchaseFlowState;
   readonly noAccountWarning: NoAccountWarningState;
   readonly noteTags: NoteTagsState;
   readonly sync = new SyncState();
@@ -113,6 +115,7 @@ export class AppState {
       application,
       this.appEventObserverRemovers
     );
+    this.purchaseFlow = new PurchaseFlowState(application);
     this.addAppEventObserver();
     this.streamNotesAndTags();
     this.onVisibilityChange = () => {
@@ -284,6 +287,8 @@ export class AppState {
           break;
         case ApplicationEvent.Launched:
           this.locked = false;
+          if (window.location.search.includes('purchase=true'))
+            this.purchaseFlow.openPurchaseFlow();
           break;
         case ApplicationEvent.SyncStatusChanged:
           this.sync.update(this.application.getSyncStatus());

app/assets/javascripts/ui_models/app_state/purchase_flow_state.ts

@@ -0,0 +1,38 @@
+import { action, makeObservable, observable } from 'mobx';
+import { WebApplication } from '../application';
+
+export enum PurchaseFlowPane {
+  SignIn,
+  CreateAccount,
+}
+
+export class PurchaseFlowState {
+  isOpen = false;
+  currentPane = PurchaseFlowPane.CreateAccount;
+
+  constructor(private application: WebApplication) {
+    makeObservable(this, {
+      isOpen: observable,
+      currentPane: observable,
+
+      setCurrentPane: action,
+      openPurchaseFlow: action,
+      closePurchaseFlow: action,
+    });
+  }
+
+  setCurrentPane = (currentPane: PurchaseFlowPane): void => {
+    this.currentPane = currentPane;
+  };
+
+  openPurchaseFlow = (): void => {
+    const user = this.application.getUser();
+    if (!user) {
+      this.isOpen = true;
+    }
+  };
+
+  closePurchaseFlow = (): void => {
+    this.isOpen = false;
+  };
+}