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/components/AccountMenu/Authentication.tsx

@@ -43,8 +43,6 @@ const Authentication = observer(({ application, appState }: Props) => {
     closeAccountMenu,
   } = appState.accountMenu;
 
-  const user = application.getUser();
-
   useEffect(() => {
     if (isEmailFocused) {
       emailInputRef.current.focus();
@@ -207,7 +205,7 @@ const Authentication = observer(({ application, appState }: Props) => {
 
   return (
     <>
-      {!user && !showSignIn && !showRegister && (
+      {!application.hasAccount() && !showSignIn && !showRegister && (
         <div className="sk-panel-section sk-panel-hero">
           <div className="sk-panel-row">
             <div className="sk-h1">

app/assets/javascripts/components/AccountMenu/Footer.tsx

@@ -17,8 +17,6 @@ const Footer = observer(({ application, appState }: Props) => {
     setSigningOut,
   } = appState.accountMenu;
 
-  const user = application.getUser();
-
   const { showBetaWarning, disableBetaWarning: disableAppStateBetaWarning } =
     appState;
 
@@ -62,7 +60,7 @@ const Footer = observer(({ application, appState }: Props) => {
         )}
         {!showSignIn && !showRegister && (
           <a className="sk-a right danger capitalize" onClick={signOut}>
-            {user ? 'Sign out' : 'Clear session data'}
+            {application.hasAccount() ? 'Sign out' : 'Clear session data'}
           </a>
         )}
       </div>

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 (!application.hasAccount())
-  if (!isLoggedIn)
     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="Learn More"
-          label="Refresh"
+          link="https://standardnotes.com/plans"
-          onClick={() => null}
-        />
-        <Button
-          className="min-w-20 mt-3"
-          type="primary"
-          label="Purchase subscription"
-          onClick={onPurchaseClick}
         />
+        {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 ? (