feat(preferences): no-subscription for non logged in users (#676)

* feat(preferences): no-subscription for non logged in users

* fix: check if user has account using application.hasAccount()

app/assets/javascripts/preferences/panes/AccountPreferences.tsx

@@ -17,12 +17,12 @@ type Props = {
 
 export const AccountPreferences = observer(
   ({ application, appState }: Props) => {
-    const isLoggedIn = application.getUser();
 
-    if (!isLoggedIn) {
+    if (!application.hasAccount()) {
       return (
         <PreferencesPane>
           <Authentication application={application} appState={appState} />
+          <SubscriptionWrapper application={application} />
           <SignOutWrapper application={application} appState={appState} />
         </PreferencesPane>
       );
@@ -32,7 +32,6 @@ export const AccountPreferences = observer(
       <PreferencesPane>
         <Credentials application={application} />
         <Sync application={application} />
-        <SubscriptionWrapper application={application} />
         <SignOutWrapper application={application} appState={appState} />
       </PreferencesPane>
     );

app/assets/javascripts/preferences/panes/account/SignOutView.tsx

@@ -96,8 +96,7 @@ export const SignOutWrapper: FunctionComponent<{
   application: WebApplication;
   appState: AppState;
 }> = observer(({ application, appState }) => {
-  const isLoggedIn = application.getUser() != undefined;
-  if (!isLoggedIn)
+  if (!application.hasAccount())
     return (
       <ClearSessionDataView appState={appState} application={application} />
     );

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

@@ -1,5 +1,5 @@
 import { FunctionalComponent } from "preact";
-import { Text } from '@/preferences/components';
+import { LinkButton, Text } from '@/preferences/components';
 import { Button } from '@/components/Button';
 import { WebApplication } from "@/ui_models/application";
 import { useState } from "preact/hooks";
@@ -44,18 +44,19 @@ export const NoSubscription: FunctionalComponent<{
         </Text>
       )}
       <div className="flex">
-        <Button
+        <LinkButton
           className="min-w-20 mt-3 mr-3"
-          type="normal"
-          label="Refresh"
-          onClick={() => null}
-        />
-        <Button
-          className="min-w-20 mt-3"
-          type="primary"
-          label="Purchase subscription"
-          onClick={onPurchaseClick}
+          label="Learn More"
+          link="https://standardnotes.com/plans"
         />
+        {application.hasAccount() &&
+          <Button
+            className="min-w-20 mt-3"
+            type="primary"
+            label="Subscribe"
+            onClick={onPurchaseClick}
+          />
+        }
       </div>
     </>
   );

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

@@ -71,7 +71,7 @@ export const Subscription: FunctionComponent<Props> = observer(({
           <div className="flex-grow flex flex-col">
             <Title>Subscription</Title>
             {error ? (
-              <Text>No subscription information available.</Text>
+              <NoSubscription application={application} />
             ) : loading ? (
               <Text>Loading subscription information...</Text>
             ) : userSubscription && userSubscription.endsAt > now ? (