From 6f18664564be8d64ba8ea1c3c96dc6b9fb796f43 Mon Sep 17 00:00:00 2001
From: Gorjan Petrovski <mogi57@gmail.com>
Date: Mon, 11 Oct 2021 17:29:41 +0200
Subject: [PATCH] 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()
---
 .../components/AccountMenu/Authentication.tsx |  4 +---
 .../components/AccountMenu/Footer.tsx         |  4 +---
 .../preferences/panes/AccountPreferences.tsx  |  5 ++--
 .../preferences/panes/account/SignOutView.tsx |  3 +--
 .../account/subscription/NoSubscription.tsx   | 23 ++++++++++---------
 .../account/subscription/Subscription.tsx     |  2 +-
 6 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/components/AccountMenu/Authentication.tsx b/app/assets/javascripts/components/AccountMenu/Authentication.tsx
index cc401159a..3687f0865 100644
--- a/app/assets/javascripts/components/AccountMenu/Authentication.tsx
+++ b/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">
diff --git a/app/assets/javascripts/components/AccountMenu/Footer.tsx b/app/assets/javascripts/components/AccountMenu/Footer.tsx
index c5c291342..ac4b67f9d 100644
--- a/app/assets/javascripts/components/AccountMenu/Footer.tsx
+++ b/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>
diff --git a/app/assets/javascripts/preferences/panes/AccountPreferences.tsx b/app/assets/javascripts/preferences/panes/AccountPreferences.tsx
index 1523e9a0f..90161807a 100644
--- a/app/assets/javascripts/preferences/panes/AccountPreferences.tsx
+++ b/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>
     );
diff --git a/app/assets/javascripts/preferences/panes/account/SignOutView.tsx b/app/assets/javascripts/preferences/panes/account/SignOutView.tsx
index 725e8b7f3..3c713dc04 100644
--- a/app/assets/javascripts/preferences/panes/account/SignOutView.tsx
+++ b/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} />
     );
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx
index 071331823..ca5a1c953 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx
+++ b/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>
     </>
   );
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
index 0e9ce9126..780af8c8c 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
+++ b/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 ? (