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

app/assets/javascripts/purchaseFlow/PurchaseFlowWrapper.tsx

@@ -0,0 +1,33 @@
+import { WebApplication } from '@/ui_models/application';
+import { AppState } from '@/ui_models/app_state';
+import { isDesktopApplication } from '@/utils';
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { PurchaseFlowView } from './PurchaseFlowView';
+
+export type PurchaseFlowWrapperProps = {
+  appState: AppState;
+  application: WebApplication;
+};
+
+export const loadPurchaseFlowUrl = async (
+  application: WebApplication
+): Promise<void> => {
+  const url = await application.getPurchaseFlowUrl();
+  if (url) {
+    const currentUrl = window.location.href.split('/?')[0];
+    const successUrl = isDesktopApplication()
+      ? `standardnotes://${currentUrl}`
+      : currentUrl;
+    window.location.assign(`${url}&success_url=${successUrl}`);
+  }
+};
+
+export const PurchaseFlowWrapper: FunctionComponent<PurchaseFlowWrapperProps> =
+  observer(({ appState, application }) => {
+    if (!appState.purchaseFlow.isOpen) {
+      return null;
+    }
+
+    return <PurchaseFlowView appState={appState} application={application} />;
+  });