feat: add purchase url (#695)

* feat: add purchase url

* chore: bump snjs

* fix: reuse existing function

.env.sample

@@ -7,6 +7,7 @@ RAILS_LOG_LEVEL=INFO
 RAILS_SERVE_STATIC_FILES=true
 SECRET_KEY_BASE=test
 APP_HOST=http://localhost:3001
+PURCHASE_URL=https://standardnotes.com/purchase
 
 EXTENSIONS_MANAGER_LOCATION=extensions/extensions-manager/dist/index.html
 SF_DEFAULT_SERVER=http://localhost:3000

app/assets/javascripts/app.ts

@@ -1,5 +1,14 @@
 'use strict';
 
+declare global {
+  interface Window {
+    // eslint-disable-next-line camelcase
+    _bugsnag_api_key?: string;
+    // eslint-disable-next-line camelcase
+    _purchase_url?: string;
+  }
+}
+
 import { SNLog } from '@standardnotes/snjs';
 import angular from 'angular';
 import { configRoutes } from './routes';

app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx

@@ -3,7 +3,7 @@ import { LinkButton, Text } from '@/preferences/components';
 import { Button } from '@/components/Button';
 import { WebApplication } from "@/ui_models/application";
 import { useState } from "preact/hooks";
-import { isDesktopApplication } from "@/utils";
+import { loadPurchaseFlowUrl } from "@/purchaseFlow/PurchaseFlowWrapper";
 
 export const NoSubscription: FunctionalComponent<{
   application: WebApplication;
@@ -15,12 +15,7 @@ export const NoSubscription: FunctionalComponent<{
     const errorMessage = 'There was an error when attempting to redirect you to the subscription page.';
     setIsLoadingPurchaseFlow(true);
     try {
-      const url = await application.getPurchaseFlowUrl();
+      if (!await loadPurchaseFlowUrl(application)) {
-      if (url) {
-        const currentUrl = window.location.href;
-        const successUrl = isDesktopApplication() ? `standardnotes://${currentUrl}` : currentUrl;
-        window.location.assign(`${url}&success_url=${successUrl}`);
-      } else {
         setPurchaseFlowError(errorMessage);
       }
     } catch (e) {

app/assets/javascripts/purchaseFlow/PurchaseFlowWrapper.tsx

@@ -10,17 +10,25 @@ export type PurchaseFlowWrapperProps = {
   application: WebApplication;
 };
 
+export const getPurchaseFlowUrl = async (application: WebApplication): Promise<string | undefined> => {
+  const token = await application.getNewSubscriptionToken();
+  if (token) {
+    const currentUrl = window.location.href;
+    const successUrl = isDesktopApplication() ? `standardnotes://${currentUrl}` : currentUrl;
+    return `${window._purchase_url}?subscription_token=${token}&success_url=${successUrl}`;
+  }
+  return undefined;
+};
+
 export const loadPurchaseFlowUrl = async (
   application: WebApplication
-): Promise<void> => {
+): Promise<boolean> => {
-  const url = await application.getPurchaseFlowUrl();
+  const url = await getPurchaseFlowUrl(application);
   if (url) {
-    const currentUrl = window.location.href.split('/?')[0];
+    window.location.assign(url);
-    const successUrl = isDesktopApplication()
+    return true;
-      ? `standardnotes://${currentUrl}`
-      : currentUrl;
-    window.location.assign(`${url}&success_url=${successUrl}`);
   }
+  return false;
 };
 
 export const PurchaseFlowWrapper: FunctionComponent<PurchaseFlowWrapperProps> =

app/assets/javascripts/services/errorReporting.ts

@@ -5,13 +5,6 @@ import Bugsnag from '@bugsnag/js';
 import { WebCrypto } from '../crypto';
 import { AppVersion } from '@/version';
 
-declare global {
-  interface Window {
-    // eslint-disable-next-line camelcase
-    _bugsnag_api_key?: string;
-  }
-}
-
 function redactFilePath(line: string): string {
   const fileName = line.match(/\w+\.(html|js)/)?.[0];
   const redacted = '<redacted file path>';

app/views/application/app.html.erb

@@ -37,6 +37,7 @@
       window._bugsnag_api_key = "<%= ENV['BUGSNAG_API_KEY'] %>";
       window._enable_unfinished_features = "<%= ENV['ENABLE_UNFINISHED_FEATURES'] %>" === 'true';
       window._websocket_url = "<%= ENV['WEBSOCKET_URL'] %>";
+      window._purchase_url = "<%= ENV['PURCHASE_URL'] %>";
     </script>
 
     <% if Rails.env.development? %>

index.html

@@ -34,6 +34,7 @@
   data-bugsnag-api-key="<%= env.DEV_BUGSNAG_API_KEY %>"
   data-enable-unfinished-features="<%= env.ENABLE_UNFINISHED_FEATURES %>"
   data-web-socket-url="<%= env.DEV_WEBSOCKET_URL %>"
+  data-purchase-url="<%= env.PURCHASE_URL %>"
 >
   <script>
     window._default_sync_server = document.body.dataset.defaultSyncServer || "https://api.standardnotes.com";
@@ -41,6 +42,7 @@
     window._bugsnag_api_key = document.body.dataset.bugsnagApiKey;
     window._enable_unfinished_features = document.body.dataset.enableUnfinishedFeatures === 'true';
     window._websocket_url = document.body.dataset.webSocketUrl;
+    window._purchase_url = document.body.dataset.purchaseUrl;
   </script>
   <application-group-view />
 </body>

package.json

@@ -73,7 +73,7 @@
     "@reach/listbox": "^0.16.1",
     "@standardnotes/features": "1.7.2",
     "@standardnotes/sncrypto-web": "1.5.2",
-    "@standardnotes/snjs": "2.15.2",
+    "@standardnotes/snjs": "2.16.0",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",
     "preact": "^10.5.12",