fix: add ability to subscribe without account (#722)

.env.sample

@@ -8,6 +8,7 @@ RAILS_SERVE_STATIC_FILES=true
 SECRET_KEY_BASE=test
 APP_HOST=http://localhost:3001
 PURCHASE_URL=https://standardnotes.com/purchase
+PLANS_URL=https://standardnotes.com/plans
 DASHBOARD_URL=http://standardnotes.com/dashboard
 
 SF_DEFAULT_SERVER=http://localhost:3000

app/assets/javascripts/app.ts

@@ -7,6 +7,8 @@ declare global {
     // eslint-disable-next-line camelcase
     _purchase_url?: string;
     // eslint-disable-next-line camelcase
+    _plans_url?: string;
+    // eslint-disable-next-line camelcase
     _dashboard_url?: string;
   }
 }

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

@@ -42,7 +42,7 @@ export const NoSubscription: FunctionalComponent<{
         <LinkButton
           className="min-w-20 mt-3 mr-3"
           label="Learn More"
-          link="https://standardnotes.com/plans"
+          link={window._plans_url as string}
         />
         {application.hasAccount() &&
           <Button

app/assets/javascripts/purchaseFlow/PurchaseFlowWrapper.tsx

@@ -11,10 +11,13 @@ export type PurchaseFlowWrapperProps = {
 };
 
 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;
+  if (application.noAccount()) {
+    return `${window._purchase_url}/offline?&success_url=${successUrl}`;
+  }
+  const token = await application.getNewSubscriptionToken();
+  if (token) {
     return `${window._purchase_url}?subscription_token=${token}&success_url=${successUrl}`;
   }
   return undefined;

app/assets/javascripts/purchaseFlow/panes/CreateAccount.tsx

@@ -60,6 +60,13 @@ export const CreateAccount: FunctionComponent<Props> = observer(
       setCurrentPane(PurchaseFlowPane.SignIn);
     };
 
+    const subscribeWithoutAccount = () => {
+      loadPurchaseFlowUrl(application).catch((err) => {
+        console.error(err);
+        application.alertService.alert(err);
+      });
+    };
+
     const handleCreateAccount = async () => {
       if (!email) {
         emailInputRef?.current!.focus();
@@ -192,6 +199,13 @@ export const CreateAccount: FunctionComponent<Props> = observer(
               disabled={isCreatingAccount}
             />
           </div>
+          <button
+              onClick={subscribeWithoutAccount}
+              disabled={isCreatingAccount}
+              className="p-0 bg-default border-0 font-medium color-info cursor-pointer hover:underline"
+            >
+              Subscribe without account
+            </button>
         </div>
         <Illustration />
       </div>

app/views/application/app.html.erb

@@ -36,6 +36,7 @@
       window._enable_unfinished_features = "<%= ENV['ENABLE_UNFINISHED_FEATURES'] %>" === 'true';
       window._websocket_url = "<%= ENV['WEBSOCKET_URL'] %>";
       window._purchase_url = "<%= ENV['PURCHASE_URL'] %>";
+      window._plans_url = "<%= ENV['PLANS_URL'] %>";
       window._dashboard_url = "<%= ENV['DASHBOARD_URL'] %>";
     </script>
 

index.html

@@ -34,6 +34,7 @@
   data-enable-unfinished-features="<%= env.ENABLE_UNFINISHED_FEATURES %>"
   data-web-socket-url="<%= env.DEV_WEBSOCKET_URL %>"
   data-purchase-url="<%= env.PURCHASE_URL %>"
+  data-plans-url="<%= env.PLANS_URL %>"
   data-dashboard-url="<%= env.DASHBOARD_URL %>"
 >
   <script>
@@ -42,6 +43,7 @@
     window._enable_unfinished_features = document.body.dataset.enableUnfinishedFeatures === 'true';
     window._websocket_url = document.body.dataset.webSocketUrl;
     window._purchase_url = document.body.dataset.purchaseUrl;
+    window._plans_url = document.body.dataset.plansUrl;
     window._dashboard_url = document.body.dataset.dashboardUrl;
   </script>
   <application-group-view />